diff --git a/cypress/e2e/auth.cy.ts b/cypress/e2e/auth.cy.ts
index 2ea1dc5..8892f37 100644
--- a/cypress/e2e/auth.cy.ts
+++ b/cypress/e2e/auth.cy.ts
@@ -10,6 +10,7 @@ describe('Auth', () => {
     it('Logs in', () => {
         // Arrange
         cy.see('Log in with Solid');
+        cy.matchImageSnapshot();
 
         // Act
         cy.ariaInput('Login url').clear().type(`${cssUrl()}{enter}`);
@@ -36,7 +37,7 @@ describe('Auth', () => {
         // Act
         cy.ariaLabel('Logout').click();
         cy.contains('[role="dialog"]', 'Are you sure you want to log out?').within(() => {
-            cy.press('OK');
+            cy.press('Ok');
         });
 
         // Assert
diff --git a/cypress/e2e/cookbook.cy.ts b/cypress/e2e/cookbook.cy.ts
index 6aad09d..1efaddb 100644
--- a/cypress/e2e/cookbook.cy.ts
+++ b/cypress/e2e/cookbook.cy.ts
@@ -18,6 +18,7 @@ describe('Cookbook', () => {
 
         // Act
         cy.see('You don\'t have a place to store your recipes');
+        cy.matchImageSnapshot();
         cy.press('Create cookbook');
 
         // Assert
@@ -46,6 +47,7 @@ describe('Cookbook', () => {
 
         // Act
         cy.see('You don\'t know how to make Ramen');
+        cy.matchImageSnapshot();
         cy.press('Teach me');
 
         // Assert
@@ -88,6 +90,7 @@ describe('Cookbook', () => {
         // Assert
         cy.see('You know how to make Ramen!');
         cy.see(`Your Ramen recipe is at ${cssPodUrl('/cookbook/ramen#it')}`);
+        cy.matchImageSnapshot();
     });
 
 });
diff --git a/cypress/snapshots/auth.cy.ts/Auth -- Logs in.snap.png b/cypress/snapshots/auth.cy.ts/Auth -- Logs in.snap.png
new file mode 100644
index 0000000..787a3c3
Binary files /dev/null and b/cypress/snapshots/auth.cy.ts/Auth -- Logs in.snap.png differ
diff --git a/cypress/snapshots/cookbook.cy.ts/Cookbook -- Creates containers.snap.png b/cypress/snapshots/cookbook.cy.ts/Cookbook -- Creates containers.snap.png
new file mode 100644
index 0000000..0742c26
Binary files /dev/null and b/cypress/snapshots/cookbook.cy.ts/Cookbook -- Creates containers.snap.png differ
diff --git a/cypress/snapshots/cookbook.cy.ts/Cookbook -- Finds existing Ramen.snap.png b/cypress/snapshots/cookbook.cy.ts/Cookbook -- Finds existing Ramen.snap.png
new file mode 100644
index 0000000..e57e6cb
Binary files /dev/null and b/cypress/snapshots/cookbook.cy.ts/Cookbook -- Finds existing Ramen.snap.png differ
diff --git a/cypress/snapshots/cookbook.cy.ts/Cookbook -- Teaches Ramen.snap.png b/cypress/snapshots/cookbook.cy.ts/Cookbook -- Teaches Ramen.snap.png
new file mode 100644
index 0000000..c3bd394
Binary files /dev/null and b/cypress/snapshots/cookbook.cy.ts/Cookbook -- Teaches Ramen.snap.png differ
diff --git a/package-lock.json b/package-lock.json
index 39b7d79..1f15a60 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
                 "@tailwindcss/forms": "^0.5.3",
                 "@tailwindcss/typography": "^0.5.9",
                 "soukai": "next",
-                "soukai-solid": "0.5.2-next.b6340345e228903e404a02c1ed9be8fc95162e8f",
+                "soukai-solid": "next",
                 "tailwindcss": "^3.3.2",
                 "vue": "^3.3.0",
                 "vue-i18n": "9.3.0-beta.19"
@@ -26,7 +26,7 @@
             "devDependencies": {
                 "@aerogel/cli": "next",
                 "@aerogel/cypress": "next",
-                "@aerogel/histoire": "0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c",
+                "@aerogel/histoire": "next",
                 "@aerogel/vite": "next",
                 "@iconify/json": "^2.2.134",
                 "@noeldemartin/eslint-config-vue": "next",
@@ -62,9 +62,9 @@
             }
         },
         "node_modules/@aerogel/cli": {
-            "version": "0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c",
-            "resolved": "https://registry.npmjs.org/@aerogel/cli/-/cli-0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c.tgz",
-            "integrity": "sha512-WnFk1BfLwbKqX+ig7OwgPBaAYUC9sp7lg9QrdnQDiW50FHbwFan3elNDHmNL1ICCW4tpH93B8nVHdBpI3kGd3Q==",
+            "version": "0.0.0-next.444e75523f9ddc8b8de7cd36b333f476ef86a46c",
+            "resolved": "https://registry.npmjs.org/@aerogel/cli/-/cli-0.0.0-next.444e75523f9ddc8b8de7cd36b333f476ef86a46c.tgz",
+            "integrity": "sha512-uGfqwnnz6ymSJRCvDs9dSXC+WUmKb8PCbGQL4JfSrHj2oZbSqfFzzrpgrVAzTJyoik8KG/3hwL7xulQzCfzpFA==",
             "dev": true,
             "dependencies": {
                 "@noeldemartin/utils": "0.5.0-next.dce7f1ca99862fde01601bb39d71d0eaaed3abe5",
@@ -81,9 +81,9 @@
             }
         },
         "node_modules/@aerogel/core": {
-            "version": "0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c",
-            "resolved": "https://registry.npmjs.org/@aerogel/core/-/core-0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c.tgz",
-            "integrity": "sha512-DQmR8bEaGxP0P4p2zkOFKgagObDDwLhRDLr/VO4HEfD3h2sQbBuqTGtBi07n4uuE7Le4MrO9+faA+vIIbVKqiQ==",
+            "version": "0.0.0-next.444e75523f9ddc8b8de7cd36b333f476ef86a46c",
+            "resolved": "https://registry.npmjs.org/@aerogel/core/-/core-0.0.0-next.444e75523f9ddc8b8de7cd36b333f476ef86a46c.tgz",
+            "integrity": "sha512-cDymPljmEh8mKtUt/IB+2jLJDLf7v25BrtUPadE7jHLIlj4xU28Wwmhejez26zAGQEUiMaDckaAc3VnuoO8X/Q==",
             "dependencies": {
                 "@headlessui/vue": "^1.7.14",
                 "@noeldemartin/utils": "0.5.0-next.dce7f1ca99862fde01601bb39d71d0eaaed3abe5",
@@ -97,9 +97,9 @@
             }
         },
         "node_modules/@aerogel/cypress": {
-            "version": "0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c",
-            "resolved": "https://registry.npmjs.org/@aerogel/cypress/-/cypress-0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c.tgz",
-            "integrity": "sha512-E8Xx5dbu/WPchJIQWXecQbi9VOYAwbNmEW+1M4p5i6Zvo1/Ilh/OdLWfog8Hh+BuJjMp6gd4nx94ECEIowfGTw==",
+            "version": "0.0.0-next.3e4851f6fd2a4f0f0362da0c88820a5f4b082052",
+            "resolved": "https://registry.npmjs.org/@aerogel/cypress/-/cypress-0.0.0-next.3e4851f6fd2a4f0f0362da0c88820a5f4b082052.tgz",
+            "integrity": "sha512-/KmxDASCFCaEWQJVfvyL7qA85VEVz7hyz1GtTW4x2TeTNWR0oFsh2HWw7yndb5tKuRuTcop7kMsG1qgdlF4+cg==",
             "dev": true,
             "dependencies": {
                 "@noeldemartin/solid-utils": "0.3.0-next.5176c3d9efdc3cf9d06772d0c55c24b2eb49893a",
@@ -114,9 +114,9 @@
             }
         },
         "node_modules/@aerogel/histoire": {
-            "version": "0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c",
-            "resolved": "https://registry.npmjs.org/@aerogel/histoire/-/histoire-0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c.tgz",
-            "integrity": "sha512-CFJoNo4HNBpR7Jxavro+xUPU/VUbtPlV8/61CYAIAnQon8dY53jZLzLahLCBsRIncAlFC5naAizD5QgyP5W0lQ==",
+            "version": "0.0.0-next.444e75523f9ddc8b8de7cd36b333f476ef86a46c",
+            "resolved": "https://registry.npmjs.org/@aerogel/histoire/-/histoire-0.0.0-next.444e75523f9ddc8b8de7cd36b333f476ef86a46c.tgz",
+            "integrity": "sha512-irgqoai7rnCxCflbACwoQDoThnuuyW/IAA9enCVMAuZSRhjF/Hqqht9yB6o/bhYV2+3CLuPEMjRJ0LHzPEp8Gg==",
             "dev": true,
             "dependencies": {
                 "@histoire/plugin-vue": "^0.17.6",
@@ -132,9 +132,9 @@
             }
         },
         "node_modules/@aerogel/plugin-i18n": {
-            "version": "0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c",
-            "resolved": "https://registry.npmjs.org/@aerogel/plugin-i18n/-/plugin-i18n-0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c.tgz",
-            "integrity": "sha512-0420pQsa3DNsLK/uxrc0gR/aECjhz6cYmSSImOXF9jVT3c05Hxb93SnN4qNiVkyFVvW9tHrk7guFETa5PurSrw==",
+            "version": "0.0.0-next.3e4851f6fd2a4f0f0362da0c88820a5f4b082052",
+            "resolved": "https://registry.npmjs.org/@aerogel/plugin-i18n/-/plugin-i18n-0.0.0-next.3e4851f6fd2a4f0f0362da0c88820a5f4b082052.tgz",
+            "integrity": "sha512-zCfYcY3o7XsCD7Oy4fHPEt6xxK45f6h5u9CWm/Y3linS7BhR4xcUlIlZcTxZEHnOK1Ns1Htw1cP+FjN1D1LcNw==",
             "dependencies": {
                 "@noeldemartin/utils": "0.5.0-next.dce7f1ca99862fde01601bb39d71d0eaaed3abe5",
                 "vue-i18n": "9.3.0-beta.19"
@@ -147,9 +147,9 @@
             }
         },
         "node_modules/@aerogel/plugin-solid": {
-            "version": "0.0.1-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c",
-            "resolved": "https://registry.npmjs.org/@aerogel/plugin-solid/-/plugin-solid-0.0.1-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c.tgz",
-            "integrity": "sha512-gx5CavOcW27na2+QhlPr7RuQRmFphp03rFiom18I7GHk38qaanXRhgOlp/ZIgJrGZqGT+SwDPyqW4+BW9pEv/w==",
+            "version": "0.0.1-next.3e4851f6fd2a4f0f0362da0c88820a5f4b082052",
+            "resolved": "https://registry.npmjs.org/@aerogel/plugin-solid/-/plugin-solid-0.0.1-next.3e4851f6fd2a4f0f0362da0c88820a5f4b082052.tgz",
+            "integrity": "sha512-ZyIrh+sn4T8PLn5+wQSzT3NwQagQ9s1veJrYEetVnDY+zz5jUi80B19oL27tHX9oQJ/IoYgPikjwGxOQ3mk9Ew==",
             "dependencies": {
                 "@inrupt/solid-client-authn-browser": "^1.17.3",
                 "@noeldemartin/solid-utils": "0.3.0-next.5176c3d9efdc3cf9d06772d0c55c24b2eb49893a",
@@ -167,9 +167,9 @@
             }
         },
         "node_modules/@aerogel/plugin-soukai": {
-            "version": "0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c",
-            "resolved": "https://registry.npmjs.org/@aerogel/plugin-soukai/-/plugin-soukai-0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c.tgz",
-            "integrity": "sha512-RGYrMOMFIa0XglQJLP3Ds5tvYbgRGGfBBaxiJgkIeq1DZzwuEYkt3LYyPtiejI7SjYojQgBC9ZmElSveHzo5Sw==",
+            "version": "0.0.0-next.3e4851f6fd2a4f0f0362da0c88820a5f4b082052",
+            "resolved": "https://registry.npmjs.org/@aerogel/plugin-soukai/-/plugin-soukai-0.0.0-next.3e4851f6fd2a4f0f0362da0c88820a5f4b082052.tgz",
+            "integrity": "sha512-mxHhhtDXHbN1RNzq+f12OpZIzYzV0m94vYBfdwtkf0NayOLPsVnOylBrlxVwyzGRySNeN/OQQjMEUqNn5ZkmrA==",
             "dependencies": {
                 "@noeldemartin/utils": "0.5.0-next.dce7f1ca99862fde01601bb39d71d0eaaed3abe5",
                 "vue": "^3.3.0"
@@ -183,9 +183,9 @@
             }
         },
         "node_modules/@aerogel/vite": {
-            "version": "0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c",
-            "resolved": "https://registry.npmjs.org/@aerogel/vite/-/vite-0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c.tgz",
-            "integrity": "sha512-iRR5cH7HAjuNPYa8LS94YbPIkOVSRywxJ5/4WhGrfS3Wk4FRuwx6Dh3InUzeRhwPf3XuP8onZczJ40gQdHLx7Q==",
+            "version": "0.0.0-next.3e4851f6fd2a4f0f0362da0c88820a5f4b082052",
+            "resolved": "https://registry.npmjs.org/@aerogel/vite/-/vite-0.0.0-next.3e4851f6fd2a4f0f0362da0c88820a5f4b082052.tgz",
+            "integrity": "sha512-t77ths12j/KilQE1jguOKKWnv+cJcQgVGfrgCJf1syCz2D1NHFzapgHOt6yaK8bXLO/KIn1pSdXMcb0HdZ94fA==",
             "dependencies": {
                 "@noeldemartin/utils": "0.5.0-next.dce7f1ca99862fde01601bb39d71d0eaaed3abe5",
                 "@vitejs/plugin-vue": "^4.1.0",
@@ -5226,37 +5226,6 @@
                 "vue": "^3.2.47"
             }
         },
-        "node_modules/@histoire/plugin-vue/node_modules/globby": {
-            "version": "13.2.2",
-            "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
-            "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==",
-            "dev": true,
-            "dependencies": {
-                "dir-glob": "^3.0.1",
-                "fast-glob": "^3.3.0",
-                "ignore": "^5.2.4",
-                "merge2": "^1.4.1",
-                "slash": "^4.0.0"
-            },
-            "engines": {
-                "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/@histoire/plugin-vue/node_modules/slash": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
-            "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
-            "dev": true,
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
         "node_modules/@histoire/shared": {
             "version": "0.17.6",
             "resolved": "https://registry.npmjs.org/@histoire/shared/-/shared-0.17.6.tgz",
@@ -5274,15 +5243,6 @@
                 "vite": "^2.9.0 || ^3.0.0 || ^4.0.0"
             }
         },
-        "node_modules/@histoire/shared/node_modules/@types/fs-extra": {
-            "version": "9.0.13",
-            "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.13.tgz",
-            "integrity": "sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==",
-            "dev": true,
-            "dependencies": {
-                "@types/node": "*"
-            }
-        },
         "node_modules/@histoire/vendors": {
             "version": "0.17.6",
             "resolved": "https://registry.npmjs.org/@histoire/vendors/-/vendors-0.17.6.tgz",
@@ -5323,9 +5283,9 @@
             "dev": true
         },
         "node_modules/@iconify/json": {
-            "version": "2.2.153",
-            "resolved": "https://registry.npmjs.org/@iconify/json/-/json-2.2.153.tgz",
-            "integrity": "sha512-aGX9jwdUHpH0Iqr2k5d+eRdheklsloSrnvpdgkOWZOmgNaSP5JqkuTsOgSOwZySqotFbDqZK8Il7ezMj1vCFJQ==",
+            "version": "2.2.154",
+            "resolved": "https://registry.npmjs.org/@iconify/json/-/json-2.2.154.tgz",
+            "integrity": "sha512-AafpksywlG0N1vYny+Jjdi79j0URy5HQFCnOcjcr+H24OS1nDZU4udfyQZ1rQsLqzpIOYaWOkpDODsCU9SfHcQ==",
             "dev": true,
             "dependencies": {
                 "@iconify/types": "*",
@@ -5783,9 +5743,9 @@
             }
         },
         "node_modules/@lezer/common": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.1.1.tgz",
-            "integrity": "sha512-aAPB9YbvZHqAW+bIwiuuTDGB4DG0sYNRObGLxud8cW7osw1ZQxfDuTZ8KQiqfZ0QJGcR34CvpTMDXEyo/+Htgg==",
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.1.2.tgz",
+            "integrity": "sha512-V+GqBsga5+cQJMfM0GdnHmg4DgWvLzgMWjbldBg0+jC3k9Gu6nJNZDLJxXEBT1Xj8KhRN4jmbC5CY7SIL++sVw==",
             "dev": true
         },
         "node_modules/@lezer/highlight": {
@@ -6873,6 +6833,16 @@
                 "node": ">=18.0"
             }
         },
+        "node_modules/@solid/community-server/node_modules/@types/fs-extra": {
+            "version": "11.0.4",
+            "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-11.0.4.tgz",
+            "integrity": "sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==",
+            "dev": true,
+            "dependencies": {
+                "@types/jsonfile": "*",
+                "@types/node": "*"
+            }
+        },
         "node_modules/@solid/community-server/node_modules/@types/node": {
             "version": "18.19.3",
             "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.3.tgz",
@@ -7200,12 +7170,11 @@
             "dev": true
         },
         "node_modules/@types/fs-extra": {
-            "version": "11.0.4",
-            "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-11.0.4.tgz",
-            "integrity": "sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==",
+            "version": "9.0.13",
+            "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.13.tgz",
+            "integrity": "sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==",
             "dev": true,
             "dependencies": {
-                "@types/jsonfile": "*",
                 "@types/node": "*"
             }
         },
@@ -7826,6 +7795,26 @@
                 }
             }
         },
+        "node_modules/@typescript-eslint/typescript-estree/node_modules/globby": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+            "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+            "dev": true,
+            "dependencies": {
+                "array-union": "^2.1.0",
+                "dir-glob": "^3.0.1",
+                "fast-glob": "^3.2.9",
+                "ignore": "^5.2.0",
+                "merge2": "^1.4.1",
+                "slash": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/@typescript-eslint/typescript-estree/node_modules/lru-cache": {
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -7853,6 +7842,15 @@
                 "node": ">=10"
             }
         },
+        "node_modules/@typescript-eslint/typescript-estree/node_modules/slash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/@typescript-eslint/typescript-estree/node_modules/yallist": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -7942,9 +7940,9 @@
             "dev": true
         },
         "node_modules/@vitejs/plugin-vue": {
-            "version": "4.5.1",
-            "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.5.1.tgz",
-            "integrity": "sha512-DaUzYFr+2UGDG7VSSdShKa9sIWYBa1LL8KC0MNOf2H5LjcTPjob0x8LbkqXWmAtbANJCkpiQTj66UVcQkN2s3g==",
+            "version": "4.5.2",
+            "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.5.2.tgz",
+            "integrity": "sha512-UGR3DlzLi/SaVBPX0cnSyE37vqxU3O6chn8l0HJNzQzDia6/Au2A4xKv+iIJW8w2daf80G7TYHhi1pAUjdZ0bQ==",
             "engines": {
                 "node": "^14.18.0 || >=16.0.0"
             },
@@ -8077,36 +8075,36 @@
             }
         },
         "node_modules/@vue/compiler-core": {
-            "version": "3.3.10",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.10.tgz",
-            "integrity": "sha512-doe0hODR1+i1menPkRzJ5MNR6G+9uiZHIknK3Zn5OcIztu6GGw7u0XUzf3AgB8h/dfsZC9eouzoLo3c3+N/cVA==",
+            "version": "3.3.11",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.11.tgz",
+            "integrity": "sha512-h97/TGWBilnLuRaj58sxNrsUU66fwdRKLOLQ9N/5iNDfp+DZhYH9Obhe0bXxhedl8fjAgpRANpiZfbgWyruQ0w==",
             "dependencies": {
                 "@babel/parser": "^7.23.5",
-                "@vue/shared": "3.3.10",
+                "@vue/shared": "3.3.11",
                 "estree-walker": "^2.0.2",
                 "source-map-js": "^1.0.2"
             }
         },
         "node_modules/@vue/compiler-dom": {
-            "version": "3.3.10",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.10.tgz",
-            "integrity": "sha512-NCrqF5fm10GXZIK0GrEAauBqdy+F2LZRt3yNHzrYjpYBuRssQbuPLtSnSNjyR9luHKkWSH8we5LMB3g+4z2HvA==",
+            "version": "3.3.11",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.11.tgz",
+            "integrity": "sha512-zoAiUIqSKqAJ81WhfPXYmFGwDRuO+loqLxvXmfUdR5fOitPoUiIeFI9cTTyv9MU5O1+ZZglJVTusWzy+wfk5hw==",
             "dependencies": {
-                "@vue/compiler-core": "3.3.10",
-                "@vue/shared": "3.3.10"
+                "@vue/compiler-core": "3.3.11",
+                "@vue/shared": "3.3.11"
             }
         },
         "node_modules/@vue/compiler-sfc": {
-            "version": "3.3.10",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.10.tgz",
-            "integrity": "sha512-xpcTe7Rw7QefOTRFFTlcfzozccvjM40dT45JtrE3onGm/jBLZ0JhpKu3jkV7rbDFLeeagR/5RlJ2Y9SvyS0lAg==",
+            "version": "3.3.11",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.11.tgz",
+            "integrity": "sha512-U4iqPlHO0KQeK1mrsxCN0vZzw43/lL8POxgpzcJweopmqtoYy9nljJzWDIQS3EfjiYhfdtdk9Gtgz7MRXnz3GA==",
             "dependencies": {
                 "@babel/parser": "^7.23.5",
-                "@vue/compiler-core": "3.3.10",
-                "@vue/compiler-dom": "3.3.10",
-                "@vue/compiler-ssr": "3.3.10",
-                "@vue/reactivity-transform": "3.3.10",
-                "@vue/shared": "3.3.10",
+                "@vue/compiler-core": "3.3.11",
+                "@vue/compiler-dom": "3.3.11",
+                "@vue/compiler-ssr": "3.3.11",
+                "@vue/reactivity-transform": "3.3.11",
+                "@vue/shared": "3.3.11",
                 "estree-walker": "^2.0.2",
                 "magic-string": "^0.30.5",
                 "postcss": "^8.4.32",
@@ -8114,12 +8112,12 @@
             }
         },
         "node_modules/@vue/compiler-ssr": {
-            "version": "3.3.10",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.10.tgz",
-            "integrity": "sha512-12iM4jA4GEbskwXMmPcskK5wImc2ohKm408+o9iox3tfN9qua8xL0THIZtoe9OJHnXP4eOWZpgCAAThEveNlqQ==",
+            "version": "3.3.11",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.11.tgz",
+            "integrity": "sha512-Zd66ZwMvndxRTgVPdo+muV4Rv9n9DwQ4SSgWWKWkPFebHQfVYRrVjeygmmDmPewsHyznCNvJ2P2d6iOOhdv8Qg==",
             "dependencies": {
-                "@vue/compiler-dom": "3.3.10",
-                "@vue/shared": "3.3.10"
+                "@vue/compiler-dom": "3.3.11",
+                "@vue/shared": "3.3.11"
             }
         },
         "node_modules/@vue/devtools-api": {
@@ -8177,60 +8175,60 @@
             }
         },
         "node_modules/@vue/reactivity": {
-            "version": "3.3.10",
-            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.10.tgz",
-            "integrity": "sha512-H5Z7rOY/JLO+e5a6/FEXaQ1TMuOvY4LDVgT+/+HKubEAgs9qeeZ+NhADSeEtrNQeiKLDuzeKc8v0CUFpB6Pqgw==",
+            "version": "3.3.11",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.11.tgz",
+            "integrity": "sha512-D5tcw091f0nuu+hXq5XANofD0OXnBmaRqMYl5B3fCR+mX+cXJIGNw/VNawBqkjLNWETrFW0i+xH9NvDbTPVh7g==",
             "dependencies": {
-                "@vue/shared": "3.3.10"
+                "@vue/shared": "3.3.11"
             }
         },
         "node_modules/@vue/reactivity-transform": {
-            "version": "3.3.10",
-            "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.10.tgz",
-            "integrity": "sha512-0xBdk+CKHWT+Gev8oZ63Tc0qFfj935YZx+UAynlutnrDZ4diFCVFMWixn65HzjE3S1iJppWOo6Tt1OzASH7VEg==",
+            "version": "3.3.11",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.11.tgz",
+            "integrity": "sha512-fPGjH0wqJo68A0wQ1k158utDq/cRyZNlFoxGwNScE28aUFOKFEnCBsvyD8jHn+0kd0UKVpuGuaZEQ6r9FJRqCg==",
             "dependencies": {
                 "@babel/parser": "^7.23.5",
-                "@vue/compiler-core": "3.3.10",
-                "@vue/shared": "3.3.10",
+                "@vue/compiler-core": "3.3.11",
+                "@vue/shared": "3.3.11",
                 "estree-walker": "^2.0.2",
                 "magic-string": "^0.30.5"
             }
         },
         "node_modules/@vue/runtime-core": {
-            "version": "3.3.10",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.10.tgz",
-            "integrity": "sha512-DZ0v31oTN4YHX9JEU5VW1LoIVgFovWgIVb30bWn9DG9a7oA415idcwsRNNajqTx8HQJyOaWfRKoyuP2P2TYIag==",
+            "version": "3.3.11",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.11.tgz",
+            "integrity": "sha512-g9ztHGwEbS5RyWaOpXuyIVFTschclnwhqEbdy5AwGhYOgc7m/q3NFwr50MirZwTTzX55JY8pSkeib9BX04NIpw==",
             "dependencies": {
-                "@vue/reactivity": "3.3.10",
-                "@vue/shared": "3.3.10"
+                "@vue/reactivity": "3.3.11",
+                "@vue/shared": "3.3.11"
             }
         },
         "node_modules/@vue/runtime-dom": {
-            "version": "3.3.10",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.10.tgz",
-            "integrity": "sha512-c/jKb3ny05KJcYk0j1m7Wbhrxq7mZYr06GhKykDMNRRR9S+/dGT8KpHuNQjv3/8U4JshfkAk6TpecPD3B21Ijw==",
+            "version": "3.3.11",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.11.tgz",
+            "integrity": "sha512-OlhtV1PVpbgk+I2zl+Y5rQtDNcCDs12rsRg71XwaA2/Rbllw6mBLMi57VOn8G0AjOJ4Mdb4k56V37+g8ukShpQ==",
             "dependencies": {
-                "@vue/runtime-core": "3.3.10",
-                "@vue/shared": "3.3.10",
+                "@vue/runtime-core": "3.3.11",
+                "@vue/shared": "3.3.11",
                 "csstype": "^3.1.2"
             }
         },
         "node_modules/@vue/server-renderer": {
-            "version": "3.3.10",
-            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.10.tgz",
-            "integrity": "sha512-0i6ww3sBV3SKlF3YTjSVqKQ74xialMbjVYGy7cOTi7Imd8ediE7t72SK3qnvhrTAhOvlQhq6Bk6nFPdXxe0sAg==",
+            "version": "3.3.11",
+            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.11.tgz",
+            "integrity": "sha512-AIWk0VwwxCAm4wqtJyxBylRTXSy1wCLOKbWxHaHiu14wjsNYtiRCSgVuqEPVuDpErOlRdNnuRgipQfXRLjLN5A==",
             "dependencies": {
-                "@vue/compiler-ssr": "3.3.10",
-                "@vue/shared": "3.3.10"
+                "@vue/compiler-ssr": "3.3.11",
+                "@vue/shared": "3.3.11"
             },
             "peerDependencies": {
-                "vue": "3.3.10"
+                "vue": "3.3.11"
             }
         },
         "node_modules/@vue/shared": {
-            "version": "3.3.10",
-            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.10.tgz",
-            "integrity": "sha512-2y3Y2J1a3RhFa0WisHvACJR2ncvWiVHcP8t0Inxo+NKz+8RKO4ZV8eZgCxRgQoA6ITfV12L4E6POOL9HOU5nqw=="
+            "version": "3.3.11",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.11.tgz",
+            "integrity": "sha512-u2G8ZQ9IhMWTMXaWqZycnK4UthG1fA238CD+DP4Dm4WJi5hdUKKLg0RMRaRpDPNMdkTwIDkp7WtD0Rd9BH9fLw=="
         },
         "node_modules/@yarnpkg/lockfile": {
             "version": "1.1.0",
@@ -9240,17 +9238,6 @@
                 "fsevents": "~2.3.2"
             }
         },
