diff --git a/.gitignore b/.gitignore
index 03de3c332..79637ada3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,7 +6,6 @@ node_modules
 .react-router/
 .env
 translation-progress.md
-**/*/__screenshots__
 
 notes.md
 
@@ -25,5 +24,6 @@ dump
 /test-results/
 /playwright-report/
 /playwright/.cache/
+/.vitest-attachments
 
 notepad.txt
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Abilities-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Abilities-chromium-darwin.png
new file mode 100644
index 000000000..ddc631b71
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Abilities-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Alerts-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Alerts-chromium-darwin.png
new file mode 100644
index 000000000..1c4116af7
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Alerts-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Avatar-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Avatar-chromium-darwin.png
new file mode 100644
index 000000000..2c987f474
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Avatar-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Badges-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Badges-chromium-darwin.png
new file mode 100644
index 000000000..4b7ee9383
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Badges-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Buttons-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Buttons-chromium-darwin.png
new file mode 100644
index 000000000..dd1e552a9
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Buttons-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Checkboxes-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Checkboxes-chromium-darwin.png
new file mode 100644
index 000000000..ccaf98eb4
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Checkboxes-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Buttons-section-1.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Buttons-section-1.png
new file mode 100644
index 000000000..74e5fd866
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Buttons-section-1.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Checkboxes-section-1.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Checkboxes-section-1.png
new file mode 100644
index 000000000..505c160d2
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Checkboxes-section-1.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Date-Pickers-section-1.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Date-Pickers-section-1.png
new file mode 100644
index 000000000..87cbab164
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Date-Pickers-section-1.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Dialog-section-1.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Dialog-section-1.png
new file mode 100644
index 000000000..8c165466c
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Dialog-section-1.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Divider-section-1.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Divider-section-1.png
new file mode 100644
index 000000000..c79502391
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Divider-section-1.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Fieldsets-section-1.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Fieldsets-section-1.png
new file mode 100644
index 000000000..584c5c908
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Fieldsets-section-1.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Inputs-section-1.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Inputs-section-1.png
new file mode 100644
index 000000000..1e4459c6e
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Inputs-section-1.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Menu-section-1.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Menu-section-1.png
new file mode 100644
index 000000000..3cd73a533
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Menu-section-1.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Miscellaneous-section-1.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Miscellaneous-section-1.png
new file mode 100644
index 000000000..e8cd79362
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Miscellaneous-section-1.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Pagination-section-1.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Pagination-section-1.png
new file mode 100644
index 000000000..55d953db6
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Pagination-section-1.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Popover-section-1.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Popover-section-1.png
new file mode 100644
index 000000000..2d7b0d41f
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Popover-section-1.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Radio-Buttons-section-1.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Radio-Buttons-section-1.png
new file mode 100644
index 000000000..e19a0d420
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Radio-Buttons-section-1.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Select-section-1.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Select-section-1.png
new file mode 100644
index 000000000..7c0830f30
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Select-section-1.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Sub-Navigation-section-1.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Sub-Navigation-section-1.png
new file mode 100644
index 000000000..75a348ef1
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Sub-Navigation-section-1.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Switch-section-1.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Switch-section-1.png
new file mode 100644
index 000000000..9d16ec9b3
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Switch-section-1.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Table-section-1.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Table-section-1.png
new file mode 100644
index 000000000..8d3d030fc
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Table-section-1.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Tabs-section-1.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Tabs-section-1.png
new file mode 100644
index 000000000..ff192078b
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Tabs-section-1.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Toast-section-1.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Toast-section-1.png
new file mode 100644
index 000000000..356ec033d
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Components-Showcase-visual-regression-Toast-section-1.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Date-Pickers-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Date-Pickers-chromium-darwin.png
new file mode 100644
index 000000000..1207c8163
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Date-Pickers-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Details-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Details-chromium-darwin.png
new file mode 100644
index 000000000..b701fc398
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Details-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Dialog-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Dialog-chromium-darwin.png
new file mode 100644
index 000000000..e6ce95821
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Dialog-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Divider-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Divider-chromium-darwin.png
new file mode 100644
index 000000000..63f29a6b0
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Divider-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Fieldsets-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Fieldsets-chromium-darwin.png
new file mode 100644
index 000000000..73f2a3eba
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Fieldsets-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Flags-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Flags-chromium-darwin.png
new file mode 100644
index 000000000..fa310d4f8
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Flags-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Form-Components-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Form-Components-chromium-darwin.png
new file mode 100644
index 000000000..9956a0de6
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Form-Components-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Form-Messages-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Form-Messages-chromium-darwin.png
new file mode 100644
index 000000000..fc33db77d
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Form-Messages-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Game-Selects-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Game-Selects-chromium-darwin.png
new file mode 100644
index 000000000..211ef45c3
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Game-Selects-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Inputs-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Inputs-chromium-darwin.png
new file mode 100644
index 000000000..0570d5716
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Inputs-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Menu-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Menu-chromium-darwin.png
new file mode 100644
index 000000000..94e189705
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Menu-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Miscellaneous-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Miscellaneous-chromium-darwin.png
new file mode 100644
index 000000000..65f05674e
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Miscellaneous-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Pagination-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Pagination-chromium-darwin.png
new file mode 100644
index 000000000..778714929
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Pagination-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Placements-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Placements-chromium-darwin.png
new file mode 100644
index 000000000..e68b20d9f
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Placements-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Popover-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Popover-chromium-darwin.png
new file mode 100644
index 000000000..6b2a8c980
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Popover-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Radio-Buttons-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Radio-Buttons-chromium-darwin.png
new file mode 100644
index 000000000..f8e437083
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Radio-Buttons-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Select-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Select-chromium-darwin.png
new file mode 100644
index 000000000..55e19523e
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Select-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Splatoon-Images-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Splatoon-Images-chromium-darwin.png
new file mode 100644
index 000000000..dddae6424
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Splatoon-Images-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Sub-Navigation-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Sub-Navigation-chromium-darwin.png
new file mode 100644
index 000000000..0a6294e85
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Sub-Navigation-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Switch-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Switch-chromium-darwin.png
new file mode 100644
index 000000000..2650f2a35
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Switch-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Table-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Table-chromium-darwin.png
new file mode 100644
index 000000000..0427ca06a
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Table-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Tabs-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Tabs-chromium-darwin.png
new file mode 100644
index 000000000..15665f10a
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Tabs-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Theme-Editor-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Theme-Editor-chromium-darwin.png
new file mode 100644
index 000000000..e9cd33f75
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Theme-Editor-chromium-darwin.png differ
diff --git a/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Toast-chromium-darwin.png b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Toast-chromium-darwin.png
new file mode 100644
index 000000000..a20791404
Binary files /dev/null and b/app/features/components-showcase/__screenshots__/ComponentsShowcase.browser.test.tsx/Toast-chromium-darwin.png differ