From 715921e036e63f4cc2e7821999255ad70cfa78a9 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 31 Jan 2026 22:43:21 +0000
Subject: [PATCH 01/13] Initial plan


From 89c89c9f9fa9fd466cef7423eb9964c5cd14b1da Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 31 Jan 2026 22:49:25 +0000
Subject: [PATCH 02/13] =?UTF-8?q?Add=20complete=205.1=E2=86=926.0=20upgrad?=
 =?UTF-8?q?e=20guide=20and=20remove=20old=20upgrade=20guides?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: lcharette <2566513+lcharette@users.noreply.github.com>
---
 .../01.46-to-50/01.changelog/docs.md          | 139 ----
 .../22.upgrading/01.46-to-50/02.guide/docs.md | 347 ---------
 .../01.46-to-50/03.roadmap/docs.md            |  54 --
 .../6.0/22.upgrading/01.46-to-50/chapter.md   |  12 -
 .../01.51-to-60/01.changelog/docs.md          | 334 +++++++++
 .../22.upgrading/01.51-to-60/02.guide/docs.md | 672 ++++++++++++++++++
 .../01.51-to-60/03.what-to-expect/docs.md     | 376 ++++++++++
 .../6.0/22.upgrading/01.51-to-60/chapter.md   |  86 +++
 .../02.50-to-51/01.changelog/docs.md          | 107 ---
 .../22.upgrading/02.50-to-51/02.guide/docs.md | 291 --------
 .../02.50-to-51/03.roadmap/docs.md            |  27 -
 .../6.0/22.upgrading/02.50-to-51/chapter.md   |  14 -
 app/pages/6.0/22.upgrading/chapter.md         |  54 +-
 13 files changed, 1518 insertions(+), 995 deletions(-)
 delete mode 100644 app/pages/6.0/22.upgrading/01.46-to-50/01.changelog/docs.md
 delete mode 100644 app/pages/6.0/22.upgrading/01.46-to-50/02.guide/docs.md
 delete mode 100644 app/pages/6.0/22.upgrading/01.46-to-50/03.roadmap/docs.md
 delete mode 100644 app/pages/6.0/22.upgrading/01.46-to-50/chapter.md
 create mode 100644 app/pages/6.0/22.upgrading/01.51-to-60/01.changelog/docs.md
 create mode 100644 app/pages/6.0/22.upgrading/01.51-to-60/02.guide/docs.md
 create mode 100644 app/pages/6.0/22.upgrading/01.51-to-60/03.what-to-expect/docs.md
 create mode 100644 app/pages/6.0/22.upgrading/01.51-to-60/chapter.md
 delete mode 100644 app/pages/6.0/22.upgrading/02.50-to-51/01.changelog/docs.md
 delete mode 100644 app/pages/6.0/22.upgrading/02.50-to-51/02.guide/docs.md
 delete mode 100644 app/pages/6.0/22.upgrading/02.50-to-51/03.roadmap/docs.md
 delete mode 100644 app/pages/6.0/22.upgrading/02.50-to-51/chapter.md

diff --git a/app/pages/6.0/22.upgrading/01.46-to-50/01.changelog/docs.md b/app/pages/6.0/22.upgrading/01.46-to-50/01.changelog/docs.md
deleted file mode 100644
index 754262e3..00000000
--- a/app/pages/6.0/22.upgrading/01.46-to-50/01.changelog/docs.md
+++ /dev/null
@@ -1,139 +0,0 @@
----
-title: What's new ?
-description: A detailed look at what's new in UserFrosting 5.
-obsolete: true
----
-
-UserFrosting 5 is the culmination of two years of work. It is a complete rewrite of the backend PHP code. And by complete, we _really_ mean **complete**. No class was left untouched! The key points are :
-- Slim 3 upgraded to Slim 4
-- Pimple Dependency Injection Container replaced with [PHP-DI](https://php-di.org)
-- Frontend assets management replaced with [Webpack Encore](https://symfony.com/doc/current/frontend.html)
-- New Sprinkle system, now with extra modularity
-- Skeleton type main repo for easier initial development
-- Built-in sprinkle are now loaded by Composer
-- New Event dispatcher and listener services
-- New Bakery command available for easier debugging
-- Added return type, type-hint and other quality improvement across all code
-- (Almost) 100% test coverage and quality check through PHPStan
-- ***And so much more***
-
-The Slim migration itself is a big deal. While brining UF to a more modern era, it had the most impact on the core changes applied to the UserFrosting framework. Most changes were made in response to the new Slim 4 requirements and changes. It also required the use of a new Dependency Injector, which itself _really_ brought UserFrosting 5 to a whole new level. You should really check out [PHP-DI](https://php-di.org), it's awesome!
-
-Basically, UserFrosting 5 uses updated dependencies, all of existing code have been updated to new standard and new test coverage should provide better long term stability.
-
-## What UserFrosting 5 isn't ? 
-
-UserFrosting 5 is not a drop-in replacement for UserFrosting 4. The whole backend has been rewritten, with a new container, new sprinkle system, etc. which will require most sprinkle and app to be updated manually.
-
-## What's the same ?
-
-UserFrosting 5 keeps the same frontend as UserFrosting 4. But the bases have been set for the future, with Webpack Encore and the current AdminLTE theme have been separated in it's own Sprinkle, all of which provides the necessary tools for [Vue.js](https://vuejs.org) or other similar frontend in the future.
-
-The database structure is 99% identical to UserFrosting 4. One migration have been added, but it's a simple, optional even, modification. This means your data shouldn't be impacted by the upgrade. 
-
-## New requirements
-
-With the release of PHP 8 in november 2020 some major updates where made to the system requirements. UserFrosting 5 now requires :
-- PHP 8.0 or higher
-- [Node.js](https://nodejs.org/en/) 18 or higher
-- [Composer 2](https://getcomposer.org/)
-
-While any version of PHP 8 is supported, we recommend you use the latest version.
-
-## New Structure
-
-This is where all the magic happened. The [new structure](structure) introduced in UserFrosting 5 makes it even more easier to separate your code from UserFrosting's code. This also makes it easier for new developer to get started with UserFrosting. Upgrading will also be easier, as everything is now managed by Composer. Requesting a new major version will required to edit your `composer.json` file. Finally, default pages and content are not part of the Core Sprinkle anymore. This makes easier to overwrite default pages.
-
-The old directory structure looked like this:
-
-```txt
-├── app/
-    ├── cache/
-    ├── database/
-    ├── logs/
-    ├── sessions/
-    ├── sprinkles/
-        ├── account/
-        ├── admin/
-        ├── core/
-        └── yourSprinkle/
-            ├── assets/
-            ├── config/
-            ├── locale/
-            ├── routes/
-            ├── schema/
-            ├── src/
-                ├── Bakery/
-                ├── Controllers/
-                ├── Database/
-                ├── [...]
-                └── Sprunje/
-            ├── templates/
-            ├── tests/
-            ├── composer.json
-            └── asset-bundles.json
-    ├── storage/
-    ├── system/
-    ├── tests/
-    ├── .env
-    ├── defines.php
-    └── sprinkles.json
-├── public/
-├── vendor/
-└── composer.json
-```
-
-The new structure looks like this:
-```txt
-├── app/
-    ├── assets/
-    ├── cache/
-    ├── config/
-    ├── database/
-    ├── locale/
-    ├── logs/
-    ├── schema/
-    ├── src/
-        ├── Bakery/
-        ├── Controllers/
-        ├── Database/
-        ├── [...]
-        ├── Routes/
-        ├── Sprunje/
-        └── yourSprinkle.php
-    ├── storage/
-    ├── templates/
-    ├── tests/
-    └── .env
-├── public/
-├── vendor/
-    ├── account/
-    ├── admin/
-    └── core/
-├── composer.json
-├── package.json
-└── webpack.config.js
-```
-
-As you see, since `/vendor` should be omitted from version control (your Github Repository), the new structure is much more cleaner! This doesn't means your code can't be distributed and added as a sprinkle in another UserFrosting powered app. [Community Sprinkle](sprinkles/community) are still a thing! This new structure even makes it easier to develop them!
-
-### Sprinkles
-All [bundled Sprinkles](structure/sprinkles#bundled-sprinkles) are now managed by Composer, and directly required in your project's `composer.json`. Gone is the `app/sprinkles` directory. Your app now sits in `/app` directly and other Sprinkles will now be loaded into the `vendor/` directory, like any other dependencies.
-
-Gone is also `app/sprinkles.json`. To register sprinkles, we now use **[Sprinkle Recipe](sprinkles/recipe)**. Recipes makes it easier for sprinkle to define other sprinkle as dependencies. In fact, recipe also makes it easier for Sprinkles to _register_ any class and resources they need. UserFrosting 4 used to rely on naming convention and auto-discovery, which was prone to errors. Registering resources also makes the structure more adaptable, as there's **no** naming convention anymore for classes : The structure of `/src` can be whatever you want! You can read more about [Sprinkle Recipe here](sprinkles/recipe).
-
-Finally, as mentioned before, the AdminLTE Theme has been moved to it's own Sprinkle. This will make it easier to switch theme in the future, but also means some reference will need to be updated.
-
-### Routes
-
-Routes used to be in `sprinkles/routes`. While still technically PHP files, they were not part of any namespace, and were included using the [`require()`](https://www.php.net/manual/fr/function.require.php) method. Routes are now namespaced, same as any other class in `src/`.
-
-It also means routes file are not directly overwritten anymore, similar to template files. They're not real classes, and must be mapped, or in case of UserFrosting 5, injected properly.
-
-### Dependency injection
-
-As mentioned in previous paragraphs, UserFrosting 5 now uses [PHP-DI](https://php-di.org) a. This brings a **ton** of new features and capability. The best way to understand how it affect your code in UserFrosting 5, head over to the [Dependency Injection Chapter](dependency-injection).
-
-## Migrating
-
-Now that we've cover the basics changes, follow on to the next pages to the steps required to bring your app up to date with UserFrosting 5.
diff --git a/app/pages/6.0/22.upgrading/01.46-to-50/02.guide/docs.md b/app/pages/6.0/22.upgrading/01.46-to-50/02.guide/docs.md
deleted file mode 100644
index 882800eb..00000000
--- a/app/pages/6.0/22.upgrading/01.46-to-50/02.guide/docs.md
+++ /dev/null
@@ -1,347 +0,0 @@
----
-title: Upgrade Guide
-description: Upgrade guide from version 4.6.x to 5.0.x
-obsolete: true
----
-
-Upgrading an existing sprinkle from UserFrosting 4 to UserFrosting 5 can unfortunately be a difficult task. It all depends on how much customization of the core code you have done. Very basic sites will be easy to upgrade, very complex ones could be a nightmare. However, it's for the greater good; UserFrosting 5 is more modern and uses new techniques.
-
-> [!WARNING]
-> This guide contains the most important changes and the actions you need to take to upgrade your UserFrosting 4 Sprinkle. However, **it's far from complete**, as there are too many changes to document. Make sure you have a backup of your existing application and your **development database** before starting.
-> If you spot anything missing, don't hesitate to contribute to this page via the [*edit this page*](https://github.com/userfrosting/learn/blob/5.1/pages/22.upgrading/01.46-to-50/02.guide/docs.md) button at the top.
-
-## Before you start
-
-The upgrade path for your UserFrosting 4 sprinkle will depend on how many features you're using. The good news is, the database structure is the same, and the frontend is 90% the same.
-
-To begin the upgrade journey, **the first thing you should do is a [fresh install](installation) of UserFrosting 5**. This is important, as it will allow you to familiarize yourself with the new structure, as well as validate that your [local development environment](background/develop-locally-serve-globally) is up to date and meets the [minimum requirements](installation/requirements).
-
-Once you have a functioning vanilla version of UserFrosting 5, you can begin to upgrade your sprinkle.
-
-> [!NOTE]
-> While the database structure is mostly the same between V4 and V5, it is highly recommended you keep a backup of your existing application and your **development database**.
-
-## Upgrading your sprinkle structure
-
-As seen on the [previous page](upgrading/46-to-50/changelog), one of the biggest changes is the app structure. It's recommended before you start to head over to [Chapter 3 - App Structure](structure), to learn more about this new structure.
-
-Once you're familiar with the new structure, it's time to move things around so your sprinkle meets the new structure. There are two options here: You can either start from scratch from the [Skeleton repo](structure/introduction#the-app-skeleton-your-project-s-template), *or* you can manually upgrade in place.
-
-The first option is easier as the base has been set up for you, and you can start right away moving your code into the skeleton created from the sprinkle template, in a new git repository. However, its drawback is you'll probably lose your Git History. The second option is harder, but since you're starting from your existing code, you'll keep your git history if your code is saved on GitHub for example.
-
-### Option 1 - Start over from the Skeleton
-
-To start with this option, the first step is to create a [fresh install](installation) from the app skeleton. You'll then have an empty sprinkle with the new structure, ready to copy your code into it. However, there are some steps you need to follow before going further.
-
-#### Update `composer.json`
-
-The Skeleton comes with a basic `composer.json`. This defines the PSR-4 autoload namespace to `UserFrosting\App\`. You should edit this file to fit your sprinkle, as well as use the **same namespace as your old sprinkle**.
-
-> [!NOTE]
-> **Important:** To make sure your migrations and database data are preserved, the app namespace must be the same
-
-You'll also need to update the namespace in every existing class, `index.php`, and `bakery`. See [Customizing Your Sprinkle](sprinkles/customize#custom-namespace-and-name) for more information.
-
-Once this is done, you can run `composer update` to fetch dependencies.
-
-#### Edit the Recipe
-
-Next up, you should familiarize yourself with the [Sprinkle Recipe](sprinkles/recipe#name). Right now, the only thing you must update is the sprinkle name, but we'll come back later to the recipe.
-
-#### Moving your code
-
-The last part is to move your code from `app/sprinkles/{YourSprinkle}/` from your old install (usually from `app/sprinkles/{YourSprinkle}/`) to `app/` in the new directory.
-
-At this point, you can skip to [Upgrading components](upgrading/46-to-50/guide#upgrading-components).
-
-### Option 2 - Upgrade in place
-
-To start with this option, you should already be familiar with UserFrosting 5 directory structure, as it involves moving some directories around and editing some files. It also assumes your code (your sprinkle) was located (and not as a community sprinkle for example). You should have a UserFrosting 5 skeleton repo on hand to copy some files.
-
-#### Moving files and directories
-
-- Delete:
-  - `composer.json`
-  - `bakery`
-  - `build/`
-  - `vagrant/`
-  - `public/index.php`
-  - `app/system/`
-  - `app/tests/`
-  - `app/defines.php`
-  - `app/.htaccess`
-  - `app/sprinkles/account/`
-  - `app/sprinkles/admin/`
-  - `app/sprinkles/core/`
-  - `app/sprinkles.example.json`
-  - `app/sprinkles.json`
-- Move everything inside `app/sprinkles/{YourSprinkle}/` to `app/`, and delete the empty `app/sprinkles/` directory.
-- Copy from the skeleton, replacing existing files:
-  - `/public/index.php`
-  - `/bakery`
-  - `/package.json`
-  - `/webpack.config.js`
-  - `/webpack.entries.js`
-  - `docker-compose.yml`
-  - `docker/`
-  - `.gitignore`
-
-#### Updating `composer.json`
-
-In UserFrosting 4, your `composer.json` was located in `app/sprinkles/{YourSprinkle}/composer.json`. It was merged with the main composer file and the dependent sprinkles on build. With UserFrosting 5, there's only one `composer.json`: Yours. And it lives in `/composer.json`.
-
-This step requires you to merge your `composer.json` with UF5's. Start by moving your file, which should now be located at `/app/sprinkles.json` to `/composer.json`.
-
-Next, you'll need to update some dependencies. Open `composer.json` **from the skeleton**, and copy every dependency from `required` and `require-dev` from it to your `composer.json`.
-
-You should also update the path for the `autoload` and `autoload-dev` sections to point to `app/src/` and `app/tests/` respectively.
-
-> [!NOTE]
-> **Important:** Don't change the namespace if you want to keep the existing migration
-
-Once this is done, you can run `composer update` to fetch dependencies.
-
-#### The Recipe
-
-The next step is to create your [sprinkle recipe](sprinkles/recipe#name).
-
-Start by:
-- Copy `app/src/MyApp.php` from the skeleton into your app, inside `app/src/`
-- You can rename `MyApp` to whatever you want. Simply don't forget to adapt the next steps with the name you chose.
-- Change the namespace inside your `app/src/MyApp.php` to the namespace you use in your `composer.json`.
-
-We'll update the rest of your recipe later.
-
-#### The entry files
-
-Finally, you'll need to update both *entry files*, aka `/bakery` and `/public/index.php`, with the correct reference to your recipe. Open both files, and replace `UserFrosting\App\MyApp` and `MyApp` with the correct reference to your recipe. See [this page](sprinkles/customize#the-entry-files) for more information and examples.
-
-## Upgrading components
-
-At this point, your UserFrosting 5 app is _kind of ready_ to work. You simply need to upgrade every component you use. The following list might contain stuff you're not using, but you should still go through them as they contain links and tips you may need later.
-
-Remember, this guide will give you only the big picture of what changed, but it will point you to the relevant parts of the documentation where more detail can be found.
-
-### Global changes
-
-It's important to note some changes have been applied at large and affect pretty much every PHP class, based on PHP 8 new features. These changes include:
-
-- Extensive use of type declaration and [return types](https://dev.to/karleb/return-types-in-php-3fip)
-- [Named Arguments](https://www.php.net/releases/8.0/en.php#named-arguments)
-- [Constructor property promotion](https://www.php.net/releases/8.0/en.php#constructor-property-promotion)
-- [Union type](https://www.php.net/releases/8.0/en.php#union-types)
-- [Etc.](https://www.php.net/releases/8.0/en.php)
-
-Keep this in mind, especially if you've extended built-in classes. Not only may these classes have been renamed or moved, but the method declaration might have changed even if the code of these methods hasn't.
-
-### Services -> Dependency Injection
-
-Services have been updated for UserFrosting 5. While the principle is the same, the way to register a service is different. Services are now served by the new dependency injection container, PHP-DI. You should head over to the [Dependency Injection Chapter](dependency-injection) to learn more about PHP-DI integration in UserFrosting 5 before going further.
-
-Your services definition must first be updated to implement `UserFrosting\ServicesProvider\ServicesProviderInterface`. For example:
-
-**OLD:**
-```php
-class ServicesProvider
-{
-    public function register(ContainerInterface $container)
-    {
-        // ...
-    }
-}
-```
-
-**NEW:**
-```php
-use UserFrosting\ServicesProvider\ServicesProviderInterface;
-
-class ServicesProvider implements ServicesProviderInterface
-{
-    public function register(): array
-    {
-        return [
-            // ...
-        ];
-    }
-}
-```
-
-You'll also need to **register your service** in your recipe. Check out [Adding Services](dependency-injection/adding-services) for more information.
-
-Finally, instead of injecting the whole container and retrieving your service from it, you should inject the service directly into the class using [autowiring](dependency-injection/the-di-container#autowiring) in the class constructor or through [route service injection](routes-and-controllers/controller-classes#service-injection) for example.
-
-For example:
-
-**OLD:**
-```php
-public function __construct($ci)
-{
-    $this->camHelper = $ci->camHelper;
-}
-```
-
-**NEW:**
-```php
-public function __construct(protected CamHelper $camHelper): void
-{
-
-}
-```
-
-### Classmapper
-
-The classmapper has been removed in UF5. PHP-DI should be used instead, via the "autowire" and [interface binding](dependency-injection/the-di-container#binding-interfaces). Existing classmapper definitions should be moved inside a service, and calls to the classmapper should be updated to use dependency injection via the controller or other methods.
-
-### Migrations
-
-Migrations are mostly the same, only the class structure has changed, as well as the need to register migrations in your Sprinkle Recipe. The key points regarding migration are as follows:
-
-1. Up/Down return type: The `up()` and `down()` methods [must now have a return type of `void`](database/migrations#base-class).
-   
-2. Migrations must [now extend](database/migrations#base-class) `UserFrosting\Sprinkle\Core\Database\Migration`. Change `use UserFrosting\System\Bakery\Migration;` to `use UserFrosting\Sprinkle\Core\Database\Migration;` in every one of your migrations.
-   
-3. [Dependencies](database/migrations#dependencies) must now be declared in a static property. Change `public $dependencies = [];` to `public static $dependencies = [];` in every one of your migrations.
-   
-4. Migrations are not auto-discovered anymore. You need to add them to your sprinkle recipe, using `MigrationRecipe`. See [the migration chapter](database/migrations#sprinkle-recipe) for more information and a detailed guide.
-
-### Seeds
-
-Seeds are also mostly the same; they just need to implement `\UserFrosting\Sprinkle\Core\Seeder\SeedInterface` and have a `run()` function with a return type of `void`. They are also not auto-discovered, so need to be added to your sprinkle recipe using `SeedRecipe`. 
-
-See [the seeding chapter](database/seeding) for more details.
-
-### Models
-
-The only change in the database model is the `$timestamps` property is now `true` by default. It used to be `false`. `public $timestamps = true;` can be removed from your models unless you're **not** using timestamps, in which case you should add `public $timestamps = false;`.
-
-### Routes
-
-The way to register routes has changed. The definition is mostly the same; however, the routes are now real PHP classes instead of static PHP resources. Check out the [Registering routes](routes-and-controllers/registering-routes) guide for more information.
-
-To update your routes, you should start by:
-
-1. Moving your routes from `app/routes/*` to `app/src/Routes/*`.
-2. Updating your route definitions so they are classes [implementing RouteDefinitionInterface](routes-and-controllers/registering-routes).
-3. Registering your routes in your Sprinkle Recipe.
-
-A few other key points to know:
-1. Definitions for route groups have changed. See [Slim Documentation](https://www.slimframework.com/docs/v4/objects/routing.html#route-groups) for more information.
-2. Controller resolution should be updated to make use of [PHP’s `::class` operator](https://www.slimframework.com/docs/v4/objects/routing.html#container-resolution).
-3. Middleware must now be called by their class name. For example, `authGuard` must be updated to `UserFrosting\Sprinkle\Account\Authenticate\AuthGuard::class`.
-
-### Sprunje
-The Sprunje class used to accept options in the constructor. To make it easier to [inject dependencies](dependency-injection/the-di-container), options should now be defined using the `setOptions` method. Sprunje should now be injected into controllers.
-
-**OLD:**
-```php
-public function camsList(Request $request, Response $response, array $args)
-{
-    // GET parameters
-    $params = $request->getQueryParams();
-
-    /** @var /UserFrosting\Sprinkle\Core\Util\ClassMapper $classMapper */
-    $classMapper = $this->ci->classMapper;
-
-    /** @var \UserFrosting\Sprinkle\Core\Router $router */
-    $router = $this->ci->router;
-
-    $sprunje = new CamsSprunje($classMapper, $params, $router);
-
-    return $sprunje->toResponse($response);
-}
-```
-
-**NEW:**
-```php
-public function camsList(Request $request, Response $response, CamsSprunje $sprunje): Response
-{
-    // GET parameters
-    $params = $request->getQueryParams();
-
-    return $sprunje->setOptions($params)->toResponse($response);
-}
-```
-
-This also means the **Classmapper** is no longer available in Sprunjes. You should inject the necessary classes and services into your Sprunjes.
-
-### Controllers
-
-Simple changes have been made to controller classes: 
-
-1. Remove `extends SimpleController`, no extension is required anymore.
-2. `use Slim\Http\Request;` must be changed to `use Psr\Http\Message\ServerRequestInterface as Request;`
-3. `use Slim\Http\Response;` must be changed to `use Psr\Http\Message\ResponseInterface as Response;`
-4. Since the DI container is not available globally in the controllers, the services you require must be [injected via the constructor](routes-and-controllers/controller-classes#service-injection).
-   1. For example, to use the `view` service, inject `Slim\Views\Twig`.
-5. Routes placeholder, usually in the `$args` variables, should now [be directly injected](https://php-di.org/doc/frameworks/slim.html#route-placeholder-injection). See [Retrieving URL Parameters](https://learn.userfrosting.com/routes-and-controllers/client-input#retrieving-url-parameters) for more information.
-
-See the [Controller classes](routes-and-controllers/controller-classes) guide for more information.
-
-> [!NOTE]
-> If your sprinkle extends a controller class from a default sprinkle instead of `SimpleController`, note that **every** controller class from the default sprinkles has been moved, renamed, and rewritten as *Action classes*. You will need to check out the sprinkle source code to find out how to update your sprinkle.
-
-### Bakery
-
-Simple changes have been made to bakery commands: 
-
-1. Commands must extend `Symfony\Component\Console\Command\Command` instead of `UserFrosting\System\Bakery\BaseCommand`.
-2. Services should be injected through the class constructor (don't forget to call the parent constructor) or via [attribute injection](https://php-di.org/doc/attributes.html#inject).
-3. Add the `use UserFrosting\Bakery\WithSymfonyStyle;` trait to access `$this->io`.
-4. Commands should return `return self::SUCCESS;` or `return self::FAILURE;`.
-
-The biggest change is you're now required to **register your command in your sprinkle recipe**. Check out the [Bakery CLI](cli/custom-commands#command-class-template) chapter for more information.
-
-Also note that the `create-admin` command has been renamed `create:admin-user`. If you were adding custom commands to the "bake" command, you can now use the [Extending Aggregator Commands](cli/extending-commands) guide to achieve this more easily.
-
-### Resources Stream / Locator
-
-Not much has changed regarding the Resource Locator. Refer to the [Locator Service](advanced/locator) page for more information. Note, however, that the two streams below have been renamed:
-
-1. log -> logs
-2. session -> sessions
-
-### Template
-
-Three points are to be considered when working with templates:
-
-First, sprinkles have been renamed. If you're extending a default sprinkle, you'll need to update the sprinkle reference in the `extends` tag. For example: `{% extends "@admin/pages/activities.html.twig" %}` => `{% extends "@admin-sprinkle/pages/activities.html.twig" %}`. Check the table below for a list of sprinkle identifiers.
-   
- | Name             | Slug             |
- |------------------|------------------|
- | Admin Sprinkle   | admin-sprinkle   |
- | AdminLTE Theme   | adminlte-theme   |
- | Account Sprinkle | account-sprinkle |
- | Core Sprinkle    | core-sprinkle    |
-
-In a similar way, some Twig templates have been moved to the "AdminLTE" sprinkle. Be sure to check the new structure if you're extending templates with the `extends` tag. Some template files previously in the Admin Sprinkle might be in the AdminLTE sprinkle now.
-
-FontAwesome has also been updated, and references to icons must also be updated: `fa` -> `fas`.
-
-### Misc
-
-1. Facades (Translator, etc.) are no longer available. The corresponding service should be injected properly now.
-2. Router `PathFor` has been changed. To generate a route based on its name, inject `UserFrosting\Sprinkle\Core\Util\RouteParserInterface` and use the `urlFor` method.  
-3. Exceptions have changed, especially HTTP ones. For example: `use UserFrosting\Support\Exception\ForbiddenException;` => `use UserFrosting\Sprinkle\Account\Exceptions\ForbiddenException;`. Check out the [Exception and Error Handling](advanced/error-handling#default-exceptions) guide for more information.
-
-### Login redirect
-
-If your sprinkle was implementing a custom post-login destination, be sure to [check out the updated recipe](recipes/custom-login-page#changing-the-post-login-destination).
-
-### Testing
-
-If your sprinkle had automated testing:
-1. [Create a new Sprinkle Test case](testing/writing-tests/testcase)
-2. `setupTestDatabase` has been removed, it's no longer necessary.
-3. `UserFrosting\Sprinkle\Core\Tests\RefreshDatabase` is now `UserFrosting\Sprinkle\Core\Testing\RefreshDatabase`.
-4. `TestDatabase` is removed.
-5. `withTestUser` usage [has been updated](testing/writing-tests/traits#withtestuser).
-6. [Factories have been overhauled](testing/writing-tests/factories).
-
-## Assets
-
-Asset management has been completely changed. Instead of a custom solution, UserFrosting 5 now uses [Symfony's Webpack Encore](https://github.com/symfony/webpack-encore) to handle and build frontend assets. Your first stop should be the [Asset Chapter](asset-management) or the documentation for an in-depth guide for this new system.
-
-The key points here are:
-1. Your `asset-bundles.json` must be replaced with a new [entrypoint and entries](asset-management/asset-bundles).
-2. Rendering of assets (CSS and JS entries) [must be updated](asset-management/asset-bundles#rendering-entrypoints). Check out the `content/scripts_site.html.twig` and `content/stylesheets_site.html.twig` files from the skeleton repo for an example.
-3. Static assets must be [copied to the built directory](asset-management/basic-usage).
diff --git a/app/pages/6.0/22.upgrading/01.46-to-50/03.roadmap/docs.md b/app/pages/6.0/22.upgrading/01.46-to-50/03.roadmap/docs.md
deleted file mode 100644
index 4778bdbf..00000000
--- a/app/pages/6.0/22.upgrading/01.46-to-50/03.roadmap/docs.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: Future Roadmap
-description: ""
-obsolete: true
----
-
-## How will future update be done?
-
-You may be thinking at this point, how easy will it be to update to future version? The new structure has been created to make this easier. With UserFrosting 4, your Sprinkle where typically a fork of the whole UserFrosting project. This meant upgrading involved a complex git command to fetch upstream updates.
-
-With UserFrosting 5, updating should be as simple as doing `composer update`. 
-
-- Revision versions (5.0.x) will require only `composer update` and `php bakery bake`;
-- Minor versions (5.x) will require `composer update`, `php bakery bake`, and optional upgrade tasks in an upgrade page;
-- Major version (6.0) will have a dedicated upgrade guide;
-
-Our commitment for UserFrosting 5 is for all bundled sprinkles (Core, Account, Admin and AdminLTE) and the Framework to follow the same "minor" version number. They might not have the same revision, but assuming you're starting with the "5.1" skeleton, you'll have "5.1" version of bundled sprinkle as well as the framework.
-
-## The Roadmap
-
-Now that UserFrosting 5 has been release, what does the future hold for the UserFrosting community? Here's a preview of what's planned for future versions. As always, your help and support is greatly appreciated. If you want to get involved in the future of UserFrosting, this list should help you get started with topic that you can get involved with.
-
-### UserFrosting 5.0.x
-
-The main focus of UserFrosting 5.0.x is to squash some bugs, and improve the code quality.
-
- - Address all "todo" inside the code;
- - Fix bugs in the login
- - Etc.
-
-### UserFrosting 5.1
-
-The main focus of UserFrosting 5.1 is :
-
-- Officially add PHP 8.3 support, drop PHP 8.1
-- Update locales (translations), move them to their custom sprinkle
-- Update Fontawesome
-- 100% test coverage on the core Sprinkle;
-- Improve Docker support
-- Remove Assets in Framework
-- Update Laravel
-- Add automated test on MariaDB
-- Etc.
-
-### UserFrosting 6
-
-Yes, UserFrosting 6 is already being planned! While UF5 goal was to completely rewrite the PHP backend, UF6 goal will be to completely rewrite the frontend !
-
-- Brand new custom theme, replacing AdminLTE, based on [UIKit](https://getuikit.com)
-- Replacing Handlebar and every frontend javascript code with [Vue.js](https://vuejs.org)
-
-The best part is UserFrosting 5 introduced the necessary tools to make this transition works. It could in fact be entirely possible to create the new frontend on UserFrosting 5 as an optional sprinkle! However, the goal for UserFrosting 6 is to make this new frontend the default one.
-
-You can find a proof of concept of this new Vue.js based UI (built in UF5 beta) here : [https://github.com/userfrosting/demo-vue/tree/main](https://github.com/userfrosting/demo-vue/tree/main)
diff --git a/app/pages/6.0/22.upgrading/01.46-to-50/chapter.md b/app/pages/6.0/22.upgrading/01.46-to-50/chapter.md
deleted file mode 100644
index fd85ab9e..00000000
--- a/app/pages/6.0/22.upgrading/01.46-to-50/chapter.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: 4.x to 5.0
-description: Upgrade guide for UserFrosting 5
-obsolete: true
----
-
-# Upgrading to UserFrosting 5
-
-Welcome, intrepid developers, to the wonders of **UserFrosting 5**! Since you're here, it's probably because you already enjoy UserFrosting 4 and you're willing to take your first step into the UserFrosting 5 journey. That's makes you awesome! Take a cupcake for the road and follow the next page as we go through the complex yet simple process.
-
-> [!NOTE]
-> If you're coming for a version older than UserFrosting 4, then you're even more awesome! You _definitely_ deserve a cupcake! If this is your case, you should consider [upgrading to V4 first](4.6/upgrading/3x-to-40), or start from scratch.
\ No newline at end of file
diff --git a/app/pages/6.0/22.upgrading/01.51-to-60/01.changelog/docs.md b/app/pages/6.0/22.upgrading/01.51-to-60/01.changelog/docs.md
new file mode 100644
index 00000000..133bfac1
--- /dev/null
+++ b/app/pages/6.0/22.upgrading/01.51-to-60/01.changelog/docs.md
@@ -0,0 +1,334 @@
+---
+title: What's New in 6.0
+description: Comprehensive changelog of new features, improvements, and breaking changes in UserFrosting 6.0
+wip: true
+---
+
+# UserFrosting 6.0 Changelog
+
+This page provides a comprehensive overview of changes in UserFrosting 6.0. For detailed migration instructions, see the [Migration Guide](upgrading/51-to-60/guide).
+
+## Major Changes
+
+### Unified Monorepo Architecture
+
+**What Changed**: UserFrosting has consolidated from six separate repositories into a single monorepo.
+
+**Before (5.1)**:
+```
+userfrosting/UserFrosting      (Skeleton)
+userfrosting/framework          (Core Framework)
+userfrosting/sprinkle-core      (Core Sprinkle)
+userfrosting/sprinkle-account   (Account Sprinkle)
+userfrosting/sprinkle-admin     (Admin Sprinkle)
+userfrosting/theme-adminlte     (AdminLTE Theme)
+```
+
+**After (6.0)**:
+```
+userfrosting/monorepo           (Everything)
+```
+
+**Impact**: 
+- Simpler dependency management
+- Consistent versioning across all components
+- Easier development and contribution workflow
+- Faster releases and bug fixes
+
+### Frontend Stack Overhaul
+
+#### Vite Replaces Webpack Encore
+
+**What Changed**: Asset bundling moved from Webpack Encore to Vite.
+
+**Key Benefits**:
+- ⚡ **Instant dev server**: No more waiting for compilation—changes appear in milliseconds
+- 🔥 **Hot Module Replacement**: Update code without losing application state
+- 📦 **Optimized builds**: Smaller bundles with automatic code splitting
+- 🎯 **Better DX**: Clearer error messages and simpler configuration
+
+**Breaking Changes**:
+- `webpack.config.js` → `vite.config.ts`
+- `encore` CLI commands → `php bakery assets:vite` commands
+- Different asset URL structure in development
+- Asset manifest format changed
+
+#### Vue 3 & TypeScript First-Class Support
+
+**What Changed**: Modern JavaScript development is now the default.
+
+**New Features**:
+- Vue 3 Single File Components (`.vue`) with `<script setup>` syntax
+- Full TypeScript support out of the box
+- Composition API for better code organization
+- Better tree-shaking for smaller bundles
+
+**Migration Notes**:
+- Vue 2 components need updating to Vue 3 syntax
+- Options API still supported but Composition API recommended
+- TypeScript optional but strongly encouraged for new code
+
+#### UIkit 3 in AdminLTE Theme
+
+**What Changed**: AdminLTE theme now uses UIkit 3 instead of Bootstrap.
+
+**Why**: UIkit provides:
+- Modern component design
+- Better LESS integration
+- Lightweight and flexible
+- Excellent customization options
+
+**Impact**:
+- Custom Bootstrap themes need conversion to UIkit
+- Some component APIs have changed
+- LESS variables and mixins are different
+
+### PHP & Dependency Updates
+
+#### Minimum PHP Version: 8.1
+
+**What Changed**: Dropped support for PHP 8.0.
+
+**Why**: PHP 8.1+ provides:
+- Enumerations (enums)
+- Readonly properties
+- First-class callable syntax
+- Better performance
+- Security improvements
+
+#### Updated Dependencies
+
+Major dependency updates:
+- Laravel Components: 11.x
+- PHPUnit: 11.x
+- Symfony Components: 7.x
+- Eloquent ORM: 11.x
+
+### Development Workflow Improvements
+
+#### Bakery CLI Enhancements
+
+**New Commands**:
+```bash
+php bakery assets:vite       # Start Vite dev server
+php bakery assets:build      # Build assets for production
+```
+
+**Improved Commands**:
+- `php bakery serve` - Enhanced with better output
+- `php bakery bake` - Streamlined installation process
+
+#### Dual Server Development
+
+**New Workflow**:
+```bash
+# Terminal 1: PHP backend
+php bakery serve
+
+# Terminal 2: Vite frontend (with HMR)
+npm run vite:dev
+```
+
+**Benefits**:
+- Frontend changes appear instantly (HMR)
+- Backend remains stable and reliable
+- Clear separation of concerns
+- Better error handling
+
+## API Changes
+
+### Breaking Changes
+
+> [!WARNING]
+> These changes require code updates in your application.
+
+#### Asset Loading in Twig Templates
+
+**Before (5.1)**:
+```twig
+{{ encore_entry_script_tags('app') }}
+{{ encore_entry_link_tags('app') }}
+```
+
+**After (6.0)**:
+```twig
+{{ vite_js('main.ts') }}
+{{ vite_css('main.ts') }}
+```
+
+#### Configuration Structure
+
+**Changed**: Some configuration keys have been reorganized.
+
+**Before (5.1)**:
+```php
+'assets' => [
+    'webpack' => [
+        'manifest' => 'manifest.json'
+    ]
+]
+```
+
+**After (6.0)**:
+```php
+'assets' => [
+    'vite' => [
+        'dev' => env('VITE_DEV_SERVER', false),
+        'manifest' => '.vite/manifest.json'
+    ]
+]
+```
+
+#### Sprinkle Asset Structure
+
+**Changed**: Asset organization within sprinkles.
+
+**Before (5.1)**:
+```
+app/sprinkles/custom/
+├── assets/
+│   ├── webpack.config.js
+│   └── src/
+│       └── app.js
+```
+
+**After (6.0)**:
+```
+app/sprinkles/custom/
+├── assets/
+│   ├── vite.config.ts
+│   └── main.ts
+```
+
+### Deprecations
+
+#### jQuery & Handlebars
+
+**Status**: Still available but **deprecated**.
+
+**What This Means**:
+- Existing jQuery code continues to work
+- New development should use Vue 3
+- Handlebars client-side templating replaced by Vue templates
+- Will be removed in a future major version
+
+**Migration Path**:
+- Gradually convert jQuery to Vue 3 components
+- Replace Handlebars with Vue's template syntax
+- Use TypeScript for new features
+
+#### Webpack Encore Support
+
+**Status**: Maintained for **backward compatibility only**.
+
+**What This Means**:
+- Existing Webpack setups continue working
+- New projects should use Vite
+- Webpack documentation moved to legacy section
+- Limited new features for Webpack
+
+**Migration Path**:
+- Plan migration to Vite for long-term projects
+- Follow [Webpack to Vite migration guide](asset-management/webpack-encore)
+- No immediate pressure to migrate stable applications
+
+## New Features
+
+### Asset Management
+
+- **Hot Module Replacement**: Instant updates during development
+- **Code Splitting**: Automatic chunking for better performance
+- **Tree Shaking**: Unused code automatically removed
+- **Source Maps**: Better debugging with mapped TypeScript/Vue
+- **Legacy Browser Support**: Automatic polyfills when needed
+
+### Developer Tools
+
+- **Vue DevTools**: First-class debugging support
+- **TypeScript Checking**: Type safety across your application
+- **ESLint Integration**: Modern linting for Vue/TS/JS
+- **Vitest**: Fast, Vite-native testing framework
+
+### Performance Improvements
+
+- **Faster Build Times**: Vite builds 2-10x faster than Webpack
+- **Smaller Bundle Sizes**: Better tree-shaking and minification
+- **Optimized Dev Server**: Instant startup, no bundling
+- **Better Caching**: Improved cache strategies for production
+
+## Removals
+
+### Removed Dependencies
+
+The following are no longer included by default:
+
+- ❌ **jQuery** (deprecated, use Vue 3)
+- ❌ **Bootstrap** in AdminLTE (replaced by UIkit)
+- ❌ **Handlebars** (deprecated, use Vue templates)
+- ❌ **Webpack Encore** (use Vite instead)
+- ❌ **Several legacy npm packages** (see package.json diff)
+
+### Removed PHP Support
+
+- ❌ **PHP 7.4**: End of life
+- ❌ **PHP 8.0**: Superseded by 8.1
+
+## Database & ORM
+
+### Changes
+
+- Updated to **Eloquent 11.x**
+- Better query performance
+- Enhanced relationship loading
+- Improved migration system
+
+### Breaking Changes
+
+Minor API adjustments in Eloquent 11.x:
+- Some method signatures updated
+- Deprecated methods removed
+- Better type hints
+
+## Testing
+
+### Changes
+
+- **PHPUnit 11.x**: Latest testing framework
+- **Vitest**: For frontend unit tests
+- Better test helpers and factories
+- Improved coverage reporting
+
+### New Testing Features
+
+```bash
+# Frontend tests with Vitest
+npm run test
+npm run coverage
+
+# Backend tests with PHPUnit
+vendor/bin/phpunit
+```
+
+## Security Updates
+
+- PHP 8.1+ security improvements
+- Updated security dependencies
+- Improved CSRF protection
+- Better session management
+
+## Documentation Updates
+
+- Complete rewrite for 6.0 architecture
+- New frontend development guides
+- Vite configuration examples
+- Vue 3 component patterns
+- Migration guides from 5.1
+
+## Known Issues
+
+> [!NOTE]
+> Check the [GitHub Issues](https://github.com/userfrosting/monorepo/issues) for the latest known issues and workarounds.
+
+## What's Next?
+
+See [What to Expect](upgrading/51-to-60/what-to-expect) for information about the future roadmap and planned features beyond 6.0.
diff --git a/app/pages/6.0/22.upgrading/01.51-to-60/02.guide/docs.md b/app/pages/6.0/22.upgrading/01.51-to-60/02.guide/docs.md
new file mode 100644
index 00000000..90ac7c0a
--- /dev/null
+++ b/app/pages/6.0/22.upgrading/01.51-to-60/02.guide/docs.md
@@ -0,0 +1,672 @@
+---
+title: Step-by-Step Migration Guide
+description: Detailed instructions for upgrading your UserFrosting 5.1 application to 6.0
+wip: true
+---
+
+# Migration Guide: UserFrosting 5.1 → 6.0
+
+This guide walks you through upgrading an existing UserFrosting 5.1 application to version 6.0. Follow these steps carefully and test thoroughly in a development environment before deploying to production.
+
+> [!IMPORTANT]
+> **Backup Everything**: Before starting, create backups of your application code, database, and any user-uploaded files. This upgrade includes breaking changes that may require significant testing.
+
+## Prerequisites
+
+Before beginning the upgrade:
+
+- [ ] Running latest UserFrosting 5.1.x
+- [ ] PHP 8.1 or higher installed (8.4 recommended)
+- [ ] Composer 2 installed
+- [ ] Node.js 18.0+ installed (LTS 24 recommended)
+- [ ] npm 9.0+ installed
+- [ ] Backed up database and application files
+- [ ] Development environment ready for testing
+
+## Step 1: Prepare Your Environment
+
+### Update System Requirements
+
+Ensure your development environment meets UserFrosting 6.0 requirements:
+
+```bash
+# Check PHP version (must be 8.1+)
+php -v
+
+# Check Composer version (must be 2.x)
+composer --version
+
+# Check Node.js version (must be 18+)
+node --version
+
+# Check npm version (must be 9+)
+npm --version
+```
+
+If any versions are below requirements, update them before proceeding.
+
+### Create a Testing Branch
+
+```bash
+# Create a new branch for the upgrade
+git checkout -b upgrade-to-6.0
+
+# Ensure working directory is clean
+git status
+```
+
+## Step 2: Update Composer Dependencies
+
+### Backup composer.json
+
+```bash
+cp composer.json composer.json.backup
+```
+
+### Update Framework Dependency
+
+**Before (5.1)** - `composer.json`:
+```json
+{
+    "require": {
+        "userfrosting/framework": "~5.1.0"
+    }
+}
+```
+
+**After (6.0)** - `composer.json`:
+```json
+{
+    "require": {
+        "userfrosting/userfrosting": "^6.0"
+    }
+}
+```
+
+> [!NOTE]
+> The package name changed from `userfrosting/framework` to `userfrosting/userfrosting` to reflect the monorepo structure.
+
+### Update PHP Version Constraint
+
+Update the minimum PHP version in `composer.json`:
+
+```json
+{
+    "require": {
+        "php": "^8.1"
+    }
+}
+```
+
+### Remove Obsolete Dependencies
+
+The following dependencies are now included in the monorepo and should be removed from your `composer.json`:
+
+```json
+// REMOVE these if present:
+"userfrosting/sprinkle-core": "*",
+"userfrosting/sprinkle-account": "*",
+"userfrosting/sprinkle-admin": "*",
+"userfrosting/theme-adminlte": "*"
+```
+
+### Run Composer Update
+
+```bash
+# Update dependencies
+composer update
+
+# Clear Composer cache if you encounter issues
+composer clear-cache
+composer update
+```
+
+> [!WARNING]
+> This step may take several minutes as Composer downloads updated dependencies.
+
+## Step 3: Update npm Dependencies
+
+### Backup package.json
+
+```bash
+cp package.json package.json.backup
+```
+
+### Remove Webpack Encore Dependencies
+
+Remove Webpack-related packages from `package.json`:
+
+```json
+// REMOVE these from devDependencies:
+"@symfony/webpack-encore": "^*",
+"webpack": "^*",
+"webpack-cli": "^*",
+"webpack-dev-server": "^*",
+// ... other webpack-related packages
+```
+
+### Add Vite Dependencies
+
+Add Vite and related packages to `package.json`:
+
+```json
+{
+    "devDependencies": {
+        "vite": "^6.0.0",
+        "@vitejs/plugin-vue": "^5.0.0",
+        "vue": "^3.3.0",
+        "typescript": "^5.4.0",
+        "vue-tsc": "^2.0.0"
+    }
+}
+```
+
+> [!TIP]
+> See the [monorepo package.json](https://github.com/userfrosting/monorepo/blob/6.0/package.json) for the complete list of recommended dependencies.
+
+### Update npm Scripts
+
+Update the scripts section in `package.json`:
+
+**Before (5.1)**:
+```json
+{
+    "scripts": {
+        "dev": "encore dev",
+        "watch": "encore dev --watch",
+        "build": "encore production"
+    }
+}
+```
+
+**After (6.0)**:
+```json
+{
+    "scripts": {
+        "vite:dev": "vite",
+        "vite:build": "vue-tsc && vite build",
+        "typecheck": "vue-tsc --noEmit"
+    }
+}
+```
+
+### Install Dependencies
+
+```bash
+# Remove old node_modules and lock file
+rm -rf node_modules package-lock.json
+
+# Install fresh dependencies
+npm install
+```
+
+## Step 4: Configure Vite
+
+### Create vite.config.ts
+
+Create a new `vite.config.ts` file in your project root:
+
+```typescript
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+    plugins: [
+        vue(),
+    ],
+    server: {
+        host: true,
+        strictPort: true,
+        port: 5173,
+        origin: 'http://localhost:5173',
+    },
+    root: 'app/assets/',
+    base: '/assets/',
+    build: {
+        outDir: '../../public/assets',
+        assetsDir: '',
+        emptyOutDir: true,
+        manifest: true,
+        rollupOptions: {
+            input: {
+                main: 'app/assets/main.ts',
+            }
+        }
+    },
+    optimizeDeps: {
+        include: ['uikit', 'uikit/dist/js/uikit-icons']
+    }
+})
+```
+
+### Remove Webpack Configuration
+
+```bash
+# Remove old Webpack config files
+rm webpack.config.js
+rm webpack.mix.js  # if present
+rm -rf app/assets/webpack  # if present
+```
+
+## Step 5: Migrate Asset Files
+
+### Restructure Asset Directory
+
+**Before (5.1)** structure:
+```
+app/assets/
+├── webpack.config.js
+├── src/
+│   ├── app.js
+│   └── app.scss
+└── public/
+    └── images/
+```
+
+**After (6.0)** structure:
+```
+app/assets/
+├── main.ts          # Main entry point
+├── theme.less       # Main stylesheet
+├── components/      # Vue components
+│   └── MyComponent.vue
+├── css/            # Additional styles
+└── public/         # Static assets
+    └── images/
+```
+
+### Create Main Entry Point
+
+Create `app/assets/main.ts`:
+
+```typescript
+import { createApp } from 'vue'
+import './theme.less'
+
+// Import your components
+// import MyComponent from './components/MyComponent.vue'
+
+// Initialize Vue app
+const app = createApp({})
+
+// Register global components
+// app.component('MyComponent', MyComponent)
+
+// Mount to DOM when ready
+document.addEventListener('DOMContentLoaded', () => {
+    app.mount('#app')
+})
+```
+
+### Rename/Convert Style Files
+
+```bash
+# Rename SCSS to LESS (or convert if needed)
+mv app/assets/src/app.scss app/assets/theme.less
+
+# Or create a new theme.less file
+touch app/assets/theme.less
+```
+
+> [!TIP]
+> UIkit uses LESS, so converting your styles to LESS provides better integration. However, Vite also supports SCSS if you prefer to keep it.
+
+## Step 6: Update Configuration
+
+### Update Configuration Files
+
+Update your `.env` file:
+
+```bash
+# Add Vite dev server flag
+VITE_DEV_SERVER=true
+```
+
+Update configuration in `app/config/default.php` (or your custom config):
+
+**Before (5.1)**:
+```php
+'assets' => [
+    'webpack' => [
+        'manifest' => 'manifest.json'
+    ]
+]
+```
+
+**After (6.0)**:
+```php
+'assets' => [
+    'vite' => [
+        'dev' => env('VITE_DEV_SERVER', false),
+        'manifest' => '.vite/manifest.json'
+    ]
+]
+```
+
+## Step 7: Update Twig Templates
+
+### Replace Asset Helper Functions
+
+Find and replace all asset loading functions in your Twig templates:
+
+**Before (5.1)**:
+```twig
+{{ encore_entry_script_tags('app') }}
+{{ encore_entry_link_tags('app') }}
+```
+
+**After (6.0)**:
+```twig
+{{ vite_js('main.ts') }}
+{{ vite_css('main.ts') }}
+```
+
+> [!TIP]
+> Use find-and-replace in your editor to update all templates at once:
+> - Find: `encore_entry_script_tags\('([^']+)'\)`
+> - Replace: `vite_js('$1.ts')`
+
+### Search All Templates
+
+```bash
+# Find all templates using Encore helpers
+grep -r "encore_entry" app/templates/
+
+# Verify no Encore references remain
+grep -r "encore" app/templates/
+```
+
+## Step 8: Migrate Custom JavaScript
+
+### Convert to ES Modules
+
+If you have custom JavaScript, convert it to ES modules:
+
+**Before (5.1)** - `custom.js`:
+```javascript
+// CommonJS or global scope
+var MyModule = {
+    init: function() {
+        // ...
+    }
+};
+```
+
+**After (6.0)** - `custom.ts`:
+```typescript
+// ES Module with TypeScript
+export class MyModule {
+    static init(): void {
+        // ...
+    }
+}
+```
+
+### Update jQuery Code (Optional but Recommended)
+
+If you have jQuery code, consider migrating to Vue 3:
+
+**Before (5.1)** - jQuery:
+```javascript
+$(document).ready(function() {
+    $('#myButton').on('click', function() {
+        $('#myDiv').toggle();
+    });
+});
+```
+
+**After (6.0)** - Vue 3:
+```vue
+<template>
+    <button @click="toggleDiv">Toggle</button>
+    <div v-if="showDiv">Content</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const showDiv = ref(false)
+const toggleDiv = () => {
+    showDiv.value = !showDiv.value
+}
+</script>
+```
+
+> [!NOTE]
+> jQuery is deprecated but still supported in 6.0. You can migrate gradually, but new code should use Vue 3.
+
+## Step 9: Update Custom Sprinkles
+
+### Update Sprinkle Structure
+
+If you have custom sprinkles, update their structure:
+
+**Before (5.1)**:
+```
+app/sprinkles/mysprinkle/
+├── composer.json
+├── assets/
+│   └── webpack.config.js
+├── src/
+└── templates/
+```
+
+**After (6.0)**:
+```
+app/sprinkles/mysprinkle/
+├── composer.json
+├── assets/
+│   ├── vite.config.ts  # If needed
+│   └── main.ts
+├── src/
+└── templates/
+```
+
+### Update Sprinkle Recipe
+
+Verify your sprinkle's Recipe class is compatible with UserFrosting 6.0. Most sprinkle recipes should work without changes, but review the [Sprinkles documentation](sprinkles) for any API changes.
+
+## Step 10: Database Migrations
+
+### Run Migrations
+
+UserFrosting 6.0 includes database updates:
+
+```bash
+# Run migrations
+php bakery migrate
+
+# If you encounter issues, rollback and retry
+php bakery migrate:rollback
+php bakery migrate
+```
+
+### Verify Database
+
+Check that all tables are present and properly structured:
+
+```bash
+# Check migration status
+php bakery migrate:status
+```
+
+## Step 11: Build and Test
+
+### Build Assets
+
+```bash
+# Build assets for production
+npm run vite:build
+
+# Verify build output
+ls -la public/assets/
+```
+
+### Start Development Servers
+
+Open two terminals:
+
+**Terminal 1** - PHP backend:
+```bash
+php bakery serve
+```
+
+**Terminal 2** - Vite frontend:
+```bash
+npm run vite:dev
+```
+
+### Test Your Application
+
+Visit `http://localhost:8080` and thoroughly test:
+
+- [ ] Homepage loads correctly
+- [ ] Login/logout functionality
+- [ ] User registration
+- [ ] Admin panel access
+- [ ] All custom features
+- [ ] API endpoints
+- [ ] Forms and validation
+- [ ] Asset loading (check browser console for errors)
+
+### Check Browser Console
+
+Open browser DevTools (F12) and verify:
+- No JavaScript errors
+- Assets loading correctly (200 status codes)
+- No 404 errors for missing files
+
+## Step 12: Production Deployment
+
+### Build Production Assets
+
+```bash
+# Build optimized production assets
+npm run vite:build
+
+# Verify build output
+ls -la public/assets/.vite/
+```
+
+### Update Environment Variables
+
+In production `.env`:
+
+```bash
+# Disable Vite dev server
+VITE_DEV_SERVER=false
+```
+
+### Deploy
+
+Follow your normal deployment process, ensuring:
+
+- Built assets are deployed (`public/assets/`)
+- Dependencies are installed (`composer install --no-dev`)
+- Configuration is set for production
+- Database migrations are run
+
+### Clear Caches
+
+```bash
+# Clear application caches
+php bakery cache:clear
+
+# Clear route cache
+php bakery cache:clear-routes
+```
+
+## Troubleshooting Common Issues
+
+### "Cannot find module" Errors
+
+**Symptom**: Vite can't find imported modules
+
+**Solution**: 
+```bash
+# Clear node_modules and reinstall
+rm -rf node_modules package-lock.json
+npm install
+```
+
+### Assets Not Loading
+
+**Symptom**: 404 errors for assets in browser
+
+**Solution**:
+- Verify `vite.config.ts` paths are correct
+- Check `.env` has correct `VITE_DEV_SERVER` setting
+- Ensure Vite dev server is running (development)
+- Verify assets are built (`public/assets/`) (production)
+
+### Vue Components Not Rendering
+
+**Symptom**: Vue components don't appear on page
+
+**Solution**:
+- Check browser console for Vue errors
+- Verify Vue is imported in `main.ts`
+- Ensure components are properly registered
+- Check that mounting point (`#app`) exists in template
+
+### Database Migration Errors
+
+**Symptom**: Migrations fail to run
+
+**Solution**:
+```bash
+# Reset and re-run migrations (DEVELOPMENT ONLY)
+php bakery migrate:reset
+php bakery migrate
+
+# Check migration status
+php bakery migrate:status
+```
+
+### Performance Issues in Development
+
+**Symptom**: Slow page loads during development
+
+**Solution**:
+- Ensure Vite dev server is running (`npm run vite:dev`)
+- Check `optimizeDeps` in `vite.config.ts`
+- Clear Vite cache: `rm -rf node_modules/.vite`
+
+## Rollback Plan
+
+If you need to rollback to 5.1:
+
+```bash
+# Restore backups
+git checkout main
+cp composer.json.backup composer.json
+cp package.json.backup package.json
+
+# Reinstall old dependencies
+composer install
+npm install
+
+# Restore database from backup
+# (use your database backup restore process)
+```
+
+## Next Steps
+
+After successfully upgrading:
+
+1. **Review Documentation**: Read through the updated [Asset Management](asset-management) chapter
+2. **Optimize Assets**: Learn about [Vite Configuration](asset-management/vite-configuration) for performance tuning
+3. **Modernize Code**: Gradually convert jQuery to Vue 3 components
+4. **Add TypeScript**: Consider adding type safety to your custom code
+5. **Explore Features**: Check out new Vite features like HMR and code splitting
+
+## Getting Help
+
+If you encounter issues:
+
+- **Documentation**: [UserFrosting Learn](/)
+- **Community Chat**: [chat.userfrosting.com](https://chat.userfrosting.com)
+- **GitHub Issues**: [github.com/userfrosting/monorepo/issues](https://github.com/userfrosting/monorepo/issues)
+- **Stack Overflow**: Tag questions with `userfrosting`
+
+Congratulations on upgrading to UserFrosting 6.0! 🎉
diff --git a/app/pages/6.0/22.upgrading/01.51-to-60/03.what-to-expect/docs.md b/app/pages/6.0/22.upgrading/01.51-to-60/03.what-to-expect/docs.md
new file mode 100644
index 00000000..50a62dec
--- /dev/null
+++ b/app/pages/6.0/22.upgrading/01.51-to-60/03.what-to-expect/docs.md
@@ -0,0 +1,376 @@
+---
+title: What to Expect After 6.0
+description: Future roadmap and plans for UserFrosting beyond version 6.0
+wip: true
+---
+
+# What to Expect After UserFrosting 6.0
+
+UserFrosting 6.0 represents a major milestone in the framework's evolution, but it's not the end of the journey. This page outlines what you can expect in terms of updates, maintenance, and future development.
+
+## Version Support Policy
+
+### UserFrosting 6.0 (Current)
+
+**Status**: Active Development & Support
+
+- **New Features**: Regular feature additions
+- **Bug Fixes**: Prompt bug fixes and improvements
+- **Security Updates**: Immediate security patches
+- **Documentation**: Continuously updated and improved
+- **Community Support**: Active help via chat and GitHub
+
+**Recommended For**: All new projects and actively maintained applications.
+
+### UserFrosting 5.1 (Legacy)
+
+**Status**: Security Maintenance Only
+
+- **New Features**: ❌ No new features
+- **Bug Fixes**: ⚠️ Critical bugs only
+- **Security Updates**: ✅ Security patches for 12-18 months from 6.0 release
+- **Documentation**: 🔒 Frozen (available at [learn.userfrosting.com/5.1](https://learn.userfrosting.com/5.1))
+- **Community Support**: ⚠️ Limited, focus shifted to 6.0
+
+**End of Life**: Approximately 12-18 months after UserFrosting 6.0 stable release.
+
+**Recommended For**: Stable production applications that don't need new features and can't allocate migration time.
+
+## Release Cadence
+
+### Minor Releases (6.1, 6.2, etc.)
+
+**Frequency**: Every 3-4 months
+
+**What to Expect**:
+- New features that don't break backward compatibility
+- Performance improvements
+- Developer experience enhancements
+- Additional documentation and examples
+- Dependency updates (within semver constraints)
+
+**Example Features**:
+- Additional Vue 3 components
+- New Bakery CLI commands
+- Enhanced debugging tools
+- More Vite plugins and optimizations
+- Improved testing utilities
+
+### Patch Releases (6.0.1, 6.0.2, etc.)
+
+**Frequency**: As needed (typically every 2-4 weeks)
+
+**What to Expect**:
+- Bug fixes
+- Security patches
+- Documentation corrections
+- Dependency security updates
+- Performance optimizations
+
+## Planned Features & Improvements
+
+> [!NOTE]
+> The following are **potential future features** being considered. They are not commitments, and priorities may change based on community feedback and maintainer availability.
+
+### Short-Term (Next 6 Months)
+
+#### Enhanced Vue 3 Components Library
+
+**Status**: Under Development
+
+**Description**: A comprehensive set of pre-built Vue 3 components for common UserFrosting patterns:
+- Data tables with sorting, filtering, pagination
+- Form builders with validation
+- Modal dialogs
+- Alert/notification system
+- User pickers and role selectors
+
+**Why**: Reduce boilerplate and speed up development.
+
+#### Improved TypeScript Support
+
+**Status**: Planned
+
+**Description**:
+- Complete type definitions for all UserFrosting services
+- Type-safe API client generation
+- Better IDE autocomplete and error checking
+- Stricter type checking in core components
+
+**Why**: Catch errors earlier and improve developer experience.
+
+#### Testing Tools & Examples
+
+**Status**: In Progress
+
+**Description**:
+- More comprehensive testing documentation
+- Example test suites for common scenarios
+- Better factory definitions
+- Integration test helpers
+- Frontend testing with Vitest
+
+**Why**: Make testing easier and encourage test-driven development.
+
+### Mid-Term (6-12 Months)
+
+#### GraphQL API Option
+
+**Status**: Exploring
+
+**Description**: Optional GraphQL API layer alongside REST:
+- Type-safe queries and mutations
+- Efficient data fetching (no over/under-fetching)
+- Better support for complex frontend applications
+- Subscriptions for real-time features
+
+**Why**: Modern alternative to REST for complex data requirements.
+
+#### Enhanced CLI Tools
+
+**Status**: Planned
+
+**Description**:
+- Interactive sprinkle generator (`bakery make:sprinkle`)
+- Component scaffolding (`bakery make:vue-component`)
+- Migration helpers (`bakery make:migration`)
+- Better error messages and debugging output
+
+**Why**: Speed up common development tasks.
+
+#### Performance Monitoring
+
+**Status**: Exploring
+
+**Description**:
+- Built-in performance profiling
+- Database query logging and analysis
+- Asset loading optimization suggestions
+- Production monitoring hooks
+
+**Why**: Help developers identify and fix performance bottlenecks.
+
+### Long-Term (12+ Months)
+
+#### Headless CMS Mode
+
+**Status**: Concept
+
+**Description**: Optional headless mode where UserFrosting acts as a pure API backend:
+- Decoupled frontend deployment
+- Mobile app support
+- Third-party integration
+- Multi-frontend architecture
+
+**Why**: Support modern application architectures.
+
+#### Plugin Marketplace
+
+**Status**: Concept
+
+**Description**: A curated marketplace for UserFrosting extensions:
+- Vetted third-party sprinkles
+- Easy installation and updates
+- Quality ratings and reviews
+- Commercial and free options
+
+**Why**: Foster ecosystem growth and make extending UserFrosting easier.
+
+#### Multi-Tenancy Support
+
+**Status**: Concept
+
+**Description**: Built-in support for multi-tenant applications:
+- Tenant isolation
+- Shared or separate databases
+- Per-tenant customization
+- Tenant-aware routing and assets
+
+**Why**: Support SaaS applications built with UserFrosting.
+
+## Breaking Changes Policy
+
+UserFrosting follows [Semantic Versioning](https://semver.org/):
+
+### Major Versions (7.0, 8.0, etc.)
+
+**Frequency**: Every 2-3 years
+
+**May Include**:
+- Breaking API changes
+- Removal of deprecated features
+- Major architectural changes
+- Updated system requirements
+- New best practices
+
+**Migration**: Comprehensive upgrade guides provided.
+
+### Minor Versions (6.1, 6.2, etc.)
+
+**Frequency**: Every 3-4 months
+
+**Guarantees**:
+- ✅ Backward compatible
+- ✅ Safe to upgrade
+- ✅ Deprecations may be introduced (with warnings)
+- ✅ No breaking changes
+
+**Migration**: Usually drop-in replacement, minimal changes needed.
+
+### Patch Versions (6.0.1, 6.0.2, etc.)
+
+**Frequency**: As needed
+
+**Guarantees**:
+- ✅ Bug fixes only
+- ✅ No new features
+- ✅ No API changes
+- ✅ Safe to upgrade immediately
+
+**Migration**: No code changes required.
+
+## Deprecation Strategy
+
+When features are deprecated:
+
+1. **Announcement**: Deprecated features are clearly marked in documentation
+2. **Warning Period**: At least one minor version before removal
+3. **Alternatives**: Migration path provided to new approach
+4. **Support**: Deprecated features continue working until next major version
+
+**Example Timeline**:
+- **6.0**: Feature X is current
+- **6.1**: Feature X deprecated, Feature Y introduced as replacement
+- **6.2-6.x**: Both Feature X and Y available, warnings in logs
+- **7.0**: Feature X removed, Feature Y is the standard
+
+## Community Involvement
+
+UserFrosting is open-source and community-driven. You can influence the roadmap:
+
+### Contribute Code
+
+- Submit pull requests to [userfrosting/monorepo](https://github.com/userfrosting/monorepo)
+- Fix bugs, add features, improve documentation
+- Review and test pull requests from others
+
+### Provide Feedback
+
+- Report bugs and request features on [GitHub Issues](https://github.com/userfrosting/monorepo/issues)
+- Participate in discussions on [chat.userfrosting.com](https://chat.userfrosting.com)
+- Vote on feature requests and proposals
+
+### Support Development
+
+- [Donate on Ko-fi](https://ko-fi.com/lcharette)
+- [Become a sponsor on Open Collective](https://opencollective.com/userfrosting)
+- Hire core team members for consulting/development
+
+### Spread the Word
+
+- Share your UserFrosting projects
+- Write tutorials and blog posts
+- Answer questions from other users
+- Rate and review UserFrosting
+
+## Staying Updated
+
+### Announcements
+
+Official announcements are posted to:
+- [GitHub Releases](https://github.com/userfrosting/monorepo/releases)
+- [UserFrosting Blog](https://www.userfrosting.com/blog/) (when available)
+- [Community Chat](https://chat.userfrosting.com)
+
+### Newsletter
+
+Sign up for the UserFrosting newsletter (when available) to receive:
+- Major version announcements
+- Security advisories
+- Featured community projects
+- Tips and tutorials
+
+### Social Media
+
+Follow UserFrosting on social media for updates:
+- Twitter/X: [@UserFrosting](https://twitter.com/userfrosting) (if available)
+- GitHub: [userfrosting](https://github.com/userfrosting)
+
+## Upgrading Between Versions
+
+### Minor Version Upgrades (e.g., 6.0 → 6.1)
+
+**Process**:
+```bash
+# Update dependencies
+composer update
+npm update
+
+# Run any new migrations
+php bakery migrate
+
+# Rebuild assets
+npm run vite:build
+
+# Clear caches
+php bakery cache:clear
+```
+
+**Expected Time**: 15-30 minutes
+
+**Risk Level**: Low - backward compatible
+
+### Major Version Upgrades (e.g., 6.x → 7.0)
+
+**Process**:
+- Comprehensive upgrade guide provided
+- Review breaking changes
+- Update custom code
+- Test thoroughly
+
+**Expected Time**: Several hours to several days (depending on customization)
+
+**Risk Level**: Medium to High - breaking changes likely
+
+## Framework Philosophy
+
+As UserFrosting continues to evolve, these principles guide development:
+
+### Modern But Pragmatic
+
+We embrace modern tools and practices, but only when they provide clear benefits:
+- ✅ Adopt proven technologies (Vue 3, Vite, TypeScript)
+- ⚠️ Be cautious with bleeding-edge features
+- ❌ Avoid "hype-driven development"
+
+### Backward Compatibility
+
+We take backward compatibility seriously:
+- Breaking changes only in major versions
+- Clear migration paths provided
+- Deprecated features supported for reasonable periods
+
+### Developer Experience
+
+We prioritize developer happiness:
+- Fast development builds (Vite)
+- Clear error messages
+- Comprehensive documentation
+- Active community support
+
+### Educational Focus
+
+UserFrosting aims to teach best practices:
+- Documentation explains the "why" not just the "how"
+- Examples demonstrate modern PHP/JavaScript patterns
+- Comments in code help developers learn
+
+## Questions?
+
+Have questions about the future of UserFrosting?
+
+- **Technical Questions**: Ask in [chat.userfrosting.com](https://chat.userfrosting.com)
+- **Feature Requests**: Open an issue on [GitHub](https://github.com/userfrosting/monorepo/issues)
+- **General Discussion**: Start a thread in the community chat
+
+The UserFrosting team is committed to making this the best PHP framework for user-centered applications. Thank you for being part of the journey! 🚀
diff --git a/app/pages/6.0/22.upgrading/01.51-to-60/chapter.md b/app/pages/6.0/22.upgrading/01.51-to-60/chapter.md
new file mode 100644
index 00000000..79a9ba32
--- /dev/null
+++ b/app/pages/6.0/22.upgrading/01.51-to-60/chapter.md
@@ -0,0 +1,86 @@
+---
+title: 5.1.x to 6.0.x
+description: Complete upgrade guide for migrating from UserFrosting 5.1 to 6.0
+wip: true
+---
+
+# Upgrading from UserFrosting 5.1 to 6.0
+
+Welcome to **UserFrosting 6.0**! This major release represents a significant evolution of the framework, bringing modern development tools, improved performance, and a streamlined architecture.
+
+This guide walks you through the upgrade process step-by-step. While the changes are substantial, we've designed the migration path to be as smooth as possible.
+
+> [!WARNING]
+> This is a **major version upgrade** with breaking changes. Allocate appropriate time for testing and migration. Start with a development environment and thoroughly test before deploying to production.
+
+> [!NOTE]
+> Before proceeding, ensure you're running the latest version of UserFrosting 5.1 and have reviewed its changelog.
+
+## What This Guide Covers
+
+This section provides detailed information about:
+
+- **[Changelog](upgrading/51-to-60/changelog)**: Comprehensive list of changes, additions, and removals in 6.0
+- **[Migration Guide](upgrading/51-to-60/guide)**: Step-by-step instructions for upgrading your application
+- **[What to Expect](upgrading/51-to-60/what-to-expect)**: Future roadmap and what comes next after 6.0
+
+## Quick Overview
+
+The most significant changes in UserFrosting 6.0:
+
+### Repository Consolidation
+UserFrosting 5.1 was distributed across six separate repositories:
+- Skeleton (main application)
+- Framework (core framework)
+- Core (core sprinkle)
+- Account (user management sprinkle)
+- Admin (admin panel sprinkle)
+- AdminLTE (theme sprinkle)
+
+UserFrosting 6.0 consolidates everything into a **single monorepo** at `https://github.com/userfrosting/monorepo`. This simplifies development, versioning, and dependency management.
+
+### Frontend Modernization
+**Before (5.1)**:
+- Webpack Encore for asset bundling
+- jQuery for DOM manipulation
+- Bootstrap for UI components
+- Handlebars for client-side templating
+
+**After (6.0)**:
+- Vite for lightning-fast asset bundling with HMR
+- Vue 3 for reactive components
+- UIkit 3 for modern UI framework (in AdminLTE theme)
+- TypeScript for type-safe development
+- Native ES modules
+
+### Development Experience
+- **Faster builds**: Vite's instant dev server startup vs Webpack's compilation
+- **Hot Module Replacement**: See changes instantly without page refresh
+- **Better errors**: Clear, actionable error messages
+- **Simplified config**: Less boilerplate, more intuitive
+
+### PHP Requirements
+- **Minimum PHP version**: 8.1 (up from 8.0)
+- **Recommended PHP version**: 8.4
+- **Node.js requirement**: 18.0+ (LTS 24 recommended)
+
+## Migration Time Estimate
+
+Depending on your application's complexity:
+
+- **Simple application** (minimal customization): 2-4 hours
+- **Moderate application** (custom sprinkles, some frontend work): 1-2 days
+- **Complex application** (extensive customizations, multiple sprinkles): 3-5 days
+
+The frontend migration (Webpack → Vite) typically requires the most attention, especially if you have custom Vue components or complex asset pipelines.
+
+## Getting Help
+
+If you encounter issues during the upgrade:
+
+1. Check the [Troubleshooting](troubleshooting) chapter
+2. Search existing [GitHub issues](https://github.com/userfrosting/monorepo/issues)
+3. Ask in the [UserFrosting chat](https://chat.userfrosting.com)
+4. Open a new issue with detailed information about your setup
+
+Ready to begin? Start with the [Changelog](upgrading/51-to-60/changelog) to understand what's changed, then follow the [Migration Guide](upgrading/51-to-60/guide) for step-by-step instructions.
diff --git a/app/pages/6.0/22.upgrading/02.50-to-51/01.changelog/docs.md b/app/pages/6.0/22.upgrading/02.50-to-51/01.changelog/docs.md
deleted file mode 100644
index 0cbc4327..00000000
--- a/app/pages/6.0/22.upgrading/02.50-to-51/01.changelog/docs.md
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: What's new in 5.1
-description: A detailed look at what's new in UserFrosting 5.1
-obsolete: true
----
-
-UserFrosting 5.1 focuses on adding PHP 8.3 support, removing PHP 8.1 support, upgrading Laravel, PHPUnit & FontAwesome dependencies and continue improving code quality.
-
-## Changed Requirements
-UserFrosting 5.1 removes support for PHP version 8.1, which has reached [End Of Life](http://php.net/supported-versions.php) as of November 2023 and won't receive security update as of November 2024. **PHP version 8.3 is now recommended**.
-
-## Upgraded Dependencies
- - Update from Laravel 8 to Laravel 10
- - Update from PHPUnit 9 to PHPUnit 10
- - Update from Monolog 2 to Monolog 3
- - Update FontAwesome 5 to FontAwesome 6
-
-## Detailed changes
-Changes generally applied across UserFrosting includes : 
- - Add automated testing against MariaDB [#1238](https://github.com/userfrosting/UserFrosting/issues/1238) on each sprinkles
- - Complete 100% test coverage & PHPStan Level 8 validation across all default packages
-
-### UserFrosting Framework
-#### General
-- Removed `src/Assets` (it isn't used as part of UserFrosting 5.0) 
-- SprinkleManager is a bit more strict on argument types. Recipe classed must be a `class-string`. The actual instance of the class will now be rejected (it wasn't a documented feature anyway).
-
-#### Fortress
-Complete refactoring of Fortress. Mostly enforcing strict types, updating PHPDocs, simplifying code logic and making uses of new PHP features and method. Most classes have been deprecated and replaced by new classes with updated implementation. 
-
-In general, instead of passing the *schema* in the constructor of Adapters, Transformers and Validators class, you pass it directly to theses class methods. This makes it easier to inject the classes as services and reuse the same instance with different schemas. 
-
-[Check out the updated documentation](routes-and-controllers/client-input/validation) for more information on new class usage, as well as the upgrade guide. 
-
-#### Config
-- Methods `getBool`, `getString`, `getInt` & `getArray` now return `null` if key doesn't exist, to make it on par with parent `get` method.
-
-#### Alert
-- Messages are now translated at read time ([#1156](https://github.com/userfrosting/UserFrosting/pull/1156), [#811](https://github.com/userfrosting/UserFrosting/issues/811)). Messages will be translated when using `messages` and `getAndClearMessages`. `addMessage` now accept the optional placeholders, which will be stored with the alert message. `addMessageTranslated` is **deprecated**. 
-- Translator is not optional anymore. `setTranslator` method has been removed.
-- `addValidationErrors` is deprecated (N.B.: It can't accept the new `\UserFrosting\Fortress\Validator\ServerSideValidatorInterface`)
-
-#### UniformResourceLocator
-- Two locations cannot have the same name anymore. An `InvalidArgumentException` will be thrown otherwise. (Ref [userfrosting/UserFrosting#1243](https://github.com/userfrosting/UserFrosting/issues/1243)).
-- [*DEPRECATION*] Location's `getSlug` is deprecated (redundant with the name and not really used).
-
-### Core sprinkle
-#### Rework of the assets building commands
-This change allows new bakery command to update Npm assets, and eventually allows sprinkles to replace webpack with something else (eg. Vite). The new commands are :
-  - `assets:install` : Alias for `npm install`.
-  - `assets:update` : Alias for `npm update`.
-  - `assets:webpack` : Alias for `npm run dev`, `npm run build` and `npm run watch`, each used to run Webpack Encore.
-  - `assets:build` : Aggregator command for building assets. Include by default `assets:install` and `assets:webpack`. The `webpack` and `build-assets` command are now alias of this command. `bake` also uses this command now. Sub commands can be added to `assets:build` by listening to `AssetsBuildCommandEvent`.
-
-*tl;dr* : Use `php bakery assets:build` instead of `php bakery webpack` or `php bakery build-assets`. 
-
-See [Assets Chapter](asset-management) and [Bakery commands](cli/commands) for more details.
-
-#### Loggers changes
-The different loggers now implement their own interface, for more flexibility with dependency injection. Debuggers should now be injected using their interface, instead of their class name.
-
-| Class name         | Interface                   |
-| ------------------ | --------------------------- |
-| DebugLogger        | DebugLoggerInterface        |
-| ErrorLogger        | ErrorLoggerInterface        |
-| MailLogger         | MailLoggerInterface         |
-| QueryLogger        | QueryLoggerInterface        |
-| UserActivityLogger | UserActivityLoggerInterface |
-
-Behind the scene, each interface extends `Psr\Log\LoggerInterface`. Plus, instead of *extending* `Monolog\Logger`, each loggers now *wraps* `Monolog\Logger`. This makes the loggers decoupled from Monolog implementation, in favor of the PSR implementation, making it easier to replace Monolog if required.
-
-Finally, `UserActivityLogger` used to define some constants. These have been moved to `UserActivityTypes` enum.
-
-#### New bakery commands
-- [`serve`](cli/commands#serve) : Run the php built-in web server to test your application 
-- [`debug:twig`](cli/commands#debug) : List all twig namespaces to help debugging
-
-#### New Twig Function
-Any configuration values can now be accessed in Twig using the [config](templating-with-twig/filters-and-functions#config) helper function. Before, only `site` subarray were available in Twig. Use this carefully, as sensitive information (ie. passwords) could be stored in config !
-
-#### Misc changes
-- Session database model now implements 
-- `UserFrosting\Sprinkle\Core\Database\Models\Interfaces\SessionModelInterface`;
-- Use our own RouterParser, wrapped around Slim's RouteParser. Allows to add 'fallback' routes when names routes are not found.
-
-### Account sprinkle
-Missing permissions slugs were missing from the original seed, and thus from to the database ([#1225](https://github.com/userfrosting/UserFrosting/issues/1225)). See the next page for more information on this.
-
-### Admin Sprinkle
-No significant changes.
-
-### AdminLTE theme
-Add fallback routes when 'index' is not defined (Fix [#1244](https://github.com/userfrosting/UserFrosting/issues/1244))
-
-## Complete change Log
-
-See the changelog of each component for the complete list of changes included in this release.
-- [Skeleton](https://github.com/userfrosting/UserFrosting/blob/5.1/CHANGELOG.md#510)
-- [Framework](https://github.com/userfrosting/framework/blob/5.1/CHANGELOG.md#510)
-- [Core sprinkle](https://github.com/userfrosting/sprinkle-core/blob/5.1/CHANGELOG.md#510)
-- [Account sprinkle](https://github.com/userfrosting/sprinkle-account/blob/5.1/CHANGELOG.md#510)
-- [Admin sprinkle](https://github.com/userfrosting/sprinkle-admin/blob/5.1/CHANGELOG.md#510)
-- [AdminLTE sprinkle](https://github.com/userfrosting/theme-adminlte/blob/5.1/CHANGELOG.md#510)
-
-## Migrating
-
-Now that we've cover the basics changes, follow on to the next pages to the steps required to bring your app up to date with UserFrosting 5.1.
diff --git a/app/pages/6.0/22.upgrading/02.50-to-51/02.guide/docs.md b/app/pages/6.0/22.upgrading/02.50-to-51/02.guide/docs.md
deleted file mode 100644
index f21b52f8..00000000
--- a/app/pages/6.0/22.upgrading/02.50-to-51/02.guide/docs.md
+++ /dev/null
@@ -1,291 +0,0 @@
----
-title: Upgrade Guide
-description: Upgrade guide from version 5.0.x to 5.1.x
-obsolete: true
----
-
-## Dependencies
-### Composer
-
-Upgrading UserFrosting to `5.1.x` from `5.0.x` is as simple as updating your `composer.json` file and fetching updated dependencies! First, you'll need to edit your `composer.json`.
-
-Update from : 
-```json
-// ...
-"require": {
-    "php": "^8.0",
-    "ext-gd": "*",
-    "userfrosting/framework": "^5.0",
-    "userfrosting/sprinkle-core": "^5.0",
-    "userfrosting/sprinkle-account": "^5.0",
-    "userfrosting/sprinkle-admin": "^5.0",
-    "userfrosting/theme-adminlte": "^5.0"
-},
-// ...
-```
-
-To:
-```json
-// ...
-"require": {
-    "php": "^8.1",
-    "ext-gd": "*",
-    "userfrosting/framework": "~5.1.0",
-    "userfrosting/sprinkle-core": "~5.1.0",
-    "userfrosting/sprinkle-account": "~5.1.0",
-    "userfrosting/sprinkle-admin": "~5.1.0",
-    "userfrosting/theme-adminlte": "~5.1.0"
-},
-// ...
-```
-
-Now, simply use composer to get up to date with everything :
-
-```bash
-$ composer update
-```
-
-### NPM
-
-Open `package.json` and update from : 
-
-```json
-// ...
-"dependencies": {
-    "@userfrosting/sprinkle-admin": "^5.0",
-    "@userfrosting/theme-adminlte": "^5.0"
-},
-// ...
-```
-
-To:
-```json
-// ...
-"dependencies": {
-    "@userfrosting/sprinkle-admin": "~5.1.0",
-    "@userfrosting/theme-adminlte": "~5.1.0"
-},
-// ...
-```
-
-Now, simply use npm and [Bakery](cli) to get up to date with everything else:
-
-```bash
-$ npm update
-$ php bakery bake
-```
-
-## Migrating your Sprinkles
-
-### Font Awesome
-
-UserFrosting 5.1 now ships with Font Awesome 6 in the AdminLTE theme. While Font Awesome 6 is backward compatible with Font Awesome 5, some icons [have been renamed](https://docs.fontawesome.com/web/setup/upgrade/whats-changed#icons-renamed-in-version-6) and you might need to manually update these in your sprinkle. 
-
-Checkout the Font Awesome guide for more information : [https://docs.fontawesome.com/web/setup/upgrade/whats-changed](https://docs.fontawesome.com/web/setup/upgrade/whats-changed)
-
-### Missing default permissions
-
-Some built-in permissions [were missing from the database](https://github.com/userfrosting/UserFrosting/issues/1225) :
- - `uri_role`
- - `uri_roles`
- - `uri_permissions`
- - `view_role_field`
- - `create_role`
- - `delete_role`
- - `update_user_field_role`
- - `update_role_field`
- - `view_user_field_permissions`
- - `view_system_info`
- - `clear_cache`
-
-To add them to the database, run `php bakery seed` and select `UserFrosting\Sprinkle\Account\Database\Seeds\DefaultPermissions`. These will also be added to the `site-admin` role when running the seed.
-
-> [!WARNING]
-> If your application defines custom permissions to the `site-admin` role or you customized this role, **do not run the seed** unless you want to lose any custom changes. Running the seed will revert back the role to it's default state.
-
-The `site-admin` role is now on par with the root user permission by default, except for the last two permissions added, `view_system_info` & `clear_cache`. Theses can be added to the role if desired using the UI.
-
-### `urlFor` service change
-
-When calling [`urlFor`](templating-with-twig/filters-and-functions#urlfor) **in PHP** (not Twig) to generate a route from its name, the service has been replaced. Find and replace the following import to upgrade: 
-- Find : `use Slim\Interfaces\RouteParserInterface;`
-- Replace : `use UserFrosting\Sprinkle\Core\Util\RouteParserInterface;`
-
-### Alerts
-
-When using the [alerts](advanced/alert-stream) service, replace `addMessageTranslated(...);` with `addMessage(...);`. The old method is still available, but it is deprecated and will be removed in a future version.
-
-### Fortress
-
-Fortress has been completely rewritten for UserFrosting 5.1. Most classes have been kept and will continue working, but these have been marked deprecated and will be removed in future version. It is recommended to upgrade your code now to avoid issues later.
-
-#### RequestSchema
-The `UserFrosting\Fortress\RequestSchema` constructor's first argument now accepts the schema data as an array, as well as a string representing a path to the schema json or yaml file. The argument can still be omitted to create an empty schema. This change makes `UserFrosting\Fortress\RequestSchema\RequestSchemaRepository` obsolete and and such been ***deprecated***. For example:
-
-```php
-// Before
-$schemaFromArray = new \UserFrosting\Fortress\RequestSchema\RequestSchemaRepository([
-    // ...
-]);
-
-// After
-$schemaFromArray = new \UserFrosting\Fortress\RequestSchema([
-    // ...
-]);
-```
-
-#### RequestDataTransformer
-`UserFrosting\Fortress\RequestDataTransformer` is ***deprecated*** and replaced by `\UserFrosting\Fortress\Transformer\RequestDataTransformer` (*notice the difference in the namespace !*). 
-
-When using the new class, instead of passing the schema in the constructor, you pass it directly to `transform()` or `transformField()`. For example : 
-
-```php
-// Before
-$transformer = new \UserFrosting\Fortress\RequestDataTransformer($schema);
-$result = $transformer->transform($data, 'skip');
-
-// After
-$transformer = new \UserFrosting\Fortress\Transformer\RequestDataTransformer();
-$result = $transformer->transform($schema, $data, 'skip');
-```
-
-`\UserFrosting\Fortress\RequestDataTransformerInterface` is also ***deprecated*** and replaced by `\UserFrosting\Fortress\Transformer\RequestDataTransformerInterface`. 
-
-> [!TIP]
-> Before, `RequestDataTransformer` was typically created inside the controllers each time it was needed. It now can be injected using `RequestDataTransformerInterface`.
-
-#### ServerSideValidator
-`\UserFrosting\Fortress\ServerSideValidator` is ***deprecated*** and replaced by `\UserFrosting\Fortress\Validator\ServerSideValidator` (*notice the difference in the namespace !*). 
-
-When using the new class, instead of passing the schema in the constructor, you pass it directly to `validate()`. For example : 
-
-```php
-// Before
-$validator = new \UserFrosting\Fortress\ServerSideValidator($schema, $this->translator);
-$result = $validator->validate($data);
-
-// After
-$adapter = new \UserFrosting\Fortress\Validator\ServerSideValidator($this->translator);
-$result = $validator->validate($schema, $data);
-```
-
-`\UserFrosting\Fortress\ServerSideValidatorInterface` is also ***deprecated*** and replaced by `\UserFrosting\Fortress\Validator\ServerSideValidatorInterface`. 
-  
-> [!TIP]
-> Before, `ServerSideValidator` was typically created inside the controllers each time it was needed. It now can be injected using `ServerSideValidatorInterface`. The translator will be "sub-injected" at the same time.
-
-#### FormValidationAdapter
-`UserFrosting\Fortress\Adapter\FormValidationAdapter` is ***deprecated***. Instead of defining the format in the `rules` method, you simply use of the appropriate class for the associated format.
-
-| Arguments                                  | Code                                                  | Replacement class                                          |
-| ------------------------------------------ | ----------------------------------------------------- | ---------------------------------------------------------- |
-| `$format = json` & `$stringEncode = true`  | `rules()` or `rules('json')` or `rules('json', true)` | `UserFrosting\Fortress\Adapter\FormValidationJsonAdapter`  |
-| `$format = json` & `$stringEncode = false` | `rules('json', false)`                                | `UserFrosting\Fortress\Adapter\FormValidationArrayAdapter` |
-| `$format = html5`                          | `rules('html5')`                                      | `UserFrosting\Fortress\Adapter\FormValidationHtml5Adapter` |
-
-Finally, instead of passing the schema in the constructor, you now pass it directly to `rules()`. 
-
-For example : 
-```php
-// Before
-$adapter = new FormValidationAdapter($schema, $this->translator);
-$result = $adapter->rules('json', false);
-
-// After
-$adapter = new FormValidationArrayAdapter($this->translator);
-$result = $adapter->rules($schema);
-```
-
-```php
-// Before
-$adapter = new FormValidationAdapter($schema, $this->translator);
-$result = $adapter->rules(); // Or $result = $adapter->rules('json');
-
-// After
-$adapter = new FormValidationJsonAdapter($this->translator);
-$result = $adapter->rules($schema);
-```
-
-> [!TIP]
-> Again, the required adapter can now be injected into your class.
-
-#### JqueryValidationAdapter
-`UserFrosting\Fortress\Adapter\JqueryValidationAdapter` is ***deprecated***. Instead of defining the format in the `rules` method, you simply use of the appropriate class for the associated format.
-
-| Arguments                                  | Code                                                   | Replacement class                                            |
-| ------------------------------------------ | ------------------------------------------------------ | ------------------------------------------------------------ |
-| `$format = json` & `$stringEncode = false` | `rules()` or `rules('json')` or `rules('json', false)` | `UserFrosting\Fortress\Adapter\JqueryValidationArrayAdapter` |
-| `$format = json` & `$stringEncode = true`  | `rules('json', true)`                                  | `UserFrosting\Fortress\Adapter\JqueryValidationJsonAdapter`  |
-
-```php
-// Before
-$validator = new JqueryValidationAdapter($schema, $this->translator);
-$result = $validator->rules();
-
-// After
-$validator = new JqueryValidationAdapter($this->translator);
-$result = $validator->rules($schema);
-```
-
-#### Validation errors
-
-`FormValidationAdapter` and `JqueryValidationAdapter` used to have an `errors()` method to fetch validation errors messages and `validate` used to return true if errors where found, an  false otherwise. These messages are now directly returned as an array when calling `validate`. An empty array means no error. Therefor, the way to handle them has changed :  
-
-Old : 
-```php
-if ($validator->validate($data) === false && is_array($validator->errors())) {
-    $e = new ValidationException();
-    $e->addErrors($validator->errors());
-}
-```
-
-New : 
-```php
-$errors = $this->validator->validate($schema, $data);
-if (count($errors) !== 0) {
-    $e = new ValidationException();
-    $e->addErrors($errors);
-
-    throw $e;
-}
-```
-
-This change affect alert's `addValidationErrors`, which can't be used anymore. 
-
-Old :
-```php
-$validator = new \UserFrosting\Fortress\ServerSideValidator($schema, $this->translator);
-if ($validator->validate($data) === false && is_array($validator->errors())) {
-    $this->alert->addValidationErrors($validator);
-        return;
-}
-```
-
-New :
-```php
-$validator = new \UserFrosting\Fortress\Validator\ServerSideValidator($this->translator);
-$errors = $this->validator->validate($schema, $data);
-if (count($errors) !== 0) {
-    foreach ($errors as $idx => $field) {
-        foreach ($field as $eidx => $error) {
-            $this->alert->addMessage('danger', $error);
-        }
-    }
-    return;
-}
-```
-
-### UserActivityLogger
-
-If using `UserActivityLogger` service, the default constants have been moved to the `UserActivityTypes` enum. 
-
-| Old                                        | New                                  |
-| ------------------------------------------ | ------------------------------------ |
-| UserActivityLogger::TYPE_REGISTER          | UserActivityTypes::REGISTER          |
-| UserActivityLogger::TYPE_VERIFIED          | UserActivityTypes::VERIFIED          |
-| UserActivityLogger::TYPE_PASSWORD_RESET    | UserActivityTypes::PASSWORD_RESET    |
-| UserActivityLogger::TYPE_LOGGED_IN         | UserActivityTypes::LOGGED_IN         |
-| UserActivityLogger::TYPE_LOGGED_OUT        | UserActivityTypes::LOGGED_OUT        |
-| UserActivityLogger::TYPE_PASSWORD_UPGRADED | UserActivityTypes::PASSWORD_UPGRADED |
-
-Plus, injections can be replaced from `UserActivityLogger` to `UserActivityLoggerInterface`.
diff --git a/app/pages/6.0/22.upgrading/02.50-to-51/03.roadmap/docs.md b/app/pages/6.0/22.upgrading/02.50-to-51/03.roadmap/docs.md
deleted file mode 100644
index 54928f7d..00000000
--- a/app/pages/6.0/22.upgrading/02.50-to-51/03.roadmap/docs.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: Coming up next
-description: ""
-obsolete: true
----
-
-### UserFrosting 5.2
-
-The main focus of UserFrosting 5.2 will be :
-
-- Update locales (translations), move them to their custom sprinkle
-- Improve Docker support
-- Add Redis/Memecache session driver
-- (Maybe) Update Laravel to version 11
-- (Maybe) Require PHP 8.2 minimum
-- Etc.
-
-No release date has been determined right now. If you would like to give a hand, don't hesitate to contribute by sending a Pull Request on GitHub, or getting in touch on the [Chat](https://chat.userfrosting.com).
-
-### UserFrosting 6
-
-Meanwhile, work for [UserFrosting 6](upgrading/46-to-50/roadmap#userfrosting-6) is moving along! As a reminder, UF6 goal is to completely rewrite the frontend, with a brand new custom theme replacing AdminLTE and based on [UIKit](https://getuikit.com). Handlebar and every frontend javascript code will also be replaced with [Vue.js](https://vuejs.org). 
-
-You can find a proof of concept of this new Vue.js based UI (built with UF5) and the foundation of the new theme, **Pink Cupcake**, at the links below.
-
-- [userfrosting/demo-vue](https://github.com/userfrosting/demo-vue/tree/main)
-- [userfrosting/theme-pinkcupcake](https://github.com/userfrosting/theme-pinkcupcake) 
diff --git a/app/pages/6.0/22.upgrading/02.50-to-51/chapter.md b/app/pages/6.0/22.upgrading/02.50-to-51/chapter.md
deleted file mode 100644
index 2b95fe9e..00000000
--- a/app/pages/6.0/22.upgrading/02.50-to-51/chapter.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-title: 5.0.x to 5.1.x
-description: Upgrade guide for UserFrosting 5.1
-obsolete: true
----
-
-# Upgrading to UserFrosting 5.1
-
-Welcome, loyal developers, to the wonders of **UserFrosting 5.1**! 
-
-UserFrosting 5.1 focuses on adding PHP 8.3 support, removing PHP 8.1 support, upgrading Laravel, PHPUnit & FontAwesome dependencies and continue improving code quality.
-
-> [!NOTE]
-> Before going further, make sure you're running the latest version of UserFrosting 5.0 and reviewed it's [upgrade guide](upgrading/46-to-50).
\ No newline at end of file
diff --git a/app/pages/6.0/22.upgrading/chapter.md b/app/pages/6.0/22.upgrading/chapter.md
index 7ffe9dd2..387da164 100644
--- a/app/pages/6.0/22.upgrading/chapter.md
+++ b/app/pages/6.0/22.upgrading/chapter.md
@@ -1,11 +1,57 @@
 ---
 title: Upgrading
-description: Upgrading to future versions of UserFrosting is easy...
-obsolete: true
+description: Guide for upgrading to UserFrosting 6.0 from previous versions.
+wip: true
 ---
 
 #### Chapter 22
 
-# Upgrading
+# Upgrading to UserFrosting 6.0
 
-Upgrading to newer versions of UserFrosting is easy, owing to the clean separation of the core codebase from your project's code. This chapter goes through this process for each new version in the 5 release cycle.
+UserFrosting 6.0 represents a major evolution of the framework, consolidating what was previously spread across six separate repositories into a single, unified monorepo. This structural change, combined with a modernized frontend stack and improved developer experience, makes this one of the most significant updates in UserFrosting's history.
+
+While the changes are substantial, the upgrade process is manageable when approached systematically. This chapter guides you through migrating from UserFrosting 5.1 to 6.0, explaining what's changed, why it changed, and how to update your application to take advantage of the new architecture.
+
+## What's New in 6.0
+
+UserFrosting 6.0 brings several major improvements:
+
+- **Unified Monorepo**: All components (Framework, Core, Account, Admin, AdminLTE) consolidated into one repository
+- **Modern Frontend Stack**: Transition from Webpack Encore to Vite with Hot Module Replacement
+- **Vue 3 & TypeScript**: First-class support for modern JavaScript development
+- **UIkit 3**: Updated UI framework replacing Bootstrap (in AdminLTE theme)
+- **Improved Developer Experience**: Faster build times, better error messages, simpler configuration
+- **PHP 8.1+ Required**: Leveraging modern PHP features and improved performance
+
+## Should You Upgrade?
+
+If you're starting a new project, absolutely use UserFrosting 6.0. For existing applications, consider:
+
+- **Green light**: If you're actively developing and can allocate migration time
+- **Yellow light**: If your app is in maintenance mode but could benefit from security updates
+- **Red light**: If your app is stable and you don't need new features (5.1 will receive critical security updates)
+
+UserFrosting 5.1 continues to receive security updates, so there's no immediate pressure to upgrade production applications. However, 6.0's improvements make it worthwhile for active projects.
+
+## Before You Begin
+
+> [!IMPORTANT]
+> **Back up your application and database** before starting the upgrade process. Test the upgrade in a development environment first, never directly in production.
+
+Requirements for UserFrosting 6.0:
+- PHP 8.1 or higher (8.4 recommended)
+- Composer 2
+- Node.js 18.0 or higher (24 LTS recommended)
+- npm 9.0 or higher
+
+## Upgrade Strategy
+
+The migration from 5.1 to 6.0 involves several layers:
+
+1. **Repository structure**: Moving from multiple repositories to monorepo
+2. **Dependencies**: Updating Composer and npm packages
+3. **Frontend assets**: Migrating from Webpack Encore to Vite
+4. **Configuration**: Adjusting for new structure and features
+5. **Custom code**: Updating your sprinkles for API changes
+
+This chapter walks you through each of these steps systematically.

From 4ec6d51667832b378e86c3054f1c087900d8671a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 31 Jan 2026 22:51:41 +0000
Subject: [PATCH 03/13] Update Chapter 15 introduction and overview for Vue
 3/modern stack

Co-authored-by: lcharette <2566513+lcharette@users.noreply.github.com>
---
 .../15.client-side-code/01.overview/docs.md   | 280 ++++++++++++++++--
 app/pages/6.0/15.client-side-code/chapter.md  |  63 +++-
 2 files changed, 316 insertions(+), 27 deletions(-)

diff --git a/app/pages/6.0/15.client-side-code/01.overview/docs.md b/app/pages/6.0/15.client-side-code/01.overview/docs.md
index 0820642c..8cdd3cc6 100644
--- a/app/pages/6.0/15.client-side-code/01.overview/docs.md
+++ b/app/pages/6.0/15.client-side-code/01.overview/docs.md
@@ -1,25 +1,261 @@
 ---
-title: Overview
-description: An overview of the client-side components that ship with UserFrosting.
-obsolete: true
+title: Client-Side Stack Overview
+description: Understanding the modern frontend tools and libraries that power UserFrosting 6.0
+wip: true
 ---
 
-UserFrosting uses jQuery and Bootstrap to provide a rich, intuitive, and modern user interface.
-
-It also uses the following components by default (of course, you can replace any of these as you see fit in your own Sprinkles):
-
-- [Handlebars.js](http://handlebarsjs.com/) - [client-side templating engine](client-side-code/client-side-templating)
-- [FontAwesome](http://fontawesome.io/) - Wildly popular icon library
-- [Ionicons](http://ionicons.com/) - More icons
-- [Tablesorter](https://mottie.github.io/tablesorter/docs/) - Flexible client-side table sorting
-- [jQuery Validation Plugin](https://jqueryvalidation.org/) - client-side [validation](routes-and-controllers/client-input/validation)
-- [select2](http://select2.github.io/) - Dropdowns that support search, autocomplete, and more
-- [Moment.js](https://momentjs.com/) - Parse, validate, manipulate, and display dates in JavaScript
-- [URI.js](http://medialize.github.io/URI.js/) - URL parsing library
-- [SpeakingURL](https://pid.github.io/speakingurl/) - URL slug generation
-- [iCheck](http://icheck.fronteed.com/) - Attractive checkboxes
-- [clipboard.js](https://clipboardjs.com/) - A modern approach to copy text to clipboard
-- [jquery-slimscroll](http://rocha.la/jQuery-slimScroll) - required by AdminLTE theme
-- [fastclick](https://github.com/ftlabs/fastclick) - required by AdminLTE theme
-
-This chapter fills in some of the gaps in communication between the client and server-side code bases, and explains how UserFrosting uses Handlebars.js and custom jQuery plugins to build dynamic, fully interactive features in your client's browser. 
+UserFrosting 6.0 uses a modern, component-based approach to building user interfaces. This page introduces the core technologies and explains how they work together to create fast, interactive web applications.
+
+## Core Technologies
+
+### Vue 3 - The Progressive Framework
+
+[Vue 3](https://vuejs.org/) is the heart of UserFrosting's client-side architecture. It's a progressive JavaScript framework that makes building interactive UIs straightforward and enjoyable.
+
+**What makes Vue 3 special**:
+- **Reactive data binding**: Your data and UI stay in sync automatically
+- **Component-based**: Build reusable pieces that encapsulate structure, style, and behavior
+- **Single File Components**: Keep your HTML, CSS, and JavaScript together in `.vue` files
+- **Composition API**: Organize complex logic more effectively than Options API
+- **Virtual DOM**: Efficient updates minimize browser repaints
+- **TypeScript-first**: Excellent TypeScript integration out of the box
+
+**Example** - A simple reactive component:
+```vue
+<template>
+  <button @click="count++">
+    Clicked {{ count }} times
+  </button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const count = ref(0)
+</script>
+```
+
+No DOM manipulation, no event listeners to wire up manually—Vue handles it all.
+
+### TypeScript - Type Safety for JavaScript
+
+[TypeScript](https://www.typescriptlang.org/) is JavaScript with syntax for types. It helps you catch errors during development instead of in production.
+
+**Benefits**:
+- **Catch bugs early**: Type checking finds errors before you run the code
+- **Better IDE support**: Autocompletion, refactoring, and inline documentation
+- **Self-documenting**: Types serve as living documentation
+- **Safer refactoring**: Rename variables, methods, and interfaces with confidence
+
+**Example**:
+```typescript
+interface User {
+  id: number
+  username: string
+  email: string
+}
+
+function greetUser(user: User): string {
+  return `Hello, ${user.username}!`
+}
+
+// TypeScript catches this error at compile time:
+// greetUser({ id: 1 }) // Error: Missing required properties
+```
+
+> [!TIP]
+> TypeScript is optional but highly recommended. You can start with regular JavaScript and gradually add types as you learn.
+
+### UIkit - Modern CSS Framework
+
+[UIkit](https://getuikit.com/) is a lightweight, modular CSS framework that provides the building blocks for UserFrosting's default AdminLTE theme.
+
+**Key features**:
+- **Lightweight**: Smaller bundle size than Bootstrap
+- **Modular**: Import only the components you need
+- **LESS-based**: Easy theme customization with variables
+- **Responsive**: Mobile-first design out of the box
+- **Rich components**: Modals, dropdowns, accordions, and more
+
+**Example** - UIkit button:
+```html
+<button class="uk-button uk-button-primary">
+  Primary Action
+</button>
+```
+
+### Vite - Modern Build Tool
+
+[Vite](https://vitejs.dev/) (covered in [Asset Management](asset-management)) handles building and bundling your frontend code.
+
+**Development benefits**:
+- **Instant server start**: No bundling during development
+- **Hot Module Replacement**: See changes immediately without page refresh
+- **Fast builds**: Significantly faster than Webpack
+
+### Axios - HTTP Client
+
+[Axios](https://axios-http.com/) is a promise-based HTTP client for making API requests.
+
+**Why we use it**:
+- **Consistent API**: Works the same in browsers and Node.js
+- **Automatic JSON parsing**: No need for `response.json()`
+- **Request/response interceptors**: Add authentication headers globally
+- **Better error handling**: Structured error objects
+- **Cancel requests**: Abort pending requests when needed
+
+**Example**:
+```typescript
+import axios from 'axios'
+
+// GET request
+const response = await axios.get('/api/users')
+const users = response.data
+
+// POST request with data
+await axios.post('/api/users', {
+  username: 'alex',
+  email: 'alex@example.com'
+})
+```
+
+## Supporting Libraries
+
+UserFrosting includes these additional libraries for common tasks:
+
+### FontAwesome - Icon Library
+
+[FontAwesome](https://fontawesome.com/) provides thousands of icons for your interface.
+
+**Usage in templates**:
+```html
+<i class="fa fa-user"></i> User Profile
+<i class="fa fa-cog"></i> Settings
+```
+
+### Luxon - Date & Time Handling
+
+[Luxon](https://moment.github.io/luxon/) (modern replacement for Moment.js) handles date parsing, formatting, and manipulation.
+
+**Example**:
+```typescript
+import { DateTime } from 'luxon'
+
+const now = DateTime.now()
+const formatted = now.toFormat('yyyy-MM-dd HH:mm:ss')
+const relative = now.toRelative() // "2 hours ago"
+```
+
+### Highlight.js - Code Syntax Highlighting
+
+[Highlight.js](https://highlightjs.org/) provides syntax highlighting for code blocks (used in UserFrosting's documentation).
+
+## Legacy Libraries (Deprecated)
+
+> [!WARNING]
+> These libraries are included for backward compatibility but are **deprecated**. New code should not use them.
+
+### jQuery (Deprecated)
+
+**Status**: Included but deprecated. Will be removed in a future version.
+
+**Migration**: Replace jQuery code with Vue 3 components or vanilla JavaScript.
+
+**Why deprecated**: Modern browsers have native APIs for what jQuery provided, and Vue's reactivity makes DOM manipulation unnecessary.
+
+### Handlebars (Deprecated)
+
+**Status**: Deprecated in favor of Vue templates.
+
+**Migration**: Convert Handlebars templates to Vue Single File Components.
+
+**Why deprecated**: Vue's template syntax is more powerful and integrates better with component logic.
+
+### Bootstrap (Removed from Core)
+
+**Status**: Replaced by UIkit in the default AdminLTE theme.
+
+**Migration**: Convert Bootstrap classes to UIkit equivalents.
+
+**Why changed**: UIkit provides a modern, lightweight alternative with excellent customization through LESS.
+
+## How It All Works Together
+
+Here's how these technologies combine in a typical UserFrosting page:
+
+1. **Backend (PHP/Twig)**: Renders the initial HTML structure and injects data
+2. **Vue 3**: Takes over specific parts of the page (or the entire page) for interactivity
+3. **TypeScript**: Provides type safety for your Vue components and utilities
+4. **UIkit**: Styles components with responsive, beautiful CSS
+5. **Axios**: Communicates with the backend API for dynamic data
+6. **Vite**: Bundles everything together efficiently
+
+**Example flow**:
+```
+User loads page
+    ↓
+Twig renders HTML + data
+    ↓
+Vue mounts to DOM
+    ↓
+User clicks button
+    ↓
+Vue handles click event
+    ↓
+Axios sends API request
+    ↓
+Server responds with JSON
+    ↓
+Vue updates UI reactively
+```
+
+## Development Workflow
+
+Your typical development cycle:
+
+1. **Start dev servers** (in two terminals):
+   ```bash
+   php bakery serve       # Backend (port 8080)
+   npm run vite:dev       # Frontend (port 5173)
+   ```
+
+2. **Make changes** to Vue components or TypeScript files
+
+3. **See results instantly** via Hot Module Replacement—no page refresh needed
+
+4. **Build for production**:
+   ```bash
+   npm run vite:build
+   ```
+
+## File Organization
+
+Frontend code lives in `app/assets/`:
+
+```
+app/assets/
+├── main.ts              # Application entry point
+├── theme.less           # Main stylesheet (UIkit customization)
+├── components/          # Vue components
+│   ├── MyComponent.vue
+│   └── shared/
+│       └── Button.vue
+├── composables/         # Reusable Vue logic
+│   └── useAuth.ts
+├── css/                 # Additional stylesheets
+├── public/              # Static assets (images, fonts)
+└── types/               # TypeScript type definitions
+```
+
+## What's Next?
+
+Now that you understand the stack, explore how to:
+
+- **[Export Variables](client-side-code/exporting-variables)**: Pass data from PHP to JavaScript
+- **[Build Vue Components](client-side-code/vue-components)**: Create reactive user interfaces
+- **[Work with Forms](client-side-code/components/forms)**: Handle user input and validation
+- **[Create Tables](client-side-code/components/tables)**: Display and manipulate data
+- **[Show Alerts](client-side-code/components/alerts)**: Provide user feedback
+
+> [!NOTE]
+> Don't feel overwhelmed! You don't need to master everything at once. Start with the basics and gradually explore more advanced features as needed. 
diff --git a/app/pages/6.0/15.client-side-code/chapter.md b/app/pages/6.0/15.client-side-code/chapter.md
index 61366205..e1dab007 100644
--- a/app/pages/6.0/15.client-side-code/chapter.md
+++ b/app/pages/6.0/15.client-side-code/chapter.md
@@ -1,11 +1,64 @@
 ---
-title: Client-side Code
-description: UserFrosting ships with client-side plugins and code that allow the backend to seamlessly interface with popular Javascript libraries and offer a rich, modern user experience.
-obsolete: true
+title: Client-Side Development
+description: Building modern interactive user interfaces with Vue 3, TypeScript, and UIkit
+wip: true
 ---
 
 #### Chapter 15
 
-# Client-side Code
+# Client-Side Development
 
-UserFrosting ships with client-side plugins and code that allow the backend to seamlessly interface with popular Javascript libraries and offer a rich, modern user experience.
+Modern web applications are fundamentally different from the static document-based websites of the past. Today's users expect rich, interactive experiences that respond instantly to their actions—without waiting for page reloads or server round-trips.
+
+UserFrosting 6.0 embraces this reality with a modern frontend stack centered around **Vue 3**, **TypeScript**, and **UIkit**. This chapter teaches you how to build reactive, component-based user interfaces that feel fast and responsive while integrating seamlessly with UserFrosting's backend.
+
+## The Modern Frontend Stack
+
+UserFrosting 6.0 uses these core technologies for client-side development:
+
+- **Vue 3**: Progressive JavaScript framework for building reactive user interfaces
+- **TypeScript**: Type-safe JavaScript that catches errors during development
+- **UIkit**: Lightweight, modular CSS framework with beautiful components
+- **Vite**: Lightning-fast build tool with Hot Module Replacement
+- **Axios**: Promise-based HTTP client for API communication
+
+Gone are the days of jQuery selectors and DOM manipulation. Vue 3's reactive data binding and component-based architecture make it easier to build complex UIs while writing less code.
+
+## Why Vue 3?
+
+If you're coming from jQuery or vanilla JavaScript, Vue 3 might seem like a significant change. Here's why it's worth learning:
+
+**Reactive Data Binding**: Changes to your data automatically update the UI. No more manually finding elements and updating their content.
+
+**Component-Based**: Break your UI into reusable pieces. Each component encapsulates its HTML, CSS, and JavaScript.
+
+**TypeScript Support**: Catch bugs before they reach production with type checking and intelligent code completion.
+
+**Better Performance**: Virtual DOM and optimized reactivity mean faster updates and smoother interactions.
+
+**Modern Developer Experience**: Hot Module Replacement (HMR) shows your changes instantly without page reloads.
+
+## What This Chapter Covers
+
+This chapter is your guide to building client-side features in UserFrosting:
+
+- **[Overview](client-side-code/overview)**: Understanding the client-side stack and available tools
+- **[Exporting Variables](client-side-code/exporting-variables)**: Passing data from PHP/Twig to JavaScript
+- **[Vue Components](client-side-code/vue-components)**: Building reactive components with Vue 3
+- **[Forms](client-side-code/components/forms)**: Creating validated, AJAX-powered forms
+- **[Tables](client-side-code/components/tables)**: Building data tables with sorting and filtering
+- **[Collections](client-side-code/components/collections)**: Managing dynamic lists of items
+- **[Alerts](client-side-code/components/alerts)**: Displaying notifications and messages
+
+> [!TIP]
+> If you're new to Vue 3, don't worry! This chapter explains concepts as we go. You don't need to be a Vue expert to build great features with UserFrosting.
+
+## Learning Path
+
+**If you're new to Vue**: Start with [Overview](client-side-code/overview) to understand the basics, then work through the component examples.
+
+**If you know Vue 2**: The [Vue Components](client-side-code/vue-components) section highlights what's different in Vue 3.
+
+**If you're upgrading from UserFrosting 5.1**: The component sections show how to migrate from jQuery plugins to Vue 3 patterns.
+
+Ready to build modern, interactive user interfaces? Let's dive in!

From 0fb9520abefe2dc804096a24c00a4f84a48e50de Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 31 Jan 2026 23:04:07 +0000
Subject: [PATCH 04/13] Update Chapter 15: exporting-variables and
 vue-components for modern stack

Co-authored-by: lcharette <2566513+lcharette@users.noreply.github.com>
---
 .../02.exporting-variables/docs.md            | 438 +++++++--
 .../03.client-side-templating/docs.md         | 186 ----
 .../03.vue-components/docs.md                 | 895 ++++++++++++++++++
 3 files changed, 1243 insertions(+), 276 deletions(-)
 delete mode 100644 app/pages/6.0/15.client-side-code/03.client-side-templating/docs.md
 create mode 100644 app/pages/6.0/15.client-side-code/03.vue-components/docs.md

diff --git a/app/pages/6.0/15.client-side-code/02.exporting-variables/docs.md b/app/pages/6.0/15.client-side-code/02.exporting-variables/docs.md
index 578a87f9..30914b9c 100644
--- a/app/pages/6.0/15.client-side-code/02.exporting-variables/docs.md
+++ b/app/pages/6.0/15.client-side-code/02.exporting-variables/docs.md
@@ -1,133 +1,391 @@
 ---
-title: Exporting Variables to Javascript
-description: The server-side variables that UserFrosting automatically exports to your pages as Javascript variables, and suggestions for exporting additional variables in your application.
-obsolete: true
+title: Passing Data from Server to Client
+description: How to pass server-side data to your Vue components and JavaScript code in UserFrosting 6.0
+wip: true
 ---
 
-We often need to access the value of some server-side variable in our client-side code. For example, we use the value `site.uri.public` throughout our Javascript code when building urls for AJAX requests. The value of this variable is taken directly from UserFrosting's configuration variable of the same name, and embedded into a Javascript variable on every page.
+Modern web applications need to pass data from the backend (PHP) to the frontend (JavaScript/Vue). UserFrosting provides several strategies for this, depending on your needs.
 
-There are a number of ways to get the values of specific variables from the server to the client. For example:
+This page covers the main approaches: global configuration objects, page-specific data, component props, and data attributes. Choose the right approach based on your use case.
 
-- Embedding data in the page DOM (HTML attributes), and then retrieving it from the DOM using `.prop`, `.val`, `.data`, or some other Javascript method
-- Making a separate AJAX request for the value of the variable
-- Printing the value of a PHP/Twig variable directly into a `<script>` tag and assigning it to a Javascript variable
+## Understanding the Client-Server Boundary
 
-Depending on the context of your application, one of these options might be more appropriate than the others. For the purposes of this section however, we will focus on the last option, and the "global" Javascript variables that UserFrosting makes available on each page. This is the best choice when you have miscellaneous values that aren't closely associated with any specific element of the DOM, and are generic enough that they don't warrant the trouble of making a separate AJAX request for their values.
+Before we dive in, remember that **JavaScript cannot directly access PHP variables**. When your browser loads a page:
 
-No matter how you go about it, it's important to keep in mind that **you're not directly accessing server-side variables in Javascript.** Keep in mind our [discussion on the client-server conversation](background/the-client-server-conversation) - the client makes a **request** for the page and receives a fixed piece of HTML in the **response**.
+1. **Server renders**: PHP/Twig generates HTML with embedded data
+2. **Client receives**: Browser gets a static HTML document
+3. **JavaScript runs**: Your code accesses the embedded data
 
-Any PHP variables we receive in the response are really just **copies of their server-side values** when the page was rendered. Our page can't change these values on the server without making another request - and even then, changes won't persist from one request to the next unless we use some sort of persistence mechanism (sessions, database, etc).
+Any data you need on the client must be included in the HTML response. Changes in JavaScript don't affect PHP variables unless you make an API request.
 
-## Site variables
+> [!NOTE]
+> This is a fundamental limitation of web architecture, not a UserFrosting quirk. The server and client are separate programs running on different machines.
 
-By default, UserFrosting will create a global `site` Javascript variable on every page. `site` is a JSON object that contains a copy of the main `site` config array, [defined in PHP](configuration/config-files) (ie. `app/sprinkles/core/config/default.php`). The following values are among the ones contained in the `site` object :
+## Approaches to Passing Data
 
-- `site.uri.public`: Base url of your site (e.g., `https://example.com`).
-- `site.debug.ajax`: `true` if AJAX debugging mode is enabled, false otherwise.
-- `site.csrf.keys.name`: The name of the CSRF `name` attribute expected by the CSRF middleware (Defaults to `csrf_name`).
-- `site.csrf.keys.value`: The name of the CSRF `value` attribute expected by the CSRF middleware (Defaults to `csrf_value`).
-- `site.csrf.name`: The value of the CSRF `name` attribute.
-- `site.csrf.value`: The value of the CSRF `value` attribute.
+### 1. Global Configuration Object (Best for Site-Wide Settings)
 
-Notice that all of these variables are nested under a single, top-level `site` object which is constructed in the `core/templates/pages/partials/config.js.twig` template. By formatting these as keys in a JSON object, rather than making each one an individual variable, we avoid polluting Javascript's global namespace with too many identifiers.
+UserFrosting creates a global `site` JavaScript object on every page containing configuration values. This is ideal for settings you'll need across multiple pages.
 
-To add, remove, or modify the contents of the `site` object, simply extends the `site` configuration [in your Sprinkle](configuration/config-files#file-structure).
+**Available in**: `window.site` or just `site`
 
-Alternatively, you can override `config.js.twig` in your Sprinkle. `config.js.twig` itself pulls its values from Twig's global variables (`site`, `current_user`, etc). Keep in mind that you can add global variables to Twig by [creating a Twig extension](https://twig.sensiolabs.org/doc/2.x/advanced.html#creating-an-extension) and then loading your extension by [extending the `view` service](services/extending-services#extending-existing-services). This process is summarized in this diagram:
+**Common values**:
+- `site.uri.public` - Base URL of your site (e.g., `https://example.com`)
+- `site.debug.ajax` - Whether AJAX debugging is enabled
+- `site.csrf.name` - CSRF token name
+- `site.csrf.value` - CSRF token value
 
-![Extending UserFrosting's client-side site variable](images/extending-site-variable.png)
+**Example usage** in TypeScript:
+```typescript
+// Making an API request with base URL
+import axios from 'axios'
+
+const response = await axios.get(`${site.uri.public}/api/users`)
+
+// Including CSRF token in POST requests
+await axios.post(`${site.uri.public}/api/users`, userData, {
+  headers: {
+    [site.csrf.keys.name]: site.csrf.name,
+    [site.csrf.keys.value]: site.csrf.value
+  }
+})
+```
+
+**How it works**: The `site` object is generated by `core/templates/pages/partials/config.js.twig` and pulls values from your [configuration files](configuration/config-files).
+
+**Customizing**: To add custom values to `site`:
+
+1. **Option A**: Extend your sprinkle's configuration:
+   ```php
+   // app/sprinkles/mysprinkle/config/default.php
+   return [
+       'site' => [
+           'myapp' => [
+               'feature_flag' => true,
+               'api_version' => 'v2'
+           ]
+       ]
+   ];
+   ```
+
+2. **Option B**: Override `config.js.twig` in your sprinkle to add custom logic
 
 > [!WARNING]
-> Remember, any data you place in the `site` variable will be visible to the end-user - all they have to do is "View source"! Don't put any sensitive or private information in this variable.
+> Everything in `site` is visible in the page source! Never put sensitive information (API keys, passwords, private user data) in this object.
 
-## Page-specific variables
+### 2. Page-Specific Data (Best for Page Initialization)
 
-For your convenience, the `core/templates/pages/partials/page.js.twig` template will generate a `page` JSON object. This is similar to `site`, but is populated by passing an array of data to the `page` key when rendering a template:
+For data specific to a single page, use the `page` global object. This is populated by passing data to the `page` key when rendering your Twig template.
 
+**PHP Controller**:
 ```php
-public function __invoke(Request $request, Response $response): Response
+public function displayUsers(Request $request, Response $response): Response
 {
-    // ...
-
-    // Load validation rules
-    $schema = new RequestSchema("schema://requests/register.yaml");
-    $validatorRegister = new JqueryValidationJsonAdapter($this->translator);
-
-    // Pass them to the `page` key of the template placeholders
-    return $this->view->render($response, 'pages/register.html.twig', [
-        "page" => [
-            "validators" => [
-                "register" => $validatorRegister->rules($schema)
-            ]
+    return $this->view->render($response, 'pages/users.html.twig', [
+        'page' => [
+            'api_endpoint' => '/api/users',
+            'per_page' => 25,
+            'initial_data' => $this->userRepository->all()
         ]
     ]);
 }
 ```
 
-You can then include the `page.js.twig` component in your page template's `scripts_page` block, before any page-specific asset bundles:
-
+**Twig Template** (include in your page):
 ```twig
 {% block scripts_page %}
-    <!-- Include page-specific variables -->
     <script>
         {% include "pages/partials/page.js.twig" %}
     </script>
 {% endblock %}
 ```
 
-Twig will automatically convert the array you passed to `render` in your page controller method to a JSON object:
-
-```js
-
-// Appears in the rendered page DOM for /account/register
-
-var page = {
-    "validators": {
-        "register": {
-            "rules": {
-                "user_name": {
-                    "rangelength": [
-                        1,
-                        50
-                    ],
-                    "noLeadingWhitespace": true,
-                    "noTrailingWhitespace": true,
-                    "required": true,
-                    "username": true
-                },
-                ...
-            },
-            "messages": {
-                "user_name": {
-                    "rangelength": "Username must be between 1 and 50 characters in length.",
-                    "noLeadingWhitespace": "The value for 'Username' cannot begin with spaces, tabs, or other whitespace.",
-                    "noTrailingWhitespace": "The value for 'Username' cannot end with spaces, tabs, or other whitespace.",
-                    "required": "Please specify a value for 'Username'.",
-                    "username": "Username may consist only of lowercase letters, numbers, '.', '-', and '_'."
-                },
-                ...
-            }
-        }
-    }
-};
+**JavaScript/TypeScript Access**:
+```typescript
+// The page object is now available globally
+console.log(page.api_endpoint) // "/api/users"
+console.log(page.per_page) // 25
+
+// Use it in your Vue components or vanilla JS
+const users = page.initial_data
 ```
 
-## Dynamically extending JSON objects
+This approach works well for validation rules, API endpoints, initial data loads, and feature flags specific to a page.
+
+### 3. Vue Component Props (Best for Component Data)
+
+When using Vue 3 components, pass data directly as props through the component's mounting HTML.
 
-Occasionally, you will want to dynamically modify the contents of `site`, `page`, or some other JSON variable. For example, you might want to override a variable on a specific page. To do this, you can use jQuery's `extend` method:
+**Twig Template**:
+```twig
+<div id="user-profile" 
+     data-user-id="{{ user.id }}"
+     data-username="{{ user.username }}"
+     data-email="{{ user.email }}">
+</div>
+```
+
+**Vue Component** (`UserProfile.vue`):
+```vue
+<template>
+  <div>
+    <h2>{{ username }}</h2>
+    <p>Email: {{ email }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const userId = ref<number>(0)
+const username = ref<string>('')
+const email = ref<string>('')
+
+onMounted(() => {
+  const el = document.getElementById('user-profile')
+  if (el) {
+    userId.value = parseInt(el.dataset.userId || '0')
+    username.value = el.dataset.username || ''
+    email.value = el.dataset.email || ''
+  }
+})
+</script>
+```
+
+Or, better yet, pass props when creating the Vue app:
+
+**Twig Template**:
+```twig
+<div id="user-profile"></div>
 
-```js
 <script>
-    site = $.extend(
-        true, // deep extend
-        {
-            "debug" : {
-                "ajax" : false // Disable AJAX debugging on this page only
-            }
-        },
-        site
-    );
+    window.userProfileData = {
+        userId: {{ user.id }},
+        username: "{{ user.username }}",
+        email: "{{ user.email }}"
+    };
 </script>
 ```
 
-You should do this in your page template's `scripts_page` block, after loading the original versions of the variables but before loading any page asset bundles.
+**TypeScript**:
+```typescript
+import { createApp } from 'vue'
+import UserProfile from './components/UserProfile.vue'
+
+createApp(UserProfile, {
+  userId: window.userProfileData.userId,
+  username: window.userProfileData.username,
+  email: window.userProfileData.email
+}).mount('#user-profile')
+```
+
+### 4. Data Attributes (Best for Small Amounts of Data)
+
+For simple, element-specific data, use HTML5 `data-*` attributes. This is ideal when your JavaScript needs to know about specific elements on the page.
+
+**Twig Template**:
+```twig
+<button 
+    class="delete-user" 
+    data-user-id="{{ user.id }}"
+    data-user-name="{{ user.username }}">
+    Delete User
+</button>
+```
+
+**TypeScript**:
+```typescript
+document.querySelectorAll('.delete-user').forEach(button => {
+  button.addEventListener('click', async (e) => {
+    const target = e.currentTarget as HTMLButtonElement
+    const userId = target.dataset.userId
+    const userName = target.dataset.userName
+    
+    if (confirm(`Delete user ${userName}?`)) {
+      await deleteUser(userId)
+    }
+  })
+})
+```
+
+**Vue 3 Alternative** (using template refs):
+```vue
+<template>
+  <button @click="handleDelete" :data-user-id="userId">
+    Delete User
+  </button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps<{
+  userId: number
+  userName: string
+}>()
+
+const handleDelete = async () => {
+  if (confirm(`Delete user ${props.userName}?`)) {
+    await deleteUser(props.userId)
+  }
+}
+</script>
+```
+
+### 5. API Requests (Best for Dynamic Data)
+
+For data that changes frequently or is too large to embed, fetch it via API calls after the page loads.
+
+**TypeScript**:
+```typescript
+import axios from 'axios'
+
+interface User {
+  id: number
+  username: string
+  email: string
+}
+
+// Fetch data after page load
+async function loadUsers(): Promise<User[]> {
+  const response = await axios.get<User[]>(`${site.uri.public}/api/users`)
+  return response.data
+}
+
+// Use in your code
+const users = await loadUsers()
+```
+
+**Vue 3 Composable** (reusable logic):
+```typescript
+// composables/useUsers.ts
+import { ref, Ref } from 'vue'
+import axios from 'axios'
+
+export function useUsers() {
+  const users: Ref<User[]> = ref([])
+  const loading = ref(false)
+  const error = ref<Error | null>(null)
+
+  async function fetchUsers() {
+    loading.value = true
+    error.value = null
+    
+    try {
+      const response = await axios.get(`${site.uri.public}/api/users`)
+      users.value = response.data
+    } catch (e) {
+      error.value = e as Error
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return { users, loading, error, fetchUsers }
+}
+```
+
+## Choosing the Right Approach
+
+Use this decision tree:
+
+| Data Type | Best Approach | Why |
+|-----------|---------------|-----|
+| Site-wide config (URLs, CSRF) | Global `site` object | Available everywhere, cached |
+| Page-specific settings | Global `page` object | Page scope, easy access |
+| Component initialization | Vue props | Type-safe, reactive |
+| Element metadata | Data attributes | Semantic, standard HTML |
+| Large/dynamic data | API requests | Reduces initial page size |
+| Real-time data | API + polling/WebSockets | Always current |
+
+## Modern ES Modules and TypeScript
+
+With Vite and modern JavaScript, avoid global variables when possible. Instead, export and import values:
+
+**config.ts**:
+```typescript
+// Re-export site config with types
+export interface SiteConfig {
+  uri: {
+    public: string
+  }
+  csrf: {
+    name: string
+    value: string
+    keys: {
+      name: string
+      value: string
+    }
+  }
+}
+
+// Access global site object with type safety
+export const siteConfig: SiteConfig = (window as any).site
+```
+
+**Usage**:
+```typescript
+import { siteConfig } from './config'
+
+// Now fully typed!
+const url = `${siteConfig.uri.public}/api/users`
+```
+
+## Security Considerations
+
+> [!WARNING]
+> **Never expose sensitive data to the client:**
+> - Database credentials
+> - API keys or secrets
+> - Other users' private information
+> - Internal system paths
+> - Unfiltered user input (XSS risk)
+
+**Safe to expose:**
+- Public URLs and endpoints
+- CSRF tokens (designed for client use)
+- Current user's own data
+- Public configuration settings
+
+**Remember**: Anything in the HTML can be viewed by the user. Treat all client-side data as potentially compromised.
+
+## Debugging Data Transfer
+
+### View Available Data
+
+Open your browser's console and type:
+```javascript
+console.log('Site config:', site)
+console.log('Page data:', page)
+```
+
+### Validate JSON Structure
+
+If data isn't working as expected, check that your PHP array converts correctly to JSON:
+
+```php
+// Good - simple types convert cleanly
+'count' => 42,
+'name' => 'John',
+'active' => true
+
+// Problematic - resource types don't serialize
+'database' => $pdo, // ❌ Won't work
+
+// Solution - extract only the data you need
+'user' => [
+    'id' => $user->id,
+    'name' => $user->username
+]
+```
+
+## What's Next?
+
+Now that you know how to pass data from server to client, learn how to use it in:
+
+- **[Vue Components](client-side-code/vue-components)**: Build reactive UIs with the data
+- **[Forms](client-side-code/components/forms)**: Submit data back to the server
+- **[Tables](client-side-code/components/tables)**: Display collections of data
+
+> [!TIP]
+> Start simple with global objects (`site`, `page`), then graduate to Vue props and API calls as your application grows in complexity.
diff --git a/app/pages/6.0/15.client-side-code/03.client-side-templating/docs.md b/app/pages/6.0/15.client-side-code/03.client-side-templating/docs.md
deleted file mode 100644
index 1848be09..00000000
--- a/app/pages/6.0/15.client-side-code/03.client-side-templating/docs.md
+++ /dev/null
@@ -1,186 +0,0 @@
----
-title: Client-side Templating
-description: An overview of how UserFrosting uses Handlebars.js for client-side templating.
-obsolete: true
----
-<!-- [plugin:content-inject](modular/_update5.0) -->
-
-In [Templating with Twig](templating-with-twig), we learned how Twig helps you separate the logic of your server-side application from the layout of the pages it generates. Handlebars.js plays a similar role on the client side of your application, in Javascript. The main difference is that with Twig we are often generating complete pages, whereas with Handlebars we typical only generate smaller snippets of HTML to be inserted into the DOM.
-
-## Handlebars.js basic usage
-
-Handlebars is fairly straightforward to use. A Handlebars template is created by calling `Handlebars.compile` on a string:
-
-```js
-var counterTemplate = Handlebars.compile("Owls in my care: <span class=\"pull-right badge bg-blue\">{{owls.count}}</span>");
-```
-
-We can then render this template, calling the template on a JSON object and appending the rendered template to an element in our page's DOM:
-
-```js
-var counterRendered = counterTemplate({
-    owls: {
-        count: 5
-    }
-});
-var counterDOM = $(counterRendered).appendTo($("#parentDiv"));
-```
-
-Of course, the JSON object is optional and can be omitted if your template does not contain any dynamically generated content.
-
-### Template blocks
-
-Since writing long HTML snippets as strings can become unwieldy and difficult to read, we can place our templates in `script` tags with the `text/x-handlebars-template` type attribute. The entire `script` block can then be rendered in our page's Twig template:
-
-```html
-
-{# This contains a series of <script> blocks, each of which is a client-side Handlebars template.
- # Note that these are NOT Twig templates, although the syntax is similar.
- #
- # These templates require handlebars-helpers.js.
-#}
-
-{% verbatim %}
-<script id="owl-description-item" type="text/x-handlebars-template">
-    <div>
-        <strong>
-            {{species}}
-        </strong>
-        <br>
-        {{description}}
-    </div>
-</script>
-{% endverbatim %}
-```
-
-By placing each Handlebars template in a separate `script` tag, and giving each one a unique `id`, we make it easy to choose a template to compile and render in our Javascript code:
-
-```js
-var owlTemplate = Handlebars.compile($("#owl-description-item").html());
-```
-
-Note that since Handlebars and Twig have similar syntax, we wrap our Handlebars templates in Twig's `verbatim` tag so that Twig won't try to parse the Handlebars template when it renders the page.
-
-## Template syntax
-
-Handlebars.js and Twig use a similar syntax. As with Twig, placeholders are represented using the `{{double-mustache}}` notation. However, compared to Twig, Handlebars.js is fairly sparse in terms of control structures and other features.
-
-### If blocks
-
-In Handlebars, `#if` is a **helper**. Helpers always begin with `#` in their opening tag, and `/` in their closing tag.
-
-```html
-<div class="entry">
-  {{#if author}}
-    <h1>{{firstName}} {{lastName}}</h1>
-  {{else}}
-    <h1>Unknown Author</h1>
-  {{/if}}
-</div>
-```
-
-It's also important to note that the `if` helper in Handlebars doesn't support logical expressions. For example:
-
-```html
-<!-- won't work! -->
-{{#if author == "Attenborough"}}
-  <h1>{{firstName}} {{lastName}}</h1>
-{{/if}}
-```
-
-To compare two values in an if/else block, use our custom Handlebars helper instead:
-
-```html
-{{#ifx author '==' 'David Attenborough' }}
-  <h1>{{firstName}} {{lastName}}</h1>
-{{/ifx}}
-```
-
-> [!IMPORTANT]
-> `#ifx` supports the basic logical operators (`==`, `!=`, `>`, `<`, etc), but does not support compound expressions. You can instead nest your expressions, or create your own custom helper. For more information, see [this Stack Overflow question](http://stackoverflow.com/questions/8853396/logical-operator-in-a-handlebars-js-if-conditional).
-
-### Loops
-
-Handlebars.js provides a limited syntax for loops using the `#each` helper:
-
-If you pass this object:
-
-```js
-var data = {
-  owls: [
-    "Fluffers",
-    "Slasher",
-    "Muhammad Owli"
-  ]
-}
-```
-
-...when rendering this template:
-
-```html
-<ul id="myOwls">
-  {{#each owls}}
-    <li>{{this}}</li>
-  {{/each}}
-</ul>
-```
-
-Handlebars will generate the `li`s with the values from the `owls` list. In an `#each` block, `this` refers to the current value in our iteration over the array.
-
-In the real world, it's actually **fairly rare** that you will end up using the `#each` helper. More likely, you will end up with a template that renders just a **single element** of a list or row in a table. You'll then render each row using a jQuery loop:
-
-**Template:**
-
-```html
-{# "Parent" element that will hold your list of owls #}
-<ul id="myOwls">
-</ul>
-
-{# Handlebars template for generating the list items in myOwls #}
-{% verbatim %}
-<script id="owls-list-item" type="text/x-handlebars-template">
-    <li>{{name}}</li>
-</script>
-{% endverbatim %}
-```
-
-Your page Javascript might have something like:
-
-```js
-// Compile the template
-var owlItemTemplate = Handlebars.compile($("#owls-list-item").html());
-
-// Loop through the owls, rending each item individually and then insert in the parent element
-$.each(data.owls, function (idx, owl) {
-    var owlItemRendered = owlItemTemplate(owl);
-    $(owlItemRendered).appendTo($("#myOwls"));
-});
-```
-
-This approach is very common in client side templating, because users often need to dynamically interact with collections of elements. Having a template for a single row or item allows you to dynamically add and remove individual items in your client-side application.
-
-## Other built-in helpers
-
-Handlebars' full list of built-in helpers can be found [here](http://handlebarsjs.com/guide/builtin-helpers.html#if).
-
-## Extra helpers
-
-UserFrosting provides some additional helpers on top of Handlebars' built-in ones:
-
-### dateFormat
-
-Format an ISO date using [Moment.js](http://momentjs.com).
-
-```
-{{name}} was adopted on {{dateFormat adoption_date format="MMMM YYYY"}}.
-```
-
-`format` should be a valid Moment.js [format string](https://momentjs.com/docs/#/displaying/format/).
-
-### phoneUSFormat
-
-Format a string as a US phone number (`(xxx) xxx-xxxx`)
-
-### currencyUsdFormat
-
-Format a floating-point value as US currency.
diff --git a/app/pages/6.0/15.client-side-code/03.vue-components/docs.md b/app/pages/6.0/15.client-side-code/03.vue-components/docs.md
new file mode 100644
index 00000000..a7900363
--- /dev/null
+++ b/app/pages/6.0/15.client-side-code/03.vue-components/docs.md
@@ -0,0 +1,895 @@
+---
+title: Building Vue 3 Components
+description: Learn how to create reactive, reusable UI components with Vue 3 Single File Components
+wip: true
+---
+
+Vue 3 is UserFrosting's recommended approach for building interactive user interfaces. Unlike the imperative jQuery patterns of the past, Vue uses declarative, component-based architecture that makes your code easier to understand, test, and maintain.
+
+This guide introduces Vue 3 components and shows you how to use them in UserFrosting applications.
+
+## What Are Vue Components?
+
+A Vue component is a self-contained piece of UI with its own:
+- **Template** (HTML structure)
+- **Logic** (JavaScript/TypeScript behavior)  
+- **Styles** (CSS, scoped to the component)
+
+Think of components as custom HTML elements you can reuse throughout your application.
+
+**Simple example**:
+```vue
+<template>
+  <button @click="count++">
+    Clicked {{ count }} times
+  </button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const count = ref(0)
+</script>
+
+<style scoped>
+button {
+  padding: 0.5rem 1rem;
+  background: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+</style>
+```
+
+This single file defines everything the component needs. When used in your application, it creates an interactive button that tracks how many times it's been clicked.
+
+## Single File Components (SFCs)
+
+Vue 3 components in UserFrosting are written as **Single File Components** with a `.vue` extension. Each file contains everything the component needs in one place.
+
+**File structure**:
+```
+app/assets/
+└── components/
+    ├── UserCard.vue
+    ├── UserForm.vue
+    └── shared/
+        ├── Button.vue
+        └── Modal.vue
+```
+
+### Anatomy of an SFC
+
+**UserCard.vue** - A complete component example:
+```vue
+<!-- Template: What the component renders -->
+<template>
+  <div class="user-card">
+    <img :src="avatarUrl" :alt="username" />
+    <h3>{{ username }}</h3>
+    <p>{{ email }}</p>
+    <button @click="sendMessage">Message</button>
+  </div>
+</template>
+
+<!-- Script: Component logic and state -->
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+// Props (inputs from parent)
+const props = defineProps<{
+  userId: number
+  username: string
+  email: string
+  avatar?: string
+}>()
+
+// Reactive state
+const messageCount = ref(0)
+
+// Computed values
+const avatarUrl = computed(() => 
+  props.avatar || `/images/default-avatar.png`
+)
+
+// Methods
+function sendMessage() {
+  messageCount.value++
+  // Send message logic...
+}
+</script>
+
+<!-- Styles: Scoped to this component only -->
+<style scoped>
+.user-card {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 1rem;
+  text-align: center;
+}
+
+.user-card img {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+}
+</style>
+```
+
+The beauty of SFCs is that everything related to the component lives in one file, making it easy to understand and maintain.
+
+## Composition API with Script Setup
+
+UserFrosting uses Vue 3's `<script setup>` syntax, which is more concise than the Options API. Everything you define in `<script setup>` is automatically available in the template—no need to explicitly return or export.
+
+```vue
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+
+// Reactive state - automatically available in template
+const user = ref({ name: 'Alex', age: 25 })
+
+// Computed property - recalculates when dependencies change
+const greeting = computed(() => `Hello, ${user.value.name}!`)
+
+// Lifecycle hook - runs when component mounts
+onMounted(() => {
+  console.log('Component is ready!')
+})
+
+// Method - can be called from template
+function updateAge(newAge: number) {
+  user.value.age = newAge
+}
+</script>
+
+<template>
+  <!-- All script variables are available here -->
+  <div>
+    <p>{{ greeting }}</p>
+    <p>Age: {{ user.age }}</p>
+    <button @click="updateAge(26)">Update Age</button>
+  </div>
+</template>
+```
+
+**Why we prefer `<script setup>`**:
+- Less boilerplate code
+- Better TypeScript inference
+- Easier to organize complex logic
+- Slightly better performance
+
+## Reactivity System
+
+Vue's reactivity is what makes it "magical"—when data changes, the UI updates automatically. No manual DOM manipulation required!
+
+### ref() - For Primitives
+
+Use `ref()` for simple values (numbers, strings, booleans):
+
+```typescript
+import { ref } from 'vue'
+
+const count = ref(0)
+const message = ref('Hello')
+const isActive = ref(true)
+
+// Access/modify with .value in JavaScript
+count.value++
+message.value = 'Goodbye'
+isActive.value = !isActive.value
+```
+
+In templates, Vue automatically unwraps refs (no `.value` needed):
+```vue
+<template>
+  <!-- Vue unwraps automatically -->
+  <p>Count: {{ count }}</p>
+  <p>{{ message }}</p>
+  <p v-if="isActive">Active!</p>
+</template>
+```
+
+### reactive() - For Objects
+
+Use `reactive()` for objects and arrays:
+
+```typescript
+import { reactive } from 'vue'
+
+const user = reactive({
+  name: 'Alex',
+  email: 'alex@example.com',
+  roles: ['user', 'moderator']
+})
+
+// Mutate directly (no .value)
+user.name = 'Jordan'
+user.roles.push('admin')
+```
+
+**When to use which**:
+- `ref()` - Primitives, single values, or when you might reassign the whole value
+- `reactive()` - Objects/arrays you'll mutate properties of
+
+### computed() - Derived Values
+
+Computed properties automatically update when their dependencies change and cache the result:
+
+```vue
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const firstName = ref('John')
+const lastName = ref('Doe')
+
+// Recalculates only when firstName or lastName change
+const fullName = computed(() => `${firstName.value} ${lastName.value}`)
+
+// Can also be writable
+const fullNameWritable = computed({
+  get: () => `${firstName.value} ${lastName.value}`,
+  set: (value) => {
+    [firstName.value, lastName.value] = value.split(' ')
+  }
+})
+</script>
+
+<template>
+  <p>{{ fullName }}</p>
+  <input v-model="fullNameWritable" />
+</template>
+```
+
+## Template Syntax
+
+Vue templates look like HTML but with special directives for dynamic behavior.
+
+### Text Interpolation
+
+Display reactive data with double curly braces:
+
+```vue
+<template>
+  <p>Message: {{ message }}</p>
+  <p>Count + 1: {{ count + 1 }}</p>
+  <p>Uppercase: {{ message.toUpperCase() }}</p>
+  <p>{{ isActive ? 'Active' : 'Inactive' }}</p>
+</template>
+```
+
+### Attribute Binding (v-bind / :)
+
+Bind reactive data to HTML attributes:
+
+```vue
+<template>
+  <!-- Shorthand: : -->
+  <img :src="imageUrl" :alt="imageAlt" />
+  <button :disabled="isLoading" :class="buttonClass">
+    Submit
+  </button>
+  
+  <!-- Dynamic classes -->
+  <div :class="{ active: isActive, disabled: isDisabled }">
+    ...
+  </div>
+  
+  <!-- Dynamic styles -->
+  <div :style="{ color: textColor, fontSize: fontSize + 'px' }">
+    ...
+  </div>
+</template>
+```
+
+### Event Handling (v-on / @)
+
+Listen to DOM events:
+
+```vue
+<template>
+  <!-- Shorthand: @ -->
+  <button @click="handleClick">Click me</button>
+  <input @input="handleInput" />
+  <form @submit.prevent="onSubmit">
+    ...
+  </form>
+  
+  <!-- Event modifiers -->
+  <button @click.stop="handleClick">Stop propagation</button>
+  <button @click.once="initialize">Run once</button>
+  
+  <!-- Keyboard modifiers -->
+  <input @keyup.enter="submit" @keyup.esc="cancel" />
+</template>
+
+<script setup lang="ts">
+function handleClick(event: MouseEvent) {
+  console.log('Clicked!', event)
+}
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  console.log('Input value:', target.value)
+}
+
+function onSubmit() {
+  // Form submission logic
+}
+</script>
+```
+
+### Conditional Rendering
+
+**v-if / v-else-if / v-else** - Elements added/removed from DOM:
+
+```vue
+<template>
+  <div v-if="userRole === 'admin'">
+    Admin Panel
+  </div>
+  <div v-else-if="userRole === 'moderator'">
+    Moderator Tools
+  </div>
+  <div v-else>
+    Regular User View
+  </div>
+</template>
+```
+
+**v-show** - Elements stay in DOM, just toggle `display`:
+
+```vue
+<template>
+  <!-- Better for frequently toggled elements -->
+  <div v-show="isVisible">
+    This toggles display: none
+  </div>
+</template>
+```
+
+### List Rendering (v-for)
+
+Loop through arrays or objects:
+
+```vue
+<template>
+  <!-- Array -->
+  <ul>
+    <li v-for="user in users" :key="user.id">
+      {{ user.name }}
+    </li>
+  </ul>
+  
+  <!-- With index -->
+  <ul>
+    <li v-for="(user, index) in users" :key="user.id">
+      {{ index + 1 }}. {{ user.name }}
+    </li>
+  </ul>
+  
+  <!-- Object properties -->
+  <ul>
+    <li v-for="(value, key) in userObject" :key="key">
+      {{ key }}: {{ value }}
+    </li>
+  </ul>
+</template>
+```
+
+> [!IMPORTANT]
+> Always provide a unique `:key` when using `v-for`. This helps Vue track elements efficiently.
+
+### Two-Way Binding (v-model)
+
+Synchronize form inputs with state:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const message = ref('')
+const checked = ref(false)
+const selected = ref('')
+const multiSelect = ref([])
+</script>
+
+<template>
+  <!-- Text input -->
+  <input v-model="message" />
+  <p>{{ message }}</p>
+  
+  <!-- Checkbox -->
+  <input type="checkbox" v-model="checked" />
+  
+  <!-- Select -->
+  <select v-model="selected">
+    <option value="a">Option A</option>
+    <option value="b">Option B</option>
+  </select>
+  
+  <!-- Multi-select -->
+  <select v-model="multiSelect" multiple>
+    <option value="a">A</option>
+    <option value="b">B</option>
+    <option value="c">C</option>
+  </select>
+  
+  <!-- Modifiers -->
+  <input v-model.trim="message" /> <!-- trim whitespace -->
+  <input v-model.number="age" /> <!-- convert to number -->
+  <input v-model.lazy="message" /> <!-- update on change, not input -->
+</template>
+```
+
+## Component Communication
+
+### Props (Parent → Child)
+
+Pass data from parent to child components:
+
+**Parent.vue**:
+```vue
+<template>
+  <UserCard 
+    :user-id="123"
+    :username="'alex'"
+    :email="'alex@example.com'"
+    :is-admin="true"
+  />
+</template>
+
+<script setup lang="ts">
+import UserCard from './UserCard.vue'
+</script>
+```
+
+**UserCard.vue**:
+```vue
+<script setup lang="ts">
+// Define props with TypeScript
+const props = defineProps<{
+  userId: number
+  username: string
+  email: string
+  isAdmin?: boolean // Optional prop
+}>()
+
+// Or with defaults
+const props = withDefaults(
+  defineProps<{
+    userId: number
+    username: string
+    isAdmin?: boolean
+  }>(),
+  {
+    isAdmin: false
+  }
+)
+</script>
+
+<template>
+  <div>
+    <h3>{{ username }}</h3>
+    <p>{{ email }}</p>
+    <span v-if="isAdmin">👑 Admin</span>
+  </div>
+</template>
+```
+
+### Emits (Child → Parent)
+
+Send events from child to parent:
+
+**Child.vue**:
+```vue
+<script setup lang="ts">
+// Define events with TypeScript
+const emit = defineEmits<{
+  userDeleted: [userId: number]
+  statusChanged: [status: string, timestamp: Date]
+}>()
+
+function deleteUser(userId: number) {
+  // Perform deletion...
+  emit('userDeleted', userId)
+}
+
+function changeStatus(status: string) {
+  emit('statusChanged', status, new Date())
+}
+</script>
+
+<template>
+  <button @click="deleteUser(props.userId)">Delete</button>
+</template>
+```
+
+**Parent.vue**:
+```vue
+<template>
+  <UserCard 
+    @user-deleted="handleUserDeleted"
+    @status-changed="handleStatusChange"
+  />
+</template>
+
+<script setup lang="ts">
+function handleUserDeleted(userId: number) {
+  console.log('User deleted:', userId)
+  // Refresh list, show notification, etc.
+}
+
+function handleStatusChange(status: string, timestamp: Date) {
+  console.log(`Status changed to ${status} at ${timestamp}`)
+}
+</script>
+```
+
+## Lifecycle Hooks
+
+Run code at specific points in a component's life:
+
+```vue
+<script setup lang="ts">
+import { 
+  onBeforeMount,
+  onMounted,
+  onBeforeUpdate,
+  onUpdated,
+  onBeforeUnmount,
+  onUnmounted
+} from 'vue'
+
+onBeforeMount(() => {
+  console.log('About to mount')
+})
+
+onMounted(() => {
+  console.log('Component mounted to DOM')
+  // Fetch data, set up event listeners, etc.
+})
+
+onBeforeUpdate(() => {
+  console.log('About to re-render')
+})
+
+onUpdated(() => {
+  console.log('Re-rendered')
+})
+
+onBeforeUnmount(() => {
+  console.log('About to unmount')
+})
+
+onUnmounted(() => {
+  console.log('Component removed')
+  // Cleanup: remove listeners, cancel timers, etc.
+})
+</script>
+```
+
+**Most commonly used**:
+- `onMounted` - Fetch data, initialize libraries
+- `onUnmounted` - Cleanup (timers, listeners, subscriptions)
+
+## Using Components in UserFrosting
+
+### Step 1: Create the Component
+
+**app/assets/components/UserGreeting.vue**:
+```vue
+<template>
+  <div class="uk-card uk-card-default uk-card-body">
+    <h3>Hello, {{ username }}!</h3>
+    <p>You have {{ messageCount }} new messages</p>
+    <button class="uk-button uk-button-primary" @click="viewMessages">
+      View Messages
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  username: string
+  messageCount: number
+}>()
+
+const emit = defineEmits<{
+  viewMessages: []
+}>()
+
+function viewMessages() {
+  emit('viewMessages')
+}
+</script>
+
+<style scoped>
+.uk-card {
+  margin: 1rem 0;
+}
+</style>
+```
+
+### Step 2: Register in Entry Point
+
+**app/assets/main.ts**:
+```typescript
+import { createApp } from 'vue'
+import UserGreeting from './components/UserGreeting.vue'
+
+const app = createApp({})
+
+// Register component globally
+app.component('UserGreeting', UserGreeting)
+
+// Mount to DOM
+app.mount('#app')
+```
+
+### Step 3: Use in Twig Template
+
+```twig
+{# Make sure you have a mount point #}
+<div id="app">
+    <user-greeting 
+        username="{{ current_user.username }}"
+        :message-count="{{ messageCount }}"
+        @view-messages="handleViewMessages"
+    />
+</div>
+
+{# Load your compiled assets #}
+{% block scripts_page %}
+    {{ vite_js('main.ts') }}
+{% endblock %}
+```
+
+## Composables (Reusable Logic)
+
+Extract and reuse logic across components with composables:
+
+**composables/useAuth.ts**:
+```typescript
+import { ref, computed } from 'vue'
+import axios from 'axios'
+
+export function useAuth() {
+  const user = ref(null)
+  const loading = ref(false)
+  const error = ref<Error | null>(null)
+  
+  const isLoggedIn = computed(() => user.value !== null)
+
+  async function login(username: string, password: string) {
+    loading.value = true
+    error.value = null
+    
+    try {
+      const response = await axios.post('/api/login', {
+        username,
+        password
+      })
+      user.value = response.data.user
+    } catch (e) {
+      error.value = e as Error
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function logout() {
+    user.value = null
+  }
+
+  return { 
+    user, 
+    loading, 
+    error, 
+    isLoggedIn, 
+    login, 
+    logout 
+  }
+}
+```
+
+**Usage in component**:
+```vue
+<script setup lang="ts">
+import { useAuth } from '@/composables/useAuth'
+
+const { user, isLoggedIn, login, logout } = useAuth()
+
+async function handleLogin() {
+  await login('alex', 'password123')
+}
+</script>
+
+<template>
+  <div v-if="isLoggedIn">
+    <p>Welcome, {{ user.name }}!</p>
+    <button @click="logout">Logout</button>
+  </div>
+  <div v-else>
+    <button @click="handleLogin">Login</button>
+  </div>
+</template>
+```
+
+## TypeScript Best Practices
+
+UserFrosting components use TypeScript for better developer experience:
+
+```vue
+<script setup lang="ts">
+import { ref, Ref } from 'vue'
+
+// Define interfaces for complex types
+interface User {
+  id: number
+  username: string
+  email: string
+  roles: string[]
+}
+
+// Type your props
+const props = defineProps<{
+  users: User[]
+  onSelect?: (user: User) => void
+}>()
+
+// Type your refs
+const selectedUser: Ref<User | null> = ref(null)
+const users: Ref<User[]> = ref([])
+
+// Type your functions
+function selectUser(user: User): void {
+  selectedUser.value = user
+  props.onSelect?.(user)
+}
+
+async function fetchUsers(): Promise<User[]> {
+  const response = await axios.get<User[]>('/api/users')
+  return response.data
+}
+</script>
+```
+
+## Best Practices
+
+### 1. Keep Components Focused
+
+Each component should have a single, clear purpose:
+
+✅ **Good**:
+- `UserCard.vue` - Display user info
+- `UserForm.vue` - Edit user
+- `UserList.vue` - List users
+
+❌ **Bad**:
+- `UserEverything.vue` - Does all user-related things
+
+### 2. Use Scoped Styles
+
+Always scope styles to avoid global conflicts:
+
+```vue
+<style scoped>
+/* Only applies to this component */
+.card {
+  border: 1px solid #ddd;
+}
+</style>
+```
+
+### 3. Props Down, Events Up
+
+Follow unidirectional data flow:
+- Parent passes data to child via props
+- Child notifies parent via events
+- Never mutate props directly
+
+```vue
+<!-- ✅ Good: Emit event -->
+<script setup>
+const emit = defineEmits(['update'])
+function change() {
+  emit('update', newValue)
+}
+</script>
+
+<!-- ❌ Bad: Mutate prop -->
+<script setup>
+const props = defineProps(['value'])
+function change() {
+  props.value = newValue // DON'T DO THIS
+}
+</script>
+```
+
+### 4. Extract Reusable Logic
+
+Move shared logic to composables:
+
+```typescript
+// composables/useFetch.ts
+export function useFetch<T>(url: string) {
+  const data = ref<T | null>(null)
+  const loading = ref(false)
+  const error = ref<Error | null>(null)
+  
+  async function fetch() {
+    loading.value = true
+    try {
+      const response = await axios.get<T>(url)
+      data.value = response.data
+    } catch (e) {
+      error.value = e as Error
+    } finally {
+      loading.value = false
+    }
+  }
+  
+  return { data, loading, error, fetch }
+}
+```
+
+## Debugging Vue Components
+
+### Vue DevTools
+
+Install [Vue DevTools](https://devtools.vuejs.org/) browser extension to:
+- Inspect component tree
+- View component state and props
+- Track emitted events
+- Profile component performance
+- Time-travel debug (see state history)
+
+### Console Debugging
+
+```vue
+<script setup lang="ts">
+import { watch, watchEffect } from 'vue'
+
+// Watch specific value
+watch(user, (newUser, oldUser) => {
+  console.log('User changed:', { newUser, oldUser })
+})
+
+// Watch multiple values
+watch([firstName, lastName], ([newFirst, newLast]) => {
+  console.log('Name changed:', newFirst, newLast)
+})
+
+// Watch immediately and on changes
+watchEffect(() => {
+  console.log('Current user:', user.value)
+})
+</script>
+
+<template>
+  <!-- Debug template values -->
+  <pre>{{ JSON.stringify(user, null, 2) }}</pre>
+</template>
+```
+
+## What's Next?
+
+Now that you understand Vue 3 components, learn how to build specific UI patterns:
+
+- **[Forms](client-side-code/components/forms)**: Build validated, AJAX-powered forms
+- **[Tables](client-side-code/components/tables)**: Create sortable, filterable data tables
+- **[Alerts](client-side-code/components/alerts)**: Display notifications and messages
+- **[Collections](client-side-code/components/collections)**: Manage dynamic lists
+
+## Further Learning
+
+- **[Vue 3 Official Guide](https://vuejs.org/guide/)** - Comprehensive Vue documentation
+- **[TypeScript with Vue](https://vuejs.org/guide/typescript/overview.html)** - TypeScript integration
+- **[Vite Documentation](https://vitejs.dev/guide/)** - Build tool details
+- **[Composition API FAQ](https://vuejs.org/guide/extras/composition-api-faq.html)** - Why Composition API?
+
+> [!TIP]
+> Don't try to learn everything at once. Start with basic components, add reactivity, then gradually explore advanced features like composables and TypeScript as you need them.

From dba1f2e2637aba81a8787f13cd2b0089be30b252 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 31 Jan 2026 23:15:33 +0000
Subject: [PATCH 05/13] Complete Chapter 15 (Client-Side Code) with Vue 3
 components

Co-authored-by: lcharette <2566513+lcharette@users.noreply.github.com>
---
 .../04.components/01.forms/docs.md            |  760 ++++++++++--
 .../04.components/02.tables/docs.md           |  820 +++++--------
 .../04.components/03.collections/docs.md      | 1085 +++++++----------
 .../04.components/04.alerts/docs.md           |  641 +++++++++-
 .../15.client-side-code/04.components/docs.md |  295 ++++-
 5 files changed, 2253 insertions(+), 1348 deletions(-)

diff --git a/app/pages/6.0/15.client-side-code/04.components/01.forms/docs.md b/app/pages/6.0/15.client-side-code/04.components/01.forms/docs.md
index 9bb0df26..d0154e5f 100644
--- a/app/pages/6.0/15.client-side-code/04.components/01.forms/docs.md
+++ b/app/pages/6.0/15.client-side-code/04.components/01.forms/docs.md
@@ -1,166 +1,706 @@
 ---
-title: Forms
-description: The ufForm widget makes it easy to set up simple forms for validation and AJAX submission.
-obsolete: true
+title: Building Forms with Vue 3
+description: Create validated, AJAX-powered forms using Vue 3 and modern form handling patterns
+wip: true
 ---
 
-You may have noticed that in UserFrosting, forms are usually submitted via an AJAX request. By submitting forms with AJAX rather than HTML's native form submission, we can control the behavior of the page before submission (client-side validation, transforming form data) and after submission (deciding whether to reload the page, redirect, display messages, etc).
-
-UserFrosting's `ufForm` widget makes it easy to handle many form-submission tasks automatically. Simply create your usual form markup:
-
-```html
-<form id="sign-in" action="{{site.uri.public}}/account/login" method="post">
-  {% include "forms/csrf.html.twig" %}
-  <div class="form-group has-feedback">
-    <label>Username</label>
-    <input type="text" class="form-control" name="user_name">
-  </div>
-  <div class="form-group has-feedback">
-    <label>Password</label>
-    <input type="password" class="form-control" name="password">
-  </div>
-  <div class="row">
-    <div class="col-xs-8">
-      <div class="checkbox icheck">
-        <label>
-          <input type="checkbox" class="js-icheck" name="rememberme"> Remember me
-        </label>
+Forms are essential for user interaction in web applications. UserFrosting 6.0 uses Vue 3 to create reactive, validated forms that submit via AJAX, providing a smooth user experience without full page reloads.
+
+This guide shows you how to build forms with Vue 3, handle validation, submit data to your API, and display feedback to users.
+
+## Basic Form Component
+
+Here's a simple login form component to get started:
+
+**LoginForm.vue**:
+```vue
+<template>
+  <form @submit.prevent="handleSubmit" class="uk-form-stacked">
+    <!-- CSRF Token (UserFrosting requirement) -->
+    <input type="hidden" :name="csrfName" :value="csrfValue" />
+    
+    <!-- Username Field -->
+    <div class="uk-margin">
+      <label class="uk-form-label" for="username">Username</label>
+      <div class="uk-form-controls">
+        <input 
+          id="username"
+          v-model="form.username" 
+          type="text" 
+          class="uk-input"
+          :class="{ 'uk-form-danger': errors.username }"
+          placeholder="Enter your username"
+        />
+        <div v-if="errors.username" class="uk-text-danger uk-text-small">
+          {{ errors.username }}
+        </div>
       </div>
     </div>
-    <div class="col-xs-4">
-      <button type="submit" class="btn btn-primary btn-block btn-flat">Sign in</button>
+    
+    <!-- Password Field -->
+    <div class="uk-margin">
+      <label class="uk-form-label" for="password">Password</label>
+      <div class="uk-form-controls">
+        <input 
+          id="password"
+          v-model="form.password" 
+          type="password" 
+          class="uk-input"
+          :class="{ 'uk-form-danger': errors.password }"
+          placeholder="Enter your password"
+        />
+        <div v-if="errors.password" class="uk-text-danger uk-text-small">
+          {{ errors.password }}
+        </div>
+      </div>
     </div>
-  </div>
-</form>
+    
+    <!-- Remember Me Checkbox -->
+    <div class="uk-margin">
+      <label>
+        <input v-model="form.rememberMe" type="checkbox" class="uk-checkbox" />
+        Remember me
+      </label>
+    </div>
+    
+    <!-- Submit Button -->
+    <div class="uk-margin">
+      <button 
+        type="submit" 
+        class="uk-button uk-button-primary"
+        :disabled="isSubmitting"
+      >
+        {{ isSubmitting ? 'Signing in...' : 'Sign in' }}
+      </button>
+    </div>
+    
+    <!-- Error/Success Messages -->
+    <div v-if="successMessage" class="uk-alert-success" uk-alert>
+      <p>{{ successMessage }}</p>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import axios from 'axios'
+
+// Form state
+const form = ref({
+  username: '',
+  password: '',
+  rememberMe: false
+})
+
+// UI state
+const isSubmitting = ref(false)
+const errors = ref<Record<string, string>>({})
+const successMessage = ref('')
+
+// CSRF tokens (from global site object)
+const csrfName = computed(() => site.csrf.keys.name)
+const csrfValue = computed(() => site.csrf.name)
+
+// Validation
+function validateForm(): boolean {
+  errors.value = {}
+  
+  if (!form.value.username.trim()) {
+    errors.value.username = 'Username is required'
+  }
+  
+  if (!form.value.password) {
+    errors.value.password = 'Password is required'
+  }
+  
+  return Object.keys(errors.value).length === 0
+}
+
+// Submit handler
+async function handleSubmit() {
+  if (!validateForm()) {
+    return
+  }
+  
+  isSubmitting.value = true
+  errors.value = {}
+  successMessage.value = ''
+  
+  try {
+    const response = await axios.post(
+      `${site.uri.public}/account/login`,
+      {
+        user_name: form.value.username,
+        password: form.value.password,
+        rememberme: form.value.rememberMe
+      },
+      {
+        headers: {
+          [csrfName.value]: csrfValue.value
+        }
+      }
+    )
+    
+    successMessage.value = 'Login successful! Redirecting...'
+    
+    // Redirect after success
+    setTimeout(() => {
+      window.location.href = response.data.redirect || '/dashboard'
+    }, 1000)
+    
+  } catch (error: any) {
+    if (error.response?.data?.errors) {
+      // Server validation errors
+      errors.value = error.response.data.errors
+    } else {
+      errors.value.general = error.response?.data?.message || 'Login failed'
+    }
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<style scoped>
+.uk-form-danger {
+  border-color: #f0506e;
+}
+</style>
+```
+
+## Form Handling Patterns
+
+### 1. Two-Way Data Binding
+
+Use `v-model` for automatic synchronization between form inputs and data:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const form = ref({
+  email: '',
+  age: 0,
+  newsletter: false,
+  role: 'user'
+})
+</script>
+
+<template>
+  <!-- Text input -->
+  <input v-model="form.email" type="email" />
+  
+  <!-- Number input -->
+  <input v-model.number="form.age" type="number" />
+  
+  <!-- Checkbox -->
+  <input v-model="form.newsletter" type="checkbox" />
+  
+  <!-- Select dropdown -->
+  <select v-model="form.role">
+    <option value="user">User</option>
+    <option value="admin">Admin</option>
+  </select>
+</template>
+```
+
+### 2. Form Validation
+
+#### Client-Side Validation
+
+Validate before submitting:
+
+```typescript
+interface FormErrors {
+  [key: string]: string
+}
+
+const errors = ref<FormErrors>({})
+
+function validateEmail(email: string): boolean {
+  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return regex.test(email)
+}
+
+function validateForm(): boolean {
+  errors.value = {}
+  
+  // Required fields
+  if (!form.value.username.trim()) {
+    errors.value.username = 'Username is required'
+  } else if (form.value.username.length < 3) {
+    errors.value.username = 'Username must be at least 3 characters'
+  }
+  
+  // Email validation
+  if (!form.value.email) {
+    errors.value.email = 'Email is required'
+  } else if (!validateEmail(form.value.email)) {
+    errors.value.email = 'Please enter a valid email'
+  }
+  
+  // Password strength
+  if (form.value.password.length < 8) {
+    errors.value.password = 'Password must be at least 8 characters'
+  }
+  
+  return Object.keys(errors.value).length === 0
+}
 ```
 
-You can then initialize the `ufForm` widget on the `form` element in your page Javascript:
+#### Server-Side Validation
+
+Handle validation errors from the server:
+
+```typescript
+async function handleSubmit() {
+  try {
+    await axios.post('/api/users', form.value)
+  } catch (error: any) {
+    if (error.response?.status === 422) {
+      // Laravel-style validation errors
+      errors.value = error.response.data.errors
+    } else if (error.response?.data?.errors) {
+      // UserFrosting-style errors
+      errors.value = error.response.data.errors
+    }
+  }
+}
+```
 
-```js
-$("#sign-in").ufForm({
-    validators: page.validators.login,
-    msgTarget: $("#alerts-page")
-}).on("submitSuccess.ufForm", function(event, data, textStatus, jqXHR) {
-    redirectOnLogin(jqXHR);
-});
+### 3. CSRF Protection
+
+UserFrosting requires CSRF tokens for POST requests. Include them automatically:
+
+```vue
+<script setup lang="ts">
+import { computed } from 'vue'
+import axios from 'axios'
+
+// Get CSRF from global site object
+const csrfName = computed(() => site.csrf.keys.name)
+const csrfValue = computed(() => site.csrf.name)
+
+async function submitForm(data: any) {
+  await axios.post('/api/endpoint', data, {
+    headers: {
+      [csrfName.value]: csrfValue.value
+    }
+  })
+}
+</script>
+
+<template>
+  <form @submit.prevent="handleSubmit">
+    <!-- Hidden CSRF fields -->
+    <input type="hidden" :name="csrfName" :value="csrfValue" />
+    <!-- Rest of form... -->
+  </form>
+</template>
 ```
 
-The form will automatically be validated and submitted when the user clicks the `submit` button (`<button type="submit"...>`). The submit button must be _inside_ the `<form>` block for this to work properly.
+### 4. Loading States
+
+Show feedback during submission:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
 
-## Options
+const isSubmitting = ref(false)
+
+async function handleSubmit() {
+  isSubmitting.value = true
+  
+  try {
+    await axios.post('/api/endpoint', form.value)
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<template>
+  <button 
+    type="submit" 
+    :disabled="isSubmitting"
+    class="uk-button uk-button-primary"
+  >
+    <span v-if="isSubmitting">
+      <span uk-spinner="ratio: 0.5"></span> Submitting...
+    </span>
+    <span v-else>Submit</span>
+  </button>
+</template>
+```
 
-### ajax
+## Advanced Patterns
 
-This option contains any AJAX settings that you would like to pass through to the form submission [`.ajax` handler](http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings).
+### Reusable Form Composable
 
-The defaults for this option should be sufficient most of the time - you shouldn't need to change them in most circumstances. By default, `ufForm` will determine the request url and HTTP verb from your `<form>` tag's `action` and `method` attributes, respectively.
+Create a composable for common form logic:
 
-### validators
+**composables/useForm.ts**:
+```typescript
+import { ref, Ref } from 'vue'
+import axios, { AxiosError } from 'axios'
 
-If the `validators` option is set, `ufForm` will automatically validate on the form using the jQueryValidation plugin with the rules provided. `validators` should be a JSON object, which might look something like:
+interface UseFormOptions<T> {
+  initialData: T
+  onSuccess?: (data: any) => void
+  onError?: (error: AxiosError) => void
+}
 
-```json
-{
-    "rules": {
-        "user_name": {
-            "required": true,
-            "noLeadingWhitespace": true,
-            "noTrailingWhitespace": true
-        },
-        "password": {
-            "required": true
-        },
-        "rememberme": []
-    },
-    "messages": {
-        "user_name": {
-            "required": "Please specify a value for 'Username'.",
-            "noLeadingWhitespace": "The value for 'Username' cannot begin with spaces, tabs, or other whitespace.",
-            "noTrailingWhitespace": "The value for 'Username' cannot end with spaces, tabs, or other whitespace."
-        },
-        "password": {
-            "required": "Please specify a value for 'Password'."
+export function useForm<T extends Record<string, any>>(
+  options: UseFormOptions<T>
+) {
+  const form = ref<T>({ ...options.initialData }) as Ref<T>
+  const errors = ref<Record<string, string>>({})
+  const isSubmitting = ref(false)
+  const isDirty = ref(false)
+
+  function reset() {
+    form.value = { ...options.initialData }
+    errors.value = {}
+    isDirty.value = false
+  }
+
+  function setErrors(serverErrors: Record<string, string | string[]>) {
+    errors.value = {}
+    
+    for (const [field, messages] of Object.entries(serverErrors)) {
+      errors.value[field] = Array.isArray(messages) 
+        ? messages[0] 
+        : messages
+    }
+  }
+
+  async function submit(url: string, method: 'post' | 'put' | 'patch' = 'post') {
+    isSubmitting.value = true
+    errors.value = {}
+    
+    try {
+      const response = await axios[method](url, form.value, {
+        headers: {
+          [site.csrf.keys.name]: site.csrf.name,
+          [site.csrf.keys.value]: site.csrf.value
         }
+      })
+      
+      options.onSuccess?.(response.data)
+      return response.data
+      
+    } catch (error: any) {
+      if (error.response?.data?.errors) {
+        setErrors(error.response.data.errors)
+      }
+      
+      options.onError?.(error)
+      throw error
+      
+    } finally {
+      isSubmitting.value = false
     }
+  }
+
+  return {
+    form,
+    errors,
+    isSubmitting,
+    isDirty,
+    reset,
+    setErrors,
+    submit
+  }
 }
 ```
 
-See the section on [generating client-side validation rules in Fortress](routes-and-controllers/client-input/validation#generating-client-side-rules) to see how `page.validators.login` can be automatically generated from a Fortress schema.
+**Usage**:
+```vue
+<script setup lang="ts">
+import { useForm } from '@/composables/useForm'
+
+interface UserForm {
+  username: string
+  email: string
+  password: string
+}
+
+const { form, errors, isSubmitting, submit, reset } = useForm<UserForm>({
+  initialData: {
+    username: '',
+    email: '',
+    password: ''
+  },
+  onSuccess: (data) => {
+    alert('User created successfully!')
+    reset()
+  }
+})
+
+async function handleSubmit() {
+  await submit('/api/users', 'post')
+}
+</script>
+
+<template>
+  <form @submit.prevent="handleSubmit">
+    <input v-model="form.username" />
+    <span v-if="errors.username">{{ errors.username }}</span>
+    
+    <button type="submit" :disabled="isSubmitting">
+      Submit
+    </button>
+  </form>
+</template>
+```
+
+### File Upload
+
+Handle file uploads with progress tracking:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import axios from 'axios'
+
+const selectedFile = ref<File | null>(null)
+const uploadProgress = ref(0)
+const isUploading = ref(false)
+
+function onFileSelected(event: Event) {
+  const target = event.target as HTMLInputElement
+  selectedFile.value = target.files?.[0] || null
+}
+
+async function uploadFile() {
+  if (!selectedFile.value) return
+  
+  const formData = new FormData()
+  formData.append('file', selectedFile.value)
+  formData.append(site.csrf.keys.name, site.csrf.name)
+  formData.append(site.csrf.keys.value, site.csrf.value)
+  
+  isUploading.value = true
+  uploadProgress.value = 0
+  
+  try {
+    await axios.post('/api/upload', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      },
+      onUploadProgress: (progressEvent) => {
+        if (progressEvent.total) {
+          uploadProgress.value = Math.round(
+            (progressEvent.loaded * 100) / progressEvent.total
+          )
+        }
+      }
+    })
+    
+    alert('File uploaded successfully!')
+    
+  } finally {
+    isUploading.value = false
+  }
+}
+</script>
+
+<template>
+  <div>
+    <input type="file" @change="onFileSelected" />
+    
+    <button 
+      @click="uploadFile" 
+      :disabled="!selectedFile || isUploading"
+    >
+      Upload
+    </button>
+    
+    <div v-if="isUploading">
+      <progress :value="uploadProgress" max="100"></progress>
+      {{ uploadProgress }}%
+    </div>
+  </div>
+</template>
+```
+
+### Dynamic Form Fields
 
-### msgTarget
+Add/remove fields dynamically:
 
-If `ufForm` receives an error from the server when it attempts to submit your form (i.e., the response contains a 4xx or 5xx status code), it will automatically retrieve any error messages from the [alert stream](routes-and-controllers/alert-stream) and render them on the page. `msgTarget` allows you to specify an element of the DOM where `ufForm` should display these messages.
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
 
-Internally, `ufForm` will set up a `ufAlerts` widget to fetch and render the alert stream messages.
+interface EmailField {
+  id: number
+  value: string
+}
+
+const emails = ref<EmailField[]>([
+  { id: 1, value: '' }
+])
 
-If `msgTarget` is not specified, `ufForm` will use the first element inside your form with the `js-form-alerts` class by default.
+let nextId = 2
 
-### encType
+function addEmail() {
+  emails.value.push({
+    id: nextId++,
+    value: ''
+  })
+}
 
-The encoding type to use for submitting the form. By default, `ufForm` will use the `enctype` attribute in your `<form>` tag.
+function removeEmail(id: number) {
+  emails.value = emails.value.filter(email => email.id !== id)
+}
+</script>
 
-If the attribute is not set in the form or this option, the encoding type will default to `application/x-www-form-urlencoded`. The default will work for most types of forms. The exception is for forms that involve file uploads. In this case, you need to use `enctype = "multipart/form-data"` instead.
+<template>
+  <div v-for="email in emails" :key="email.id">
+    <input v-model="email.value" type="email" />
+    <button @click="removeEmail(email.id)">Remove</button>
+  </div>
+  
+  <button @click="addEmail">Add Email</button>
+</template>
+```
 
-### submittingText
+## Form Validation Libraries
 
-Content to show in the submit button (`<button type="submit"...>`) while the form is being submitted. Defaults to a spinner icon: `"<i class='fa fa-spinner fa-spin'></i>"`. When the submission button is clicked, the button will become disabled and this content will be displayed while the request is being submitted. Once the form submission is complete and a response has been received, `ufForm` automatically re-enables the button and reverts its text back to its original value.
+For complex validation, consider these libraries:
 
-### beforeSubmitCallback
+### VeeValidate
+
+[VeeValidate](https://vee-validate.logaretm.com/v4/) provides comprehensive form validation:
+
+```bash
+npm install vee-validate yup
+```
+
+```vue
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import * as yup from 'yup'
+
+const schema = yup.object({
+  email: yup.string().required().email(),
+  password: yup.string().required().min(8),
+})
+
+const { defineField, handleSubmit, errors } = useForm({
+  validationSchema: schema
+})
+
+const [email] = defineField('email')
+const [password] = defineField('password')
+
+const onSubmit = handleSubmit((values) => {
+  console.log('Form submitted:', values)
+})
+</script>
+
+<template>
+  <form @submit="onSubmit">
+    <input v-model="email" type="email" />
+    <span>{{ errors.email }}</span>
+    
+    <input v-model="password" type="password" />
+    <span>{{ errors.password }}</span>
+    
+    <button type="submit">Submit</button>
+  </form>
+</template>
+```
 
-An optional callback function to execute after the form has been validated successfully, but before submitting the AJAX request.
+## Integration with Twig
 
-### binaryCheckboxes
+Render your form component in a Twig template:
 
-If this option is set to `true`, `ufForm` will ignore the `value` attributes of any [`checkbox` controls](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value) and instead transform the values of the checkboxes to binary 0/1 values.
+**templates/pages/login.html.twig**:
+```twig
+{% extends '@admin/pages/abstract/dashboard.html.twig' %}
 
-For example, suppose you have the checkbox control:
+{% block content %}
+    <div id="login-form-app"></div>
+{% endblock %}
 
-```html
-<input type="checkbox" name="rememberme" value="yes">
+{% block scripts_page %}
+    {{ vite_js('login.ts') }}
+{% endblock %}
 ```
 
-When the checkbox is checked, the submitted data will look something like `rememberme=yes`. But if it's _not_ checked, then no `rememberme` value will be submitted to the server at all!
+**assets/login.ts**:
+```typescript
+import { createApp } from 'vue'
+import LoginForm from './components/LoginForm.vue'
 
-This behavior can be frustrating when processing the form on the server side. Unlike other types of controls, where a missing value might be considered a validation error, the interpretation of a missing checkbox can be ambiguous. When using a single checkbox, the purpose is typically to serve as a "toggle" element representing true/false. But of course since an unchecked box is not submitted at all, you would need the server to provide a default "false" value.
+createApp(LoginForm).mount('#login-form-app')
+```
+
+## Best Practices
+
+### 1. Validate on Both Sides
 
-To summarize, when `binaryCheckboxes` is set to `false`:
+Always validate on both client and server:
+- **Client**: Immediate feedback, better UX
+- **Server**: Security, can't be bypassed
 
-| Checkbox status | Submitted data   |
-| --------------- | ---------------- |
-| checked         | `rememberme=yes` |
-| unchecked       | -                |
+### 2. Clear Error Messages
 
-By setting `binaryCheckboxes` to `true` (the default), we get a much more predictable behavior from our checkbox:
+Provide specific, actionable error messages:
 
-| Checkbox status | Submitted data |
-| --------------- | -------------- |
-| checked         | `rememberme=1` |
-| unchecked       | `rememberme=0` |
+✅ **Good**: "Email must be in format: user@example.com"  
+❌ **Bad**: "Invalid input"
 
-### keyupDelay
+### 3. Disable Submit During Processing
 
-The time, in milliseconds, to wait before revalidating the form after the user stops typing. See [this SO question](http://stackoverflow.com/questions/41363409/jquery-validate-add-delay-to-keyup-validation) for more information.
+Prevent duplicate submissions:
+
+```vue
+<button 
+  type="submit" 
+  :disabled="isSubmitting || !isValid"
+>
+  Submit
+</button>
+```
 
-Defaults to `0`.
+### 4. Show Field-Level Errors
 
-## Events
+Display errors next to the relevant field:
 
-### submitSuccess.ufForm
+```vue
+<div class="uk-margin">
+  <input v-model="form.email" :class="{ 'uk-form-danger': errors.email }" />
+  <div v-if="errors.email" class="uk-text-danger">
+    {{ errors.email }}
+  </div>
+</div>
+```
 
-Triggered when the form has been submitted successfully. This happens after the submission button has been re-enabled.
+### 5. Reset Forms After Success
 
-Any response from the server will be provided in the `data` parameter as JSON. For example, to log the response from the server when the form has been submitted successfully :
+Clear the form after successful submission:
 
-```js
-$("#account-settings").ufForm({
-    validator: page.validators.account_settings,
-    msgTarget: $("#alerts-page")
-}).on("submitSuccess.ufForm", function(event, data, textStatus, jqXHR) {
-    // Log data to console
-    console.log(data);
-});
+```typescript
+async function handleSubmit() {
+  await submit('/api/users')
+  // Reset form
+  form.value = { ...initialData }
+  errors.value = {}
+}
 ```
 
-### submitError.ufForm
+## What's Next?
+
+- **[Tables](client-side-code/components/tables)**: Display data in sortable, filterable tables
+- **[Collections](client-side-code/components/collections)**: Manage dynamic lists of items
+- **[Alerts](client-side-code/components/alerts)**: Show notifications to users
+
+## Further Reading
 
-Triggered when the form submission has returned an error. This happens after the submission button has been re-enabled and any error messages have been rendered.
+- [Vue 3 Form Handling](https://vuejs.org/guide/essentials/forms.html)
+- [VeeValidate Documentation](https://vee-validate.logaretm.com/v4/)
+- [Axios Documentation](https://axios-http.com/docs/intro)
+- [UIkit Forms](https://getuikit.com/docs/form)
diff --git a/app/pages/6.0/15.client-side-code/04.components/02.tables/docs.md b/app/pages/6.0/15.client-side-code/04.components/02.tables/docs.md
index 7b7a91cd..6f863491 100644
--- a/app/pages/6.0/15.client-side-code/04.components/02.tables/docs.md
+++ b/app/pages/6.0/15.client-side-code/04.components/02.tables/docs.md
@@ -1,524 +1,364 @@
 ---
-title: Tables
-description: ufTable is a wrapper for Mottie's tablesorter plugin that automatically fetches JSON data from a specified API endpoint, and dynamically builds paginated, sorted, filtered views on the fly.
-obsolete: true
+title: Data Tables with Vue 3
+description: Build sortable, filterable, paginated tables using Vue 3 and modern table libraries
+wip: true
 ---
 
-A typical application feature is to display a table of entities from a server-side data source (e.g., a database). For example, the `admin` Sprinkle generates client-side tables for admins to view and manage users, groups, roles, activities, and permissions:
-
-![Viewing a table of user activities](images/table-activities.png)
-
-`ufTable` provides a convenient way to generate sortable, searchable, paginated tables of data from an AJAX source using Mottie's [tablesorter](https://mottie.github.io/tablesorter/docs/) jQuery plugin.
-
-## Table skeleton
-
-A typical use case is to create a "skeleton" `<table>` in your Twig template, and then use `ufTable` to dynamically retrieve data from a JSON data source and construct the rows. As the user sorts columns, inputs filter queries, and pages through the data, `ufTable` will submit new AJAX requests to the server and refresh the `<table>` with the results of the updated queries.
-
-For example, consider the Users table. First, we create a partial template that extends the base `tables/table-paginated.html.twig` template (we can include this partial template in a page template using the `include` tag later):
-
-**tables/users-custom.html.twig**:
-
-```twig
-{% extends "tables/table-paginated.html.twig" %}
-
-{% block table %}
-    <table id="{{table.id}}" class="tablesorter table table-bordered table-hover table-striped" data-sortlist="{{table.sortlist}}">
-        <thead>
-            <tr>
-                <th class="sorter-metatext" data-column-name="name" data-column-template="#user-table-column-info" data-priority="1">User info <i class="fa fa-sort"></i></th>
-                <th class="sorter-metanum" data-column-name="last_activity" data-column-template="#user-table-column-last-activity" data-priority="1">Last activity <i class="fa fa-sort"></i></th>
-            </tr>
-        </thead>
-        <tbody>
-        </tbody>
+Data tables are essential for displaying collections of information. UserFrosting 6.0 uses Vue 3 to create interactive tables with sorting, filtering, and pagination.
+
+> [!NOTE]
+> [TODO: Screenshot] - Modern data table with sorting/filtering
+
+## Simple Table Component
+
+Start with a basic sortable table:
+
+```vue
+<template>
+  <div>
+    <!-- Search/Filter -->
+    <input 
+      v-model="searchQuery" 
+      type="text" 
+      placeholder="Search users..."
+      class="uk-input uk-width-1-1"
+    />
+    
+    <!-- Table -->
+    <table class="uk-table uk-table-striped uk-table-hover">
+      <thead>
+        <tr>
+          <th @click="sort('name')">
+            Name 
+            <span v-if="sortKey === 'name'">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
+          </th>
+          <th @click="sort('email')">
+            Email
+            <span v-if="sortKey === 'email'">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
+          </th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="user in filteredUsers" :key="user.id">
+          <td>{{ user.name }}</td>
+          <td>{{ user.email }}</td>
+          <td>
+            <button @click="editUser(user)" class="uk-button uk-button-small">Edit</button>
+          </td>
+        </tr>
+      </tbody>
     </table>
-{% endblock %}
-```
-
-Your table skeleton should be defined in the `table` block as a `<table>` element. It should have a unique `id` attribute, and the `tablesorter` class (`ufTable` uses this class internally to reference the table). The other classes on `<table>` are [styling classes from Bootstrap](http://getbootstrap.com/css/#tables) and are optional. The `data-sortlist` attribute is a [tablesorter setting](https://mottie.github.io/tablesorter/docs/example-option-sort-list.html) that tells tablesorter how to initially sort the table when the page is loaded.
-
-You'll notice that we populated the table with all of its column headers, but an empty `tbody` element. This empty `tbody` is where `ufTable` will automatically render the rows using data from the AJAX source.
-
-### Column headers
-
-Each column header (`th` element) has several required `data-*` attributes that `ufTable` and Tablesorter use to make the table work correctly.
-
-```html
-<th class="sorter-metanum" data-column-name="last_activity" data-column-template="#user-table-column-last-activity" data-priority="1">Last activity <i class="fa fa-sort"></i></th>
-```
-
-#### Required attributes
-
-##### `data-column-name`
-
-This is used to determine the [Sprunje filter](database/data-sprunjing#custom-sorts-and-filters) name to use when the user types a query into the filter box for that column. For example, if we type "userfrost" into the filter box in the "User info" column:
-
-![Searching a table](images/uf-table-search.png)
-
-`ufTable` will add a query parameter `filters[name]=userfrost` in the next AJAX request it makes. See [Data Sprunjing](database/data-sprunjing) for information on setting up a Sprunjed data source in your server-side code.
-
-##### `data-column-template`
-
-An identifier used to find the [Handlebars template](client-side-code/client-side-templating) to use when rendering the cells for that particular column. For this example, we will define two Handlebars templates in the `table_cell_templates` block of our Twig template:
-
-```html
-{% block table_cell_templates %}
-
-    {% verbatim %}
-    <script id="user-table-column-info" type="text/x-handlebars-template">
-        <td data-text="{{row.last_name}}">
-            <strong>
-                <a href="{{site.uri.public}}/users/u/{{row.user_name}}">{{row.first_name}} {{row.last_name}} ({{row.user_name}})</a>
-            </strong>
-            {{row.email}}
-        </td>
-    </script>
-
-    <script id="user-table-column-last-activity" type="text/x-handlebars-template">
-        {{#if row.last_activity }}
-        <td data-num="{{dateFormat row.last_activity.occurred_at format='x'}}">
-            {{dateFormat row.last_activity.occurred_at format="dddd"}}<br>{{dateFormat row.last_activity.occurred_at format="MMM Do, YYYY h:mm a"}}
-            <br>
-            <i>{{row.last_activity.description}}</i>
-        </td>
-        {{ else }}
-        <td data-num="0">
-            <i>Unknown</i>
-        </td>
-        {{/if }}
-    </script>
-
-    ...
-    {% endverbatim %}
-
-{% endblock %}
-```
-
-Notice that the `ids` in these template `<script>` tags match the `data-column-template` attributes of your table skeleton.
-
-You'll also notice that we have custom `data-*` attributes in the `<td>` tags of each of these templates. These refer to tablesorter's [custom sort parsers](https://mottie.github.io/tablesorter/docs/example-parsers-advanced.html), which lets us define a custom parameter for tablesorter to use when sorting the table by the corresponding column. We will discuss this more later.
-
-As an alternative to the `data-column-template` attribute, you may map column names to template identifiers, **or even callback functions**, in `ufTable`'s initialization using the `columnTemplates` option. For example:
-
-```js
-$('#widget-users').ufTable({
-    dataUrl: site.uri.public + '/api/users',
-    columnTemplates: {
-        name: function (params) {
-            return "<td>" + params.row.full_name + "</td>";
-        },
-        last_activity: '#user-table-column-last-activity'
-    }
-});
-```
-
-These will override any template identifiers specified in the table headers' `data-column-template` attributes. If you map a column name to a string, it will work the same way as `data-column-template`, using it as a selector to find a corresponding `<script>` element that contains a Handlebars template. However if you map a column name to a _callback_, the callback will be used directly to render the corresponding cells for that column. An object containing the `row` object, the `rownum` row number, and the `site` object will be passed into the callback during table rendering.
-
-> [!TIP]
-> Using a callback for rendering a column is useful for example, when the logic needed to properly render the cell is too complex to delegate to Handlebars.
-
-##### `data-priority`
-
-This attribute is used by Tablesorter's [column selector widget](https://mottie.github.io/tablesorter/docs/example-widget-column-selector.html#column-selector-priority) to determine which columns can be hidden in tablet and mobile views to make the table more usable.
-
-| Priority   | Hide when browser width is less than... | Comment                                   |
-| ---------- | --------------------------------------- | ----------------------------------------- |
-| "critical" | Never                                   | Highest priority - never hide this column |
-| 1          | 320px                                   |                                           |
-| 2          | 480px                                   |                                           |
-| 3          | 640px                                   |                                           |
-| 4          | 800px                                   |                                           |
-| 5          | 960px                                   |                                           |
-| 6          | 1120px                                  | Lowest priority                           |
-
-Note that while normally you can hide/show columns by using the selectors generated in the table tool menu, you cannot hide any columns with a priority of `critical`.
-
-#### Optional attributes/classes
-
-You can further control the behavior of a column with the following attributes/classes:
-
-##### `data-sorter`
-
-Set to `false` to disable sorting for this column.
-
-##### `data-filter`
-
-Set to `false` to disable filtering for this column.
-
-##### `data-placeholder`
-
-Use this to set placeholder text for the column filter input (search field).
-
-##### `class="filter-select"`
-
-When you add this CSS class to your table, Tablesorter will generate a dropdown instead of a free text input for searching this column. Values for this dropdown will be populated from the corresponding `listable` array returned by your table's [Sprunje](database/data-sprunjing#Sprunjelists).
-
-## Table wrapper
-
-To use your table, simply `include` your table partial template in your page inside a wrapper `<div>`:
-
-```html
-<div id="myUserTable" class="box box-primary">
-    <div class="box-header">
-        <h3 class="box-title pull-left"><i class="fa fa-fw fa-user"></i> Members</h3>
-        {% include "tables/table-tool-menu.html.twig" %}
-    </div>
-    <div class="box-body">
-        {% include "tables/users-custom.html.twig" with {
-                "table" : {
-                    "id" : "table-members"
-                }
-            }
-        %}
+    
+    <!-- Pagination -->
+    <div class="uk-flex uk-flex-between">
+      <button 
+        @click="previousPage" 
+        :disabled="currentPage === 1"
+        class="uk-button uk-button-default"
+      >
+        Previous
+      </button>
+      <span>Page {{ currentPage }} of {{ totalPages }}</span>
+      <button 
+        @click="nextPage" 
+        :disabled="currentPage === totalPages"
+        class="uk-button uk-button-default"
+      >
+        Next
+      </button>
     </div>
-    <div class="box-footer">
-        <button type="button" class="btn btn-success js-member-create">
-            <i class="fa fa-plus-square"></i>  Create member
-        </button>
-    </div>
-</div>
-```
-
-This example shows an AdminLTE "box" component being used to display our table, but you don't have to use the box component to use `ufTable`. The important thing is that we've wrapped our table and all related controls (table tool menu, buttons, etc) inside a single wrapper element (the `myUserTable` div).
-
-In your page Javascript, initialize `ufTable` **on your wrapper element**:
-
-```js
-$("#myUserTable").ufTable({
-    dataUrl: site.uri.public + "/api/owls"
-});
-```
-
-Where the only parameter is a JSON object containing the configuration options for your table. **Most importantly, be sure to specify the `dataUrl` option so that `ufTable` knows where to get the table data from!**
-
-### Additional table controls
-
-All of these controls come pre-implemented in UserFrosting, but you are welcome to override and customize them in your own table templates if necessary.
-
-#### Download button
+  </div>
+</template>
 
-Any button with the `.js-uf-table-download` class inside your wrapper is bound to trigger an AJAX request for downloading the table in CSV format.
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import axios from 'axios'
 
-This is implemented by default in the table tool menu, in `tables/table-tool-menu.html.twig`.
-
-![Table tool menu](images/table-tools.png)
-
-#### Column selectors
-
-`ufTable` will generate a list of checkboxes for manually hiding/showing table columns in any container element with the `js-uf-table-cs-options` class. This is implemented by default in the table tool menu, in `tables/table-tool-menu.html.twig`.
-
-#### Global search
-
-In mobile views, `ufTable` will hide the per-column filters and display a global search field instead. This field should be inside a container with the `js-uf-table-search` class.
-
-When a global search is performed, `ufTable` will send the search query to your data API for a field with the name `_all`. By default, Sprunjes implement a `filterAll` method which searches all filterable fields, but of course you may override this method in your own Sprunje.
-
-This global search field is implemented by default for you in `tables/table-paginated.html.twig`.
+interface User {
+  id: number
+  name: string
+  email: string
+}
 
-#### Table info
+const users = ref<User[]>([])
+const searchQuery = ref('')
+const sortKey = ref<keyof User>('name')
+const sortOrder = ref<'asc' | 'desc'>('asc')
+const currentPage = ref(1)
+const perPage = 10
+
+// Fetch data
+onMounted(async () => {
+  const response = await axios.get('/api/users')
+  users.value = response.data
+})
+
+// Filtering
+const filteredUsers = computed(() => {
+  let filtered = users.value
+  
+  // Search filter
+  if (searchQuery.value) {
+    filtered = filtered.filter(user => 
+      user.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+      user.email.toLowerCase().includes(searchQuery.value.toLowerCase())
+    )
+  }
+  
+  // Sort
+  filtered = [...filtered].sort((a, b) => {
+    const aVal = a[sortKey.value]
+    const bVal = b[sortKey.value]
+    const modifier = sortOrder.value === 'asc' ? 1 : -1
+    return aVal < bVal ? -modifier : modifier
+  })
+  
+  // Pagination
+  const start = (currentPage.value - 1) * perPage
+  return filtered.slice(start, start + perPage)
+})
+
+const totalPages = computed(() => 
+  Math.ceil(users.value.length / perPage)
+)
+
+function sort(key: keyof User) {
+  if (sortKey.value === key) {
+    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortKey.value = key
+    sortOrder.value = 'asc'
+  }
+}
 
-When `ufTable` can't find any rows for the table (subject to the filter constraints), it will display a "No results" message in a container with the `js-uf-table-info` class. This container is implemented by default for you in `tables/table-paginated.html.twig`.
+function previousPage() {
+  if (currentPage.value > 1) currentPage.value--
+}
 
-#### Pager controls
+function nextPage() {
+  if (currentPage.value < totalPages.value) currentPage.value++
+}
 
-The table page controls (next page, previous page, jump to page, etc) are implemented inside a container with the `js-uf-table-pager` class. This container is implemented by default for you in `tables/table-paginated.html.twig`.
+function editUser(user: User) {
+  console.log('Edit:', user)
+}
+</script>
+```
 
-## Options
+## Server-Side Tables (Sprunjes)
 
-The following options can be used when you initialize `ufTable` on the wrapper element.
+For large datasets, fetch data from the server with pagination/sorting:
 
-```js
-$("#myUserTable").ufTable({
-    ...
-});
-```
+```vue
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+import axios from 'axios'
 
-### dataUrl
-
-The absolute url for the table's AJAX data source. `ufTable` expects the data source to use the Sprunje API. Thus, it should be able to understand the API for [Sprunje requests](database/data-sprunjing#sprunje-parameters), and return data in the Sprunje response format:
-
-```json
-{
-    "count": 2,
-    "count_filtered": 2,
-    "rows": [
-        {
-            "id": 11,
-            "species": "Bubo scandiacus",
-            "description": "Snowy owls are native to Arctic regions in North America and Eurasia. Males are almost all white, while females have more flecks of black plumage. Juvenile snowy owls have black feathers until they turn white. The snowy owl is a ground nester that predominantly hunts rodents."
-        },
-        {
-            "id": 8,
-            "species": "Megascops asio",
-            "description": "This species is native to most wooded environments of its distribution and, more so than any other owl in its range, has adapted well to manmade development, although it frequently avoids detection due to its strictly nocturnal habits."
-        }
-    ]
+interface TableData {
+  rows: any[]
+  count: number
+  count_filtered: number
 }
-```
 
-### msgTarget
-
-If `ufTable` receives an error from the server when it attempts to retrieve row data, it will automatically retrieve any error messages from the [alert stream](routes-and-controllers/alert-stream) and render them on the page. `msgTarget` allows you to specify an element of the DOM where `ufTable` should display these messages.
-
-Internally, `ufTable` will set up a `ufAlerts` widget to fetch and render the alert stream messages.
-
-If `msgTarget` is not specified, `ufTable` will look for an element on the page with an `id` of `#alerts-page` by default.
-
-### tablesorter
-
-An object containing tablesorter's [configuration options](https://mottie.github.io/tablesorter/docs/#Configuration). The default values for this object are:
-
-```json
-{
-    debug: false,
-    theme     : 'bootstrap',
-    widthFixed: true,
-    // See https://mottie.github.io/tablesorter/docs/example-pager-ajax.html
-    widgets: ['saveSort', 'sort2Hash', 'filter', 'pager', 'columnSelector', 'reflow2'],
-    widgetOptions : {
-        columnSelector_layout : '<label><input type="checkbox"> <span>{name}</span></label>',
-        filter_cssFilter: 'form-control',
-        filter_saveFilters : true,
-        filter_serversideFiltering : true,
-        filter_selectSource : {
-            '.filter-select' : function() { return null; }
-        },
-
-        // apply disabled classname to the pager arrows when the rows at either extreme is visible
-        pager_updateArrows: true,
-
-        // starting page of the pager (zero based index)
-        pager_startPage: 0,
-
-        // Number of visible rows
-        pager_size: 10,
-
-        // Save pager page & size if the storage script is loaded (requires $.tablesorter.storage in jquery.tablesorter.widgets.js)
-        pager_savePages: true,
-
-        // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
-        // table row set to a height to compensate; default is false
-        pager_fixedHeight: false,
-
-        // remove rows from the table to speed up the sort of large tables.
-        // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
-        pager_removeRows: false, // removing rows in larger tables speeds up the sort
-
-        // target the pager markup - see the HTML block below
-        pager_css: {
-            errorRow    : 'uf-table-error-row', // error information row
-            disabled    : 'disabled' // Note there is no period "." in front of this class name
-        },
-
-        // Must be initialized with a 'data' key
-        pager_ajaxObject: {
-            data: {},
-            dataType: 'json'
-        },
-        // jQuery selectors
-        pager_selectors: {
-          container   : '.pager',       // target the pager markup (wrapper)
-          first       : '.first',       // go to first page arrow
-          prev        : '.prev',        // previous page arrow
-          next        : '.next',        // next page arrow
-          last        : '.last',        // go to last page arrow
-          gotoPage    : '.gotoPage',    // go to page selector - select dropdown that sets the current page
-          pageDisplay : '.pagedisplay', // location of where the "output" is displayed
-          pageSize    : '.pagesize'     // page size selector - select dropdown that sets the "size" option
-        },
-
-        // hash prefix
-        sort2Hash_hash              : '#',
-        // don't '#' or '=' here
-        sort2Hash_separator         : '|',
-        // this option > table ID > table index on page
-        sort2Hash_tableId           : null,
-        // if true, show header cell text instead of a zero-based column index
-        sort2Hash_headerTextAttr    : 'data-column-name',
-        // direction text shown in the URL e.g. [ 'asc', 'desc' ]
-        sort2Hash_directionText     : [ 'asc', 'desc' ], // default values
-        // if true, override saveSort widget sort, if used & stored sort is available
-        sort2Hash_overrideSaveSort  : true, // default = false
-    }
+const data = ref<any[]>([])
+const loading = ref(false)
+const totalRecords = ref(0)
+
+// Table state
+const page = ref(1)
+const perPage = ref(25)
+const sortField = ref('name')
+const sortDirection = ref<'asc' | 'desc'>('asc')
+const filters = ref<Record<string, string>>({})
+
+// Fetch data when params change
+watch([page, perPage, sortField, sortDirection, filters], fetchData, { deep: true })
+
+onMounted(fetchData)
+
+async function fetchData() {
+  loading.value = true
+  
+  try {
+    const response = await axios.get<TableData>('/api/users', {
+      params: {
+        page: page.value,
+        size: perPage.value,
+        sorts: { [sortField.value]: sortDirection.value },
+        filters: filters.value
+      }
+    })
+    
+    data.value = response.data.rows
+    totalRecords.value = response.data.count_filtered
+  } finally {
+    loading.value = false
+  }
 }
+</script>
 ```
 
-### addParams
-
-An object containing any additional key-value pairs that you want appended to the AJAX requests made by the table. Useful when implementing, for example, site-wide filters or using data sources that require additional context.
+## Using TanStack Vue Table
 
-When sending an AJAX request to a Sprunje, there are some hoops to jump through:
-1. Remember that sprunjes only accept [certain parameters](database/data-sprunjing#sprunje-parameters). If, for instance, you want to filter by "UserID" that's set outside of the table, you'll need to pass `filters[UserID]` in the AJAX request rather than simply `UserID`.
-2. Additionally, sprunjes only accept [whitelisted fields](database/data-sprunjing#sorts-and-filters), so you'll need to ensure that `UserID` is in the appropriate array in the sprunje--in this case, `$filterable`.
-3. Optional: Unless you're hardcoding the parameter value, you may need to [export it to JS](client-side-code/exporting-variables).
+For advanced features, use [TanStack Table](https://tanstack.com/table/v8):
 
-In this Javascript sample, we've already asked the user for a Genus name and exported it to the variable `page.owl.genus`.
-```javascript
-$("#myUserTable").ufTable({
-    dataUrl: site.uri.public + "/api/owls",
-    addParams: {"filters[species]" : page.owl.genus}
-});
+```bash
+npm install @tanstack/vue-table
 ```
 
-### filterAllField
-
-The special filter name that should be sent in AJAX requests when a global search (as opposed to column-specific searches) is performed. Defaults to `_all`.
-
-### useLoadingTransition
-
-Specify whether to display a loading transition overlay on the table while waiting for rows to be retrieved and rendered. Defaults to `true`.
-
-### columnTemplates
-
-Specify the templates used to render the cells of each column, by mapping each column name to either a reference to a `<script>` tag that contains a Handlebars template, or a or callback function. Defaults to using the references in the `data-column-template` attributes of each table column header. See the [column headers section](#data-column-template) for more information on how this works.
-
-> [!IMPORTANT]
-> Every column must have a corresponding template, defined either in `columnTemplates` or in your table headers' `data-column-template` attributes.
-
-### rowTemplate
-
-Specify a custom template for rendering the opening `<tr>` tag of each row. If set to `null` (default), `ufTable` will simply render a plain `<tr>` tag. If passed a string, it will attempt to resolve a reference to a `<script>` tag containing a Handlebars template. If passed a callback, it will simply use that callback to render your `<tr>` tag.
-
-For example:
+```vue
+<script setup lang="ts" generic="TData extends Record<string, any>">
+import {
+  useVueTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  flexRender,
+  type ColumnDef
+} from '@tanstack/vue-table'
+import { ref } from 'vue'
+
+interface User {
+  id: number
+  name: string
+  email: string
+  role: string
+}
 
-```js
-$('#widget-users').ufTable({
-    dataUrl: site.uri.public + '/api/users',
-    rowTemplate: function (params) {
-        if ((params.rownum % 2) == 0) {
-            return "<tr style='color: red'>";
-        }
-        return "<tr>";
+const data = ref<User[]>([
+  { id: 1, name: 'Alice', email: 'alice@example.com', role: 'Admin' },
+  { id: 2, name: 'Bob', email: 'bob@example.com', role: 'User' },
+])
+
+const columns: ColumnDef<User>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+  },
+  {
+    accessorKey: 'role',
+    header: 'Role',
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      return h('button', {
+        onClick: () => console.log('Edit', row.original)
+      }, 'Edit')
     }
-});
-```
-
-Or alternatively, using a Handlebars template:
+  }
+]
+
+const table = useVueTable({
+  get data() { return data.value },
+  columns,
+  getCoreRowModel: getCoreRowModel(),
+  getSortedRowModel: getSortedRowModel(),
+  getFilteredRowModel: getFilteredRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+})
+</script>
 
-```js
-$('#widget-users').ufTable({
-    dataUrl: site.uri.public + '/api/users',
-    rowTemplate: '#user-table-row'
-});
+<template>
+  <table class="uk-table">
+    <thead>
+      <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+        <th v-for="header in headerGroup.headers" :key="header.id">
+          <div @click="header.column.getToggleSortingHandler()?.($event)">
+            <component 
+              :is="flexRender(header.column.columnDef.header, header.getContext())"
+            />
+          </div>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="row in table.getRowModel().rows" :key="row.id">
+        <td v-for="cell in row.getVisibleCells()" :key="cell.id">
+          <component :is="flexRender(cell.column.columnDef.cell, cell.getContext())" />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
 ```
 
-with a corresponding template:
-
-```html
-<script id="user-table-row" type="text/x-handlebars-template">
-    {{#ifx (calc rownum '%' 2) '==' 0}}
-        <tr style="background-color: red">
-    {{ else }}
-        <tr>
-    {{/ifx}}
-</script>
+## Reusable Table Composable
+
+```typescript
+// composables/useTable.ts
+import { ref, computed, Ref } from 'vue'
+
+export function useTable<T extends Record<string, any>>(
+  fetchFn: (params: any) => Promise<{ data: T[], total: number }>
+) {
+  const data: Ref<T[]> = ref([])
+  const loading = ref(false)
+  const total = ref(0)
+  
+  const page = ref(1)
+  const perPage = ref(25)
+  const sortKey = ref<keyof T | ''>('')
+  const sortOrder = ref<'asc' | 'desc'>('asc')
+  const search = ref('')
+  
+  const totalPages = computed(() => Math.ceil(total.value / perPage.value))
+  
+  async function fetch() {
+    loading.value = true
+    try {
+      const result = await fetchFn({
+        page: page.value,
+        perPage: perPage.value,
+        sortKey: sortKey.value,
+        sortOrder: sortOrder.value,
+        search: search.value
+      })
+      data.value = result.data
+      total.value = result.total
+    } finally {
+      loading.value = false
+    }
+  }
+  
+  function sort(key: keyof T) {
+    if (sortKey.value === key) {
+      sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
+    } else {
+      sortKey.value = key
+      sortOrder.value = 'asc'
+    }
+    fetch()
+  }
+  
+  return {
+    data,
+    loading,
+    total,
+    totalPages,
+    page,
+    perPage,
+    search,
+    fetch,
+    sort
+  }
+}
 ```
 
-### download.button
-
-A jQuery selector that corresponds to the "download table" button. Defaults to any matching `$('.js-uf-table-download')` elements in the table container.
-
-### download.callback
-
-Specify a custom callback function to perform the table download.
-
-### info.container
-
-A jQuery selector that corresponds to the [table info](#table-info) container. Defaults to any matching `$('.js-uf-table-info')` elements in the table container.
-
-### info.callback
-
-Specify a custom callback function to render table info messages.
-
-### info.messageEmptyRows
-
-Specify the message to be displayed in the info container when no matching records were found. Defaults to the `data-message-empty-rows` atttribute of the info container. If `data-message-empty-rows` is not specified, defaults to "Sorry, we've got nothing here."
-
-### overlay.container
-
-A jQuery selector that corresponds to the table overlay container, which will be displayed while the table is retrieving and rendering rows. Defaults to any matching `$('.js-uf-table-overlay')` elements in the table container.
+## What's Next?
 
-## Events
+- **[Forms](client-side-code/components/forms)**: Create and edit table data
+- **[Collections](client-side-code/components/collections)**: Manage dynamic lists
+- **[Alerts](client-side-code/components/alerts)**: Show operation feedback
 
-`ufTable` triggers the following events:
+## Further Reading
 
-### pagerComplete.ufTable
-
-Triggered when the tablesorter pager plugin has completed rendering of the table.
-
-Of course, you can always bind handlers directly to [tablesorter's events](https://mottie.github.io/tablesorter/docs/#events) as well.
-
-## Methods
-
-### getTableStateVars(table)
-
-Fetches the current page size, page number, sort order, sort field, and column filters.
-
-### getSavedFilters(table)
-
-Get saved filters from the browser's local storage.
-
-### refresh
-
-Refreshes the table by re-querying the data URL with the current set of filters, sorts, etc. Usage: `$("#myUserTable").ufTable("refresh");`
-
-## Customizing the base template for your table
-
-If you don't want to use the default `table-paginated.html.twig` base template for your tables, you can create your own base template. Your template needs to have six things:
-
-- `{% block table_search %}`: Global search field for the table. By default, only shown in mobile sizes. To customize this behavior, see the media queries in `core/assets/userfrosting/css/userfrosting.css`.
-- `{% block table %}`: This is the Twig block where the table skeleton will go.
-- `{% block table_cell_templates %}`: This is the Twig block where cell templates will be placed.
-- `{% block table_info %}`: This is a container for displaying alternative messages, such as "no records found". The container element should have the `js-uf-table-info` class.
-- `{% block table_pager_controls %}`: A container for navigation controls for your table's pagination. The container element should have the `js-uf-table-pager` class.
-- `{% block table_overlay %}`: A container that implements the 'loading' overlay for tables. The overlay element should have the `js-uf-table-overlay` class.
-
-Your base template might end up looking something like:
-
-```html
-{% block table_search %}
-    <div class="form-group has-feedback uf-table-search js-uf-table-search">
-        <input type="search" class="form-control" data-column="all">
-        <i class="fa fa-search form-control-icon" aria-hidden="true"></i>
-    </div>
-{% endblock %}
-<div class="table overlay-wrapper">
-    {% block table %}
-        {# Define your table skeleton in this block in your child template #}
-    {% endblock %}
-
-    {% block table_cell_templates %}
-        {# Define your Handlebars cell templates in this block in your child template #}
-    {% endblock %}
-
-    {% block table_info %}
-        <div class="uf-table-info js-uf-table-info" data-message-empty-rows="{{translate('NO_RESULTS')}}">
-        </div>
-    {% endblock %}
-
-    {% block table_pager_controls %}
-        <div class="pager pager-lg tablesorter-pager js-uf-table-pager" data-output-template="{{translate('PAGINATION.OUTPUT')}}">
-            <span class="pager-control first" title="{{translate("PAGINATION.FIRST")}}"><i class="fa fa-angle-double-left"></i></span>
-            <span class="pager-control prev" title="{{translate("PAGINATION.PREVIOUS")}}"><i class="fa fa-angle-left"></i></span>
-            <span class="pagedisplay"></span> {# this can be any element, including an input #}
-            <span class="pager-control next" title="{{translate("PAGINATION.NEXT")}}"><i class="fa fa-angle-right"></i></span>
-            <span class="pager-control last" title= "{{translate("PAGINATION.LAST")}}"><i class="fa fa-angle-double-right"></i></span>
-            <br><br>
-            {{translate("PAGINATION.GOTO")}}: <select class="gotoPage"></select> &bull; {{translate("PAGINATION.SHOW")}}:
-            <select class="pagesize">
-            {% for count in pager.take|default([5, 10, 50, 100]) %}
-                <option value="{{count}}">{{count}}</option>
-            {% endfor %}
-            </select>
-        </div>
-    {% endblock %}
-
-    {% block table_overlay %}
-        {% if site.uf_table.use_loading_transition %}
-            <div class="overlay js-uf-table-overlay hidden">
-                <i class="fa fa-refresh fa-spin"></i>
-            </div>
-        {% endif %}
-    {% endblock %}
-</div>
-```
+- [TanStack Table Documentation](https://tanstack.com/table/v8)
+- [UIkit Tables](https://getuikit.com/docs/table)
+- [Data Sprunjing](database/data-sprunjing)
diff --git a/app/pages/6.0/15.client-side-code/04.components/03.collections/docs.md b/app/pages/6.0/15.client-side-code/04.components/03.collections/docs.md
index 9348d90d..cea0c537 100644
--- a/app/pages/6.0/15.client-side-code/04.components/03.collections/docs.md
+++ b/app/pages/6.0/15.client-side-code/04.components/03.collections/docs.md
@@ -1,732 +1,533 @@
 ---
-title: Collections
-description: The ufCollection widget provides a convenient interface for associating related or child entities with a single parent entity.
-obsolete: true
+title: Managing Collections with Vue 3
+description: Build dynamic lists and collections with Vue 3 for adding, removing, and editing items
+wip: true
 ---
 
-{% do assets.addCss('theme://css/select2.min.css') %}
-{% do assets.addCss('theme://css/uf-collection.css') %}
+Collections allow users to manage dynamic lists of items—like adding multiple phone numbers to a contact or assigning multiple roles to a user. Vue 3's reactivity makes managing collections straightforward and intuitive.
 
-{% do assets.addJs('theme://handlebars/handlebars.js') %}
-{% do assets.addJs('theme://js/select2.full.min.js') %}
-{% do assets.addJs('theme://jquery.inputmask/dist/inputmask/inputmask.js') %}
-{% do assets.addJs('theme://jquery.inputmask/dist/inputmask/inputmask.extensions.js') %}
-{% do assets.addJs('theme://jquery.inputmask/dist/inputmask/jquery.inputmask.js') %}
-{% do assets.addJs('theme://jquery.inputmask/dist/inputmask/bindings/inputmask.binding.js') %}
-
-{% do assets.addJs('theme://js/attrchange.js') %}
-{% do assets.addJs('theme://js/uf-collection.js') %}
-{% do assets.addJs('theme://js/serialize-controls.js') %}
-{% do assets.addJs('theme://js/example-collection.js') %}
-
-The `ufCollection` widget provides a convenient interface for associating related or child entities with a single parent entity. For example, you might want to associate a user account with one or more roles, or add multiple phone numbers or addresses to an employee.
-
-![ufCollection widget as used for the 'user role' management interface.](images/uf-collection.png)
-
-## Basic setup
-
-To use `ufCollection`, you need to have `userfrosting/js/uf-collection.js` and `userfrosting/css/uf-collection.css` included in your page assets. The easiest way to do this is by including the `js/form-widgets` and `css/form-widgets` [asset bundles](asset-management/asset-bundles) in your page. Most of the default administrative pages include these bundles by default in their `stylesheets_page` and `scripts_page` Twig blocks. Of course, feel free to include the required JS and CSS files in your page-specific asset bundles instead, if you prefer.
-
-The basic markup for a collection widget consists of a table "skeleton" wrapped inside some sort of container element. For example:
-
-```html
-<div id="member-phones">
-    <label>Phone numbers</label>
-    <table class="table table-striped">
-        <tbody>
-        </tbody>
-    </table>
-</div>
-```
+> [!NOTE]
+> [TODO: Screenshot] - Collection interface with add/remove buttons
+
+## Basic Collection Component
+
+Here's a simple component for managing a list of items:
+
+```vue
+<template>
+  <div class="collection">
+    <h3>{{ title }}</h3>
+    
+    <!-- List of items -->
+    <div v-for="(item, index) in items" :key="item.id" class="collection-item">
+      <div class="uk-grid-small" uk-grid>
+        <div class="uk-width-expand">
+          <input 
+            v-model="item.value" 
+            type="text" 
+            class="uk-input"
+            :placeholder="placeholder"
+          />
+        </div>
+        <div class="uk-width-auto">
+          <button 
+            @click="removeItem(index)" 
+            class="uk-button uk-button-danger uk-button-small"
+          >
+            <span uk-icon="trash"></span>
+          </button>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Add button -->
+    <button @click="addItem" class="uk-button uk-button-default uk-margin-top">
+      <span uk-icon="plus"></span> Add {{ itemName }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface CollectionItem {
+  id: number
+  value: string
+}
 
-### Table rows
+interface Props {
+  title: string
+  itemName?: string
+  placeholder?: string
+  initialItems?: CollectionItem[]
+}
 
-You'll notice that the table skeleton contains an empty `tbody` element. By default, when a new row is added (by the client or programmatically), `ufCollection` will insert the new row inside this `tbody`.
+const props = withDefaults(defineProps<Props>(), {
+  itemName: 'Item',
+  placeholder: 'Enter value...',
+  initialItems: () => []
+})
+
+const emit = defineEmits<{
+  change: [items: CollectionItem[]]
+}>()
+
+const items = ref<CollectionItem[]>([...props.initialItems])
+let nextId = items.value.length + 1
+
+function addItem() {
+  items.value.push({
+    id: nextId++,
+    value: ''
+  })
+  emit('change', items.value)
+}
 
-The markup for the rows themselves is dynamically generated using a [Handlebars template](client-side-code/client-side-templating). The row template can be embedded inside your page's Twig template using the Twig `{{ '{% verbatim %}' }}` tag. It might look something like:
+function removeItem(index: number) {
+  items.value.splice(index, 1)
+  emit('change', items.value)
+}
 
-```
-{{ '{% verbatim %}' }}
-<script id="member-phones-row" type="text/x-handlebars-template">
-    <tr class="uf-collection-row">
-        <td>
-            <div class="input-group">
-                <span class="input-group-addon"><i class="fa fa-phone fa-fw"></i></span>
-                <input type="hidden" name="phones[{{ rownum }}][id]" value="{{id}}">
-                <input type="text" class="form-control" name="phones[{{ rownum }}][label]" value="{{label}}" placeholder="Label">
-            </div>
-        </td>
-        <td>
-            <input type="text" class="form-control" name="phones[{{ rownum }}][number]" value="{{number}}" placeholder="Number">
-        </td>
-        <td>
-            <button type="button" class="btn btn-link btn-trash js-delete-row pull-right" title="Delete"> <i class="fa fa-trash"></i> </button>
-        </td>
-    </tr>
+// Expose items for parent component
+defineExpose({
+  items
+})
 </script>
-{{ '{% endverbatim %}' }}
-```
 
-Some important features of the row template:
-
-- The template should contain a single `tr` element with the `uf-collection-row` class.
-- The last column of your row should be a "delete" button, allowing the user to remove associations. You may style this button however you like, but it needs to have the `js-delete-row` class for `ufCollection` to bind the delete event.
-- The user can add additional information to each row via additional controls (`input`, `select`, etc).
-- You should have a hidden `input` control in each row, that contains the `id` for the element associated with that row.
-- We recommend submitting the entire collection under a single top-level `name` attribute. You can then use the `rownum` placeholder to index the elements of this key, and under that, the individual properties of the row.
-
-For example, the submitted data from this collection might end up looking something like:
-
-```json
-    "phones": [
-        {
-            "id": 17,
-            "label": "primary",
-            "number": "5555551212"
-        },
-        {
-            "id": "",
-            "label": "mobile",
-            "number": "1233219999"
-        }
-    ]
+<style scoped>
+.collection-item {
+  margin-bottom: 10px;
+}
+</style>
 ```
 
-## Usage
-
-`ufCollection` can be used to provide an interface for manipulating two types of relationships - one-to-many, and many-to-many.
-
-For **one-to-many** relationships, the client can directly create, modify, and delete entities that should be associated with exactly one parent entity. For example, a user can have multiple phone numbers, but they only belong to that one user - users do not "share" the same phone number.
-
-In a **many-to-many** relationship, the client selects pre-existing entities to match up to the parent entity. These entities might be shared with other parent entities as well - thus the "many to many". There might be some additional data associated with the relationship (so called "pivot data") that the client can add, but the related entity itself is shared. For example, a member can have the same model of car as other members, but the specific VIN of their particular car would be unique to them. Thus, they might preselect their model ("Mazda 3") from a dropdown, and then enter in their VIN as pivot data.
+**Usage**:
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import Collection from './components/Collection.vue'
 
-### One-to-many
+const phoneNumbers = ref([
+  { id: 1, value: '555-1234' },
+  { id: 2, value: '555-5678' }
+])
 
-In one-to-many mode, users directly enter data into controls in each row. For this reason, we sometimes refer to this as "free text" mode.
-
-To initialize a one-to-many collection widget, call the `ufCollection` method on your container element:
+function handleChange(items) {
+  console.log('Items changed:', items)
+}
+</script>
 
-```js
-$('#member-phones').ufCollection({
-    useDropdown: false,
-    rowTemplate: $('#member-phones-row').html()
-});
+<template>
+  <Collection 
+    title="Phone Numbers"
+    item-name="Phone Number"
+    placeholder="Enter phone number"
+    :initial-items="phoneNumbers"
+    @change="handleChange"
+  />
+</template>
 ```
 
-Notice that we have set `useDropdown` to `false`. When this is set to false, `ufCollection` will automatically add a new empty row below the last row that has been "touched". A row is "touched" whenever it is brought into focus, or when it is programmatically added using the `addRow` method. Thus, this ensures that the user can always add another row of information without needing to click an "add" button. Try the live demo below:
-
-<div id="example-phones">
-    <div style="float: left;">
-        <label>Phone numbers</label>
-        <div>
-            <table class="table-striped">
-                <tbody>
-                </tbody>
-            </table>
+## Complex Collection Items
+
+For more complex items with multiple fields:
+
+```vue
+<template>
+  <div class="role-collection">
+    <h3>User Roles</h3>
+    
+    <div v-for="(role, index) in roles" :key="role.id" class="uk-card uk-card-default uk-card-body uk-margin-small">
+      <div class="uk-grid-small" uk-grid>
+        <!-- Role Selection -->
+        <div class="uk-width-1-2">
+          <label class="uk-form-label">Role</label>
+          <select v-model="role.role_id" class="uk-select">
+            <option v-for="r in availableRoles" :key="r.id" :value="r.id">
+              {{ r.name }}
+            </option>
+          </select>
         </div>
+        
+        <!-- Start Date -->
+        <div class="uk-width-1-4">
+          <label class="uk-form-label">Start Date</label>
+          <input 
+            v-model="role.start_date" 
+            type="date" 
+            class="uk-input"
+          />
+        </div>
+        
+        <!-- End Date -->
+        <div class="uk-width-1-4">
+          <label class="uk-form-label">End Date</label>
+          <input 
+            v-model="role.end_date" 
+            type="date" 
+            class="uk-input"
+          />
+        </div>
+        
+        <!-- Remove Button -->
+        <div class="uk-width-1-1">
+          <button 
+            @click="removeRole(index)" 
+            class="uk-button uk-button-danger uk-button-small"
+          >
+            Remove Role
+          </button>
+        </div>
+      </div>
     </div>
-    <div class="example-output">
-        <label>Data received by server:</label>
-        <pre>
-            <code>
-            </code>
-        </pre>
-    </div>
-    <div style="clear: both;"></div>
-</div>
-
-{% verbatim %}
-<script id="collection-phones-row" type="text/x-handlebars-template">
-    <tr class="uf-collection-row">
-        <td>
-            <div class="input-group">
-                <input type="hidden" name="phones[{{ rownum }}][id]" value="{{id}}">
-                <input type="text" class="form-control" name="phones[{{ rownum }}][label]" value="{{label}}" placeholder="Label">
-            </div>
-        </td>
-        <td>
-            <input type="text" class="form-control js-input-phone" name="phones[{{ rownum }}][number]" data-inputmask="'mask': '(999) 999-9999', 'autoUnmask': true" data-mask autocomplete="off" value="{{number}}" placeholder="Number">
-        </td>
-        <td>
-            <button type="button" class="btn btn-link btn-trash js-delete-row pull-right" title="Delete"> <i class="fa fa-trash"></i> </button>
-        </td>
-    </tr>
-</script>
-{% endverbatim %}
+    
+    <button @click="addRole" class="uk-button uk-button-primary uk-margin-top">
+      Add Role
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Role {
+  id: number
+  role_id: number
+  start_date: string
+  end_date: string
+}
 
-#### Server-side processing
+interface AvailableRole {
+  id: number
+  name: string
+}
 
-Let's assume that your `ufCollection` widget is part of a form that you will submit to the server for processing, and that you want to update the related entities in the database. If you used the naming scheme for your row controls as suggested in the [setup section](#table-rows), the rendered collection table might end up looking something like:
+const roles = ref<Role[]>([])
+const availableRoles = ref<AvailableRole[]>([
+  { id: 1, name: 'Admin' },
+  { id: 2, name: 'User' },
+  { id: 3, name: 'Moderator' }
+])
+
+let nextId = 1
+
+function addRole() {
+  roles.value.push({
+    id: nextId++,
+    role_id: 1,
+    start_date: new Date().toISOString().split('T')[0],
+    end_date: ''
+  })
+}
 
-```html
-<tr class="uf-collection-row">
-    <td>
-        <div class="input-group">
-            <span class="input-group-addon"><i class="fa fa-phone fa-fw"></i></span>
-            <input type="hidden" name="phones[0][id]" value="17">
-            <input type="text" class="form-control" name="phones[0][label]" value="primary" placeholder="Label">
-        </div>
-    </td>
-    <td>
-        <input type="text" class="form-control" name="phones[0][number]" value="5555551212" placeholder="Number">
-    </td>
-    <td>
-        <button type="button" class="btn btn-link btn-trash js-delete-row pull-right" title="Delete"> <i class="fa fa-trash"></i> </button>
-    </td>
-</tr>
-<tr class="uf-collection-row">
-    <td>
-        <div class="input-group">
-            <span class="input-group-addon"><i class="fa fa-phone fa-fw"></i></span>
-            <input type="hidden" name="phones[1][id]" value="">
-            <input type="text" class="form-control" name="phones[1][label]" value="mobile" placeholder="Label">
-        </div>
-    </td>
-    <td>
-        <input type="text" class="form-control" name="phones[1][number]" value="1233219999" placeholder="Number">
-    </td>
-    <td>
-        <button type="button" class="btn btn-link btn-trash js-delete-row pull-right" title="Delete"> <i class="fa fa-trash"></i> </button>
-    </td>
-</tr>
+function removeRole(index: number) {
+  roles.value.splice(index, 1)
+}
+</script>
 ```
 
-The data submitted to the server will then end up looking like:
+## Reusable Collection Composable
 
-```
-phones[0][id]: "17"
-phones[0][label]: "primary"
-phones[0][number]: "5555551212"
-phones[1][id]: ""
-phones[1][label]: "mobile"
-phones[1][number]: "1233219999"
-```
+Create a composable for common collection logic:
 
-This is an easy format for the server to process, because PHP will automatically convert this into a multidimensional array:
+**composables/useCollection.ts**:
+```typescript
+import { ref, Ref } from 'vue'
 
-```php
-$phones = $request->getParsedBody()['phones'];
-error_log(print_r($phones, true));
-```
+interface CollectionItem {
+  id: number
+  [key: string]: any
+}
 
-**Output:**
+export function useCollection<T extends CollectionItem>(
+  initialItems: T[] = [],
+  itemFactory: () => Omit<T, 'id'>
+) {
+  const items: Ref<T[]> = ref([...initialItems])
+  let nextId = items.value.length > 0 
+    ? Math.max(...items.value.map(i => i.id)) + 1 
+    : 1
+
+  function add(): T {
+    const newItem = {
+      id: nextId++,
+      ...itemFactory()
+    } as T
+    
+    items.value.push(newItem)
+    return newItem
+  }
+
+  function remove(id: number) {
+    const index = items.value.findIndex(item => item.id === id)
+    if (index > -1) {
+      items.value.splice(index, 1)
+    }
+  }
 
-```
-Array
-(
-    [0] => Array
-        (
-            [id] => 17,
-            [label] => "primary",
-            [number] => "5555551212"
-        )
-
-    [1] => Array
-        (
-            [id] => ,
-            [label] => "mobile",
-            [number] => "1233219999"
-        )
+  function removeAt(index: number) {
+    if (index >= 0 && index < items.value.length) {
+      items.value.splice(index, 1)
+    }
+  }
 
-)
+  function update(id: number, updates: Partial<T>) {
+    const item = items.value.find(i => i.id === id)
+    if (item) {
+      Object.assign(item, updates)
+    }
+  }
+
+  function clear() {
+    items.value = []
+  }
+
+  function reset(newItems: T[]) {
+    items.value = [...newItems]
+    nextId = items.value.length > 0 
+      ? Math.max(...items.value.map(i => i.id)) + 1 
+      : 1
+  }
+
+  return {
+    items,
+    add,
+    remove,
+    removeAt,
+    update,
+    clear,
+    reset
+  }
+}
 ```
 
-Notice that one of our phone numbers has a set `id` value (17), while the other number has an empty/unset `id`. This is how we tell the server that the first number is an existing entity that should be updated, while the second is a completely new entity that should be created and associated with the parent entity.
-
-UserFrosting implements a custom version of Laravel's [`hasMany` relationship](https://laravel.com/docs/8.x/eloquent-relationships#one-to-many), which allows you to synchronize the related entities for a parent entity:
+**Usage**:
+```vue
+<script setup lang="ts">
+import { useCollection } from '@/composables/useCollection'
 
-```php
-$member->phones()->sync($phones);
-```
+interface PhoneNumber {
+  id: number
+  label: string
+  number: string
+}
 
-Entities in `$phones` that have an `id` that matches one of the related entities for the parent entity in the database will be updated. Entities with an empty `id`, or an `id` that does not match one of the parent's related entities, will be considered a new entry, and a record will be added to the database. Entities in the _database_ that do not match the _input_, on the other hand, will be considered "deleted" and removed from the database.
-
-| Entity in submitted data | Entity in database     | Operation |
-| ------------------------ | ---------------------- | --------- |
-| Yes                      | Yes (matching id)      | Updated   |
-| Yes                      | No                     | Created   |
-| No                       | Yes (matching parent)  | Deleted   |
-
-If you want to prevent entities from being deleted, even if they are not present in the input, you can set the second argument of `sync` to `false`.
-
-### Many-to-many
-
-Many-to-many collections require some additional markup in the skeleton - we need to add a `select` control for selecting preexisting items to add to the collection. For example, let's say we want to allow members to choose species of owls from a prepopulated list, and then give each selected owl a name:
-
-<div id="example-member-owls">
-    <div style="float: left;">
-        <label>My owls</label>
-        <table class="table table-striped">
-            <thead>
-                <tr>
-                    <th>Species</th>
-                    <th>Name</th>
-                    <th>Remove</th>
-                </tr>
-            </thead>
-            <tbody>
-            </tbody>
-        </table>
-        <div class="padding-bottom">
-            <label>Adopt an owl:</label>
-            <select class="form-control js-select-new" type="text" data-placeholder="Select an owl">
-                <option></option>
-            </select>
-        </div>
-    </div>
-    <div class="example-output">
-        <label>Data received by server:</label>
-        <pre>
-            <code>
-            </code>
-        </pre>
-    </div>
-    <div style="clear: both;"></div>
-</div>
+const { items: phones, add, remove } = useCollection<PhoneNumber>(
+  [{ id: 1, label: 'Mobile', number: '555-1234' }],
+  () => ({ label: '', number: '' })
+)
 
-{% verbatim %}
-<script id="example-member-owls-row" type="text/x-handlebars-template">
-    <tr class="uf-collection-row">
-        <td>
-            {{species}}
-            <input type="hidden" name="owls[{{ rownum }}][species_id]" value="{{id}}">
-        </td>
-        <td>
-            <input type="text" name="owls[{{ rownum }}][name]" value="{{name}}">
-
-        </td>
-        <td>
-            <button type="button" class="btn btn-link btn-trash js-delete-row pull-right" title="Delete"> <i class="fa fa-trash"></i> </button>
-        </td>
-    </tr>
-</script>
+function addPhone() {
+  add()
+}
 
-<script id="example-member-owls-select-option" type="text/x-handlebars-template">
-    <div>
-        <strong>
-            {{species}}
-        </strong>
-        <br>
-        {{description}}
-    </div>
+function removePhone(id: number) {
+  remove(id)
+}
 </script>
-{% endverbatim %}
 
-```
-<div id="member-owls">
-    <label>My owls</label>
-    <table class="table table-striped">
-        <thead>
-            <tr>
-                <th>Species</th>
-                <th>Name</th>
-                <th>Remove</th>
-            </tr>
-        </thead>
-        <tbody>
-        </tbody>
-    </table>
-    <div class="padding-bottom">
-        <label>Adopt an owl:</label>
-        <select class="form-control js-select-new" type="text" data-placeholder="Select an owl">
-            <option></option>
-        </select>
+<template>
+  <div>
+    <div v-for="phone in phones" :key="phone.id">
+      <input v-model="phone.label" placeholder="Label" />
+      <input v-model="phone.number" placeholder="Number" />
+      <button @click="removePhone(phone.id)">Remove</button>
     </div>
-</div>
+    <button @click="addPhone">Add Phone</button>
+  </div>
+</template>
 ```
 
-The `select` control should have the class `js-select-new`, which tells `ufCollection` that we should add a new row to the collection **whenever a selection is made**. Internally `ufCollection` uses the [select2](http://select2.github.io/) library to create a beautiful, searchable dropdown menu.
+## Drag and Drop Reordering
 
-To initialize the widget, we leave out the `useDropdown` argument (which defaults to true), and instead add the `dropdown` and `dropdownTemplate` options:
-
-```js
-$('#member-owls').ufCollection({
-    dropdown: {
-        ajax: {
-            url: site.uri.public + '/api/owls'
-        }
-    },
-    dropdownTemplate: $('#member-owls-select-option').html(),
-    rowTemplate: $('#member-owls-row').html()
-});
-```
+Add drag-and-drop using [VueDraggable](https://github.com/SortableJS/vue.draggable.next):
 
-Our row template looks similar to that for one-to-many, except we name our hidden `id` input with the foreign key for the relationship. For example, we use `species_id` to refer to the `id` of the selected species for that row:
-
-```html
-{{ '{% verbatim %}' }}
-<script id="member-owls-row" type="text/x-handlebars-template">
-    <tr class="uf-collection-row">
-        <td>
-            {{species}}
-            <input type="hidden" name="owls[{{ rownum }}][species_id]" value="{{id}}">
-        </td>
-        <td>
-            <input type="text" name="owls[{{ rownum }}][name]" value="{{name}}">
-
-        </td>
-        <td>
-            <button type="button" class="btn btn-link btn-trash js-delete-row pull-right" title="Delete"> <i class="fa fa-trash"></i> </button>
-        </td>
-    </tr>
-</script>
-{{ '{% endverbatim %}' }}
+```bash
+npm install vuedraggable@next
 ```
 
-The additional options we need to set for many-to-many are:
-
-#### `dropdownTemplate`
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import draggable from 'vuedraggable'
 
-The `dropdownTemplate` parameter should contain a valid Handlebars template that `ufCollection` can render using the data returned by the AJAX request.
+const items = ref([
+  { id: 1, name: 'Item 1' },
+  { id: 2, name: 'Item 2' },
+  { id: 3, name: 'Item 3' }
+])
 
-As with the row template, we can define our dropdown template in our page's main Twig template:
-
-```html
-{{ '{% verbatim %}' }}
-<script id="member-owls-select-option" type="text/x-handlebars-template">
-    <div>
-        <strong>
-            {{species}}
-        </strong>
-        <br>
-        {{description}}
-    </div>
+function logOrder() {
+  console.log('New order:', items.value)
+}
 </script>
-{{ '{% endverbatim %}' }}
-```
-
-As with the `rowTemplate` option, we can retrieve reference this template using a jQuery selector and the `.html()` method.
-
-#### `dropdown`
-
-This parameter contains the [Select2 options](http://select2.github.io/options.html) that should be passed in when `ufCollection` initializes the control. Other than the `ajax` key, you probably won't need to customize most of the `dropdown` options.
 
-##### AJAX data source
-
-For large, dynamic collections of options, you will probably want to provide an AJAX data source with the `ajax` subkey.
-
-`ufCollection` will expect JSON data from an AJAX source, in the same format as that returned by the [Data Sprunjer](database/data-sprunjing). In particular, it should have a `rows` key that contains the collection of selectable options:
-
-```json
-{
-    "count": 2,
-    "count_filtered": 2,
-    "rows": [
-        {
-            "id": 11,
-            "species": "Bubo scandiacus",
-            "description": "Snowy owls are native to Arctic regions in North America and Eurasia. Males are almost all white, while females have more flecks of black plumage. Juvenile snowy owls have black feathers until they turn white. The snowy owl is a ground nester that predominantly hunts rodents."
-        },
-        {
-            "id": 8,
-            "species": "Megascops asio",
-            "description": "This species is native to most wooded environments of its distribution and, more so than any other owl in its range, has adapted well to manmade development, although it frequently avoids detection due to its strictly nocturnal habits."
-        }
-    ]
+<template>
+  <draggable 
+    v-model="items" 
+    item-key="id"
+    @end="logOrder"
+  >
+    <template #item="{ element }">
+      <div class="draggable-item">
+        <span uk-icon="table"></span>
+        {{ element.name }}
+      </div>
+    </template>
+  </draggable>
+</template>
+
+<style scoped>
+.draggable-item {
+  padding: 10px;
+  margin: 5px 0;
+  background: #f8f8f8;
+  border: 1px solid #ddd;
+  cursor: move;
 }
+</style>
 ```
 
-If you would like to use an alternative format for your source data, you can override the `dropdown.ajax.processResults` [callback option](#dropdown-1).
-
-#### Server-side processing
-
-With the example many-to-many row template, the rendered table might end up looking something like:
-
-```html
-<tr class="uf-collection-row">
-    <td>
-        Megascops asio
-        <input type="hidden" name="owls[1][species_id]" value="2">
-    </td>
-    <td>
-        <input type="text" name="owls[1][name]" value="Slasher">
-    </td>
-    <td>
-        <button type="button" class="btn btn-link btn-trash js-delete-row pull-right" title="Delete"> <i class="fa fa-trash"></i> </button>
-    </td>
-</tr>
-<tr class="uf-collection-row">
-    <td>
-        Megascops asio
-        <input type="hidden" name="owls[2][species_id]" value="5">
-    </td>
-    <td>
-        <input type="text" name="owls[2][name]" value="Fluffers">
-    </td>
-    <td>
-        <button type="button" class="btn btn-link btn-trash js-delete-row pull-right" title="Delete"> <i class="fa fa-trash"></i> </button>
-    </td>
-</tr>
-```
-
-The data submitted to the server will then end up looking like:
+## Server Integration
 
-```
-owls[1][species_id]: "2"
-owls[1][name]: "Slasher"
-owls[2][species_id]: "5"
-owls[2][name]: "Fluffers"
-```
+Submit collections with forms:
 
-Again, PHP will automatically convert this into a multidimensional array:
-
-```php
-$owls = $request->getParsedBody()['owls'];
-error_log(print_r($owls, true));
-```
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import axios from 'axios'
+import { useCollection } from '@/composables/useCollection'
 
-**Output:**
-
-```
-Array
-(
-    [1] => Array
-        (
-            [species_id] => 2,
-            [name] => "Slasher"
-        )
-
-    [2] => Array
-        (
-            [species_id] => 5,
-            [name]: =>"Fluffers"
-        )
+interface Email {
+  id: number
+  address: string
+  is_primary: boolean
+}
 
+const { items: emails, add, remove } = useCollection<Email>(
+  [],
+  () => ({ address: '', is_primary: false })
 )
-```
 
-Laravel's `sync` method can synchronize our input data with the database for [many-to-many relationships](https://laravel.com/docs/8.x/eloquent-relationships#many-to-many):
-
-```php
-$owlsCollection = collect($owls)->pluck(['species_id', 'name'])->all();
-$member->owls()->sync($owlsCollection);
+async function saveEmails() {
+  try {
+    await axios.post('/api/user/emails', {
+      emails: emails.value.map(e => ({
+        address: e.address,
+        is_primary: e.is_primary
+      }))
+    }, {
+      headers: {
+        [site.csrf.keys.name]: site.csrf.name,
+        [site.csrf.keys.value]: site.csrf.value
+      }
+    })
+    
+    alert('Emails saved!')
+  } catch (error) {
+    console.error('Failed to save:', error)
+  }
+}
+</script>
 ```
 
-The `collect` function will convert the raw multidimensional array into a collection of objects. `pluck` will then make sure that we only grab the values we're interested in. This is useful as a validation tool, to reject any fields that we don't want to allow the client to modify).
+## Validation
 
-Finally, calling the [`sync` method](https://laravel.com/docs/8.x/eloquent-relationships#updating-many-to-many-relationships) on a member's `owls` relationship will update the entire relationship, so that the owls associated with the member match exactly the submitted data.
+Validate collection items:
 
-## Methods, events, and options
+```vue
+<script setup lang="ts">
+import { ref, computed } from 'vue'
 
-This section covers the methods, events, and options that you can use to programmatically control your `ufCollection` widget.
+const items = ref([
+  { id: 1, email: '' }
+])
 
-### Methods
+const errors = ref<Record<number, string>>({})
 
-Methods are called via the standard jQuery practice of invoking the plugin name with the method name as the first argument:
+const isValid = computed(() => {
+  errors.value = {}
+  
+  items.value.forEach(item => {
+    if (!item.email) {
+      errors.value[item.id] = 'Email is required'
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(item.email)) {
+      errors.value[item.id] = 'Invalid email format'
+    }
+  })
+  
+  return Object.keys(errors.value).length === 0
+})
+</script>
 
-```js
-$('#myCollection').ufCollection('methodName', methodOptions);
+<template>
+  <div v-for="item in items" :key="item.id">
+    <input v-model="item.email" />
+    <span v-if="errors[item.id]" class="uk-text-danger">
+      {{ errors[item.id] }}
+    </span>
+  </div>
+</template>
 ```
 
-#### addRow
+## Best Practices
 
-_Adds a new row to an existing `ufCollection` widget, optionally prepopulated with some data._
+### 1. Use Unique Keys
 
-**Example usage:**
+Always provide unique `:key` for v-for:
 
-```js
-// Get current phones from an AJAX source, and add to member phones
-var memberId = 12;
-$.getJSON(site.uri.public + '/api/members/m/' + memberId)
-.done(function (data) {
-    $.each(data.phones, function (idx, phone) {
-        phoneCollection.ufCollection('addRow', phone);
-    });
-});
-```
-
-This pattern is especially useful when you want to provide an "update" feature for a collection. In the example above, we preload the collection with the member's current phone numbers (from an AJAX source), so that the user can add new phone numbers or remove current numbers. In this case, we expect the data source to have a `phones` key, which contains an array of phone number objects:
-
-```json
-{
-    // Maybe some other member information here
-
-    ...
-
-    "phones": [
-        {
-            "id": 17,
-            "label": "primary",
-            "number": "5555551212"
-        },
-        {
-            "id": 23,
-            "label": "mobile",
-            "number": "1233219999"
-        }
-    ]
-}
+```vue
+<div v-for="item in items" :key="item.id">
+  <!-- content -->
+</div>
 ```
 
-Each phone number object is used to construct a row in the widget.
+### 2. Validate Empty Collections
 
-#### getLastRow
+Check if collection has items:
 
-When adding items to a collection programmatically using `addRow` (for example, in an "update" interface), you may wish to perform additional operations on each row as it is added. To do this you may call the `getLastRow` method on your collection, and it will return the jQuery selector object for the row that was just added.
-
-For example, suppose you wish to instantiate a an input mask on each row in the above example:
-
-```js
-// Get current phones from an AJAX source, and add to member phones
-var memberId = 12;
-$.getJSON(site.uri.public + '/api/members/m/' + memberId)
-.done(function (data) {
-    $.each(data.phones, function (idx, phone) {
-        phoneCollection.ufCollection('addRow', phone);
-        // Set up an input mask on the 'js-input-phone' field in the row
-        phoneCollection.ufCollection('getLastRow').find('.js-input-phone').inputmask();
-    });
-});
+```vue
+<div v-if="items.length === 0" class="uk-alert-warning" uk-alert>
+  No items added yet. Click "Add Item" to get started.
+</div>
 ```
 
-#### addVirginRow
-
-_Adds a "virgin" row to an existing `ufCollection` widget, optionally prepopulated with some data._
-
-A virgin row is typically used in free-text mode, providing an intutitive way for users to create a new row in the collection without needing to explicitly click an "add" button. In free-text mode, when a virgin row is first touched by the user, it loses its "virgin" status and a new virgin row is added to the bottom of the collection. Thus, the last row in the collection will always be a virgin row.
-
-Generally speaking, since `ufCollection` handles all of this automatically for you, you won't need to call this method explicitly.
-
-#### deleteRow
-
-_Delete a row_.
-
-This method takes a jQuery selector containing the target row, and calls jQuery's `remove` method. Note that this method is automatically bound to a row's `js-delete-row` button when the row is added.
+### 3. Confirm Before Removing
 
-#### touchRow
+Prevent accidental deletions:
 
-_Remove a row's "virgin" status, shows the delete button (hidden for virgin rows), and add a new virgin row to the collection (if `useDropdown` is set to false)._
-
-`ufCollection` automatically binds this method to the `focus` event for all controls in a virgin row. However, we have exposed this method in case you wish to manually invoke it or bind it to other events.
-
-### Events
-
-#### rowAdd.ufCollection
-
-_Triggered when a new row is added to the collection._
-
-This event returns the newly added row, so you can access it in your handler:
-
-```js
-$('#myCollection').on('rowAdd.ufCollection', function (event, row) {
-    var phoneInput = $(row).find(".js-input-phone");
-    // Apply the inputmask plugin to the phone control in the new row
-    phoneInput.inputmask();
-});
+```typescript
+function removeItem(id: number) {
+  if (confirm('Are you sure you want to remove this item?')) {
+    remove(id)
+  }
+}
 ```
 
-#### rowDelete.ufCollection
-
-_Triggered when a row is removed from the collection._
-
-#### rowTouch.ufCollection
+### 4. Limit Collection Size
 
-_Triggered when any controls in a row are brought into focus._
+Prevent performance issues:
 
-This event returns the touched row, so you can access it in your handler.
-
-### Options
-
-#### useDropdown
-
-_Set to `true` for a collection where rows are added from a dropdown (default), or `false` for free-text input mode._
-
-#### dropdown
-
-_An object containing options to pass to the `select2` initialization._ Unfortunately, these options are only [partially documented](http://select2.github.io/options.html) in `select2`'s documentation website. For the purposes of `ufCollection`, the salient options are:
-
-- `ajax`: option for the AJAX request that fetches data to be loaded into the select options. The most important option is `url` but other useful options include:
-    - `url`: The url to submit the AJAX GET request.
-    - `cache`: Defaults to `true`, to cache AJAX results on the client side.
-    - `dataType`: The type of data returned by the AJAX request. Defaults to `json`.
-    - `delay`: Delay, in milliseconds, before resending the AJAX request when refreshing the select2 options during search. Defaults to `250`.
-    - `data`: The callback that `select2` uses to parse the current search query (`params.term`) before submitting the AJAX request. Defaults to:
-
-    ```js
-    function (params) {
-        return {
-            filters: {
-                info : params.term
-            }
-        };
-    }
-    ```
-
-    With the default callback, the resulting AJAX query URL will look something like `http://example.com/api/member/12/phones?filters[info]=something`, which is the standard format expected by data Sprunjers.
-
-    - `processResults`: The callback used to parse the data received in the response from the AJAX request.  Defaults to:
-
-    ```js
-    function (data, params) {
-        var suggestions = [];
-        // Process the data into dropdown options
-        if (data && data.rows) {
-            jQuery.each(data.rows, function(idx, row) {
-                suggestions.push(row);
-            });
-        }
-        return {
-            results: suggestions
-        };
-    }
-    ```
+```typescript
+const MAX_ITEMS = 10
 
-    Notice that this callback must always return a JSON object with a `results` key.
-
-- `placeholder`: The placeholder to display in the dropdown before a selection is made. Note that you need to have an empty `<option>` element in your `select` control for this to work. You may alternatively use the `data-placeholder` attribute on the `select` control itself. Defaults to "Item".
-- `selectOnClose`: Make a selection when the dropdown is closed for any reason (for example, even if the user clicks out of the box). Useful if your users are dumb and don't understand how select controls work. Defaults to `false`.
-- `theme`: A select2 [theme](http://select2.github.io/examples.html#themes-templating-responsive-design) to apply to the dropdown. Defaults to "default".
-- `width`: The width of the dropdown control relative to the parent element. Defaults to "100%".
-
-#### dropdownControl
-
-_A jQuery selector that indicates which element should be used as the dropdown for adding new items to the collection._
-
-Defaults to elements with the class `.js-select-new`.
-
-#### dropdownTemplate
-
-See the description [above](#dropdowntemplate).
-
-#### rowContainer
-
-_A jQuery selector that indicates the container element to which new rows should be added._
-
-Defaults to the first `tbody` element found in the widget container.
-
-#### rowTemplate
-
-See the description [above](#rowtemplate).
-
-#### transformDropdownSelection
-
-_A callback that transforms data from a selected dropdown item before it is passed to the Handlebars row template._
-
-This is useful when the format of the data API that feeds your dropdown control does not match the format required by your collection row template. Simply assign to this option a callback that takes the selected item object, clones it, and returns a transformed object:
-
-```js
-transformDropdownSelection: function (item) {
-    var transformed = $.extend(true, {}, item);
-    transformed['project_id'] = item.id;
-    transformed['id'] = null;
-    return transformed;
+function addItem() {
+  if (items.value.length >= MAX_ITEMS) {
+    alert(`Maximum ${MAX_ITEMS} items allowed`)
+    return
+  }
+  add()
 }
 ```
 
-> [!WARNING]
-> Notice that we use `$.extend(true, {}, item)` to [clone the object](https://stackoverflow.com/a/122704/2970321). If you instead were to manipulate the `item` object directly, it will change the actual object as it exists in the dropdown control, and likely break the dropdown in the process.
+## What's Next?
 
-#### DEBUG
+- **[Forms](client-side-code/components/forms)**: Submit collections as part of forms
+- **[Tables](client-side-code/components/tables)**: Display collections in tables
+- **[Alerts](client-side-code/components/alerts)**: Show feedback when modifying collections
 
-_Dump debugging information to the browser console._
+## Further Reading
 
-Defaults to `false`.
-
-> [!NOTE]
-> Your sprunje should return the id column as `id` in lowercase and not in uppercase for the uf-collection to function. If you have a column named `ID` in your database, you can use an alias while querying your sprunje collection.
-> You can write,
-> ```php
-> return $instance->newQuery()->select("Id AS id");
-> }
-> ```
-> in your sprunje file, or use any other method to alias the Id column. Keeping in your mind that your sprunje's baseQuery function should return an instance of a "queriable" class. See more [`Defining a Sprunje` Data Sprunjing](database/data-sprunjing#defining-a-sprunje)
+- [Vue 3 List Rendering](https://vuejs.org/guide/essentials/list.html)
+- [VueDraggable](https://github.com/SortableJS/vue.draggable.next)
+- [Vue Transitions](https://vuejs.org/guide/built-ins/transition.html)
diff --git a/app/pages/6.0/15.client-side-code/04.components/04.alerts/docs.md b/app/pages/6.0/15.client-side-code/04.components/04.alerts/docs.md
index 2338ca0a..d77a775a 100644
--- a/app/pages/6.0/15.client-side-code/04.components/04.alerts/docs.md
+++ b/app/pages/6.0/15.client-side-code/04.components/04.alerts/docs.md
@@ -1,106 +1,625 @@
 ---
-title: Alerts
-description: The `ufAlerts` plugin handles retrieving and rendering alerts and notifications from the alert stream.
-obsolete: true
+title: Alerts and Notifications
+description: Display user feedback with Vue 3 alert components and UIkit notifications
+wip: true
 ---
 
-For page loads, as well as requests made by most of UserFrosting's [client-side components](client-side-code/components), alerts are automatically fetched from the [alert stream](routes-and-controllers/alert-stream) and rendered for you. However, sometimes you will make your own custom AJAX requests that need to manually fetch and render alerts after the request is complete. To do this, you may create your own instance of the `ufAlerts` plugin.
+Providing feedback to users is essential for a good user experience. UserFrosting 6.0 uses Vue 3 components and UIkit notifications to display alerts, messages, and toasts throughout the application.
 
-## Initialization
+This guide covers different types of user feedback and how to implement them effectively.
 
-To initialize the `ufAlerts` plugin, simply call `.ufAlerts()` on the target element where alerts will be displayed. For example, you can do this in the `.fail()` callback for an AJAX request in jQuery:
+## UIkit Notifications
 
-```js
-$.ajax({
-    type: 'POST',
-    url: site.uri.public + '/api/owls',
-    data: {
-        species: 'Bubo'
+UIkit provides a built-in notification system for temporary messages:
+
+### Basic Usage
+
+```typescript
+import UIkit from 'uikit'
+
+// Simple notification
+UIkit.notification('User created successfully!')
+
+// With options
+UIkit.notification('Settings saved!', {
+  status: 'success',
+  pos: 'top-right',
+  timeout: 3000
+})
+
+// Different statuses
+UIkit.notification('Warning: This action cannot be undone', 'warning')
+UIkit.notification('Error: Failed to save', 'danger')
+UIkit.notification('Info: New features available', 'primary')
+```
+
+### Notification Options
+
+```typescript
+UIkit.notification(message, {
+  status: 'primary' | 'success' | 'warning' | 'danger',  // Style
+  pos: 'top-right' | 'top-center' | 'top-left' |         // Position
+       'bottom-right' | 'bottom-center' | 'bottom-left',
+  timeout: 5000,        // Auto-close after ms (0 = no auto-close)
+  group: null,          // Group name to stack related notifications
+  closeButton: true     // Show close button
+})
+```
+
+## Vue Alert Component
+
+Create a reusable alert component for persistent messages:
+
+**AlertBox.vue**:
+```vue
+<template>
+  <div 
+    v-if="visible"
+    class="uk-alert"
+    :class="alertClass"
+    uk-alert
+  >
+    <a class="uk-alert-close" uk-close @click="close"></a>
+    <h3 v-if="title">{{ title }}</h3>
+    <p>{{ message }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+interface Props {
+  type?: 'primary' | 'success' | 'warning' | 'danger'
+  title?: string
+  message: string
+  closeable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  closeable: true
+})
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const visible = ref(true)
+
+const alertClass = computed(() => `uk-alert-${props.type}`)
+
+function close() {
+  visible.value = false
+  emit('close')
+}
+</script>
+```
+
+**Usage**:
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import AlertBox from './components/AlertBox.vue'
+
+const showAlert = ref(true)
+</script>
+
+<template>
+  <AlertBox
+    v-if="showAlert"
+    type="success"
+    title="Success!"
+    message="Your profile has been updated."
+    @close="showAlert = false"
+  />
+</template>
+```
+
+## Alert Stream Integration
+
+UserFrosting's alert stream system sends messages from the server. Here's how to fetch and display them:
+
+### Fetching Alerts
+
+```typescript
+import axios from 'axios'
+import UIkit from 'uikit'
+
+interface Alert {
+  type: 'success' | 'danger' | 'warning' | 'info'
+  message: string
+}
+
+async function fetchAndDisplayAlerts() {
+  try {
+    const response = await axios.get<Alert[]>(
+      `${site.uri.public}/alerts`
+    )
+    
+    response.data.forEach(alert => {
+      UIkit.notification(alert.message, {
+        status: alert.type === 'danger' ? 'danger' : alert.type,
+        timeout: 5000
+      })
+    })
+  } catch (error) {
+    console.error('Failed to fetch alerts:', error)
+  }
+}
+```
+
+### Alert Composable
+
+Create a composable for managing alerts:
+
+**composables/useAlerts.ts**:
+```typescript
+import { ref, Ref } from 'vue'
+import axios from 'axios'
+import UIkit from 'uikit'
+
+interface Alert {
+  id: string
+  type: 'success' | 'danger' | 'warning' | 'info'
+  message: string
+  title?: string
+}
+
+export function useAlerts() {
+  const alerts: Ref<Alert[]> = ref([])
+  const loading = ref(false)
+
+  async function fetchAlerts() {
+    loading.value = true
+    
+    try {
+      const response = await axios.get(`${site.uri.public}/alerts`)
+      alerts.value = response.data
+      
+      // Display as UIkit notifications
+      response.data.forEach((alert: Alert) => {
+        showNotification(alert.message, alert.type)
+      })
+    } catch (error) {
+      console.error('Failed to fetch alerts:', error)
+    } finally {
+      loading.value = false
     }
-}).fail(function (jqXHR) {
-    // Display errors on failure
-    var debugAjax = (typeof site !== "undefined") && site.debug.ajax;
-
-    if (debugAjax && jqXHR.responseText) {
-        document.write(jqXHR.responseText);
-        document.close();
-    } else {
-        // Destroy any previous instance
-        $("#alerts-page").ufAlerts('destroy');
-        // Create new instance of ufAlerts
-        $("#alerts-page").ufAlerts().ufAlerts('fetch').ufAlerts('render');
+  }
+
+  function showNotification(
+    message: string, 
+    type: 'success' | 'danger' | 'warning' | 'info' = 'info'
+  ) {
+    UIkit.notification(message, {
+      status: type === 'danger' ? 'danger' : type,
+      pos: 'top-right',
+      timeout: 5000
+    })
+  }
+
+  function showSuccess(message: string) {
+    showNotification(message, 'success')
+  }
+
+  function showError(message: string) {
+    showNotification(message, 'danger')
+  }
+
+  function showWarning(message: string) {
+    showNotification(message, 'warning')
+  }
+
+  function showInfo(message: string) {
+    showNotification(message, 'info')
+  }
+
+  function add(alert: Omit<Alert, 'id'>) {
+    const newAlert: Alert = {
+      ...alert,
+      id: Date.now().toString() + Math.random()
     }
-});
+    alerts.value.push(newAlert)
+    showNotification(alert.message, alert.type)
+  }
+
+  function remove(id: string) {
+    alerts.value = alerts.value.filter(alert => alert.id !== id)
+  }
+
+  function clear() {
+    alerts.value = []
+  }
+
+  return {
+    alerts,
+    loading,
+    fetchAlerts,
+    showNotification,
+    showSuccess,
+    showError,
+    showWarning,
+    showInfo,
+    add,
+    remove,
+    clear
+  }
+}
+```
+
+**Usage in component**:
+```vue
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useAlerts } from '@/composables/useAlerts'
+import axios from 'axios'
+
+const { showSuccess, showError, fetchAlerts } = useAlerts()
+
+onMounted(() => {
+  // Fetch alerts on component mount
+  fetchAlerts()
+})
+
+async function saveSettings() {
+  try {
+    await axios.post('/api/settings', { /* data */ })
+    showSuccess('Settings saved successfully!')
+  } catch (error) {
+    showError('Failed to save settings')
+  }
+}
+</script>
+```
+
+## Toast Notifications Component
+
+For more advanced toast notifications, create a dedicated component:
+
+**ToastManager.vue**:
+```vue
+<template>
+  <teleport to="body">
+    <div class="toast-container">
+      <transition-group name="toast">
+        <div
+          v-for="toast in toasts"
+          :key="toast.id"
+          class="toast uk-alert"
+          :class="`uk-alert-${toast.type}`"
+        >
+          <a class="uk-alert-close" uk-close @click="removeToast(toast.id)"></a>
+          <p>{{ toast.message }}</p>
+        </div>
+      </transition-group>
+    </div>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Toast {
+  id: string
+  type: 'success' | 'danger' | 'warning' | 'info'
+  message: string
+  duration: number
+}
+
+const toasts = ref<Toast[]>([])
+
+function addToast(
+  message: string,
+  type: Toast['type'] = 'info',
+  duration = 5000
+) {
+  const id = Date.now().toString() + Math.random()
+  
+  toasts.value.push({ id, message, type, duration })
+  
+  if (duration > 0) {
+    setTimeout(() => removeToast(id), duration)
+  }
+  
+  return id
+}
+
+function removeToast(id: string) {
+  toasts.value = toasts.value.filter(toast => toast.id !== id)
+}
+
+defineExpose({
+  addToast,
+  removeToast
+})
+</script>
+
+<style scoped>
+.toast-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 9999;
+  max-width: 400px;
+}
+
+.toast {
+  margin-bottom: 10px;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+}
+
+.toast-enter-active,
+.toast-leave-active {
+  transition: all 0.3s ease;
+}
+
+.toast-enter-from {
+  opacity: 0;
+  transform: translateX(50px);
+}
+
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(50px);
+}
+</style>
 ```
 
-The `fetch` method will retrieve any alerts that were added to the message stream, via the `/alerts` route. The `render` method will then display them in the element that you initialized `ufAlerts` on.
+**App-level usage**:
+```typescript
+// main.ts
+import { createApp } from 'vue'
+import ToastManager from './components/ToastManager.vue'
 
-## Methods
+const app = createApp({})
 
-Methods can be called after initialization by passing the method name as a string to subsequent calls of `ufAlerts`:
+// Make toast manager available globally
+const toastContainer = document.createElement('div')
+document.body.appendChild(toastContainer)
 
-```js
-$(el).ufAlerts('<method name>');
+const toastApp = createApp(ToastManager)
+const toastInstance = toastApp.mount(toastContainer)
+
+// Make it accessible globally
+app.config.globalProperties.$toast = toastInstance
+
+app.mount('#app')
+```
+
+## Error Handling
+
+Display errors from AJAX requests:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import axios, { AxiosError } from 'axios'
+import { useAlerts } from '@/composables/useAlerts'
+
+const { showError, showSuccess } = useAlerts()
+
+async function performAction() {
+  try {
+    await axios.post('/api/action')
+    showSuccess('Action completed!')
+    
+  } catch (error) {
+    handleError(error as AxiosError)
+  }
+}
+
+function handleError(error: AxiosError) {
+  if (error.response) {
+    // Server responded with error status
+    const message = error.response.data?.message || 'An error occurred'
+    showError(message)
+    
+    // Handle validation errors
+    if (error.response.status === 422 && error.response.data?.errors) {
+      Object.values(error.response.data.errors).forEach((msgs: any) => {
+        if (Array.isArray(msgs)) {
+          msgs.forEach(msg => showError(msg))
+        } else {
+          showError(msgs)
+        }
+      })
+    }
+  } else if (error.request) {
+    // Request made but no response
+    showError('Network error: Could not reach server')
+  } else {
+    // Something else went wrong
+    showError('An unexpected error occurred')
+  }
+}
+</script>
+```
+
+## Loading States with Alerts
+
+Show loading indicators and completion messages:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import UIkit from 'uikit'
+
+const isLoading = ref(false)
+
+async function performLongOperation() {
+  isLoading.value = true
+  
+  // Show loading notification
+  const loadingNotification = UIkit.notification(
+    'Processing... Please wait',
+    { 
+      status: 'primary',
+      timeout: 0  // Don't auto-close
+    }
+  )
+  
+  try {
+    await longRunningTask()
+    
+    // Close loading, show success
+    loadingNotification.close()
+    UIkit.notification('Operation completed!', 'success')
+    
+  } catch (error) {
+    loadingNotification.close()
+    UIkit.notification('Operation failed', 'danger')
+    
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>
 ```
 
-### `fetch`
+## Confirmation Dialogs
 
-Fetch alerts from the message stream resource url.
+Use UIkit modals for confirmations:
 
-### `render`
+```vue
+<script setup lang="ts">
+import UIkit from 'uikit'
 
-Render all alert messages in the initialized element.
+async function deleteUser(userId: number) {
+  // UIkit doesn't have built-in confirm, use native or create modal
+  const confirmed = confirm('Are you sure you want to delete this user?')
+  
+  if (confirmed) {
+    try {
+      await axios.delete(`/api/users/${userId}`)
+      UIkit.notification('User deleted', 'success')
+    } catch (error) {
+      UIkit.notification('Failed to delete user', 'danger')
+    }
+  }
+}
+
+// Or create a custom modal component
+function showConfirmModal(message: string, onConfirm: () => void) {
+  // Create modal element
+  const modal = document.createElement('div')
+  modal.innerHTML = `
+    <div id="confirm-modal" uk-modal>
+      <div class="uk-modal-dialog uk-modal-body">
+        <h2 class="uk-modal-title">Confirm</h2>
+        <p>${message}</p>
+        <p class="uk-text-right">
+          <button class="uk-button uk-button-default uk-modal-close">Cancel</button>
+          <button class="uk-button uk-button-primary" id="confirm-btn">Confirm</button>
+        </p>
+      </div>
+    </div>
+  `
+  document.body.appendChild(modal)
+  
+  const confirmBtn = document.getElementById('confirm-btn')
+  confirmBtn?.addEventListener('click', () => {
+    onConfirm()
+    UIkit.modal('#confirm-modal').hide()
+    document.body.removeChild(modal)
+  })
+  
+  UIkit.modal('#confirm-modal').show()
+}
+</script>
+```
 
-Alerts are rendered using a custom [Handlebars template](client-side-code/client-side-templating). The default template is located in `core/templates/pages/partials/alerts.html.twig`, and uses Bootstrap 3's [alert](https://getbootstrap.com/docs/3.3/components/#alerts) component to render each message. This partial template is automatically included in the `core/templates/pages/abstract/base.html.twig` template, in the `uf_alerts_template` block.
+## Best Practices
 
-If you wish you may include your own custom Handlebars template instead, overriding the `uf_alerts_template` block and and specifying its `id` with the `alertTemplateId` option when you initialize `ufAlerts`.
+### 1. Use Appropriate Alert Types
 
-### `push`
+Match the alert type to the message:
+- **Success**: Completed actions, confirmations
+- **Danger/Error**: Failures, critical issues
+- **Warning**: Cautions, reversible actions
+- **Info**: General information, tips
 
-This method allows you to add additional alert messages in your client-side code. They will be rendered just like any messages that were retrieved with `fetch` the next time `render` is called:
+### 2. Auto-Dismiss Non-Critical Alerts
 
-```js
-$("#alerts-page").ufAlerts('push', 'danger', 'You messed up!').ufAlerts('render');
+Success messages should auto-dismiss:
+```typescript
+UIkit.notification('Saved!', { 
+  status: 'success', 
+  timeout: 3000 
+})
 ```
 
-### `clear`
+Errors might need manual dismissal:
+```typescript
+UIkit.notification('Critical error occurred', {
+  status: 'danger',
+  timeout: 0  // Requires manual close
+})
+```
 
-This method clears the internally loaded collection of alerts, as well as their rendered HTML from the initialized element:
+### 3. Position Appropriately
 
-```js
-$("#alerts-page").ufAlerts('clear');
+Top-right is standard for notifications:
+```typescript
+UIkit.notification(message, { pos: 'top-right' })
 ```
 
-### `destroy`
+Use top-center for important announcements.
+
+### 4. Avoid Alert Spam
 
-Destroy the `ufAlerts` instance on a DOM element:
+Don't show multiple alerts for the same action:
 
-```js
-$("#alerts-page").ufAlerts('destroy');
+```typescript
+// ❌ Bad: Shows many alerts
+errors.forEach(error => showError(error))
+
+// ✅ Good: Combine into one message
+showError(`${errors.length} errors occurred`)
 ```
 
-## Options
+### 5. Provide Actionable Messages
 
-### `url`
+Be specific about what happened and what to do:
 
-The absolute URL from which to fetch flash alerts. Defaults to `site.uri.public + '/alerts'`.
+✅ **Good**: "Failed to save. Please check your internet connection and try again."  
+❌ **Bad**: "Error occurred"
 
-### `scrollToTop`
+## Integration with Forms
 
-Whether to automatically scroll back to the top of the page after rendering alerts. Defaults to `true`.
+Automatically show alerts after form submission:
 
-### `scrollWhenVisible`
+```vue
+<script setup lang="ts">
+import { useAlerts } from '@/composables/useAlerts'
+import { useForm } from '@/composables/useForm'
 
-Whether to automatically scroll back to the top of the page even if the alerts are already visible in the current viewport. Only used when `scrollToTop` is `true`. Defaults to `false`.
+const { showSuccess, showError } = useAlerts()
 
-### `agglomerate`
+const { form, submit } = useForm({
+  initialData: { name: '', email: '' },
+  onSuccess: () => {
+    showSuccess('Form submitted successfully!')
+  },
+  onError: (error) => {
+    showError(error.response?.data?.message || 'Submission failed')
+  }
+})
 
-Set to true to render all alerts in a single bulleted list (`ul/li`), applying styling based on the highest-priority alert being rendered. Defaults to `false`.
+async function handleSubmit() {
+  await submit('/api/endpoint')
+}
+</script>
+```
 
-### `alertMessageClass`
+## What's Next?
 
-The CSS class(es) to be applied to each alert message. Defaults to `uf-alert-message`.
+- **[Forms](client-side-code/components/forms)**: Build validated forms that show alerts
+- **[Tables](client-side-code/components/tables)**: Display data with loading states
+- **[Collections](client-side-code/components/collections)**: Manage lists with feedback
 
-### `alertTemplateId`
+## Further Reading
 
-The id of the Handlebars alert template to use when rendering alerts. Defaults to `uf-alert-template`.
+- [UIkit Notification Component](https://getuikit.com/docs/notification)
+- [UIkit Alert Component](https://getuikit.com/docs/alert)
+- [Vue 3 Teleport](https://vuejs.org/guide/built-ins/teleport.html)
+- [Vue 3 Transitions](https://vuejs.org/guide/built-ins/transition.html)
diff --git a/app/pages/6.0/15.client-side-code/04.components/docs.md b/app/pages/6.0/15.client-side-code/04.components/docs.md
index 3cc98a6e..09546b6e 100644
--- a/app/pages/6.0/15.client-side-code/04.components/docs.md
+++ b/app/pages/6.0/15.client-side-code/04.components/docs.md
@@ -1,75 +1,280 @@
 ---
-title: Components
-description: UserFrosting comes with a number of custom jQuery plugins that simplify the interactions between the client-side components and the backend.
-obsolete: true
+title: Common UI Components
+description: Reusable Vue 3 components for building interactive user interfaces in UserFrosting
+wip: true
 ---
 
-UserFrosting also comes with a number of [custom jQuery plugins](client-side-code/components) that simplify the interactions between the client-side components and the backend. These can all be found in the `core` Sprinkle, under `assets/local/core/js/`.
+UserFrosting 6.0 provides patterns and examples for building common UI components with Vue 3. This section covers the most frequently used interactive elements in web applications.
 
-### ufAlerts
+## Component Categories
 
-Fetches and renders alerts from the [alert stream](routes-and-controllers/alert-stream). See the section on [alerts](client-side-code/components/alerts) for more information on using this plugin.
+### Forms
 
-### ufCollection
+Handle user input with validated, AJAX-powered forms. Learn how to:
+- Build reactive forms with two-way data binding
+- Implement client and server-side validation
+- Submit data with proper CSRF protection
+- Display loading states and error messages
+- Create reusable form composables
 
-A client-side widget that allows you to easily associate related entities in a one-to-many or many-to-many relationship by selecting them from a dropdown menu.
+**[Learn more about Forms →](client-side-code/components/forms)**
 
-For example, both the "user roles" and "role permissions" interfaces use this plugin:
+### Tables
 
-![ufCollection widget as used for the "user role" management interface.](images/uf-collection.png)
+Display and manipulate collections of data with sortable, filterable, paginated tables:
+- Client-side sorting and filtering
+- Server-side pagination with Sprunjes
+- Integration with TanStack Table library
+- Reusable table composables
+- Loading states and empty states
 
-See the documentation on [collections](client-side-code/components/collections) for more information on using this plugin.
+**[Learn more about Tables →](client-side-code/components/tables)**
 
-### ufCopy
+### Collections
 
-Helper to generate a tooltip alert for clipboard.js.
+Manage dynamic lists of items where users can add, remove, and reorder entries:
+- Dynamic form fields (add/remove)
+- Complex collection items with multiple fields
+- Drag-and-drop reordering
+- Validation for collection items
+- Server integration patterns
 
-![ufCopy widget.](images/uf-copy.png)
+**[Learn more about Collections →](client-side-code/components/collections)**
 
-**Markup:**
+### Alerts and Notifications
 
+Provide user feedback through alerts, notifications, and toast messages:
+- UIkit notification system
+- Alert stream integration
+- Reusable alert composables
+- Error handling patterns
+- Confirmation dialogs
+
+**[Learn more about Alerts →](client-side-code/components/alerts)**
+
+## Component Patterns
+
+### Reusability
+
+Build components that can be reused across your application:
+
+```vue
+<!-- Reusable Button Component -->
+<script setup lang="ts">
+interface Props {
+  variant?: 'primary' | 'default' | 'danger'
+  size?: 'small' | 'default' | 'large'
+  disabled?: boolean
+  loading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: 'default',
+  disabled: false,
+  loading: false
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+</script>
+
+<template>
+  <button 
+    :class="[
+      'uk-button',
+      `uk-button-${variant}`,
+      `uk-button-${size}`
+    ]"
+    :disabled="disabled || loading"
+    @click="emit('click', $event)"
+  >
+    <span v-if="loading" uk-spinner="ratio: 0.5"></span>
+    <slot v-else />
+  </button>
+</template>
+```
+
+### Composition
+
+Combine smaller components to build complex UIs:
+
+```vue
+<template>
+  <UserForm>
+    <FormField label="Username" v-model="user.username" />
+    <FormField label="Email" v-model="user.email" type="email" />
+    <FormActions>
+      <Button variant="primary" @click="save">Save</Button>
+      <Button @click="cancel">Cancel</Button>
+    </FormActions>
+  </UserForm>
+</template>
+```
+
+### Composables
+
+Extract and share logic across components:
+
+```typescript
+// composables/useForm.ts
+export function useForm(initialData, onSubmit) {
+  const form = ref({ ...initialData })
+  const errors = ref({})
+  const isSubmitting = ref(false)
+  
+  async function submit() {
+    isSubmitting.value = true
+    try {
+      await onSubmit(form.value)
+    } catch (e) {
+      errors.value = e.response?.data?.errors || {}
+    } finally {
+      isSubmitting.value = false
+    }
+  }
+  
+  return { form, errors, isSubmitting, submit }
+}
+```
+
+## UIkit Integration
+
+UserFrosting uses [UIkit](https://getuikit.com/) for styling. Common UIkit components you'll use:
+
+### Buttons
+```html
+<button class="uk-button uk-button-primary">Primary</button>
+<button class="uk-button uk-button-default">Default</button>
+<button class="uk-button uk-button-danger">Danger</button>
+```
+
+### Cards
 ```html
-<div class="js-copy-container">
-    <span class="js-copy-target">{{row.email}}</span>
-    <button class="btn btn-xs js-copy-trigger"><i class="fa fa-copy"></i></button>
+<div class="uk-card uk-card-default uk-card-body">
+  <h3 class="uk-card-title">Title</h3>
+  <p>Content</p>
 </div>
 ```
 
-### ufForm
+### Modals
+```html
+<div id="my-modal" uk-modal>
+  <div class="uk-modal-dialog uk-modal-body">
+    <h2 class="uk-modal-title">Title</h2>
+    <p>Modal content</p>
+  </div>
+</div>
+```
+
+**Open programmatically**:
+```typescript
+import UIkit from 'uikit'
+
+UIkit.modal('#my-modal').show()
+```
+
+### Dropdowns
+```html
+<button class="uk-button uk-button-default" type="button">
+  Menu
+</button>
+<div uk-dropdown>
+  <ul class="uk-nav uk-dropdown-nav">
+    <li><a href="#">Item 1</a></li>
+    <li><a href="#">Item 2</a></li>
+  </ul>
+</div>
+```
+
+## Best Practices
+
+### 1. Component Organization
+
+Organize components by feature or function:
+
+```
+components/
+├── common/           # Reusable across app
+│   ├── Button.vue
+│   ├── Input.vue
+│   └── Modal.vue
+├── user/            # User-related
+│   ├── UserCard.vue
+│   ├── UserForm.vue
+│   └── UserTable.vue
+└── layout/          # Layout components
+    ├── Header.vue
+    ├── Sidebar.vue
+    └── Footer.vue
+```
+
+### 2. Props and Events
+
+Follow Vue's data flow pattern:
+- **Props down**: Parent passes data to child
+- **Events up**: Child notifies parent of changes
+
+```vue
+<!-- Parent -->
+<UserCard :user="user" @edit="handleEdit" @delete="handleDelete" />
+
+<!-- Child -->
+<script setup>
+const props = defineProps(['user'])
+const emit = defineEmits(['edit', 'delete'])
+</script>
+```
 
-A convenient wrapper for AJAX form submission. Handles validation, loading icon during the submission process, and automatically fetching and displaying error messages after a failed submission.
+### 3. Type Safety
 
-See the section on [forms](client-side-code/components/forms) for more information on using this plugin.
+Use TypeScript for better developer experience:
 
-### ufModal
+```typescript
+interface User {
+  id: number
+  username: string
+  email: string
+}
 
-Renders and displays modal windows that dynamically fetch their content from a specified URL. Very useful for pop-up forms and dialog boxes.
+const props = defineProps<{
+  user: User
+  editable?: boolean
+}>()
+```
 
-```js
-// Fetch and launch the modal
-$('body').ufModal({
-    // URL that serves the modal HTML
-    sourceUrl: site.uri.public + '/modals/users/roles',
-    // Additional request parameters
-    ajaxParams: {
-        user_name: userName
-    },
-    // Target element to display any errors generated by the modal request
-    msgTarget: $('#alerts-page')
-});
+### 4. Error Handling
 
-// Additional code to run after the modal has been retrieved and displayed.
-// For example, setting up a form submission:
-$('body').on('renderSuccess.ufModal', function (data) {
-    var modal = $(this).ufModal('getModal');
-    var form = modal.find('.js-form');
+Always handle errors gracefully:
 
-    ...
-});
+```typescript
+try {
+  await performAction()
+  showSuccess('Action completed')
+} catch (error) {
+  showError('Action failed')
+  console.error(error)
+}
 ```
 
-### ufTable
+## What's Next?
+
+Dive into specific component types:
+
+- **[Forms](client-side-code/components/forms)** - User input and validation
+- **[Tables](client-side-code/components/tables)** - Data display and manipulation  
+- **[Collections](client-side-code/components/collections)** - Dynamic lists
+- **[Alerts](client-side-code/components/alerts)** - User feedback
+
+Or explore foundational concepts:
+
+- **[Vue Components](client-side-code/vue-components)** - Vue 3 basics
+- **[Exporting Variables](client-side-code/exporting-variables)** - Data passing
+- **[Asset Management](asset-management)** - Building and bundling
 
-A wrapper for [Tablesorter](https://mottie.github.io/tablesorter/docs/) that automatically fetches JSON data from a specified API endpoint, and dynamically builds paginated, sorted, filtered views on the fly. Very useful as a quick-and-easy way to get data from your database to the client.
+## Further Reading
 
-See the section on [tables](client-side-code/components/tables) for more information on using this plugin.
+- [Vue 3 Component Basics](https://vuejs.org/guide/essentials/component-basics.html)
+- [UIkit Components](https://getuikit.com/docs/introduction)
+- [TypeScript with Vue](https://vuejs.org/guide/typescript/overview.html)

From a752acdeb5462d5f6c5eb01469e589c183dad1be Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 31 Jan 2026 23:16:40 +0000
Subject: [PATCH 06/13] Update all remaining chapters from obsolete to wip
 status

Co-authored-by: lcharette <2566513+lcharette@users.noreply.github.com>
---
 .../6.0/02.background/02.the-client-server-conversation/docs.md | 2 +-
 .../6.0/02.background/03.develop-locally-serve-globally/docs.md | 2 +-
 app/pages/6.0/02.background/04.dont-reinvent-the-wheel/docs.md  | 2 +-
 .../05.security/01.server-misconfiguration/docs.md              | 2 +-
 app/pages/6.0/02.background/05.security/docs.md                 | 2 +-
 app/pages/6.0/02.background/06.seo/docs.md                      | 2 +-
 app/pages/6.0/03.structure/01.introduction/docs.md              | 2 +-
 app/pages/6.0/03.structure/02.dependencies/docs.md              | 2 +-
 app/pages/6.0/03.structure/03.framework/docs.md                 | 2 +-
 app/pages/6.0/03.structure/04.sprinkles/docs.md                 | 2 +-
 app/pages/6.0/03.structure/chapter.md                           | 2 +-
 .../6.0/04.installation/01.requirements/01.basic-stack/docs.md  | 2 +-
 .../01.requirements/02.essential-tools-for-php/docs.md          | 2 +-
 app/pages/6.0/04.installation/01.requirements/chapter.md        | 2 +-
 .../02.environment/01.native/01.requirements/docs.md            | 2 +-
 .../04.installation/02.environment/01.native/02.install/docs.md | 2 +-
 app/pages/6.0/04.installation/02.environment/01.native/docs.md  | 2 +-
 app/pages/6.0/04.installation/02.environment/02.docker/docs.md  | 2 +-
 app/pages/6.0/04.installation/02.environment/docs.md            | 2 +-
 app/pages/6.0/04.installation/chapter.md                        | 2 +-
 app/pages/6.0/05.troubleshooting/01.debugging/docs.md           | 2 +-
 app/pages/6.0/05.troubleshooting/02.getting-help/docs.md        | 2 +-
 app/pages/6.0/05.troubleshooting/03.common-problems/docs.md     | 2 +-
 app/pages/6.0/05.troubleshooting/chapter.md                     | 2 +-
 app/pages/6.0/06.sprinkles/01.sprinkles/docs.md                 | 2 +-
 app/pages/6.0/06.sprinkles/02.content/docs.md                   | 2 +-
 app/pages/6.0/06.sprinkles/03.recipe/docs.md                    | 2 +-
 app/pages/6.0/06.sprinkles/04.customize/docs.md                 | 2 +-
 app/pages/6.0/06.sprinkles/05.community/docs.md                 | 2 +-
 app/pages/6.0/06.sprinkles/chapter.md                           | 2 +-
 app/pages/6.0/07.dependency-injection/01.concept/docs.md        | 2 +-
 .../6.0/07.dependency-injection/02.the-di-container/docs.md     | 2 +-
 .../6.0/07.dependency-injection/03.default-services/docs.md     | 2 +-
 .../6.0/07.dependency-injection/04.adding-services/docs.md      | 2 +-
 .../6.0/07.dependency-injection/05.extending-services/docs.md   | 2 +-
 app/pages/6.0/07.dependency-injection/chapter.md                | 2 +-
 app/pages/6.0/08.routes-and-controllers/01.introduction/docs.md | 2 +-
 .../02.REST/01.restful-endpoints/docs.md                        | 2 +-
 .../02.REST/02.restful-responses/docs.md                        | 2 +-
 app/pages/6.0/08.routes-and-controllers/02.REST/docs.md         | 2 +-
 .../6.0/08.routes-and-controllers/03.front-controller/docs.md   | 2 +-
 .../6.0/08.routes-and-controllers/04.controller-classes/docs.md | 2 +-
 .../6.0/08.routes-and-controllers/05.registering-routes/docs.md | 2 +-
 .../06.client-input/01.validation/docs.md                       | 2 +-
 .../06.client-input/02.csrf-guard/docs.md                       | 2 +-
 .../06.client-input/03.throttle/docs.md                         | 2 +-
 .../08.routes-and-controllers/06.client-input/04.ajax/docs.md   | 2 +-
 app/pages/6.0/08.routes-and-controllers/06.client-input/docs.md | 2 +-
 app/pages/6.0/08.routes-and-controllers/chapter.md              | 2 +-
 app/pages/6.0/09.configuration/01.environment-vars/docs.md      | 2 +-
 app/pages/6.0/09.configuration/02.config-files/docs.md          | 2 +-
 app/pages/6.0/09.configuration/chapter.md                       | 2 +-
 app/pages/6.0/10.users/01.user-accounts/docs.md                 | 2 +-
 app/pages/6.0/10.users/02.access-control/docs.md                | 2 +-
 app/pages/6.0/10.users/03.groups/docs.md                        | 2 +-
 app/pages/6.0/10.users/04.activity-logging/docs.md              | 2 +-
 app/pages/6.0/10.users/chapter.md                               | 2 +-
 app/pages/6.0/11.cli/01.commands/docs.md                        | 2 +-
 app/pages/6.0/11.cli/02.custom-commands/docs.md                 | 2 +-
 app/pages/6.0/11.cli/03.extending-commands/docs.md              | 2 +-
 app/pages/6.0/11.cli/chapter.md                                 | 2 +-
 app/pages/6.0/12.templating-with-twig/01.overview/docs.md       | 2 +-
 .../6.0/12.templating-with-twig/02.sprinkle-templates/docs.md   | 2 +-
 .../12.templating-with-twig/03.filters-and-functions/docs.md    | 2 +-
 app/pages/6.0/12.templating-with-twig/chapter.md                | 2 +-
 app/pages/6.0/13.asset-management/03.vite-configuration/docs.md | 2 +-
 app/pages/6.0/13.asset-management/04.vue-framework/docs.md      | 2 +-
 app/pages/6.0/13.asset-management/05.using-assets/docs.md       | 2 +-
 .../13.asset-management/06.advanced/01.sprinkle-assets/docs.md  | 2 +-
 .../6.0/13.asset-management/06.advanced/02.migration/docs.md    | 2 +-
 app/pages/6.0/13.asset-management/06.advanced/docs.md           | 2 +-
 app/pages/6.0/14.database/01.overview/docs.md                   | 2 +-
 app/pages/6.0/14.database/02.default-tables/docs.md             | 2 +-
 app/pages/6.0/14.database/03.migrations/docs.md                 | 2 +-
 app/pages/6.0/14.database/04.seeding/docs.md                    | 2 +-
 app/pages/6.0/14.database/05.data-sprunjing/docs.md             | 2 +-
 app/pages/6.0/14.database/chapter.md                            | 2 +-
 app/pages/6.0/16.mail/01.the-mailer-service/docs.md             | 2 +-
 app/pages/6.0/16.mail/chapter.md                                | 2 +-
 app/pages/6.0/17.i18n/01.introduction/docs.md                   | 2 +-
 app/pages/6.0/17.i18n/02.site-locale/docs.md                    | 2 +-
 app/pages/6.0/17.i18n/03.translator/docs.md                     | 2 +-
 app/pages/6.0/17.i18n/04.custom-locale/docs.md                  | 2 +-
 app/pages/6.0/17.i18n/chapter.md                                | 2 +-
 app/pages/6.0/18.advanced/01.custom-models/docs.md              | 2 +-
 app/pages/6.0/18.advanced/03.application-lifecycle/docs.md      | 2 +-
 app/pages/6.0/18.advanced/04.error-handling/docs.md             | 2 +-
 app/pages/6.0/18.advanced/05.sessions/docs.md                   | 2 +-
 app/pages/6.0/18.advanced/06.caching/01.intro/docs.md           | 2 +-
 app/pages/6.0/18.advanced/06.caching/02.usage/docs.md           | 2 +-
 app/pages/6.0/18.advanced/06.caching/docs.md                    | 2 +-
 app/pages/6.0/18.advanced/07.alert-stream/docs.md               | 2 +-
 app/pages/6.0/18.advanced/08.locator/docs.md                    | 2 +-
 app/pages/6.0/18.advanced/09.logging/docs.md                    | 2 +-
 app/pages/6.0/18.advanced/10.storage/docs.md                    | 2 +-
 app/pages/6.0/18.advanced/11.events/docs.md                     | 2 +-
 app/pages/6.0/18.advanced/12.middlewares/docs.md                | 2 +-
 app/pages/6.0/18.advanced/chapter.md                            | 2 +-
 app/pages/6.0/19.testing/01.why-test/docs.md                    | 2 +-
 app/pages/6.0/19.testing/02.running-tests/docs.md               | 2 +-
 app/pages/6.0/19.testing/03.writting-tests/01.testcase/docs.md  | 2 +-
 app/pages/6.0/19.testing/03.writting-tests/02.Traits/docs.md    | 2 +-
 app/pages/6.0/19.testing/03.writting-tests/03.Factories/docs.md | 2 +-
 app/pages/6.0/19.testing/03.writting-tests/docs.md              | 2 +-
 app/pages/6.0/19.testing/chapter.md                             | 2 +-
 app/pages/6.0/20.recipes/01.creating-a-new-page/docs.md         | 2 +-
 app/pages/6.0/20.recipes/02.extending-the-user-model/docs.md    | 2 +-
 app/pages/6.0/20.recipes/03.extending-template/docs.md          | 2 +-
 app/pages/6.0/20.recipes/04.custom-login-page/docs.md           | 2 +-
 app/pages/6.0/20.recipes/05.changing-user-permissions/docs.md   | 2 +-
 app/pages/6.0/20.recipes/06.external-js/docs.md                 | 2 +-
 .../6.0/20.recipes/07.advanced-tutorial/01.base-setup/docs.md   | 2 +-
 .../6.0/20.recipes/07.advanced-tutorial/02.database/docs.md     | 2 +-
 .../6.0/20.recipes/07.advanced-tutorial/03.adding-menu/docs.md  | 2 +-
 .../07.advanced-tutorial/04.custom-permissions/docs.md          | 2 +-
 .../6.0/20.recipes/07.advanced-tutorial/05.localization/docs.md | 2 +-
 .../20.recipes/07.advanced-tutorial/06.custom-namespace/docs.md | 2 +-
 .../20.recipes/07.advanced-tutorial/07.going-further/docs.md    | 2 +-
 app/pages/6.0/20.recipes/07.advanced-tutorial/chapter.md        | 2 +-
 app/pages/6.0/20.recipes/chapter.md                             | 2 +-
 app/pages/6.0/21.going-live/01.hosting/docs.md                  | 2 +-
 app/pages/6.0/21.going-live/02.mail-providers/docs.md           | 2 +-
 .../03.vps-production-environment/01.server-setup/docs.md       | 2 +-
 .../03.vps-production-environment/02.git-for-deployment/docs.md | 2 +-
 .../03.vps-production-environment/03.application-setup/docs.md  | 2 +-
 .../21.going-live/03.vps-production-environment/04.ssl/docs.md  | 2 +-
 .../05.additional-recommendations/docs.md                       | 2 +-
 .../6.0/21.going-live/03.vps-production-environment/docs.md     | 2 +-
 app/pages/6.0/21.going-live/04.backup/docs.md                   | 2 +-
 app/pages/6.0/21.going-live/05.unix-primer-ubuntu/docs.md       | 2 +-
 app/pages/6.0/21.going-live/chapter.md                          | 2 +-
 .../6.0/23.contributing/01.supporting-userfrosting/docs.md      | 2 +-
 app/pages/6.0/23.contributing/chapter.md                        | 2 +-
 133 files changed, 133 insertions(+), 133 deletions(-)

diff --git a/app/pages/6.0/02.background/02.the-client-server-conversation/docs.md b/app/pages/6.0/02.background/02.the-client-server-conversation/docs.md
index eddd8aff..eca8dbc4 100644
--- a/app/pages/6.0/02.background/02.the-client-server-conversation/docs.md
+++ b/app/pages/6.0/02.background/02.the-client-server-conversation/docs.md
@@ -1,7 +1,7 @@
 ---
 title: The Client-Server Conversation
 description: Many developers do not really understand the basics of how HTTP and web applications work. This discussion attempts to clarify some common misconceptions.
-obsolete: true
+wip: true
 ---
 
 One of the most common misconceptions is that web applications are coherent pieces of software that sit on a server somewhere, and that the client "runs" this application in their browser. This is actually an illusion, carefully crafted to provide a smooth experience for the end user.
diff --git a/app/pages/6.0/02.background/03.develop-locally-serve-globally/docs.md b/app/pages/6.0/02.background/03.develop-locally-serve-globally/docs.md
index 7982255f..278e0c16 100644
--- a/app/pages/6.0/02.background/03.develop-locally-serve-globally/docs.md
+++ b/app/pages/6.0/02.background/03.develop-locally-serve-globally/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Develop Locally, Serve Globally
 description: The right way to approach development.
-obsolete: true
+wip: true
 ---
 
 Just about every week, we see someone wander into [chat](https://chat.userfrosting.com) and ask:
diff --git a/app/pages/6.0/02.background/04.dont-reinvent-the-wheel/docs.md b/app/pages/6.0/02.background/04.dont-reinvent-the-wheel/docs.md
index 484cc5dd..78aa0823 100644
--- a/app/pages/6.0/02.background/04.dont-reinvent-the-wheel/docs.md
+++ b/app/pages/6.0/02.background/04.dont-reinvent-the-wheel/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Don't Reinvent the Wheel
 description: Using third-party components reduces the amount of software maintenance you have to do and documentation you have to write, and lets you draw on the wider community of other developers who use those packages for troubleshooting and support.
-obsolete: true
+wip: true
 ---
 
 I think that for a lot of developers - novices and professionals alike - building on top of others' work can seem like a betrayal of our trade. We're not "real" developers unless we built everything with our bare hands from scratch, and know firsthand the nitty-gritty details of how our code works. With third-party components, we have to take time to actually *learn* how to use them, and follow *their* rules. I get it. It all feels so antithetical to the DIY spirit that got so many of us into coding in the first place. Trust me, as someone who built a cold frame out of some doors and framing I found in the dumpster, I know:
diff --git a/app/pages/6.0/02.background/05.security/01.server-misconfiguration/docs.md b/app/pages/6.0/02.background/05.security/01.server-misconfiguration/docs.md
index ec95be1d..9355f65b 100644
--- a/app/pages/6.0/02.background/05.security/01.server-misconfiguration/docs.md
+++ b/app/pages/6.0/02.background/05.security/01.server-misconfiguration/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Server Misconfiguration
 description: Server misconfiguration is one of the top 10 vulnerabilities of any web application, according to OWASP. Most of these misconfigurations occur because of inexperienced developers or system administrators, and are simple to fix.
-obsolete: true
+wip: true
 ---
 
 As we discussed in [The Client-Server Conversation](background/the-client-server-conversation), it's important to distinguish between the code that is running on the server, and the response that it sends back to the client.
diff --git a/app/pages/6.0/02.background/05.security/docs.md b/app/pages/6.0/02.background/05.security/docs.md
index 99e5e09f..4f9b5470 100644
--- a/app/pages/6.0/02.background/05.security/docs.md
+++ b/app/pages/6.0/02.background/05.security/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Security
 description: It is essential to understand some basic security concepts before diving into web development. With an understanding of how the most common  vulnerabilities work and some diligence in configuring your system, UserFrosting sets you up with an application that is robust against most common attack vectors.
-obsolete: true
+wip: true
 ---
 
 It is essential to understand some basic security concepts before diving into web development.
diff --git a/app/pages/6.0/02.background/06.seo/docs.md b/app/pages/6.0/02.background/06.seo/docs.md
index e708717c..1e4eb127 100644
--- a/app/pages/6.0/02.background/06.seo/docs.md
+++ b/app/pages/6.0/02.background/06.seo/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Search Engine Optimization
 description: Search Engine Optimization (SEO) is an integral part of the design and development process. We discuss the major important factors in getting a page to rank well, and how they fit in with UserFrosting's features and overall architecture.
-obsolete: true
+wip: true
 ---
 
 Search Engine Optimization (SEO) is an integral part of the design and development process. Getting the public side of your website to rank well in search results should be something you consider from the very beginning, and not an afterthought once you're getting ready to deploy.
diff --git a/app/pages/6.0/03.structure/01.introduction/docs.md b/app/pages/6.0/03.structure/01.introduction/docs.md
index dfa4fc58..d7b5219d 100644
--- a/app/pages/6.0/03.structure/01.introduction/docs.md
+++ b/app/pages/6.0/03.structure/01.introduction/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Your Application
 description: A Sprinkle can contain assets, configuration files, translations, routes, PHP classes, and Twig templates.
-obsolete: true
+wip: true
 ---
 
 UserFrosting 4 introduced the **Sprinkle system** as a way to completely isolate the code and content that you and your team produce from the core UserFrosting installation. **UserFrosting 5** takes this concept a step further, requiring a new chapter on the basic UserFrosting project structure before even talking about downloading any code!
diff --git a/app/pages/6.0/03.structure/02.dependencies/docs.md b/app/pages/6.0/03.structure/02.dependencies/docs.md
index 324f412a..10bbc74d 100644
--- a/app/pages/6.0/03.structure/02.dependencies/docs.md
+++ b/app/pages/6.0/03.structure/02.dependencies/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Built on the shoulders of giants
 description: Detailed breakdown of a UserFrosting's dependencies.
-obsolete: true
+wip: true
 ---
 
 As detailed in a previous chapter, it's important [not to reinvent the wheel](background/dont-reinvent-the-wheel). That's why UserFrosting depends on a number of external libraries, called dependencies. Those are written by people and organizations external to UserFrosting, providing the base that UserFrosting works on. These dependencies are not tied to UserFrosting and can be used by anyone. Think of dependencies as the raw materials, like wood and concrete, you get from the hardware store to build a house. We simply "glued" them together to create awesomeness! 
diff --git a/app/pages/6.0/03.structure/03.framework/docs.md b/app/pages/6.0/03.structure/03.framework/docs.md
index 09e0c948..c4df5c1d 100644
--- a/app/pages/6.0/03.structure/03.framework/docs.md
+++ b/app/pages/6.0/03.structure/03.framework/docs.md
@@ -1,7 +1,7 @@
 ---
 title: The Framework
 description: A simple description of the UserFrosting Framework.
-obsolete: true
+wip: true
 ---
 
 The [**UserFrosting Framework**](https://github.com/userfrosting/framework/) contains the critical services required for UserFrosting to work. This is the only part of UserFrosting that is not considered a sprinkle. The reason for it not being considered a sprinkle is simple : the Framework contains the code required for the Sprinkle system to work. If it was a sprinkle itself, we'd be in a loop!
diff --git a/app/pages/6.0/03.structure/04.sprinkles/docs.md b/app/pages/6.0/03.structure/04.sprinkles/docs.md
index 1990269e..6f77921f 100644
--- a/app/pages/6.0/03.structure/04.sprinkles/docs.md
+++ b/app/pages/6.0/03.structure/04.sprinkles/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Sprinkles, what are they?
 description: Detailed breakdown of a sprinkle's contents.
-obsolete: true
+wip: true
 ---
 
 Sprinkles are an integral part of UserFrosting. We'll see in detail how they work in [a later chapter](sprinkles), but for now it's important to have an overview.
diff --git a/app/pages/6.0/03.structure/chapter.md b/app/pages/6.0/03.structure/chapter.md
index 3b4e8c38..ddf5a779 100644
--- a/app/pages/6.0/03.structure/chapter.md
+++ b/app/pages/6.0/03.structure/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: App Structure
 description: UserFrosting is modular application framework built on the shoulders of giants. This chapter describes how UserFrosting is structured.
-obsolete: true
+wip: true
 ---
 
 #### Chapter 3
diff --git a/app/pages/6.0/04.installation/01.requirements/01.basic-stack/docs.md b/app/pages/6.0/04.installation/01.requirements/01.basic-stack/docs.md
index 9f568e11..5e87b22e 100644
--- a/app/pages/6.0/04.installation/01.requirements/01.basic-stack/docs.md
+++ b/app/pages/6.0/04.installation/01.requirements/01.basic-stack/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Basic Stack Requirements
 description: UserFrosting requires a web server, PHP, and some sort of database.
-obsolete: true
+wip: true
 ---
 
 The basic stack requirements for running UserFrosting are pretty typical of any web framework or CMS. Those requirements are the software required to _run_ UserFrosting, usually on a "server". These are different from the [developer tools used to build your website](installation/requirements/essential-tools-for-php) which we'll see on the next page.
diff --git a/app/pages/6.0/04.installation/01.requirements/02.essential-tools-for-php/docs.md b/app/pages/6.0/04.installation/01.requirements/02.essential-tools-for-php/docs.md
index d42eada8..981af220 100644
--- a/app/pages/6.0/04.installation/01.requirements/02.essential-tools-for-php/docs.md
+++ b/app/pages/6.0/04.installation/01.requirements/02.essential-tools-for-php/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Essential Tools for Modern PHP
 description: A minimal set of tools that every PHP developer should have installed in their development environment.
-obsolete: true
+wip: true
 ---
 
 On the previous page, we saw the softwares required to run UserFrosting. Now it's time to look at tools you'll need during development to build your UserFrosting application. These tools are not strictly required to be installed on your production server, which we'll cover in a [later chapter](going-live).
diff --git a/app/pages/6.0/04.installation/01.requirements/chapter.md b/app/pages/6.0/04.installation/01.requirements/chapter.md
index 04787e83..c519a77e 100644
--- a/app/pages/6.0/04.installation/01.requirements/chapter.md
+++ b/app/pages/6.0/04.installation/01.requirements/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: Requirements
 description: UserFrosting has a few basic, sensible requirements - requirements that just about any modern web developer should already have set up!
-obsolete: true
+wip: true
 ---
 
 # Requirements
diff --git a/app/pages/6.0/04.installation/02.environment/01.native/01.requirements/docs.md b/app/pages/6.0/04.installation/02.environment/01.native/01.requirements/docs.md
index 4a13499e..2f1c8b77 100644
--- a/app/pages/6.0/04.installation/02.environment/01.native/01.requirements/docs.md
+++ b/app/pages/6.0/04.installation/02.environment/01.native/01.requirements/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Installing Requirements
 description: Getting UserFrosting up and running in your development environment.
-obsolete: true
+wip: true
 ---
 
 If your local development environment doesn't already have the [required stack and tools](installation/requirements), we'll now set them up. We'll go through the following:
diff --git a/app/pages/6.0/04.installation/02.environment/01.native/02.install/docs.md b/app/pages/6.0/04.installation/02.environment/01.native/02.install/docs.md
index 95940ddd..8f3062a2 100644
--- a/app/pages/6.0/04.installation/02.environment/01.native/02.install/docs.md
+++ b/app/pages/6.0/04.installation/02.environment/01.native/02.install/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Installing UserFrosting
 description: Getting UserFrosting up and running in your development environment.
-obsolete: true
+wip: true
 ---
 
 Now that your local development environment is setup and ready to go, it's finally time to download and access your first UserFrosting application for the first time !
diff --git a/app/pages/6.0/04.installation/02.environment/01.native/docs.md b/app/pages/6.0/04.installation/02.environment/01.native/docs.md
index 76d5f0c2..c2b2213b 100644
--- a/app/pages/6.0/04.installation/02.environment/01.native/docs.md
+++ b/app/pages/6.0/04.installation/02.environment/01.native/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Native Installation
 description: Getting UserFrosting up and running in your development environment.
-obsolete: true
+wip: true
 ---
 
 This **native installation** guide will first show you the steps to install all the tools and apps required to run your own local development environment. Once this is done, the second part contains the steps required to get UserFrosting itself up and running. 
diff --git a/app/pages/6.0/04.installation/02.environment/02.docker/docs.md b/app/pages/6.0/04.installation/02.environment/02.docker/docs.md
index 01a192d1..a0962527 100644
--- a/app/pages/6.0/04.installation/02.environment/02.docker/docs.md
+++ b/app/pages/6.0/04.installation/02.environment/02.docker/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Docker
 description: Docker is a containerization platform that helps maintain consistent behavior across different development and production environments.
-obsolete: true
+wip: true
 ---
 
 If you don't already have a local development environment set up, this page will guide you through installing UserFrosting using Docker.
diff --git a/app/pages/6.0/04.installation/02.environment/docs.md b/app/pages/6.0/04.installation/02.environment/docs.md
index 37ea6234..9e7c9dd4 100644
--- a/app/pages/6.0/04.installation/02.environment/docs.md
+++ b/app/pages/6.0/04.installation/02.environment/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Dev Environment
 description: Getting UserFrosting up and running in your development environment.
-obsolete: true
+wip: true
 ---
 
 The process of setting up UserFrosting so that you can begin work in your [local development environment](background/develop-locally-serve-globally) is known as **installation**. This is a separate process from [deployment](going-live), when you push your fully developed application to a live server. Please be sure that you understand this distinction before proceeding further! UserFrosting is not like Wordpress, for example, where you can "install" directly to your production server.
diff --git a/app/pages/6.0/04.installation/chapter.md b/app/pages/6.0/04.installation/chapter.md
index ce33884a..369686b6 100644
--- a/app/pages/6.0/04.installation/chapter.md
+++ b/app/pages/6.0/04.installation/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: Installation
 description: Configuring a development environment with the necessary dependencies for UserFrosting, and using Bakery to get started on your first UserFrosting project.
-obsolete: true
+wip: true
 ---
 
 #### Chapter 4
diff --git a/app/pages/6.0/05.troubleshooting/01.debugging/docs.md b/app/pages/6.0/05.troubleshooting/01.debugging/docs.md
index a5ec2e5d..b7f73fa1 100644
--- a/app/pages/6.0/05.troubleshooting/01.debugging/docs.md
+++ b/app/pages/6.0/05.troubleshooting/01.debugging/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Debugging
 description: When your application "doesn't work", it's not always obvious where the problem lies. Modern web browsers come with a built-in tool for identifying problems in client-side code, as well as problems in the communication between your browser and the server.
-obsolete: true
+wip: true
 ---
 
 As we mentioned in [Chapter 2](background/the-client-server-conversation), a web application is not a single piece of software. It consists of the server running PHP code, the client (browser) running Javascript and rendering the web page, and the conversation between the two parties. Things can go wrong in any of these three places.
diff --git a/app/pages/6.0/05.troubleshooting/02.getting-help/docs.md b/app/pages/6.0/05.troubleshooting/02.getting-help/docs.md
index e8e44e4d..f5b1c43c 100644
--- a/app/pages/6.0/05.troubleshooting/02.getting-help/docs.md
+++ b/app/pages/6.0/05.troubleshooting/02.getting-help/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Getting Help
 description: Don't be afraid to ask for help! Just, please be sure to read and understand our rules first.
-obsolete: true
+wip: true
 ---
 
 ## General tips for support
diff --git a/app/pages/6.0/05.troubleshooting/03.common-problems/docs.md b/app/pages/6.0/05.troubleshooting/03.common-problems/docs.md
index e8a0ed0b..c825e751 100644
--- a/app/pages/6.0/05.troubleshooting/03.common-problems/docs.md
+++ b/app/pages/6.0/05.troubleshooting/03.common-problems/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Common Problems
 description: Commonly encountered issues when setting up, developing, or deploying a UserFrosting project.
-obsolete: true
+wip: true
 ---
 
 ## Installation
diff --git a/app/pages/6.0/05.troubleshooting/chapter.md b/app/pages/6.0/05.troubleshooting/chapter.md
index 9d52fc65..9f1d9db3 100644
--- a/app/pages/6.0/05.troubleshooting/chapter.md
+++ b/app/pages/6.0/05.troubleshooting/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: Troubleshooting
 description: Troubleshooting installation and your application.
-obsolete: true
+wip: true
 ---
 
 #### Chapter 5
diff --git a/app/pages/6.0/06.sprinkles/01.sprinkles/docs.md b/app/pages/6.0/06.sprinkles/01.sprinkles/docs.md
index cc6d64bd..5b504646 100644
--- a/app/pages/6.0/06.sprinkles/01.sprinkles/docs.md
+++ b/app/pages/6.0/06.sprinkles/01.sprinkles/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Basic concept
 description: ""
-obsolete: true
+wip: true
 ---
 
 In previous versions of UserFrosting, you had to directly modify the files that come with the default installation in order to add your own functionality. For example, if you wanted to add a field to the user registration page, you had to actually modify `register.twig`. Or, if you wanted to add a new relation on the `User` class, you had to modify the actual `User.php` class that comes with UserFrosting.
diff --git a/app/pages/6.0/06.sprinkles/02.content/docs.md b/app/pages/6.0/06.sprinkles/02.content/docs.md
index dc953eee..aea243b1 100644
--- a/app/pages/6.0/06.sprinkles/02.content/docs.md
+++ b/app/pages/6.0/06.sprinkles/02.content/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Contents
 description: Detailed breakdown of a Sprinkle's contents.
-obsolete: true
+wip: true
 ---
 
 Within each sprinkle, you will find any or all of the following directories and files:
diff --git a/app/pages/6.0/06.sprinkles/03.recipe/docs.md b/app/pages/6.0/06.sprinkles/03.recipe/docs.md
index 72e82319..dcb4a62b 100644
--- a/app/pages/6.0/06.sprinkles/03.recipe/docs.md
+++ b/app/pages/6.0/06.sprinkles/03.recipe/docs.md
@@ -1,7 +1,7 @@
 ---
 title: The Sprinkle Recipe
 description: ""
-obsolete: true
+wip: true
 ---
 
 The Sprinkle Recipe dictates how your sprinkle is built, like a blueprint. UserFrosting services and framework will use the information from the recipe to initiate some services, and expose classes your sprinkle provides for other servicea to use.
diff --git a/app/pages/6.0/06.sprinkles/04.customize/docs.md b/app/pages/6.0/06.sprinkles/04.customize/docs.md
index 540d4078..5811a035 100644
--- a/app/pages/6.0/06.sprinkles/04.customize/docs.md
+++ b/app/pages/6.0/06.sprinkles/04.customize/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Customizing Your Sprinkle
 description: This guide walks you though the process of setting up your application by implementing a new sprinkle.
-obsolete: true
+wip: true
 ---
 
 This guide assumes that you've already completed the [installation guide](installation) and successfully managed to get UserFrosting working in your [local development environment](background/develop-locally-serve-globally) using the [Skeleton](structure/introduction#the-app-skeleton-your-project-s-template). If not, please do that now - feel free to [ask for help](troubleshooting/getting-help) if you're running into trouble!
diff --git a/app/pages/6.0/06.sprinkles/05.community/docs.md b/app/pages/6.0/06.sprinkles/05.community/docs.md
index 4d71fdea..6b4edf3d 100644
--- a/app/pages/6.0/06.sprinkles/05.community/docs.md
+++ b/app/pages/6.0/06.sprinkles/05.community/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Community Sprinkles
 description: Sprinkles shared between projects are called community sprinkles.
-obsolete: true
+wip: true
 ---
 
 One great thing about the **Sprinkle system** is its ability to wrap complete functionality inside a single package. This makes it a great tool to write your website isolated from the core UserFrosting code. It also means it's super easy to share sprinkles between projects... and with other members of the UserFrosting community! That's what we call a **community sprinkle**.
diff --git a/app/pages/6.0/06.sprinkles/chapter.md b/app/pages/6.0/06.sprinkles/chapter.md
index 3ed43d44..5399974d 100644
--- a/app/pages/6.0/06.sprinkles/chapter.md
+++ b/app/pages/6.0/06.sprinkles/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: Sprinkles
 description: Sprinkles are modular units of code and content that implement some feature or override some default behavior of UserFrosting.
-obsolete: true
+wip: true
 ---
 
 #### Chapter 6
diff --git a/app/pages/6.0/07.dependency-injection/01.concept/docs.md b/app/pages/6.0/07.dependency-injection/01.concept/docs.md
index 60602e5a..ec51d457 100644
--- a/app/pages/6.0/07.dependency-injection/01.concept/docs.md
+++ b/app/pages/6.0/07.dependency-injection/01.concept/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Understanding Dependency Injection
 description: Dependency Injection (DI) is the backbone of modern programming
-obsolete: true
+wip: true
 ---
 
 [Dependency Injection](http://www.phptherightway.com/#dependency_injection) is one of the fundamental pillars of modern object-oriented software design - it is a prime example of the **D** in [**SOLID**](https://en.wikipedia.org/wiki/SOLID_(object-oriented_design)). The idea is that instead of creating objects _inside_ other objects, you create your "inner objects" (dependencies) separately and then _inject_ (by passing as an argument to the constructor or a setter method) them into the "outer object" (dependent).
diff --git a/app/pages/6.0/07.dependency-injection/02.the-di-container/docs.md b/app/pages/6.0/07.dependency-injection/02.the-di-container/docs.md
index 507f9e97..68df45d7 100644
--- a/app/pages/6.0/07.dependency-injection/02.the-di-container/docs.md
+++ b/app/pages/6.0/07.dependency-injection/02.the-di-container/docs.md
@@ -1,7 +1,7 @@
 ---
 title: The DI Container
 description: The Dependency Injection (DI) container provides an elegant and loosely coupled way to make various services available globally in your application.
-obsolete: true
+wip: true
 ---
 
 ### The Dependency Injection (DI) Container
diff --git a/app/pages/6.0/07.dependency-injection/03.default-services/docs.md b/app/pages/6.0/07.dependency-injection/03.default-services/docs.md
index e56a19e3..d52ce9c2 100644
--- a/app/pages/6.0/07.dependency-injection/03.default-services/docs.md
+++ b/app/pages/6.0/07.dependency-injection/03.default-services/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Default Services
 description: UserFrosting's default services provide most of the tools needed to build a basic web application.
-obsolete: true
+wip: true
 ---
 
 As mentioned in the last section, each sprinkle can set up its own services through **service providers**. The [bundled sprinkles](structure/sprinkles#bundled-sprinkles) set up many services that are essential to UserFrosting's functionality. These services can be found in the `src/ServicesProvider/` subdirectories in each Sprinkle's directory. 
diff --git a/app/pages/6.0/07.dependency-injection/04.adding-services/docs.md b/app/pages/6.0/07.dependency-injection/04.adding-services/docs.md
index 052a997a..6f8d9654 100644
--- a/app/pages/6.0/07.dependency-injection/04.adding-services/docs.md
+++ b/app/pages/6.0/07.dependency-injection/04.adding-services/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Adding Services
 description: You may extend UserFrosting's default services for additional functionality, or define completely new services in your Sprinkles.
-obsolete: true
+wip: true
 ---
 
 You'll probably want to create your own services to modularize certain aspects of your own project. For example, if your application needs to interact with some third-party API like Google Maps, you might create a `MapBuilder` class that encapsulates all of that functionality. This is a cleaner and more manageable alternative to simply stuffing all of your code directly into your controller classes.
diff --git a/app/pages/6.0/07.dependency-injection/05.extending-services/docs.md b/app/pages/6.0/07.dependency-injection/05.extending-services/docs.md
index ed839709..f9f20f6e 100644
--- a/app/pages/6.0/07.dependency-injection/05.extending-services/docs.md
+++ b/app/pages/6.0/07.dependency-injection/05.extending-services/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Extending Existing Services
 description: You may extend UserFrosting's default services for additional functionality, or define completely new services in your sprinkles.
-obsolete: true
+wip: true
 ---
 
 PHP-DI allows us to extend services that were defined previously, for example in another sprinkle, using [decorators](https://php-di.org/doc/definition-overriding.html#decorators).
diff --git a/app/pages/6.0/07.dependency-injection/chapter.md b/app/pages/6.0/07.dependency-injection/chapter.md
index 54120c5e..ee59882c 100644
--- a/app/pages/6.0/07.dependency-injection/chapter.md
+++ b/app/pages/6.0/07.dependency-injection/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: Dependency Injection
 description: Services are a way to allow objects that perform specific, commonly used functions to be reused throughout your application. Mail, logging, and authorization are all examples of services.
-obsolete: true
+wip: true
 ---
 
 #### Chapter 7
diff --git a/app/pages/6.0/08.routes-and-controllers/01.introduction/docs.md b/app/pages/6.0/08.routes-and-controllers/01.introduction/docs.md
index 9d14d680..9502dc09 100644
--- a/app/pages/6.0/08.routes-and-controllers/01.introduction/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/01.introduction/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Introduction
 description: If you're new to object-oriented programming, you may not be familiar with the MVC pattern, a popular and very flexible design paradigm for scalable, easily maintained web applications.
-obsolete: true
+wip: true
 ---
 
 UserFrosting is built to follow the [Model-View-Controller (MVC)](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) design paradigm. If you come from a "traditional" PHP background, you may be used to seeing code that looks like this:
diff --git a/app/pages/6.0/08.routes-and-controllers/02.REST/01.restful-endpoints/docs.md b/app/pages/6.0/08.routes-and-controllers/02.REST/01.restful-endpoints/docs.md
index 3b676470..8d875d0b 100644
--- a/app/pages/6.0/08.routes-and-controllers/02.REST/01.restful-endpoints/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/02.REST/01.restful-endpoints/docs.md
@@ -1,7 +1,7 @@
 ---
 title: RESTful Endpoints
 description: Together, a specific url and method are commonly referred to as an **endpoint**.  It is important to use a consistent, RESTful approach to the URLs and methods you choose for each endpoint.
-obsolete: true
+wip: true
 ---
 
 A RESTful url should represent a _thing_, not an _action_. We want to avoid putting any verbs in the name of the url. Instead, the action should be defined by the HTTP method. For example:
diff --git a/app/pages/6.0/08.routes-and-controllers/02.REST/02.restful-responses/docs.md b/app/pages/6.0/08.routes-and-controllers/02.REST/02.restful-responses/docs.md
index 46c34748..ed599def 100644
--- a/app/pages/6.0/08.routes-and-controllers/02.REST/02.restful-responses/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/02.REST/02.restful-responses/docs.md
@@ -1,7 +1,7 @@
 ---
 title: RESTful Responses
 description: Your responses should use headers and status codes consistent with the HTTP specifications.  This section lists the HTTP codes commonly used by UserFrosting.
-obsolete: true
+wip: true
 ---
 
 ## RESTful Responses
diff --git a/app/pages/6.0/08.routes-and-controllers/02.REST/docs.md b/app/pages/6.0/08.routes-and-controllers/02.REST/docs.md
index 733333e0..f4a859c1 100644
--- a/app/pages/6.0/08.routes-and-controllers/02.REST/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/02.REST/docs.md
@@ -1,7 +1,7 @@
 ---
 title: RESTful Design
 description: Representational State Transfer (REST) is a design paradigm for efficient, scalable communication between clients and the server.
-obsolete: true
+wip: true
 ---
 
 Before we talk about the application itself, let's talk about how the client gets to the application in the first place: by making a **request**. A request consists of a few main components:
diff --git a/app/pages/6.0/08.routes-and-controllers/03.front-controller/docs.md b/app/pages/6.0/08.routes-and-controllers/03.front-controller/docs.md
index e6b63190..7856b475 100644
--- a/app/pages/6.0/08.routes-and-controllers/03.front-controller/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/03.front-controller/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Front Controller
 description: The front controller consists of the route definitions that UserFrosting uses to process incoming requests from the client.
-obsolete: true
+wip: true
 ---
 
 The front controller is a collective term for the **routes** that your web application defines for its various **endpoints**. This is how UserFrosting links URLs and methods to your application's code.
diff --git a/app/pages/6.0/08.routes-and-controllers/04.controller-classes/docs.md b/app/pages/6.0/08.routes-and-controllers/04.controller-classes/docs.md
index c31c56e6..1965c5be 100644
--- a/app/pages/6.0/08.routes-and-controllers/04.controller-classes/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/04.controller-classes/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Controller Classes
 description: Controller classes allow you to easily separate the logic for your routes from your endpoint definitions.
-obsolete: true
+wip: true
 ---
 
 To keep your code organized, it is highly recommended to use **controller** or **action** classes. By separating your code in this way, you can easily see a list of the endpoints that a Sprinkle defines by looking at its route definitions. The implementation can then be tucked away in separate files.
diff --git a/app/pages/6.0/08.routes-and-controllers/05.registering-routes/docs.md b/app/pages/6.0/08.routes-and-controllers/05.registering-routes/docs.md
index 570f4f25..214769ff 100644
--- a/app/pages/6.0/08.routes-and-controllers/05.registering-routes/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/05.registering-routes/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Registering Routes
 description: Once your routes definitions are ready, you have to register them inside your Sprinkle Recipe.
-obsolete: true
+wip: true
 ---
 
 So far we've seen how to [create route definitions](routes-and-controllers/front-controller) and [controller classes](routes-and-controllers/controller-classes). However, there one last step required for our routes to be enabled inside our application. That is registering the route class inside the [Sprinkle Recipe](sprinkles/recipe#routes). 
diff --git a/app/pages/6.0/08.routes-and-controllers/06.client-input/01.validation/docs.md b/app/pages/6.0/08.routes-and-controllers/06.client-input/01.validation/docs.md
index 9e2565ab..0757643a 100644
--- a/app/pages/6.0/08.routes-and-controllers/06.client-input/01.validation/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/06.client-input/01.validation/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Validation
 description: Client- and server-side validation are unified into one convenient interface using UserFrosting's Fortress package and a common set of rules defined in a JSON schema file.
-obsolete: true
+wip: true
 ---
 
 The number one security rule in web development is: **never trust client input!**
diff --git a/app/pages/6.0/08.routes-and-controllers/06.client-input/02.csrf-guard/docs.md b/app/pages/6.0/08.routes-and-controllers/06.client-input/02.csrf-guard/docs.md
index a427ec08..0189389f 100644
--- a/app/pages/6.0/08.routes-and-controllers/06.client-input/02.csrf-guard/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/06.client-input/02.csrf-guard/docs.md
@@ -1,7 +1,7 @@
 ---
 title: CSRF Protection
 description: Cross-site request forgeries (CSRF) are a type of social engineering attack in which a malicious agent tricks a user into submitting a valid, but unintended request to your server. UserFrosting mitigates this risk with a secret token embedded into all forms on your website.
-obsolete: true
+wip: true
 ---
 
 Cross-site request forgeries (CSRF) are a type of social engineering attack in which a malicious agent tricks a user into submitting a valid, but unintended request to your server. This can happen, for example, when a user opens a malicious email or website while they are still signed in to your website.
diff --git a/app/pages/6.0/08.routes-and-controllers/06.client-input/03.throttle/docs.md b/app/pages/6.0/08.routes-and-controllers/06.client-input/03.throttle/docs.md
index b54433ed..2ac6b2a8 100644
--- a/app/pages/6.0/08.routes-and-controllers/06.client-input/03.throttle/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/06.client-input/03.throttle/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Throttling
 description: Throttling, also known as rate-limiting, is a technique for slowing down attackers by limiting the frequency with which they can make certain types of requests.
-obsolete: true
+wip: true
 ---
 
 People tend to be bad at picking strong passwords. [Publicly available lists of passwords](https://github.com/danielmiessler/SecLists/tree/master/Passwords) recovered from hacked databases reveal that, despite efforts to educate, users still pick the same highly predictable passwords over and over. These lists make it easy for brute-force attackers to gain unauthorized access to a large number of your users' accounts.
diff --git a/app/pages/6.0/08.routes-and-controllers/06.client-input/04.ajax/docs.md b/app/pages/6.0/08.routes-and-controllers/06.client-input/04.ajax/docs.md
index 5703bd96..56e1ae46 100644
--- a/app/pages/6.0/08.routes-and-controllers/06.client-input/04.ajax/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/06.client-input/04.ajax/docs.md
@@ -1,6 +1,6 @@
 ---
 title: AJAX Requests
-obsolete: true
+wip: true
 ---
 
 To contribute to this documentation, please submit a pull request to our [learn repository](https://github.com/userfrosting/learn/tree/master/pages).
\ No newline at end of file
diff --git a/app/pages/6.0/08.routes-and-controllers/06.client-input/docs.md b/app/pages/6.0/08.routes-and-controllers/06.client-input/docs.md
index 51deb2bf..a4b560e4 100644
--- a/app/pages/6.0/08.routes-and-controllers/06.client-input/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/06.client-input/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Client Input
 description: Retrieving client input (GET, POST, PUT, DELETE, and URL arguments) in your controllers.
-obsolete: true
+wip: true
 ---
 
 There is no such thing as a `$_GET` array or a `$_POST` array - at least, not according to the [HTTP specifications](https://en.wikipedia.org/wiki/HTTP#Message_Format). These superglobals are merely constructs offered by PHP to make your life more "convenient".
diff --git a/app/pages/6.0/08.routes-and-controllers/chapter.md b/app/pages/6.0/08.routes-and-controllers/chapter.md
index 3509fa12..1f568aef 100644
--- a/app/pages/6.0/08.routes-and-controllers/chapter.md
+++ b/app/pages/6.0/08.routes-and-controllers/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: Routes and Controllers
 description: UserFrosting controllers are used to mediate interactions between the model and view, and are responsible for much of your application's logic.
-obsolete: true
+wip: true
 ---
 
 #### Chapter 8
diff --git a/app/pages/6.0/09.configuration/01.environment-vars/docs.md b/app/pages/6.0/09.configuration/01.environment-vars/docs.md
index 3f3af36e..4d60aee4 100644
--- a/app/pages/6.0/09.configuration/01.environment-vars/docs.md
+++ b/app/pages/6.0/09.configuration/01.environment-vars/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Environment Variables
 description: The .env file is used to define important values in development such as database credentials, which should be placed directly in environment variables during production.
-obsolete: true
+wip: true
 ---
 
 The basic database settings for UserFrosting can be set through environment variables. By default, UserFrosting looks for the following environment variables:
diff --git a/app/pages/6.0/09.configuration/02.config-files/docs.md b/app/pages/6.0/09.configuration/02.config-files/docs.md
index 3a4c493c..16bb6aa9 100644
--- a/app/pages/6.0/09.configuration/02.config-files/docs.md
+++ b/app/pages/6.0/09.configuration/02.config-files/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Configuration Files
 description: Configuration files allow you to customize the default behavior of UserFrosting - for example, to toggle debugging, caching, and logging behaviors and to set other sitewide settings.
-obsolete: true
+wip: true
 ---
 
 Configuration files allow you to customize the default behavior of UserFrosting - for example, to toggle debugging, caching, and logging behaviors and to set other sitewide settings. Configuration files are found in the `config/` directory of each Sprinkle.
diff --git a/app/pages/6.0/09.configuration/chapter.md b/app/pages/6.0/09.configuration/chapter.md
index 7338a6af..d522b72e 100644
--- a/app/pages/6.0/09.configuration/chapter.md
+++ b/app/pages/6.0/09.configuration/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: Configuration
 description: UserFrosting works out of the box with very little configuration required.  That being said, UserFrosting is highly configurable for the needs of your specific application.
-obsolete: true
+wip: true
 ---
 
 #### Chapter 9
diff --git a/app/pages/6.0/10.users/01.user-accounts/docs.md b/app/pages/6.0/10.users/01.user-accounts/docs.md
index 5aca12e9..d3c008aa 100644
--- a/app/pages/6.0/10.users/01.user-accounts/docs.md
+++ b/app/pages/6.0/10.users/01.user-accounts/docs.md
@@ -1,7 +1,7 @@
 ---
 title: User Accounts
 description: UserFrosting ships with everything you need to create user accounts, and a rich set of features for users and administrators.
-obsolete: true
+wip: true
 ---
 
 You were probably attracted to UserFrosting because you wanted to "make a site where users can sign in", or you already have a project in progress and your boss asked you to "put it behind a login," or you need to have some "protected pages." These are nontechnical terms. It will be easier for us to communicate if we first establish a common vocabulary, so that we can explain the concepts with more precision.
diff --git a/app/pages/6.0/10.users/02.access-control/docs.md b/app/pages/6.0/10.users/02.access-control/docs.md
index 25aef952..21ef3354 100644
--- a/app/pages/6.0/10.users/02.access-control/docs.md
+++ b/app/pages/6.0/10.users/02.access-control/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Authorization
 description: Authorization is sometimes referred to as "access control" or "protecting pages". UserFrosting implements an extended version of role-based access control that supports procedural conditions on user permissions.
-obsolete: true
+wip: true
 ---
 
 ## Roles
diff --git a/app/pages/6.0/10.users/03.groups/docs.md b/app/pages/6.0/10.users/03.groups/docs.md
index 1bf10a07..14f3a519 100644
--- a/app/pages/6.0/10.users/03.groups/docs.md
+++ b/app/pages/6.0/10.users/03.groups/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Groups
 description: Unlike roles, which assign specific sets of permissions to users, user groups allow you to horizontally partition your users.
-obsolete: true
+wip: true
 ---
 
 Every user can belong to **exactly one group**. Groups are used to horizontally partition your users - for example, if you have offices in Baltimore, London, and Munich, you might want to group your users according to which office they are in. Group membership can be used to broadly determine styling, layout, or access control for all users in the group.
diff --git a/app/pages/6.0/10.users/04.activity-logging/docs.md b/app/pages/6.0/10.users/04.activity-logging/docs.md
index 741f7479..14d34e04 100644
--- a/app/pages/6.0/10.users/04.activity-logging/docs.md
+++ b/app/pages/6.0/10.users/04.activity-logging/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Activity Logging
 description: The activity logger allows you to capture and log user activities. By default this information is sent to the database, but you can use Monolog to customize how this information is stored - even having critical activity alerts sent to an administrator!
-obsolete: true
+wip: true
 ---
 
 By default, user activities are logged to the `activities` database table. Logged information includes the activity time and an activity type, the `user_id`, the user's IP address, and a description of the activity. The administrative interface provides convenient tables for viewing these logs:
diff --git a/app/pages/6.0/10.users/chapter.md b/app/pages/6.0/10.users/chapter.md
index 61780b22..9b8d3b7c 100644
--- a/app/pages/6.0/10.users/chapter.md
+++ b/app/pages/6.0/10.users/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: Users
 description: In this chapter, you'll learn about the various user account features that come built-in and fully implemented in UserFrosting.
-obsolete: true
+wip: true
 ---
 
 #### Chapter 10
diff --git a/app/pages/6.0/11.cli/01.commands/docs.md b/app/pages/6.0/11.cli/01.commands/docs.md
index 3c525213..b28ae658 100644
--- a/app/pages/6.0/11.cli/01.commands/docs.md
+++ b/app/pages/6.0/11.cli/01.commands/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Built-in Commands
 description: An overview of the commands available in Bakery.
-obsolete: true
+wip: true
 ---
 
 UserFrosting's CLI, or [*Command-line Interface*](https://en.wikipedia.org/wiki/Command-line_interface), is called the **Bakery**. It provides a number of helpful commands that can assist you while you build, manage, and install your application. To view a list of all available Bakery commands, you may use the `list` command from your UserFrosting root directory:
diff --git a/app/pages/6.0/11.cli/02.custom-commands/docs.md b/app/pages/6.0/11.cli/02.custom-commands/docs.md
index 7a0c4cb8..9f88dee4 100644
--- a/app/pages/6.0/11.cli/02.custom-commands/docs.md
+++ b/app/pages/6.0/11.cli/02.custom-commands/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Custom Commands
 description: You may extend the UserFrosting\System\Bakery\BaseCommand class to implement your own CLI commands that can be run through Bakery.
-obsolete: true
+wip: true
 ---
 
 While the Bakery CLI tool comes with great built-in commands, your sprinkles can also take advantage of the Bakery by adding their own cli commands.
diff --git a/app/pages/6.0/11.cli/03.extending-commands/docs.md b/app/pages/6.0/11.cli/03.extending-commands/docs.md
index fd9c38c1..3a317133 100644
--- a/app/pages/6.0/11.cli/03.extending-commands/docs.md
+++ b/app/pages/6.0/11.cli/03.extending-commands/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Extending Aggregator Commands
 description: You may add custom sub-commands to the bake, setup, and debug commands through events.
-obsolete: true
+wip: true
 ---
 
 *Aggregator commands* is a fancy term to identify core bakery commands that just run multiple sub-commands in one operation. UserFrosting uses 3 of those special commands:
diff --git a/app/pages/6.0/11.cli/chapter.md b/app/pages/6.0/11.cli/chapter.md
index 4d3df1ff..51e8178e 100644
--- a/app/pages/6.0/11.cli/chapter.md
+++ b/app/pages/6.0/11.cli/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: Bakery CLI
 description: Bakery is UserFrosting's very own command line interface (CLI) tool.
-obsolete: true
+wip: true
 ---
 
 #### Chapter 11
diff --git a/app/pages/6.0/12.templating-with-twig/01.overview/docs.md b/app/pages/6.0/12.templating-with-twig/01.overview/docs.md
index 43ca4b77..c1488d15 100644
--- a/app/pages/6.0/12.templating-with-twig/01.overview/docs.md
+++ b/app/pages/6.0/12.templating-with-twig/01.overview/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Why use Twig?
 description: UserFrosting uses the extremely popular Twig templating engine to facilitate clean separation between content and logic in your application.
-obsolete: true
+wip: true
 ---
 
 Twig is a [templating engine](http://twig.sensiolabs.org/), which is designed to help maintain a clean separation between your application's logic and its content.
diff --git a/app/pages/6.0/12.templating-with-twig/02.sprinkle-templates/docs.md b/app/pages/6.0/12.templating-with-twig/02.sprinkle-templates/docs.md
index cd91d71a..b941c0bd 100644
--- a/app/pages/6.0/12.templating-with-twig/02.sprinkle-templates/docs.md
+++ b/app/pages/6.0/12.templating-with-twig/02.sprinkle-templates/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Sprinkle Templates
 description: ""
-obsolete: true
+wip: true
 ---
 
 ## Template organization
diff --git a/app/pages/6.0/12.templating-with-twig/03.filters-and-functions/docs.md b/app/pages/6.0/12.templating-with-twig/03.filters-and-functions/docs.md
index 096083d4..0849481d 100644
--- a/app/pages/6.0/12.templating-with-twig/03.filters-and-functions/docs.md
+++ b/app/pages/6.0/12.templating-with-twig/03.filters-and-functions/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Twig Filters and Functions
 description: ""
-obsolete: true
+wip: true
 ---
 
 ### config
diff --git a/app/pages/6.0/12.templating-with-twig/chapter.md b/app/pages/6.0/12.templating-with-twig/chapter.md
index 640005c0..6aaca7b5 100644
--- a/app/pages/6.0/12.templating-with-twig/chapter.md
+++ b/app/pages/6.0/12.templating-with-twig/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: Pages and Twig Templating
 description: A web page is a synthesis of HTML, CSS, Javascript, and other types of media.  UserFrosting uses the powerful Twig templating engine to render web pages.
-obsolete: true
+wip: true
 ---
 
 #### Chapter 12
diff --git a/app/pages/6.0/13.asset-management/03.vite-configuration/docs.md b/app/pages/6.0/13.asset-management/03.vite-configuration/docs.md
index c42198b3..326e81a7 100644
--- a/app/pages/6.0/13.asset-management/03.vite-configuration/docs.md
+++ b/app/pages/6.0/13.asset-management/03.vite-configuration/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Vite Configuration
 description: Learn how to configure Vite, understand entry points, and manage environment variables in UserFrosting.
-wip: true
+# Verified for UF 6.0
 ---
 
 The `vite.config.ts` file in your project root configures how Vite processes your assets. This file is included in the Skeleton template and already contains everything you need, but understanding its structure helps you customize the build process for your specific needs.
diff --git a/app/pages/6.0/13.asset-management/04.vue-framework/docs.md b/app/pages/6.0/13.asset-management/04.vue-framework/docs.md
index f089ccaf..54a9c8ce 100644
--- a/app/pages/6.0/13.asset-management/04.vue-framework/docs.md
+++ b/app/pages/6.0/13.asset-management/04.vue-framework/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Vue Framework
 description: Learn how Vue 3 powers modern UserFrosting applications and why it replaced jQuery for building interactive user interfaces.
-wip: true
+# Verified for UF 6.0
 ---
 
 UserFrosting embraces modern JavaScript by using [Vue 3](https://vuejs.org/) as its frontend framework. If you're coming from older versions of UserFrosting or traditional server-rendered applications, this represents a significant shift in how you build user interfaces. Let's explore what Vue is, why it matters, and how UserFrosting leverages it.
diff --git a/app/pages/6.0/13.asset-management/05.using-assets/docs.md b/app/pages/6.0/13.asset-management/05.using-assets/docs.md
index e2e4b03d..67e59f46 100644
--- a/app/pages/6.0/13.asset-management/05.using-assets/docs.md
+++ b/app/pages/6.0/13.asset-management/05.using-assets/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Using Assets in Templates
 description: Learn how to load JavaScript, CSS, and other assets in your Twig templates using Vite's helper functions.
-wip: true
+# Verified for UF 6.0
 ---
 
 Now that Vite is compiling your assets, let's learn how to actually use them in your templates! UserFrosting provides simple Twig functions that handle all the complexity behind the scenes. You'll be amazed at how easy this is.
diff --git a/app/pages/6.0/13.asset-management/06.advanced/01.sprinkle-assets/docs.md b/app/pages/6.0/13.asset-management/06.advanced/01.sprinkle-assets/docs.md
index 6d339778..6b302e4b 100644
--- a/app/pages/6.0/13.asset-management/06.advanced/01.sprinkle-assets/docs.md
+++ b/app/pages/6.0/13.asset-management/06.advanced/01.sprinkle-assets/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Sprinkle Assets
 description: Managing assets across multiple sprinkles in UserFrosting, including creating asset bundles and sharing code between sprinkles.
-wip: true
+# Verified for UF 6.0
 ---
 
 One of UserFrosting's most powerful features is its [Sprinkle system](/structure/sprinkles)—a way to organize your application into modular, reusable packages. Each sprinkle can have its own assets, and these assets can be shared across your application. This is perfect for building reusable components, creating themes, or organizing large applications into manageable pieces.
diff --git a/app/pages/6.0/13.asset-management/06.advanced/02.migration/docs.md b/app/pages/6.0/13.asset-management/06.advanced/02.migration/docs.md
index 5a990585..54217feb 100644
--- a/app/pages/6.0/13.asset-management/06.advanced/02.migration/docs.md
+++ b/app/pages/6.0/13.asset-management/06.advanced/02.migration/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Migration from Webpack
 description: Guide for migrating from Webpack Encore to Vite in UserFrosting 6, including backward compatibility options.
-wip: true
+# Verified for UF 6.0
 ---
 
 If you're upgrading an existing UserFrosting 5 project, you might be wondering about migrating from Webpack Encore to Vite. Good news: you have options! You can migrate to Vite for improved performance, or continue using Webpack if that works better for your project. This guide will help you decide and walk you through both paths.
diff --git a/app/pages/6.0/13.asset-management/06.advanced/docs.md b/app/pages/6.0/13.asset-management/06.advanced/docs.md
index d4ef1696..f7dca5bd 100644
--- a/app/pages/6.0/13.asset-management/06.advanced/docs.md
+++ b/app/pages/6.0/13.asset-management/06.advanced/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Advanced Usage
 description: Advanced techniques for asset management including TypeScript, Vue 3, preprocessors, code splitting, and optimization.
-wip: true
+# Verified for UF 6.0
 ---
 
 Ready to level up your asset management skills? This guide covers advanced techniques that will help you build more sophisticated applications. Don't let the word "advanced" intimidate you—we'll explain each concept clearly, and you can adopt these techniques gradually as your needs grow.
diff --git a/app/pages/6.0/14.database/01.overview/docs.md b/app/pages/6.0/14.database/01.overview/docs.md
index 0b4d61ad..0f2cf58b 100644
--- a/app/pages/6.0/14.database/01.overview/docs.md
+++ b/app/pages/6.0/14.database/01.overview/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Overview
 description: UserFrosting uses Eloquent, Laravel's powerful ORM, to provide a fluent query builder and active record layer on top of your database.
-obsolete: true
+wip: true
 ---
 
 Even in relatively simple applications, writing out the same types of database queries over and over can get tedious. To make things easier and your code [DRY](https://en.wikipedia.org/wiki/Don't_repeat_yourself)er, UserFrosting takes advantage of Laravel's excellent object-relation mapper, **[Eloquent](https://laravel.com/docs/8.x/eloquent#introduction)**.
diff --git a/app/pages/6.0/14.database/02.default-tables/docs.md b/app/pages/6.0/14.database/02.default-tables/docs.md
index 6d2bcd73..f7e0d040 100644
--- a/app/pages/6.0/14.database/02.default-tables/docs.md
+++ b/app/pages/6.0/14.database/02.default-tables/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Default Tables
 description: UserFrosting's installer creates a number of tables by default.  Here, we explain the purpose of each table.
-obsolete: true
+wip: true
 ---
 
 When you install UserFrosting with the [Bakery CLI](cli), a number of tables will automatically added to your database. These tables are required for UserFrosting's built-in features, such as user accounts, request throttling, persistent sessions, and access control.
diff --git a/app/pages/6.0/14.database/03.migrations/docs.md b/app/pages/6.0/14.database/03.migrations/docs.md
index d68203bc..a10f8db6 100644
--- a/app/pages/6.0/14.database/03.migrations/docs.md
+++ b/app/pages/6.0/14.database/03.migrations/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Migrations
 description: Extend the database and add your own tables in a consistent and easily replicable way with a migration.
-obsolete: true
+wip: true
 ---
 
 When you start building your application with UserFrosting, you'll no doubt be adding your own tables to the data model. After all, what's the point of having users if there's nothing in your application for them to use?
diff --git a/app/pages/6.0/14.database/04.seeding/docs.md b/app/pages/6.0/14.database/04.seeding/docs.md
index 34373b86..e728c5c3 100644
--- a/app/pages/6.0/14.database/04.seeding/docs.md
+++ b/app/pages/6.0/14.database/04.seeding/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Database Seeding
 description: Seeding is a simple way to populate the database with default data.
-obsolete: true
+wip: true
 ---
 
 Seeding can be used to populate the database. A seed is perfect to add test or default data to the database at any moment.
diff --git a/app/pages/6.0/14.database/05.data-sprunjing/docs.md b/app/pages/6.0/14.database/05.data-sprunjing/docs.md
index c3a3182a..61356381 100644
--- a/app/pages/6.0/14.database/05.data-sprunjing/docs.md
+++ b/app/pages/6.0/14.database/05.data-sprunjing/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Data Sprunjing
 description: Sprunjing is our term for the common task of filtering, sorting, and paginating data from the database.  Data can be sprunjed for JSON or CSV output.
-obsolete: true
+wip: true
 ---
 
 Once your users log in, you'll probably want to have them interact with your data models in some way. One very common UI pattern is to present a list or table of data to a user, and allow them to **sort**, **paginate**, and **search/filter** the data. For example, the [tablesorter](https://mottie.github.io/tablesorter/docs/) and [select2](http://select2.github.io/) plugins follow this pattern.
diff --git a/app/pages/6.0/14.database/chapter.md b/app/pages/6.0/14.database/chapter.md
index d7e477e7..f464622f 100644
--- a/app/pages/6.0/14.database/chapter.md
+++ b/app/pages/6.0/14.database/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: Database
 description: UserFrosting uses Laravel's Eloquent component to provide a convenient abstraction layer on top of your database.
-obsolete: true
+wip: true
 ---
 
 #### Chapter 14
diff --git a/app/pages/6.0/16.mail/01.the-mailer-service/docs.md b/app/pages/6.0/16.mail/01.the-mailer-service/docs.md
index f9eda77e..13e26110 100644
--- a/app/pages/6.0/16.mail/01.the-mailer-service/docs.md
+++ b/app/pages/6.0/16.mail/01.the-mailer-service/docs.md
@@ -1,7 +1,7 @@
 ---
 title: The Mailer Service
 description: UserFrosting's mailer service integrates smoothly with Twig to create dynamically generated messages.  Templated messages can be sent to large groups of recipients, customizing the content for each recipient.
-obsolete: true
+wip: true
 ---
 
 ## Configuration
diff --git a/app/pages/6.0/16.mail/chapter.md b/app/pages/6.0/16.mail/chapter.md
index a899fdf2..d00d3ccb 100644
--- a/app/pages/6.0/16.mail/chapter.md
+++ b/app/pages/6.0/16.mail/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: Mail
 description: Email is essential for many of UserFrosting's account features, including account verification and password reset requests.
-obsolete: true
+wip: true
 ---
 
 #### Chapter 16
diff --git a/app/pages/6.0/17.i18n/01.introduction/docs.md b/app/pages/6.0/17.i18n/01.introduction/docs.md
index 52f19b89..b7ff7cd5 100644
--- a/app/pages/6.0/17.i18n/01.introduction/docs.md
+++ b/app/pages/6.0/17.i18n/01.introduction/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Introduction
 description: An introduction to UserFrosting i18n system
-obsolete: true
+wip: true
 ---
 
 UserFrosting provides a complete framework for translating strings and sentences easily and efficiently. UserFrosting allows you to [define the default locale](i18n/site-locale#the-default-locale) your UI should present to guest users, while allowing resgistered users to [choose their prefered locale](i18n/site-locale#the-available-user-locales).
diff --git a/app/pages/6.0/17.i18n/02.site-locale/docs.md b/app/pages/6.0/17.i18n/02.site-locale/docs.md
index 91555a13..9845305e 100644
--- a/app/pages/6.0/17.i18n/02.site-locale/docs.md
+++ b/app/pages/6.0/17.i18n/02.site-locale/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Setting up the site language
 description: Configuration options are available to control the overall language presented by UserFrosting.
-obsolete: true
+wip: true
 ---
 
 UserFrosting is translated in a variaty of languages provided by our community. While a default locale will be used for new visitors, each user can  choose their prefered language.
diff --git a/app/pages/6.0/17.i18n/03.translator/docs.md b/app/pages/6.0/17.i18n/03.translator/docs.md
index a6445641..7f3aa384 100644
--- a/app/pages/6.0/17.i18n/03.translator/docs.md
+++ b/app/pages/6.0/17.i18n/03.translator/docs.md
@@ -1,7 +1,7 @@
 ---
 title: The translator
 description: Each sprinkle can overwrite or add new translations keys using translation files
-obsolete: true
+wip: true
 ---
 
 Now that we've [seen the basics](i18n/introduction), it's time to actually use the translator in code, and learn a little bit more about special features the translator offers, mainly **placeholder**, **pluralization** and **nested keys**.
diff --git a/app/pages/6.0/17.i18n/04.custom-locale/docs.md b/app/pages/6.0/17.i18n/04.custom-locale/docs.md
index 49f7e5fc..8ab033b9 100644
--- a/app/pages/6.0/17.i18n/04.custom-locale/docs.md
+++ b/app/pages/6.0/17.i18n/04.custom-locale/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Creating a custom locale
 description: Creating a custom locale is easy, and will allow to reach more users.
-obsolete: true
+wip: true
 ---
 
 Whether to add an unsupported language (Klingon anyone?), to create a new dialect (eg. French Canadian), or simply to modify the predefined values, a custom locale can help you communicate with your end users.
diff --git a/app/pages/6.0/17.i18n/chapter.md b/app/pages/6.0/17.i18n/chapter.md
index b1f14c17..0dc7d624 100644
--- a/app/pages/6.0/17.i18n/chapter.md
+++ b/app/pages/6.0/17.i18n/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: Internationalization
 description: Internationalization consists of the translation files used to translate pages of your web application. UserFrosting provides a framework for translating strings and sentences easily and efficiently.
-obsolete: true
+wip: true
 ---
 
 #### Chapter 17
diff --git a/app/pages/6.0/18.advanced/01.custom-models/docs.md b/app/pages/6.0/18.advanced/01.custom-models/docs.md
index 150961ee..2d6b9461 100644
--- a/app/pages/6.0/18.advanced/01.custom-models/docs.md
+++ b/app/pages/6.0/18.advanced/01.custom-models/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Using Custom Data Models
 description: The dependency injector makes it easy to override entire data models in your Sprinkle.
-obsolete: true
+wip: true
 ---
 
 Extending PHP classes is a little different from extending other types of entities. You cannot simply replace a class by redefining it in a custom Sprinkle. In fact, classes with the same name in two different Sprinkles would be treated as two different fully-qualified classes per the [PSR-4 standard](http://www.php-fig.org/psr/psr-4/). For example, if I loaded the Sprinkles `Account` and `Site`, and I had the following structure:
diff --git a/app/pages/6.0/18.advanced/03.application-lifecycle/docs.md b/app/pages/6.0/18.advanced/03.application-lifecycle/docs.md
index 9b28c55f..e43de0f2 100644
--- a/app/pages/6.0/18.advanced/03.application-lifecycle/docs.md
+++ b/app/pages/6.0/18.advanced/03.application-lifecycle/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Application Lifecycle
 description: Each Sprinkle may define a bootstrapper class that allows it to hook into various stages of the UserFrosting application lifecycle.
-obsolete: true
+wip: true
 ---
 
 Every time UserFrosting is booted up to handle a request, it goes through its **application lifecycle**. This process includes loading the resources and [services](services) in your Sprinkles, setting up the [Slim application](https://www.slimframework.com/docs/v3/objects/application.html), registering middleware, and setting up your [routes](routes-and-controllers/front-controller).
diff --git a/app/pages/6.0/18.advanced/04.error-handling/docs.md b/app/pages/6.0/18.advanced/04.error-handling/docs.md
index ab32b9ce..2851f186 100644
--- a/app/pages/6.0/18.advanced/04.error-handling/docs.md
+++ b/app/pages/6.0/18.advanced/04.error-handling/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Exceptions and Error Handling
 description: UserFrosting provides a rich set of features for catching errors and exceptions, logging or displaying detailed error information, and providing appropriate responses to the client.
-obsolete: true
+wip: true
 ---
 
 Things don't always go the way they were intended in your application. Sometimes this is the client's fault, and sometimes it is the server's (i.e. _your_) fault. When this happens, it is important that your application:
diff --git a/app/pages/6.0/18.advanced/05.sessions/docs.md b/app/pages/6.0/18.advanced/05.sessions/docs.md
index 9f52d6dd..a1922143 100644
--- a/app/pages/6.0/18.advanced/05.sessions/docs.md
+++ b/app/pages/6.0/18.advanced/05.sessions/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Sessions
 description: UserFrosting offers an easy to use wrapper for PHP sessions, and supports session drivers for file and database storage mechanisms.
-obsolete: true
+wip: true
 ---
 
 HTTP itself is stateless - you may recall that we compare a web application to a [conversation between two agents with very poor memory](background/the-client-server-conversation). This presents a problem if we want to implement a "login" functionality - the server needs to be able to remember that someone has already authenticated in an earlier request!
diff --git a/app/pages/6.0/18.advanced/06.caching/01.intro/docs.md b/app/pages/6.0/18.advanced/06.caching/01.intro/docs.md
index b6a7207d..86fbf7bd 100644
--- a/app/pages/6.0/18.advanced/06.caching/01.intro/docs.md
+++ b/app/pages/6.0/18.advanced/06.caching/01.intro/docs.md
@@ -2,7 +2,7 @@
 title: What, Why, and When?
 description:
     metadata: This section explains the motivation and rationale behind caching, and presents several scenarios where caching can help improve the performance of your server and application, as well as improve user experience.
-obsolete: true
+wip: true
 ---
 
 PHP scripts are executed at run time. This means that every time someone refreshes a page from your website in their browser, all the code defined in your app needs to be interpreted by the PHP engine. Modern hardware and processing power means that even complex PHP scripts can be executed in seconds. However, this is not _always_ the case, especially when dealing with external data.
diff --git a/app/pages/6.0/18.advanced/06.caching/02.usage/docs.md b/app/pages/6.0/18.advanced/06.caching/02.usage/docs.md
index 2f12bebd..1b6e1c79 100644
--- a/app/pages/6.0/18.advanced/06.caching/02.usage/docs.md
+++ b/app/pages/6.0/18.advanced/06.caching/02.usage/docs.md
@@ -2,7 +2,7 @@
 title: The Cache Service
 description:
     metadata: UserFrosting provides a convenient global caching service for your application, as well as user-specific caches for user data.
-obsolete: true
+wip: true
 ---
 
 ## The Cache service
diff --git a/app/pages/6.0/18.advanced/06.caching/docs.md b/app/pages/6.0/18.advanced/06.caching/docs.md
index 92771fb7..7a465e3d 100644
--- a/app/pages/6.0/18.advanced/06.caching/docs.md
+++ b/app/pages/6.0/18.advanced/06.caching/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Cache
 description: Caching can help improve the performance of your server and application, as well as improve user experience.
-obsolete: true
+wip: true
 ---
 
 # Cache
diff --git a/app/pages/6.0/18.advanced/07.alert-stream/docs.md b/app/pages/6.0/18.advanced/07.alert-stream/docs.md
index aef35003..4c83ca39 100644
--- a/app/pages/6.0/18.advanced/07.alert-stream/docs.md
+++ b/app/pages/6.0/18.advanced/07.alert-stream/docs.md
@@ -1,7 +1,7 @@
 ---
 title: The Alert Stream
 description: The alert stream is UserFrosting's implementation of a flash messaging system, and is used to display error or success notifications to the end user.
-obsolete: true
+wip: true
 ---
 
 The **alert stream** is UserFrosting's implementation of a flash messaging system, and is used to display error or success notifications to the end user.
diff --git a/app/pages/6.0/18.advanced/08.locator/docs.md b/app/pages/6.0/18.advanced/08.locator/docs.md
index cbf2fd9f..b6048ff5 100644
--- a/app/pages/6.0/18.advanced/08.locator/docs.md
+++ b/app/pages/6.0/18.advanced/08.locator/docs.md
@@ -1,6 +1,6 @@
 ---
 title: Locator Service
-obsolete: true
+wip: true
 ---
 
 The locator service goal is to provides an abstraction layer for the different files and folders available across different sprinkles inside UserFrosting. In other words, it is a way of aggregating many search paths together. As you've seen in the previous chapters, each sprinkle can provides multiple resources and sprinkles can have the ability to overwrite a previous sprinkle resources. All of those resources, combined with the overwriting properties of a sprinkle is handled by the locator service. _Templates_ and _config_ files are a good example of those resources.
diff --git a/app/pages/6.0/18.advanced/09.logging/docs.md b/app/pages/6.0/18.advanced/09.logging/docs.md
index c1f99eee..8a87b23a 100644
--- a/app/pages/6.0/18.advanced/09.logging/docs.md
+++ b/app/pages/6.0/18.advanced/09.logging/docs.md
@@ -1,6 +1,6 @@
 ---
 title: Logging
-obsolete: true
+wip: true
 ---
 
 To contribute to this documentation, please submit a pull request to our [learn repository](https://github.com/userfrosting/learn/tree/master/pages).
diff --git a/app/pages/6.0/18.advanced/10.storage/docs.md b/app/pages/6.0/18.advanced/10.storage/docs.md
index 14526564..efcc1800 100644
--- a/app/pages/6.0/18.advanced/10.storage/docs.md
+++ b/app/pages/6.0/18.advanced/10.storage/docs.md
@@ -1,6 +1,6 @@
 ---
 title: File Storage
-obsolete: true
+wip: true
 ---
 
 The filesystem service provides access to locally and remotely stored files using the [Flysystem](https://github.com/thephpleague/flysystem) PHP package by Frank de Jonge. Based on [Laravel Flysystem integration](https://laravel.com/docs/8.x/filesystem), UserFrosting integration provides simple to use drivers for working with local filesystems, Amazon S3, and Rackspace Cloud Storage. Even better, it's amazingly simple to switch between these storage options as the API remains the same for each system. You can even [add your own adapter](advanced/storage#custom-driver-setup) in your sprinkle if you need access to the many adapter supported by Flysystem.
diff --git a/app/pages/6.0/18.advanced/11.events/docs.md b/app/pages/6.0/18.advanced/11.events/docs.md
index 147add33..8c5bfb66 100644
--- a/app/pages/6.0/18.advanced/11.events/docs.md
+++ b/app/pages/6.0/18.advanced/11.events/docs.md
@@ -1,6 +1,6 @@
 ---
 title: Events
-obsolete: true
+wip: true
 ---
 
 UserFrosting makes uses of *Event Dispatching* to enable customization of some built-in features. For example, when someone uses the login form, the following process is done : 
diff --git a/app/pages/6.0/18.advanced/12.middlewares/docs.md b/app/pages/6.0/18.advanced/12.middlewares/docs.md
index e8b19e4f..50c2d999 100644
--- a/app/pages/6.0/18.advanced/12.middlewares/docs.md
+++ b/app/pages/6.0/18.advanced/12.middlewares/docs.md
@@ -1,6 +1,6 @@
 ---
 title: Middlewares
-obsolete: true
+wip: true
 ---
 
 Sometimes it can be useful to run code _before_ or _after_ the the request is handled, to either manipulate the Request and/or the Response objects. This can be done by _middlewares_. Middlewares can be used to add many feature to every page or simple routes, for example to add protection to the website, handle some configuration, inject some variable, etc.
diff --git a/app/pages/6.0/18.advanced/chapter.md b/app/pages/6.0/18.advanced/chapter.md
index 222e9ea0..84e9e62e 100644
--- a/app/pages/6.0/18.advanced/chapter.md
+++ b/app/pages/6.0/18.advanced/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: Advanced Dev Features
 description: A look under the hood, at some of UserFrosting's less well-known features.
-obsolete: true
+wip: true
 ---
 
 #### Chapter 18
diff --git a/app/pages/6.0/19.testing/01.why-test/docs.md b/app/pages/6.0/19.testing/01.why-test/docs.md
index 45df4187..5bfab212 100644
--- a/app/pages/6.0/19.testing/01.why-test/docs.md
+++ b/app/pages/6.0/19.testing/01.why-test/docs.md
@@ -1,6 +1,6 @@
 ---
 title: Why Use Automated Testing ?
-obsolete: true
+wip: true
 ---
 
 To contribute to this documentation, please submit a pull request to our [learn repository](https://github.com/userfrosting/learn/tree/master/pages).
diff --git a/app/pages/6.0/19.testing/02.running-tests/docs.md b/app/pages/6.0/19.testing/02.running-tests/docs.md
index ec16eaa8..f171543d 100644
--- a/app/pages/6.0/19.testing/02.running-tests/docs.md
+++ b/app/pages/6.0/19.testing/02.running-tests/docs.md
@@ -1,6 +1,6 @@
 ---
 title: Running Tests
-obsolete: true
+wip: true
 ---
 
 You can execute tests using [Phpunit](https://phpunit.de) directly : 
diff --git a/app/pages/6.0/19.testing/03.writting-tests/01.testcase/docs.md b/app/pages/6.0/19.testing/03.writting-tests/01.testcase/docs.md
index afb5c8af..5df3ee7a 100644
--- a/app/pages/6.0/19.testing/03.writting-tests/01.testcase/docs.md
+++ b/app/pages/6.0/19.testing/03.writting-tests/01.testcase/docs.md
@@ -1,6 +1,6 @@
 ---
 title: Sprinkle Test Case
-obsolete: true
+wip: true
 ---
 
 To make it easier to run your tests in your Sprinkle environment, that is with every routes, middlewares and other class registered in your Recipe, UserFrosting provides a base TestCase you can use. You simply need to tell the TestCase to use your Recipe. It will create a simple UserFrosting app instance, and cleanly destroy it when the test is done. It also provides some additional helper methods.
diff --git a/app/pages/6.0/19.testing/03.writting-tests/02.Traits/docs.md b/app/pages/6.0/19.testing/03.writting-tests/02.Traits/docs.md
index 56e7f569..79cd859e 100644
--- a/app/pages/6.0/19.testing/03.writting-tests/02.Traits/docs.md
+++ b/app/pages/6.0/19.testing/03.writting-tests/02.Traits/docs.md
@@ -1,6 +1,6 @@
 ---
 title: Helper Traits & Class
-obsolete: true
+wip: true
 ---
 
 UserFrosting provides some helper Traits to easily enable features and tools for your tests. Some of those tools make it easier to test your code against a testing database.
diff --git a/app/pages/6.0/19.testing/03.writting-tests/03.Factories/docs.md b/app/pages/6.0/19.testing/03.writting-tests/03.Factories/docs.md
index 86b049e0..567105ef 100644
--- a/app/pages/6.0/19.testing/03.writting-tests/03.Factories/docs.md
+++ b/app/pages/6.0/19.testing/03.writting-tests/03.Factories/docs.md
@@ -1,6 +1,6 @@
 ---
 title: Factories
-obsolete: true
+wip: true
 ---
 
 > [!NOTE]
diff --git a/app/pages/6.0/19.testing/03.writting-tests/docs.md b/app/pages/6.0/19.testing/03.writting-tests/docs.md
index 5493a5ea..e70d422f 100644
--- a/app/pages/6.0/19.testing/03.writting-tests/docs.md
+++ b/app/pages/6.0/19.testing/03.writting-tests/docs.md
@@ -1,6 +1,6 @@
 ---
 title: Writing Your Own Tests
-obsolete: true
+wip: true
 ---
 
 To contribute to this documentation, please submit a pull request to our [learn repository](https://github.com/userfrosting/learn/tree/master/pages).
diff --git a/app/pages/6.0/19.testing/chapter.md b/app/pages/6.0/19.testing/chapter.md
index 2581cfe0..cc96e7d2 100644
--- a/app/pages/6.0/19.testing/chapter.md
+++ b/app/pages/6.0/19.testing/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: Testing
 description: An introduction to Unit and Integration testing, your most powerful ally.
-obsolete: true
+wip: true
 ---
 
 #### Chapter 19
diff --git a/app/pages/6.0/20.recipes/01.creating-a-new-page/docs.md b/app/pages/6.0/20.recipes/01.creating-a-new-page/docs.md
index be634931..cb6f9861 100644
--- a/app/pages/6.0/20.recipes/01.creating-a-new-page/docs.md
+++ b/app/pages/6.0/20.recipes/01.creating-a-new-page/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Creating a new page
 description: A very basic walkthrough for setting up a new page in your application. The purpose of this recipe is to get you familiar with adding routes, controller classes, and Twig templates to your Sprinkle.
-obsolete: true
+wip: true
 ---
 
 Before we begin this tutorial, it is important that you understand what a web page really is. Unfortunately, many "classic" approaches to building a website give developers the mistaken impression that a web page "is" either a static `.html` page or a scripted `.php` page. Neither of these approaches are conceptually correct.
diff --git a/app/pages/6.0/20.recipes/02.extending-the-user-model/docs.md b/app/pages/6.0/20.recipes/02.extending-the-user-model/docs.md
index 37a64084..79ab24b3 100644
--- a/app/pages/6.0/20.recipes/02.extending-the-user-model/docs.md
+++ b/app/pages/6.0/20.recipes/02.extending-the-user-model/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Extending the User model
 description: Extend the user model, adding custom fields and views.
-obsolete: true
+wip: true
 ---
 
 > [!TIP]
diff --git a/app/pages/6.0/20.recipes/03.extending-template/docs.md b/app/pages/6.0/20.recipes/03.extending-template/docs.md
index abcd195f..6d5c121e 100644
--- a/app/pages/6.0/20.recipes/03.extending-template/docs.md
+++ b/app/pages/6.0/20.recipes/03.extending-template/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Extending templates and menus
 description: Steps to extend a template defined in another sprinkle.
-obsolete: true
+wip: true
 ---
 
 > [!NOTE]
diff --git a/app/pages/6.0/20.recipes/04.custom-login-page/docs.md b/app/pages/6.0/20.recipes/04.custom-login-page/docs.md
index 0a068101..4a8ef5c2 100644
--- a/app/pages/6.0/20.recipes/04.custom-login-page/docs.md
+++ b/app/pages/6.0/20.recipes/04.custom-login-page/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Customizing the login page
 description: An example of how to modify UserFrosting's default login page and behavior.
-obsolete: true
+wip: true
 ---
 
 > [!NOTE]
diff --git a/app/pages/6.0/20.recipes/05.changing-user-permissions/docs.md b/app/pages/6.0/20.recipes/05.changing-user-permissions/docs.md
index 67cced40..93fe3af9 100644
--- a/app/pages/6.0/20.recipes/05.changing-user-permissions/docs.md
+++ b/app/pages/6.0/20.recipes/05.changing-user-permissions/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Changing user permissions
 description: An example of how to give access to UserFrosting's default user and group pages to any registered users. Users are granted additional permissions through their roles.
-obsolete: true
+wip: true
 ---
 
 This recipe will guide you on how to give access to the users and groups pages to any registered users. To see the results, you'll need to use two user accounts: The root account and a non-root account. The root account will be used to change the roles from the UI and the non-root user to test those changes.
diff --git a/app/pages/6.0/20.recipes/06.external-js/docs.md b/app/pages/6.0/20.recipes/06.external-js/docs.md
index d1a78d58..8f27734a 100644
--- a/app/pages/6.0/20.recipes/06.external-js/docs.md
+++ b/app/pages/6.0/20.recipes/06.external-js/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Adding a 3rd party Javascript package
 description: An example of how to add a 3rd party javascript package using Webpack.
-obsolete: true
+wip: true
 ---
 
 > [!NOTE]
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/01.base-setup/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/01.base-setup/docs.md
index fe5a4cde..12f4769f 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/01.base-setup/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/01.base-setup/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Setting up the basics
 description: Setting up the basic sprinkle
-obsolete: true
+wip: true
 ---
 
 ## The Base Sprinkle
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/02.database/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/02.database/docs.md
index 3a75abe3..2abdbe4e 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/02.database/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/02.database/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Integrating the Database
 description: Customizing our UserFrosting controller to retrieve dynamic data from the database and display it in our page.
-obsolete: true
+wip: true
 ---
 
 Now that we have a sprinkle with an empty page to work with, it's time to get started with our database integration. Our data structures for the database table will be straightforward. We'll store pastries in a `pastries` table using the following columns:
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/03.adding-menu/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/03.adding-menu/docs.md
index ec7583f1..9fdfa811 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/03.adding-menu/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/03.adding-menu/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Adding the page to the menu
 description: Adding our custom page to the sidebar menu using a template extension.
-obsolete: true
+wip: true
 ---
 
 Now that we have our page, it's time to add it to the sidebar menu. To do so, we will [extend the default menu template](recipes/extending-template#adding-custom-menu-entries).
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/04.custom-permissions/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/04.custom-permissions/docs.md
index 2513899a..254816a5 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/04.custom-permissions/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/04.custom-permissions/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Adding custom authorization
 description: Adding custom authorization rules to control access to our Pastries page.
-obsolete: true
+wip: true
 ---
 
 Now it's time to add custom authorization rules to our page. We will use these rules to control two things: visibility of the page itself, and visibility of the `origin` column in the table. Each one will require a new [permission](users/access-control#permissions).
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/05.localization/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/05.localization/docs.md
index 70677cbd..f0b917d2 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/05.localization/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/05.localization/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Adding localizations
 description: Adding localization to the page, making the page available in multiple languages.
-obsolete: true
+wip: true
 ---
 
 This section covers situations where you have an internationalized application - i.e., the text will need to be displayed in different languages for different users. We will first need to change the hardcoded English strings to localization keys, which create an extra layer of abstraction by mapping a common identifier to the corresponding English string. Once this is done, we'll add *French* translations for these same identifiers.
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/06.custom-namespace/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/06.custom-namespace/docs.md
index 7110a4e1..9f94c305 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/06.custom-namespace/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/06.custom-namespace/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Customizing the Skeleton
 description: The default skeleton can easily be changed
-obsolete: true
+wip: true
 ---
 
 ## Custom Namespace
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/07.going-further/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/07.going-further/docs.md
index 1e2329c8..fce04890 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/07.going-further/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/07.going-further/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Going further
 description: Ideas on how to further improve the pastry page and learn more about UserFrosting!
-obsolete: true
+wip: true
 ---
 
 We now have a complete, but very basic page to display a table of data dynamically powered by the database. But, there is a lot more we can still do to improve this page! Continue exploring the documentation to learn how to add more features to your pastry page:
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/chapter.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/chapter.md
index b5a5c6e9..08fab62e 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/chapter.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: Advanced tutorial
 description: A complete step-by-step guide to creating a complex page for UserFrosting. We'll set up a new "Pastry" database table and data model, and implement a page that displays a sortable, searchable table of these entities.
-obsolete: true
+wip: true
 ---
 
 # Advanced tutorial
diff --git a/app/pages/6.0/20.recipes/chapter.md b/app/pages/6.0/20.recipes/chapter.md
index 5b3ddb79..25170437 100644
--- a/app/pages/6.0/20.recipes/chapter.md
+++ b/app/pages/6.0/20.recipes/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: Recipes
 description: Solutions for common tasks in creating an application based on UserFrosting.
-obsolete: true
+wip: true
 ---
 
 #### Chapter 20
diff --git a/app/pages/6.0/21.going-live/01.hosting/docs.md b/app/pages/6.0/21.going-live/01.hosting/docs.md
index a450b652..2f5c0fa0 100644
--- a/app/pages/6.0/21.going-live/01.hosting/docs.md
+++ b/app/pages/6.0/21.going-live/01.hosting/docs.md
@@ -2,7 +2,7 @@
 title: Hosting Your Site
 description:
     metadata: UserFrosting can easily be deployed to any server with PHP 7.3 or higher, a compatible database, and a webserver application (nginx, Apache, or IIS).
-obsolete: true
+wip: true
 ---
 
 > [!NOTE]
diff --git a/app/pages/6.0/21.going-live/02.mail-providers/docs.md b/app/pages/6.0/21.going-live/02.mail-providers/docs.md
index 4df66953..0b279c63 100644
--- a/app/pages/6.0/21.going-live/02.mail-providers/docs.md
+++ b/app/pages/6.0/21.going-live/02.mail-providers/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Mail Providers
 description: Email is essential for many of UserFrosting's account features, including account verification and password reset requests.
-obsolete: true
+wip: true
 ---
 
 By default, UserFrosting is configured to use an external SMTP mail server of your choice.
diff --git a/app/pages/6.0/21.going-live/03.vps-production-environment/01.server-setup/docs.md b/app/pages/6.0/21.going-live/03.vps-production-environment/01.server-setup/docs.md
index ddb4fdbf..cc17183b 100644
--- a/app/pages/6.0/21.going-live/03.vps-production-environment/01.server-setup/docs.md
+++ b/app/pages/6.0/21.going-live/03.vps-production-environment/01.server-setup/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Server Setup
 description: No matter which VPS option you choose, you'll need to make sure that you have the required software installed and properly configured for UserFrosting.
-obsolete: true
+wip: true
 ---
 <!-- [plugin:content-inject](modular/_updateRequired) -->
 
diff --git a/app/pages/6.0/21.going-live/03.vps-production-environment/02.git-for-deployment/docs.md b/app/pages/6.0/21.going-live/03.vps-production-environment/02.git-for-deployment/docs.md
index 4b347037..a24598ec 100644
--- a/app/pages/6.0/21.going-live/03.vps-production-environment/02.git-for-deployment/docs.md
+++ b/app/pages/6.0/21.going-live/03.vps-production-environment/02.git-for-deployment/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Using Git for Deployment
 description: Once you've set up a remote repository in your production environment, deployment can be as simple as a single `git push` command.
-obsolete: true
+wip: true
 ---
 <!-- [plugin:content-inject](modular/_update5.0) -->
 
diff --git a/app/pages/6.0/21.going-live/03.vps-production-environment/03.application-setup/docs.md b/app/pages/6.0/21.going-live/03.vps-production-environment/03.application-setup/docs.md
index 8e72884d..33b529f9 100644
--- a/app/pages/6.0/21.going-live/03.vps-production-environment/03.application-setup/docs.md
+++ b/app/pages/6.0/21.going-live/03.vps-production-environment/03.application-setup/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Application Setup
 description: This section covers installing and using Composer, running Bakery, and configuring the webserver in the production environment.
-obsolete: true
+wip: true
 ---
 <!-- [plugin:content-inject](modular/_updateRequired) -->
 
diff --git a/app/pages/6.0/21.going-live/03.vps-production-environment/04.ssl/docs.md b/app/pages/6.0/21.going-live/03.vps-production-environment/04.ssl/docs.md
index c8d587d8..4a25d313 100644
--- a/app/pages/6.0/21.going-live/03.vps-production-environment/04.ssl/docs.md
+++ b/app/pages/6.0/21.going-live/03.vps-production-environment/04.ssl/docs.md
@@ -1,7 +1,7 @@
 ---
 title: SSL/HTTPS
 description: It is extremely important to use an SSL certificate when you go live.  Using SSL will prevent malicious agents on unsecured networks from intercepting your users' passwords when they log in to your application, as well as other sensitive information.
-obsolete: true
+wip: true
 ---
 <!-- [plugin:content-inject](modular/_updateRequired) -->
 
diff --git a/app/pages/6.0/21.going-live/03.vps-production-environment/05.additional-recommendations/docs.md b/app/pages/6.0/21.going-live/03.vps-production-environment/05.additional-recommendations/docs.md
index 6c7faa3a..31688735 100644
--- a/app/pages/6.0/21.going-live/03.vps-production-environment/05.additional-recommendations/docs.md
+++ b/app/pages/6.0/21.going-live/03.vps-production-environment/05.additional-recommendations/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Additional Recommendations
 description: Additional recommended configuration steps to get the most out of your VPS production server.
-obsolete: true
+wip: true
 ---
 <!-- [plugin:content-inject](modular/_updateRequired) -->
 
diff --git a/app/pages/6.0/21.going-live/03.vps-production-environment/docs.md b/app/pages/6.0/21.going-live/03.vps-production-environment/docs.md
index 20da7deb..ed3417e1 100644
--- a/app/pages/6.0/21.going-live/03.vps-production-environment/docs.md
+++ b/app/pages/6.0/21.going-live/03.vps-production-environment/docs.md
@@ -1,7 +1,7 @@
 ---
 title: VPS Production Environment
 description: The place where your application lives and runs is known as the production environment, and the act of transferring your code from the development environment to the production environment is known as deployment. This chapter explains how to set up a production environment on a VPS.
-obsolete: true
+wip: true
 ---
 <!-- [plugin:content-inject](modular/_update5.0) -->
 
diff --git a/app/pages/6.0/21.going-live/04.backup/docs.md b/app/pages/6.0/21.going-live/04.backup/docs.md
index f3fde5b6..b1b9d89a 100644
--- a/app/pages/6.0/21.going-live/04.backup/docs.md
+++ b/app/pages/6.0/21.going-live/04.backup/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Backing up Your Data
 description: If you're using version control and use a reliable central repository, your code is generally safe from data loss due to hardware failure, and accidents. But what about your live database? In this chapter, we'll show you how to set up automated, encrypted daily backups with Duplicity.
-obsolete: true
+wip: true
 ---
 <!-- [plugin:content-inject](modular/_updateRequired) -->
 
diff --git a/app/pages/6.0/21.going-live/05.unix-primer-ubuntu/docs.md b/app/pages/6.0/21.going-live/05.unix-primer-ubuntu/docs.md
index 3d9d77d6..4852445b 100644
--- a/app/pages/6.0/21.going-live/05.unix-primer-ubuntu/docs.md
+++ b/app/pages/6.0/21.going-live/05.unix-primer-ubuntu/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Unix Primer for Ubuntu
 description: This chapter covers the most common commands and files that web developers might encounter when working with Ubuntu.
-obsolete: true
+wip: true
 ---
 <!-- [plugin:content-inject](modular/_updateRequired) -->
 
diff --git a/app/pages/6.0/21.going-live/chapter.md b/app/pages/6.0/21.going-live/chapter.md
index 92d214cf..63d9b4fe 100644
--- a/app/pages/6.0/21.going-live/chapter.md
+++ b/app/pages/6.0/21.going-live/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: Going Live
 description: This chapter discusses options for where to deploy your UserFrosting application (hosting), how to deploy, and what additional steps you should take to ensure security, reliability, and a good experience for your users.
-obsolete: true
+wip: true
 ---
 
 #### Chapter 21
diff --git a/app/pages/6.0/23.contributing/01.supporting-userfrosting/docs.md b/app/pages/6.0/23.contributing/01.supporting-userfrosting/docs.md
index 30b36354..f434a892 100644
--- a/app/pages/6.0/23.contributing/01.supporting-userfrosting/docs.md
+++ b/app/pages/6.0/23.contributing/01.supporting-userfrosting/docs.md
@@ -1,7 +1,7 @@
 ---
 title: Supporting UserFrosting
 description: Donate your time, money, or expertise to furthering the development of UserFrosting.
-obsolete: true
+wip: true
 ---
 
 ## Financial support
diff --git a/app/pages/6.0/23.contributing/chapter.md b/app/pages/6.0/23.contributing/chapter.md
index 30bf90c1..d1501c98 100644
--- a/app/pages/6.0/23.contributing/chapter.md
+++ b/app/pages/6.0/23.contributing/chapter.md
@@ -1,7 +1,7 @@
 ---
 title: Giving Back to UF
 description: UserFrosting is possible thanks to the generous contributions of users like you!
-obsolete: true
+wip: true
 ---
 
 #### Chapter 23

From 67e3b309e68a5ae16fc7f71bbba190982c34b340 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 31 Jan 2026 23:39:45 +0000
Subject: [PATCH 07/13] Fix all relative image paths to use absolute paths

Co-authored-by: lcharette <2566513+lcharette@users.noreply.github.com>
---
 app/pages/6.0/01.quick-start/docs.md             |  2 +-
 .../04.dont-reinvent-the-wheel/docs.md           |  2 +-
 .../01.server-misconfiguration/docs.md           |  2 +-
 app/pages/6.0/02.background/06.seo/docs.md       |  2 +-
 .../02.environment/01.native/02.install/docs.md  |  4 ++--
 .../6.0/05.troubleshooting/01.debugging/docs.md  | 16 ++++++++--------
 .../05.troubleshooting/02.getting-help/docs.md   |  2 +-
 app/pages/6.0/06.sprinkles/04.customize/docs.md  |  2 +-
 .../06.client-input/01.validation/docs.md        |  2 +-
 app/pages/6.0/10.users/01.user-accounts/docs.md  | 16 ++++++++--------
 .../6.0/10.users/04.activity-logging/docs.md     |  2 +-
 .../6.0/14.database/05.data-sprunjing/docs.md    |  2 +-
 app/pages/6.0/17.i18n/01.introduction/docs.md    |  2 +-
 .../6.0/18.advanced/07.alert-stream/docs.md      |  2 +-
 .../6.0/20.recipes/04.custom-login-page/docs.md  |  6 +++---
 .../05.changing-user-permissions/docs.md         |  8 ++++----
 app/pages/6.0/20.recipes/06.external-js/docs.md  |  6 +++---
 .../07.advanced-tutorial/01.base-setup/docs.md   |  2 +-
 .../07.advanced-tutorial/02.database/docs.md     |  2 +-
 .../07.advanced-tutorial/03.adding-menu/docs.md  |  2 +-
 .../04.custom-permissions/docs.md                |  6 +++---
 .../07.advanced-tutorial/05.localization/docs.md |  2 +-
 app/pages/6.0/21.going-live/01.hosting/docs.md   |  2 +-
 .../6.0/21.going-live/02.mail-providers/docs.md  |  2 +-
 24 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/app/pages/6.0/01.quick-start/docs.md b/app/pages/6.0/01.quick-start/docs.md
index de69bcd0..14fdd8dc 100644
--- a/app/pages/6.0/01.quick-start/docs.md
+++ b/app/pages/6.0/01.quick-start/docs.md
@@ -60,7 +60,7 @@ You can now access UserFrosting at: [http://localhost:8080](http://localhost:808
 
 At this point, you should be able to access your application. You should see the default front page:
 
-![Basic front page of a UserFrosting installation](images/front-page.png)
+![Basic front page of a UserFrosting installation](/images/front-page.png)
 
 ## What's Next
 
diff --git a/app/pages/6.0/02.background/04.dont-reinvent-the-wheel/docs.md b/app/pages/6.0/02.background/04.dont-reinvent-the-wheel/docs.md
index 78aa0823..25866870 100644
--- a/app/pages/6.0/02.background/04.dont-reinvent-the-wheel/docs.md
+++ b/app/pages/6.0/02.background/04.dont-reinvent-the-wheel/docs.md
@@ -6,7 +6,7 @@ wip: true
 
 I think that for a lot of developers - novices and professionals alike - building on top of others' work can seem like a betrayal of our trade. We're not "real" developers unless we built everything with our bare hands from scratch, and know firsthand the nitty-gritty details of how our code works. With third-party components, we have to take time to actually *learn* how to use them, and follow *their* rules. I get it. It all feels so antithetical to the DIY spirit that got so many of us into coding in the first place. Trust me, as someone who built a cold frame out of some doors and framing I found in the dumpster, I know:
 
-![DIY cold frame](images/cold-frame.jpg?resize=500)
+![DIY cold frame](/images/cold-frame.jpg?resize=500)
 
 However unlike me with with my cold frame, software developers aren't limited by the contents of their local dumpster. With the advent of Composer, the PHP community abounds with free, high-quality third-party packages for pretty much every task imaginable. The trick is to know *which* packages to use, and to avoid getting overwhelmed.
 
diff --git a/app/pages/6.0/02.background/05.security/01.server-misconfiguration/docs.md b/app/pages/6.0/02.background/05.security/01.server-misconfiguration/docs.md
index 9355f65b..19128d9b 100644
--- a/app/pages/6.0/02.background/05.security/01.server-misconfiguration/docs.md
+++ b/app/pages/6.0/02.background/05.security/01.server-misconfiguration/docs.md
@@ -10,7 +10,7 @@ Many PHP developers are used to seeing server-side error messages and stack trac
 
 This is fine in development, and it makes the development cycle tighter by providing immediate feedback to the developer with a simple page refresh or click of a button. However in production (live server), this can lead to serious security breaches:
 
-![Mysql password dumped to browser in PHP](images/display-errors-on.png)
+![Mysql password dumped to browser in PHP](/images/display-errors-on.png)
 
 The lesson here is that code can contain sensitive information that we do not want to share with the end user - for example, passwords and API keys. If something goes wrong with the database connection code, it will generate a stack trace that contains the database credentials. By dumping this trace into the response, your application is risking making this information public.
 
diff --git a/app/pages/6.0/02.background/06.seo/docs.md b/app/pages/6.0/02.background/06.seo/docs.md
index 1e4eb127..d5d68342 100644
--- a/app/pages/6.0/02.background/06.seo/docs.md
+++ b/app/pages/6.0/02.background/06.seo/docs.md
@@ -29,7 +29,7 @@ Google can tell when you're copying content from another page. When it sees copi
 
 Having lots of words on a page gives Google more to work with when it determines how relevant that page is. While you may not _need_ a lot of words to get your point across, it signals to search engines that your pages' contents have real value. At the same time, you need to avoid [keyword stuffing](https://en.wikipedia.org/wiki/Keyword_stuffing) - putting an unnatural number of keywords in your content in an attempt to game the ranking algorithm. This used to work in the past, but nowadays search engines will detect and penalize you if every other sentence is "Garden shed painting."
 
-![Real world SEO](images/real-world-seo.png)
+![Real world SEO](/images/real-world-seo.png)
 
 To summarize, you need to write the text of your pages so that they have a healthy balance of your target keywords without appearing overly spammy. You _do_ know what your target keywords are, right?
 
diff --git a/app/pages/6.0/04.installation/02.environment/01.native/02.install/docs.md b/app/pages/6.0/04.installation/02.environment/01.native/02.install/docs.md
index 8f3062a2..f66e4d17 100644
--- a/app/pages/6.0/04.installation/02.environment/01.native/02.install/docs.md
+++ b/app/pages/6.0/04.installation/02.environment/01.native/02.install/docs.md
@@ -50,7 +50,7 @@ php bakery serve
 
 You can now access UserFrosting at [http://localhost:8080](http://localhost:8080). You should see the default UserFrosting pages and login with the newly created master account. 
 
-![Basic front page of a UserFrosting installation](images/front-page.png)
+![Basic front page of a UserFrosting installation](/images/front-page.png)
 
 > [!TIP]
 > To stop the server, hit `ctrl+c`.
@@ -59,7 +59,7 @@ You can now access UserFrosting at [http://localhost:8080](http://localhost:8080
 
 It will help us a lot if you could star [the UserFrosting project on GitHub](https://github.com/userfrosting/UserFrosting). Just look for the button in the upper right-hand corner!
 
-[![How to star](images/how-to-star.png)](https://github.com/userfrosting/UserFrosting)
+[![How to star](/images/how-to-star.png)](https://github.com/userfrosting/UserFrosting)
 
 You should also follow us on Twitter for real-time news and updates:
 
diff --git a/app/pages/6.0/05.troubleshooting/01.debugging/docs.md b/app/pages/6.0/05.troubleshooting/01.debugging/docs.md
index b7f73fa1..dd0af71d 100644
--- a/app/pages/6.0/05.troubleshooting/01.debugging/docs.md
+++ b/app/pages/6.0/05.troubleshooting/01.debugging/docs.md
@@ -19,17 +19,17 @@ To open the console in Firefox, use the following shortcuts:
  - Windows: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd>
  - MacOS: <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd>
 
-![Firefox developer tools](images/firefox-console-1.png)
+![Firefox developer tools](/images/firefox-console-1.png)
 
 The tool panel will open (usually docked at the bottom) and you'll notice some tabs at the top of this panel: **Inspector**, **Console**, **Debugger**, **Style Editor**, **Performance**, **Network**, and **Settings**. By default, the Console tab should be selected (if not, click it).
 
-![Firefox developer tools - Console tab](images/firefox-console-2.png)
+![Firefox developer tools - Console tab](/images/firefox-console-2.png)
 
 Underneath that, you'll probably see a long list of URLs. These are the requests that your web browser has made so far. To the left of each URL is the request method (GET, POST, PUT, DELETE, etc). To the right is the server response summary. For example, the server responded **HTTP/1.1 200 OK** for the request to **http://localhost/userfrosting/public/alerts**. The status code **200** is used to mean that the request completed "successfully". "Success" is something that your server defines - it's just a way for the server to tell your browser that everything went as expected and that it doesn't need to do anything else.
 
 If you click the response summary, Firefox will open the **Network** tab and show you more details about the request:
 
-![Firefox developer tools - Network tab](images/firefox-console-3.png)
+![Firefox developer tools - Network tab](/images/firefox-console-3.png)
 
 To the right, you'll see tabs for **Headers**, **Cookies**, **Params**, **Response**, and **Timings**. If you scroll down in the Headers tab, you'll see a list of the request and response headers. The request headers contain metadata sent with a particular request, and contain information about your browser, the contents of any cookies for the site, and other information. The response headers contain metadata returned by the server for that request. This can include information like cookies that the site wants the client to store or update, as well as things like the type of content (HTML, image, CSS, JSON, etc) being returned.
 
@@ -37,13 +37,13 @@ The **Cookies** tab just displays the contents of any cookie headers in a more e
 
 #### Params tab
 
-![Firefox developer tools - Params tab](images/firefox-console-4.png)
+![Firefox developer tools - Params tab](/images/firefox-console-4.png)
 
 **Params** shows any data sent in the *body* of the request. **This is extremely useful for debugging client-side code.** Often times, a web application appears to "not work" because the server isn't actually being sent the data it expected. The **Params** tab is a good way to check the actual data that was sent with a particular request.
 
 #### Response tab
 
-![Firefox developer tools - Response tab](images/firefox-console-5.png)
+![Firefox developer tools - Response tab](/images/firefox-console-5.png)
 
 The **Response** tab shows the data sent in the *body* of the response. For requests to a URL representing a web page (like the URL in your browser's navigation bar), the response body simply contains the actual HTML returned from the server, that your browser initially renders. For other requests, it could contain images, Javascript, or structured data in some other format. For example in the request shown above, the response contains structured JSON data representing a list of users currently registered with the application.
 
@@ -100,7 +100,7 @@ For example, we can use it to inspect the contents of a JSON object returned by
 
 Now, when we do something that triggers this request, the `console.log` statement will print the contents of the variable `data` to the browser console:
 
-![Firefox developer tools - Debug print statement](images/firefox-console-6.png)
+![Firefox developer tools - Debug print statement](/images/firefox-console-6.png)
 
 As you can see in the last line of the console output, `data` is an array containing Javascript objects. If we click on "Object", a panel opens to the right that displays the contents of that object.
 
@@ -114,7 +114,7 @@ UserFrosting uses a sophisticated error-handling system to capture exceptions th
 
 By default _in development mode only_, UserFrosting will show a detailed debugging page that contains a full stack trace. For example:
 
-![Sample debug error page](images/debug-page.png)
+![Sample debug error page](/images/debug-page.png)
 
 This page will also show you the contents of your request, the current session variables, and your server/environment variables. For [obvious reasons](background/security/server-misconfiguration), this debugging page is disabled in production.
 
@@ -272,7 +272,7 @@ The best approach is to develop your API in isolation from the page or widget th
 
 As it turns out, you can visit `/api/members` _directly in your browser_, and it will show you the output of the data source! Since **visiting a page in your browser is equivalent to making a GET request**, you can append query strings as well:
 
-![Directly viewing the output of a JSON API](images/debug-api.png)
+![Directly viewing the output of a JSON API](/images/debug-api.png)
 
 Make sure you get the data API itself working properly and producing the kind of output you expect, before you fiddle with the page and/or Javascript that is consuming the API.
 
diff --git a/app/pages/6.0/05.troubleshooting/02.getting-help/docs.md b/app/pages/6.0/05.troubleshooting/02.getting-help/docs.md
index f5b1c43c..370de99b 100644
--- a/app/pages/6.0/05.troubleshooting/02.getting-help/docs.md
+++ b/app/pages/6.0/05.troubleshooting/02.getting-help/docs.md
@@ -48,7 +48,7 @@ Check [Stack Overflow](http://stackoverflow.com/tags/userfrosting) and the [issu
 
 Markdown is the _de facto_ standard for basic text formatting on the web. If you are unfamiliar with Markdown, please [take a few minutes to learn](https://guides.github.com/features/mastering-markdown/#what). It will help you all over the web! In particular, please make sure you know where the **backtick** key (`) is located on your keyboard:
 
-![Location of backtick key](images/backtick.png)
+![Location of backtick key](/images/backtick.png)
 
 ##### Inline code
 
diff --git a/app/pages/6.0/06.sprinkles/04.customize/docs.md b/app/pages/6.0/06.sprinkles/04.customize/docs.md
index 5811a035..529c7d71 100644
--- a/app/pages/6.0/06.sprinkles/04.customize/docs.md
+++ b/app/pages/6.0/06.sprinkles/04.customize/docs.md
@@ -269,7 +269,7 @@ In `default.php`, add the following:
 
 This customizes some basic properties for our application - you can set your site title, author, author's URL, and timezone. Reload the page, and you should see the new site title appear in the upper left corner:
 
-![Overriding site settings in config file](images/site-title.png)
+![Overriding site settings in config file](/images/site-title.png)
 
 The template for this page dynamically pulls that particular piece of text from your new configuration file. Note that your value for `site.title` overrides the value of `site.title` in the core sprinkle's configuration file.
 
diff --git a/app/pages/6.0/08.routes-and-controllers/06.client-input/01.validation/docs.md b/app/pages/6.0/08.routes-and-controllers/06.client-input/01.validation/docs.md
index 0757643a..94ed9ac3 100644
--- a/app/pages/6.0/08.routes-and-controllers/06.client-input/01.validation/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/06.client-input/01.validation/docs.md
@@ -30,7 +30,7 @@ UserFrosting Fortress solves this problem by providing a uniform interface for v
 
 This process is summarized in the following flowchart:
 
-![Flowchart for unified client- and server-side validation.](images/flowchart-fortress.png?resize=800,600)
+![Flowchart for unified client- and server-side validation.](/images/flowchart-fortress.png?resize=800,600)
 
 ### Creating a Schema
 
diff --git a/app/pages/6.0/10.users/01.user-accounts/docs.md b/app/pages/6.0/10.users/01.user-accounts/docs.md
index d3c008aa..4be90516 100644
--- a/app/pages/6.0/10.users/01.user-accounts/docs.md
+++ b/app/pages/6.0/10.users/01.user-accounts/docs.md
@@ -62,7 +62,7 @@ UserFrosting comes with two built-in mechanisms for creating new accounts: publi
 
 In many instances, you will want people to be able to register for your website or application through a publicly accessible page. By default, the registration form is available at `/account/register`.
 
-![Account registration form](images/registration.png)
+![Account registration form](/images/registration.png)
 
 When the registration form is submitted, it will `POST` to the `/account/register` endpoint (which invokes the `RegisterAction` method).
 
@@ -89,17 +89,17 @@ To disable this behavior, set the `site.registration.require_email_verification`
 
 Sometimes, you want to have a site administrator create an account on behalf of a specific user. For some applications, you may want this to be the _only_ way that new accounts can be created. To create a new user as an administrator, use the "create user" button at the bottom of the main user listing page:
 
-![User creation button](images/create-user-button.png)
+![User creation button](/images/create-user-button.png)
 
 You can then fill out details for the user. After you create the user, an email will be automatically sent to them that allows them to set their own password.
 
-![User creation](images/create-user.png)
+![User creation](/images/create-user.png)
 
 ## Login form
 
 By default, the login form is available at `/account/sign-in`. The user provides their email or username as their identity, along with their password. The form is submitted to `/account/login`, which invokes `LoginAction`. This processes the authentication request.
 
-![User sign-in](images/login.png)
+![User sign-in](/images/login.png)
 
 The `/account/login` route is throttled via the `throttles.sign_in_attempt` throttle rule. This mitigates against the possibility of brute-force attempts to guess your users' passwords.
 
@@ -123,7 +123,7 @@ After the page containing the sign-in form receives a response from the server t
 
 Users can reset their passwords by visiting `/account/forgot-password`. They will be asked for their account email address:
 
-![Password reset](images/password-reset.png)
+![Password reset](/images/password-reset.png)
 
 Upon submitting a password reset request, a secret token will be issued for the user's account (stored in `password_resets` table), and emailed to them in the form of a link (`/account/set-password/confirm`). The link will take them to a form with the secret token embedded in the page, where they can set their new password. The form is then submitted to `/account/set-password`, which updates the user's password and signs them in.
 
@@ -143,7 +143,7 @@ For the precise implementation of the password reset and account verification re
 
 Users can update certain attributes of their accounts through the account settings/profile page. By default, this is available at `/account/settings`:
 
-![Account settings page](images/account-settings.png)
+![Account settings page](/images/account-settings.png)
 
 As a security measure, users are required to verify their current password before they can update their email address or password. Other fields, like name and locale, do not require the authenticated user to re-enter their password.
 
@@ -194,7 +194,7 @@ Basic user details (name, email, locale, group) can be modified via the "Edit us
 
 Roles can be added to or removed from a user account via the `Manage roles` button on the user's profile page, or in the dropdown menu in the user table.
 
-![User role management](images/uf-collection.png)
+![User role management](/images/uf-collection.png)
 
 By default, only the root account can change users' roles. You may want to modify this to allow site admins to grant a **subset** of the available roles to other users - but be careful! You may not want site administrators to be allowed to elevate other users to site administrator, for example. See the section on [access control](users/access-control) for more information.
 
@@ -202,7 +202,7 @@ By default, only the root account can change users' roles. You may want to modif
 
 Administrators may be able to perform a password reset on behalf of users. This is useful, for example, when you have users who have difficulty with the self-service password reset tool. Password resets can be performed via the "Password" button in the user's profile page, or the "change password" option in the dropdown menu of the user table.
 
-![User password management](images/change-password.png)
+![User password management](/images/change-password.png)
 
 You may send a password reset link to the user so that they can change it themselves, or even set a password directly when dealing with particularly technology-adverse users over the phone.
 
diff --git a/app/pages/6.0/10.users/04.activity-logging/docs.md b/app/pages/6.0/10.users/04.activity-logging/docs.md
index 14d34e04..9bdb2e75 100644
--- a/app/pages/6.0/10.users/04.activity-logging/docs.md
+++ b/app/pages/6.0/10.users/04.activity-logging/docs.md
@@ -6,7 +6,7 @@ wip: true
 
 By default, user activities are logged to the `activities` database table. Logged information includes the activity time and an activity type, the `user_id`, the user's IP address, and a description of the activity. The administrative interface provides convenient tables for viewing these logs:
 
-![User activity logging](images/user-activities.png)
+![User activity logging](/images/user-activities.png)
 
 ## Default activity types
 
diff --git a/app/pages/6.0/14.database/05.data-sprunjing/docs.md b/app/pages/6.0/14.database/05.data-sprunjing/docs.md
index 61356381..ebef1353 100644
--- a/app/pages/6.0/14.database/05.data-sprunjing/docs.md
+++ b/app/pages/6.0/14.database/05.data-sprunjing/docs.md
@@ -337,4 +337,4 @@ protected function listStatus(): array
 
 If you're wondering where the term "Sprunje" comes from:
 
-![Futurama - Sprunjer](images/sprunje.mp4)
+![Futurama - Sprunjer](/images/sprunje.mp4)
diff --git a/app/pages/6.0/17.i18n/01.introduction/docs.md b/app/pages/6.0/17.i18n/01.introduction/docs.md
index b7ff7cd5..0df6bbe1 100644
--- a/app/pages/6.0/17.i18n/01.introduction/docs.md
+++ b/app/pages/6.0/17.i18n/01.introduction/docs.md
@@ -32,7 +32,7 @@ UserFrosting [i18n module](https://github.com/userfrosting/i18n) is composed of
 
 A **Locale** is used to create a **Dictionary**, which is then used by the **Translator**. The overall flow can be visualized as :
 
-![](images/i18n/diagram.png)
+![](/images/i18n/diagram.png)
 
 ### The Locale
 
diff --git a/app/pages/6.0/18.advanced/07.alert-stream/docs.md b/app/pages/6.0/18.advanced/07.alert-stream/docs.md
index 4c83ca39..10b8a205 100644
--- a/app/pages/6.0/18.advanced/07.alert-stream/docs.md
+++ b/app/pages/6.0/18.advanced/07.alert-stream/docs.md
@@ -8,7 +8,7 @@ The **alert stream** is UserFrosting's implementation of a flash messaging syste
 
 Rather than including alerts directly in a request's response, they are persisted through a separate `AlertStream` interface. They can then be retrieved by making a separate request to `/alerts`, which will return a JSON object containing each alert message and its corresponding type:
 
-![A diagram of the alert creation and retrieval process.](images/alert-stream.png)
+![A diagram of the alert creation and retrieval process.](/images/alert-stream.png)
 
 You may wonder why we have this complicated process and use a separate request to retrieve alerts, rather than embedding them directly in the original response. The reason is that sometimes you may not be ready to immediately display the alerts after you receive the original request's response. For example, you may have a situation where you need to redirect or refresh the page before displaying alerts.
 
diff --git a/app/pages/6.0/20.recipes/04.custom-login-page/docs.md b/app/pages/6.0/20.recipes/04.custom-login-page/docs.md
index 4a8ef5c2..e616a5de 100644
--- a/app/pages/6.0/20.recipes/04.custom-login-page/docs.md
+++ b/app/pages/6.0/20.recipes/04.custom-login-page/docs.md
@@ -45,7 +45,7 @@ Inside your newly created config file, you add any configuration options you wan
 
 Save the file, reload the login page and voilà! Not only will the registration link disappear, but all relevant registration endpoints will also be deactivated. You will still be able to create a new user manually using the administration interface.
 
-![Login form without registration](images/login-no-registration.png)
+![Login form without registration](/images/login-no-registration.png)
 
 See the [Configuration Files](configuration/config-files) chapter for more information about editing configuration.
 
@@ -216,7 +216,7 @@ $ php bakery assets:build
 
 Once you refresh the page, you should see the result:
 
-![Custom login template](images/custom-login.png)
+![Custom login template](/images/custom-login.png)
 
 ### Customizing the CSS
 
@@ -266,4 +266,4 @@ php bakery assets:build
 
 Your new CSS file should be loaded when you refresh the page and you should see the result:
 
-![Custom login style](images/custom-login2.png)
+![Custom login style](/images/custom-login2.png)
diff --git a/app/pages/6.0/20.recipes/05.changing-user-permissions/docs.md b/app/pages/6.0/20.recipes/05.changing-user-permissions/docs.md
index 93fe3af9..b4018b4c 100644
--- a/app/pages/6.0/20.recipes/05.changing-user-permissions/docs.md
+++ b/app/pages/6.0/20.recipes/05.changing-user-permissions/docs.md
@@ -15,7 +15,7 @@ This example only covers the built-in permissions and roles. For a more in-depth
 
 The first steps are to edit the default permissions of the **User** role, which was automatically created when you installed UserFrosting. The goal here is to give read access to the built-in _Group Management page_ and _User Management page_ for users who have the **User** role. With the root account, go to the **Roles** page and click on **Manage Permissions** from the **Actions** dropdown of the **User** role.
 
-![Default permission](images/user-group-pages/default-permissions.png)
+![Default permission](/images/user-group-pages/default-permissions.png)
 
 Add the following permission to the role:
 
@@ -25,13 +25,13 @@ Add the following permission to the role:
 - View user
 - User management page
 
-![Modified permissions](images/user-group-pages/new-permissions.png)
+![Modified permissions](/images/user-group-pages/new-permissions.png)
 
 At this point, any user (assuming they have the _User_ role) should be able to see the `Groups` and `Users` links in the sidebar, as well as the list and details pages for users and groups.
 
-![Public group page](images/user-group-pages/result-groups.png)
+![Public group page](/images/user-group-pages/result-groups.png)
 
-![Public user page](images/user-group-pages/result-users.png)
+![Public user page](/images/user-group-pages/result-users.png)
 
 > [!NOTE]
 > As of version 4.1.12, the **Action** dropdown in the user and group management tables still shows links to administrative functions, even if the current user doesn't actually have the necessary permissions. Clicking on any link will throw a `ForbiddenAccess` exception. This is a known limitation and only constitutes a minor user experience issue. It is **not** a security issue, as access is still controlled in the relevant server-side endpoints.
diff --git a/app/pages/6.0/20.recipes/06.external-js/docs.md b/app/pages/6.0/20.recipes/06.external-js/docs.md
index 8f27734a..dead425f 100644
--- a/app/pages/6.0/20.recipes/06.external-js/docs.md
+++ b/app/pages/6.0/20.recipes/06.external-js/docs.md
@@ -68,7 +68,7 @@ $ php bakery assets:build
 
 Refresh the page, and you should see the default page in a beautiful dark mode !
 
-![DarkMode Screenshot](images/DarkReader1.png)
+![DarkMode Screenshot](/images/DarkReader1.png)
 
 ## Creating our own module
 
@@ -124,7 +124,7 @@ For the standard layout, we need to add our custom navbar element in the `main-n
 ```
 
 [center]
-![DarkMode Lightbulb](images/DarkReader2.png)
+![DarkMode Lightbulb](/images/DarkReader2.png)
 [size=14]The lightbulb icon is added in the standard layout[/size]
 [/center]
 
@@ -142,7 +142,7 @@ For the dashboard layout, we need to add our custom navbar element in the `navba
 ```
 
 [center]
-![DarkMode Lightbulb Admin](images/DarkReader3.png)
+![DarkMode Lightbulb Admin](/images/DarkReader3.png)
 [size=14]The lightbulb icon now is added in the dashboard layout[/size]
 [/center]
 
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/01.base-setup/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/01.base-setup/docs.md
index 12f4769f..d971f08d 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/01.base-setup/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/01.base-setup/docs.md
@@ -115,6 +115,6 @@ Finally, we need to *create* the template file. We use the same file name as the
 
 You should now be able to manually go to the `/pastries` page in your browser and see the result:
 
-![Pastries page](images/pastries/01.png)
+![Pastries page](/images/pastries/01.png)
 
 You'll notice that at this point, we're not actually displaying any useful content on the page. In the next section, we'll discuss how to display content dynamically retrieved from the database.
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/02.database/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/02.database/docs.md
index 2abdbe4e..c520fd6e 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/02.database/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/02.database/docs.md
@@ -384,4 +384,4 @@ Let's get a closer look at our `for` block:
 
 This is the same as using `foreach` in PHP to loop through all the items available in an array. The `{% for pastry in pastries %}` will loop through `pastries` and create a HTML table row for each item. If you refresh the page, you should now see this in your browser:
 
-![Pastries page](images/pastries/02.png)
+![Pastries page](/images/pastries/02.png)
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/03.adding-menu/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/03.adding-menu/docs.md
index 9fdfa811..1240b102 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/03.adding-menu/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/03.adding-menu/docs.md
@@ -26,4 +26,4 @@ The second key part is `{{ urlFor('pastries') }}`. This uses UserFrosting custom
 
 You should now see the new link in the menu:
 
-![Pastries menu link](images/pastries/03.png)
+![Pastries menu link](/images/pastries/03.png)
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/04.custom-permissions/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/04.custom-permissions/docs.md
index 254816a5..86450319 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/04.custom-permissions/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/04.custom-permissions/docs.md
@@ -199,7 +199,7 @@ $ php bakery migrate
 
 You can make sure the migration was successful by logging in as the root user and going to the permissions page:
 
-![Pastries permission list](images/pastries/permission-list.png)
+![Pastries permission list](/images/pastries/permission-list.png)
 
 ## Adding permission to the page
 
@@ -272,11 +272,11 @@ The link should now be hidden from the menu when you refresh the page.
 
 Now to make sure everything works correctly, let's add that `see_pastries` permission to the **User** role. Once this is done, a normal user will regain access to the page. Using a root account, navigate to the **Roles** page and select **Manage permissions** from the Actions dropdown menu of the **User** role.
 
-![Role page](images/pastries/role-page.png)
+![Role page](/images/pastries/role-page.png)
 
 Select the `see_pastries` permission from the bottom dropdown (use the search field to easily find it) and then click `update permissions`.
 
-![Adding permission](images/pastries/adding-permission.png)
+![Adding permission](/images/pastries/adding-permission.png)
 
 Your non-root user should now have access to the pastry page again (assuming they have the User role).
 
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/05.localization/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/05.localization/docs.md
index f0b917d2..c742d7b6 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/05.localization/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/05.localization/docs.md
@@ -109,4 +109,4 @@ return [
 
 At this point, you can visit the user preferences and change your language to French. Once this is done, go back to the pastries page and _voilà, tout en français_ !
 
-![Pastries in French](images/pastries/04.png)
+![Pastries in French](/images/pastries/04.png)
diff --git a/app/pages/6.0/21.going-live/01.hosting/docs.md b/app/pages/6.0/21.going-live/01.hosting/docs.md
index 2f5c0fa0..e3a655a3 100644
--- a/app/pages/6.0/21.going-live/01.hosting/docs.md
+++ b/app/pages/6.0/21.going-live/01.hosting/docs.md
@@ -31,7 +31,7 @@ Their cheapest option is a USD $4/mo server, which provides 512MB memory, 10GB s
 
 They also provide a convenient web-based control panel, which lets you perform some basic administrative tasks and monitor your Droplet's resource usage:
 
-![Droplet control panel](images/droplet.png)
+![Droplet control panel](/images/droplet.png)
 
 ### Promotions
 
diff --git a/app/pages/6.0/21.going-live/02.mail-providers/docs.md b/app/pages/6.0/21.going-live/02.mail-providers/docs.md
index 0b279c63..162719ba 100644
--- a/app/pages/6.0/21.going-live/02.mail-providers/docs.md
+++ b/app/pages/6.0/21.going-live/02.mail-providers/docs.md
@@ -8,7 +8,7 @@ By default, UserFrosting is configured to use an external SMTP mail server of yo
 
 Why? Because dual-purposing your web server as an ad hoc mail server (i.e., what you get when you use PHP's `mail()` function) tends to lead to [all sorts of problems](http://blog.teamtreehouse.com/sending-email-with-phpmailer-and-smtp). The biggest problem is that your messages stand a good chance of being marked as spam, or blocked outright, by other mail servers. To understand this, consider how email works:
 
-![Mail transport chain](images/mail-transport.png)
+![Mail transport chain](/images/mail-transport.png)
 
 To send a message to someone's email address, the sending mail server must ultimately ask another mail server to deliver the message to the email address on your behalf - there is no way to directly place a message in someone's inbox! For example, when you send a message to `grandma@compuserve.net`, you are actually asking some other mail server (e.g., `mail.compuserve.net`) to deliver your message to the address.
 

From 358ed5b499bceb3c075782765ff2476dc6bb2727 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 31 Jan 2026 23:41:11 +0000
Subject: [PATCH 08/13] Improve chapter introductions with problem-solution
 structure

Co-authored-by: lcharette <2566513+lcharette@users.noreply.github.com>
---
 app/pages/6.0/04.installation/chapter.md           | 6 +++++-
 app/pages/6.0/06.sprinkles/chapter.md              | 6 ++++--
 app/pages/6.0/07.dependency-injection/chapter.md   | 8 ++++++--
 app/pages/6.0/08.routes-and-controllers/chapter.md | 6 ++++--
 app/pages/6.0/12.templating-with-twig/chapter.md   | 8 ++++++--
 app/pages/6.0/14.database/chapter.md               | 6 ++++--
 6 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/app/pages/6.0/04.installation/chapter.md b/app/pages/6.0/04.installation/chapter.md
index 369686b6..22c2da3d 100644
--- a/app/pages/6.0/04.installation/chapter.md
+++ b/app/pages/6.0/04.installation/chapter.md
@@ -8,4 +8,8 @@ wip: true
 
 # Installation
 
-Now that we've gone over the basic structure of a UserFrosting based application, it's time to get things started. This chapter covers UserFrosting's environment dependencies and how to use your essential developer tools to start a UserFrosting project.
+Before you can build amazing web applications with UserFrosting, you need a development environment with the right tools. Setting this up might seem daunting if you're new to PHP development, but this chapter walks you through everything step by step.
+
+We'll cover UserFrosting's system requirements (PHP, Composer, Node.js), show you how to set up your development environment (whether you prefer native installation or Docker), and use the Bakery CLI tool to create your first project.
+
+By the end of this chapter, you'll have a fully functional UserFrosting installation running on your local machine, ready for development. Whether you're on Windows, macOS, or Linux, we'll get you up and running.
diff --git a/app/pages/6.0/06.sprinkles/chapter.md b/app/pages/6.0/06.sprinkles/chapter.md
index 5399974d..498b2939 100644
--- a/app/pages/6.0/06.sprinkles/chapter.md
+++ b/app/pages/6.0/06.sprinkles/chapter.md
@@ -8,6 +8,8 @@ wip: true
 
 # Sprinkles
 
-The **sprinkle** system is a modular, flexible approach to separating core functionality from developer-added code and content.
+When building a web application, you face a fundamental challenge: **how do you extend and customize functionality without modifying the core codebase?** Directly editing framework code creates maintenance nightmares—every update risks breaking your changes, and sharing your work becomes nearly impossible.
 
-This is a powerful means of customizing your site without having to modify UserFrosting's core code. It also allows the UserFrosting community to share and integrate functionally cohesive units of code and content across projects.
+UserFrosting solves this with **sprinkles**—a modular system that lets you extend and override default behavior without touching core code. Think of sprinkles like toppings on ice cream: the base (core framework) stays intact, while you add your own flavors on top.
+
+This chapter explains how sprinkles work, how to create your own, and how to leverage community sprinkles to accelerate your development. You'll learn to build maintainable, modular applications that stay easy to update and share.
diff --git a/app/pages/6.0/07.dependency-injection/chapter.md b/app/pages/6.0/07.dependency-injection/chapter.md
index ee59882c..b8ea5fcb 100644
--- a/app/pages/6.0/07.dependency-injection/chapter.md
+++ b/app/pages/6.0/07.dependency-injection/chapter.md
@@ -8,6 +8,10 @@ wip: true
 
 # Dependency Injection
 
-Dependency injection is one of the fundamental pillars of modern object-oriented software design. It is used extensively throughout UserFrosting to glue all services together while maintaining great flexibility to extend the basics functionalities of UserFrosting to create your own project. 
+Modern applications need shared functionality—sending emails, logging events, authorizing users. But how do you make these services available throughout your code without creating tight coupling and making your code untestable?
 
-Services are a way to allow objects that perform specific, commonly used functions to be reused throughout your application. Mail, logging, and authorization are all examples of services. The **Dependency Injection (DI) Container** provides an elegant and loosely coupled way to make various services available globally in your application.
+**Dependency Injection (DI)** is the solution. Instead of objects creating their own dependencies, they declare what they need, and a **DI Container** provides them. This makes code modular, testable, and flexible—you can easily swap implementations without changing dependent code.
+
+UserFrosting uses dependency injection extensively to wire together services like mail, logging, database access, and authorization. Understanding the DI container is key to extending UserFrosting's functionality and building well-architected applications.
+
+This chapter explains dependency injection concepts, how UserFrosting's DI container works, the services available by default, and how to add or customize services for your own needs.
diff --git a/app/pages/6.0/08.routes-and-controllers/chapter.md b/app/pages/6.0/08.routes-and-controllers/chapter.md
index 1f568aef..dad8b126 100644
--- a/app/pages/6.0/08.routes-and-controllers/chapter.md
+++ b/app/pages/6.0/08.routes-and-controllers/chapter.md
@@ -8,6 +8,8 @@ wip: true
 
 # Routes and Controllers
 
-UserFrosting controllers are used to mediate interactions between the model and view, and are responsible for much of your application's logic.
+Every web application needs to answer a fundamental question: **when a user visits a URL or submits a form, what code should run?** Without a structured approach, you end up with spaghetti code mixing database queries, business logic, and HTML generation in confusing, unmaintainable ways.
 
-This chapter explains RESTful design, the front controller pattern, creating new controllers and controller methods to implement the logic for your application, and how to properly handle input from the client.
+UserFrosting uses the **MVC (Model-View-Controller)** pattern with RESTful routing to cleanly separate concerns. **Routes** map URLs to **controllers**, which contain your application logic and coordinate between **models** (data) and **views** (presentation). This separation makes your code easier to understand, test, and maintain.
+
+This chapter covers RESTful API design, the front controller pattern, creating controllers for your features, and securely handling user input. You'll learn to build well-structured endpoints that are both powerful and maintainable.
diff --git a/app/pages/6.0/12.templating-with-twig/chapter.md b/app/pages/6.0/12.templating-with-twig/chapter.md
index 6aaca7b5..4ce6ce1d 100644
--- a/app/pages/6.0/12.templating-with-twig/chapter.md
+++ b/app/pages/6.0/12.templating-with-twig/chapter.md
@@ -1,6 +1,6 @@
 ---
 title: Pages and Twig Templating
-description: A web page is a synthesis of HTML, CSS, Javascript, and other types of media.  UserFrosting uses the powerful Twig templating engine to render web pages.
+description: A web page is a synthesis of HTML, CSS, Javascript, and other types of media. UserFrosting uses the powerful Twig templating engine to render web pages.
 wip: true
 ---
 
@@ -8,4 +8,8 @@ wip: true
 
 # Pages and Twig Templating
 
-In this chapter, we discuss how to use the powerful Twig templating engine to cleanly separate the content of your web pages from the logic.
+Building web pages by mixing PHP logic and HTML markup in the same file creates unreadable, unmaintainable code. You end up with security risks (like XSS vulnerabilities), difficulty in collaborating with designers, and code that's nearly impossible to test.
+
+UserFrosting uses **Twig**, a powerful templating engine that cleanly separates your presentation (HTML) from your application logic (PHP). Twig provides a simple, secure syntax for displaying data, building layouts, and composing reusable template components—all while automatically escaping output to prevent security issues.
+
+This chapter teaches you how to create templates, use Twig's features effectively, organize templates in your sprinkles, and leverage UserFrosting's custom Twig extensions. You'll learn to build beautiful, maintainable page layouts that keep your code clean and secure.
diff --git a/app/pages/6.0/14.database/chapter.md b/app/pages/6.0/14.database/chapter.md
index f464622f..484bc811 100644
--- a/app/pages/6.0/14.database/chapter.md
+++ b/app/pages/6.0/14.database/chapter.md
@@ -8,6 +8,8 @@ wip: true
 
 # The Database and ORM Layer
 
-UserFrosting uses Laravel's [Eloquent](https://laravel.com/docs/8.x/eloquent) component to provide a convenient abstraction layer on top of your database. This allows you to quickly manipulate the database from within your controllers without needing to write tedious, repetitive queries each time.
+Every application needs to store data—user accounts, content, settings, and more. But writing raw SQL queries for every database operation leads to repetitive code, security vulnerabilities (like SQL injection), and maintenance headaches.
 
-We also discuss how to create database migrations, allowing you to easily set up your database tables, and database seeds, allowing your to populate the database with default values.
+UserFrosting uses Laravel's [Eloquent ORM](https://laravel.com/docs/eloquent) to solve these problems. An **ORM (Object-Relational Mapper)** lets you work with database records as PHP objects, automatically handling queries, relationships, and data validation. Instead of writing SQL, you write intuitive PHP code that's easier to read, test, and secure.
+
+This chapter covers everything you need to work with databases in UserFrosting: defining models, querying data, managing relationships, creating migrations to version your schema, and seeding initial data. You'll learn to build robust, maintainable data layers for your applications.

From bd2f7c9765f0d3ff24c78b84565cce0d87e05dcf Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 31 Jan 2026 23:47:39 +0000
Subject: [PATCH 09/13] Improve high-priority docs.md pages with engaging
 introductions (Batch 1)

Co-authored-by: lcharette <2566513+lcharette@users.noreply.github.com>
---
 app/pages/6.0/06.sprinkles/01.sprinkles/docs.md    |  8 +++++---
 app/pages/6.0/06.sprinkles/02.content/docs.md      | 10 +++++++++-
 .../6.0/07.dependency-injection/01.concept/docs.md | 14 ++++++++++++--
 .../01.introduction/docs.md                        | 10 +++++++++-
 .../09.configuration/01.environment-vars/docs.md   | 10 +++++++++-
 app/pages/6.0/10.users/01.user-accounts/docs.md    |  8 ++++++--
 app/pages/6.0/10.users/02.access-control/docs.md   |  6 ++++++
 app/pages/6.0/11.cli/01.commands/docs.md           | 12 ++++++++++--
 app/pages/6.0/14.database/01.overview/docs.md      |  6 +++++-
 9 files changed, 71 insertions(+), 13 deletions(-)

diff --git a/app/pages/6.0/06.sprinkles/01.sprinkles/docs.md b/app/pages/6.0/06.sprinkles/01.sprinkles/docs.md
index 5b504646..c983b6ca 100644
--- a/app/pages/6.0/06.sprinkles/01.sprinkles/docs.md
+++ b/app/pages/6.0/06.sprinkles/01.sprinkles/docs.md
@@ -1,12 +1,14 @@
 ---
 title: Basic concept
-description: ""
+description: Learn how sprinkles provide a modular system for extending UserFrosting without modifying core code.
 wip: true
 ---
 
-In previous versions of UserFrosting, you had to directly modify the files that come with the default installation in order to add your own functionality. For example, if you wanted to add a field to the user registration page, you had to actually modify `register.twig`. Or, if you wanted to add a new relation on the `User` class, you had to modify the actual `User.php` class that comes with UserFrosting.
+Here's a problem every developer faces: **how do you customize a framework without creating a maintenance nightmare?** If you modify framework files directly, updates become treacherous—merge conflicts, lost changes, and the constant fear of breaking things. Your customizations become entangled with core code, making upgrades nearly impossible.
 
-Starting in version 4, this is no longer the case! **UserFrosting 4** introduced the **[Sprinkle system](structure/sprinkles)** as a way to completely isolate the code and content that you and your team produce from the core UserFrosting installation, as well as third-party code. **UserFrosting 5** took this a step further, by allowing Composer to manage sprinkles and decoupling even more functionality from the base install. 
+In earlier versions of UserFrosting, you had no choice—customizing meant editing core files. Want to add a field to the registration page? Modify `register.twig` directly. Need to extend the `User` class? Edit `User.php` itself. Every framework update risked breaking your work.
+
+**UserFrosting's sprinkle system** eliminates this problem entirely. Sprinkles let you extend, override, and customize functionality while keeping your code completely separate from the core framework. Updates become safe again—your customizations stay intact, isolated in your own sprinkle. Think of it like adding layers to a cake: each layer (sprinkle) builds on the previous one without destroying what's underneath. 
 
 ## What is a "Sprinkle"?
 
diff --git a/app/pages/6.0/06.sprinkles/02.content/docs.md b/app/pages/6.0/06.sprinkles/02.content/docs.md
index aea243b1..84b4a664 100644
--- a/app/pages/6.0/06.sprinkles/02.content/docs.md
+++ b/app/pages/6.0/06.sprinkles/02.content/docs.md
@@ -1,9 +1,17 @@
 ---
 title: Contents
-description: Detailed breakdown of a Sprinkle's contents.
+description: Detailed breakdown of a Sprinkle's contents and how each directory serves a specific purpose.
 wip: true
 ---
 
+Now that you understand what sprinkles are, let's explore what goes inside them. A sprinkle isn't just a random collection of files—it's an organized package where each directory has a specific purpose. Understanding this structure helps you know exactly where to put your code, templates, assets, and other resources.
+
+Think of a sprinkle like a well-organized kitchen: ingredients (code) go in the pantry, tools (assets) have their drawer, recipes (templates) are in the cookbook, and seasonings (configuration) sit on the spice rack. Everything has its place, making it easy to find what you need and add new items.
+
+This page details each directory in a sprinkle and explains what belongs there.
+
+## Directory Structure
+
 Within each sprinkle, you will find any or all of the following directories and files:
 
 ```txt
diff --git a/app/pages/6.0/07.dependency-injection/01.concept/docs.md b/app/pages/6.0/07.dependency-injection/01.concept/docs.md
index ec51d457..0e63f638 100644
--- a/app/pages/6.0/07.dependency-injection/01.concept/docs.md
+++ b/app/pages/6.0/07.dependency-injection/01.concept/docs.md
@@ -1,10 +1,20 @@
 ---
 title: Understanding Dependency Injection
-description: Dependency Injection (DI) is the backbone of modern programming
+description: Dependency Injection (DI) is the backbone of modern programming and the key to writing testable, flexible code.
 wip: true
 ---
 
-[Dependency Injection](http://www.phptherightway.com/#dependency_injection) is one of the fundamental pillars of modern object-oriented software design - it is a prime example of the **D** in [**SOLID**](https://en.wikipedia.org/wiki/SOLID_(object-oriented_design)). The idea is that instead of creating objects _inside_ other objects, you create your "inner objects" (dependencies) separately and then _inject_ (by passing as an argument to the constructor or a setter method) them into the "outer object" (dependent).
+Here's a problem every developer faces: **how do you write code that's easy to test and modify?** When objects create their own dependencies internally, you end up with rigid, tightly coupled code. Want to test a class? You can't—it's hardwired to specific implementations. Need to swap a dependency? You're rewriting the class. Want to mock something for testing? Impossible.
+
+**Dependency Injection (DI)** solves this elegantly. Instead of objects creating what they need, they declare their needs (dependencies), and someone else provides them. This simple shift—dependencies coming from outside rather than being created inside—makes your code testable, flexible, and maintainable. It's the **D** in [SOLID](https://en.wikipedia.org/wiki/SOLID_(object-oriented_design)) principles.
+
+Think of it like a restaurant: A bad restaurant has chefs who grow their own ingredients, make their own equipment, and handle everything internally (tightly coupled). A good restaurant has chefs who receive quality ingredients from suppliers (dependency injection). The chef focuses on cooking; the suppliers focus on ingredients. Everyone does their job better.
+
+This page explains dependency injection with concrete examples, showing you why it matters and how UserFrosting uses it throughout.
+
+## The Problem: Tight Coupling
+
+[Dependency Injection](http://www.phptherightway.com/#dependency_injection) is one of the fundamental pillars of modern object-oriented software design. The idea is that instead of creating objects _inside_ other objects, you create your "inner objects" (dependencies) separately and then _inject_ (by passing as an argument to the constructor or a setter method) them into the "outer object" (dependent).
 
 For example, if you have class `Owl`:
 
diff --git a/app/pages/6.0/08.routes-and-controllers/01.introduction/docs.md b/app/pages/6.0/08.routes-and-controllers/01.introduction/docs.md
index 9502dc09..4f13e6a7 100644
--- a/app/pages/6.0/08.routes-and-controllers/01.introduction/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/01.introduction/docs.md
@@ -4,7 +4,15 @@ description: If you're new to object-oriented programming, you may not be famili
 wip: true
 ---
 
-UserFrosting is built to follow the [Model-View-Controller (MVC)](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) design paradigm. If you come from a "traditional" PHP background, you may be used to seeing code that looks like this:
+Imagine building a web application where all your code lives in single files—database queries mixed with HTML output, business logic tangled with form processing, everything in one giant mess. This is **spaghetti code**, and it's a maintenance nightmare. Want to change the database? You're rewriting HTML. Need to update the UI? You're touching business logic. Testing becomes impossible.
+
+The **Model-View-Controller (MVC)** pattern solves this by separating concerns into three distinct layers: the **model** (data and business logic), the **view** (presentation/HTML), and the **controller** (coordinates between model and view). Each layer has one job, making your code easier to understand, test, and maintain.
+
+UserFrosting embraces MVC fully. Models use [Eloquent](database) for database interactions, views use [Twig templates](templating-with-twig) for clean HTML generation, and controllers (built on [Slim 4](https://www.slimframework.com/)) tie everything together. This chapter focuses on controllers—the starting point for adding new features to your application.
+
+## Understanding Spaghetti Code
+
+If you come from a "traditional" PHP background, you may be used to seeing code that looks like this:
 
 **users.php**
 ```php
diff --git a/app/pages/6.0/09.configuration/01.environment-vars/docs.md b/app/pages/6.0/09.configuration/01.environment-vars/docs.md
index 4d60aee4..bfd22a5c 100644
--- a/app/pages/6.0/09.configuration/01.environment-vars/docs.md
+++ b/app/pages/6.0/09.configuration/01.environment-vars/docs.md
@@ -4,7 +4,15 @@ description: The .env file is used to define important values in development suc
 wip: true
 ---
 
-The basic database settings for UserFrosting can be set through environment variables. By default, UserFrosting looks for the following environment variables:
+Every application needs configuration—database credentials, API keys, SMTP settings, feature flags. But hardcoding these values directly in your code creates serious problems: security vulnerabilities (credentials in version control), inflexibility (can't easily change settings), and deployment headaches (different environments need different values).
+
+UserFrosting uses **environment variables** to solve these challenges. Environment variables keep sensitive data out of your codebase, allow different configuration for each environment (development, staging, production), and let you change settings without modifying code. It's the [twelve-factor app](https://12factor.net/config) approach that professional applications follow.
+
+For local development, UserFrosting uses `.env` files to make managing environment variables easy. In production, you set real environment variables directly on your server for maximum security.
+
+## Available Environment Variables
+
+UserFrosting recognizes the following environment variables:
 
 |       Variable       | Description                                                                             |
 |:--------------------:|-----------------------------------------------------------------------------------------|
diff --git a/app/pages/6.0/10.users/01.user-accounts/docs.md b/app/pages/6.0/10.users/01.user-accounts/docs.md
index 4be90516..36948be8 100644
--- a/app/pages/6.0/10.users/01.user-accounts/docs.md
+++ b/app/pages/6.0/10.users/01.user-accounts/docs.md
@@ -4,11 +4,15 @@ description: UserFrosting ships with everything you need to create user accounts
 wip: true
 ---
 
-You were probably attracted to UserFrosting because you wanted to "make a site where users can sign in", or you already have a project in progress and your boss asked you to "put it behind a login," or you need to have some "protected pages." These are nontechnical terms. It will be easier for us to communicate if we first establish a common vocabulary, so that we can explain the concepts with more precision.
+Most web applications need user accounts—the ability for people to create profiles, sign in, and access personalized content or features. But building a secure, full-featured authentication system from scratch is surprisingly complex: password hashing, email verification, password reset flows, session management, account lockouts, role-based permissions... the list goes on.
+
+UserFrosting provides a **complete, production-ready user account system** right out of the box. Registration, login, email verification, password reset, user administration—it's all there, fully implemented and ready to use. You get professional-grade security features like bcrypt password hashing, CSRF protection, and rate limiting without writing a line of code.
+
+This page covers UserFrosting's account features, explains key terminology (authentication vs authorization), and shows you how to work with user data in your application.
 
 ## Authentication and authorization
 
-The proper term for the process of "signing in" or "logging in" is **authentication**. When a user has successfully logged in, we say that they are an **authenticated user**.
+Let's start with vocabulary to communicate precisely. The proper term for "signing in" or "logging in" is **authentication**. When a user has successfully logged in, we say that they are an **authenticated user**.
 
 As we've [explained before](background/the-client-server-conversation), a web application is really a conversation between two agents with poor memory. When you have a feature or some part of your site that is only supposed to be accessible to authenticated users, the server needs to check that the client is who they say they are and that they've already successfully authenticated.
 
diff --git a/app/pages/6.0/10.users/02.access-control/docs.md b/app/pages/6.0/10.users/02.access-control/docs.md
index 21ef3354..3a077d91 100644
--- a/app/pages/6.0/10.users/02.access-control/docs.md
+++ b/app/pages/6.0/10.users/02.access-control/docs.md
@@ -4,6 +4,12 @@ description: Authorization is sometimes referred to as "access control" or "prot
 wip: true
 ---
 
+Authenticating users (knowing who they are) is only half the battle. The harder question is: **what should each user be allowed to do?** Not every user should access administrative features, delete data, or view sensitive information. Without proper authorization, your application becomes either a security hole (everyone can do everything) or a maintenance nightmare (hardcoded permissions scattered everywhere).
+
+UserFrosting solves this with a powerful, flexible **role-based access control (RBAC)** system. But it goes beyond simple RBAC—UserFrosting adds **conditional permissions** that let you define rules like "users can edit their own posts" or "managers can approve requests in their department." This gives you fine-grained control without drowning in complexity.
+
+This page explains how roles and permissions work, how to perform access checks in your code, and how to create sophisticated permission rules that adapt to your application's needs.
+
 ## Roles
 
 UserFrosting implements an extended version of [role-based access control](https://en.wikipedia.org/wiki/Role-based_access_control), which allows for very fine-grained control over user permissions. Every user can have zero or more **roles**, and every role can have zero or more **permissions**. Users' effective permissions are determined through their roles.
diff --git a/app/pages/6.0/11.cli/01.commands/docs.md b/app/pages/6.0/11.cli/01.commands/docs.md
index b28ae658..76274727 100644
--- a/app/pages/6.0/11.cli/01.commands/docs.md
+++ b/app/pages/6.0/11.cli/01.commands/docs.md
@@ -1,10 +1,18 @@
 ---
 title: Built-in Commands
-description: An overview of the commands available in Bakery.
+description: An overview of the commands available in Bakery, UserFrosting's powerful CLI tool.
 wip: true
 ---
 
-UserFrosting's CLI, or [*Command-line Interface*](https://en.wikipedia.org/wiki/Command-line_interface), is called the **Bakery**. It provides a number of helpful commands that can assist you while you build, manage, and install your application. To view a list of all available Bakery commands, you may use the `list` command from your UserFrosting root directory:
+Web applications need more than just a web interface. You need to run database migrations, clear caches, seed test data, build assets, and perform maintenance tasks. Doing these through a browser is awkward at best. Command-line tools are perfect for these tasks—fast, automatable, and scriptable.
+
+UserFrosting provides **Bakery**, a powerful CLI (Command-Line Interface) that handles installation, maintenance, and development tasks. Need to set up your database? `php bakery bake`. Want to create a new user? `php bakery create:admin`. Need to clear caches? `php bakery clear:cache`. Bakery makes these common tasks simple and consistent.
+
+This page documents all built-in Bakery commands, their options, and when to use them.
+
+## Using Bakery
+
+UserFrosting's CLI is called the **Bakery**. It provides helpful commands that assist you while you build, manage, and install your application. To view a list of all available Bakery commands, you may use the `list` command from your UserFrosting root directory:
 
 ```bash
 $ php bakery list
diff --git a/app/pages/6.0/14.database/01.overview/docs.md b/app/pages/6.0/14.database/01.overview/docs.md
index 0f2cf58b..7b54d80a 100644
--- a/app/pages/6.0/14.database/01.overview/docs.md
+++ b/app/pages/6.0/14.database/01.overview/docs.md
@@ -4,7 +4,11 @@ description: UserFrosting uses Eloquent, Laravel's powerful ORM, to provide a fl
 wip: true
 ---
 
-Even in relatively simple applications, writing out the same types of database queries over and over can get tedious. To make things easier and your code [DRY](https://en.wikipedia.org/wiki/Don't_repeat_yourself)er, UserFrosting takes advantage of Laravel's excellent object-relation mapper, **[Eloquent](https://laravel.com/docs/8.x/eloquent#introduction)**.
+Writing database queries can get tedious fast. Every time you need user data, you're writing `SELECT * FROM users WHERE id = ?`. Want to find users by email? Another query. Need related data? Now you're juggling multiple queries and manually joining results. Your code becomes a mess of repetitive SQL strings and error-prone manual data handling.
+
+**Eloquent**, Laravel's powerful ORM (Object-Relational Mapper), eliminates this tedium. Instead of writing SQL, you work with intuitive PHP objects and methods. Need a user? `User::find($id)`. Want to filter? `User::where('email', $email)->first()`. Loading relationships? `$user->roles`. Eloquent handles all the SQL behind the scenes, making your code cleaner, safer (automatic escaping prevents SQL injection), and more maintainable.
+
+UserFrosting leverages Eloquent throughout, giving you professional database tools without the overhead of writing raw queries. This page covers Eloquent configuration in UserFrosting and points you to Laravel's excellent documentation for learning the ORM in depth.
 
 ## Configuration
 

From dd5f8988eb8960f42288046ac49b592ebb99c144 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 31 Jan 2026 23:49:03 +0000
Subject: [PATCH 10/13] Improve docs.md pages with engaging introductions
 (Batch 2 - final)

Co-authored-by: lcharette <2566513+lcharette@users.noreply.github.com>
---
 .../01.native/01.requirements/docs.md         |  8 ++++++++
 app/pages/6.0/06.sprinkles/03.recipe/docs.md  |  8 +++++---
 .../01.overview/docs.md                       | 10 +++++++++-
 .../6.0/14.database/03.migrations/docs.md     | 10 ++++++++++
 app/pages/6.0/17.i18n/01.introduction/docs.md | 14 ++++++++++----
 app/pages/6.0/19.testing/01.why-test/docs.md  | 19 +++++++++++++++++--
 6 files changed, 59 insertions(+), 10 deletions(-)

diff --git a/app/pages/6.0/04.installation/02.environment/01.native/01.requirements/docs.md b/app/pages/6.0/04.installation/02.environment/01.native/01.requirements/docs.md
index 2f1c8b77..8a4cc869 100644
--- a/app/pages/6.0/04.installation/02.environment/01.native/01.requirements/docs.md
+++ b/app/pages/6.0/04.installation/02.environment/01.native/01.requirements/docs.md
@@ -4,6 +4,14 @@ description: Getting UserFrosting up and running in your development environment
 wip: true
 ---
 
+Before you can start building with UserFrosting, you need the right tools installed. Think of these as your development toolkit—without them, you can't run UserFrosting or build your application. Some developers already have everything set up; others are starting fresh.
+
+This guide walks you through installing each required component: **PHP 8.1+**, **Composer** (PHP's package manager), **Node.js** and **npm** (for frontend assets), and a **command-line interface**. We intentionally skip web servers and databases here—UserFrosting can use PHP's built-in server and SQLite initially, so you can get started quickly and add those later if needed.
+
+By the end of this page, you'll have a complete development environment ready to run UserFrosting.
+
+## What You'll Install
+
 If your local development environment doesn't already have the [required stack and tools](installation/requirements), we'll now set them up. We'll go through the following:
 
 - [Command Line Interface](#cli)
diff --git a/app/pages/6.0/06.sprinkles/03.recipe/docs.md b/app/pages/6.0/06.sprinkles/03.recipe/docs.md
index dcb4a62b..b4ac7ccc 100644
--- a/app/pages/6.0/06.sprinkles/03.recipe/docs.md
+++ b/app/pages/6.0/06.sprinkles/03.recipe/docs.md
@@ -1,12 +1,14 @@
 ---
 title: The Sprinkle Recipe
-description: ""
+description: The recipe is your sprinkle's blueprint, telling UserFrosting how to integrate your code into the application.
 wip: true
 ---
 
-The Sprinkle Recipe dictates how your sprinkle is built, like a blueprint. UserFrosting services and framework will use the information from the recipe to initiate some services, and expose classes your sprinkle provides for other servicea to use.
+Every sprinkle needs a way to tell UserFrosting what it contains and how to use it. Without this information, UserFrosting wouldn't know which routes to register, which services to load, or how your sprinkle fits into the application. Imagine trying to bake a cake without a recipe—you'd have ingredients but no idea how to combine them.
 
-Each sprinkle **must have** a recipe. It's not possible for a sprinkle to exist without a recipe, as it won't be possible to expose its class and service to the framework. It's possible however to customize other sprinkles, as we'll see later on this page. 
+The **Sprinkle Recipe** solves this problem. It's a simple PHP class that serves as your sprinkle's blueprint, declaring what your sprinkle provides: its name, location, routes, services, and dependencies. UserFrosting reads this recipe to integrate your sprinkle seamlessly into the application framework.
+
+Every sprinkle **must have** a recipe—it's how UserFrosting knows your sprinkle exists and what it contains. This page explains the recipe's structure and how to configure each part.
 
 ## The `SprinkleRecipe` Interface
 
diff --git a/app/pages/6.0/12.templating-with-twig/01.overview/docs.md b/app/pages/6.0/12.templating-with-twig/01.overview/docs.md
index c1488d15..d7e86dc2 100644
--- a/app/pages/6.0/12.templating-with-twig/01.overview/docs.md
+++ b/app/pages/6.0/12.templating-with-twig/01.overview/docs.md
@@ -4,7 +4,15 @@ description: UserFrosting uses the extremely popular Twig templating engine to f
 wip: true
 ---
 
-Twig is a [templating engine](http://twig.sensiolabs.org/), which is designed to help maintain a clean separation between your application's logic and its content.
+Remember the spaghetti code problem from [Chapter 8](routes-and-controllers/introduction)? HTML mixed with PHP logic, `echo` statements building markup, database queries intermingled with presentation—it's a maintenance nightmare. Changing the design means wading through PHP code. Testing becomes nearly impossible. Security vulnerabilities like XSS attacks lurk in every string interpolation.
+
+**Twig** solves this by cleanly separating your HTML templates from your PHP logic. Twig is a templating engine that gives you a simple, secure syntax for displaying data, looping through collections, and building layouts—all while automatically escaping output to prevent XSS attacks. Your PHP code stays in controllers and models where it belongs; your HTML stays in beautiful, readable template files.
+
+The result? Designers can work on templates without touching PHP. Developers can change logic without breaking layouts. Security is built-in. Code becomes testable. Everyone's happier.
+
+This page introduces Twig's benefits and shows you why templating engines matter for professional applications.
+
+## The Problem with Embedded PHP
 
 If you recall the spaghetti code example from [Chapter 8](routes-and-controllers/introduction):
 
diff --git a/app/pages/6.0/14.database/03.migrations/docs.md b/app/pages/6.0/14.database/03.migrations/docs.md
index a10f8db6..3aff73ff 100644
--- a/app/pages/6.0/14.database/03.migrations/docs.md
+++ b/app/pages/6.0/14.database/03.migrations/docs.md
@@ -4,6 +4,16 @@ description: Extend the database and add your own tables in a consistent and eas
 wip: true
 ---
 
+Every application evolves. You add tables, modify columns, create indexes, and adjust your database schema as requirements change. But how do you keep databases in sync across your development team, staging servers, and production? Manual SQL scripts are fragile, error-prone, and impossible to version control effectively. One missed script and environments fall out of sync.
+
+**Database migrations** solve this problem elegantly. A migration is version-controlled PHP code that defines database changes (create table, add column, etc.) using Laravel's intuitive Schema Builder. Migrations are tracked automatically—UserFrosting knows which have run and which haven't. Running `php bakery migrate` applies all pending changes in the correct order, keeping every environment perfectly synchronized.
+
+Migrations also make testing safer by setting up clean test databases automatically, and they're reversible—the `down()` method can undo changes if needed.
+
+This page explains how to create and use migrations to manage your database schema professionally.
+
+## Why Migrations Matter
+
 When you start building your application with UserFrosting, you'll no doubt be adding your own tables to the data model. After all, what's the point of having users if there's nothing in your application for them to use?
 
 Though you could add new tables to your database through the command line, phpMyAdmin, MySQL Workbench or another tool, you will probably want something that is portable, allowing you to set up your database on other developers' machines or on your test and production servers. To do this, you should use a **migration**. Migrations bring version control to your database. If you have ever had to share sql files or manually edit a database schema, you've faced the problem that database migrations solve.
diff --git a/app/pages/6.0/17.i18n/01.introduction/docs.md b/app/pages/6.0/17.i18n/01.introduction/docs.md
index 0df6bbe1..f3f4e9aa 100644
--- a/app/pages/6.0/17.i18n/01.introduction/docs.md
+++ b/app/pages/6.0/17.i18n/01.introduction/docs.md
@@ -1,14 +1,20 @@
 ---
 title: Introduction
-description: An introduction to UserFrosting i18n system
+description: An introduction to UserFrosting's i18n system for building multilingual applications.
 wip: true
 ---
 
-UserFrosting provides a complete framework for translating strings and sentences easily and efficiently. UserFrosting allows you to [define the default locale](i18n/site-locale#the-default-locale) your UI should present to guest users, while allowing resgistered users to [choose their prefered locale](i18n/site-locale#the-available-user-locales).
+Your application might start with English speakers, but what about when your user base grows to include Spanish, French, Chinese, or Arabic speakers? Hardcoding English text throughout your code creates a localization nightmare. Every piece of text would need changing in dozens of files. Supporting multiple languages becomes practically impossible.
 
-## Why use translation on a single locale app ?
+**Internationalization (i18n)** solves this by separating text content from code. Instead of hardcoded strings, you use translation keys—`'USER_WELCOME'` instead of `"Welcome, user!"`. All translations live in language files that anyone can edit without touching code. Supporting a new language means adding a new language file, not modifying PHP.
 
-It's important to talk about why this system is important and why you should use it too in your sprinkles, even if you plan on supporting only a single locale in your app.
+UserFrosting provides a complete i18n framework with locale management, pluralization rules, and powerful translation features. Users can choose their preferred language, and your application automatically displays content in that language.
+
+This page introduces UserFrosting's translation system and explains why it matters even for single-language applications.
+
+## Why Use Translation Keys (Even for Single Language Apps)?
+
+It's important to talk about why this system is important and why you should use it in your sprinkles, even if you plan on supporting only a single locale in your app.
 
 Let's face it, it would be _waayyyy easier_ to simply hard code every public facing string in your common code. While using the translation system will make it easier to support additional languages in the future, it will also help separate your code from your site content.
 
diff --git a/app/pages/6.0/19.testing/01.why-test/docs.md b/app/pages/6.0/19.testing/01.why-test/docs.md
index 5bfab212..2e309595 100644
--- a/app/pages/6.0/19.testing/01.why-test/docs.md
+++ b/app/pages/6.0/19.testing/01.why-test/docs.md
@@ -1,6 +1,21 @@
 ---
-title: Why Use Automated Testing ?
+title: Why Use Automated Testing?
+description: Learn why testing is essential for building reliable, maintainable applications.
 wip: true
 ---
 
-To contribute to this documentation, please submit a pull request to our [learn repository](https://github.com/userfrosting/learn/tree/master/pages).
+Every developer has experienced this nightmare: You fix a bug in one part of your application, deploy it to production, and suddenly something else breaks. A "simple" change cascades into hours of debugging. Users report errors you never saw in development. You're afraid to modify code because you might break something.
+
+**Automated testing** prevents this chaos. Tests are code that verifies your code works correctly. When you make changes, tests run automatically to catch bugs before they reach production. They act as a safety net, giving you confidence to refactor, add features, and fix bugs without fear. Good tests mean fewer production bugs, faster development, and better sleep at night.
+
+UserFrosting includes PHPUnit for testing, and this chapter shows you how to write effective tests that make your application more reliable and maintainable.
+
+## Benefits of Testing
+
+- **Catch bugs early**: Find issues during development, not in production
+- **Confidence in changes**: Refactor and improve code without fear
+- **Living documentation**: Tests show how code should be used
+- **Faster debugging**: Tests pinpoint exactly what broke
+- **Better design**: Testable code is usually better-structured code
+
+This page explains the value of testing and why every professional application needs it.

From cd141db9ef4780a12ec1d571bedb8641c8430cbc Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 31 Jan 2026 23:50:19 +0000
Subject: [PATCH 11/13] Proofread documentation: fix spelling, grammar, and
 duplicate words

Co-authored-by: lcharette <2566513+lcharette@users.noreply.github.com>
---
 app/pages/6.0/01.quick-start/docs.md          |   2 +-
 .../03.develop-locally-serve-globally/docs.md |   2 +-
 app/pages/6.0/02.background/chapter.md        |   2 +-
 .../6.0/03.structure/01.introduction/docs.md  |   2 +-
 .../6.0/03.structure/02.dependencies/docs.md  |   6 +-
 .../6.0/03.structure/03.framework/docs.md     |   2 +-
 .../6.0/03.structure/04.sprinkles/docs.md     |   2 +-
 .../01.requirements/01.basic-stack/docs.md    |   4 +-
 .../02.essential-tools-for-php/docs.md        |   4 +-
 .../01.requirements/chapter.md                |   2 +-
 .../01.native/01.requirements/docs.md         |  20 ++--
 .../01.native/02.install/docs.md              |  10 +-
 .../02.environment/01.native/docs.md          |   4 +-
 .../02.environment/02.docker/docs.md          |  22 ++--
 .../6.0/04.installation/_modular/cli/docs.md  |  10 +-
 .../05.troubleshooting/01.debugging/docs.md   |   2 +-
 .../6.0/06.sprinkles/01.sprinkles/docs.md     |   4 +-
 app/pages/6.0/06.sprinkles/03.recipe/docs.md  |  42 +++----
 .../6.0/06.sprinkles/04.customize/docs.md     |   6 +-
 .../6.0/06.sprinkles/05.community/docs.md     |  10 +-
 .../01.concept/docs.md                        |   2 +-
 .../02.the-di-container/docs.md               |  16 +--
 .../03.default-services/docs.md               |   4 +-
 .../04.adding-services/docs.md                |   2 +-
 .../02.REST/02.restful-responses/docs.md      |   2 +-
 .../03.front-controller/docs.md               |   2 +-
 .../04.controller-classes/docs.md             |   4 +-
 .../05.registering-routes/docs.md             |  10 +-
 .../06.client-input/01.validation/docs.md     |   6 +-
 .../06.client-input/03.throttle/docs.md       |   6 +-
 .../6.0/10.users/01.user-accounts/docs.md     |   4 +-
 .../6.0/10.users/02.access-control/docs.md    |   4 +-
 app/pages/6.0/11.cli/01.commands/docs.md      |  22 ++--
 .../6.0/11.cli/02.custom-commands/docs.md     |   8 +-
 .../6.0/11.cli/03.extending-commands/docs.md  |  10 +-
 .../03.filters-and-functions/docs.md          |   4 +-
 .../03.vite-configuration/docs.md             |   8 +-
 .../05.using-assets/docs.md                   |   4 +-
 .../06.advanced/01.sprinkle-assets/docs.md    |   4 +-
 .../06.advanced/02.migration/docs.md          |   2 +-
 .../13.asset-management/06.advanced/docs.md   |  14 +--
 .../07.webpack-encore/01.basic-usage/docs.md  |   6 +-
 .../02.asset-bundles/docs.md                  |  12 +-
 .../07.webpack-encore/03.advance-use/docs.md  |  10 +-
 .../07.webpack-encore/docs.md                 |  12 +-
 app/pages/6.0/13.asset-management/chapter.md  |   2 +-
 .../6.0/14.database/03.migrations/docs.md     |   2 +-
 app/pages/6.0/14.database/04.seeding/docs.md  |   6 +-
 .../6.0/14.database/05.data-sprunjing/docs.md |   6 +-
 .../15.client-side-code/01.overview/docs.md   |   2 +-
 .../02.exporting-variables/docs.md            |  10 +-
 .../03.vue-components/docs.md                 |  54 ++++-----
 .../04.components/01.forms/docs.md            | 110 +++++++++---------
 .../04.components/02.tables/docs.md           |  46 ++++----
 .../04.components/03.collections/docs.md      |  62 +++++-----
 .../04.components/04.alerts/docs.md           |  46 ++++----
 .../15.client-side-code/04.components/docs.md |   8 +-
 .../6.0/16.mail/01.the-mailer-service/docs.md |   2 +-
 app/pages/6.0/17.i18n/01.introduction/docs.md |   2 +-
 app/pages/6.0/17.i18n/02.site-locale/docs.md  |   4 +-
 .../6.0/18.advanced/01.custom-models/docs.md  |   6 +-
 .../6.0/18.advanced/04.error-handling/docs.md |  22 ++--
 app/pages/6.0/18.advanced/05.sessions/docs.md |   2 +-
 .../18.advanced/06.caching/02.usage/docs.md   |   2 +-
 app/pages/6.0/18.advanced/08.locator/docs.md  |  10 +-
 app/pages/6.0/18.advanced/11.events/docs.md   |  28 ++---
 .../6.0/18.advanced/12.middlewares/docs.md    |  10 +-
 .../6.0/19.testing/02.running-tests/docs.md   |   2 +-
 .../03.writting-tests/01.testcase/docs.md     |  16 +--
 .../03.writting-tests/02.Traits/docs.md       |   6 +-
 .../03.writting-tests/03.Factories/docs.md    |   2 +-
 .../20.recipes/01.creating-a-new-page/docs.md |   2 +-
 .../02.extending-the-user-model/docs.md       |   6 +-
 .../20.recipes/04.custom-login-page/docs.md   |  18 +--
 .../6.0/20.recipes/06.external-js/docs.md     |  24 ++--
 .../01.base-setup/docs.md                     |   4 +-
 .../07.advanced-tutorial/02.database/docs.md  |  22 ++--
 .../06.custom-namespace/docs.md               |  10 +-
 .../01.51-to-60/01.changelog/docs.md          |   2 +-
 .../22.upgrading/01.51-to-60/02.guide/docs.md |   2 +-
 80 files changed, 447 insertions(+), 447 deletions(-)

diff --git a/app/pages/6.0/01.quick-start/docs.md b/app/pages/6.0/01.quick-start/docs.md
index 14fdd8dc..63acbc2a 100644
--- a/app/pages/6.0/01.quick-start/docs.md
+++ b/app/pages/6.0/01.quick-start/docs.md
@@ -8,7 +8,7 @@ UserFrosting is a free, open-source jumping-off point for building user-centered
 > [!NOTE]
 > This quick start guide is aimed at experienced PHP developers who already have a development environment set up. If that's not your case, head over to the [First Chapter](background) to start your journey.
 
-> [!IMPORTANT] 
+> [!IMPORTANT]
 > This is the documentation for **UserFrosting 6**. If you are looking for documentation for _UserFrosting 5_, [click here](https://learn.userfrosting.com/5.1/).
 
 ## Requirements
diff --git a/app/pages/6.0/02.background/03.develop-locally-serve-globally/docs.md b/app/pages/6.0/02.background/03.develop-locally-serve-globally/docs.md
index 278e0c16..e0c65e5b 100644
--- a/app/pages/6.0/02.background/03.develop-locally-serve-globally/docs.md
+++ b/app/pages/6.0/02.background/03.develop-locally-serve-globally/docs.md
@@ -28,7 +28,7 @@ In this same vein, any framework or CMS that has you do a "one-click install" is
 
 ## Setting up a local development environment
 
-If you think that setting up a local environment is too much work, think again! On a MacOS or Linux computer, setting up a local environment simply consist of installing a couple of apps through the command line. On a Windows 10 or 11 machine, an additional step is required : Installing the *Windows Subsystem for Linux (WSL2)*! 
+If you think that setting up a local environment is too much work, think again! On a MacOS or Linux computer, setting up a local environment simply consist of installing a couple of apps through the command line. On a Windows 10 or 11 machine, an additional step is required : Installing the *Windows Subsystem for Linux (WSL2)*!
 
 And the sprinkle on the cupcake is the [next chapter](installation) will teach you how to do everything yourself!
 
diff --git a/app/pages/6.0/02.background/chapter.md b/app/pages/6.0/02.background/chapter.md
index fa9c985a..00cc6782 100644
--- a/app/pages/6.0/02.background/chapter.md
+++ b/app/pages/6.0/02.background/chapter.md
@@ -7,6 +7,6 @@ description: "UserFrosting has a not-so-secret ulterior motive: to get you to be
 
 # Web Dev, the Right Way
 
-UserFrosting has a not-so-secret ulterior motive: **to get you to become a better developer**. 
+UserFrosting has a not-so-secret ulterior motive: **to get you to become a better developer**.
 
 In this chapter, we'll talk about the state of modern web development tools and practices, and clear up some common misconceptions about how web applications actually work. Then, we'll go over key security concepts. Finally, we'll discuss best practices to make sure that users will be able to find and use your application when it's finished.
diff --git a/app/pages/6.0/03.structure/01.introduction/docs.md b/app/pages/6.0/03.structure/01.introduction/docs.md
index d7b5219d..d01ae3a9 100644
--- a/app/pages/6.0/03.structure/01.introduction/docs.md
+++ b/app/pages/6.0/03.structure/01.introduction/docs.md
@@ -14,7 +14,7 @@ To make things easier, UserFrosting 5 now separates all of your code from UserFr
 
 ## The App Skeleton, your project's template
 
-The **app skeleton** is a bare-bone UserFrosting project. Think of it like a starting kit, or template, to create your own application. Everything in the skeleton is meant to be modified. As such, the skeleton doesn't need to be a synced copy of the UserFrosting Github repository (called a ***fork***). It provides example pages and all the basic configuration to run a default UserFrosting application. 
+The **app skeleton** is a bare-bone UserFrosting project. Think of it like a starting kit, or template, to create your own application. Everything in the skeleton is meant to be modified. As such, the skeleton doesn't need to be a synced copy of the UserFrosting Github repository (called a ***fork***). It provides example pages and all the basic configuration to run a default UserFrosting application.
 
 > [!IMPORTANT]
 > While there is an official UserFrosting App Skeleton, it doesn't need to be the only one. Many skeletons could exist as starting points for new UserFrosting-based projects
diff --git a/app/pages/6.0/03.structure/02.dependencies/docs.md b/app/pages/6.0/03.structure/02.dependencies/docs.md
index 10bbc74d..aed3fe5d 100644
--- a/app/pages/6.0/03.structure/02.dependencies/docs.md
+++ b/app/pages/6.0/03.structure/02.dependencies/docs.md
@@ -4,12 +4,12 @@ description: Detailed breakdown of a UserFrosting's dependencies.
 wip: true
 ---
 
-As detailed in a previous chapter, it's important [not to reinvent the wheel](background/dont-reinvent-the-wheel). That's why UserFrosting depends on a number of external libraries, called dependencies. Those are written by people and organizations external to UserFrosting, providing the base that UserFrosting works on. These dependencies are not tied to UserFrosting and can be used by anyone. Think of dependencies as the raw materials, like wood and concrete, you get from the hardware store to build a house. We simply "glued" them together to create awesomeness! 
+As detailed in a previous chapter, it's important [not to reinvent the wheel](background/dont-reinvent-the-wheel). That's why UserFrosting depends on a number of external libraries, called dependencies. Those are written by people and organizations external to UserFrosting, providing the base that UserFrosting works on. These dependencies are not tied to UserFrosting and can be used by anyone. Think of dependencies as the raw materials, like wood and concrete, you get from the hardware store to build a house. We simply "glued" them together to create awesomeness!
 
 While UserFrosting uses dozens of dependencies, here's a rundown of the most important ones:
 
 ## Slim 4
-**[Slim](https://www.slimframework.com)** is a PHP _micro framework_ that helps you quickly write simple yet powerful web applications and APIs. Slim is the backbone of UserFrosting. To be more precise, **UserFrosting _is_ a Slim Application**! 
+**[Slim](https://www.slimframework.com)** is a PHP _micro framework_ that helps you quickly write simple yet powerful web applications and APIs. Slim is the backbone of UserFrosting. To be more precise, **UserFrosting _is_ a Slim Application**!
 
 Except for the Bakery system (which uses _[Symfony Console](#symfony-console-5)_), UserFrosting uses Slim at every level to perform middleware management, route collections, and everything else needed to actually display a web page.
 
@@ -28,7 +28,7 @@ Eloquent is one of the most powerful and easy to use tools available to interact
 **[Twig](https://twig.symfony.com/doc/)** is a flexible, fast, and secure template engine for PHP. Initially developed for the Symfony framework, Twig is easy to use. Twig provides the necessary tools to use the data generated by PHP and render the HTML page the end user gets to see.
 
 ## Symfony Console 5
-**[Symfony Console](https://symfony.com/doc/5.4/components/console.html)** eases the creation of beautiful and testable command line interfaces. This is used to power the **Bakery** command line interface tool used by UserFrosting. 
+**[Symfony Console](https://symfony.com/doc/5.4/components/console.html)** eases the creation of beautiful and testable command line interfaces. This is used to power the **Bakery** command line interface tool used by UserFrosting.
 
 ## Webpack Encore 4
 **[Webpack Encore](https://symfony.com/doc/current/frontend.html)** wraps Webpack, providing a clean & powerful API for bundling JavaScript modules, pre-processing CSS & JS and compiling and minifying assets. Encore is a professional asset system that's a delight to use. It is used by UserFrosting to serve all CSS and Javascript files, while enabling the use of other frameworks, like Vue.js, in the future.
diff --git a/app/pages/6.0/03.structure/03.framework/docs.md b/app/pages/6.0/03.structure/03.framework/docs.md
index c4df5c1d..447a7724 100644
--- a/app/pages/6.0/03.structure/03.framework/docs.md
+++ b/app/pages/6.0/03.structure/03.framework/docs.md
@@ -11,7 +11,7 @@ Aside from managing sprinkles (through the cleverly named _SprinkleManager_), th
 ## Shared Usage
 The UserFrosting Framework also contains some parts that are not tied directly to UserFrosting. These parts could be used outside of UserFrosting, in a completely separate application.
 
-The documentation for each part is embedded in the next chapters, but you can still see each part's documentation on it's own : 
+The documentation for each part is embedded in the next chapters, but you can still see each part's documentation on it's own :
  - [Cache](https://github.com/userfrosting/framework/tree/5.1/src/Cache) : Wrapper function for Laravel cache system for easier integration of the cache system in standalone projects.
  - [Config](https://github.com/userfrosting/framework/tree/5.1/src/Config) : Configuration files aggregator
  - [Fortress](https://github.com/userfrosting/framework/tree/5.1/src/Fortress) : A schema-driven system for elegant whitelisting, transformation and validation of user input, on both the client and server sides, from a unified set of rules.
diff --git a/app/pages/6.0/03.structure/04.sprinkles/docs.md b/app/pages/6.0/03.structure/04.sprinkles/docs.md
index 6f77921f..84756c56 100644
--- a/app/pages/6.0/03.structure/04.sprinkles/docs.md
+++ b/app/pages/6.0/03.structure/04.sprinkles/docs.md
@@ -14,7 +14,7 @@ Your app can have as many sprinkles as you want. A sprinkle could even depend on
 
 ## Bundled Sprinkles
 
-A default UserFrosting installation comes with **four** sprinkles, each of which will be downloaded by [Composer](installation/requirements/essential-tools-for-php#composer) in the `/vendor` directory during installation. 
+A default UserFrosting installation comes with **four** sprinkles, each of which will be downloaded by [Composer](installation/requirements/essential-tools-for-php#composer) in the `/vendor` directory during installation.
 
 Because UserFrosting is modular, you can decide to use these bundled sprinkles or not. You may or may not need the functionality each provides in your app. We'll go over how to enable and disable them [later](sprinkles/recipe#removing-default-sprinkles). For now, let's focus on their features.
 
diff --git a/app/pages/6.0/04.installation/01.requirements/01.basic-stack/docs.md b/app/pages/6.0/04.installation/01.requirements/01.basic-stack/docs.md
index 5e87b22e..7510d589 100644
--- a/app/pages/6.0/04.installation/01.requirements/01.basic-stack/docs.md
+++ b/app/pages/6.0/04.installation/01.requirements/01.basic-stack/docs.md
@@ -20,7 +20,7 @@ To run UserFrosting, you'll need four things :
 
 To run any website, you need *web server software*. Its tasks are to receive client requests, execute them, and send a reply. For a PHP website, the web server software won't execute the PHP code itself. Instead, it passes it to PHP which interprets the code and returns a response for the web server to display.
 
-The most popular web servers today are : 
+The most popular web servers today are :
 
 - [Nginx](https://www.nginx.com)
 - [Apache](https://httpd.apache.org)
@@ -49,7 +49,7 @@ As for your local development environment ([You _do_ have a local development en
 
 ### PHP Extensions
 
-UserFrosting and its dependencies requires some PHP Libraries and Extensions to be installed and enabled : 
+UserFrosting and its dependencies requires some PHP Libraries and Extensions to be installed and enabled :
 
 - [GD](https://www.php.net/manual/en/book.image.php)
 - [DOM](https://www.php.net/manual/en/book.dom.php)
diff --git a/app/pages/6.0/04.installation/01.requirements/02.essential-tools-for-php/docs.md b/app/pages/6.0/04.installation/01.requirements/02.essential-tools-for-php/docs.md
index 981af220..5f098d5e 100644
--- a/app/pages/6.0/04.installation/01.requirements/02.essential-tools-for-php/docs.md
+++ b/app/pages/6.0/04.installation/01.requirements/02.essential-tools-for-php/docs.md
@@ -47,7 +47,7 @@ Composer also handles autoloading, which means that the days of needing long blo
 
 ## Node.js
 
-**[Node.js](https://nodejs.org/en/)** is an an extremely popular JavaScript runtime built on Chrome's V8 JavaScript Engine. In recent years it has become extremely popular for creating multiplatform applications, and for its role in providing a means to run platform independent build tools like `gulp` and `grunt` (to name just a few). Node.js also includes `npm` (Node.js Package Manager).
+**[Node.js](https://nodejs.org/en/)** is an extremely popular JavaScript runtime built on Chrome's V8 JavaScript Engine. In recent years it has become extremely popular for creating multiplatform applications, and for its role in providing a means to run platform independent build tools like `gulp` and `grunt` (to name just a few). Node.js also includes `npm` (Node.js Package Manager).
 
 Although UserFrosting does not _run_ on Node.js, it does use several Node-based tools to fetch client-side Javascript and CSS dependencies, as well as perform critical build tasks.
 
@@ -59,7 +59,7 @@ Although UserFrosting does not _run_ on Node.js, it does use several Node-based
 
 ## npm
 
-[npm](https://www.npmjs.com) stands for **N**ode **P**ackage **M**anager. npm is to Node.js what Composer is to PHP. It is used to grab the various Node packages that are required by UserFrosting's installation and build tools. 
+[npm](https://www.npmjs.com) stands for **N**ode **P**ackage **M**anager. npm is to Node.js what Composer is to PHP. It is used to grab the various Node packages that are required by UserFrosting's installation and build tools.
 
 > [!NOTE]
 > UserFrosting 5 requires **NPM 9** or above.
diff --git a/app/pages/6.0/04.installation/01.requirements/chapter.md b/app/pages/6.0/04.installation/01.requirements/chapter.md
index c519a77e..79b98eba 100644
--- a/app/pages/6.0/04.installation/01.requirements/chapter.md
+++ b/app/pages/6.0/04.installation/01.requirements/chapter.md
@@ -6,4 +6,4 @@ wip: true
 
 # Requirements
 
-UserFrosting has a few basic requirements and makes use of some modern development tools - requirements and tools that just about any modern web developer should already have set up! 
+UserFrosting has a few basic requirements and makes use of some modern development tools - requirements and tools that just about any modern web developer should already have set up!
diff --git a/app/pages/6.0/04.installation/02.environment/01.native/01.requirements/docs.md b/app/pages/6.0/04.installation/02.environment/01.native/01.requirements/docs.md
index 8a4cc869..bbce6f70 100644
--- a/app/pages/6.0/04.installation/02.environment/01.native/01.requirements/docs.md
+++ b/app/pages/6.0/04.installation/02.environment/01.native/01.requirements/docs.md
@@ -34,27 +34,27 @@ If you followed the previous pages, you probably noticed two pieces of software
 
 ### PHP
 
-Installing PHP 8.3 locally will make it easier to develop locally, as it will allow you to run Composer locally, too. 
+Installing PHP 8.3 locally will make it easier to develop locally, as it will allow you to run Composer locally, too.
 
 #### MacOS
 The easiest way to install PHP on MacOS is through Homebrew:
 1. Install XCode Command Line Tools : `xcode-select --install`
 2. Install [Homebrew](https://brew.sh) using their guide
-3. Install PHP 8.3, from the terminal : `brew install shivammathur/php/php@8.3` 
+3. Install PHP 8.3, from the terminal : `brew install shivammathur/php/php@8.3`
 
 > [!TIP]
 > It's possible to use multiple versions of PHP on MacOS. See [shivammathur/php documentation](https://github.com/shivammathur/homebrew-php#switch-between-php-versions).
 
 #### Linux & Windows WSL2
-Install PHP through the package manager. For example, on Ubuntu : 
+Install PHP through the package manager. For example, on Ubuntu :
 
-1. Add [Ondřej Surý PPA](https://launchpad.net/~ondrej/+archive/ubuntu/php/) to get the latest version : 
+1. Add [Ondřej Surý PPA](https://launchpad.net/~ondrej/+archive/ubuntu/php/) to get the latest version :
     ```bash
     sudo add-apt-repository ppa:ondrej/php
     sudo apt update
     ```
 
-2. Install PHP and the necessary extensions : 
+2. Install PHP and the necessary extensions :
    ```bash
    sudo apt install php8.3 php8.3-gd php8.3-dom php8.3-zip php8.3-sqlite3 php8.3-pdo_mysql php8.3-curl php8.3-mbstring unzip
    ```
@@ -165,7 +165,7 @@ While multiple solutions are available, two are recommended by UserFrosting : **
 
 Mailpit can be installed on [MacOS through Homebrew](https://github.com/axllent/mailpit#install-via-package-managers), on Linux/WSL2 through their Bash Script](https://github.com/axllent/mailpit#install-via-bash-script-linux--mac), or through [Docker](https://mailpit.axllent.org/docs/install/docker/). By default, Mailpit UI can be access at [http://0.0.0.0:8025](http://0.0.0.0:8025).
 
-When using Mailpit with UserFrosting, the following parameters will need to be provided during UserFrosting installation, which we'll see on the next page : 
+When using Mailpit with UserFrosting, the following parameters will need to be provided during UserFrosting installation, which we'll see on the next page :
 
 | Param       | Value     |
 |-------------|-----------|
@@ -176,11 +176,11 @@ When using Mailpit with UserFrosting, the following parameters will need to be p
 
 #### Mailtrap
 
-[Mailtrap](https://mailtrap.io/) is similar to Mailpit, but it runs in the cloud, so there's nothing to install. However, Mailtrap is not open source. Mailtrap features a forever free plan that offers basic functionality for personal use. The *Free Sandbox* provides one inbox and up to 100 emails per month. It's a great way to get started, as it's super easy and fast to setup. For a more permanent solution however, Mailpit should be preferred. 
+[Mailtrap](https://mailtrap.io/) is similar to Mailpit, but it runs in the cloud, so there's nothing to install. However, Mailtrap is not open source. Mailtrap features a forever free plan that offers basic functionality for personal use. The *Free Sandbox* provides one inbox and up to 100 emails per month. It's a great way to get started, as it's super easy and fast to setup. For a more permanent solution however, Mailpit should be preferred.
 
-To get started, simply create your account on [Mailtrap's website](https://mailtrap.io/register/signup). 
+To get started, simply create your account on [Mailtrap's website](https://mailtrap.io/register/signup).
 
-When using Mailtrap with UserFrosting, the following parameters will need to be provided during UserFrosting installation, which we'll see on the next page : 
+When using Mailtrap with UserFrosting, the following parameters will need to be provided during UserFrosting installation, which we'll see on the next page :
 
 | Param         | Value                    |
 |---------------|--------------------------|
@@ -193,7 +193,7 @@ The *user* and *password* are unique to your Mailtrap inbox, and can be found in
 
 ## Optional Installation
 
-The next tools are not required in your local development environment to run UserFrosting. However, you may be interested in installing them anyway; or the instructions may be helpful for those tools which apply to you. 
+The next tools are not required in your local development environment to run UserFrosting. However, you may be interested in installing them anyway; or the instructions may be helpful for those tools which apply to you.
 
 ### Git
 
diff --git a/app/pages/6.0/04.installation/02.environment/01.native/02.install/docs.md b/app/pages/6.0/04.installation/02.environment/01.native/02.install/docs.md
index f66e4d17..e10db2cb 100644
--- a/app/pages/6.0/04.installation/02.environment/01.native/02.install/docs.md
+++ b/app/pages/6.0/04.installation/02.environment/01.native/02.install/docs.md
@@ -17,7 +17,7 @@ composer create-project userfrosting/userfrosting UserFrosting "^5.1"
 > [!TIP]
 > Note the `UserFrosting` at the end of the command. This means `composer` will create new `UserFrosting` subdirectory inside the current location. You can change `UserFrosting` to whatever you like.
 
-This may take some time to complete. If Composer has completed successfully, you should see that a `vendor/` directory has been created. This `vendor/` directory contains all of UserFrosting's PHP dependencies - there should be nearly 30 subdirectories in here! 
+This may take some time to complete. If Composer has completed successfully, you should see that a `vendor/` directory has been created. This `vendor/` directory contains all of UserFrosting's PHP dependencies - there should be nearly 30 subdirectories in here!
 
 Next the **Bakery** will execute it's magic. You'll have to answer some questions, which will guide you into the configuration process. These will help you set up the **database** credentials, create the first **admin user** and install the third-party **assets**.
 
@@ -29,8 +29,8 @@ Next the **Bakery** will execute it's magic. You'll have to answer some question
 
 You will first be prompted for your database credentials. This is the information PHP needs to connect to your database. If you followed our guide to setup, you can select **SQLite** and the default path when asked. If PHP can't connect to your database using these credentials, make sure you have entered the right information and re-run the `bake` command.
 
-Bakery will also prompt you for SMTP credentials, so that UserFrosting can send emails for activating new accounts and setting and resetting passwords. 
-If you're using **Mailpit** or **Mailtrap**, you can select "SMTP" and enter the appropriate info. If you are not ready to set up email at this time, you can choose _No email support_ to skip SMTP configuration, however you'll get error when trying to register a new account. 
+Bakery will also prompt you for SMTP credentials, so that UserFrosting can send emails for activating new accounts and setting and resetting passwords.
+If you're using **Mailpit** or **Mailtrap**, you can select "SMTP" and enter the appropriate info. If you are not ready to set up email at this time, you can choose _No email support_ to skip SMTP configuration, however you'll get error when trying to register a new account.
 
 If the database connection is successful, the installer will then check that the basic dependencies are met. If so, the installer will run the _migrations_ to populate your database with new tables. During this process, you will be prompted for some information to set up the master account (first user). Finally, the installer will run the command to fetch javascript dependencies and build the assets.
 
@@ -42,13 +42,13 @@ If the database connection is successful, the installer will then check that the
 
 ## Serve and visit your website
 
-At this point you can run locally using the PHP Built-in server : 
+At this point you can run locally using the PHP Built-in server :
 
 ```bash
 php bakery serve
 ```
 
-You can now access UserFrosting at [http://localhost:8080](http://localhost:8080). You should see the default UserFrosting pages and login with the newly created master account. 
+You can now access UserFrosting at [http://localhost:8080](http://localhost:8080). You should see the default UserFrosting pages and login with the newly created master account.
 
 ![Basic front page of a UserFrosting installation](/images/front-page.png)
 
diff --git a/app/pages/6.0/04.installation/02.environment/01.native/docs.md b/app/pages/6.0/04.installation/02.environment/01.native/docs.md
index c2b2213b..b1f4c2cc 100644
--- a/app/pages/6.0/04.installation/02.environment/01.native/docs.md
+++ b/app/pages/6.0/04.installation/02.environment/01.native/docs.md
@@ -4,8 +4,8 @@ description: Getting UserFrosting up and running in your development environment
 wip: true
 ---
 
-This **native installation** guide will first show you the steps to install all the tools and apps required to run your own local development environment. Once this is done, the second part contains the steps required to get UserFrosting itself up and running. 
+This **native installation** guide will first show you the steps to install all the tools and apps required to run your own local development environment. Once this is done, the second part contains the steps required to get UserFrosting itself up and running.
 
-If you already have a local environment and you're familiar with tools like **Composer**, the first part also contains steps to make sure you have the *appropriate version* of everything set up. If you're already up to date, you can skip to the second part right away. 
+If you already have a local environment and you're familiar with tools like **Composer**, the first part also contains steps to make sure you have the *appropriate version* of everything set up. If you're already up to date, you can skip to the second part right away.
 
 If you don't want to install the required software natively, you may instead want to consider setting up [Docker](installation/environment/docker) as a pre-configured virtual environment.
diff --git a/app/pages/6.0/04.installation/02.environment/02.docker/docs.md b/app/pages/6.0/04.installation/02.environment/02.docker/docs.md
index a0962527..fd394348 100644
--- a/app/pages/6.0/04.installation/02.environment/02.docker/docs.md
+++ b/app/pages/6.0/04.installation/02.environment/02.docker/docs.md
@@ -21,7 +21,7 @@ First, you'll need to install Docker. Just follow the installation instructions
 - [Windows (via WSL2)](https://docs.docker.com/desktop/install/windows-install/)
 - [Linux](https://docs.docker.com/desktop/install/linux-install/)
 
-## Get UserFrosting 
+## Get UserFrosting
 
 For the next part, you'll need to use the command line. We'll use Composer (through a Docker image) to create an empty project, with the latest version of the UserFrosting skeleton, into a new `UserFrosting` subdirectory:
 
@@ -34,10 +34,10 @@ docker run --rm -it -v "$(pwd):/app" composer create-project userfrosting/userfr
 
 ## Build Containers & Setup UserFrosting
 
-Now it's simply a matter of navigating to the directory containing the source code you just downloaded, building the containers, starting them, then installing UserFrosting. 
+Now it's simply a matter of navigating to the directory containing the source code you just downloaded, building the containers, starting them, then installing UserFrosting.
 
 1. Navigate to the directory:
-   
+
    ```bash
    cd UserFrosting
    ```
@@ -46,24 +46,24 @@ Now it's simply a matter of navigating to the directory containing the source co
    > If you customized `UserFrosting` in the previous command, don't forget to change it in the command above.
 
 2. Build each of the Docker Containers (this might take a while):
-   
+
    ```bash
    docker-compose build --no-cache
    ```
 
 3. Copy the `.env` template
    ```bash
-   cp app/.env.docker app/.env 
+   cp app/.env.docker app/.env
    ```
 
 4. Start each Docker Container:
-   
+
    ```bash
    docker-compose up -d
    ```
 
 5. Set some directory permissions (you may have to enter your root password):
-   
+
    ```bash
    sudo touch app/logs/userfrosting.log
    sudo chown -R $USER: .
@@ -71,20 +71,20 @@ Now it's simply a matter of navigating to the directory containing the source co
    ```
 
 6. Install PHP dependencies:
-   
+
    ```bash
    docker-compose exec app composer update
    ```
 
 7. Install UserFrosting (database configuration and migrations, creation of admin user, etc.). You'll need to provide info to create the admin user:
-   
+
    ```bash
    docker-compose exec app php bakery bake
    ```
 
 Now visit [http://localhost:8080](http://localhost:8080) to see your UserFrosting homepage!
 
-You should see the default UserFrosting pages and be able to log in with the newly created admin account. 
+You should see the default UserFrosting pages and be able to log in with the newly created admin account.
 
 ![Basic front page of a UserFrosting installation](/images/front-page.png)
 
@@ -96,7 +96,7 @@ docker-compose stop
 
 ## Mailpit
 
-UserFrosting's default `docker-compose.yml` file contains a service entry for [Mailpit](https://github.com/axllent/mailpit). Mailpit intercepts emails sent by your application during local development and provides a convenient web interface so that you can preview your email messages in your browser. 
+UserFrosting's default `docker-compose.yml` file contains a service entry for [Mailpit](https://github.com/axllent/mailpit). Mailpit intercepts emails sent by your application during local development and provides a convenient web interface so that you can preview your email messages in your browser.
 
 While UserFrosting is running, you may access the Mailpit web interface at: [http://localhost:8025](http://localhost:8025).
 
diff --git a/app/pages/6.0/04.installation/_modular/cli/docs.md b/app/pages/6.0/04.installation/_modular/cli/docs.md
index ad4e6ad1..ed3bbafd 100644
--- a/app/pages/6.0/04.installation/_modular/cli/docs.md
+++ b/app/pages/6.0/04.installation/_modular/cli/docs.md
@@ -1,22 +1,22 @@
-The [command line interface](installation/requirements/essential-tools-for-php#the-command-line-cli) will be required to perform most tasks in this guide. It's usage depends on your OS : 
+The [command line interface](installation/requirements/essential-tools-for-php#the-command-line-cli) will be required to perform most tasks in this guide. It's usage depends on your OS :
 
-#### MacOS 
+#### MacOS
 If you're using MacOS, the **Terminal** is already installed on your computer. You'll find the app in `/System/Applications/Utilities/Terminal`.
 
 #### Linux
 Every Linux distro uses the command line. On Ubuntu for example, you can find a launcher for the terminal by clicking on the Activities item at the top left of the screen, then typing the first few letters of "terminal", "command", "prompt" or "shell".
 
 #### Windows
-The easiest way to setup a local dev environnement on Windows is through *Windows Subsystem for Linux* (WSL2). This is basically running Linux inside Windows. Best of both worlds! This also means most installation instructions for Windows you'll find on the internet won't work, as we're not technically *on* Windows, **we're on Ubuntu**. We'll instead use the Ubuntu installation instructions! 
+The easiest way to setup a local dev environnement on Windows is through *Windows Subsystem for Linux* (WSL2). This is basically running Linux inside Windows. Best of both worlds! This also means most installation instructions for Windows you'll find on the internet won't work, as we're not technically *on* Windows, **we're on Ubuntu**. We'll instead use the Ubuntu installation instructions!
 
-See this guide for more detail on this process : [Set up a WSL development environment](https://learn.microsoft.com/en-us/windows/wsl/setup/environment). The gist of it is : 
+See this guide for more detail on this process : [Set up a WSL development environment](https://learn.microsoft.com/en-us/windows/wsl/setup/environment). The gist of it is :
 
 1. Open *Windows Terminal*, which can be found in the [Microsoft Store](https://apps.microsoft.com/detail/9N0DX20HK701?hl=en-us&gl=US).
 2. Open the terminal and install WSL2 distro : `wsl --install`.
 3. During installation, enter a unix user with a password. Remember this password, you'll need it later!
 4. Restart Windows Terminal and open a new ***Ubuntu*** terminal. Each subsequent CLI usage on Windows will be from this Ubuntu terminal.
 
-When using Windows and WSL2, keep in mind your project files will be stored inside the Linux file system. For example, your project files will be in the Linux file system root directory (`\\wsl$\<DistroName>\home\<UserName>\Project`), not the Windows file system root directory (`C:\Users\<UserName>\Project or /mnt/c/Users/<UserName>/Project$`). See [Microsoft guide on file storage](https://learn.microsoft.com/en-us/windows/wsl/setup/environment#file-storage) for more information. 
+When using Windows and WSL2, keep in mind your project files will be stored inside the Linux file system. For example, your project files will be in the Linux file system root directory (`\\wsl$\<DistroName>\home\<UserName>\Project`), not the Windows file system root directory (`C:\Users\<UserName>\Project or /mnt/c/Users/<UserName>/Project$`). See [Microsoft guide on file storage](https://learn.microsoft.com/en-us/windows/wsl/setup/environment#file-storage) for more information.
 
 > [!TIP]
 > Also see the [Get started using Visual Studio Code with Windows Subsystem for Linux](https://learn.microsoft.com/en-us/windows/wsl/tutorials/wsl-vscode) guide if you're using VSCode.
diff --git a/app/pages/6.0/05.troubleshooting/01.debugging/docs.md b/app/pages/6.0/05.troubleshooting/01.debugging/docs.md
index dd0af71d..cb133405 100644
--- a/app/pages/6.0/05.troubleshooting/01.debugging/docs.md
+++ b/app/pages/6.0/05.troubleshooting/01.debugging/docs.md
@@ -218,7 +218,7 @@ We can also arbitrarily send manual debugging messages to `app/logs/userfrosting
 #[\DI\Attribute\Inject]
 protected DebugLoggerInterface $logger;
 
-// ... 
+// ...
 
 $this->logger->debug("Fetching owls from database...");
 $this->logger->debug("Owls found:", $owls);
diff --git a/app/pages/6.0/06.sprinkles/01.sprinkles/docs.md b/app/pages/6.0/06.sprinkles/01.sprinkles/docs.md
index c983b6ca..9cb84afc 100644
--- a/app/pages/6.0/06.sprinkles/01.sprinkles/docs.md
+++ b/app/pages/6.0/06.sprinkles/01.sprinkles/docs.md
@@ -8,7 +8,7 @@ Here's a problem every developer faces: **how do you customize a framework witho
 
 In earlier versions of UserFrosting, you had no choice—customizing meant editing core files. Want to add a field to the registration page? Modify `register.twig` directly. Need to extend the `User` class? Edit `User.php` itself. Every framework update risked breaking your work.
 
-**UserFrosting's sprinkle system** eliminates this problem entirely. Sprinkles let you extend, override, and customize functionality while keeping your code completely separate from the core framework. Updates become safe again—your customizations stay intact, isolated in your own sprinkle. Think of it like adding layers to a cake: each layer (sprinkle) builds on the previous one without destroying what's underneath. 
+**UserFrosting's sprinkle system** eliminates this problem entirely. Sprinkles let you extend, override, and customize functionality while keeping your code completely separate from the core framework. Updates become safe again—your customizations stay intact, isolated in your own sprinkle. Think of it like adding layers to a cake: each layer (sprinkle) builds on the previous one without destroying what's underneath.
 
 ## What is a "Sprinkle"?
 
@@ -29,7 +29,7 @@ As seen in the [App Structure Chapter](structure), sprinkles can be located anyw
 
 ### The Main Sprinkle
 
-Sprinkles are loaded in a specific order, defined by their dependencies, and entities of a given type in one sprinkle can extend entities of the same type in other sprinkles. The topmost sprinkle, usually your own project, is called the **main sprinkle**. All other sprinkles are called **depends sprinkles**. 
+Sprinkles are loaded in a specific order, defined by their dependencies, and entities of a given type in one sprinkle can extend entities of the same type in other sprinkles. The topmost sprinkle, usually your own project, is called the **main sprinkle**. All other sprinkles are called **depends sprinkles**.
 
 ### Default Sprinkles
 
diff --git a/app/pages/6.0/06.sprinkles/03.recipe/docs.md b/app/pages/6.0/06.sprinkles/03.recipe/docs.md
index b4ac7ccc..196d4af1 100644
--- a/app/pages/6.0/06.sprinkles/03.recipe/docs.md
+++ b/app/pages/6.0/06.sprinkles/03.recipe/docs.md
@@ -14,10 +14,10 @@ Every sprinkle **must have** a recipe—it's how UserFrosting knows your sprinkl
 
 The Sprinkle Recipe is a simple PHP class that provides standard methods which will be called by services to retrieve information about your sprinkle structure and the class it's registering. Every sprinkle recipe **MUST** implement the `UserFrosting\Sprinkle\SprinkleRecipe` interface. If you started from the [Skeleton](structure/introduction#the-app-skeleton-your-project-s-template), you already have a basic recipe.
 
-This interface requires you to implement the following method in your recipe:  
+This interface requires you to implement the following method in your recipe:
 - [`getName`](#name): Returns the name of the sprinkle.
-- [`getPath`](#path): Returns the path of the sprinkle. 
-- [`getSprinkles`](#dependent-sprinkles): Returns an array of dependent sub-sprinkles recipe. 
+- [`getPath`](#path): Returns the path of the sprinkle.
+- [`getSprinkles`](#dependent-sprinkles): Returns an array of dependent sub-sprinkles recipe.
 - [`getRoutes`](#routes): Return an array of routes classes.
 - [`getServices`](#services): Return an array of services classes.
 
@@ -26,9 +26,9 @@ This interface requires you to implement the following method in your recipe:
 
 ### Name
 
-This method returns the name identifier of the sprinkle. This name is mostly used in debug interfaces to identify resources and classes registered by the sprinkle. 
+This method returns the name identifier of the sprinkle. This name is mostly used in debug interfaces to identify resources and classes registered by the sprinkle.
 
-The method should return a string. For example: 
+The method should return a string. For example:
 
 ```php
 public function getName(): string
@@ -88,7 +88,7 @@ public function getSprinkles(): array
 }
 ```
 
-Since `Admin` depends on `Core`, `Account` and `AdminLTE`, it's not mandatory to relist them in your recipe. In fact, the code above is equivalent to this, since the other one will be registered by `Admin`: 
+Since `Admin` depends on `Core`, `Account` and `AdminLTE`, it's not mandatory to relist them in your recipe. In fact, the code above is equivalent to this, since the other one will be registered by `Admin`:
 ```php
 public function getSprinkles(): array
 {
@@ -113,7 +113,7 @@ public function getSprinkles(): array
 }
 ```
 
-Let's look at the process for the above code : 
+Let's look at the process for the above code :
 
 1. AdminLTE will be loaded first. AdminLTE depends on Core first, and Account second. Core doesn't depend on anything. So **Core** is the first sprinkle loaded;
 2. Account is then checked. It depends on Core, which is already loaded, so **Account** is the second loaded sprinkle;
@@ -128,7 +128,7 @@ Because of sprinkle dependencies, in all three examples the order will be `Core
 
 ### Routes
 
-Return an array of routes classes. More details about this will be explored in [Chapter 8 - Routes and Controllers](routes-and-controllers). 
+Return an array of routes classes. More details about this will be explored in [Chapter 8 - Routes and Controllers](routes-and-controllers).
 
 For example, to register `MyRoutes` class:
 ```php
@@ -144,7 +144,7 @@ public function getRoutes(): array
 
 Return an array of services definitions. These will be explored in [Chapter 7 - Dependency Injection](dependency-injection)
 
-Example: 
+Example:
 ```php
 public function getServices(): array
 {
@@ -188,9 +188,9 @@ $bakery->run();
 
 ## Optional recipes
 
-The sprinkle recipe power comes from its modularity. To avoid having one huge recipe with empty content, optional features can be added only when necessary. 
+The sprinkle recipe power comes from its modularity. To avoid having one huge recipe with empty content, optional features can be added only when necessary.
 
-The available sub-recipes includes: 
+The available sub-recipes includes:
 
 | Recipe                                      | Features                                                                                            |
 | ------------------------------------------- | --------------------------------------------------------------------------------------------------- |
@@ -220,7 +220,7 @@ class MyApp implements
 ### BakeryRecipe
 Interface : `UserFrosting\Sprinkle\BakeryRecipe`
 
-Methods to implements : 
+Methods to implements :
 - `getBakeryCommands` : Return a list of [Bakery commands](cli/custom-commands) classes
 
     **Example:**
@@ -254,11 +254,11 @@ Methods to implement :
 ### SeedRecipe
 Interface : `UserFrosting\Sprinkle\Core\Sprinkle\Recipe\SeedRecipe`
 
-Methods to implement : 
+Methods to implement :
 - `getSeeds` : Return a list of [Seeds](database/seeding) classes
 
     **Example:**
-    ```php 
+    ```php
     public function getSeeds(): array
     {
         return [
@@ -272,7 +272,7 @@ Methods to implement :
 ### MiddlewareRecipe
 Interface : `UserFrosting\Sprinkle\MiddlewareRecipe`
 
-Methods to implement : 
+Methods to implement :
 - `getMiddlewares` : Return a list of [Middlewares](advanced/middlewares) classes
 
     **Example:**
@@ -289,7 +289,7 @@ Methods to implement :
 ### EventListenerRecipe
 Interface : `UserFrosting\Event\EventListenerRecipe`
 
-Methods to implement : 
+Methods to implement :
 - `getEventListeners` : Allows to register [Event Listeners](advanced/events#listener)
 
     **Example:**
@@ -316,7 +316,7 @@ Methods to implement :
 ### TwigExtensionRecipe
 Interface : `UserFrosting\Sprinkle\Core\Sprinkle\Recipe\TwigExtensionRecipe`
 
-Methods to implement : 
+Methods to implement :
 - `getTwigExtensions` : Return a list of [Twig Extension](templating-with-twig/filters-and-functions#extending-twig-extensions) classes
 
     **Example:**
@@ -344,7 +344,7 @@ In this case, two files need to be edited : `composer.json` and the Sprinkle Rec
 2. Since changes were made to *composer.json*, composer need to be updated (`composer update`).
 
 3. In the Sprinkle Recipe, `Admin:class` can be removed from the `getSprinkles()` method:
-    ```php 
+    ```php
     public function getSprinkles(): array
     {
         return [
@@ -371,9 +371,9 @@ In this case, instead of adding the dependent sprinkle (in `getSprinkles`), you
 
 ### Extending dependent recipe
 
-This method is best used when you want to *remove* a small number of resources from a dependent sprinkle. As with the previous method, if the dependent sprinkle is updated, you may need to manually update your code. If you want to only one resource from a dependent sprinkle, it's best to use the previous method to import one, than to remove everything else. 
+This method is best used when you want to *remove* a small number of resources from a dependent sprinkle. As with the previous method, if the dependent sprinkle is updated, you may need to manually update your code. If you want to only one resource from a dependent sprinkle, it's best to use the previous method to import one, than to remove everything else.
 
-For example, you may want to remove all routes defined in the Account sprinkle : 
+For example, you may want to remove all routes defined in the Account sprinkle :
 ```php
 
 namespace UserFrosting\App;
@@ -395,6 +395,6 @@ class CustomAccount extends Account
 }
 ```
 
-In this case, instead of depending on `Account` in `getSprinkles`, you'll add `CustomAccount` in your sprinkle `getSprinkles`. All other methods from `Account` will be included via `CustomAccount`. 
+In this case, instead of depending on `Account` in `getSprinkles`, you'll add `CustomAccount` in your sprinkle `getSprinkles`. All other methods from `Account` will be included via `CustomAccount`.
 
 You'll then have **two recipes** in your sprinkle, e.g.: `MyApp` and `CustomAccount`, side by side. `MyApp` will still be *main sprinkle*, referenced in `index.php` and `bakery`, since `CustomAccount` is a dependency of `MyApp`.
diff --git a/app/pages/6.0/06.sprinkles/04.customize/docs.md b/app/pages/6.0/06.sprinkles/04.customize/docs.md
index 529c7d71..868d590d 100644
--- a/app/pages/6.0/06.sprinkles/04.customize/docs.md
+++ b/app/pages/6.0/06.sprinkles/04.customize/docs.md
@@ -17,7 +17,7 @@ The most important part to edit here is the Namespace. The namespace tells Compo
 > [!NOTE]
 > Compared to previous version of UserFrosting, **starting from UserFrosting 5**, the namespace isn't strict anymore. There's no more convention to follow.
 
-The namespace is defined in the `composer.json` file in the base directory of your sprinkle. The default file looks like this : 
+The namespace is defined in the `composer.json` file in the base directory of your sprinkle. The default file looks like this :
 
 Original **composer.json**
 ```json
@@ -82,7 +82,7 @@ Original **composer.json**
 }
 ```
 
-Let's change thing up. All the metadata can be customized to reflect your project, and we'll define the new namespace to `Owlfancy\Site` : 
+Let's change thing up. All the metadata can be customized to reflect your project, and we'll define the new namespace to `Owlfancy\Site` :
 
 Modified **composer.json**
 ```json
@@ -149,7 +149,7 @@ $ composer update
 
 ### The recipe
 
-The next step is to update every reference of `UserFrosting\App` to `Owlfancy\Site`, in each PHP files inside `app/src/`. But there's one file that might require a bit more attention. The recipe, located in `app/src/MyApp.php` can be renamed to reflect your project. For example, we can rename it to `app/src/Owlfancy.php`. The class name should also be renamed to `Owlfancy`. We'll also edit the `getName()` method, to reflect our project name : 
+The next step is to update every reference of `UserFrosting\App` to `Owlfancy\Site`, in each PHP files inside `app/src/`. But there's one file that might require a bit more attention. The recipe, located in `app/src/MyApp.php` can be renamed to reflect your project. For example, we can rename it to `app/src/Owlfancy.php`. The class name should also be renamed to `Owlfancy`. We'll also edit the `getName()` method, to reflect our project name :
 
 ```php
 <?php
diff --git a/app/pages/6.0/06.sprinkles/05.community/docs.md b/app/pages/6.0/06.sprinkles/05.community/docs.md
index 6b4edf3d..4a9163df 100644
--- a/app/pages/6.0/06.sprinkles/05.community/docs.md
+++ b/app/pages/6.0/06.sprinkles/05.community/docs.md
@@ -40,7 +40,7 @@ use Owlfancy\Sprinkle\Owlery ; //don't forget to include the sprinkle's namespac
 > If the sprinkle does not include Javascript, you're done setting up--skip to the "Installing" section.
 
 ### Javascript
-If the sprinkle includes Javascript, you will need to add it to both the "dependencies" [in your `package.json`](asset-management/webpack-encore#npm-and-packages-json)... 
+If the sprinkle includes Javascript, you will need to add it to both the "dependencies" [in your `package.json`](asset-management/webpack-encore#npm-and-packages-json)...
 ```json
  "dependencies": {
         "@userfrosting/sprinkle-admin": "~5.1.0",
@@ -70,12 +70,12 @@ php bakery bake
 ```
 
 ### Database (optional)
-If needed, [migrations](cli/commands#migrate) and [seeds](cli/commands#seed) can be run manually through Bakery. 
+If needed, [migrations](cli/commands#migrate) and [seeds](cli/commands#seed) can be run manually through Bakery.
 ```txt
 php bakery migrate
 php bakery seed
 ```
-You can also use `php bakery migrate:status` and `php bakery seed:list` to check what migrations and seeds the sprinkle has added, and if any migrations have not yet been run. 
+You can also use `php bakery migrate:status` and `php bakery seed:list` to check what migrations and seeds the sprinkle has added, and if any migrations have not yet been run.
 
 > [!TIP]
 > `php bakery bake` should run migrations automatically, but you can use the above commands later if you don't want to run a full `bake`.
@@ -88,13 +88,13 @@ You can also use `php bakery migrate:status` and `php bakery seed:list` to check
 ### Basic prep work
 When you're ready to distribute your sprinkle, first use `composer update` to make sure it is up to date with the latest version of UserFrosting.
 
-Providing documentation and examples in a `README` file will encourage other devs to use your sprinkle. You should specify whether they need to add your sprinkle to `package.json`, if there are any seeds to run, and any other steps needed to fully set up. 
+Providing documentation and examples in a `README` file will encourage other devs to use your sprinkle. You should specify whether they need to add your sprinkle to `package.json`, if there are any seeds to run, and any other steps needed to fully set up.
 > [!TIP]
 > As an example, if your sprinkle adds a new permission, anyone installing your sprinkle may need to manually add that permission to the appropriate roles through the UserFrosting UI.
 
 Every sprinkle needs a valid `composer.json` file. This file is required to add any sort of class and PSR-4 definition to your sprinkle, so you already have one. Make sure it contains up-to-date information; your name and license details are always welcome. If you include a `type` key, be sure it's defined as `userfrosting-sprinkle` in your sprinkles `composer.json` file--but this is not required as of UserFrosting 5.
 
-We highly recommend publishing your community sprinkle on GitHub and adding it to [Packagist](https://packagist.org). This lets others include your sprinkle in `composer.json`, similar to how the default sprinkles are already defined. 
+We highly recommend publishing your community sprinkle on GitHub and adding it to [Packagist](https://packagist.org). This lets others include your sprinkle in `composer.json`, similar to how the default sprinkles are already defined.
 
 You may also have some extra steps depending on what features your sprinkle provides:
 
diff --git a/app/pages/6.0/07.dependency-injection/01.concept/docs.md b/app/pages/6.0/07.dependency-injection/01.concept/docs.md
index 0e63f638..07a7242a 100644
--- a/app/pages/6.0/07.dependency-injection/01.concept/docs.md
+++ b/app/pages/6.0/07.dependency-injection/01.concept/docs.md
@@ -112,7 +112,7 @@ class Owl
 }
 ```
 
-In the above example, it doesn't matter if `Owl` receives a `Nest` or an `ImprovedNest`, or even a `SuperDuperNest`, as long as they all obey the same contract defined by the `NestInterface`. Moreover, the `Owl` class can confidently call the `getSize()` method of the injected `$nest` property, because the interface ensures that method is available, no matter which implementation of the `NestInterface` it receives. 
+In the above example, it doesn't matter if `Owl` receives a `Nest` or an `ImprovedNest`, or even a `SuperDuperNest`, as long as they all obey the same contract defined by the `NestInterface`. Moreover, the `Owl` class can confidently call the `getSize()` method of the injected `$nest` property, because the interface ensures that method is available, no matter which implementation of the `NestInterface` it receives.
 
 Using interfaces to declare what kind of object a class is expected to receive, even if you don't plan to have multiple "nest" types, is a key element in *autowiring* that we'll see shortly.
 
diff --git a/app/pages/6.0/07.dependency-injection/02.the-di-container/docs.md b/app/pages/6.0/07.dependency-injection/02.the-di-container/docs.md
index 68df45d7..5af4cb92 100644
--- a/app/pages/6.0/07.dependency-injection/02.the-di-container/docs.md
+++ b/app/pages/6.0/07.dependency-injection/02.the-di-container/docs.md
@@ -30,7 +30,7 @@ Three main steps are required to create the object:
 
 This is a lot of code to write just to create one measly object! It would be great if we could somehow encapsulate the creation of the object without creating tight couplings within the object itself.
 
-This is where the **dependency injection container (DIC)** comes into play. The DIC handles basic management of dependencies, encapsulating their creation into simple callbacks. We will call these callbacks **services**. 
+This is where the **dependency injection container (DIC)** comes into play. The DIC handles basic management of dependencies, encapsulating their creation into simple callbacks. We will call these callbacks **services**.
 
 > [!NOTE]
 > Dependency Injection (DI) and the Dependency Injection Container (DIC) are two separate concepts.
@@ -41,7 +41,7 @@ This is where the **dependency injection container (DIC)** comes into play. The
 UserFrosting uses [_PHP-DI 7_](https://php-di.org) as it's DIC implementation since it provides many powerful features that we rely on:
 
 1. It creates dependencies lazily ("on demand"). Any service (and its dependencies) won't be created until the first time we access them.
-2. Once an object has been created in the container, the same object is returned in each subsequent call to the container. 
+2. Once an object has been created in the container, the same object is returned in each subsequent call to the container.
 3. It has the ability to automatically create and inject dependencies.
 4. It has powerful Slim 4 integration.
 
@@ -106,7 +106,7 @@ class LoggerServicesProvider implements ServicesProviderInterface
 
                 return $logger;
             },
-            
+
             StreamHandler::class => function () {
                 // 'userfrosting.log' could be fetched from a Config service here, for example.
                 return new StreamHandler('userfrosting.log');
@@ -121,7 +121,7 @@ class LoggerServicesProvider implements ServicesProviderInterface
 This definition uses the [PHP-DI factories](https://php-di.org/doc/php-definitions.html#factories) syntax. From the PHP-DI documentation:
 
 > Factories are PHP callables that return the instance. They allow to easily define objects lazily, i.e. each object will be created only when actually needed (because the callable will be called when actually needed).
-> 
+>
 > Just like any other definition, factories are called once and the same result is returned every time the factory needs to be resolved.
 >
 > Other services can be injected via type-hinting (as long as they are registered in the container or autowiring is enabled).
@@ -142,7 +142,7 @@ Earlier we discussed the benefits of using interfaces, as the constructor can ac
 public function __construct(NestInterface $nest) // Accept both `Nest` and `ImprovedNest`
 ```
 
-In this case, _Autowiring_ can't help us since the `NestInterface` cannot be instantiated: it's not a class, it's an interface! In this case, PHP Definitions can be used to match the interface with the correct class we want, using either a factory, or the [Autowired object](https://php-di.org/doc/php-definitions.html#autowired-objects) syntax: 
+In this case, _Autowiring_ can't help us since the `NestInterface` cannot be instantiated: it's not a class, it's an interface! In this case, PHP Definitions can be used to match the interface with the correct class we want, using either a factory, or the [Autowired object](https://php-di.org/doc/php-definitions.html#autowired-objects) syntax:
 
 ```php
 return [
@@ -151,7 +151,7 @@ return [
 ];
 ```
 
-The "nest of choice" can now be selected in the service provider. It could also be selected using another kind of logic, for example using a `Config` service and the new for PHP 8.0 [match expression](https://www.php.net/manual/en/control-structures.match.php): 
+The "nest of choice" can now be selected in the service provider. It could also be selected using another kind of logic, for example using a `Config` service and the new for PHP 8.0 [match expression](https://www.php.net/manual/en/control-structures.match.php):
 ```php
 return [
     // Inject Config to decide which nest to use, and the Container to get the actual class
@@ -165,7 +165,7 @@ return [
 ];
 ```
 
-But why are interfaces really needed? If `ImprovedNest` extends `Nest`, wouldn't the constructor accept an `ImprovedNest` anyway if you type-hinted against `Nest`? Well, yes... But it won't work the other way around. For example : 
+But why are interfaces really needed? If `ImprovedNest` extends `Nest`, wouldn't the constructor accept an `ImprovedNest` anyway if you type-hinted against `Nest`? Well, yes... But it won't work the other way around. For example :
 
 
 ```php
@@ -181,7 +181,7 @@ class AcceptNest {
 $improvedNest = $this->ci->get(Nest::class); // Return `ImprovedNest`, because service is configured this way
 $test = new AcceptNest($improvedNest); // Works, ImprovedNest is a subtype of Nest
 
-// This wont 
+// This wont
 
 class AcceptImprovedNest {
     public function __construct(protected ImprovedNest $nest)
diff --git a/app/pages/6.0/07.dependency-injection/03.default-services/docs.md b/app/pages/6.0/07.dependency-injection/03.default-services/docs.md
index d52ce9c2..31b9be00 100644
--- a/app/pages/6.0/07.dependency-injection/03.default-services/docs.md
+++ b/app/pages/6.0/07.dependency-injection/03.default-services/docs.md
@@ -4,7 +4,7 @@ description: UserFrosting's default services provide most of the tools needed to
 wip: true
 ---
 
-As mentioned in the last section, each sprinkle can set up its own services through **service providers**. The [bundled sprinkles](structure/sprinkles#bundled-sprinkles) set up many services that are essential to UserFrosting's functionality. These services can be found in the `src/ServicesProvider/` subdirectories in each Sprinkle's directory. 
+As mentioned in the last section, each sprinkle can set up its own services through **service providers**. The [bundled sprinkles](structure/sprinkles#bundled-sprinkles) set up many services that are essential to UserFrosting's functionality. These services can be found in the `src/ServicesProvider/` subdirectories in each Sprinkle's directory.
 
 But this is just the tip of the iceberg, since _Autowiring_ is also used throughout the source code to inject other types of classes pretty much everywhere.
 
@@ -112,7 +112,7 @@ The `GuestGuard` middleware, which is bound to routes that require a guest (non
 
 Monolog `Logger` object for logging detailed information about access control checks. See [Chapter 10](users/access-control) for more information about access control. Note that access control checks will only be logged if `debug.auth` is set to `true` in the configuration.
 
-### `UserFrosting\Sprinkle\Account\Authorize\AuthorizationManager` 
+### `UserFrosting\Sprinkle\Account\Authorize\AuthorizationManager`
 
 *Associated Interface : `UserFrosting\Sprinkle\Account\Authorize\AuthorizationManagerInterface`*
 
diff --git a/app/pages/6.0/07.dependency-injection/04.adding-services/docs.md b/app/pages/6.0/07.dependency-injection/04.adding-services/docs.md
index 6f8d9654..ffb362ea 100644
--- a/app/pages/6.0/07.dependency-injection/04.adding-services/docs.md
+++ b/app/pages/6.0/07.dependency-injection/04.adding-services/docs.md
@@ -21,7 +21,7 @@ app
 
 ### Create your service
 
-First, we'll create the service class. This class **must** implement the `UserFrosting\ServicesProvider\ServicesProviderInterface` interface. It must contain the `register` method, which returns an array of [service definitions](dependency-injection/the-di-container#service-providers-definitions). 
+First, we'll create the service class. This class **must** implement the `UserFrosting\ServicesProvider\ServicesProviderInterface` interface. It must contain the `register` method, which returns an array of [service definitions](dependency-injection/the-di-container#service-providers-definitions).
 
 **app/src/ServicesProvider/MapBuilderService.php**
 
diff --git a/app/pages/6.0/08.routes-and-controllers/02.REST/02.restful-responses/docs.md b/app/pages/6.0/08.routes-and-controllers/02.REST/02.restful-responses/docs.md
index ed599def..aa20fff9 100644
--- a/app/pages/6.0/08.routes-and-controllers/02.REST/02.restful-responses/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/02.REST/02.restful-responses/docs.md
@@ -95,7 +95,7 @@ use UserFrosting\Sprinkle\Core\Exceptions\NotFoundException;
     public function updateField()
     {
         $user = // ...
-        
+
         // Will cause a 404 response
         if ($user === null) {
             throw new NotFoundException();
diff --git a/app/pages/6.0/08.routes-and-controllers/03.front-controller/docs.md b/app/pages/6.0/08.routes-and-controllers/03.front-controller/docs.md
index 7856b475..1d8feb0a 100644
--- a/app/pages/6.0/08.routes-and-controllers/03.front-controller/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/03.front-controller/docs.md
@@ -11,7 +11,7 @@ Sprinkles define their routes in classes and register them in their Recipe. Ther
 The following is an example of a `GET` route:
 
 ```php
-$app->get('/api/users/u/{username}', function (string $username, Request $request, Response $response, array $args) 
+$app->get('/api/users/u/{username}', function (string $username, Request $request, Response $response, array $args)
 {
     $getParams = $request->getQueryParams();
 
diff --git a/app/pages/6.0/08.routes-and-controllers/04.controller-classes/docs.md b/app/pages/6.0/08.routes-and-controllers/04.controller-classes/docs.md
index 1965c5be..1d4a5d0f 100644
--- a/app/pages/6.0/08.routes-and-controllers/04.controller-classes/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/04.controller-classes/docs.md
@@ -114,9 +114,9 @@ class OwlController
     public function __construct(
         protected Twig $view,
         protected VoleFinder $voleFinder)
-    {        
+    {
     }
-    
+
     public function getOwls(string $genus, Request $request, Response $response): Response
     {
         // ...
diff --git a/app/pages/6.0/08.routes-and-controllers/05.registering-routes/docs.md b/app/pages/6.0/08.routes-and-controllers/05.registering-routes/docs.md
index 214769ff..5706cca4 100644
--- a/app/pages/6.0/08.routes-and-controllers/05.registering-routes/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/05.registering-routes/docs.md
@@ -4,12 +4,12 @@ description: Once your routes definitions are ready, you have to register them i
 wip: true
 ---
 
-So far we've seen how to [create route definitions](routes-and-controllers/front-controller) and [controller classes](routes-and-controllers/controller-classes). However, there one last step required for our routes to be enabled inside our application. That is registering the route class inside the [Sprinkle Recipe](sprinkles/recipe#routes). 
+So far we've seen how to [create route definitions](routes-and-controllers/front-controller) and [controller classes](routes-and-controllers/controller-classes). However, there one last step required for our routes to be enabled inside our application. That is registering the route class inside the [Sprinkle Recipe](sprinkles/recipe#routes).
 
 > [!NOTE]
 > Previous versions of UserFrosting relied on a naming convention for registering routes. Routes were expected to be placed in a special directory, and would automatically be registered at runtime. To provide more flexibility, the naming convention has been dropped in UserFrosting 5. You now have to register every class you wish to register, in the order you want them to be registered, inside the Sprinkle Recipe.
 
-The first step is to create a new class that will return the Slim route definition. This class **must** implement the `UserFrosting\Routes\RouteDefinitionInterface` interface from the UserFrosting Framework. For example : 
+The first step is to create a new class that will return the Slim route definition. This class **must** implement the `UserFrosting\Routes\RouteDefinitionInterface` interface from the UserFrosting Framework. For example :
 
 **app/src/MyRoutes.php**
 ```php
@@ -30,7 +30,7 @@ class MyRoutes implements RouteDefinitionInterface
 }
 ```
 
-Note in the previous example how the class has a [FQN](https://www.php.net/manual/en/language.namespaces.rules.php) of `\UserFrosting\App\MyRoutes`. 
+Note in the previous example how the class has a [FQN](https://www.php.net/manual/en/language.namespaces.rules.php) of `\UserFrosting\App\MyRoutes`.
 
 To register this class inside your application, you need to add it to the `getRoutes()` method of the Sprinkle Recipe. Don't forget to add the previous class to the `use` block at the top. For example :
 
@@ -46,8 +46,8 @@ use UserFrosting\App\MyRoutes; // <-- Add here !
 // ...
 
 class MyApp implements SprinkleRecipe {
-    
-    // ... 
+
+    // ...
 
     /**
      * Returns a list of routes definition in PHP files.
diff --git a/app/pages/6.0/08.routes-and-controllers/06.client-input/01.validation/docs.md b/app/pages/6.0/08.routes-and-controllers/06.client-input/01.validation/docs.md
index 94ed9ac3..6334ddb0 100644
--- a/app/pages/6.0/08.routes-and-controllers/06.client-input/01.validation/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/06.client-input/01.validation/docs.md
@@ -368,7 +368,7 @@ screech:
 > Regular expressions should _not_ be wrapped in quotes in YAML. Also the jQuery Validation plugin wraps regular expressions on the client side with `^...$`. Please see [this issue](https://github.com/jquery-validation/jquery-validation/issues/1967).
 
 ### Input arrays, multidimensional arrays & associative arrays
-If your form uses [input arrays](https://stackoverflow.com/a/42969920/445757) such as `<input name='nameList[]'...`, you can reference the array itself in your validation schema as `nameList` and each element of the array as `nameList.*`. This can be useful with dynamic form with a variable or unknown number of input of the same nature. For example, a list of names : 
+If your form uses [input arrays](https://stackoverflow.com/a/42969920/445757) such as `<input name='nameList[]'...`, you can reference the array itself in your validation schema as `nameList` and each element of the array as `nameList.*`. This can be useful with dynamic form with a variable or unknown number of input of the same nature. For example, a list of names :
 
 ```html
 <input name="nameList[]" type="text" />
@@ -409,7 +409,7 @@ nameList.*:
   - trim
 ```
 
-However, with associative arrays, this is useful if different rules are required for each associations. For example, the schema below will apply the `purge` transformation to `nameList.*.first` only, `escape` will be only apply to `nameList.*.last`, but `trim` will be applied to both. 
+However, with associative arrays, this is useful if different rules are required for each associations. For example, the schema below will apply the `purge` transformation to `nameList.*.first` only, `escape` will be only apply to `nameList.*.last`, but `trim` will be applied to both.
 
 ```yaml
 nameList:
@@ -458,7 +458,7 @@ phoneList.*:
       message: The phone number you provided is not a valid US phone number.
 ```
 
-Please check [Valitron's usage directions](https://github.com/vlucas/valitron#usage) for more information on arrays and [multidimensional arrays](https://mattstauffer.com/blog/a-little-trick-for-grouping-fields-in-an-html-form/). 
+Please check [Valitron's usage directions](https://github.com/vlucas/valitron#usage) for more information on arrays and [multidimensional arrays](https://mattstauffer.com/blog/a-little-trick-for-grouping-fields-in-an-html-form/).
 
 Keep in mind, each field **not** in the schema will be removed from the transformed data by default. If your schema contains `nameList.*.first` and `nameList.*.last`, and the associative array / form contains an `email` key, it will be removed as the schema doesn't contains `nameList.*.email`.
 
diff --git a/app/pages/6.0/08.routes-and-controllers/06.client-input/03.throttle/docs.md b/app/pages/6.0/08.routes-and-controllers/06.client-input/03.throttle/docs.md
index 2ac6b2a8..f7c796ed 100644
--- a/app/pages/6.0/08.routes-and-controllers/06.client-input/03.throttle/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/06.client-input/03.throttle/docs.md
@@ -55,7 +55,7 @@ This process is generally implemented using the `getDelay` and `logEvent` method
 
 // Inject Throttler into the class
 public function __construct(
-    // ... 
+    // ...
     protected Throttler $throttler,
     // ...
 ) {
@@ -85,12 +85,12 @@ $this->db->transaction(function () use ($data) {
     $this->throttler->logEvent('password_reset_request', [
         'email' => $data['email'],
     ]);
-    
+
     // ...
 
 });
 
-// ... 
+// ...
 ```
 
 You'll notice that we first check the `password_reset_request` throttle (the client IP address is automatically retrieved by the `throttler` service) and return an error if the computed delay is greater than 0. We do this *before* the call to `logEvent` - which adds a record of this attempt to the database - so that requests which are rejected because of the throttle rule do not further exacerbate the timeout period.
diff --git a/app/pages/6.0/10.users/01.user-accounts/docs.md b/app/pages/6.0/10.users/01.user-accounts/docs.md
index 36948be8..3b250213 100644
--- a/app/pages/6.0/10.users/01.user-accounts/docs.md
+++ b/app/pages/6.0/10.users/01.user-accounts/docs.md
@@ -222,7 +222,7 @@ User accounts can be deleted from the user profile page, or the user dropdown me
 
 Deleting user accounts presents a problem because the user may have related data in the database that would become orphaned, potentially breaking other functionality in your site. For this reason, UserFrosting performs [soft deletes](https://laravel.com/docs/8.x/eloquent#soft-deleting) by default. The user record is not actually deleted, but instead a `deleted_at` timestamp is added to the record and the user is no longer able to sign in. Deleted users are also excluded from all queries unless the `withTrashed` method is added to the Eloquent query. Related entities (activities, roles, etc) are left alone.
 
-If you really want to completely remove the user from the database, you can call the `User::forceDelete` method in your controller logic. 
+If you really want to completely remove the user from the database, you can call the `User::forceDelete` method in your controller logic.
 
 Here's an example using `User::forceDelete` in a custom UserActions class:
 
@@ -235,7 +235,7 @@ class UserActions {
 
     public function delete($userId) {
         $userModel = new User();
-        
+
         //includes soft-deleted users
         $user = $userModel->withTrashed()->find($userId);
 
diff --git a/app/pages/6.0/10.users/02.access-control/docs.md b/app/pages/6.0/10.users/02.access-control/docs.md
index 3a077d91..e44348ac 100644
--- a/app/pages/6.0/10.users/02.access-control/docs.md
+++ b/app/pages/6.0/10.users/02.access-control/docs.md
@@ -132,7 +132,7 @@ UserFrosting ships with a number of predefined access condition callbacks, which
 
 ### Custom callbacks
 
-To add your own access condition callbacks, simply extend `UserFrosting\Sprinkle\Account\Authorize\AccessConditions` and replace it in a custom Service Provider. For example : 
+To add your own access condition callbacks, simply extend `UserFrosting\Sprinkle\Account\Authorize\AccessConditions` and replace it in a custom Service Provider. For example :
 
 ```php
 use UserFrosting\ServicesProvider\ServicesProviderInterface;
@@ -152,7 +152,7 @@ final class CustomAccessConditionsService implements ServicesProviderInterface
 }
 ```
 <!-- TODO : Requires update in Account Sprinkle (UserFrosting\Sprinkle\Account\Authorize\AccessConditions) -->
-<!-- 
+<!--
 Alternatively, to add your own access condition callbacks, simply [decorate](dependency-injection/extending-services) the `AccessConditions` service:
 
 ```php
diff --git a/app/pages/6.0/11.cli/01.commands/docs.md b/app/pages/6.0/11.cli/01.commands/docs.md
index 76274727..b6e75cd1 100644
--- a/app/pages/6.0/11.cli/01.commands/docs.md
+++ b/app/pages/6.0/11.cli/01.commands/docs.md
@@ -295,7 +295,7 @@ $ php bakery migrate:rollback [options]
 
 ### migrate:reset
 
-The `migrate:reset` command is the same as the _rollback_ command, but it will revert **every** migration. Without options, this is the same as wiping the database to a clean state. 
+The `migrate:reset` command is the same as the _rollback_ command, but it will revert **every** migration. Without options, this is the same as wiping the database to a clean state.
 
 > [!WARNING]
 > **Use this command with caution!**
@@ -525,19 +525,19 @@ $ php bakery sprinkle:list
 
 Example result:
 
-```txt 
+```txt
  Loaded Sprinkles
 ================
 
- ------------------ --------------------------------------- ---------------------------------------------------------------------- 
-  Sprinkle           Namespace                               Path                                                                
- ------------------ --------------------------------------- ---------------------------------------------------------------------- 
-  Core Sprinkle      UserFrosting\Sprinkle\Core\Core         /home/UserFrosting/vendor/userfrosting/sprinkle-core/app/src/../     
-  Account Sprinkle   UserFrosting\Sprinkle\Account\Account   /home/UserFrosting/vendor/userfrosting/sprinkle-account/app/src/../  
-  AdminLTE Theme     UserFrosting\Theme\AdminLTE\AdminLTE    /home/UserFrosting/vendor/userfrosting/theme-adminlte/app/src/../    
-  Admin Sprinkle     UserFrosting\Sprinkle\Admin\Admin       /home/UserFrosting/vendor/userfrosting/sprinkle-admin/app/src/../    
-  My Application     UserFrosting\App\MyApp                  /home/UserFrosting/app/src/../                                       
- ------------------ --------------------------------------- ---------------------------------------------------------------------- 
+ ------------------ --------------------------------------- ----------------------------------------------------------------------
+  Sprinkle           Namespace                               Path
+ ------------------ --------------------------------------- ----------------------------------------------------------------------
+  Core Sprinkle      UserFrosting\Sprinkle\Core\Core         /home/UserFrosting/vendor/userfrosting/sprinkle-core/app/src/../
+  Account Sprinkle   UserFrosting\Sprinkle\Account\Account   /home/UserFrosting/vendor/userfrosting/sprinkle-account/app/src/../
+  AdminLTE Theme     UserFrosting\Theme\AdminLTE\AdminLTE    /home/UserFrosting/vendor/userfrosting/theme-adminlte/app/src/../
+  Admin Sprinkle     UserFrosting\Sprinkle\Admin\Admin       /home/UserFrosting/vendor/userfrosting/sprinkle-admin/app/src/../
+  My Application     UserFrosting\App\MyApp                  /home/UserFrosting/app/src/../
+ ------------------ --------------------------------------- ----------------------------------------------------------------------
 ```
 
 
diff --git a/app/pages/6.0/11.cli/02.custom-commands/docs.md b/app/pages/6.0/11.cli/02.custom-commands/docs.md
index 9f88dee4..2d472cfc 100644
--- a/app/pages/6.0/11.cli/02.custom-commands/docs.md
+++ b/app/pages/6.0/11.cli/02.custom-commands/docs.md
@@ -79,7 +79,7 @@ Now, you simply need to register your command in your [Sprinkle Recipe](sprinkle
 
 namespace UserFrosting\App;
 
-// ... 
+// ...
 use UserFrosting\App\Bakery\HelloCommand; // <-- Add this
 // ...
 use UserFrosting\Sprinkle\BakeryRecipe; // <-- Add this
@@ -99,7 +99,7 @@ class MyApp implements
         ];
     }
     //<--
-    
+
     // ...
 }
 
@@ -117,6 +117,6 @@ $ php bakery hello
 Hello !
 =======
 
- [OK] Hello world                                                                                                       
-                                                                                                                        
+ [OK] Hello world
+
 ```
diff --git a/app/pages/6.0/11.cli/03.extending-commands/docs.md b/app/pages/6.0/11.cli/03.extending-commands/docs.md
index 3a317133..50797464 100644
--- a/app/pages/6.0/11.cli/03.extending-commands/docs.md
+++ b/app/pages/6.0/11.cli/03.extending-commands/docs.md
@@ -10,7 +10,7 @@ wip: true
 2. [setup](cli/commands#setup)
 3. [debug](cli/commands#debug)
 
-Those commands are typically used as "installation" steps. It this situation, it's much more simpler to run one command than multiple ones. You can easily add your own command(s) to any of these aggregators using [event listeners](advanced/events#listener). 
+Those commands are typically used as "installation" steps. It this situation, it's much more simpler to run one command than multiple ones. You can easily add your own command(s) to any of these aggregators using [event listeners](advanced/events#listener).
 
 ## Adding Custom Commands to the `bake` command
 
@@ -42,7 +42,7 @@ The [`bake` command](cli/commands#bake) combines many CLI commands into one and
 
     namespace UserFrosting\App;
 
-    // ... 
+    // ...
     use UserFrosting\Event\EventListenerRecipe; // <-- Add this
     use UserFrosting\App\Bakery\BakeCommandListener; // <-- Add this
     // ...
@@ -63,17 +63,17 @@ The [`bake` command](cli/commands#bake) combines many CLI commands into one and
             ];
         }
         //<--
-        
+
         // ...
     }
     ```
 
-In the recipe, you're telling UserFrosting to execute `BakeCommandListener` when the `BakeCommandEvent` is fired by the UserFrosting event dispatcher. The listener itself isn't required to implement any interface. It simply needs to be callable, which the [`__invoke()`](https://www.php.net/manual/en/language.oop5.magic.php#object.invoke) magic method enables. This method accepts a single argument, which will be the event itself. 
+In the recipe, you're telling UserFrosting to execute `BakeCommandListener` when the `BakeCommandEvent` is fired by the UserFrosting event dispatcher. The listener itself isn't required to implement any interface. It simply needs to be callable, which the [`__invoke()`](https://www.php.net/manual/en/language.oop5.magic.php#object.invoke) magic method enables. This method accepts a single argument, which will be the event itself.
 
 > [!TIP]
 > A single listener can handle multiple events. The or (`|`) syntax can be used to type-hint against multiple event classes, or type-hinting can be omitted, or in this case the parent `AbstractAggregateCommandEvent` can be used to type-hint.
 
-The event listener uses `$event->addCommand('hello');` to add the "hello" command to the event. The command is passed by its name as a string, not the class itself. This method will add the hello command to the end of the list of commands which "bake" will run. Other public methods exist on `$event` to place the command exactly where you need it: 
+The event listener uses `$event->addCommand('hello');` to add the "hello" command to the event. The command is passed by its name as a string, not the class itself. This method will add the hello command to the end of the list of commands which "bake" will run. Other public methods exist on `$event` to place the command exactly where you need it:
 
 | Command                        | Description                                          |
 | ------------------------------ | ---------------------------------------------------- |
diff --git a/app/pages/6.0/12.templating-with-twig/03.filters-and-functions/docs.md b/app/pages/6.0/12.templating-with-twig/03.filters-and-functions/docs.md
index 0849481d..f6ecab29 100644
--- a/app/pages/6.0/12.templating-with-twig/03.filters-and-functions/docs.md
+++ b/app/pages/6.0/12.templating-with-twig/03.filters-and-functions/docs.md
@@ -64,7 +64,7 @@ class Extension extends AbstractExtension implements GlobalsInterface
 {
     /**
      * Inject required services.
-     * 
+     *
      * @param Config $config The config service
      */
     public function __construct(
@@ -110,7 +110,7 @@ class Core implements
             Extension::class,
         ];
     }
-    
+
     // ...
 }
 ```
diff --git a/app/pages/6.0/13.asset-management/03.vite-configuration/docs.md b/app/pages/6.0/13.asset-management/03.vite-configuration/docs.md
index 326e81a7..f944bf4c 100644
--- a/app/pages/6.0/13.asset-management/03.vite-configuration/docs.md
+++ b/app/pages/6.0/13.asset-management/03.vite-configuration/docs.md
@@ -294,17 +294,17 @@ The Vite integration can be configured in your UserFrosting config file (`app/co
 ```php
 'assets' => [
     'bundler' => env('ASSETS_BUNDLER', 'vite'), // Either 'vite' or 'webpack'
-    
+
     'vite' => [
         // Path to Vite's manifest.json file
         'manifest' => 'assets://.vite/manifest.json',
-        
+
         // Enable development mode (use Vite dev server)
         'dev' => env('VITE_DEV_ENABLED', true),
-        
+
         // Public base path for assets
         'base' => '/assets/',
-        
+
         // Vite development server URL
         'server' => 'http://[::1]:' . env('VITE_PORT', 5173),
     ],
diff --git a/app/pages/6.0/13.asset-management/05.using-assets/docs.md b/app/pages/6.0/13.asset-management/05.using-assets/docs.md
index 67e59f46..b8ad8b6d 100644
--- a/app/pages/6.0/13.asset-management/05.using-assets/docs.md
+++ b/app/pages/6.0/13.asset-management/05.using-assets/docs.md
@@ -87,13 +87,13 @@ These blocks are then included in your base template:
 <head>
     <meta charset="utf-8">
     <title>{% block page_title %}{% endblock %}</title>
-    
+
     {# Include stylesheets #}
     {% include 'content/stylesheets_site.html.twig' %}
 </head>
 <body>
     <div id="app"></div>
-    
+
     {# Include scripts at end of body #}
     {% include 'content/scripts_site.html.twig' %}
 </body>
diff --git a/app/pages/6.0/13.asset-management/06.advanced/01.sprinkle-assets/docs.md b/app/pages/6.0/13.asset-management/06.advanced/01.sprinkle-assets/docs.md
index 6b302e4b..e7187df2 100644
--- a/app/pages/6.0/13.asset-management/06.advanced/01.sprinkle-assets/docs.md
+++ b/app/pages/6.0/13.asset-management/06.advanced/01.sprinkle-assets/docs.md
@@ -223,10 +223,10 @@ export default {
     install: (app: App) => {
         // Setup axios interceptors
         useAxiosInterceptor()
-        
+
         // Load configuration
         useConfigStore().load()
-        
+
         // Setup translator
         const translator = useTranslator()
         translator.load()
diff --git a/app/pages/6.0/13.asset-management/06.advanced/02.migration/docs.md b/app/pages/6.0/13.asset-management/06.advanced/02.migration/docs.md
index 54217feb..311eb9d7 100644
--- a/app/pages/6.0/13.asset-management/06.advanced/02.migration/docs.md
+++ b/app/pages/6.0/13.asset-management/06.advanced/02.migration/docs.md
@@ -126,7 +126,7 @@ Modify `app/config/default.php`:
 'assets' => [
     // Change bundler from 'webpack' to 'vite'
     'bundler' => env('ASSETS_BUNDLER', 'vite'),
-    
+
     // Add/update Vite configuration
     'vite' => [
         'manifest' => 'assets://.vite/manifest.json',
diff --git a/app/pages/6.0/13.asset-management/06.advanced/docs.md b/app/pages/6.0/13.asset-management/06.advanced/docs.md
index f7dca5bd..fb4e850b 100644
--- a/app/pages/6.0/13.asset-management/06.advanced/docs.md
+++ b/app/pages/6.0/13.asset-management/06.advanced/docs.md
@@ -118,11 +118,11 @@ function toggleExpanded() {
     border: 1px solid #ddd;
     border-radius: 4px;
     cursor: pointer;
-    
+
     &:hover {
         background: #f5f5f5;
     }
-    
+
     h3 {
         margin: 0 0 0.5rem 0;
     }
@@ -201,11 +201,11 @@ export const useUserStore = defineStore('user', {
         currentUser: null as User | null,
         isLoading: false
     }),
-    
+
     getters: {
         isAuthenticated: (state) => state.currentUser !== null
     },
-    
+
     actions: {
         async fetchCurrentUser() {
             this.isLoading = true
@@ -244,7 +244,7 @@ npm install -D less
 // Custom styles
 .custom-container {
     padding: @global-margin;
-    
+
     h1 {
         color: @global-primary-background;
     }
@@ -265,7 +265,7 @@ $primary-color: #0066cc;
 
 .button {
     background: $primary-color;
-    
+
     &:hover {
         background: darken($primary-color, 10%);
     }
@@ -273,7 +273,7 @@ $primary-color: #0066cc;
 ```
 
 > [!WARNING]
-> UserFrosting uses **Less** as its default CSS preprocessor for the default theme. If you choose to use SASS/SCSS instead, you will not be able to easily customize or extend the default theme's styles, as the theme's variables and mixins are written in Less. Consider this trade-off when choosing your preprocessor. 
+> UserFrosting uses **Less** as its default CSS preprocessor for the default theme. If you choose to use SASS/SCSS instead, you will not be able to easily customize or extend the default theme's styles, as the theme's variables and mixins are written in Less. Consider this trade-off when choosing your preprocessor.
 
 ## Next Steps
 
diff --git a/app/pages/6.0/13.asset-management/07.webpack-encore/01.basic-usage/docs.md b/app/pages/6.0/13.asset-management/07.webpack-encore/01.basic-usage/docs.md
index eaef43b2..5284388e 100644
--- a/app/pages/6.0/13.asset-management/07.webpack-encore/01.basic-usage/docs.md
+++ b/app/pages/6.0/13.asset-management/07.webpack-encore/01.basic-usage/docs.md
@@ -5,7 +5,7 @@ description: Referencing statics assets in your Twig templates.
 
 > [!WARNING]
 > **This documentation is obsolete.** UserFrosting 6 uses **Vite** as the default asset bundler, not Webpack Encore.
-> 
+>
 > Please see:
 > - [Using Assets in Templates](/asset-management/using-assets) for how to include assets with Vite
 > - [Bakery Commands](/asset-management/bakery-commands) for build commands
@@ -17,7 +17,7 @@ When a user loads a page of your website in their browser, it includes a number
 <img src="{{ asset('assets/images/barn-owl.jpg') }}">
 ```
 
-You'll notice that we reference the file path with abstraction of where it is actually located within the filesystem, if it's a node dependency, or which sprinkle defines it. Instead, when we refer to an asset using the path `assets/images/barn-owl.jpg`, we give a reference relative to the `public/` directory. 
+You'll notice that we reference the file path with abstraction of where it is actually located within the filesystem, if it's a node dependency, or which sprinkle defines it. Instead, when we refer to an asset using the path `assets/images/barn-owl.jpg`, we give a reference relative to the `public/` directory.
 
 The assets building process will compile or copy assets inside the `public/assets/images` folder by default and UserFrosting will use a special manifest file generated at build time to pin-point where the requested file is located.
 
@@ -25,7 +25,7 @@ If you need to copy other static assets from outside of a JavaScript file that's
 
 **webpack.config.js**
 ```js
-Encore 
+Encore
     // Copy images
     .copyFiles({ from: './app/assets/images', to: 'images/[path][name].[hash:8].[ext]' })
     // Copy other assets
diff --git a/app/pages/6.0/13.asset-management/07.webpack-encore/02.asset-bundles/docs.md b/app/pages/6.0/13.asset-management/07.webpack-encore/02.asset-bundles/docs.md
index 3d82c39b..bd5e3f4d 100644
--- a/app/pages/6.0/13.asset-management/07.webpack-encore/02.asset-bundles/docs.md
+++ b/app/pages/6.0/13.asset-management/07.webpack-encore/02.asset-bundles/docs.md
@@ -5,17 +5,17 @@ description: Entrypoints bundles allow you to group one or more asset references
 
 > [!WARNING]
 > **This documentation is obsolete.** UserFrosting 6 uses **Vite** as the default asset bundler, not Webpack Encore.
-> 
+>
 > Please see:
 > - [Sprinkle Assets](/asset-management/sprinkle-assets) for multi-sprinkle asset architecture
 > - [Advanced Usage](/asset-management/advanced) for code splitting and optimization
 > - [Migration Guide](/asset-management/migration) to migrate from Webpack Encore
 
-Most CSS and Javascript resources should be integrated into your pages through **entrypoints**. Entrypoints defines groups of assets for which UserFrosting can automatically render `<link>` or `<script>` tags in your pages. 
+Most CSS and Javascript resources should be integrated into your pages through **entrypoints**. Entrypoints defines groups of assets for which UserFrosting can automatically render `<link>` or `<script>` tags in your pages.
 
 ## Concept
 
-Webpack is a module bundler, which means that you can import other JavaScript files. A single javascript file can require all of the dependencies we needs (e.g. jQuery or React), including any CSS, in a single place. You can see this with a JavaScript require (or [import](https://stackoverflow.com/questions/46677752/the-difference-between-requirex-and-import-x)) statement : 
+Webpack is a module bundler, which means that you can import other JavaScript files. A single javascript file can require all of the dependencies we needs (e.g. jQuery or React), including any CSS, in a single place. You can see this with a JavaScript require (or [import](https://stackoverflow.com/questions/46677752/the-difference-between-requirex-and-import-x)) statement :
 
 **app/assets/main.js**
 ```js
@@ -23,7 +23,7 @@ Webpack is a module bundler, which means that you can import other JavaScript fi
 require('theme-adminlte');
 ```
 
-Encore's job (via Webpack) is simple: to read and follow all of the import/require statements and create one final `main.js` (and `main.css`) that contains everything you need. 
+Encore's job (via Webpack) is simple: to read and follow all of the import/require statements and create one final `main.js` (and `main.css`) that contains everything you need.
 
 Encore may split the end result into multiple files for performance (using [split chunks feature](https://symfony.com/doc/current/frontend/encore/split-chunks.html)), but all of that code is still downloaded on every page if you were to include the `main.js` file.
 
@@ -51,7 +51,7 @@ The shared resources (e.g. template resources) can be loaded on every page along
 Now that the "entry" files have been created, we need to register them with Encore as entrypoints. Entrypoints are configured in `/webpack.entries.js` by default.
 
 > [!NOTE]
-> Entrypoints can also be defined in `/webpack.config.js` directly. However, UserFrosting defines them in a separate file, as it's easier to include other sprinkles entries. 
+> Entrypoints can also be defined in `/webpack.config.js` directly. However, UserFrosting defines them in a separate file, as it's easier to include other sprinkles entries.
 
 **webpack.entries.js**
 ```js
@@ -65,7 +65,7 @@ module.exports = {
 
 This tells Encore to load the `app/assets/main.js` file (for example) and follow all of the `require()` statements. It will then package everything together and - thanks to the first `main` argument - output final `public/assets/main.js` and `public/assets/main.css` files.
 
-Sprinkle's overriding properties also applies to the entries themselves. In other words, naming an entry `page.account` in your own sprinkle will replace the one defined in the `account` sprinkle with yours, for example. In the process, it will probably break core user management functionality. In general, be careful to provide your entries with a unique name to avoid difficult to diagnose runtime errors. 
+Sprinkle's overriding properties also applies to the entries themselves. In other words, naming an entry `page.account` in your own sprinkle will replace the one defined in the `account` sprinkle with yours, for example. In the process, it will probably break core user management functionality. In general, be careful to provide your entries with a unique name to avoid difficult to diagnose runtime errors.
 
 ## Rendering entrypoints
 
diff --git a/app/pages/6.0/13.asset-management/07.webpack-encore/03.advance-use/docs.md b/app/pages/6.0/13.asset-management/07.webpack-encore/03.advance-use/docs.md
index a7dcd9bb..48e3e790 100644
--- a/app/pages/6.0/13.asset-management/07.webpack-encore/03.advance-use/docs.md
+++ b/app/pages/6.0/13.asset-management/07.webpack-encore/03.advance-use/docs.md
@@ -5,7 +5,7 @@ description: ""
 
 > [!WARNING]
 > **This documentation is obsolete.** UserFrosting 6 uses **Vite** as the default asset bundler, not Webpack Encore.
-> 
+>
 > Please see:
 > - [Advanced Usage](/asset-management/advanced) for TypeScript, Vue 3, CSS preprocessors, and optimization
 > - [Sprinkle Assets](/asset-management/sprinkle-assets) for building sprinkles as libraries
@@ -21,7 +21,7 @@ By using Webpack Encore to manage frontend assets, Sass, Less, Vue and React can
 To enable [Sass/SCSS](https://sass-lang.com) support, first enable Sass loader inside `webpack.config.js`, install the required npm dependencies, and restart Webpack.
 
 1. Edit `webpack.config.js`
-    
+
     **webpack.config.js**
     ```js
     Encore
@@ -63,7 +63,7 @@ For more information, check out [Encore Documentation](https://symfony.com/doc/c
 To enable [Less](https://lesscss.org) support, first enable Less loader inside `webpack.config.js`, install the required npm dependencies, and restart Webpack.
 
 1. Edit `webpack.config.js`
-    
+
     **webpack.config.js**
     ```js
     Encore
@@ -111,9 +111,9 @@ Encore
 
 Then restart Encore. When you do, it will give you a command you can run to install any missing dependencies. After running that command and restarting Encore, you're done!
 
-Any `.vue` files that you require will be processed correctly. You can also configure the `vue-loader` options by passing an options callback to `enableVueLoader()`. 
+Any `.vue` files that you require will be processed correctly. You can also configure the `vue-loader` options by passing an options callback to `enableVueLoader()`.
 
-For more information, check out [Encore Documentation](https://symfony.com/doc/current/frontend/encore/vuejs.html). 
+For more information, check out [Encore Documentation](https://symfony.com/doc/current/frontend/encore/vuejs.html).
 
 > [!NOTE]
 > Future version of UserFrosting will make use of Vue.JS. You can checkout a proof of concept of a Vue based interface running inside UserFrosting [on Github](https://github.com/userfrosting/demo-vue/tree/main)
diff --git a/app/pages/6.0/13.asset-management/07.webpack-encore/docs.md b/app/pages/6.0/13.asset-management/07.webpack-encore/docs.md
index 1e25b4c3..a419889f 100644
--- a/app/pages/6.0/13.asset-management/07.webpack-encore/docs.md
+++ b/app/pages/6.0/13.asset-management/07.webpack-encore/docs.md
@@ -5,7 +5,7 @@ description: Asset bundles should be compiled in production to allow for faster
 
 > [!WARNING]
 > **This documentation is obsolete.** UserFrosting 6 uses **Vite** as the default asset bundler, not Webpack Encore. Webpack Encore is still supported for backward compatibility but not recommended for new projects.
-> 
+>
 > Please see:
 > - [Asset Management Introduction](/asset-management/introduction) for Vite-based asset management
 > - [Getting Started with Vite](/asset-management/getting-started) for configuration guide
@@ -114,10 +114,10 @@ if (!Encore.isRuntimeEnvironmentConfigured()) {
 Encore
     // directory where compiled assets will be stored
     .setOutputPath('public/assets')
-    
+
     // public path used by the web server to access the output path
     .setPublicPath('/assets/')
-    
+
     // only needed for CDN's or sub-directory deploy
     //.setManifestKeyPrefix('build/')
 
@@ -137,7 +137,7 @@ Encore
     // but, you probably want this, unless you're building a single-page app
     .enableSingleRuntimeChunk()
     // .disableSingleRuntimeChunk()
-    
+
     /*
      * FEATURE CONFIG
      *
@@ -205,7 +205,7 @@ The watch option can be used when actively working on a file. It will compile as
 ```bash
 $ php bakery assets:build --watch
 
-# or 
+# or
 
 $ php bakery assets:webpack --watch
 ```
@@ -218,7 +218,7 @@ To compile assets for a **production** environment, simply use:
 ```bash
 $ php bakery assets:build --production
 
-# or 
+# or
 
 $ php bakery assets:webpack --production
 ```
diff --git a/app/pages/6.0/13.asset-management/chapter.md b/app/pages/6.0/13.asset-management/chapter.md
index 621afc17..c6c92210 100644
--- a/app/pages/6.0/13.asset-management/chapter.md
+++ b/app/pages/6.0/13.asset-management/chapter.md
@@ -12,7 +12,7 @@ Frontend assets — JavaScript, TypeScript, CSS, Vue components, images, fonts,
 1. How do we locate assets that are usually not located in the publicly served folder and **generate appropriate URLs** as proxies so they can be accessed publicly?
 2. When the client actually loads a page and **requests** an asset via the URL, how do we map the URL back to a file path on the server and return it to the client?
 3. How do we handle compiled assets and bundle assets together to improve efficiency?
-4. How do we integrate with modern frameworks, like Vue.JS, or preprocessors like Less or Sass? 
+4. How do we integrate with modern frameworks, like Vue.JS, or preprocessors like Less or Sass?
 5. How do we load external NPM dependencies?
 
 To answer this, UserFrosting uses **Vite** as its default asset bundler to manage, compile, and optimize these resources efficiently.
diff --git a/app/pages/6.0/14.database/03.migrations/docs.md b/app/pages/6.0/14.database/03.migrations/docs.md
index 3aff73ff..272950f1 100644
--- a/app/pages/6.0/14.database/03.migrations/docs.md
+++ b/app/pages/6.0/14.database/03.migrations/docs.md
@@ -33,7 +33,7 @@ When you run the main UserFrosting migration script (`php bakery migrate`), it w
 
 Each migration class needs to extend the base `UserFrosting\Sprinkle\Core\Database\Migration` class. A migration class must contains two methods: `up` and `down`. The `up` method is used to add new tables, columns, or indexes to your database, while the `down` method should simply reverse the operations performed by the `up` method.
 
-The base class for a `MyTable` migration looks like this : 
+The base class for a `MyTable` migration looks like this :
 
 **app/src/Database/Migrations/MyTable.php**
 ```php
diff --git a/app/pages/6.0/14.database/04.seeding/docs.md b/app/pages/6.0/14.database/04.seeding/docs.md
index e728c5c3..b389664f 100644
--- a/app/pages/6.0/14.database/04.seeding/docs.md
+++ b/app/pages/6.0/14.database/04.seeding/docs.md
@@ -17,7 +17,7 @@ A seed is actually the most versatile yet simple way to interact with the databa
 
 ## Seed structure
 
-Each seed class needs to implement the `\UserFrosting\Sprinkle\Core\Seeder\SeedInterface` interface and must at least implement the `run(): void` method. This method will be the one ran by the `seed` Bakery command. Of course your class may contains other helper methods, but they need to be called by the `run` one. 
+Each seed class needs to implement the `\UserFrosting\Sprinkle\Core\Seeder\SeedInterface` interface and must at least implement the `run(): void` method. This method will be the one ran by the `seed` Bakery command. Of course your class may contains other helper methods, but they need to be called by the `run` one.
 
 > [!TIP]
 > Any services you require inside your seed class can be [injected in the constructor via Autowire](dependency-injection/the-di-container#autowiring).
@@ -42,7 +42,7 @@ class MySeed implements SeedInterface
 
 ## Registering Seeds
 
-To be picked up by the `seed` bakery command, a seed class files must first be registered in the *Sprinkle Recipe*, using the `SeedRecipe` sub-recipe and the `getSeeds():array` method: 
+To be picked up by the `seed` bakery command, a seed class files must first be registered in the *Sprinkle Recipe*, using the `SeedRecipe` sub-recipe and the `getSeeds():array` method:
 
 ```php
 <?php
@@ -89,7 +89,7 @@ Seeder
   [1] UserFrosting\Sprinkle\Account\Database\Seeds\DefaultPermissions
   [2] UserFrosting\Sprinkle\Account\Database\Seeds\DefaultRoles
   [3] UserFrosting\Sprinkle\MySprinkle\Database\Seeds\MySeed
- > 
+ >
 ```
 
 The `seed:list` command can also be used to display a list of all available seeds:
diff --git a/app/pages/6.0/14.database/05.data-sprunjing/docs.md b/app/pages/6.0/14.database/05.data-sprunjing/docs.md
index ebef1353..79c5b30f 100644
--- a/app/pages/6.0/14.database/05.data-sprunjing/docs.md
+++ b/app/pages/6.0/14.database/05.data-sprunjing/docs.md
@@ -90,7 +90,7 @@ class OwlSprunje extends Sprunje
         'name',
         'species'
     ];
-    
+
     // ...
 }
 ```
@@ -117,7 +117,7 @@ use UserFrosting\Sprinkle\MySprinkle\Sprunje\OwlSprunje;
 
 class OwlsSprunjeAction
 {
-    /** 
+    /**
      * Inject Sprunje and other services using DI
      */
     public function __construct(
@@ -200,7 +200,7 @@ To do this, you can define custom methods in your Sprunje:
      *
      * @param EloquentBuilder|QueryBuilder|Relation $query
      * @param string                                $value
-     * 
+     *
      * @return static
      */
     protected function filterScientificName($query, string $value): static
diff --git a/app/pages/6.0/15.client-side-code/01.overview/docs.md b/app/pages/6.0/15.client-side-code/01.overview/docs.md
index 8cdd3cc6..c1b38bfc 100644
--- a/app/pages/6.0/15.client-side-code/01.overview/docs.md
+++ b/app/pages/6.0/15.client-side-code/01.overview/docs.md
@@ -258,4 +258,4 @@ Now that you understand the stack, explore how to:
 - **[Show Alerts](client-side-code/components/alerts)**: Provide user feedback
 
 > [!NOTE]
-> Don't feel overwhelmed! You don't need to master everything at once. Start with the basics and gradually explore more advanced features as needed. 
+> Don't feel overwhelmed! You don't need to master everything at once. Start with the basics and gradually explore more advanced features as needed.
diff --git a/app/pages/6.0/15.client-side-code/02.exporting-variables/docs.md b/app/pages/6.0/15.client-side-code/02.exporting-variables/docs.md
index 30914b9c..b78948ba 100644
--- a/app/pages/6.0/15.client-side-code/02.exporting-variables/docs.md
+++ b/app/pages/6.0/15.client-side-code/02.exporting-variables/docs.md
@@ -118,7 +118,7 @@ When using Vue 3 components, pass data directly as props through the component's
 
 **Twig Template**:
 ```twig
-<div id="user-profile" 
+<div id="user-profile"
      data-user-id="{{ user.id }}"
      data-username="{{ user.username }}"
      data-email="{{ user.email }}">
@@ -185,8 +185,8 @@ For simple, element-specific data, use HTML5 `data-*` attributes. This is ideal
 
 **Twig Template**:
 ```twig
-<button 
-    class="delete-user" 
+<button
+    class="delete-user"
     data-user-id="{{ user.id }}"
     data-user-name="{{ user.username }}">
     Delete User
@@ -200,7 +200,7 @@ document.querySelectorAll('.delete-user').forEach(button => {
     const target = e.currentTarget as HTMLButtonElement
     const userId = target.dataset.userId
     const userName = target.dataset.userName
-    
+
     if (confirm(`Delete user ${userName}?`)) {
       await deleteUser(userId)
     }
@@ -270,7 +270,7 @@ export function useUsers() {
   async function fetchUsers() {
     loading.value = true
     error.value = null
-    
+
     try {
       const response = await axios.get(`${site.uri.public}/api/users`)
       users.value = response.data
diff --git a/app/pages/6.0/15.client-side-code/03.vue-components/docs.md b/app/pages/6.0/15.client-side-code/03.vue-components/docs.md
index a7900363..5f009eb6 100644
--- a/app/pages/6.0/15.client-side-code/03.vue-components/docs.md
+++ b/app/pages/6.0/15.client-side-code/03.vue-components/docs.md
@@ -12,7 +12,7 @@ This guide introduces Vue 3 components and shows you how to use them in UserFros
 
 A Vue component is a self-contained piece of UI with its own:
 - **Template** (HTML structure)
-- **Logic** (JavaScript/TypeScript behavior)  
+- **Logic** (JavaScript/TypeScript behavior)
 - **Styles** (CSS, scoped to the component)
 
 Think of components as custom HTML elements you can reuse throughout your application.
@@ -90,7 +90,7 @@ const props = defineProps<{
 const messageCount = ref(0)
 
 // Computed values
-const avatarUrl = computed(() => 
+const avatarUrl = computed(() =>
   props.avatar || `/images/default-avatar.png`
 )
 
@@ -271,12 +271,12 @@ Bind reactive data to HTML attributes:
   <button :disabled="isLoading" :class="buttonClass">
     Submit
   </button>
-  
+
   <!-- Dynamic classes -->
   <div :class="{ active: isActive, disabled: isDisabled }">
     ...
   </div>
-  
+
   <!-- Dynamic styles -->
   <div :style="{ color: textColor, fontSize: fontSize + 'px' }">
     ...
@@ -296,11 +296,11 @@ Listen to DOM events:
   <form @submit.prevent="onSubmit">
     ...
   </form>
-  
+
   <!-- Event modifiers -->
   <button @click.stop="handleClick">Stop propagation</button>
   <button @click.once="initialize">Run once</button>
-  
+
   <!-- Keyboard modifiers -->
   <input @keyup.enter="submit" @keyup.esc="cancel" />
 </template>
@@ -362,14 +362,14 @@ Loop through arrays or objects:
       {{ user.name }}
     </li>
   </ul>
-  
+
   <!-- With index -->
   <ul>
     <li v-for="(user, index) in users" :key="user.id">
       {{ index + 1 }}. {{ user.name }}
     </li>
   </ul>
-  
+
   <!-- Object properties -->
   <ul>
     <li v-for="(value, key) in userObject" :key="key">
@@ -400,23 +400,23 @@ const multiSelect = ref([])
   <!-- Text input -->
   <input v-model="message" />
   <p>{{ message }}</p>
-  
+
   <!-- Checkbox -->
   <input type="checkbox" v-model="checked" />
-  
+
   <!-- Select -->
   <select v-model="selected">
     <option value="a">Option A</option>
     <option value="b">Option B</option>
   </select>
-  
+
   <!-- Multi-select -->
   <select v-model="multiSelect" multiple>
     <option value="a">A</option>
     <option value="b">B</option>
     <option value="c">C</option>
   </select>
-  
+
   <!-- Modifiers -->
   <input v-model.trim="message" /> <!-- trim whitespace -->
   <input v-model.number="age" /> <!-- convert to number -->
@@ -433,7 +433,7 @@ Pass data from parent to child components:
 **Parent.vue**:
 ```vue
 <template>
-  <UserCard 
+  <UserCard
     :user-id="123"
     :username="'alex'"
     :email="'alex@example.com'"
@@ -510,7 +510,7 @@ function changeStatus(status: string) {
 **Parent.vue**:
 ```vue
 <template>
-  <UserCard 
+  <UserCard
     @user-deleted="handleUserDeleted"
     @status-changed="handleStatusChange"
   />
@@ -534,7 +534,7 @@ Run code at specific points in a component's life:
 
 ```vue
 <script setup lang="ts">
-import { 
+import {
   onBeforeMount,
   onMounted,
   onBeforeUpdate,
@@ -634,7 +634,7 @@ app.mount('#app')
 ```twig
 {# Make sure you have a mount point #}
 <div id="app">
-    <user-greeting 
+    <user-greeting
         username="{{ current_user.username }}"
         :message-count="{{ messageCount }}"
         @view-messages="handleViewMessages"
@@ -660,13 +660,13 @@ export function useAuth() {
   const user = ref(null)
   const loading = ref(false)
   const error = ref<Error | null>(null)
-  
+
   const isLoggedIn = computed(() => user.value !== null)
 
   async function login(username: string, password: string) {
     loading.value = true
     error.value = null
-    
+
     try {
       const response = await axios.post('/api/login', {
         username,
@@ -684,13 +684,13 @@ export function useAuth() {
     user.value = null
   }
 
-  return { 
-    user, 
-    loading, 
-    error, 
-    isLoggedIn, 
-    login, 
-    logout 
+  return {
+    user,
+    loading,
+    error,
+    isLoggedIn,
+    login,
+    logout
   }
 }
 ```
@@ -819,7 +819,7 @@ export function useFetch<T>(url: string) {
   const data = ref<T | null>(null)
   const loading = ref(false)
   const error = ref<Error | null>(null)
-  
+
   async function fetch() {
     loading.value = true
     try {
@@ -831,7 +831,7 @@ export function useFetch<T>(url: string) {
       loading.value = false
     }
   }
-  
+
   return { data, loading, error, fetch }
 }
 ```
diff --git a/app/pages/6.0/15.client-side-code/04.components/01.forms/docs.md b/app/pages/6.0/15.client-side-code/04.components/01.forms/docs.md
index d0154e5f..f9e6eec8 100644
--- a/app/pages/6.0/15.client-side-code/04.components/01.forms/docs.md
+++ b/app/pages/6.0/15.client-side-code/04.components/01.forms/docs.md
@@ -18,15 +18,15 @@ Here's a simple login form component to get started:
   <form @submit.prevent="handleSubmit" class="uk-form-stacked">
     <!-- CSRF Token (UserFrosting requirement) -->
     <input type="hidden" :name="csrfName" :value="csrfValue" />
-    
+
     <!-- Username Field -->
     <div class="uk-margin">
       <label class="uk-form-label" for="username">Username</label>
       <div class="uk-form-controls">
-        <input 
+        <input
           id="username"
-          v-model="form.username" 
-          type="text" 
+          v-model="form.username"
+          type="text"
           class="uk-input"
           :class="{ 'uk-form-danger': errors.username }"
           placeholder="Enter your username"
@@ -36,15 +36,15 @@ Here's a simple login form component to get started:
         </div>
       </div>
     </div>
-    
+
     <!-- Password Field -->
     <div class="uk-margin">
       <label class="uk-form-label" for="password">Password</label>
       <div class="uk-form-controls">
-        <input 
+        <input
           id="password"
-          v-model="form.password" 
-          type="password" 
+          v-model="form.password"
+          type="password"
           class="uk-input"
           :class="{ 'uk-form-danger': errors.password }"
           placeholder="Enter your password"
@@ -54,7 +54,7 @@ Here's a simple login form component to get started:
         </div>
       </div>
     </div>
-    
+
     <!-- Remember Me Checkbox -->
     <div class="uk-margin">
       <label>
@@ -62,18 +62,18 @@ Here's a simple login form component to get started:
         Remember me
       </label>
     </div>
-    
+
     <!-- Submit Button -->
     <div class="uk-margin">
-      <button 
-        type="submit" 
+      <button
+        type="submit"
         class="uk-button uk-button-primary"
         :disabled="isSubmitting"
       >
         {{ isSubmitting ? 'Signing in...' : 'Sign in' }}
       </button>
     </div>
-    
+
     <!-- Error/Success Messages -->
     <div v-if="successMessage" class="uk-alert-success" uk-alert>
       <p>{{ successMessage }}</p>
@@ -104,15 +104,15 @@ const csrfValue = computed(() => site.csrf.name)
 // Validation
 function validateForm(): boolean {
   errors.value = {}
-  
+
   if (!form.value.username.trim()) {
     errors.value.username = 'Username is required'
   }
-  
+
   if (!form.value.password) {
     errors.value.password = 'Password is required'
   }
-  
+
   return Object.keys(errors.value).length === 0
 }
 
@@ -121,11 +121,11 @@ async function handleSubmit() {
   if (!validateForm()) {
     return
   }
-  
+
   isSubmitting.value = true
   errors.value = {}
   successMessage.value = ''
-  
+
   try {
     const response = await axios.post(
       `${site.uri.public}/account/login`,
@@ -140,14 +140,14 @@ async function handleSubmit() {
         }
       }
     )
-    
+
     successMessage.value = 'Login successful! Redirecting...'
-    
+
     // Redirect after success
     setTimeout(() => {
       window.location.href = response.data.redirect || '/dashboard'
     }, 1000)
-    
+
   } catch (error: any) {
     if (error.response?.data?.errors) {
       // Server validation errors
@@ -189,13 +189,13 @@ const form = ref({
 <template>
   <!-- Text input -->
   <input v-model="form.email" type="email" />
-  
+
   <!-- Number input -->
   <input v-model.number="form.age" type="number" />
-  
+
   <!-- Checkbox -->
   <input v-model="form.newsletter" type="checkbox" />
-  
+
   <!-- Select dropdown -->
   <select v-model="form.role">
     <option value="user">User</option>
@@ -224,26 +224,26 @@ function validateEmail(email: string): boolean {
 
 function validateForm(): boolean {
   errors.value = {}
-  
+
   // Required fields
   if (!form.value.username.trim()) {
     errors.value.username = 'Username is required'
   } else if (form.value.username.length < 3) {
     errors.value.username = 'Username must be at least 3 characters'
   }
-  
+
   // Email validation
   if (!form.value.email) {
     errors.value.email = 'Email is required'
   } else if (!validateEmail(form.value.email)) {
     errors.value.email = 'Please enter a valid email'
   }
-  
+
   // Password strength
   if (form.value.password.length < 8) {
     errors.value.password = 'Password must be at least 8 characters'
   }
-  
+
   return Object.keys(errors.value).length === 0
 }
 ```
@@ -311,7 +311,7 @@ const isSubmitting = ref(false)
 
 async function handleSubmit() {
   isSubmitting.value = true
-  
+
   try {
     await axios.post('/api/endpoint', form.value)
   } finally {
@@ -321,8 +321,8 @@ async function handleSubmit() {
 </script>
 
 <template>
-  <button 
-    type="submit" 
+  <button
+    type="submit"
     :disabled="isSubmitting"
     class="uk-button uk-button-primary"
   >
@@ -367,10 +367,10 @@ export function useForm<T extends Record<string, any>>(
 
   function setErrors(serverErrors: Record<string, string | string[]>) {
     errors.value = {}
-    
+
     for (const [field, messages] of Object.entries(serverErrors)) {
-      errors.value[field] = Array.isArray(messages) 
-        ? messages[0] 
+      errors.value[field] = Array.isArray(messages)
+        ? messages[0]
         : messages
     }
   }
@@ -378,7 +378,7 @@ export function useForm<T extends Record<string, any>>(
   async function submit(url: string, method: 'post' | 'put' | 'patch' = 'post') {
     isSubmitting.value = true
     errors.value = {}
-    
+
     try {
       const response = await axios[method](url, form.value, {
         headers: {
@@ -386,18 +386,18 @@ export function useForm<T extends Record<string, any>>(
           [site.csrf.keys.value]: site.csrf.value
         }
       })
-      
+
       options.onSuccess?.(response.data)
       return response.data
-      
+
     } catch (error: any) {
       if (error.response?.data?.errors) {
         setErrors(error.response.data.errors)
       }
-      
+
       options.onError?.(error)
       throw error
-      
+
     } finally {
       isSubmitting.value = false
     }
@@ -447,7 +447,7 @@ async function handleSubmit() {
   <form @submit.prevent="handleSubmit">
     <input v-model="form.username" />
     <span v-if="errors.username">{{ errors.username }}</span>
-    
+
     <button type="submit" :disabled="isSubmitting">
       Submit
     </button>
@@ -475,15 +475,15 @@ function onFileSelected(event: Event) {
 
 async function uploadFile() {
   if (!selectedFile.value) return
-  
+
   const formData = new FormData()
   formData.append('file', selectedFile.value)
   formData.append(site.csrf.keys.name, site.csrf.name)
   formData.append(site.csrf.keys.value, site.csrf.value)
-  
+
   isUploading.value = true
   uploadProgress.value = 0
-  
+
   try {
     await axios.post('/api/upload', formData, {
       headers: {
@@ -497,9 +497,9 @@ async function uploadFile() {
         }
       }
     })
-    
+
     alert('File uploaded successfully!')
-    
+
   } finally {
     isUploading.value = false
   }
@@ -509,14 +509,14 @@ async function uploadFile() {
 <template>
   <div>
     <input type="file" @change="onFileSelected" />
-    
-    <button 
-      @click="uploadFile" 
+
+    <button
+      @click="uploadFile"
       :disabled="!selectedFile || isUploading"
     >
       Upload
     </button>
-    
+
     <div v-if="isUploading">
       <progress :value="uploadProgress" max="100"></progress>
       {{ uploadProgress }}%
@@ -561,7 +561,7 @@ function removeEmail(id: number) {
     <input v-model="email.value" type="email" />
     <button @click="removeEmail(email.id)">Remove</button>
   </div>
-  
+
   <button @click="addEmail">Add Email</button>
 </template>
 ```
@@ -604,10 +604,10 @@ const onSubmit = handleSubmit((values) => {
   <form @submit="onSubmit">
     <input v-model="email" type="email" />
     <span>{{ errors.email }}</span>
-    
+
     <input v-model="password" type="password" />
     <span>{{ errors.password }}</span>
-    
+
     <button type="submit">Submit</button>
   </form>
 </template>
@@ -650,7 +650,7 @@ Always validate on both client and server:
 
 Provide specific, actionable error messages:
 
-✅ **Good**: "Email must be in format: user@example.com"  
+✅ **Good**: "Email must be in format: user@example.com"
 ❌ **Bad**: "Invalid input"
 
 ### 3. Disable Submit During Processing
@@ -658,8 +658,8 @@ Provide specific, actionable error messages:
 Prevent duplicate submissions:
 
 ```vue
-<button 
-  type="submit" 
+<button
+  type="submit"
   :disabled="isSubmitting || !isValid"
 >
   Submit
diff --git a/app/pages/6.0/15.client-side-code/04.components/02.tables/docs.md b/app/pages/6.0/15.client-side-code/04.components/02.tables/docs.md
index 6f863491..eb9cd804 100644
--- a/app/pages/6.0/15.client-side-code/04.components/02.tables/docs.md
+++ b/app/pages/6.0/15.client-side-code/04.components/02.tables/docs.md
@@ -17,19 +17,19 @@ Start with a basic sortable table:
 <template>
   <div>
     <!-- Search/Filter -->
-    <input 
-      v-model="searchQuery" 
-      type="text" 
+    <input
+      v-model="searchQuery"
+      type="text"
       placeholder="Search users..."
       class="uk-input uk-width-1-1"
     />
-    
+
     <!-- Table -->
     <table class="uk-table uk-table-striped uk-table-hover">
       <thead>
         <tr>
           <th @click="sort('name')">
-            Name 
+            Name
             <span v-if="sortKey === 'name'">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
           </th>
           <th @click="sort('email')">
@@ -49,19 +49,19 @@ Start with a basic sortable table:
         </tr>
       </tbody>
     </table>
-    
+
     <!-- Pagination -->
     <div class="uk-flex uk-flex-between">
-      <button 
-        @click="previousPage" 
+      <button
+        @click="previousPage"
         :disabled="currentPage === 1"
         class="uk-button uk-button-default"
       >
         Previous
       </button>
       <span>Page {{ currentPage }} of {{ totalPages }}</span>
-      <button 
-        @click="nextPage" 
+      <button
+        @click="nextPage"
         :disabled="currentPage === totalPages"
         class="uk-button uk-button-default"
       >
@@ -97,15 +97,15 @@ onMounted(async () => {
 // Filtering
 const filteredUsers = computed(() => {
   let filtered = users.value
-  
+
   // Search filter
   if (searchQuery.value) {
-    filtered = filtered.filter(user => 
+    filtered = filtered.filter(user =>
       user.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
       user.email.toLowerCase().includes(searchQuery.value.toLowerCase())
     )
   }
-  
+
   // Sort
   filtered = [...filtered].sort((a, b) => {
     const aVal = a[sortKey.value]
@@ -113,13 +113,13 @@ const filteredUsers = computed(() => {
     const modifier = sortOrder.value === 'asc' ? 1 : -1
     return aVal < bVal ? -modifier : modifier
   })
-  
+
   // Pagination
   const start = (currentPage.value - 1) * perPage
   return filtered.slice(start, start + perPage)
 })
 
-const totalPages = computed(() => 
+const totalPages = computed(() =>
   Math.ceil(users.value.length / perPage)
 )
 
@@ -179,7 +179,7 @@ onMounted(fetchData)
 
 async function fetchData() {
   loading.value = true
-  
+
   try {
     const response = await axios.get<TableData>('/api/users', {
       params: {
@@ -189,7 +189,7 @@ async function fetchData() {
         filters: filters.value
       }
     })
-    
+
     data.value = response.data.rows
     totalRecords.value = response.data.count_filtered
   } finally {
@@ -271,7 +271,7 @@ const table = useVueTable({
       <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
         <th v-for="header in headerGroup.headers" :key="header.id">
           <div @click="header.column.getToggleSortingHandler()?.($event)">
-            <component 
+            <component
               :is="flexRender(header.column.columnDef.header, header.getContext())"
             />
           </div>
@@ -301,15 +301,15 @@ export function useTable<T extends Record<string, any>>(
   const data: Ref<T[]> = ref([])
   const loading = ref(false)
   const total = ref(0)
-  
+
   const page = ref(1)
   const perPage = ref(25)
   const sortKey = ref<keyof T | ''>('')
   const sortOrder = ref<'asc' | 'desc'>('asc')
   const search = ref('')
-  
+
   const totalPages = computed(() => Math.ceil(total.value / perPage.value))
-  
+
   async function fetch() {
     loading.value = true
     try {
@@ -326,7 +326,7 @@ export function useTable<T extends Record<string, any>>(
       loading.value = false
     }
   }
-  
+
   function sort(key: keyof T) {
     if (sortKey.value === key) {
       sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
@@ -336,7 +336,7 @@ export function useTable<T extends Record<string, any>>(
     }
     fetch()
   }
-  
+
   return {
     data,
     loading,
diff --git a/app/pages/6.0/15.client-side-code/04.components/03.collections/docs.md b/app/pages/6.0/15.client-side-code/04.components/03.collections/docs.md
index cea0c537..26f142f7 100644
--- a/app/pages/6.0/15.client-side-code/04.components/03.collections/docs.md
+++ b/app/pages/6.0/15.client-side-code/04.components/03.collections/docs.md
@@ -17,21 +17,21 @@ Here's a simple component for managing a list of items:
 <template>
   <div class="collection">
     <h3>{{ title }}</h3>
-    
+
     <!-- List of items -->
     <div v-for="(item, index) in items" :key="item.id" class="collection-item">
       <div class="uk-grid-small" uk-grid>
         <div class="uk-width-expand">
-          <input 
-            v-model="item.value" 
-            type="text" 
+          <input
+            v-model="item.value"
+            type="text"
             class="uk-input"
             :placeholder="placeholder"
           />
         </div>
         <div class="uk-width-auto">
-          <button 
-            @click="removeItem(index)" 
+          <button
+            @click="removeItem(index)"
             class="uk-button uk-button-danger uk-button-small"
           >
             <span uk-icon="trash"></span>
@@ -39,7 +39,7 @@ Here's a simple component for managing a list of items:
         </div>
       </div>
     </div>
-    
+
     <!-- Add button -->
     <button @click="addItem" class="uk-button uk-button-default uk-margin-top">
       <span uk-icon="plus"></span> Add {{ itemName }}
@@ -118,7 +118,7 @@ function handleChange(items) {
 </script>
 
 <template>
-  <Collection 
+  <Collection
     title="Phone Numbers"
     item-name="Phone Number"
     placeholder="Enter phone number"
@@ -136,7 +136,7 @@ For more complex items with multiple fields:
 <template>
   <div class="role-collection">
     <h3>User Roles</h3>
-    
+
     <div v-for="(role, index) in roles" :key="role.id" class="uk-card uk-card-default uk-card-body uk-margin-small">
       <div class="uk-grid-small" uk-grid>
         <!-- Role Selection -->
@@ -148,31 +148,31 @@ For more complex items with multiple fields:
             </option>
           </select>
         </div>
-        
+
         <!-- Start Date -->
         <div class="uk-width-1-4">
           <label class="uk-form-label">Start Date</label>
-          <input 
-            v-model="role.start_date" 
-            type="date" 
+          <input
+            v-model="role.start_date"
+            type="date"
             class="uk-input"
           />
         </div>
-        
+
         <!-- End Date -->
         <div class="uk-width-1-4">
           <label class="uk-form-label">End Date</label>
-          <input 
-            v-model="role.end_date" 
-            type="date" 
+          <input
+            v-model="role.end_date"
+            type="date"
             class="uk-input"
           />
         </div>
-        
+
         <!-- Remove Button -->
         <div class="uk-width-1-1">
-          <button 
-            @click="removeRole(index)" 
+          <button
+            @click="removeRole(index)"
             class="uk-button uk-button-danger uk-button-small"
           >
             Remove Role
@@ -180,7 +180,7 @@ For more complex items with multiple fields:
         </div>
       </div>
     </div>
-    
+
     <button @click="addRole" class="uk-button uk-button-primary uk-margin-top">
       Add Role
     </button>
@@ -244,8 +244,8 @@ export function useCollection<T extends CollectionItem>(
   itemFactory: () => Omit<T, 'id'>
 ) {
   const items: Ref<T[]> = ref([...initialItems])
-  let nextId = items.value.length > 0 
-    ? Math.max(...items.value.map(i => i.id)) + 1 
+  let nextId = items.value.length > 0
+    ? Math.max(...items.value.map(i => i.id)) + 1
     : 1
 
   function add(): T {
@@ -253,7 +253,7 @@ export function useCollection<T extends CollectionItem>(
       id: nextId++,
       ...itemFactory()
     } as T
-    
+
     items.value.push(newItem)
     return newItem
   }
@@ -284,8 +284,8 @@ export function useCollection<T extends CollectionItem>(
 
   function reset(newItems: T[]) {
     items.value = [...newItems]
-    nextId = items.value.length > 0 
-      ? Math.max(...items.value.map(i => i.id)) + 1 
+    nextId = items.value.length > 0
+      ? Math.max(...items.value.map(i => i.id)) + 1
       : 1
   }
 
@@ -363,8 +363,8 @@ function logOrder() {
 </script>
 
 <template>
-  <draggable 
-    v-model="items" 
+  <draggable
+    v-model="items"
     item-key="id"
     @end="logOrder"
   >
@@ -422,7 +422,7 @@ async function saveEmails() {
         [site.csrf.keys.value]: site.csrf.value
       }
     })
-    
+
     alert('Emails saved!')
   } catch (error) {
     console.error('Failed to save:', error)
@@ -447,7 +447,7 @@ const errors = ref<Record<number, string>>({})
 
 const isValid = computed(() => {
   errors.value = {}
-  
+
   items.value.forEach(item => {
     if (!item.email) {
       errors.value[item.id] = 'Email is required'
@@ -455,7 +455,7 @@ const isValid = computed(() => {
       errors.value[item.id] = 'Invalid email format'
     }
   })
-  
+
   return Object.keys(errors.value).length === 0
 })
 </script>
diff --git a/app/pages/6.0/15.client-side-code/04.components/04.alerts/docs.md b/app/pages/6.0/15.client-side-code/04.components/04.alerts/docs.md
index d77a775a..9cf5b41d 100644
--- a/app/pages/6.0/15.client-side-code/04.components/04.alerts/docs.md
+++ b/app/pages/6.0/15.client-side-code/04.components/04.alerts/docs.md
@@ -53,7 +53,7 @@ Create a reusable alert component for persistent messages:
 **AlertBox.vue**:
 ```vue
 <template>
-  <div 
+  <div
     v-if="visible"
     class="uk-alert"
     :class="alertClass"
@@ -135,7 +135,7 @@ async function fetchAndDisplayAlerts() {
     const response = await axios.get<Alert[]>(
       `${site.uri.public}/alerts`
     )
-    
+
     response.data.forEach(alert => {
       UIkit.notification(alert.message, {
         status: alert.type === 'danger' ? 'danger' : alert.type,
@@ -171,11 +171,11 @@ export function useAlerts() {
 
   async function fetchAlerts() {
     loading.value = true
-    
+
     try {
       const response = await axios.get(`${site.uri.public}/alerts`)
       alerts.value = response.data
-      
+
       // Display as UIkit notifications
       response.data.forEach((alert: Alert) => {
         showNotification(alert.message, alert.type)
@@ -188,7 +188,7 @@ export function useAlerts() {
   }
 
   function showNotification(
-    message: string, 
+    message: string,
     type: 'success' | 'danger' | 'warning' | 'info' = 'info'
   ) {
     UIkit.notification(message, {
@@ -314,13 +314,13 @@ function addToast(
   duration = 5000
 ) {
   const id = Date.now().toString() + Math.random()
-  
+
   toasts.value.push({ id, message, type, duration })
-  
+
   if (duration > 0) {
     setTimeout(() => removeToast(id), duration)
   }
-  
+
   return id
 }
 
@@ -402,7 +402,7 @@ async function performAction() {
   try {
     await axios.post('/api/action')
     showSuccess('Action completed!')
-    
+
   } catch (error) {
     handleError(error as AxiosError)
   }
@@ -413,7 +413,7 @@ function handleError(error: AxiosError) {
     // Server responded with error status
     const message = error.response.data?.message || 'An error occurred'
     showError(message)
-    
+
     // Handle validation errors
     if (error.response.status === 422 && error.response.data?.errors) {
       Object.values(error.response.data.errors).forEach((msgs: any) => {
@@ -448,27 +448,27 @@ const isLoading = ref(false)
 
 async function performLongOperation() {
   isLoading.value = true
-  
+
   // Show loading notification
   const loadingNotification = UIkit.notification(
     'Processing... Please wait',
-    { 
+    {
       status: 'primary',
       timeout: 0  // Don't auto-close
     }
   )
-  
+
   try {
     await longRunningTask()
-    
+
     // Close loading, show success
     loadingNotification.close()
     UIkit.notification('Operation completed!', 'success')
-    
+
   } catch (error) {
     loadingNotification.close()
     UIkit.notification('Operation failed', 'danger')
-    
+
   } finally {
     isLoading.value = false
   }
@@ -487,7 +487,7 @@ import UIkit from 'uikit'
 async function deleteUser(userId: number) {
   // UIkit doesn't have built-in confirm, use native or create modal
   const confirmed = confirm('Are you sure you want to delete this user?')
-  
+
   if (confirmed) {
     try {
       await axios.delete(`/api/users/${userId}`)
@@ -515,14 +515,14 @@ function showConfirmModal(message: string, onConfirm: () => void) {
     </div>
   `
   document.body.appendChild(modal)
-  
+
   const confirmBtn = document.getElementById('confirm-btn')
   confirmBtn?.addEventListener('click', () => {
     onConfirm()
     UIkit.modal('#confirm-modal').hide()
     document.body.removeChild(modal)
   })
-  
+
   UIkit.modal('#confirm-modal').show()
 }
 </script>
@@ -542,9 +542,9 @@ Match the alert type to the message:
 
 Success messages should auto-dismiss:
 ```typescript
-UIkit.notification('Saved!', { 
-  status: 'success', 
-  timeout: 3000 
+UIkit.notification('Saved!', {
+  status: 'success',
+  timeout: 3000
 })
 ```
 
@@ -581,7 +581,7 @@ showError(`${errors.length} errors occurred`)
 
 Be specific about what happened and what to do:
 
-✅ **Good**: "Failed to save. Please check your internet connection and try again."  
+✅ **Good**: "Failed to save. Please check your internet connection and try again."
 ❌ **Bad**: "Error occurred"
 
 ## Integration with Forms
diff --git a/app/pages/6.0/15.client-side-code/04.components/docs.md b/app/pages/6.0/15.client-side-code/04.components/docs.md
index 09546b6e..5bc978cf 100644
--- a/app/pages/6.0/15.client-side-code/04.components/docs.md
+++ b/app/pages/6.0/15.client-side-code/04.components/docs.md
@@ -81,7 +81,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <button 
+  <button
     :class="[
       'uk-button',
       `uk-button-${variant}`,
@@ -123,7 +123,7 @@ export function useForm(initialData, onSubmit) {
   const form = ref({ ...initialData })
   const errors = ref({})
   const isSubmitting = ref(false)
-  
+
   async function submit() {
     isSubmitting.value = true
     try {
@@ -134,7 +134,7 @@ export function useForm(initialData, onSubmit) {
       isSubmitting.value = false
     }
   }
-  
+
   return { form, errors, isSubmitting, submit }
 }
 ```
@@ -263,7 +263,7 @@ try {
 Dive into specific component types:
 
 - **[Forms](client-side-code/components/forms)** - User input and validation
-- **[Tables](client-side-code/components/tables)** - Data display and manipulation  
+- **[Tables](client-side-code/components/tables)** - Data display and manipulation
 - **[Collections](client-side-code/components/collections)** - Dynamic lists
 - **[Alerts](client-side-code/components/alerts)** - User feedback
 
diff --git a/app/pages/6.0/16.mail/01.the-mailer-service/docs.md b/app/pages/6.0/16.mail/01.the-mailer-service/docs.md
index 13e26110..44cd4500 100644
--- a/app/pages/6.0/16.mail/01.the-mailer-service/docs.md
+++ b/app/pages/6.0/16.mail/01.the-mailer-service/docs.md
@@ -95,7 +95,7 @@ public function __construct(
     protected Twig $twig,
     protected Mailer $mailer,
 ) {
-}    
+}
 
 // ...
 
diff --git a/app/pages/6.0/17.i18n/01.introduction/docs.md b/app/pages/6.0/17.i18n/01.introduction/docs.md
index f3f4e9aa..83673abd 100644
--- a/app/pages/6.0/17.i18n/01.introduction/docs.md
+++ b/app/pages/6.0/17.i18n/01.introduction/docs.md
@@ -18,7 +18,7 @@ It's important to talk about why this system is important and why you should use
 
 Let's face it, it would be _waayyyy easier_ to simply hard code every public facing string in your common code. While using the translation system will make it easier to support additional languages in the future, it will also help separate your code from your site content.
 
-Imagine one day you decide to change the term **Users** to **Members**. If you hardcoded everything inside your code, you now have to go through all of the files, look for everwhere the word **User** (and **User_s_** !) is written and change it, one by one, everywhere. Keep in mind, this word is also used in the core code of UserFrosting! This means, if we were to hardcode everything too, that you would have to update all UserFrosting provided files too!
+Imagine one day you decide to change the term **Users** to **Members**. If you hardcoded everything inside your code, you now have to go through all of the files, look for everywhere the word **User** (and **User_s_** !) is written and change it, one by one, everywhere. Keep in mind, this word is also used in the core code of UserFrosting! This means, if we were to hardcode everything too, that you would have to update all UserFrosting provided files too!
 
 However, having all the _content_ in a single location can help in this situation. Since a common **messages key** is used in your code, you now have to fix only the **localized message**. The same goes if you made a typo somewhere...
 
diff --git a/app/pages/6.0/17.i18n/02.site-locale/docs.md b/app/pages/6.0/17.i18n/02.site-locale/docs.md
index 9845305e..f58b35e9 100644
--- a/app/pages/6.0/17.i18n/02.site-locale/docs.md
+++ b/app/pages/6.0/17.i18n/02.site-locale/docs.md
@@ -4,7 +4,7 @@ description: Configuration options are available to control the overall language
 wip: true
 ---
 
-UserFrosting is translated in a variaty of languages provided by our community. While a default locale will be used for new visitors, each user can  choose their prefered language.
+UserFrosting is translated in a variety of languages provided by our community. While a default locale will be used for new visitors, each user can  choose their preferred language.
 
 ## The default locale
 
@@ -17,7 +17,7 @@ For example, to use _French_ as the default locale :
 ```
 
 > [!NOTE]
-> When returned by the browser, the browser prefered locale will be used as the default locale for guest user.
+> When returned by the browser, the browser preferred locale will be used as the default locale for guest user.
 
 ## The available user locales
 
diff --git a/app/pages/6.0/18.advanced/01.custom-models/docs.md b/app/pages/6.0/18.advanced/01.custom-models/docs.md
index 2d6b9461..12d264ab 100644
--- a/app/pages/6.0/18.advanced/01.custom-models/docs.md
+++ b/app/pages/6.0/18.advanced/01.custom-models/docs.md
@@ -46,9 +46,9 @@ Now, we can start using `\UserFrosting\Sprinkle\Site\Database\Models\User` to ex
 
 Of course, the limitations of object-oriented inheritance becomes clear when you want to change the behavior of the original class in other places where it has been used. For example, if I extended `Account\Database\Models\User` and redefined the `onLogin` method in my `Site\Database\Models\User` class, this would let me use `Site\Database\Models\User` going forward in any code I write in the `site` Sprinkle. However, it wouldn't affect references to `User` in the `account` Sprinkle - they would still be referring to the base class.
 
-To allow this sort of "_retroactive extendability_", the Dependency Injector can be used to resolves interface identifiers to specific class names at runtime [through Interface Binding and custom Autowiring](dependency-injection/the-di-container#binding-interfaces). 
+To allow this sort of "_retroactive extendability_", the Dependency Injector can be used to resolves interface identifiers to specific class names at runtime [through Interface Binding and custom Autowiring](dependency-injection/the-di-container#binding-interfaces).
 
-UserFrosting uses this feature to solve this issue when dealing with data Models **by binding each default model to an interface**. Rather than hardcoding references to `UserFrosting\Sprinkle\Account\Database\Models\User`, UserFrosting reference the `UserFrosting\Sprinkle\Account\Database\Models\Interfaces\UserInterface` interface and map the interface with the correct model in the Account Sprinkle service provider. 
+UserFrosting uses this feature to solve this issue when dealing with data Models **by binding each default model to an interface**. Rather than hardcoding references to `UserFrosting\Sprinkle\Account\Database\Models\User`, UserFrosting reference the `UserFrosting\Sprinkle\Account\Database\Models\Interfaces\UserInterface` interface and map the interface with the correct model in the Account Sprinkle service provider.
 
 For example, a controller in the account Sprinkle will do something like:
 
@@ -94,7 +94,7 @@ The following interface-model association are defined by default in the *Account
 
 ## Overwriting existing map
 
-It is possible for any sprinkle to overwrite the default mapping in a service provider. Then every time `UserInterface` is referenced for example, your model will actually be injected instead of the default `User` Model.  
+It is possible for any sprinkle to overwrite the default mapping in a service provider. Then every time `UserInterface` is referenced for example, your model will actually be injected instead of the default `User` Model.
 
 **app/src/ServicesProvider/ModelsServices.php**:
 ```php
diff --git a/app/pages/6.0/18.advanced/04.error-handling/docs.md b/app/pages/6.0/18.advanced/04.error-handling/docs.md
index 2851f186..65d1cdd6 100644
--- a/app/pages/6.0/18.advanced/04.error-handling/docs.md
+++ b/app/pages/6.0/18.advanced/04.error-handling/docs.md
@@ -14,7 +14,7 @@ UserFrosting provides a framework for this process using custom PHP **[exception
 
 ## The exception lifecycle
 
-Any time an uncaught **exception** is thrown in your code, a global **Exception Handler Middleware** catches it and invokes a custom **error handler** specific to the exception that has been thrown. In return, this exception handler might invoke a specific **error renderer** to format the response for display, storage or logging. 
+Any time an uncaught **exception** is thrown in your code, a global **Exception Handler Middleware** catches it and invokes a custom **error handler** specific to the exception that has been thrown. In return, this exception handler might invoke a specific **error renderer** to format the response for display, storage or logging.
 
 ### Exceptions
 
@@ -88,14 +88,14 @@ In most cases, when an exception is thrown, the `UserFrosting\Sprinkle\Core\Erro
 
 Every exception handler implements one public method (as defined by `UserFrosting\Sprinkle\Core\Error\Handler\ExceptionHandlerInterface`): `handle()`. This is the entry point for handling the exception. This is where you decide if/how to show an error message, debugging page, log the error, and/or do something different entirely. This methods receive the *Server Request* and the *Exception* itself, and must return a Server Response.
 
-The base implementation of this interface is `UserFrosting\Sprinkle\Core\Error\Handler\ExceptionHandler`. This is the default Exception Handler, and most custom exception handlers will extends this class. It add some features over the interface : 
+The base implementation of this interface is `UserFrosting\Sprinkle\Core\Error\Handler\ExceptionHandler`. This is the default Exception Handler, and most custom exception handlers will extends this class. It add some features over the interface :
 1. Generate the appropriate user facing message, translate it if required, and determine the exception status code, if applicable;
 2. Decide if the exception should be saved to log. If so, uses `writeToErrorLog()` to write the detailed error information and stack trace to the UserFrosting error log service (which defaults to writing to the `logs/userfrosting.log` file), using a specific Error Renderer;
 3. Render the Response using the appropriate *Error Renderer*;
 
-A single handler isn't necessarily bind to a single Exception. Each handler can handle [Subtypes](https://www.php.net/manual/en/function.is-subclass-of.php) of an Exception natively. For example, `UserMessageExceptionHandler` handles `UserMessageException`, but also any exception that is a child of `UserMessageException`, since the handler also accept subtype handling. Since `ForbiddenException` extend `AccountException`, which extends `UserFacingException`, which *implements* `UserMessageException`, which is *handled* by `UserMessageExceptionHandler`, `ForbiddenException` will be handled by `UserMessageExceptionHandler`. 
+A single handler isn't necessarily bind to a single Exception. Each handler can handle [Subtypes](https://www.php.net/manual/en/function.is-subclass-of.php) of an Exception natively. For example, `UserMessageExceptionHandler` handles `UserMessageException`, but also any exception that is a child of `UserMessageException`, since the handler also accept subtype handling. Since `ForbiddenException` extend `AccountException`, which extends `UserFacingException`, which *implements* `UserMessageException`, which is *handled* by `UserMessageExceptionHandler`, `ForbiddenException` will be handled by `UserMessageExceptionHandler`.
 
-However, `AuthExpiredException` will be handled by `RedirectToLoginDangerHandler`, even it extends `AccountException` because a handler is directly defined for this exception. 
+However, `AuthExpiredException` will be handled by `RedirectToLoginDangerHandler`, even it extends `AccountException` because a handler is directly defined for this exception.
 
 #### Provided Exception Handler
 
@@ -129,7 +129,7 @@ By default, these exceptions are handled by these handlers :
 
 While the handlers *handles* the exception, the renderer format the exceptions to be displayed to the user, according to the content type the user is currently using. Each renderer must implement the `UserFrosting\Sprinkle\Core\Error\Renderer\ErrorRendererInterface` interface, and thus the following method:
 
-```php 
+```php
 public function render(
     ServerRequestInterface $request,
     Throwable $exception,
@@ -142,7 +142,7 @@ public function render(
 As you can see, the renderer will receive the server request, the exception itself, the user facing message to display (generated by the handler), the status code (determined by the handler) and if the renderer should display error details (as determined by the handler). In return the renderer will return a *string*, which the handler will receive back, and write to whatever (log, the response, etc.).
 
 > [!TIP]
-> Remember, any services can be injected into the Renderer classes, as with any Handlers classes 
+> Remember, any services can be injected into the Renderer classes, as with any Handlers classes
 
 #### Provided Renderers
 
@@ -232,7 +232,7 @@ throw $e;
 
 ### Custom Handler
 
-In some situation, it can useful to create your own Exception Handler. As a basic example, lets take a look at the `HttpExceptionHandler` class, which modifies the base behavior of `ExceptionHandler` by reading an error message and status code from the corresponding `HttpException` (or child subtype) and using these to construct the response. 
+In some situation, it can useful to create your own Exception Handler. As a basic example, lets take a look at the `HttpExceptionHandler` class, which modifies the base behavior of `ExceptionHandler` by reading an error message and status code from the corresponding `HttpException` (or child subtype) and using these to construct the response.
 
 ```php
 <?php
@@ -322,7 +322,7 @@ class ErrorHandlerService implements ServicesProviderInterface
 }
 ```
 
-The first argument is the the exception class reference, and the second argument is the handler class reference.
+The first argument is the exception class reference, and the second argument is the handler class reference.
 
 > [!WARNING]
 > It's important to **decorate** the `ExceptionHandlerMiddleware`. Do not follow the example set in the Core sprinkle, and use `\DI\Autowire` instead, as you'll **replace** the middleware already defined, and every handler already registered.
@@ -383,12 +383,12 @@ class SimplePlainTextRenderer implements ErrorRendererInterface
 }
 ```
 
-Your custom renderer now need to be registered using one of three methods: 
+Your custom renderer now need to be registered using one of three methods:
 1. In a custom handler;
 2. By decorating an existing handler;
 3. By replacing a global renderer through dependency injection;
 
-To use your renderer in your handler, replace the `$errorRenderers` and/or `$logFormatter` property of the base `ExceptionHandler`: 
+To use your renderer in your handler, replace the `$errorRenderers` and/or `$logFormatter` property of the base `ExceptionHandler`:
 ```php
 class MyExceptionHandler implements ExceptionHandler
 {
@@ -410,7 +410,7 @@ class MyExceptionHandler implements ExceptionHandler
 }
 ```
 
-A renderer can be registered using the `registerErrorRenderer` method of the `ExceptionHandler`. For example, by decorating an existing class/service : 
+A renderer can be registered using the `registerErrorRenderer` method of the `ExceptionHandler`. For example, by decorating an existing class/service :
 ```php
 public function register(): array
 {
diff --git a/app/pages/6.0/18.advanced/05.sessions/docs.md b/app/pages/6.0/18.advanced/05.sessions/docs.md
index a1922143..8f0f9243 100644
--- a/app/pages/6.0/18.advanced/05.sessions/docs.md
+++ b/app/pages/6.0/18.advanced/05.sessions/docs.md
@@ -6,7 +6,7 @@ wip: true
 
 HTTP itself is stateless - you may recall that we compare a web application to a [conversation between two agents with very poor memory](background/the-client-server-conversation). This presents a problem if we want to implement a "login" functionality - the server needs to be able to remember that someone has already authenticated in an earlier request!
 
-Like other web frameworks, UserFrosting uses [PHP sessions](http://php.net/manual/en/intro.session.php) to solve this problem. When a user visits your site, PHP will place a random, hard-to-guess string called the **session id** in the the `Set-Cookie` header of the response. This is automatically stored by the user's browser in a cookie. It uniquely identifies the user and cannot easily be guessed by anyone without access to the user's browser.
+Like other web frameworks, UserFrosting uses [PHP sessions](http://php.net/manual/en/intro.session.php) to solve this problem. When a user visits your site, PHP will place a random, hard-to-guess string called the **session id** in the `Set-Cookie` header of the response. This is automatically stored by the user's browser in a cookie. It uniquely identifies the user and cannot easily be guessed by anyone without access to the user's browser.
 
 The next time a user makes a request _on your site_ (for example, visiting a page), your browser automatically sends the session id back to the server in the `Cookie` request header. By sending the session id to the server with each subsequent request, the server can resume the user's session that was saved after the last request. You can think of the session id as a temporary "password" that your browser automatically sends to the server with each request.
 
diff --git a/app/pages/6.0/18.advanced/06.caching/02.usage/docs.md b/app/pages/6.0/18.advanced/06.caching/02.usage/docs.md
index 1b6e1c79..2184a34e 100644
--- a/app/pages/6.0/18.advanced/06.caching/02.usage/docs.md
+++ b/app/pages/6.0/18.advanced/06.caching/02.usage/docs.md
@@ -18,7 +18,7 @@ class MyClass
         protected Cache $cache
     ) {
     }
-    
+
     public function users(): UserInterface
     {
         return $this->cache->get('users', function () {
diff --git a/app/pages/6.0/18.advanced/08.locator/docs.md b/app/pages/6.0/18.advanced/08.locator/docs.md
index b6048ff5..863313c2 100644
--- a/app/pages/6.0/18.advanced/08.locator/docs.md
+++ b/app/pages/6.0/18.advanced/08.locator/docs.md
@@ -40,7 +40,7 @@ The paths for non-shared streams are calculated relatively from each [sprinkle p
 
 ### Debugging locations
 
-The bakery command provide a debugging command to help you understand and validate all the paths returned by the locator service: 
+The bakery command provide a debugging command to help you understand and validate all the paths returned by the locator service:
 
 ```bash
 $ php bakery debug:locator
@@ -186,7 +186,7 @@ A new stream can be registered pretty much anywhere. If the stream is tied to a
 
 When the locator service is initialized, the `ResourceLocatorInitiatedEvent` will be dispatched by the global event dispatcher. Each sprinkle can listen for this even and use it to register their own stream on the locator service. In fact, even the default stream are registered this way!
 
-To register a new service, a new instance of `UserFrosting\UniformResourceLocator\ResourceStream` can be created and passed to the locator through the `addStream` method. 
+To register a new service, a new instance of `UserFrosting\UniformResourceLocator\ResourceStream` can be created and passed to the locator through the `addStream` method.
 
 For example, let's create a listener class that will register a `foo` stream, and a `bar` shared stream:
 
@@ -210,7 +210,7 @@ class ResourceLocatorInitiated
         // Normal Stream
         $stream = new ResourceStream('foo');
         $event->locator->addStream($stream);
-        
+
         // Shared Stream with custom path
         $stream = new ResourceStream('bar', path: 'foobar', shared: true),
         $event->locator->addStream($stream);
@@ -226,7 +226,7 @@ The listener then need to be registered in the Sprinkle Recipe:
 ```php
 namespace UserFrosting\Sprinkle\Site;
 
-// ... 
+// ...
 use UserFrosting\Event\EventListenerRecipe; // <-- Add this
 use UserFrosting\Sprinkle\Site\Listeners\ResourceLocatorInitiated; // <-- Add this
 // ...
@@ -247,7 +247,7 @@ class MyApp implements
         ];
     }
     //<--
-    
+
     // ...
 }
 ```
diff --git a/app/pages/6.0/18.advanced/11.events/docs.md b/app/pages/6.0/18.advanced/11.events/docs.md
index 8c5bfb66..308a7d89 100644
--- a/app/pages/6.0/18.advanced/11.events/docs.md
+++ b/app/pages/6.0/18.advanced/11.events/docs.md
@@ -3,7 +3,7 @@ title: Events
 wip: true
 ---
 
-UserFrosting makes uses of *Event Dispatching* to enable customization of some built-in features. For example, when someone uses the login form, the following process is done : 
+UserFrosting makes uses of *Event Dispatching* to enable customization of some built-in features. For example, when someone uses the login form, the following process is done :
 
 1. User info is found on the database based on it's username or password
 2. User account is validated (is it enabled? Is it verified? etc.)
@@ -12,7 +12,7 @@ UserFrosting makes uses of *Event Dispatching* to enable customization of some b
 
 It's understandable that your would want to step in during this process that is the core feature of UserFrosting to implement an additional step specific to your project. That is why after step #2 is done, the `UserValidatedEvent` event will be dispatched, after step #3, `UserAuthenticatedEvent` event will be dispatched, and after step #4, the `UserLoggedInEvent` event will be dispatched. Each sprinkle can intercept these events and act upon then to change the default behavior. For example, the `UserLoggedInEvent` could be intercept to log the user activity.
 
-The process of intercepting events and acting upon them is called **listening** to events through an **Event Dispatcher**. The [PSR-14 Standard](https://www.php-fig.org/psr/psr-14/) defines each part of an event dispatching system like this : 
+The process of intercepting events and acting upon them is called **listening** to events through an **Event Dispatcher**. The [PSR-14 Standard](https://www.php-fig.org/psr/psr-14/) defines each part of an event dispatching system like this :
 
 > - **Event** - An Event is a message produced by an Emitter. It may be any arbitrary PHP object.
 > - **Listener** - A Listener is any PHP callable that expects to be passed an Event. Zero or more Listeners may be passed the same Event. A Listener MAY enqueue some other asynchronous behavior if it so chooses.
@@ -20,7 +20,7 @@ The process of intercepting events and acting upon them is called **listening**
 > - **Dispatcher** - A Dispatcher is a service object that is given an Event object by an Emitter. The Dispatcher is responsible for ensuring that the Event is passed to all relevant Listeners, but MUST defer determining the responsible listeners to a Listener Provider.
 > - **Listener Provider** - A Listener Provider is responsible for determining what Listeners are relevant for a given Event, but MUST NOT call the Listeners itself. A Listener Provider may specify zero or more relevant Listeners.
 
-A simple workflow used to visualize of the process of event dispatching would be : 
+A simple workflow used to visualize of the process of event dispatching would be :
 
 1. The **Emitter** decide to dispatch an **Event** : It create the *Event Object* and gives it to the **Dispatcher**
 2. The **Dispatcher** ask the **Listener Provider** for a list of **Listener** relevant to the **Event**
@@ -34,7 +34,7 @@ Let's go deeper in each part.
 
 Events are objects that act as the unit of communication between an Emitter and appropriate Listeners. Events are essentially basic classes: they don't require to implement a specific interface. Event classes doesn't even need to contain any code. However, it's possible for events to contain other objects, which the listener can use. A vary basic example of this is the `UserLoggedInEvent`:
 
-```php 
+```php
 class UserLoggedInEvent
 {
     /**
@@ -56,7 +56,7 @@ When it's created, the *Emitter* will define a user object as it's contractor ar
 
 A Stoppable Event is a special case of Event that contains additional ways to prevent further Listeners from being called. It is indicated by implementing the `Psr\EventDispatcher\StoppableEventInterface`.
 
-An Event that implements `StoppableEventInterface` MUST return true from `isPropagationStopped()` when whatever Event it represents has been completed. Behind the scenes, the *Dispatcher* will test if `isPropagationStopped() === true` after each Listener has handled the event. If it is, the other listeners won't be called. 
+An Event that implements `StoppableEventInterface` MUST return true from `isPropagationStopped()` when whatever Event it represents has been completed. Behind the scenes, the *Dispatcher* will test if `isPropagationStopped() === true` after each Listener has handled the event. If it is, the other listeners won't be called.
 
 For example, if the event purpose is to log an activity, and it should only be logged once based on the user permissions, propagation should be stopped once it's been successfully logged once to avoid duplicates.
 
@@ -67,7 +67,7 @@ A Listener may be any PHP callable. In it's basic form, it's also a very basic c
 > [!TIP]
 > A listeners can listen to many events. It should type hint it's parameter as specifically as possible; that is, a Listener may type hint against an interface to indicate it is compatible with any Event type that implements that interface, or to a specific event class.
 
-For example : 
+For example :
 ```php
 class BakeCommandListener
 {
@@ -80,7 +80,7 @@ class BakeCommandListener
 
 This listener accept a `BakeCommandEvent`, which exposes some methods, like `addCommand`, that modify a list of commands stored in the `BakeCommandEvent` object. Since this listener doesn't stop the propagation of a stoppable event, other listeners can also add their own command to the event, and they'll even see that `create:admin-user` exist if they list all currently registered commands (and it it's executed *after* `BakeCommandListener` of course).
 
-A listener can also delegate task to other code or service. It is definitively possible to inject a service in the service constructor method - Listeners will in fact be instantiated by the [dependency injection container](dependency-injection/the-di-container). For example : 
+A listener can also delegate task to other code or service. It is definitively possible to inject a service in the service constructor method - Listeners will in fact be instantiated by the [dependency injection container](dependency-injection/the-di-container). For example :
 
 ```php
 class AssignDefaultRoles
@@ -106,7 +106,7 @@ class AssignDefaultRoles
 
 UserFrosting implements a PSR-14 compatible `EventDispatcherInterface`. This means you can inject the `Psr\EventDispatcher\EventDispatcherInterface` directly in any class to receive and instance of the UserFrosting event dispatcher.
 
-```php 
+```php
 use Psr\EventDispatcher\EventDispatcherInterface;
 
 // ...
@@ -127,13 +127,13 @@ The dispatcher only has one public method : `public function dispatch(object $ev
 
 UserFrosting implements a PSR-14 compatible `Psr\EventDispatcher\ListenerProviderInterface`, used by the dispatcher. Sprinkles are not expected to access it directly: Invoking listeners should only be done thought the provided dispatcher.
 
-It's only worth to know that UserFrosting listener provider will return the relevant listeners for a given event based on the [Sprinkle dependency order](sprinkles/recipe#getsprinkles), then the order they are registered (which we'll see next). Your sprinkle will always be the top sprinkle, so your listeners will always be invoked first. 
+It's only worth to know that UserFrosting listener provider will return the relevant listeners for a given event based on the [Sprinkle dependency order](sprinkles/recipe#getsprinkles), then the order they are registered (which we'll see next). Your sprinkle will always be the top sprinkle, so your listeners will always be invoked first.
 
 ## Registering a listener
 
-Registering a listener is done in the Sprinkle Recipe, thought the `getEventListeners` method and `UserFrosting\Event\EventListenerRecipe`. However, this recipe is different from other class you register in your recipe. You have to assign each listener to it's event. And because an event can have multiple listeners, we'll actually assign listeners to events. For example : 
+Registering a listener is done in the Sprinkle Recipe, thought the `getEventListeners` method and `UserFrosting\Event\EventListenerRecipe`. However, this recipe is different from other class you register in your recipe. You have to assign each listener to it's event. And because an event can have multiple listeners, we'll actually assign listeners to events. For example :
 
-```php 
+```php
 use UserFrosting\Event\EventListenerRecipe; // Don't forget to import !
 
 // ...
@@ -143,7 +143,7 @@ class MyApp implements
     EventListenerRecipe, // <-- Add this !
 {
 
-// ... 
+// ...
 
 public function getEventListeners(): array
 {
@@ -182,14 +182,14 @@ These are the events the Framework and default sprinkles uses. You can easily li
 | `UserFrosting\Event\BakeryInitiatedEvent`                        | Dispatched when the Symfony Console App is ready to be run.                                                       |
 | `UserFrosting\Sprinkle\Core\Bakery\Event\BakeCommandEvent`       | Dispatched when the `bake` command is about to be run. The list of subcommands that will be run can be manipulated using this event to insert custom subcommands into the callstack. |
 | `UserFrosting\Sprinkle\Core\Bakery\Event\DebugCommandEvent`      | Dispatched when the `debug` command is about to be run.                                                           |
-| `UserFrosting\Sprinkle\Core\Bakery\Event\DebugVerboseCommandEvent` | Dispatched when the `debug` command is about to be run ins verbose mode                                         | 
+| `UserFrosting\Sprinkle\Core\Bakery\Event\DebugVerboseCommandEvent` | Dispatched when the `debug` command is about to be run ins verbose mode                                         |
 | `UserFrosting\Sprinkle\Core\Bakery\Event\SetupCommandEvent`      | Dispatched when the `setup` command is about to be run.                                                           |
 | `UserFrosting\Sprinkle\Core\Event\ResourceLocatorInitiatedEvent` | Dispatched when the ResourceLocatorInterface is ready to be used. The locator itself is available in the handler. |
 | `UserFrosting\Sprinkle\Account\Event\UserCreatedEvent`           | Dispatched when a user is created. User can be mutated by the listener (N.B.: any modification to the user need to be saved to the db by the listener) |
 | `UserFrosting\Sprinkle\Account\Event\UserValidatedEvent` | This event is dispatched when the user is validated, before login or session is restored. A listener can throw an exception to interrupt the login, session or rememberme restoration process.
 | `UserFrosting\Sprinkle\Account\Event\UserAuthenticatedEvent`     | This event is dispatched after the user is authenticated, but **before** it's logged in. A listener can throw an exception to abort the login process. User object is available in the event. |
 | `UserFrosting\Sprinkle\Account\Event\UserLoggedInEvent`          | This event is dispatched when the user is logged in. If a listener throws an exception, an error page will be displayed, but on refresh the user will already be restore from the session. User object is available in the event. |
-| `UserFrosting\Sprinkle\Account\Event\UserLoggedOutEvent`         | This event is dispatched when the user is logged out. A listener can throw an exception, and while the exception will interrupt the process, but since this is dispatched after session is closed, a refresh will keep the user logged out. | 
+| `UserFrosting\Sprinkle\Account\Event\UserLoggedOutEvent`         | This event is dispatched when the user is logged out. A listener can throw an exception, and while the exception will interrupt the process, but since this is dispatched after session is closed, a refresh will keep the user logged out. |
 | `UserFrosting\Sprinkle\Account\Event\UserRedirectedAfterDenyResetPasswordEvent` | Define the destination route when a user use the deny the reset password link |
 | `UserFrosting\Sprinkle\Account\Event\UserRedirectedAfterLoginEvent` | Define the destination route when a user login |
 | `UserFrosting\Sprinkle\Account\Event\UserRedirectedAfterLogoutEvent` | Define the destination route when a user logout |
diff --git a/app/pages/6.0/18.advanced/12.middlewares/docs.md b/app/pages/6.0/18.advanced/12.middlewares/docs.md
index 50c2d999..a4769894 100644
--- a/app/pages/6.0/18.advanced/12.middlewares/docs.md
+++ b/app/pages/6.0/18.advanced/12.middlewares/docs.md
@@ -3,7 +3,7 @@ title: Middlewares
 wip: true
 ---
 
-Sometimes it can be useful to run code _before_ or _after_ the the request is handled, to either manipulate the Request and/or the Response objects. This can be done by _middlewares_. Middlewares can be used to add many feature to every page or simple routes, for example to add protection to the website, handle some configuration, inject some variable, etc.
+Sometimes it can be useful to run code _before_ or _after_ the request is handled, to either manipulate the Request and/or the Response objects. This can be done by _middlewares_. Middlewares can be used to add many feature to every page or simple routes, for example to add protection to the website, handle some configuration, inject some variable, etc.
 
 ## How does middleware work?
 
@@ -64,7 +64,7 @@ class ExampleAfterMiddleware implements MiddlewareInterface
     public function process(ServerRequestInterface $request, RequestHandlerInterface $handler): ResponseInterface
     {
         $response = $handler->handle($request);
-        
+
         // Do something ...
 
         return $response;
@@ -81,9 +81,9 @@ You may add middleware to the entire application, to an individual route or to a
 
 ### Application middleware
 
-Application middleware is invoked for every **incoming** HTTP request. To add an application wide middleware, it must be registered in your Sprinkle Recipe, via the 
+Application middleware is invoked for every **incoming** HTTP request. To add an application wide middleware, it must be registered in your Sprinkle Recipe, via the
 
-```php 
+```php
 use UserFrosting\Sprinkle\MiddlewareRecipe; // Don't forget to import !
 
 // ...
@@ -93,7 +93,7 @@ class MyApp implements
     MiddlewareRecipe, // <-- Add this !
 {
 
-// ... 
+// ...
 
 /**
  * Returns a list of all Middlewares classes.
diff --git a/app/pages/6.0/19.testing/02.running-tests/docs.md b/app/pages/6.0/19.testing/02.running-tests/docs.md
index f171543d..6159ae63 100644
--- a/app/pages/6.0/19.testing/02.running-tests/docs.md
+++ b/app/pages/6.0/19.testing/02.running-tests/docs.md
@@ -3,7 +3,7 @@ title: Running Tests
 wip: true
 ---
 
-You can execute tests using [Phpunit](https://phpunit.de) directly : 
+You can execute tests using [Phpunit](https://phpunit.de) directly :
 
 ```bash
 ./vendor/bin/phpunit
diff --git a/app/pages/6.0/19.testing/03.writting-tests/01.testcase/docs.md b/app/pages/6.0/19.testing/03.writting-tests/01.testcase/docs.md
index 5df3ee7a..f912887a 100644
--- a/app/pages/6.0/19.testing/03.writting-tests/01.testcase/docs.md
+++ b/app/pages/6.0/19.testing/03.writting-tests/01.testcase/docs.md
@@ -31,15 +31,15 @@ class MyTest extends TestCase
 }
 ```
 
-You could also use the code above as a new test case, instead of defining `$mainSprinkle` in every tests. Instead of naming the class `MyTest`, name it `MyTestCase` and make every test class extend `MyTestCase`. 
+You could also use the code above as a new test case, instead of defining `$mainSprinkle` in every tests. Instead of naming the class `MyTest`, name it `MyTestCase` and make every test class extend `MyTestCase`.
 
 The biggest advantage is you don't *need* to use your Recipe. Alternatively, you can create a recipe stub. Simply create a *second* recipe in your testing directory. This other recipe can register only the class you want to test.
 
 ## Helping methods & properties
 
-When extending `UserFrosting\Testing\TestCase`, you have access to many helper methods and properties. 
+When extending `UserFrosting\Testing\TestCase`, you have access to many helper methods and properties.
 
-### Properties 
+### Properties
 | Property              | Description                    |
 | --------------------- | ------------------------------ |
 | `$this->ci`           | Dependency Injection Container |
@@ -55,7 +55,7 @@ When extending `UserFrosting\Testing\TestCase`, you have access to many helper m
 This methods can be used to create a basic `ServerRequestInterface`.
 
 ```php
-$this->createRequest( 
+$this->createRequest(
     string $method, // The HTTP method : GET, POST, PUT, DELETE, etc.
     string|UriInterface $uri, // The URI
     array $serverParams = [] // The POST data
@@ -104,7 +104,7 @@ assertResponse(string $expected, ResponseInterface $response)
 ```php
 $this->assertResponse('fr_FR', $response);
 
-// Same as 
+// Same as
 
 $this->assertSame('fr_FR', (string) $response->getBody());
 ```
@@ -120,7 +120,7 @@ assertResponseStatus(int $expected, ResponseInterface $response)
 ```php
 $this->assertResponseStatus(400, $response);
 
-// Same as 
+// Same as
 
 $this->assertSame(400, $response->getStatusCode());
 ```
@@ -137,7 +137,7 @@ assertJsonResponse(mixed $expected, ResponseInterface $response, ?string $key =
 $this->assertJsonResponse(['foo' => 'bar'], $response);
 $this->assertJsonResponse('bar', $response), 'foo';
 
-// Same as 
+// Same as
 
 $this->assertJsonEquals(['foo' => 'bar'], (string) $response->getBody());
 $this->assertJsonEquals('bar', (string) $response->getBody(), 'foo');
@@ -219,7 +219,7 @@ $this->assertHtmlTagCount(0, $html, 'p');
 
 To methods above can be used to test routes endpoints. The basic concept is to use `createRequest` or `createJsonRequest` to create the `ServerRequestInterface`. Then pass this request to `handleRequest` which will invoked the correct route and return the response from the controller. Finally use custom assertions to make sure the response contains the right content.
 
-For example : 
+For example :
 
 ### HTML Routes
 ```php
diff --git a/app/pages/6.0/19.testing/03.writting-tests/02.Traits/docs.md b/app/pages/6.0/19.testing/03.writting-tests/02.Traits/docs.md
index 79cd859e..038c0154 100644
--- a/app/pages/6.0/19.testing/03.writting-tests/02.Traits/docs.md
+++ b/app/pages/6.0/19.testing/03.writting-tests/02.Traits/docs.md
@@ -24,7 +24,7 @@ $ci->set(Foo::class, $foo);
 $ci->get(Foo::class);
 ```
 
-The `create` method can also accept services definition: 
+The `create` method can also accept services definition:
 
 ```php
 $provider = new AlertStreamService();
@@ -33,7 +33,7 @@ $ci = ContainerStub::create($provider->register());
 
 ## BakeryTester
 
-`UserFrosting\Testing\BakeryTester` can be used to test bakery commands. This class has one static command, and returns the result of the executed command. 
+`UserFrosting\Testing\BakeryTester` can be used to test bakery commands. This class has one static command, and returns the result of the executed command.
 
 ```php
 public static function runCommand(
@@ -50,7 +50,7 @@ The `$command` argument must be an instance of the command class. `$input` is an
 ```php
 use UserFrosting\Testing\BakeryTester;
 
-// ... 
+// ...
 
 $command = $this->ci->get(ClearCacheCommand::class);
 $result = BakeryTester::runCommand($command);
diff --git a/app/pages/6.0/19.testing/03.writting-tests/03.Factories/docs.md b/app/pages/6.0/19.testing/03.writting-tests/03.Factories/docs.md
index 567105ef..43d25cf1 100644
--- a/app/pages/6.0/19.testing/03.writting-tests/03.Factories/docs.md
+++ b/app/pages/6.0/19.testing/03.writting-tests/03.Factories/docs.md
@@ -11,7 +11,7 @@ Model factories can be used to insert test data into the database. See [Laravel
 1. Create your factory, which must extend `UserFrosting\Sprinkle\Core\Database\Factories\Factory`;
 2. You model need to use the `Illuminate\Database\Eloquent\Factories\HasFactory` trait;
 3. Add `newFactory` method in your model, returning your factory:
-   ```php 
+   ```php
     /**
      * Create a new factory instance for the model.
      *
diff --git a/app/pages/6.0/20.recipes/01.creating-a-new-page/docs.md b/app/pages/6.0/20.recipes/01.creating-a-new-page/docs.md
index cb6f9861..bb46c253 100644
--- a/app/pages/6.0/20.recipes/01.creating-a-new-page/docs.md
+++ b/app/pages/6.0/20.recipes/01.creating-a-new-page/docs.md
@@ -74,7 +74,7 @@ class PageMembers
 }
 ```
 
-Notice that `PageMembers` only does one thing - it renders the contents of a template file (`pages/members.html.twig`), and appends it to the response. We then return this (modified) response to the main application, which sends it off to the client. Both arguments of the `__invoke` method, the Response as well as the Twig Services, will be [injected by the Dependency Injector Container](dependency-injection) to perform these operations. 
+Notice that `PageMembers` only does one thing - it renders the contents of a template file (`pages/members.html.twig`), and appends it to the response. We then return this (modified) response to the main application, which sends it off to the client. Both arguments of the `__invoke` method, the Response as well as the Twig Services, will be [injected by the Dependency Injector Container](dependency-injection) to perform these operations.
 
 Next we'll create the page template itself, which contains the actual HTML content we want to render.
 
diff --git a/app/pages/6.0/20.recipes/02.extending-the-user-model/docs.md b/app/pages/6.0/20.recipes/02.extending-the-user-model/docs.md
index 79ab24b3..485aff8d 100644
--- a/app/pages/6.0/20.recipes/02.extending-the-user-model/docs.md
+++ b/app/pages/6.0/20.recipes/02.extending-the-user-model/docs.md
@@ -279,7 +279,7 @@ The problem, of course, is that all of the controllers in the Sprinkle that _def
 
 Fortunately, the default Sprinkles never directly reference the `User` class. Instead, they **[inject](dependency-injection)** the `UserInterface`. All we need to do, then, is remap the `UserInterface` to our new class, `Member`. This can be done via [Autowire](dependency-injection/the-di-container#binding-interfaces) in a [service provider](services/extending-services).
 
-Create a class `src/ServicesProvider/MemberModelService.php` : 
+Create a class `src/ServicesProvider/MemberModelService.php` :
 
 ```php
 <?php
@@ -303,7 +303,7 @@ class MemberModelService implements ServicesProviderInterface
 
 Plus, add `MemberModelService` to your Sprinkle recipe:
 
-```php 
+```php
 public function getServices(): array
 {
     return [
@@ -386,7 +386,7 @@ $fieldNames = ['user_name', 'name', 'email', 'locale', 'group', 'roles'];
 
 ...and add the `city` and `country` fields in your copied method.
 
-We'll also need to link the route endpoints to this new class. To do this, we'll once again use the dependency injector to remap the `UserPageAction` to our new `MemberPageAction` class : 
+We'll also need to link the route endpoints to this new class. To do this, we'll once again use the dependency injector to remap the `UserPageAction` to our new `MemberPageAction` class :
 
 ```php
 <?php
diff --git a/app/pages/6.0/20.recipes/04.custom-login-page/docs.md b/app/pages/6.0/20.recipes/04.custom-login-page/docs.md
index e616a5de..0dfadf96 100644
--- a/app/pages/6.0/20.recipes/04.custom-login-page/docs.md
+++ b/app/pages/6.0/20.recipes/04.custom-login-page/docs.md
@@ -54,9 +54,9 @@ See the [Configuration Files](configuration/config-files) chapter for more infor
 
 ## Changing the post-login destination
 
-When a successful login occurs, by default, the user will be taken to the `/dashboard` page if it has access to this page, or `/settings` otherwise. 
+When a successful login occurs, by default, the user will be taken to the `/dashboard` page if it has access to this page, or `/settings` otherwise.
 
-To understand how this redirect works, when the user is logging in, the `UserRedirectedAfterLoginEvent` event will be dispatched. The **Admin Sprinkle** listen to this event, through the `UserRedirectedToSettings` and `UserRedirectedToDashboard` listeners : 
+To understand how this redirect works, when the user is logging in, the `UserRedirectedAfterLoginEvent` event will be dispatched. The **Admin Sprinkle** listen to this event, through the `UserRedirectedToSettings` and `UserRedirectedToDashboard` listeners :
 
 `vendor/userfrosting/sprinkle-admin/app/src/Admin.php`
 ```php
@@ -74,7 +74,7 @@ public function getEventListeners(): array
 }
 ```
 
-You'll notice two listeners are listening to the event. First `UserRedirectedToDashboard` will be executed and if the user has access to the Dashboard, the redirect will be set to `/dashboard`. If the user doesn't have access (via the authenticator checkAccess method), `UserRedirectedToSettings` will be called. 
+You'll notice two listeners are listening to the event. First `UserRedirectedToDashboard` will be executed and if the user has access to the Dashboard, the redirect will be set to `/dashboard`. If the user doesn't have access (via the authenticator checkAccess method), `UserRedirectedToSettings` will be called.
 
 This process can be easily customized by adding our own event listener. Let's change the default behavior to redirect every user to the about page (`/about` route) upon login.
 
@@ -113,7 +113,7 @@ class UserRedirectedToAbout
 ```
 
 > [!NOTE]
-> Note that we use Slim's route parser `urlFor` method to get the route definition from it's name. This is the same as hardcoding `'/about'`. Check out [Slim's documentation](https://www.slimframework.com/docs/objects/router.html#route-names) for more info on named routes.
+> Note that we use Slim's route parser `urlFor` method to get the route definition from its name. This is the same as hardcoding `'/about'`. Check out [Slim's documentation](https://www.slimframework.com/docs/objects/router.html#route-names) for more info on named routes.
 
 The last step is to register the new listener in your Sprinkle Recipe. The recipe itself will also need to implement the `UserFrosting\Event\EventListenerRecipe` interface.
 
@@ -147,7 +147,7 @@ class MyApp implements
             ],
         ];
     }
-    
+
     // ...
 }
 ```
@@ -199,7 +199,7 @@ Now we will modify the login page to show the site logo. The base base template
 A couple of elements to point out here :
 1. We start by using the `extend` tag with the reference to `@adminlte-theme` template. This tells Twig to use the original template as base.
 2. We add the `loginLogo`, but leave it empty to remove the default logo/title.
-3. We define a custom `loginBox` block with our modified code. The `login-logo` div is now inside the `login-box-body` and the image is added. 
+3. We define a custom `loginBox` block with our modified code. The `login-logo` div is now inside the `login-box-body` and the image is added.
 4. Since we still want to use both `loginForm` and `loginLinks` blocks, but don't want to change their content, we include them and use `{{ parent() }}` to render the content from the `@adminlte-theme` version
 
 The last missing piece is the image we used isn't loaded in your app right now. This image is located in the AdminLTE theme sprinkle and must be copied to the `public/`. Fortunately, AdminLTE sprinkle provides an helper module to do this with Webpack. Simply add the following line to your `app/assets/app.js` and run Webpack.
@@ -209,7 +209,7 @@ The last missing piece is the image we used isn't loaded in your app right now.
 require('@userfrosting/theme-adminlte/app/assets/cupcake');
 ```
 
-Run : 
+Run :
 ```
 $ php bakery assets:build
 ```
@@ -220,7 +220,7 @@ Once you refresh the page, you should see the result:
 
 ### Customizing the CSS
 
-Customizing the CSS is different than overriding the template. Our change will be small, so we won't be replacing a full css file, but add a new, smaller one. Two steps are required to achieve this : 
+Customizing the CSS is different than overriding the template. Our change will be small, so we won't be replacing a full css file, but add a new, smaller one. Two steps are required to achieve this :
 
 1. Create a new css file
 2. Register a new webpack entry
@@ -258,7 +258,7 @@ Next, we add the entry to the login page. At the bottom of the file, outside any
 {% endblock %}
 ```
 
-Last, we need to rebuild the assets, by running the bakery command : 
+Last, we need to rebuild the assets, by running the bakery command :
 
 ```bash
 php bakery assets:build
diff --git a/app/pages/6.0/20.recipes/06.external-js/docs.md b/app/pages/6.0/20.recipes/06.external-js/docs.md
index dead425f..82b6ecf4 100644
--- a/app/pages/6.0/20.recipes/06.external-js/docs.md
+++ b/app/pages/6.0/20.recipes/06.external-js/docs.md
@@ -10,7 +10,7 @@ wip: true
 > [!TIP]
 > A complete example of this guide can be found on GitHub : [https://github.com/userfrosting/recipe-js-package](https://github.com/userfrosting/recipe-js-package)
 
-This recipe will guide you on how to add a 3rd party javascript package on a default UserFrosting installation. The process is simple, but can be challenging to understand as most 3rd party package won't provides instructions for UserFrosting Webpack setup.  
+This recipe will guide you on how to add a 3rd party javascript package on a default UserFrosting installation. The process is simple, but can be challenging to understand as most 3rd party package won't provides instructions for UserFrosting Webpack setup.
 
 For this example, we will add [Dark Reader](https://www.npmjs.com/package/darkreader) to the UserFrosting Skeleton. Dark Reader is designed to analyze web pages and generate a dark mode for any website. To enable it, we simply need to load it with the package manager, create a script which will initialize Dark Reader and finally register a new entrypoint.
 
@@ -18,12 +18,12 @@ For this example, we will add [Dark Reader](https://www.npmjs.com/package/darkre
 
 First thing to do is add a new dependency. The important point here is since Dark Reader is a **frontend** dependency, we won't load it with Composer. Composer is dedicated to PHP, or **backend** dependencies. Instead, we will use the **N**ode **P**acakge **M**anager, or **NPM**.
 
-From the command line, run : 
+From the command line, run :
 ```bash
 $ npm i darkreader --save
 ```
 
-This will add the following line to your `package.json` and load to `node_modules` : 
+This will add the following line to your `package.json` and load to `node_modules` :
 ```json
 "dependencies": {
     "@userfrosting/sprinkle-admin": "~5.1.0",
@@ -40,15 +40,15 @@ One big difference with traditional website, each file referenced as a Webpack e
 
 This is important, as a module doesn't work the same a traditional javascript file, also known as **browser JavaScript**. One big difference between Node.js modules and browser JavaScript is how one script's code is accessed from another script's code.
 
-The difference can be explained as [this StackOverflow answer](https://stackoverflow.com/a/9901097/445757) does : 
+The difference can be explained as [this StackOverflow answer](https://stackoverflow.com/a/9901097/445757) does :
 
 > In browser JavaScript, scripts are added via the `<script>` element. When they execute, they all have direct access to the global scope, a "shared space" among all scripts. Any script can freely define/modify/remove/call anything on the global scope.
 
 > In Node.js, each **module** has its own scope. A module cannot directly access things defined in another module unless it chooses to expose them. To expose things from a module, they must be assigned to exports or module.exports. For a module to access another module's exports or module.exports, it must use `require()`.
 
-The `require()` function is a built-in CommonJS module function supported in Node.js that lets you include modules within your project. We already use it to include the `theme-adminlte` main module, this time we'll use it to include the Dark Reader main module. 
+The `require()` function is a built-in CommonJS module function supported in Node.js that lets you include modules within your project. We already use it to include the `theme-adminlte` main module, this time we'll use it to include the Dark Reader main module.
 
-In the default `app.js` main entry point, add the following code at the bottom : 
+In the default `app.js` main entry point, add the following code at the bottom :
 
 `app/assets/app.js`
 ```js
@@ -61,7 +61,7 @@ const DarkReader = require('darkreader/darkreader');
 DarkReader.enable();
 ```
 
-Since we changed a JavaScript file, we need to rebuilt the assets : 
+Since we changed a JavaScript file, we need to rebuilt the assets :
 ```bash
 $ php bakery assets:build
 ```
@@ -74,7 +74,7 @@ Refresh the page, and you should see the default page in a beautiful dark mode !
 
 Right now, the code is directly in the main entry point. While it works for now, as your code grows, it will be more difficult to maintain. By moving your custom code to a dedicated module, it also help with *separation of concerns*. Each task in it's own module !
 
-For this example, let's move the code previously added to `app/assets/app.js` to a new `app/assets/darkreader.js` file. 
+For this example, let's move the code previously added to `app/assets/app.js` to a new `app/assets/darkreader.js` file.
 
 `app/assets/darkreader.js`
 ```js
@@ -96,7 +96,7 @@ require('@userfrosting/theme-adminlte');
 require('./darkreader.js')
 ```
 
-Again, since we changed a JavaScript file, we need to rebuilt the assets : 
+Again, since we changed a JavaScript file, we need to rebuilt the assets :
 ```bash
 $ php bakery assets:build
 ```
@@ -105,7 +105,7 @@ Refresh the page, the dark mode should still be applied.
 
 ## Adding a toggle
 
-At this point, Dark Reader will be enabled by default on every page. Wouldn't it be nice to have a toggle button for it? 
+At this point, Dark Reader will be enabled by default on every page. Wouldn't it be nice to have a toggle button for it?
 
 First order of business, we need to add the toggle button to the navbars. Yes, plurals. UserFrosting default theme has a dedicated navbar for the dashboard layout as well as the standard layout!
 
@@ -164,13 +164,13 @@ function toggleDarkMode() {
 }
 
 // Init when document is ready
-$(function() { 
+$(function() {
     // Init event listener for button
     $('.darkmode-btn').on( "click", function() {
         toggleDarkMode();
     });
 
-    // Set initial state as saved in local storage 
+    // Set initial state as saved in local storage
     const enabled = localStorage.getItem('UF-DarkMode-enabled');
     if (enabled === "true") { DarkReader.enable(); }
 });
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/01.base-setup/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/01.base-setup/docs.md
index d971f08d..e1489d66 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/01.base-setup/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/01.base-setup/docs.md
@@ -16,7 +16,7 @@ Make sure the default skeleton app is working. Once the base website is created
 
 ## The Route Class
 
-We can create the [route definition](routes-and-controllers) for the `/pastries` page. We'll *edit* the default `app/src/MyRoutes.php` file. 
+We can create the [route definition](routes-and-controllers) for the `/pastries` page. We'll *edit* the default `app/src/MyRoutes.php` file.
 
 **app/src/MyRoutes.php**:
 ```php
@@ -77,7 +77,7 @@ class PastriesPageAction
 }
 ```
 
-For now, the pastries array is empty. In the next page, we'll replace this empty array with a database model. 
+For now, the pastries array is empty. In the next page, we'll replace this empty array with a database model.
 
 ## The Template File
 
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/02.database/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/02.database/docs.md
index c520fd6e..3d607089 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/02.database/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/02.database/docs.md
@@ -187,14 +187,14 @@ class PastriesTable extends Migration
 
 ## Registering the migration and seed in the sprinkle recipe
 
-We also need to tell our Recipe that it will be providing migrations and seeds. To do so, your recipe class must implement, on top of `SprinkleRecipe`, `UserFrosting\Sprinkle\Core\Sprinkle\Recipe\MigrationRecipe` and `use UserFrosting\Sprinkle\Core\Sprinkle\Recipe\SeedRecipe`. 
+We also need to tell our Recipe that it will be providing migrations and seeds. To do so, your recipe class must implement, on top of `SprinkleRecipe`, `UserFrosting\Sprinkle\Core\Sprinkle\Recipe\MigrationRecipe` and `use UserFrosting\Sprinkle\Core\Sprinkle\Recipe\SeedRecipe`.
 
-We'll then list our migration in the `getMigrations()` method, and our seed in the `getSeeds()` method. 
+We'll then list our migration in the `getMigrations()` method, and our seed in the `getSeeds()` method.
 
 > [!NOTE]
 > Note the seed can still work if it's not registered because we're calling it directly in the migration. However, if the seed is not registered, it won't show up when running `php bakery seed`.
 
-The **MyApp** recipe should now look like this : 
+The **MyApp** recipe should now look like this :
 
 **app/src/MyApp.php**
 ```php
@@ -211,8 +211,8 @@ use UserFrosting\Sprinkle\Pastries\Database\Seeds\DefaultPastries; // <-- Add he
 use UserFrosting\Sprinkle\SprinkleRecipe;
 use UserFrosting\Theme\AdminLTE\AdminLTE;
 
-class MyApp implements 
-    SprinkleRecipe, 
+class MyApp implements
+    SprinkleRecipe,
     MigrationRecipe, // <-- Add here !
     SeedRecipe // <-- Add here !
 {
@@ -239,12 +239,12 @@ class MyApp implements
             DefaultPastries::class, // <-- Add this block
         ];
     }
-    
+
     // ...
 }
 ```
 
-We are now ready to run our migration. From the command line, use the [Bakery migrate command](cli/commands#migrate) to run the migration up: 
+We are now ready to run our migration. From the command line, use the [Bakery migrate command](cli/commands#migrate) to run the migration up:
 
 ```bash
 $ php bakery migrate
@@ -260,13 +260,13 @@ Now it's time to go back to our controller and fetch the data from our new datab
 use UserFrosting\Sprinkle\Pastries\Database\Models\Pastries;
 ```
 
-Now that we've defined this convenient alias for our model, it's time to interact with it and select all the available rows. Replace : 
+Now that we've defined this convenient alias for our model, it's time to interact with it and select all the available rows. Replace :
 
 ```php
 $pastries = [];
 ```
 
-With : 
+With :
 ```php
 $pastries = Pastry::all();
 ```
@@ -274,11 +274,11 @@ $pastries = Pastry::all();
 > [!NOTE]
 > Fetching all the available rows is not an ideal solution since, in production, it can involve an arbitrarily large number of rows. This can clutter the UI, providing poor user experience, and can also result in poor performance (slow page generation, high server resource usage). It is recommended to use AJAX and [**Sprunging**](database/data-sprunjing) to display paginated data in this situation.
 
-The `$pastries` variable should now contains an [Eloquent Collection](https://laravel.com/docs/8.x/eloquent-collections) of `Pastry` objects. 
+The `$pastries` variable should now contains an [Eloquent Collection](https://laravel.com/docs/8.x/eloquent-collections) of `Pastry` objects.
 
 ### Debugging
 
-At this point, it's a good idea to use [**debugging**](troubleshooting/debugging#debug-statements) to make sure everything works as it should. We'll use the `DebugLogger` service to do so. 
+At this point, it's a good idea to use [**debugging**](troubleshooting/debugging#debug-statements) to make sure everything works as it should. We'll use the `DebugLogger` service to do so.
 
 Start by adding the facade class to the usage declaration of your class:
 
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/06.custom-namespace/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/06.custom-namespace/docs.md
index 9f94c305..48a5ba04 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/06.custom-namespace/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/06.custom-namespace/docs.md
@@ -6,7 +6,7 @@ wip: true
 
 ## Custom Namespace
 
-The default namespace provided in the Skeleton, `UserFrosting\App\{Path}`, can easily be changed in your app. 
+The default namespace provided in the Skeleton, `UserFrosting\App\{Path}`, can easily be changed in your app.
 
 Previous version of UserFrosting required a strict namespace (`UserFrosting\Sprinkle\{SprinkleName}\{Path}`). Starting with UserFrosting 5, the namespace can be whatever you want. It doesn't event need to include **UserFrosting** or **Sprinkle**. It *can* still be like this, but it could also be `YourName/YourApp/{Path}` or `App/{Path}`.
 
@@ -14,7 +14,7 @@ In this example, we'll replace the default namespace for `UserFrosting\Sprinkle\
 
 ### composer.json
 
-First thing to do is to replace the namespace in your `composer.json` in **autoload** and **autoload-dev**: 
+First thing to do is to replace the namespace in your `composer.json` in **autoload** and **autoload-dev**:
 
 **composer.json**:
 ```json
@@ -32,7 +32,7 @@ First thing to do is to replace the namespace in your `composer.json` in **autol
 // ...
 ```
 
-Now we need to update **Composer** so our new [PSR4 mapping](http://www.php-fig.org/psr/psr-4/#3-examples) is picked up. From the command line, run in the **root directory** of your UserFrosting project: 
+Now we need to update **Composer** so our new [PSR4 mapping](http://www.php-fig.org/psr/psr-4/#3-examples) is picked up. From the command line, run in the **root directory** of your UserFrosting project:
 
 ```bash
 $ composer update
@@ -40,7 +40,7 @@ $ composer update
 
 ### Class reference
 
-You can now find and replace every reference of `UserFrosting\App\` for `UserFrosting\Sprinkle\Pastries` in your classes. Don't forget that you'll need to replace it in : 
+You can now find and replace every reference of `UserFrosting\App\` for `UserFrosting\Sprinkle\Pastries` in your classes. Don't forget that you'll need to replace it in :
 
 - Namespace at the top of every classes (`namespace UserFrosting\App\{...};` -> `namespace UserFrosting\Sprinkle\Pastries\{...};`);
 - Every class importation (`use UserFrosting\App\{...};` -> `use UserFrosting\Sprinkle\Pastries\{...};`);
@@ -169,7 +169,7 @@ class MyApp implements SprinkleRecipe, MigrationRecipe, SeedRecipe
 ```
 
 ### Routes
-One caveat of removing the default Skeleton pages, the index page won't exist anymore. Your app won't have an entry page (eg. https://yourapp/) and an error will be thrown. One way to get around this problem is to replace the default routes with a redirect, from `/` to the `/dashboard`. For example : 
+One caveat of removing the default Skeleton pages, the index page won't exist anymore. Your app won't have an entry page (eg. https://yourapp/) and an error will be thrown. One way to get around this problem is to replace the default routes with a redirect, from `/` to the `/dashboard`. For example :
 
 **app/src/MyRoutes.php**:
 ```php
diff --git a/app/pages/6.0/22.upgrading/01.51-to-60/01.changelog/docs.md b/app/pages/6.0/22.upgrading/01.51-to-60/01.changelog/docs.md
index 133bfac1..1abaae05 100644
--- a/app/pages/6.0/22.upgrading/01.51-to-60/01.changelog/docs.md
+++ b/app/pages/6.0/22.upgrading/01.51-to-60/01.changelog/docs.md
@@ -29,7 +29,7 @@ userfrosting/theme-adminlte     (AdminLTE Theme)
 userfrosting/monorepo           (Everything)
 ```
 
-**Impact**: 
+**Impact**:
 - Simpler dependency management
 - Consistent versioning across all components
 - Easier development and contribution workflow
diff --git a/app/pages/6.0/22.upgrading/01.51-to-60/02.guide/docs.md b/app/pages/6.0/22.upgrading/01.51-to-60/02.guide/docs.md
index 90ac7c0a..693da371 100644
--- a/app/pages/6.0/22.upgrading/01.51-to-60/02.guide/docs.md
+++ b/app/pages/6.0/22.upgrading/01.51-to-60/02.guide/docs.md
@@ -582,7 +582,7 @@ php bakery cache:clear-routes
 
 **Symptom**: Vite can't find imported modules
 
-**Solution**: 
+**Solution**:
 ```bash
 # Clear node_modules and reinstall
 rm -rf node_modules package-lock.json

From 80544c521f73492589db5f54326f246e6ae066f4 Mon Sep 17 00:00:00 2001
From: Louis Charette <charette.louis@gmail.com>
Date: Sat, 31 Jan 2026 21:43:26 -0500
Subject: [PATCH 12/13] Fix path switch up

---
 .github/copilot-instructions.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index c9f8a323..954beb03 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -73,14 +73,14 @@ All code snippets should use triple backticks with language specified for syntax
 
 ### Images and Links
 
-**CRITICAL - Image Paths**: Images are stored in `app/pages/{version}/images` alongside the markdown files, and **MUST always use absolute paths starting with `/`**. 
-- ✅ Correct: `![Alt text](/images/screenshot.png)`
-- ❌ Wrong: `![Alt text](images/screenshot.png)` or `![Alt text](../images/screenshot.png)`
+**CRITICAL - Image Paths**: Images are stored in `app/pages/{version}/images` alongside the markdown files, and **MUST always use a path relative to the version folder, _without_ a starting `/`**. 
+- ✅ Correct: `![Alt text](images/screenshot.png)`
+- ❌ Wrong: `![Alt text](/images/screenshot.png)` or `![Alt text](../images/screenshot.png)`
 Images should be checked to ensure the file exists at the specified path.
 
-Internal links should use absolute paths without version numbers to allow automatic version switching.
-- ✅ Correct: `[Requirements](/installation/requirements)`
-- ❌ Wrong: `[Requirements](installation/requirements)` or `[Requirements](/04.installation/01.requirements)`
+Internal links should use relative paths to the version folder, without version numbers to allow automatic version switching.
+- ✅ Correct: `[Requirements](installation/requirements)`
+- ❌ Wrong: `[Requirements](/installation/requirements)` or `[Requirements](04.installation/01.requirements)`
 
 Pages have anchor links for sections (e.g., `#motivation`). Ensure links point to existing sections.
 

From f3a33e872a40084341fc49dd5a15599517d95da2 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 1 Feb 2026 02:52:09 +0000
Subject: [PATCH 13/13] Fix image paths and internal links to use relative
 paths instead of absolute

Co-authored-by: lcharette <2566513+lcharette@users.noreply.github.com>
---
 app/pages/6.0/01.quick-start/docs.md          |  4 +--
 .../6.0/02.background/01.introduction/docs.md |  2 +-
 .../04.dont-reinvent-the-wheel/docs.md        |  2 +-
 .../01.server-misconfiguration/docs.md        |  2 +-
 app/pages/6.0/02.background/06.seo/docs.md    |  2 +-
 .../01.native/02.install/docs.md              | 14 ++++-----
 .../02.environment/02.docker/docs.md          |  2 +-
 .../05.troubleshooting/01.debugging/docs.md   | 18 +++++------
 .../02.getting-help/docs.md                   |  2 +-
 .../6.0/06.sprinkles/04.customize/docs.md     |  8 ++---
 .../06.client-input/01.validation/docs.md     |  8 ++---
 .../6.0/10.users/01.user-accounts/docs.md     | 28 ++++++++---------
 .../6.0/10.users/04.activity-logging/docs.md  |  2 +-
 .../01.introduction/docs.md                   |  4 +--
 .../02.getting-started/docs.md                |  4 +--
 .../03.vite-configuration/docs.md             |  6 ++--
 .../04.vue-framework/docs.md                  |  4 +--
 .../05.using-assets/docs.md                   |  2 +-
 .../06.advanced/01.sprinkle-assets/docs.md    |  4 +--
 .../06.advanced/02.migration/docs.md          |  2 +-
 .../13.asset-management/06.advanced/docs.md   |  2 +-
 .../07.webpack-encore/01.basic-usage/docs.md  |  6 ++--
 .../02.asset-bundles/docs.md                  |  6 ++--
 .../07.webpack-encore/03.advance-use/docs.md  |  6 ++--
 .../07.webpack-encore/docs.md                 |  6 ++--
 .../6.0/14.database/05.data-sprunjing/docs.md |  8 ++---
 app/pages/6.0/17.i18n/01.introduction/docs.md | 18 ++++-------
 .../6.0/18.advanced/07.alert-stream/docs.md   |  2 +-
 .../20.recipes/04.custom-login-page/docs.md   | 24 +++++++--------
 .../05.changing-user-permissions/docs.md      |  8 ++---
 .../6.0/20.recipes/06.external-js/docs.md     | 30 +++++++++----------
 .../01.base-setup/docs.md                     |  6 ++--
 .../07.advanced-tutorial/02.database/docs.md  | 24 +++++++--------
 .../03.adding-menu/docs.md                    |  2 +-
 .../04.custom-permissions/docs.md             |  6 ++--
 .../05.localization/docs.md                   |  2 +-
 .../6.0/21.going-live/01.hosting/docs.md      |  2 +-
 .../21.going-live/02.mail-providers/docs.md   |  2 +-
 38 files changed, 135 insertions(+), 145 deletions(-)

diff --git a/app/pages/6.0/01.quick-start/docs.md b/app/pages/6.0/01.quick-start/docs.md
index 63acbc2a..de69bcd0 100644
--- a/app/pages/6.0/01.quick-start/docs.md
+++ b/app/pages/6.0/01.quick-start/docs.md
@@ -8,7 +8,7 @@ UserFrosting is a free, open-source jumping-off point for building user-centered
 > [!NOTE]
 > This quick start guide is aimed at experienced PHP developers who already have a development environment set up. If that's not your case, head over to the [First Chapter](background) to start your journey.
 
-> [!IMPORTANT]
+> [!IMPORTANT] 
 > This is the documentation for **UserFrosting 6**. If you are looking for documentation for _UserFrosting 5_, [click here](https://learn.userfrosting.com/5.1/).
 
 ## Requirements
@@ -60,7 +60,7 @@ You can now access UserFrosting at: [http://localhost:8080](http://localhost:808
 
 At this point, you should be able to access your application. You should see the default front page:
 
-![Basic front page of a UserFrosting installation](/images/front-page.png)
+![Basic front page of a UserFrosting installation](images/front-page.png)
 
 ## What's Next
 
diff --git a/app/pages/6.0/02.background/01.introduction/docs.md b/app/pages/6.0/02.background/01.introduction/docs.md
index a41ed367..9e6200a6 100644
--- a/app/pages/6.0/02.background/01.introduction/docs.md
+++ b/app/pages/6.0/02.background/01.introduction/docs.md
@@ -9,7 +9,7 @@ The PHP community has evolved considerably over the past two decades, beginning
 
 This breakneck pace has caused a lot of people to get left behind. For someone who hasn't been doing web development continuously for the past decade or more, it can feel like an overwhelming task to get acquainted with all of the new tools and frameworks that seem to be coming out every day. Relevant comic from [Abstruse Goose](http://abstrusegoose.com/503):
 
-![BlooP and FlooP and GlooP](/images/theoretical_mathematics_however_never_goes_out_of_fashion.png)
+![BlooP and FlooP and GlooP](images/theoretical_mathematics_however_never_goes_out_of_fashion.png)
 
 The problem is that when you're a busy developer with real-world projects to work on, it's very difficult to set aside time to read a book about technology X - especially when you're not even sure that you really _need_ to learn X!
 
diff --git a/app/pages/6.0/02.background/04.dont-reinvent-the-wheel/docs.md b/app/pages/6.0/02.background/04.dont-reinvent-the-wheel/docs.md
index 25866870..78aa0823 100644
--- a/app/pages/6.0/02.background/04.dont-reinvent-the-wheel/docs.md
+++ b/app/pages/6.0/02.background/04.dont-reinvent-the-wheel/docs.md
@@ -6,7 +6,7 @@ wip: true
 
 I think that for a lot of developers - novices and professionals alike - building on top of others' work can seem like a betrayal of our trade. We're not "real" developers unless we built everything with our bare hands from scratch, and know firsthand the nitty-gritty details of how our code works. With third-party components, we have to take time to actually *learn* how to use them, and follow *their* rules. I get it. It all feels so antithetical to the DIY spirit that got so many of us into coding in the first place. Trust me, as someone who built a cold frame out of some doors and framing I found in the dumpster, I know:
 
-![DIY cold frame](/images/cold-frame.jpg?resize=500)
+![DIY cold frame](images/cold-frame.jpg?resize=500)
 
 However unlike me with with my cold frame, software developers aren't limited by the contents of their local dumpster. With the advent of Composer, the PHP community abounds with free, high-quality third-party packages for pretty much every task imaginable. The trick is to know *which* packages to use, and to avoid getting overwhelmed.
 
diff --git a/app/pages/6.0/02.background/05.security/01.server-misconfiguration/docs.md b/app/pages/6.0/02.background/05.security/01.server-misconfiguration/docs.md
index 19128d9b..9355f65b 100644
--- a/app/pages/6.0/02.background/05.security/01.server-misconfiguration/docs.md
+++ b/app/pages/6.0/02.background/05.security/01.server-misconfiguration/docs.md
@@ -10,7 +10,7 @@ Many PHP developers are used to seeing server-side error messages and stack trac
 
 This is fine in development, and it makes the development cycle tighter by providing immediate feedback to the developer with a simple page refresh or click of a button. However in production (live server), this can lead to serious security breaches:
 
-![Mysql password dumped to browser in PHP](/images/display-errors-on.png)
+![Mysql password dumped to browser in PHP](images/display-errors-on.png)
 
 The lesson here is that code can contain sensitive information that we do not want to share with the end user - for example, passwords and API keys. If something goes wrong with the database connection code, it will generate a stack trace that contains the database credentials. By dumping this trace into the response, your application is risking making this information public.
 
diff --git a/app/pages/6.0/02.background/06.seo/docs.md b/app/pages/6.0/02.background/06.seo/docs.md
index d5d68342..1e4eb127 100644
--- a/app/pages/6.0/02.background/06.seo/docs.md
+++ b/app/pages/6.0/02.background/06.seo/docs.md
@@ -29,7 +29,7 @@ Google can tell when you're copying content from another page. When it sees copi
 
 Having lots of words on a page gives Google more to work with when it determines how relevant that page is. While you may not _need_ a lot of words to get your point across, it signals to search engines that your pages' contents have real value. At the same time, you need to avoid [keyword stuffing](https://en.wikipedia.org/wiki/Keyword_stuffing) - putting an unnatural number of keywords in your content in an attempt to game the ranking algorithm. This used to work in the past, but nowadays search engines will detect and penalize you if every other sentence is "Garden shed painting."
 
-![Real world SEO](/images/real-world-seo.png)
+![Real world SEO](images/real-world-seo.png)
 
 To summarize, you need to write the text of your pages so that they have a healthy balance of your target keywords without appearing overly spammy. You _do_ know what your target keywords are, right?
 
diff --git a/app/pages/6.0/04.installation/02.environment/01.native/02.install/docs.md b/app/pages/6.0/04.installation/02.environment/01.native/02.install/docs.md
index e10db2cb..8f3062a2 100644
--- a/app/pages/6.0/04.installation/02.environment/01.native/02.install/docs.md
+++ b/app/pages/6.0/04.installation/02.environment/01.native/02.install/docs.md
@@ -17,7 +17,7 @@ composer create-project userfrosting/userfrosting UserFrosting "^5.1"
 > [!TIP]
 > Note the `UserFrosting` at the end of the command. This means `composer` will create new `UserFrosting` subdirectory inside the current location. You can change `UserFrosting` to whatever you like.
 
-This may take some time to complete. If Composer has completed successfully, you should see that a `vendor/` directory has been created. This `vendor/` directory contains all of UserFrosting's PHP dependencies - there should be nearly 30 subdirectories in here!
+This may take some time to complete. If Composer has completed successfully, you should see that a `vendor/` directory has been created. This `vendor/` directory contains all of UserFrosting's PHP dependencies - there should be nearly 30 subdirectories in here! 
 
 Next the **Bakery** will execute it's magic. You'll have to answer some questions, which will guide you into the configuration process. These will help you set up the **database** credentials, create the first **admin user** and install the third-party **assets**.
 
@@ -29,8 +29,8 @@ Next the **Bakery** will execute it's magic. You'll have to answer some question
 
 You will first be prompted for your database credentials. This is the information PHP needs to connect to your database. If you followed our guide to setup, you can select **SQLite** and the default path when asked. If PHP can't connect to your database using these credentials, make sure you have entered the right information and re-run the `bake` command.
 
-Bakery will also prompt you for SMTP credentials, so that UserFrosting can send emails for activating new accounts and setting and resetting passwords.
-If you're using **Mailpit** or **Mailtrap**, you can select "SMTP" and enter the appropriate info. If you are not ready to set up email at this time, you can choose _No email support_ to skip SMTP configuration, however you'll get error when trying to register a new account.
+Bakery will also prompt you for SMTP credentials, so that UserFrosting can send emails for activating new accounts and setting and resetting passwords. 
+If you're using **Mailpit** or **Mailtrap**, you can select "SMTP" and enter the appropriate info. If you are not ready to set up email at this time, you can choose _No email support_ to skip SMTP configuration, however you'll get error when trying to register a new account. 
 
 If the database connection is successful, the installer will then check that the basic dependencies are met. If so, the installer will run the _migrations_ to populate your database with new tables. During this process, you will be prompted for some information to set up the master account (first user). Finally, the installer will run the command to fetch javascript dependencies and build the assets.
 
@@ -42,15 +42,15 @@ If the database connection is successful, the installer will then check that the
 
 ## Serve and visit your website
 
-At this point you can run locally using the PHP Built-in server :
+At this point you can run locally using the PHP Built-in server : 
 
 ```bash
 php bakery serve
 ```
 
-You can now access UserFrosting at [http://localhost:8080](http://localhost:8080). You should see the default UserFrosting pages and login with the newly created master account.
+You can now access UserFrosting at [http://localhost:8080](http://localhost:8080). You should see the default UserFrosting pages and login with the newly created master account. 
 
-![Basic front page of a UserFrosting installation](/images/front-page.png)
+![Basic front page of a UserFrosting installation](images/front-page.png)
 
 > [!TIP]
 > To stop the server, hit `ctrl+c`.
@@ -59,7 +59,7 @@ You can now access UserFrosting at [http://localhost:8080](http://localhost:8080
 
 It will help us a lot if you could star [the UserFrosting project on GitHub](https://github.com/userfrosting/UserFrosting). Just look for the button in the upper right-hand corner!
 
-[![How to star](/images/how-to-star.png)](https://github.com/userfrosting/UserFrosting)
+[![How to star](images/how-to-star.png)](https://github.com/userfrosting/UserFrosting)
 
 You should also follow us on Twitter for real-time news and updates:
 
diff --git a/app/pages/6.0/04.installation/02.environment/02.docker/docs.md b/app/pages/6.0/04.installation/02.environment/02.docker/docs.md
index fd394348..61e68c9d 100644
--- a/app/pages/6.0/04.installation/02.environment/02.docker/docs.md
+++ b/app/pages/6.0/04.installation/02.environment/02.docker/docs.md
@@ -86,7 +86,7 @@ Now visit [http://localhost:8080](http://localhost:8080) to see your UserFrostin
 
 You should see the default UserFrosting pages and be able to log in with the newly created admin account.
 
-![Basic front page of a UserFrosting installation](/images/front-page.png)
+![Basic front page of a UserFrosting installation](images/front-page.png)
 
 To stop the containers, run:
 
diff --git a/app/pages/6.0/05.troubleshooting/01.debugging/docs.md b/app/pages/6.0/05.troubleshooting/01.debugging/docs.md
index cb133405..b7f73fa1 100644
--- a/app/pages/6.0/05.troubleshooting/01.debugging/docs.md
+++ b/app/pages/6.0/05.troubleshooting/01.debugging/docs.md
@@ -19,17 +19,17 @@ To open the console in Firefox, use the following shortcuts:
  - Windows: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd>
  - MacOS: <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd>
 
-![Firefox developer tools](/images/firefox-console-1.png)
+![Firefox developer tools](images/firefox-console-1.png)
 
 The tool panel will open (usually docked at the bottom) and you'll notice some tabs at the top of this panel: **Inspector**, **Console**, **Debugger**, **Style Editor**, **Performance**, **Network**, and **Settings**. By default, the Console tab should be selected (if not, click it).
 
-![Firefox developer tools - Console tab](/images/firefox-console-2.png)
+![Firefox developer tools - Console tab](images/firefox-console-2.png)
 
 Underneath that, you'll probably see a long list of URLs. These are the requests that your web browser has made so far. To the left of each URL is the request method (GET, POST, PUT, DELETE, etc). To the right is the server response summary. For example, the server responded **HTTP/1.1 200 OK** for the request to **http://localhost/userfrosting/public/alerts**. The status code **200** is used to mean that the request completed "successfully". "Success" is something that your server defines - it's just a way for the server to tell your browser that everything went as expected and that it doesn't need to do anything else.
 
 If you click the response summary, Firefox will open the **Network** tab and show you more details about the request:
 
-![Firefox developer tools - Network tab](/images/firefox-console-3.png)
+![Firefox developer tools - Network tab](images/firefox-console-3.png)
 
 To the right, you'll see tabs for **Headers**, **Cookies**, **Params**, **Response**, and **Timings**. If you scroll down in the Headers tab, you'll see a list of the request and response headers. The request headers contain metadata sent with a particular request, and contain information about your browser, the contents of any cookies for the site, and other information. The response headers contain metadata returned by the server for that request. This can include information like cookies that the site wants the client to store or update, as well as things like the type of content (HTML, image, CSS, JSON, etc) being returned.
 
@@ -37,13 +37,13 @@ The **Cookies** tab just displays the contents of any cookie headers in a more e
 
 #### Params tab
 
-![Firefox developer tools - Params tab](/images/firefox-console-4.png)
+![Firefox developer tools - Params tab](images/firefox-console-4.png)
 
 **Params** shows any data sent in the *body* of the request. **This is extremely useful for debugging client-side code.** Often times, a web application appears to "not work" because the server isn't actually being sent the data it expected. The **Params** tab is a good way to check the actual data that was sent with a particular request.
 
 #### Response tab
 
-![Firefox developer tools - Response tab](/images/firefox-console-5.png)
+![Firefox developer tools - Response tab](images/firefox-console-5.png)
 
 The **Response** tab shows the data sent in the *body* of the response. For requests to a URL representing a web page (like the URL in your browser's navigation bar), the response body simply contains the actual HTML returned from the server, that your browser initially renders. For other requests, it could contain images, Javascript, or structured data in some other format. For example in the request shown above, the response contains structured JSON data representing a list of users currently registered with the application.
 
@@ -100,7 +100,7 @@ For example, we can use it to inspect the contents of a JSON object returned by
 
 Now, when we do something that triggers this request, the `console.log` statement will print the contents of the variable `data` to the browser console:
 
-![Firefox developer tools - Debug print statement](/images/firefox-console-6.png)
+![Firefox developer tools - Debug print statement](images/firefox-console-6.png)
 
 As you can see in the last line of the console output, `data` is an array containing Javascript objects. If we click on "Object", a panel opens to the right that displays the contents of that object.
 
@@ -114,7 +114,7 @@ UserFrosting uses a sophisticated error-handling system to capture exceptions th
 
 By default _in development mode only_, UserFrosting will show a detailed debugging page that contains a full stack trace. For example:
 
-![Sample debug error page](/images/debug-page.png)
+![Sample debug error page](images/debug-page.png)
 
 This page will also show you the contents of your request, the current session variables, and your server/environment variables. For [obvious reasons](background/security/server-misconfiguration), this debugging page is disabled in production.
 
@@ -218,7 +218,7 @@ We can also arbitrarily send manual debugging messages to `app/logs/userfrosting
 #[\DI\Attribute\Inject]
 protected DebugLoggerInterface $logger;
 
-// ...
+// ... 
 
 $this->logger->debug("Fetching owls from database...");
 $this->logger->debug("Owls found:", $owls);
@@ -272,7 +272,7 @@ The best approach is to develop your API in isolation from the page or widget th
 
 As it turns out, you can visit `/api/members` _directly in your browser_, and it will show you the output of the data source! Since **visiting a page in your browser is equivalent to making a GET request**, you can append query strings as well:
 
-![Directly viewing the output of a JSON API](/images/debug-api.png)
+![Directly viewing the output of a JSON API](images/debug-api.png)
 
 Make sure you get the data API itself working properly and producing the kind of output you expect, before you fiddle with the page and/or Javascript that is consuming the API.
 
diff --git a/app/pages/6.0/05.troubleshooting/02.getting-help/docs.md b/app/pages/6.0/05.troubleshooting/02.getting-help/docs.md
index 370de99b..f5b1c43c 100644
--- a/app/pages/6.0/05.troubleshooting/02.getting-help/docs.md
+++ b/app/pages/6.0/05.troubleshooting/02.getting-help/docs.md
@@ -48,7 +48,7 @@ Check [Stack Overflow](http://stackoverflow.com/tags/userfrosting) and the [issu
 
 Markdown is the _de facto_ standard for basic text formatting on the web. If you are unfamiliar with Markdown, please [take a few minutes to learn](https://guides.github.com/features/mastering-markdown/#what). It will help you all over the web! In particular, please make sure you know where the **backtick** key (`) is located on your keyboard:
 
-![Location of backtick key](/images/backtick.png)
+![Location of backtick key](images/backtick.png)
 
 ##### Inline code
 
diff --git a/app/pages/6.0/06.sprinkles/04.customize/docs.md b/app/pages/6.0/06.sprinkles/04.customize/docs.md
index 868d590d..5811a035 100644
--- a/app/pages/6.0/06.sprinkles/04.customize/docs.md
+++ b/app/pages/6.0/06.sprinkles/04.customize/docs.md
@@ -17,7 +17,7 @@ The most important part to edit here is the Namespace. The namespace tells Compo
 > [!NOTE]
 > Compared to previous version of UserFrosting, **starting from UserFrosting 5**, the namespace isn't strict anymore. There's no more convention to follow.
 
-The namespace is defined in the `composer.json` file in the base directory of your sprinkle. The default file looks like this :
+The namespace is defined in the `composer.json` file in the base directory of your sprinkle. The default file looks like this : 
 
 Original **composer.json**
 ```json
@@ -82,7 +82,7 @@ Original **composer.json**
 }
 ```
 
-Let's change thing up. All the metadata can be customized to reflect your project, and we'll define the new namespace to `Owlfancy\Site` :
+Let's change thing up. All the metadata can be customized to reflect your project, and we'll define the new namespace to `Owlfancy\Site` : 
 
 Modified **composer.json**
 ```json
@@ -149,7 +149,7 @@ $ composer update
 
 ### The recipe
 
-The next step is to update every reference of `UserFrosting\App` to `Owlfancy\Site`, in each PHP files inside `app/src/`. But there's one file that might require a bit more attention. The recipe, located in `app/src/MyApp.php` can be renamed to reflect your project. For example, we can rename it to `app/src/Owlfancy.php`. The class name should also be renamed to `Owlfancy`. We'll also edit the `getName()` method, to reflect our project name :
+The next step is to update every reference of `UserFrosting\App` to `Owlfancy\Site`, in each PHP files inside `app/src/`. But there's one file that might require a bit more attention. The recipe, located in `app/src/MyApp.php` can be renamed to reflect your project. For example, we can rename it to `app/src/Owlfancy.php`. The class name should also be renamed to `Owlfancy`. We'll also edit the `getName()` method, to reflect our project name : 
 
 ```php
 <?php
@@ -269,7 +269,7 @@ In `default.php`, add the following:
 
 This customizes some basic properties for our application - you can set your site title, author, author's URL, and timezone. Reload the page, and you should see the new site title appear in the upper left corner:
 
-![Overriding site settings in config file](/images/site-title.png)
+![Overriding site settings in config file](images/site-title.png)
 
 The template for this page dynamically pulls that particular piece of text from your new configuration file. Note that your value for `site.title` overrides the value of `site.title` in the core sprinkle's configuration file.
 
diff --git a/app/pages/6.0/08.routes-and-controllers/06.client-input/01.validation/docs.md b/app/pages/6.0/08.routes-and-controllers/06.client-input/01.validation/docs.md
index 6334ddb0..0757643a 100644
--- a/app/pages/6.0/08.routes-and-controllers/06.client-input/01.validation/docs.md
+++ b/app/pages/6.0/08.routes-and-controllers/06.client-input/01.validation/docs.md
@@ -30,7 +30,7 @@ UserFrosting Fortress solves this problem by providing a uniform interface for v
 
 This process is summarized in the following flowchart:
 
-![Flowchart for unified client- and server-side validation.](/images/flowchart-fortress.png?resize=800,600)
+![Flowchart for unified client- and server-side validation.](images/flowchart-fortress.png?resize=800,600)
 
 ### Creating a Schema
 
@@ -368,7 +368,7 @@ screech:
 > Regular expressions should _not_ be wrapped in quotes in YAML. Also the jQuery Validation plugin wraps regular expressions on the client side with `^...$`. Please see [this issue](https://github.com/jquery-validation/jquery-validation/issues/1967).
 
 ### Input arrays, multidimensional arrays & associative arrays
-If your form uses [input arrays](https://stackoverflow.com/a/42969920/445757) such as `<input name='nameList[]'...`, you can reference the array itself in your validation schema as `nameList` and each element of the array as `nameList.*`. This can be useful with dynamic form with a variable or unknown number of input of the same nature. For example, a list of names :
+If your form uses [input arrays](https://stackoverflow.com/a/42969920/445757) such as `<input name='nameList[]'...`, you can reference the array itself in your validation schema as `nameList` and each element of the array as `nameList.*`. This can be useful with dynamic form with a variable or unknown number of input of the same nature. For example, a list of names : 
 
 ```html
 <input name="nameList[]" type="text" />
@@ -409,7 +409,7 @@ nameList.*:
   - trim
 ```
 
-However, with associative arrays, this is useful if different rules are required for each associations. For example, the schema below will apply the `purge` transformation to `nameList.*.first` only, `escape` will be only apply to `nameList.*.last`, but `trim` will be applied to both.
+However, with associative arrays, this is useful if different rules are required for each associations. For example, the schema below will apply the `purge` transformation to `nameList.*.first` only, `escape` will be only apply to `nameList.*.last`, but `trim` will be applied to both. 
 
 ```yaml
 nameList:
@@ -458,7 +458,7 @@ phoneList.*:
       message: The phone number you provided is not a valid US phone number.
 ```
 
-Please check [Valitron's usage directions](https://github.com/vlucas/valitron#usage) for more information on arrays and [multidimensional arrays](https://mattstauffer.com/blog/a-little-trick-for-grouping-fields-in-an-html-form/).
+Please check [Valitron's usage directions](https://github.com/vlucas/valitron#usage) for more information on arrays and [multidimensional arrays](https://mattstauffer.com/blog/a-little-trick-for-grouping-fields-in-an-html-form/). 
 
 Keep in mind, each field **not** in the schema will be removed from the transformed data by default. If your schema contains `nameList.*.first` and `nameList.*.last`, and the associative array / form contains an `email` key, it will be removed as the schema doesn't contains `nameList.*.email`.
 
diff --git a/app/pages/6.0/10.users/01.user-accounts/docs.md b/app/pages/6.0/10.users/01.user-accounts/docs.md
index 3b250213..d3c008aa 100644
--- a/app/pages/6.0/10.users/01.user-accounts/docs.md
+++ b/app/pages/6.0/10.users/01.user-accounts/docs.md
@@ -4,15 +4,11 @@ description: UserFrosting ships with everything you need to create user accounts
 wip: true
 ---
 
-Most web applications need user accounts—the ability for people to create profiles, sign in, and access personalized content or features. But building a secure, full-featured authentication system from scratch is surprisingly complex: password hashing, email verification, password reset flows, session management, account lockouts, role-based permissions... the list goes on.
-
-UserFrosting provides a **complete, production-ready user account system** right out of the box. Registration, login, email verification, password reset, user administration—it's all there, fully implemented and ready to use. You get professional-grade security features like bcrypt password hashing, CSRF protection, and rate limiting without writing a line of code.
-
-This page covers UserFrosting's account features, explains key terminology (authentication vs authorization), and shows you how to work with user data in your application.
+You were probably attracted to UserFrosting because you wanted to "make a site where users can sign in", or you already have a project in progress and your boss asked you to "put it behind a login," or you need to have some "protected pages." These are nontechnical terms. It will be easier for us to communicate if we first establish a common vocabulary, so that we can explain the concepts with more precision.
 
 ## Authentication and authorization
 
-Let's start with vocabulary to communicate precisely. The proper term for "signing in" or "logging in" is **authentication**. When a user has successfully logged in, we say that they are an **authenticated user**.
+The proper term for the process of "signing in" or "logging in" is **authentication**. When a user has successfully logged in, we say that they are an **authenticated user**.
 
 As we've [explained before](background/the-client-server-conversation), a web application is really a conversation between two agents with poor memory. When you have a feature or some part of your site that is only supposed to be accessible to authenticated users, the server needs to check that the client is who they say they are and that they've already successfully authenticated.
 
@@ -66,7 +62,7 @@ UserFrosting comes with two built-in mechanisms for creating new accounts: publi
 
 In many instances, you will want people to be able to register for your website or application through a publicly accessible page. By default, the registration form is available at `/account/register`.
 
-![Account registration form](/images/registration.png)
+![Account registration form](images/registration.png)
 
 When the registration form is submitted, it will `POST` to the `/account/register` endpoint (which invokes the `RegisterAction` method).
 
@@ -93,17 +89,17 @@ To disable this behavior, set the `site.registration.require_email_verification`
 
 Sometimes, you want to have a site administrator create an account on behalf of a specific user. For some applications, you may want this to be the _only_ way that new accounts can be created. To create a new user as an administrator, use the "create user" button at the bottom of the main user listing page:
 
-![User creation button](/images/create-user-button.png)
+![User creation button](images/create-user-button.png)
 
 You can then fill out details for the user. After you create the user, an email will be automatically sent to them that allows them to set their own password.
 
-![User creation](/images/create-user.png)
+![User creation](images/create-user.png)
 
 ## Login form
 
 By default, the login form is available at `/account/sign-in`. The user provides their email or username as their identity, along with their password. The form is submitted to `/account/login`, which invokes `LoginAction`. This processes the authentication request.
 
-![User sign-in](/images/login.png)
+![User sign-in](images/login.png)
 
 The `/account/login` route is throttled via the `throttles.sign_in_attempt` throttle rule. This mitigates against the possibility of brute-force attempts to guess your users' passwords.
 
@@ -127,7 +123,7 @@ After the page containing the sign-in form receives a response from the server t
 
 Users can reset their passwords by visiting `/account/forgot-password`. They will be asked for their account email address:
 
-![Password reset](/images/password-reset.png)
+![Password reset](images/password-reset.png)
 
 Upon submitting a password reset request, a secret token will be issued for the user's account (stored in `password_resets` table), and emailed to them in the form of a link (`/account/set-password/confirm`). The link will take them to a form with the secret token embedded in the page, where they can set their new password. The form is then submitted to `/account/set-password`, which updates the user's password and signs them in.
 
@@ -147,7 +143,7 @@ For the precise implementation of the password reset and account verification re
 
 Users can update certain attributes of their accounts through the account settings/profile page. By default, this is available at `/account/settings`:
 
-![Account settings page](/images/account-settings.png)
+![Account settings page](images/account-settings.png)
 
 As a security measure, users are required to verify their current password before they can update their email address or password. Other fields, like name and locale, do not require the authenticated user to re-enter their password.
 
@@ -198,7 +194,7 @@ Basic user details (name, email, locale, group) can be modified via the "Edit us
 
 Roles can be added to or removed from a user account via the `Manage roles` button on the user's profile page, or in the dropdown menu in the user table.
 
-![User role management](/images/uf-collection.png)
+![User role management](images/uf-collection.png)
 
 By default, only the root account can change users' roles. You may want to modify this to allow site admins to grant a **subset** of the available roles to other users - but be careful! You may not want site administrators to be allowed to elevate other users to site administrator, for example. See the section on [access control](users/access-control) for more information.
 
@@ -206,7 +202,7 @@ By default, only the root account can change users' roles. You may want to modif
 
 Administrators may be able to perform a password reset on behalf of users. This is useful, for example, when you have users who have difficulty with the self-service password reset tool. Password resets can be performed via the "Password" button in the user's profile page, or the "change password" option in the dropdown menu of the user table.
 
-![User password management](/images/change-password.png)
+![User password management](images/change-password.png)
 
 You may send a password reset link to the user so that they can change it themselves, or even set a password directly when dealing with particularly technology-adverse users over the phone.
 
@@ -222,7 +218,7 @@ User accounts can be deleted from the user profile page, or the user dropdown me
 
 Deleting user accounts presents a problem because the user may have related data in the database that would become orphaned, potentially breaking other functionality in your site. For this reason, UserFrosting performs [soft deletes](https://laravel.com/docs/8.x/eloquent#soft-deleting) by default. The user record is not actually deleted, but instead a `deleted_at` timestamp is added to the record and the user is no longer able to sign in. Deleted users are also excluded from all queries unless the `withTrashed` method is added to the Eloquent query. Related entities (activities, roles, etc) are left alone.
 
-If you really want to completely remove the user from the database, you can call the `User::forceDelete` method in your controller logic.
+If you really want to completely remove the user from the database, you can call the `User::forceDelete` method in your controller logic. 
 
 Here's an example using `User::forceDelete` in a custom UserActions class:
 
@@ -235,7 +231,7 @@ class UserActions {
 
     public function delete($userId) {
         $userModel = new User();
-
+        
         //includes soft-deleted users
         $user = $userModel->withTrashed()->find($userId);
 
diff --git a/app/pages/6.0/10.users/04.activity-logging/docs.md b/app/pages/6.0/10.users/04.activity-logging/docs.md
index 9bdb2e75..14d34e04 100644
--- a/app/pages/6.0/10.users/04.activity-logging/docs.md
+++ b/app/pages/6.0/10.users/04.activity-logging/docs.md
@@ -6,7 +6,7 @@ wip: true
 
 By default, user activities are logged to the `activities` database table. Logged information includes the activity time and an activity type, the `user_id`, the user's IP address, and a description of the activity. The administrative interface provides convenient tables for viewing these logs:
 
-![User activity logging](/images/user-activities.png)
+![User activity logging](images/user-activities.png)
 
 ## Default activity types
 
diff --git a/app/pages/6.0/13.asset-management/01.introduction/docs.md b/app/pages/6.0/13.asset-management/01.introduction/docs.md
index 9c399371..83053b43 100644
--- a/app/pages/6.0/13.asset-management/01.introduction/docs.md
+++ b/app/pages/6.0/13.asset-management/01.introduction/docs.md
@@ -20,7 +20,7 @@ Here's what makes Vite special:
 - **Simpler configuration**: Compared to Webpack, Vite's configuration is more intuitive and requires less boilerplate code
 - **Better Vue 3 support**: Vite's official Vue plugin provides optimized handling of Single File Components (`.vue` files)
 
-While Vite is the recommended bundler, UserFrosting 6 maintains backward compatibility with [Webpack Encore](/asset-management/webpack-encore) for existing projects that require it. You're not forced to migrate immediately—you can take your time!
+While Vite is the recommended bundler, UserFrosting 6 maintains backward compatibility with [Webpack Encore](asset-management/webpack-encore) for existing projects that require it. You're not forced to migrate immediately—you can take your time!
 
 ## Asset Workflow Overview
 
@@ -78,4 +78,4 @@ This chapter will guide you through:
 - **Sprinkle Assets**: Managing assets across multiple sprinkles
 - **Migration**: Transitioning from Webpack Encore to Vite
 
-Ready to get started? Continue to the [Getting Started](/asset-management/getting-started) guide.
+Ready to get started? Continue to the [Getting Started](asset-management/getting-started) guide.
diff --git a/app/pages/6.0/13.asset-management/02.getting-started/docs.md b/app/pages/6.0/13.asset-management/02.getting-started/docs.md
index 8a209bb2..8674bfd2 100644
--- a/app/pages/6.0/13.asset-management/02.getting-started/docs.md
+++ b/app/pages/6.0/13.asset-management/02.getting-started/docs.md
@@ -317,7 +317,7 @@ You can add your own scripts for project-specific tasks. For example, you might
 
 ## Managing Dependencies with Bakery
 
-While you can run NPM commands directly, UserFrosting provides convenient [Bakery commands](/cli/commands) that wrap NPM functionality and integrate with your UserFrosting workflow. Think of these as UserFrosting's way of helping you manage frontend dependencies without leaving the PHP environment.
+While you can run NPM commands directly, UserFrosting provides convenient [Bakery commands](cli/commands) that wrap NPM functionality and integrate with your UserFrosting workflow. Think of these as UserFrosting's way of helping you manage frontend dependencies without leaving the PHP environment.
 
 ### Installing Dependencies
 
@@ -390,4 +390,4 @@ You can use either NPM commands or Bakery commands—they accomplish the same go
 
 ## Next Steps
 
-Now that you understand package.json, NPM scripts, and dependency management, learn about [Vite Configuration](/asset-management/vite-configuration) to customize how assets are built and served.
+Now that you understand package.json, NPM scripts, and dependency management, learn about [Vite Configuration](asset-management/vite-configuration) to customize how assets are built and served.
diff --git a/app/pages/6.0/13.asset-management/03.vite-configuration/docs.md b/app/pages/6.0/13.asset-management/03.vite-configuration/docs.md
index f944bf4c..aa7d2150 100644
--- a/app/pages/6.0/13.asset-management/03.vite-configuration/docs.md
+++ b/app/pages/6.0/13.asset-management/03.vite-configuration/docs.md
@@ -228,7 +228,7 @@ import AccountSprinkle from '@userfrosting/sprinkle-account'
 app.use(AccountSprinkle, { router })
 ```
 
-Registers UserFrosting's [Sprinkles](/sprinkles)—modular packages that add functionality. Core provides base features, while Account handles user authentication and management. Each sprinkle can register Vue components, routes, and store modules.
+Registers UserFrosting's [Sprinkles](sprinkles)—modular packages that add functionality. Core provides base features, while Account handles user authentication and management. Each sprinkle can register Vue components, routes, and store modules.
 
 ```ts
 /** Setup Theme */
@@ -313,7 +313,7 @@ The Vite integration can be configured in your UserFrosting config file (`app/co
 
 **`manifest`**
 - Path to Vite's build manifest file
-- Uses the [Uniform Resource Locator](/advanced/locator) scheme
+- Uses the [Uniform Resource Locator](advanced/locator) scheme
 - Default: `assets://.vite/manifest.json` resolves to `public/assets/.vite/manifest.json`
 
 **`dev`**
@@ -398,4 +398,4 @@ When using pre-built assets:
 
 ## Next Steps
 
-Now that you understand Vite configuration and entry points, learn about the [Vue Framework](/asset-management/vue-framework) that powers UserFrosting's modern interactive interfaces.
+Now that you understand Vite configuration and entry points, learn about the [Vue Framework](asset-management/vue-framework) that powers UserFrosting's modern interactive interfaces.
diff --git a/app/pages/6.0/13.asset-management/04.vue-framework/docs.md b/app/pages/6.0/13.asset-management/04.vue-framework/docs.md
index 54a9c8ce..1bc03915 100644
--- a/app/pages/6.0/13.asset-management/04.vue-framework/docs.md
+++ b/app/pages/6.0/13.asset-management/04.vue-framework/docs.md
@@ -156,6 +156,6 @@ Don't worry if Vue is new to you—it's designed to be approachable, and the nex
 
 ## Next Steps
 
-Now that you understand Vue's role in UserFrosting, you're ready to learn how to [use assets in your application](/asset-management/using-assets). The next page covers how to reference and load your Vue components, styles, and other assets in UserFrosting's Twig templates.
+Now that you understand Vue's role in UserFrosting, you're ready to learn how to [use assets in your application](asset-management/using-assets). The next page covers how to reference and load your Vue components, styles, and other assets in UserFrosting's Twig templates.
 
-For hands-on Vue development, check out the [Advanced Topics](/asset-management/advanced) section, which covers Vue 3 Single File Components, TypeScript integration, and building complex interactive features.
+For hands-on Vue development, check out the [Advanced Topics](asset-management/advanced) section, which covers Vue 3 Single File Components, TypeScript integration, and building complex interactive features.
diff --git a/app/pages/6.0/13.asset-management/05.using-assets/docs.md b/app/pages/6.0/13.asset-management/05.using-assets/docs.md
index b8ad8b6d..f5b96c11 100644
--- a/app/pages/6.0/13.asset-management/05.using-assets/docs.md
+++ b/app/pages/6.0/13.asset-management/05.using-assets/docs.md
@@ -207,4 +207,4 @@ app/assets/
 
 ## Next Steps
 
-Learn about [Advanced Usage](/asset-management/advanced) including TypeScript, Vue components, preprocessors, and optimization techniques.
+Learn about [Advanced Usage](asset-management/advanced) including TypeScript, Vue components, preprocessors, and optimization techniques.
diff --git a/app/pages/6.0/13.asset-management/06.advanced/01.sprinkle-assets/docs.md b/app/pages/6.0/13.asset-management/06.advanced/01.sprinkle-assets/docs.md
index e7187df2..61bc7b9d 100644
--- a/app/pages/6.0/13.asset-management/06.advanced/01.sprinkle-assets/docs.md
+++ b/app/pages/6.0/13.asset-management/06.advanced/01.sprinkle-assets/docs.md
@@ -4,7 +4,7 @@ description: Managing assets across multiple sprinkles in UserFrosting, includin
 # Verified for UF 6.0
 ---
 
-One of UserFrosting's most powerful features is its [Sprinkle system](/structure/sprinkles)—a way to organize your application into modular, reusable packages. Each sprinkle can have its own assets, and these assets can be shared across your application. This is perfect for building reusable components, creating themes, or organizing large applications into manageable pieces.
+One of UserFrosting's most powerful features is its [Sprinkle system](structure/sprinkles)—a way to organize your application into modular, reusable packages. Each sprinkle can have its own assets, and these assets can be shared across your application. This is perfect for building reusable components, creating themes, or organizing large applications into manageable pieces.
 
 ## Multi-Sprinkle Architecture
 
@@ -399,4 +399,4 @@ npm install /path/to/my-sprinkle
 
 ## Next Steps
 
-Learn how to [migrate from Webpack Encore](/asset-management/migration) if you have an existing UserFrosting 5 project, or explore the [Sprinkle System](/structure/sprinkles) in more depth.
+Learn how to [migrate from Webpack Encore](asset-management/migration) if you have an existing UserFrosting 5 project, or explore the [Sprinkle System](structure/sprinkles) in more depth.
diff --git a/app/pages/6.0/13.asset-management/06.advanced/02.migration/docs.md b/app/pages/6.0/13.asset-management/06.advanced/02.migration/docs.md
index 311eb9d7..3d45d876 100644
--- a/app/pages/6.0/13.asset-management/06.advanced/02.migration/docs.md
+++ b/app/pages/6.0/13.asset-management/06.advanced/02.migration/docs.md
@@ -430,4 +430,4 @@ After migrating to Vite:
 
 4. **Optimize your Vite configuration** based on your needs
 
-Explore the [Vite Configuration](/asset-management/vite-configuration) guide to learn more about Vite configuration, or jump to [Advanced Usage](/asset-management/advanced) for optimization techniques.
+Explore the [Vite Configuration](asset-management/vite-configuration) guide to learn more about Vite configuration, or jump to [Advanced Usage](asset-management/advanced) for optimization techniques.
diff --git a/app/pages/6.0/13.asset-management/06.advanced/docs.md b/app/pages/6.0/13.asset-management/06.advanced/docs.md
index fb4e850b..6b87b728 100644
--- a/app/pages/6.0/13.asset-management/06.advanced/docs.md
+++ b/app/pages/6.0/13.asset-management/06.advanced/docs.md
@@ -277,4 +277,4 @@ $primary-color: #0066cc;
 
 ## Next Steps
 
-Learn about managing assets across [multiple sprinkles](/asset-management/sprinkle-assets) or how to [migrate from Webpack](/asset-management/migration).
+Learn about managing assets across [multiple sprinkles](asset-management/sprinkle-assets) or how to [migrate from Webpack](asset-management/migration).
diff --git a/app/pages/6.0/13.asset-management/07.webpack-encore/01.basic-usage/docs.md b/app/pages/6.0/13.asset-management/07.webpack-encore/01.basic-usage/docs.md
index 5284388e..976f87f2 100644
--- a/app/pages/6.0/13.asset-management/07.webpack-encore/01.basic-usage/docs.md
+++ b/app/pages/6.0/13.asset-management/07.webpack-encore/01.basic-usage/docs.md
@@ -7,9 +7,9 @@ description: Referencing statics assets in your Twig templates.
 > **This documentation is obsolete.** UserFrosting 6 uses **Vite** as the default asset bundler, not Webpack Encore.
 >
 > Please see:
-> - [Using Assets in Templates](/asset-management/using-assets) for how to include assets with Vite
-> - [Bakery Commands](/asset-management/bakery-commands) for build commands
-> - [Migration Guide](/asset-management/migration) to migrate from Webpack Encore
+> - [Using Assets in Templates](asset-management/using-assets) for how to include assets with Vite
+> - [Bakery Commands](asset-management/bakery-commands) for build commands
+> - [Migration Guide](asset-management/migration) to migrate from Webpack Encore
 
 When a user loads a page of your website in their browser, it includes a number of `<link ...>`, `<img ...>`, `<script ...>` and other tags that tell their browser how to fetch these additional resources from the server. Since the client must issue a separate request to retrieve an asset after loading a page, we need a way to generate asset URLs in our templates. To automatically build a url for a single asset in a Twig template, you may use the `asset()` helper. This helper takes a file path to an asset, and generates an appropriate absolute url:
 
diff --git a/app/pages/6.0/13.asset-management/07.webpack-encore/02.asset-bundles/docs.md b/app/pages/6.0/13.asset-management/07.webpack-encore/02.asset-bundles/docs.md
index bd5e3f4d..46e00f1f 100644
--- a/app/pages/6.0/13.asset-management/07.webpack-encore/02.asset-bundles/docs.md
+++ b/app/pages/6.0/13.asset-management/07.webpack-encore/02.asset-bundles/docs.md
@@ -7,9 +7,9 @@ description: Entrypoints bundles allow you to group one or more asset references
 > **This documentation is obsolete.** UserFrosting 6 uses **Vite** as the default asset bundler, not Webpack Encore.
 >
 > Please see:
-> - [Sprinkle Assets](/asset-management/sprinkle-assets) for multi-sprinkle asset architecture
-> - [Advanced Usage](/asset-management/advanced) for code splitting and optimization
-> - [Migration Guide](/asset-management/migration) to migrate from Webpack Encore
+> - [Sprinkle Assets](asset-management/sprinkle-assets) for multi-sprinkle asset architecture
+> - [Advanced Usage](asset-management/advanced) for code splitting and optimization
+> - [Migration Guide](asset-management/migration) to migrate from Webpack Encore
 
 Most CSS and Javascript resources should be integrated into your pages through **entrypoints**. Entrypoints defines groups of assets for which UserFrosting can automatically render `<link>` or `<script>` tags in your pages.
 
diff --git a/app/pages/6.0/13.asset-management/07.webpack-encore/03.advance-use/docs.md b/app/pages/6.0/13.asset-management/07.webpack-encore/03.advance-use/docs.md
index 48e3e790..fa1a06fe 100644
--- a/app/pages/6.0/13.asset-management/07.webpack-encore/03.advance-use/docs.md
+++ b/app/pages/6.0/13.asset-management/07.webpack-encore/03.advance-use/docs.md
@@ -7,9 +7,9 @@ description: ""
 > **This documentation is obsolete.** UserFrosting 6 uses **Vite** as the default asset bundler, not Webpack Encore.
 >
 > Please see:
-> - [Advanced Usage](/asset-management/advanced) for TypeScript, Vue 3, CSS preprocessors, and optimization
-> - [Sprinkle Assets](/asset-management/sprinkle-assets) for building sprinkles as libraries
-> - [Migration Guide](/asset-management/migration) to migrate from Webpack Encore
+> - [Advanced Usage](asset-management/advanced) for TypeScript, Vue 3, CSS preprocessors, and optimization
+> - [Sprinkle Assets](asset-management/sprinkle-assets) for building sprinkles as libraries
+> - [Migration Guide](asset-management/migration) to migrate from Webpack Encore
 
 By using Webpack Encore to manage frontend assets, Sass, Less, Vue and React can be used with UserFrosting out of the box.
 
diff --git a/app/pages/6.0/13.asset-management/07.webpack-encore/docs.md b/app/pages/6.0/13.asset-management/07.webpack-encore/docs.md
index a419889f..7287c337 100644
--- a/app/pages/6.0/13.asset-management/07.webpack-encore/docs.md
+++ b/app/pages/6.0/13.asset-management/07.webpack-encore/docs.md
@@ -7,9 +7,9 @@ description: Asset bundles should be compiled in production to allow for faster
 > **This documentation is obsolete.** UserFrosting 6 uses **Vite** as the default asset bundler, not Webpack Encore. Webpack Encore is still supported for backward compatibility but not recommended for new projects.
 >
 > Please see:
-> - [Asset Management Introduction](/asset-management/introduction) for Vite-based asset management
-> - [Getting Started with Vite](/asset-management/getting-started) for configuration guide
-> - [Migration Guide](/asset-management/migration) if you need to migrate from Webpack Encore to Vite
+> - [Asset Management Introduction](asset-management/introduction) for Vite-based asset management
+> - [Getting Started with Vite](asset-management/getting-started) for configuration guide
+> - [Migration Guide](asset-management/migration) if you need to migrate from Webpack Encore to Vite
 
 In a minimalistic setup, asset retrieval is fairly straightforward. We might just keep all of our Javascript files in a `js/` directory directly under our public document root directory. Then the URL is simply `http://example.com/js/whatever.js`, the web server matches the _URL path_ `/js/whatever.js` to the _filesystem_ path `/path/to/document/root/public/js/whatever.js` and finally places the contents of that file in the HTTP response. In most web servers, this happens so transparently that a lot of new developers assume that they're somehow giving direct access to the server's file system. In reality the web server is mediating the interaction, and generating an HTTP response using the _contents_ of these files.
 
diff --git a/app/pages/6.0/14.database/05.data-sprunjing/docs.md b/app/pages/6.0/14.database/05.data-sprunjing/docs.md
index 79c5b30f..61356381 100644
--- a/app/pages/6.0/14.database/05.data-sprunjing/docs.md
+++ b/app/pages/6.0/14.database/05.data-sprunjing/docs.md
@@ -90,7 +90,7 @@ class OwlSprunje extends Sprunje
         'name',
         'species'
     ];
-
+    
     // ...
 }
 ```
@@ -117,7 +117,7 @@ use UserFrosting\Sprinkle\MySprinkle\Sprunje\OwlSprunje;
 
 class OwlsSprunjeAction
 {
-    /**
+    /** 
      * Inject Sprunje and other services using DI
      */
     public function __construct(
@@ -200,7 +200,7 @@ To do this, you can define custom methods in your Sprunje:
      *
      * @param EloquentBuilder|QueryBuilder|Relation $query
      * @param string                                $value
-     *
+     * 
      * @return static
      */
     protected function filterScientificName($query, string $value): static
@@ -337,4 +337,4 @@ protected function listStatus(): array
 
 If you're wondering where the term "Sprunje" comes from:
 
-![Futurama - Sprunjer](/images/sprunje.mp4)
+![Futurama - Sprunjer](images/sprunje.mp4)
diff --git a/app/pages/6.0/17.i18n/01.introduction/docs.md b/app/pages/6.0/17.i18n/01.introduction/docs.md
index 83673abd..b7ff7cd5 100644
--- a/app/pages/6.0/17.i18n/01.introduction/docs.md
+++ b/app/pages/6.0/17.i18n/01.introduction/docs.md
@@ -1,24 +1,18 @@
 ---
 title: Introduction
-description: An introduction to UserFrosting's i18n system for building multilingual applications.
+description: An introduction to UserFrosting i18n system
 wip: true
 ---
 
-Your application might start with English speakers, but what about when your user base grows to include Spanish, French, Chinese, or Arabic speakers? Hardcoding English text throughout your code creates a localization nightmare. Every piece of text would need changing in dozens of files. Supporting multiple languages becomes practically impossible.
+UserFrosting provides a complete framework for translating strings and sentences easily and efficiently. UserFrosting allows you to [define the default locale](i18n/site-locale#the-default-locale) your UI should present to guest users, while allowing resgistered users to [choose their prefered locale](i18n/site-locale#the-available-user-locales).
 
-**Internationalization (i18n)** solves this by separating text content from code. Instead of hardcoded strings, you use translation keys—`'USER_WELCOME'` instead of `"Welcome, user!"`. All translations live in language files that anyone can edit without touching code. Supporting a new language means adding a new language file, not modifying PHP.
+## Why use translation on a single locale app ?
 
-UserFrosting provides a complete i18n framework with locale management, pluralization rules, and powerful translation features. Users can choose their preferred language, and your application automatically displays content in that language.
-
-This page introduces UserFrosting's translation system and explains why it matters even for single-language applications.
-
-## Why Use Translation Keys (Even for Single Language Apps)?
-
-It's important to talk about why this system is important and why you should use it in your sprinkles, even if you plan on supporting only a single locale in your app.
+It's important to talk about why this system is important and why you should use it too in your sprinkles, even if you plan on supporting only a single locale in your app.
 
 Let's face it, it would be _waayyyy easier_ to simply hard code every public facing string in your common code. While using the translation system will make it easier to support additional languages in the future, it will also help separate your code from your site content.
 
-Imagine one day you decide to change the term **Users** to **Members**. If you hardcoded everything inside your code, you now have to go through all of the files, look for everywhere the word **User** (and **User_s_** !) is written and change it, one by one, everywhere. Keep in mind, this word is also used in the core code of UserFrosting! This means, if we were to hardcode everything too, that you would have to update all UserFrosting provided files too!
+Imagine one day you decide to change the term **Users** to **Members**. If you hardcoded everything inside your code, you now have to go through all of the files, look for everwhere the word **User** (and **User_s_** !) is written and change it, one by one, everywhere. Keep in mind, this word is also used in the core code of UserFrosting! This means, if we were to hardcode everything too, that you would have to update all UserFrosting provided files too!
 
 However, having all the _content_ in a single location can help in this situation. Since a common **messages key** is used in your code, you now have to fix only the **localized message**. The same goes if you made a typo somewhere...
 
@@ -38,7 +32,7 @@ UserFrosting [i18n module](https://github.com/userfrosting/i18n) is composed of
 
 A **Locale** is used to create a **Dictionary**, which is then used by the **Translator**. The overall flow can be visualized as :
 
-![](/images/i18n/diagram.png)
+![](images/i18n/diagram.png)
 
 ### The Locale
 
diff --git a/app/pages/6.0/18.advanced/07.alert-stream/docs.md b/app/pages/6.0/18.advanced/07.alert-stream/docs.md
index 10b8a205..4c83ca39 100644
--- a/app/pages/6.0/18.advanced/07.alert-stream/docs.md
+++ b/app/pages/6.0/18.advanced/07.alert-stream/docs.md
@@ -8,7 +8,7 @@ The **alert stream** is UserFrosting's implementation of a flash messaging syste
 
 Rather than including alerts directly in a request's response, they are persisted through a separate `AlertStream` interface. They can then be retrieved by making a separate request to `/alerts`, which will return a JSON object containing each alert message and its corresponding type:
 
-![A diagram of the alert creation and retrieval process.](/images/alert-stream.png)
+![A diagram of the alert creation and retrieval process.](images/alert-stream.png)
 
 You may wonder why we have this complicated process and use a separate request to retrieve alerts, rather than embedding them directly in the original response. The reason is that sometimes you may not be ready to immediately display the alerts after you receive the original request's response. For example, you may have a situation where you need to redirect or refresh the page before displaying alerts.
 
diff --git a/app/pages/6.0/20.recipes/04.custom-login-page/docs.md b/app/pages/6.0/20.recipes/04.custom-login-page/docs.md
index 0dfadf96..4a8ef5c2 100644
--- a/app/pages/6.0/20.recipes/04.custom-login-page/docs.md
+++ b/app/pages/6.0/20.recipes/04.custom-login-page/docs.md
@@ -45,7 +45,7 @@ Inside your newly created config file, you add any configuration options you wan
 
 Save the file, reload the login page and voilà! Not only will the registration link disappear, but all relevant registration endpoints will also be deactivated. You will still be able to create a new user manually using the administration interface.
 
-![Login form without registration](/images/login-no-registration.png)
+![Login form without registration](images/login-no-registration.png)
 
 See the [Configuration Files](configuration/config-files) chapter for more information about editing configuration.
 
@@ -54,9 +54,9 @@ See the [Configuration Files](configuration/config-files) chapter for more infor
 
 ## Changing the post-login destination
 
-When a successful login occurs, by default, the user will be taken to the `/dashboard` page if it has access to this page, or `/settings` otherwise.
+When a successful login occurs, by default, the user will be taken to the `/dashboard` page if it has access to this page, or `/settings` otherwise. 
 
-To understand how this redirect works, when the user is logging in, the `UserRedirectedAfterLoginEvent` event will be dispatched. The **Admin Sprinkle** listen to this event, through the `UserRedirectedToSettings` and `UserRedirectedToDashboard` listeners :
+To understand how this redirect works, when the user is logging in, the `UserRedirectedAfterLoginEvent` event will be dispatched. The **Admin Sprinkle** listen to this event, through the `UserRedirectedToSettings` and `UserRedirectedToDashboard` listeners : 
 
 `vendor/userfrosting/sprinkle-admin/app/src/Admin.php`
 ```php
@@ -74,7 +74,7 @@ public function getEventListeners(): array
 }
 ```
 
-You'll notice two listeners are listening to the event. First `UserRedirectedToDashboard` will be executed and if the user has access to the Dashboard, the redirect will be set to `/dashboard`. If the user doesn't have access (via the authenticator checkAccess method), `UserRedirectedToSettings` will be called.
+You'll notice two listeners are listening to the event. First `UserRedirectedToDashboard` will be executed and if the user has access to the Dashboard, the redirect will be set to `/dashboard`. If the user doesn't have access (via the authenticator checkAccess method), `UserRedirectedToSettings` will be called. 
 
 This process can be easily customized by adding our own event listener. Let's change the default behavior to redirect every user to the about page (`/about` route) upon login.
 
@@ -113,7 +113,7 @@ class UserRedirectedToAbout
 ```
 
 > [!NOTE]
-> Note that we use Slim's route parser `urlFor` method to get the route definition from its name. This is the same as hardcoding `'/about'`. Check out [Slim's documentation](https://www.slimframework.com/docs/objects/router.html#route-names) for more info on named routes.
+> Note that we use Slim's route parser `urlFor` method to get the route definition from it's name. This is the same as hardcoding `'/about'`. Check out [Slim's documentation](https://www.slimframework.com/docs/objects/router.html#route-names) for more info on named routes.
 
 The last step is to register the new listener in your Sprinkle Recipe. The recipe itself will also need to implement the `UserFrosting\Event\EventListenerRecipe` interface.
 
@@ -147,7 +147,7 @@ class MyApp implements
             ],
         ];
     }
-
+    
     // ...
 }
 ```
@@ -199,7 +199,7 @@ Now we will modify the login page to show the site logo. The base base template
 A couple of elements to point out here :
 1. We start by using the `extend` tag with the reference to `@adminlte-theme` template. This tells Twig to use the original template as base.
 2. We add the `loginLogo`, but leave it empty to remove the default logo/title.
-3. We define a custom `loginBox` block with our modified code. The `login-logo` div is now inside the `login-box-body` and the image is added.
+3. We define a custom `loginBox` block with our modified code. The `login-logo` div is now inside the `login-box-body` and the image is added. 
 4. Since we still want to use both `loginForm` and `loginLinks` blocks, but don't want to change their content, we include them and use `{{ parent() }}` to render the content from the `@adminlte-theme` version
 
 The last missing piece is the image we used isn't loaded in your app right now. This image is located in the AdminLTE theme sprinkle and must be copied to the `public/`. Fortunately, AdminLTE sprinkle provides an helper module to do this with Webpack. Simply add the following line to your `app/assets/app.js` and run Webpack.
@@ -209,18 +209,18 @@ The last missing piece is the image we used isn't loaded in your app right now.
 require('@userfrosting/theme-adminlte/app/assets/cupcake');
 ```
 
-Run :
+Run : 
 ```
 $ php bakery assets:build
 ```
 
 Once you refresh the page, you should see the result:
 
-![Custom login template](/images/custom-login.png)
+![Custom login template](images/custom-login.png)
 
 ### Customizing the CSS
 
-Customizing the CSS is different than overriding the template. Our change will be small, so we won't be replacing a full css file, but add a new, smaller one. Two steps are required to achieve this :
+Customizing the CSS is different than overriding the template. Our change will be small, so we won't be replacing a full css file, but add a new, smaller one. Two steps are required to achieve this : 
 
 1. Create a new css file
 2. Register a new webpack entry
@@ -258,7 +258,7 @@ Next, we add the entry to the login page. At the bottom of the file, outside any
 {% endblock %}
 ```
 
-Last, we need to rebuild the assets, by running the bakery command :
+Last, we need to rebuild the assets, by running the bakery command : 
 
 ```bash
 php bakery assets:build
@@ -266,4 +266,4 @@ php bakery assets:build
 
 Your new CSS file should be loaded when you refresh the page and you should see the result:
 
-![Custom login style](/images/custom-login2.png)
+![Custom login style](images/custom-login2.png)
diff --git a/app/pages/6.0/20.recipes/05.changing-user-permissions/docs.md b/app/pages/6.0/20.recipes/05.changing-user-permissions/docs.md
index b4018b4c..93fe3af9 100644
--- a/app/pages/6.0/20.recipes/05.changing-user-permissions/docs.md
+++ b/app/pages/6.0/20.recipes/05.changing-user-permissions/docs.md
@@ -15,7 +15,7 @@ This example only covers the built-in permissions and roles. For a more in-depth
 
 The first steps are to edit the default permissions of the **User** role, which was automatically created when you installed UserFrosting. The goal here is to give read access to the built-in _Group Management page_ and _User Management page_ for users who have the **User** role. With the root account, go to the **Roles** page and click on **Manage Permissions** from the **Actions** dropdown of the **User** role.
 
-![Default permission](/images/user-group-pages/default-permissions.png)
+![Default permission](images/user-group-pages/default-permissions.png)
 
 Add the following permission to the role:
 
@@ -25,13 +25,13 @@ Add the following permission to the role:
 - View user
 - User management page
 
-![Modified permissions](/images/user-group-pages/new-permissions.png)
+![Modified permissions](images/user-group-pages/new-permissions.png)
 
 At this point, any user (assuming they have the _User_ role) should be able to see the `Groups` and `Users` links in the sidebar, as well as the list and details pages for users and groups.
 
-![Public group page](/images/user-group-pages/result-groups.png)
+![Public group page](images/user-group-pages/result-groups.png)
 
-![Public user page](/images/user-group-pages/result-users.png)
+![Public user page](images/user-group-pages/result-users.png)
 
 > [!NOTE]
 > As of version 4.1.12, the **Action** dropdown in the user and group management tables still shows links to administrative functions, even if the current user doesn't actually have the necessary permissions. Clicking on any link will throw a `ForbiddenAccess` exception. This is a known limitation and only constitutes a minor user experience issue. It is **not** a security issue, as access is still controlled in the relevant server-side endpoints.
diff --git a/app/pages/6.0/20.recipes/06.external-js/docs.md b/app/pages/6.0/20.recipes/06.external-js/docs.md
index 82b6ecf4..8f27734a 100644
--- a/app/pages/6.0/20.recipes/06.external-js/docs.md
+++ b/app/pages/6.0/20.recipes/06.external-js/docs.md
@@ -10,7 +10,7 @@ wip: true
 > [!TIP]
 > A complete example of this guide can be found on GitHub : [https://github.com/userfrosting/recipe-js-package](https://github.com/userfrosting/recipe-js-package)
 
-This recipe will guide you on how to add a 3rd party javascript package on a default UserFrosting installation. The process is simple, but can be challenging to understand as most 3rd party package won't provides instructions for UserFrosting Webpack setup.
+This recipe will guide you on how to add a 3rd party javascript package on a default UserFrosting installation. The process is simple, but can be challenging to understand as most 3rd party package won't provides instructions for UserFrosting Webpack setup.  
 
 For this example, we will add [Dark Reader](https://www.npmjs.com/package/darkreader) to the UserFrosting Skeleton. Dark Reader is designed to analyze web pages and generate a dark mode for any website. To enable it, we simply need to load it with the package manager, create a script which will initialize Dark Reader and finally register a new entrypoint.
 
@@ -18,12 +18,12 @@ For this example, we will add [Dark Reader](https://www.npmjs.com/package/darkre
 
 First thing to do is add a new dependency. The important point here is since Dark Reader is a **frontend** dependency, we won't load it with Composer. Composer is dedicated to PHP, or **backend** dependencies. Instead, we will use the **N**ode **P**acakge **M**anager, or **NPM**.
 
-From the command line, run :
+From the command line, run : 
 ```bash
 $ npm i darkreader --save
 ```
 
-This will add the following line to your `package.json` and load to `node_modules` :
+This will add the following line to your `package.json` and load to `node_modules` : 
 ```json
 "dependencies": {
     "@userfrosting/sprinkle-admin": "~5.1.0",
@@ -40,15 +40,15 @@ One big difference with traditional website, each file referenced as a Webpack e
 
 This is important, as a module doesn't work the same a traditional javascript file, also known as **browser JavaScript**. One big difference between Node.js modules and browser JavaScript is how one script's code is accessed from another script's code.
 
-The difference can be explained as [this StackOverflow answer](https://stackoverflow.com/a/9901097/445757) does :
+The difference can be explained as [this StackOverflow answer](https://stackoverflow.com/a/9901097/445757) does : 
 
 > In browser JavaScript, scripts are added via the `<script>` element. When they execute, they all have direct access to the global scope, a "shared space" among all scripts. Any script can freely define/modify/remove/call anything on the global scope.
 
 > In Node.js, each **module** has its own scope. A module cannot directly access things defined in another module unless it chooses to expose them. To expose things from a module, they must be assigned to exports or module.exports. For a module to access another module's exports or module.exports, it must use `require()`.
 
-The `require()` function is a built-in CommonJS module function supported in Node.js that lets you include modules within your project. We already use it to include the `theme-adminlte` main module, this time we'll use it to include the Dark Reader main module.
+The `require()` function is a built-in CommonJS module function supported in Node.js that lets you include modules within your project. We already use it to include the `theme-adminlte` main module, this time we'll use it to include the Dark Reader main module. 
 
-In the default `app.js` main entry point, add the following code at the bottom :
+In the default `app.js` main entry point, add the following code at the bottom : 
 
 `app/assets/app.js`
 ```js
@@ -61,20 +61,20 @@ const DarkReader = require('darkreader/darkreader');
 DarkReader.enable();
 ```
 
-Since we changed a JavaScript file, we need to rebuilt the assets :
+Since we changed a JavaScript file, we need to rebuilt the assets : 
 ```bash
 $ php bakery assets:build
 ```
 
 Refresh the page, and you should see the default page in a beautiful dark mode !
 
-![DarkMode Screenshot](/images/DarkReader1.png)
+![DarkMode Screenshot](images/DarkReader1.png)
 
 ## Creating our own module
 
 Right now, the code is directly in the main entry point. While it works for now, as your code grows, it will be more difficult to maintain. By moving your custom code to a dedicated module, it also help with *separation of concerns*. Each task in it's own module !
 
-For this example, let's move the code previously added to `app/assets/app.js` to a new `app/assets/darkreader.js` file.
+For this example, let's move the code previously added to `app/assets/app.js` to a new `app/assets/darkreader.js` file. 
 
 `app/assets/darkreader.js`
 ```js
@@ -96,7 +96,7 @@ require('@userfrosting/theme-adminlte');
 require('./darkreader.js')
 ```
 
-Again, since we changed a JavaScript file, we need to rebuilt the assets :
+Again, since we changed a JavaScript file, we need to rebuilt the assets : 
 ```bash
 $ php bakery assets:build
 ```
@@ -105,7 +105,7 @@ Refresh the page, the dark mode should still be applied.
 
 ## Adding a toggle
 
-At this point, Dark Reader will be enabled by default on every page. Wouldn't it be nice to have a toggle button for it?
+At this point, Dark Reader will be enabled by default on every page. Wouldn't it be nice to have a toggle button for it? 
 
 First order of business, we need to add the toggle button to the navbars. Yes, plurals. UserFrosting default theme has a dedicated navbar for the dashboard layout as well as the standard layout!
 
@@ -124,7 +124,7 @@ For the standard layout, we need to add our custom navbar element in the `main-n
 ```
 
 [center]
-![DarkMode Lightbulb](/images/DarkReader2.png)
+![DarkMode Lightbulb](images/DarkReader2.png)
 [size=14]The lightbulb icon is added in the standard layout[/size]
 [/center]
 
@@ -142,7 +142,7 @@ For the dashboard layout, we need to add our custom navbar element in the `navba
 ```
 
 [center]
-![DarkMode Lightbulb Admin](/images/DarkReader3.png)
+![DarkMode Lightbulb Admin](images/DarkReader3.png)
 [size=14]The lightbulb icon now is added in the dashboard layout[/size]
 [/center]
 
@@ -164,13 +164,13 @@ function toggleDarkMode() {
 }
 
 // Init when document is ready
-$(function() {
+$(function() { 
     // Init event listener for button
     $('.darkmode-btn').on( "click", function() {
         toggleDarkMode();
     });
 
-    // Set initial state as saved in local storage
+    // Set initial state as saved in local storage 
     const enabled = localStorage.getItem('UF-DarkMode-enabled');
     if (enabled === "true") { DarkReader.enable(); }
 });
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/01.base-setup/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/01.base-setup/docs.md
index e1489d66..12f4769f 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/01.base-setup/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/01.base-setup/docs.md
@@ -16,7 +16,7 @@ Make sure the default skeleton app is working. Once the base website is created
 
 ## The Route Class
 
-We can create the [route definition](routes-and-controllers) for the `/pastries` page. We'll *edit* the default `app/src/MyRoutes.php` file.
+We can create the [route definition](routes-and-controllers) for the `/pastries` page. We'll *edit* the default `app/src/MyRoutes.php` file. 
 
 **app/src/MyRoutes.php**:
 ```php
@@ -77,7 +77,7 @@ class PastriesPageAction
 }
 ```
 
-For now, the pastries array is empty. In the next page, we'll replace this empty array with a database model.
+For now, the pastries array is empty. In the next page, we'll replace this empty array with a database model. 
 
 ## The Template File
 
@@ -115,6 +115,6 @@ Finally, we need to *create* the template file. We use the same file name as the
 
 You should now be able to manually go to the `/pastries` page in your browser and see the result:
 
-![Pastries page](/images/pastries/01.png)
+![Pastries page](images/pastries/01.png)
 
 You'll notice that at this point, we're not actually displaying any useful content on the page. In the next section, we'll discuss how to display content dynamically retrieved from the database.
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/02.database/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/02.database/docs.md
index 3d607089..2abdbe4e 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/02.database/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/02.database/docs.md
@@ -187,14 +187,14 @@ class PastriesTable extends Migration
 
 ## Registering the migration and seed in the sprinkle recipe
 
-We also need to tell our Recipe that it will be providing migrations and seeds. To do so, your recipe class must implement, on top of `SprinkleRecipe`, `UserFrosting\Sprinkle\Core\Sprinkle\Recipe\MigrationRecipe` and `use UserFrosting\Sprinkle\Core\Sprinkle\Recipe\SeedRecipe`.
+We also need to tell our Recipe that it will be providing migrations and seeds. To do so, your recipe class must implement, on top of `SprinkleRecipe`, `UserFrosting\Sprinkle\Core\Sprinkle\Recipe\MigrationRecipe` and `use UserFrosting\Sprinkle\Core\Sprinkle\Recipe\SeedRecipe`. 
 
-We'll then list our migration in the `getMigrations()` method, and our seed in the `getSeeds()` method.
+We'll then list our migration in the `getMigrations()` method, and our seed in the `getSeeds()` method. 
 
 > [!NOTE]
 > Note the seed can still work if it's not registered because we're calling it directly in the migration. However, if the seed is not registered, it won't show up when running `php bakery seed`.
 
-The **MyApp** recipe should now look like this :
+The **MyApp** recipe should now look like this : 
 
 **app/src/MyApp.php**
 ```php
@@ -211,8 +211,8 @@ use UserFrosting\Sprinkle\Pastries\Database\Seeds\DefaultPastries; // <-- Add he
 use UserFrosting\Sprinkle\SprinkleRecipe;
 use UserFrosting\Theme\AdminLTE\AdminLTE;
 
-class MyApp implements
-    SprinkleRecipe,
+class MyApp implements 
+    SprinkleRecipe, 
     MigrationRecipe, // <-- Add here !
     SeedRecipe // <-- Add here !
 {
@@ -239,12 +239,12 @@ class MyApp implements
             DefaultPastries::class, // <-- Add this block
         ];
     }
-
+    
     // ...
 }
 ```
 
-We are now ready to run our migration. From the command line, use the [Bakery migrate command](cli/commands#migrate) to run the migration up:
+We are now ready to run our migration. From the command line, use the [Bakery migrate command](cli/commands#migrate) to run the migration up: 
 
 ```bash
 $ php bakery migrate
@@ -260,13 +260,13 @@ Now it's time to go back to our controller and fetch the data from our new datab
 use UserFrosting\Sprinkle\Pastries\Database\Models\Pastries;
 ```
 
-Now that we've defined this convenient alias for our model, it's time to interact with it and select all the available rows. Replace :
+Now that we've defined this convenient alias for our model, it's time to interact with it and select all the available rows. Replace : 
 
 ```php
 $pastries = [];
 ```
 
-With :
+With : 
 ```php
 $pastries = Pastry::all();
 ```
@@ -274,11 +274,11 @@ $pastries = Pastry::all();
 > [!NOTE]
 > Fetching all the available rows is not an ideal solution since, in production, it can involve an arbitrarily large number of rows. This can clutter the UI, providing poor user experience, and can also result in poor performance (slow page generation, high server resource usage). It is recommended to use AJAX and [**Sprunging**](database/data-sprunjing) to display paginated data in this situation.
 
-The `$pastries` variable should now contains an [Eloquent Collection](https://laravel.com/docs/8.x/eloquent-collections) of `Pastry` objects.
+The `$pastries` variable should now contains an [Eloquent Collection](https://laravel.com/docs/8.x/eloquent-collections) of `Pastry` objects. 
 
 ### Debugging
 
-At this point, it's a good idea to use [**debugging**](troubleshooting/debugging#debug-statements) to make sure everything works as it should. We'll use the `DebugLogger` service to do so.
+At this point, it's a good idea to use [**debugging**](troubleshooting/debugging#debug-statements) to make sure everything works as it should. We'll use the `DebugLogger` service to do so. 
 
 Start by adding the facade class to the usage declaration of your class:
 
@@ -384,4 +384,4 @@ Let's get a closer look at our `for` block:
 
 This is the same as using `foreach` in PHP to loop through all the items available in an array. The `{% for pastry in pastries %}` will loop through `pastries` and create a HTML table row for each item. If you refresh the page, you should now see this in your browser:
 
-![Pastries page](/images/pastries/02.png)
+![Pastries page](images/pastries/02.png)
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/03.adding-menu/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/03.adding-menu/docs.md
index 1240b102..9fdfa811 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/03.adding-menu/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/03.adding-menu/docs.md
@@ -26,4 +26,4 @@ The second key part is `{{ urlFor('pastries') }}`. This uses UserFrosting custom
 
 You should now see the new link in the menu:
 
-![Pastries menu link](/images/pastries/03.png)
+![Pastries menu link](images/pastries/03.png)
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/04.custom-permissions/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/04.custom-permissions/docs.md
index 86450319..254816a5 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/04.custom-permissions/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/04.custom-permissions/docs.md
@@ -199,7 +199,7 @@ $ php bakery migrate
 
 You can make sure the migration was successful by logging in as the root user and going to the permissions page:
 
-![Pastries permission list](/images/pastries/permission-list.png)
+![Pastries permission list](images/pastries/permission-list.png)
 
 ## Adding permission to the page
 
@@ -272,11 +272,11 @@ The link should now be hidden from the menu when you refresh the page.
 
 Now to make sure everything works correctly, let's add that `see_pastries` permission to the **User** role. Once this is done, a normal user will regain access to the page. Using a root account, navigate to the **Roles** page and select **Manage permissions** from the Actions dropdown menu of the **User** role.
 
-![Role page](/images/pastries/role-page.png)
+![Role page](images/pastries/role-page.png)
 
 Select the `see_pastries` permission from the bottom dropdown (use the search field to easily find it) and then click `update permissions`.
 
-![Adding permission](/images/pastries/adding-permission.png)
+![Adding permission](images/pastries/adding-permission.png)
 
 Your non-root user should now have access to the pastry page again (assuming they have the User role).
 
diff --git a/app/pages/6.0/20.recipes/07.advanced-tutorial/05.localization/docs.md b/app/pages/6.0/20.recipes/07.advanced-tutorial/05.localization/docs.md
index c742d7b6..f0b917d2 100644
--- a/app/pages/6.0/20.recipes/07.advanced-tutorial/05.localization/docs.md
+++ b/app/pages/6.0/20.recipes/07.advanced-tutorial/05.localization/docs.md
@@ -109,4 +109,4 @@ return [
 
 At this point, you can visit the user preferences and change your language to French. Once this is done, go back to the pastries page and _voilà, tout en français_ !
 
-![Pastries in French](/images/pastries/04.png)
+![Pastries in French](images/pastries/04.png)
diff --git a/app/pages/6.0/21.going-live/01.hosting/docs.md b/app/pages/6.0/21.going-live/01.hosting/docs.md
index e3a655a3..2f5c0fa0 100644
--- a/app/pages/6.0/21.going-live/01.hosting/docs.md
+++ b/app/pages/6.0/21.going-live/01.hosting/docs.md
@@ -31,7 +31,7 @@ Their cheapest option is a USD $4/mo server, which provides 512MB memory, 10GB s
 
 They also provide a convenient web-based control panel, which lets you perform some basic administrative tasks and monitor your Droplet's resource usage:
 
-![Droplet control panel](/images/droplet.png)
+![Droplet control panel](images/droplet.png)
 
 ### Promotions
 
diff --git a/app/pages/6.0/21.going-live/02.mail-providers/docs.md b/app/pages/6.0/21.going-live/02.mail-providers/docs.md
index 162719ba..0b279c63 100644
--- a/app/pages/6.0/21.going-live/02.mail-providers/docs.md
+++ b/app/pages/6.0/21.going-live/02.mail-providers/docs.md
@@ -8,7 +8,7 @@ By default, UserFrosting is configured to use an external SMTP mail server of yo
 
 Why? Because dual-purposing your web server as an ad hoc mail server (i.e., what you get when you use PHP's `mail()` function) tends to lead to [all sorts of problems](http://blog.teamtreehouse.com/sending-email-with-phpmailer-and-smtp). The biggest problem is that your messages stand a good chance of being marked as spam, or blocked outright, by other mail servers. To understand this, consider how email works:
 
-![Mail transport chain](/images/mail-transport.png)
+![Mail transport chain](images/mail-transport.png)
 
 To send a message to someone's email address, the sending mail server must ultimately ask another mail server to deliver the message to the email address on your behalf - there is no way to directly place a message in someone's inbox! For example, when you send a message to `grandma@compuserve.net`, you are actually asking some other mail server (e.g., `mail.compuserve.net`) to deliver your message to the address.