-        "node_modules/chokidar/node_modules/glob-parent": {
-            "version": "5.1.2",
-            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-            "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-            "dependencies": {
-                "is-glob": "^4.0.1"
-            },
-            "engines": {
-                "node": ">= 6"
-            }
-        },
         "node_modules/ci-info": {
             "version": "3.9.0",
             "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
@@ -10386,9 +10373,9 @@
             }
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.607",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.607.tgz",
-            "integrity": "sha512-YUlnPwE6eYxzwBnFmawA8LiLRfm70R2aJRIUv0n03uHt/cUzzYACOogmvk8M2+hVzt/kB80KJXx7d5f5JofPvQ=="
+            "version": "1.4.608",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.608.tgz",
+            "integrity": "sha512-J2f/3iIIm3Mo0npneITZ2UPe4B1bg8fTNrFjD8715F/k1BvbviRuqYGkET1PgprrczXYTHFvotbBOmUp6KE0uA=="
         },
         "node_modules/emoji-regex": {
             "version": "8.0.0",
@@ -10779,6 +10766,18 @@
                 "url": "https://opencollective.com/eslint"
             }
         },
+        "node_modules/eslint/node_modules/glob-parent": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+            "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+            "dev": true,
+            "dependencies": {
+                "is-glob": "^4.0.3"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
         "node_modules/eslint/node_modules/globals": {
             "version": "13.23.0",
             "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz",
@@ -11065,17 +11064,6 @@
                 "node": ">=8.6.0"
             }
         },
