diff --git a/config/exceptions.yaml b/config/exceptions.yaml
index fff78407617..124f370d643 100644
--- a/config/exceptions.yaml
+++ b/config/exceptions.yaml
@@ -77,8 +77,10 @@ packageJson:
       "./components/Account": "./components/Account/index.mjs"
       "./components/Breadcrumbs": "./components/Breadcrumbs/index.mjs"
       "./components/Button": "./components/Button/index.mjs"
+      "./components/Collection": "./components/Collection/index.mjs"
       "./components/Control": "./components/Control/index.mjs"
       "./components/CopyToClipboard": "./components/CopyToClipboard/index.mjs"
+      "./components/Design": "./components/Design/index.mjs"
       "./components/Docusaurus": "./components/Docusaurus/index.mjs"
       "./components/Editor": "./components/Editor/index.mjs"
       "./components/Highlight": "./components/Highlight/index.mjs"
diff --git a/config/software/designs.json b/config/software/designs.json
index 147150bb620..9416fcec2f8 100644
--- a/config/software/designs.json
+++ b/config/software/designs.json
@@ -4,8 +4,6 @@
     "description": "A FreeSewing pattern for a A-shirt or tank top",
     "design": "Joost De Cock",
     "difficulty": 2,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops",
       "underwear"
@@ -13,8 +11,8 @@
     "techniques": [
       "hem",
       "stretch",
-      "knitBinding",
-      "curvedSeam"
+      "knit-binding",
+      "curved-seam"
     ]
   },
   "albert": {
@@ -22,15 +20,13 @@
     "description": "A FreeSewing pattern for an apron",
     "design": "Wouter Van Wageningen",
     "difficulty": 2,
-    "lab": true,
-    "org": true,
     "tags": [
       "accessories"
     ],
     "techniques": [
       "hem",
-      "knitBinding",
-      "curvedSeam",
+      "knit-binding",
+      "curved-seam",
       "pocket"
     ]
   },
@@ -39,8 +35,6 @@
     "description": "A FreeSewing pattern for a bikini top",
     "design": "PrudenceRabbit",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops",
       "swimwear"
@@ -48,7 +42,7 @@
     "techniques": [
       "hem",
       "stretch",
-      "curvedSeam",
+      "curved-seam",
       "precision"
     ]
   },
@@ -60,8 +54,6 @@
       "Joost De Cock"
     ],
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "blocks",
       "tops"
@@ -76,8 +68,6 @@
     "description": "A FreeSewing pattern for a bow tie",
     "design": "Wouter Van Wageningen",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "accessories"
     ],
@@ -91,16 +81,14 @@
     "description": "A FreeSewing pattern for a menswear body block with a two-part sleeve",
     "design": "Joost De Cock",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "blocks",
       "tops"
     ],
     "techniques": [
       "hem",
-      "curvedSeam",
-      "setSleeve"
+      "curved-seam",
+      "set-sleeve"
     ]
   },
   "bibi": {
@@ -108,16 +96,14 @@
     "description": "A FreeSewing pattern for a knit top body block",
     "design": "Jonathan Haas",
     "difficulty": 2,
-    "lab": true,
-    "org": true,
     "tags": [
       "blocks",
       "tops"
     ],
     "techniques": [
-      "curvedSeam",
+      "curved-seam",
       "hem",
-      "flatSleeve"
+      "flat-sleeve"
     ]
   },
   "bob": {
@@ -125,15 +111,13 @@
     "description": "A FreeSewing pattern for a bib",
     "design": "Joost De Cock",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "accessories",
       "infants"
     ],
     "techniques": [
-      "biasTape",
-      "curvedSeam",
+      "bias-tape",
+      "curved-seam",
       "snap"
     ]
   },
@@ -142,8 +126,6 @@
     "description": "A FreeSewing pattern for a basic body block for womenswear",
     "design": "Joost De Cock",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "blocks",
       "tops"
@@ -158,15 +140,13 @@
     "description": "A FreeSewing pattern for a basic body block for menswear",
     "design": "Joost De Cock",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "blocks",
       "tops"
     ],
     "techniques": [
       "block",
-      "flatSleeve"
+      "flat-sleeve"
     ]
   },
   "bruce": {
@@ -174,8 +154,6 @@
     "description": "A FreeSewing pattern for boxer briefs",
     "design": "Joost De Cock",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "bottoms",
       "underwear"
@@ -183,7 +161,7 @@
     "techniques": [
       "stretch",
       "hem",
-      "curvedSeam",
+      "curved-seam",
       "elastic"
     ]
   },
@@ -195,8 +173,6 @@
       "Joost De Cock"
     ],
     "difficulty": 5,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops",
       "coats"
@@ -204,12 +180,12 @@
     "techniques": [
       "hem",
       "pocket",
-      "curvedSeam",
+      "curved-seam",
       "precision",
-      "setSleeve",
-      "weltPocket",
+      "set-sleeve",
+      "welt-pocket",
       "lining",
-      "princessSeam",
+      "princess-seam",
       "interfacing",
       "button"
     ]
@@ -222,8 +198,6 @@
       "Joost De Cock"
     ],
     "difficulty": 5,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops",
       "coats"
@@ -231,10 +205,10 @@
     "techniques": [
       "hem",
       "pocket",
-      "curvedSeam",
+      "curved-seam",
       "precision",
-      "setSleeve",
-      "weltPocket",
+      "set-sleeve",
+      "welt-pocket",
       "lining",
       "interfacing",
       "button"
@@ -248,8 +222,6 @@
       "Joost De Cock"
     ],
     "difficulty": 4,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops",
       "underwear"
@@ -257,7 +229,7 @@
     "techniques": [
       "boning",
       "precision",
-      "curvedSeam",
+      "curved-seam",
       "interfacing"
     ]
   },
@@ -266,22 +238,20 @@
     "description": "A FreeSewing pattern for chino trousers",
     "design": "Joost De Cock",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "bottoms",
       "trousers"
     ],
     "techniques": [
-      "weltPocket",
-      "curvedSeam",
+      "welt-pocket",
+      "curved-seam",
       "interfacing",
       "fly",
       "zipper",
       "button",
       "dart",
       "hem",
-      "seamPocket"
+      "seam-pocket"
     ]
   },
   "cornelius": {
@@ -289,14 +259,12 @@
     "description": "A FreeSewing pattern for cycling breeches, based on the Keystone drafting system",
     "design": "Wouter Van Wageningen",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "bottoms",
       "trousers"
     ],
     "techniques": [
-      "curvedSeam",
+      "curved-seam",
       "fly",
       "zipper",
       "button",
@@ -308,35 +276,29 @@
     "description": "A FreeSewing pattern for a top with a draped neck",
     "design": "Erica Alcusa Sáez",
     "difficulty": 2,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops"
     ],
     "techniques": [
-      "curvedSeam",
-      "flatSleeve",
+      "curved-seam",
+      "flat-sleeve",
       "hem"
     ]
   },
   "examples": {
     "code": "Joost De Cock",
-    "description": "A FreeSewing pattern holding examples for our documentation",
-    "lab": false,
-    "org": false
+    "description": "A FreeSewing pattern holding examples for our documentation"
   },
   "florence": {
     "code": "Joost De Cock",
     "description": "A FreeSewing pattern for a face mask",
     "design": "Joost De Cock",
     "difficulty": 1,
-    "lab": true,
-    "org": true,
     "tags": [
       "accessories"
     ],
     "techniques": [
-      "curvedSeam"
+      "curved-seam"
     ]
   },
   "florent": {
@@ -347,14 +309,12 @@
     "description": "A FreeSewing pattern for a flat cap",
     "design": "Quentin Felix",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "accessories",
       "hats"
     ],
     "techniques": [
-      "curvedSeam"
+      "curved-seam"
     ]
   },
   "gozer": {
@@ -362,8 +322,6 @@
     "description": "A FreeSewing pattern for a ghost costume",
     "design": "Wouter Van Wageningen",
     "difficulty": 1,
-    "lab": true,
-    "org": true,
     "tags": [
       "costumes"
     ],
@@ -376,14 +334,12 @@
     "description": "A FreeSewing pattern for a shark plush toy",
     "design": "Wouter Van Wageningen",
     "difficulty": 4,
-    "lab": true,
-    "org": true,
     "tags": [
       "accessories",
       "toys"
     ],
     "techniques": [
-      "curvedSeam",
+      "curved-seam",
       "dart"
     ]
   },
@@ -395,14 +351,12 @@
     "description": "A FreeSewing pattern for a Sherlock Holmes hat",
     "design": "Erica Alcusa Sáez",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "accessories",
       "hats"
     ],
     "techniques": [
-      "curvedSeam",
+      "curved-seam",
       "lining"
     ]
   },
@@ -414,14 +368,12 @@
       "Wouter Van Wageningen"
     ],
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "accessories",
       "bags"
     ],
     "techniques": [
-      "curvedSeam",
+      "curved-seam",
       "precision",
       "lining",
       "zipper"
@@ -432,17 +384,15 @@
     "description": "A FreeSewing pattern for a zip-up hoodie",
     "design": "Joost De Cock",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops"
     ],
     "techniques": [
-      "curvedSeam",
+      "curved-seam",
       "pocket",
       "zipper",
       "ribbing",
-      "flatSleeve"
+      "flat-sleeve"
     ]
   },
   "hugo": {
@@ -450,16 +400,14 @@
     "description": "A FreeSewing pattern for a hooded jumper with raglan sleeves",
     "design": "Joost De Cock",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops"
     ],
     "techniques": [
-      "curvedSeam",
+      "curved-seam",
       "pocket",
       "ribbing",
-      "raglanSleeve"
+      "raglan-sleeve"
     ]
   },
   "jaeger": {
@@ -467,8 +415,6 @@
     "description": "A FreeSewing pattern for a sport coat style jacket",
     "design": "Joost De Cock",
     "difficulty": 5,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops",
       "coats"
@@ -476,10 +422,10 @@
     "techniques": [
       "hem",
       "pocket",
-      "curvedSeam",
+      "curved-seam",
       "precision",
-      "setSleeve",
-      "weltPocket",
+      "set-sleeve",
+      "welt-pocket",
       "lining",
       "interfacing",
       "button"
@@ -490,8 +436,6 @@
     "description": "A FreeSewing pattern for a 1790s shift",
     "design": "SeaZeeZee",
     "difficulty": 2,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops",
       "historical",
@@ -503,24 +447,20 @@
   },
     "legend": {
     "code": "Joost De Cock",
-    "description": "A FreeSewing pattern to document pattern notation",
-    "lab": false,
-    "org": false
+    "description": "A FreeSewing pattern to document pattern notation"
   },
   "lucy": {
     "code": "SeaZeeZee",
     "description": "A FreeSewing pattern for a historical tie-on pocket",
     "design": "SeaZeeZee",
     "difficulty": 2,
-    "lab": true,
-    "org": true,
     "tags": [
       "accessories",
       "historical",
       "bags"
     ],
     "techniques": [
-      "curvedSeam"
+      "curved-seam"
     ]
   },
   "lumina": {
@@ -528,15 +468,13 @@
     "description": "A FreeSewing pattern for leggings",
     "design": "Wouter Van Wageningen",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "bottoms",
       "trousers"
     ],
     "techniques": [
       "stretch",
-      "curvedSeam",
+      "curved-seam",
       "elastic"
     ]
   },
@@ -545,15 +483,13 @@
     "description": "A FreeSewing pattern for leggings",
     "design": "Wouter Van Wageningen",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "bottoms",
       "trousers"
     ],
     "techniques": [
       "stretch",
-      "curvedSeam",
+      "curved-seam",
       "elastic"
     ]
   },
@@ -562,8 +498,6 @@
     "description": "A FreeSewing pattern for a lacerna, a historical Roman cloak",
     "design": "Rika Tamaike",
     "difficulty": 1,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops",
       "coats",
@@ -578,8 +512,6 @@
     "description": "A FreeSewing pattern for a bike messenger bag",
     "design": "clegganator259",
     "difficulty": 3,
-    "lab": true,
-    "org": false,
     "tags": [
       "accessories",
       "bags"
@@ -591,17 +523,15 @@
     "description": "A FreeSewing pattern for a princess seam bodice block",
     "design": "Wouter Van Wageningen",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "blocks",
       "tops"
     ],
     "techniques": [
       "block",
-      "curvedSeam",
+      "curved-seam",
       "precision",
-      "princessSeam"
+      "princess-seam"
     ]
   },
   "octoplushy": {
@@ -609,14 +539,12 @@
     "description": "A FreeSewing pattern for an octopus plushy toy",
     "design": "Wouter Van Wageningen",
     "difficulty": 4,
-    "lab": true,
-    "org": true,
     "tags": [
       "accessories",
       "toys"
     ],
     "techniques": [
-      "curvedSeam",
+      "curved-seam",
       "precision"
     ]
   },
@@ -625,8 +553,6 @@
     "description": "A FreeSewing pattern for one-piece garments",
     "design": "Thrunic",
     "difficulty": 4,
-    "lab": true,
-    "org": true,
     "tags": [
       "swimwear",
       "pajamas",
@@ -634,7 +560,7 @@
     ],
     "techniques": [
       "hem",
-      "curvedSeam",
+      "curved-seam",
       "stretch",
       "lining",
       "zipper",
@@ -646,16 +572,14 @@
     "description": "A FreeSewing pattern for overalls",
     "design": "Thrunic",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "overalls",
       "onePiece"
     ],
     "techniques": [
-      "flatFelledSeam",
+      "flat-felled-seam",
       "hem",
-      "curvedSeam",
+      "curved-seam",
       "button",
       "pocket"
     ]
@@ -665,8 +589,6 @@
     "description": "A FreeSewing pattern for a baby romper",
     "design": "Wouter Van Wageningen",
     "difficulty": 2,
-    "lab": true,
-    "org": true,
     "tags": [],
     "techniques": []
   },
@@ -675,17 +597,15 @@
     "description": "A FreeSewing pattern for summer pants",
     "design": "Joost De Cock",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "bottoms",
       "trousers"
     ],
     "techniques": [
       "elastic",
-      "curvedSeam",
+      "curved-seam",
       "pocket",
-      "weltPocket",
+      "welt-pocket",
       "hem"
     ]
   },
@@ -694,30 +614,24 @@
     "description": "A FreeSewing pattern for a pencil skirt",
     "design": "Wouter Van Wageningen",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "bottoms",
       "skirts"
     ],
     "techniques": [
       "hem",
-      "curvedSeam",
+      "curved-seam",
       "precision",
       "zipper"
     ]
   },
   "plugintest": {
     "code": "Joost De Cock",
-    "description": "A FreeSewing pattern to test (y)our plugins",
-    "lab": true,
-    "org": false
+    "description": "A FreeSewing pattern to test (y)our plugins"
   },
   "rendertest": {
     "code": "Joost De Cock",
-    "description": "A FreeSewing pattern to test (y)our render engine our CSS",
-    "lab": true,
-    "org": false
+    "description": "A FreeSewing pattern to test (y)our render engine our CSS"
   },
   "sandy": {
     "code": [
@@ -727,14 +641,12 @@
     "description": "A FreeSewing pattern for a circle skirt",
     "design": "Erica Alcusa Sáez",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "bottoms",
       "skirts"
     ],
     "techniques": [
-      "curvedSeam",
+      "curved-seam",
       "button",
       "hem"
     ]
@@ -744,8 +656,6 @@
     "description": "A FreeSewing pattern for a raglan shirt, perfect for swimshirts",
     "design": "Thrunic",
     "difficulty": 2,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops",
       "swimwear"
@@ -753,8 +663,8 @@
     "techniques": [
       "hem",
       "stretch",
-      "curvedSeam",
-      "raglanSleeve"
+      "curved-seam",
+      "raglan-sleeve"
     ]
   },
   "shin": {
@@ -762,8 +672,6 @@
     "description": "A FreeSewing pattern for swim trunks",
     "design": "Joost De Cock",
     "difficulty": 2,
-    "lab": true,
-    "org": true,
     "tags": [
       "bottoms",
       "swimwear"
@@ -771,7 +679,7 @@
     "techniques": [
       "hem",
       "stretch",
-      "curvedSeam",
+      "curved-seam",
       "elastic"
     ]
   },
@@ -780,8 +688,6 @@
     "description": "A FreeSewing pattern for a button down shirt",
     "design": "Joost De Cock",
     "difficulty": 4,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops"
     ],
@@ -789,9 +695,9 @@
       "hem",
       "button",
       "interfacing",
-      "curvedSeam",
-      "flatFelledSeam",
-      "flatSleeve"
+      "curved-seam",
+      "flat-felled-seam",
+      "flat-sleeve"
     ]
   },
   "simone": {
@@ -799,8 +705,6 @@
     "description": "A FreeSewing pattern for a button down shirt (Simone = Simon for people with breasts)",
     "design": "Joost De Cock",
     "difficulty": 4,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops"
     ],
@@ -808,9 +712,9 @@
       "hem",
       "button",
       "interfacing",
-      "curvedSeam",
-      "flatFelledSeam",
-      "flatSleeve"
+      "curved-seam",
+      "flat-felled-seam",
+      "flat-sleeve"
     ]
   },
   "skully": {
@@ -818,14 +722,12 @@
     "description": "A FreeSewing pattern for skully, our logo, a plushy toy",
     "design": "Wouter Van Wageningen",
     "difficulty": 4,
-    "lab": true,
-    "org": true,
     "tags": [
       "accessories",
       "toys"
     ],
     "techniques": [
-      "curvedSeam",
+      "curved-seam",
       "precision"
     ]
   },
@@ -834,14 +736,12 @@
     "description": "A FreeSewing pattern for a straightforward sweater",
     "design": "Joost De Cock",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops"
     ],
     "techniques": [
-      "curvedSeam",
-      "flatSleeve",
+      "curved-seam",
+      "flat-sleeve",
       "ribbing"
     ]
   },
@@ -850,13 +750,11 @@
     "description": "A FreeSewing pattern for a zero-waste top",
     "design": "Joost De Cock",
     "difficulty": 1,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops"
     ],
     "techniques": [
-      "curvedSeam"
+      "curved-seam"
     ]
   },
   "teagan": {
@@ -864,16 +762,14 @@
     "description": "A FreeSewing pattern for a T-shirt",
     "design": "Joost De Cock",
     "difficulty": 2,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops"
     ],
     "techniques": [
-      "curvedSeam",
+      "curved-seam",
       "hem",
-      "flatSleeve",
-      "knitBand"
+      "flat-sleeve",
+      "knit-band"
     ]
   },
   "tiberius": {
@@ -881,8 +777,6 @@
     "description": "A FreeSewing pattern for a tunica, a historical Roman tunic",
     "design": "Rika Tamaike",
     "difficulty": 1,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops",
       "historical"
@@ -897,8 +791,6 @@
       "Joost De Cock"
     ],
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "blocks",
       "bottoms"
@@ -910,8 +802,6 @@
     "description": "A FreeSewing pattern for a tie",
     "design": "Joost De Cock",
     "difficulty": 2,
-    "lab": true,
-    "org": true,
     "tags": [
       "accessories"
     ],
@@ -925,13 +815,11 @@
     "description": "A FreeSewing pattern for a fitted top with prince(ss) seams",
     "design": "Natalia Sayang",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops"
     ],
     "techniques": [
-      "curvedSeam",
+      "curved-seam",
       "precision"
     ]
   },
@@ -940,31 +828,27 @@
     "description": "A FreeSewing pattern for a basic, highly-customizable underwear pattern",
     "design": "Joost De Cock",
     "difficulty": 2,
-    "lab": true,
-    "org": true,
     "tags": [
       "bottoms",
       "underwear"
     ],
     "techniques": [
       "elastic",
-      "curvedSeam"
+      "curved-seam"
     ]
   },
   "umbra": {
-    "code": "Joost De Cock, Jonathan Haas",
+    "code": ["Joost De Cock", "Jonathan Haas"],
     "description": "A FreeSewing pattern for a basic, highly-customizable underwear pattern",
-    "design": "Joost De Cock, Jonathan Haas",
+    "design": ["Joost De Cock", "Jonathan Haas"],
     "difficulty": 2,
-    "lab": true,
-    "org": true,
     "tags": [
       "bottoms",
       "underwear"
     ],
     "techniques": [
       "elastic",
-      "curvedSeam"
+      "curved-seam"
     ]
   },
   "wahid": {
@@ -972,17 +856,15 @@
     "description": "A FreeSewing pattern for a classic fitted waistcoat",
     "design": "Joost De Cock",
     "difficulty": 4,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops"
     ],
     "techniques": [
-      "curvedSeam",
+      "curved-seam",
       "hem",
       "interfacing",
       "lining",
-      "weltPocket",
+      "welt-pocket",
       "button"
     ]
   },
@@ -991,8 +873,6 @@
     "description": "A FreeSewing pattern for a wappenrock (tabard/surcoat), a historical European/medieval (ish) garment",
     "design": "Rika Tamaike",
     "difficulty": 1,
-    "lab": true,
-    "org": true,
     "tags": [
       "bottoms",
       "historical"
@@ -1006,16 +886,14 @@
     "description": "A FreeSewing pattern for wrap pants",
     "design": "Wouter Van Wageningen",
     "difficulty": 2,
-    "lab": true,
-    "org": true,
     "tags": [
       "bottoms",
       "trousers"
     ],
     "techniques": [
-      "curvedSeam",
+      "curved-seam",
       "hem",
-      "weltPocket"
+      "welt-pocket"
     ]
   },
   "yuri": {
@@ -1023,31 +901,27 @@
     "description": "A FreeSewing pattern for a fancy zipless sweater based on the Huey hoodie",
     "design": "Biou",
     "difficulty": 3,
-    "lab": true,
-    "org": true,
     "tags": [
       "tops"
     ],
     "techniques": [
-      "curvedSeam",
-      "flatSleeve",
+      "curved-seam",
+      "flat-sleeve",
       "hem",
       "button"
     ]
   },
   "lily": {
-    "code": "Anna Puk, Joost De Cock",
+    "code": ["Anna Puk", "Joost De Cock"],
     "description": "A FreeSewing pattern for basic leggings",
     "design": "Anna Puk",
     "difficulty": 2,
-    "lab": true,
-    "org": true,
     "tags": [
       "bottoms"
     ],
     "techniques": [
       "elastic",
-      "curvedSeam",
+      "curved-seam",
       "hem"
     ]
   }
diff --git a/designs/aaron/about.json b/designs/aaron/about.json
new file mode 100644
index 00000000000..cb9bca669a4
--- /dev/null
+++ b/designs/aaron/about.json
@@ -0,0 +1,18 @@
+{
+  "id": "aaron",
+  "code": "Joost De Cock",
+  "name": "Aaron A-shirt",
+  "description": "A FreeSewing pattern for a A-shirt or tank top",
+  "design": "Joost De Cock",
+  "difficulty": 2,
+  "tags": [
+    "tops",
+    "underwear"
+  ],
+  "techniques": [
+    "hem",
+    "stretch",
+    "knit-binding",
+    "curved-seam"
+  ]
+}
diff --git a/designs/aaron/data.mjs b/designs/aaron/data.mjs
deleted file mode 100644
index 6135e5314c3..00000000000
--- a/designs/aaron/data.mjs
+++ /dev/null
@@ -1,4 +0,0 @@
-// This file is auto-generated | All changes you make will be overwritten.
-export const name = '@freesewing/aaron'
-export const version = '3.3.0-rc.1'
-export const data = { name, version }
diff --git a/designs/aaron/src/index.mjs b/designs/aaron/src/index.mjs
index e2f9e8f3451..6a08a7866e7 100644
--- a/designs/aaron/src/index.mjs
+++ b/designs/aaron/src/index.mjs
@@ -1,7 +1,7 @@
 import { Design, mergeI18n } from '@freesewing/core'
 import { i18n as brianI18n } from '@freesewing/brian'
 import { i18n as aaronI18n } from '../i18n/index.mjs'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { back } from './back.mjs'
 import { front } from './front.mjs'
 import { armBinding } from './arm-binding.mjs'
@@ -9,7 +9,7 @@ import { neckBinding } from './neck-binding.mjs'
 
 // Setup our new design
 const Aaron = new Design({
-  data,
+  data: about,
   parts: [back, front, armBinding, neckBinding],
 })
 
@@ -33,4 +33,4 @@ const i18n = mergeI18n([brianI18n, aaronI18n], {
 })
 
 // Named exports
-export { back, front, Aaron, i18n }
+export { back, front, Aaron, i18n, about }
diff --git a/designs/albert/about.json b/designs/albert/about.json
new file mode 100644
index 00000000000..8228f6d7b7b
--- /dev/null
+++ b/designs/albert/about.json
@@ -0,0 +1,17 @@
+{
+  "id": "albert",
+  "name": "Albert apron",
+  "code": "Wouter Van Wageningen",
+  "description": "A FreeSewing pattern for an apron",
+  "design": "Wouter Van Wageningen",
+  "difficulty": 2,
+  "tags": [
+    "accessories"
+  ],
+  "techniques": [
+    "hem",
+    "knit-binding",
+    "curved-seam",
+    "pocket"
+  ]
+}
diff --git a/designs/albert/src/index.mjs b/designs/albert/src/index.mjs
index 9897b7fd4b5..51369b09b32 100644
--- a/designs/albert/src/index.mjs
+++ b/designs/albert/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { front } from './front.mjs'
 import { pocket } from './pocket.mjs'
 import { strap } from './strap.mjs'
@@ -7,9 +7,9 @@ import { i18n } from '../i18n/index.mjs'
 
 // Setup our new design
 const Albert = new Design({
-  data,
+  data: about,
   parts: [front, pocket, strap],
 })
 
 // Named exports
-export { front, pocket, strap, Albert, i18n }
+export { front, pocket, strap, Albert, i18n, about }
diff --git a/designs/bee/about.json b/designs/bee/about.json
new file mode 100644
index 00000000000..dc313325832
--- /dev/null
+++ b/designs/bee/about.json
@@ -0,0 +1,18 @@
+{
+  "id": "bee",
+  "name": "Bee bikini top",
+  "code": "bobgeorgethe3rd",
+  "description": "A FreeSewing pattern for a bikini top",
+  "design": "PrudenceRabbit",
+  "difficulty": 3,
+  "tags": [
+    "tops",
+    "swimwear"
+  ],
+  "techniques": [
+    "hem",
+    "stretch",
+    "curved-seam",
+    "precision"
+  ]
+}
diff --git a/designs/bee/src/index.mjs b/designs/bee/src/index.mjs
index 58f8430fef2..42786fd9bae 100644
--- a/designs/bee/src/index.mjs
+++ b/designs/bee/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design, mergeI18n } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { cup } from './cup.mjs'
 import { neckTie } from './neck-tie.mjs'
 import { bandTie } from './band-tie.mjs'
@@ -7,7 +7,7 @@ import { i18n as beeI18n } from '../i18n/index.mjs'
 import { i18n as bellaI18n } from '@freesewing/bella'
 
 const Bee = new Design({
-  data,
+  data: about,
   parts: [cup, neckTie, bandTie],
 })
 
@@ -50,4 +50,4 @@ const i18n = mergeI18n([bellaI18n, beeI18n], {
   o: { keep: i18nKeepOptions },
 })
 
-export { cup, neckTie, bandTie, Bee, i18n }
+export { cup, neckTie, bandTie, Bee, i18n, about }
diff --git a/designs/bella/about.json b/designs/bella/about.json
new file mode 100644
index 00000000000..1c9a442415d
--- /dev/null
+++ b/designs/bella/about.json
@@ -0,0 +1,19 @@
+{
+  "id": "bella",
+  "name": "Bella body block",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for a womenswear bodice block",
+  "design": [
+    "Bella Incognito",
+    "Joost De Cock"
+  ],
+  "difficulty": 3,
+  "tags": [
+    "blocks",
+    "tops"
+  ],
+  "techniques": [
+    "dart",
+    "block"
+  ]
+}
diff --git a/designs/bella/src/index.mjs b/designs/bella/src/index.mjs
index 46a0565b8d6..c04d343b45a 100644
--- a/designs/bella/src/index.mjs
+++ b/designs/bella/src/index.mjs
@@ -1,12 +1,12 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { back } from './back.mjs'
 import { frontSideDart } from './front-side-dart.mjs'
 import { i18n } from '../i18n/index.mjs'
 
 const Bella = new Design({
-  data,
+  data: about,
   parts: [back, frontSideDart],
 })
 
-export { back, frontSideDart, Bella, i18n }
+export { back, frontSideDart, Bella, i18n, about }
diff --git a/designs/benjamin/about.json b/designs/benjamin/about.json
new file mode 100644
index 00000000000..feca255b6ee
--- /dev/null
+++ b/designs/benjamin/about.json
@@ -0,0 +1,15 @@
+{
+  "id": "benjamin",
+  "name": "Benjamin bow tie",
+  "code": "Wouter Van Wageningen",
+  "description": "A FreeSewing pattern for a bow tie",
+  "design": "Wouter Van Wageningen",
+  "difficulty": 3,
+  "tags": [
+    "accessories"
+  ],
+  "techniques": [
+    "precision",
+    "interfacing"
+  ]
+}
diff --git a/designs/benjamin/src/index.mjs b/designs/benjamin/src/index.mjs
index af0d0b3c3fb..b128637ca0a 100644
--- a/designs/benjamin/src/index.mjs
+++ b/designs/benjamin/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { bow1 } from './bow1.mjs'
 import { bow2 } from './bow2.mjs'
 import { bow3 } from './bow3.mjs'
@@ -8,9 +8,9 @@ import { i18n } from '../i18n/index.mjs'
 
 // Setup our new design
 const Benjamin = new Design({
-  data,
+  data: about,
   parts: [bow1, bow2, bow3, collarBand],
 })
 
 // Named exports
-export { bow1, bow2, bow3, collarBand, Benjamin, i18n }
+export { bow1, bow2, bow3, collarBand, Benjamin, i18n, about }
diff --git a/designs/bent/about.json b/designs/bent/about.json
new file mode 100644
index 00000000000..445c17be56b
--- /dev/null
+++ b/designs/bent/about.json
@@ -0,0 +1,17 @@
+{
+  "id": "bent",
+  "name": "Bent body block",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for a menswear body block with a two-part sleeve",
+  "design": "Joost De Cock",
+  "difficulty": 3,
+  "tags": [
+    "blocks",
+    "tops"
+  ],
+  "techniques": [
+    "hem",
+    "curved-seam",
+    "set-sleeve"
+  ]
+}
diff --git a/designs/bent/src/index.mjs b/designs/bent/src/index.mjs
index fb5097d1378..12029e74371 100644
--- a/designs/bent/src/index.mjs
+++ b/designs/bent/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design, mergeI18n } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { front, back, i18n as brianI18n } from '@freesewing/brian'
 import { sleeve } from './sleeve.mjs'
 import { topSleeve } from './topsleeve.mjs'
@@ -8,7 +8,7 @@ import { i18n as bentI18n } from '../i18n/index.mjs'
 
 // Create new design
 const Bent = new Design({
-  data,
+  data: about,
   parts: [front, back, sleeve, topSleeve, underSleeve],
 })
 
@@ -28,4 +28,4 @@ const i18n = mergeI18n([brianI18n, bentI18n], {
 })
 
 // Named exports
-export { front, back, sleeve, topSleeve, underSleeve, Bent, i18n }
+export { front, back, sleeve, topSleeve, underSleeve, Bent, i18n, about }
diff --git a/designs/bibi/about.json b/designs/bibi/about.json
new file mode 100644
index 00000000000..e1ef77af85e
--- /dev/null
+++ b/designs/bibi/about.json
@@ -0,0 +1,17 @@
+{
+  "id": "bibi",
+  "name": "Bibi body block",
+  "code": "Jonathan Haas",
+  "description": "A FreeSewing pattern for a knit top body block",
+  "design": "Jonathan Haas",
+  "difficulty": 2,
+  "tags": [
+    "blocks",
+    "tops"
+  ],
+  "techniques": [
+    "curved-seam",
+    "hem",
+    "flat-sleeve"
+  ]
+}
diff --git a/designs/bibi/src/index.mjs b/designs/bibi/src/index.mjs
index 9b7d68b56a2..946c1b13121 100644
--- a/designs/bibi/src/index.mjs
+++ b/designs/bibi/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design, mergeI18n } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n as brianI18n } from '@freesewing/brian'
 import { i18n as bibiI18n } from '../i18n/index.mjs'
 import { front } from './front.mjs'
@@ -26,7 +26,7 @@ import {
 
 // Setup our new design
 const Bibi = new Design({
-  data,
+  data: about,
   parts: [waistband, cuff, armholeBinding, neckBinding, sleeve, back, front],
 })
 
@@ -58,4 +58,5 @@ export {
   draftKnitBinding,
   Bibi,
   i18n,
+  about,
 }
diff --git a/designs/bob/about.json b/designs/bob/about.json
new file mode 100644
index 00000000000..8e1c5595029
--- /dev/null
+++ b/designs/bob/about.json
@@ -0,0 +1,17 @@
+{
+  "id": "bob",
+  "name": "Bob the bib",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for a bib",
+  "design": "Joost De Cock",
+  "difficulty": 3,
+  "tags": [
+    "accessories",
+    "infants"
+  ],
+  "techniques": [
+    "bias-tape",
+    "curved-seam",
+    "snap"
+  ]
+}
diff --git a/designs/bob/src/index.mjs b/designs/bob/src/index.mjs
index 7f29e4b36e5..cb574842365 100644
--- a/designs/bob/src/index.mjs
+++ b/designs/bob/src/index.mjs
@@ -1,13 +1,13 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { bib } from './bib.mjs'
 import { i18n } from '../i18n/index.mjs'
 
 // Setup our new design
 const Bob = new Design({
-  data,
+  data: about,
   parts: [bib],
 })
 
 //Named exports
-export { bib, Bob, i18n }
+export { bib, Bob, i18n, about }
diff --git a/designs/breanna/about.json b/designs/breanna/about.json
new file mode 100644
index 00000000000..42a86755c40
--- /dev/null
+++ b/designs/breanna/about.json
@@ -0,0 +1,16 @@
+{
+  "id": "breanna",
+  "name": "Breanna body block",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for a basic body block for womenswear",
+  "design": "Joost De Cock",
+  "difficulty": 3,
+  "tags": [
+    "blocks",
+    "tops"
+  ],
+  "techniques": [
+    "block",
+    "dart"
+  ]
+}
diff --git a/designs/breanna/src/index.mjs b/designs/breanna/src/index.mjs
index f99a40ff862..989b977dac1 100644
--- a/designs/breanna/src/index.mjs
+++ b/designs/breanna/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { back } from './back.mjs'
 import { front } from './front.mjs'
 import { sleeve } from './sleeve.mjs'
@@ -10,9 +10,9 @@ import { i18n } from '../i18n/index.mjs'
 
 // Create design
 const Breanna = new Design({
-  data,
+  data: about,
   parts: [back, front, sleeve, base, frontBase, sleevecap],
 })
 
 // Named exports
-export { back, front, sleeve, base, frontBase, sleevecap, Breanna, i18n }
+export { back, front, sleeve, base, frontBase, sleevecap, Breanna, i18n, about }
diff --git a/designs/brian/about.json b/designs/brian/about.json
new file mode 100644
index 00000000000..b3fd1d798ea
--- /dev/null
+++ b/designs/brian/about.json
@@ -0,0 +1,16 @@
+{
+  "id": "brian",
+  "name": "Brian body block",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for a basic body block for menswear",
+  "design": "Joost De Cock",
+  "difficulty": 3,
+  "tags": [
+    "blocks",
+    "tops"
+  ],
+  "techniques": [
+    "block",
+    "flat-sleeve"
+  ]
+}
diff --git a/designs/brian/src/index.mjs b/designs/brian/src/index.mjs
index 62207631f97..0f01969ae2d 100644
--- a/designs/brian/src/index.mjs
+++ b/designs/brian/src/index.mjs
@@ -1,6 +1,6 @@
 import { Design } from '@freesewing/core'
 import { i18n } from '../i18n/index.mjs'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { back } from './back.mjs'
 import { front } from './front.mjs'
 import { sleeve } from './sleeve.mjs'
@@ -10,9 +10,9 @@ import { sleevecap } from './sleevecap.mjs'
 
 // Setup our new design
 const Brian = new Design({
-  data,
+  data: about,
   parts: [back, front, sleeve],
 })
 
 // Named exports
-export { back, front, sleeve, base, sleevecap, Brian, i18n }
+export { back, front, sleeve, base, sleevecap, Brian, i18n, about }
diff --git a/designs/bruce/about.json b/designs/bruce/about.json
new file mode 100644
index 00000000000..11dd124f648
--- /dev/null
+++ b/designs/bruce/about.json
@@ -0,0 +1,18 @@
+{
+  "id": "bruce",
+  "name": "Bruce boxer briefs",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for boxer briefs",
+  "design": "Joost De Cock",
+  "difficulty": 3,
+  "tags": [
+    "bottoms",
+    "underwear"
+  ],
+  "techniques": [
+    "stretch",
+    "hem",
+    "curved-seam",
+    "elastic"
+  ]
+}
diff --git a/designs/bruce/src/index.mjs b/designs/bruce/src/index.mjs
index e75806df5a9..061d09753b0 100644
--- a/designs/bruce/src/index.mjs
+++ b/designs/bruce/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { back } from './back.mjs'
 import { side } from './side.mjs'
 import { front } from './front.mjs'
@@ -8,9 +8,9 @@ import { i18n } from '../i18n/index.mjs'
 
 // Create design
 const Bruce = new Design({
-  data,
+  data: about,
   parts: [back, side, front, inset],
 })
 
 // Named exports
-export { back, side, front, inset, Bruce, i18n }
+export { back, side, front, inset, Bruce, i18n, about }
diff --git a/designs/carlita/about.json b/designs/carlita/about.json
new file mode 100644
index 00000000000..0ed81e31ff6
--- /dev/null
+++ b/designs/carlita/about.json
@@ -0,0 +1,27 @@
+{
+  "id": "carlita",
+  "name": "Carlita coat",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for Sherlock Holmes cosplay; Or just a nice long coat",
+  "design": [
+    "Anneke Caramin",
+    "Joost De Cock"
+  ],
+  "difficulty": 5,
+  "tags": [
+    "tops",
+    "coats"
+  ],
+  "techniques": [
+    "hem",
+    "pocket",
+    "curved-seam",
+    "precision",
+    "set-sleeve",
+    "welt-pocket",
+    "lining",
+    "princess-seam",
+    "interfacing",
+    "button"
+  ]
+}
diff --git a/designs/carlita/src/index.mjs b/designs/carlita/src/index.mjs
index c404e8e1724..cb58aeadf85 100644
--- a/designs/carlita/src/index.mjs
+++ b/designs/carlita/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design, mergeI18n } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { front } from './front.mjs'
 import { side } from './side.mjs'
 import { frontFacing } from './front-facing.mjs'
@@ -28,7 +28,7 @@ import { i18n as carlitaI18n } from '../i18n/index.mjs'
 
 // Create new design
 const Carlita = new Design({
-  data,
+  data: about,
   parts: [
     front,
     frontFacing,
@@ -82,4 +82,5 @@ export {
   innerPocketTab,
   Carlita,
   i18n,
+  about,
 }
diff --git a/designs/carlton/about.json b/designs/carlton/about.json
new file mode 100644
index 00000000000..be5ee390a67
--- /dev/null
+++ b/designs/carlton/about.json
@@ -0,0 +1,26 @@
+{
+  "id": "carlton",
+  "name": "Carlton coat",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for Sherlock Holmes cosplay; Or just a nice long coat",
+  "design": [
+    "Anneke Caramin",
+    "Joost De Cock"
+  ],
+  "difficulty": 5,
+  "tags": [
+    "tops",
+    "coats"
+  ],
+  "techniques": [
+    "hem",
+    "pocket",
+    "curved-seam",
+    "precision",
+    "set-sleeve",
+    "welt-pocket",
+    "lining",
+    "interfacing",
+    "button"
+  ]
+}
diff --git a/designs/carlton/src/index.mjs b/designs/carlton/src/index.mjs
index b62a704e568..a3daa0373b2 100644
--- a/designs/carlton/src/index.mjs
+++ b/designs/carlton/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design, mergeI18n } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n as brianI18n, Brian, sleevecap as brianSleevecap } from '@freesewing/brian'
 import { i18n as carltonI18n } from '../i18n/index.mjs'
 // Parts
@@ -26,7 +26,7 @@ import { innerPocketTab } from './innerpockettab.mjs'
 
 // Create design
 const Carlton = new Design({
-  data,
+  data: about,
   parts: [
     front,
     frontFacing,
@@ -90,4 +90,5 @@ export {
   innerPocketTab,
   Carlton,
   i18n,
+  about,
 }
diff --git a/designs/cathrin/about.json b/designs/cathrin/about.json
new file mode 100644
index 00000000000..3a60695c9eb
--- /dev/null
+++ b/designs/cathrin/about.json
@@ -0,0 +1,21 @@
+{
+  "id": "cathrin",
+  "name": "Cathrin corset",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for a underbust corset / waist trainer",
+  "design": [
+    "Cathrin Åhlén",
+    "Joost De Cock"
+  ],
+  "difficulty": 4,
+  "tags": [
+    "tops",
+    "underwear"
+  ],
+  "techniques": [
+    "boning",
+    "precision",
+    "curved-seam",
+    "interfacing"
+  ]
+}
diff --git a/designs/cathrin/src/index.mjs b/designs/cathrin/src/index.mjs
index a18fb6b84fc..58290083b1c 100644
--- a/designs/cathrin/src/index.mjs
+++ b/designs/cathrin/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 //Parts
 import { panel1 } from './panel1.mjs'
 import { panel2 } from './panel2.mjs'
@@ -15,9 +15,9 @@ import { i18n } from '../i18n/index.mjs'
 
 // Create design
 const Cathrin = new Design({
-  data,
+  data: about,
   parts: [panel1, panel2, panel3, panel4, panel5, panel6],
 })
 
 // Named exports
-export { base, panels, panel1, panel2, panel3, panel4, panel5, panel6, Cathrin, i18n }
+export { base, panels, panel1, panel2, panel3, panel4, panel5, panel6, Cathrin, i18n, about }
diff --git a/designs/charlie/about.json b/designs/charlie/about.json
new file mode 100644
index 00000000000..e810e98056f
--- /dev/null
+++ b/designs/charlie/about.json
@@ -0,0 +1,23 @@
+{
+  "id": "charlie",
+  "name": "Charlie chinos",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for chino trousers",
+  "design": "Joost De Cock",
+  "difficulty": 3,
+  "tags": [
+    "bottoms",
+    "trousers"
+  ],
+  "techniques": [
+    "welt-pocket",
+    "curved-seam",
+    "interfacing",
+    "fly",
+    "zipper",
+    "button",
+    "dart",
+    "hem",
+    "seam-pocket"
+  ]
+}
diff --git a/designs/charlie/src/index.mjs b/designs/charlie/src/index.mjs
index b1b23dcf6b2..94a67fdcf8e 100644
--- a/designs/charlie/src/index.mjs
+++ b/designs/charlie/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design, mergeI18n } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n as titanI18n } from '@freesewing/titan'
 import { i18n as charlieI18n } from '../i18n/index.mjs'
 // Parts
@@ -19,7 +19,7 @@ import { beltLoops } from './beltloops.mjs'
 
 // Create design
 const Charlie = new Design({
-  data,
+  data: about,
   parts: [
     front,
     back,
@@ -57,4 +57,5 @@ export {
   beltLoops,
   Charlie,
   i18n,
+  about,
 }
diff --git a/designs/cornelius/about.json b/designs/cornelius/about.json
new file mode 100644
index 00000000000..d6563d9b991
--- /dev/null
+++ b/designs/cornelius/about.json
@@ -0,0 +1,19 @@
+{
+  "id": "cornelius",
+  "name": "Cornelius cycling breeches",
+  "code": "Wouter Van Wageningen",
+  "description": "A FreeSewing pattern for cycling breeches, based on the Keystone drafting system",
+  "design": "Wouter Van Wageningen",
+  "difficulty": 3,
+  "tags": [
+    "bottoms",
+    "trousers"
+  ],
+  "techniques": [
+    "curved-seam",
+    "fly",
+    "zipper",
+    "button",
+    "pocket"
+  ]
+}
diff --git a/designs/cornelius/src/index.mjs b/designs/cornelius/src/index.mjs
index 29398576cad..4726fa93faa 100644
--- a/designs/cornelius/src/index.mjs
+++ b/designs/cornelius/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 // Parts
 import { frontpoints } from './frontpoints.mjs'
 import { front } from './front.mjs'
@@ -15,7 +15,7 @@ import { i18n } from '../i18n/index.mjs'
 
 // Create new design
 const Cornelius = new Design({
-  data,
+  data: about,
   parts: [front, back, legband, legbandKeystone, waistband, pocketFacing, pocket, zipperguard],
 })
 
@@ -32,4 +32,5 @@ export {
   frontpoints,
   Cornelius,
   i18n,
+  about,
 }
diff --git a/designs/diana/about.json b/designs/diana/about.json
new file mode 100644
index 00000000000..3f833a080b4
--- /dev/null
+++ b/designs/diana/about.json
@@ -0,0 +1,16 @@
+{
+  "id": "diana",
+  "name": "Diana draped top",
+  "code": "Erica Alcusa Sáez",
+  "description": "A FreeSewing pattern for a top with a draped neck",
+  "design": "Erica Alcusa Sáez",
+  "difficulty": 2,
+  "tags": [
+    "tops"
+  ],
+  "techniques": [
+    "curved-seam",
+    "flat-sleeve",
+    "hem"
+  ]
+}
diff --git a/designs/diana/src/index.mjs b/designs/diana/src/index.mjs
index bb78bc9d62e..f68183194f1 100644
--- a/designs/diana/src/index.mjs
+++ b/designs/diana/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design, mergeI18n } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n as brianI18n } from '@freesewing/brian'
 import { i18n as dianaI18n } from '../i18n/index.mjs'
 // Parts
@@ -8,7 +8,7 @@ import { sleeve } from './sleeve.mjs'
 
 // Create design
 const Diana = new Design({
-  data,
+  data: about,
   parts: [front, back, sleeve],
 })
 
@@ -16,4 +16,4 @@ const Diana = new Design({
 const i18n = mergeI18n([brianI18n, dianaI18n])
 
 // Named exports
-export { front, back, sleeve, Diana, i18n }
+export { front, back, sleeve, Diana, i18n, about }
diff --git a/designs/examples/src/index.mjs b/designs/examples/src/index.mjs
index b1c68e88445..0eab64aa3f2 100644
--- a/designs/examples/src/index.mjs
+++ b/designs/examples/src/index.mjs
@@ -1,6 +1,5 @@
 import { Design } from '@freesewing/core'
 import { gorePlugin } from '@freesewing/plugin-gore'
-import { data } from '../data.mjs'
 import { i18n } from '../i18n/index.mjs'
 
 // Stacks
@@ -19,7 +18,6 @@ import { settings_sa } from './settings.mjs'
 
 // Setup our new design
 const Examples = new Design({
-  data,
   parts: [
     // Stacks
     stacks_top,
diff --git a/designs/florence/about.json b/designs/florence/about.json
new file mode 100644
index 00000000000..9039d209e5c
--- /dev/null
+++ b/designs/florence/about.json
@@ -0,0 +1,14 @@
+{
+  "id": "florence",
+  "name": "Florence face mask",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for a face mask",
+  "design": "Joost De Cock",
+  "difficulty": 1,
+  "tags": [
+    "accessories"
+  ],
+  "techniques": [
+    "curved-seam"
+  ]
+}
diff --git a/designs/florence/src/index.mjs b/designs/florence/src/index.mjs
index 2c873a7ffb8..3b22285f668 100644
--- a/designs/florence/src/index.mjs
+++ b/designs/florence/src/index.mjs
@@ -1,13 +1,13 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { mask } from './mask.mjs'
 import { i18n } from '../i18n/index.mjs'
 
 // Setup our new design
 const Florence = new Design({
-  data,
+  data: about,
   parts: [mask],
 })
 
 // Named exports
-export { mask, Florence, i18n }
+export { mask, Florence, i18n, about }
diff --git a/designs/florent/about.json b/designs/florent/about.json
new file mode 100644
index 00000000000..670899f69a4
--- /dev/null
+++ b/designs/florent/about.json
@@ -0,0 +1,18 @@
+{
+  "id": "florent",
+  "name": "Florent flat cap",
+  "code": [
+    "Quentin Felix",
+    "Joost De Cock"
+  ],
+  "description": "A FreeSewing pattern for a flat cap",
+  "design": "Quentin Felix",
+  "difficulty": 3,
+  "tags": [
+    "accessories",
+    "hats"
+  ],
+  "techniques": [
+    "curved-seam"
+  ]
+}
diff --git a/designs/florent/src/index.mjs b/designs/florent/src/index.mjs
index 07a4b7d86ff..789a3b31550 100644
--- a/designs/florent/src/index.mjs
+++ b/designs/florent/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 // Parts
 import { top } from './top.mjs'
@@ -10,9 +10,9 @@ import { brimInterfacing } from './briminterfacing.mjs'
 
 // Create new design
 const Florent = new Design({
-  data,
+  data: about,
   parts: [top, side, brimBottom, brimTop, brimInterfacing],
 })
 
 // Named exports
-export { top, side, brimBottom, brimTop, brimInterfacing, Florent, i18n }
+export { top, side, brimBottom, brimTop, brimInterfacing, Florent, i18n, about }
diff --git a/designs/gozer/about.json b/designs/gozer/about.json
new file mode 100644
index 00000000000..0ab1b6ecd00
--- /dev/null
+++ b/designs/gozer/about.json
@@ -0,0 +1,14 @@
+{
+  "id": "gozer",
+  "name": "Gozer ghost costume",
+  "code": "Wouter Van Wageningen",
+  "description": "A FreeSewing pattern for a ghost costume",
+  "design": "Wouter Van Wageningen",
+  "difficulty": 1,
+  "tags": [
+    "costumes"
+  ],
+  "techniques": [
+    "hem"
+  ]
+}
diff --git a/designs/gozer/src/index.mjs b/designs/gozer/src/index.mjs
index e7eaddaa418..96075c89ad2 100644
--- a/designs/gozer/src/index.mjs
+++ b/designs/gozer/src/index.mjs
@@ -1,16 +1,14 @@
-//
-
 import { Design } from '@freesewing/core'
 import { i18n } from '../i18n/index.mjs'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 // Parts
 import { ghost } from './ghost.mjs'
 
 // Create new design
 const Gozer = new Design({
-  data,
+  data: about,
   parts: [ghost],
 })
 
 // Named exports
-export { ghost, i18n, Gozer }
+export { ghost, Gozer, i18n, about }
diff --git a/designs/hi/about.json b/designs/hi/about.json
new file mode 100644
index 00000000000..836b3cd4cd1
--- /dev/null
+++ b/designs/hi/about.json
@@ -0,0 +1,16 @@
+{
+  "id": "hi",
+  "name": "Hi the shark",
+  "code": "Wouter Van Wageningen",
+  "description": "A FreeSewing pattern for a shark plush toy",
+  "design": "Wouter Van Wageningen",
+  "difficulty": 4,
+  "tags": [
+    "accessories",
+    "toys"
+  ],
+  "techniques": [
+    "curved-seam",
+    "dart"
+  ]
+}
diff --git a/designs/hi/src/index.mjs b/designs/hi/src/index.mjs
index 9dd53d8fd20..5ddc78f1c48 100644
--- a/designs/hi/src/index.mjs
+++ b/designs/hi/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 // Parts
 import { body } from './body.mjs'
@@ -14,7 +14,7 @@ import { upperTeeth } from './upperTeeth.mjs'
 
 // Create design
 const Hi = new Design({
-  data,
+  data: about,
   parts: [body, tail, mouth, aboveMouth, belly, topOfFin, bottomOfFin, lowerTeeth, upperTeeth],
 })
 
@@ -31,4 +31,5 @@ export {
   upperTeeth,
   Hi,
   i18n,
+  about,
 }
diff --git a/designs/holmes/about.json b/designs/holmes/about.json
new file mode 100644
index 00000000000..6439c0b0b9f
--- /dev/null
+++ b/designs/holmes/about.json
@@ -0,0 +1,19 @@
+{
+  "id": "holmes",
+  "name": "Holmes deerstalker hat",
+  "code": [
+    "Erica Alcusa Sáez",
+    "bobgeorgethe3rd"
+  ],
+  "description": "A FreeSewing pattern for a Sherlock Holmes hat",
+  "design": "Erica Alcusa Sáez",
+  "difficulty": 3,
+  "tags": [
+    "accessories",
+    "hats"
+  ],
+  "techniques": [
+    "curved-seam",
+    "lining"
+  ]
+}
diff --git a/designs/holmes/src/index.mjs b/designs/holmes/src/index.mjs
index eae9ba7a3d5..2caa5b1e7b0 100644
--- a/designs/holmes/src/index.mjs
+++ b/designs/holmes/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 
 // Parts
@@ -9,9 +9,9 @@ import { ear } from './ear.mjs'
 
 // Create new design
 const Holmes = new Design({
-  data,
+  data: about,
   parts: [crown, visor, ear],
 })
 
 // Named exports
-export { crown, visor, ear, Holmes, i18n }
+export { crown, visor, ear, Holmes, i18n, about }
diff --git a/designs/hortensia/about.json b/designs/hortensia/about.json
new file mode 100644
index 00000000000..5bb9231bb1e
--- /dev/null
+++ b/designs/hortensia/about.json
@@ -0,0 +1,21 @@
+{
+  "id": "hortensia",
+  "name": "Hortensia handbag",
+  "code": "Wouter Van Wageningen",
+  "description": "A FreeSewing pattern for a handbag",
+  "design": [
+    "Stoffsuchti",
+    "Wouter Van Wageningen"
+  ],
+  "difficulty": 3,
+  "tags": [
+    "accessories",
+    "bags"
+  ],
+  "techniques": [
+    "curved-seam",
+    "precision",
+    "lining",
+    "zipper"
+  ]
+}
diff --git a/designs/hortensia/src/index.mjs b/designs/hortensia/src/index.mjs
index 24c27502460..83bb93ee951 100644
--- a/designs/hortensia/src/index.mjs
+++ b/designs/hortensia/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 // Parts
 import { sidePanel } from './sidepanel.mjs'
@@ -11,7 +11,7 @@ import { strap } from './strap.mjs'
 
 // Create new design
 const Hortensia = new Design({
-  data,
+  data: about,
   parts: [sidePanel, frontPanel, bottomPanel, zipperPanel, sidePanelReinforcement, strap],
 })
 
@@ -25,4 +25,5 @@ export {
   strap,
   Hortensia,
   i18n,
+  about,
 }
diff --git a/designs/huey/about.json b/designs/huey/about.json
new file mode 100644
index 00000000000..748619f9505
--- /dev/null
+++ b/designs/huey/about.json
@@ -0,0 +1,18 @@
+{
+  "id": "huey",
+  "name": "Huey hoodie",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for a zip-up hoodie",
+  "design": "Joost De Cock",
+  "difficulty": 3,
+  "tags": [
+    "tops"
+  ],
+  "techniques": [
+    "curved-seam",
+    "pocket",
+    "zipper",
+    "ribbing",
+    "flat-sleeve"
+  ]
+}
diff --git a/designs/huey/src/index.mjs b/designs/huey/src/index.mjs
index b46df362446..c036e556bb1 100644
--- a/designs/huey/src/index.mjs
+++ b/designs/huey/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design, mergeI18n } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n as brianI18n } from '@freesewing/brian'
 import { i18n as hueyI18n } from '../i18n/index.mjs'
 // Parts
@@ -13,7 +13,7 @@ import { cuff } from './cuff.mjs'
 
 // Create design
 const Huey = new Design({
-  data,
+  data: about,
   parts: [back, front, sleeve, pocket, hood, waistband, cuff],
 })
 
@@ -21,4 +21,4 @@ const Huey = new Design({
 const i18n = mergeI18n([brianI18n, hueyI18n])
 
 // Named exports
-export { back, front, sleeve, pocket, hood, waistband, cuff, Huey, i18n }
+export { back, front, sleeve, pocket, hood, waistband, cuff, Huey, i18n, about }
diff --git a/designs/hugo/about.json b/designs/hugo/about.json
new file mode 100644
index 00000000000..21f8037e24f
--- /dev/null
+++ b/designs/hugo/about.json
@@ -0,0 +1,17 @@
+{
+  "id": "hugo",
+  "name": "Hugo hoodie",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for a hooded jumper with raglan sleeves",
+  "design": "Joost De Cock",
+  "difficulty": 3,
+  "tags": [
+    "tops"
+  ],
+  "techniques": [
+    "curved-seam",
+    "pocket",
+    "ribbing",
+    "raglan-sleeve"
+  ]
+}
diff --git a/designs/hugo/src/index.mjs b/designs/hugo/src/index.mjs
index 4aa759a0776..d1801570add 100644
--- a/designs/hugo/src/index.mjs
+++ b/designs/hugo/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design, mergeI18n } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n as brianI18n } from '@freesewing/brian'
 import { i18n as hugoI18n } from '../i18n/index.mjs'
 import { back } from './back.mjs'
@@ -15,7 +15,7 @@ import { neckBinding } from './neckbinding.mjs'
 
 // Setup our new design
 const Hugo = new Design({
-  data,
+  data: about,
   parts: [
     back,
     front,
@@ -47,4 +47,5 @@ export {
   neckBinding,
   Hugo,
   i18n,
+  about,
 }
diff --git a/designs/jaeger/about.json b/designs/jaeger/about.json
new file mode 100644
index 00000000000..7854c55033d
--- /dev/null
+++ b/designs/jaeger/about.json
@@ -0,0 +1,23 @@
+{
+  "id": "jaeger",
+  "name": "Jaeger jacket",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for a sport coat style jacket",
+  "design": "Joost De Cock",
+  "difficulty": 5,
+  "tags": [
+    "tops",
+    "coats"
+  ],
+  "techniques": [
+    "hem",
+    "pocket",
+    "curved-seam",
+    "precision",
+    "set-sleeve",
+    "welt-pocket",
+    "lining",
+    "interfacing",
+    "button"
+  ]
+}
diff --git a/designs/jaeger/src/index.mjs b/designs/jaeger/src/index.mjs
index bff991865a4..3f2c88bc501 100644
--- a/designs/jaeger/src/index.mjs
+++ b/designs/jaeger/src/index.mjs
@@ -1,7 +1,7 @@
 import { Design, mergeI18n } from '@freesewing/core'
 import { i18n as bentI18n } from '@freesewing/bent'
 import { i18n as jaegerI18n } from '../i18n/index.mjs'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { backBase } from './backbase.mjs'
 import { frontBase } from './frontbase.mjs'
 import { side } from './side.mjs'
@@ -22,7 +22,7 @@ import { frontLining } from './front-lining.mjs'
 
 // Setup our new design
 const Jaeger = new Design({
-  data,
+  data: about,
   parts: [
     backBase,
     frontBase,
@@ -68,4 +68,5 @@ export {
   innerPocketWelt,
   Jaeger,
   i18n,
+  about,
 }
diff --git a/designs/jane/about.json b/designs/jane/about.json
new file mode 100644
index 00000000000..0d9c715a342
--- /dev/null
+++ b/designs/jane/about.json
@@ -0,0 +1,16 @@
+{
+  "id": "jane",
+  "name": "Jane 1970s shift",
+  "code": "SeaZeeZee",
+  "description": "A FreeSewing pattern for a 1790s shift",
+  "design": "SeaZeeZee",
+  "difficulty": 2,
+  "tags": [
+    "tops",
+    "historical",
+    "underwear"
+  ],
+  "techniques": [
+    "hem"
+  ]
+}
diff --git a/designs/jane/src/index.mjs b/designs/jane/src/index.mjs
index 1e9cb535531..208ce102acf 100644
--- a/designs/jane/src/index.mjs
+++ b/designs/jane/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { body } from './body.mjs'
 import { sleeve } from './sleeve.mjs'
 import { gusset } from './gusset.mjs'
@@ -7,8 +7,8 @@ import { i18n } from '../i18n/index.mjs'
 
 // Create new design
 const Jane = new Design({
-  data,
+  data: about,
   parts: [body, sleeve, gusset],
 })
 
-export { body, sleeve, gusset, i18n, Jane }
+export { body, sleeve, gusset, Jane, i18n, about }
diff --git a/designs/legend/src/index.mjs b/designs/legend/src/index.mjs
index f0afbbc669e..e52b7223d2f 100644
--- a/designs/legend/src/index.mjs
+++ b/designs/legend/src/index.mjs
@@ -1,5 +1,4 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
 import { i18n } from '../i18n/index.mjs'
 import { fabricLines, saLines, otherLines, lineWidths, lineStrokes } from './lines.mjs'
 import { notches } from './notches.mjs'
@@ -17,7 +16,6 @@ import { sa } from './sa.mjs'
 
 // Setup our new design
 const Legend = new Design({
-  data,
   parts: [
     fabricLines,
     saLines,
diff --git a/designs/lily/about.json b/designs/lily/about.json
new file mode 100644
index 00000000000..378c6bd9986
--- /dev/null
+++ b/designs/lily/about.json
@@ -0,0 +1,19 @@
+{
+  "id": "lily",
+  "name": "Lily leggings",
+  "code": [
+    "Anna Puk",
+    "Joost De Cock"
+  ],
+  "description": "A FreeSewing pattern for basic leggings",
+  "design": "Anna Puk",
+  "difficulty": 2,
+  "tags": [
+    "bottoms"
+  ],
+  "techniques": [
+    "elastic",
+    "curved-seam",
+    "hem"
+  ]
+}
diff --git a/designs/lily/src/index.mjs b/designs/lily/src/index.mjs
index 1a831522031..d0943c002bf 100644
--- a/designs/lily/src/index.mjs
+++ b/designs/lily/src/index.mjs
@@ -1,6 +1,6 @@
 import { Design } from '@freesewing/core'
 import { i18n } from '../i18n/index.mjs'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 // Parts
 import { front } from './front.mjs'
 import { back } from './back.mjs'
@@ -8,9 +8,9 @@ import { waistband } from './waistband.mjs'
 
 // Create new design
 const Lily = new Design({
-  data,
+  data: about,
   parts: [front, back, waistband],
 })
 
 // Named exports
-export { front, back, waistband, i18n, Lily }
+export { front, back, waistband, Lily, i18n, about }
diff --git a/designs/lucy/about.json b/designs/lucy/about.json
new file mode 100644
index 00000000000..0b500c30b41
--- /dev/null
+++ b/designs/lucy/about.json
@@ -0,0 +1,16 @@
+{
+  "id": "lucy",
+  "name": "Lucy tie-on pocket",
+  "code": "SeaZeeZee",
+  "description": "A FreeSewing pattern for a historical tie-on pocket",
+  "design": "SeaZeeZee",
+  "difficulty": 2,
+  "tags": [
+    "accessories",
+    "historical",
+    "bags"
+  ],
+  "techniques": [
+    "curved-seam"
+  ]
+}
diff --git a/designs/lucy/src/index.mjs b/designs/lucy/src/index.mjs
index a837aa5f514..6554ddd71b7 100644
--- a/designs/lucy/src/index.mjs
+++ b/designs/lucy/src/index.mjs
@@ -1,10 +1,13 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 import { pocket } from './pocket.mjs'
 
 // Setup our new design
-const Lucy = new Design({ data, parts: [pocket] })
+const Lucy = new Design({
+  data: about,
+  parts: [pocket],
+})
 
 // Named exports
-export { pocket, Lucy, i18n }
+export { pocket, Lucy, i18n, about }
diff --git a/designs/lumina/about.json b/designs/lumina/about.json
new file mode 100644
index 00000000000..1a50a813ff1
--- /dev/null
+++ b/designs/lumina/about.json
@@ -0,0 +1,17 @@
+{
+  "id": "lumina",
+  "name": "Lumina leggings",
+  "code": "Wouter Van Wageningen",
+  "description": "A FreeSewing pattern for leggings",
+  "design": "Wouter Van Wageningen",
+  "difficulty": 3,
+  "tags": [
+    "bottoms",
+    "trousers"
+  ],
+  "techniques": [
+    "stretch",
+    "curved-seam",
+    "elastic"
+  ]
+}
diff --git a/designs/lumina/src/index.mjs b/designs/lumina/src/index.mjs
index 85f68e79c47..c3dc8dcd600 100644
--- a/designs/lumina/src/index.mjs
+++ b/designs/lumina/src/index.mjs
@@ -1,8 +1,6 @@
-//
-
 import { Design } from '@freesewing/core'
 import { i18n } from '../i18n/index.mjs'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 // Parts
 import { shape } from './shape.mjs'
 import { panel } from './panel.mjs'
@@ -12,9 +10,9 @@ import { waistband } from './waistband.mjs'
 
 // Create new design
 const Lumina = new Design({
-  data,
+  data: about,
   parts: [shape, panel, leg, waistband, pocket],
 })
 
 // Named exports
-export { i18n, Lumina, shape, panel, leg, waistband, pocket }
+export { shape, panel, leg, waistband, pocket, Lumina, i18n, about }
diff --git a/designs/lumira/about.json b/designs/lumira/about.json
new file mode 100644
index 00000000000..57487a60aa5
--- /dev/null
+++ b/designs/lumira/about.json
@@ -0,0 +1,17 @@
+{
+  "id": "lumira",
+  "name": "Lumira leggings",
+  "code": "Wouter Van Wageningen",
+  "description": "A FreeSewing pattern for leggings",
+  "design": "Wouter Van Wageningen",
+  "difficulty": 3,
+  "tags": [
+    "bottoms",
+    "trousers"
+  ],
+  "techniques": [
+    "stretch",
+    "curved-seam",
+    "elastic"
+  ]
+}
diff --git a/designs/lumira/src/index.mjs b/designs/lumira/src/index.mjs
index 447fc8c31bd..02a9e094bf5 100644
--- a/designs/lumira/src/index.mjs
+++ b/designs/lumira/src/index.mjs
@@ -2,7 +2,7 @@
 
 import { Design } from '@freesewing/core'
 import { i18n } from '../i18n/index.mjs'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 // Parts
 import { extendPath, controlPoints, createControlPoints, shape } from './shape.mjs'
 import { leg } from './leg.mjs'
@@ -11,14 +11,12 @@ import { waistband } from './waistband.mjs'
 
 // Create new design
 const Lumira = new Design({
-  data,
+  data: about,
   parts: [shape, gusset, leg, waistband],
 })
 
 // Named exports
 export {
-  i18n,
-  Lumira,
   shape,
   gusset,
   leg,
@@ -26,4 +24,7 @@ export {
   extendPath,
   controlPoints,
   createControlPoints,
+  Lumira,
+  i18n,
+  about,
 }
diff --git a/designs/lunetius/about.json b/designs/lunetius/about.json
new file mode 100644
index 00000000000..dca9cf46d00
--- /dev/null
+++ b/designs/lunetius/about.json
@@ -0,0 +1,16 @@
+{
+  "id": "lunetius",
+  "name": "Lunetius lacerna",
+  "code": "Rika Tamaike",
+  "description": "A FreeSewing pattern for a lacerna, a historical Roman cloak",
+  "design": "Rika Tamaike",
+  "difficulty": 1,
+  "tags": [
+    "tops",
+    "coats",
+    "historical"
+  ],
+  "techniques": [
+    "hem"
+  ]
+}
diff --git a/designs/lunetius/src/index.mjs b/designs/lunetius/src/index.mjs
index 0430964ee80..fdd11969d71 100644
--- a/designs/lunetius/src/index.mjs
+++ b/designs/lunetius/src/index.mjs
@@ -1,13 +1,13 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 import { lacerna } from './lacerna.mjs'
 
 // Setup our new design
 const Lunetius = new Design({
-  data,
+  data: about,
   parts: [lacerna],
 })
 
 // Named exports
-export { lacerna, Lunetius, i18n }
+export { lacerna, Lunetius, i18n, about }
diff --git a/designs/magde/about.json b/designs/magde/about.json
new file mode 100644
index 00000000000..1dac1602319
--- /dev/null
+++ b/designs/magde/about.json
@@ -0,0 +1,13 @@
+{
+  "id": "magde",
+  "name": "Magde messenger bag",
+  "code": "clegganator259",
+  "description": "A FreeSewing pattern for a bike messenger bag",
+  "design": "clegganator259",
+  "difficulty": 3,
+  "tags": [
+    "accessories",
+    "bags"
+  ],
+  "techniques": []
+}
diff --git a/designs/magde/src/index.mjs b/designs/magde/src/index.mjs
index 28e8728cc04..3c767898de5 100644
--- a/designs/magde/src/index.mjs
+++ b/designs/magde/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 // Parts
 import { bodyLiner } from './bodyLiner.mjs'
@@ -16,7 +16,7 @@ import { strapAttachments } from './strapAttachments.mjs'
 
 // Create new design
 const Magde = new Design({
-  data,
+  data: about,
   parts: [
     backPanel,
     frontPanel,
@@ -47,4 +47,5 @@ export {
   internalOrganiser,
   Magde,
   i18n,
+  about,
 }
diff --git a/designs/noble/about.json b/designs/noble/about.json
new file mode 100644
index 00000000000..2e377d503eb
--- /dev/null
+++ b/designs/noble/about.json
@@ -0,0 +1,18 @@
+{
+  "id": "noble",
+  "name": "Noble body block",
+  "code": "Wouter Van Wageningen",
+  "description": "A FreeSewing pattern for a princess seam bodice block",
+  "design": "Wouter Van Wageningen",
+  "difficulty": 3,
+  "tags": [
+    "blocks",
+    "tops"
+  ],
+  "techniques": [
+    "block",
+    "curved-seam",
+    "precision",
+    "princess-seam"
+  ]
+}
diff --git a/designs/noble/src/index.mjs b/designs/noble/src/index.mjs
index 0e3f95d863c..feedfc75e04 100644
--- a/designs/noble/src/index.mjs
+++ b/designs/noble/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 import { backPoints } from './backpoints.mjs'
 import { backInside } from './backinside.mjs'
@@ -10,9 +10,19 @@ import { frontOutside } from './frontoutside.mjs'
 
 // Setup our new design
 const Noble = new Design({
-  data,
+  data: about,
   parts: [backPoints, backInside, backOutside, frontPoints, frontInside, frontOutside],
 })
 
 // Named exports
-export { backPoints, backInside, backOutside, frontPoints, frontInside, frontOutside, Noble, i18n }
+export {
+  backPoints,
+  backInside,
+  backOutside,
+  frontPoints,
+  frontInside,
+  frontOutside,
+  Noble,
+  i18n,
+  about,
+}
diff --git a/designs/octoplushy/about.json b/designs/octoplushy/about.json
new file mode 100644
index 00000000000..af97d7f0d84
--- /dev/null
+++ b/designs/octoplushy/about.json
@@ -0,0 +1,16 @@
+{
+  "id": "octoplushy",
+  "name": "Octoplushy the octopus",
+  "code": "Wouter Van Wageningen",
+  "description": "A FreeSewing pattern for an octopus plushy toy",
+  "design": "Wouter Van Wageningen",
+  "difficulty": 4,
+  "tags": [
+    "accessories",
+    "toys"
+  ],
+  "techniques": [
+    "curved-seam",
+    "precision"
+  ]
+}
diff --git a/designs/octoplushy/src/index.mjs b/designs/octoplushy/src/index.mjs
index 9c044a95198..6efc9a789e7 100644
--- a/designs/octoplushy/src/index.mjs
+++ b/designs/octoplushy/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 import { headSection1, headSection2 } from './head.mjs'
 import { armSection1, armSection2 } from './arm.mjs'
@@ -7,9 +7,20 @@ import { eye1, eye2, eye3 } from './eye.mjs'
 
 // Setup our new design
 const Octoplushy = new Design({
-  data,
+  data: about,
   parts: [headSection1, headSection2, armSection1, armSection2, eye1, eye2, eye3],
 })
 
 // Named exports
-export { headSection1, headSection2, armSection1, armSection2, eye1, eye2, eye3, Octoplushy, i18n }
+export {
+  headSection1,
+  headSection2,
+  armSection1,
+  armSection2,
+  eye1,
+  eye2,
+  eye3,
+  Octoplushy,
+  i18n,
+  about,
+}
diff --git a/designs/onyx/about.json b/designs/onyx/about.json
new file mode 100644
index 00000000000..0fa2b29b66f
--- /dev/null
+++ b/designs/onyx/about.json
@@ -0,0 +1,21 @@
+{
+  "id": "onyx",
+  "name": "Onyx one-piece",
+  "code": "Thrunic",
+  "description": "A FreeSewing pattern for one-piece garments",
+  "design": "Thrunic",
+  "difficulty": 4,
+  "tags": [
+    "swimwear",
+    "pajamas",
+    "onePiece"
+  ],
+  "techniques": [
+    "hem",
+    "curved-seam",
+    "stretch",
+    "lining",
+    "zipper",
+    "ribbing"
+  ]
+}
diff --git a/designs/onyx/src/index.mjs b/designs/onyx/src/index.mjs
index c09e0bf3714..332a54e2ba1 100644
--- a/designs/onyx/src/index.mjs
+++ b/designs/onyx/src/index.mjs
@@ -1,6 +1,6 @@
 // Import Design constructor
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 // Import Parts
 import { front } from './front.mjs'
@@ -17,7 +17,7 @@ import { legRibbing } from './legribbing.mjs'
 
 // Create new design
 const Onyx = new Design({
-  data,
+  data: about,
   parts: [
     front,
     back,
@@ -48,4 +48,5 @@ export {
   legRibbing,
   Onyx,
   i18n,
+  about,
 }
diff --git a/designs/opal/about.json b/designs/opal/about.json
new file mode 100644
index 00000000000..d9aad80b531
--- /dev/null
+++ b/designs/opal/about.json
@@ -0,0 +1,19 @@
+{
+  "id": "opal",
+  "name": "Opal overalls",
+  "code": "Thrunic",
+  "description": "A FreeSewing pattern for overalls",
+  "design": "Thrunic",
+  "difficulty": 3,
+  "tags": [
+    "overalls",
+    "onePiece"
+  ],
+  "techniques": [
+    "flat-felled-seam",
+    "hem",
+    "curved-seam",
+    "button",
+    "pocket"
+  ]
+}
diff --git a/designs/opal/src/index.mjs b/designs/opal/src/index.mjs
index 010bef67feb..a0dbf46316f 100644
--- a/designs/opal/src/index.mjs
+++ b/designs/opal/src/index.mjs
@@ -1,6 +1,6 @@
 import { Design } from '@freesewing/core'
 import { i18n } from '../i18n/index.mjs'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 // Parts
 import { front } from './front.mjs'
 import { back } from './back.mjs'
@@ -17,7 +17,7 @@ import { hammerLoop } from './hammerloop.mjs'
 
 // Create new design
 const Opal = new Design({
-  data,
+  data: about,
   parts: [
     front,
     back,
@@ -50,4 +50,5 @@ export {
   hammerLoop,
   i18n,
   Opal,
+  about,
 }
diff --git a/designs/otis/about.json b/designs/otis/about.json
new file mode 100644
index 00000000000..66de2d88c85
--- /dev/null
+++ b/designs/otis/about.json
@@ -0,0 +1,10 @@
+{
+  "id": "otis",
+  "name": "Otis romper",
+  "code": "Wouter Van Wageningen",
+  "description": "A FreeSewing pattern for a baby romper",
+  "design": "Wouter Van Wageningen",
+  "difficulty": 2,
+  "tags": [],
+  "techniques": []
+}
diff --git a/designs/otis/src/index.mjs b/designs/otis/src/index.mjs
index daf3165132c..85f7c11e8e3 100644
--- a/designs/otis/src/index.mjs
+++ b/designs/otis/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 // Parts
 import { back } from './back.mjs'
@@ -12,7 +12,7 @@ import { bindingLeg } from './bindingLeg.mjs'
 
 // Create new design
 const Otis = new Design({
-  data,
+  data: about,
   parts: [back, front, shortsleeve, longsleeve, bindingNeckBack, bindingNeckFront, bindingLeg],
 })
 
@@ -27,4 +27,5 @@ export {
   bindingLeg,
   i18n,
   Otis,
+  about,
 }
diff --git a/designs/paco/about.json b/designs/paco/about.json
new file mode 100644
index 00000000000..a699e8a5935
--- /dev/null
+++ b/designs/paco/about.json
@@ -0,0 +1,19 @@
+{
+  "id": "paco",
+  "name": "Paco pants",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for summer pants",
+  "design": "Joost De Cock",
+  "difficulty": 3,
+  "tags": [
+    "bottoms",
+    "trousers"
+  ],
+  "techniques": [
+    "elastic",
+    "curved-seam",
+    "pocket",
+    "welt-pocket",
+    "hem"
+  ]
+}
diff --git a/designs/paco/src/index.mjs b/designs/paco/src/index.mjs
index a0064129ba0..225ac76cf85 100644
--- a/designs/paco/src/index.mjs
+++ b/designs/paco/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design, mergeI18n } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n as titanI18n } from '@freesewing/titan'
 import { i18n as pacoI18n } from '../i18n/index.mjs'
 import { back } from './back.mjs'
@@ -13,7 +13,7 @@ import { waistband } from './waistband.mjs'
 
 // Setup our new design
 const Paco = new Design({
-  data,
+  data: about,
   parts: [
     back,
     front,
@@ -41,4 +41,5 @@ export {
   waistband,
   Paco,
   i18n,
+  about,
 }
diff --git a/designs/penelope/about.json b/designs/penelope/about.json
new file mode 100644
index 00000000000..760c2e5c72b
--- /dev/null
+++ b/designs/penelope/about.json
@@ -0,0 +1,18 @@
+{
+  "id": "penelope",
+  "name": "Penenlope pencil skirt",
+  "code": "Wouter Van Wageningen",
+  "description": "A FreeSewing pattern for a pencil skirt",
+  "design": "Wouter Van Wageningen",
+  "difficulty": 3,
+  "tags": [
+    "bottoms",
+    "skirts"
+  ],
+  "techniques": [
+    "hem",
+    "curved-seam",
+    "precision",
+    "zipper"
+  ]
+}
diff --git a/designs/penelope/src/index.mjs b/designs/penelope/src/index.mjs
index c15f98bd542..663a20eb3ba 100644
--- a/designs/penelope/src/index.mjs
+++ b/designs/penelope/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 import { back } from './back.mjs'
 import { front } from './front.mjs'
@@ -7,9 +7,9 @@ import { waistband } from './waistband.mjs'
 
 // Setup our new design
 const Penelope = new Design({
-  data,
+  data: about,
   parts: [back, front, waistband],
 })
 
 // Named exports
-export { back, front, waistband, Penelope, i18n }
+export { back, front, waistband, Penelope, i18n, about }
diff --git a/designs/plugintest/src/index.mjs b/designs/plugintest/src/index.mjs
index b6f9f731ee8..5bd63c7434c 100644
--- a/designs/plugintest/src/index.mjs
+++ b/designs/plugintest/src/index.mjs
@@ -1,5 +1,4 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
 import { i18n } from '../i18n/index.mjs'
 import { annotations } from './plugin-annotations.mjs'
 import { flip } from './plugin-flip.mjs'
@@ -13,7 +12,6 @@ import { ringsector } from './plugin-ringsector.mjs'
 
 // Setup our new design
 const Plugintest = new Design({
-  data,
   parts: [annotations, flip, gore, i18nStack, measurements, mirror, round, sprinkle, ringsector],
 })
 
diff --git a/designs/rendertest/src/index.mjs b/designs/rendertest/src/index.mjs
index 341c17d3334..e2e5d8eb8a6 100644
--- a/designs/rendertest/src/index.mjs
+++ b/designs/rendertest/src/index.mjs
@@ -1,11 +1,9 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
 import { i18n } from '../i18n/index.mjs'
 import { demo } from './demo.mjs'
 
 // Setup our new design
 const Rendertest = new Design({
-  data,
   parts: [demo],
 })
 
diff --git a/designs/sandy/about.json b/designs/sandy/about.json
new file mode 100644
index 00000000000..b52d4a0a93b
--- /dev/null
+++ b/designs/sandy/about.json
@@ -0,0 +1,20 @@
+{
+  "id": "sandy",
+  "name": "Sandy circle skirt",
+  "code": [
+    "Erica Alcusa Sáez",
+    "Joost De Cock"
+  ],
+  "description": "A FreeSewing pattern for a circle skirt",
+  "design": "Erica Alcusa Sáez",
+  "difficulty": 3,
+  "tags": [
+    "bottoms",
+    "skirts"
+  ],
+  "techniques": [
+    "curved-seam",
+    "button",
+    "hem"
+  ]
+}
diff --git a/designs/sandy/src/index.mjs b/designs/sandy/src/index.mjs
index 6daa4ac8e2f..2ccc88e2a45 100644
--- a/designs/sandy/src/index.mjs
+++ b/designs/sandy/src/index.mjs
@@ -1,14 +1,14 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 import { skirt } from './skirt.mjs'
 import { waistband } from './waistband.mjs'
 
 // Setup our new design
 const Sandy = new Design({
-  data,
+  data: about,
   parts: [skirt, waistband],
 })
 
 // Named exports
-export { skirt, waistband, Sandy, i18n }
+export { skirt, waistband, Sandy, i18n, about }
diff --git a/designs/shelly/about.json b/designs/shelly/about.json
new file mode 100644
index 00000000000..0d2192bb25f
--- /dev/null
+++ b/designs/shelly/about.json
@@ -0,0 +1,18 @@
+{
+  "id": "shelly",
+  "name": "Shelly swim shirt",
+  "code": "Thrunic",
+  "description": "A FreeSewing pattern for a raglan shirt, perfect for swim shirts",
+  "design": "Thrunic",
+  "difficulty": 2,
+  "tags": [
+    "tops",
+    "swimwear"
+  ],
+  "techniques": [
+    "hem",
+    "stretch",
+    "curved-seam",
+    "raglan-sleeve"
+  ]
+}
diff --git a/designs/shelly/src/index.mjs b/designs/shelly/src/index.mjs
index 2e4b4197179..f251062ebf4 100644
--- a/designs/shelly/src/index.mjs
+++ b/designs/shelly/src/index.mjs
@@ -1,6 +1,6 @@
 // Import Design constructor
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 // Import parts
 import { front } from './front.mjs'
@@ -10,7 +10,7 @@ import { neckband } from './neckband.mjs'
 
 // Create the new design
 const Shelly = new Design({
-  data,
+  data: about,
   // A list of parts is all that is required.
   parts: [front, back, raglanSleeve, neckband],
 })
@@ -22,4 +22,4 @@ const Shelly = new Design({
  * This allows us to re-use these parts in other designs.
  */
 
-export { front, back, raglanSleeve, neckband, Shelly, i18n }
+export { front, back, raglanSleeve, neckband, Shelly, i18n, about }
diff --git a/designs/shin/about.json b/designs/shin/about.json
new file mode 100644
index 00000000000..65e31c7a94f
--- /dev/null
+++ b/designs/shin/about.json
@@ -0,0 +1,18 @@
+{
+  "id": "shin",
+  "name": "Shin swim trunks",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for swim trunks",
+  "design": "Joost De Cock",
+  "difficulty": 2,
+  "tags": [
+    "bottoms",
+    "swimwear"
+  ],
+  "techniques": [
+    "hem",
+    "stretch",
+    "curved-seam",
+    "elastic"
+  ]
+}
diff --git a/designs/shin/src/index.mjs b/designs/shin/src/index.mjs
index 8cadcc023e8..0ba2e9c11fa 100644
--- a/designs/shin/src/index.mjs
+++ b/designs/shin/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 import { back } from './back.mjs'
 import { front } from './front.mjs'
@@ -7,9 +7,9 @@ import { waistband } from './waistband.mjs'
 
 // Setup our new design
 const Shin = new Design({
-  data,
+  data: about,
   parts: [back, front, waistband],
 })
 
 // Named exports
-export { back, front, waistband, Shin, i18n }
+export { back, front, waistband, Shin, i18n, about }
diff --git a/designs/simon/about.json b/designs/simon/about.json
new file mode 100644
index 00000000000..06a678aa7e9
--- /dev/null
+++ b/designs/simon/about.json
@@ -0,0 +1,19 @@
+{
+  "id": "simon",
+  "name": "Simon button-down shirt",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for a button down shirt",
+  "design": "Joost De Cock",
+  "difficulty": 4,
+  "tags": [
+    "tops"
+  ],
+  "techniques": [
+    "hem",
+    "button",
+    "interfacing",
+    "curved-seam",
+    "flat-felled-seam",
+    "flat-sleeve"
+  ]
+}
diff --git a/designs/simon/src/index.mjs b/designs/simon/src/index.mjs
index f9fb36cdc37..58c4b7dbc99 100644
--- a/designs/simon/src/index.mjs
+++ b/designs/simon/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design, mergeI18n } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n as brianI18n } from '@freesewing/brian'
 import { i18n as simonI18n } from '../i18n/index.mjs'
 import { back } from './back.mjs'
@@ -19,7 +19,7 @@ import { front } from './front.mjs'
 
 // Setup our new design
 const Simon = new Design({
-  data,
+  data: about,
   parts: [
     back,
     buttonholePlacket,
@@ -57,4 +57,5 @@ export {
   yoke,
   Simon,
   i18n,
+  about,
 }
diff --git a/designs/simone/about.json b/designs/simone/about.json
new file mode 100644
index 00000000000..d3c64f718c1
--- /dev/null
+++ b/designs/simone/about.json
@@ -0,0 +1,19 @@
+{
+  "id": "simone",
+  "name": "Simone button-down shirt",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for a button down shirt (Simone = Simon for people with breasts)",
+  "design": "Joost De Cock",
+  "difficulty": 4,
+  "tags": [
+    "tops"
+  ],
+  "techniques": [
+    "hem",
+    "button",
+    "interfacing",
+    "curved-seam",
+    "flat-felled-seam",
+    "flat-sleeve"
+  ]
+}
diff --git a/designs/simone/src/index.mjs b/designs/simone/src/index.mjs
index 9596e72f465..f92bf692909 100644
--- a/designs/simone/src/index.mjs
+++ b/designs/simone/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design, mergeI18n } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n as simonI18n } from '@freesewing/simon'
 import { i18n as simoneI18n } from '../i18n/index.mjs'
 import {
@@ -41,7 +41,7 @@ const frontLeft = {
 
 // Setup our new design
 const Simone = new Design({
-  data,
+  data: about,
   parts: [
     fbaFront,
     back,
@@ -79,4 +79,5 @@ export {
   frontLeft,
   Simone,
   i18n,
+  about,
 }
diff --git a/designs/skully/about.json b/designs/skully/about.json
new file mode 100644
index 00000000000..dea9ac16f2b
--- /dev/null
+++ b/designs/skully/about.json
@@ -0,0 +1,16 @@
+{
+  "id": "skully",
+  "name": "Skully the FreeSewing mascot",
+  "code": "Wouter Van Wageningen",
+  "description": "A FreeSewing pattern for skully, our logo, a plushy toy",
+  "design": "Wouter Van Wageningen",
+  "difficulty": 4,
+  "tags": [
+    "accessories",
+    "toys"
+  ],
+  "techniques": [
+    "curved-seam",
+    "precision"
+  ]
+}
diff --git a/designs/skully/src/index.mjs b/designs/skully/src/index.mjs
index 9eb42512ed7..ea05e9dbe91 100644
--- a/designs/skully/src/index.mjs
+++ b/designs/skully/src/index.mjs
@@ -1,6 +1,6 @@
 // Skully
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 // Parts
 import { cheek } from './cheek.mjs'
 import { cheekbone } from './cheekbone.mjs'
@@ -19,7 +19,7 @@ import { i18n } from '../i18n/index.mjs'
 
 // Create new design
 const Skully = new Design({
-  data,
+  data: about,
   parts: [
     cheek,
     cheekbone,
@@ -52,4 +52,5 @@ export {
   uppermouth,
   Skully,
   i18n,
+  about,
 }
diff --git a/designs/sven/about.json b/designs/sven/about.json
new file mode 100644
index 00000000000..eb18b08ad7a
--- /dev/null
+++ b/designs/sven/about.json
@@ -0,0 +1,16 @@
+{
+  "id": "sven",
+  "name": "Sven sweatshirt",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for a straightforward sweater",
+  "design": "Joost De Cock",
+  "difficulty": 3,
+  "tags": [
+    "tops"
+  ],
+  "techniques": [
+    "curved-seam",
+    "flat-sleeve",
+    "ribbing"
+  ]
+}
diff --git a/designs/sven/src/index.mjs b/designs/sven/src/index.mjs
index ed8981b9a0c..5c88d71915e 100644
--- a/designs/sven/src/index.mjs
+++ b/designs/sven/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design, mergeI18n } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n as brianI18n } from '@freesewing/brian'
 import { i18n as svenI18n } from '../i18n/index.mjs'
 import { front, back } from './frontback.mjs'
@@ -9,7 +9,7 @@ import { waistband } from './waistband.mjs'
 
 // Setup our new design
 const Sven = new Design({
-  data,
+  data: about,
   parts: [front, back, sleeve, cuff, waistband],
 })
 
@@ -17,4 +17,4 @@ const Sven = new Design({
 const i18n = mergeI18n([brianI18n, svenI18n])
 
 // Named exports
-export { front, back, sleeve, cuff, waistband, Sven, i18n }
+export { front, back, sleeve, cuff, waistband, Sven, i18n, about }
diff --git a/designs/tamiko/about.json b/designs/tamiko/about.json
new file mode 100644
index 00000000000..12307466ff7
--- /dev/null
+++ b/designs/tamiko/about.json
@@ -0,0 +1,14 @@
+{
+  "id": "tamiko",
+  "name": "Tamiko zero-waste top",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for a zero-waste top",
+  "design": "Joost De Cock",
+  "difficulty": 1,
+  "tags": [
+    "tops"
+  ],
+  "techniques": [
+    "curved-seam"
+  ]
+}
diff --git a/designs/tamiko/src/index.mjs b/designs/tamiko/src/index.mjs
index 1169ff39bc2..9c4747e09fa 100644
--- a/designs/tamiko/src/index.mjs
+++ b/designs/tamiko/src/index.mjs
@@ -1,13 +1,13 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 import { top } from './top.mjs'
 
 // Setup our new design
 const Tamiko = new Design({
-  data,
+  data: about,
   parts: [top],
 })
 
 // Named exports
-export { top, Tamiko, i18n }
+export { top, Tamiko, i18n, about }
diff --git a/designs/teagan/about.json b/designs/teagan/about.json
new file mode 100644
index 00000000000..1319b51753a
--- /dev/null
+++ b/designs/teagan/about.json
@@ -0,0 +1,17 @@
+{
+  "id": "teagan",
+  "name": "Teagan T-shirt",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for a T-shirt",
+  "design": "Joost De Cock",
+  "difficulty": 2,
+  "tags": [
+    "tops"
+  ],
+  "techniques": [
+    "curved-seam",
+    "hem",
+    "flat-sleeve",
+    "knit-band"
+  ]
+}
diff --git a/designs/teagan/src/index.mjs b/designs/teagan/src/index.mjs
index e0ab9c3212f..914adaae486 100644
--- a/designs/teagan/src/index.mjs
+++ b/designs/teagan/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design, mergeI18n } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n as brianI18n } from '@freesewing/brian'
 import { i18n as teaganI18n } from '../i18n/index.mjs'
 import { back } from './back.mjs'
@@ -8,7 +8,7 @@ import { sleeve } from './sleeve.mjs'
 
 // Setup our new design
 const Teagan = new Design({
-  data,
+  data: about,
   parts: [back, front, sleeve],
 })
 
@@ -18,4 +18,4 @@ const i18n = mergeI18n([brianI18n, teaganI18n], {
 })
 
 // Named exports
-export { back, front, sleeve, Teagan, i18n }
+export { back, front, sleeve, Teagan, i18n, about }
diff --git a/designs/tiberius/about.json b/designs/tiberius/about.json
new file mode 100644
index 00000000000..61aadb4f062
--- /dev/null
+++ b/designs/tiberius/about.json
@@ -0,0 +1,13 @@
+{
+  "id": "tiberius",
+  "name": "Tiberius tunica",
+  "code": "Rika Tamaike",
+  "description": "A FreeSewing pattern for a tunica, a historical Roman tunic",
+  "design": "Rika Tamaike",
+  "difficulty": 1,
+  "tags": [
+    "tops",
+    "historical"
+  ],
+  "techniques": []
+}
diff --git a/designs/tiberius/src/index.mjs b/designs/tiberius/src/index.mjs
index 656e947ddf0..78cd9d59aa4 100644
--- a/designs/tiberius/src/index.mjs
+++ b/designs/tiberius/src/index.mjs
@@ -1,13 +1,13 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 import { tunica } from './tunica.mjs'
 
 // Setup our new design
 const Tiberius = new Design({
-  data,
+  data: about,
   parts: [tunica],
 })
 
 // Named exports
-export { tunica, Tiberius, i18n }
+export { tunica, Tiberius, i18n, about }
diff --git a/designs/titan/about.json b/designs/titan/about.json
new file mode 100644
index 00000000000..a432d581665
--- /dev/null
+++ b/designs/titan/about.json
@@ -0,0 +1,16 @@
+{
+  "id": "titan",
+  "name": "Titan trouser block",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for a unisex trouser block",
+  "design": [
+    "Debra Bean",
+    "Joost De Cock"
+  ],
+  "difficulty": 3,
+  "tags": [
+    "blocks",
+    "bottoms"
+  ],
+  "techniques": []
+}
diff --git a/designs/titan/src/index.mjs b/designs/titan/src/index.mjs
index 8ccbbcf8dd5..145855b9a8c 100644
--- a/designs/titan/src/index.mjs
+++ b/designs/titan/src/index.mjs
@@ -1,14 +1,14 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 import { back } from './back.mjs'
 import { front } from './front.mjs'
 
 // Setup our new design
 const Titan = new Design({
-  data,
+  data: about,
   parts: [back, front],
 })
 
 // Named exports
-export { back, front, Titan, i18n }
+export { back, front, Titan, i18n, about }
diff --git a/designs/trayvon/about.json b/designs/trayvon/about.json
new file mode 100644
index 00000000000..1d0a89d20ce
--- /dev/null
+++ b/designs/trayvon/about.json
@@ -0,0 +1,15 @@
+{
+  "id": "trayvon",
+  "name": "Trayvon tie",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for a tie",
+  "design": "Joost De Cock",
+  "difficulty": 2,
+  "tags": [
+    "accessories"
+  ],
+  "techniques": [
+    "precision",
+    "lining"
+  ]
+}
diff --git a/designs/trayvon/src/index.mjs b/designs/trayvon/src/index.mjs
index 9376d51a03c..247b34b1aba 100644
--- a/designs/trayvon/src/index.mjs
+++ b/designs/trayvon/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 import { interfacingTail, interfacingTip } from './interfacing.mjs'
 import { liningTail, liningTip } from './lining.mjs'
@@ -8,7 +8,7 @@ import { fabricLoop } from './loop.mjs'
 
 // Setup our new design
 const Trayvon = new Design({
-  data,
+  data: about,
   parts: [
     interfacingTail,
     interfacingTip,
@@ -31,4 +31,5 @@ export {
   fabricLoop,
   Trayvon,
   i18n,
+  about,
 }
diff --git a/designs/tristan/about.json b/designs/tristan/about.json
new file mode 100644
index 00000000000..4e6f11c3c14
--- /dev/null
+++ b/designs/tristan/about.json
@@ -0,0 +1,15 @@
+{
+  "id": "tristan",
+  "name": "Tristan top",
+  "code": "Wouter van Wageningen",
+  "description": "A FreeSewing pattern for a fitted top with prince(ss) seams",
+  "design": "Natalia Sayang",
+  "difficulty": 3,
+  "tags": [
+    "tops"
+  ],
+  "techniques": [
+    "curved-seam",
+    "precision"
+  ]
+}
diff --git a/designs/tristan/src/index.mjs b/designs/tristan/src/index.mjs
index bf3a9aab97d..7b6199d8953 100644
--- a/designs/tristan/src/index.mjs
+++ b/designs/tristan/src/index.mjs
@@ -1,8 +1,6 @@
-//
-
 import { Design } from '@freesewing/core'
 import { i18n } from '../i18n/index.mjs'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 // Parts
 import { frontPoints } from './frontpoints.mjs'
 import { frontInside } from './frontinside.mjs'
@@ -15,7 +13,7 @@ import { peplumBack } from './peplumBack.mjs'
 
 // Create new design
 const Tristan = new Design({
-  data,
+  data: about,
   parts: [
     frontPoints,
     frontInside,
@@ -40,4 +38,5 @@ export {
   peplumBack,
   i18n,
   Tristan,
+  about,
 }
diff --git a/designs/uma/about.json b/designs/uma/about.json
new file mode 100644
index 00000000000..955075ab699
--- /dev/null
+++ b/designs/uma/about.json
@@ -0,0 +1,16 @@
+{
+  "id": "uma",
+  "name": "Uma undies",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for a basic, highly-customizable underwear pattern",
+  "design": "Joost De Cock",
+  "difficulty": 2,
+  "tags": [
+    "bottoms",
+    "underwear"
+  ],
+  "techniques": [
+    "elastic",
+    "curved-seam"
+  ]
+}
diff --git a/designs/uma/src/index.mjs b/designs/uma/src/index.mjs
index 94246187022..1405672c94e 100644
--- a/designs/uma/src/index.mjs
+++ b/designs/uma/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 import { base } from './base.mjs'
 import { back } from './back.mjs'
@@ -9,19 +9,12 @@ import { gusset } from './gusset.mjs'
 /*
  * Let core bake a new design for us
  */
-const Uma = new Design({ data, parts: [base, back, front, gusset] })
+const Uma = new Design({
+  data: about,
+  parts: [base, back, front, gusset],
+})
 
 /*
  * Named exports
  */
-export {
-  // Individual parts
-  base,
-  back,
-  front,
-  gusset,
-  // The Uma design itself
-  Uma,
-  // Translations
-  i18n,
-}
+export { base, back, front, gusset, Uma, i18n, about }
diff --git a/designs/umbra/about.json b/designs/umbra/about.json
new file mode 100644
index 00000000000..358256e9bed
--- /dev/null
+++ b/designs/umbra/about.json
@@ -0,0 +1,22 @@
+{
+  "id": "umbra",
+  "name": "Umbra undies",
+  "code": [
+    "Joost De Cock",
+    "Jonathan Haas"
+  ],
+  "description": "A FreeSewing pattern for a basic, highly-customizable underwear pattern",
+  "design": [
+    "Joost De Cock",
+    "Jonathan Haas"
+  ],
+  "difficulty": 2,
+  "tags": [
+    "bottoms",
+    "underwear"
+  ],
+  "techniques": [
+    "elastic",
+    "curved-seam"
+  ]
+}
diff --git a/designs/umbra/src/index.mjs b/designs/umbra/src/index.mjs
index faf32fbca8f..ab7e9db3a01 100644
--- a/designs/umbra/src/index.mjs
+++ b/designs/umbra/src/index.mjs
@@ -3,26 +3,17 @@ import { i18n } from '../i18n/index.mjs'
 import { base } from './base.mjs'
 import { back } from './back.mjs'
 import { front } from './front.mjs'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 
 /*
  * Let core bake a new design for us
  */
 const Umbra = new Design({
-  data,
+  data: about,
   parts: [base, back, front],
 })
 
 /*
  * Named exports
  */
-export {
-  // Individual parts
-  base,
-  back,
-  front,
-  // The Umbra design itself
-  Umbra,
-  // Translations
-  i18n,
-}
+export { base, back, front, Umbra, i18n, about }
diff --git a/designs/wahid/about.json b/designs/wahid/about.json
new file mode 100644
index 00000000000..45bbec4bcb6
--- /dev/null
+++ b/designs/wahid/about.json
@@ -0,0 +1,19 @@
+{
+  "id": "wahid",
+  "name": "Wahid waistcoat",
+  "code": "Joost De Cock",
+  "description": "A FreeSewing pattern for a classic fitted waistcoat",
+  "design": "Joost De Cock",
+  "difficulty": 4,
+  "tags": [
+    "tops"
+  ],
+  "techniques": [
+    "curved-seam",
+    "hem",
+    "interfacing",
+    "lining",
+    "welt-pocket",
+    "button"
+  ]
+}
diff --git a/designs/wahid/src/index.mjs b/designs/wahid/src/index.mjs
index c81bb514a36..4e5b0302722 100644
--- a/designs/wahid/src/index.mjs
+++ b/designs/wahid/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design, mergeI18n } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n as brianI18n } from '@freesewing/brian'
 import { i18n as wahidI18n } from '../i18n/index.mjs'
 import { front } from './front.mjs'
@@ -13,7 +13,7 @@ import { pocketInterfacing } from './pocketinterfacing.mjs'
 
 // Setup our new design
 const Wahid = new Design({
-  data,
+  data: about,
   parts: [
     front,
     back,
@@ -43,4 +43,5 @@ export {
   pocketInterfacing,
   Wahid,
   i18n,
+  about,
 }
diff --git a/designs/walburga/about.json b/designs/walburga/about.json
new file mode 100644
index 00000000000..680be9a3c64
--- /dev/null
+++ b/designs/walburga/about.json
@@ -0,0 +1,15 @@
+{
+  "id": "walburga",
+  "name": "Walburga wappenrock",
+  "code": "Rika Tamaike",
+  "description": "A FreeSewing pattern for a wappenrock (tabard/surcoat), a historical European/medieval (ish) garment",
+  "design": "Rika Tamaike",
+  "difficulty": 1,
+  "tags": [
+    "bottoms",
+    "historical"
+  ],
+  "techniques": [
+    "hem"
+  ]
+}
diff --git a/designs/walburga/src/index.mjs b/designs/walburga/src/index.mjs
index 010102dd6fa..516946715ba 100644
--- a/designs/walburga/src/index.mjs
+++ b/designs/walburga/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 import { front } from './front.mjs'
 import { back } from './back.mjs'
@@ -8,9 +8,9 @@ import { base } from './base.mjs'
 
 // Setup our new design
 const Walburga = new Design({
-  data,
+  data: about,
   parts: [back, front],
 })
 
 // Named exports
-export { back, front, base, Walburga, i18n }
+export { back, front, base, Walburga, i18n, about }
diff --git a/designs/waralee/about.json b/designs/waralee/about.json
new file mode 100644
index 00000000000..d7fc50885cc
--- /dev/null
+++ b/designs/waralee/about.json
@@ -0,0 +1,17 @@
+{
+  "id": "waralee",
+  "name": "Waralee wrap pants",
+  "code": "Wouter Van Wageningen",
+  "description": "A FreeSewing pattern for wrap pants",
+  "design": "Wouter Van Wageningen",
+  "difficulty": 2,
+  "tags": [
+    "bottoms",
+    "trousers"
+  ],
+  "techniques": [
+    "curved-seam",
+    "hem",
+    "welt-pocket"
+  ]
+}
diff --git a/designs/waralee/src/index.mjs b/designs/waralee/src/index.mjs
index f0254229a8c..3fe87c3c2eb 100644
--- a/designs/waralee/src/index.mjs
+++ b/designs/waralee/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n } from '../i18n/index.mjs'
 import { pants } from './pants.mjs'
 import { cutout } from './cutout.mjs'
@@ -13,7 +13,7 @@ import { pantsProto } from './pantsproto.mjs'
 
 // Setup our new design
 const Waralee = new Design({
-  data,
+  data: about,
   parts: [
     pants,
     cutout,
@@ -45,4 +45,5 @@ export {
   pantsProto,
   Waralee,
   i18n,
+  about,
 }
diff --git a/designs/yuri/about.json b/designs/yuri/about.json
new file mode 100644
index 00000000000..9b7c307759e
--- /dev/null
+++ b/designs/yuri/about.json
@@ -0,0 +1,17 @@
+{
+  "id": "yuri",
+  "name": "Yuri sweater",
+  "code": "Hellgy",
+  "description": "A FreeSewing pattern for a fancy zipless sweater based on the Huey hoodie",
+  "design": "Biou",
+  "difficulty": 3,
+  "tags": [
+    "tops"
+  ],
+  "techniques": [
+    "curved-seam",
+    "flat-sleeve",
+    "hem",
+    "button"
+  ]
+}
diff --git a/designs/yuri/src/index.mjs b/designs/yuri/src/index.mjs
index fd2fb5debc6..5945a37dfea 100644
--- a/designs/yuri/src/index.mjs
+++ b/designs/yuri/src/index.mjs
@@ -1,5 +1,5 @@
 import { Design, mergeI18n } from '@freesewing/core'
-import { data } from '../data.mjs'
+import about from '../about.json' with { type: 'json' }
 import { i18n as brianI18n } from '@freesewing/brian'
 import { i18n as yuriI18n } from '../i18n/index.mjs'
 import { back } from './back.mjs'
@@ -11,7 +11,7 @@ import { hoodCenter } from './hoodcenter.mjs'
 
 // Setup our new design
 const Yuri = new Design({
-  data,
+  data: about,
   parts: [back, front, sleeve, gusset, hoodSide, hoodCenter],
 })
 
@@ -20,4 +20,4 @@ const i18n = mergeI18n([brianI18n, yuriI18n])
 
 // Named exports
 // Named exports
-export { back, front, sleeve, gusset, hoodSide, hoodCenter, Yuri, i18n }
+export { back, front, sleeve, gusset, hoodSide, hoodCenter, Yuri, i18n, about }
diff --git a/packages/collection/src/examples.mjs b/packages/collection/src/examples.mjs
new file mode 100644
index 00000000000..6a89fedd687
--- /dev/null
+++ b/packages/collection/src/examples.mjs
@@ -0,0 +1,68 @@
+import { cloudflare } from '@freesewing/config'
+
+/*
+ * This holds the ID of an example image for all designs in the FreeSewing collection
+ */
+export const designExampleIds = {
+  aaron: 'showcase-tight-aaron',
+  albert: 'showcase-albert-by-wouter',
+  bee: 'd0312c99-7b2f-4e37-c131-d626d34cd300',
+  bella: 'showcase-bella-by-karen',
+  benjamin: 'showcase-benjamin-by-anto',
+  bent: 'showcase-linnen-jaeger-by-paul',
+  bob: 'showcase-bob-bibs-by-duck',
+  breanna: 'showcase-magicantace-breanna-sandy',
+  brian: 'showcase-brian-by-stefan-1',
+  bruce: 'showcase-nsfw-bruce',
+  cathrin: 'showcase-green-cathrin',
+  carlton: 'showcase-carlton-by-boris',
+  carlita: 'showcase-quentin-carlita',
+  charlie: 'showcase-charlie-by-joost',
+  cornelius: 'showcase-cornelius-by-wouter',
+  diana: 'showcase-diana-by-deby',
+  florence: 'showcase-rowans-leaf-print-florence',
+  florent: 'showcase-florent-by-enno',
+  gozer: '80f22d09-e1fd-4e04-67f7-e58253c66200',
+  hi: 'showcase-hi-the-shark-has-our-hearts',
+  holmes: 'showcase-a-modified-holmes',
+  hortensia: 'showcase-hortensia-by-saber',
+  huey: 'showcase-anneke-huey',
+  hugo: 'showcase-husband-hugo',
+  jaeger: 'showcase-jaeger-by-roberta',
+  lucy: 'showcase-houseoflief-lucy',
+  lumira: 'showcase-lumira-leggings-with-cycling-chamois',
+  lunetius: 'showcase-lunetius-the-lacerna',
+  noble: 'showcase-a-casual-test-of-noble',
+  octoplushy: 'showcase-meet-octoplushy',
+  onyx: 'showcase-onyx-full-body-unisuit',
+  opal: 'showcase-embroidered-opal-shortalls',
+  otis: 'showcase-four-versions-of-otis-and-a-bonus-bob',
+  paco: 'showcase-paco-by-karen',
+  penelope: 'showcase-pregnant-lady-penelope',
+  sandy: 'showcase-sandy-by-anneke',
+  shelly: 'showcase-short-sleeve-shelly-rash-guard',
+  shin: 'showcase-just-peachy-shin-bee',
+  simon: 'showcase-simon-shirt-by-sewingdentist',
+  simone: 'showcase-simone-by-gaelle',
+  skully: 'showcase-3d-skully',
+  sven: 'showcase-french-terry-sven',
+  tamiko: 'showcase-a-tamiko-top',
+  teagan: 'showcase-teagan-karen',
+  tiberius: 'showcase-tiberius-the-tunica',
+  titan: 'showcase-a-mock-up-of-titan-with-the-fit-to-knee-option-enabled',
+  trayvon: 'showcase-liberty-trayvon',
+  tristan: 'showcase-a-lined-tristan-top-with-front-lacing',
+  uma: 'showcase-lower-rise-ursula',
+  wahid: 'showcase-sterling42-wahid',
+  walburga: 'showcase-walburga-the-wappenrock',
+  waralee: 'fde729f5-ea72-4af4-b798-331bbce04000',
+  yuri: 'showcase-yuri-by-its-designer',
+}
+
+/*
+ * Same, but with a full href
+ */
+export const designExampleHrefs = {}
+for (const [design, id] of Object.entries(designExampleIds)) {
+  designExampleHrefs[design] = `${cloudflare.url}${id}/public`
+}
diff --git a/packages/collection/src/index.mjs b/packages/collection/src/index.mjs
index 8ec09158b21..26595fa6ff2 100644
--- a/packages/collection/src/index.mjs
+++ b/packages/collection/src/index.mjs
@@ -1,3 +1,4 @@
+// Designs
 import { Aaron as aaron } from '@freesewing/aaron'
 import { Albert as albert } from '@freesewing/albert'
 import { Bee as bee } from '@freesewing/bee'
@@ -56,7 +57,12 @@ import { Walburga as walburga } from '@freesewing/walburga'
 import { Waralee as waralee } from '@freesewing/waralee'
 import { Yuri as yuri } from '@freesewing/yuri'
 import { Lily as lily } from '@freesewing/lily'
+// Examples
+import { designExampleIds, designExampleHrefs } from './examples.mjs'
 
+/*
+ * Export the designs themselves
+ */
 export const designs = {
   aaron,
   albert,
@@ -118,11 +124,23 @@ export const designs = {
   lily,
 }
 
+/*
+ * Export a list of names that make up the FreeSewing collection
+ */
 export const collection = Object.keys(designs)
 
+/*
+ * Create various helper exports to get info about the collection
+ */
 export const requiredMeasurements = {}
 export const optionalMeasurements = {}
 export const measurements = {}
+export const about = {}
+
+const _tags = new Set()
+const _techniques = new Set()
+const _devs = new Set()
+const _dess = new Set()
 
 for (const design in designs) {
   requiredMeasurements[design] = designs[design].patternConfig.measurements
@@ -131,4 +149,31 @@ for (const design in designs) {
     ...designs[design].patternConfig.measurements,
     ...designs[design].patternConfig.optionalMeasurements,
   ]
+  about[design] = { ...designs[design].designConfig.data }
+  if (about[design].tags) _tags.add(...about[design].tags)
+  if (about[design].techniques) _techniques.add(...about[design].techniques)
+  if (Array.isArray(about[design].code)) _devs.add(...about[design].code)
+  else _devs.add(about[design].code)
+  if (Array.isArray(about[design].design)) _devs.add(...about[design].design)
+  else _devs.add(about[design].design)
+}
+export const tags = Array.from(_tags)
+  .filter((t) => (t ? true : false))
+  .sort()
+export const techniques = Array.from(_techniques)
+  .filter((t) => (t ? true : false))
+  .sort()
+export const developers = Array.from(_devs)
+  .filter((t) => (t ? true : false))
+  .sort()
+export const designers = Array.from(_dess)
+  .filter((t) => (t ? true : false))
+  .sort()
+
+/*
+ * These are examples
+ */
+export const examples = {
+  id: designExampleIds,
+  href: designExampleHrefs,
 }
diff --git a/packages/react/components/Account/Apikeys.mjs b/packages/react/components/Account/Apikeys.mjs
index 48e90c1455a..20f5d0c963c 100644
--- a/packages/react/components/Account/Apikeys.mjs
+++ b/packages/react/components/Account/Apikeys.mjs
@@ -102,16 +102,16 @@ export const Apikeys = ({ Link = false }) => {
 
   return (
     <>
-      <div className="flex flex-row flex-wrap gap-2 items-center justify-between mb-4">
+      <div className="tw-flex tw-flex-row tw-flex-wrap tw-gap-2 tw-items-center tw-justify-between tw-mb-4">
         <button
-          className="daisy-btn daisy-btn-error"
+          className="tw-daisy-btn tw-daisy-btn-error"
           onClick={removeSelectedApikeys}
           disabled={count < 1}
         >
           <TrashIcon /> {count} API Keys
         </button>
         <button
-          className="daisy-btn daisy-btn-primary capitalize w-full md:w-auto hover:text-primary-content"
+          className="tw-daisy-btn tw-daisy-btn-primary tw-capitalize tw-w-full md:tw-w-auto hover:tw-text-primary-content"
           onClick={() =>
             setModal(
               <ModalWrapper keepOpenOnClick>
@@ -125,13 +125,13 @@ export const Apikeys = ({ Link = false }) => {
         </button>
       </div>
       <TableWrapper>
-        <table className="table table-auto">
-          <thead className="border border-base-300 border-b-2 border-t-0 border-x-0">
+        <table className="tw-table tw-table-auto">
+          <thead className="tw-border tw-border-base-300 tw-border-b-2 tw-border-t-0 tw-border-x-0">
             <tr className="">
               <th className="">
                 <input
                   type="checkbox"
-                  className="daisy-checkbox daisy-checkbox-secondary"
+                  className="tw-daisy-checkbox tw-daisy-checkbox-secondary"
                   onClick={toggleAll}
                   checked={apikeys.length === count}
                 />
@@ -139,13 +139,13 @@ export const Apikeys = ({ Link = false }) => {
               {Object.keys(fields).map((field) => (
                 <th key={field}>
                   <button
-                    className="daisy-btn daisy-btn-link capitalize px-0 underline hover:decoration-4 decoration-2 text-secondary"
+                    className="tw-daisy-btn tw-daisy-btn-link tw-capitalize tw-px-0 underline tw-hover:decoration-4 tw-decoration-2 tw-text-secondary"
                     onClick={() => (order === field ? setDesc(!desc) : setOrder(field))}
                   >
                     {fields[field]}{' '}
                     <RightIcon
                       stroke={3}
-                      className={`w-4 h-4 ${desc ? '-' : ''}rotate-90 ${order === field ? '' : 'opacity-0'}`}
+                      className={`tw-w-4 tw-h-4 ${desc ? 'tw--' : 'tw-'}rotate-90 ${order === field ? '' : 'tw-opacity-0'}`}
                     />
                   </button>
                 </th>
@@ -155,23 +155,23 @@ export const Apikeys = ({ Link = false }) => {
           <tbody>
             {orderBy(apikeys, order, desc ? 'desc' : 'asc').map((apikey, i) => (
               <tr key={i}>
-                <td className="text-base font-medium">
+                <td className="tw-text-base tw-font-medium">
                   <input
                     type="checkbox"
                     checked={selection[apikey.id] ? true : false}
-                    className="daisy-checkbox daisy-checkbox-secondary"
+                    className="tw-daisy-checkbox tw-daisy-checkbox-secondary"
                     onClick={() => toggle(apikey.id)}
                   />
                 </td>
-                <td className="text-base font-medium">
+                <td className="tw-text-base tw-font-medium">
                   <Uuid uuid={apikey.id} label="Key" />
                 </td>
                 {Object.keys(fields)
                   .slice(1, 4)
                   .map((field) => (
-                    <td key={field} className="text-base font-medium">
+                    <td key={field} className="tw-text-base tw-font-medium">
                       <button
-                        className="daisy-btn daisy-btn-link text-secondary hover:decoration-4"
+                        className="tw-daisy-btn tw-daisy-btn-link tw-text-secondary hover:tw-decoration-4"
                         onClick={() =>
                           setModal(
                             <ModalWrapper>
@@ -184,8 +184,8 @@ export const Apikeys = ({ Link = false }) => {
                       </button>
                     </td>
                   ))}
-                <td className="text-base font-medium">{shortDate(apikey.createdAt)}</td>
-                <td className="text-base font-medium">{shortDate(apikey.expiresAt)}</td>
+                <td className="tw-text-base tw-font-medium">{shortDate(apikey.createdAt)}</td>
+                <td className="tw-text-base tw-font-medium">{shortDate(apikey.expiresAt)}</td>
               </tr>
             ))}
           </tbody>
@@ -197,10 +197,10 @@ export const Apikeys = ({ Link = false }) => {
 
 const ApiKey = ({ apikey }) => (
   <>
-    <h2 className="flex flex-row items-center gap-2">
+    <h2 className="tw-flex tw-flex-row tw-items-center tw-gap-2">
       API Key <Uuid uuid={apikey.id} />
     </h2>
-    <ul className="list list-disc ml-4">
+    <ul className="tw-list tw-list-disc tw-ml-4">
       {Object.entries(fields).map(([key, label]) => (
         <li key={key}>
           {label}: <b>{apikey[key]}</b>
@@ -248,7 +248,7 @@ const NewApikey = ({ onCreate = false }) => {
   }
 
   return (
-    <div className="w-full">
+    <div className="tw-w-full">
       <h2>New API key {apikey ? `: ${apikey.name}` : ''}</h2>
       {apikey ? (
         <ShowNewApikey {...{ apikey }} />
@@ -269,7 +269,7 @@ const NewApikey = ({ onCreate = false }) => {
             list={levels.map((l) => ({
               val: l,
               label: (
-                <div className="flex flex-row items-center w-full justify-between">
+                <div className="tw-flex tw-flex-row tw-items-center tw-w-full tw-justify-between">
                   <span>{apikeyLevels[l]}</span>
                   <NumberCircle nr={l} color="secondary" />
                 </div>
@@ -278,9 +278,9 @@ const NewApikey = ({ onCreate = false }) => {
             current={level}
             update={setLevel}
           />
-          <div className="flex flex-row gap-2 items-center w-full my-8">
+          <div className="tw-flex tw-flex-row tw-gap-2 tw-items-center tw-w-full tw-my-8">
             <button
-              className="daisy-btn daisy-btn-primary capitalize w-full md:w-auto"
+              className="tw-daisy-btn tw-daisy-btn-primary tw-capitalize tw-w-full md:tw-w-auto"
               disabled={name.length < 1}
               onClick={createKey}
             >
@@ -295,18 +295,18 @@ const NewApikey = ({ onCreate = false }) => {
 
 const ShowNewApikey = ({ apikey }) => (
   <div>
-    <div className="flex flex-row flex-wrap gap-2 items-center mb-2">
+    <div className="tw-flex tw-flex-row tw-flex-wrap tw-gap-2 tw-items-center tw-mb-2">
       <KeyVal k="name" val={apikey.name} color="secondary" />
       <KeyVal k="level" val={apikey.level} color="secondary" />
       <KeyVal k="created" val={<TimeAgo iso={apikey.createdAt} />} color="secondary" />
       <KeyVal k="expires" val={<TimeToGo iso={apikey.expiresAt} />} color="secondary" />
     </div>
-    <h6 className="flex flex-row items-center">
+    <h6 className="tw-flex tw-flex-row tw-items-center">
       Key
       <CopyToClipboard sup content={apikey.key} label="API key ID" />
     </h6>
     <pre>{apikey.key}</pre>
-    <h6 className="flex flex-row items-center">
+    <h6 className="tw-flex tw-flex-row tw-items-center">
       Secret
       <CopyToClipboard sup content={apikey.secret} label="API key secret" />
     </h6>
@@ -330,7 +330,7 @@ const ExpiryPicker = ({ expires, setExpires }) => {
   }
 
   return (
-    <div className="flex flex-row gap-2 items-center">
+    <div className="tw-flex tw-flex-row tw-gap-2 tw-items-center">
       <FormControl
         label="Key Expiry"
         labelBL={shortDate(expires)}
@@ -341,7 +341,7 @@ const ExpiryPicker = ({ expires, setExpires }) => {
           min="1"
           max={731}
           value={days}
-          className="daisy-range daisy-range-secondary w-full"
+          className="tw-daisy-range tw-daisy-range-secondary tw-w-full"
           onChange={update}
         />
       </FormControl>
diff --git a/packages/react/components/Account/Avatar.mjs b/packages/react/components/Account/Avatar.mjs
index eca3edc0ec1..0715084e869 100644
--- a/packages/react/components/Account/Avatar.mjs
+++ b/packages/react/components/Account/Avatar.mjs
@@ -51,12 +51,12 @@ export const Avatar = ({ welcome = false, Link = false }) => {
   const nextHref = '/docs/about/guide'
 
   return (
-    <div className="w-full">
+    <div className="tw-w-full">
       {!welcome || img !== false ? (
         <img
           alt="img"
           src={img || cloudflareImageUrl({ id: `uid-${account.ihash}`, variant: 'public' })}
-          className="shadow mb-4"
+          className="tw-shadow tw-mb-4"
         />
       ) : null}
       <PassiveImageInput
@@ -73,17 +73,17 @@ export const Avatar = ({ welcome = false, Link = false }) => {
             <SaveIcon />
             Save
           </IconButton>
-          <IconButton href={nextHref} className="mt-4">
+          <IconButton href={nextHref} className="tw-mt-4">
             <RightIcon stroke={3} /> Continue
           </IconButton>
           {welcomeSteps[account.control].length > 0 ? (
             <>
               <progress
-                className="progress progress-primary w-full mt-12"
+                className="tw-progress tw-progress-primary tw-w-full tw-mt-12"
                 value={700 / welcomeSteps[account.control].length}
                 max="100"
               ></progress>
-              <span className="pt-4 text-sm font-bold opacity-50">
+              <span className="tw-pt-4 tw-text-sm tw-font-bold tw-opacity-50">
                 7 / {welcomeSteps[account.control].length}
               </span>
               <WelcomeIcons
@@ -96,8 +96,11 @@ export const Avatar = ({ welcome = false, Link = false }) => {
         </>
       ) : (
         <>
-          <p className="text-right">
-            <button className="daisy-btn daisy-btn-primary w-full lg:w-auto mt-8" onClick={save}>
+          <p className="tw-text-right">
+            <button
+              className="tw-daisy-btn tw-daisy-btn-primary tw-w-full lg:tw-w-auto mt-8"
+              onClick={save}
+            >
               <SaveIcon /> Save Avatar
             </button>
           </p>
diff --git a/packages/react/components/Account/Bio.mjs b/packages/react/components/Account/Bio.mjs
index ee57f48d908..6431d6b64cd 100644
--- a/packages/react/components/Account/Bio.mjs
+++ b/packages/react/components/Account/Bio.mjs
@@ -51,28 +51,31 @@ export const Bio = ({ welcome = false, Link = false }) => {
       : '/docs/about/guide'
 
   return (
-    <div className="w-full">
+    <div className="tw-w-full">
       <h6>Tell people a little bit about yourself.</h6>
       <MarkdownInput id="account-bio" label="Bio" update={setBio} current={bio} placeholder="Bio" />
-      <p className="text-right">
-        <button className="daisy-btn daisy-btn-primary w-full lg:w-auto mt-8" onClick={save}>
+      <p className="tw-text-right">
+        <button
+          className="tw-daisy-btn tw-daisy-btn-primary tw-w-full lg:tw-w-auto tw-mt-8"
+          onClick={save}
+        >
           <SaveIcon /> Save Bio
         </button>
       </p>
 
       {welcome ? (
         <>
-          <IconButton href={nextHref} className="mt-4">
+          <IconButton href={nextHref} className="tw-mt-4">
             <RightIcon stroke={3} /> Continue
           </IconButton>
           {welcomeSteps[account.control].length > 0 ? (
             <>
               <progress
-                className="daisy-progress daisy-progress-primary w-full mt-12"
+                className="tw-daisy-progress tw-daisy-progress-primary tw-w-full tw-mt-12"
                 value={600 / welcomeSteps[account.control].length}
                 max="100"
               ></progress>
-              <span className="pt-4 text-sm font-bold opacity-50">
+              <span className="tw-pt-4 tw-text-sm tw-font-bold tw-opacity-50">
                 6 / {welcomeSteps[account.control].length}
               </span>
               <WelcomeIcons
diff --git a/packages/react/components/Account/Compare.mjs b/packages/react/components/Account/Compare.mjs
index 054c1b8e8e4..97d2ab258d6 100644
--- a/packages/react/components/Account/Compare.mjs
+++ b/packages/react/components/Account/Compare.mjs
@@ -70,19 +70,19 @@ export const Compare = ({ welcome = false }) => {
       : '/docs/about/guide'
 
   return (
-    <div className="max-w-xl">
+    <div className="tw-w-full">
       <ListInput
         id="account-compare"
         label="Are you comfortable with your measurements sets being compared?"
         list={['yes', 'no'].map((val) => ({
           val,
           label: (
-            <div className="flex flex-row items-center w-full justify-between">
+            <div className="tw-flex tw-flex-row tw-items-center tw-w-full tw-justify-between">
               <span>{strings[val].title}</span>
               {val === 'yes' ? (
-                <OkIcon className="w-8 h-8 text-success" stroke={4} />
+                <OkIcon className="tw-w-8 h-8 tw-text-success" stroke={4} />
               ) : (
-                <NoIcon className="w-8 h-8 text-error" stroke={3} />
+                <NoIcon className="tw-w-8 h-8 tw-text-error" stroke={3} />
               )}
             </div>
           ),
@@ -93,17 +93,17 @@ export const Compare = ({ welcome = false }) => {
       />
       {welcome ? (
         <>
-          <IconButton href={nextHref} className="mt-4">
+          <IconButton href={nextHref} className="tw-mt-4">
             <RightIcon stroke={3} /> Continue
           </IconButton>
           {welcomeSteps[account?.control].length > 0 ? (
             <>
               <progress
-                className="daisy-progress daisy-progress-primary w-full mt-12"
+                className="tw-daisy-progress tw-daisy-progress-primary tw-w-full tw-mt-12"
                 value={400 / welcomeSteps[account?.control].length}
                 max="100"
               ></progress>
-              <span className="pt-4 text-sm font-bold opacity-50">
+              <span className="tw-pt-4 tw-text-sm tw-font-bold tw-opacity-50">
                 4 / {welcomeSteps[account?.control].length}
               </span>
               <WelcomeIcons
diff --git a/packages/react/components/Account/Consent.mjs b/packages/react/components/Account/Consent.mjs
index c2ef0875e32..68aef7c49e4 100644
--- a/packages/react/components/Account/Consent.mjs
+++ b/packages/react/components/Account/Consent.mjs
@@ -77,16 +77,16 @@ export const Consent = ({ welcome = false, Link = false, title = false }) => {
   }
 
   return (
-    <div className="w-full mdx">
-      {title ? <h2 className="text-4xl">Privacy Matters</h2> : null}
+    <div className="tw-w-full mdx">
+      {title ? <h2 className="tw-text-4xl">Privacy Matters</h2> : null}
       {text.intro}
-      <h5 className="mt-8">Do you give your consent to process your account data?</h5>
+      <h5 className="tw-mt-8">Do you give your consent to process your account data?</h5>
       {text.account}
       {consent1 ? (
         <Checkbox value={consent1} setter={setConsent1} label="Yes, I do" />
       ) : (
         <button
-          className="daisy-btn daisy-btn-primary daisy-btn-lg w-full mt-4"
+          className="tw-daisy-btn tw-daisy-btn-primary tw-daisy-btn-lg tw-w-full tw-mt-4"
           onClick={() => setConsent1(!consent1)}
         >
           Click here to give your consent
@@ -94,7 +94,9 @@ export const Consent = ({ welcome = false, Link = false, title = false }) => {
       )}
       {consent1 ? (
         <>
-          <h5 className="mt-8">Do you give your consent to share your anonymized measurements</h5>
+          <h5 className="tw-mt-8">
+            Do you give your consent to share your anonymized measurements
+          </h5>
           <Checkbox
             value={consent2}
             setter={setConsent2}
@@ -105,19 +107,19 @@ export const Consent = ({ welcome = false, Link = false, title = false }) => {
       ) : null}
       {!consent1 && <Popout warning>This consent is required for a FreeSewing account.</Popout>}
       {consent1 ? (
-        <button className="daisy-btn daisy-btn-primary w-full mt-4" onClick={update}>
+        <button className="tw-daisy-btn tw-daisy-btn-primary tw-w-full tw-mt-4" onClick={update}>
           Save
         </button>
       ) : (
         <button
-          className="daisy-btn mt-4 capitalize w-full daisy-btn-error"
+          className="tw-daisy-btn tw-mt-4 tw-capitalize tw-w-full tw-daisy-btn-error"
           onClick={removeAccount}
         >
           Remove your account
         </button>
       )}
-      <p className="text-center opacity-50 mt-12">
-        <Link href="/docs/about/privacy" className="hover:text-secondary underline">
+      <p className="tw-text-center tw-opacity-50 tw-mt-12">
+        <Link href="/docs/about/privacy" className="hover:tw-text-secondary tw-underline">
           FreeSewing Privacy Notice
         </Link>
       </p>
@@ -127,19 +129,19 @@ export const Consent = ({ welcome = false, Link = false, title = false }) => {
 
 const Checkbox = ({ value, setter, label, children = null }) => (
   <div
-    className={`form-control p-4 hover:cursor-pointer rounded border-l-8 my-2
-    ${value ? 'border-success bg-success' : 'border-error bg-error'}
-    bg-opacity-10 shadow`}
+    className={`tw-form-control tw-p-4 hover:tw-cursor-pointer tw-rounded tw-border-l-8 tw-my-2
+    ${value ? 'tw-border-success tw-bg-success' : 'tw-border-error tw-bg-error'}
+    btw-g-opacity-10 tw-shadow`}
     onClick={() => setter(value ? false : true)}
   >
-    <div className="form-control flex flex-row items-center gap-2">
+    <div className="tw-form-control tw-flex tw-flex-row tw-items-center tw-gap-2">
       <input
         type="checkbox"
-        className="daisy-checkbox"
+        className="tw-daisy-checkbox"
         checked={value ? 'checked' : ''}
         onChange={() => setter(value ? false : true)}
       />
-      <span className="label-text">{label}</span>
+      <span className="tw-label-text">{label}</span>
     </div>
     {children}
   </div>
@@ -163,7 +165,7 @@ const text = {
     </>
   ),
   account: (
-    <div className="border-l-4 ml-1 pl-4 my-2 opacity-80">
+    <div className="tw-border-l-4 tw-ml-1 tw-pl-4 tw-my-2 tw-opacity-80">
       <h6>What is account data?</h6>
       <p>
         Your <b>email address</b>, <b>username</b>, and <b>password</b>, and any <b>measurements</b>{' '}
@@ -183,7 +185,7 @@ const text = {
       <p>
         <b>No</b>, never.
       </p>
-      <p className="text-sm italic">
+      <p className="tw-text-sm tw-italic">
         Note: Freesewing publishes anonymized measurements as open data for scientific research. You
         have the right to object to this.
       </p>
diff --git a/packages/react/components/Account/Control.mjs b/packages/react/components/Account/Control.mjs
index d28633e88a6..a83764d99b2 100644
--- a/packages/react/components/Account/Control.mjs
+++ b/packages/react/components/Account/Control.mjs
@@ -52,14 +52,14 @@ export const Control = ({ welcome = false }) => {
     : false
 
   return (
-    <div className="w-full">
+    <div className="tw-w-full">
       <ListInput
         id="account-control"
         label="What user experience do you prefer?"
         list={[1, 2, 3, 4, 5].map((val) => ({
           val,
           label: (
-            <div className="flex flex-row items-center w-full justify-between">
+            <div className="tw-flex tw-flex-row tw-items-center tw-w-full tw-justify-between">
               <span>{controlDesc[val].title}</span>
               <ControlScore control={val} />
             </div>
@@ -71,17 +71,17 @@ export const Control = ({ welcome = false }) => {
       />
       {welcome ? (
         <>
-          <IconButton href={nextHref} className="mt-4">
+          <IconButton href={nextHref} className="tw-mt-4">
             <RightIcon stroke={3} /> Continue
           </IconButton>
           {welcomeSteps[control].length > 1 ? (
             <>
               <progress
-                className="daisy-progress daisy-progress-primary w-full mt-12"
+                className="tw-daisy-progress tw-daisy-progress-primary tw-w-full tw-mt-12"
                 value={100 / welcomeSteps[control].length}
                 max="100"
               ></progress>
-              <span className="pt-4 text-sm font-bold opacity-50">
+              <span className="tw-pt-4 tw-text-sm tw-font-bold tw-opacity-50">
                 1 / {welcomeSteps[control].length}
               </span>
               <WelcomeIcons done={[]} todo={welcomeSteps[control].slice(1)} current="" />
diff --git a/packages/react/components/Account/Email.mjs b/packages/react/components/Account/Email.mjs
index 192f96283e5..ff0a19540a3 100644
--- a/packages/react/components/Account/Email.mjs
+++ b/packages/react/components/Account/Email.mjs
@@ -50,7 +50,7 @@ export const Email = ({ welcome = false, Link = false }) => {
   const valid = (validateEmail(email) && validateTld(email)) || false
 
   return (
-    <div className="w-full">
+    <div className="tw-w-full">
       {changed ? (
         <Popout note>
           <h3>Please confirm this change</h3>
@@ -71,9 +71,9 @@ export const Email = ({ welcome = false, Link = false }) => {
             original={account.email}
             valid={() => valid}
           />
-          <p className="text-right">
+          <p className="tw-text-right">
             <button
-              className="daisy-btn daisy-btn-primary w-full lg:w-auto mt-8"
+              className="tw-daisy-btn tw-daisy-btn-primary tw-w-full lg:tw-w-auto tw-mt-8"
               onClick={save}
               disabled={!valid || email.toLowerCase() === account.email}
             >
diff --git a/packages/react/components/Account/Export.mjs b/packages/react/components/Account/Export.mjs
index a25ce9cbedd..a5c24b9d41e 100644
--- a/packages/react/components/Account/Export.mjs
+++ b/packages/react/components/Account/Export.mjs
@@ -34,11 +34,11 @@ export const Export = () => {
   }
 
   return (
-    <div className="max-w-xl">
+    <div className="tw-max-w-xl">
       {link ? (
         <Popout link>
           <h5>Your data was exported and is available for download at the following location:</h5>
-          <p className="text-lg">
+          <p className="tw-text-lg">
             <WebLink href={link}>{link}</WebLink>
           </p>
         </Popout>
diff --git a/packages/react/components/Account/Github.mjs b/packages/react/components/Account/Github.mjs
index a11896876f1..da2885f2ec7 100644
--- a/packages/react/components/Account/Github.mjs
+++ b/packages/react/components/Account/Github.mjs
@@ -34,7 +34,7 @@ export const Github = () => {
   }
 
   return (
-    <div className="w-full">
+    <div className="tw-w-full">
       <StringInput
         id="account-github-email"
         label="GitHub Email Address"
@@ -51,8 +51,11 @@ export const Github = () => {
         valid={(val) => val.length > 0}
         placeholder={'joostdecock'}
       />
-      <p className="text-right">
-        <button className="daisy-btn daisy-btn-primary w-full lg:w-auto mt-8" onClick={save}>
+      <p className="tw-text-right">
+        <button
+          className="tw-daisy-btn tw-daisy-btn-primary tw-w-full lg:tw-w-auto tw-mt-8"
+          onClick={save}
+        >
           <SaveIcon /> Save
         </button>
       </p>
diff --git a/packages/react/components/Account/Import.mjs b/packages/react/components/Account/Import.mjs
index 7b387de565e..fbe252328cc 100644
--- a/packages/react/components/Account/Import.mjs
+++ b/packages/react/components/Account/Import.mjs
@@ -62,7 +62,7 @@ export const ImportSet = () => {
   }
 
   return (
-    <div className="w-full">
+    <div className="tw-w-full">
       <FileInput
         label="Measurements file (YAML / JSON)"
         update={uploadSet}
@@ -99,83 +99,3 @@ export const ImportSet = () => {
     </div>
   )
 }
-
-/*
-  // Hooks
-  const { account, setAccount } = useAccount()
-  const backend = useBackend()
-  const { setLoadingStatus } = useContext(LoadingStatusContext)
-
-  // State
-  const [bio, setBio] = useState(account.bio)
-
-  // Helper method to save bio
-  const save = async () => {
-    setLoadingStatus([true, 'Saving bio'])
-    const [status, body] = await backend.updateAccount({ bio })
-    if (status === 200 && body.result === 'success') {
-      setAccount(body.account)
-      setLoadingStatus([true, 'Bio updated', true, true])
-    } else setLoadingStatus([true, 'Something went wrong. Please report this', true, true])
-  }
-
-  // Next step in the onboarding
-  const nextHref =
-    welcomeSteps[account.control].length > 5
-      ? '/welcome/' + welcomeSteps[account.control][6]
-      : '/docs/about/guide'
-
-  return (
-    <div className="w-full">
-      <h6>Tell people a little bit about yourself.</h6>
-      <MarkdownInput id="account-bio" label="Bio" update={setBio} current={bio} placeholder="Bio" />
-      <p className="text-right">
-        <button className="daisy-btn daisy-btn-primary w-full lg:w-auto mt-8" onClick={save}>
-          <SaveIcon /> Save Bio
-        </button>
-      </p>
-
-      {welcome ? (
-        <>
-          <ContinueButton btnProps={{ href: nextHref }} link />
-          {welcomeSteps[account.control].length > 0 ? (
-            <>
-              <progress
-                className="progress progress-primary w-full mt-12"
-                value={600 / welcomeSteps[account.control].length}
-                max="100"
-              ></progress>
-              <span className="pt-4 text-sm font-bold opacity-50">
-                6 / {welcomeSteps[account.control].length}
-              </span>
-              <Icons
-                done={welcomeSteps[account.control].slice(0, 5)}
-                todo={welcomeSteps[account.control].slice(6)}
-                current="bio"
-              />
-            </>
-          ) : null}
-        </>
-      ) : null}
-    </div>
-  )
-}
-// Dependencies
-import { useContext } from 'react'
-import { useTranslation } from 'next-i18next'
-// Context
-import { LoadingStatusContext } from 'shared/context/loading-status-context.mjs'
-// Hooks
-import { useAccount } from 'shared/hooks/use-account.mjs'
-import { useBackend } from 'shared/hooks/use-backend.mjs'
-// Components
-import { FileInput } from 'shared/components/inputs.mjs'
-import { Popout } from 'shared/components/popout/index.mjs'
-import { linkClasses } from 'shared/components/link.mjs'
-import yaml from 'yaml'
-
-export const ns = ['account', 'status']
-
-export const Importer = () => {
-  // Hooks
-  */
diff --git a/packages/react/components/Account/Instagram.mjs b/packages/react/components/Account/Instagram.mjs
index 54f85435435..974a130714c 100644
--- a/packages/react/components/Account/Instagram.mjs
+++ b/packages/react/components/Account/Instagram.mjs
@@ -34,7 +34,7 @@ export const Instagram = () => {
   }
 
   return (
-    <div className="w-full">
+    <div className="tw-w-full">
       <StringInput
         id="account-github-email"
         label="GitHub Email Address"
@@ -51,8 +51,11 @@ export const Instagram = () => {
         valid={(val) => val.length > 0}
         placeholder={'joostdecock'}
       />
-      <p className="text-right">
-        <button className="daisy-btn daisy-btn-primary w-full lg:w-auto mt-8" onClick={save}>
+      <p className="tw-text-right">
+        <button
+          className="tw-daisy-btn tw-daisy-btn-primary tw-w-full lg:tw-w-auto tw-mt-8"
+          onClick={save}
+        >
           <SaveIcon /> Save
         </button>
       </p>
diff --git a/packages/react/components/Account/Mfa.mjs b/packages/react/components/Account/Mfa.mjs
index 0fcd36e9cb6..525a5d2c32f 100644
--- a/packages/react/components/Account/Mfa.mjs
+++ b/packages/react/components/Account/Mfa.mjs
@@ -89,14 +89,14 @@ export const Mfa = ({ welcome = false, title = true }) => {
   if (enable) titleText = 'Set up Multi-Factor Authentication'
 
   return (
-    <div className="w-full">
+    <div className="tw-w-full">
       {title ? <h2>{titleText}</h2> : null}
       {enable ? (
         <>
-          <div className="flex flex-row items-center justify-center px-8 lg:px-36">
+          <div className="tw-flex tw-flex-row tw-items-center tw-justify-center tw-px-8 lg:tw-px-36">
             <div dangerouslySetInnerHTML={{ __html: enable.qrcode }} />
           </div>
-          <p className="flex flex-row items-center justify-center">{enable.secret}</p>
+          <p className="tw-flex tw-flex-row tw-items-center tw-justify-center">{enable.secret}</p>
           <Bullet num="1">
             Add FreeSewing to your Authenticator App by scanning the QR code above. If you cannot
             scan the QR code, you can manually enter the secret below it.
@@ -107,14 +107,14 @@ export const Mfa = ({ welcome = false, title = true }) => {
           <input
             value={code}
             onChange={(evt) => setCode(evt.target.value)}
-            className="daisy-input w-64 m-auto text-4xl daisy-input-bordered daisy-input-lg flex flex-row text-center mb-8 tracking-widest"
+            className="tw-daisy-input tw-w-64 tw-m-auto tw-text-4xl tw-daisy-input-bordered tw-daisy-input-lg tw-flex tw-flex-row tw-text-center tw-mb-8 tw-tracking-widest"
             type="text"
             inputMode="numeric"
             pattern="[0-9]{6}"
             placeholder="000000"
           />
           <button
-            className={`${horFlexClasses} daisy-btn daisy-btn-success daisy-btn-lg block w-full md:w-auto mx-auto`}
+            className={`${horFlexClasses} tw-daisy-btn tw-daisy-btn-success tw-daisy-btn-lg tw-block tw-w-full md:tw-w-auto tw-mx-auto`}
             onClick={confirmMfa}
           >
             <LockIcon />
@@ -123,7 +123,7 @@ export const Mfa = ({ welcome = false, title = true }) => {
         </>
       ) : null}
       {disable ? (
-        <div className="my-8 max-w-xl">
+        <div className="tw-my-8 tw-max-w-xl">
           <Bullet num="1">
             <h5>Please enter your password to confirm this action</h5>
             <PasswordInput
@@ -138,13 +138,13 @@ export const Mfa = ({ welcome = false, title = true }) => {
             <input
               value={code}
               onChange={(evt) => setCode(evt.target.value)}
-              className="input w-full text-4xl  input-bordered input-lg flex flex-row text-center mb-8 tracking-widest"
+              className="tw-input tw-w-full tw-text-4xl tw-input-bordered tw-input-lg tw-flex tw-flex-row tw-text-center tw-mb-8 tw-tracking-widest"
               type="text"
               placeholder={'000000'}
             />
           </Bullet>
           <button
-            className={`${horFlexClasses} daisy-btn daisy-btn-error daisy-btn-lg`}
+            className={`${horFlexClasses} tw-daisy-btn tw-daisy-btn-error tw-daisy-btn-lg`}
             onClick={disableMfa}
             disabled={code.length < 4 || password.length < 3}
           >
@@ -163,8 +163,8 @@ export const Mfa = ({ welcome = false, title = true }) => {
             You can use each of these codes only once. Write them down, because this is the only
             time you will get to see them.
           </p>
-          <div className="hljs my-4">
-            <div className=" flex flex-row justify-between items-center text-xs font-medium text-warning mt-1 border-b border-neutral-content border-opacity-25 px-4 py-1 mb-2 lg:text-sm">
+          <div className="hljs tw-my-4">
+            <div className="tw-flex tw-flex-row tw-justify-between tw-items-center tw-text-xs tw-font-medium tw-text-warning tw-mt-1 tw-border-b tw-border-neutral-content tw-border-opacity-25 tw-px-4 tw-py-1 tw-mb-2 lg:tw-text-sm">
               <span>MFA Scratch Codes</span>
               <CopyToClipboard
                 content={
@@ -173,17 +173,17 @@ export const Mfa = ({ welcome = false, title = true }) => {
                 }
               />
             </div>
-            <pre className="language-shell hljs text-base lg:text-lg whitespace-break-spaces overflow-scroll pr-4">
+            <pre className="language-shell hljs tw-text-base lg:tw-text-lg tw-whitespace-break-spaces tw-overflow-scroll tw-pr-4">
               {scratchCodes.map((code) => code + '\n')}
             </pre>
           </div>
         </>
       ) : (
-        <div className="mt-4">
+        <div className="tw-mt-4">
           {account.mfaEnabled ? (
             disable ? null : (
               <button
-                className={`${horFlexClasses} daisy-btn daisy-btn-primary w-full md:w-auto daisy-btn-outline`}
+                className={`${horFlexClasses} tw-daisy-btn tw-daisy-btn-primary tw-w-full md:tw-w-auto tw-daisy-btn-outline`}
                 onClick={() => setDisable(true)}
               >
                 <NoIcon stroke={3} />
@@ -193,7 +193,7 @@ export const Mfa = ({ welcome = false, title = true }) => {
           ) : enable ? null : (
             <div>
               <button
-                className={`${horFlexClasses} daisy-btn daisy-btn-primary w-full md:w-auto daisy-btn-lg`}
+                className={`${horFlexClasses} tw-daisy-btn tw-daisy-btn-primary tw-w-full md:tw-w-auto tw-daisy-btn-lg`}
                 onClick={enableMfa}
               >
                 <LockIcon />
@@ -215,10 +215,10 @@ export const Mfa = ({ welcome = false, title = true }) => {
 }
 
 const Bullet = ({ num, children }) => (
-  <div className="flex flex-row items-start py-4 w-full gap-4">
-    <span className="bg-secondary text-secondary-content rounded-full w-8 h-8 p-1 inline-block text-center font-bold mr-4 shrink-0">
+  <div className="tw-flex tw-flex-row tw-items-start tw-py-4 tw-w-full tw-gap-4">
+    <span className="tw-bg-secondary tw-text-secondary-content tw-rounded-full tw-w-8 tw-h-8 tw-p-1 tw-inline-block tw-text-center tw-font-bold tw-mr-4 tw-shrink-0">
       {num}
     </span>
-    <div className="text-lg grow">{children}</div>
+    <div className="tw-text-lg tw-grow">{children}</div>
   </div>
 )
diff --git a/packages/react/components/Account/Newsletter.mjs b/packages/react/components/Account/Newsletter.mjs
index 7efc6e012f6..7b2218e0185 100644
--- a/packages/react/components/Account/Newsletter.mjs
+++ b/packages/react/components/Account/Newsletter.mjs
@@ -58,21 +58,21 @@ export const Newsletter = ({ welcome = false, Link = false }) => {
       : '/docs/about/guide'
 
   return (
-    <div className="w-full">
+    <div className="tw-w-full">
       <ListInput
         id="account-newsletter"
         label="Would you like to receive the FreeSewing newsletter?"
         list={['yes', 'no'].map((val) => ({
           val,
           label: (
-            <div className="flex flex-row items-center w-full justify-between">
+            <div className="tw-flex tw-flex-row tw-items-center tw-w-full tw-justify-between">
               <span>
                 {val === 'yes' ? 'Yes, I would like to receive the newsletter' : 'No thanks'}
               </span>
               {val === 'yes' ? (
-                <OkIcon className="w-8 h-8 text-success" stroke={4} />
+                <OkIcon className="tw-w-8 tw-h-8 tw-text-success" stroke={4} />
               ) : (
-                <NoIcon className="w-8 h-8 text-error" stroke={3} />
+                <NoIcon className="tw-w-8 tw-h-8 tw-text-error" stroke={3} />
               )}
             </div>
           ),
@@ -86,17 +86,17 @@ export const Newsletter = ({ welcome = false, Link = false }) => {
       />
       {welcome ? (
         <>
-          <IconButton href={nextHref} className="mt-4">
+          <IconButton href={nextHref} className="tw-mt-4">
             <RightIcon stroke={3} /> Continue
           </IconButton>
           {welcomeSteps[account?.control].length > 0 ? (
             <>
               <progress
-                className="daisy-progress daisy-progress-primary w-full mt-12"
+                className="tw-daisy-progress tw-daisy-progress-primary tw-w-full tw-mt-12"
                 value={200 / welcomeSteps[account?.control].length}
                 max="100"
               ></progress>
-              <span className="pt-4 text-sm font-bold opacity-50">
+              <span className="tw-pt-4 tw-text-sm tw-font-bold tw-opacity-50">
                 2 / {welcomeSteps[account?.control].length}
               </span>
               <WelcomeIcons
@@ -120,7 +120,7 @@ export const Newsletter = ({ welcome = false, Link = false }) => {
               Unsubscribe link
             </Link>
           </p>
-          <p className="text-sm">
+          <p className="tw-text-sm">
             This link is to unsubscribe you specifically, do not share it with other subscribers.
           </p>
         </Popout>
diff --git a/packages/react/components/Account/Password.mjs b/packages/react/components/Account/Password.mjs
index 6730f888f43..5fc29d5ddf1 100644
--- a/packages/react/components/Account/Password.mjs
+++ b/packages/react/components/Account/Password.mjs
@@ -42,7 +42,7 @@ export const Password = ({ welcome = false }) => {
   }
 
   return (
-    <div className="w-full">
+    <div className="tw-w-full">
       <PasswordInput
         id="account-password"
         label="Something only you know"
@@ -52,7 +52,7 @@ export const Password = ({ welcome = false }) => {
         placeholder="Tip: use a password manager"
       />
       <button
-        className={`flex flex-row gap-2 items-center daisy-btn justify-between daisy-btn-primary w-full md:w-auto w-full`}
+        className={`tw-flex tw-flex-row tw-gap-2 tw-items-center tw-daisy-btn tw-justify-between tw-daisy-btn-primary tw-w-full md:tw-w-auto tw-w-full`}
         onClick={save}
         disabled={password.length < 4}
       >
@@ -65,9 +65,9 @@ export const Password = ({ welcome = false }) => {
             We do not enforce a password policy, but we do recommend you enable Two-Factor
             Authentication to keep your FreeSewing account safe.
           </p>
-          <p className="text-right m-0 pt-0">
-            <Link className="btn btn-secondary btn-accent" href="/account/mfa">
-              Two-Factor Authentication <RightIcon className="h-6 w-6 ml-2" />
+          <p className="tw-text-right tw-m-0 tw-pt-0">
+            <Link className="tw-btn tw-btn-secondary tw-btn-accent" href="/account/mfa">
+              Two-Factor Authentication <RightIcon className="tw-h-6 tw-w-6 tw-ml-2" />
             </Link>
           </p>
         </Popout>
diff --git a/packages/react/components/Account/Pattern.mjs b/packages/react/components/Account/Pattern.mjs
index 397f9d5b28a..d221eccd5ed 100644
--- a/packages/react/components/Account/Pattern.mjs
+++ b/packages/react/components/Account/Pattern.mjs
@@ -134,7 +134,7 @@ export const Pattern = ({ id, Link }) => {
 
   if (!edit)
     return (
-      <div className="max-w-2xl">
+      <div className="tw-w-full">
         {pattern.public ? (
           <Popout note>
             <h5>This is the private view of your pattern</h5>
@@ -143,9 +143,9 @@ export const Pattern = ({ id, Link }) => {
               <br />
               But only you can access this private view.
             </p>
-            <p className="text-right">
+            <p className="tw-text-right">
               <Link
-                className={`daisy-btn daisy-btn-secondary hover:text-secondary-content hover:no-underline`}
+                className={`tw-daisy-btn tw-daisy-btn-secondary hover:tw-text-secondary-content hover:tw-no-underline`}
                 href={`/pattern?id=${pattern.id}`}
               >
                 <PatternIcon />
@@ -165,7 +165,7 @@ export const Pattern = ({ id, Link }) => {
     )
 
   return (
-    <div className="max-w-2xl">
+    <div className="tw-w-full">
       <h2>Edit pattern {pattern.name}</h2>
 
       {/* Name is always shown */}
@@ -203,10 +203,10 @@ export const Pattern = ({ id, Link }) => {
             {
               val: true,
               label: (
-                <div className="flex flex-row items-center flex-wrap justify-between w-full">
+                <div className="tw-flex tw-flex-row tw-items-center tw-flex-wrap tw-justify-between tw-w-full">
                   <span>Public Pattern</span>
                   <OkIcon
-                    className="w-8 h-8 text-success bg-base-100 rounded-full p-1"
+                    className="tw-w-8 tw-h-8 tw-text-success tw-bg-base-100 tw-rounded-full tw-p-1"
                     stroke={4}
                   />
                 </div>
@@ -216,9 +216,12 @@ export const Pattern = ({ id, Link }) => {
             {
               val: false,
               label: (
-                <div className="flex flex-row items-center flex-wrap justify-between w-full">
+                <div className="tw-flex tw-flex-row tw-items-center tw-flex-wrap tw-justify-between tw-w-full">
                   <span>Private Pattern</span>
-                  <NoIcon className="w-8 h-8 text-error bg-base-100 rounded-full p-1" stroke={3} />
+                  <NoIcon
+                    className="tw-w-8 tw-h-8 tw-text-error tw-bg-base-100 tw-rounded-full tw-p-1"
+                    stroke={3}
+                  />
                 </div>
               ),
               desc: 'Private patterns are yours and yours alone',
@@ -233,15 +236,15 @@ export const Pattern = ({ id, Link }) => {
       {account.control >= controlConfig.account.patterns.notes ? (
         <MarkdownInput id="pattern-notes" label="Notes" update={setNotes} current={notes} />
       ) : null}
-      <div className="flex flex-row items-center align-end gap-2 mt-8">
+      <div className="tw-flex tw-flex-row tw-items-center tw-align-end tw-gap-2 tw-mt-8">
         <button
           onClick={() => setEdit(false)}
-          className={`daisy-btn daisy-btn-primary daisy-btn-outline`}
+          className={`tw-daisy-btn tw-daisy-btn-primary tw-daisy-btn-outline`}
         >
           <ResetIcon />
           Cancel
         </button>
-        <button onClick={save} className="daisy-btn daisy-btn-primary grow">
+        <button onClick={save} className="tw-daisy-btn tw-daisy-btn-primary tw-grow">
           <UploadIcon />
           Save Pattern
         </button>
@@ -268,7 +271,7 @@ export const PatternCard = ({
   const s = sizes[size]
 
   const wrapperProps = {
-    className: `bg-base-300 w-full mb-2 mx-auto flex flex-col items-start text-center justify-center rounded shadow py-4 w-${s} aspect-square`,
+    className: `tw-bg-base-300 tw-w-full tw-mb-2 tw-mx-auto tw-flex tw-flex-col tw-items-start tw-text-center tw-justify-center tw-rounded tw-shadow tw-py-4 tw-w-${s} tw-aspect-square`,
     style: {
       backgroundImage: `url(${cloudflareImageUrl({ type: 'w1000', id: pattern.img })})`,
       backgroundSize: 'cover',
@@ -311,7 +314,7 @@ export const PatternCard = ({
 const BadgeLink = ({ label, href }) => (
   <a
     href={href}
-    className="daisy-badge daisy-badge-secondary font-bold daisy-badge-lg hover:text-secondary-content hover:no-underline"
+    className="tw-daisy-badge tw-daisy-badge-secondary tw-font-bold tw-daisy-badge-lg hover:tw-text-secondary-content hover:tw-no-underline"
   >
     {label}
   </a>
@@ -332,19 +335,19 @@ const PatternHeader = ({
 }) => (
   <>
     <h2>{pattern.name}</h2>
-    <div className="flex flex-row flex-wrap gap-2 text-sm items-center mb-2">
+    <div className="tw-flex tw-flex-row tw-flex-wrap tw-gap-2 tw-text-sm tw-items-center tw-mb-2">
       <KeyVal k="ID" val={pattern.id} color="secondary" />
       <KeyVal k="Created" val={<TimeAgo iso={pattern.createdAt} />} color="secondary" />
       <KeyVal k="Updated" val={<TimeAgo iso={pattern.updatedAt} />} color="secondary" />
       <KeyVal k="Public" val={pattern.public ? 'yes' : 'no'} color="secondary" />
     </div>
-    <div className="flex flex-wrap md:flex-nowrap flex-row gap-2 w-full">
-      <div className="w-full md:w-96 shrink-0">
+    <div className="tw-flex tw-flex-wrap md:tw-flex-nowrap tw-flex-row tw-gap-2 tw-w-full">
+      <div className="tw-w-full md:tw-w-96 tw-shrink-0">
         <PatternCard pattern={pattern} size="md" Link={Link} />
       </div>
-      <div className="flex flex-col justify-end gap-2 mb-2 grow">
+      <div className="tw-flex tw-flex-col tw-justify-end tw-gap-2 tw-mb-2 tw-grow">
         {account.control > 3 && (pattern?.public || pattern.userId === account.id) ? (
-          <div className="flex flex-row gap-2 items-center">
+          <div className="tw-flex tw-flex-row tw-gap-2 tw-items-center">
             <BadgeLink label="JSON" href={`${urls.backend}/patterns/${pattern.id}.json`} />
             <BadgeLink label="YAML" href={`${urls.backend}/patterns/${pattern.id}.yaml`} />
           </div>
@@ -354,12 +357,12 @@ const PatternHeader = ({
         <button
           onClick={() =>
             setModal(
-              <ModalWrapper flex="col" justify="top lg:justify-center" slideFrom="right">
+              <ModalWrapper flex="col" justify="top lg:tw-justify-center" slideFrom="right">
                 <img src={cloudflareImageUrl({ type: 'public', id: pattern.img })} />
               </ModalWrapper>
             )
           }
-          className={`daisy-btn daisy-btn-secondary daisy-btn-outline ${horFlexClasses}`}
+          className={`tw-daisy-btn tw-daisy-btn-secondary tw-daisy-btn-outline ${horFlexClasses}`}
         >
           <ShowcaseIcon />
           Show Image
@@ -367,7 +370,7 @@ const PatternHeader = ({
         {account.control > 3 ? (
           <button
             onClick={() => togglePublic()}
-            className={`daisy-btn daisy-btn-${pattern.public ? 'error' : 'success'} daisy-btn-outline ${horFlexClasses} hover:text-${pattern.public ? 'error' : 'success'}-content`}
+            className={`tw-daisy-btn tw-daisy-btn-${pattern.public ? 'error' : 'success'} tw-daisy-btn-outline ${horFlexClasses} hover:tw-text-${pattern.public ? 'error' : 'success'}-content`}
           >
             {pattern.public ? <BoolNoIcon /> : <BoolYesIcon />}
             Make pattern {pattern.public ? 'private' : 'public'}
@@ -377,19 +380,19 @@ const PatternHeader = ({
           <>
             <Link
               href={`/account/patterns/${pattern.design}/edit?id=${pattern.id}`}
-              className={`daisy-btn daisy-btn-primary daisy-btn-outline ${horFlexClasses}`}
+              className={`tw-daisy-btn tw-daisy-btn-primary tw-daisy-btn-outline ${horFlexClasses}`}
             >
               <FreeSewingIcon /> Update Pattern
             </Link>
             <button
-              className={`daisy-btn daisy-btn-primary daisy-btn-outline ${horFlexClasses}`}
+              className={`tw-daisy-btn tw-daisy-btn-primary tw-daisy-btn-outline ${horFlexClasses}`}
               onClick={clone}
             >
               <CloneIcon /> Clone Pattern
             </button>
             <button
               onClick={() => setEdit(true)}
-              className={`daisy-btn daisy-btn-primary ${horFlexClasses}`}
+              className={`tw-daisy-btn tw-daisy-btn-primary ${horFlexClasses}`}
             >
               <EditIcon /> Edit Pattern Metadata
             </button>
diff --git a/packages/react/components/Account/Patterns.mjs b/packages/react/components/Account/Patterns.mjs
index 693a95a5d48..fde65ec2ca1 100644
--- a/packages/react/components/Account/Patterns.mjs
+++ b/packages/react/components/Account/Patterns.mjs
@@ -4,7 +4,6 @@ import { capitalize, shortDate } from '@freesewing/utils'
 
 // Context
 import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
-//import { ModalContext } from '@freesewing/react/context/Modal'
 
 // Hooks
 import React, { useState, useEffect, useContext } from 'react'
@@ -12,30 +11,6 @@ import { useAccount } from '@freesewing/react/hooks/useAccount'
 import { useBackend } from '@freesewing/react/hooks/useBackend'
 import { useSelection } from '@freesewing/react/hooks/useSelection'
 
-//import {
-//  measurements,
-//  isDegreeMeasurement,
-//  control as controlConfig,
-//  urls,
-//} from '@freesewing/config'
-//import { measurements as measurementTranslations } from '@freesewing/i18n'
-//import { measurements as designMeasurements } from '@freesewing/collection'
-//import {
-//  cloudflareImageUrl,
-//  capitalize,
-//  formatMm,
-//  horFlexClasses,
-//  linkClasses,
-//  notEmpty,
-//  roundDistance,
-//  shortDate,
-//  timeAgo,
-//} from '@freesewing/utils'
-
-//// Hooks
-//import React, { useState, useEffect, Fragment, useContext } from 'react'
-//import { useAccount } from '@freesewing/react/hooks/useAccount'
-//import { useBackend } from '@freesewing/react/hooks/useBackend'
 // Components
 import { TableWrapper } from '@freesewing/react/components/Table'
 import { PatternCard } from '@freesewing/react/components/Account'
@@ -43,38 +18,10 @@ import { Link as WebLink } from '@freesewing/react/components/Link'
 import {
   BoolNoIcon,
   BoolYesIcon,
-  //  CloneIcon,
-  //  CuratedMeasurementsSetIcon,
-  //  EditIcon,
-  //  ShowcaseIcon,
-  //  NewMeasurementsSetIcon,
-  //  NoIcon,
-  //  OkIcon,
   PlusIcon,
   RightIcon,
-  //  ResetIcon,
   TrashIcon,
-  //  UploadIcon,
-  //  //  WarningIcon,
-  //  //  BoolYesIcon,
-  //  //  BoolNoIcon,
 } from '@freesewing/react/components/Icon'
-//import { BookmarkButton, MsetCard } from '@freesewing/react/components/Account'
-//import {
-//  DesignInput,
-//  MarkdownInput,
-//  ListInput,
-//  MeasieInput,
-//  PassiveImageInput,
-//  StringInput,
-//  ToggleInput,
-//} from '@freesewing/react/components/Input'
-//import { DisplayRow } from './shared.mjs'
-//import Markdown from 'react-markdown'
-//import { ModalWrapper } from '@freesewing/react/components/Modal'
-//import { Json } from '@freesewing/react/components/Json'
-//import { Yaml } from '@freesewing/react/components/Yaml'
-//import { Popout } from '@freesewing/react/components/Popout'
 
 const t = (input) => {
   console.log('t called', input)
@@ -142,16 +89,16 @@ export const Patterns = ({ Link = false }) => {
 
   return (
     <>
-      <div className="flex flex-row flex-wrap gap-2 items-center justify-between mb-4">
+      <div className="tw-flex tw-flex-row tw-flex-wrap tw-gap-2 tw-items-center tw-justify-between tw-mb-4">
         <button
-          className="daisy-btn daisy-btn-error"
+          className="tw-daisy-btn tw-daisy-btn-error"
           onClick={removeSelectedPatterns}
           disabled={count < 1}
         >
           <TrashIcon /> {count} {t('patterns')}
         </button>
         <Link
-          className="daisy-btn daisy-btn-primary capitalize w-full md:w-auto hover:text-primary-content"
+          className="tw-daisy-btn tw-daisy-btn-primary tw-capitalize tw-w-full md:tw-w-auto hover:tw-text-primary-content"
           href="/-/"
         >
           <PlusIcon />
@@ -159,13 +106,13 @@ export const Patterns = ({ Link = false }) => {
         </Link>
       </div>
       <TableWrapper>
-        <table className="table table-auto">
-          <thead className="border border-base-300 border-b-2 border-t-0 border-x-0">
+        <table className="tw-table tw-table-auto">
+          <thead className="tw-border tw-border-base-300 tw-border-b-2 tw-border-t-0 tw-border-x-0">
             <tr className="">
               <th className="">
                 <input
                   type="checkbox"
-                  className="daisy-checkbox daisy-checkbox-secondary"
+                  className="tw-daisy-checkbox tw-daisy-checkbox-secondary"
                   onClick={toggleAll}
                   checked={patterns.length === count}
                 />
@@ -173,13 +120,13 @@ export const Patterns = ({ Link = false }) => {
               {Object.keys(fields).map((field) => (
                 <th key={field}>
                   <button
-                    className="daisy-btn daisy-btn-link capitalize px-0 underline hover:decoration-4 decoration-2 text-secondary"
+                    className="tw-daisy-btn tw-daisy-btn-link tw-capitalize tw-px-0 tw-underline hover:tw-decoration-4 tw-decoration-2 tw-text-secondary"
                     onClick={() => (order === field ? setDesc(!desc) : setOrder(field))}
                   >
                     {fields[field]}{' '}
                     <RightIcon
                       stroke={3}
-                      className={`w-4 h-4 ${desc ? '-' : ''}rotate-90 ${order === field ? '' : 'opacity-0'}`}
+                      className={`tw-w-4 tw-h-4 ${desc ? 'tw--' : 'tw-'}rotate-90 ${order === field ? '' : 'tw-opacity-0'}`}
                     />
                   </button>
                 </th>
@@ -189,16 +136,16 @@ export const Patterns = ({ Link = false }) => {
           <tbody>
             {orderBy(patterns, order, desc ? 'desc' : 'asc').map((pattern, i) => (
               <tr key={i}>
-                <td className="text-base font-medium">
+                <td className="tw-text-base tw-font-medium">
                   <input
                     type="checkbox"
                     checked={selection[pattern.id] ? true : false}
-                    className="daisy-checkbox daisy-checkbox-secondary"
+                    className="tw-daisy-checkbox tw-daisy-checkbox-secondary"
                     onClick={() => toggle(pattern.id)}
                   />
                 </td>
-                <td className="text-base font-medium">{pattern.id}</td>
-                <td className="text-base font-medium">
+                <td className="tw-text-base tw-font-medium">{pattern.id}</td>
+                <td className="tw-text-base tw-font-medium">
                   <PatternCard
                     href={`/account/data/patterns/pattern?id=${pattern.id}`}
                     pattern={pattern}
@@ -206,24 +153,24 @@ export const Patterns = ({ Link = false }) => {
                     Link={Link}
                   />
                 </td>
-                <td className="text-base font-medium">
+                <td className="tw-text-base tw-font-medium">
                   <Link
                     href={`/account/data/patterns/pattern?id=${pattern.id}`}
-                    className="text-secondary underline decoration-2 hover:decoration-4"
+                    className="tw-text-secondary tw-underline tw-decoration-2 hover:tw-decoration-4"
                   >
                     {pattern.name}
                   </Link>
                 </td>
-                <td className="text-base font-medium">
+                <td className="tw-text-base tw-font-medium">
                   <Link
                     href={`/designs/${pattern.design}`}
-                    className="text-secondary underline decoration-2 hover:decoration-4"
+                    className="tw-text-secondary tw-underline tw-decoration-2 hover:tw-decoration-4"
                   >
                     {capitalize(pattern.design)}
                   </Link>
                 </td>
-                <td className="text-base font-medium">{shortDate(pattern.createdAt)}</td>
-                <td className="text-base font-medium">
+                <td className="tw-text-base tw-font-medium">{shortDate(pattern.createdAt)}</td>
+                <td className="tw-text-base tw-font-medium">
                   {pattern.public ? <BoolYesIcon /> : <BoolNoIcon />}
                 </td>
               </tr>
diff --git a/packages/react/components/Account/Platform.mjs b/packages/react/components/Account/Platform.mjs
index 65def90b2f0..3e4c692647f 100644
--- a/packages/react/components/Account/Platform.mjs
+++ b/packages/react/components/Account/Platform.mjs
@@ -56,7 +56,7 @@ const Platform = ({ platform = false }) => {
   }
 
   return (
-    <div className="w-full">
+    <div className="tw-w-full">
       <StringInput
         id={`account-${platform}`}
         label={platform === 'website' ? `Website URL` : `${labels[platform]} account`}
@@ -65,8 +65,11 @@ const Platform = ({ platform = false }) => {
         valid={(val) => val.length > 0}
         placeholder={'joostdecock'}
       />
-      <p className="text-right">
-        <button className="daisy-btn daisy-btn-primary w-full lg:w-auto mt-8" onClick={save}>
+      <p className="tw-text-right">
+        <button
+          className="tw-daisy-btn tw-daisy-btn-primary tw-w-full lg:tw-w-auto tw-mt-8"
+          onClick={save}
+        >
           <SaveIcon /> Save
         </button>
       </p>
diff --git a/packages/react/components/Account/Reload.mjs b/packages/react/components/Account/Reload.mjs
index e9e2ddd4bea..877d6ed7ab3 100644
--- a/packages/react/components/Account/Reload.mjs
+++ b/packages/react/components/Account/Reload.mjs
@@ -32,7 +32,7 @@ export const Reload = () => {
   }
 
   return (
-    <div className="w-full">
+    <div className="tw-w-full">
       <p>
         The data stored in your browser can sometimes get out of sync with the data stored in our
         backend.
diff --git a/packages/react/components/Account/Remove.mjs b/packages/react/components/Account/Remove.mjs
index ee42ac98abf..92d2c124740 100644
--- a/packages/react/components/Account/Remove.mjs
+++ b/packages/react/components/Account/Remove.mjs
@@ -48,22 +48,22 @@ export const Remove = () => {
     )
 
   return (
-    <div className="w-full">
+    <div className="tw-w-full">
       <IconButton
         onClick={() =>
           setModal(
             <ModalWrapper keepOpenOnClick>
-              <div className="text-center w-full">
+              <div className="tw-text-center tw-w-full">
                 <h2>There is no way back from this</h2>
                 <p>If this is what you want, then go ahead.</p>
-                <IconButton onClick={removeAccount} color="error" className="mx-auto">
+                <IconButton onClick={removeAccount} color="error" className="tw-mx-auto">
                   <TrashIcon />
                   Remove your FreeSewing account
                 </IconButton>
                 <IconButton
                   onClick={clearModal}
                   color="primary"
-                  className="mx-auto daisy-btn-outline mt-4"
+                  className="tw-mx-auto tw-daisy-btn-outline tw-mt-4"
                 >
                   <ExitIcon />
                   Back to safety
diff --git a/packages/react/components/Account/Restrict.mjs b/packages/react/components/Account/Restrict.mjs
index 5a15294c097..a469b313399 100644
--- a/packages/react/components/Account/Restrict.mjs
+++ b/packages/react/components/Account/Restrict.mjs
@@ -53,7 +53,7 @@ export const Restrict = ({ Link = false }) => {
     )
 
   return (
-    <div className="w-full">
+    <div className="tw-w-full">
       <p>
         The GDPR guarantees{' '}
         <Link href="/docs/about/rights/#the-right-to-restrict-processing" className={linkClasses}>
@@ -66,21 +66,21 @@ export const Restrict = ({ Link = false }) => {
         onClick={() =>
           setModal(
             <ModalWrapper keepOpenOnClick>
-              <div className="text-center w-full max-w-xl">
+              <div className="tw-text-center tw-w-full tw-max-w-xl">
                 <h2>Proceed with caution</h2>
                 <p>
                   While no data will be removed, this will disable your account. Furthermore, you
                   can not undo this on your own, but will have to contact support when you want to
                   restore access to your account.
                 </p>
-                <IconButton onClick={restrictAccount} color="error" className="mx-auto">
+                <IconButton onClick={restrictAccount} color="error" className="tw-mx-auto">
                   <NoIcon stroke={3} />
                   Restrict processing of your FreeSewing data
                 </IconButton>
                 <IconButton
                   onClick={clearModal}
                   color="primary"
-                  className="mx-auto daisy-btn-outline mt-4"
+                  className="tw-mx-auto tw-daisy-btn-outline tw-mt-4"
                 >
                   <BackIcon />
                   Back to safety
diff --git a/packages/react/components/Account/Set.mjs b/packages/react/components/Account/Set.mjs
index 00400b10658..d528b6f3d25 100644
--- a/packages/react/components/Account/Set.mjs
+++ b/packages/react/components/Account/Set.mjs
@@ -206,21 +206,21 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
 
   const heading = (
     <>
-      <div className="flex flex-wrap md:flex-nowrap flex-row gap-2 w-full">
-        <div className="w-full md:w-96 shrink-0">
+      <div className="tw-flex tw-flex-wrap md:tw-flex-nowrap tw-flex-row tw-gap-2 tw-w-full">
+        <div className="tw-w-full md:tw-w-96 tw-shrink-0">
           <MsetCard set={mset} control={control} Link={Link} />
         </div>
-        <div className="flex flex-col justify-end gap-2 mb-2 grow">
+        <div className="tw-flex tw-flex-col tw-justify-end tw-gap-2 tw-mb-2 tw-grow">
           {account.control > 2 && mset.public && mset.userId !== account.id ? (
-            <div className="flex flex-row gap-2 items-center">
+            <div className="tw-flex tw-flex-row tw-gap-2 tw-items-center">
               <a
-                className="daisy-badge daisy-badge-secondary font-bold daisy-badge-lg"
+                className="tw-daisy-badge tw-daisy-badge-secondary tw-font-bold tw-daisy-badge-lg"
                 href={`${urls.backend}/sets/${mset.id}.json`}
               >
                 JSON
               </a>
               <a
-                className="daisy-badge daisy-badge-success font-bold daisy-badge-lg"
+                className="tw-daisy-badge tw-daisy-badge-success tw-font-bold tw-daisy-badge-lg"
                 href={`${urls.backend}/sets/${mset.id}.yaml`}
               >
                 YAML
@@ -230,9 +230,9 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
             <span></span>
           )}
           {account.control > 3 && mset.userId === account.id ? (
-            <div className="flex flex-row gap-2 items-center">
+            <div className="tw-flex tw-flex-row tw-gap-2 tw-items-center">
               <button
-                className="daisy-badge daisy-badge-secondary font-bold daisy-badge-lg"
+                className="tw-daisy-badge tw-daisy-badge-secondary tw-font-bold tw-daisy-badge-lg"
                 onClick={() =>
                   setModal(
                     <ModalWrapper keepOpenOnClick>
@@ -244,7 +244,7 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
                 JSON
               </button>
               <button
-                className="daisy-badge daisy-badge-success font-bold daisy-badge-lg text-neutral-content"
+                className="tw-daisy-badge tw-daisy-badge-success tw-font-bold tw-daisy-badge-lg tw-text-neutral-content"
                 onClick={() =>
                   setModal(
                     <ModalWrapper keepOpenOnClick>
@@ -261,11 +261,11 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
           )}
           {account.id && account.control > 2 && mset.public && mset.userId !== account.id ? (
             <button
-              className="daisy-btn daisy-btn-primary"
+              className="tw-daisy-btn tw-daisy-btn-primary"
               title="Import measurements set"
               onClick={importSet}
             >
-              <div className="flex flex-row gap-4 justify-between items-center w-full">
+              <div className="tw-flex tw-flex-row tw-gap-4 tw-justify-between tw-items-center tw-w-full">
                 <UploadIcon />
                 Import measurements set
               </div>
@@ -282,7 +282,7 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
                 </ModalWrapper>
               )
             }
-            className={`daisy-btn daisy-btn-secondary btn-outline ${horFlexClasses}`}
+            className={`tw-daisy-btn tw-daisy-btn-secondary tw-btn-outline ${horFlexClasses}`}
           >
             <ShowcaseIcon />
             Show Image
@@ -295,9 +295,9 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
                     setSuggest(!suggest)
                     setEdit(false)
                   }}
-                  className={`daisy-btn ${
-                    suggest ? 'daisy-btn-neutral' : 'daisy-btn-primary'
-                  } daisy-btn-outline ${horFlexClasses}`}
+                  className={`tw-daisy-btn ${
+                    suggest ? 'tw-daisy-btn-neutral' : 'tw-daisy-btn-primary'
+                  } tw-daisy-btn-outline ${horFlexClasses}`}
                 >
                   {suggest ? <ResetIcon /> : <CuratedMeasurementsSetIcon />}
                   {suggest ? 'Cancel' : 'Suggest for curation'}
@@ -310,14 +310,14 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
                       setEdit(false)
                       setSuggest(false)
                     }}
-                    className={`daisy-btn daisy-btn-neutral daisy-btn-outline ${horFlexClasses}`}
+                    className={`tw-daisy-btn tw-daisy-btn-neutral tw-daisy-btn-outline ${horFlexClasses}`}
                   >
                     <ResetIcon />
                     Cancel
                   </button>
                   <button
                     onClick={save}
-                    className={`daisy-btn daisy-btn-primary ${horFlexClasses}`}
+                    className={`tw-daisy-btn tw-daisy-btn-primary ${horFlexClasses}`}
                   >
                     <UploadIcon />
                     Save measurements set
@@ -329,7 +329,7 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
                     setEdit(true)
                     setSuggest(false)
                   }}
-                  className={`daisy-btn daisy-btn-primary ${horFlexClasses}`}
+                  className={`tw-daisy-btn tw-daisy-btn-primary ${horFlexClasses}`}
                 >
                   <EditIcon /> Edit measurements set
                 </button>
@@ -338,11 +338,11 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
           )}
           {account.control > 2 && mset.userId === account.id ? (
             <button
-              className="daisy-btn daisy-btn-neutral"
+              className="tw-daisy-btn tw-daisy-btn-neutral"
               title="Clone measurements set"
               onClick={importSet}
             >
-              <div className="flex flex-row gap-4 justify-between items-center w-full">
+              <div className="tw-flex tw-flex-row tw-gap-4 tw-justify-between tw-items-center tw-w-full">
                 <CloneIcon />
                 Clone measurements set
               </div>
@@ -350,13 +350,13 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
           ) : null}
         </div>
       </div>
-      <div className="flex flex-row flex-wrap gap-4 text-sm items-center justify-between mb-2"></div>
+      <div className="tw-flex tw-flex-row tw-flex-wrap tw-gap-4 tw-text-sm tw-items-center tw-justify-between tw-mb-2"></div>
     </>
   )
 
   if (suggest)
     return (
-      <div className="max-w-2xl">
+      <div className="tw-w-full">
         {heading}
         <SuggestCset {...{ mset, setLoadingStatus, backend, Link }} />
       </div>
@@ -364,7 +364,7 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
 
   if (!edit)
     return (
-      <div className="max-w-2xl">
+      <div className="tw-w-full">
         {heading}
 
         <h2>Data</h2>
@@ -379,14 +379,14 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
           <>
             {mset.userId === account.id && (
               <DisplayRow title="Public">
-                <div className="flex flex-row gap-2 items-center justify-between">
+                <div className="tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-between">
                   {mset.public ? (
-                    <OkIcon className="w-6 h-6 text-success" stroke={4} />
+                    <OkIcon className="tw-w-6 tw-h-6 tw-text-success" stroke={4} />
                   ) : (
-                    <NoIcon className="w-6 h-6 text-error" stroke={3} />
+                    <NoIcon className="tw-w-6 tw-h-6 tw-text-error" stroke={3} />
                   )}
                   <button
-                    className="daisy-btn daisy-btn-secondary daisy-btn-sm"
+                    className="tw-daisy-btn tw-daisy-btn-secondary tw-daisy-btn-sm"
                     onClick={togglePublic}
                   >
                     Make {mset.public ? 'Private' : 'Public'}
@@ -407,13 +407,13 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
         {control >= controlConfig.account.sets.createdAt && (
           <DisplayRow title="Created">
             {timeAgo(mset.createdAt, false)}
-            <span className="text-sm pl-2">({shortDate(mset.createdAt, false)})</span>
+            <span className="tw-text-sm tw-pl-2">({shortDate(mset.createdAt, false)})</span>
           </DisplayRow>
         )}
         {control >= controlConfig.account.sets.updatedAt && (
           <DisplayRow title="Updated">
             {timeAgo(mset.updatedAt, false)}
-            <span className="text-sm pl-2">({shortDate(mset.updatedAt, false)})</span>
+            <span className="tw-text-sm tw-pl-2">({shortDate(mset.updatedAt, false)})</span>
           </DisplayRow>
         )}
         {control >= controlConfig.account.sets.id && <DisplayRow title="ID">{mset.id}</DisplayRow>}
@@ -433,7 +433,7 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
                   title={<MeasurementValue {...{ m, val, imperial: !displayAsMetric }} />}
                   key={m}
                 >
-                  <span className="font-medium">{m}</span>
+                  <span className="tw-font-medium">{m}</span>
                 </DisplayRow>
               ) : null
             )}
@@ -443,10 +443,10 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
     )
 
   return (
-    <div className="max-w-2xl">
+    <div className="tw-w-full">
       {heading}
       <h2 id="measies">Measurements</h2>
-      <div className="bg-secondary px-4 pt-1 pb-4 rounded-lg shadow bg-opacity-10">
+      <div className="tw-bg-secondary tw-px-4 tw-pt-1 tw-pb-4 tw-rounded-lg tw-shadow tw-bg-opacity-10">
         <DesignInput
           update={setFilter}
           label="Filter by design"
@@ -504,10 +504,10 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
             {
               val: true,
               label: (
-                <div className="flex flex-row items-center flex-wrap justify-between w-full">
+                <div className="tw-flex tw-flex-row tw-items-center tw-flex-wrap tw-justify-between tw-w-full">
                   <span>Public measurements set</span>
                   <OkIcon
-                    className="w-8 h-8 text-success bg-base-100 rounded-full p-1"
+                    className="tw-w-8 tw-h-8 tw-text-success tw-bg-base-100 tw-rounded-full tw-p-1"
                     stroke={4}
                   />
                 </div>
@@ -517,9 +517,12 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
             {
               val: false,
               label: (
-                <div className="flex flex-row items-center flex-wrap justify-between w-full">
+                <div className="tw-flex tw-flex-row tw-items-center tw-flex-wrap tw-justify-between tw-w-full">
                   <span>Private measurements set</span>
-                  <NoIcon className="w-8 h-8 text-error bg-base-100 rounded-full p-1" stroke={3} />
+                  <NoIcon
+                    className="tw-w-8 tw-h-8 tw-text-error tw-bg-base-100 tw-rounded-full tw-p-1"
+                    stroke={3}
+                  />
                 </div>
               ),
               desc: 'These measurements cannot be used by other users or visitors',
@@ -541,9 +544,9 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
               {
                 val: false,
                 label: (
-                  <div className="flex flex-row items-center flex-wrap justify-between w-full">
+                  <div className="tw-flex tw-flex-row tw-items-center tw-flex-wrap tw-justify-between tw-w-full">
                     <span>Metric units (cm)</span>
-                    <span className="text-inherit text-2xl pr-2">cm</span>
+                    <span className="tw-text-inherit tw-text-2xl tw-pr-2">cm</span>
                   </div>
                 ),
                 desc: 'Pick this if you prefer cm over inches',
@@ -551,9 +554,9 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
               {
                 val: true,
                 label: (
-                  <div className="flex flex-row items-center flex-wrap justify-between w-full">
+                  <div className="tw-flex tw-flex-row tw-items-center tw-flex-wrap tw-justify-between tw-w-full">
                     <span>Imperial units (inch)</span>
-                    <span className="text-inherit text-4xl pr-2">″</span>
+                    <span className="tw-text-inherit tw-text-4xl tw-pr-2">″</span>
                   </div>
                 ),
                 desc: 'Pick this if you prefer inches over cm',
@@ -561,7 +564,7 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
             ]}
             current={imperial}
           />
-          <span className="text-large text-warning">
+          <span className="tw-text-large tw-text-warning">
             Note: You must save after changing Units to have the change take effect on this page.
           </span>
         </>
@@ -580,7 +583,7 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
       ) : null}
       <button
         onClick={save}
-        className="daisy-btn daisy-btn-primary daisy-btn-lg flex flex-row items-center gap-4 mx-auto mt-8"
+        className="tw-daisy-btn tw-daisy-btn-primary tw-daisy-btn-lg tw-flex tw-flex-row tw-items-center tw-gap-4 tw-mx-auto tw-mt-8"
       >
         <UploadIcon />
         Save Measurements Set
@@ -655,7 +658,7 @@ export const SuggestCset = ({ mset, Link }) => {
   return (
     <>
       <h2>Suggest a measurements set for curation</h2>
-      <h4 className="flex flex-row items-center gap-2">
+      <h4 className="tw-flex tw-flex-row tw-items-center tw-gap-2">
         {missing.length > 0 ? <BoolNoIcon /> : <BoolYesIcon />}
         Measurements
       </h4>
@@ -666,7 +669,7 @@ export const SuggestCset = ({ mset, Link }) => {
             of measurements.
           </p>
           <p>Your measurements set is missing the following measurements:</p>
-          <ul className="list list-inside list-disc ml-4">
+          <ul className="tw-list tw-list-inside tw-list-disc tw-ml-4">
             {missing.map((m) => (
               <li key={m}>{m}</li>
             ))}
@@ -675,13 +678,13 @@ export const SuggestCset = ({ mset, Link }) => {
       ) : (
         <p>All measurements are available.</p>
       )}
-      <h4 className="flex flex-row items-center gap-2">
+      <h4 className="tw-flex tw-flex-row tw-items-center tw-gap-2">
         {name.length > 1 ? <BoolYesIcon /> : <BoolNoIcon />}
         Name
       </h4>
       <p>Each curated set has a name. You can suggest your own name or a pseudonym.</p>
       <StringInput label="Name" current={name} update={setName} valid={(val) => val.length > 1} />
-      <h4 className="flex flex-row items-center gap-2">
+      <h4 className="tw-flex tw-flex-row tw-items-center tw-gap-2">
         {height.length > 1 ? <BoolYesIcon /> : <BoolNoIcon />}
         Height
       </h4>
@@ -695,7 +698,7 @@ export const SuggestCset = ({ mset, Link }) => {
         update={setHeight}
         valid={(val) => val.length > 1}
       />
-      <h4 className="flex flex-row items-center gap-2 mt-4">
+      <h4 className="tw-flex tw-flex-row tw-items-center tw-gap-2 tw-mt-4">
         {img.length > 0 ? <BoolYesIcon /> : <BoolNoIcon />}
         Image
       </h4>
@@ -710,7 +713,7 @@ export const SuggestCset = ({ mset, Link }) => {
         update={setImg}
         valid={(val) => val.length > 1}
       />
-      <h4 className="flex flex-row items-center gap-2 mt-4">
+      <h4 className="tw-flex tw-flex-row tw-items-center tw-gap-2 tw-mt-4">
         <BoolYesIcon />
         Notes
       </h4>
@@ -720,7 +723,7 @@ export const SuggestCset = ({ mset, Link }) => {
       </Popout>
       <MarkdownInput label="Notes" current={notes} update={setNotes} valid={() => true} />
       <button
-        className="daisy-btn daisy-btn-primary w-full mt-4"
+        className="tw-daisy-btn tw-daisy-btn-primary tw-w-full tw-mt-4"
         disabled={!(missing.length === 0 && height.length > 1 && img.length > 0)}
         onClick={suggestSet}
       >
@@ -759,7 +762,7 @@ export const NewSet = () => {
   }
 
   return (
-    <div className="max-w-xl">
+    <div className="tw-max-w-xl">
       <h5>Name</h5>
       <p>Give this set of measurements a name. That will help tell them apart.</p>
       <StringInput
@@ -770,9 +773,9 @@ export const NewSet = () => {
         valid={(val) => val && val.length > 0}
         placeholder={'Georg Cantor'}
       />
-      <div className="flex flex-row gap-2 items-center w-full mt-8 mb-2">
+      <div className="tw-flex tw-flex-row tw-gap-2 tw-items-center tw-w-full tw-mt-8 tw-mb-2">
         <button
-          className="daisy-btn daisy-btn-primary grow capitalize"
+          className="tw-daisy-btn tw-daisy-btn-primary tw-grow tw-capitalize"
           disabled={name.length < 1}
           onClick={createSet}
         >
@@ -782,255 +785,3 @@ export const NewSet = () => {
     </div>
   )
 }
-
-/*
-
-export const SetCard = ({
-  set,
-  requiredMeasies = [],
-  href = false,
-  onClick = false,
-  useA = false,
-}) => {
-  // Hooks
-  const { t } = useTranslation(['sets'])
-
-  const [hasMeasies] = hasRequiredMeasurements(requiredMeasies, set.measies, true)
-
-  const wrapperProps = {
-    className:
-      'bg-base-300 w-full mb-2 mx-auto flex flex-col items-start text-center justify-center rounded shadow py-4',
-    style: {
-      backgroundImage: `url(${cloudflareImageUrl({ type: 'w1000', id: set.img })})`,
-      backgroundSize: 'cover',
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: '50%',
-    },
-  }
-  if (set.img === 'default-avatar') wrapperProps.style.backgroundPosition = 'bottom right'
-
-  const inner = hasMeasies ? null : (
-    <div className="flex flex-row gap-2 items-center">
-      <WarningIcon className="w-6 h-6 shrink-0 text-error" />
-      <span>{t('setLacksMeasiesForDesign')}</span>
-    </div>
-  )
-
-  // Is it a button with an onClick handler?
-  if (onClick)
-    return (
-      <button {...wrapperProps} onClick={onClick}>
-        {inner}
-      </button>
-    )
-
-  // Returns a link to an internal page
-  if (href && !useA)
-    return (
-      <Link {...wrapperProps} href={href}>
-        {inner}
-      </Link>
-    )
-
-  // Returns a link to an external page
-  if (href && useA)
-    return (
-      <a {...wrapperProps} href={href}>
-        {inner}
-      </a>
-    )
-
-  // Returns a div
-  return <div {...wrapperProps}>{inner}</div>
-}
-
-export const MsetButton = (props) => <MsetCard {...props} href={false} />
-export const MsetLink = (props) => <MsetCard {...props} onClick={false} useA={false} />
-export const MsetA = (props) => <MsetCard {...props} onClick={false} useA={true} />
-
-export const UserSetPicker = ({
-  design,
-  t,
-  href,
-  clickHandler,
-  missingClickHandler,
-  size = 'lg',
-}) => {
-  // Hooks
-  const backend = useBackend()
-  const { control } = useAccount()
-
-  // State
-  const [sets, setSets] = useState({})
-
-  // Effects
-  useEffect(() => {
-    const getSets = async () => {
-      const result = await backend.getSets()
-      if (result.success) {
-        const all = {}
-        for (const set of result.data.sets) all[set.id] = set
-        setSets(all)
-      }
-    }
-    getSets()
-  }, [backend])
-
-  let hasSets = false
-  const okSets = []
-  const lackingSets = []
-  if (Object.keys(sets).length > 0) {
-    hasSets = true
-    for (const setId in sets) {
-      const [hasMeasies] = hasRequiredMeasurements(
-        designMeasurements[design],
-        sets[setId].measies,
-        true
-      )
-      if (hasMeasies) okSets.push(sets[setId])
-      else lackingSets.push(sets[setId])
-    }
-  }
-
-  if (!hasSets)
-    return (
-      <div className="w-full max-w-3xl mx-auto">
-        <Popout tip>
-          <h5>{t('account:noOwnSets')}</h5>
-          <p className="text-lg">{t('account:pleaseMtm')}</p>
-          <p className="text-lg">{t('account:noOwnSetsMsg')}</p>
-          <p className="text-center md:text-right">
-            <Link
-              className="btn btn-primary capitalize w-full md:w-auto"
-              bottom
-              primary
-              href="/new/set"
-            >
-              <PlusIcon />
-              {t('account:newSet')}
-            </Link>
-          </p>
-        </Popout>
-      </div>
-    )
-
-  return (
-    <>
-      {okSets.length > 0 && (
-        <div className="flex flex-row flex-wrap gap-2">
-          {okSets.map((set) => (
-            <MsetButton
-              {...{ set, control, design }}
-              onClick={clickHandler}
-              href={href}
-              requiredMeasies={measurements[design]}
-              key={set.id}
-              size={size}
-            />
-          ))}
-        </div>
-      )}
-      {lackingSets.length > 0 && (
-        <div className="my-4">
-          <Popout note compact>
-            {t('account:someSetsLacking')}
-          </Popout>
-          <div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-2">
-            {lackingSets.map((set) => (
-              <MsetButton
-                {...{ set, control, design }}
-                onClick={missingClickHandler}
-                href={href}
-                requiredMeasies={measurements[design]}
-                key={set.id}
-                size={size}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-    </>
-  )
-}
-
-export const BookmarkedSetPicker = ({ design, clickHandler, t, size, href }) => {
-  // Hooks
-  const { control } = useAccount()
-  const backend = useBackend()
-
-  // State
-  const [sets, setSets] = useState({})
-
-  // Effects
-  useEffect(() => {
-    const getBookmarks = async () => {
-      const result = await backend.getBookmarks()
-      const loadedSets = {}
-      if (result.success) {
-        for (const bookmark of result.data.bookmarks.filter(
-          (bookmark) => bookmark.type === 'set'
-        )) {
-          let set
-          try {
-            set = await backend.getSet(bookmark.url.slice(6))
-            if (set.success) {
-              const [hasMeasies] = hasRequiredMeasurements(
-                designMeasurements[design],
-                set.data.set.measies,
-                true
-              )
-              loadedSets[set.data.set.id] = { ...set.data.set, hasMeasies }
-            }
-          } catch (err) {
-            console.log(err)
-          }
-        }
-      }
-      setSets(loadedSets)
-    }
-    getBookmarks()
-  }, [])
-
-  const okSets = Object.values(sets).filter((set) => set.hasMeasies)
-  const lackingSets = Object.values(sets).filter((set) => !set.hasMeasies)
-
-  return (
-    <>
-      {okSets.length > 0 && (
-        <div className="flex flex-row flex-wrap gap-2">
-          {okSets.map((set) => (
-            <MsetButton
-              {...{ set, control, design }}
-              onClick={clickHandler}
-              href={href}
-              requiredMeasies={designMeasurements[design]}
-              key={set.id}
-              size={size}
-            />
-          ))}
-        </div>
-      )}
-      {lackingSets.length > 0 && (
-        <div className="my-4">
-          <Popout note compact>
-            {t('account:someSetsLacking')}
-          </Popout>
-          <div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-2">
-            {lackingSets.map((set) => (
-              <MsetLink
-                {...{ set, control, design }}
-                onClick={clickHandler}
-                requiredMeasies={designMeasurements[design]}
-                key={set.id}
-                size={size}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-    </>
-  )
-}
-
-
-*/
diff --git a/packages/react/components/Account/Sets.mjs b/packages/react/components/Account/Sets.mjs
index 2da62a4ff2c..d615208cc6a 100644
--- a/packages/react/components/Account/Sets.mjs
+++ b/packages/react/components/Account/Sets.mjs
@@ -83,12 +83,12 @@ export const Sets = ({ Link = false }) => {
   }
 
   return (
-    <div className="max-w-7xl xl:pl-4">
+    <div className="tw-max-w-7xl xl:tw-pl-4">
       {sets.length > 0 ? (
         <>
-          <p className="text-center md:text-right">
+          <p className="tw-text-center md:tw-text-right">
             <Link
-              className="daisy-btn daisy-btn-primary daisy-btn-outline capitalize w-full md:w-auto mr-2 mb-2 hover:no-underline hover:text-primary-content"
+              className="tw-daisy-btn tw-daisy-btn-primary tw-daisy-btn-outline tw-capitalize tw-w-full md:tw-w-auto tw-mr-2 tw-mb-2 hover:tw-no-underline hover:tw-text-primary-content"
               bottom
               primary
               href="/account/import"
@@ -97,7 +97,7 @@ export const Sets = ({ Link = false }) => {
               Import Measurements Sets
             </Link>
             <button
-              className="daisy-btn daisy-btn-primary capitalize w-full md:w-auto hover:no-underline hover:text-primary-content"
+              className="tw-daisy-btn tw-daisy-btn-primary tw-capitalize tw-w-full md:tw-w-auto hover:tw-no-underline hover:tw-text-primary-content"
               onClick={() =>
                 setModal(
                   <ModalWrapper keepOpenOnClick>
@@ -110,15 +110,15 @@ export const Sets = ({ Link = false }) => {
               Create a new Measurements Set
             </button>
           </p>
-          <div className="flex flex-row gap-2 border-b-2 mb-4 pb-4 mt-8 h-14 items-center">
+          <div className="tw-flex tw-flex-row tw-gap-2 tw-border-b-2 tw-mb-4 tw-pb-4 tw-mt-8 tw-h-14 tw-items-center">
             <input
               type="checkbox"
-              className="checkbox checkbox-secondary"
+              className="tw-daisy-checkbox tw-daisy-checkbox-secondary"
               onClick={toggleSelectAll}
               checked={sets.length === selCount}
             />
             <button
-              className="daisy-btn daisy-btn-error"
+              className="tw-daisy-btn tw-daisy-btn-error"
               onClick={removeSelectedSets}
               disabled={selCount < 1}
             >
@@ -128,7 +128,7 @@ export const Sets = ({ Link = false }) => {
         </>
       ) : (
         <Link
-          className="daisy-btn daisy-btn-primary capitalize w-full md:w-auto btn-lg hover:no-underline hover:text-primary-content"
+          className="tw-daisy-btn tw-daisy-btn-primary tw-capitalize tw-w-full md:tw-w-auto tw-btn-lg hover:tw-no-underline hover:tw-text-primary-content"
           bottom
           primary
           href="/new/set"
@@ -137,24 +137,26 @@ export const Sets = ({ Link = false }) => {
           Create a new Measurements Set
         </Link>
       )}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-2">
+      <div className="tw-grid tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-2">
         {sets.map((set, i) => (
           <div
             key={i}
-            className={`flex flex-row items-start gap-1 border-2
+            className={`tw-flex tw-flex-row tw-items-start tw-gap-1 tw-border-2
           ${
-            selected[set.id] ? 'border-solid border-secondary' : 'border-dotted border-base-300'
-          } rounded-lg p-2`}
+            selected[set.id]
+              ? 'tw-border-solid tw-border-secondary'
+              : 'tw-border-dotted tw-border-base-300'
+          } tw-rounded-lg p-2`}
           >
-            <label className="w-8 h-full shrink-0">
+            <label className="tw-w-8 tw-h-full tw-shrink-0">
               <input
                 type="checkbox"
                 checked={selected[set.id] ? true : false}
-                className="daisy-checkbox daisy-checkbox-secondary"
+                className="tw-daisy-checkbox tw-daisy-checkbox-secondary"
                 onClick={() => toggleSelect(set.id)}
               />
             </label>
-            <div className="w-full">
+            <div className="tw-w-full">
               <MsetCard
                 control={control}
                 href={`/account/data/sets/set?id=${set.id}`}
@@ -199,8 +201,8 @@ export const MsetCard = ({
   const s = sizes[size]
 
   const wrapperProps = {
-    className: `bg-base-300 aspect-square h-${s} w-${s} mb-2 grow
-      mx-auto flex flex-col items-start text-center justify-between rounded-none md:rounded shadow`,
+    className: `tw-bg-base-300 tw-aspect-square tw-h-${s} tw-w-${s} tw-mb-2 tw-grow
+      tw-mx-auto tw-flex tw-flex-col tw-items-start tw-text-center tw-justify-between tw-rounded-none md:tw-rounded shadow`,
     style: {
       backgroundImage: `url(${cloudflareImageUrl({ type: 'w500', id: set.img })})`,
       backgroundSize: 'cover',
@@ -221,11 +223,11 @@ export const MsetCard = ({
       set.measies,
       true
     )
-    const iconClasses = 'w-8 h-8 p-1 rounded-full -mt-2 -ml-2 shadow'
+    const iconClasses = 'tw-w-8 tw-h-8 tw-p-1 tw-rounded-full tw--mt-2 tw--ml-2 tw-shadow'
     icon = hasMeasies ? (
-      <OkIcon className={`${iconClasses} bg-success text-success-content`} stroke={4} />
+      <OkIcon className={`${iconClasses} tw-bg-success tw-text-success-content`} stroke={4} />
     ) : (
-      <NoIcon className={`${iconClasses} bg-error text-error-content`} stroke={3} />
+      <NoIcon className={`${iconClasses} tw-bg-error tw-text-error-content`} stroke={3} />
     )
     if (missing.length > 0) {
       const translated = missing.map((m) => {
@@ -236,7 +238,7 @@ export const MsetCard = ({
         const lastSpace = missingString.lastIndexOf(', ', maxLength)
         missingString = missingString.substring(0, lastSpace) + ', ' + t('andMore') + '...'
       }
-      const measieClasses = 'font-normal text-xs'
+      const measieClasses = 'tw-font-normal tw-text-xs'
       missingMeasies = <span className={`${measieClasses}`}>{missingString}</span>
       linebreak = <br />
     }
@@ -245,7 +247,7 @@ export const MsetCard = ({
   const inner = (
     <>
       {icon}
-      <span className="bg-neutral text-neutral-content px-4 w-full bg-opacity-50 py-2 rounded rounded-t-none font-bold leading-5">
+      <span className="tw-bg-neutral tw-text-neutral-content tw-px-4 tw-w-full tw-bg-opacity-50 tw-py-2 tw-rounded tw-rounded-t-none tw-font-bold tw-leading-5">
         {set.name}
         {linebreak}
         {missingMeasies}
diff --git a/packages/react/components/Account/Units.mjs b/packages/react/components/Account/Units.mjs
index 75c3a94e1b2..1fe08d5a3fb 100644
--- a/packages/react/components/Account/Units.mjs
+++ b/packages/react/components/Account/Units.mjs
@@ -54,14 +54,14 @@ export const Units = ({ welcome = false }) => {
       : '/docs/about/guide'
 
   return (
-    <div className="w-full">
+    <div className="tw-w-full">
       <ListInput
         id="account-units"
         label="Units"
         list={['metric', 'imperial'].map((val) => ({
           val,
           label: (
-            <div className="flex flex-row items-center w-full justify-between">
+            <div className="tw-flex tw-flex-row tw-items-center tw-w-full tw-justify-between">
               <span>{val === 'metric' ? 'Metric units (cm)' : 'Imperial units (inch)'}</span>
               <NumberCircle nr={val === 'imperial' ? '″' : 'cm'} color="secondary" />
             </div>
@@ -76,17 +76,17 @@ export const Units = ({ welcome = false }) => {
       />
       {welcome ? (
         <>
-          <IconButton href={nextHref} className="mt-4">
+          <IconButton href={nextHref} className="tw-mt-4">
             <RightIcon stroke={3} /> Continue
           </IconButton>
           {welcomeSteps[account?.control].length > 0 ? (
             <>
               <progress
-                className="daisy-progress daisy-progress-primary w-full mt-12"
+                className="tw-daisy-progress tw-daisy-progress-primary tw-w-full tw-mt-12"
                 value={300 / welcomeSteps[account?.control].length}
                 max="100"
               ></progress>
-              <span className="pt-4 text-sm font-bold opacity-50">
+              <span className="tw-pt-4 tw-text-sm tw-font-bold tw-opacity-50">
                 3 / {welcomeSteps[account?.control].length}
               </span>
               <WelcomeIcons
diff --git a/packages/react/components/Account/Username.mjs b/packages/react/components/Account/Username.mjs
index 7c4e95cc4f7..c6a5cab647b 100644
--- a/packages/react/components/Account/Username.mjs
+++ b/packages/react/components/Account/Username.mjs
@@ -60,7 +60,7 @@ export const Username = ({ welcome = false, Link = false }) => {
   else btnClasses += 'w-full daisy-btn-primary'
 
   return (
-    <div className="w-full">
+    <div className="tw-w-full">
       <StringInput
         id="account-username"
         label="Username"
@@ -69,23 +69,24 @@ export const Username = ({ welcome = false, Link = false }) => {
         valid={() => available}
         placeholder={'Sorcha Ni Dhubghaill'}
         labelBL={
-          <span className="flex flex-row gap-1 items-center">
+          <span className="tw-flex tw-flex-row tw-gap-1 tw-items-center">
             {available ? (
               <>
-                <OkIcon className="w-4 h-4 text-success" stroke={4} /> Username is available
+                <OkIcon className="tw-w-4 tw-h-4 tw-text-success" stroke={4} /> Username is
+                available
               </>
             ) : (
               <>
-                <NoIcon className="w-4 h-4 text-error" stroke={3} /> This username is taken
+                <NoIcon className="tw-w-4 tw-h-4 tw-text-error" stroke={3} /> This username is taken
               </>
             )}
           </span>
         }
       />
-      <p className="text-right">
+      <p className="tw-text-right">
         <button
           disabled={!available}
-          className="daisy-btn daisy-btn-primary w-full lg:w-auto mt-8"
+          className="tw-daisy-btn tw-daisy-btn-primary tw-w-full lg:tw-w-auto tw-mt-8"
           onClick={save}
         >
           <SaveIcon /> Save Username
@@ -94,17 +95,17 @@ export const Username = ({ welcome = false, Link = false }) => {
 
       {welcome ? (
         <>
-          <IconButton href={nextHref} className="mt-4">
+          <IconButton href={nextHref} className="tw-mt-4">
             <RightIcon stroke={3} /> Continue
           </IconButton>
           {welcomeSteps[account.control].length > 0 ? (
             <>
               <progress
-                className="daisy-progress daisy-progress-primary w-full mt-12"
+                className="tw-daisy-progress tw-daisy-progress-primary tw-w-full tw-mt-12"
                 value={500 / welcomeSteps[account.control].length}
                 max="100"
               ></progress>
-              <span className="pt-4 text-sm font-bold opacity-50">
+              <span className="tw-pt-4 tw-text-sm tw-font-bold tw-opacity-50">
                 5 / {welcomeSteps[account.control].length}
               </span>
               <WelcomeIcons
diff --git a/packages/react/components/Account/shared.mjs b/packages/react/components/Account/shared.mjs
index fcdcf8de682..d47fc7ca782 100644
--- a/packages/react/components/Account/shared.mjs
+++ b/packages/react/components/Account/shared.mjs
@@ -18,11 +18,13 @@ import {
  * A component to display a row of data
  */
 export const DisplayRow = ({ title, children, keyWidth = 'w-24' }) => (
-  <div className="flex flex-row flex-wrap items-center lg:gap-4 my-2 w-full">
-    <div className={`${keyWidth} text-left md:text-right block md:inline font-bold pr-4 shrink-0`}>
+  <div className="tw-flex tw-flex-row tw-flex-wrap tw-items-center lg:tw-gap-4 tw-my-2 tw-w-full">
+    <div
+      className={`${keyWidth} tw-text-left md:tw-text-right tw-block md:tw-inline tw-font-bold tw-pr-4 tw-shrink-0`}
+    >
       {title}
     </div>
-    <div className="grow">{children}</div>
+    <div className="tw-grow">{children}</div>
   </div>
 )
 
@@ -35,12 +37,15 @@ export const welcomeSteps = {
 }
 
 export const WelcomeDoneIcon = ({ href }) => (
-  <Link href={`/welcome/${href}`} className="text-success hover:text-secondary">
+  <Link href={`/welcome/${href}`} className="tw-text-success hover:tw-text-secondary">
     <WelcomeTopicIcon href={href} />
   </Link>
 )
 export const WelcomeTodoIcon = ({ href }) => (
-  <Link href={`/welcome/${href}`} className="text-secondary w-6 h-6 opacity-50 hover:opacity-100">
+  <Link
+    href={`/welcome/${href}`}
+    className="tw-text-secondary tw-w-6 tw-h-6 tw-opacity-50 hover:tw-opacity-100"
+  >
     <WelcomeTopicIcon href={href} />
   </Link>
 )
@@ -57,11 +62,11 @@ const WelcomeTopicIcon = (props) => {
 }
 
 const WelcomeDoingIcon = ({ href }) => (
-  <WelcomeTopicIcon href={href} className="w-6 h-6 text-base-content" />
+  <WelcomeTopicIcon href={href} className="tw-w-6 tw-h-6 tw-text-base-content" />
 )
 
 export const WelcomeIcons = ({ done = [], todo = [], current = '' }) => (
-  <div className="m-auto flex flex-row items-center justify-center gap-2">
+  <div className="tw-m-auto tw-flex tw-flex-row tw-items-center tw-justify-center tw-gap-2">
     {done.map((href) => (
       <WelcomeDoneIcon href={href} key={href} />
     ))}
diff --git a/packages/react/components/AuthWrapper/index.mjs b/packages/react/components/AuthWrapper/index.mjs
deleted file mode 100644
index cd1fde7fdf5..00000000000
--- a/packages/react/components/AuthWrapper/index.mjs
+++ /dev/null
@@ -1,210 +0,0 @@
-import Link from 'next/link'
-import { useTranslation } from 'next-i18next'
-import { useAccount } from 'shared/hooks/use-account.mjs'
-import { useBackend } from 'shared/hooks/use-backend.mjs'
-import { roles } from 'config/roles.mjs'
-import { useEffect, useState } from 'react'
-import { Loading } from 'shared/components/spinner.mjs'
-import { horFlexClasses } from 'shared/utils.mjs'
-import { LockIcon, PlusIcon } from 'shared/components/icons.mjs'
-import { ConsentForm, ns as gdprNs } from 'shared/components/gdpr/form.mjs'
-
-export const ns = ['auth', gdprNs]
-
-const Wrap = ({ children }) => (
-  <div className="m-auto max-w-xl text-center mt-8 p-8">{children}</div>
-)
-
-const ContactSupport = ({ t }) => (
-  <div className="flex flex-row items-center justify-center gap-4 mt-8">
-    <Link href="/support" className="btn btn-success w-full">
-      {t('contactSupport')}
-    </Link>
-  </div>
-)
-
-const AuthRequired = ({ t, banner }) => (
-  <Wrap>
-    {banner}
-    <h2>{t('authRequired')}</h2>
-    <p>{t('membersOnly')}</p>
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-2 mt-8">
-      <Link href="/signup" className={`${horFlexClasses} btn btn-secondary w-full`}>
-        <PlusIcon />
-        {t('signUp')}
-      </Link>
-      <Link href="/signin" className={`${horFlexClasses} btn btn-secondary btn-outline w-full`}>
-        <LockIcon />
-        {t('signIn')}
-      </Link>
-    </div>
-  </Wrap>
-)
-
-const AccountInactive = ({ t, banner }) => (
-  <Wrap>
-    {banner}
-    <h1>{t('accountInactive')}</h1>
-    <p>{t('accountInactiveMsg')}</p>
-    <p>{t('signupAgain')}</p>
-    <div className="flex flex-row items-center justify-center gap-4 mt-8">
-      <Link href="/signup" className="btn btn-primary w-full">
-        {t('signUp')}
-      </Link>
-    </div>
-  </Wrap>
-)
-
-const AccountDisabled = ({ t, banner }) => (
-  <Wrap>
-    {banner}
-    <h1>{t('accountDisabled')}</h1>
-    <p>{t('accountDisabledMsg')}</p>
-    <ContactSupport t={t} />
-  </Wrap>
-)
-
-const AccountProhibited = ({ t, banner }) => (
-  <Wrap>
-    {banner}
-    <h1>{t('accountProhibited')}</h1>
-    <p>{t('accountProhibitedMsg')}</p>
-    <ContactSupport t={t} />
-  </Wrap>
-)
-
-const AccountStatusUnknown = ({ t, banner }) => (
-  <Wrap>
-    {banner}
-    <h1>{t('statusUnknown')}</h1>
-    <p>{t('statusUnknownMsg')}</p>
-    <ContactSupport t={t} />
-  </Wrap>
-)
-
-const RoleLacking = ({ t, requiredRole, role, banner }) => (
-  <Wrap>
-    {banner}
-    <h1>{t('roleLacking')}</h1>
-    <p dangerouslySetInnerHTML={{ __html: t('roleLackingMsg', { requiredRole, role }) }} />
-    <ContactSupport t={t} />
-  </Wrap>
-)
-
-const ConsentLacking = ({ banner, refresh }) => {
-  const { setAccount, setToken, setSeenUser } = useAccount()
-  const backend = useBackend()
-
-  const updateConsent = async ({ consent1, consent2 }) => {
-    let consent = 0
-    if (consent1) consent = 1
-    if (consent1 && consent2) consent = 2
-    if (consent > 0) {
-      const result = await backend.updateConsent(consent)
-      console.log({ result })
-      if (result.success) {
-        setToken(result.data.token)
-        setAccount(result.data.account)
-        setSeenUser(result.data.account.username)
-        refresh()
-      } else {
-        console.log('something went wrong', result)
-        refresh()
-      }
-    }
-  }
-
-  return (
-    <Wrap>
-      <div className="text-left">
-        {banner}
-        <ConsentForm submit={updateConsent} />
-      </div>
-    </Wrap>
-  )
-}
-
-export const AuthWrapper = ({ children, requiredRole = 'user' }) => {
-  const { t } = useTranslation(ns)
-  const { account, setAccount, token, admin, stopImpersonating, signOut } = useAccount()
-  const backend = useBackend()
-
-  const [ready, setReady] = useState(false)
-  const [impersonating, setImpersonating] = useState(false)
-  const [error, setError] = useState(false)
-  const [refreshCount, setRefreshCount] = useState(0)
-
-  /*
-   * Avoid hydration errors
-   */
-  useEffect(() => {
-    const verifyAdmin = async () => {
-      const result = await backend.adminPing(admin.token)
-      if (result.success && result.data.account.role === 'admin') {
-        setImpersonating({
-          admin: result.data.account.username,
-          user: account.username,
-        })
-      }
-      setReady(true)
-    }
-    const verifyUser = async () => {
-      const result = await backend.ping()
-      if (result.success) {
-        // Refresh account in local storage
-        setAccount({
-          ...account,
-          ...result.data.account,
-        })
-      } else {
-        if (result.data?.error?.error) setError(result.data.error.error)
-        else signOut()
-      }
-      setReady(true)
-    }
-    if (admin && admin.token) verifyAdmin()
-    if (token) verifyUser()
-    else setReady(true)
-  }, [admin, token, refreshCount, account, setAccount, backend, signOut])
-
-  const refresh = () => {
-    setRefreshCount(refreshCount + 1)
-    setError(false)
-  }
-
-  if (!ready)
-    return (
-      <>
-        <p>not ready</p>
-        <Loading />
-      </>
-    )
-
-  const banner = impersonating ? (
-    <div className="bg-warning rounded-lg shadow py-4 px-6 flex flex-row items-center gap-4 justify-between">
-      <span className="text-base-100 text-left">
-        Hi <b>{impersonating.admin}</b>, you are currently impersonating <b>{impersonating.user}</b>
-      </span>
-      <button className="btn btn-neutral" onClick={stopImpersonating}>
-        Stop Impersonating
-      </button>
-    </div>
-  ) : null
-
-  const childProps = { t, banner }
-
-  if (!token || !account.username) return <AuthRequired {...childProps} />
-  if (error) {
-    if (error === 'accountInactive') return <AccountInactive {...childProps} />
-    if (error === 'accountDisabled') return <AccountDisabled {...childProps} />
-    if (error === 'accountBlocked') return <AccountProhibited {...childProps} />
-    if (error === 'consentLacking') return <ConsentLacking {...childProps} refresh={refresh} />
-    return <AccountStatusUnknown {...childProps} />
-  }
-
-  if (!roles.levels[account.role] || roles.levels[account.role] < roles.levels[requiredRole]) {
-    return <RoleLacking {...childProps} role={account.role} requiredRole={requiredRole} />
-  }
-
-  return children
-}
diff --git a/packages/react/components/Breadcrumbs/index.mjs b/packages/react/components/Breadcrumbs/index.mjs
index cd0d3c34e39..13c37839f7a 100644
--- a/packages/react/components/Breadcrumbs/index.mjs
+++ b/packages/react/components/Breadcrumbs/index.mjs
@@ -12,18 +12,21 @@ export const Breadcrumbs = ({ crumbs = [], title, Link = false }) => {
   if (Link === false) Link = RegularLink
 
   return (
-    <div className="tailwind-container p-0">
-      <ul className="flex flex-row items-center gap-2 m-0 py-4" style={{ paddingLeft: 0 }}>
-        <li className="inline">
+    <div className="tw-tailwind-container tw-p-0">
+      <ul
+        className="tw-flex tw-flex-row tw-items-center tw-gap-2 tw-m-0 tw-py-4"
+        style={{ paddingLeft: 0 }}
+      >
+        <li className="tw-inline">
           <Link href="/">Home</Link>
         </li>
         <Spacer />
         {crumbs.map((crumb, i) => (
-          <li key={i} className="inline">
+          <li key={i} className="tw-inline">
             <Link href={crumb.href}>{crumb.label}</Link>
           </li>
         ))}
-        <li className="inline">{title}</li>
+        <li className="tw-inline">{title}</li>
       </ul>
     </div>
   )
@@ -39,4 +42,4 @@ const RegularLink = ({ href, children }) => <a href={href}>{children}</a>
 /*
  * This goes between breadcrumbs
  */
-const Spacer = () => <li className="inline">&raquo;</li>
+const Spacer = () => <li className="tw-inline">&raquo;</li>
diff --git a/packages/react/components/Button/index.mjs b/packages/react/components/Button/index.mjs
index e2c5afeb52a..d6f404b075e 100644
--- a/packages/react/components/Button/index.mjs
+++ b/packages/react/components/Button/index.mjs
@@ -19,7 +19,7 @@ export const IconButton = ({
   btnProps = {},
 }) => {
   const allProps = {
-    className: `${staticLinkClasses} daisy-btn-${color} hover:text-${color}-content ${className}`,
+    className: `${staticLinkClasses} tw-daisy-btn-${color} hover:tw-text-${color}-content ${className}`,
     title: title,
     ...btnProps,
   }
@@ -29,4 +29,6 @@ export const IconButton = ({
   return onClick ? <button {...allProps}>{children}</button> : <a {...allProps}>{children}</a>
 }
 
-const staticLinkClasses = `flex flex-row gap-2 lg:gap-12 items-center justify-between w-full lg:w-auto daisy-btn hover:no-underline capitalize my-2`
+const staticLinkClasses =
+  'tw-flex tw-flex-row tw-gap-2 lg:tw-gap-12 tw-items-center ' +
+  'tw-justify-between tw-w-full lg:tw-w-auto tw-daisy-btn hover:tw-no-underline tw-capitalize tw-my-2'
diff --git a/packages/react/components/Collection/index.mjs b/packages/react/components/Collection/index.mjs
new file mode 100644
index 00000000000..37a3614bc70
--- /dev/null
+++ b/packages/react/components/Collection/index.mjs
@@ -0,0 +1,334 @@
+// Dependencies
+import { atomWithHash } from 'jotai-location'
+import {
+  about,
+  collection,
+  tags,
+  techniques,
+  designers,
+  developers,
+  examples,
+} from '@freesewing/collection'
+import { mutateObject } from '@freesewing/utils'
+
+//import { urls } from '@freesewing/config'
+//import { measurements as measurementTranslations } from '@freesewing/i18n'
+//import { measurements as designMeasurements } from '@freesewing/collection'
+
+// Context
+//import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
+import { ModalContext } from '@freesewing/react/context/Modal'
+
+// Hooks
+import React, { useState, useContext } from 'react'
+//import { useAccount } from '@freesewing/react/hooks/useAccount'
+//import { useBackend } from '@freesewing/react/hooks/useBackend'
+import { useAtom } from 'jotai'
+
+// Components
+import { Link as WebLink, AnchorLink } from '@freesewing/react/components/Link'
+import {
+  CircleIcon,
+  CisFemaleIcon,
+  FilterIcon,
+  ResetIcon,
+  ShowcaseIcon,
+} from '@freesewing/react/components/Icon'
+import { lineDrawingsFront as lineDrawings } from '@freesewing/react/components/LineDrawing'
+
+/*
+import { designs, tags, techniques } from 'shared/config/designs.mjs'
+import { DesignCard, DesignLink, ns as designNs } from 'shared/components/designs/design.mjs'
+import { useTranslation } from 'next-i18next'
+import { useState } from 'react'
+import { FilterIcon, ShowcaseIcon, CisFemaleIcon, ResetIcon } from 'shared/components/icons.mjs'
+import { capitalize, objUpdate } from 'shared/utils.mjs'
+import { Difficulty } from 'shared/components/designs/difficulty.mjs'
+import { collection } from 'site/hooks/use-design.mjs'
+
+export const ns = designNs
+*/
+const filterAtom = atomWithHash('filter', { example: true })
+
+export const useFilter = () => {
+  return useAtom(filterAtom)
+}
+/**
+ * React component to show the FreeSewing collection and pick a design
+ *
+ * @param {object} props - All React props
+ * @param {function} Link - An optional framework specific Link component for client-side routing
+ */
+export const Collection = ({ Link = false, linkTo = 'about' }) => {
+  if (!Link) Link = WebLink
+
+  // State
+  const [filter, setFilter] = useFilter()
+  const [showFilters, setShowFilters] = useState(false)
+  console.log(tags)
+
+  /*
+   * Apply filter
+   */
+  const filtered = {}
+  for (const d of collection) {
+    let skip = false
+    if (
+      filter.tag &&
+      filter.tag.filter((tag) => about[d].tags.includes(tag)).length < filter.tag.length
+    )
+      skip = true
+    if (
+      filter.tech &&
+      filter.tech.filter((tech) => about[d].techniques.includes(tech)).length < filter.tech.length
+    )
+      skip = true
+    if (filter.difficulty && filter.difficulty !== about[d].difficulty) skip = true
+    if (!skip) filtered[d] = d
+  }
+
+  const updateFilter = (path, val) => {
+    // Allow clicking the same difficulty to remove it as a filter
+    if (path === 'difficulty' && val === filter.difficulty) val = 'unset'
+    const newFilter = mutateObject({ ...filter }, path, val)
+    setFilter(newFilter)
+  }
+
+  const toggle = (type, val) => {
+    const current = filter[type] || []
+    const newSet = new Set(current)
+    if (newSet.has(val)) newSet.delete(val)
+    else newSet.add(val)
+    updateFilter(type, [...newSet])
+  }
+
+  return (
+    <>
+      <div className="tw-max-w-7xl tw-m-auto">
+        <div className="tw-flex tw-flex-row tw-flex-wrap tw-gap-1 tw-justify-center tw-font-medium tw-mb-2">
+          {Object.keys(filtered)
+            .sort()
+            .map((d) => (
+              <Link
+                key={d}
+                href={linkBuilders[linkTo](d)}
+                className="tw-text-secondary tw-decoration-2 tw-underline tw-capitalize hover:tw-decoration-4 hover:tw-text-secondary"
+              >
+                {d}
+              </Link>
+            ))}
+        </div>
+        {showFilters ? (
+          <>
+            <h6 className="tw-text-center tw-mb-0 tw-mt-4">
+              Filters ({Object.keys(filtered).length}/{collection.length})
+            </h6>
+            <div className="tw-flex tw-flex-row tw-gap-1 tw-items-center tw-justify-center tw-flex-wrap tw-my-2">
+              <b>Tags:</b>
+              {tags.map((tag) => (
+                <button
+                  key={tag}
+                  className={`tw-daisy-badge tw-font-medium hover:tw-shadow hover:tw-cursor-pointer
+                  ${
+                    filter?.tag && Array.isArray(filter.tag) && filter.tag.includes(tag)
+                      ? 'tw-daisy-badge-success hover:tw-daisy-badge-error'
+                      : 'tw-daisy-badge-primary hover:tw-daisy-badge-success'
+                  }`}
+                  onClick={() => toggle('tag', tag)}
+                >
+                  {tag}
+                </button>
+              ))}
+            </div>
+            <div className="tw-flex tw-flex-row tw-gap-1 tw-items-center tw-justify-center tw-flex-wrap tw-my-4">
+              <b>Techniques</b>
+              {techniques.sort().map((tech) => (
+                <button
+                  key={tech}
+                  className={`tw-daisy-badge tw-font-medium hover:tw-shadow
+                 ${
+                   filter?.tech && Array.isArray(filter.tech) && filter.tech.includes(tech)
+                     ? 'tw-daisy-badge tw-daisy-badge-success hover:tw-daisy-badge-error'
+                     : 'tw-daisy-badge tw-daisy-badge-accent hover:tw-daisy-badge-success'
+                 }`}
+                  onClick={() => toggle('tech', tech)}
+                >
+                  {tech}
+                </button>
+              ))}
+            </div>
+            <div className="tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-flex-wrap tw-my-4">
+              <b>Difficulty:</b>
+              {[1, 2, 3, 4, 5].map((score) => (
+                <button
+                  onClick={() => updateFilter('difficulty', score)}
+                  key={score}
+                  className={`tw-daisy-btn tw-daisy-btn-sm ${
+                    filter.difficulty === score
+                      ? 'tw-daisy-btn-secondary tw-daisy-btn-outline'
+                      : 'tw-daisy-btn-ghost'
+                  }`}
+                >
+                  <Difficulty score={score} />
+                </button>
+              ))}
+            </div>
+            <div className="tw-flex tw-flex-row tw-gap-4 tw-items-center tw-justify-center tw-flex-wrap tw-my-2">
+              <button
+                className="tw-daisy-btn tw-daisy-btn-secondary tw-daisy-btn-outline"
+                onClick={() => updateFilter('example', !filter.example)}
+              >
+                {filter.example ? <CisFemaleIcon /> : <ShowcaseIcon />}
+                {filter.example ? 'Show Line Drawings' : 'Show Examples'}
+              </button>
+              <button
+                className="tw-daisy-btn tw-daisy-btn-secondary tw-daisy-btn-outline"
+                onClick={() => setFilter({ example: 1 })}
+              >
+                <ResetIcon />
+                Clear Filter
+              </button>
+              <button
+                className="tw-daisy-btn tw-daisy-btn-secondary tw-daisy-btn-outline"
+                onClick={() => setShowFilters(false)}
+              >
+                <FilterIcon />
+                Hide Filters
+              </button>
+            </div>
+          </>
+        ) : (
+          <div className="tw-flex tw-flex-row tw-gap-4 tw-items-center tw-justify-center tw-flex-wrap tw-my-2">
+            <button
+              className="tw-daisy-btn tw-daisy-btn-secondary tw-daisy-btn-outline"
+              onClick={() => updateFilter('example', !filter.example)}
+            >
+              {filter.example ? <CisFemaleIcon /> : <ShowcaseIcon />}
+              {filter.example ? 'Show Line Drawings' : 'Show Examples'}
+            </button>
+            <button
+              className="tw-daisy-btn tw-daisy-btn-secondary tw-daisy-btn-outline"
+              onClick={() => setShowFilters(true)}
+            >
+              <FilterIcon />
+              Show Filters
+            </button>
+          </div>
+        )}
+      </div>
+      <div className="tw-grid tw-grid-cols-2 tw-gap-2 tw-mt-4 tw-justify-center sm:tw-grid-cols-3 md:tw-grid-cols-4 tw-mb-8">
+        {Object.keys(filtered)
+          .sort()
+          .map((d) => (
+            <DesignCard
+              name={d}
+              key={d}
+              linkTo={linkTo}
+              lineDrawing={filter.example ? false : true}
+            />
+          ))}
+      </div>
+    </>
+  )
+}
+
+/*
+ * A helper component to show a design technique
+ *
+ * @param {object} props - All React props
+ * @param {function} props.Link - A Link component, typically specific to the framework for client-side routing
+ * @param {string} props.technique - The technique name/id
+ */
+const Technique = ({ Link = WebLink, technique }) => (
+  <Link
+    href={`/designs/techniques/${technique}`}
+    className="tw-daisy-badge tw-daisy-badge-accent hover:tw-daisy-badge-secondary hover:tw-shadow tw-font-medium"
+  >
+    {technique}
+  </Link>
+)
+
+/*
+ * A helper component to show a design tag
+ *
+ * @param {object} props - All React props
+ * @param {function} props.Link - A Link component, typically specific to the framework for client-side routing
+ * @param {string} props.tag - The tag name/id
+ */
+const Tag = ({ Link = WebLink, technique }) => (
+  <Link
+    href={`/designs/tags/${tag}`}
+    className="tw-daisy-badge tw-daisy-badge-primary hover:tw-daisy-badge-secondary hover:tw-shadow tw-font-medium"
+  >
+    {tag}
+  </Link>
+)
+
+const DesignCard = ({ name, lineDrawing = false, linkTo, Link }) => {
+  if (!Link) Link = WebLink
+
+  const LineDrawing =
+    lineDrawing && lineDrawings[name]
+      ? lineDrawings[name]
+      : ({ className }) => <div className={className}></div>
+  const exampleImageUrl = examples.href[name] ? examples.href[name] : noExample
+  const bg = { aspectRatio: '1/1.4' }
+  if (!lineDrawing) {
+    bg.backgroundImage = `url(${exampleImageUrl}`
+    bg.backgroundSize = 'cover'
+    bg.backgroundPosition = 'center center'
+  }
+
+  return (
+    <Link href={linkTo === 'new' ? `/-/` : `/designs/${name}/`}>
+      <div
+        className={`tw-flex tw-flex-col tw-flex-nowrap tw-items-start tw-justify-between tw-gap-2 tw-border-neutral-500
+        tw-w-full tw-h-full tw-border tw-border-2 tw-border-solid tw-p-0 tw-relative tw-rounded-lg tw-rounded-lg`}
+        style={bg}
+      >
+        <h5
+          className={`tw-text-center tw-py-2 tw-px-4 tw-rounded-t tw-m-0 tw-w-full
+        ${lineDrawing ? '' : 'tw-bg-neutral tw-text-neutral-content tw-bg-opacity-70'}`}
+        >
+          {about[name].name}
+        </h5>
+        {lineDrawing ? (
+          <div className="tw-p-1 tw-grow tw-w-full tw-h-auto tw-square tw-text-center">
+            <LineDrawing className="tw-max-w-full tw-m-auto tw-my-4 tw-text-base-content" />
+          </div>
+        ) : (
+          <span />
+        )}
+        <div
+          className={`tw-flex tw-flex-row tw-items-center tw-justify-center tw-py-1 tw-px-2 tw-rounded-b tw-m-0 tw-w-full
+        ${lineDrawing ? '' : `tw-text-neutral-content`}`}
+        >
+          <Difficulty score={about[name].difficulty} />
+        </div>
+      </div>
+    </Link>
+  )
+}
+
+/*
+ * A helper component to show difficulety of a design
+ *
+ * @param {object} props - All React props
+ * @param {number} props.score - The difficulty score of the design (1-5)
+ */
+const Difficulty = ({ score = 0 }) => (
+  <div className="tw-flex tw-flex-row">
+    {[0, 1, 2, 3, 4].map((i) => (
+      <CircleIcon fill={i < score ? true : false} className={`tw-w-4 tw-h-4`} />
+    ))}
+  </div>
+)
+
+const linkBuilders = {
+  new: (design) => `/-/?d=${design.toLowerCase()}`,
+  docs: (design) => `/docs/designs/${design.toLowerCase()}/`,
+  about: (design) => `/designs/${design.toLowerCase()}/`,
+}
+
+const noExample =
+  'https://images.pexels.com/photos/5626595/pexels-photo-5626595.jpeg?cs=srgb&fm=jpg&w=640&h=427'
diff --git a/packages/react/components/Control/index.mjs b/packages/react/components/Control/index.mjs
index e1b620c5fe6..b9c2f6e32e0 100644
--- a/packages/react/components/Control/index.mjs
+++ b/packages/react/components/Control/index.mjs
@@ -4,9 +4,13 @@ import { BulletIcon } from '@freesewing/react/components/Icon'
 
 export const ControlScore = ({ control, color = 'base-content' }) =>
   control ? (
-    <div className={`flex flex-row items-center text-${color}`}>
+    <div className={`tw-flex tw-flex-row tw-items-center tw-text-${color}`}>
       {Object.keys(controlDesc).map((score) => (
-        <BulletIcon fill={control >= score ? true : false} className="w-6 h-6 -ml-1" key={score} />
+        <BulletIcon
+          fill={control >= score ? true : false}
+          className="tw-w-6 tw-h-6 tw--ml-1"
+          key={score}
+        />
       ))}
     </div>
   ) : null
diff --git a/packages/react/components/CopyToClipboard/index.mjs b/packages/react/components/CopyToClipboard/index.mjs
index 86416bad743..7e06d1b98f5 100644
--- a/packages/react/components/CopyToClipboard/index.mjs
+++ b/packages/react/components/CopyToClipboard/index.mjs
@@ -31,14 +31,14 @@ export const CopyToClipboard = ({ content, label = false, sup = false }) => {
 
   return (
     <Copy text={text} onCopy={() => handleCopied(setCopied, setLoadingStatus, label)}>
-      <button className={copied ? 'text-success' : ''}>
+      <button className={copied ? 'tw-text-success' : ''}>
         {copied ? (
           <OkIcon
-            className={`${style} text-success-content bg-success rounded-full p-1`}
+            className={`${style} tw-text-success-content tw-bg-success tw-rounded-full tw-p-1`}
             stroke={4}
           />
         ) : (
-          <CopyIcon className={`${style} text-inherit`} />
+          <CopyIcon className={`${style} tw-text-inherit`} />
         )}
       </button>
     </Copy>
diff --git a/packages/react/components/Design/index.mjs b/packages/react/components/Design/index.mjs
new file mode 100644
index 00000000000..3127d8e3193
--- /dev/null
+++ b/packages/react/components/Design/index.mjs
@@ -0,0 +1,139 @@
+// Dependencies
+import { collection } from '@freesewing/collection'
+
+//import { urls } from '@freesewing/config'
+//import { measurements as measurementTranslations } from '@freesewing/i18n'
+//import { measurements as designMeasurements } from '@freesewing/collection'
+import { capitalize } from '@freesewing/utils'
+
+// Context
+//import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
+//import { ModalContext } from '@freesewing/react/context/Modal'
+
+// Hooks
+import React, { useState } from 'react'
+//import { useAccount } from '@freesewing/react/hooks/useAccount'
+//import { useBackend } from '@freesewing/react/hooks/useBackend'
+
+// Components
+import { Link as WebLink, AnchorLink } from '@freesewing/react/components/Link'
+import { ShowcaseIcon } from '@freesewing/react/components/Icon'
+
+/*
+// Dependencies
+import { capitalize } from 'shared/utils.mjs'
+import { linkClasses } from 'shared/components/link.mjs'
+import { designImages } from 'shared/components/designs/examples.mjs'
+import { designs } from 'shared/config/designs.mjs'
+// Context
+import { ModalContext } from 'shared/context/modal-context.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+import { useContext } from 'react'
+// Components
+import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
+import Link from 'next/link'
+import { Difficulty } from 'shared/components/designs/difficulty.mjs'
+import { lineDrawings } from 'shared/components/designs/linedrawings/index.mjs'
+import { DocsIcon, NewPatternIcon } from 'shared/components/icons.mjs'
+import { DesignInfo } from 'shared/components/designs/info.mjs'
+*/
+
+const linkBuilders = {
+  new: (design) => `/-/?d=${design.toLowerCase()}`,
+  docs: (design) => `/docs/designs/${design.toLowerCase()}`,
+}
+
+export const DesignTechnique = ({ technique }) => (
+  <Link
+    className="badge badge-accent hover:badge-secondary hover:shadow font-medium"
+    href={`/designs/techniques/${technique}`}
+  >
+    {technique}
+  </Link>
+)
+
+export const DesignTag = ({ tag }) => {
+  const { t } = useTranslation(['tags'])
+
+  return (
+    <Link
+      className="badge badge-primary hover:badge-secondary hover:shadow font-medium"
+      href={`/designs/tags/${tag}`}
+    >
+      {t(tag)}
+    </Link>
+  )
+}
+
+export const DesignLink = ({ name, linkTo = 'new', className = linkClasses }) => (
+  <Link href={linkBuilders[linkTo](name)} className={className}>
+    {name}
+  </Link>
+)
+
+export const DesignCard = ({ name, lineDrawing = false }) => {
+  const { t } = useTranslation(ns)
+  // Context
+  const { setModal } = useContext(ModalContext)
+
+  const LineDrawing =
+    lineDrawing && lineDrawings[name]
+      ? lineDrawings[name]
+      : ({ className }) => <div className={className}></div>
+  const exampleImageUrl = designImages[name]
+    ? designImages[name]
+    : 'https://images.pexels.com/photos/5626595/pexels-photo-5626595.jpeg?cs=srgb&dl=pexels-frida-toth-5626595.jpg&fm=jpg&w=640&h=427&_gl=1*vmxq7y*_ga*MTM0OTk5OTY4NS4xNjYxMjUyMjc0*_ga_8JE65Q40S6*MTY5NTU1NDc0Mi4yNS4xLjE2OTU1NTU1NjIuMC4wLjA.'
+
+  const bg = lineDrawing
+    ? {}
+    : {
+        backgroundImage: `url(${exampleImageUrl}`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center center',
+      }
+
+  return (
+    <button
+      onClick={() =>
+        setModal(
+          <ModalWrapper
+            flex="col"
+            justify="top lg:justify-center"
+            slideFrom="right"
+            keepOpenOnClick
+          >
+            <h1>{t(`designs:${name}.t`)}</h1>
+            <DesignInfo design={name} modal />
+          </ModalWrapper>
+        )
+      }
+    >
+      <div
+        className={`flex flex-col flex-nowrap items-start justify-start gap-2 h-80 w-full
+        btn btn-ghost border border-neutral p-0 border-b-none
+        hover:border hover:border-secondary
+        relative`}
+        style={bg}
+      >
+        <h5
+          className={`text-center py-2 px-4 rounded-t-lg m-0 w-full
+        ${lineDrawing ? '' : 'bg-neutral text-neutral-content bg-opacity-70'}`}
+        >
+          {t(`designs:${name}.t`)}
+        </h5>
+        <div className={lineDrawing ? 'p-4 grow w-full' : 'py-8'}>
+          <LineDrawing className="h-64 max-w-full m-auto my-4 text-base-content" />
+        </div>
+        <div
+          className={`pt-0 m-0 -mt-2 text-center w-full
+        ${
+          lineDrawing
+            ? 'bg-transparent text-base-content'
+            : 'bg-neutral text-neutral-content bg-opacity-70'
+        }`}
+        ></div>
+      </div>
+    </button>
+  )
+}
diff --git a/packages/react/components/Highlight/index.mjs b/packages/react/components/Highlight/index.mjs
index 54100f203ee..8085256e337 100644
--- a/packages/react/components/Highlight/index.mjs
+++ b/packages/react/components/Highlight/index.mjs
@@ -31,20 +31,18 @@ export const Highlight = ({
   }
 
   const preProps = {
-    className: `language-${language} hljs text-base lg:text-lg whitespace-break-spaces overflow-scroll pr-4`,
+    className: `language-${language} hljs tw-text-base lg:tw-text-lg tw-whitespace-break-spaces tw-overflow-scroll tw-pr-4`,
   }
   if (raw) preProps.dangerouslySetInnerHTML = { __html: raw }
 
   const label = title ? title : defaultTitles[language] ? defaultTitles[language] : language
 
   return (
-    <div className="hljs my-4">
+    <div className="hljs tw-my-4">
       <div
         className={`
-        flex flex-row justify-between items-center
-        text-xs font-medium text-warning
-        mt-1 border-b border-neutral-content border-opacity-25
-        px-4 py-1 mb-2 lg:text-sm
+        tw-flex tw-flex-row tw-justify-between tw-items-center tw-text-xs tw-font-medium tw-text-warning
+        tw-mt-1 tw-border-b tw-border-neutral-content tw-border-opacity-25 tw-px-4 tw-py-1 tw-mb-2 lg:tw-text-sm
       `}
       >
         <span>{label}</span>
diff --git a/packages/react/components/Icon/index.mjs b/packages/react/components/Icon/index.mjs
index 160bdcb2526..171082105d1 100644
--- a/packages/react/components/Icon/index.mjs
+++ b/packages/react/components/Icon/index.mjs
@@ -92,6 +92,20 @@ export const CircleIcon = (props) => (
   </IconWrapper>
 )
 
+// Looks like a female-projecting bathing suit
+export const CisFemaleIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="m 8.233159,2.5000002 c 0,0 0.03684,1.4367676 0.07562,2.1541457 C 8.413989,6.5901608 7.3671071,6.9496995 7.3372662,8.1692173 7.3029172,9.5719723 8.2152,10.315942 8.255388,12.267223 8.290568,13.973294 7.1739465,15.012709 7.1739465,17.259683 9.46861,17.549817 10.668009,19.205086 11.354231,21.5 h 0.109763 0.93923 0.109803 c 0.686181,-2.294914 1.88558,-3.950183 4.180285,-4.240317 0,-2.246974 -1.116622,-3.286389 -1.081483,-4.99246 0.04015,-1.951281 0.952433,-2.6952507 0.918122,-4.0980057 -0.0298,-1.2195178 -1.076723,-1.5790565 -0.971513,-3.5150714 0.0389,-0.7173781 0.07562,-2.1541457 0.07562,-2.1541457 h -0.722313 c 0,1.5276628 -1.146752,3.7763442 -2.978112,3.7763442 -1.831402,0 -2.978154,-2.2486814 -2.978154,-3.7763442 z" />
+  </IconWrapper>
+)
+
+// Looks like male-projecting swim trunks
+export const CisMaleIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M 6.2021092,6.7988281 C 5.0433189,10.972649 5.2215488,13.211802 5.2215488,16.798828 h 5.8983122 l 0.143133,-1.21128 c 0.331559,-1.834081 0.655671,-2.543616 1.078829,0.07477 l 0.134587,1.136509 h 5.896176 c 0,-3.587026 0.180363,-5.826179 -0.978425,-9.9999999 z" />
+  </IconWrapper>
+)
+
 // FIXME
 export const CloneIcon = (props) => (
   <IconWrapper {...props}>
@@ -214,6 +228,13 @@ export const FailureIcon = ({ size = 6 }) => (
   <NoIcon className={`tw-w-${size} tw-h-${size} tw-text-secondary-content`} stroke={4} />
 )
 
+// Looks like a funnel
+export const FilterIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+  </IconWrapper>
+)
+
 // Looks like a fingerprint
 export const FingerprintIcon = (props) => (
   <IconWrapper {...props}>
diff --git a/packages/react/components/KeyVal/index.mjs b/packages/react/components/KeyVal/index.mjs
index b0bbe602da2..76fe1bd326b 100644
--- a/packages/react/components/KeyVal/index.mjs
+++ b/packages/react/components/KeyVal/index.mjs
@@ -10,12 +10,12 @@ export const KeyVal = ({ k, val, color = 'primary', small = false }) => {
     <Copy text={val} onCopy={() => handleCopied(setCopied, setLoadingStatus, k)}>
       <button>
         <span
-          className={`${sharedClasses} rounded-l${small ? '' : '-lg'} text-${color}-content bg-${color} border-${color} ${small ? 'text-xs' : ''}`}
+          className={`${sharedClasses} tw-rounded-l${small ? '' : '-lg'} tw-text-${color}-content tw-bg-${color} tw-border-${color} ${small ? 'tw-text-xs' : ''}`}
         >
           {k}
         </span>
         <span
-          className={`${sharedClasses} rounded-r${small ? '' : '-lg'} text-${color} bg-base-100 border-${color} ${small ? 'text-xs' : ''}`}
+          className={`${sharedClasses} tw-rounded-r${small ? '' : '-lg'} tw-text-${color} tw-bg-base-100 tw-border-${color} ${small ? 'tw-text-xs' : ''}`}
         >
           {val}
         </span>
@@ -24,7 +24,7 @@ export const KeyVal = ({ k, val, color = 'primary', small = false }) => {
   )
 }
 
-const sharedClasses = `px-1 text-sm font-medium whitespace-nowrap border-2`
+const sharedClasses = `tw-px-1 tw-text-sm tw-font-medium tw-whitespace-nowrap tw-border-2`
 
 const handleCopied = (setCopied, setLoadingStatus, label) => {
   setCopied(true)
diff --git a/packages/react/components/Layout/index.mjs b/packages/react/components/Layout/index.mjs
index 60e488727fd..32a5ceca9b6 100644
--- a/packages/react/components/Layout/index.mjs
+++ b/packages/react/components/Layout/index.mjs
@@ -17,10 +17,10 @@ export const Layout = ({ children = [], crumbs = [], description, Link = false,
 
   return (
     <BaseLayout>
-      <div className="max-w-xl w-full mx-auto">
+      <div className="tw-max-w-xl tw-w-full tw-mx-auto">
         <Breadcrumbs {...{ crumbs, title, Link }} />
-        <h1 className="break-words">{title}</h1>
-        <div className="xl:pl-4">{children}</div>
+        <h1 className="tw-break-words">{title}</h1>
+        <div className="xl:tw-pl-4">{children}</div>
       </div>
     </BaseLayout>
   )
@@ -33,7 +33,7 @@ export const Layout = ({ children = [], crumbs = [], description, Link = false,
  * @param {array} props.children - The content to go in the layout
  */
 export const BaseLayout = ({ children }) => (
-  <div className="flex flex-row items-start w-full justify-between 2xl:px-36 xl:px-12 px-4 gap-0 lg:gap-4 xl:gap-8 3xl: gap-12">
+  <div className="tw-flex tw-flex-row tw-items-start tw-w-full tw-justify-between 2xl:tw-px-36 xl:tw-px-12 tw-px-4 tw-gap-0 lg:tw-gap-4 xl:tw-gap-8 3xl:tw-gap-12">
     {children}
   </div>
 )
@@ -45,7 +45,7 @@ export const BaseLayout = ({ children }) => (
  * @param {array} props.children - The content to go in the layout
  */
 export const BaseLayoutLeft = ({ children = [] }) => (
-  <div className="max-w-96 w-1/4 hidden lg:block shrink-0 my-8 sticky top-4 max-h-screen overflow-scroll">
+  <div className="tw-max-w-96 tw-w-1/4 tw-hidden lg:tw-block tw-shrink-0 tw-my-8 tw-sticky tw-top-4 tw-max-h-screen tw-overflow-scroll">
     {children}
   </div>
 )
@@ -57,7 +57,9 @@ export const BaseLayoutLeft = ({ children = [] }) => (
  * @param {array} props.children - The content to go in the layout
  */
 export const BaseLayoutRight = ({ children = [] }) => (
-  <div className="max-w-96 w-1/4 hidden xl:block my-8 sticky top-2">{children}</div>
+  <div className="tw-max-w-96 tw-w-1/4 tw-hidden xl:tw-block tw-my-8 tw-sticky tw-top-2">
+    {children}
+  </div>
 )
 
 /*
@@ -68,7 +70,9 @@ export const BaseLayoutRight = ({ children = [] }) => (
  * @param {array} props.wide - Whether or not to use the wide view
  */
 export const BaseLayoutProse = ({ children = [], wide = false }) => (
-  <div className={`grow w-full m-auto max-w-${wide ? 'full' : 'prose'} my-8`}>{children}</div>
+  <div className={`tw-grow tw-w-full tw-m-auto tw-max-w-${wide ? 'full' : 'prose'} tw-my-8`}>
+    {children}
+  </div>
 )
 
 /*
@@ -78,7 +82,7 @@ export const BaseLayoutProse = ({ children = [], wide = false }) => (
  * @param {array} props.children - The content to go in the layout
  */
 export const BaseLayoutWide = ({ children = [] }) => (
-  <div className="grow w-full m-auto my-8 grow">{children}</div>
+  <div className="tw-grow tw-w-full tw-m-auto tw-my-8 tw-grow">{children}</div>
 )
 
 /*
@@ -90,8 +94,8 @@ export const BaseLayoutWide = ({ children = [] }) => (
 export const NoTitleLayout = ({ children }) => {
   return (
     <BaseLayout>
-      <div className="max-w-xl w-full mx-auto">
-        <div className="xl:pl-4">{children}</div>
+      <div className="tw-max-w-xl tw-w-full tw-mx-auto">
+        <div>{children}</div>
       </div>
     </BaseLayout>
   )
diff --git a/packages/react/components/LineDrawing/aaron.mjs b/packages/react/components/LineDrawing/aaron.mjs
index 3bf81e6cf8a..fdf824db303 100644
--- a/packages/react/components/LineDrawing/aaron.mjs
+++ b/packages/react/components/LineDrawing/aaron.mjs
@@ -1,56 +1,51 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
+/*
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
+ */
 const strokeScale = 0.5
 
-export const Aaron = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 148 119" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
-/*
- * React component for the front
+/**
+ * A linedrawing component for Aaron
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
  */
-export const AaronFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+export const Aaron = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-2 -15 152 152" {...{ stroke, className }}>
+    <Front stroke={stroke * strokeScale} />
+    <Back stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 74 119" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
-/*
- * React component for the back
+/**
+ * A linedrawing component for the front of Aaron
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
  */
-export const AaronBack = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+export const AaronFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-23 0 119 119" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
-  return (
-    <LineDrawingWrapper viewBox="74 0 74 119" {...{ className, stroke }}>
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for the front of Aaron
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const AaronBack = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="74 0 74 119" {...props}>
+    <Back stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
 /*
  * SVG elements for the front
diff --git a/packages/react/components/LineDrawing/albert.mjs b/packages/react/components/LineDrawing/albert.mjs
index 4961d86af4f..4fecb44a455 100644
--- a/packages/react/components/LineDrawing/albert.mjs
+++ b/packages/react/components/LineDrawing/albert.mjs
@@ -1,56 +1,51 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
-const strokeScale = 0.6
-
-export const Albert = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 128 141" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
 /*
- * React component for the front
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
  */
-export const AlbertFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+const strokeScale = 0.5
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 64 141" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
-/*
- * React component for the back
+/**
+ * A linedrawing component for Albert
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
  */
-export const AlbertBack = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+export const Albert = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-10 -2 146 146" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+    <Back stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
-  return (
-    <LineDrawingWrapper viewBox="64 0 64 141" {...{ className, stroke }}>
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for the front of Albert
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const AlbertFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-41 -2 145 145" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
+
+/**
+ * A linedrawing component for the front of Albert
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const AlbertBack = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="74 0 74 119" {...props}>
+    <Back stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
 /*
  * SVG elements for the front
diff --git a/packages/react/components/LineDrawing/bee.mjs b/packages/react/components/LineDrawing/bee.mjs
index 995306e8a27..11184c1af4c 100644
--- a/packages/react/components/LineDrawing/bee.mjs
+++ b/packages/react/components/LineDrawing/bee.mjs
@@ -1,38 +1,29 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
-const strokeScale = 0.5
-
-export const Bee = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 74 140" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
 /*
- * React component for the front
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
  */
-export const BeeFront = ({
-  className = 'h-full max-w-full m-auto text-base-content linedrawing', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+const strokeScale = 0.4
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 74 140" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for Bee
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Bee = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-20 0 120 120" {...{ stroke, className }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
+
+/**
+ * Front is the same
+ */
+export const BeeFront = Bee
 
 /*
  * SVG elements for the front
diff --git a/packages/react/components/LineDrawing/bella.mjs b/packages/react/components/LineDrawing/bella.mjs
index 3b5321c44bf..201111f9908 100644
--- a/packages/react/components/LineDrawing/bella.mjs
+++ b/packages/react/components/LineDrawing/bella.mjs
@@ -1,45 +1,44 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
+/*
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
+ */
 const strokeScale = 0.5
 
-export const Bella = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 154 89" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
-/*
- * React component for the front
+/**
+ * A linedrawing component for Bella
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
  */
-export const BellaFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+export const Bella = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="2 -30 155 155" {...{ stroke, className }}>
+    <Front stroke={stroke * strokeScale} />
+    <Back stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 77 89" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for the front of Bella
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const BellaFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-4 2 89 86" {...{ className, stroke }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
 /*
  * React component for the back
  */
 export const BellaBack = ({
-  className = 'w-64', // CSS classes to apply
+  className = 'tw-w-full', // CSS classes to apply
   stroke = 1, // Stroke width to use
 }) => {
   // Normalize stroke across designs
diff --git a/packages/react/components/LineDrawing/benjamin.mjs b/packages/react/components/LineDrawing/benjamin.mjs
index f9d6f8c79d9..1b6308a3eaf 100644
--- a/packages/react/components/LineDrawing/benjamin.mjs
+++ b/packages/react/components/LineDrawing/benjamin.mjs
@@ -1,38 +1,29 @@
 import React from 'react'
 import { LineDrawingWrapper, regular, thin } from './shared.mjs'
 
-const strokeScale = 0.5
+/*
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
+ */
+const strokeScale = 1
 
-export const Benjamin = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 138 53" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for Benjamin
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Benjamin = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 -44 138 138" {...{ className, stroke }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
 /*
- * React component for the front
+ * Front is the same
  */
-export const BenjaminFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 138 53" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+export const BenjaminFront = Benjamin
 
 /*
  * SVG elements for the front
diff --git a/packages/react/components/LineDrawing/bent.mjs b/packages/react/components/LineDrawing/bent.mjs
index cdba8c3b5f6..5bdb3065ae4 100644
--- a/packages/react/components/LineDrawing/bent.mjs
+++ b/packages/react/components/LineDrawing/bent.mjs
@@ -1,45 +1,44 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
-const strokeScale = 0.5
-
-export const Bent = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 210 100" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
 /*
- * React component for the front
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
  */
-export const BentFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+const strokeScale = 0.7
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 110 100" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for Bent
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Bent = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 -70 210 210" {...{ stroke }}>
+    <Front stroke={strokeScale * stroke} />
+    <Back stroke={strokeScale * stroke} />
+  </LineDrawingWrapper>
+)
+
+/**
+ * A linedrawing component for the front of Bent
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const BentFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 -1 103 103" {...{ className, stroke }}>
+    <Front stroke={strokeScale * stroke} />
+  </LineDrawingWrapper>
+)
 
 /*
  * React component for the back
  */
 export const BentBack = ({
-  className = 'w-64', // CSS classes to apply
+  className = 'tw-w-full', // CSS classes to apply
   stroke = 1, // Stroke width to use
 }) => {
   // Normalize stroke across designs
diff --git a/packages/react/components/LineDrawing/bibi.mjs b/packages/react/components/LineDrawing/bibi.mjs
index 2f81c8f2aa6..ec5c01f5101 100644
--- a/packages/react/components/LineDrawing/bibi.mjs
+++ b/packages/react/components/LineDrawing/bibi.mjs
@@ -1,45 +1,44 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
+/*
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
+ */
 const strokeScale = 0.5
 
-export const Bibi = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 170 90" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
-/*
- * React component for the front
+/**
+ * A linedrawing component for Bibi
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
  */
-export const BibiFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+export const Bibi = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="2 -34 167 167" {...{ className }}>
+    <Front stroke={strokeScale * stroke} />
+    <Back stroke={strokeScale * stroke} />
+  </LineDrawingWrapper>
+)
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 85 90" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for the front of Bibi
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const BibiFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 0 85 90" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
 /*
  * React component for the back
  */
 export const BibiBack = ({
-  className = 'w-64', // CSS classes to apply
+  className = 'tw-w-full', // CSS classes to apply
   stroke = 1, // Stroke width to use
 }) => {
   // Normalize stroke across designs
diff --git a/packages/react/components/LineDrawing/bob.mjs b/packages/react/components/LineDrawing/bob.mjs
index bfdc0533853..366529e4f58 100644
--- a/packages/react/components/LineDrawing/bob.mjs
+++ b/packages/react/components/LineDrawing/bob.mjs
@@ -1,45 +1,44 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
-const strokeScale = 0.5
-
-export const Bob = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 136 87" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
 /*
- * React component for the front
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
  */
-export const BobFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+const strokeScale = 0.2
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 68 87" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for Bob
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Bob = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-1 -26 138 138" {...{ className }}>
+    <Front stroke={strokeScale * stroke} />
+    <Back stroke={strokeScale * stroke} />
+  </LineDrawingWrapper>
+)
+
+/**
+ * A linedrawing component for the front of Bob
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const BobFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-10 1 87 87" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
 /*
  * React component for the back
  */
 export const BobBack = ({
-  className = 'w-64', // CSS classes to apply
+  className = 'tw-w-full', // CSS classes to apply
   stroke = 1, // Stroke width to use
 }) => {
   // Normalize stroke across designs
diff --git a/packages/react/components/LineDrawing/breanna.mjs b/packages/react/components/LineDrawing/breanna.mjs
index cce23f46e41..569fe30383c 100644
--- a/packages/react/components/LineDrawing/breanna.mjs
+++ b/packages/react/components/LineDrawing/breanna.mjs
@@ -1,45 +1,46 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
-const strokeScale = 0.5
-
-export const Breanna = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 184 58" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
 /*
- * React component for the front
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
  */
-export const BreannaFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+const strokeScale = 0.3
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 92 58" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for Breanna
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Breanna = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-5 0 106 106" {...{ className, stroke }}>
+    <Front stroke={strokeScale * stroke} />
+    <g transform="translate(-91 48)">
+      <Back stroke={strokeScale * stroke} />
+    </g>
+  </LineDrawingWrapper>
+)
+
+/**
+ * A linedrawing component for Breanna
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const BreannaFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 -15 92 92" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
 /*
  * React component for the back
  */
 export const BreannaBack = ({
-  className = 'w-64', // CSS classes to apply
+  className = 'tw-w-full', // CSS classes to apply
   stroke = 1, // Stroke width to use
 }) => {
   // Normalize stroke across designs
diff --git a/packages/react/components/LineDrawing/brian.mjs b/packages/react/components/LineDrawing/brian.mjs
index 878cfb0b85d..1de8e3da365 100644
--- a/packages/react/components/LineDrawing/brian.mjs
+++ b/packages/react/components/LineDrawing/brian.mjs
@@ -1,45 +1,44 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
+/*
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
+ */
 const strokeScale = 0.5
 
-export const Brian = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 189 90" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
-/*
- * React component for the front
+/**
+ * A linedrawing component for Brian
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
  */
-export const BrianFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+export const Brian = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 -40 189 189" {...{ className }}>
+    <Front stroke={strokeScale * stroke} />
+    <Back stroke={strokeScale * stroke} />
+  </LineDrawingWrapper>
+)
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 94 90" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for the front of Brian
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const BrianFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 0 93 93" {...{ className, stroke }}>
+    <Front stroke={strokeScale * stroke} />
+  </LineDrawingWrapper>
+)
 
 /*
  * React component for the back
  */
 export const BrianBack = ({
-  className = 'w-64', // CSS classes to apply
+  className = 'tw-w-full', // CSS classes to apply
   stroke = 1, // Stroke width to use
 }) => {
   // Normalize stroke across designs
diff --git a/packages/react/components/LineDrawing/bruce.mjs b/packages/react/components/LineDrawing/bruce.mjs
index 3a2c4d11f30..153272e72cd 100644
--- a/packages/react/components/LineDrawing/bruce.mjs
+++ b/packages/react/components/LineDrawing/bruce.mjs
@@ -1,45 +1,46 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
-const strokeScale = 0.6
-
-export const Bruce = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 202 78" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
 /*
- * React component for the front
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
  */
-export const BruceFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+const strokeScale = 0.5
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 101 78" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for Bruce
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Bruce = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-27 0 155 155" {...{ className, stroke }}>
+    <Front stroke={strokeScale * stroke} />
+    <g transform="translate(-100.5, 76)">
+      <Back stroke={strokeScale * stroke} />
+    </g>
+  </LineDrawingWrapper>
+)
+
+/**
+ * A linedrawing component for the front of Bruce
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const BruceFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 -10 101 101" {...{ className }}>
+    <Front stroke={strokeScale * stroke} />
+  </LineDrawingWrapper>
+)
 
 /*
  * React component for the back
  */
 export const BruceBack = ({
-  className = 'w-64', // CSS classes to apply
+  className = 'tw-w-full', // CSS classes to apply
   stroke = 1, // Stroke width to use
 }) => {
   // Normalize stroke across designs
diff --git a/packages/react/components/LineDrawing/carlita.mjs b/packages/react/components/LineDrawing/carlita.mjs
index 53bf94ffed7..2c22d7cd143 100644
--- a/packages/react/components/LineDrawing/carlita.mjs
+++ b/packages/react/components/LineDrawing/carlita.mjs
@@ -1,39 +1,38 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
+/*
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
+ */
 const strokeScale = 0.5
 
-export const Carlita = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 194 175" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
-/*
- * React component for the front
+/**
+ * A linedrawing component for Carlita
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
  */
-export const CarlitaFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+export const Carlita = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 0 194 175" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+    <Back stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 97 175" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for the front of Carlita
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const CarlitaFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-35 4 168 168" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
 /*
  * React component for the back
diff --git a/packages/react/components/LineDrawing/carlton.mjs b/packages/react/components/LineDrawing/carlton.mjs
index 71a322dd17b..2df9259429e 100644
--- a/packages/react/components/LineDrawing/carlton.mjs
+++ b/packages/react/components/LineDrawing/carlton.mjs
@@ -1,39 +1,38 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
+/*
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
+ */
 const strokeScale = 0.5
 
-export const Carlton = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 194 175" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
-/*
- * React component for the front
+/**
+ * A linedrawing component for Carlton
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
  */
-export const CarltonFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+export const Carlton = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 0 194 175" {...{ className, stroke }}>
+    <Front stroke={stroke * strokeScale} />
+    <Back stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 97 175" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for the front of Carlton
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const CarltonFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-35 4 168 168" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
 /*
  * React component for the back
diff --git a/packages/react/components/LineDrawing/cathrin.mjs b/packages/react/components/LineDrawing/cathrin.mjs
index 577116f16f5..12b6725a26f 100644
--- a/packages/react/components/LineDrawing/cathrin.mjs
+++ b/packages/react/components/LineDrawing/cathrin.mjs
@@ -1,39 +1,38 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
+/*
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
+ */
 const strokeScale = 0.5
 
-export const Cathrin = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 288 159" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
-/*
- * React component for the front
+/**
+ * A linedrawing component for Cathrin
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
  */
-export const CathrinFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+export const Cathrin = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 0 288 159" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+    <Back stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 144 159" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for the front of Cathrin
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const CathrinFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="2 2 138 139" {...{ className, stroke }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
 /*
  * React component for the back
diff --git a/packages/react/components/LineDrawing/charlie.mjs b/packages/react/components/LineDrawing/charlie.mjs
index 857773c3f22..01a01ea0b17 100644
--- a/packages/react/components/LineDrawing/charlie.mjs
+++ b/packages/react/components/LineDrawing/charlie.mjs
@@ -1,39 +1,38 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
-const strokeScale = 0.5
-
-export const Charlie = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 214 265" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
 /*
- * React component for the front
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
  */
-export const CharlieFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+const strokeScale = 1
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 107 265" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for Charlie
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Charlie = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 0 214 265" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+    <Back stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
+
+/**
+ * A linedrawing component for the front of Charlie
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const CharlieFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-70 0 265 265" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
 /*
  * React component for the back
diff --git a/packages/react/components/LineDrawing/cornelius.mjs b/packages/react/components/LineDrawing/cornelius.mjs
index 9c1d5c7e70b..2ac460bc0e2 100644
--- a/packages/react/components/LineDrawing/cornelius.mjs
+++ b/packages/react/components/LineDrawing/cornelius.mjs
@@ -1,39 +1,38 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, regular, dashed } from './shared.mjs'
 
-const strokeScale = 0.5
-
-export const Cornelius = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 320 218" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
 /*
- * React component for the front
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
  */
-export const CorneliusFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+const strokeScale = 1
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 160 218" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for Cornelius
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Cornelius = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 0 320 218" {...{ className, stroke }}>
+    <Front stroke={stroke * strokeScale} />
+    <Back stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
+
+/**
+ * A linedrawing component for the front of Cornelius
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const CorneliusFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-30 0 215 215" {...{ className, stroke }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
 /*
  * React component for the back
diff --git a/packages/react/components/LineDrawing/diana.mjs b/packages/react/components/LineDrawing/diana.mjs
index 7938f25e168..ea82bb6aede 100644
--- a/packages/react/components/LineDrawing/diana.mjs
+++ b/packages/react/components/LineDrawing/diana.mjs
@@ -1,39 +1,38 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
-const strokeScale = 0.5
-
-export const Diana = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 282 111" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
 /*
- * React component for the front
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
  */
-export const DianaFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+const strokeScale = 1
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 141 111" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for Diana
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Diana = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 0 282 111" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+    <Back stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
+
+/**
+ * A linedrawing component for the front Diana
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const DianaFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 -10 141 141" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
 /*
  * React component for the back
@@ -47,7 +46,7 @@ export const DianaBack = ({
 
   return (
     <LineDrawingWrapper viewBox="141 0 141 111" {...{ className, stroke }}>
-      <Back stroke={stroke} />
+      <Back stroke={stroke * strokeScale} />
     </LineDrawingWrapper>
   )
 }
diff --git a/packages/react/components/LineDrawing/florence.mjs b/packages/react/components/LineDrawing/florence.mjs
index 50bcdd302ad..94cec5dc301 100644
--- a/packages/react/components/LineDrawing/florence.mjs
+++ b/packages/react/components/LineDrawing/florence.mjs
@@ -1,38 +1,27 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
-const strokeScale = 0.6
-
-export const Florence = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 243 184" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
 /*
- * React component for the front
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
  */
-export const FlorenceFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+const strokeScale = 1.3
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 243 184" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for Florence
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Florence = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-1 -10 245 245" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
+
+// Front is the same
+export const FlorenceFront = Florence
 
 /*
  * SVG elements for the front
diff --git a/packages/react/components/LineDrawing/florent.mjs b/packages/react/components/LineDrawing/florent.mjs
index 2f0a22d5bca..5184582a4bb 100644
--- a/packages/react/components/LineDrawing/florent.mjs
+++ b/packages/react/components/LineDrawing/florent.mjs
@@ -1,38 +1,27 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
-const strokeScale = 0.6
-
-export const Florent = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 236 165" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
 /*
- * React component for the front
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
  */
-export const FlorentFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+const strokeScale = 1.3
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 236 165" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for Florence
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Florent = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 -30 236 236" {...{ className, stroke }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
+
+// Front is the same
+export const FlorentFront = Florent
 
 /*
  * SVG elements for the front
diff --git a/packages/react/components/LineDrawing/gozer.mjs b/packages/react/components/LineDrawing/gozer.mjs
index d541a9b10cd..d272949e2b3 100644
--- a/packages/react/components/LineDrawing/gozer.mjs
+++ b/packages/react/components/LineDrawing/gozer.mjs
@@ -1,39 +1,38 @@
 import React from 'react'
 import { LineDrawingWrapper, regular } from './shared.mjs'
 
-const strokeScale = 0.5
-
-export const Gozer = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 186 178" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
 /*
- * React component for the front
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
  */
-export const GozerFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+const strokeScale = 1.3
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 93 178" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for Gozer
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Gozer = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 0 186 178" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+    <Back stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
+
+/**
+ * A linedrawing component for the front of Gozer
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const GozerFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-40 0 178 178" {...{ className, stroke }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
 /*
  * React component for the back
diff --git a/packages/react/components/LineDrawing/hi.mjs b/packages/react/components/LineDrawing/hi.mjs
index b6db0aa0847..f77b115f269 100644
--- a/packages/react/components/LineDrawing/hi.mjs
+++ b/packages/react/components/LineDrawing/hi.mjs
@@ -1,38 +1,27 @@
 import React from 'react'
 import { LineDrawingWrapper, regular } from './shared.mjs'
 
-const strokeScale = 0.5
-
-export const Hi = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 228 140" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
 /*
- * React component for the front
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
  */
-export const HiFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+const strokeScale = 1.3
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 228 140" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for Hi
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Hi = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 -40 228 228" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
+
+// Front is the same
+export const HiFront = Hi
 
 /*
  * SVG elements for the front
diff --git a/packages/react/components/LineDrawing/holmes.mjs b/packages/react/components/LineDrawing/holmes.mjs
index d84c45891bb..2b011c4ffa6 100644
--- a/packages/react/components/LineDrawing/holmes.mjs
+++ b/packages/react/components/LineDrawing/holmes.mjs
@@ -1,38 +1,27 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
-const strokeScale = 0.6
-
-export const Holmes = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 260 169" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
 /*
- * React component for the front
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
  */
-export const HolmesFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+const strokeScale = 1.3
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 260 169" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for Holmes
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Holmes = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 -30 260 260" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
+
+// Front is the same
+export const HolmesFront = Holmes
 
 /*
  * SVG elements for the front
diff --git a/packages/react/components/LineDrawing/hortensia.mjs b/packages/react/components/LineDrawing/hortensia.mjs
index e3eba6a5c0f..ea7b41edb81 100644
--- a/packages/react/components/LineDrawing/hortensia.mjs
+++ b/packages/react/components/LineDrawing/hortensia.mjs
@@ -1,38 +1,27 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
-const strokeScale = 0.6
-
-export const Hortensia = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 124 129" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
 /*
- * React component for the front
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
  */
-export const HortensiaFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+const strokeScale = 0.7
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 124 129" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for Hortensia
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Hortensia = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-2 0 129 129" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
+
+// Front is the same
+export const HortensiaFront = Hortensia
 
 /*
  * SVG elements for the front
diff --git a/packages/react/components/LineDrawing/huey.mjs b/packages/react/components/LineDrawing/huey.mjs
index bc3954cb092..1341fc7df8d 100644
--- a/packages/react/components/LineDrawing/huey.mjs
+++ b/packages/react/components/LineDrawing/huey.mjs
@@ -1,39 +1,38 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
-const strokeScale = 0.5
-
-export const Huey = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 334 218" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
 /*
- * React component for the front
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
  */
-export const HueyFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+const strokeScale = 0.7
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 167 218" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for Huey
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Huey = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 0 334 218" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+    <Back stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
+
+/**
+ * A linedrawing component for front of Huey
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const HueyFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-20 0 216 216" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
 /*
  * React component for the back
@@ -47,7 +46,7 @@ export const HueyBack = ({
 
   return (
     <LineDrawingWrapper viewBox="167 0 167 218" {...{ className, stroke }}>
-      <Back stroke={stroke} />
+      <Back stroke={stroke * strokeScale} />
     </LineDrawingWrapper>
   )
 }
diff --git a/packages/react/components/LineDrawing/hugo.mjs b/packages/react/components/LineDrawing/hugo.mjs
index fa1d1f5bf34..96475fde46d 100644
--- a/packages/react/components/LineDrawing/hugo.mjs
+++ b/packages/react/components/LineDrawing/hugo.mjs
@@ -1,39 +1,38 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
-const strokeScale = 0.5
-
-export const Hugo = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 334 218" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
 /*
- * React component for the front
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
  */
-export const HugoFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+const strokeScale = 0.7
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 167 218" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for Hugo
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Hugo = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 0 334 334" {...{ className, stroke }}>
+    <Front stroke={stroke * strokeScale} />
+    <Back stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
+
+/**
+ * A linedrawing component for the front of Hugo
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const HugoFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-27 0 218 218" {...{ className, stroke }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
 /*
  * React component for the back
diff --git a/packages/react/components/LineDrawing/lucy.mjs b/packages/react/components/LineDrawing/lucy.mjs
index 389adeb29ce..f445043b4ba 100644
--- a/packages/react/components/LineDrawing/lucy.mjs
+++ b/packages/react/components/LineDrawing/lucy.mjs
@@ -1,38 +1,27 @@
 import React from 'react'
 import { LineDrawingWrapper, regular } from './shared.mjs'
 
-const strokeScale = 0.6
-
-export const Lucy = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 202 132" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
 /*
- * React component for the front
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
  */
-export const LucyFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+const strokeScale = 0.7
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 202 132" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for Hugo
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Lucy = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 -30 202 202" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
+
+// Front is the same
+export const LucyFront = Lucy
 
 /*
  * SVG elements for the front
diff --git a/packages/react/components/LineDrawing/lumina.mjs b/packages/react/components/LineDrawing/lumina.mjs
index 7548e00029a..2541b66bb4c 100644
--- a/packages/react/components/LineDrawing/lumina.mjs
+++ b/packages/react/components/LineDrawing/lumina.mjs
@@ -1,39 +1,38 @@
 import React from 'react'
 import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 
-const strokeScale = 0.5
-
-export const Lumina = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
-
-  return (
-    <LineDrawingWrapper viewBox="0 0 187 127" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-      <Back stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
-
 /*
- * React component for the front
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
  */
-export const LuminaFront = ({
-  className = 'w-64', // CSS classes to apply
-  stroke = 1, // Stroke width to use
-}) => {
-  // Normalize stroke across designs
-  stroke = stroke * strokeScale
+const strokeScale = 0.7
 
-  return (
-    <LineDrawingWrapper viewBox="0 0 94 127" {...{ className, stroke }}>
-      <Front stroke={stroke} />
-    </LineDrawingWrapper>
-  )
-}
+/**
+ * A linedrawing component for Lumina
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Lumina = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 0 187 117" {...{ className, stroke }}>
+    <Front stroke={stroke * strokeScale} />
+    <Back stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
+
+/**
+ * A linedrawing component for the front of Lumina
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const LuminaFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="-20 0 127 127" {...{ className, stroke }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
 
 /*
  * React component for the back
diff --git a/packages/react/components/LineDrawing/shared.mjs b/packages/react/components/LineDrawing/shared.mjs
index 6db43f1a571..c178683efed 100644
--- a/packages/react/components/LineDrawing/shared.mjs
+++ b/packages/react/components/LineDrawing/shared.mjs
@@ -9,7 +9,7 @@ import React from 'react'
  * @return LineDrawing as JSX
  */
 export const LineDrawingWrapper = ({
-  className = 'w-64', // CSS classes to apply
+  className = 'tw-w-full', // CSS classes to apply
   viewBox = '0 0 100 100', // SVG viewBox
   stroke = 1, // Stroke to use
   children = [], // The actual linedrawing
@@ -23,7 +23,7 @@ export const LineDrawingWrapper = ({
     stroke="currentColor"
     strokeLinecap="round"
     strokeLinejoin="round"
-    className={className + ' linedrawing'}
+    className={className + ' linedrawing tw-bg-base-300'}
     style={style}
   >
     {children}
@@ -38,12 +38,12 @@ export const regular = (stroke = 1) => ({ strokeWidth: stroke })
 /*
  * Thin stroke-width helper to ensure consistency across linedrawings
  */
-export const thin = (stroke = 1) => ({ strokeWidth: stroke / 2 })
+export const thin = (stroke = 1) => ({ strokeWidth: stroke / 1.3 })
 
 /*
  * Very thin stroke-width helper to ensure consistency across linedrawings
  */
-export const veryThin = (stroke = 1) => ({ strokeWidth: stroke / 3 })
+export const veryThin = (stroke = 1) => ({ strokeWidth: stroke / 2 })
 
 /*
  * Dashed stroke-dasharray helper to ensure consistency across linedrawings
diff --git a/packages/react/package.json b/packages/react/package.json
index 9ce2acabce9..1f408a1c1c4 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -30,8 +30,10 @@
     "./components/Account": "./components/Account/index.mjs",
     "./components/Breadcrumbs": "./components/Breadcrumbs/index.mjs",
     "./components/Button": "./components/Button/index.mjs",
+    "./components/Collection": "./components/Collection/index.mjs",
     "./components/Control": "./components/Control/index.mjs",
     "./components/CopyToClipboard": "./components/CopyToClipboard/index.mjs",
+    "./components/Design": "./components/Design/index.mjs",
     "./components/Docusaurus": "./components/Docusaurus/index.mjs",
     "./components/Editor": "./components/Editor/index.mjs",
     "./components/Highlight": "./components/Highlight/index.mjs",
diff --git a/packages/utils/src/index.mjs b/packages/utils/src/index.mjs
index 774e89f7d2b..2357f3927f3 100644
--- a/packages/utils/src/index.mjs
+++ b/packages/utils/src/index.mjs
@@ -1,5 +1,7 @@
 import tlds from 'tlds/index.json' with { type: 'json' }
 import { cloudflare as cloudflareConfig } from '@freesewing/config'
+import set from 'lodash/set.js'
+import unset from 'lodash/unset.js'
 
 /*
  * VARIABLES
@@ -245,6 +247,30 @@ export function measurementAsUnits(mmValue, units = 'metric') {
   return round(mmValue / (units === 'imperial' ? 25.4 : 10), 3)
 }
 
+/*
+ * Helper method to handle updates to nested object properties
+ *
+ * This is mostly using lodash.set but also has a quirk
+ * where passing 'unset' as value unsets the value
+ *
+ * @param {object} obj - The object to mutate
+ * @param {string|array} path - The path to the property to change, either an array or dot notation
+ * @param {mixed} val - The value to set it to, or 'unset' to remove/unset it
+ * @return {object} obj - The mutated object
+ */
+export const mutateObject = (obj = {}, path, val = 'unset') => {
+  if (val === 'unset') {
+    if (Array.isArray(path) && Array.isArray(path[0])) {
+      for (const [ipath, ival = 'unset'] of path) {
+        if (ival === 'unset') unset(obj, ipath)
+        else set(obj, ipath, ival)
+      }
+    } else unset(obj, path)
+  } else set(obj, path, val)
+
+  return obj
+}
+
 /** Generate a URL to create a new pattern with a given design, settings, and view */
 export const newPatternUrl = ({ design, settings = {}, view = 'draft' }) =>
   `/-/#settings=${encodeURIComponent(
diff --git a/sites/org/docs/designs/index.mdx b/sites/org/docs/designs/index.mdx
new file mode 100644
index 00000000000..cb5ebf69864
--- /dev/null
+++ b/sites/org/docs/designs/index.mdx
@@ -0,0 +1,9 @@
+---
+title: FreeSewing Designs
+sidebar_label: Designs
+---
+
+import { Collection } from '@freesewing/react/components/Collection'
+import Link from '@docusaurus/Link'
+
+<Collection Link={Link} />
diff --git a/sites/org/src/lib/designinfo.mjs b/sites/org/src/lib/designinfo.mjs
index 233d6643b56..eb81b82fb65 100644
--- a/sites/org/src/lib/designinfo.mjs
+++ b/sites/org/src/lib/designinfo.mjs
@@ -2,4 +2,4 @@
  * This file is auto-generated.
  * Any changes you make will be overwritten by the prebuild step.
  */
-export const designInfo = {"aaron":{"code":"Joost De Cock","description":"A FreeSewing pattern for a A-shirt or tank top","design":"Joost De Cock","difficulty":2,"lab":true,"org":true,"tags":["tops","underwear"],"techniques":["hem","stretch","knitBinding","curvedSeam"]},"albert":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for an apron","design":"Wouter Van Wageningen","difficulty":2,"lab":true,"org":true,"tags":["accessories"],"techniques":["hem","knitBinding","curvedSeam","pocket"]},"bee":{"code":"bobgeorgethe3rd","description":"A FreeSewing pattern for a bikini top","design":"PrudenceRabbit","difficulty":3,"lab":true,"org":true,"tags":["tops","swimwear"],"techniques":["hem","stretch","curvedSeam","precision"]},"bella":{"code":"Joost De Cock","description":"A FreeSewing pattern for a womenswear bodice block","design":["Bella Incognito","Joost De Cock"],"difficulty":3,"lab":true,"org":true,"tags":["blocks","tops"],"techniques":["dart","block"]},"benjamin":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for a bow tie","design":"Wouter Van Wageningen","difficulty":3,"lab":true,"org":true,"tags":["accessories"],"techniques":["precision","interfacing"]},"bent":{"code":"Joost De Cock","description":"A FreeSewing pattern for a menswear body block with a two-part sleeve","design":"Joost De Cock","difficulty":3,"lab":true,"org":true,"tags":["blocks","tops"],"techniques":["hem","curvedSeam","setSleeve"]},"bibi":{"code":"Jonathan Haas","description":"A FreeSewing pattern for a knit top body block","design":"Jonathan Haas","difficulty":2,"lab":true,"org":true,"tags":["blocks","tops"],"techniques":["curvedSeam","hem","flatSleeve"]},"bob":{"code":"Joost De Cock","description":"A FreeSewing pattern for a bib","design":"Joost De Cock","difficulty":3,"lab":true,"org":true,"tags":["accessories","infants"],"techniques":["biasTape","curvedSeam","snap"]},"breanna":{"code":"Joost De Cock","description":"A FreeSewing pattern for a basic body block for womenswear","design":"Joost De Cock","difficulty":3,"lab":true,"org":true,"tags":["blocks","tops"],"techniques":["block","dart"]},"brian":{"code":"Joost De Cock","description":"A FreeSewing pattern for a basic body block for menswear","design":"Joost De Cock","difficulty":3,"lab":true,"org":true,"tags":["blocks","tops"],"techniques":["block","flatSleeve"]},"bruce":{"code":"Joost De Cock","description":"A FreeSewing pattern for boxer briefs","design":"Joost De Cock","difficulty":3,"lab":true,"org":true,"tags":["bottoms","underwear"],"techniques":["stretch","hem","curvedSeam","elastic"]},"carlita":{"code":"Joost De Cock","description":"A FreeSewing pattern for Sherlock Holmes cosplay; Or just a nice long coat","design":["Anneke Caramin","Joost De Cock"],"difficulty":5,"lab":true,"org":true,"tags":["tops","coats"],"techniques":["hem","pocket","curvedSeam","precision","setSleeve","weltPocket","lining","princessSeam","interfacing","button"]},"carlton":{"code":"Joost De Cock","description":"A FreeSewing pattern for Sherlock Holmes cosplay; Or just a nice long coat","design":["Anneke Caramin","Joost De Cock"],"difficulty":5,"lab":true,"org":true,"tags":["tops","coats"],"techniques":["hem","pocket","curvedSeam","precision","setSleeve","weltPocket","lining","interfacing","button"]},"cathrin":{"code":"Joost De Cock","description":"A FreeSewing pattern for a underbust corset / waist trainer","design":["Cathrin Åhlén","Joost De Cock"],"difficulty":4,"lab":true,"org":true,"tags":["tops","underwear"],"techniques":["boning","precision","curvedSeam","interfacing"]},"charlie":{"code":"Joost De Cock","description":"A FreeSewing pattern for chino trousers","design":"Joost De Cock","difficulty":3,"lab":true,"org":true,"tags":["bottoms","trousers"],"techniques":["weltPocket","curvedSeam","interfacing","fly","zipper","button","dart","hem","seamPocket"]},"cornelius":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for cycling breeches, based on the Keystone drafting system","design":"Wouter Van Wageningen","difficulty":3,"lab":true,"org":true,"tags":["bottoms","trousers"],"techniques":["curvedSeam","fly","zipper","button","pocket"]},"diana":{"code":"Erica Alcusa Sáez","description":"A FreeSewing pattern for a top with a draped neck","design":"Erica Alcusa Sáez","difficulty":2,"lab":true,"org":true,"tags":["tops"],"techniques":["curvedSeam","flatSleeve","hem"]},"examples":{"code":"Joost De Cock","description":"A FreeSewing pattern holding examples for our documentation","lab":false,"org":false},"florence":{"code":"Joost De Cock","description":"A FreeSewing pattern for a face mask","design":"Joost De Cock","difficulty":1,"lab":true,"org":true,"tags":["accessories"],"techniques":["curvedSeam"]},"florent":{"code":["Quentin Felix","Joost De Cock"],"description":"A FreeSewing pattern for a flat cap","design":"Quentin Felix","difficulty":3,"lab":true,"org":true,"tags":["accessories","hats"],"techniques":["curvedSeam"]},"gozer":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for a ghost costume","design":"Wouter Van Wageningen","difficulty":1,"lab":true,"org":true,"tags":["costumes"],"techniques":["hem"]},"hi":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for a shark plush toy","design":"Wouter Van Wageningen","difficulty":4,"lab":true,"org":true,"tags":["accessories","toys"],"techniques":["curvedSeam","dart"]},"holmes":{"code":["Erica Alcusa Sáez","bobgeorgethe3rd"],"description":"A FreeSewing pattern for a Sherlock Holmes hat","design":"Erica Alcusa Sáez","difficulty":3,"lab":true,"org":true,"tags":["accessories","hats"],"techniques":["curvedSeam","lining"]},"hortensia":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for a handbag","design":["Stoffsuchti","Wouter Van Wageningen"],"difficulty":3,"lab":true,"org":true,"tags":["accessories","bags"],"techniques":["curvedSeam","precision","lining","zipper"]},"huey":{"code":"Joost De Cock","description":"A FreeSewing pattern for a zip-up hoodie","design":"Joost De Cock","difficulty":3,"lab":true,"org":true,"tags":["tops"],"techniques":["curvedSeam","pocket","zipper","ribbing","flatSleeve"]},"hugo":{"code":"Joost De Cock","description":"A FreeSewing pattern for a hooded jumper with raglan sleeves","design":"Joost De Cock","difficulty":3,"lab":true,"org":true,"tags":["tops"],"techniques":["curvedSeam","pocket","ribbing","raglanSleeve"]},"jaeger":{"code":"Joost De Cock","description":"A FreeSewing pattern for a sport coat style jacket","design":"Joost De Cock","difficulty":5,"lab":true,"org":true,"tags":["tops","coats"],"techniques":["hem","pocket","curvedSeam","precision","setSleeve","weltPocket","lining","interfacing","button"]},"jane":{"code":"SeaZeeZee","description":"A FreeSewing pattern for a 1790s shift","design":"SeaZeeZee","difficulty":2,"lab":true,"org":true,"tags":["tops","historical","underwear"],"techniques":["hem"]},"legend":{"code":"Joost De Cock","description":"A FreeSewing pattern to document pattern notation","lab":false,"org":false},"lucy":{"code":"SeaZeeZee","description":"A FreeSewing pattern for a historical tie-on pocket","design":"SeaZeeZee","difficulty":2,"lab":true,"org":true,"tags":["accessories","historical","bags"],"techniques":["curvedSeam"]},"lumina":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for leggings","design":"Wouter Van Wageningen","difficulty":3,"lab":true,"org":true,"tags":["bottoms","trousers"],"techniques":["stretch","curvedSeam","elastic"]},"lumira":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for leggings","design":"Wouter Van Wageningen","difficulty":3,"lab":true,"org":true,"tags":["bottoms","trousers"],"techniques":["stretch","curvedSeam","elastic"]},"lunetius":{"code":"Rika Tamaike","description":"A FreeSewing pattern for a lacerna, a historical Roman cloak","design":"Rika Tamaike","difficulty":1,"lab":true,"org":true,"tags":["tops","coats","historical"],"techniques":["hem"]},"magde":{"code":"clegganator259","description":"A FreeSewing pattern for a bike messenger bag","design":"clegganator259","difficulty":3,"lab":true,"org":false,"tags":["accessories","bags"],"techniques":[]},"noble":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for a princess seam bodice block","design":"Wouter Van Wageningen","difficulty":3,"lab":true,"org":true,"tags":["blocks","tops"],"techniques":["block","curvedSeam","precision","princessSeam"]},"octoplushy":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for an octopus plushy toy","design":"Wouter Van Wageningen","difficulty":4,"lab":true,"org":true,"tags":["accessories","toys"],"techniques":["curvedSeam","precision"]},"onyx":{"code":"Thrunic","description":"A FreeSewing pattern for one-piece garments","design":"Thrunic","difficulty":4,"lab":true,"org":true,"tags":["swimwear","pajamas","onePiece"],"techniques":["hem","curvedSeam","stretch","lining","zipper","ribbing"]},"opal":{"code":"Thrunic","description":"A FreeSewing pattern for overalls","design":"Thrunic","difficulty":3,"lab":true,"org":true,"tags":["overalls","onePiece"],"techniques":["flatFelledSeam","hem","curvedSeam","button","pocket"]},"otis":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for a baby romper","design":"Wouter Van Wageningen","difficulty":2,"lab":true,"org":true,"tags":[],"techniques":[]},"paco":{"code":"Joost De Cock","description":"A FreeSewing pattern for summer pants","design":"Joost De Cock","difficulty":3,"lab":true,"org":true,"tags":["bottoms","trousers"],"techniques":["elastic","curvedSeam","pocket","weltPocket","hem"]},"penelope":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for a pencil skirt","design":"Wouter Van Wageningen","difficulty":3,"lab":true,"org":true,"tags":["bottoms","skirts"],"techniques":["hem","curvedSeam","precision","zipper"]},"plugintest":{"code":"Joost De Cock","description":"A FreeSewing pattern to test (y)our plugins","lab":true,"org":false},"rendertest":{"code":"Joost De Cock","description":"A FreeSewing pattern to test (y)our render engine our CSS","lab":true,"org":false},"sandy":{"code":["Erica Alcusa Sáez","Joost De Cock"],"description":"A FreeSewing pattern for a circle skirt","design":"Erica Alcusa Sáez","difficulty":3,"lab":true,"org":true,"tags":["bottoms","skirts"],"techniques":["curvedSeam","button","hem"]},"shelly":{"code":"Thrunic","description":"A FreeSewing pattern for a raglan shirt, perfect for swimshirts","design":"Thrunic","difficulty":2,"lab":true,"org":true,"tags":["tops","swimwear"],"techniques":["hem","stretch","curvedSeam","raglanSleeve"]},"shin":{"code":"Joost De Cock","description":"A FreeSewing pattern for swim trunks","design":"Joost De Cock","difficulty":2,"lab":true,"org":true,"tags":["bottoms","swimwear"],"techniques":["hem","stretch","curvedSeam","elastic"]},"simon":{"code":"Joost De Cock","description":"A FreeSewing pattern for a button down shirt","design":"Joost De Cock","difficulty":4,"lab":true,"org":true,"tags":["tops"],"techniques":["hem","button","interfacing","curvedSeam","flatFelledSeam","flatSleeve"]},"simone":{"code":"Joost De Cock","description":"A FreeSewing pattern for a button down shirt (Simone = Simon for people with breasts)","design":"Joost De Cock","difficulty":4,"lab":true,"org":true,"tags":["tops"],"techniques":["hem","button","interfacing","curvedSeam","flatFelledSeam","flatSleeve"]},"skully":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for skully, our logo, a plushy toy","design":"Wouter Van Wageningen","difficulty":4,"lab":true,"org":true,"tags":["accessories","toys"],"techniques":["curvedSeam","precision"]},"sven":{"code":"Joost De Cock","description":"A FreeSewing pattern for a straightforward sweater","design":"Joost De Cock","difficulty":3,"lab":true,"org":true,"tags":["tops"],"techniques":["curvedSeam","flatSleeve","ribbing"]},"tamiko":{"code":"Joost De Cock","description":"A FreeSewing pattern for a zero-waste top","design":"Joost De Cock","difficulty":1,"lab":true,"org":true,"tags":["tops"],"techniques":["curvedSeam"]},"teagan":{"code":"Joost De Cock","description":"A FreeSewing pattern for a T-shirt","design":"Joost De Cock","difficulty":2,"lab":true,"org":true,"tags":["tops"],"techniques":["curvedSeam","hem","flatSleeve","knitBand"]},"tiberius":{"code":"Rika Tamaike","description":"A FreeSewing pattern for a tunica, a historical Roman tunic","design":"Rika Tamaike","difficulty":1,"lab":true,"org":true,"tags":["tops","historical"],"techniques":[]},"titan":{"code":"Joost De Cock","description":"A FreeSewing pattern for a unisex trouser block","design":["Debra Bean","Joost De Cock"],"difficulty":3,"lab":true,"org":true,"tags":["blocks","bottoms"],"techniques":[]},"trayvon":{"code":"Joost De Cock","description":"A FreeSewing pattern for a tie","design":"Joost De Cock","difficulty":2,"lab":true,"org":true,"tags":["accessories"],"techniques":["precision","lining"]},"tristan":{"code":"Wouter van Wageningen","description":"A FreeSewing pattern for a fitted top with prince(ss) seams","design":"Natalia Sayang","difficulty":3,"lab":true,"org":true,"tags":["tops"],"techniques":["curvedSeam","precision"]},"uma":{"code":"Joost De Cock","description":"A FreeSewing pattern for a basic, highly-customizable underwear pattern","design":"Joost De Cock","difficulty":2,"lab":true,"org":true,"tags":["bottoms","underwear"],"techniques":["elastic","curvedSeam"]},"umbra":{"code":"Joost De Cock, Jonathan Haas","description":"A FreeSewing pattern for a basic, highly-customizable underwear pattern","design":"Joost De Cock, Jonathan Haas","difficulty":2,"lab":true,"org":true,"tags":["bottoms","underwear"],"techniques":["elastic","curvedSeam"]},"wahid":{"code":"Joost De Cock","description":"A FreeSewing pattern for a classic fitted waistcoat","design":"Joost De Cock","difficulty":4,"lab":true,"org":true,"tags":["tops"],"techniques":["curvedSeam","hem","interfacing","lining","weltPocket","button"]},"walburga":{"code":"Rika Tamaike","description":"A FreeSewing pattern for a wappenrock (tabard/surcoat), a historical European/medieval (ish) garment","design":"Rika Tamaike","difficulty":1,"lab":true,"org":true,"tags":["bottoms","historical"],"techniques":["hem"]},"waralee":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for wrap pants","design":"Wouter Van Wageningen","difficulty":2,"lab":true,"org":true,"tags":["bottoms","trousers"],"techniques":["curvedSeam","hem","weltPocket"]},"yuri":{"code":"Hellgy","description":"A FreeSewing pattern for a fancy zipless sweater based on the Huey hoodie","design":"Biou","difficulty":3,"lab":true,"org":true,"tags":["tops"],"techniques":["curvedSeam","flatSleeve","hem","button"]},"lily":{"code":"Anna Puk, Joost De Cock","description":"A FreeSewing pattern for basic leggings","design":"Anna Puk","difficulty":2,"lab":true,"org":true,"tags":["bottoms"],"techniques":["elastic","curvedSeam","hem"]}}
+export const designInfo = {"aaron":{"code":"Joost De Cock","description":"A FreeSewing pattern for a A-shirt or tank top","design":"Joost De Cock","difficulty":2,"tags":["tops","underwear"],"techniques":["hem","stretch","knit-binding","curved-seam"]},"albert":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for an apron","design":"Wouter Van Wageningen","difficulty":2,"tags":["accessories"],"techniques":["hem","knit-binding","curved-seam","pocket"]},"bee":{"code":"bobgeorgethe3rd","description":"A FreeSewing pattern for a bikini top","design":"PrudenceRabbit","difficulty":3,"tags":["tops","swimwear"],"techniques":["hem","stretch","curved-seam","precision"]},"bella":{"code":"Joost De Cock","description":"A FreeSewing pattern for a womenswear bodice block","design":["Bella Incognito","Joost De Cock"],"difficulty":3,"tags":["blocks","tops"],"techniques":["dart","block"]},"benjamin":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for a bow tie","design":"Wouter Van Wageningen","difficulty":3,"tags":["accessories"],"techniques":["precision","interfacing"]},"bent":{"code":"Joost De Cock","description":"A FreeSewing pattern for a menswear body block with a two-part sleeve","design":"Joost De Cock","difficulty":3,"tags":["blocks","tops"],"techniques":["hem","curved-seam","set-sleeve"]},"bibi":{"code":"Jonathan Haas","description":"A FreeSewing pattern for a knit top body block","design":"Jonathan Haas","difficulty":2,"tags":["blocks","tops"],"techniques":["curved-seam","hem","flat-sleeve"]},"bob":{"code":"Joost De Cock","description":"A FreeSewing pattern for a bib","design":"Joost De Cock","difficulty":3,"tags":["accessories","infants"],"techniques":["bias-tape","curved-seam","snap"]},"breanna":{"code":"Joost De Cock","description":"A FreeSewing pattern for a basic body block for womenswear","design":"Joost De Cock","difficulty":3,"tags":["blocks","tops"],"techniques":["block","dart"]},"brian":{"code":"Joost De Cock","description":"A FreeSewing pattern for a basic body block for menswear","design":"Joost De Cock","difficulty":3,"tags":["blocks","tops"],"techniques":["block","flat-sleeve"]},"bruce":{"code":"Joost De Cock","description":"A FreeSewing pattern for boxer briefs","design":"Joost De Cock","difficulty":3,"tags":["bottoms","underwear"],"techniques":["stretch","hem","curved-seam","elastic"]},"carlita":{"code":"Joost De Cock","description":"A FreeSewing pattern for Sherlock Holmes cosplay; Or just a nice long coat","design":["Anneke Caramin","Joost De Cock"],"difficulty":5,"tags":["tops","coats"],"techniques":["hem","pocket","curved-seam","precision","set-sleeve","welt-pocket","lining","princess-seam","interfacing","button"]},"carlton":{"code":"Joost De Cock","description":"A FreeSewing pattern for Sherlock Holmes cosplay; Or just a nice long coat","design":["Anneke Caramin","Joost De Cock"],"difficulty":5,"tags":["tops","coats"],"techniques":["hem","pocket","curved-seam","precision","set-sleeve","welt-pocket","lining","interfacing","button"]},"cathrin":{"code":"Joost De Cock","description":"A FreeSewing pattern for a underbust corset / waist trainer","design":["Cathrin Åhlén","Joost De Cock"],"difficulty":4,"tags":["tops","underwear"],"techniques":["boning","precision","curved-seam","interfacing"]},"charlie":{"code":"Joost De Cock","description":"A FreeSewing pattern for chino trousers","design":"Joost De Cock","difficulty":3,"tags":["bottoms","trousers"],"techniques":["welt-pocket","curved-seam","interfacing","fly","zipper","button","dart","hem","seam-pocket"]},"cornelius":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for cycling breeches, based on the Keystone drafting system","design":"Wouter Van Wageningen","difficulty":3,"tags":["bottoms","trousers"],"techniques":["curved-seam","fly","zipper","button","pocket"]},"diana":{"code":"Erica Alcusa Sáez","description":"A FreeSewing pattern for a top with a draped neck","design":"Erica Alcusa Sáez","difficulty":2,"tags":["tops"],"techniques":["curved-seam","flat-sleeve","hem"]},"examples":{"code":"Joost De Cock","description":"A FreeSewing pattern holding examples for our documentation"},"florence":{"code":"Joost De Cock","description":"A FreeSewing pattern for a face mask","design":"Joost De Cock","difficulty":1,"tags":["accessories"],"techniques":["curved-seam"]},"florent":{"code":["Quentin Felix","Joost De Cock"],"description":"A FreeSewing pattern for a flat cap","design":"Quentin Felix","difficulty":3,"tags":["accessories","hats"],"techniques":["curved-seam"]},"gozer":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for a ghost costume","design":"Wouter Van Wageningen","difficulty":1,"tags":["costumes"],"techniques":["hem"]},"hi":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for a shark plush toy","design":"Wouter Van Wageningen","difficulty":4,"tags":["accessories","toys"],"techniques":["curved-seam","dart"]},"holmes":{"code":["Erica Alcusa Sáez","bobgeorgethe3rd"],"description":"A FreeSewing pattern for a Sherlock Holmes hat","design":"Erica Alcusa Sáez","difficulty":3,"tags":["accessories","hats"],"techniques":["curved-seam","lining"]},"hortensia":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for a handbag","design":["Stoffsuchti","Wouter Van Wageningen"],"difficulty":3,"tags":["accessories","bags"],"techniques":["curved-seam","precision","lining","zipper"]},"huey":{"code":"Joost De Cock","description":"A FreeSewing pattern for a zip-up hoodie","design":"Joost De Cock","difficulty":3,"tags":["tops"],"techniques":["curved-seam","pocket","zipper","ribbing","flat-sleeve"]},"hugo":{"code":"Joost De Cock","description":"A FreeSewing pattern for a hooded jumper with raglan sleeves","design":"Joost De Cock","difficulty":3,"tags":["tops"],"techniques":["curved-seam","pocket","ribbing","raglan-sleeve"]},"jaeger":{"code":"Joost De Cock","description":"A FreeSewing pattern for a sport coat style jacket","design":"Joost De Cock","difficulty":5,"tags":["tops","coats"],"techniques":["hem","pocket","curved-seam","precision","set-sleeve","welt-pocket","lining","interfacing","button"]},"jane":{"code":"SeaZeeZee","description":"A FreeSewing pattern for a 1790s shift","design":"SeaZeeZee","difficulty":2,"tags":["tops","historical","underwear"],"techniques":["hem"]},"legend":{"code":"Joost De Cock","description":"A FreeSewing pattern to document pattern notation"},"lucy":{"code":"SeaZeeZee","description":"A FreeSewing pattern for a historical tie-on pocket","design":"SeaZeeZee","difficulty":2,"tags":["accessories","historical","bags"],"techniques":["curved-seam"]},"lumina":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for leggings","design":"Wouter Van Wageningen","difficulty":3,"tags":["bottoms","trousers"],"techniques":["stretch","curved-seam","elastic"]},"lumira":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for leggings","design":"Wouter Van Wageningen","difficulty":3,"tags":["bottoms","trousers"],"techniques":["stretch","curved-seam","elastic"]},"lunetius":{"code":"Rika Tamaike","description":"A FreeSewing pattern for a lacerna, a historical Roman cloak","design":"Rika Tamaike","difficulty":1,"tags":["tops","coats","historical"],"techniques":["hem"]},"magde":{"code":"clegganator259","description":"A FreeSewing pattern for a bike messenger bag","design":"clegganator259","difficulty":3,"tags":["accessories","bags"],"techniques":[]},"noble":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for a princess seam bodice block","design":"Wouter Van Wageningen","difficulty":3,"tags":["blocks","tops"],"techniques":["block","curved-seam","precision","princess-seam"]},"octoplushy":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for an octopus plushy toy","design":"Wouter Van Wageningen","difficulty":4,"tags":["accessories","toys"],"techniques":["curved-seam","precision"]},"onyx":{"code":"Thrunic","description":"A FreeSewing pattern for one-piece garments","design":"Thrunic","difficulty":4,"tags":["swimwear","pajamas","onePiece"],"techniques":["hem","curved-seam","stretch","lining","zipper","ribbing"]},"opal":{"code":"Thrunic","description":"A FreeSewing pattern for overalls","design":"Thrunic","difficulty":3,"tags":["overalls","onePiece"],"techniques":["flat-felled-seam","hem","curved-seam","button","pocket"]},"otis":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for a baby romper","design":"Wouter Van Wageningen","difficulty":2,"tags":[],"techniques":[]},"paco":{"code":"Joost De Cock","description":"A FreeSewing pattern for summer pants","design":"Joost De Cock","difficulty":3,"tags":["bottoms","trousers"],"techniques":["elastic","curved-seam","pocket","welt-pocket","hem"]},"penelope":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for a pencil skirt","design":"Wouter Van Wageningen","difficulty":3,"tags":["bottoms","skirts"],"techniques":["hem","curved-seam","precision","zipper"]},"plugintest":{"code":"Joost De Cock","description":"A FreeSewing pattern to test (y)our plugins"},"rendertest":{"code":"Joost De Cock","description":"A FreeSewing pattern to test (y)our render engine our CSS"},"sandy":{"code":["Erica Alcusa Sáez","Joost De Cock"],"description":"A FreeSewing pattern for a circle skirt","design":"Erica Alcusa Sáez","difficulty":3,"tags":["bottoms","skirts"],"techniques":["curved-seam","button","hem"]},"shelly":{"code":"Thrunic","description":"A FreeSewing pattern for a raglan shirt, perfect for swimshirts","design":"Thrunic","difficulty":2,"tags":["tops","swimwear"],"techniques":["hem","stretch","curved-seam","raglan-sleeve"]},"shin":{"code":"Joost De Cock","description":"A FreeSewing pattern for swim trunks","design":"Joost De Cock","difficulty":2,"tags":["bottoms","swimwear"],"techniques":["hem","stretch","curved-seam","elastic"]},"simon":{"code":"Joost De Cock","description":"A FreeSewing pattern for a button down shirt","design":"Joost De Cock","difficulty":4,"tags":["tops"],"techniques":["hem","button","interfacing","curved-seam","flat-felled-seam","flat-sleeve"]},"simone":{"code":"Joost De Cock","description":"A FreeSewing pattern for a button down shirt (Simone = Simon for people with breasts)","design":"Joost De Cock","difficulty":4,"tags":["tops"],"techniques":["hem","button","interfacing","curved-seam","flat-felled-seam","flat-sleeve"]},"skully":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for skully, our logo, a plushy toy","design":"Wouter Van Wageningen","difficulty":4,"tags":["accessories","toys"],"techniques":["curved-seam","precision"]},"sven":{"code":"Joost De Cock","description":"A FreeSewing pattern for a straightforward sweater","design":"Joost De Cock","difficulty":3,"tags":["tops"],"techniques":["curved-seam","flat-sleeve","ribbing"]},"tamiko":{"code":"Joost De Cock","description":"A FreeSewing pattern for a zero-waste top","design":"Joost De Cock","difficulty":1,"tags":["tops"],"techniques":["curved-seam"]},"teagan":{"code":"Joost De Cock","description":"A FreeSewing pattern for a T-shirt","design":"Joost De Cock","difficulty":2,"tags":["tops"],"techniques":["curved-seam","hem","flat-sleeve","knit-band"]},"tiberius":{"code":"Rika Tamaike","description":"A FreeSewing pattern for a tunica, a historical Roman tunic","design":"Rika Tamaike","difficulty":1,"tags":["tops","historical"],"techniques":[]},"titan":{"code":"Joost De Cock","description":"A FreeSewing pattern for a unisex trouser block","design":["Debra Bean","Joost De Cock"],"difficulty":3,"tags":["blocks","bottoms"],"techniques":[]},"trayvon":{"code":"Joost De Cock","description":"A FreeSewing pattern for a tie","design":"Joost De Cock","difficulty":2,"tags":["accessories"],"techniques":["precision","lining"]},"tristan":{"code":"Wouter van Wageningen","description":"A FreeSewing pattern for a fitted top with prince(ss) seams","design":"Natalia Sayang","difficulty":3,"tags":["tops"],"techniques":["curved-seam","precision"]},"uma":{"code":"Joost De Cock","description":"A FreeSewing pattern for a basic, highly-customizable underwear pattern","design":"Joost De Cock","difficulty":2,"tags":["bottoms","underwear"],"techniques":["elastic","curved-seam"]},"umbra":{"code":["Joost De Cock","Jonathan Haas"],"description":"A FreeSewing pattern for a basic, highly-customizable underwear pattern","design":["Joost De Cock","Jonathan Haas"],"difficulty":2,"tags":["bottoms","underwear"],"techniques":["elastic","curved-seam"]},"wahid":{"code":"Joost De Cock","description":"A FreeSewing pattern for a classic fitted waistcoat","design":"Joost De Cock","difficulty":4,"tags":["tops"],"techniques":["curved-seam","hem","interfacing","lining","welt-pocket","button"]},"walburga":{"code":"Rika Tamaike","description":"A FreeSewing pattern for a wappenrock (tabard/surcoat), a historical European/medieval (ish) garment","design":"Rika Tamaike","difficulty":1,"tags":["bottoms","historical"],"techniques":["hem"]},"waralee":{"code":"Wouter Van Wageningen","description":"A FreeSewing pattern for wrap pants","design":"Wouter Van Wageningen","difficulty":2,"tags":["bottoms","trousers"],"techniques":["curved-seam","hem","welt-pocket"]},"yuri":{"code":"Hellgy","description":"A FreeSewing pattern for a fancy zipless sweater based on the Huey hoodie","design":"Biou","difficulty":3,"tags":["tops"],"techniques":["curved-seam","flat-sleeve","hem","button"]},"lily":{"code":["Anna Puk","Joost De Cock"],"description":"A FreeSewing pattern for basic leggings","design":"Anna Puk","difficulty":2,"tags":["bottoms"],"techniques":["elastic","curved-seam","hem"]}}
diff --git a/sites/org/src/lib/designs.mjs b/sites/org/src/lib/designs.mjs
index ee587c756cb..ae3520a9bb6 100644
--- a/sites/org/src/lib/designs.mjs
+++ b/sites/org/src/lib/designs.mjs
@@ -3,124 +3,8 @@
  * Any changes you make will be overwritten by the prebuild step.
  */
 import { designInfo } from './designinfo.mjs'
-import * as aaron from '@freesewing/aaron'
-import * as albert from '@freesewing/albert'
-import * as bee from '@freesewing/bee'
-import * as bella from '@freesewing/bella'
-import * as benjamin from '@freesewing/benjamin'
-import * as bent from '@freesewing/bent'
-import * as bibi from '@freesewing/bibi'
-import * as bob from '@freesewing/bob'
-import * as breanna from '@freesewing/breanna'
-import * as brian from '@freesewing/brian'
-import * as bruce from '@freesewing/bruce'
-import * as carlita from '@freesewing/carlita'
-import * as carlton from '@freesewing/carlton'
-import * as cathrin from '@freesewing/cathrin'
-import * as charlie from '@freesewing/charlie'
-import * as cornelius from '@freesewing/cornelius'
-import * as diana from '@freesewing/diana'
-import * as florence from '@freesewing/florence'
-import * as florent from '@freesewing/florent'
-import * as gozer from '@freesewing/gozer'
-import * as hi from '@freesewing/hi'
-import * as holmes from '@freesewing/holmes'
-import * as hortensia from '@freesewing/hortensia'
-import * as huey from '@freesewing/huey'
-import * as hugo from '@freesewing/hugo'
-import * as jaeger from '@freesewing/jaeger'
-import * as jane from '@freesewing/jane'
-import * as lucy from '@freesewing/lucy'
-import * as lumina from '@freesewing/lumina'
-import * as lumira from '@freesewing/lumira'
-import * as lunetius from '@freesewing/lunetius'
-import * as noble from '@freesewing/noble'
-import * as octoplushy from '@freesewing/octoplushy'
-import * as onyx from '@freesewing/onyx'
-import * as opal from '@freesewing/opal'
-import * as otis from '@freesewing/otis'
-import * as paco from '@freesewing/paco'
-import * as penelope from '@freesewing/penelope'
-import * as sandy from '@freesewing/sandy'
-import * as shelly from '@freesewing/shelly'
-import * as shin from '@freesewing/shin'
-import * as simon from '@freesewing/simon'
-import * as simone from '@freesewing/simone'
-import * as skully from '@freesewing/skully'
-import * as sven from '@freesewing/sven'
-import * as tamiko from '@freesewing/tamiko'
-import * as teagan from '@freesewing/teagan'
-import * as tiberius from '@freesewing/tiberius'
-import * as titan from '@freesewing/titan'
-import * as trayvon from '@freesewing/trayvon'
-import * as tristan from '@freesewing/tristan'
-import * as uma from '@freesewing/uma'
-import * as umbra from '@freesewing/umbra'
-import * as wahid from '@freesewing/wahid'
-import * as walburga from '@freesewing/walburga'
-import * as waralee from '@freesewing/waralee'
-import * as yuri from '@freesewing/yuri'
-import * as lily from '@freesewing/lily'
 
 const designs = {
-  aaron,
-  albert,
-  bee,
-  bella,
-  benjamin,
-  bent,
-  bibi,
-  bob,
-  breanna,
-  brian,
-  bruce,
-  carlita,
-  carlton,
-  cathrin,
-  charlie,
-  cornelius,
-  diana,
-  florence,
-  florent,
-  gozer,
-  hi,
-  holmes,
-  hortensia,
-  huey,
-  hugo,
-  jaeger,
-  jane,
-  lucy,
-  lumina,
-  lumira,
-  lunetius,
-  noble,
-  octoplushy,
-  onyx,
-  opal,
-  otis,
-  paco,
-  penelope,
-  sandy,
-  shelly,
-  shin,
-  simon,
-  simone,
-  skully,
-  sven,
-  tamiko,
-  teagan,
-  tiberius,
-  titan,
-  trayvon,
-  tristan,
-  uma,
-  umbra,
-  wahid,
-  walburga,
-  waralee,
-  yuri,
-  lily,
 }
 
 const designList = Object.keys(designs)
diff --git a/sites/org/src/pages/designs/aaron.md b/sites/org/src/pages/designs/aaron.md
deleted file mode 100644
index 7d93f099b6a..00000000000
--- a/sites/org/src/pages/designs/aaron.md
+++ /dev/null
@@ -1 +0,0 @@
-aaron
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/albert.md b/sites/org/src/pages/designs/albert.md
deleted file mode 100644
index eb1e24640ea..00000000000
--- a/sites/org/src/pages/designs/albert.md
+++ /dev/null
@@ -1 +0,0 @@
-albert
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/bee.md b/sites/org/src/pages/designs/bee.md
deleted file mode 100644
index 84738b4acf6..00000000000
--- a/sites/org/src/pages/designs/bee.md
+++ /dev/null
@@ -1 +0,0 @@
-bee
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/bella.md b/sites/org/src/pages/designs/bella.md
deleted file mode 100644
index c8be6e3816c..00000000000
--- a/sites/org/src/pages/designs/bella.md
+++ /dev/null
@@ -1 +0,0 @@
-bella
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/benjamin.md b/sites/org/src/pages/designs/benjamin.md
deleted file mode 100644
index 91e7e455446..00000000000
--- a/sites/org/src/pages/designs/benjamin.md
+++ /dev/null
@@ -1 +0,0 @@
-benjamin
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/bent.md b/sites/org/src/pages/designs/bent.md
deleted file mode 100644
index 7a4e85fd757..00000000000
--- a/sites/org/src/pages/designs/bent.md
+++ /dev/null
@@ -1 +0,0 @@
-bent
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/bibi.md b/sites/org/src/pages/designs/bibi.md
deleted file mode 100644
index 4f991146ad5..00000000000
--- a/sites/org/src/pages/designs/bibi.md
+++ /dev/null
@@ -1 +0,0 @@
-bibi
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/bob.md b/sites/org/src/pages/designs/bob.md
deleted file mode 100644
index 2529de8969e..00000000000
--- a/sites/org/src/pages/designs/bob.md
+++ /dev/null
@@ -1 +0,0 @@
-bob
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/breanna.md b/sites/org/src/pages/designs/breanna.md
deleted file mode 100644
index 5828010521e..00000000000
--- a/sites/org/src/pages/designs/breanna.md
+++ /dev/null
@@ -1 +0,0 @@
-breanna
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/brian.md b/sites/org/src/pages/designs/brian.md
deleted file mode 100644
index c17e5c8fddc..00000000000
--- a/sites/org/src/pages/designs/brian.md
+++ /dev/null
@@ -1 +0,0 @@
-brian
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/bruce.md b/sites/org/src/pages/designs/bruce.md
deleted file mode 100644
index db5a48dfd93..00000000000
--- a/sites/org/src/pages/designs/bruce.md
+++ /dev/null
@@ -1 +0,0 @@
-bruce
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/carlita.md b/sites/org/src/pages/designs/carlita.md
deleted file mode 100644
index dc85855916e..00000000000
--- a/sites/org/src/pages/designs/carlita.md
+++ /dev/null
@@ -1 +0,0 @@
-carlita
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/carlton.md b/sites/org/src/pages/designs/carlton.md
deleted file mode 100644
index 941f51dd886..00000000000
--- a/sites/org/src/pages/designs/carlton.md
+++ /dev/null
@@ -1 +0,0 @@
-carlton
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/cathrin.md b/sites/org/src/pages/designs/cathrin.md
deleted file mode 100644
index afa569b0787..00000000000
--- a/sites/org/src/pages/designs/cathrin.md
+++ /dev/null
@@ -1 +0,0 @@
-cathrin
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/charlie.md b/sites/org/src/pages/designs/charlie.md
deleted file mode 100644
index b4d45cf2a60..00000000000
--- a/sites/org/src/pages/designs/charlie.md
+++ /dev/null
@@ -1 +0,0 @@
-charlie
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/cornelius.md b/sites/org/src/pages/designs/cornelius.md
deleted file mode 100644
index bb71c8a8aa1..00000000000
--- a/sites/org/src/pages/designs/cornelius.md
+++ /dev/null
@@ -1 +0,0 @@
-cornelius
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/diana.md b/sites/org/src/pages/designs/diana.md
deleted file mode 100644
index 89f1b9b53ba..00000000000
--- a/sites/org/src/pages/designs/diana.md
+++ /dev/null
@@ -1 +0,0 @@
-diana
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/florence.md b/sites/org/src/pages/designs/florence.md
deleted file mode 100644
index a770c181668..00000000000
--- a/sites/org/src/pages/designs/florence.md
+++ /dev/null
@@ -1 +0,0 @@
-florence
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/florent.md b/sites/org/src/pages/designs/florent.md
deleted file mode 100644
index c520abc9187..00000000000
--- a/sites/org/src/pages/designs/florent.md
+++ /dev/null
@@ -1 +0,0 @@
-florent
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/gozer.md b/sites/org/src/pages/designs/gozer.md
deleted file mode 100644
index 0a7e34d8508..00000000000
--- a/sites/org/src/pages/designs/gozer.md
+++ /dev/null
@@ -1 +0,0 @@
-gozer
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/hi.md b/sites/org/src/pages/designs/hi.md
deleted file mode 100644
index 32f95c0d124..00000000000
--- a/sites/org/src/pages/designs/hi.md
+++ /dev/null
@@ -1 +0,0 @@
-hi
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/holmes.md b/sites/org/src/pages/designs/holmes.md
deleted file mode 100644
index 6eec9e12adf..00000000000
--- a/sites/org/src/pages/designs/holmes.md
+++ /dev/null
@@ -1 +0,0 @@
-holmes
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/hortensia.md b/sites/org/src/pages/designs/hortensia.md
deleted file mode 100644
index 6284cfbee45..00000000000
--- a/sites/org/src/pages/designs/hortensia.md
+++ /dev/null
@@ -1 +0,0 @@
-hortensia
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/huey.md b/sites/org/src/pages/designs/huey.md
deleted file mode 100644
index 8816c247324..00000000000
--- a/sites/org/src/pages/designs/huey.md
+++ /dev/null
@@ -1 +0,0 @@
-huey
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/hugo.md b/sites/org/src/pages/designs/hugo.md
deleted file mode 100644
index 2ffa7b29ab2..00000000000
--- a/sites/org/src/pages/designs/hugo.md
+++ /dev/null
@@ -1 +0,0 @@
-hugo
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/index.md b/sites/org/src/pages/designs/index.md
deleted file mode 100644
index 93722f6698c..00000000000
--- a/sites/org/src/pages/designs/index.md
+++ /dev/null
@@ -1 +0,0 @@
-designs index
diff --git a/sites/org/src/pages/designs/jaeger.md b/sites/org/src/pages/designs/jaeger.md
deleted file mode 100644
index d3a76e02ed6..00000000000
--- a/sites/org/src/pages/designs/jaeger.md
+++ /dev/null
@@ -1 +0,0 @@
-jaeger
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/jane.md b/sites/org/src/pages/designs/jane.md
deleted file mode 100644
index c6a51c1c338..00000000000
--- a/sites/org/src/pages/designs/jane.md
+++ /dev/null
@@ -1 +0,0 @@
-jane
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/lily.md b/sites/org/src/pages/designs/lily.md
deleted file mode 100644
index a4c89dea035..00000000000
--- a/sites/org/src/pages/designs/lily.md
+++ /dev/null
@@ -1 +0,0 @@
-lily
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/lucy.md b/sites/org/src/pages/designs/lucy.md
deleted file mode 100644
index e2b60c5f170..00000000000
--- a/sites/org/src/pages/designs/lucy.md
+++ /dev/null
@@ -1 +0,0 @@
-lucy
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/lumina.md b/sites/org/src/pages/designs/lumina.md
deleted file mode 100644
index a188a9a4187..00000000000
--- a/sites/org/src/pages/designs/lumina.md
+++ /dev/null
@@ -1 +0,0 @@
-lumina
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/lumira.md b/sites/org/src/pages/designs/lumira.md
deleted file mode 100644
index a05b233232c..00000000000
--- a/sites/org/src/pages/designs/lumira.md
+++ /dev/null
@@ -1 +0,0 @@
-lumira
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/lunetius.md b/sites/org/src/pages/designs/lunetius.md
deleted file mode 100644
index 3f18db6b8d7..00000000000
--- a/sites/org/src/pages/designs/lunetius.md
+++ /dev/null
@@ -1 +0,0 @@
-lunetius
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/noble.md b/sites/org/src/pages/designs/noble.md
deleted file mode 100644
index c44ffafd2e4..00000000000
--- a/sites/org/src/pages/designs/noble.md
+++ /dev/null
@@ -1 +0,0 @@
-noble
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/octoplushy.md b/sites/org/src/pages/designs/octoplushy.md
deleted file mode 100644
index 5e433b729d3..00000000000
--- a/sites/org/src/pages/designs/octoplushy.md
+++ /dev/null
@@ -1 +0,0 @@
-octoplushy
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/onyx.md b/sites/org/src/pages/designs/onyx.md
deleted file mode 100644
index 37be007c6b9..00000000000
--- a/sites/org/src/pages/designs/onyx.md
+++ /dev/null
@@ -1 +0,0 @@
-onyx
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/opal.md b/sites/org/src/pages/designs/opal.md
deleted file mode 100644
index c1fe64dd840..00000000000
--- a/sites/org/src/pages/designs/opal.md
+++ /dev/null
@@ -1 +0,0 @@
-opal
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/otis.md b/sites/org/src/pages/designs/otis.md
deleted file mode 100644
index 0e676881b13..00000000000
--- a/sites/org/src/pages/designs/otis.md
+++ /dev/null
@@ -1 +0,0 @@
-otis
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/paco.md b/sites/org/src/pages/designs/paco.md
deleted file mode 100644
index f77ab651c92..00000000000
--- a/sites/org/src/pages/designs/paco.md
+++ /dev/null
@@ -1 +0,0 @@
-paco
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/penelope.md b/sites/org/src/pages/designs/penelope.md
deleted file mode 100644
index 9bcf72e8110..00000000000
--- a/sites/org/src/pages/designs/penelope.md
+++ /dev/null
@@ -1 +0,0 @@
-penelope
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/sandy.md b/sites/org/src/pages/designs/sandy.md
deleted file mode 100644
index 9acaf9ce63e..00000000000
--- a/sites/org/src/pages/designs/sandy.md
+++ /dev/null
@@ -1 +0,0 @@
-sandy
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/shelly.md b/sites/org/src/pages/designs/shelly.md
deleted file mode 100644
index d6789a7ea7a..00000000000
--- a/sites/org/src/pages/designs/shelly.md
+++ /dev/null
@@ -1 +0,0 @@
-shelly
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/shin.md b/sites/org/src/pages/designs/shin.md
deleted file mode 100644
index 21f04bc5760..00000000000
--- a/sites/org/src/pages/designs/shin.md
+++ /dev/null
@@ -1 +0,0 @@
-shin
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/simon.md b/sites/org/src/pages/designs/simon.md
deleted file mode 100644
index ad05d4a34c2..00000000000
--- a/sites/org/src/pages/designs/simon.md
+++ /dev/null
@@ -1 +0,0 @@
-simon
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/simone.md b/sites/org/src/pages/designs/simone.md
deleted file mode 100644
index 6d32071d64b..00000000000
--- a/sites/org/src/pages/designs/simone.md
+++ /dev/null
@@ -1 +0,0 @@
-simone
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/skully.md b/sites/org/src/pages/designs/skully.md
deleted file mode 100644
index 700fa0af62d..00000000000
--- a/sites/org/src/pages/designs/skully.md
+++ /dev/null
@@ -1 +0,0 @@
-skully
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/sven.md b/sites/org/src/pages/designs/sven.md
deleted file mode 100644
index af9b1911bd4..00000000000
--- a/sites/org/src/pages/designs/sven.md
+++ /dev/null
@@ -1 +0,0 @@
-sven
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/tamiko.md b/sites/org/src/pages/designs/tamiko.md
deleted file mode 100644
index d572a891469..00000000000
--- a/sites/org/src/pages/designs/tamiko.md
+++ /dev/null
@@ -1 +0,0 @@
-tamiko
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/teagan.md b/sites/org/src/pages/designs/teagan.md
deleted file mode 100644
index 1e8bba8cfdd..00000000000
--- a/sites/org/src/pages/designs/teagan.md
+++ /dev/null
@@ -1 +0,0 @@
-teagan
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/tiberius.md b/sites/org/src/pages/designs/tiberius.md
deleted file mode 100644
index f0cf68f7937..00000000000
--- a/sites/org/src/pages/designs/tiberius.md
+++ /dev/null
@@ -1 +0,0 @@
-tiberius
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/titan.md b/sites/org/src/pages/designs/titan.md
deleted file mode 100644
index a8693a3be48..00000000000
--- a/sites/org/src/pages/designs/titan.md
+++ /dev/null
@@ -1 +0,0 @@
-titan
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/trayvon.md b/sites/org/src/pages/designs/trayvon.md
deleted file mode 100644
index 145110c1d63..00000000000
--- a/sites/org/src/pages/designs/trayvon.md
+++ /dev/null
@@ -1 +0,0 @@
-trayvon
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/tristan.md b/sites/org/src/pages/designs/tristan.md
deleted file mode 100644
index 506cc1c6617..00000000000
--- a/sites/org/src/pages/designs/tristan.md
+++ /dev/null
@@ -1 +0,0 @@
-tristan
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/uma.md b/sites/org/src/pages/designs/uma.md
deleted file mode 100644
index 9c72f541203..00000000000
--- a/sites/org/src/pages/designs/uma.md
+++ /dev/null
@@ -1 +0,0 @@
-uma
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/umbra.md b/sites/org/src/pages/designs/umbra.md
deleted file mode 100644
index 709962e7aa5..00000000000
--- a/sites/org/src/pages/designs/umbra.md
+++ /dev/null
@@ -1 +0,0 @@
-umbra
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/wahid.md b/sites/org/src/pages/designs/wahid.md
deleted file mode 100644
index 06c540a55a1..00000000000
--- a/sites/org/src/pages/designs/wahid.md
+++ /dev/null
@@ -1 +0,0 @@
-wahid
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/walburga.md b/sites/org/src/pages/designs/walburga.md
deleted file mode 100644
index 0d5b675cdb2..00000000000
--- a/sites/org/src/pages/designs/walburga.md
+++ /dev/null
@@ -1 +0,0 @@
-walburga
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/waralee.md b/sites/org/src/pages/designs/waralee.md
deleted file mode 100644
index 31dca466129..00000000000
--- a/sites/org/src/pages/designs/waralee.md
+++ /dev/null
@@ -1 +0,0 @@
-waralee
\ No newline at end of file
diff --git a/sites/org/src/pages/designs/yuri.md b/sites/org/src/pages/designs/yuri.md
deleted file mode 100644
index a9af95d9cab..00000000000
--- a/sites/org/src/pages/designs/yuri.md
+++ /dev/null
@@ -1 +0,0 @@
-yuri
\ No newline at end of file