-        "node_modules/fast-glob/node_modules/glob-parent": {
-            "version": "5.1.2",
-            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-            "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-            "dependencies": {
-                "is-glob": "^4.0.1"
-            },
-            "engines": {
-                "node": ">= 6"
-            }
-        },
         "node_modules/fast-json-stable-stringify": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -11613,14 +11601,14 @@
             }
         },
         "node_modules/glob-parent": {
-            "version": "6.0.2",
-            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-            "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+            "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
             "dependencies": {
-                "is-glob": "^4.0.3"
+                "is-glob": "^4.0.1"
             },
             "engines": {
-                "node": ">=10.13.0"
+                "node": ">= 6"
             }
         },
         "node_modules/global-dirs": {
@@ -11661,20 +11649,19 @@
             }
         },
         "node_modules/globby": {
-            "version": "11.1.0",
-            "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-            "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+            "version": "13.2.2",
+            "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
+            "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==",
             "dev": true,
             "dependencies": {
-                "array-union": "^2.1.0",
                 "dir-glob": "^3.0.1",
-                "fast-glob": "^3.2.9",
-                "ignore": "^5.2.0",
+                "fast-glob": "^3.3.0",
+                "ignore": "^5.2.4",
                 "merge2": "^1.4.1",
-                "slash": "^3.0.0"
+                "slash": "^4.0.0"
             },
             "engines": {
-                "node": ">=10"
+                "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
             },
             "funding": {
                 "url": "https://github.com/sponsors/sindresorhus"
@@ -12009,25 +11996,6 @@
                 "node": ">=12"
             }
         },
-        "node_modules/histoire/node_modules/globby": {
-            "version": "13.2.2",
-            "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
-            "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==",
-            "dev": true,
-            "dependencies": {
-                "dir-glob": "^3.0.1",
-                "fast-glob": "^3.3.0",
-                "ignore": "^5.2.4",
-                "merge2": "^1.4.1",
-                "slash": "^4.0.0"
-            },
-            "engines": {
-                "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
         "node_modules/histoire/node_modules/jsonfile": {
             "version": "6.1.0",
             "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -12040,18 +12008,6 @@
                 "graceful-fs": "^4.1.6"
             }
         },
-        "node_modules/histoire/node_modules/slash": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
-            "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
-            "dev": true,
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
         "node_modules/histoire/node_modules/universalify": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
@@ -12927,6 +12883,15 @@
                 "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
             }
         },
+        "node_modules/jest-message-util/node_modules/slash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/jest-util": {
             "version": "29.7.0",
             "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
@@ -17159,12 +17124,15 @@
             }
         },
         "node_modules/slash": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+            "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
             "dev": true,
             "engines": {
-                "node": ">=8"
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
             }
         },
         "node_modules/slice-ansi": {
@@ -17989,6 +17957,17 @@
                 "node": ">=14.0.0"
             }
         },
+        "node_modules/tailwindcss/node_modules/glob-parent": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+            "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+            "dependencies": {
+                "is-glob": "^4.0.3"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
         "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
             "version": "6.0.13",
             "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
@@ -18038,9 +18017,9 @@
             }
         },
         "node_modules/terser": {
-            "version": "5.25.0",
-            "resolved": "https://registry.npmjs.org/terser/-/terser-5.25.0.tgz",
-            "integrity": "sha512-we0I9SIsfvNUMP77zC9HG+MylwYYsGFSBG8qm+13oud2Yh+O104y614FRbyjpxys16jZwot72Fpi827YvGzuqg==",
+            "version": "5.26.0",
+            "resolved": "https://registry.npmjs.org/terser/-/terser-5.26.0.tgz",
+            "integrity": "sha512-dytTGoE2oHgbNV9nTzgBEPaqAWvcJNl66VZ0BkJqlvp71IjO8CxdBx/ykCNb47cLnCmCvRZ6ZR0tLkqvZCdVBQ==",
             "dependencies": {
                 "@jridgewell/source-map": "^0.3.3",
                 "acorn": "^8.8.2",
@@ -19078,15 +19057,15 @@
             }
         },
         "node_modules/vue": {
-            "version": "3.3.10",
-            "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.10.tgz",
-            "integrity": "sha512-zg6SIXZdTBwiqCw/1p+m04VyHjLfwtjwz8N57sPaBhEex31ND0RYECVOC1YrRwMRmxFf5T1dabl6SGUbMKKuVw==",
-            "dependencies": {
-                "@vue/compiler-dom": "3.3.10",
-                "@vue/compiler-sfc": "3.3.10",
-                "@vue/runtime-dom": "3.3.10",
-                "@vue/server-renderer": "3.3.10",
-                "@vue/shared": "3.3.10"
+            "version": "3.3.11",
+            "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.11.tgz",
+            "integrity": "sha512-d4oBctG92CRO1cQfVBZp6WJAs0n8AK4Xf5fNjQCBeKCvMI1efGQ5E3Alt1slFJS9fZuPcFoiAiqFvQlv1X7t/w==",
+            "dependencies": {
+                "@vue/compiler-dom": "3.3.11",
+                "@vue/compiler-sfc": "3.3.11",
+                "@vue/runtime-dom": "3.3.11",
+                "@vue/server-renderer": "3.3.11",
+                "@vue/shared": "3.3.11"
             },
             "peerDependencies": {
                 "typescript": "*"
diff --git a/package.json b/package.json
index dd52c18..ee12b05 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/typography": "^0.5.9",
         "soukai": "next",
-        "soukai-solid": "0.5.2-next.b6340345e228903e404a02c1ed9be8fc95162e8f",
+        "soukai-solid": "next",
         "tailwindcss": "^3.3.2",
         "vue": "^3.3.0",
         "vue-i18n": "9.3.0-beta.19"
@@ -38,7 +38,7 @@
     "devDependencies": {
         "@aerogel/cli": "next",
         "@aerogel/cypress": "next",
-        "@aerogel/histoire": "0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c",
+        "@aerogel/histoire": "next",
         "@aerogel/vite": "next",
         "@iconify/json": "^2.2.134",
         "@noeldemartin/eslint-config-vue": "next",
diff --git a/src/components/AppLoginForm.vue b/src/components/AppLoginForm.vue
index 18bdb1d..1c3c576 100644
--- a/src/components/AppLoginForm.vue
+++ b/src/components/AppLoginForm.vue
@@ -16,7 +16,10 @@
                     class="text-sm opacity-90"
                 />
                 <div class="flex flex-row-reverse justify-start">
-                    <TextButton color="secondary" @click="$ui.loading($solid.reconnect({ onError, force: true }))">
+                    <TextButton
+                        color="solid-secondary"
+                        @click="$ui.loading($solid.reconnect({ onError, force: true }))"
+                    >
                         {{ $t('login.reconnect') }}
                     </TextButton>
                     <TextButton class="mr-3" color="clear" @click="$solid.logout(true)">
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..2dc05a3
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,15 @@
+import { UIComponents } from '@aerogel/core';
+
+import AlertModal from './overrides/AlertModal.vue';
+import ConfirmModal from './overrides/ConfirmModal.vue';
+import ErrorReportModal from './overrides/ErrorReportModal.vue';
+import LoadingModal from './overrides/LoadingModal.vue';
+import SnackbarNotification from './overrides/SnackbarNotification.vue';
+
+export const components = {
+    [UIComponents.AlertModal]: AlertModal,
+    [UIComponents.ConfirmModal]: ConfirmModal,
+    [UIComponents.ErrorReportModal]: ErrorReportModal,
+    [UIComponents.LoadingModal]: LoadingModal,
+    [UIComponents.Snackbar]: SnackbarNotification,
+};
diff --git a/src/components/inputs/TextButton.story.vue b/src/components/inputs/TextButton.story.vue
index 3a9e4d4..9ee0c7d 100644
--- a/src/components/inputs/TextButton.story.vue
+++ b/src/components/inputs/TextButton.story.vue
@@ -27,6 +27,12 @@
             </TextButton>
         </Variant>
 
+        <Variant title="Disabled">
+            <TextButton disabled>
+                You can't click me
+            </TextButton>
+        </Variant>
+
         <Variant title="Colors" :layout="{ width: '300px' }">
             <div class="flex items-center gap-2">
                 <TextButton color="primary">
@@ -38,6 +44,9 @@
                 <TextButton color="solid">
                     Solid
                 </TextButton>
+                <TextButton color="solid-secondary">
+                    Solid Secondary
+                </TextButton>
                 <TextButton color="danger">
                     Danger
                 </TextButton>
@@ -63,7 +72,7 @@ const colorOptions = invert(Colors);
 
 <style>
 .story-textbutton {
-    grid-template-columns: repeat(3, 200px) !important;
+    grid-template-columns: repeat(2, 300px) !important;
 }
 
 .story-textbutton .variant-playground,
diff --git a/src/components/inputs/TextButton.vue b/src/components/inputs/TextButton.vue
index 3e2161f..70bfd20 100644
--- a/src/components/inputs/TextButton.vue
+++ b/src/components/inputs/TextButton.vue
@@ -1,20 +1,22 @@
 <template>
     <AGHeadlessButton
         class="rounded-md px-3 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
-        :class="colorClasses"
+        :class="variantClasses"
+        :disabled="disabled"
     >
         <slot />
     </AGHeadlessButton>
 </template>
 
 <script setup lang="ts">
-import { enumProp } from '@aerogel/core';
+import { booleanProp, enumProp, removeInteractiveClasses } from '@aerogel/core';
 import { computed } from 'vue';
 
 import { Colors } from '@/lib/colors';
 
 const props = defineProps({
     color: enumProp(Colors, Colors.Primary),
+    disabled: booleanProp(),
 });
 
 const colorClasses = computed(() => {
@@ -25,12 +27,18 @@ const colorClasses = computed(() => {
             return 'bg-red-600 font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline-red-600';
         case Colors.Secondary:
             return `
-                text-solid-500 ring-1 ring-inset ring-solid-500 shadow-sm
+                text-emerald-500 ring-1 ring-inset ring-emerald-500 shadow-sm
                 hover:bg-gray-200
-                focus-visible:outline-solid-500
+                focus-visible:outline-emerald-500
             `;
         case Colors.Solid:
             return 'bg-solid-600 font-semibold text-white shadow-sm hover:bg-solid-500 focus-visible:outline-solid-600';
+        case Colors.SolidSecondary:
+            return `
+                text-solid-500 ring-1 ring-inset ring-solid-500 shadow-sm
+                hover:bg-gray-200
+                focus-visible:outline-solid-500
+            `;
         case Colors.Primary:
         default:
             return `
@@ -40,4 +48,12 @@ const colorClasses = computed(() => {
             `;
     }
 });
+
+const variantClasses = computed(() => {
+    if (props.disabled) {
+        return `opacity-50 ${removeInteractiveClasses(colorClasses.value)}`;
+    }
+
+    return colorClasses.value;
+});
 </script>
diff --git a/src/components/overrides/AlertModal.vue b/src/components/overrides/AlertModal.vue
new file mode 100644
index 0000000..57502ac
--- /dev/null
+++ b/src/components/overrides/AlertModal.vue
@@ -0,0 +1,11 @@
+<template>
+    <ModalWrapper :title="title">
+        <AGMarkdown :text="message" class="text-sm text-gray-500" />
+    </ModalWrapper>
+</template>
+
+<script setup lang="ts">
+import { useAlertModalProps } from '@aerogel/core';
+
+defineProps(useAlertModalProps());
+</script>
diff --git a/src/components/overrides/ConfirmModal.vue b/src/components/overrides/ConfirmModal.vue
new file mode 100644
index 0000000..6a43b46
--- /dev/null
+++ b/src/components/overrides/ConfirmModal.vue
@@ -0,0 +1,20 @@
+<template>
+    <ModalWrapper v-slot="{ close }" :title="title" :cancellable="false">
+        <AGMarkdown :text="message" class="text-sm text-gray-500" />
+        <div class="mt-4 flex flex-row-reverse">
+            <TextButton @click="close(true)">
+                {{ renderedAcceptText }}
+            </TextButton>
+            <TextButton color="clear" class="mr-2" @click="close(false)">
+                {{ renderedCancelText }}
+            </TextButton>
+        </div>
+    </ModalWrapper>
+</template>
+
+<script setup lang="ts">
+import { useConfirmModal, useConfirmModalProps } from '@aerogel/core';
+
+const props = defineProps(useConfirmModalProps());
+const { renderedAcceptText, renderedCancelText } = useConfirmModal(props);
+</script>
diff --git a/src/components/overrides/ErrorReportModal.vue b/src/components/overrides/ErrorReportModal.vue
new file mode 100644
index 0000000..693a4ee
--- /dev/null
+++ b/src/components/overrides/ErrorReportModal.vue
@@ -0,0 +1,71 @@
+<template>
+    <ModalWrapper no-padding>
+        <div class="p-4">
+            <h2 class="flex justify-between gap-4">
+                <div class="flex items-center gap-2">
+                    <i-zondicons-exclamation-solid class="h-5 w-5 text-red-600" />
+                    <AGErrorReportModalTitle
+                        class="text-lg font-semibold leading-6 text-gray-900"
+                        :report="report"
+                        :current-report="activeReportIndex + 1"
+                        :total-reports="reports.length"
+                    />
+                    <span v-if="reports.length > 1" class="flex gap-0.5">
+                        <TextButton
+                            icon
+                            color="clear"
+                            :disabled="activeReportIndex === 0"
+                            :aria-label="previousReportText"
+                            :title="previousReportText"
+                            @click="activeReportIndex--"
+                        >
+                            <i-zondicons-cheveron-left class="h-4 w-4" />
+                        </TextButton>
+                        <TextButton
+                            icon
+                            color="clear"
+                            :disabled="activeReportIndex === reports.length - 1"
+                            :aria-label="nextReportText"
+                            :title="nextReportText"
+                            @click="activeReportIndex++"
+                        >
+                            <i-zondicons-cheveron-right class="h-4 w-4" />
+                        </TextButton>
+                    </span>
+                </div>
+                <AGErrorReportModalButtons :report="report" class="gap-2">
+                    <template
+                        #default="{
+                            url,
+                            handler,
+                            iconComponent,
+                            description,
+                        }: IAGErrorReportModalButtonsDefaultSlotProps"
+                    >
+                        <TextButton
+                            :url="url"
+                            color="secondary"
+                            class="flex items-center gap-1"
+                            @click="handler"
+                        >
+                            <component :is="iconComponent" />
+                            {{ description }}
+                        </TextButton>
+                    </template>
+                </AGErrorReportModalButtons>
+            </h2>
+            <AGMarkdown v-if="report.description" :text="report.description" class="text-gray-600" />
+        </div>
+        <div class="-mt-2 max-h-[80vh] overflow-auto bg-red-50">
+            <pre class="p-4 text-xs text-red-800" v-text="details" />
+        </div>
+    </ModalWrapper>
+</template>
+
+<script setup lang="ts">
+import { useErrorReportModal, useErrorReportModalProps } from '@aerogel/core';
+import type { IAGErrorReportModalButtonsDefaultSlotProps } from '@aerogel/core';
+
+const props = defineProps(useErrorReportModalProps());
+const { activeReportIndex, details, nextReportText, previousReportText, report } = useErrorReportModal(props);
+</script>
diff --git a/src/components/overrides/LoadingModal.vue b/src/components/overrides/LoadingModal.vue
new file mode 100644
index 0000000..1a520c3
--- /dev/null
+++ b/src/components/overrides/LoadingModal.vue
@@ -0,0 +1,15 @@
+<template>
+    <ModalWrapper :cancellable="false">
+        <div class="flex items-center justify-center gap-2">
+            <i-svg-spinners:90-ring-with-bg class="h-8 w-8 flex-shrink-0 text-emerald-600" />
+            <AGMarkdown :text="renderedMessage" class="text-gray-500" />
+        </div>
+    </ModalWrapper>
+</template>
+
+<script setup lang="ts">
+import { useLoadingModal, useLoadingModalProps } from '@aerogel/core';
+
+const props = defineProps(useLoadingModalProps());
+const { renderedMessage } = useLoadingModal(props);
+</script>
diff --git a/src/components/overrides/ModalWrapper.vue b/src/components/overrides/ModalWrapper.vue
new file mode 100644
index 0000000..f4d11c2
--- /dev/null
+++ b/src/components/overrides/ModalWrapper.vue
@@ -0,0 +1,37 @@
+<template>
+    <AGHeadlessModal
+        ref="$modal"
+        v-slot="{ close }"
+        v-bind="props"
+        class="relative z-50"
+    >
+        <div class="fixed inset-0 z-10">
+            <div class="flex h-full items-center justify-center p-4 text-center">
+                <AGHeadlessModalPanel
+                    class="relative max-h-full transform overflow-auto rounded-lg bg-white text-left shadow-xl"
+                    :class="{ 'p-4': !noPadding }"
+                >
+                    <AGHeadlessModalTitle v-if="title" class="text-base font-semibold leading-6 text-gray-900">
+                        <AGMarkdown :text="title" inline />
+                    </AGHeadlessModalTitle>
+                    <slot :close="close" />
+                </AGHeadlessModalPanel>
+            </div>
+        </div>
+    </AGHeadlessModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { booleanProp, useModalExpose, useModalProps } from '@aerogel/core';
+import type { IAGHeadlessModal, IAGModal } from '@aerogel/core';
+
+const props = defineProps({
+    noPadding: booleanProp(),
+    ...useModalProps(),
+});
+const $modal = ref<IAGHeadlessModal>();
+
+defineOptions({ inheritAttrs: false });
+defineExpose<IAGModal>(useModalExpose($modal));
+</script>
diff --git a/src/components/overrides/Overrides.story.vue b/src/components/overrides/Overrides.story.vue
new file mode 100644
index 0000000..752b72e
--- /dev/null
+++ b/src/components/overrides/Overrides.story.vue
@@ -0,0 +1,86 @@
+<template>
+    <Story :layout="{ type: 'grid', width: '90%' }">
+        <Variant title="Playground">
+            <div class="flex space-x-3">
+                <TextButton @click="$ui.alert(alertTitle, alertMessage)">
+                    Alert
+                </TextButton>
+                <TextButton @click="$ui.confirm(confirmTitle, confirmMessage)">
+                    Confirm
+                </TextButton>
+                <TextButton @click="$ui.loading(loadingMessage, after({ seconds: loadingDuration }))">
+                    Loading
+                </TextButton>
+                <TextButton @click="$ui.showSnackbar(snackbarMessage, snackbarOptions)">
+                    Snackbar
+                </TextButton>
+                <TextButton @click="$errors.inspect(errorReports)">
+                    Error Report
+                </TextButton>
+            </div>
+
+            <AGAppOverlays />
+
+            <template #controls>
+                <HstText v-model="alertTitle" title="Alert Title" />
+                <HstText v-model="alertMessage" title="Alert Message" />
+                <HstText v-model="confirmTitle" title="Confirm Title" />
+                <HstText v-model="confirmMessage" title="Confirm Message" />
+                <HstText v-model="loadingMessage" title="Loading Message" />
+                <HstNumber v-model="loadingDuration" title="Loading Duration" />
+                <HstText v-model="snackbarMessage" title="Snackbar Message" />
+                <HstSelect v-model="snackbarColor" title="Snackbar Color" :options="snackbarColors" />
+                <HstText v-model="snackbarAction" title="Snackbar Action" />
+                <HstText v-model="errorReportTitle" title="Error Report Title" />
+                <HstText v-model="errorReportDescription" title="Error Report Description" />
+            </template>
+        </Variant>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { after, invert } from '@noeldemartin/utils';
+import { Colors, SnackbarColors } from '@aerogel/core';
+import type { ErrorReport, ShowSnackbarOptions } from '@aerogel/core';
+
+const alertTitle = ref('Something important happened');
+const alertMessage = ref('And here you can read the details...');
+const confirmTitle = ref('Confirmation');
+const confirmMessage = ref('Are you sure?');
+const loadingMessage = ref('Loading...');
+const loadingDuration = ref(3);
+const snackbarMessage = ref('Something happened');
+const snackbarColor = ref(Colors.Secondary);
+const snackbarColors = invert(SnackbarColors);
+const snackbarAction = ref('Ok');
+const snackbarOptions = computed((): ShowSnackbarOptions => {
+    if (!snackbarAction.value) {
+        return {};
+    }
+
+    return {
+        color: snackbarColor.value,
+        actions: [
+            {
+                text: snackbarAction.value,
+                dismiss: true,
+            },
+        ],
+    };
+});
+const errorReportTitle = ref('Error');
+const errorReportDescription = ref('Something went wrong!');
+const errorReports = computed((): ErrorReport[] => [
+    {
+        title: errorReportTitle.value,
+        description: errorReportDescription.value,
+        details: new Error().stack,
+    },
+    {
+        title: errorReportTitle.value,
+        description: errorReportDescription.value,
+        details: new Error().stack,
+    },
+]);
+</script>
diff --git a/src/components/overrides/SnackbarNotification.vue b/src/components/overrides/SnackbarNotification.vue
new file mode 100644
index 0000000..33a2f25
--- /dev/null
+++ b/src/components/overrides/SnackbarNotification.vue
@@ -0,0 +1,39 @@
+<template>
+    <AGHeadlessSnackbar
+        :class="colorClasses"
+        class="flex max-w-md rounded-lg shadow-lg ring-1 ring-black ring-opacity-5"
+    >
+        <div class="p-2">
+            <span class="p-2">
+                <AGMarkdown :text="message" inline />
+            </span>
+
+            <TextButton
+                v-for="(action, i) of actions"
+                :key="i"
+                :color="color"
+                @click="activate(action)"
+            >
+                {{ action.text }}
+            </TextButton>
+        </div>
+    </AGHeadlessSnackbar>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Colors, useSnackbar, useSnackbarProps } from '@aerogel/core';
+
+const props = defineProps(useSnackbarProps());
+const { activate } = useSnackbar(props);
+
+const colorClasses = computed(() => {
+    switch (props.color) {
+        case Colors.Danger:
+            return 'bg-red-50';
+        case Colors.Secondary:
+        default:
+            return 'bg-white';
+    }
+});
+</script>
diff --git a/src/lib/colors.ts b/src/lib/colors.ts
index 2111375..b2da1c5 100644
--- a/src/lib/colors.ts
+++ b/src/lib/colors.ts
@@ -3,6 +3,7 @@ import { Colors as AerogelColors } from '@aerogel/core';
 export const Colors = {
     ...AerogelColors,
     Solid: 'solid',
+    SolidSecondary: 'solid-secondary',
 };
 
 export type Color = (typeof Colors)[keyof typeof Colors];
diff --git a/src/main.histoire.ts b/src/main.histoire.ts
index 653e646..3afa4bf 100644
--- a/src/main.histoire.ts
+++ b/src/main.histoire.ts
@@ -1,8 +1,11 @@
 import '@aerogel/histoire/dist/styles.css';
 import { defineSetupAerogel } from '@aerogel/histoire';
 
+import { components } from './components';
+
 import './assets/css/styles.css';
 
 export const setupVue3 = defineSetupAerogel({
+    components,
     messages: import.meta.glob('@/lang/*.yaml'),
 });
diff --git a/src/main.ts b/src/main.ts
index 0b3938e..4390651 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,13 +1,15 @@
 import i18n from '@aerogel/plugin-i18n';
 import solid from '@aerogel/plugin-solid';
 import soukai from '@aerogel/plugin-soukai';
-import { bootstrapApplication } from '@aerogel/core';
+import { bootstrap } from '@aerogel/core';
 
 import './assets/css/styles.css';
 import App from './App.vue';
+import { components } from './components';
 import { services } from './services';
 
-bootstrapApplication(App, {
+bootstrap(App, {
+    components,
     services,
     plugins: [
         i18n({ messages: import.meta.glob('@/lang/*.yaml') }),