diff --git a/package-lock.json b/package-lock.json
index 303914840..e35373fa6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,16 +8,20 @@
       "name": "code-sandbox",
       "version": "0.0.0",
       "dependencies": {
-        "@abgov/react-components": "5.4.0",
-        "@abgov/web-components": "1.29.0",
+        "@abgov/react-components": "6.2.1",
+        "@abgov/ui-components-common": "1.2.1",
+        "@abgov/web-components": "1.32.1",
         "@faker-js/faker": "^8.3.1",
         "highlight.js": "^11.8.0",
+        "js-cookie": "^3.0.5",
         "octokit": "^4.0.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.13.0"
       },
       "devDependencies": {
+        "@types/js-cookie": "^3.0.6",
+        "@types/lodash": "^4.17.16",
         "@types/react": "^18.2.13",
         "@types/react-dom": "^18.2.6",
         "@types/react-router-dom": "^5.3.3",
@@ -27,11 +31,32 @@
         "eslint": "^8.43.0",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.3.5",
+        "lodash": "^4.17.21",
         "prettier": "2.4.1",
         "typescript": "^5.4.2",
         "vite": "^5.4.6"
       }
     },
+    "../ui-components/dist/libs/angular-components": {
+      "name": "@abgov/angular-components",
+      "version": "0.0.1",
+      "extraneous": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "@angular/core": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "@angular/forms": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "../ui-components/dist/libs/ui-commons": {
+      "extraneous": true
+    },
+    "../ui-components/dist/libs/ui-components-common": {
+      "extraneous": true
+    },
     "node_modules/@aashutoshrathi/word-wrap": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
@@ -42,19 +67,24 @@
       }
     },
     "node_modules/@abgov/react-components": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-5.4.0.tgz",
-      "integrity": "sha512-vN1Ktjkw5IWaeJYmf9i8gKJpjn6px7D9lEt6USg1qjQzf5IKxR28aIuowBS7M2kmJ4Vk7AP+Z1yjB2g5Pw4J3w==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-6.2.1.tgz",
+      "integrity": "sha512-CQ2Grpv5R/QR2UifwGP9VvAGDFxCwCpUlfSkcOKMXFUvwT+IQ6FbHPjgKkGViF2Td813/m7Qz7woo8DvoIIQfQ==",
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0",
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@abgov/ui-components-common": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@abgov/ui-components-common/-/ui-components-common-1.2.1.tgz",
+      "integrity": "sha512-RIvetCp7das7VmxiOqudQ2CGFIsWlt9poL65R03SOhpgHPco5PqDNYLF+QiFlHu1Aeq9YMhIk5miHjpNBUWLSQ=="
+    },
     "node_modules/@abgov/web-components": {
-      "version": "1.29.0",
-      "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.29.0.tgz",
-      "integrity": "sha512-4Y5mzHaNjq/unrs81EP7/mjiauj9mtowNillvPIpFFTUo+9DN2XL1TKPliG0B3Z8WRSS9ayrt3KXzV1WRQh2oQ==",
+      "version": "1.32.1",
+      "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.32.1.tgz",
+      "integrity": "sha512-Ezj17LYk5RgnNN3TVazuvlPjyOSfo4ArtpOE2VrnC0XJ0wIBKfmtcXwhdFATtLCtR/ILix829QUU0kxXzkRcSA==",
       "peerDependencies": {
         "@sveltejs/vite-plugin-svelte": "3.x",
         "glob": "10.x",
@@ -568,9 +598,9 @@
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
-      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
       "peer": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
@@ -984,9 +1014,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz",
-      "integrity": "sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.4.tgz",
+      "integrity": "sha512-jfUJrFct/hTA0XDM5p/htWKoNNTbDLY0KRwEt6pyOA6k2fmk0WVwl65PdUdJZgzGEHWx+49LilkcSaumQRyNQw==",
       "cpu": [
         "arm"
       ],
@@ -996,9 +1026,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.4.tgz",
-      "integrity": "sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.4.tgz",
+      "integrity": "sha512-j4nrEO6nHU1nZUuCfRKoCcvh7PIywQPUCBa2UsootTHvTHIoIu2BzueInGJhhvQO/2FTRdNYpf63xsgEqH9IhA==",
       "cpu": [
         "arm64"
       ],
@@ -1008,9 +1038,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.4.tgz",
-      "integrity": "sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.4.tgz",
+      "integrity": "sha512-GmU/QgGtBTeraKyldC7cDVVvAJEOr3dFLKneez/n7BvX57UdhOqDsVwzU7UOnYA7AAOt+Xb26lk79PldDHgMIQ==",
       "cpu": [
         "arm64"
       ],
@@ -1020,9 +1050,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.4.tgz",
-      "integrity": "sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.4.tgz",
+      "integrity": "sha512-N6oDBiZCBKlwYcsEPXGDE4g9RoxZLK6vT98M8111cW7VsVJFpNEqvJeIPfsCzbf0XEakPslh72X0gnlMi4Ddgg==",
       "cpu": [
         "x64"
       ],
@@ -1031,10 +1061,34 @@
         "darwin"
       ]
     },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.24.4.tgz",
+      "integrity": "sha512-py5oNShCCjCyjWXCZNrRGRpjWsF0ic8f4ieBNra5buQz0O/U6mMXCpC1LvrHuhJsNPgRt36tSYMidGzZiJF6mw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.24.4.tgz",
+      "integrity": "sha512-L7VVVW9FCnTTp4i7KrmHeDsDvjB4++KOBENYtNYAiYl96jeBThFfhP6HVxL74v4SiZEVDH/1ILscR5U9S4ms4g==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.4.tgz",
-      "integrity": "sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.4.tgz",
+      "integrity": "sha512-10ICosOwYChROdQoQo589N5idQIisxjaFE/PAnX2i0Zr84mY0k9zul1ArH0rnJ/fpgiqfu13TFZR5A5YJLOYZA==",
       "cpu": [
         "arm"
       ],
@@ -1044,9 +1098,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.4.tgz",
-      "integrity": "sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.4.tgz",
+      "integrity": "sha512-ySAfWs69LYC7QhRDZNKqNhz2UKN8LDfbKSMAEtoEI0jitwfAG2iZwVqGACJT+kfYvvz3/JgsLlcBP+WWoKCLcw==",
       "cpu": [
         "arm"
       ],
@@ -1056,9 +1110,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.4.tgz",
-      "integrity": "sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.4.tgz",
+      "integrity": "sha512-uHYJ0HNOI6pGEeZ/5mgm5arNVTI0nLlmrbdph+pGXpC9tFHFDQmDMOEqkmUObRfosJqpU8RliYoGz06qSdtcjg==",
       "cpu": [
         "arm64"
       ],
@@ -1068,9 +1122,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.4.tgz",
-      "integrity": "sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.4.tgz",
+      "integrity": "sha512-38yiWLemQf7aLHDgTg85fh3hW9stJ0Muk7+s6tIkSUOMmi4Xbv5pH/5Bofnsb6spIwD5FJiR+jg71f0CH5OzoA==",
       "cpu": [
         "arm64"
       ],
@@ -1080,9 +1134,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.4.tgz",
-      "integrity": "sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.4.tgz",
+      "integrity": "sha512-q73XUPnkwt9ZNF2xRS4fvneSuaHw2BXuV5rI4cw0fWYVIWIBeDZX7c7FWhFQPNTnE24172K30I+dViWRVD9TwA==",
       "cpu": [
         "ppc64"
       ],
@@ -1092,9 +1146,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.4.tgz",
-      "integrity": "sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.4.tgz",
+      "integrity": "sha512-Aie/TbmQi6UXokJqDZdmTJuZBCU3QBDA8oTKRGtd4ABi/nHgXICulfg1KI6n9/koDsiDbvHAiQO3YAUNa/7BCw==",
       "cpu": [
         "riscv64"
       ],
@@ -1104,9 +1158,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.4.tgz",
-      "integrity": "sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.4.tgz",
+      "integrity": "sha512-P8MPErVO/y8ohWSP9JY7lLQ8+YMHfTI4bAdtCi3pC2hTeqFJco2jYspzOzTUB8hwUWIIu1xwOrJE11nP+0JFAQ==",
       "cpu": [
         "s390x"
       ],
@@ -1116,9 +1170,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.4.tgz",
-      "integrity": "sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.4.tgz",
+      "integrity": "sha512-K03TljaaoPK5FOyNMZAAEmhlyO49LaE4qCsr0lYHUKyb6QacTNF9pnfPpXnFlFD3TXuFbFbz7tJ51FujUXkXYA==",
       "cpu": [
         "x64"
       ],
@@ -1128,9 +1182,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.4.tgz",
-      "integrity": "sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.4.tgz",
+      "integrity": "sha512-VJYl4xSl/wqG2D5xTYncVWW+26ICV4wubwN9Gs5NrqhJtayikwCXzPL8GDsLnaLU3WwhQ8W02IinYSFJfyo34Q==",
       "cpu": [
         "x64"
       ],
@@ -1140,9 +1194,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.4.tgz",
-      "integrity": "sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.4.tgz",
+      "integrity": "sha512-ku2GvtPwQfCqoPFIJCqZ8o7bJcj+Y54cZSr43hHca6jLwAiCbZdBUOrqE6y29QFajNAzzpIOwsckaTFmN6/8TA==",
       "cpu": [
         "arm64"
       ],
@@ -1152,9 +1206,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.4.tgz",
-      "integrity": "sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.4.tgz",
+      "integrity": "sha512-V3nCe+eTt/W6UYNr/wGvO1fLpHUrnlirlypZfKCT1fG6hWfqhPgQV/K/mRBXBpxc0eKLIF18pIOFVPh0mqHjlg==",
       "cpu": [
         "ia32"
       ],
@@ -1164,9 +1218,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.4.tgz",
-      "integrity": "sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.4.tgz",
+      "integrity": "sha512-LTw1Dfd0mBIEqUVCxbvTE/LLo+9ZxVC9k99v1v4ahg9Aak6FpqOfNu5kRkeTAn0wphoC4JU7No1/rL+bBCEwhg==",
       "cpu": [
         "x64"
       ],
@@ -1433,9 +1487,9 @@
       "integrity": "sha512-dtByW6WiFk5W5Jfgz1VM+YPA21xMXTuSFoLYIDY0L44jDLLflVPtZkYuu3/YxpGcvjzKFBZLU+GyKjR0HOYtyw=="
     },
     "node_modules/@types/estree": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="
     },
     "node_modules/@types/history": {
       "version": "4.7.11",
@@ -1443,12 +1497,24 @@
       "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
       "dev": true
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "dev": true
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.16",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.16.tgz",
+      "integrity": "sha512-HX7Em5NYQAXKW+1T+FiuG27NGwzJfCX3s1GjOa7ujxZa52kjJLOr4FUxT+giF6Tgxv1e+/czV/iTtBw27WTU9g==",
+      "dev": true
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.11",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
@@ -2374,12 +2440,12 @@
       "dev": true
     },
     "node_modules/foreground-child": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
-      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
       "peer": true,
       "dependencies": {
-        "cross-spawn": "^7.0.0",
+        "cross-spawn": "^7.0.6",
         "signal-exit": "^4.0.1"
       },
       "engines": {
@@ -2621,12 +2687,12 @@
       }
     },
     "node_modules/is-reference": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
-      "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
+      "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
       "peer": true,
       "dependencies": {
-        "@types/estree": "*"
+        "@types/estree": "^1.0.6"
       }
     },
     "node_modules/isexe": {
@@ -2649,6 +2715,15 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2736,6 +2811,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -2755,16 +2836,13 @@
     },
     "node_modules/lru-cache": {
       "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
-      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
-      "engines": {
-        "node": "14 || >=16.14"
-      }
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
     },
     "node_modules/magic-string": {
-      "version": "0.30.12",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
-      "integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
       "peer": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0"
@@ -2825,9 +2903,9 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/nanoid": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
-      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "funding": [
         {
           "type": "github",
@@ -3010,9 +3088,9 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
-      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -3211,11 +3289,11 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.4.tgz",
-      "integrity": "sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.4.tgz",
+      "integrity": "sha512-vGorVWIsWfX3xbcyAS+I047kFKapHYivmkaT63Smj77XwvLSJos6M1xGqZnBPFQFBRZDOcG1QnYEIxAvTr/HjA==",
       "dependencies": {
-        "@types/estree": "1.0.5"
+        "@types/estree": "1.0.6"
       },
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -3225,22 +3303,24 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.22.4",
-        "@rollup/rollup-android-arm64": "4.22.4",
-        "@rollup/rollup-darwin-arm64": "4.22.4",
-        "@rollup/rollup-darwin-x64": "4.22.4",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.22.4",
-        "@rollup/rollup-linux-arm-musleabihf": "4.22.4",
-        "@rollup/rollup-linux-arm64-gnu": "4.22.4",
-        "@rollup/rollup-linux-arm64-musl": "4.22.4",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.22.4",
-        "@rollup/rollup-linux-riscv64-gnu": "4.22.4",
-        "@rollup/rollup-linux-s390x-gnu": "4.22.4",
-        "@rollup/rollup-linux-x64-gnu": "4.22.4",
-        "@rollup/rollup-linux-x64-musl": "4.22.4",
-        "@rollup/rollup-win32-arm64-msvc": "4.22.4",
-        "@rollup/rollup-win32-ia32-msvc": "4.22.4",
-        "@rollup/rollup-win32-x64-msvc": "4.22.4",
+        "@rollup/rollup-android-arm-eabi": "4.24.4",
+        "@rollup/rollup-android-arm64": "4.24.4",
+        "@rollup/rollup-darwin-arm64": "4.24.4",
+        "@rollup/rollup-darwin-x64": "4.24.4",
+        "@rollup/rollup-freebsd-arm64": "4.24.4",
+        "@rollup/rollup-freebsd-x64": "4.24.4",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.24.4",
+        "@rollup/rollup-linux-arm-musleabihf": "4.24.4",
+        "@rollup/rollup-linux-arm64-gnu": "4.24.4",
+        "@rollup/rollup-linux-arm64-musl": "4.24.4",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.24.4",
+        "@rollup/rollup-linux-riscv64-gnu": "4.24.4",
+        "@rollup/rollup-linux-s390x-gnu": "4.24.4",
+        "@rollup/rollup-linux-x64-gnu": "4.24.4",
+        "@rollup/rollup-linux-x64-musl": "4.24.4",
+        "@rollup/rollup-win32-arm64-msvc": "4.24.4",
+        "@rollup/rollup-win32-ia32-msvc": "4.24.4",
+        "@rollup/rollup-win32-x64-msvc": "4.24.4",
         "fsevents": "~2.3.2"
       }
     },
@@ -3596,9 +3676,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.6",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz",
-      "integrity": "sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==",
+      "version": "5.4.10",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.10.tgz",
+      "integrity": "sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==",
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
diff --git a/package.json b/package.json
index e8b78b596..8998475e8 100644
--- a/package.json
+++ b/package.json
@@ -12,16 +12,19 @@
     "prettier": "npx prettier . --write"
   },
   "dependencies": {
-    "@abgov/react-components": "5.4.0",
-    "@abgov/web-components": "1.29.0",
+    "@abgov/react-components": "6.2.1",
+    "@abgov/ui-components-common": "1.2.1",
+    "@abgov/web-components": "1.32.1",
     "@faker-js/faker": "^8.3.1",
     "highlight.js": "^11.8.0",
+    "js-cookie": "^3.0.5",
     "octokit": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.13.0"
   },
   "devDependencies": {
+    "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.2.13",
     "@types/react-dom": "^18.2.6",
     "@types/react-router-dom": "^5.3.3",
@@ -33,6 +36,8 @@
     "eslint-plugin-react-refresh": "^0.3.5",
     "prettier": "2.4.1",
     "typescript": "^5.4.2",
-    "vite": "^5.4.6"
+    "vite": "^5.4.6",
+    "lodash": "^4.17.21",
+    "@types/lodash": "^4.17.16"
   }
 }
diff --git a/public/images/text.png b/public/images/text.png
new file mode 100644
index 000000000..eb928309b
Binary files /dev/null and b/public/images/text.png differ
diff --git a/src/App.tsx b/src/App.tsx
index 225523351..a207abd59 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import ReactDOM from "react-dom/client";
 import {
   Route,
@@ -6,63 +6,16 @@ import {
   createBrowserRouter,
   createRoutesFromElements,
 } from "react-router-dom";
-
 import "@abgov/web-components";
 
 import Root from "@routes/root";
-import { useMediaQuery } from "@hooks/useMediaQuery";
-import { DeviceWidthContext } from "@contexts/DeviceWidthContext";
+import { DeviceWidthProvider } from "@contexts/DeviceWidthContext";
 import "./index.css";
 
 // Support
 
 import HomePage from "@routes/home";
 
-// Components
-
-import ComponentsPage from "@routes/components/Components";
-
-import AllComponentsPage from "@routes/components/AllComponents";
-import AccordionPage from "@routes/components/Accordion.tsx";
-import BadgePage from "@routes/components/Badge";
-import BlockPage from "@routes/components/Block";
-import ButtonGroupPage from "@routes/components/ButtonGroup";
-import ButtonPage from "@routes/components/Button";
-import CalloutPage from "@routes/components/Callout";
-import CheckboxPage from "@routes/components/Checkbox";
-import ComponentNotFoundPage from "@routes/not-found/NotFound";
-import ContainerPage from "@routes/components/Container";
-import DatePickerPage from "@routes/components/DatePicker";
-import DetailsPage from "@routes/components/Details";
-import DividerPage from "@routes/components/Divider";
-import DropdownPage from "@routes/components/Dropdown";
-import FileUploaderPage from "@routes/components/FileUploader";
-import FilterChipPage from "@routes/components/FilterChip";
-import FormItemPage from "@routes/components/FormItemPage.tsx";
-import FormStepperPage from "@routes/components/FormStepper";
-import GridPage from "@routes/components/Grid";
-import HeroBannerPage from "@routes/components/HeroBanner";
-import IconsPage from "@routes/components/Icons";
-import IconButtonPage from "@routes/components/IconButton";
-import ListPage from "@routes/components/List";
-import ModalPage from "@routes/components/Modal";
-import NotificationBannerPage from "@routes/components/Notificationbanner";
-import PaginationPage from "@routes/components/Pagination";
-import PopoverPage from "@routes/components/Popover";
-import ProgressIndicatorPage from "@routes/components/ProgressIndicator";
-import RadioPage from "@routes/components/Radio";
-import SkeletonPage from "@routes/components/Skeleton.tsx";
-import SpacerPage from "@routes/components/Spacer";
-import TablePage from "@routes/components/Table";
-import TabsPage from "@routes/components/Tabs.tsx";
-import TooltipPage from "@routes/components/Tooltip";
-import TextFieldPage from "@routes/components/TextField";
-import TextAreaPage from "@routes/components/TextArea";
-import MicrositeHeaderPage from "@routes/components/MicrositeHeader";
-import AppHeaderPage from "@routes/components/AppHeader";
-import AppFooterPage from "@routes/components/AppFooter";
-import SideMenuPage from "@routes/components/SideMenu";
-
 // Design Tokens
 
 import DesignTokensOverviewPage from "@routes/design-tokens/overview/Overview";
@@ -103,88 +56,18 @@ import ErrorMessagesPage from "@routes/content/ErrorMessages";
 import HelperTextPage from "@routes/content/HelperText";
 import UserExperienceGuidelinesPage from "@routes/get-started/UserExperienceGuidelines";
 
-// Patterns Pages
-
-import PatternsLayout from "@routes/patterns/PatternsLayout";
-import LayoutPage from "@routes/patterns/LayoutPage";
-import PatternsOverviewPage from "@routes/patterns/PatternsOverview";
-import SimpleFormPage from "@routes/patterns/SimpleFormPage";
-import StartPage from "@routes/patterns/StartPage";
-import TaskListPage from "@routes/patterns/TaskListPage";
-import QuestionPage from "@routes/patterns/QuestionPage";
-import ReviewPage from "@routes/patterns/ReviewPage";
-import ResultPage from "@routes/patterns/ResultPage";
-
-interface DeviceWidthProviderProps {
-  children: ReactNode;
-}
-
-const DeviceWidthProvider: React.FC<DeviceWidthProviderProps> = ({ children }) => {
-  const isDesktop = useMediaQuery("(min-width: 1232px)");
-  const isMobile = useMediaQuery("(max-width: 623px)");
-
-  return (
-    <DeviceWidthContext.Provider value={{ isDesktop, isMobile }}>
-      {children}
-    </DeviceWidthContext.Provider>
-  );
-};
+import { VersionFromUrlProvider } from "@contexts/VersionFromUrlContext.tsx";
+import { ComponentsRouter, PatternsRouter } from "./versioned-router";
+import ComponentNotFound from "@routes/not-found/NotFound.tsx";
+import { LanguageVersionProvider } from "@contexts/LanguageVersionContext.tsx";
+import DevelopersUpgradePage from "@routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" element={<Root />}>
       <Route path="/" element={<HomePage />} />
-      <Route
-        path="components"
-        element={<ComponentsPage />}
-        errorElement={<ComponentNotFoundPage />}>
-        <Route index element={<AllComponentsPage />} />
-        <Route path="accordion" element={<AccordionPage />} />
-        <Route path="header" element={<AppHeaderPage />} />
-        <Route path="footer" element={<AppFooterPage />} />
-        <Route path="badge" element={<BadgePage />} />
-        <Route path="block" element={<BlockPage />} />
-        <Route path="button" element={<ButtonPage />} />
-        <Route path="button-group" element={<ButtonGroupPage />} />
-        <Route path="callout" element={<CalloutPage />} />
-        <Route path="checkbox" element={<CheckboxPage />} />
-        <Route path="container" element={<ContainerPage />} />
-        <Route path="date-picker" element={<DatePickerPage />} />
-        <Route path="details" element={<DetailsPage />} />
-        <Route path="divider" element={<DividerPage />} />
-        <Route path="dropdown" element={<DropdownPage />} />
-        <Route path="file-uploader" element={<FileUploaderPage />} />
-        <Route path="filter-chip" element={<FilterChipPage />} />
-        <Route path="form-item" element={<FormItemPage />} />
-        <Route path="form-stepper" element={<FormStepperPage />} />
-        <Route path="grid" element={<GridPage />} />
-        <Route path="hero-banner" element={<HeroBannerPage />} />
-        <Route path="icons" element={<IconsPage />} />
-        <Route path="icon-button" element={<IconButtonPage />} />
-        <Route path="input" element={<TextFieldPage />} />
-        <Route path="list" element={<ListPage />} />
-        <Route path="microsite-header" element={<MicrositeHeaderPage />} />
-        <Route path="modal" element={<ModalPage />} />
-        <Route path="notification-banner" element={<NotificationBannerPage />} />
-        <Route path="pagination" element={<PaginationPage />} />
-        <Route path="popover" element={<PopoverPage />} />
-        <Route path="progress-indicator" element={<ProgressIndicatorPage />} />
-        <Route path="radio" element={<RadioPage />} />
-        <Route path="side-menu" element={<SideMenuPage />} />
-        <Route path="skeleton-loader" element={<SkeletonPage />} />
-        <Route path="spacer" element={<SpacerPage />} />
-        <Route path="table" element={<TablePage />} />
-        <Route path="tabs" element={<TabsPage />} />
-        <Route path="text-area" element={<TextAreaPage />} />
-        <Route path="tooltip" element={<TooltipPage />} />
-        <Route path="text-field" element={<TextFieldPage />} />
-        <Route path="*" element={<ComponentNotFoundPage />} />
-      </Route>
-
-      <Route
-        path="design-tokens"
-        element={<DesignTokens />}
-        errorElement={<ComponentNotFoundPage />}>
+      <Route path="/components/*" element={<ComponentsRouter />}></Route>
+      <Route path="design-tokens" element={<DesignTokens />} errorElement={<ComponentNotFound />}>
         <Route index element={<DesignTokensOverviewPage />} />
         <Route path="border-width" element={<BorderWidthPage />} />
         <Route path="border-radius" element={<BorderRadiusPage />} />
@@ -208,6 +91,7 @@ const router = createBrowserRouter(
           <Route path="technologies" element={<DevelopersTechnologiesPage />} />
           <Route path="vscode" element={<DevelopersVSCodePage />} />
           <Route path="bug" element={<BugVerificationPage />} />
+          <Route path="update" element={<DevelopersUpgradePage />} />
         </Route>
         <Route path="qa-testing">
           <Route index element={<QATestingOverviewPage />} />
@@ -233,24 +117,19 @@ const router = createBrowserRouter(
         <Route path="helper-text" element={<HelperTextPage />} />
       </Route>
 
-      <Route path="patterns" element={<PatternsLayout />} errorElement={<ComponentNotFoundPage />}>
-        <Route index element={<PatternsOverviewPage />} />
-        <Route path="simple-form" element={<SimpleFormPage />} />
-        <Route path="layout" element={<LayoutPage />} />
-        <Route path="start-page" element={<StartPage />} />
-        <Route path="task-list-page" element={<TaskListPage />} />
-        <Route path="question-page" element={<QuestionPage />} />
-        <Route path="review-page" element={<ReviewPage />} />
-        <Route path="result-page" element={<ResultPage />} />
-      </Route>
+      <Route path="/patterns/*" element={<PatternsRouter />}></Route>
     </Route>
   )
 );
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <DeviceWidthProvider>
-      <RouterProvider router={router} />
-    </DeviceWidthProvider>
+    <LanguageVersionProvider>
+      <VersionFromUrlProvider>
+        <DeviceWidthProvider>
+          <RouterProvider router={router} />
+        </DeviceWidthProvider>
+      </VersionFromUrlProvider>
+    </LanguageVersionProvider>
   </React.StrictMode>
 );
diff --git a/src/components/code-snippet/CodeSnippet.tsx b/src/components/code-snippet/CodeSnippet.tsx
index 8d8fcd895..395e46067 100644
--- a/src/components/code-snippet/CodeSnippet.tsx
+++ b/src/components/code-snippet/CodeSnippet.tsx
@@ -1,7 +1,7 @@
-import { FC, ReactElement, ReactNode, useEffect, useRef, useState } from "react";
+import { FC, ReactElement, ReactNode, useContext, useEffect, useRef, useState } from "react";
 
 import "./CodeSnippet.css";
-import { GoAButton, GoAIconButton, GoATooltip } from "@abgov/react-components";
+import { GoabButton, GoabIconButton, GoabTooltip } from "@abgov/react-components";
 import { renderToString } from "react-dom/server";
 
 import hljs from "highlight.js/lib/core";
@@ -10,6 +10,7 @@ import html from "highlight.js/lib/languages/xml";
 import css from "highlight.js/lib/languages/css";
 
 import "highlight.js/styles/github.css";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
 
 type Language = "typescript" | "javascript" | "tsx" | "jsx" | "html" | "css" | string;
 
@@ -23,7 +24,8 @@ interface Props {
   tags?: string[] | string;
 }
 
-export const CodeSnippet: FC<Props> = ({ lang, allowCopy, code, children }) => {
+export const CodeSnippet: FC<Props> = ({ lang, allowCopy, code, children, tags }) => {
+  const {language} = useContext(LanguageVersionContext);
   const [output, setOutput] = useState<string>("");
   const [isCopied, setIsCopied] = useState(false);
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
@@ -39,7 +41,7 @@ export const CodeSnippet: FC<Props> = ({ lang, allowCopy, code, children }) => {
     });
     resizeObserver.observe(codeSnippetRef.current);
     return () => resizeObserver.disconnect(); // clean up
-  }, []);
+  }, [language]);
 
   const cleanTabs = (code = "", tabSize: number): string => {
     const lines = code.trim().split("\n");
@@ -105,33 +107,37 @@ export const CodeSnippet: FC<Props> = ({ lang, allowCopy, code, children }) => {
   }
 
   return (
-    <div
-      ref={codeSnippetRef}
-      className={`goa-code-snippet ${showMore ? "overflow" : ""}`}
-      style={isExpanded ? { maxHeight: "none" } : {}}>
+    (tags == null || tags?.includes(language)) && (
+      <div
+        ref={codeSnippetRef}
+        className={`goa-code-snippet ${showMore ? "overflow" : ""}`}
+        style={isExpanded ? { maxHeight: "none" } : {}}
+      >
       <pre>
         <code className={`highlight-${lang}`}>{output}</code>
       </pre>
-      {showMore && !isExpanded && <div className={"gradient"}></div>}
-      {showMore && (
-        <div className={"goa-code-snippet-actions--show-more"}>
-          <GoAButton
-            type="tertiary"
-            size="compact"
-            trailingIcon={isExpanded ? "chevron-up" : "chevron-down"}
-            onClick={() => setIsExpanded(!isExpanded)}>
-            Show {isExpanded ? "less" : "more"}
-          </GoAButton>
-        </div>
-      )}
-
-      {allowCopy && (
-        <div className="goa-code-snippet-actions--copy">
-          <GoATooltip content={isCopied ? `Copied` : `Copy?`} position="left">
-            <GoAIconButton icon="copy" onClick={copyCode}/>
-          </GoATooltip>
-        </div>
-      )}
-    </div>
+        {showMore && !isExpanded && <div className={"gradient"}></div>}
+        {showMore && (
+          <div className={"goa-code-snippet-actions--show-more"}>
+            <GoabButton
+              type="tertiary"
+              size="compact"
+              trailingIcon={isExpanded ? "chevron-up" : "chevron-down"}
+              onClick={() => setIsExpanded(!isExpanded)}
+            >
+              Show {isExpanded ? "less" : "more"}
+            </GoabButton>
+          </div>
+        )}
+
+        {allowCopy && (
+          <div className="goa-code-snippet-actions--copy">
+            <GoabTooltip content={isCopied ? `Copied` : `Copy?`} position="left">
+              <GoabIconButton icon="copy" onClick={copyCode} />
+            </GoabTooltip>
+          </div>
+        )}
+      </div>
+    )
   );
 };
diff --git a/src/components/component-header/ComponentHeader.tsx b/src/components/component-header/ComponentHeader.tsx
index 14e700bc8..0dd5c8f95 100644
--- a/src/components/component-header/ComponentHeader.tsx
+++ b/src/components/component-header/ComponentHeader.tsx
@@ -1,4 +1,4 @@
-import { GoABadge } from "@abgov/react-components";
+import { GoabBadge } from "@abgov/react-components";
 import "./ComponentHeader.css";
 import { Link } from "react-router-dom";
 
@@ -21,7 +21,7 @@ export enum Category {
 export const ComponentHeader: React.FC<Props> = (props: Props) => {
   return (
     <div className="component-header">
-      <GoABadge type="information" content={props.category} />
+      <GoabBadge type="information" content={props.category} />
       <h1>{props.name}</h1>
       <h2 id="component" className="hidden" aria-hidden="true">Component</h2>
       <h3 dangerouslySetInnerHTML={{__html: props.description || ''}}></h3>
diff --git a/src/components/component-properties/ComponentProperties.tsx b/src/components/component-properties/ComponentProperties.tsx
index 14357d5af..6d129939d 100644
--- a/src/components/component-properties/ComponentProperties.tsx
+++ b/src/components/component-properties/ComponentProperties.tsx
@@ -1,9 +1,8 @@
-import { GoAAccordion, GoABadge } from "@abgov/react-components";
+import { GoabAccordion, GoabBadge } from "@abgov/react-components";
 import { useContext, useEffect, useState } from "react";
-import { LanguageContext } from "@components/sandbox";
 
 import css from "./ComponentProperties.module.css";
-
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
 export type ComponentProperty = {
   name: string;
   type?: string | string[];
@@ -15,23 +14,29 @@ export type ComponentProperty = {
 
 interface Props {
   properties: ComponentProperty[];
+  oldProperties?: ComponentProperty[];
   heading?: string;
 }
 
 export const ComponentProperties = (props: Props) => {
-  const lang = useContext(LanguageContext);
+  const {language, version} = useContext(LanguageVersionContext);
+
   const [filteredProperties, setFilteredProperties] = useState<ComponentProperty[]>([]);
 
   const filterBy = (properties: ComponentProperty[]) => {
     const result = properties.filter((child: ComponentProperty) => {
-      return !child.lang || child.lang === lang;
+      return !child.lang || child.lang === language;
     });
     return result;
   };
 
   useEffect(() => {
+    if (version === "old") {
+      setFilteredProperties([...filterBy(props.oldProperties || props.properties)]); // If no old properties are provided, use the current properties
+      return;
+    }
     setFilteredProperties([...filterBy(props.properties)]);
-  }, [lang]);
+  }, [language, version]);
 
   function dasherize(str: string): string {
     return str.replace(" ", "-").toLowerCase();
@@ -46,13 +51,14 @@ export const ComponentProperties = (props: Props) => {
       >
         {props.heading || "Properties"}
       </h3>
-      <GoAAccordion heading={props.heading || "Properties"} mt="l" mb="none">
+      <GoabAccordion heading={props.heading || "Properties"} mt="l" mb="none">
         <div>
           {filteredProperties.map((props, index) => (
+
             <ComponentProperty key={index} props={props} />
           ))}
         </div>
-      </GoAAccordion>
+      </GoabAccordion>
     </>
   );
 };
@@ -67,7 +73,7 @@ function ComponentProperty({ props }: ComponentPropertyProps) {
       <div className={css.details}>
         <code className={`${css.code} ${css.name}`}>{props.name}</code>
 
-        {props.required && <GoABadge type="important" content="Required" />}
+        {props.required && <GoabBadge type="important" content="Required" />}
 
         {props.type && (
           <code className={`${css.code} ${css.type}`}>
diff --git a/src/components/component-properties/common-properties.ts b/src/components/component-properties/common-properties.ts
new file mode 100644
index 000000000..30e85f774
--- /dev/null
+++ b/src/components/component-properties/common-properties.ts
@@ -0,0 +1,31 @@
+import { ComponentProperty } from "@components/component-properties/ComponentProperties.tsx";
+
+export const LegacyMarginProperty: ComponentProperty =  {
+  name: "mt,mr,mb,ml",
+  type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
+  description: "Apply margin to the top, right, bottom, and/or left of the component.",
+};
+export const MarginProperty: ComponentProperty =  {
+  name: "mt,mr,mb,ml",
+  type: "Spacing (none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl)",
+  description: "Apply margin to the top, right, bottom, and/or left of the component.",
+};
+export const TestIdProperty: ComponentProperty = {
+  name: "testId",
+    type: "string",
+  description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+};
+export const LegacyTestIdProperties: ComponentProperty[] = [
+  {
+    name: "testId",
+    type: "string",
+    lang: "react",
+    description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+  },
+  {
+    name: "testid",
+    type: "string",
+    lang: "angular",
+    description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+  },
+]
diff --git a/src/components/do-dont/DoDont.tsx b/src/components/do-dont/DoDont.tsx
index 82104499e..1cf19e3e6 100644
--- a/src/components/do-dont/DoDont.tsx
+++ b/src/components/do-dont/DoDont.tsx
@@ -1,4 +1,4 @@
-import { GoAIcon } from "@abgov/react-components";
+import { GoabIcon } from "@abgov/react-components";
 import "./DoDont.css";
 import { ReactNode } from "react";
 
@@ -15,7 +15,7 @@ export function DoDont({ type, children, description }: Props) {
       <div className="do-container">{children}</div>
       {(type === "do" || type === "dont") && (
         <div className="do-content" data-positive={type}>
-          {type === "do" ? <GoAIcon type="checkmark-circle" /> : <GoAIcon type="close-circle" />}
+          {type === "do" ? <GoabIcon type="checkmark-circle" /> : <GoabIcon type="close-circle" />}
           <div className="content-label">{type === "do" ? "Do" : "Dont"}</div>
         </div>
       )}
diff --git a/src/components/icon-snippet/IconSnippet.tsx b/src/components/icon-snippet/IconSnippet.tsx
index 56ba19015..bcb27bfe7 100644
--- a/src/components/icon-snippet/IconSnippet.tsx
+++ b/src/components/icon-snippet/IconSnippet.tsx
@@ -1,9 +1,10 @@
 import { FC, useState } from "react";
-import { GoAIcon, GoAIconType } from "@abgov/react-components";
+import { GoabIcon } from "@abgov/react-components";
 import "./IconSnippet.css";
+import { GoabIconType } from "@abgov/ui-components-common";
 
 interface Props {
-  type: GoAIconType;
+  type: GoabIconType;
 }
 
 export const IconSnippet: FC<Props> = ({ type }) => {
@@ -19,7 +20,7 @@ export const IconSnippet: FC<Props> = ({ type }) => {
   return (
     <>
       <div className="icon-snippet" role="button" onClick={copyIcon}>
-        <GoAIcon type={type} />
+        <GoabIcon type={type} />
         <span>{type}</span>
         <div
           className="copy-feedback"
diff --git a/src/components/inline-code/InlineCode.tsx b/src/components/inline-code/InlineCode.tsx
new file mode 100644
index 000000000..c4d2a530a
--- /dev/null
+++ b/src/components/inline-code/InlineCode.tsx
@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import React from "react";
+
+interface InlineCodeProps {
+  children: ReactNode;
+}
+
+export const InlineCode: React.FC<InlineCodeProps> = ({ children }) => {
+  return <code className="inline">{children}</code>;
+};
diff --git a/src/components/mock-modal/Modal.tsx b/src/components/mock-modal/Modal.tsx
index 1f2e1a5dd..ae65f9ce5 100644
--- a/src/components/mock-modal/Modal.tsx
+++ b/src/components/mock-modal/Modal.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import css from "./Modal.module.css";
-import { GoAIcon, GoAIconType } from "@abgov/react-components";
+import { GoabIcon } from "@abgov/react-components";
+import { GoabIconType } from "@abgov/ui-components-common";
 
 type Variant = "information" | "important" | "emergency" | "success" | "event";
 
@@ -10,12 +11,12 @@ interface Props {
   children: ReactNode;
 }
 
-export function GoAModal({ heading, calloutVariant, children }: Props) {
+export function GoabModal({ heading, calloutVariant, children }: Props) {
   return (
     <div className={css.modal}>
       {calloutVariant && (
         <div className={`${css.variant} ${css[calloutVariant]}`}>
-          <GoAIcon type={`${calloutVariant}-circle` as GoAIconType} />
+          <GoabIcon type={`${calloutVariant}-circle` as GoabIconType} />
         </div>
       )}
       <div className={css.content}>
@@ -26,4 +27,4 @@ export function GoAModal({ heading, calloutVariant, children }: Props) {
   );
 }
 
-export default GoAModal;
+export default GoabModal;
diff --git a/src/components/sandbox/AngularReactiveSerializer.ts b/src/components/sandbox/AngularReactiveSerializer.ts
index 049a11b98..ab3bb5c0c 100644
--- a/src/components/sandbox/AngularReactiveSerializer.ts
+++ b/src/components/sandbox/AngularReactiveSerializer.ts
@@ -1,24 +1,25 @@
 import { ComponentBinding } from "./ComponentBinding";
 import { BaseSerializer, Serializer, SerializerState } from "./BaseSerializer";
+import { LanguageVersion } from "@components/version-language-switcher/version-language-constants.ts";
 
 const ReactiveComponents = [
-  "goa-input",
-  "goa-textarea",
-  "goa-dropdown",
-  "goa-checkbox",
-  "goa-radio-group",
-  "goa-date-picker",
+  "goab-input",
+  "goab-textarea",
+  "goab-dropdown",
+  "goab-checkbox",
+  "goab-radio-group",
+  "goab-date-picker",
 ];
 
 export class AngularReactiveSerializer extends BaseSerializer implements Serializer {
   public isRoot = false;
   private nativeEls =
-    "div span p br header footer blockquote input textarea a button h2 h2 h3 h4 img label ul li ol hr section dt dl dd".split(
+    "div form span p br header footer blockquote input textarea a button h2 h2 h3 h4 h5 h6 img label ul li ol hr section dt dl dd strong".split(
       " "
     );
 
-  constructor(properties: ComponentBinding[]) {
-    super(properties);
+  constructor(properties: ComponentBinding[], version: LanguageVersion) {
+    super(properties, version);
   }
 
   setIsRoot(isRoot: boolean) {
@@ -38,6 +39,10 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali
       return "";
     }
 
+    if (this.version === "new" && name === "onClick") {
+      return `(${name})="${name}()"`;
+    }
+
     let _name = name.replace(/^on/, "");
     _name = _name.substring(0, 1).toLowerCase() + _name.substring(1);
 
@@ -45,7 +50,7 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali
   }
 
   stringToProp(name: string, item: string): string {
-    if (ReactiveComponents.includes(this.state.element) && name === "value") {
+    if (ReactiveComponents.includes(this.state.element) && name === "value" && this.version === "old") {
       return `goaValue`;
     }
     if (this.isDynamic(name)) {
@@ -53,7 +58,8 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali
     }
     if (item === "") return "";
     if (name === "className") name = "class";
-    return `${name.toLowerCase()}="${item}"`;
+
+    return `${this.version === "old" ? name.toLowerCase() : name}="${item}"`;
   }
 
   dateToProp(name: string, item: Date): string {
@@ -64,18 +70,18 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali
     if (this.isDynamic(name)) {
       return this.#dynamicProp(name);
     }
-    return `${name.toLowerCase()}="${item}"`;
+    return `${this.version === "old" ? name.toLowerCase() : `[${name}]`}="${item}"`;
   }
 
   booleanToProp(propName: string, propValue: boolean): string {
-    if (ReactiveComponents.includes(this.state.element) && propName === "checked") {
+    if (this.version === "old" && ReactiveComponents.includes(this.state.element) && propName === "checked") {
       return `goaChecked`;
     }
     if (this.isDynamic(propName)) {
       return this.#dynamicProp(propName);
     }
     if (!propValue) return "";
-    return `${propName.toLowerCase()}="${propValue}"`;
+    return this.version === "old" ? `${propName.toLowerCase()}="${propValue}"` : `[${propName.toLowerCase()}]="${propValue}"`;
   }
 
   funcToProp(name: string, _item: Object): string {
@@ -93,9 +99,15 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali
     if (this.nativeEls.includes(name)) {
       return name;
     }
-    const prefix = "GoA";
-    const tail = name.replace(prefix, "");
-    return `${prefix.toLowerCase()}-${this.dasherize(tail)}`;
+    const currentPrefix = "Goab";
+    const oldPrefix = "goa";
+    const tail = name.replace(currentPrefix, "");
+
+    if (this.version === "old") {
+      return `${oldPrefix}-${this.dasherize(tail)}`;
+    }
+
+    return `${currentPrefix.toLowerCase()}-${this.dasherize(tail)}`;
   }
 
   componentToString(name: string): string {
@@ -103,30 +115,55 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali
     return `<${name} />`;
   }
 
-  addReactiveProperties(props: string, propName: string): string {
-    const additionalProps = `[formControl]="${propName}FormCtrl" [value]="${propName}FormCtrl.value"`;
-    props = props ? `${props} ${additionalProps}` : additionalProps;
-    return props;
-  }
-
   modifyProps(props: string, propName: string, elementType: string): string {
     if (ReactiveComponents.includes(elementType)) {
-      const additionalProps = `[formControl]="${propName}FormCtrl" [value]="${propName}FormCtrl.value"`;
+      const additionalProps =
+        this.version === "old"
+          ? `[formControl]="${propName}FormCtrl" [value]="${propName}FormCtrl.value"`
+          : `formControlName="${propName}"`;
       props = props ? `${props} ${additionalProps}` : additionalProps;
     }
     return props;
   }
 
   postProcess(children: string): string {
-    if (children.startsWith("<goa-checkbox")) {
-      if (children.includes("goaChecked") && children.includes("goaValue")) {
-        children = children.replace(/\bgoaValue\b\s?/g, "");
-      }
+    // New version, reactive form will include [formGroup]
+    if (this.version === "new" && children.includes("<form") && !children.includes("[formGroup]=")) {
+      children = children.replace(/<form/g, '<form [formGroup]="form"');
+    }
+    if (this.version === "new" && children.startsWith("<goab-form-item")) {
+      children = children.replace(
+        /<goab-form-item(?![^>]*\[formGroup\]="form")/g,
+        '<goab-form-item [formGroup]="form"'
+      );
+    }
 
-      if (children.includes("disabled=true")) {
-        children = children
-          .replace(/disabled=true/g, '[attr.disabled]="true"')
-          .replace(/\bgoaValue\b\s?/g, "");
+    if (this.version === "new" && children.includes(`[value]="value"`)) {
+      children = children.replace(`[value]="value"`, "");
+    }
+
+    if (this.version === "new") {
+      children = children.replace(/<goab-radio-group([^>]*)>/g, (match, attrs) => {
+        if (attrs.includes('formControlName')) {
+          // Remove the value attribute (with any numeric value)
+          const newAttrs = attrs.replace(/ ?value="\d+"/, '');
+          return `<goab-radio-group${newAttrs}>`;
+        }
+        return match;
+      });
+    }
+
+    if (children.startsWith("<goa-checkbox")) {
+      if (this.version === "old") {
+        if (children.includes("goaChecked") && children.includes("goaValue")) {
+          children = children.replace(/\bgoaValue\b\s?/g, "");
+        }
+
+        if (children.includes("disabled=true")) {
+          children = children
+            .replace(/disabled=true/g, '[attr.disabled]="true"')
+            .replace(/\bgoaValue\b\s?/g, "");
+        }
       }
     }
     return children;
diff --git a/src/components/sandbox/AngularSerializer.ts b/src/components/sandbox/AngularSerializer.ts
index 3da605b13..96f837288 100644
--- a/src/components/sandbox/AngularSerializer.ts
+++ b/src/components/sandbox/AngularSerializer.ts
@@ -1,15 +1,17 @@
 import { ComponentBinding } from "./ComponentBinding";
 import { BaseSerializer, Serializer, SerializerState } from "./BaseSerializer";
+import { LanguageVersion } from "@components/version-language-switcher/version-language-constants.ts";
 
 export class AngularSerializer extends BaseSerializer implements Serializer {
   public isRoot = false;
   private nativeEls =
-    "table th thead tbody tr td div span p br header footer blockquote input textarea a button h1 h2 h3 h4 img label ul li ol hr section dl dt dd strong u".split(
+    "table form th thead tbody tr td div span p br header footer blockquote input textarea a button h1 h2 h3 h4 h5 h6 img label ul li ol hr section dl dt dd strong u".split(
       " "
     );
 
-  constructor(properties: ComponentBinding[]) {
-    super(properties);
+  constructor(properties: ComponentBinding[], version: LanguageVersion, protected variableNames: string[]) {
+    super(properties, version);
+
   }
 
   setIsRoot(isRoot: boolean) {
@@ -25,21 +27,30 @@ export class AngularSerializer extends BaseSerializer implements Serializer {
   }
 
   #toFunc(name: string): string {
-    let _name = name.replace(/^on/, "");
-    _name = _name.substring(0, 1).toLowerCase() + _name.substring(1);
+    if (this.version === "old") {
+      let _name = name.replace(/^on/, "");
+      _name = _name.substring(0, 1).toLowerCase() + _name.substring(1);
+      return `(_${_name})="${name}($event)"`;
+    }
+
+
+    if (name === "onClick" || name === "onClose") {
+      return `(${name})="${name}()"`;
+    }
 
-    return `(_${_name})="${name}($event)"`;
+    // New version has onChange with event strict to different type, so we must have different names to handle that
+    // camel case componentName above for me
+    return `(${name})="${this.getNewVersionFunctionName(name)}($event)"`;
   }
 
   stringToProp(name: string, item: string): string {
     if (this.isDynamic(name)) {
       return this.#dynamicProp(name);
     }
-
     if (name === "value" && item === "") return `value=""`;
     if (item === "") return "";
     if (name === "className") name = "class";
-    return `${name.toLowerCase()}="${item}"`;
+    return `${this.version === "old" ? name.toLowerCase() : name}="${item}"`;
   }
 
   dateToProp(name: string, item: Date): string {
@@ -50,15 +61,18 @@ export class AngularSerializer extends BaseSerializer implements Serializer {
     if (this.isDynamic(name)) {
       return this.#dynamicProp(name);
     }
-    return `${name.toLowerCase()}="${item}"`;
+    return `${this.version === "old" ? name.toLowerCase() : `[${name}]`}="${item}"`;
   }
 
   booleanToProp(name: string, item: boolean): string {
     if (this.isDynamic(name)) {
       return this.#dynamicProp(name);
     }
+    if (this.variableNames.includes(name)) {
+      return `[${name}]="${name}"`;
+    }
     if (!item) return "";
-    return `${name.toLowerCase()}="${item}"`;
+    return `${this.version === "old" ? name.toLowerCase() : `[${name}]`}="${item}"`;
   }
 
   funcToProp(name: string, _item: Object): string {
@@ -69,16 +83,18 @@ export class AngularSerializer extends BaseSerializer implements Serializer {
     if (this.isDynamic(name)) {
       return this.#dynamicProp(name);
     }
-    return delimit ? `${name.toLowerCase()}=[${items}]` : `${name.toLowerCase()}=${items}`;
+    return delimit ? `${this.version === "old" ? name.toLowerCase() : name}=[${items}]` : `${this.version === "old" ? name.toLowerCase(): name}=${items}`;
   }
 
   componentNameToString(name: string): string {
     if (this.nativeEls.includes(name)) {
       return name;
     }
-    const prefix = "GoA";
-    const tail = name.replace(prefix, "");
-    return `${prefix.toLowerCase()}-${this.dasherize(tail)}`;
+    let tail = name.replace("Goab", "");
+    if (tail === "OneColumnLayout" && this.version === "new") {
+      tail = "ColumnLayout";
+    }
+    return `${this.version === "old" ? "goa" : "goab"}-${this.dasherize(tail)}`;
   }
 
   componentToString(name: string): string {
diff --git a/src/components/sandbox/AngularTemplateDrivenSerializer.ts b/src/components/sandbox/AngularTemplateDrivenSerializer.ts
new file mode 100644
index 000000000..4c0a836af
--- /dev/null
+++ b/src/components/sandbox/AngularTemplateDrivenSerializer.ts
@@ -0,0 +1,25 @@
+import { AngularSerializer } from "@components/sandbox/AngularSerializer.ts";
+
+const TemplateDrivenComponents = [
+  "goab-input",
+  "goab-textarea",
+  "goab-dropdown",
+  "goab-checkbox",
+  "goab-radio-group",
+  "goab-date-picker",
+];
+
+export class AngularTemplateDrivenSerializer extends AngularSerializer {
+  modifyProps(props: string, propName: string, elementType: string): string {
+    if (TemplateDrivenComponents.includes(elementType)) {
+      const additionalProps = `[(ngModel)]="${propName}"`;
+      props = props ? `${props} ${additionalProps}` : additionalProps;
+      if (props.match(/value="[^"]*"|\[value\]="[^"]*"/)) {
+        props = props.replace(/value="[^"]*"|\[value\]="[^"]*"/, "");
+      }
+      return props;
+    }
+
+    return super.modifyProps(props, propName, elementType);
+  }
+}
diff --git a/src/components/sandbox/BaseSerializer.ts b/src/components/sandbox/BaseSerializer.ts
index a847380cb..ba9ad9761 100644
--- a/src/components/sandbox/BaseSerializer.ts
+++ b/src/components/sandbox/BaseSerializer.ts
@@ -1,4 +1,5 @@
 import { ComponentBinding } from "./ComponentBinding";
+import { LanguageVersion } from "@components/version-language-switcher/version-language-constants.ts";
 
 export interface Serializer {
   stringToProp: (name: string, item: string) => string;
@@ -21,14 +22,26 @@ export interface SerializerState {
   props: { name: string };
 }
 
-export function propsToString(props: Record<string, string|number>, lang: "angular" | "react"): string {
+export function propsToString(props: Record<string, string|number>, lang: "angular" | "react", version: LanguageVersion): string {
   if (lang === "angular") {
-    return Object.entries(props)
-      .map(e => `${e[0].toLowerCase()}="${e[1]}"`)
-      .join(" ");
+    if (version === "old") {
+      return Object.entries(props).filter(e => e[1] !== '' && e[1] != undefined)
+        .map((e) => {
+          return typeof e[1] === 'number' || typeof e[1] === 'boolean' ? `${e[0].toLowerCase()}="${e[1]}"` : `${e[0].toLowerCase()}="${e[1]}"`
+        })
+        .join(" ");
+    } else {
+      return Object.entries(props).filter(e => e[1] !== '' && e[1] != undefined)
+        .map((e) => {
+          return typeof e[1] === 'number' || typeof e[1] === 'boolean' ?  `[${e[0]}]="${e[1]}"` : `${e[0]}="${e[1]}"`
+        })
+        .join(" ");
+    }
   }
-  return Object.entries(props)
-    .map(e => `${e[0]}="${e[1]}"`)
+  return Object.entries(props).filter(e => e[1] !== '' && e[1] != undefined)
+    .map((e) => {
+      return typeof e[1] === 'number' || typeof e[1] === 'boolean' ?  `${e[0]}={${e[1]}}` : `${e[0]}="${e[1]}"`
+    })
     .join(" ");
 }
 
@@ -36,7 +49,7 @@ export class BaseSerializer {
   protected isRoot = false;
   protected state: SerializerState = { element: "", props: { name: "" } };
 
-  constructor(protected properties: ComponentBinding[]) {}
+  constructor(protected properties: ComponentBinding[], protected version: LanguageVersion) {}
 
   getProperty(name: string): ComponentBinding | undefined {
     return this.properties.find(p => p.name === name);
@@ -68,4 +81,21 @@ export class BaseSerializer {
   }
 
 
+  protected getNewVersionFunctionName(functionName: string): string {
+    let element = this.state.element || 'goab-';
+    let componentName = '';
+    if (element.includes('-')) {
+      const parts = element.split('-');
+      componentName = parts[1] || '';
+    } else if (element.toLowerCase().startsWith('goab')) {
+      componentName = element.substring(4);
+      if (componentName.length > 0) {
+        componentName = componentName[0].toLowerCase() + componentName.slice(1);
+      }
+    }
+    // So onChange for GoabInput will be: inputOnChange, onChange for Dropdown will be dropdownOnChange
+    // The event passed on onChange.. now is strict with type of Event, so we must handle it
+    functionName = functionName[0].toUpperCase() + functionName.slice(1);
+    return `${componentName}${functionName}`;
+  }
 }
diff --git a/src/components/sandbox/ComponentBinding.ts b/src/components/sandbox/ComponentBinding.ts
index 7a941c336..201dd9c30 100644
--- a/src/components/sandbox/ComponentBinding.ts
+++ b/src/components/sandbox/ComponentBinding.ts
@@ -31,6 +31,8 @@ export interface BooleanBinding extends BaseBinding {
 export interface NumberBinding extends BaseBinding {
   type: "number";
   value?: number;
+  step?: number;
+  width?: string;
 }
 
 export interface StringBinding extends BaseBinding {
@@ -69,5 +71,5 @@ export interface RadioBinding extends BaseBinding {
 
 export interface DateBinding extends BaseBinding {
   type: "date",
-  value?: Date;
+  value?: Date|string;
 }
diff --git a/src/components/sandbox/ComponentSerializer.ts b/src/components/sandbox/ComponentSerializer.ts
index eed6297a8..aa1494803 100644
--- a/src/components/sandbox/ComponentSerializer.ts
+++ b/src/components/sandbox/ComponentSerializer.ts
@@ -92,8 +92,18 @@ export class ComponentSerializer {
       props = " " + props;
     }
 
+      // Define void elements (HTML elements that should be self-closing)
+  const voidElements = [
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img',
+    'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'
+  ];
+
+
     if (!component.props.children) {
-      return `<${elementType}${props}></${elementType}>`;
+       if (voidElements.includes(elementType.toLowerCase())) {
+        return `<${elementType}${props} />`;
+    }
+    return `<${elementType}${props}></${elementType}>`;
     }
 
     let children: string = "";
diff --git a/src/components/sandbox/ReactSerializer.ts b/src/components/sandbox/ReactSerializer.ts
index a9f279981..d2495ab29 100644
--- a/src/components/sandbox/ReactSerializer.ts
+++ b/src/components/sandbox/ReactSerializer.ts
@@ -1,17 +1,22 @@
 import { ComponentBinding } from "./ComponentBinding";
-import { BaseSerializer, Serializer } from "./BaseSerializer";
+import { BaseSerializer, Serializer, SerializerState } from "./BaseSerializer";
+import { LanguageVersion } from "@components/version-language-switcher/version-language-constants.ts";
 
 export class ReactSerializer extends BaseSerializer implements Serializer {
   public isRoot = false;
 
-  constructor(properties: ComponentBinding[]) {
-    super(properties);
+  constructor(properties: ComponentBinding[], version: LanguageVersion, protected variableNames: string[]) {
+    super(properties, version);
   }
 
   setIsRoot(isRoot: boolean) {
     this.isRoot = isRoot;
   }
 
+  setState(state: SerializerState) {
+    super.setState(state);
+  }
+
   getProperty(name: string): ComponentBinding | undefined {
     return this.properties.find(p => p.name === name);
   }
@@ -24,6 +29,10 @@ export class ReactSerializer extends BaseSerializer implements Serializer {
     if (this.isDynamic(name)) {
       return this.dynamicProp(name);
     }
+    if (this.variableNames.includes(name)) {
+      return `${name}={${name}}`;
+    }
+
     if (name === "value" && value === "") return `value=""`;
 
     if (value === "") return "";
@@ -34,6 +43,9 @@ export class ReactSerializer extends BaseSerializer implements Serializer {
     if (this.isDynamic(name)) {
       return this.dynamicProp(name);
     }
+    if (this.variableNames.includes(name)) {
+      return `${name}={${name}}`;
+    }
     return `${name}={${value}}`;
   }
 
@@ -41,12 +53,19 @@ export class ReactSerializer extends BaseSerializer implements Serializer {
     if (this.isDynamic(name)) {
       return this.dynamicProp(name);
     }
+    if (this.variableNames.includes(name)) {
+      return `${name}={${name}}`;
+    }
     if (!value) return "";
     return `${name}={${value}}`;
   }
 
   funcToProp(name: string, _callback: Object): string {
-    return `${name}={${name}}`;
+    if (this.version === "old" || name === "onClick") {
+      return `${name}={${name}}`;
+    }
+
+    return `${name}={${this.getNewVersionFunctionName(name)}}`;
   }
 
   dateToProp(name: string, item: Date): string {
@@ -64,6 +83,9 @@ export class ReactSerializer extends BaseSerializer implements Serializer {
   }
 
   componentNameToString(name: string): string {
+    if (this.version === "old") {
+      return name.replace(/^Goab/, "GoA");
+    }
     return name;
   }
 
diff --git a/src/components/sandbox/Sandbox.tsx b/src/components/sandbox/Sandbox.tsx
index a481b759b..4fb227253 100644
--- a/src/components/sandbox/Sandbox.tsx
+++ b/src/components/sandbox/Sandbox.tsx
@@ -3,7 +3,6 @@ import { ReactElement, ReactNode, useContext, useEffect, useState } from "react"
 import SandboxProperties from "./SandboxProperties";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet";
 import { ComponentBinding } from "./ComponentBinding";
-import { LanguageContext } from "./LanguageContext";
 import { ReactSerializer } from "./ReactSerializer";
 import { AngularSerializer } from "./AngularSerializer";
 import { AngularReactiveSerializer } from "./AngularReactiveSerializer";
@@ -11,8 +10,11 @@ import ComponentSerializer from "./ComponentSerializer";
 
 import "./Sandbox.css";
 import React from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { AngularTemplateDrivenSerializer } from "@components/sandbox/AngularTemplateDrivenSerializer.ts";
+import { LanguageVersion } from "@components/version-language-switcher/version-language-constants.ts";
 
-type Flag = "reactive";
+type Flag = "reactive" | "template-driven" | "event";
 type ComponentType = "goa" | "codesnippet";
 type Serializer = (el: any, properties: ComponentBinding[]) => string;
 
@@ -25,36 +27,42 @@ interface SandboxProps {
   onChangeFormItemBindings?: (bindings: ComponentBinding[], props: Record<string, unknown>) => void;
   flags?: Flag[];
   skipRender?: boolean; // prevent rendering the snippet, to allow custom code to be shown
-  allow?: string[];     // Be default the Sandbox is selective to what it renders out. This adds
-                        // additional elements to what is allowed to be rendered out
+  skipRenderOnly?: string; // prevent rendering the snippet for a specific language. Ex: react/angular
+  allow?: string[]; // Be default the Sandbox is selective to what it renders out. This adds
+  // additional elements to what is allowed to be rendered out
+  variableNames?: string[]; // If we want to assign a variable such as step={step} render in code snippet, provides variableNames=["step"]
   children: ReactNode;
 }
 
 type SandboxViewProps = {
   fullWidth?: boolean;
   sandboxProps: SandboxProps;
-}
+};
 
 export const Sandbox = (props: SandboxProps) => {
-
-  const lang = useContext(LanguageContext);
+  const {language: lang, version} = useContext(LanguageVersionContext);
   const [formatLang, setFormatLang] = useState<string>("");
 
   const serializers: Record<string, Serializer> = {
     "react": (els: ReactElement[], properties) => {
-      const serializer = new ComponentSerializer(new ReactSerializer(properties));
+      const serializer = new ComponentSerializer(new ReactSerializer(properties, version, props.variableNames || []));
       return serializer.componentsToString(els);
     },
 
     "angular": (els: ReactElement[], properties) => {
-      const serializer = new ComponentSerializer(new AngularSerializer(properties));
+      const serializer = new ComponentSerializer(new AngularSerializer(properties, version, props.variableNames || []));
       return serializer.componentsToString(els);
     },
 
     "angular-reactive": (els: ReactElement[], properties) => {
-      const serializer = new ComponentSerializer(new AngularReactiveSerializer(properties));
+      const serializer = new ComponentSerializer(new AngularReactiveSerializer(properties, version));
       return serializer.componentsToString(els);
     },
+
+    "angular-template-driven": (els: ReactElement[], properties) => {
+      const serializer = new ComponentSerializer(new AngularTemplateDrivenSerializer(properties, version, props.variableNames || []));
+      return serializer.componentsToString(els);
+    }
   };
 
   const formatMap: Record<string, string> = {
@@ -111,7 +119,7 @@ export const Sandbox = (props: SandboxProps) => {
       {props.properties && props.properties.length > 0 && (
         <SandboxProperties properties={props.properties} onChange={onChange} />
       )}
-      <SandboxCode props={props} formatLang={formatLang} lang={lang} serializers={serializers} />
+      <SandboxCode props={props} formatLang={formatLang} lang={lang} serializers={serializers} version={version} />
       {props.note && (<div className="sandbox-note">{props.note}</div>)}
     </>
   );
@@ -122,20 +130,54 @@ type SandboxCodeProps = {
   lang: string;
   formatLang: string;
   serializers: Record<string, Serializer>;
+  version?: LanguageVersion;
 }
 function SandboxCode(p: SandboxCodeProps) {
   // reactive angular
   if (p.lang === "angular" && p.props.flags?.includes("reactive")) {
     return (
       <>
-        <h4>Event based</h4>
-        <AdditionalCodeSnippets tags={["angular"]} sandboxProps={p.props} />
-        {!p.props.skipRender && <ComponentOutput formatLang={p.formatLang} type="angular" sandboxProps={p.props} serializer={p.serializers[p.lang]} />}
+        {(p.version === "old" || p.props.flags?.includes("event")) && <>
+          <h4>Event based</h4>
+          <AdditionalCodeSnippets tags={["angular"]} sandboxProps={p.props} />
+          {!p.props.skipRender && p.props?.skipRenderOnly !== p.lang && (
+            <ComponentOutput
+              formatLang={p.formatLang}
+              type="angular"
+              sandboxProps={p.props}
+              serializer={p.serializers[p.lang]}
+            />
+          )}
+        </>}
 
         <h4>Reactive forms (FormControl)</h4>
         <AdditionalCodeSnippets tags={["angular", "reactive"]} sandboxProps={p.props} />
 
-        {!p.props.skipRender && <ComponentOutput formatLang={p.formatLang} type="angular-reactive" sandboxProps={p.props} serializer={p.serializers["angular-reactive"]} />}
+        {!p.props.skipRender && (
+          <ComponentOutput
+            formatLang={p.formatLang}
+            type="angular-reactive"
+            sandboxProps={p.props}
+            serializer={p.serializers["angular-reactive"]}
+          />
+        )}
+
+        {/*If flags have reactive, it means that the possibility we have template-driven as well*/}
+
+        {p.props.flags?.includes("template-driven") && (
+          <>
+            <h4>Template driven (ngModel)</h4>
+            <AdditionalCodeSnippets tags={["angular", "template-driven"]} sandboxProps={p.props} />
+            {!p.props.skipRender && (
+              <ComponentOutput
+                formatLang={p.formatLang}
+                type="angular-template-driven"
+                sandboxProps={p.props}
+                serializer={p.serializers["angular-template-driven"]}
+              />
+            )}
+          </>
+        )}
       </>
     );
   }
@@ -145,7 +187,7 @@ function SandboxCode(p: SandboxCodeProps) {
     return (
       <>
         <AdditionalCodeSnippets tags={["angular"]} sandboxProps={p.props} />
-        {!p.props.skipRender && <ComponentOutput formatLang={p.formatLang} type="angular" sandboxProps={p.props} serializer={p.serializers[p.lang]} />}
+        {!p.props.skipRender && p.props.skipRenderOnly !== "angular" && <ComponentOutput formatLang={p.formatLang} type="angular" sandboxProps={p.props} serializer={p.serializers[p.lang]} />}
       </>
     );
   }
@@ -155,7 +197,7 @@ function SandboxCode(p: SandboxCodeProps) {
     return (
       <>
         <AdditionalCodeSnippets tags={["react"]} sandboxProps={p.props} />
-        {!p.props.skipRender && <ComponentOutput formatLang={p.formatLang} type="react" sandboxProps={p.props} serializer={p.serializers[p.lang]} />}
+        {!p.props.skipRender && p.props.skipRenderOnly !== "react" && <ComponentOutput formatLang={p.formatLang} type="react" sandboxProps={p.props} serializer={p.serializers[p.lang]} />}
       </>
     );
   }
@@ -199,19 +241,18 @@ function ComponentList(props: ComponentListProps): ReactElement[] {
   const isValidGOAComponent = (el: ReactElement) =>
     typeof el.type === "function" && el.type.name.toLowerCase().startsWith(props.type);
   const isAllowedInSandbox = (el: ReactElement) =>
-    typeof el.type === "string" && props.sandboxProps.allow?.includes(el.type) || 
+    typeof el.type === "string" && props.sandboxProps.allow?.includes(el.type) ||
     typeof el.type === "function" && props.sandboxProps.allow?.includes(el.type.name);
   return children.filter(
     el => React.isValidElement(el) && (isValidGOAComponent(el) || isAllowedInSandbox(el))
   );
 }
 
-
 // CodeSnippet output. To show code the root element *must* start with goa (case-insensitive).
 // This allows
 type ComponentOutputProps = {
   formatLang: string;
-  type: "angular" | "angular-reactive" | "react";
+  type: "angular" | "angular-reactive" | "angular-template-driven" | "react";
   sandboxProps: SandboxProps;
   serializer: Serializer;
 }
@@ -232,6 +273,7 @@ function ComponentOutput(props: ComponentOutputProps): ReactElement {
   return (
     <CodeSnippet
       lang={props.formatLang}
+      tags={props.type}
       allowCopy={true}
       code={code}
     />
diff --git a/src/components/sandbox/SandboxProperties.tsx b/src/components/sandbox/SandboxProperties.tsx
index 7cf7c06ec..549f830ac 100644
--- a/src/components/sandbox/SandboxProperties.tsx
+++ b/src/components/sandbox/SandboxProperties.tsx
@@ -1,15 +1,20 @@
 import {
-  GoACheckbox,
-  GoADatePicker,
-  GoADropdown,
-  GoADropdownItem,
-  GoAFormItem,
-  GoAInput,
-  GoARadioGroup,
-  GoARadioItem,
+  GoabCheckbox,
+  GoabDatePicker,
+  GoabDropdown,
+  GoabDropdownItem,
+  GoabFormItem,
+  GoabInput,
+  GoabRadioGroup,
+  GoabRadioItem,
 } from "@abgov/react-components";
 import { ComponentBinding } from "./ComponentBinding";
-import { GoAFormItemRequirement } from "@abgov/react-components";
+import {
+  GoabCheckboxOnChangeDetail, GoabDatePickerOnChangeDetail,
+  GoabDropdownOnChangeDetail,
+  GoabFormItemRequirement,
+  GoabRadioGroupOnChangeDetail
+} from "@abgov/ui-components-common";
 
 interface Props {
   properties?: ComponentBinding[];
@@ -17,24 +22,24 @@ interface Props {
 }
 
 export function SandboxProperties({ properties = [], onChange }: Props) {
-  function onListChange(name: string, value: string | string[]) {
-    const prop = properties.find(p => ["list", "dropdown"].includes(p.type) && p.name === name);
+  function onListChange(event: GoabDropdownOnChangeDetail) {
+    const prop = properties.find(p => ["list", "dropdown"].includes(p.type) && p.name === event.name);
     if (!prop || !["list", "dropdown"].includes(prop.type)) return;
-    prop.value = !value ? "" : typeof value === "string" ? value : value[0];
+    prop.value = !event.value ? "" : event.value;
     onChange([...properties]);
   }
 
-  function onRadioChange(name: string, value: string | string[]) {
-    const prop = properties.find(p => p.type === "radio" && p.name === name);
+  function onRadioChange(event: GoabRadioGroupOnChangeDetail) {
+    const prop = properties.find(p => p.type === "radio" && p.name === event.name);
     if (!prop || prop.type !== "radio") return;
-    prop.value = !value ? "" : typeof value === "string" ? value : value[0];
+    prop.value = !event.value ? "" : event.value;
     onChange([...properties]);
   }
 
-  function onComboboxChange(name: string, value: string | string[]) {
-    const prop = properties.find(p => p.type === "combobox" && p.name === name);
+  function onComboboxChange(event: GoabDropdownOnChangeDetail) {
+    const prop = properties.find(p => p.type === "combobox" && p.name === event.name);
     if (!prop || prop.type !== "combobox") return;
-    prop.value = !value ? "" : typeof value === "string" ? value : value[0];
+    prop.value = !event.value ? "" : event.value;
     onChange([...properties]);
   }
 
@@ -52,17 +57,17 @@ export function SandboxProperties({ properties = [], onChange }: Props) {
     onChange([...properties]);
   }
 
-  function onCheckboxChange(name: string, checked: boolean, _value: string): void {
-    const prop = properties.find(p => p.type === "boolean" && p.name === name);
+  function onCheckboxChange(event: GoabCheckboxOnChangeDetail): void {
+    const prop = properties.find(p => p.type === "boolean" && p.name === event.name);
     if (!prop || prop.type !== "boolean") return;
-    prop.value = checked;
+    prop.value = event.checked;
     onChange([...properties]);
   }
 
-  function onDateChange(name: string, value: Date | undefined): void {
-    const prop = properties.find(p => p.type === "date" && p.name === name);
+  function onDateChange(event: GoabDatePickerOnChangeDetail): void {
+    const prop = properties.find(p => p.type === "date" && p.name === event.name);
     if (!prop || prop.type !== "date") return;
-    prop.value = value;
+    prop.value = event.value;
     onChange([...properties]);
   }
 
@@ -75,19 +80,19 @@ export function SandboxProperties({ properties = [], onChange }: Props) {
       case "list":
       case "dropdown":
         return (
-          <GoADropdown key={p.name} name={p.name} value={p.value} onChange={onListChange}>
+          <GoabDropdown key={p.name} name={p.name} value={p.value} onChange={onListChange}>
             {p.options.map(option => (
-              <GoADropdownItem
+              <GoabDropdownItem
                 value={option || ""}
                 key={option}
                 label={toUpperCase(option) || "-"}
               />
             ))}
-          </GoADropdown>
+          </GoabDropdown>
         );
       case "combobox":
         return (
-          <GoADropdown
+          <GoabDropdown
             key={p.name}
             name={p.name}
             filterable
@@ -96,25 +101,25 @@ export function SandboxProperties({ properties = [], onChange }: Props) {
             onChange={onComboboxChange}
           >
             {p.options.map(option => (
-              <GoADropdownItem
+              <GoabDropdownItem
                 value={option || ""}
                 key={option}
                 label={toUpperCase(option) || "-"}
               />
             ))}
-          </GoADropdown>
+          </GoabDropdown>
         );
       case "radio":
         return (
-          <GoARadioGroup name={p.name} value={p.value} onChange={onRadioChange}>
+          <GoabRadioGroup name={p.name} value={p.value} onChange={onRadioChange}>
             {p.options.map(option => {
-              return <GoARadioItem value={option} label={toUpperCase(option) || "None (default)"} key={option} />;
+              return <GoabRadioItem value={option} label={toUpperCase(option) || "None (default)"} key={option} />;
             })}
-          </GoARadioGroup>
+          </GoabRadioGroup>
         );
       case "boolean":
         return (
-          <GoACheckbox
+          <GoabCheckbox
             name={p.name}
             checked={p.value}
             onChange={onCheckboxChange}
@@ -123,14 +128,14 @@ export function SandboxProperties({ properties = [], onChange }: Props) {
           />
         );
       case "string":
-        return <GoAInput name={p.name} value={p.value} width={p.width} onChange={onTextChange} />;
+        return <GoabInput name={p.name} value={p.value} width={p.width} onChange={(event) => onTextChange(p.name, event.value)} />;
       case "number":
         return (
-          <GoAInput type="number" name={p.name} value={`${p.value}`} onChange={onNumberChange} />
+          <GoabInput step={p.step || 1} type="number" name={p.name} value={`${p.value}`}  width={p.width} onChange={(event) => onNumberChange(p.name, event.value)} />
         );
       case "date":
         return (
-          <GoADatePicker onChange={onDateChange} name={p.name} value={p.value} />
+          <GoabDatePicker onChange={onDateChange} name={p.name} value={p.value as Date|undefined} />
         )
     }
   }
@@ -138,9 +143,9 @@ export function SandboxProperties({ properties = [], onChange }: Props) {
   return (
     <div className="sandbox-container">
       {properties.filter(p => !p.hidden).map(p => (
-        <GoAFormItem key={p.name} label={p.label || ""} requirement={p.requirement as GoAFormItemRequirement || null} helpText={p.helpText}>
+        <GoabFormItem key={p.name} label={p.label || ""} requirement={p.requirement as GoabFormItemRequirement || null} helpText={p.helpText}>
           {renderProps(p)}
-        </GoAFormItem>
+        </GoabFormItem>
       ))}
     </div>
   );
diff --git a/src/components/sandbox/index.ts b/src/components/sandbox/index.ts
index 22a9d61e1..916a72d88 100644
--- a/src/components/sandbox/index.ts
+++ b/src/components/sandbox/index.ts
@@ -2,6 +2,5 @@ export * from "./AngularSerializer";
 export * from "./ReactSerializer";
 export * from "./ComponentBinding";
 export * from "./ComponentSerializer";
-export * from "./LanguageContext";
 export * from "./Sandbox";
 export * from "./SandboxProperties";
diff --git a/src/components/support-info/SupportInfo.tsx b/src/components/support-info/SupportInfo.tsx
index 6c6d7792d..11e66ab78 100644
--- a/src/components/support-info/SupportInfo.tsx
+++ b/src/components/support-info/SupportInfo.tsx
@@ -1,4 +1,4 @@
-import { GoACallout } from "@abgov/react-components";
+import { GoabCallout } from "@abgov/react-components";
 import "./SupportInfo.css";
 
 export const SupportInfo = (props: { hidden?: boolean }) => {
@@ -7,7 +7,7 @@ export const SupportInfo = (props: { hidden?: boolean }) => {
   }
   return (
     <div className="support-info">
-      <GoACallout
+      <GoabCallout
         type="information"
         heading="Need help building a government service?"
       >
@@ -17,7 +17,7 @@ export const SupportInfo = (props: { hidden?: boolean }) => {
         <a href="https://outlook.office365.com/book/BKGDesignsystemdropinhours@abgov.onmicrosoft.com/" target="_blank">
           Book time in drop in hours
         </a>{" "}
-      </GoACallout>
+      </GoabCallout>
     </div>
   );
 };
diff --git a/src/components/token-snippet/TokenSnippet.tsx b/src/components/token-snippet/TokenSnippet.tsx
index fc2ed0e1c..fbcff33c0 100644
--- a/src/components/token-snippet/TokenSnippet.tsx
+++ b/src/components/token-snippet/TokenSnippet.tsx
@@ -1,8 +1,8 @@
 import { FC, useContext, useState } from "react";
 
 import "./TokenSnippet.css";
-import { GoAIcon } from "@abgov/react-components";
-import { DesignTokensLanguageContext } from "@components/sandbox";
+import { GoabIcon } from "@abgov/react-components";
+import { DesignTokensLanguageContext } from "@contexts/DesignTokensLanguageContext";
 
 interface Props {
   code: string;
@@ -29,7 +29,7 @@ export const TokenSnippet: FC<Props> = ({ code }) => {
             {code}
           </u>
           <span style={{ marginTop: "5px", marginLeft: "10px" }}>
-            <GoAIcon type="copy" />
+            <GoabIcon type="copy" />
           </span>
         </a>
       </pre>
diff --git a/src/components/version-language-switcher/VersionLanguageSwitcher.tsx b/src/components/version-language-switcher/VersionLanguageSwitcher.tsx
new file mode 100644
index 000000000..d3b1ce766
--- /dev/null
+++ b/src/components/version-language-switcher/VersionLanguageSwitcher.tsx
@@ -0,0 +1,109 @@
+import {
+  GoabIcon,
+  GoabPopover,
+} from "@abgov/react-components";
+import {
+  ANGULAR_VERSIONS, getVersionedUrlPath, Language, LanguageVersion,
+  VERSIONED_ANGULAR_URL_SEGMENT,
+  VERSIONED_REACT_URL_SEGMENT, REACT_VERSIONS
+} from "./version-language-constants.ts";
+import { useLocation, useNavigate } from "react-router-dom";
+import React, { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import "./version-language-switcher.css";
+
+export const VersionLanguageSwitcher = () => {
+  const {language, version, setLanguage, setVersion} = useContext(LanguageVersionContext);
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const updateURL = (key: "language" | "version", newValue: LanguageVersion | Language) => {
+    const isComponentRoute =
+      location.pathname.startsWith("/components/") && location.pathname.split("/").length > 2;
+    let newLanguageValue = language; // fallback value from localStorage
+    let newVersionValue = version; // fallback value from localStorage
+
+    if (key === "language") newLanguageValue = newValue as Language;
+    if (key === "version") newVersionValue = newValue as LanguageVersion;
+
+    const combineSegment = getVersionedUrlPath(newVersionValue, newLanguageValue);
+    if (isComponentRoute) {
+      const pathSegments = location.pathname.split("/");
+      const componentName = pathSegments[pathSegments.length -1];
+      if (VERSIONED_REACT_URL_SEGMENT === combineSegment || VERSIONED_ANGULAR_URL_SEGMENT === combineSegment) {
+        const newPath = `/components/${combineSegment}/${componentName}${location.hash}`;
+        navigate(newPath, {replace: true});
+      } else {
+        const newPath = `/components/${componentName}${location.hash}`;
+        navigate(newPath, {replace: true});
+      }
+    }
+  }
+
+  const updateLanguage = (newValue: "react" | "angular") => {
+    setLanguage(newValue);
+    updateURL("language", newValue);
+  }
+
+  const updateVersion = (newValue: "old" | "new") => {
+    setVersion(newValue);
+    updateURL("version", newValue);
+  }
+
+  const capitalizeFirstLetter = (str: string): string => {
+    if (!str) return str;
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+
+  const openLanguagePopOver = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+  };
+
+  const openVersionPopOver = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+  };
+
+  const getCurrentVersionLabel = (language: string, version: string) => {
+    if (language === "react") {
+      return version === "new" ? REACT_VERSIONS.NEW.label : REACT_VERSIONS.OLD.label;
+    }    if (language === "angular") {
+      return version === "new" ? ANGULAR_VERSIONS.NEW.label : ANGULAR_VERSIONS.OLD.label;
+    }
+  }
+
+  return (
+    <>
+      <GoabPopover
+        target={
+          <a className="version-language-switcher__heading" href="#" id="language-switcher" onClick={e => openLanguagePopOver(e)}>
+            <GoabIcon type="chevron-down" size="small"></GoabIcon> {capitalizeFirstLetter(language)}
+          </a>
+        }
+        padded={false}>
+        <>
+          {["angular", "react"].map(lang => (
+            <a key={lang} className={`version-language-switcher__menu ${language === lang ? "version-language-switcher__menu--current" : ""}`} onClick={() => updateLanguage(lang as "react" | "angular")}>
+              {capitalizeFirstLetter(lang)}
+            </a>))
+          }
+        </>
+      </GoabPopover>
+
+      <GoabPopover target={
+        <a className="version-language-switcher__heading" href="#"
+           onClick={e => openVersionPopOver(e)}>
+          <GoabIcon type="chevron-down" size="small"></GoabIcon> {getCurrentVersionLabel(language, version)}
+        </a>
+      } padded={false}>
+    <>
+      {["new", "old"].map(ver => (
+          <a key={ver} className={`version-language-switcher__menu ${version === ver ? "version-language-switcher__menu--current" : ""}`} onClick={() => updateVersion(ver as "old" | "new")}>
+            {getCurrentVersionLabel(language, ver)}
+          </a>
+        ))}
+      </>
+      </GoabPopover>
+
+    </>
+  );
+}
diff --git a/src/components/version-language-switcher/version-language-constants.ts b/src/components/version-language-switcher/version-language-constants.ts
new file mode 100644
index 000000000..d180184d8
--- /dev/null
+++ b/src/components/version-language-switcher/version-language-constants.ts
@@ -0,0 +1,32 @@
+export type LanguageVersion = "old" | "new";
+export type Language = "react" | "angular";
+export const ANGULAR_VERSIONS = {
+  OLD: {
+    label: "v3.2.2 (lts)",
+    value: "old"
+  },
+  NEW: {
+    label: "v4.0.0+",
+    value: "new"
+  }
+}
+export const REACT_VERSIONS = {
+  OLD: {
+    label: "v5.4.1 (lts)",
+    value: "old"
+  },
+  NEW: {
+    label: "v6.0.0+",
+    value: "new"
+  }
+}
+
+export const LOCAL_STORAGE_LANGUAGE_KEY = "goa-docs-lang";
+export const LOCAL_STORAGE_VERSION_KEY = "goa-docs-version";
+
+export const VERSIONED_REACT_URL_SEGMENT = `${REACT_VERSIONS.NEW.label}-react`;
+export const VERSIONED_ANGULAR_URL_SEGMENT = `${ANGULAR_VERSIONS.NEW.label}-angular`;
+
+export const getVersionedUrlPath = (version: string, language: string) => {
+  return version === "new" ? `${language === "react" ? REACT_VERSIONS.NEW.label : ANGULAR_VERSIONS.NEW.label}-${language}` : "";
+}
diff --git a/src/components/version-language-switcher/version-language-switcher.css b/src/components/version-language-switcher/version-language-switcher.css
new file mode 100644
index 000000000..23531cd77
--- /dev/null
+++ b/src/components/version-language-switcher/version-language-switcher.css
@@ -0,0 +1,21 @@
+.version-language-switcher__heading {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--goa-space-2xs);
+    font-size: var(--goa-font-size-2);
+    margin-left: var(--goa-space-m);
+}
+.version-language-switcher__menu {
+    display: block;
+    font: var(--goa-typography-body-s);
+    padding: var(--goa-space-s) var(--goa-space-s) var(--goa-space-s) var(--goa-space-s);
+    text-decoration: none;
+    color: var(--goa-color-text-default)!important;
+}
+.version-language-switcher__menu:hover:not(.version-language-switcher__menu--current) {
+    background: #cedfee;
+}
+.version-language-switcher__menu--current {
+    color: var(--goa-color-text-light)!important;;
+    background-color: var(--goa-color-interactive-default);
+}
diff --git a/src/components/sandbox/LanguageContext.ts b/src/contexts/DesignTokensLanguageContext.ts
similarity index 65%
rename from src/components/sandbox/LanguageContext.ts
rename to src/contexts/DesignTokensLanguageContext.ts
index 9ff382afe..9b52d6869 100644
--- a/src/components/sandbox/LanguageContext.ts
+++ b/src/contexts/DesignTokensLanguageContext.ts
@@ -1,5 +1,3 @@
 import { createContext } from "react";
 
-export const LanguageContext = createContext<string>("");
-
 export const DesignTokensLanguageContext = createContext<string>("");
diff --git a/src/contexts/DeviceWidthContext.ts b/src/contexts/DeviceWidthContext.ts
deleted file mode 100644
index 81ca38c45..000000000
--- a/src/contexts/DeviceWidthContext.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from "react";
-
-export const DeviceWidthContext = React.createContext({
-  isDesktop: true,
-  isMobile: false,
-});
diff --git a/src/contexts/DeviceWidthContext.tsx b/src/contexts/DeviceWidthContext.tsx
new file mode 100644
index 000000000..c4a2d494e
--- /dev/null
+++ b/src/contexts/DeviceWidthContext.tsx
@@ -0,0 +1,22 @@
+import React, { ReactNode } from "react";
+import { useMediaQuery } from "@hooks/useMediaQuery.tsx";
+
+interface DeviceWidthProviderProps {
+  children: ReactNode;
+}
+
+export const DeviceWidthContext = React.createContext({
+  isDesktop: true,
+  isMobile: false,
+});
+
+export const DeviceWidthProvider: React.FC<DeviceWidthProviderProps> = ({ children }) => {
+  const isDesktop = useMediaQuery("(min-width: 1232px)");
+  const isMobile = useMediaQuery("(max-width: 623px)");
+
+  return (
+    <DeviceWidthContext.Provider value={{ isDesktop, isMobile }}>
+  {children}
+  </DeviceWidthContext.Provider>
+);
+};
diff --git a/src/contexts/LanguageVersionContext.tsx b/src/contexts/LanguageVersionContext.tsx
new file mode 100644
index 000000000..212edbf4f
--- /dev/null
+++ b/src/contexts/LanguageVersionContext.tsx
@@ -0,0 +1,41 @@
+import React, { createContext, useEffect, useState } from "react";
+import {
+  Language,
+  LanguageVersion,
+  LOCAL_STORAGE_LANGUAGE_KEY,
+  LOCAL_STORAGE_VERSION_KEY
+} from "@components/version-language-switcher/version-language-constants.ts";
+import { DEFAULT_LANGUAGE, DEFAULT_VERSION } from "../global-constants";
+
+interface LanguageVersionContextProps {
+  language: Language;
+  version: LanguageVersion;
+  setLanguage: (lang: Language) => void;
+  setVersion: (version: LanguageVersion) => void;
+}
+
+export const LanguageVersionContext = createContext<LanguageVersionContextProps>({
+  language: DEFAULT_LANGUAGE,
+  version: DEFAULT_VERSION,
+  setLanguage: () => {},
+  setVersion: () => {},
+});
+
+export const LanguageVersionProvider: React.FC<{children: React.ReactNode}> = ({children}) => {
+  const [language, setLanguage] = useState<Language>(() => (localStorage.getItem(LOCAL_STORAGE_LANGUAGE_KEY) || DEFAULT_LANGUAGE) as Language);
+  const [version, setVersion] = useState<LanguageVersion>(() => localStorage.getItem(LOCAL_STORAGE_VERSION_KEY) as LanguageVersion || DEFAULT_VERSION);
+
+  useEffect(() => {
+    localStorage.setItem(LOCAL_STORAGE_LANGUAGE_KEY, language);
+  }, [language]);
+
+  useEffect(() => {
+    localStorage.setItem(LOCAL_STORAGE_VERSION_KEY, version);
+  }, [version]);
+
+  return(
+    <LanguageVersionContext.Provider value={{language, version, setLanguage, setVersion}}>
+      {children}
+    </LanguageVersionContext.Provider>
+  )
+}
diff --git a/src/contexts/VersionFromUrlContext.tsx b/src/contexts/VersionFromUrlContext.tsx
new file mode 100644
index 000000000..6ca569480
--- /dev/null
+++ b/src/contexts/VersionFromUrlContext.tsx
@@ -0,0 +1,43 @@
+import React, { createContext, useEffect, useState, ReactNode } from "react";
+import {
+  LOCAL_STORAGE_LANGUAGE_KEY,
+  LOCAL_STORAGE_VERSION_KEY,
+} from "@components/version-language-switcher/version-language-constants.ts";
+import { DEFAULT_VERSION } from "../global-constants";
+
+interface VersionFromUrlContextProps {
+  version: string | null;
+}
+
+const VersionFromUrlContext = createContext<VersionFromUrlContextProps>({ version: null });
+
+interface VersionProviderProps {
+  children: ReactNode;
+}
+
+export const VersionFromUrlProvider: React.FC<VersionProviderProps> = ({ children }) => {
+  const [versionFromPath, setVersionFromPath] = useState<string | null>(null);
+
+  useEffect(() => {
+    const updateVersion = () => {
+      const pathSegments = window.location.pathname.split("/");
+      const versionSegment = pathSegments.find(segment => segment.startsWith("v"));
+      if (versionSegment) {
+        setVersionFromPath(versionSegment);
+       localStorage.setItem(LOCAL_STORAGE_LANGUAGE_KEY, versionSegment.includes("angular") ? "angular" : "react");
+      } else {
+        setVersionFromPath(null);
+        localStorage.setItem(LOCAL_STORAGE_VERSION_KEY, DEFAULT_VERSION);
+      }
+    };
+
+    updateVersion();
+
+    window.addEventListener("popstate", updateVersion);
+
+    return () => {
+      window.removeEventListener("popstate", updateVersion);
+    };
+  }, []);
+  return <VersionFromUrlContext.Provider value={{ version: versionFromPath }}>{children}</VersionFromUrlContext.Provider>;
+};
diff --git a/src/examples/accordion/AccordionExamples.tsx b/src/examples/accordion/AccordionExamples.tsx
index 236deb702..29b35537a 100644
--- a/src/examples/accordion/AccordionExamples.tsx
+++ b/src/examples/accordion/AccordionExamples.tsx
@@ -1,252 +1,16 @@
-import { GoAAccordion, GoABadge, GoAButton } from "@abgov/react-components";
-import { Sandbox } from "@components/sandbox";
 import "./accordion-example.css";
-import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
-import { useState } from "react";
+import { AccordionExpandOrCollapseExample } from "@examples/accordion/AccordionExpandOrCollapseExample.tsx";
+import { AccordionHideOrShowSectionExample } from "@examples/accordion/AccordionHideOrShowSectionExample.tsx";
 
 export default function AccordionExamples() {
-  const [open, setOpen] = useState<boolean>(false); // for accordion group
-  const [accordionStatus, setAccordionStatus] = useState<string>("Show all sections");
-  const onClick = () => {
-    setOpen(!open);
-    const status = !open ? "Hide all sections" : "Show all sections";
-    setAccordionStatus(status);
-  }
   return (
     <>
       <h2 id="component-examples" className="hidden" aria-hidden="true">Examples</h2>
       <h3 id="component-example-expand-collapse-form">Expand or collapse part of a form</h3>
-      <Sandbox fullWidth skipRender allow={["h3"]}>
-        <CodeSnippet
-          lang="css"
-          allowCopy={true}
-          code={`
-                  dl.accordion-example {
-                    margin: 0 0;
-                  }
-                  
-                  .accordion-example dt {
-                    color: var(--goa-color-text-default);
-                    font: var(--goa-typography-heading-s);
-                    margin-bottom: var(--goa-space-xs);
-                  }
-                  
-                  .accordion-example dd {
-                    margin: 0 0 var(--goa-space-l);
-                    font: var(--goa-typography-body-m);
-                  }
-                  
-                  .accordion-example dd:last-of-type {
-                    margin-bottom: 0;
-                  }                      
-                `}
-        />
-        {/*Angular*/}
-        <CodeSnippet
-          lang="typescript"
-          tags="angular"
-          allowCopy={true}
-          code={`<h3>Review your application</h3>
-                  <goa-accordion heading="Referral details">
-                    <goa-badge type="important" content="Updated" slot="headingcontent"/>
-                      <dl class="accordion-example">
-                        <dt>Date of referral</dt>
-                        <dd>January 27, 2021</dd>
-                        <dt>Work safety concerns</dt>
-                        <dd>None</dd>
-                        <dt>Type of referral</dt>
-                        <dd>Word of mouth, internet search</dd>
-                        <dt>Intake received from another site</dt>
-                        <dd>Yes</dd>
-                      </dl>
-                  </goa-accordion>
-                  
-                  <goa-accordion heading="Contact information">
-                    <dl class="accordion-example">
-                      <dt>Name</dt>
-                      <dd>Joan Smith</dd>
-                      <dt>Contact preference</dt>
-                      <dd>Text message</dd>
-                    </dl>
-                  </goa-accordion>
-              `}
-        />
-        {/*React*/}
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
-                const headingContent = <GoABadge type="important" content="Updated" />;
-              `}
-        />
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
-                <h3>Review your application</h3>
-                
-                <GoAAccordion heading="Referral details" headingContent={headingContent}>
-                  <dl className="accordion-example">
-                    <dt>Date of referral</dt>
-                    <dd>January 27, 2021</dd>
-                    <dt>Work safety concerns</dt>
-                    <dd>None</dd>
-                    <dt>Type of referral</dt>
-                    <dd>Word of mouth, internet search</dd>
-                    <dt>Intake received from another site</dt>
-                    <dd>Yes</dd>
-                  </dl>
-                </GoAAccordion>
-                
-                <GoAAccordion heading="Contact information">
-                  <dl className="accordion-example">
-                    <dt>Name</dt>
-                    <dd>Joan Smith</dd>
-                    <dt>Contact preference</dt>
-                    <dd>Text message</dd>
-                  </dl>
-                </GoAAccordion>
-              `}
-        />
-
-        <h3>Review your application</h3>
-        <GoAAccordion
-          heading="Referral details"
-          headingContent={<GoABadge type="important" content="Updated" />}>
-          <dl className="accordion-example">
-            <dt>Date of referral</dt>
-            <dd>January 27, 2021</dd>
-            <dt>Work safety concerns</dt>
-            <dd>None</dd>
-            <dt>Type of referral</dt>
-            <dd>Word of mouth, internet search</dd>
-            <dt>Intake received from another site</dt>
-            <dd>Yes</dd>
-          </dl>
-        </GoAAccordion>
-
-        <GoAAccordion heading="Contact information">
-          <dl className="accordion-example">
-            <dt>Name</dt>
-            <dd>Joan Smith</dd>
-            <dt>Contact preference</dt>
-            <dd>Text message</dd>
-          </dl>
-        </GoAAccordion>
-      </Sandbox>
+      <AccordionExpandOrCollapseExample/>
 
       <h3 id="component-example-faq">Hide and show many sections of information (FAQ)</h3>
-      <Sandbox fullWidth skipRender>
-        {/*Angular*/}
-        <CodeSnippet
-          lang="typescript"
-          tags="angular"
-          allowCopy={true}
-          code={`
-                export class SomeOtherComponent {
-                  open = false;
-                  accordionStatus = "Show all sections";
-
-                  onClick() {
-                    this.open = !this.open;
-                    this.accordionStatus = (this.open) ? "Hide all sections" : "Show all sections";
-                  }
-                }
-              `}
-        />
-        <CodeSnippet
-          lang="typescript"
-          tags="angular"
-          allowCopy={true}
-          code={`
-                <goa-button type="tertiary" mb="m" (_click)="onClick()">
-                  {{ accordionStatus }}
-                </goa-button>
-                
-                <goa-accordion heading="How do I create an account?" headingsize="medium" [open]="open">
-                 To create an account you will need to contact your office admin.
-                </goa-accordion>
-                
-                <goa-accordion heading="What verification is needed to sign documents digitally?" headingsize="medium" [open]="open">
-                  You will need to verify your identity through our two factor authentication in addition to the digital signature.
-                </goa-accordion>
-                
-                <goa-accordion heading="Can I track the status of my service requests online?" headingsize="medium" [open]="open">
-                 Yes, you can see the status of your application on the main service dashboard when you login. You will receive updates and notifications in your email as your request progresses.
-                </goa-accordion>
-                
-                <goa-accordion heading="Can I track the status of my service requests online?" headingsize="medium" [open]="open">
-                  Yes, our digital service is designed with accessibility in mind. <a href="#">More information on accessibility.</a>
-                </goa-accordion>
-              `}
-        />
-        {/*React*/}
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
-                const [open, setOpen] = useState<boolean>(false);
-                const [accordionStatus, setAccordionStatus] = useState<string>("Show all sections");
-                const onClick = () => {
-                  setOpen(!open);
-                  const status = !open ? "Hide all sections" : "Show all sections";
-                  setAccordionStatus(status);
-                }
-              `}
-        />
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
-               <GoAButton type="tertiary" mb="m" onClick={() => onClick()}>
-                  { accordionStatus }
-               </GoAButton>
-               
-               <GoAAccordion open={open} heading="How do I create an account?" headingSize="medium">
-                  To create an account you will need to contact your office admin.
-               </GoAAccordion>
-               
-               <GoAAccordion open={open} heading="What verification is needed to sign documents digitally?" headingSize="medium">
-                  You will need to verify your identity through our two factor authentication in addition to the digital signature.
-               </GoAAccordion>
-               
-               <GoAAccordion open={open} heading="Can I track the status of my service requests online?" headingSize="medium">
-                  Yes, you can see the status of your application on the main service dashboard when you login. You will receive updates and notifications in your email as your request progresses.
-               </GoAAccordion>
-               
-               <GoAAccordion open={open} heading="Are there accessibility features for people with disabilities?" headingSize="medium">
-                  Yes, our digital service is designed with accessibility in mind. <a href="">More information on accessibility.</a>
-               </GoAAccordion>
-              `}
-        />
-
-        <GoAButton type="tertiary" mb="m" onClick={() => onClick()}>
-          { accordionStatus }
-        </GoAButton>
-
-        <GoAAccordion open={open} heading="How do I create an account?" headingSize="medium">
-          To create an account you will need to contact your office admin.
-        </GoAAccordion>
-
-        <GoAAccordion open={open} heading="What verification is needed to sign documents digitally?" headingSize="medium">
-          You will need to verify your identity through our two factor authentication in addition to
-          the digital signature.
-        </GoAAccordion>
-
-        <GoAAccordion open={open} heading="Can I track the status of my service requests online?" headingSize="medium">
-          Yes, you can see the status of your application on the main service dashboard when you
-          login. You will receive updates and notifications in your email as your request
-          progresses.
-        </GoAAccordion>
-
-        <GoAAccordion open={open} heading="Are there accessibility features for people with disabilities?" headingSize="medium">
-          Yes, our digital service is designed with accessibility in mind. <a href="">More information on accessibility.</a>
-        </GoAAccordion>
-      </Sandbox>
+      <AccordionHideOrShowSectionExample/>
     </>
   );
 }
diff --git a/src/examples/accordion/AccordionExpandOrCollapseExample.tsx b/src/examples/accordion/AccordionExpandOrCollapseExample.tsx
new file mode 100644
index 000000000..d0cfc96c7
--- /dev/null
+++ b/src/examples/accordion/AccordionExpandOrCollapseExample.tsx
@@ -0,0 +1,206 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabAccordion, GoabBadge } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const AccordionExpandOrCollapseExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  return (
+    <Sandbox fullWidth skipRender allow={["h3"]}>
+      <CodeSnippet
+        lang="css"
+        allowCopy={true}
+        code={`
+                  dl.accordion-example {
+                    margin: 0 0;
+                  }
+                  
+                  .accordion-example dt {
+                    color: var(--goa-color-text-default);
+                    font: var(--goa-typography-heading-s);
+                    margin-bottom: var(--goa-space-xs);
+                  }
+                  
+                  .accordion-example dd {
+                    margin: 0 0 var(--goa-space-l);
+                    font: var(--goa-typography-body-m);
+                  }
+                  
+                  .accordion-example dd:last-of-type {
+                    margin-bottom: 0;
+                  }                      
+                `}
+      />
+
+      {/*Angular*/}
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`<h3>Review your application</h3>
+                  <goa-accordion heading="Referral details">
+                    <goa-badge type="important" content="Updated" slot="headingcontent"/>
+                      <dl class="accordion-example">
+                        <dt>Date of referral</dt>
+                        <dd>January 27, 2021</dd>
+                        <dt>Work safety concerns</dt>
+                        <dd>None</dd>
+                        <dt>Type of referral</dt>
+                        <dd>Word of mouth, internet search</dd>
+                        <dt>Intake received from another site</dt>
+                        <dd>Yes</dd>
+                      </dl>
+                  </goa-accordion>
+                  
+                  <goa-accordion heading="Contact information">
+                    <dl class="accordion-example">
+                      <dt>Name</dt>
+                      <dd>Joan Smith</dd>
+                      <dt>Contact preference</dt>
+                      <dd>Text message</dd>
+                    </dl>
+                  </goa-accordion>
+              `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`<h3>Review your application</h3>
+                  <goab-accordion heading="Referral details" [headingContent]="importantBadge">
+                    <ng-template #importantBadge>
+                      <goab-badge type="important" content="Updated"></goab-badge>
+                    </ng-template>
+                    <dl class="accordion-example">
+                      <dt>Date of referral</dt>
+                      <dd>January 27, 2021</dd>
+                      <dt>Work safety concerns</dt>
+                      <dd>None</dd>
+                      <dt>Type of referral</dt>
+                      <dd>Word of mouth, internet search</dd>
+                      <dt>Intake received from another site</dt>
+                      <dd>Yes</dd>
+                    </dl>
+                  </goab-accordion>
+
+                  <goab-accordion heading="Contact information">
+                    <dl class="accordion-example">
+                      <dt>Name</dt>
+                      <dd>Joan Smith</dd>
+                      <dt>Contact preference</dt>
+                      <dd>Text message</dd>
+                    </dl>
+                  </goab-accordion>
+              `}
+      />}
+
+      {/*React*/}
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                const headingContent = <GoABadge type="important" content="Updated" />;
+              `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                const headingContent = <GoabBadge type="important" content="Updated" />;
+              `}
+      />}
+
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                <h3>Review your application</h3>
+                
+                <GoAAccordion heading="Referral details" headingContent={headingContent}>
+                  <dl className="accordion-example">
+                    <dt>Date of referral</dt>
+                    <dd>January 27, 2021</dd>
+                    <dt>Work safety concerns</dt>
+                    <dd>None</dd>
+                    <dt>Type of referral</dt>
+                    <dd>Word of mouth, internet search</dd>
+                    <dt>Intake received from another site</dt>
+                    <dd>Yes</dd>
+                  </dl>
+                </GoAAccordion>
+                
+                <GoAAccordion heading="Contact information">
+                  <dl className="accordion-example">
+                    <dt>Name</dt>
+                    <dd>Joan Smith</dd>
+                    <dt>Contact preference</dt>
+                    <dd>Text message</dd>
+                  </dl>
+                </GoAAccordion>
+              `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                <h3>Review your application</h3>
+                
+                <GoabAccordion heading="Referral details" headingContent={headingContent}>
+                  <dl className="accordion-example">
+                    <dt>Date of referral</dt>
+                    <dd>January 27, 2021</dd>
+                    <dt>Work safety concerns</dt>
+                    <dd>None</dd>
+                    <dt>Type of referral</dt>
+                    <dd>Word of mouth, internet search</dd>
+                    <dt>Intake received from another site</dt>
+                    <dd>Yes</dd>
+                  </dl>
+                </GoabAccordion>
+                
+                <GoabAccordion heading="Contact information">
+                  <dl className="accordion-example">
+                    <dt>Name</dt>
+                    <dd>Joan Smith</dd>
+                    <dt>Contact preference</dt>
+                    <dd>Text message</dd>
+                  </dl>
+                </GoabAccordion>
+              `}
+      />}
+
+      <h3>Review your application</h3>
+      <GoabAccordion
+        heading="Referral details"
+        headingContent={<GoabBadge type="important" content="Updated" />}>
+        <dl className="accordion-example">
+          <dt>Date of referral</dt>
+          <dd>January 27, 2021</dd>
+          <dt>Work safety concerns</dt>
+          <dd>None</dd>
+          <dt>Type of referral</dt>
+          <dd>Word of mouth, internet search</dd>
+          <dt>Intake received from another site</dt>
+          <dd>Yes</dd>
+        </dl>
+      </GoabAccordion>
+
+      <GoabAccordion heading="Contact information">
+        <dl className="accordion-example">
+          <dt>Name</dt>
+          <dd>Joan Smith</dd>
+          <dt>Contact preference</dt>
+          <dd>Text message</dd>
+        </dl>
+      </GoabAccordion>
+    </Sandbox>
+  )
+}
diff --git a/src/examples/accordion/AccordionHideOrShowSectionExample.tsx b/src/examples/accordion/AccordionHideOrShowSectionExample.tsx
new file mode 100644
index 000000000..c81a09c91
--- /dev/null
+++ b/src/examples/accordion/AccordionHideOrShowSectionExample.tsx
@@ -0,0 +1,264 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabAccordion, GoabButton } from "@abgov/react-components";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { useContext, useEffect, useState } from "react";
+
+export const AccordionHideOrShowSectionExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const [expandedAll, setExpandedAll] = useState<boolean>(false);
+  const [expandedList, setExpandedList] = useState<number[]>([]);
+
+  useEffect(() => {
+    setExpandedAll(expandedList.length === 4);
+  }, [expandedList.length]);
+
+  const expandOrCollapseAll = () => {
+    setExpandedAll((prev) => {
+      const newState = !prev;
+      setExpandedList(newState ? [1, 2, 3, 4] : []);
+      return newState;
+    });
+  };
+
+  const updateAccordion = (order: number, isOpen: boolean) => {
+    setExpandedList((prev) => {
+      if (isOpen) {
+        return prev.includes(order) ? prev: [...prev, order];
+      }
+      return prev.filter((item) => item !== order);
+    });
+  }
+  return (
+    <Sandbox fullWidth skipRender>
+      {/*Angular*/}
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+          import {Component, CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";
+                
+          @Component({
+            selector: "app-accordion-hide-show-example",
+            standalone: true,
+            templateUrl: "./example.component.html",
+            schemas: [CUSTOM_ELEMENTS_SCHEMA]
+          })
+          export class ExampleComponent {
+            expandedList: boolean[] = [false, false, false, false];
+            expandedAll: boolean = false;
+            accordionStatus = "Show all sections";
+
+            toggleAccordion(index: number, event: Event): void {
+              this.expandedList[index] = (event as CustomEvent).detail.open;
+              this.updateAccordionStatus();
+            }
+
+            onClick(): void {
+              const isExpanding = this.expandedList.some(isOpen => !isOpen)
+              this.expandedList = this.expandedList.map(() => isExpanding);
+              this.updateAccordionStatus();
+            }
+
+            private updateAccordionStatus(): void {
+              this.expandedAll = this.expandedList.every(isOpen => isOpen);
+              this.accordionStatus = this.expandedList.every(isOpen => isOpen) ? "Hide all sections" : "Show all sections";
+            }
+          }
+    `}
+      />}
+
+      {version === "old" && <CodeSnippet
+        lang="html"
+        tags="angular"
+        allowCopy={true}
+        code={`
+          <goa-button type="tertiary" mb="m" (_click)="onClick()">
+            {{ accordionStatus }}
+          </goa-button>
+
+          <goa-accordion heading="How do I create an account?" headingsize="medium" [open]="expandedList[0]" (_change)="toggleAccordion(0, $event)">
+            To create an account, you will need to contact your office admin.
+          </goa-accordion>
+
+          <goa-accordion heading="What verification is needed to sign documents digitally?" headingsize="medium" [open]="expandedList[1]" (_change)="toggleAccordion(1, $event)">
+            You will need to verify your identity through our two-factor authentication in addition to the digital signature.
+          </goa-accordion>
+
+          <goa-accordion heading="Can I track the status of my service requests online?" headingsize="medium" [open]="expandedList[2]" (_change)="toggleAccordion(2, $event)">
+            Yes, you can see the status of your application on the main service dashboard when you log in. You will receive updates and notifications in your email as your request progresses.
+          </goa-accordion>
+
+          <goa-accordion heading="Is your digital service accessible?" headingsize="medium" [open]="expandedList[3]" (_change)="toggleAccordion(3, $event)">
+            Yes, our digital service is designed with accessibility in mind. <a href="#">More information on accessibility.</a>
+          </goa-accordion>
+        `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+          export class ExampleComponent {
+            expandedList: boolean[] = [false, false, false, false];
+            expandedAll = false;
+            accordionStatus = "Show all sections";
+
+            toggleAccordion(index: number, open: boolean): void {
+              this.expandedList[index] = open;
+              this.updateAccordionStatus();
+            }
+
+            onClick(): void {
+              const isExpanding = this.expandedList.some(isOpen => !isOpen)
+              this.expandedList = this.expandedList.map(() => isExpanding);
+              this.updateAccordionStatus();
+            }
+
+            private updateAccordionStatus(): void {
+              this.expandedAll = this.expandedList.every(isOpen => isOpen);
+              this.accordionStatus = this.expandedList.every(isOpen => isOpen) ? "Hide all sections" : "Show all sections";
+            }
+          }
+    `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="html"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                <goab-button type="tertiary" mb="m" (onClick)="onClick()">
+                  {{ accordionStatus }}
+                </goab-button>
+                
+                <goab-accordion heading="How do I create an account?" headingSize="medium" [open]="expandedList[0]" (onChange)="toggleAccordion(0, $event)">
+                 To create an account you will need to contact your office admin.
+                </goab-accordion>
+                
+                <goab-accordion heading="What verification is needed to sign documents digitally?" headingSize="medium" [open]="expandedList[1]" (onChange)="toggleAccordion(1, $event)">
+                  You will need to verify your identity through our two factor authentication in addition to the digital signature.
+                </goab-accordion>
+                
+                <goab-accordion heading="Can I track the status of my service requests online?" headingSize="medium" [open]="expandedList[2]" (onChange)="toggleAccordion(2, $event)">
+                 Yes, you can see the status of your application on the main service dashboard when you login. You will receive updates and notifications in your email as your request progresses.
+                </goab-accordion>
+                
+                <goab-accordion heading="Can I track the status of my service requests online?" headingSize="medium" [open]="expandedList[3]" (onChange)="toggleAccordion(3, $event)">
+                  Yes, our digital service is designed with accessibility in mind. <a href="#">More information on accessibility.</a>
+                </goab-accordion>
+              `}
+      />}
+
+      {/*React*/}
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                const [expandedAll, setExpandedAll] = useState<boolean>(false);
+                const [expandedList, setExpandedList] = useState<number[]>([]);
+                useEffect(() => {
+                  setExpandedAll(expandedList.length === 4);
+                }, [expandedList.length]);
+
+                const expandOrCollapseAll = () => {
+                    setExpandedAll((prev) => {
+                    const newState = !prev;
+                    setExpandedList(newState ? [1, 2, 3, 4] : []);
+                    return newState;
+                  });
+                };
+
+                const updateAccordion = (order: number, isOpen: boolean) => {
+                  setExpandedList((prev) => {
+                  if (isOpen) {
+                    return prev.includes(order) ? prev: [...prev, order];
+                  }
+                  return prev.filter((item) => item !== order);
+                });
+                }
+              `}
+      />
+
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+               <GoAButton type="tertiary" mb="m" onClick={() => expandOrCollapseAll()}>
+                  {expandedAll ? "Hide all sections" : "Show all sections"}
+               </GoAButton>
+               
+               <GoAAccordion open={expandedList.includes(1)} heading="How do I create an account?" headingSize="medium" onChange={(open) => updateAccordion(1, open)}>
+                  To create an account you will need to contact your office admin.
+               </GoAAccordion>
+               
+               <GoAAccordion open={expandedList.includes(2)} heading="What verification is needed to sign documents digitally?" headingSize="medium" onChange={(open) => updateAccordion(2, open)}>
+                  You will need to verify your identity through our two factor authentication in addition to the digital signature.
+               </GoAAccordion>
+               
+               <GoAAccordion open={expandedList.includes(3)} heading="Can I track the status of my service requests online?" headingSize="medium" onChange={(open) => updateAccordion(3, open)}>
+                  Yes, you can see the status of your application on the main service dashboard when you login. You will receive updates and notifications in your email as your request progresses.
+               </GoAAccordion>
+               
+               <GoAAccordion open={expandedList.includes(4)} heading="Are there accessibility features for people with disabilities?" headingSize="medium" onChange={(open) => updateAccordion(4, open)}>
+                  Yes, our digital service is designed with accessibility in mind. <a href="">More information on accessibility.</a>
+               </GoAAccordion>
+              `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+               <GoabButton type="tertiary" mb="m" onClick={() => expandOrCollapseAll()}>
+                  {expandedAll ? "Hide all sections" : "Show all sections"}
+               </GoabButton>
+               
+               <GoabAccordion open={expandedList.includes(1)} heading="How do I create an account?" headingSize="medium" onChange={(open) => updateAccordion(1, open)}>
+                  To create an account you will need to contact your office admin.
+               </GoabAccordion>
+               
+               <GoabAccordion open={expandedList.includes(2)} heading="What verification is needed to sign documents digitally?" headingSize="medium" onChange={(open) => updateAccordion(2, open)}>
+                  You will need to verify your identity through our two factor authentication in addition to the digital signature.
+               </GoabAccordion>
+               
+               <GoabAccordion open={expandedList.includes(3)} heading="Can I track the status of my service requests online?" headingSize="medium" onChange={(open) => updateAccordion(3, open)}>
+                  Yes, you can see the status of your application on the main service dashboard when you login. You will receive updates and notifications in your email as your request progresses.
+               </GoabAccordion>
+               
+               <GoabAccordion open={expandedList.includes(4)} heading="Are there accessibility features for people with disabilities?" headingSize="medium" onChange={(open) => updateAccordion(4, open)}>
+                  Yes, our digital service is designed with accessibility in mind. <a href="">More information on accessibility.</a>
+               </GoabAccordion>
+              `}
+      />}
+
+      <GoabButton type="tertiary" mb="m" onClick={() => expandOrCollapseAll()}>
+        {expandedAll ? "Hide all sections" : "Show all sections"}
+      </GoabButton>
+
+      <GoabAccordion open={expandedList.includes(1)} heading="How do I create an account?" headingSize="medium" onChange={(open) => updateAccordion(1, open)}>
+        To create an account you will need to contact your office admin.
+      </GoabAccordion>
+
+      <GoabAccordion open={expandedList.includes(2)} heading="What verification is needed to sign documents digitally?" headingSize="medium" onChange={(open) => updateAccordion(2, open)}>
+        You will need to verify your identity through our two factor authentication in addition to
+        the digital signature.
+      </GoabAccordion>
+
+      <GoabAccordion open={expandedList.includes(3)} heading="Can I track the status of my service requests online?" headingSize="medium" onChange={(open) => updateAccordion(3, open)}>
+        Yes, you can see the status of your application on the main service dashboard when you
+        login. You will receive updates and notifications in your email as your request
+        progresses.
+      </GoabAccordion>
+
+      <GoabAccordion open={expandedList.includes(4)} heading="Are there accessibility features for people with disabilities?" headingSize="medium" onChange={(open) => updateAccordion(4, open)}>
+        Yes, our digital service is designed with accessibility in mind. <a href="">More information on accessibility.</a>
+      </GoabAccordion>
+    </Sandbox>
+  )
+}
diff --git a/src/examples/app-footer/AppFooterExamples.tsx b/src/examples/app-footer/AppFooterExamples.tsx
new file mode 100644
index 000000000..8f6e5eee3
--- /dev/null
+++ b/src/examples/app-footer/AppFooterExamples.tsx
@@ -0,0 +1,19 @@
+import { AppFooterShowQuickLinkExample } from "@examples/app-footer/AppFooterShowQuickLinkExample.tsx";
+import { AppFooterShowNavigationItemsExample } from "@examples/app-footer/AppFooterShowNavigationItemsExample.tsx";
+
+export const AppFooterExamples = () => {
+  return (
+    <>
+      <h2 id="component-examples" className="hidden" aria-hidden="true">
+        Examples
+      </h2>
+      <h3 id="component-example-footer-meta">Show quick links</h3>
+      <AppFooterShowQuickLinkExample />
+
+      <h3 id="component-example-footer-secondary-nav">
+        Show links to navigation items
+      </h3>
+      <AppFooterShowNavigationItemsExample/>
+    </>
+  )
+}
diff --git a/src/examples/app-footer/AppFooterShowNavigationItemsExample.tsx b/src/examples/app-footer/AppFooterShowNavigationItemsExample.tsx
new file mode 100644
index 000000000..6e37da23a
--- /dev/null
+++ b/src/examples/app-footer/AppFooterShowNavigationItemsExample.tsx
@@ -0,0 +1,203 @@
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import {
+  GoabAppFooter,
+  GoabAppFooterMetaSection,
+  GoabAppFooterNavSection, GoabAppFooterProps,
+  GoabFooterNavSectionProps
+} from "@abgov/react-components";
+import { ComponentBinding, Sandbox } from "@components/sandbox";
+import { useContext, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { propsToString } from "@components/sandbox/BaseSerializer.ts";
+
+type FooterNavPropsType = GoabFooterNavSectionProps;
+type FooterPropsType = GoabAppFooterProps;
+type CastingType = {
+  // add any required props here
+  [key: string]: unknown;
+};
+
+export const AppFooterShowNavigationItemsExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+
+  const [appFooterNavBindings, setAppFooterNavBindings] = useState<ComponentBinding[]>([
+    {
+      label: "Max content width",
+      type: "string",
+      name: "maxContentWidth",
+      value: "100%",
+    },
+    {
+      label: "Max footer nav columns",
+      type: "number",
+      name: "maxColumnCount",
+      value: 1,
+    },
+    {
+      label: "Heading",
+      type: "string",
+      name: "heading",
+      value: "",
+    },
+  ]);
+  const [footerNavSectionProps, setFooterNavSectionProps] = useState<FooterNavPropsType>({
+    maxColumnCount: 1,
+    heading: "",
+  });
+  const [footerProps, setFooterProps] = useState<FooterPropsType>({
+    maxContentWidth: "100%"
+  });
+
+  function onSandbox2Change(bindings: ComponentBinding[], props: Record<string, unknown>) {
+    const footerProps = { maxContentWidth: props.maxContentWidth };
+    const footerNavSectionProps = {
+      heading: props.heading || "",
+      maxColumnCount: props.maxColumnCount || 1
+    };
+
+    setFooterProps(footerProps as CastingType);
+    setFooterNavSectionProps(footerNavSectionProps as CastingType);
+    setAppFooterNavBindings(bindings);
+  }
+
+  return (
+    <Sandbox
+      properties={appFooterNavBindings}
+      onChange={onSandbox2Change}
+      skipRenderOnly={"angular"}
+      fullWidth>
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                <goa-app-footer ${propsToString(footerProps as Record<string, string>, "angular", "old")}>
+                  <goa-app-footer-nav-section slot="nav" ${propsToString(footerNavSectionProps as Record<string, string>, "angular", "old")}>
+                    <a href="a.html">
+                      Arts and culture
+                    </a>
+                    <a href="b.html">
+                      Education and training
+                    </a>
+                    <a href="c.html">
+                      Family and social supports
+                    </a>
+                    <a href="d.html">
+                      Housing and community
+                    </a>
+                    <a href="e.html">
+                      Life events
+                    </a>
+                    <a href="f.html">
+                      Business and economy
+                    </a>
+                    <a href="g.html">
+                      Emergencies and public safety
+                    </a>
+                    <a href="h.html">
+                      Government
+                    </a>
+                    <a href="i.html">
+                      Jobs and employment
+                    </a>
+                    <a href="j.html">
+                      Moving to Alberta
+                    </a>
+                  </goa-app-footer-nav-section>
+                  <goa-app-footer-meta-section slot="meta">
+                    <a href="privacy.html">
+                      Privacy
+                    </a>
+                    <a href="disclaimer.html">
+                      Disclaimer
+                    </a>
+                    <a href="accessibility.html">
+                      Accessibility
+                    </a>
+                    <a href="using-alberta.html">
+                      Using Alberta.ca
+                    </a>
+                  </goa-app-footer-meta-section>
+                </goa-app-footer>
+               `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                <goab-app-footer ${propsToString(footerProps as Record<string, string>, "angular", "new")}>
+                  <goab-app-footer-nav-section slot="nav" ${propsToString(footerNavSectionProps as Record<string, string|number>, "angular", "new")}>
+                  <a href="a.html">
+                    Arts and culture
+                  </a>
+                  <a href="b.html">
+                    Education and training
+                  </a>
+                  <a href="c.html">
+                    Family and social supports
+                  </a>  
+                  <a href="d.html">
+                    Housing and community
+                  </a>
+                  <a href="e.html">
+                    Life events
+                  </a>
+                  <a href="f.html">
+                    Business and economy
+                  </a>
+                  <a href="g.html">
+                    Emergencies and public safety
+                  </a>
+                  <a href="h.html">
+                    Government
+                  </a>
+                  <a href="i.html">
+                    Jobs and employment
+                  </a>
+                  <a href="j.html">
+                    Moving to Alberta
+                  </a>
+                </goab-app-footer-nav-section>
+                <goab-app-footer-meta-section slot="meta">
+                  <a href="privacy.html">
+                    Privacy
+                  </a>
+                  <a href="disclaimer.html">
+                    Disclaimer
+                  </a>
+                  <a href="accessibility.html">
+                    Accessibility
+                  </a>
+                  <a href="using-alberta.html">
+                    Using Alberta.ca
+                  </a>
+                </goab-app-footer-meta-section>
+              </goab-app-footer>
+               `}
+      />}
+
+      <GoabAppFooter {...footerProps}>
+        <GoabAppFooterNavSection {...footerNavSectionProps}>
+          <a href="a.html">Arts and culture</a>
+          <a href="b.html">Education and training</a>
+          <a href="c.html">Family and social supports</a>
+          <a href="d.html">Housing and community</a>
+          <a href="e.html">Life events</a>
+          <a href="f.html">Business and economy</a>
+          <a href="g.html">Emergencies and public safety</a>
+          <a href="h.html">Government</a>
+          <a href="i.html">Jobs and employment</a>
+          <a href="j.html">Moving to Alberta</a>
+        </GoabAppFooterNavSection>
+        <GoabAppFooterMetaSection>
+          <a href="privacy.html">Privacy</a>
+          <a href="disclaimer.html">Disclaimer</a>
+          <a href="accessibility.html">Accessibility</a>
+          <a href="using-alberta.html">Using Alberta.ca</a>
+        </GoabAppFooterMetaSection>
+      </GoabAppFooter>
+    </Sandbox>
+  )
+}
diff --git a/src/examples/app-footer/AppFooterShowQuickLinkExample.tsx b/src/examples/app-footer/AppFooterShowQuickLinkExample.tsx
new file mode 100644
index 000000000..a6b131f00
--- /dev/null
+++ b/src/examples/app-footer/AppFooterShowQuickLinkExample.tsx
@@ -0,0 +1,120 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabAppFooter, GoabAppFooterMetaSection } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const AppFooterShowQuickLinkExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  return (
+    <Sandbox skipRender fullWidth>
+      {/*********** Angular code **************/}
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                <goa-app-footer maxcontentwidth="100%">
+                  <goa-app-footer-meta-section slot="meta">
+                    <a href="privacy.html">
+                      Privacy
+                    </a>
+                    <a href="disclaimer.html">
+                      Disclaimer
+                    </a>
+                    <a href="accessibility.html">
+                      Accessibility
+                    </a>
+                    <a href="using-alberta.html">
+                      Using Alberta.ca
+                    </a>
+                  </goa-app-footer-meta-section>
+                </goa-app-footer>
+               `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                <goab-app-footer maxContentWidth="100%">
+                  <goab-app-footer-meta-section slot="meta">
+                    <a href="privacy.html">
+                      Privacy
+                    </a>
+                    <a href="disclaimer.html">
+                      Disclaimer
+                    </a>
+                    <a href="accessibility.html">
+                      Accessibility
+                    </a>
+                    <a href="using-alberta.html">
+                      Using Alberta.ca
+                    </a>
+                  </goab-app-footer-meta-section>
+                </goab-app-footer>
+               `}
+      />}
+
+      {/*********** React code **************/}
+
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                 <GoAAppFooter maxContentWidth="100%">
+                  <GoAAppFooterMetaSection>
+                    <a href="privacy.html">
+                      Privacy
+                    </a>
+                    <a href="disclaimer.html">
+                      Disclaimer
+                    </a>
+                    <a href="accessibility.html">
+                      Accessibility
+                    </a>
+                    <a href="using-alberta.html">
+                      Using Alberta.ca
+                    </a>
+                  </GoAAppFooterMetaSection>
+                </GoAAppFooter>
+              `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                 <GoabAppFooter maxContentWidth="100%">
+                  <GoabAppFooterMetaSection>
+                    <a href="privacy.html">
+                      Privacy
+                    </a>
+                    <a href="disclaimer.html">
+                      Disclaimer
+                    </a>
+                    <a href="accessibility.html">
+                      Accessibility
+                    </a>
+                    <a href="using-alberta.html">
+                      Using Alberta.ca
+                    </a>
+                  </GoabAppFooterMetaSection>
+                </GoabAppFooter>
+              `}
+      />}
+
+      <GoabAppFooter maxContentWidth={"100%"}>
+        <GoabAppFooterMetaSection>
+          <a href="privacy.html">Privacy</a>
+          <a href="disclaimer.html">Disclaimer</a>
+          <a href="accessibility.html">Accessibility</a>
+          <a href="using-alberta.html">Using Alberta.ca</a>
+        </GoabAppFooterMetaSection>
+      </GoabAppFooter>
+    </Sandbox>
+  )
+}
diff --git a/src/examples/app-header/AppHeaderExamples.tsx b/src/examples/app-header/AppHeaderExamples.tsx
new file mode 100644
index 000000000..8ecccb849
--- /dev/null
+++ b/src/examples/app-header/AppHeaderExamples.tsx
@@ -0,0 +1,18 @@
+import { AppHeaderWithNavigationExample } from "@examples/app-header/AppHeaderWithNavigationExample.tsx";
+import { AppHeaderWithMenuClickEventExample } from "@examples/app-header/AppHeaderWithMenuClickEventExample.tsx";
+
+export const AppHeaderExamples = () => {
+  return (
+    <>
+      <h2 id="component-examples" className="hidden" aria-hidden="true">
+        Examples
+      </h2>
+
+      <h3 id="component-example-header-navigation">Header with navigation</h3>
+      <AppHeaderWithNavigationExample/>
+
+      <h3 id="component-example-with-menu-click">Header with menu click event</h3>
+      <AppHeaderWithMenuClickEventExample/>
+    </>
+  );
+};
diff --git a/src/examples/app-header/AppHeaderWithMenuClickEventExample.tsx b/src/examples/app-header/AppHeaderWithMenuClickEventExample.tsx
new file mode 100644
index 000000000..cbafb55e5
--- /dev/null
+++ b/src/examples/app-header/AppHeaderWithMenuClickEventExample.tsx
@@ -0,0 +1,205 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabAppHeader, GoabAppHeaderMenu, GoabRadioGroup, GoabRadioItem } from "@abgov/react-components";
+import { GoabRadioGroupOnChangeDetail } from "@abgov/ui-components-common";
+import { useContext, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const AppHeaderWithMenuClickEventExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const [deviceWidth, setDeviceWidth] = useState("5000");
+  function handleMenuClick() {
+    alert("Menu not being displayed and you can do anything");
+  }
+  return (
+    <Sandbox fullWidth skipRender>
+      <GoabRadioGroup
+        name="device"
+        value={deviceWidth}
+        onChange={(event: GoabRadioGroupOnChangeDetail) => setDeviceWidth(event.value)}>
+        <GoabRadioItem value="600" label="Desktop"></GoabRadioItem>
+        <GoabRadioItem value="5000" label="Mobile"></GoabRadioItem>
+      </GoabRadioGroup>
+      <GoabAppHeader
+        url="https://example.com"
+        heading="Design System"
+        onMenuClick={handleMenuClick}
+        fullMenuBreakpoint={+deviceWidth}>
+        <a href="#">Support</a>
+        <GoabAppHeaderMenu heading="Tickets" leadingIcon="ticket">
+          <a href="#">Cases</a>
+          <a href="#">Payments</a>
+          <a href="#">Outstanding</a>
+        </GoabAppHeaderMenu>
+        <a href="#" className="interactive">
+          Sign in
+        </a>
+      </GoabAppHeader>
+
+      {/*Angular code*/}
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags={"angular"}
+          allowCopy={true}
+          code={`
+                export class MyComponent {
+                  deviceWidth = '5000';
+                  changeDeviceWidth(event: Event) {
+                    this.deviceWidth = (event as CustomEvent).detail.value;
+                  }
+                  
+                  handleMenuClick() {
+                    alert("Menu not being displayed and you can do anything");
+                  }
+                }
+              `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags={"angular"}
+          allowCopy={true}
+          code={`
+                export class MyComponent {
+                  deviceWidth = '5000';
+                  changeDeviceWidth(event: GoabRadioGroupOnChangeDetail) {
+                    this.deviceWidth = event.value;
+                  }
+                  handleMenuClick() {
+                    alert('Menu not being displayed and you can do anything');
+                  }
+                }
+              `}
+        />
+      )}
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                 <goa-radio-group name="device" value="deviceWidth" (_change)="changeDeviceWidth($event)">
+                  <goa-radio-item value="600" label="Desktop"></goa-radio-item>
+                  <goa-radio-item value="5000" label="Mobile"></goa-radio-item>
+                 </goa-radio-group>
+                  
+                 <goa-app-header url="https://example.com" heading="Design System" [fullmenubreakpoint]="deviceWidth" [hasmenuclickhandler]="true" (_menuClick)="handleMenuClick()">
+                  <a href="#">Support</a>
+                  <goa-app-header-menu heading="Tickets" leadingIcon="ticket">
+                    <a href="#">Cases</a>
+                    <a href="#">Payments</a>
+                    <a href="#">Outstanding</a>
+                  </goa-app-header-menu>
+                  <a href="#" className="interactive">Sign in</a>
+                </goa-app-header>
+              `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                <goab-radio-group
+                  name="device"
+                  [value]="deviceWidth"
+                  (onChange)="changeDeviceWidth($event)"
+                >
+                  <goab-radio-item value="600" label="Desktop"></goab-radio-item>
+                  <goab-radio-item value="5000" label="Mobile"></goab-radio-item>
+                </goab-radio-group>
+
+                <goab-app-header
+                  url="https://example.com"
+                  heading="Design System"
+                  [fullMenuBreakpoint]="+deviceWidth"
+                  (onMenuClick)="handleMenuClick()"
+                >
+                  <a href="#">Support</a>
+                  <goab-app-header-menu heading="Tickets" leadingIcon="ticket">
+                    <a href="#">Cases</a>
+                    <a href="#">Payments</a>
+                    <a href="#">Outstanding</a>
+                  </goab-app-header-menu>
+                  <a href="#" class="interactive">Sign in</a>
+                </goab-app-header>
+              `}
+        />
+      )}
+
+      {/*React code*/}
+      <CodeSnippet
+        lang="typescript"
+        tags={"react"}
+        allowCopy={true}
+        code={`
+                const [deviceWidth, setDeviceWidth] = useState("5000");
+                function handleMenuClick() {
+                  alert("Menu not being displayed and you can do anything");
+                }
+              `}
+      />
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <GoARadioGroup name="device" value={deviceWidth} onChange={(_, value) => setDeviceWidth(value)}>
+                    <GoARadioItem value="600" label="Desktop"></GoARadioItem>
+                    <GoARadioItem value="5000" label="Mobile"></GoARadioItem>
+                  </GoARadioGroup>
+                  
+                  <GoAAppHeader
+                    url="https://example.com"
+                    heading="Design System"
+                    onMenuClick={handleMenuClick}
+                    fullMenuBreakpoint={+deviceWidth}>
+                    <a href="#">Support</a>
+                    <GoAAppHeaderMenu heading="Tickets" leadingIcon="ticket">
+                      <a href="#">Cases</a>
+                      <a href="#">Payments</a>
+                      <a href="#">Outstanding</a>
+                    </GoAAppHeaderMenu>
+                    <a href="#" className="interactive">Sign in</a>
+                  </GoAAppHeader>
+              `}
+        />
+      )}
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <GoabRadioGroup name="device" value={deviceWidth} onChange={(event: GoabRadioGroupOnChangeDetail) => setDeviceWidth(event.value)}>
+                    <GoabRadioItem value="600" label="Desktop"></GoabRadioItem>
+                    <GoabRadioItem value="5000" label="Mobile"></GoabRadioItem>
+                  </GoabRadioGroup>
+                  
+                  <GoabAppHeader
+                    url="https://example.com"
+                    heading="Design System"
+                    onMenuClick={handleMenuClick}
+                    fullMenuBreakpoint={+deviceWidth}>
+                    <a href="#">Support</a>
+                    <GoabAppHeaderMenu heading="Tickets" leadingIcon="ticket">
+                      <a href="#">Cases</a>
+                      <a href="#">Payments</a>
+                      <a href="#">Outstanding</a>
+                    </GoabAppHeaderMenu>
+                    <a href="#" class="interactive">Sign in</a>
+                  </GoabAppHeader>
+              `}
+        />
+      )}
+    </Sandbox>
+  )
+}
diff --git a/src/examples/app-header/AppHeaderWithNavigationExample.tsx b/src/examples/app-header/AppHeaderWithNavigationExample.tsx
new file mode 100644
index 000000000..43c1380dd
--- /dev/null
+++ b/src/examples/app-header/AppHeaderWithNavigationExample.tsx
@@ -0,0 +1,101 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabAppHeader, GoabAppHeaderMenu } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const AppHeaderWithNavigationExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+
+  return (
+    <Sandbox fullWidth skipRender>
+      {/*Angular code*/}
+      {version === "old" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                <goa-microsite-header type="live"></goa-microsite-header>
+                <goa-app-header url="https://example.com" heading="Ticket and Fine Payments">
+                  <a href="#">Support</a>
+                  <goa-app-header-menu heading="Tickets" leadingIcon="ticket">
+                    <a href="#">Cases</a>
+                    <a href="#">Payments</a>
+                    <a href="#">Outstanding</a>
+                  </goa-app-header-menu>
+                  <a href="#" class="interactive">Sign in</a>
+                </goa-app-header>
+              `}
+        />
+      )}
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                <goab-microsite-header type="live"></goab-microsite-header>
+                <goab-app-header url="https://example.com" heading="Ticket and Fine Payments">
+                  <a href="#">Support</a>
+                  <goab-app-header-menu heading="Tickets" leadingIcon="ticket">
+                    <a href="#">Cases</a>
+                    <a href="#">Payments</a>
+                    <a href="#">Outstanding</a>
+                  </goab-app-header-menu>
+                  <a href="#" class="interactive">Sign in</a>
+                </goab-app-header>
+              `}
+        />
+      )}
+
+      {/*React code*/}
+      {version === "old" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+                <GoAAppHeader url="https://example.com" heading="Ticket and Fine Payments">
+                  <a href="#">Support</a>
+                  <GoAAppHeaderMenu heading="Tickets" leadingIcon="ticket">
+                    <a href="#">Cases</a>
+                    <a href="#">Payments</a>
+                    <a href="#">Outstanding</a>
+                  </GoAAppHeaderMenu>
+                  <a href="#" className="interactive">Sign in</a>
+                </GoAAppHeader>
+              `}
+        />
+      )}
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+                <GoabAppHeader url="https://example.com" heading="Ticket and Fine Payments">
+                  <a href="#">Support</a>
+                  <GoabAppHeaderMenu heading="Tickets" leadingIcon="ticket">
+                    <a href="#">Cases</a>
+                    <a href="#">Payments</a>
+                    <a href="#">Outstanding</a>
+                  </GoabAppHeaderMenu>
+                  <a href="#" className="interactive">Sign in</a>
+                </GoabAppHeader>
+              `}
+        />
+      )}
+
+      <GoabAppHeader url="https://www.alberta.ca" heading="Ticket and Fine Payments">
+        <a href="">Support</a>
+        <GoabAppHeaderMenu heading="Tickets" leadingIcon="ticket">
+          <a>Cases</a>
+          <a>Payments</a>
+          <a>Outstanding</a>
+        </GoabAppHeaderMenu>
+        <a className="interactive">Sign in</a>
+      </GoabAppHeader>
+    </Sandbox>
+  )
+}
diff --git a/src/examples/badge/BadgeExamples.tsx b/src/examples/badge/BadgeExamples.tsx
index b886c0f92..a98d74e68 100644
--- a/src/examples/badge/BadgeExamples.tsx
+++ b/src/examples/badge/BadgeExamples.tsx
@@ -1,281 +1,32 @@
-import { GoABadge, GoABadgeType, GoABlock, GoAContainer, GoAButton, GoATable } from "@abgov/react-components";
-import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import {
+  GoabBadge,
+  GoabBlock,
+} from "@abgov/react-components";
 import { Sandbox } from "@components/sandbox";
-
-const noop = () => {};
-const badgeValues = [
-    {
-        key: 1,
-        type: "important",
-        content: "Pending"
-    },
-    {
-        key: 2,
-        type: "emergency",
-        content: "Failed"
-    },
-    {
-        key: 3,
-        type: "success",
-        content: "Complete"
-    },
-    {
-        key: 4,
-        type: "information",
-        content: "In progress"
-    },
-    {
-        key: 5,
-        type: "midtone",
-        content: "Closed"
-    },
-    {
-        key: 6,
-        type: "success",
-        content: "Complete"
-    }
-]
-
-export default function CheckboxExamples () {
-    return (
-        <> 
-        {/* Examples*/}
-        <h2 id="component-examples" className="hidden" aria-hidden="true">Examples</h2>
-
-        <h3 id="component-example-show-status-table">Show status in a table</h3>
-        <Sandbox fullWidth skipRender>
-            <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                    onClick($event: Event) {
-                        console.log("clicked");
-                    } 
-
-                    badgeValues = [
-                        {
-                            type: "important",
-                            content: "Pending",
-                        },
-                        {
-                            type: "emergency",
-                            content: "Failed",
-                        },
-                        {
-                            type: "success",
-                            content: "Complete",
-                        },
-                        {
-                            type: "information",
-                            content: "In progress",
-                        },
-                        {
-                            type: "midtone",
-                            content: "Closed",
-                        },
-                        {
-                            type: "success",
-                            content: "Complete",
-                        },
-                    ];
-                `}
-            />
-
-            <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                    <goa-table width="100%">
-                        <thead>
-                            <tr>
-                                <th>Status</th>
-                                <th>Name</th>
-                                <th class="goa-table-number-header">File number</th>
-                                <th></th>
-                            </tr>
-                        </thead>
-
-                        <tbody>
-                            <tr *ngFor="let badge of badgeValues">
-                                <td>
-                                    <goa-badge [type]="badge.type" [content]="badge.content" />
-                                </td>
-                                <td>Lorem ipsum dolor sit amet consectetur.</td>
-                                <td class="goa-table-number-column">1234567890</td>
-                                <td>
-                                    <goa-button type="tertiary" (_click)="onClick($event)">Assign</goa-button>
-                                </td>
-                            </tr>
-                        </tbody>
-                    <goa-table>
-                `}
-            />
-            
-            <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                    function onClick() {
-                        console.log("clicked");
-                    }
-
-                    const badgeValues = [
-                        {
-                            key: 1,
-                            type: "important",
-                            content: "Pending"
-                        },
-                        {
-                            key: 2,
-                            type: "emergency",
-                            content: "Failed"
-                        },
-                        {
-                            key: 3,
-                            type: "success",
-                            content: "Complete"
-                        },
-                        {
-                            key: 4,
-                            type: "information",
-                            content: "In progress"
-                        },
-                        {
-                            key: 5,
-                            type: "midtone",
-                            content: "Closed"
-                        },
-                        {
-                            key: 6,
-                            type: "success",
-                            content: "Complete"
-                        }
-                    ]
-                `}
-            />
-
-            <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                    <GoATable width="100%">
-                        <thead>
-                        <tr>
-                            <th>Status</th>
-                            <th>Name</th>
-                            <th className="goa-table-number-header">File number</th>
-                            <th></th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                            {badgeValues.map((badge) => (
-                                <tr key={badge.key}>
-                                    <td>
-                                        <GoABadge type={badge.type as GoABadgeType} content={badge.content} />
-                                    </td>
-                                    <td>
-                                        Lorem ipsum dolor sit amet consectetur
-                                    </td>
-                                    <td className="goa-table-number-column">
-                                        1234567890
-                                    </td>
-                                    <td>
-                                        <GoAButton type="tertiary" onClick={onClick}}>
-                                            Assign
-                                        </GoAButton>
-                                    </td>
-                                </tr>
-                            ))}
-                        </tbody>
-                    </GoATable>
-                `}
-            />
-            <GoATable width="100%">
-                <thead>
-                  <tr>
-                    <th>Status</th>
-                    <th>Name</th>
-                    <th className="goa-table-number-header">File number</th>
-                    <th></th>
-                  </tr>
-                </thead>
-                <tbody>
-                    {badgeValues.map((badge) => (
-                        <tr key={badge.key}>
-                            <td>
-                                <GoABadge type={badge.type as GoABadgeType} content={badge.content} />
-                            </td>
-                            <td>
-                                Lorem ipsum dolor sit amet consectetur
-                            </td>
-                            <td className="goa-table-number-column">
-                                1234567890
-                            </td>
-                            <td>
-                                <GoAButton type="tertiary" onClick={noop}>
-                                    Assign
-                                </GoAButton>
-                            </td>
-                        </tr>
-                    ))}
-                </tbody>
-            </GoATable>
-        </Sandbox>
-
-        <h3 id="component-example-multiple-tags-together">Show multiple tags together</h3>
-        <Sandbox>
-            <GoABlock>
-                <GoABadge type="information" content="In progress"/>
-                <GoABadge type="important" content="Priority"/>
-                <GoABadge type="emergency" content="Past deadline"/>
-            </GoABlock>
-        </Sandbox>
-
-        <h3 id="component-example-show-status-card">Show a status on a card</h3>
-        <Sandbox fullWidth skipRender>
-            
-            <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                <goa-container type="non-interactive" accent="thick">
-                    <div slot="title">Heading</div>
-                    <div slot="actions">
-                        <goa-badge type="important" content="Priority"></goa-badge>
-                    </div>
-                    Content
-                </goa-container>     
-                `}
-            />
-
-            <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                    <GoAContainer
-                        type="non-interactive"
-                        accent="thick"
-                        heading="Heading"
-                        actions={<GoABadge type="important" content="Priority"/>}>
-                        Content
-                    </GoAContainer>
-                 `}
-            />
-
-          <GoAContainer
-            type="non-interactive"
-            accent="thick"
-            heading="Heading"
-            actions={<GoABadge type="important" content="Priority"/>}>
-            Content
-          </GoAContainer>
-        </Sandbox>
-        </>
-    )
-}
\ No newline at end of file
+import { BadgeShowStatusInTableExample } from "@examples/badge/BadgeShowStatusInTableExample.tsx";
+import { BadgeShowStatusOnCardExample } from "@examples/badge/BadgeShowStatusOnCardExample.tsx";
+
+export default function BadgeExamples() {
+  return (
+    <>
+      <h2 id="component-examples" className="hidden" aria-hidden="true">
+        Examples
+      </h2>
+
+      <h3 id="component-example-show-status-table">Show status in a table</h3>
+      <BadgeShowStatusInTableExample/>
+
+      <h3 id="component-example-multiple-tags-together">Show multiple tags together</h3>
+      <Sandbox>
+        <GoabBlock>
+          <GoabBadge type="information" content="In progress" />
+          <GoabBadge type="important" content="Priority" />
+          <GoabBadge type="emergency" content="Past deadline" />
+        </GoabBlock>
+      </Sandbox>
+
+      <h3 id="component-example-show-status-card">Show a status on a card</h3>
+      <BadgeShowStatusOnCardExample/>
+    </>
+  );
+}
diff --git a/src/examples/badge/BadgeShowStatusInTableExample.tsx b/src/examples/badge/BadgeShowStatusInTableExample.tsx
new file mode 100644
index 000000000..dedd06e77
--- /dev/null
+++ b/src/examples/badge/BadgeShowStatusInTableExample.tsx
@@ -0,0 +1,330 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabBadge, GoabButton, GoabTable } from "@abgov/react-components";
+import { GoabBadgeType } from "@abgov/ui-components-common";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { useContext } from "react";
+
+export const BadgeShowStatusInTableExample = () => {
+  const noop = () => {};
+  const {version} = useContext(LanguageVersionContext);
+  const badgeValues = [
+    {
+      key: 1,
+      type: "important",
+      content: "Pending",
+    },
+    {
+      key: 2,
+      type: "emergency",
+      content: "Failed",
+    },
+    {
+      key: 3,
+      type: "success",
+      content: "Complete",
+    },
+    {
+      key: 4,
+      type: "information",
+      content: "In progress",
+    },
+    {
+      key: 5,
+      type: "midtone",
+      content: "Closed",
+    },
+    {
+      key: 6,
+      type: "success",
+      content: "Complete",
+    },
+  ];
+  return (
+    <Sandbox fullWidth skipRender>
+      {/*Angular code*/}
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                    onClick($event: Event) {
+                        console.log("clicked");
+                    } 
+
+                    badgeValues = [
+                        {
+                            type: "important",
+                            content: "Pending",
+                        },
+                        {
+                            type: "emergency",
+                            content: "Failed",
+                        },
+                        {
+                            type: "success",
+                            content: "Complete",
+                        },
+                        {
+                            type: "information",
+                            content: "In progress",
+                        },
+                        {
+                            type: "midtone",
+                            content: "Closed",
+                        },
+                        {
+                            type: "success",
+                            content: "Complete",
+                        },
+                    ];
+                `}
+      />}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  badgeValues: {type: GoabBadgeType, content: string}[] = [
+                        {
+                            type: "important",
+                            content: "Pending",
+                        },
+                        {
+                            type: "emergency",
+                            content: "Failed",
+                        },
+                        {
+                            type: "success",
+                            content: "Complete",
+                        },
+                        {
+                            type: "information",
+                            content: "In progress",
+                        },
+                        {
+                            type: "midtone",
+                            content: "Closed",
+                        },
+                        {
+                            type: "success",
+                            content: "Complete",
+                        },
+                  ];
+                  
+                  onClick() {
+                        console.log("clicked");
+                  } 
+                `}
+      />}
+
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                    <goa-table width="100%">
+                        <thead>
+                            <tr>
+                                <th>Status</th>
+                                <th>Name</th>
+                                <th class="goa-table-number-header">File number</th>
+                                <th></th>
+                            </tr>
+                        </thead>
+
+                        <tbody>
+                            <tr *ngFor="let badge of badgeValues">
+                                <td>
+                                    <goa-badge [type]="badge.type" [content]="badge.content" />
+                                </td>
+                                <td>Lorem ipsum dolor sit amet consectetur.</td>
+                                <td class="goa-table-number-column">1234567890</td>
+                                <td>
+                                    <goa-button type="tertiary" (_click)="onClick($event)">Assign</goa-button>
+                                </td>
+                            </tr>
+                        </tbody>
+                    <goa-table>
+                `}
+      />}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                <goab-table width="100%">
+                <thead>
+                  <tr>
+                  <th>Status</th>
+                  <th>Name</th>
+                  <th class="goa-table-number-header">File number</th>
+                  <th></th>
+                  </tr>
+                </thead>
+
+                <tbody>
+                  <tr *ngFor="let badge of badgeValues">
+                    <td>
+                      <goab-badge [type]="badge.type" [content]="badge.content" />
+                    </td>
+                    <td>Lorem ipsum dolor sit amet consectetur.</td>
+                    <td class="goa-table-number-column">1234567890</td>
+                    <td>
+                      <goab-button type="tertiary" (onClick)="onClick()">Assign</goab-button>
+                    </td>
+                  </tr>
+                </tbody>
+                </goab-table>
+              `}
+      />}
+
+      {/*React code*/}
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                    function onClick() {
+                        console.log("clicked");
+                    }
+
+                    const badgeValues = [
+                        {
+                            key: 1,
+                            type: "important",
+                            content: "Pending"
+                        },
+                        {
+                            key: 2,
+                            type: "emergency",
+                            content: "Failed"
+                        },
+                        {
+                            key: 3,
+                            type: "success",
+                            content: "Complete"
+                        },
+                        {
+                            key: 4,
+                            type: "information",
+                            content: "In progress"
+                        },
+                        {
+                            key: 5,
+                            type: "midtone",
+                            content: "Closed"
+                        },
+                        {
+                            key: 6,
+                            type: "success",
+                            content: "Complete"
+                        }
+                    ]
+                `}
+      />
+
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                    <GoATable width="100%">
+                        <thead>
+                        <tr>
+                            <th>Status</th>
+                            <th>Name</th>
+                            <th className="goa-table-number-header">File number</th>
+                            <th></th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                            {badgeValues.map((badge) => (
+                                <tr key={badge.key}>
+                                    <td>
+                                        <GoABadge type={badge.type as GoABadgeType} content={badge.content} />
+                                    </td>
+                                    <td>
+                                        Lorem ipsum dolor sit amet consectetur
+                                    </td>
+                                    <td className="goa-table-number-column">
+                                        1234567890
+                                    </td>
+                                    <td>
+                                        <GoAButton type="tertiary" onClick={onClick}}>
+                                            Assign
+                                        </GoAButton>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </GoATable>
+                `}
+      />}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                    <GoabTable width="100%">
+                        <thead>
+                        <tr>
+                            <th>Status</th>
+                            <th>Name</th>
+                            <th className="goa-table-number-header">File number</th>
+                            <th></th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                            {badgeValues.map((badge) => (
+                                <tr key={badge.key}>
+                                    <td>
+                                        <GoabBadge type={badge.type as GoabBadgeType} content={badge.content} />
+                                    </td>
+                                    <td>
+                                        Lorem ipsum dolor sit amet consectetur
+                                    </td>
+                                    <td className="goa-table-number-column">
+                                        1234567890
+                                    </td>
+                                    <td>
+                                        <GoabButton type="tertiary" onClick={onClick}>
+                                            Assign
+                                        </GoabButton>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </GoabTable>
+                `}
+      />}
+
+      <GoabTable width="100%">
+        <thead>
+        <tr>
+          <th>Status</th>
+          <th>Name</th>
+          <th className="goa-table-number-header">File number</th>
+          <th></th>
+        </tr>
+        </thead>
+        <tbody>
+        {badgeValues.map(badge => (
+          <tr key={badge.key}>
+            <td>
+              <GoabBadge type={badge.type as GoabBadgeType} content={badge.content} />
+            </td>
+            <td>Lorem ipsum dolor sit amet consectetur</td>
+            <td className="goa-table-number-column">1234567890</td>
+            <td>
+              <GoabButton type="tertiary" onClick={noop}>
+                Assign
+              </GoabButton>
+            </td>
+          </tr>
+        ))}
+        </tbody>
+      </GoabTable>
+    </Sandbox>
+  )
+}
diff --git a/src/examples/badge/BadgeShowStatusOnCardExample.tsx b/src/examples/badge/BadgeShowStatusOnCardExample.tsx
new file mode 100644
index 000000000..66ff7288a
--- /dev/null
+++ b/src/examples/badge/BadgeShowStatusOnCardExample.tsx
@@ -0,0 +1,80 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabBadge, GoabContainer } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const BadgeShowStatusOnCardExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  return (
+    <Sandbox fullWidth skipRender>
+      {/*Angular code*/}
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                <goa-container type="non-interactive" accent="thick">
+                    <div slot="title">Heading</div>
+                    <div slot="actions">
+                        <goa-badge type="important" content="Priority"></goa-badge>
+                    </div>
+                    Content
+                </goa-container>     
+                `}
+      />}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+               <goab-container type="non-interactive" accent="thick" [title]="title" [actions]="actions">
+                <ng-template #title>Heading</ng-template>
+                <ng-template #actions>
+                  <goab-badge type="important" content="Priority"></goab-badge>
+                </ng-template>
+                  Content
+               </goab-container>
+          `}
+      />}
+
+      {/*React code*/}
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                    <GoAContainer
+                        type="non-interactive"
+                        accent="thick"
+                        heading="Heading"
+                        actions={<GoABadge type="important" content="Priority"/>}>
+                        Content
+                    </GoAContainer>
+                 `}
+      />}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+            <GoabContainer
+              type="non-interactive"
+              accent="thick"
+              heading="Heading"
+              actions={<GoabBadge type="important" content="Priority" />}>
+                Content
+            </GoabContainer>
+          `}
+      />}
+
+      <GoabContainer
+        type="non-interactive"
+        accent="thick"
+        heading="Heading"
+        actions={<GoabBadge type="important" content="Priority" />}>
+        Content
+      </GoabContainer>
+    </Sandbox>
+  )
+}
diff --git a/src/examples/button/ButtonAskUserAddressExample.tsx b/src/examples/button/ButtonAskUserAddressExample.tsx
new file mode 100644
index 000000000..89c557280
--- /dev/null
+++ b/src/examples/button/ButtonAskUserAddressExample.tsx
@@ -0,0 +1,141 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import {
+  GoabBlock,
+  GoabButton,
+  GoabButtonGroup,
+  GoabDropdown,
+  GoabDropdownItem,
+  GoabFormItem,
+  GoabInput,
+} from "@abgov/react-components";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { useContext } from "react";
+
+export const ButtonAskUserAddressExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const noop = () => {}
+  return (
+    <Sandbox flags={version === "new" ? ["reactive", "template-driven"] : ["reactive"]}>
+      {/*Reactive FormControl Angular Code Snippet*/}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags={["angular"]}
+        allowCopy={true}
+        code={`
+          export class ExampleComponent {
+            inputOnChange(event: GoabInputOnChangeDetail) {}we
+            dropdownOnChange(event: GoabDropdownOnChangeDetail) {}
+            onClick() {
+            // do nothing.
+            }
+          }
+        `}
+      />}
+
+      <CodeSnippet
+        lang="typescript"
+        tags={["angular", "reactive"]}
+        allowCopy={true}
+        code={`
+                  export class ExampleComponent {
+                    form!: FormGroup;
+                    constructor(private fb: FormBuilder) {
+                      this.form = this.fb.group({
+                        address: [''],
+                        suite: [''],
+                        city: [''],
+                        province: [''],
+                        postalCode: ['']
+                      });
+                    }
+                    onClick() {
+                      // do nothing.
+                    }
+                  }
+                `}
+      />
+
+      {/*Template driven Angular Code Snippet*/}
+      <CodeSnippet
+        lang="typescript"
+        tags={["angular", "template-driven"]}
+        allowCopy={true}
+        code={`
+                  export class ExampleComponent {
+                     address = '';
+                     suite = '';
+                     city = '';
+                     province = '';
+                     postalCode = '';
+                     
+                     inputOnChange(event: GoabInputOnChangeDetail) {}
+                     dropdownOnChange(event: GoabDropdownOnChangeDetail) {}
+                     onClick() {
+                      // do nothing.
+                      }
+                  }  
+                `}
+      />
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  function onClick() {
+                    // do nothing.
+                  }
+                  function inputOnChange(event: GoabInputOnChangeDetail) {}
+                  function dropdownOnChange(event: GoabDropdownOnChangeDetail) {}
+                `}
+      />}
+
+
+
+      <GoabBlock gap="xl" direction="column">
+        <form>
+          <GoabFormItem label="Street Address">
+            <GoabInput name="address" type="text" value="" onChange={noop} width="100%" />
+          </GoabFormItem>
+          <GoabFormItem label="Suite or unit #">
+            <GoabInput name="suite" type="text" value="" onChange={noop} width="100%" />
+          </GoabFormItem>
+          <GoabFormItem label="City/town">
+            <GoabInput name="city" type="text" value="" onChange={noop} width="100%" />
+          </GoabFormItem>
+
+          <GoabBlock direction={"row"}>
+            <GoabFormItem label="Provice/territory">
+              <GoabDropdown onChange={noop} name="province" value="alberta">
+                <GoabDropdownItem label="Alberta" value="alberta" />
+                <GoabDropdownItem label="BC" value="bc" />
+                <GoabDropdownItem label="Manitoba" value="manitoba" />
+                <GoabDropdownItem label="New Brunswick" value="new-brunswick" />
+                <GoabDropdownItem label="Newfoundland and Labrador" value="newfoundland" />
+                <GoabDropdownItem label="Nova Scotia" value="nova-scotia" />
+                <GoabDropdownItem label="Ontario" value="ontario" />
+                <GoabDropdownItem label="Prince Edward Island" value="prince-edward-island" />
+                <GoabDropdownItem label="Quebec" value="quebec" />
+                <GoabDropdownItem label="Saskatchewan" value="saskatchewan" />
+              </GoabDropdown>
+            </GoabFormItem>
+
+            <GoabFormItem label="Postal Code">
+              <GoabInput name="postalCode" type="text" value="" onChange={noop} width="100%" />
+            </GoabFormItem>
+          </GoabBlock>
+        </form>
+      </GoabBlock>
+
+      <GoabButtonGroup alignment="start" mt="2xl">
+        <GoabButton type="primary" onClick={noop}>
+          Submit and continue
+        </GoabButton>
+        <GoabButton type="secondary" onClick={noop}>
+          Cancel
+        </GoabButton>
+      </GoabButtonGroup>
+    </Sandbox>
+  );
+};
diff --git a/src/examples/button/ButtonConfirmDestructiveActionExample.tsx b/src/examples/button/ButtonConfirmDestructiveActionExample.tsx
new file mode 100644
index 000000000..8446c5204
--- /dev/null
+++ b/src/examples/button/ButtonConfirmDestructiveActionExample.tsx
@@ -0,0 +1,7 @@
+import { ModalConfirmDestructiveActionExample } from "@examples/modal/ModalConfirmDestructiveActionExample.tsx";
+
+export const ButtonConfirmDestructiveActionExample = () => {
+  return (
+    <ModalConfirmDestructiveActionExample/>
+  );
+};
diff --git a/src/examples/button/ButtonDisabledWithRequiredFieldExample.tsx b/src/examples/button/ButtonDisabledWithRequiredFieldExample.tsx
new file mode 100644
index 000000000..f0b2f0411
--- /dev/null
+++ b/src/examples/button/ButtonDisabledWithRequiredFieldExample.tsx
@@ -0,0 +1,105 @@
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { Sandbox } from "@components/sandbox";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { GoabButtonGroup, GoabButton, GoabFormItem, GoabInput } from "@abgov/react-components";
+
+
+export const ButtonDisabledWithRequiredFieldExample = () => {
+  const { version } = useContext(LanguageVersionContext);
+  const noop = () => {}
+  return (
+    <Sandbox flags={version === "new" ? ["reactive", "template-driven"] : ["reactive"]} allow={["form"]}>
+      {/*Reactive FormControl Angular Code Snippet*/}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags={["angular"]}
+        allowCopy={true}
+        code={`
+                  export class ExampleComponent {
+                     inputOnChange(event: GoabInputOnChangeDetail) {}
+                     onClick() {
+                      // do nothing.
+                     }
+                  }  
+                `}
+      />}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags={["angular", "reactive"]}
+        allowCopy={true}
+        code={`
+                  export class ExampleComponent {
+                    form!: FormGroup;
+                    constructor(private fb: FormBuilder) {
+                      this.form = this.fb.group({
+                        input: [''],
+                      });
+                    }
+                    onClick() {
+                      // do nothing.
+                    }
+                  }  
+                `}
+      />}
+
+      {/*Template driven Angular Code Snippet*/}
+      <CodeSnippet
+        lang="typescript"
+        tags={["angular", "template-driven"]}
+        allowCopy={true}
+        code={`
+                  export class ExampleComponent {
+                     input = '';
+                     inputOnChange(event: GoabInputOnChangeDetail) {
+                      this.input = event.value;
+                     }
+                     onClick() {
+                      // do nothing.
+                     }
+                  }
+                `}
+      />
+
+      {/*React*/}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags={"react"}
+        allowCopy={true}
+        code={`
+                 function onClick() {
+                  // do nothing.
+                 }
+                 function inputOnChange(event: GoabInputOnChangeDetail) {}
+                `}
+      />}
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags={"react"}
+        allowCopy={true}
+        code={`
+                 function onClick() {
+                  // do nothing.
+                 }
+                 onChange(name: string, value: string) {}
+                `}
+      />}
+
+      <form>
+        <GoabFormItem label="Name" requirement="required">
+          <GoabInput name="input" type="text" onChange={noop} width="100%" />
+        </GoabFormItem>
+
+        <GoabButtonGroup alignment="start" mt="l">
+          <GoabButton disabled={true} onClick={noop}>
+            Confirm
+          </GoabButton>
+          <GoabButton type="secondary" onClick={noop}>
+            Cancel
+          </GoabButton>
+        </GoabButtonGroup>
+      </form>
+    </Sandbox>
+);
+};
diff --git a/src/examples/button/ButtonExamples.tsx b/src/examples/button/ButtonExamples.tsx
new file mode 100644
index 000000000..1b04bbc12
--- /dev/null
+++ b/src/examples/button/ButtonExamples.tsx
@@ -0,0 +1,21 @@
+import { ButtonAskUserAddressExample } from "@examples/button/ButtonAskUserAddressExample.tsx";
+import { ButtonConfirmDestructiveActionExample } from "@examples/button/ButtonConfirmDestructiveActionExample.tsx";
+import { ButtonDisabledWithRequiredFieldExample } from "@examples/button/ButtonDisabledWithRequiredFieldExample.tsx";
+
+export const ButtonExamples = () => {
+
+  return <>
+    <h2 id="component-examples" className="hidden" aria-hidden="true">Examples</h2>
+    {/*Button Example 1*/}
+    <h3 id="component-example-ask-address">Ask a user for an address</h3>
+    <ButtonAskUserAddressExample/>
+
+    {/*Button example 2*/}
+    <h3 id="component-example-confirm-action">Confirm a destructive action</h3>
+    <ButtonConfirmDestructiveActionExample/>
+
+    {/*Button example */}
+    <h3 id="component-example-disabled-button">Disabled button with a required field</h3>
+    <ButtonDisabledWithRequiredFieldExample/>
+  </>;
+};
diff --git a/src/examples/callout/CalloutExamples.tsx b/src/examples/callout/CalloutExamples.tsx
new file mode 100644
index 000000000..c4ae797bb
--- /dev/null
+++ b/src/examples/callout/CalloutExamples.tsx
@@ -0,0 +1,142 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabButton, GoabButtonGroup, GoabCallout, GoabSpacer } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const CalloutExamples = () => {
+  const {version} = useContext(LanguageVersionContext);
+  return (
+    <>
+      <h3 id="component-example-confirm-application-submitted">Confirm that an application was submitted</h3>
+      <Sandbox fullWidth allow={['h2', 'h3', 'p']} skipRender>
+        {/*Angular code*/}
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                      <h2>You have completed the application</h2>
+
+                      <goa-callout type="success">
+                        <span slot="heading">Your application was successful</span>
+                        <p>You will receive a copy of the confirmation to the email person&#64;email.com</p>
+                        <p>Confirmation number: <strong>1234ABC</strong></p>
+                      </goa-callout>
+
+                      <h3>Go back to the dashboard, or direct your user somewhere else useful.</h3>
+                      <p>
+                        Other information about what was just completed, other tertiary information, and/or contact information.
+                        Phone: <a href="tel:7801234567">780 123 4567</a>
+                        Email: <a href="mailto:information&#64;gov.ab.ca">information&#64;gov.ab.ca</a>
+                      </p>
+
+                      <goa-button-group alignment="start">
+                        <goa-button type="primary">Go to application</goa-button>
+                        <goa-button type="secondary">Back to dashboard</goa-button>
+                      </goa-button-group>
+                    `}
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                    <h2>You have completed the application</h2>
+
+                    <goab-callout type="success" heading="Your application was successful">
+                        <p>You will receive a copy of the confirmation to the email person&#64;email.com</p>
+                        <p>Confirmation number: <strong>1234ABC</strong></p>
+                    </goab-callout>
+
+                    <h3>Go back to the dashboard, or direct your user somewhere else useful.</h3>
+                    <p>Other information about what was just completed, other tertiary information, and/or contact information.
+                    <br/>
+                    Phone: <a href="tel:7801234567">780 123 4567</a>
+                    <br/>
+                    Email: <a href="mailto:information&#64;gov.ab.ca">information&#64;gov.ab.ca</a>
+                    </p>
+
+                    <goab-button-group alignment="start">
+                      <goab-button type="primary">Go to application</goab-button>
+                      <goab-button type="secondary">Back to dashboard</goab-button>
+                    </goab-button-group>
+                `}
+        />}
+
+        {/*React code*/}
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                    <h2>You have completed the application</h2>
+
+                    <GoACallout type="success" heading="Your application was successful">
+                      <p>You will receive a copy of the confirmation to the email person@email.com</p>
+                      <p>Confirmation number: <strong>1234ABC</strong></p>
+                    </GoACallout>
+
+                    <h3>Go back to the dashboard, or direct your user somewhere else useful.</h3>
+                    <p>
+                      Other information about what was just completed, other tertiary information, and/or contact information.
+                      Phone: <a href="tel:7801234567">780 123 4567</a>
+                      Email: <a href="mailto:information@gov.ab.ca">information@gov.ab.ca</a>
+                    </p>
+
+                    <GoAButtonGroup alignment="start">
+                      <GoAButton type="primary">Go to application</GoAButton>
+                      <GoAButton type="secondary">Back to dashboard</GoAButton>
+                    </GoAButtonGroup>
+                  `}
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                    <h2>You have completed the application</h2>
+
+                    <GoabCallout type="success" heading="Your application was successful">
+                      <p>You will receive a copy of the confirmation to the email person@email.com</p>
+                      <p>Confirmation number: <strong>1234ABC</strong></p>
+                    </GoabCallout>
+
+                    <h3>Go back to the dashboard, or direct your user somewhere else useful.</h3>
+                    <p>
+                      Other information about what was just completed, other tertiary information, and/or contact information.
+                      <br />
+                      Phone: <a href="tel:7801234567">780 123 4567</a>
+                      <br />
+                      Email: <a href="mailto:information@gov.ab.ca">information@gov.ab.ca</a>
+                    </p>
+
+                    <GoabButtonGroup alignment="start" mt="l">
+                      <GoabButton type="primary">Go to application</GoabButton>
+                      <GoabButton type="secondary">Back to dashboard</GoabButton>
+                    </GoabButtonGroup>
+                  `}
+        />}
+
+        <h2 style={{ marginTop: 0 }}>You have completed the application</h2>
+        <GoabCallout type="success" heading="Your application was successful">
+          <p>You will receive a copy of the confirmation to the email person@email.com</p>
+          <p style={{ marginBottom: 0 }}>Confirmation number: <strong>1234ABC</strong></p>
+        </GoabCallout>
+        <h3>Go back to the dashboard, or direct your user somewhere else useful.</h3>
+        <p>
+          Other information about what was just completed, other tertiary information, and/or contact information.<br />
+          Phone: <a href="#">780 123 4567</a><br />
+          Email: <a href="#">information@gov.ab.ca</a>
+        </p>
+        <GoabSpacer vSpacing="l"></GoabSpacer>
+        <GoabButtonGroup alignment="start">
+          <GoabButton type="primary">Go to application</GoabButton>
+          <GoabButton type="secondary">Back to dashboard</GoabButton>
+        </GoabButtonGroup>
+      </Sandbox>
+    </>
+  )
+}
diff --git a/src/examples/checkbox/CheckboxExamples.tsx b/src/examples/checkbox/CheckboxExamples.tsx
index abb5203db..7b4f1f317 100644
--- a/src/examples/checkbox/CheckboxExamples.tsx
+++ b/src/examples/checkbox/CheckboxExamples.tsx
@@ -1,15 +1,19 @@
-import { GoACheckbox, GoAFormItem } from "@abgov/react-components";
+import { GoabCheckbox, GoabFormItem } from "@abgov/react-components";
 import { Sandbox } from "@components/sandbox";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
 
 export default function CheckboxExamples () {
+  const {version} = useContext(LanguageVersionContext);
   return (
     <>      
       <h2 id="component-examples" className="hidden" aria-hidden="true">Examples</h2>
       <h3 id="component-example-expand-collapse-form">Use tags in the description</h3>
       <Sandbox fullWidth skipRender>
         {/*Angular*/}
-        <CodeSnippet
+
+        {version === "old" && <CodeSnippet
         lang="typescript"
         tags="angular"
         allowCopy={true}
@@ -22,9 +26,27 @@ export default function CheckboxExamples () {
                 <goa-checkbox checked="false" name="optionThree" text="Option three" />
               </goa-form-item>
             `}
-        />
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+              <goab-form-item label="Select one or more options">
+                <goab-checkbox [checked]="true" name="optionOne" text="Option one" [description]="descriptionTemplate">
+                  <ng-template #descriptionTemplate>
+                    <span>Help text with a <a href="#">link</a>.</span>
+                  </ng-template>
+                </goab-checkbox>
+                <goab-checkbox [checked]="false" name="optionTwo" text="Option two" />
+                <goab-checkbox [checked]="false" name="optionThree" text="Option three" />
+              </goab-form-item>
+            `}
+        />}
+
         {/*React*/}
-        <CodeSnippet
+        {version === "old" && <CodeSnippet
         lang="typescript"
         tags="react"
         allowCopy={true}
@@ -40,18 +62,37 @@ export default function CheckboxExamples () {
                 <GoACheckbox checked={false} name="optionThree" text="Option three" />
               </GoAFormItem>
             `}
-        />
-        <GoAFormItem label="Select one or more options">
-          <GoACheckbox
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+              <GoabFormItem label="Select one or more options">
+                <GoabCheckbox
+                  checked={true}
+                  name="optionOne"
+                  text="Option one"
+                  description={<span>Help text with a <a href="#">link</a>.</span>}
+                  />
+                <GoabCheckbox checked={false} name="optionTwo" text="Option two" />
+                <GoabCheckbox checked={false} name="optionThree" text="Option three" />
+              </GoabFormItem>
+            `}
+        />}
+
+        <GoabFormItem label="Select one or more options">
+          <GoabCheckbox
             checked={true}
             name="optionOne"
             text="Option one"
             description={<span>Help text with a <a href="#">link</a>.</span>}
             />
-          <GoACheckbox checked={false} name="optionTwo" text="Option two" />
-          <GoACheckbox checked={false} name="optionThree" text="Option three" />
-        </GoAFormItem>
+          <GoabCheckbox checked={false} name="optionTwo" text="Option two" />
+          <GoabCheckbox checked={false} name="optionThree" text="Option three" />
+        </GoabFormItem>
       </Sandbox>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/examples/container/ContainerCardGridExample.tsx b/src/examples/container/ContainerCardGridExample.tsx
new file mode 100644
index 000000000..ec7b8cd78
--- /dev/null
+++ b/src/examples/container/ContainerCardGridExample.tsx
@@ -0,0 +1,87 @@
+import "./container-card-grid-example.css";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabContainer, GoabGrid } from "@abgov/react-components";
+import { Sandbox } from "@components/sandbox";
+
+export const ContainerCardGridExample = () => {
+  return (
+    <Sandbox fullWidth>
+      <CodeSnippet
+        lang="css"
+        allowCopy={true}
+        code={`
+            .container-example-3--container-title {
+              color: var(--goa-color-interactive-default);
+              font: var(--goa-typography-heading-m);
+              text-decoration-line: underline;
+              margin-top:0;
+              margin-bottom: var(--goa-space-m);
+            }
+            .container-example-3--container-content{
+              font: var(--goa-typography-body-m);
+            }
+          `}
+      />
+
+      <GoabGrid gap="xl" minChildWidth="320px">
+        <GoabContainer accent="thin" mb="none">
+          <a href="" className="container-example-3--container-title">
+            Waitlist submission
+          </a>
+          <div className="container-example-3--container-content">
+            Enter and maintain information about the households waiting for affordable housing
+            with your organization.
+          </div>
+        </GoabContainer>
+
+        <GoabContainer accent="thin" mb="none">
+          <a href="" className="container-example-3--container-title">
+            Lodge assistance program
+          </a>
+          <div className="container-example-3--container-content">
+            Keep track of the individuals who are placed in lodges and may qualify for the Lodge
+            Assistance Program subsidy.
+          </div>
+        </GoabContainer>
+
+        <GoabContainer accent="thin" mb="none">
+          <a className="container-example-3--container-title">Education Support</a>
+          <div className="container-example-3--container-content">
+            Explore educational resources, enroll in courses, and track your academic progress
+            effortlessly.
+          </div>
+        </GoabContainer>
+
+        <GoabContainer accent="thin" mb="none">
+          <a href="" className="container-example-3--container-title">
+            Social Assistance
+          </a>
+          <div className="container-example-3--container-content">
+            Learn about available support programs, apply for financial aid, and access community
+            resources.
+          </div>
+        </GoabContainer>
+
+        <GoabContainer accent="thin" mb="none">
+          <a href="" className="container-example-3--container-title">
+            Employment Opportunity
+          </a>
+          <div className="container-example-3--container-content">
+            Search for job openings, access career development tools, and receive
+            employment-related updates.
+          </div>
+        </GoabContainer>
+
+        <GoabContainer accent="thin" mb="none">
+          <a href="" className="container-example-3--container-title">
+            Housing Assistance
+          </a>
+          <div className="container-example-3--container-content">
+            Find affordable housing options, apply for housing subsidies, and report maintenance
+            issues seamlessly.
+          </div>
+        </GoabContainer>
+      </GoabGrid>
+    </Sandbox>
+  )
+}
diff --git a/src/examples/container/ContainerCaseFilesExample.tsx b/src/examples/container/ContainerCaseFilesExample.tsx
new file mode 100644
index 000000000..977da0199
--- /dev/null
+++ b/src/examples/container/ContainerCaseFilesExample.tsx
@@ -0,0 +1,95 @@
+import "./container-case-files-example.css";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabBadge, GoabBlock, GoabButton, GoabContainer } from "@abgov/react-components";
+import { Sandbox } from "@components/sandbox";
+
+export const ContainerCaseFilesExample = () => {
+  return (
+    <Sandbox fullWidth>
+      <CodeSnippet
+        lang="css"
+        allowCopy={true}
+        code={`
+            .container-example-2--container {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+            }
+            
+            span.container-example-2--body-text {
+              font: var(--goa-typography-body-s);
+            }
+            
+            .container-example-2--right-content {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+            }
+            
+            @media screen and (max-width: 623px) {
+              .container-example-2--container {
+                flex-direction: column;
+                justify-content: center;
+                align-items: stretch;
+              }
+              .container-example-2--right-content {
+                display:block;
+                margin-top: var(--goa-space-xs);
+              }
+            }
+          `}
+      />
+
+      <GoabContainer mt="l">
+        <div className="container-example-2--container">
+          <GoabBlock direction="column" gap="2xs" alignment="start">
+            <strong>Fiscal year: 2021/2022</strong>
+            <span className="container-example-2--body-text">Submitted: April 23, 2023</span>
+          </GoabBlock>
+          <div className="container-example-2--right-content">
+            <GoabBlock direction="row" alignment="center" gap="l">
+              <GoabBadge type="midtone" content="Not started"></GoabBadge>
+              <GoabButton type="tertiary" size="compact">
+                Edit
+              </GoabButton>
+            </GoabBlock>
+          </div>
+        </div>
+      </GoabContainer>
+
+      <GoabContainer>
+        <div className="container-example-2--container">
+          <GoabBlock direction="column" gap="2xs" alignment="start">
+            <strong>Fiscal year: 2020/2021</strong>
+            <span className="container-example-2--body-text">Submitted: April 9, 2022</span>
+          </GoabBlock>
+          <div className="container-example-2--right-content">
+            <GoabBlock direction="row" alignment="center" gap="l">
+              <GoabBadge type="important" content="Information needed"></GoabBadge>
+              <GoabButton type="tertiary" size="compact">
+                View
+              </GoabButton>
+            </GoabBlock>
+          </div>
+        </div>
+      </GoabContainer>
+
+      <GoabContainer>
+        <div className="container-example-2--container">
+          <GoabBlock direction="column" gap="2xs" alignment="start">
+            <strong>Fiscal year: 2019/2020</strong>
+            <span className="container-example-2--body-text">Submitted: April 14, 2021</span>
+          </GoabBlock>
+          <div className="container-example-2--right-content">
+            <GoabBlock direction="row" alignment="center" gap="l">
+              <GoabBadge type="success" content="Approved"></GoabBadge>
+              <GoabButton type="tertiary" size="compact">
+                View
+              </GoabButton>
+            </GoabBlock>
+          </div>
+        </div>
+      </GoabContainer>
+    </Sandbox>
+  )
+}
diff --git a/src/examples/container/ContainerExamples.tsx b/src/examples/container/ContainerExamples.tsx
index 4a31e438e..2024aa90b 100644
--- a/src/examples/container/ContainerExamples.tsx
+++ b/src/examples/container/ContainerExamples.tsx
@@ -1,501 +1,26 @@
-import {
-  GoABadge,
-  GoABlock,
-  GoAButton,
-  GoAContainer, GoADropdown, GoADropdownItem, GoAFormItem,
-  GoAGrid, GoARadioGroup, GoARadioItem,
-  GoATable, GoATextArea
-} from "@abgov/react-components";
-import { Sandbox } from "@components/sandbox";
-import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
-import "./container-example.css";
+import { ContainerUserInformationExample } from "@examples/container/ContainerUserInformationExample.tsx";
+import { ContainerCaseFilesExample } from "@examples/container/ContainerCaseFilesExample.tsx";
+import { ContainerCardGridExample } from "@examples/container/ContainerCardGridExample.tsx";
+import { ContainerReviewActionExample } from "@examples/container/ContainerReviewActionExample.tsx";
 
 export default function ContainerExamples() {
   return (
     <>
       {/*Container examples*/}
-      <h2 id="component-examples" className="hidden" aria-hidden="true">Examples</h2>
+      <h2 id="component-examples" className="hidden" aria-hidden="true">
+        Examples
+      </h2>
       <h3 id="component-example-1">User information</h3>
-      <Sandbox fullWidth skipRender>
-        {/*CSS Code Snippet*/}
-        <CodeSnippet
-          lang="css"
-          allowCopy={true}
-          code={`
-            .container-example-1--sub-header {
-              color: var(--goa-color-greyscale-700);
-              font: var(--goa-typography-body-m);
-            }
-
-            .container-example-1--header {
-              color: var(--goa-color-greyscale-700);
-              font-size: var(--goa-font-size-7);
-              font-weight: var(--goa-font-weight-bold);
-              line-height: var(--goa-line-height-4);
-              margin-bottom: var(--goa-space-s);
-            }
-
-            span.container-example-1--contact-label {
-              color: var(--goa-color-greyscale-700);
-              font: var(--goa-typography-heading-s);
-            }
-
-            span.container-example-1--contact-value {
-              color: var(--goa-color-greyscale-700);
-              font: var(--goa-typography-body-m);
-            }
-           
-            .container-example-1 goa-table tbody.striped tr:nth-child(even) {
-              background-color: #F8F8F8;
-            }
-            .container-example-1 goa-table td.align-right {
-              text-align: right;
-            }
-          `}
-        />
-
-        {/*Angular Code Snippet*/}
-        <CodeSnippet
-          lang="typescript"
-          tags="angular"
-          allowCopy={true}
-          code={`
-            <goa-container>
-                <span class="container-example-1--sub-header">Housing Advisor</span>
-                <p class="container-example-1--header">Tracy Hero</p>
-                <goa-block direction="row" gap="m">
-                  <goa-block direction="column" gap="m">
-                    <span class="container-example-1--contact-label">Email</span>
-                    <span class="container-example-1--contact-label">Phone</span>
-                  </goa-block>
-                  
-                  <goa-block direction="column" gap="m">
-                    <span class="container-example-1--contact-value">tracyhero@email.com</span>
-                    <span class="container-example-1--contact-value">283-203-4921</span>
-                  </goa-block>
-                </goa-block>
-              </div>
-            </goa-container>
-
-            <goa-container type="non-interactive" accent="thick">
-              <div slot="title">Upcoming important due dates</div>
-              <div slot="actions">
-                <goa-button type="tertiary" size="compact" leadingicon="calendar" (_click)="onClick($event)">
-                    Add to calendar
-                </goa-button>
-              </div>
-              
-              <div class="container-example-1">
-                <goa-table width="100%">
-                  <tbody class="striped">
-                    <tr>
-                      <td>Business plan submission</td>
-                      <td class="align-right">June 30, 2024</td>
-                    </tr>
-                    <tr>
-                      <td>Annual review</td>
-                      <td class="align-right">October 3, 2024</td>
-                    </tr>
-                    <tr>
-                      <td>Application submission</td>
-                      <td class="align-right">December 20, 2024</td>
-                    </tr>
-                    <tr>
-                      <td>Application review</td>
-                      <td class="align-right">January 3, 2025</td>
-                    </tr>
-                  </tbody>
-                </goa-table>
-              </div>
-            </goa-container>     
-          `}
-        />
-
-        {/*React*/}
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
-          const actions = (
-            <GoAButton type="tertiary" size="compact" leadingIcon="calendar" onClick={() => {}}>
-                Add to calendar
-            </GoAButton>);
-          `}
-        />
-
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
-          <GoAContainer>
-            <span className="container-example-1--sub-header">Housing Advisor</span>
-            <p className="container-example-1--header">Tracy Hero</p>
-            <GoABlock direction="row" gap="m">
-              <GoABlock direction="column" gap="m">
-                <span className="container-example-1--contact-label">Email</span>
-                <span className="container-example-1--contact-label">Phone</span>
-              </GoABlock>
-
-              <GoABlock direction="column" gap="m">
-                <span className="container-example-1--contact-value">tracyhero@email.com</span>
-                <span className="container-example-1--contact-value">283-203-4921</span>
-              </GoABlock>
-            </GoABlock>
-          </GoAContainer>
-
-          <GoAContainer
-            type="non-interactive"
-            accent="thick"
-            heading="Upcoming important due dates"
-            actions={actions}>
-            <div className="container-example-1">
-              <GoATable width="100%">
-                <tbody className="striped">
-                  <tr>
-                    <td>Business plan submission</td>
-                    <td className="align-right">June 30, 2024</td>
-                  </tr>
-                  <tr>
-                    <td>Annual review</td>
-                    <td className="align-right">October 3, 2024</td>
-                  </tr>
-                  <tr>
-                    <td>Application submission</td>
-                    <td className="align-right">December 20, 2024</td>
-                  </tr>
-                  <tr>
-                    <td>Application review</td>
-                    <td className="align-right">January 3, 2025</td>
-                  </tr>
-                </tbody>
-              </GoATable>
-            </div>
-          </GoAContainer>
-          `}
-        />
-
-        {/*Code Block*/}
-        <GoAContainer>
-          <span className="container-example-1--sub-header">Housing Advisor</span>
-          <p className="container-example-1--header">Tracy Hero</p>
-          <GoABlock direction="row" gap="m">
-            <GoABlock direction="column" gap="m">
-              <span className="container-example-1--contact-label">Email</span>
-              <span className="container-example-1--contact-label">Phone</span>
-            </GoABlock>
-
-            <GoABlock direction="column" gap="m">
-              <span className="container-example-1--contact-value">tracyhero@email.com</span>
-              <span className="container-example-1--contact-value">283-203-4921</span>
-            </GoABlock>
-          </GoABlock>
-        </GoAContainer>
-
-        <GoAContainer
-          type="non-interactive"
-          accent="thick"
-          heading="Upcoming important due dates"
-          actions={
-            <GoAButton type="tertiary" size="compact" leadingIcon="calendar" onClick={() => {}}>
-              Add to calendar
-            </GoAButton>
-          }>
-          <div className="container-example-1">
-            <GoATable width="100%">
-              <tbody className="striped">
-                <tr>
-                  <td>Business plan submission</td>
-                  <td className="align-right">June 30, 2024</td>
-                </tr>
-                <tr>
-                  <td>Annual review</td>
-                  <td className="align-right">October 3, 2024</td>
-                </tr>
-                <tr>
-                  <td>Application submission</td>
-                  <td className="align-right">December 20, 2024</td>
-                </tr>
-                <tr>
-                  <td>Application review</td>
-                  <td className="align-right">January 3, 2025</td>
-                </tr>
-              </tbody>
-            </GoATable>
-          </div>
-        </GoAContainer>
-      </Sandbox>
+      <ContainerUserInformationExample/>
 
       <h3 id="component-example-2">Card view of case files</h3>
-      <Sandbox fullWidth>
-        <CodeSnippet
-          lang="css"
-          allowCopy={true}
-          code={`
-            .container-example-2--container {
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-            }
-            
-            span.container-example-2--body-text {
-              font: var(--goa-typography-body-s);
-            }
-            
-            .container-example-2--right-content {
-              display: flex;
-              flex-direction: column;
-              align-items: center;
-            }
-            
-            @media screen and (max-width: 623px) {
-              .container-example-2--container {
-                flex-direction: column;
-                justify-content: center;
-                align-items: stretch;
-              }
-              .container-example-2--right-content {
-                display:block;
-                margin-top: var(--goa-space-xs);
-              }
-            }
-          `}
-        />
-
-        <GoAContainer mt="l">
-          <div className="container-example-2--container">
-            <GoABlock direction="column" gap="2xs" alignment="start">
-              <strong>Fiscal year: 2021/2022</strong>
-              <span className="container-example-2--body-text">Submitted: April 23, 2023</span>
-            </GoABlock>
-            <div className="container-example-2--right-content">
-              <GoABlock direction="row" alignment="center" gap="l">
-                <GoABadge type="midtone" content="Not started"></GoABadge>
-                <GoAButton type="tertiary" size="compact">
-                  Edit
-                </GoAButton>
-              </GoABlock>
-            </div>
-          </div>
-        </GoAContainer>
-
-        <GoAContainer>
-          <div className="container-example-2--container">
-            <GoABlock direction="column" gap="2xs" alignment="start">
-              <strong>Fiscal year: 2020/2021</strong>
-              <span className="container-example-2--body-text">Submitted: April 9, 2022</span>
-            </GoABlock>
-            <div className="container-example-2--right-content">
-              <GoABlock direction="row" alignment="center" gap="l">
-                <GoABadge type="important" content="Information needed"></GoABadge>
-                <GoAButton type="tertiary" size="compact">
-                  View
-                </GoAButton>
-              </GoABlock>
-            </div>
-          </div>
-        </GoAContainer>
-
-        <GoAContainer>
-          <div className="container-example-2--container">
-            <GoABlock direction="column" gap="2xs" alignment="start">
-              <strong>Fiscal year: 2019/2020</strong>
-              <span className="container-example-2--body-text">Submitted: April 14, 2021</span>
-            </GoABlock>
-            <div className="container-example-2--right-content">
-              <GoABlock direction="row" alignment="center" gap="l">
-                <GoABadge type="success" content="Approved"></GoABadge>
-                <GoAButton type="tertiary" size="compact">
-                  View
-                </GoAButton>
-              </GoABlock>
-            </div>
-          </div>
-        </GoAContainer>
-      </Sandbox>
+      <ContainerCaseFilesExample/>
 
       <h3 id="component-example-3">Card grid that links to different sections</h3>
-      <Sandbox fullWidth>
-        <CodeSnippet
-          lang="css"
-          allowCopy={true}
-          code={`
-            .container-example-3--container-title {
-              color: var(--goa-color-interactive-default);
-              font: var(--goa-typography-heading-m);
-              text-decoration-line: underline;
-              margin-top:0;
-              margin-bottom: var(--goa-space-m);
-            }
-            .container-example-3--container-content{
-              font: var(--goa-typography-body-m);
-            }
-          `}
-        />
-
-        <GoAGrid gap="xl" minChildWidth="320px">
-          <GoAContainer accent="thin" mb="none">
-            <a href="" className="container-example-3--container-title">Waitlist submission</a>
-            <div className="container-example-3--container-content">
-              Enter and maintain information about the households waiting for affordable housing
-              with your organization.
-            </div>
-          </GoAContainer>
-
-          <GoAContainer accent="thin" mb="none">
-            <a href="" className="container-example-3--container-title">Lodge assistance program</a>
-            <div className="container-example-3--container-content">
-              Keep track of the individuals who are placed in lodges and may qualify for the Lodge
-              Assistance Program subsidy.
-            </div>
-          </GoAContainer>
-
-          <GoAContainer accent="thin" mb="none">
-            <a className="container-example-3--container-title">Education Support</a>
-            <div className="container-example-3--container-content">
-              Explore educational resources, enroll in courses, and track your academic progress
-              effortlessly.
-            </div>
-          </GoAContainer>
-
-          <GoAContainer accent="thin" mb="none">
-            <a href="" className="container-example-3--container-title">Social Assistance</a>
-            <div className="container-example-3--container-content">
-              Learn about available support programs, apply for financial aid, and access community
-              resources.
-            </div>
-          </GoAContainer>
-
-          <GoAContainer accent="thin" mb="none">
-            <a href=""  className="container-example-3--container-title">Employment Opportunity</a>
-            <div className="container-example-3--container-content">
-              Search for job openings, access career development tools, and receive
-              employment-related updates.
-            </div>
-          </GoAContainer>
-
-          <GoAContainer accent="thin" mb="none">
-            <a href="" className="container-example-3--container-title">Housing Assistance</a>
-            <div className="container-example-3--container-content">
-              Find affordable housing options, apply for housing subsidies, and report maintenance
-              issues seamlessly.
-            </div>
-          </GoAContainer>
-        </GoAGrid>
-      </Sandbox>
+      <ContainerCardGridExample/>
 
       <h3 id="example-4">Review and action</h3>
-      <Sandbox fullWidth flags={["reactive"]}>
-
-        <CodeSnippet
-          lang="css"
-          allowCopy={true}
-          code={`
-            h3.container-example-4--h3 {
-              margin-bottom: var(--goa-space-m);
-            }
-            label.container-example-4--label {
-              font: var(--goa-typography-body-s);
-              color: var(--goa-color-text-secondary);
-            }
-            .container-example-4--container-content {
-              font: var(--goa-typography-body-m);
-            }
-            p.container-example-4--container-content {
-              margin-bottom: 0;
-            }
-
-            h5.container-example-4--h5 {
-              font: var(--goa-typography-body-m);
-              color: var(--goa-color-text-secondary);
-              margin-top: var(--goa-space-m);
-              margin-bottom: var(--goa-space-m);
-            }
-
-            h6.container-example-4--h6 {
-              font: var(--goa-typography-heading-s);
-              margin-top:0;
-              margin-bottom: 0;
-            }
-          `}
-        />
-
-        <GoAGrid minChildWidth="315px">
-          <GoAContainer accent="thin" type="non-interactive">
-            <h3 className="container-example-4--h3">Appearance details</h3>
-            <GoAGrid minChildWidth="40%" gap="m">
-              <GoABlock direction="column" gap="xs">
-                <label className="container-example-4--label">Accused name</label>
-                <span className="container-example-4--container-content">Doe, John Scott</span>
-              </GoABlock>
-
-              <GoABlock direction="column" gap="xs">
-                <label className="container-example-4--label">Date of birth</label>
-                <span className="container-example-4--container-content">Mar 14, 2021</span>
-              </GoABlock>
-
-              <GoABlock direction="column" gap="xs">
-                <label className="container-example-4--label">Court location</label>
-                <span className="container-example-4--container-content">Calgary</span>
-              </GoABlock>
-
-              <GoABlock direction="column" gap="xs">
-                <label className="container-example-4--label">Upcoming appearance date(s)</label>
-                <span className="container-example-4--container-content">Sep 20, 2021</span>
-              </GoABlock>
-            </GoAGrid>
-
-            <h5 className="container-example-4--h5">Docket number(s) $ charges</h5>
-            <GoAContainer type="non-interactive">
-              <h6 className="container-example-4--h6">1) 12345678</h6>
-              <p className="container-example-4--container-content">CC 334(1) - Theft under $5000</p>
-              <p className="container-example-4--container-content">CC 268(1) - Aggravated assult</p>
-            </GoAContainer>
-
-            <GoAContainer type="non-interactive">
-              <h6 className="container-example-4--h6">2) 12345678</h6>
-              <p className="container-example-4--container-content">CC 334(1) - Theft under $5000</p>
-              <p className="container-example-4--container-content">CC 268(1) - Aggravated assult</p>
-            </GoAContainer>
-
-            <GoAContainer type="non-interactive">
-              <h6 className="container-example-4--h6">3) 12345678</h6>
-              <p className="container-example-4--container-content">
-                CC 334(1) - Theft under $5000
-              </p>
-              <p className="container-example-4--container-content">
-                CC 268(1) - Aggravated assult
-              </p>
-            </GoAContainer>
-          </GoAContainer>
-          <GoAContainer accent="thin">
-            <h3 className="container-example-4--h3">Adjournment request</h3>
-            <p className="container-example-4--container-content">Keep track of the individuals who are placed in lodges and may qualify for the Lodge Assistance Program subsidy.</p>
-
-            <GoAFormItem label="Case history and new request" mt="l">
-              <GoARadioGroup name="case" onChange={() => {}}>
-                <GoARadioItem value="grant" label="Grant"></GoARadioItem>
-                <GoARadioItem value="deny" label="Deny"></GoARadioItem>
-              </GoARadioGroup>
-            </GoAFormItem>
-
-            <GoAFormItem label="Reason to deny">
-              <GoADropdown name="reason" onChange={() => {}}>
-                <GoADropdownItem value="1" label="Incomplete Application"></GoADropdownItem>
-                <GoADropdownItem value="2" label="Eligibility Criteria Not Met"></GoADropdownItem>
-                <GoADropdownItem value="3" label="Documentation Verification Failure"></GoADropdownItem>
-              </GoADropdown>
-            </GoAFormItem>
-
-            <GoAFormItem label="Message" mt="l">
-              <GoATextArea name="message" rows={5} value="" onChange={() => {}}/>
-            </GoAFormItem>
-
-            <GoAButton mt="xl" onClick={()=> {}}>Confirm</GoAButton>
-          </GoAContainer>
-        </GoAGrid>
-      </Sandbox>
+      <ContainerReviewActionExample/>
     </>
   );
 }
diff --git a/src/examples/container/ContainerReviewActionExample.tsx b/src/examples/container/ContainerReviewActionExample.tsx
new file mode 100644
index 000000000..131e8100c
--- /dev/null
+++ b/src/examples/container/ContainerReviewActionExample.tsx
@@ -0,0 +1,184 @@
+import "./container-review-action-example.css";
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import {
+  GoabBlock, GoabButton,
+  GoabContainer, GoabDropdown, GoabDropdownItem,
+  GoabFormItem,
+  GoabGrid,
+  GoabRadioGroup, GoabRadioItem, GoabTextarea
+} from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const ContainerReviewActionExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  return (
+    <Sandbox fullWidth flags={["reactive"]}>
+      <CodeSnippet
+        lang="css"
+        allowCopy={true}
+        code={`
+            h3.container-example-4--h3 {
+              margin-bottom: var(--goa-space-m);
+            }
+            label.container-example-4--label {
+              font: var(--goa-typography-body-s);
+              color: var(--goa-color-text-secondary);
+            }
+            .container-example-4--container-content {
+              font: var(--goa-typography-body-m);
+            }
+            p.container-example-4--container-content {
+              margin-bottom: 0;
+            }
+
+            h5.container-example-4--h5 {
+              font: var(--goa-typography-body-m);
+              color: var(--goa-color-text-secondary);
+              margin-top: var(--goa-space-m);
+              margin-bottom: var(--goa-space-m);
+            }
+
+            h6.container-example-4--h6 {
+              font: var(--goa-typography-heading-s);
+              margin-top:0;
+              margin-bottom: 0;
+            }
+          `}
+      />
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags={["angular", "reactive"]}
+        allowCopy={true}
+        code={`
+                  export class ExampleComponent {
+                    form!: FormGroup;
+                    constructor(private fb: FormBuilder) {
+                      this.form = this.fb.group({
+                        case: [''],
+                        reason: ['']
+                      })
+                    }
+                    onClick() {
+                      console.log("clicked!");
+                    }
+                  }  
+                `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags={"react"}
+        allowCopy={true}
+        code={`
+        const radioGroupOnChange = (event: GoabRadioGroupOnChangeDetail) => {
+          console.log(event.value);
+        };
+        const dropdownOnChange = (event: GoabDropdownOnChangeDetail) => {
+          console.log(event.value);
+        };
+        const textareaOnChange = (event: GoabTextAreaOnChangeDetail) => {
+          console.log(event.value);
+        };
+        const onClick = () => {
+          console.log('clicked!');
+        };  
+        `}
+      />}
+
+      <GoabGrid minChildWidth="315px">
+        <GoabContainer accent="thin" type="non-interactive">
+          <h3 className="container-example-4--h3">Appearance details</h3>
+          <GoabGrid minChildWidth="40%" gap="m">
+            <GoabBlock direction="column" gap="xs">
+              <label className="container-example-4--label">Accused name</label>
+              <span className="container-example-4--container-content">Doe, John Scott</span>
+            </GoabBlock>
+
+            <GoabBlock direction="column" gap="xs">
+              <label className="container-example-4--label">Date of birth</label>
+              <span className="container-example-4--container-content">Mar 14, 2021</span>
+            </GoabBlock>
+
+            <GoabBlock direction="column" gap="xs">
+              <label className="container-example-4--label">Court location</label>
+              <span className="container-example-4--container-content">Calgary</span>
+            </GoabBlock>
+
+            <GoabBlock direction="column" gap="xs">
+              <label className="container-example-4--label">Upcoming appearance date(s)</label>
+              <span className="container-example-4--container-content">Sep 20, 2021</span>
+            </GoabBlock>
+          </GoabGrid>
+
+          <h5 className="container-example-4--h5">Docket number(s) $ charges</h5>
+          <GoabContainer type="non-interactive">
+            <h6 className="container-example-4--h6">1) 12345678</h6>
+            <p className="container-example-4--container-content">
+              CC 334(1) - Theft under $5000
+            </p>
+            <p className="container-example-4--container-content">
+              CC 268(1) - Aggravated assult
+            </p>
+          </GoabContainer>
+
+          <GoabContainer type="non-interactive">
+            <h6 className="container-example-4--h6">2) 12345678</h6>
+            <p className="container-example-4--container-content">
+              CC 334(1) - Theft under $5000
+            </p>
+            <p className="container-example-4--container-content">
+              CC 268(1) - Aggravated assult
+            </p>
+          </GoabContainer>
+
+          <GoabContainer type="non-interactive">
+            <h6 className="container-example-4--h6">3) 12345678</h6>
+            <p className="container-example-4--container-content">
+              CC 334(1) - Theft under $5000
+            </p>
+            <p className="container-example-4--container-content">
+              CC 268(1) - Aggravated assult
+            </p>
+          </GoabContainer>
+        </GoabContainer>
+        <GoabContainer accent="thin" width={"content"}>
+          <form>
+            <h3 className="container-example-4--h3">Adjournment request</h3>
+            <p className="container-example-4--container-content">
+              Keep track of the individuals who are placed in lodges and may qualify for the Lodge
+              Assistance Program subsidy.
+            </p>
+
+            <GoabFormItem label="Case history and new request" mt="l">
+              <GoabRadioGroup name="case" onChange={() => {}}>
+                <GoabRadioItem value="grant" label="Grant"></GoabRadioItem>
+                <GoabRadioItem value="deny" label="Deny"></GoabRadioItem>
+              </GoabRadioGroup>
+            </GoabFormItem>
+
+            <GoabFormItem label="Reason to deny">
+              <GoabDropdown name="reason" width="100%" onChange={() => {}}>
+                <GoabDropdownItem value="1" label="Incomplete Application"></GoabDropdownItem>
+                <GoabDropdownItem value="2" label="Eligibility Criteria Not Met"></GoabDropdownItem>
+                <GoabDropdownItem
+                  value="3"
+                  label="Documentation Verification Failure"></GoabDropdownItem>
+              </GoabDropdown>
+            </GoabFormItem>
+
+            <GoabFormItem label="Message" mt="l">
+              <GoabTextarea name="message" rows={5} width="100%" value="" onChange={() => {}} />
+            </GoabFormItem>
+
+            <GoabButton mt="xl" onClick={() => {}}>
+              Confirm
+            </GoabButton>
+          </form>
+        </GoabContainer>
+      </GoabGrid>
+    </Sandbox>
+  )
+}
diff --git a/src/examples/container/ContainerUserInformationExample.tsx b/src/examples/container/ContainerUserInformationExample.tsx
new file mode 100644
index 000000000..85d395d44
--- /dev/null
+++ b/src/examples/container/ContainerUserInformationExample.tsx
@@ -0,0 +1,367 @@
+import "./container-user-information-example.css";
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabBlock, GoabButton, GoabContainer, GoabTable } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const ContainerUserInformationExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+
+  return (
+    <Sandbox fullWidth skipRender>
+      {/*CSS Code Snippet*/}
+      <CodeSnippet
+        lang="css"
+        allowCopy={true}
+        code={`
+            .container-example-1--sub-header {
+              color: var(--goa-color-greyscale-700);
+              font: var(--goa-typography-body-m);
+            }
+
+            .container-example-1--header {
+              color: var(--goa-color-greyscale-700);
+              font-size: var(--goa-font-size-7);
+              font-weight: var(--goa-font-weight-bold);
+              line-height: var(--goa-line-height-4);
+              margin-bottom: var(--goa-space-s);
+            }
+
+            span.container-example-1--contact-label {
+              color: var(--goa-color-greyscale-700);
+              font: var(--goa-typography-heading-s);
+            }
+
+            span.container-example-1--contact-value {
+              color: var(--goa-color-greyscale-700);
+              font: var(--goa-typography-body-m);
+            }
+           
+            .container-example-1 goa-table tbody.striped tr:nth-child(even) {
+              background-color: #F8F8F8;
+            }
+            .container-example-1 goa-table td.align-right {
+              text-align: right;
+            }
+          `}
+      />
+
+      {/*Angular Code Snippet*/}
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            <goa-container>
+                <span class="container-example-1--sub-header">Housing Advisor</span>
+                <p class="container-example-1--header">Tracy Hero</p>
+                <goa-block direction="row" gap="m">
+                  <goa-block direction="column" gap="m">
+                    <span class="container-example-1--contact-label">Email</span>
+                    <span class="container-example-1--contact-label">Phone</span>
+                  </goa-block>
+                  
+                  <goa-block direction="column" gap="m">
+                    <span class="container-example-1--contact-value">tracyhero@email.com</span>
+                    <span class="container-example-1--contact-value">283-203-4921</span>
+                  </goa-block>
+                </goa-block>
+              </div>
+            </goa-container>
+
+            <goa-container type="non-interactive" accent="thick">
+              <div slot="title">Upcoming important due dates</div>
+              <div slot="actions">
+                <goa-button type="tertiary" size="compact" leadingicon="calendar" (_click)="onClick($event)">
+                    Add to calendar
+                </goa-button>
+              </div>
+              
+              <div class="container-example-1">
+                <goa-table width="100%">
+                  <tbody class="striped">
+                    <tr>
+                      <td>Business plan submission</td>
+                      <td class="align-right">June 30, 2024</td>
+                    </tr>
+                    <tr>
+                      <td>Annual review</td>
+                      <td class="align-right">October 3, 2024</td>
+                    </tr>
+                    <tr>
+                      <td>Application submission</td>
+                      <td class="align-right">December 20, 2024</td>
+                    </tr>
+                    <tr>
+                      <td>Application review</td>
+                      <td class="align-right">January 3, 2025</td>
+                    </tr>
+                  </tbody>
+                </goa-table>
+              </div>
+            </goa-container>
+          `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            export class SomeComponent {
+              onClick() {
+                console.log("clicked!");
+              }
+            }
+          `}
+        />
+      )}
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            <goab-container>
+              <span class="container-example-1--sub-header">Housing Advisor</span>
+              <p class="container-example-1--header">Tracy Hero</p>
+              <goab-block direction="row" gap="m">
+                <goab-block direction="column" gap="m">
+                  <span class="container-example-1--contact-label">Email</span>
+                  <span class="container-example-1--contact-label">Phone</span>
+                </goab-block>
+
+                <goab-block direction="column" gap="m">
+                  <span class="container-example-1--contact-value">tracyhero&#64;email.com</span>
+                  <span class="container-example-1--contact-value">283-203-4921</span>
+                </goab-block>
+              </goab-block>
+            </goab-container>
+            
+            <goab-container type="non-interactive" accent="thick">
+              <div slot="title">Upcoming important due dates</div>
+              <div slot="actions">
+                <goab-button type="tertiary" size="compact" leadingIcon="calendar" (onClick)="onClick()">
+                  Add to calendar
+                </goab-button>
+              </div>
+
+            <div class="container-example-1">
+              <goab-table width="100%">
+                <tbody class="striped">
+                  <tr>
+                    <td>Business plan submission</td>
+                    <td class="align-right">June 30, 2024</td>
+                  </tr>
+                  <tr>
+                    <td>Annual review</td>
+                    <td class="align-right">October 3, 2024</td>
+                  </tr>
+                  <tr>
+                    <td>Application submission</td>
+                    <td class="align-right">December 20, 2024</td>
+                  </tr>
+                  <tr>
+                    <td>Application review</td>
+                    <td class="align-right">January 3, 2025</td>
+                  </tr>
+                </tbody>
+              </goab-table>
+            </div>
+          </goab-container>
+          `}
+        />
+      )}
+
+      {/*React*/}
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+          const actions = (
+            <GoAButton type="tertiary" size="compact" leadingIcon="calendar" onClick={() => {/* do nothing */}}>
+                Add to calendar
+            </GoAButton>);
+          `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+          const actions = (
+            <GoabButton type="tertiary" size="compact" leadingIcon="calendar" onClick={() => {/* do nothing */}}>
+                Add to calendar
+            </GoabButton>);
+          `}
+        />
+      )}
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+          <GoAContainer>
+            <span className="container-example-1--sub-header">Housing Advisor</span>
+            <p className="container-example-1--header">Tracy Hero</p>
+            <GoABlock direction="row" gap="m">
+              <GoABlock direction="column" gap="m">
+                <span className="container-example-1--contact-label">Email</span>
+                <span className="container-example-1--contact-label">Phone</span>
+              </GoABlock>
+
+              <GoABlock direction="column" gap="m">
+                <span className="container-example-1--contact-value">tracyhero@email.com</span>
+                <span className="container-example-1--contact-value">283-203-4921</span>
+              </GoABlock>
+            </GoABlock>
+          </GoAContainer>
+
+          <GoAContainer
+            type="non-interactive"
+            accent="thick"
+            heading="Upcoming important due dates"
+            actions={actions}>
+            <div className="container-example-1">
+              <GoATable width="100%">
+                <tbody className="striped">
+                  <tr>
+                    <td>Business plan submission</td>
+                    <td className="align-right">June 30, 2024</td>
+                  </tr>
+                  <tr>
+                    <td>Annual review</td>
+                    <td className="align-right">October 3, 2024</td>
+                  </tr>
+                  <tr>
+                    <td>Application submission</td>
+                    <td className="align-right">December 20, 2024</td>
+                  </tr>
+                  <tr>
+                    <td>Application review</td>
+                    <td className="align-right">January 3, 2025</td>
+                  </tr>
+                </tbody>
+              </GoATable>
+            </div>
+          </GoAContainer>
+          `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+          <GoabContainer>
+          <span className="container-example-1--sub-header">Housing Advisor</span>
+          <p className="container-example-1--header">Tracy Hero</p>
+          <GoabBlock direction="row" gap="m">
+            <GoabBlock direction="column" gap="m">
+              <span className="container-example-1--contact-label">Email</span>
+              <span className="container-example-1--contact-label">Phone</span>
+            </GoabBlock>
+
+            <GoabBlock direction="column" gap="m">
+              <span className="container-example-1--contact-value">tracyhero@email.com</span>
+              <span className="container-example-1--contact-value">283-203-4921</span>
+            </GoabBlock>
+          </GoabBlock>
+        </GoabContainer>
+
+        <GoabContainer
+          type="non-interactive"
+          accent="thick"
+          heading="Upcoming important due dates"
+          actions={actions}>
+          <div className="container-example-1">
+            <GoabTable width="100%">
+              <tbody className="striped">
+                <tr>
+                  <td>Business plan submission</td>
+                  <td className="align-right">June 30, 2024</td>
+                </tr>
+                <tr>
+                  <td>Annual review</td>
+                  <td className="align-right">October 3, 2024</td>
+                </tr>
+                <tr>
+                  <td>Application submission</td>
+                  <td className="align-right">December 20, 2024</td>
+                </tr>
+                <tr>
+                  <td>Application review</td>
+                  <td className="align-right">January 3, 2025</td>
+                </tr>
+              </tbody>
+            </GoabTable>
+          </div>
+        </GoabContainer>
+          `}
+        />
+      )}
+      {/*Code Block*/}
+      <GoabContainer>
+        <span className="container-example-1--sub-header">Housing Advisor</span>
+        <p className="container-example-1--header">Tracy Hero</p>
+        <GoabBlock direction="row" gap="m">
+          <GoabBlock direction="column" gap="m">
+            <span className="container-example-1--contact-label">Email</span>
+            <span className="container-example-1--contact-label">Phone</span>
+          </GoabBlock>
+
+          <GoabBlock direction="column" gap="m">
+            <span className="container-example-1--contact-value">tracyhero@email.com</span>
+            <span className="container-example-1--contact-value">283-203-4921</span>
+          </GoabBlock>
+        </GoabBlock>
+      </GoabContainer>
+
+      <GoabContainer
+        type="non-interactive"
+        accent="thick"
+        heading="Upcoming important due dates"
+        actions={
+          <GoabButton type="tertiary" size="compact" leadingIcon="calendar" onClick={() => {/* do nothing */}}>
+            Add to calendar
+          </GoabButton>
+        }>
+        <div className="container-example-1">
+          <GoabTable width="100%">
+            <tbody className="striped">
+            <tr>
+              <td>Business plan submission</td>
+              <td className="align-right">June 30, 2024</td>
+            </tr>
+            <tr>
+              <td>Annual review</td>
+              <td className="align-right">October 3, 2024</td>
+            </tr>
+            <tr>
+              <td>Application submission</td>
+              <td className="align-right">December 20, 2024</td>
+            </tr>
+            <tr>
+              <td>Application review</td>
+              <td className="align-right">January 3, 2025</td>
+            </tr>
+            </tbody>
+          </GoabTable>
+        </div>
+      </GoabContainer>
+    </Sandbox>
+  )
+}
diff --git a/src/examples/container/container-card-grid-example.css b/src/examples/container/container-card-grid-example.css
new file mode 100644
index 000000000..3ba870198
--- /dev/null
+++ b/src/examples/container/container-card-grid-example.css
@@ -0,0 +1,10 @@
+.container-example-3--container-title {
+    color: var(--goa-color-interactive-default);
+    font: var(--goa-typography-heading-m);
+    text-decoration-line: underline;
+    margin-top:0;
+    margin-bottom: var(--goa-space-m);
+}
+.container-example-3--container-content {
+    font: var(--goa-typography-body-m);
+}
diff --git a/src/examples/container/container-case-files-example.css b/src/examples/container/container-case-files-example.css
new file mode 100644
index 000000000..887acd0d8
--- /dev/null
+++ b/src/examples/container/container-case-files-example.css
@@ -0,0 +1,27 @@
+.container-example-2--container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+span.container-example-2--body-text {
+    font: var(--goa-typography-body-s);
+}
+
+.container-example-2--right-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+@media screen and (max-width: 623px) {
+    .container-example-2--container {
+        flex-direction: column;
+        justify-content: center;
+        align-items: stretch;
+    }
+    .container-example-2--right-content {
+        display:block;
+        margin-top: var(--goa-space-xs);
+    }
+}
diff --git a/src/examples/container/container-example.css b/src/examples/container/container-example.css
deleted file mode 100644
index d344438a0..000000000
--- a/src/examples/container/container-example.css
+++ /dev/null
@@ -1,102 +0,0 @@
-/*Example 1*/
-/*User information example*/
-.container-example-1--sub-header {
-    color: var(--goa-color-greyscale-700);
-    font: var(--goa-typography-body-m);
-}
-
-.container-example-1--header {
-    color: var(--goa-color-greyscale-700);
-    font-size: var(--goa-font-size-7);
-    font-weight: var(--goa-font-weight-bold);
-    line-height: var(--goa-line-height-4);
-    margin-bottom: var(--goa-space-s);
-}
-
-span.container-example-1--contact-label {
-    color: var(--goa-color-greyscale-700);
-    font: var(--goa-typography-heading-s);
-}
-
-span.container-example-1--contact-value {
-    color: var(--goa-color-greyscale-700);
-    font: var(--goa-typography-body-m);
-}
-
-/*Upcoming important due dates example*/
-.container-example-1 goa-table tbody.striped tr:nth-child(even) {
-    background-color: #F8F8F8;
-}
-.container-example-1 goa-table td.align-right {
-    text-align: right;
-}
-
-/*Example 2*/
-.container-example-2--container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-span.container-example-2--body-text {
-    font: var(--goa-typography-body-s);
-}
-
-.container-example-2--right-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-@media screen and (max-width: 623px) {
-    .container-example-2--container {
-        flex-direction: column;
-        justify-content: center;
-        align-items: stretch;
-    }
-    .container-example-2--right-content {
-        display:block;
-        margin-top: var(--goa-space-xs);
-    }
-}
-
-/*Example 3*/
-.container-example-3--container-title {
-    color: var(--goa-color-interactive-default);
-    font: var(--goa-typography-heading-m);
-    text-decoration-line: underline;
-    margin-top:0;
-    margin-bottom: var(--goa-space-m);
-}
-.container-example-3--container-content {
-   font: var(--goa-typography-body-m);
-}
-
-
-/*Example 4*/
-h3.container-example-4--h3 {
-    margin-bottom: var(--goa-space-m);
-}
-label.container-example-4--label {
-    font: var(--goa-typography-body-s);
-    color: var(--goa-color-text-secondary);
-}
-.container-example-4--container-content {
-    font: var(--goa-typography-body-m);
-}
-p.container-example-4--container-content {
-    margin-bottom: 0;
-}
-
-h5.container-example-4--h5 {
-    font: var(--goa-typography-body-m);
-    color: var(--goa-color-text-secondary);
-    margin-top: var(--goa-space-m);
-    margin-bottom: var(--goa-space-m);
-}
-
-h6.container-example-4--h6 {
-    font: var(--goa-typography-heading-s);
-    margin-top:0;
-    margin-bottom: 0;
-}
diff --git a/src/examples/container/container-review-action-example.css b/src/examples/container/container-review-action-example.css
new file mode 100644
index 000000000..688cf0c1b
--- /dev/null
+++ b/src/examples/container/container-review-action-example.css
@@ -0,0 +1,26 @@
+h3.container-example-4--h3 {
+    margin-bottom: var(--goa-space-m);
+}
+label.container-example-4--label {
+    font: var(--goa-typography-body-s);
+    color: var(--goa-color-text-secondary);
+}
+.container-example-4--container-content {
+    font: var(--goa-typography-body-m);
+}
+p.container-example-4--container-content {
+    margin-bottom: 0;
+}
+
+h5.container-example-4--h5 {
+    font: var(--goa-typography-body-m);
+    color: var(--goa-color-text-secondary);
+    margin-top: var(--goa-space-m);
+    margin-bottom: var(--goa-space-m);
+}
+
+h6.container-example-4--h6 {
+    font: var(--goa-typography-heading-s);
+    margin-top:0;
+    margin-bottom: 0;
+}
diff --git a/src/examples/container/container-user-information-example.css b/src/examples/container/container-user-information-example.css
new file mode 100644
index 000000000..37da263de
--- /dev/null
+++ b/src/examples/container/container-user-information-example.css
@@ -0,0 +1,30 @@
+.container-example-1--sub-header {
+    color: var(--goa-color-greyscale-700);
+    font: var(--goa-typography-body-m);
+}
+
+.container-example-1--header {
+    color: var(--goa-color-greyscale-700);
+    font-size: var(--goa-font-size-7);
+    font-weight: var(--goa-font-weight-bold);
+    line-height: var(--goa-line-height-4);
+    margin-bottom: var(--goa-space-s);
+}
+
+span.container-example-1--contact-label {
+    color: var(--goa-color-greyscale-700);
+    font: var(--goa-typography-heading-s);
+}
+
+span.container-example-1--contact-value {
+    color: var(--goa-color-greyscale-700);
+    font: var(--goa-typography-body-m);
+}
+
+/*Upcoming important due dates example*/
+.container-example-1 goa-table tbody.striped tr:nth-child(even) {
+    background-color: #F8F8F8;
+}
+.container-example-1 goa-table td.align-right {
+    text-align: right;
+}
diff --git a/src/examples/date-picker/DatePickerExamples.tsx b/src/examples/date-picker/DatePickerExamples.tsx
new file mode 100644
index 000000000..d7bdc2e8c
--- /dev/null
+++ b/src/examples/date-picker/DatePickerExamples.tsx
@@ -0,0 +1,14 @@
+import { DatePickerResetExample } from "@examples/date-picker/DatePickerResetExample.tsx";
+
+export const DatePickerExamples = () => {
+  return (
+    <>
+      <h2 id="component-examples" className="hidden" aria-hidden="true">
+        Examples
+      </h2>
+
+      <h3 id="component-example-1">Reset example</h3>
+      <DatePickerResetExample />
+    </>
+  )
+}
diff --git a/src/examples/date-picker/DatePickerResetExample.tsx b/src/examples/date-picker/DatePickerResetExample.tsx
new file mode 100644
index 000000000..97f57f657
--- /dev/null
+++ b/src/examples/date-picker/DatePickerResetExample.tsx
@@ -0,0 +1,253 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabButton, GoabButtonGroup, GoabDatePicker, GoabFormItem } from "@abgov/react-components";
+import { GoabDatePickerOnChangeDetail } from "@abgov/ui-components-common";
+import { useContext, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const DatePickerResetExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const [date, setDate] = useState<Date | undefined>();
+
+  const setNewDate = (value: Date | undefined) => {
+    setDate(value);
+  };
+
+  function setValue() {
+    const d = new Date();
+    d.setDate(d.getDate() - 7);
+
+    setDate(d);
+  }
+
+  function clearValue() {
+    setDate(undefined);
+  }
+  return (
+      <Sandbox fullWidth skipRender flags={version === "old" ? ["reactive"] : ["event"]}>
+        {/*React*/}
+        {version === "old" && <CodeSnippet
+          tags="react"
+          lang="typescript"
+          allowCopy={true}
+          code={`
+                  export function Datepicker() {
+                    const [date, setDate] = useState<Date | undefined>();
+
+                    const setNewDate = (value: Date | undefined) => {
+                      setDate(value);
+                    };
+
+                    function setValue() {
+                      const d = new Date();
+                      d.setDate(d.getDate() - 7);
+
+                      setDate(d);
+                    }
+
+                    function clearValue() {
+                      setDate(undefined);
+                    }
+
+                    return (
+                      <>
+                        <GoAFormItem label="Item">
+                          <GoADatePicker
+                            name="item"
+                            value={date}
+                            onChange={(_, value) => setNewDate(value)}
+                            mb="xl"
+                          ></GoADatePicker>
+                        </GoAFormItem>
+                        
+                        <GoAButtonGroup mt={"xs"} alignment={"start"}>
+                          <GoAButton onClick={setValue} mr="l">Set Value</GoAButton>
+                          <GoAButton onClick={clearValue}>Clear Value</GoAButton>
+                        </GoAButtonGroup>
+                      </>
+                    );
+                  }
+              `}
+        />}
+
+        {version === "new" && <CodeSnippet
+          tags="react"
+          lang="typescript"
+          allowCopy={true}
+          code={`
+                  export function Datepicker() {
+                    const [date, setDate] = useState<Date | undefined>();
+
+                    const setNewDate = (value: Date | undefined) => {
+                      setDate(value);
+                    };
+
+                    function setValue() {
+                      const d = new Date();
+                      d.setDate(d.getDate() - 7);
+
+                      setDate(d);
+                    }
+
+                    function clearValue() {
+                      setDate(undefined);
+                    }
+
+                    return (
+                      <>
+                        <GoabFormItem label="Date Picker">
+                          <GoabDatePicker
+                            name="item"
+                            value={date}
+                            onChange={(e: GoabDatePickerOnChangeDetail) => setNewDate(e.value as Date)}
+                            mb="xl"></GoabDatePicker>
+                        </GoabFormItem>
+
+                        <GoabButtonGroup mt={"xs"} alignment={"start"}>
+                          <GoabButton onClick={setValue} mr="l">
+                            Set Value
+                          </GoabButton>
+                          <GoabButton onClick={clearValue}>Clear Value</GoabButton>
+                        </GoabButtonGroup>
+                      </>
+                    );
+                  }
+              `}
+        />}
+
+        {/*Angular*/}
+
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  export class DatePickerComponent {
+                    item = "";
+                    onChange(event: Event) {
+                      const value = (event as CustomEvent).detail.value;
+                      this.item = value;
+                    }
+
+                    setValue() {
+                      const d = new Date();
+                      this.item = (d.getDate() - 7).toDateString();
+                    }
+
+                    clearValue() {
+                      this.item = "";
+                    }
+                  }
+                `}
+        />}
+
+        {version === "old" && <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  <goa-form-item label="Item">
+                    <goa-date-picker (_change)="onChange($event)" name="item" [value]="item"></goa-date-picker>
+                  </goa-form-item>
+
+                  <goa-button-group alignment="start" mt="xs">
+                    <goa-button (_click)="setValue()" mr="l">Set Value</goa-button>
+                    <goa-button (_click)="clearValue()">Clear Value</goa-button>
+                  </goa-button-group>
+                `}
+        />}
+
+        {version === "old" && <CodeSnippet
+          tags={["angular", "reactive"]}
+          lang="typescript"
+          allowCopy={true}
+          code={`
+                  export class DatePickerComponent {
+                    dateCtrl = new FormControl();
+
+                    setValue() {
+                      const d = new Date();
+                      d.setDate(d.getDate() - 7);
+                      this.dateCtrl.patchValue(d);
+                      console.log("setValue called: ", this.dateCtrl.value);
+                    }
+
+                    clearValue() {
+                      this.dateCtrl.reset();
+                      console.log("reset called: ", this.dateCtrl.value);
+                    }
+                  }
+              `}
+        />}
+        {version === "old" && <CodeSnippet
+          tags={["angular", "reactive"]}
+          lang="typescript"
+          allowCopy={true}
+          code={`
+                  <goa-form-item label="Input Label" helptext="Helper text" mb="3xl">
+                    <goa-date-picker [formControl]="dateCtrl" [value]="dateCtrl.value" ngDefaultControl />
+                  </goa-form-item>
+                  
+                  <goa-button-group alignment="start" mt="xs">
+                    <goa-button (_click)="setValue()" mr="l">Set Value</goa-button>
+                    <goa-button (_click)="clearValue()">Clear Value</goa-button>
+                  </goa-button-group>
+              `}
+        />}
+
+        {/*New version*/}
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  export class DatePickerComponent {
+                    item: Date|undefined = new Date();
+                    onChange(event: GoabDatePickerOnChangeDetail) {
+                      console.log(event.value);
+                      this.item = event.value as Date;
+                    }
+                    setValue() {
+                      const d = new Date();
+                      this.item = (d.getDate() - 7).toDateString();
+                    }
+                    clearValue() {
+                      this.item = undefined;
+                    }
+                  }
+                `}
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  <goab-form-item label="Item">
+                    <goab-date-picker (onChange)="onChange($event)" name="item" [value]="item"></goab-date-picker>
+                  </goab-form-item>
+
+                  <goab-button-group alignment="start" mt="xs">
+                    <goab-button (onClick)="setValue()" mr="l">Set Value</goab-button>
+                    <goab-button (onClick)="clearValue()">Clear Value</goab-button>
+                  </goab-button-group>
+                `}
+        />}
+
+        <GoabFormItem label="Date Picker">
+          <GoabDatePicker
+            name="item"
+            value={date}
+            onChange={(e: GoabDatePickerOnChangeDetail) => setNewDate(e.value as Date)}
+            mb="xl"></GoabDatePicker>
+        </GoabFormItem>
+
+        <GoabButtonGroup mt={"xs"} alignment={"start"}>
+          <GoabButton onClick={setValue} mr="l">
+            Set Value
+          </GoabButton>
+          <GoabButton onClick={clearValue}>Clear Value</GoabButton>
+        </GoabButtonGroup>
+      </Sandbox>
+  )
+}
diff --git a/src/examples/details/DetailsAdditionalInformationHelpUserExample.tsx b/src/examples/details/DetailsAdditionalInformationHelpUserExample.tsx
new file mode 100644
index 000000000..92e32e966
--- /dev/null
+++ b/src/examples/details/DetailsAdditionalInformationHelpUserExample.tsx
@@ -0,0 +1,79 @@
+import { Sandbox } from "@components/sandbox";
+import { GoabBlock, GoabDetails, GoabFormItem, GoabRadioGroup, GoabRadioItem } from "@abgov/react-components";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const DetailsAdditionalInformationHelpUserExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const noop = () => {}
+
+  return (
+    <Sandbox flags={["reactive"]} fullWidth allow={["form"]}>
+      {/*Angular code*/}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags={["angular", "reactive"]}
+        allowCopy={true}
+        code={`
+          export class ExampleComponent {
+            form!: FormGroup;
+            constructor(private fb: FormBuilder) {
+              this.form = this.fb.group({
+                additional: [""],
+              })
+            }
+          }
+        `}
+      />}
+
+      {/*React code*/}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+          const radioGroupOnChange = (event: GoabRadioGroupOnChangeDetail) => {
+            console.log("value is ", event.value);
+          }
+        `}
+      />}
+
+      <form>
+        <GoabFormItem
+        label="Do you have additional education expense?"
+        helpText="You can request this money now or at any time during your program."
+      >
+        <GoabRadioGroup name="additional" onChange={noop}>
+          <GoabRadioItem label="Yes" value="yes" name="additional" />
+          <GoabRadioItem label="No" value="no" name="additional" />
+        </GoabRadioGroup>
+      </GoabFormItem>
+
+      <GoabDetails heading="What is an additional education expense?">
+        <GoabBlock gap="m" mt="m">
+          <div>
+            <strong>Examples of education expenses</strong>
+            <ul className="goa-unordered-list">
+              <li>Laptop and computer hardware</li>
+              <li>Computer apps and subscriptions</li>
+              <li>Home internet</li>
+              <li>Testing and exam fees</li>
+              <li>Work or school clothing, like work boots</li>
+            </ul>
+          </div>
+          <div>
+            <strong>Do not include</strong>
+            <ul className="goa-unordered-list">
+              <li>Tuition</li>
+              <li>Mandatory fees</li>
+              <li>Books and supplies</li>
+              <li>School association fees</li>
+            </ul>
+          </div>
+        </GoabBlock>
+      </GoabDetails>
+      </form>
+    </Sandbox>
+  )
+}
diff --git a/src/examples/details/DetailsExamples.tsx b/src/examples/details/DetailsExamples.tsx
new file mode 100644
index 000000000..7268c6fc7
--- /dev/null
+++ b/src/examples/details/DetailsExamples.tsx
@@ -0,0 +1,32 @@
+import {
+  DetailsMoreInformationBasicQuestionExample
+} from "@examples/details/DetailsMoreInformationBasicQuestionExample.tsx";
+import {
+  DetailsAdditionalInformationHelpUserExample
+} from "@examples/details/DetailsAdditionalInformationHelpUserExample.tsx";
+import {
+  DetailsShowDirectDepositInformationExample
+} from "@examples/details/DetailsShowDirectDepositInformationExample.tsx";
+
+export const DetailsExamples = () => {
+  return (
+    <>
+      <h2 id="component-examples" className="hidden" aria-hidden="true">Examples</h2>
+
+      <h3 id="component-example-show-more-information-for-basic-question">
+        Show more information for a basic question
+      </h3>
+      <DetailsMoreInformationBasicQuestionExample />
+
+      <h3 id="component-example-additional-information-help">
+        Additional information to help a user understand and answer a question
+      </h3>
+      <DetailsAdditionalInformationHelpUserExample />
+
+      <h3 id="component-example-direct-deposit-information">
+        Show more information to help a user fill out direct deposit information
+      </h3>
+      <DetailsShowDirectDepositInformationExample/>
+    </>
+  )
+}
diff --git a/src/examples/details/DetailsMoreInformationBasicQuestionExample.tsx b/src/examples/details/DetailsMoreInformationBasicQuestionExample.tsx
new file mode 100644
index 000000000..e24e9ec90
--- /dev/null
+++ b/src/examples/details/DetailsMoreInformationBasicQuestionExample.tsx
@@ -0,0 +1,53 @@
+import { Sandbox } from "@components/sandbox";
+import { GoabDetails, GoabFormItem, GoabRadioGroup, GoabRadioItem } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+
+export const DetailsMoreInformationBasicQuestionExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  return (
+    <Sandbox fullWidth note="Example below: Advanced Education - Pay for my education">
+
+      {/*Angular code*/}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+          export class ExampleComponent {
+            radioOnChange(event: GoabRadioGroupOnChangeDetail) {
+              console.log("value ", event.value);
+            }
+          }
+        `}
+      />}
+
+      {/*React code*/}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+          const radioGroupOnChange = (event: GoabRadioGroupOnChangeDetail) => {
+            console.log("value is ", event.value);
+          }
+        `}
+      />}
+
+      <GoabFormItem label="Do you pay for childcare?" helpText="Examples of child care include day care, day homes, and baby-sitters.">
+        <GoabRadioGroup name="pay" onChange={() => { }}>
+          <GoabRadioItem label="Yes" value="yes" name="pay" />
+          <GoabRadioItem label="No" value="no" name="pay" />
+        </GoabRadioGroup>
+      </GoabFormItem>
+
+      <GoabDetails heading="Why are we asking this question?" mt="l">
+        <p>
+          This question helps us better understand your situation and ensure that you receive
+          the right information and support.
+        </p>
+      </GoabDetails>
+    </Sandbox>
+  )
+}
diff --git a/src/examples/details/DetailsShowDirectDepositInformationExample.tsx b/src/examples/details/DetailsShowDirectDepositInformationExample.tsx
new file mode 100644
index 000000000..7bc5af659
--- /dev/null
+++ b/src/examples/details/DetailsShowDirectDepositInformationExample.tsx
@@ -0,0 +1,151 @@
+import { Sandbox } from "@components/sandbox";
+import { GoabDetails, GoabFormItem, GoabInput } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+
+export const DetailsShowDirectDepositInformationExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const noop = () => {};
+
+  return (
+    <Sandbox flags={["reactive"]} fullWidth allow={["form", "h2", "p"]} skipRenderOnly={"react"}>
+
+      {/*Angular code*/}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags={["angular", "reactive"]}
+        allowCopy={true}
+        code={`
+          export class ExampleComponent {
+            form!: FormGroup;
+
+            constructor(private fb: FormBuilder) {
+              this.form = this.fb.group({
+                bankNumber: [""],
+                transitNumber: [""],
+                accountNumber: [""]
+              })
+            }
+          }
+        `}
+      />}
+
+      {/*React code*/}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+            const [bankNumber, setBankNumber] = useState<string>("");
+            const [transitNumber, setTransitNumber] = useState<string>("");
+            const [accountNumber, setAccountNumber] = useState<string>("");
+        `}
+      />}
+      {version === "new" && <CodeSnippet
+        lang="html"
+        tags="react"
+        allowCopy={true}
+        code={`
+            <h2>Direct deposit information</h2>
+            <p>
+              Find this information on your bank's website or on your personal cheques. Contact your bank if you can't find
+              this information.
+            </p>
+          
+            <GoabFormItem label="Bank or Institution number" id="bankNumber" helpText="3-4 digits in length" mb="xl">
+              <GoabInput maxLength={4} name="bankNumber" onChange={(event: GoabInputOnChangeDetail) => setBankNumber(event.value)} value={bankNumber} ariaLabel="bankNumber"
+                     width="88px"></GoabInput>
+            </GoabFormItem>
+            <GoabFormItem label="Branch or Transit number" helpText="5 digits in length" id="transitNumber" mb="xl">
+              <GoabInput maxLength={5} name="transitNumber" onChange={(event: GoabInputOnChangeDetail) => setTransitNumber(event.value)} value={transitNumber} ariaLabel="transitNumber"
+                     width="143px"></GoabInput>
+            </GoabFormItem>
+            <GoabFormItem label="Account number" helpText="3-12 digits in length" id="accountNumber">
+              <GoabInput maxLength={12} name="accountNumber" value={accountNumber} onChange={(event: GoabInputOnChangeDetail) => setAccountNumber(event.value)}
+                     ariaLabel="accountNumber"></GoabInput>
+            </GoabFormItem>
+            <GoabDetails heading="Where can I find this information on a personal cheque?" mt="l">
+              <p>Below is an example of where you can find the required bank information on a personal cheque.</p>
+              <img src="https://design.alberta.ca/images/details-demo.jpg" />
+            </GoabDetails>
+        `}
+      />}
+
+      {version === "old" && <CodeSnippet
+        lang="html"
+        tags="react"
+        allowCopy={true}
+        code={`
+           <GoAFormItem label="Bank or Institution number" id="bankNumber" helpText="3-4 digits in length" mb="xl">
+              <GoAInput maxLength={4} name="bankNumber" onChange={onChange} value="" ariaLabel="bankNumber" width="88px"></GoAInput>
+           </GoAFormItem>
+           <GoAFormItem label="Branch or Transit number" helpText="5 digits in length" id="transitNumber" mb="xl">
+              <GoAInput maxLength={5} name="transitNumber" onChange={onChange} value="" ariaLabel="transitNumber" width="143px"></GoAInput>
+           </GoAFormItem>
+           <GoAFormItem label="Account number" helpText="3-12 digits in length" id="accountNumber">
+              <GoAInput maxLength={12} name="accountNumber" value="" onChange={onChange} ariaLabel="accountNumber"></GoAInput>
+           </GoAFormItem>
+           <GoADetails heading="Where can I find this information on a personal cheque?" mt="l">
+              <p>Below is an example of where you can find the required bank information on a personal cheque.</p>
+              <img src="https://design.alberta.ca/images/details-demo.jpg" />
+           </GoADetails>
+        `}
+      />}
+
+
+      <h2>Direct deposit information</h2>
+      <p>
+        Find this information on your bank's website or on your personal cheques. Contact your bank
+        if you can't find this information.
+      </p>
+      <form>
+        <GoabFormItem
+          label="Bank or Institution number"
+          id="bankNumber"
+          helpText={"3-4 digits in length"}
+          mb="xl">
+          <GoabInput
+            maxLength={4}
+            name="bankNumber"
+            onChange={noop}
+            value={""}
+            ariaLabel="bankNumber"
+            width="88px"
+          />
+        </GoabFormItem>
+        <GoabFormItem
+          label="Branch or Transit number"
+          helpText={"5 digits in length"}
+          id="transitNumber"
+          mb="xl">
+          <GoabInput
+            maxLength={5}
+            name="transitNumber"
+            onChange={noop}
+            value={""}
+            ariaLabel="transitNumber"
+            width="143px"
+          />
+        </GoabFormItem>
+        <GoabFormItem label="Account number" helpText="3-12 digits in length" id="accountNumber">
+          <GoabInput
+            maxLength={12}
+            name="accountNumber"
+            value=""
+            onChange={noop}
+            ariaLabel="accountNumber"
+          />
+        </GoabFormItem>
+      </form>
+
+      <GoabDetails heading="Where can I find this information on a personal cheque?" mt="l">
+        <p>
+          Below is an example of where you can find the required bank information on a personal
+          cheque.
+        </p>
+        <img src="https://design.alberta.ca/images/details-demo.jpg" />
+      </GoabDetails>
+    </Sandbox>
+  );
+};
diff --git a/src/examples/dropdown/DropdownAddItemExample.tsx b/src/examples/dropdown/DropdownAddItemExample.tsx
new file mode 100644
index 000000000..ef919f2e3
--- /dev/null
+++ b/src/examples/dropdown/DropdownAddItemExample.tsx
@@ -0,0 +1,622 @@
+import {
+  GoabButton,
+  GoabButtonGroup,
+  GoabContainer,
+  GoabDivider,
+  GoabDropdown,
+  GoabDropdownItem,
+  GoabFormItem,
+  GoabInput,
+  GoabRadioGroup,
+  GoabRadioItem,
+} from "@abgov/react-components";
+import {
+  GoabDropdownItemMountType,
+  GoabDropdownOnChangeDetail,
+  GoabInputOnChangeDetail,
+  GoabRadioGroupOnChangeDetail,
+} from "@abgov/ui-components-common";
+import { useContext, useState } from "react";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+type Task = {
+  value: string;
+  label: string;
+  mount: GoabDropdownItemMountType;
+};
+
+export const DropdownAddItemExample = () => {
+  const { version } = useContext(LanguageVersionContext);
+  const [taskError, setTaskError] = useState<boolean>(false);
+  const [newTask, setNewTask] = useState<string>("");
+  const [mountType, setNewMountType] = useState<string>("append");
+  const DEFAULT_TASKS: Task[] = [
+    { label: "Finish Report", value: "finish-report", mount: "append" },
+    { label: "Attend Meeting", value: "attend-meeting", mount: "append" },
+    { label: "Reply Emails", value: "reply-emails", mount: "append" },
+  ];
+  const [tasks, setTasks] = useState<Task[]>(DEFAULT_TASKS);
+  const [isReset, setIsReset] = useState<boolean>(false);
+  const [selectedTask, setSelectedTask] = useState<string>("");
+
+  function onMountTypeChange(value: string | undefined) {
+    setNewMountType(value as string);
+  }
+
+  function addTask() {
+    if (newTask === "") {
+      setTaskError(true);
+      return;
+    }
+    setTaskError(false);
+
+    const task = {
+      label: newTask,
+      value: newTask.toLowerCase().replace(" ", "-"),
+      mount: mountType as GoabDropdownItemMountType,
+    };
+    setTasks([...tasks, task]);
+    setIsReset(false);
+  }
+
+  function reset() {
+    setTasks(DEFAULT_TASKS);
+    setNewMountType("append");
+    setNewTask("");
+    setSelectedTask("");
+    setTaskError(false);
+    setIsReset(true);
+  }
+
+  return (
+    <>
+      <GoabContainer mt="m" mb="none">
+        <div style={{ padding: "40px" }}>
+          <GoabFormItem
+            requirement="required"
+            mt="m"
+            label="Name of item"
+            error={taskError ? "Please enter item name" : undefined}
+            helpText="Add an item to the dropdown list below">
+            <GoabInput
+              onChange={(event: GoabInputOnChangeDetail) => setNewTask(event.value)}
+              name="item"
+              placeholder=""
+              value={newTask}></GoabInput>
+          </GoabFormItem>
+
+          <GoabFormItem mt="m" label="Add to">
+            <GoabRadioGroup
+              name="mountType"
+              onChange={(event: GoabRadioGroupOnChangeDetail) => onMountTypeChange(event.value)}
+              value={mountType}
+              orientation="horizontal">
+              <GoabRadioItem value="prepend" label="Start" />
+              <GoabRadioItem value="append" label="End" />
+            </GoabRadioGroup>
+          </GoabFormItem>
+
+          <GoabButtonGroup alignment={"start"} gap="relaxed">
+            <GoabButton mt="m" type="primary" onClick={addTask}>
+              Add new item
+            </GoabButton>
+            <GoabButton mt="m" type="tertiary" onClick={reset}>
+              Reset list
+            </GoabButton>
+          </GoabButtonGroup>
+
+          <GoabDivider mt="m"></GoabDivider>
+
+          <GoabFormItem mt="m" label="All items">
+            <div
+              style={{
+                width: isReset ? "320px" : "auto",
+              }}>
+              <GoabDropdown
+                key={tasks.length}
+                onChange={(event: GoabDropdownOnChangeDetail) =>
+                  setSelectedTask(event.value as string)
+                }
+                value={selectedTask}
+                name="selectedTask">
+                {tasks.map(task => (
+                  <GoabDropdownItem
+                    key={task.value}
+                    value={task.value}
+                    mountType={task.mount}
+                    label={task.label}></GoabDropdownItem>
+                ))}
+              </GoabDropdown>
+            </div>
+          </GoabFormItem>
+        </div>
+      </GoabContainer>
+
+      {/***************** Angular code ***********/}
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  type DropdownItemMountType = "append" | "prepend" | "reset";
+                  interface Task {
+                    value: string;
+                    label: string;
+                    mount: DropdownItemMountType;
+                  }         
+                         
+                  export class SomeComponent {
+                    default_tasks: Task[] = [
+                      { label: "Finish Report", value: "finish-report", mount: "append" },
+                      { label: "Attend Meeting", value: "attend-meeting", mount: "append" },
+                      { label: "Reply Emails", value: "reply-emails", mount: "append" },
+                    ];
+                    tasks: Task[] = this.default_tasks;
+                    newTask = "";
+                    mountType: DropdownItemMountType = "append";
+                    selectedTask = "";
+                    taskError = false;
+                    renderTrigger = true;
+                    constructor() {}
+                    onMountTypeChange(event: Event): void {
+                      this.mountType = (event as CustomEvent).detail.value as DropdownItemMountType;
+                    }
+                    onNewTaskChange(event: Event): void {
+                      this.newTask = (event as CustomEvent).detail.value;
+                      this.taskError = false;
+                    }
+                    onSelectedTaskChange(event: Event): void {
+                      this.selectedTask = (event as CustomEvent).detail.value;
+                    }
+                    addTask(): void {
+                      if (this.newTask === "") {
+                        this.taskError = true;
+                        return;
+                      }
+                      this.taskError = false;
+                      const task: Task = {
+                        label: this.newTask,
+                        value: this.newTask.toLowerCase().replace(" ", "-"),
+                        mount: this.mountType,
+                      };
+                      this.tasks =
+                        this.mountType === "prepend" ? [task, ...this.tasks] : [...this.tasks, task];
+                      this.newTask = "";
+                    }
+                    reset(): void {
+                      this.newTask = "";
+                      this.selectedTask = "";
+                      this.taskError = false;
+                      this.tasks = [...this.default_tasks];
+                      this.forceRerender();
+                    }
+                    forceRerender(): void {
+                      this.renderTrigger = false;
+                      setTimeout(() => {
+                        this.renderTrigger = true;
+                      }, 0);
+                    }
+                    trackByFn(index: number, item: Task): string {
+                      return item.value;
+                    }
+                  }`}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  interface Task {
+                    value: string;
+                    label: string;
+                    mount: GoabDropdownItemMountType;
+                  }    
+                         
+                  export class SomeComponent {
+                    default_tasks: Task[] = [
+                      { label: "Finish Report", value: "finish-report", mount: "append" },
+                      { label: "Attend Meeting", value: "attend-meeting", mount: "append" },
+                      { label: "Reply Emails", value: "reply-emails", mount: "append" },
+                    ];
+                    tasks: Task[] = this.default_tasks;
+                    newTask = "";
+                    mountType: GoabDropdownItemMountType = "append";
+                    selectedTask = "";
+                    taskError = false;
+                    renderTrigger = true;
+                    
+                    onMountTypeChange(event: GoabDropdownOnChangeDetail): void {
+                      this.mountType = event.value as GoabDropdownItemMountType;
+                    }
+                    onNewTaskChange(event: GoabInputOnChangeDetail): void {
+                      this.newTask = event.value;
+                      this.taskError = false;
+                    }
+                    onSelectedTaskChange(event: GoabDropdownOnChangeDetail): void {
+                      this.selectedTask = event.value as string;
+                    }
+                    addTask(): void {
+                      if (this.newTask === "") {
+                        this.taskError = true;
+                        return;
+                      }
+                      this.taskError = false;
+                      const task: Task = {
+                        label: this.newTask,
+                        value: this.newTask.toLowerCase().replace(" ", "-"),
+                        mount: this.mountType,
+                      };
+                      this.tasks =
+                        this.mountType === "prepend" ? [task, ...this.tasks] : [...this.tasks, task];
+                      this.newTask = "";
+                    }
+                    reset(): void {
+                      this.newTask = "";
+                      this.selectedTask = "";
+                      this.taskError = false;
+                      this.tasks = [...this.default_tasks];
+                      this.forceRerender();
+                    }
+                    forceRerender(): void {
+                      this.renderTrigger = false;
+                      setTimeout(() => {
+                        this.renderTrigger = true;
+                      }, 0);
+                    }
+                    trackByFn(index: number, item: Task): string {
+                      return item.value;
+                    }
+                  }`}
+        />
+      )}
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+              <goa-container mt="m" mb="none">
+                <div style="padding: 40px;">
+                  <goa-form-item
+                    requirement="required"
+                    mt="m"
+                    label="Name of item"
+                    [error]="taskError ? 'Please enter item name' : undefined"
+                    helpText="Add an item to the dropdown list below">
+                    <goa-input
+                      name="item"
+                      placeholder=""
+                      [value]="newTask"
+                      (_change)="onNewTaskChange($event)">
+                    </goa-input>
+                  </goa-form-item>
+                  <goa-form-item mt="m" label="Add to">
+                    <goa-radio-group
+                      name="mountType"
+                      [value]="mountType"
+                      orientation="horizontal"
+                      (_change)="onMountTypeChange($event)">
+                      <goa-radio-item value="prepend" label="Start"></goa-radio-item>
+                      <goa-radio-item value="append" label="End"></goa-radio-item>
+                    </goa-radio-group>
+                  </goa-form-item>
+                  <goa-button-group alignment="start" gap="relaxed">
+                    <goa-button mt="m" type="primary" (_click)="addTask()">
+                      Add new item
+                    </goa-button>
+                    <goa-button mt="m" type="tertiary" (_click)="reset()">
+                      Reset list
+                    </goa-button>
+                  </goa-button-group>
+                  <goa-divider mt="m"></goa-divider>
+                  <goa-form-item mt="m" label="All items">
+                    <ng-container *ngIf="renderTrigger">
+                      <goa-dropdown
+                        [value]="selectedTask"
+                        name="selectedTask"
+                        (_change)="onSelectedTaskChange($event)">
+                        <goa-dropdown-item
+                          *ngFor="let task of tasks; trackBy: trackByFn"
+                          [value]="task.value"
+                          [mount]="task.mount"
+                          [label]="task.label">
+                        </goa-dropdown-item>
+                      </goa-dropdown>
+                    </ng-container>
+                  </goa-form-item>
+                </div>
+              </goa-container>
+            `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+              <goab-container mt="m" mb="none">
+                <div style="padding: 40px;">
+                  <goab-form-item
+                    requirement="required"
+                    mt="m"
+                    label="Name of item"
+                    [error]="taskError ? 'Please enter item name' : undefined"
+                    helpText="Add an item to the dropdown list below">
+                      <goab-input
+                        name="item"
+                        placeholder=""
+                        [value]="newTask"
+                        (onChange)="onNewTaskChange($event)">
+                      </goab-input>
+                  </goab-form-item>
+                  <goab-form-item mt="m" label="Add to">
+                    <goab-radio-group
+                      name="mountType"
+                      [value]="mountType"
+                      orientation="horizontal"
+                      (onChange)="onMountTypeChange($event)">
+                      <goab-radio-item value="prepend" label="Start"></goab-radio-item>
+                      <goab-radio-item value="append" label="End"></goab-radio-item>
+                    </goab-radio-group>
+                  </goab-form-item>
+                <goab-button-group alignment="start" gap="relaxed">
+                  <goab-button mt="m" type="primary" (onClick)="addTask()">
+                    Add new item
+                  </goab-button>
+                  <goab-button mt="m" type="tertiary" (onClick)="reset()">
+                    Reset list
+                  </goab-button>
+                </goab-button-group>
+            <goab-divider mt="m"></goab-divider>
+              <goab-form-item mt="m" label="All items">
+                <ng-container *ngIf="renderTrigger">
+                  <goab-dropdown
+                    [value]="selectedTask"
+                    name="selectedTask"
+                    (onChange)="onSelectedTaskChange($event)">
+                    <goab-dropdown-item
+                      *ngFor="let task of tasks; trackBy: trackByFn"
+                      [value]="task.value"
+                      [mountType]="task.mount"
+                      [label]="task.label">
+                    </goab-dropdown-item>
+                  </goab-dropdown>
+                </ng-container>
+              </goab-form-item>
+          </div>
+        </goab-container>`}
+        />
+      )}
+
+      {/**************** React code **********************/}
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+              type Task = {
+                value: string;
+                label: string;
+                mount: DropdownItemMountType;
+              };
+              const DEFAULT_TASKS: Task[] = [
+                  { label: "Finish Report", value: "finish-report", mount: "append" },
+                  { label: "Attend Meeting", value: "attend-meeting", mount: "append" },
+                  { label: "Reply Emails", value: "reply-emails", mount: "append" }
+              ];
+              const [tasks, setTasks] = useState<Task[]>(DEFAULT_TASKS);
+              const [newTask, setNewTask] = useState<string>("");
+              const [mountType, setNewMountType] = useState<string>("append");
+              const [selectedTask, setSelectedTask] = useState<string>("");
+              const [taskError, setTaskError] = useState<boolean>(false);
+                
+              function onMountTypeChange(value: string) {
+                setNewMountType(value);
+              }
+              function addTask() {
+                if (newTask === "") {
+                  setTaskError(true);
+                  return;
+                }
+                setTaskError(false);
+                const task = {
+                  label: newTask,
+                  value: newTask.toLowerCase().replace(" ", "-"),
+                  mount: mountType as DropdownItemMountType,
+                };
+                setTasks([...tasks, task]);
+              }
+              
+              function reset() {
+                setTasks(DEFAULT_TASKS);
+                setNewMountType("append");
+                setNewTask("");
+                setSelectedTask("");
+                setTaskError(false);
+              }                
+            `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+              type Task = {
+                value: string;
+                label: string;
+                mount: GoabDropdownItemMountType;
+              };
+              const DEFAULT_TASKS: Task[] = [
+                  { label: "Finish Report", value: "finish-report", mount: "append" },
+                  { label: "Attend Meeting", value: "attend-meeting", mount: "append" },
+                  { label: "Reply Emails", value: "reply-emails", mount: "append" }
+              ];
+              const [tasks, setTasks] = useState<Task[]>(DEFAULT_TASKS);
+              const [newTask, setNewTask] = useState<string>("");
+              const [mountType, setNewMountType] = useState<string>("append");
+              const [selectedTask, setSelectedTask] = useState<string>("");
+              const [taskError, setTaskError] = useState<boolean>(false);
+                
+              function onMountTypeChange(value: string | undefined) {
+                setNewMountType(value as string);
+              }
+              function addTask() {
+                if (newTask === "") {
+                  setTaskError(true);
+                  return;
+                }
+                setTaskError(false);
+                const task = {
+                  label: newTask,
+                  value: newTask.toLowerCase().replace(" ", "-"),
+                  mount: mountType as GoabDropdownItemMountType
+                };
+                setTasks([...tasks, task]);
+              }
+              
+              function reset() {
+                setTasks(DEFAULT_TASKS);
+                setNewMountType("append");
+                setNewTask("");
+                setSelectedTask("");
+                setTaskError(false);
+              }                
+            `}
+        />
+      )}
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+              <GoAContainer mt="m" mb="none">
+                <div style={{ padding: "40px" }}>
+                  <GoAFormItem
+                    requirement="required"
+                    mt="m"
+                    label="Name of item"
+                    error={taskError ? "Please enter item name" : undefined}
+                    helpText="Add an item to the dropdown list below">
+                    <GoAInput
+                      onChange={(_, value: string) => setNewTask(value)}
+                      name="item"
+                      placeholder=""
+                      value={newTask}></GoAInput>
+                  </GoAFormItem>
+                  <GoAFormItem mt="m" label="Add to">
+                    <GoARadioGroup
+                      name="mountType"
+                      onChange={(_name, value) => onMountTypeChange(value)}
+                      value={mountType}
+                      orientation="horizontal">
+                      <GoARadioItem value="prepend" label="Start" />
+                      <GoARadioItem value="append" label="End" />
+                    </GoARadioGroup>
+                  </GoAFormItem>
+                  <GoAButtonGroup alignment={"start"} gap="relaxed">
+                    <GoAButton mt="m" type="primary" onClick={addTask}>
+                      Add new item
+                    </GoAButton>
+                    <GoAButton mt="m" type="tertiary" onClick={reset}>
+                      Reset list
+                    </GoAButton>
+                  </GoAButtonGroup>
+                  <GoADivider mt="m"></GoADivider>
+                  <GoAFormItem mt="m" label="All items">
+                    <GoADropdown
+                      key={tasks.length}
+                      onChange={(_, values: string[] | string) => setSelectedTask(values as string)}
+                      value={selectedTask}
+                      name="selectedTask">
+                      {tasks.map(task => (
+                        <GoADropdownItem
+                          key={task.value}
+                          value={task.value}
+                          mountType={task.mount}
+                          label={task.label}></GoADropdownItem>
+                      ))}
+                    </GoADropdown>
+                  </GoAFormItem>
+                </div>
+              </GoAContainer>
+            `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+              <GoabContainer mt="m" mb="none">
+                <div style={{ padding: "40px" }}>
+                  <GoabFormItem
+                    requirement="required"
+                    mt="m"
+                    label="Name of item"
+                    error={taskError ? "Please enter item name" : undefined}
+                    helpText="Add an item to the dropdown list below">
+                    <GoabInput
+                      onChange={(event: GoabInputOnChangeDetail) => setNewTask(event.value)}
+                      name="item"
+                      placeholder=""
+                      value={newTask}></GoabInput>
+                  </GoabFormItem>
+                  <GoabFormItem mt="m" label="Add to">
+                    <GoabRadioGroup
+                      name="mountType"
+                      onChange={(event: GoabRadioGroupOnChangeDetail) => onMountTypeChange(event.value)}
+                      value={mountType}
+                      orientation="horizontal">
+                      <GoabRadioItem value="prepend" label="Start" />
+                      <GoabRadioItem value="append" label="End" />
+                    </GoabRadioGroup>
+                  </GoabFormItem>
+                  <GoabButtonGroup alignment={"start"} gap="relaxed">
+                    <GoabButton mt="m" type="primary" onClick={addTask}>
+                      Add new item
+                    </GoabButton>
+                    <GoabButton mt="m" type="tertiary" onClick={reset}>
+                      Reset list
+                    </GoabButton>
+                  </GoabButtonGroup>
+                  <GoabDivider mt="m"></GoabDivider>
+                  <GoabFormItem mt="m" label="All items">
+                    <GoabDropdown
+                      key={tasks.length}
+                      onChange={(event: GoabDropdownOnChangeDetail) => setSelectedTask(event.value as string)}
+                      value={selectedTask}
+                      name="selectedTask">
+                      {tasks.map(task => (
+                        <GoabDropdownItem
+                          key={task.value}
+                          value={task.value}
+                          mountType={task.mount}
+                          label={task.label}></GoabDropdownItem>
+                      ))}
+                    </GoabDropdown>
+                  </GoabFormItem>
+                </div>
+              </GoabContainer>
+            `}
+        />
+      )}
+    </>
+  );
+};
diff --git a/src/examples/dropdown/DropdownChangeItemExample.tsx b/src/examples/dropdown/DropdownChangeItemExample.tsx
new file mode 100644
index 000000000..a8904494b
--- /dev/null
+++ b/src/examples/dropdown/DropdownChangeItemExample.tsx
@@ -0,0 +1,252 @@
+import { GoabContainer, GoabDropdown, GoabDropdownItem, GoabFormItem } from "@abgov/react-components";
+import { GoabDropdownOnChangeDetail } from "@abgov/ui-components-common";
+import { useContext, useState } from "react";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const DropdownChangeItemExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const [children, setChildren] = useState<string[]>([]);
+  const parents = ["All", "Big", "Small"];
+  const childrenAll = ["Bus", "Elephant", "Key", "Pen", "Watch", "Truck"];
+  const childrenBig = ["Elephant", "Truck", "Bus"];
+  const childrenSmall = ["Key", "Pen", "Watch"];
+
+  const loadSchemas = (_name: string, values: string[] | string) => {
+    if (typeof values === "string") {
+      if (values === "All") setChildren(childrenAll);
+      else if (values === "Big") setChildren(childrenBig);
+      else setChildren(childrenSmall);
+    }
+  };
+
+  const log = () => {
+    console.log("Children Changed");
+  };
+  return (
+    <>
+      <GoabContainer mt="m" mb="none">
+        <div style={{ padding: "40px" }}>
+          <GoabFormItem
+            label="Size"
+            requirement="optional"
+            helpText="Choose the type to change the list below">
+            <GoabDropdown
+              name="parent"
+              placeholder="Select a value"
+              onChange={(event: GoabDropdownOnChangeDetail) =>
+                loadSchemas(event.name as string, event.value as string)
+              }>
+              {parents.map(parent => (
+                <GoabDropdownItem key={parent} value={parent} label={parent} />
+              ))}
+            </GoabDropdown>
+          </GoabFormItem>
+          <GoabFormItem label="Items" requirement="optional" mt="l">
+            <GoabDropdown name="children" placeholder="Select a value" onChange={log}>
+              {" "}
+              {children.map((child, _index) => (
+                <GoabDropdownItem
+                  key={crypto.randomUUID()}
+                  value={child}
+                  label={child}
+                  mountType={"reset"}
+                />
+              ))}
+            </GoabDropdown>
+          </GoabFormItem>
+        </div>
+      </GoabContainer>
+
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                const parents = ["All", "Big", "Small"];
+                const childrenAll = ["Bus", "Elephant", "Key", "Pen", "Watch", "Truck"];
+                const childrenBig = ["Elephant", "Truck", "Bus"];
+                const childrenSmall = ["Key", "Pen", "Watch"];
+                const [children, setChildren] = useState<string[]>([]);
+
+                const loadSchemas = (name: string, values: string[] | string) => {
+                  if (typeof values === "string") {
+                    if (values === "All") setChildren(childrenAll);
+                    else if (values === "Big") setChildren(childrenBig);
+                    else setChildren(childrenSmall);
+                  }
+                };
+
+                const log = () => {
+                  console.log("Children Changed");
+                };
+            `}
+      />
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+              <GoAFormItem label="Parent" requirement="optional" helpText="Choose the type to change the list below">
+                <GoADropdown name="parent" placeholder="Select a value" 
+                  onChange={loadSchemas}>
+                  {parents.map((parent) => (
+                    <GoADropdownItem key={parent} value={parent} label={parent} />
+                  ))}
+                </GoADropdown> 
+              </GoAFormItem>
+              <GoAFormItem label="Children" requirement="optional">
+                <GoADropdown name="children" placeholder="Select a value" onChange={log}>
+                  {" "}
+                  {children.map((child, index) => (
+                    <GoADropdownItem
+                      key={crypto.randomUUID()}
+                      value={child}
+                      label={child}
+                      mountType={"reset"}
+                    />
+                  ))}
+                </GoADropdown>
+              </GoAFormItem>
+            `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+              <GoabFormItem
+              label="Size"
+              requirement="optional"
+              helpText="Choose the type to change the list below">
+                <GoabDropdown name="parent" placeholder="Select a value"
+                            onChange={(event: GoabDropdownOnChangeDetail) => loadSchemas(event.name as string, event.value as string)}>
+                {parents.map(parent => (
+                    <GoabDropdownItem key={parent} value={parent} label={parent} />
+                ))}
+              </GoabDropdown>
+            </GoabFormItem>
+            <GoabFormItem label="Items" requirement="optional" mt="l">
+              <GoabDropdown name="children" placeholder="Select a value" onChange={log}>
+                {" "}
+                {children.map((child, _index) => (
+                  <GoabDropdownItem
+                    key={crypto.randomUUID()}
+                    value={child}
+                    label={child}
+                    mountType={"reset"}
+                  />
+                ))}
+              </GoabDropdown>
+            </GoabFormItem>
+            `}
+        />
+      )}
+
+      <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+              export class DropdownComponent {
+                changeForm = new FormGroup({
+                  parentDropdown: new FormControl(""),
+                  childDropdown: new FormControl(""),
+                });
+                parents = ["All", "Big", "Small"];
+                children = [""];
+
+                childrenAll = ["Bus", "Elephant", "Key", "Pen", "Watch", "Truck"];
+                childrenBig = ["Elephant", "Truck", "Bus"];
+                childrenSmall = ["Key", "Pen", "Watch"];
+
+                ngOnInit() {
+                  this.onChange();
+                }
+
+                onChange() {
+                  this.changeForm.get("parentDropdown")?.valueChanges
+                  .subscribe((value) => {
+                    if (value === "All") this.children = this.childrenAll;
+                    else if (value === "Big") this.children = this.childrenBig;
+                    else this.children = this.childrenSmall;
+                  });
+                }
+
+                generateUniqueKey(index: number, item: string): string {
+                  return \`$\{item}_$\{index}_$\{Math.random()}\`;
+                }
+              }
+            `}
+      />
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+              <div [formGroup]="changeForm">
+                <goa-form-item label="Size" requirement="optional" helptext="Choose the type to change the list below">
+                  <goa-dropdown goaValue formControlName="parentDropdown" 
+                    placeholder="Select a value" name="parent">
+                    <goa-dropdown-item *ngFor="let parent of parents" 
+                        [value]="parent" [label]="parent" />
+                  </goa-dropdown>
+                </goa-form-item>
+                <goa-form-item label="Items" requirement="optional">
+                  <goa-dropdown formControlName="childDropdown" 
+                      placeholder="Select a value" goaValue name="children">
+                    <ng-container *ngIf="children.length > 0">
+                    <goa-dropdown-item
+                      *ngFor="let child of children; trackBy: generateUniqueKey"
+                      [value]="child"
+                      [label]="child"
+                      [mount]="'reset'"
+                    />
+                  </ng-container>
+                  </goa-dropdown>
+                </goa-form-item>
+              </div>
+            `}
+        />
+      )}
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+              <div [formGroup]="changeForm">
+                <goab-form-item label="Size" requirement="optional" helpText="Choose the type to change the list below">
+                  <goab-dropdown formControlName="parentDropdown"
+                      placeholder="Select a value" name="parent">
+                    <goab-dropdown-item *ngFor="let parent of parents"
+                         [value]="parent" [label]="parent" />
+                  </goab-dropdown>
+                </goab-form-item>
+                <goab-form-item label="Items" requirement="optional">
+                  <goab-dropdown formControlName="childDropdown"
+                    placeholder="Select a value" name="children">
+                      <ng-container *ngIf="children.length > 0">
+                        <goab-dropdown-item
+                          *ngFor="let child of children; trackBy: generateUniqueKey"
+                          [value]="child"
+                          [label]="child"
+                          [mountType]="'reset'"
+                        />
+                      </ng-container>
+                  </goab-dropdown>
+                </goab-form-item>
+              </div>
+            `}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/examples/dropdown/DropdownExamples.tsx b/src/examples/dropdown/DropdownExamples.tsx
index bc5d70463..86b8fdc34 100644
--- a/src/examples/dropdown/DropdownExamples.tsx
+++ b/src/examples/dropdown/DropdownExamples.tsx
@@ -1,553 +1,18 @@
-import { useContext, useState } from "react";
-import {
-  DropdownItemMountType,
-  GoAButton,
-  GoAButtonGroup,
-  GoAContainer,
-  GoADivider,
-  GoADropdown,
-  GoADropdownItem,
-  GoAFormItem,
-  GoAInput,
-  GoARadioGroup,
-  GoARadioItem,
-} from "@abgov/react-components";
-import { LanguageContext } from "@components/sandbox";
-import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
-
-type Task = {
-  value: string;
-  label: string;
-  mount: DropdownItemMountType;
-};
+import { DropdownAddItemExample } from "@examples/dropdown/DropdownAddItemExample.tsx";
+import { DropdownChangeItemExample } from "@examples/dropdown/DropdownChangeItemExample.tsx";
 
 export const DropdownExamples = () => {
-  const language = useContext(LanguageContext);
-  const [tasks, setTasks] = useState<Task[]>([
-    { label: "Finish Report", value: "finish-report", mount: "append" },
-    { label: "Attend Meeting", value: "attend-meeting", mount: "append" },
-    { label: "Reply Emails", value: "reply-emails", mount: "append" },
-  ]);
-  const [newTask, setNewTask] = useState<string>("");
-  const [mountType, setNewMountType] = useState<string>("append");
-  const [selectedTask, setSelectedTask] = useState<string>("");
-  const [taskError, setTaskError] = useState<boolean>(false);
-  const [isReset, setIsReset] = useState<boolean>(false);
-
-  function onMountTypeChange(value: string) {
-    setNewMountType(value);
-  }
-
-  function addTask() {
-    if (newTask === "") {
-      setTaskError(true);
-      return;
-    }
-    setTaskError(false);
-
-    const task = {
-      label: newTask,
-      value: newTask.toLowerCase().replace(" ", "-"),
-      mount: mountType as DropdownItemMountType,
-    };
-    setTasks([...tasks, task]);
-    setIsReset(false);
-  }
-
-  function reset() {
-    setTasks([]);
-    setNewMountType("append");
-    setNewTask("");
-    setSelectedTask("");
-    setTaskError(false);
-    setIsReset(true);
-  }
-
-  // ------------------------------------------------------------------
-  // Parent child edge case
-  // ------------------------------------------------------------------
-  const parents = ["All", "Big", "Small"];
-  const childrenAll = ["Bus", "Elephant", "Key", "Pen", "Watch", "Truck"];
-  const childrenBig = ["Elephant", "Truck", "Bus"];
-  const childrenSmall = ["Key", "Pen", "Watch"];
-  const [children, setChildren] = useState<string[]>([]);
-
-  const loadSchemas = (_name: string, values: string[] | string) => {
-    if (typeof values === "string") {
-      if (values === "All") setChildren(childrenAll);
-      else if (values === "Big") setChildren(childrenBig);
-      else setChildren(childrenSmall);
-    }
-  };
-
-  const log = () => {
-    console.log("Children Changed");
-  };
-
   return (
     <>
       <h2 id="component-examples" className="hidden" aria-hidden="true">
         Examples
       </h2>
       <h3 id="component-example-with-mount-type">Dynamically add an item to a dropdown list</h3>
-      <GoAContainer mt="m" mb="none">
-        <div style={{ padding: "40px" }}>
-          <GoAFormItem
-            requirement="required"
-            mt="m"
-            label="Name of item"
-            error={taskError ? "Please enter item name" : undefined}
-            helpText="Add an item to the dropdown list below">
-            <GoAInput
-              onChange={(_, value: string) => setNewTask(value)}
-              name="item"
-              placeholder=""
-              value={newTask}></GoAInput>
-          </GoAFormItem>
-
-          <GoAFormItem mt="m" label="Add to">
-            <GoARadioGroup
-              name="mountType"
-              onChange={(_name, value) => onMountTypeChange(value)}
-              value={mountType}
-              orientation="horizontal">
-              <GoARadioItem value="prepend" label="Start" />
-              <GoARadioItem value="append" label="End" />
-            </GoARadioGroup>
-          </GoAFormItem>
-
-          <GoAButtonGroup alignment={"start"} gap="relaxed">
-            <GoAButton mt="m" type="primary" onClick={addTask}>
-              Add new item
-            </GoAButton>
-            <GoAButton mt="m" type="tertiary" onClick={reset}>
-              Reset list
-            </GoAButton>
-          </GoAButtonGroup>
-
-          <GoADivider mt="m"></GoADivider>
-
-          <GoAFormItem mt="m" label="All items">
-            <div
-              style={{
-                width: isReset ? "320px" : "auto",
-              }}>
-              <GoADropdown
-                key={tasks.length}
-                onChange={(_, values: string[] | string) => setSelectedTask(values as string)}
-                value={selectedTask}
-                name="selectedTask">
-                {tasks.map(task => (
-                  <GoADropdownItem
-                    key={task.value}
-                    value={task.value}
-                    mountType={task.mount}
-                    label={task.label}></GoADropdownItem>
-                ))}
-              </GoADropdown>
-            </div>
-          </GoAFormItem>
-        </div>
-      </GoAContainer>
-      {language === "angular" && (
-        <>
-          <CodeSnippet
-            lang="typescript"
-            tags="angular"
-            allowCopy={true}
-            code={`
-                  type DropdownItemMountType = "append" | "prepend" | "reset";
-                  interface Task {
-                    value: string;
-                    label: string;
-                    mount: DropdownItemMountType;
-                  }         
-                         
-                  export class SomeComponent {
-                    tasks: Task[] = [
-                      { label: "Finish Report", value: "finish-report", mount: "append" },
-                      { label: "Attend Meeting", value: "attend-meeting", mount: "append" },
-                      { label: "Reply Emails", value: "reply-emails", mount: "append" },
-                    ];
-                    newTask = "";
-                    mountType: DropdownItemMountType = "append";
-                    selectedTask = "";
-                    taskError = false;
-                    renderTrigger = true;
-                    constructor() {}
-                    onMountTypeChange(event: Event): void {
-                      this.mountType = (event as CustomEvent).detail.value as DropdownItemMountType;
-                    }
-                    onNewTaskChange(event: Event): void {
-                      this.newTask = (event as CustomEvent).detail.value;
-                      this.taskError = false;
-                    }
-                    onSelectedTaskChange(event: Event): void {
-                      this.selectedTask = (event as CustomEvent).detail.value;
-                    }
-                    addTask(): void {
-                      if (this.newTask === "") {
-                        this.taskError = true;
-                        return;
-                      }
-                      this.taskError = false;
-                      const task: Task = {
-                        label: this.newTask,
-                        value: this.newTask.toLowerCase().replace(" ", "-"),
-                        mount: this.mountType,
-                      };
-                      this.tasks =
-                        this.mountType === "prepend" ? [task, ...this.tasks] : [...this.tasks, task];
-                      this.newTask = "";
-                    }
-                    reset(): void {
-                      this.newTask = "";
-                      this.selectedTask = "";
-                      this.taskError = false;
-                      this.tasks = [];
-                      this.forceRerender();
-                    }
-                    forceRerender(): void {
-                      this.renderTrigger = false;
-                      setTimeout(() => {
-                        this.renderTrigger = true;
-                      }, 0);
-                    }
-                    trackByFn(index: number, item: Task): string {
-                      return item.value;
-                    }
-                  }`}
-          />
-          <CodeSnippet
-            lang="html"
-            tags="angular"
-            allowCopy={true}
-            code={`
-              <goa-container mt="m" mb="none">
-                <div style="padding: 40px;">
-                  <goa-form-item
-                    requirement="required"
-                    mt="m"
-                    label="Name of item"
-                    [error]="taskError ? 'Please enter item name' : undefined"
-                    helpText="Add an item to the dropdown list below">
-                    <goa-input
-                      name="item"
-                      placeholder=""
-                      [value]="newTask"
-                      (_change)="onNewTaskChange($event)">
-                    </goa-input>
-                  </goa-form-item>
-                  <goa-form-item mt="m" label="Add to">
-                    <goa-radio-group
-                      name="mountType"
-                      [value]="mountType"
-                      orientation="horizontal"
-                      (_change)="onMountTypeChange($event)">
-                      <goa-radio-item value="prepend" label="Start"></goa-radio-item>
-                      <goa-radio-item value="append" label="End"></goa-radio-item>
-                    </goa-radio-group>
-                  </goa-form-item>
-                  <goa-button-group alignment="start" gap="relaxed">
-                    <goa-button mt="m" type="primary" (_click)="addTask()">
-                      Add new item
-                    </goa-button>
-                    <goa-button mt="m" type="tertiary" (_click)="reset()">
-                      Reset list
-                    </goa-button>
-                  </goa-button-group>
-                  <goa-divider mt="m"></goa-divider>
-                  <goa-form-item mt="m" label="All items">
-                    <ng-container *ngIf="renderTrigger">
-                      <goa-dropdown
-                        [value]="selectedTask"
-                        name="selectedTask"
-                        (_change)="onSelectedTaskChange($event)">
-                        <goa-dropdown-item
-                          *ngFor="let task of tasks; trackBy: trackByFn"
-                          [value]="task.value"
-                          [mount]="task.mount"
-                          [label]="task.label">
-                        </goa-dropdown-item>
-                      </goa-dropdown>
-                    </ng-container>
-                  </goa-form-item>
-                </div>
-              </goa-container>
-            `}
-          />
-        </>
-      )}
-      {language === "react" && (
-        <>
-          <CodeSnippet
-            lang="typescript"
-            tags="react"
-            allowCopy={true}
-            code={`
-              type Task = {
-                value: string;
-                label: string;
-                mount: DropdownItemMountType;
-              };
-              const [tasks, setTasks] = useState<Task[]>([
-                  { label: "Finish Report", value: "finish-report", mount: "append" },
-                  { label: "Attend Meeting", value: "attend-meeting", mount: "append" },
-                  { label: "Reply Emails", value: "reply-emails", mount: "append" }
-              ]);
-              const [newTask, setNewTask] = useState<string>("");
-              const [mountType, setNewMountType] = useState<string>("append");
-              const [selectedTask, setSelectedTask] = useState<string>("");
-              const [taskError, setTaskError] = useState<boolean>(false);
-                
-              function onMountTypeChange(value: string) {
-                setNewMountType(value);
-              }
-              function addTask() {
-                if (newTask === "") {
-                  setTaskError(true);
-                  return;
-                }
-                setTaskError(false);
-                const task = {
-                  label: newTask,
-                  value: newTask.toLowerCase().replace(" ", "-"),
-                  mount: mountType as DropdownItemMountType,
-                };
-                setTasks([...tasks, task]);
-              }
-              
-              function reset() {
-                setTasks([]);
-                setNewMountType("append");
-                setNewTask("");
-                setSelectedTask("");
-                setTaskError(false);
-              }                
-            `}
-          />
-
-          <CodeSnippet
-            lang="html"
-            tags="react"
-            allowCopy={true}
-            code={`
-              <GoAContainer mt="m" mb="none">
-                <div style={{ padding: "40px" }}>
-                  <GoAFormItem
-                    requirement="required"
-                    mt="m"
-                    label="Name of item"
-                    error={taskError ? "Please enter item name" : undefined}
-                    helpText="Add an item to the dropdown list below">
-                    <GoAInput
-                      onChange={(_, value: string) => setNewTask(value)}
-                      name="item"
-                      placeholder=""
-                      value={newTask}></GoAInput>
-                  </GoAFormItem>
-                  <GoAFormItem mt="m" label="Add to">
-                    <GoARadioGroup
-                      name="mountType"
-                      onChange={(_name, value) => onMountTypeChange(value)}
-                      value={mountType}
-                      orientation="horizontal">
-                      <GoARadioItem value="prepend" label="Start" />
-                      <GoARadioItem value="append" label="End" />
-                    </GoARadioGroup>
-                  </GoAFormItem>
-                  <GoAButtonGroup alignment={"start"} gap="relaxed">
-                    <GoAButton mt="m" type="primary" onClick={addTask}>
-                      Add new item
-                    </GoAButton>
-                    <GoAButton mt="m" type="tertiary" onClick={reset}>
-                      Reset list
-                    </GoAButton>
-                  </GoAButtonGroup>
-                  <GoADivider mt="m"></GoADivider>
-                  <GoAFormItem mt="m" label="All items">
-                    <GoADropdown
-                      key={tasks.length}
-                      onChange={(_, values: string[] | string) => setSelectedTask(values as string)}
-                      value={selectedTask}
-                      name="selectedTask">
-                      {tasks.map(task => (
-                        <GoADropdownItem
-                          key={task.value}
-                          value={task.value}
-                          mountType={task.mount}
-                          label={task.label}></GoADropdownItem>
-                      ))}
-                    </GoADropdown>
-                  </GoAFormItem>
-                </div>
-              </GoAContainer>
-            `}
-          />
-        </>
-      )}
-
-      {/* ---------------------------------------- */}
-      {/* Parent child edge case */}
-      {/* ---------------------------------------- */}
+      <DropdownAddItemExample />
       <h3 id="component-parent-child-common-items" style={{ marginTop: "48px" }}>
         Dynamically change items in a dropdown
       </h3>
-      <GoAContainer>
-        <div style={{ padding: "40px" }}>
-          <GoAFormItem
-            label="Size"
-            requirement="optional"
-            helpText="Choose the type to change the list below">
-            <GoADropdown name="parent" placeholder="Select a value" onChange={loadSchemas}>
-              {parents.map(parent => (
-                <GoADropdownItem key={parent} value={parent} label={parent} />
-              ))}
-            </GoADropdown>
-          </GoAFormItem>
-          <GoAFormItem label="Items" requirement="optional" mt="l">
-            <GoADropdown name="children" placeholder="Select a value" onChange={log}>
-              {" "}
-              {children.map((child, _index) => (
-                <GoADropdownItem
-                  key={crypto.randomUUID()}
-                  value={child}
-                  label={child}
-                  mountType={"reset"}
-                />
-              ))}
-            </GoADropdown>
-          </GoAFormItem>
-        </div>
-      </GoAContainer>
-
-      {language === "react" && (
-        <>
-          <CodeSnippet
-            lang="typescript"
-            tags="react"
-            allowCopy={true}
-            code={`
-                const parents = ["All", "Big", "Small"];
-                const childrenAll = ["Bus", "Elephant", "Key", "Pen", "Watch", "Truck"];
-                const childrenBig = ["Elephant", "Truck", "Bus"];
-                const childrenSmall = ["Key", "Pen", "Watch"];
-                const [children, setChildren] = useState<string[]>([]);
-
-                const loadSchemas = (name: string, values: string[] | string) => {
-                  if (typeof values === "string") {
-                    if (values === "All") setChildren(childrenAll);
-                    else if (values === "Big") setChildren(childrenBig);
-                    else setChildren(childrenSmall);
-                  }
-                };
-
-                const log = () => {
-                  console.log("Children Changed");
-                };
-            `}
-          />
-
-          <CodeSnippet
-            lang="html"
-            tags="react"
-            allowCopy={true}
-            code={`
-              <GoAFormItem label="Parent" requirement="optional" helpText="Choose the type to change the list below">
-                <GoADropdown name="parent" placeholder="Select a value" 
-                  onChange={loadSchemas}>
-                  {parents.map((parent) => (
-                    <GoADropdownItem key={parent} value={parent} label={parent} />
-                  ))}
-                </GoADropdown>
-              </GoAFormItem>
-              <GoAFormItem label="Children" requirement="optional">
-                <GoADropdown name="children" placeholder="Select a value" onChange={log}>
-                  {" "}
-                  {children.map((child, index) => (
-                    <GoADropdownItem
-                      key={crypto.randomUUID()}
-                      value={child}
-                      label={child}
-                      mountType={"reset"}
-                    />
-                  ))}
-                </GoADropdown>
-              </GoAFormItem>
-            `}
-          />
-        </>
-      )}
-
-      {language === "angular" && (
-        <>
-          <CodeSnippet
-            lang="typescript"
-            tags="angular"
-            allowCopy={true}
-            code={`
-              export class DropdownComponent {
-                changeForm = new FormGroup({
-                  parentDropdown: new FormControl(""),
-                  childDropdown: new FormControl(""),
-                });
-                parents = ["All", "Big", "Small"];
-                children = [""];
-
-                childrenAll = ["Bus", "Elephant", "Key", "Pen", "Watch", "Truck"];
-                childrenBig = ["Elephant", "Truck", "Bus"];
-                childrenSmall = ["Key", "Pen", "Watch"];
-
-                ngOnInit() {
-                  this.onChange();
-                }
-
-                onChange() {
-                  this.changeForm.get("parentDropdown")?.valueChanges
-                  .subscribe((value) => {
-                    if (value === "All") this.children = this.childrenAll;
-                    else if (value === "Big") this.children = this.childrenBig;
-                    else this.children = this.childrenSmall;
-                  });
-                }
-
-                generateUniqueKey(index: number, item: string): string {
-                  return \`$\{item}_$\{index}_$\{Math.random()}\`;
-                }
-              }
-            `}
-          />
-          <CodeSnippet
-            lang="html"
-            tags="angular"
-            allowCopy={true}
-            code={`
-              <div [formGroup]="changeForm">
-                <goa-form-item label="Size" requirement="optional" helptext="Choose the type to change the list below">
-                  <goa-dropdown goaValue formControlName="parentDropdown" 
-                    placeholder="Select a value" name="parent">
-                    <goa-dropdown-item *ngFor="let parent of parents" 
-                        [value]="parent" [label]="parent" />
-                  </goa-dropdown>
-                </goa-form-item>
-                <goa-form-item label="Items" requirement="optional">
-                  <goa-dropdown formControlName="childDropdown" 
-                      placeholder="Select a value" goaValue name="children">
-                    <ng-container *ngIf="children.length > 0">
-                    <goa-dropdown-item
-                      *ngFor="let child of children; trackBy: generateUniqueKey"
-                      [value]="child"
-                      [label]="child"
-                      [mount]="'reset'"
-                    />
-                  </ng-container>
-                  </goa-dropdown>
-                </goa-form-item>
-              </div>
-            `}
-          />
-        </>
-      )}
+      <DropdownChangeItemExample/>
     </>
   );
-};
+}
diff --git a/src/examples/filter-chip/FilterChipDeleteEventExample.tsx b/src/examples/filter-chip/FilterChipDeleteEventExample.tsx
new file mode 100644
index 000000000..d1cf464d6
--- /dev/null
+++ b/src/examples/filter-chip/FilterChipDeleteEventExample.tsx
@@ -0,0 +1,113 @@
+import { Sandbox } from "@components/sandbox";
+import { GoabFilterChip } from "@abgov/react-components";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { useContext, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const FilterChipDeleteEventExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const [chips, setChips] = useState(["Chip 1", "Chip 2", "Chip 3"]);
+  const deleteChip = (chip: string) => {
+    setChips(prevChips => prevChips.filter(c => c !== chip));
+  };
+
+  return (
+    <Sandbox skipRender>
+      {chips.map(chip => (
+        <GoabFilterChip key={chip} content={chip} onClick={() => deleteChip(chip)} mr="s" />
+      ))}
+
+      <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  chips: string[] = ["Chip 1", "Chip 2", "Chip 3"];
+
+                  deleteChip(chip: string): void {
+                    this.chips = this.chips.filter((c) => c !== chip);
+                  }
+                `}
+      />
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  <goa-filter-chip
+                    *ngFor="let chip of chips"
+                    [content]="chip"
+                    (_click)="deleteChip(chip)"
+                    mr="s">
+                  </goa-filter-chip>
+                `}
+        />
+      )}
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  <goab-filter-chip
+                    *ngFor="let chip of chips"
+                    [content]="chip"
+                    (onClick)="deleteChip(chip)"
+                    mr="s">
+                  </goab-filter-chip>
+                `}
+        />
+      )}
+
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  const [chips, setChips] = useState(["Chip 1", "Chip 2", "Chip 3"]);
+  
+                  const deleteChip = (chip: string) => {
+                    setChips((prevChips) => prevChips.filter((c) => c !== chip));
+                  };
+                `}
+      />
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  {chips.map(chip => (
+                    <GoAFilterChip
+                      key={chip}
+                      content={chip}
+                      onClick={() => deleteChip(chip)}
+                      mr="s"
+                    />
+                  ))}
+                `}
+        />
+      )}
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  {chips.map(chip => (
+                    <GoabFilterChip
+                      key={chip}
+                      content={chip}
+                      onClick={() => deleteChip(chip)}
+                      mr="s"
+                    />
+                  ))}
+                `}
+        />
+      )}
+    </Sandbox>
+  )
+}
diff --git a/src/examples/filter-chip/FilterChipExamples.tsx b/src/examples/filter-chip/FilterChipExamples.tsx
new file mode 100644
index 000000000..488c9a5ca
--- /dev/null
+++ b/src/examples/filter-chip/FilterChipExamples.tsx
@@ -0,0 +1,21 @@
+import { FilterChipDeleteEventExample } from "@examples/filter-chip/FilterChipDeleteEventExample.tsx";
+import { FilterChipInteractiveExample } from "@examples/filter-chip/FilterChipInteractiveExample.tsx";
+import { FilterChipTypedChipExample } from "@examples/filter-chip/FilterChipTypedChipExample.tsx";
+
+export const FilterChipExamples = () => {
+  return (
+    <>
+      <h2 id="component-examples" className="hidden" aria-hidden="true">
+        Examples
+      </h2>
+      <h3 id="component-example-delete">Delete Event</h3>
+      <FilterChipDeleteEventExample />
+
+      <h3 id="component-interactive">Interactive Example</h3>
+      <FilterChipInteractiveExample />
+
+      <h3 id="component-typed">Typed Chips Example</h3>
+      <FilterChipTypedChipExample/>
+    </>
+  )
+}
diff --git a/src/examples/filter-chip/FilterChipInteractiveExample.tsx b/src/examples/filter-chip/FilterChipInteractiveExample.tsx
new file mode 100644
index 000000000..88adcf008
--- /dev/null
+++ b/src/examples/filter-chip/FilterChipInteractiveExample.tsx
@@ -0,0 +1,171 @@
+import { Sandbox } from "@components/sandbox";
+import { GoabButton, GoabButtonGroup, GoabFilterChip } from "@abgov/react-components";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { useContext, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const FilterChipInteractiveExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const [activeFilters, setActiveFilters] = useState<string[]>([]);
+  const addFilter = () => {
+    const randomFilter = `Filter ${Math.floor(Math.random() * 100)}`;
+    if (!activeFilters.includes(randomFilter)) {
+      setActiveFilters(prevFilters => [...prevFilters, randomFilter]);
+    }
+  };
+
+  const removeFilter = (filter: string) => {
+    setActiveFilters(prevFilters => prevFilters.filter(f => f !== filter));
+  };
+
+  return (
+    <Sandbox skipRender>
+      {activeFilters.map(filter => (
+        <GoabFilterChip
+          key={filter}
+          content={filter}
+          onClick={() => removeFilter(filter)}
+          mr="s"
+          mb="s"
+          mt="s"
+        />
+      ))}
+
+      <GoabButtonGroup alignment="center" mt="l">
+        <GoabButton onClick={addFilter}>Add Random Filter</GoabButton>
+      </GoabButtonGroup>
+
+      <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+               export class FilterChipInteractiveExampleComponent {
+                activeFilters: string[] = [];
+
+                removeFilter(filter: string): void {
+                  this.activeFilters = this.activeFilters.filter((f) => f !== filter);
+                }
+
+                addFilter(): void {
+                  const randomFilter = "Filter " + Math.floor(Math.random() * 100);
+                  if (!this.activeFilters.includes(randomFilter)) {
+                    this.activeFilters.push(randomFilter);
+                  }
+                }
+              }
+      `}
+      />
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                      <div>
+                        <goa-filter-chip
+                          *ngFor="let filter of activeFilters"
+                          [content]="filter"
+                          (_click)="removeFilter(filter)"
+                          mr="s">
+                        </goa-filter-chip>
+                      </div>
+                      <goa-button-group alignment="center" mt="l">
+                        <goa-button (click)="addFilter()">Add Random Filter</goa-button>
+                      </goa-button-group>
+                `}
+        />
+      )}
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                      <div>
+                        <goab-filter-chip
+                          *ngFor="let filter of activeFilters"
+                          [content]="filter"
+                          (onClick)="removeFilter(filter)"
+                          mr="s">
+                        </goab-filter-chip>
+                      </div>
+                      <goab-button-group alignment="center" mt="l">
+                        <goab-button (onClick)="addFilter()">Add Random Filter</goab-button>
+                      </goab-button-group>
+                `}
+        />
+      )}
+
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  const [activeFilters, setActiveFilters] = useState<string[]>([]);
+
+                  const removeFilter = (filter: string) => {
+                    setActiveFilters((prevFilters) => prevFilters.filter((f) => f !== filter));
+                  };
+
+                  const addFilter = () => {
+                    const randomFilter = 'Filter ' + Math.floor(Math.random() * 100);
+                    if (!activeFilters.includes(randomFilter)) {
+                      setActiveFilters(prevFilters => [...prevFilters, randomFilter]);
+                    }
+                  };
+                `}
+      />
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <div>
+                    {activeFilters.map((filter) => (
+                      <GoAFilterChip
+                        key={filter}
+                        content={filter}
+                        onClick={() => removeFilter(filter)}
+                        mr="s"
+                        mb="s"
+                        mt="s"
+                      />
+                    ))}
+                  </div>
+                  <GoAButtonGroup alignment="center" mt="l">
+                    <GoAButton onClick={addFilter}>Add Random Filter</GoAButton>
+                  </GoAButtonGroup>
+                `}
+        />
+      )}
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <div>
+                    {activeFilters.map((filter) => (
+                      <GoabFilterChip
+                        key={filter}
+                        content={filter}
+                        onClick={() => removeFilter(filter)}
+                        mr="s"
+                        mb="s"
+                        mt="s"
+                      />
+                    ))}
+                  </div>
+                  <GoabButtonGroup alignment="center" mt="l">
+                    <GoabButton onClick={addFilter}>Add Random Filter</GoabButton>
+                  </GoabButtonGroup>
+                `}
+        />
+      )}
+    </Sandbox>
+  )
+}
diff --git a/src/examples/filter-chip/FilterChipTypedChipExample.tsx b/src/examples/filter-chip/FilterChipTypedChipExample.tsx
new file mode 100644
index 000000000..2ae8f0f6c
--- /dev/null
+++ b/src/examples/filter-chip/FilterChipTypedChipExample.tsx
@@ -0,0 +1,294 @@
+import { GoabContainer, GoabFilterChip, GoabInput } from "@abgov/react-components";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { useContext, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const FilterChipTypedChipExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const [typedChips, setTypedChips] = useState<string[]>([
+    "Typed Chip 1",
+    "Typed Chip 2",
+    "Typed Chip 3",
+  ]);
+
+  const [inputValue, setInputValue] = useState("");
+  const handleInputChange = (_name: string, value: string) => {
+    setInputValue(value);
+  };
+  const handleInputKeyDown = (_name: string, value: string, key: string) => {
+    if (key === "Enter" && value.trim() !== "") {
+      setTypedChips(prevChips => [...prevChips, value.trim()]);
+      setTimeout(() => {
+        setInputValue("");
+      }, 0);
+    } else if (key === "Backspace" && value === "" && typedChips.length > 0) {
+      setTypedChips(prevChips => prevChips.slice(0, -1));
+    }
+  };
+
+  const removeTypedChip = (chip: string) => {
+    setTypedChips(prevChips => prevChips.filter(c => c !== chip));
+  };
+  return (
+    <>
+      <GoabContainer mb="none">
+        <div
+          className="chip-input-wrapper"
+          style={{
+            border: "1px solid #ddd",
+            padding: "8px",
+            borderRadius: "4px",
+            display: "flex",
+            flexWrap: "wrap",
+            alignItems: "center",
+          }}>
+          <GoabInput
+            name="chipInput"
+            placeholder="Type and press Enter"
+            value={inputValue}
+            onChange={detail => handleInputChange(detail.name, detail.value)}
+            onKeyPress={detail => handleInputKeyDown(detail.name, detail.value, detail.key)}
+            width="30ch"
+            mr="s"
+          />
+          {typedChips.map((chip, index) => (
+            <GoabFilterChip
+              key={index}
+              content={chip}
+              onClick={() => removeTypedChip(chip)}
+              mr="s"
+              mt="s"
+              mb="s"
+            />
+          ))}
+        </div>
+      </GoabContainer>
+      {version === "old" && (
+        <>
+          <CodeSnippet
+            lang="typescript"
+            tags="angular"
+            allowCopy={true}
+            code={`
+
+                  import { Component } from "@angular/core";
+
+                  @Component({
+                    selector: "abgov-chip",
+                    templateUrl: "./filter-chip.component.html",
+                    styleUrl: "./filter-chip.component.css",
+                  })
+                  export class FilterChipComponent {
+                   
+                    typedChips: string[] = ["Typed Chip 1", "Typed Chip 2", "Typed Chip 3"];
+                    inputValue = "";
+
+
+                    onInput(event: Event): void {
+                      this.inputValue = (event.target as HTMLInputElement).value;
+                    }
+
+                    addChip(): void {
+                      if (this.inputValue.trim()) {
+                        this.typedChips.push(this.inputValue.trim());
+                        this.inputValue = "";
+                      }
+                    }
+
+                    removeTypedChip(chip: string): void {
+                      this.typedChips = this.typedChips.filter((c) => c !== chip);
+                    }
+
+                    handleBackspace(event: KeyboardEvent): void {
+                      if (!this.inputValue && this.typedChips.length > 0 && event.key === "Backspace") {
+                        this.typedChips.pop();
+                        event.preventDefault();
+                      }
+                    }
+                  }
+                
+                `}
+          />
+          <CodeSnippet
+            lang="html"
+            tags="angular"
+            allowCopy={true}
+            code={`
+              <goa-input
+                id="chipInput"
+                type="text"
+                [value]="inputValue"
+                (_change)="onInput($event)"
+                (keydown)="handleBackspace($event)"
+                (keydown.enter)="addChip()"
+                placeholder="Type and press Enter"
+                mr="s">
+              </goa-input>
+              <goa-filter-chip
+                *ngFor="let chip of typedChips"
+                [content]="chip"
+                (_click)="removeTypedChip(chip)"
+                mr="s"
+                mt="s"
+                mb="s">
+              </goa-filter-chip>
+            `}
+          />
+        </>
+      )}
+
+      {version === "new" && (
+        <>
+          <CodeSnippet
+            lang="typescript"
+            tags="angular"
+            allowCopy={true}
+            code={`
+                  export class FilterChipComponent {
+                    typedChips: string[] = ["Typed Chip 1", "Typed Chip 2", "Typed Chip 3"];
+                    inputValue = "";
+
+                    onInput(detail: GoabInputOnChangeDetail): void {
+                      this.inputValue = detail.value;
+                    }
+
+                    addChip(): void {
+                      if (this.inputValue.trim()) {
+                        this.typedChips.push(this.inputValue.trim());
+                        this.inputValue = "";
+                      }
+                    }
+
+                    removeTypedChip(chip: string): void {
+                      this.typedChips = this.typedChips.filter((c) => c !== chip);
+                    }
+
+                    handleBackspace(event: KeyboardEvent): void {
+                      if (!this.inputValue && this.typedChips.length > 0 && event.key === "Backspace") {
+                        this.typedChips.pop();
+                        event.preventDefault();
+                      }
+                    }
+                `}
+          />
+          <CodeSnippet
+            lang="html"
+            tags="angular"
+            allowCopy={true}
+            code={`
+                      <h2>Typed Chip</h2>
+                      <goab-input
+                        id="chipInput"
+                        type="text"
+                        [value]="inputValue"
+                        (onChange)="onInput($event)"
+                        (keydown)="handleBackspace($event)"
+                        (keydown.enter)="addChip()"
+                        placeholder="Type and press Enter"
+                        mr="s">
+                      </goab-input>
+                      <goab-filter-chip
+                        *ngFor="let chip of typedChips"
+                        [content]="chip"
+                        (_click)="removeTypedChip(chip)"
+                        mr="s"
+                        mt="s"
+                        mb="s">
+                      </goab-filter-chip>
+                  `}
+          />
+        </>
+      )}
+
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                      const [typedChips, setTypedChips] = useState<string[]>([
+                        "Typed Chip 1",
+                        "Typed Chip 2",
+                        "Typed Chip 3",
+                      ]);
+                      const [inputValue, setInputValue] = useState("");
+                      const handleInputChange = (name: string, value: string) => {
+                        setInputValue(value);
+                      };
+
+                      const handleInputKeyDown = (name: string, 
+                                                  value: string, 
+                                                  key: string) => {
+                        if (key === "Enter" && value.trim() !== "") {
+                          setTypedChips((prevChips) => [...prevChips, value.trim()]);
+                          setTimeout(() => {
+                            setInputValue("");
+                          }, 0);
+                        } else if (key === "Backspace" 
+                                    && value === "" 
+                                    && typedChips.length > 0) {
+                          setTypedChips((prevChips) => prevChips.slice(0, -1));
+                        }
+                      };
+
+                      const removeTypedChip = (chip: string) => {
+                        setTypedChips((prevChips) => prevChips.filter((c) => c !== chip));
+                      };
+                `}
+      />
+      {version === "old" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+                        <GoAInput
+                          name="chipInput"
+                          placeholder="Type and press Enter"
+                          value={inputValue}
+                          onChange={handleInputChange}
+                          onKeyPress={handleInputKeyDown}
+                          width="30ch"
+                          mr="s"
+                        />    
+                        {typedChips.map((chip, index) => (
+                          <GoAFilterChip
+                            key={index}
+                            content={chip}
+                            onClick={() => removeTypedChip(chip)}
+                            mr="s"
+                            mt="s"
+                            mb="s"/>
+                        ))}
+                `}
+        />
+      )}
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+                        <GoabInput
+                          name="chipInput"
+                          placeholder="Type and press Enter"
+                          value={inputValue}
+                          onChange={(detail) => handleInputChange(detail.name, detail.value)}
+                          onKeyPress={(detail) => handleInputKeyDown(detail.name, detail.value, detail.key)}
+                          width="30ch"
+                          mr="s"
+                        />    
+                        {typedChips.map((chip, index) => (
+                          <GoabFilterChip
+                            key={index}
+                            content={chip}
+                            onClick={() => removeTypedChip(chip)}
+                            mr="s"
+                            mt="s"
+                            mb="s"/>
+                        ))}
+                `}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/examples/form-item/FormItemExamples.tsx b/src/examples/form-item/FormItemExamples.tsx
new file mode 100644
index 000000000..cab52ed8b
--- /dev/null
+++ b/src/examples/form-item/FormItemExamples.tsx
@@ -0,0 +1,18 @@
+import { FormItemSlottedHelperTextExample } from "@examples/form-item/FormItemSlottedHelperTextExample.tsx";
+import { FormItemSlottedErrorTextExample } from "@examples/form-item/FormItemSlottedErrorTextExample.tsx";
+
+export const FormItemExamples = () => {
+  return (
+    <>
+      <h2 id="component-examples" className="hidden" aria-hidden="true">
+        Examples
+      </h2>
+
+      <h3 id="component-example-slotted-helper-text">Slotted Helper Text</h3>
+      <FormItemSlottedHelperTextExample />
+
+      <h3 id="component-example-slotted-error-text">Slotted Error Text</h3>
+      <FormItemSlottedErrorTextExample />
+    </>
+  )
+}
diff --git a/src/examples/form-item/FormItemSlottedErrorTextExample.tsx b/src/examples/form-item/FormItemSlottedErrorTextExample.tsx
new file mode 100644
index 000000000..7450f1805
--- /dev/null
+++ b/src/examples/form-item/FormItemSlottedErrorTextExample.tsx
@@ -0,0 +1,120 @@
+import { Sandbox } from "@components/sandbox";
+import { GoabFormItem, GoabInput } from "@abgov/react-components";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const FormItemSlottedErrorTextExample = () => {
+  const { version } = useContext(LanguageVersionContext);
+  const errorReactNode: React.ReactNode = (
+    <>
+      <i>This is </i> slotted <b>error text</b>.
+    </>
+  );
+  const noop = () => {};
+
+  return (
+    <Sandbox skipRender>
+      <GoabFormItem label="First name" error={errorReactNode}>
+        <GoabInput onChange={noop} value="" name="item" />
+      </GoabFormItem>
+
+      {/* *********** React code ************/}
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+          const [value, setValue] = useState<string>("");
+          const onChange = (event: GoabInputOnChangeDetail) => {
+            setValue(event.value);
+          }
+        `}
+      />
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <GoAFormItem 
+                    label="First name"
+                    error={<><i>This is </i> slotted <b>error text</b>.</>}>
+                    <GoAInput onChange={onChange} value={value} name="item"></GoAInput>
+                  </GoAFormItem>
+                  `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <GoabFormItem label="First name"
+                                error={<><i>This is </i> slotted <b>error text</b>.</>}>
+                    <GoabInput onChange={onChange} value={value} name="item"></GoabInput>
+                  </GoabFormItem>
+                  `}
+        />
+      )}
+
+      {/* *********** Angular code ************/}
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  <goa-form-item label="First name">
+                  <goa-input goaValue name="item" [formControl]="itemFormCtrl" [value]="itemFormCtrl.value"></goa-input>
+
+                    <div slot="error">
+                      <span>This is </span>
+                      <i>slotted </i>
+                      <b>error text.</b>
+                    </div>
+
+                  </goa-form-item>
+                  `}
+        />
+      )}
+
+      <CodeSnippet
+        lang="typescript"
+        tags={["reactive", "angular"]}
+        allowCopy={true}
+        code={`
+                // reactive code
+                export class SomeComponent {
+                  form!: FormGroup;
+                  constructor(private fb: FormBuilder) {
+                    this.form = this.fb.group({
+                      item: [""]
+                    });
+                  }
+                }
+              `}
+      />
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  <goab-form-item label="First name" [formGroup]="form">
+                    <goab-input name="item" formControlName="item"></goab-input>
+                    <goab-form-item-slot slot="error">
+                      <span>This is </span>
+                      <i>slotted </i>
+                      <b>error text.</b>
+                    </goab-form-item-slot>
+                  </goab-form-item>
+                `}
+        />
+      )}
+    </Sandbox>
+  );
+};
diff --git a/src/examples/form-item/FormItemSlottedHelperTextExample.tsx b/src/examples/form-item/FormItemSlottedHelperTextExample.tsx
new file mode 100644
index 000000000..1ecfb1a65
--- /dev/null
+++ b/src/examples/form-item/FormItemSlottedHelperTextExample.tsx
@@ -0,0 +1,96 @@
+import { Sandbox } from "@components/sandbox";
+import { GoabFormItem, GoabInput } from "@abgov/react-components";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const FormItemSlottedHelperTextExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const noop = () => {}
+  const reactNode = <><i>This is </i> slotted <b> help text</b>.</>;
+
+  return (
+    // Must skip render because we use slotted that isn't supported by sandbox
+    <Sandbox skipRender>
+      {/*React*/}
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+          const [value, setValue] = useState<string>("");
+          const onChange = (event: GoabInputOnChangeDetail) => {
+            setValue(event.value);
+          }
+        `}
+      />
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                        <GoAFormItem label="First name"
+                               helpText={<><i>This is </i> slotted <b>help text</b>.</>}>
+                          <GoAInput onChange={onChange} value={value} name="item"></GoAInput>
+                        </GoAFormItem>
+                      `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                        <GoabFormItem label="First name"
+                               helpText={<><i>This is </i> slotted <b>help text</b>.</>}>
+                          <GoabInput onChange={onChange} value={value} name="item"></GoabInput>
+                        </GoabFormItem>
+                      `}
+        />
+      )}
+
+      {/*Angular*/}
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  <goa-form-item label="First name">
+                    <goa-input goaValue name="item" [formControl]="itemFormCtrl" [value]="itemFormCtrl.value"></goa-input>
+
+                    <div slot="helptext">
+                      <span>This is </span>
+                      <i>slotted </i>
+                      <b>help text</b>.
+                    </div>
+
+                  </goa-form-item>
+                  `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  <goab-form-item label="First name" [formGroup]="form">
+                    <goab-input name="item" formControlName="item"></goab-input>
+                    <goab-form-item-slot slot="helptext">
+                      <span>This is </span>
+                      <i>slotted </i>
+                      <b>help text</b>.
+                    </goab-form-item-slot>
+                  </goab-form-item>
+                `}
+      />}
+
+      <GoabFormItem label="First name" helpText={reactNode}>
+        <GoabInput onChange={noop} value="" name="item" />
+      </GoabFormItem>
+    </Sandbox>
+  )
+}
diff --git a/src/examples/form-stepper/FormStepperControlledNavigationExample.tsx b/src/examples/form-stepper/FormStepperControlledNavigationExample.tsx
new file mode 100644
index 000000000..92879341d
--- /dev/null
+++ b/src/examples/form-stepper/FormStepperControlledNavigationExample.tsx
@@ -0,0 +1,228 @@
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import {
+  GoabButton,
+  GoabFormStep,
+  GoabFormStepper,
+  GoabPages,
+  GoabSkeleton,
+  GoabSpacer
+} from "@abgov/react-components";
+import { Sandbox } from "@components/sandbox";
+import { useContext, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const FormStepperControlledNavigationExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+
+  const [controlledStep, setControlledStep] = useState(1);
+
+  function setControlledPage(page: number) {
+    if (page < 1 || page > 4) return;
+    setControlledStep(page);
+  }
+
+  return (
+    <>
+      <p>
+        The user needs to partially or completely finish a step to be able to move forward to
+        the next step. In this case:</p>
+        <ul>
+          <li>A step that is “Not started” will not be clickable.</li>
+          <li>A user cannot use the stepper to navigate to another page.</li>
+          <li>
+            Clicking the Active step when you are on that step will do nothing. (no page
+            refresh).
+          </li>
+        </ul>
+      <p>To use the controlled type you must set a step value ≥ 1</p>
+
+      <Sandbox fullWidth skipRender allow={["div"]} variableNames={["step"]}>
+        {/*Must skipRender because we must illustrate the Prev and Next button click logic which cannot be rendered by sandbox*/}
+        {/*Angular code*/}
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                export class SomeComponent {
+                  step = 1;  // set to first step
+                  updateStep(event: Event) {
+                    this.step = (event as CustomEvent).detail.step;
+                  }
+                  setPage(page: number) {
+                    if (page < 1 || page > 4) return;
+                    this.step = page
+                  }
+                }
+              `}
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                export class SomeComponent {
+                  step = 1;  // set to first step
+                  updateStep(event: GoabFormStepperOnChangeDetail) {
+                    this.step = event.step;
+                  }
+                  setPage(page: number) {
+                    if (page < 1 || page > 4) return;
+                    this.step = page
+                  }
+                }
+              `}
+        />}
+
+        {version === "old" && <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                <goa-form-stepper ml="s" mr="s" [step]="step" (_change)="updateStep($event)">
+                  <goa-form-step text="Personal details"></goa-form-step>
+                  <goa-form-step text="Employment history"></goa-form-step>
+                  <goa-form-step text="References"></goa-form-step>
+                  <goa-form-step text="Review"></goa-form-step>
+                </goa-form-stepper>
+                <goa-pages [current]="step">
+                  <div><!-- Page 1 content --></div>
+                  <div><!-- Page 2 content --></div>
+                  <div><!-- Page 3 content --></div>
+                  <div><!-- Page 4 content --></div>
+                </goa-pages>
+                <div style="display: flex; justify-content: space-between">
+                  <goa-button (_click)="setPage(step-1)" type="secondary">Previous</goa-button>
+                  <goa-button (_click)="setPage(step+1)" type="primary">Next</goa-button>
+                </div>
+              `}
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                <goab-form-stepper ml="s" mr="s" [step]="step" (onChange)="updateStep($event)">
+                  <goab-form-step text="Personal details"></goab-form-step>
+                  <goab-form-step text="Employment history"></goab-form-step>
+                  <goab-form-step text="References"></goab-form-step>
+                  <goab-form-step text="Review"></goab-form-step>
+                </goab-form-stepper>
+                <goab-pages [current]="step">
+                  <div><!-- Page 1 content --></div>
+                  <div><!-- Page 2 content --></div>
+                  <div><!-- Page 3 content --></div>
+                  <div><!-- Page 4 content --></div>
+                </goab-pages>
+                <div style="display: flex; justify-content: space-between">
+                  <goab-button (onClick)="setPage(step-1)" type="secondary">Previous</goab-button>
+                  <goab-button (onClick)="setPage(step+1)" type="primary">Next</goab-button>
+                </div>
+              `}
+        />}
+
+        {/*React code*/}
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                const [step, setStep] = useState<number>(1); // set to first step
+                function setPage(page: number) {
+                  if (page < 1 || page > 4) return;
+                  setStep(page);
+                }
+              `}
+        />
+        {version === "old" && <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`   <GoAFormStepper step={step} onChange={(step) => setStep(step)}>
+                      <GoAFormStep text="Personal details" />
+                      <GoAFormStep text="Employment history" />
+                      <GoAFormStep text="References" />
+                      <GoAFormStep text="Review" />
+                    </GoAFormStepper>
+                    <GoAPages current={step} mb="3xl">
+                      <div><!-- Page 1 content --></div>
+                      <div><!-- Page 2 content --></div>
+                      <div><!-- Page 3 content --></div>
+                      <div><!-- Page 4 content --></div>
+                    </GoAPages>
+                    <div style={{display: 'flex', justifyContent: 'space-between'}}>
+                      <GoAButton type="secondary" onClick={() => setPage(step - 1)}>Previous</GoAButton>
+                      <GoAButton type="primary" onClick={() => setPage(step + 1)}>Next</GoAButton>
+                    </div>
+              `}
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+           <GoabFormStepper step={step} onChange={(event) =>  setStep(event.step)}>
+                <GoabFormStep text="Personal details" />
+                <GoabFormStep text="Employment history" />
+                <GoabFormStep text="References" />
+                <GoabFormStep text="Review" />
+            </GoabFormStepper>
+            <GoabPages current={step} mb="3xl" mt="xl" mr="xl" ml="xl">
+                <div>
+                    {/*Page 1 content*/}
+                </div>
+                <div>{/* Page 2 content */}</div>
+                <div>{/* Page 3 content */}</div>
+                <div>{/* Page 4 content */}</div>
+            </GoabPages>
+            <div style={{display: 'flex', justifyContent: 'space-between'}}>
+                <GoabButton type="secondary" onClick={() => setPage(step - 1)}>Previous</GoabButton>
+                <GoabButton type="primary" onClick={() => setPage(step + 1)}>Next</GoabButton>
+            </div>
+              `}
+        />}
+
+        <GoabFormStepper step={controlledStep} onChange={(event) => setControlledStep(event.step)}>
+          <GoabFormStep text="Personal details" />
+          <GoabFormStep text="Employment history" />
+          <GoabFormStep text="References" />
+          <GoabFormStep text="Review" />
+        </GoabFormStepper>
+        <GoabPages current={controlledStep} mb="3xl" mt="xl" mr="xl" ml="xl">
+          <div>
+            <GoabSkeleton type="article" />
+          </div>
+          <div>
+            <GoabSkeleton type="header" size={'2'} />
+            <GoabSkeleton type="text" />
+            <GoabSkeleton type="header" size={'2'} />
+            <GoabSkeleton type="text" />
+          </div>
+          <div>
+            <GoabSkeleton type="text" />
+            <GoabSpacer vSpacing="m" />
+            <GoabSkeleton type="text" />
+          </div>
+          <div>
+            <GoabSkeleton type="header" size={'2'} />
+            <GoabSkeleton type="text" />
+            <GoabSpacer vSpacing="m" />
+            <GoabSkeleton type="text" />
+          </div>
+        </GoabPages>
+
+        <div style={{ display: "flex", justifyContent: "space-between" }}>
+          <GoabButton type="secondary" onClick={() => setControlledPage(controlledStep - 1)}>
+            Previous
+          </GoabButton>
+          <GoabButton type="primary" onClick={() => setControlledPage(controlledStep + 1)}>
+            Next
+          </GoabButton>
+        </div>
+      </Sandbox>
+    </>
+  )
+}
diff --git a/src/examples/form-stepper/FormStepperExamples.tsx b/src/examples/form-stepper/FormStepperExamples.tsx
new file mode 100644
index 000000000..c69cef041
--- /dev/null
+++ b/src/examples/form-stepper/FormStepperExamples.tsx
@@ -0,0 +1,19 @@
+import {
+  FormStepperControlledNavigationExample
+} from "@examples/form-stepper/FormStepperControlledNavigationExample.tsx";
+import { FormStepperStepStatusExample } from "@examples/form-stepper/FormStepperStepStatusExample.tsx";
+
+export const FormStepperExamples = () => {
+  return (
+    <>
+      <h2 id="component-examples" className="hidden" aria-hidden="true">
+        Examples
+      </h2>
+      <h3 id="component-example-controlled-navigation">Controlled Navigation</h3>
+      <FormStepperControlledNavigationExample />
+
+      <h3 id="component-example-step-status">Step status</h3>
+      <FormStepperStepStatusExample/>
+    </>
+  )
+}
diff --git a/src/examples/form-stepper/FormStepperStepStatusExample.tsx b/src/examples/form-stepper/FormStepperStepStatusExample.tsx
new file mode 100644
index 000000000..759055c02
--- /dev/null
+++ b/src/examples/form-stepper/FormStepperStepStatusExample.tsx
@@ -0,0 +1,241 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import {
+  GoabButton,
+  GoabFormStep,
+  GoabFormStepper,
+  GoabPages,
+  GoabSkeleton,
+  GoabSpacer
+} from "@abgov/react-components";
+import { useContext, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { GoabFormStepStatus } from "@abgov/ui-components-common";
+
+export const FormStepperStepStatusExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const [statusStep, setStatusStep] = useState(-1);
+  const status: GoabFormStepStatus[] = ["complete", "complete", "incomplete", "incomplete"];
+
+  function setStatusPage(page: number) {
+    if (page < 1 || page > 4) return;
+    setStatusStep(page);
+  }
+  return (
+    <>
+      The status of each step can be configured to either “complete” or “incomplete” using the
+      status property.
+      <Sandbox fullWidth skipRender allow={["div"]}>
+        {/*Angular code*/}
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                export class SomeComponent {
+                  step = -1;
+                  // controlled by the user based on form completion
+                  status = ["complete", "complete", "incomplete", "incomplete"]
+                  updateStep(event: Event) {
+                    this.step = (event as CustomEvent).detail.step;
+                  }
+                  setPage(page: number) {
+                    if (page < 1 || page > 4) return;
+                    this.step = page
+                  }
+                }
+              `}
+        />}
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                export class SomeComponent {
+                  step = -1;
+                  // controlled by the user based on form completion
+                  status: GoabFormStepStatus[] = ["complete", "complete", "incomplete", "incomplete"]
+                  updateStep(event: GoabFormStepperOnChangeDetail) {
+                    this.step = event.step;
+                  }
+                  setPage(page: number) {
+                    if (page < 1 || page > 4) return;
+                    this.step = page
+                  }
+                }
+              `}
+        />}
+        {version === "old" && <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                <goa-form-stepper ml="s" mr="s" [step]="step" (_change)="updateStep($event)">
+                  <goa-form-step text="Personal details" [status]="status[0]"></goa-form-step>
+                  <goa-form-step text="Employment history" [status]="status[1]"></goa-form-step>
+                  <goa-form-step text="References" [status]="status[2]"></goa-form-step>
+                  <goa-form-step text="Review" [status]="status[3]"></goa-form-step>
+                </goa-form-stepper>
+                <goa-pages [current]="step">
+                  <div><!-- Page 1 content --></div>
+                  <div><!-- Page 2 content --></div>
+                  <div><!-- Page 3 content --></div>
+                  <div><!-- Page 4 content --></div>
+                </goa-pages>
+                <div style="display: flex; justify-content: space-between">
+                  <goa-button (_click)="setPage(step-1)" type="secondary">Previous</goa-button>
+                  <goa-button (_click)="setPage(step+1)" type="primary">Next</goa-button>
+                </div>
+              `}
+        />}
+        {version === "new" && <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                <goab-form-stepper ml="s" mr="s" [step]="step" (onChange)="updateStep($event)">
+                  <goab-form-step text="Personal details" [status]="status[0]"></goab-form-step>
+                  <goab-form-step text="Employment history" [status]="status[1]"></goab-form-step>
+                  <goab-form-step text="References" [status]="status[2]"></goab-form-step>
+                  <goab-form-step text="Review" [status]="status[3]"></goab-form-step>
+                </goab-form-stepper>
+                <goab-pages [current]="step">
+                  <div><!-- Page 1 content --></div>
+                  <div><!-- Page 2 content --></div>
+                  <div><!-- Page 3 content --></div>
+                  <div><!-- Page 4 content --></div>
+                </goab-pages>
+              <div style="display: flex; justify-content: space-between">
+                <goab-button (onClick)="setPage(step-1)" type="secondary">Previous</goab-button>
+                <goab-button (onClick)="setPage(step+1)" type="primary">Next</goab-button>
+              </div>
+            `}
+        />}
+
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                const [step, setStep] = useState<number>(-1);
+                // controlled by the user based on form completion
+                const [status, setStatus] = useState<GoAFormStepStatusType[]>([
+                        "complete",
+                        "complete",
+                        "incomplete",
+                        "incomplete"
+                    ])
+                function setPage(page) {
+                  if (page < 1 || page > 4) return;
+                  setStep(page);
+                }
+                return (
+                  <>
+                    <GoAFormStepper step={step} onChange={(step) => setStep(step)}>
+                      <GoAFormStep text="Personal details" status={status[0]} />
+                      <GoAFormStep text="Employment history" status={status[1]} />
+                      <GoAFormStep text="References" status={status[2]} />
+                      <GoAFormStep text="Review" status={status[3]} />
+                    </GoAFormStepper>
+                    <GoAPages current={step} mb="xl">
+                      <div><!-- Page 1 content --></div>
+                      <div><!-- Page 2 content --></div>
+                      <div><!-- Page 3 content --></div>
+                      <div><!-- Page 4 content --></div>
+                    </GoAPages>
+                    <div style={{display: 'flex', justifyContent: 'space-between'}}>
+                      <GoAButton type="secondary" onClick={() => setPage(step - 1)}>Previous</GoAButton>
+                      <GoAButton type="primary" onClick={() => setPage(step + 1)}>Next</GoAButton>
+                    </div>
+                  </>
+                )
+              `}
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                const [step, setStep] = useState<number>(-1);
+                // controlled by the user based on form completion
+                const [status, setStatus] = useState<GoabFormStepStatus[]>([
+                  "complete",
+                  "complete",
+                  "incomplete",
+                  "incomplete"
+                ])
+                function setPage(page: number) {
+                  if (page < 1 || page > 4) return;
+                  setStep(page);
+                  setStatus((prevStatus) =>
+                    prevStatus.map((_, index) => (index < page ? "complete" : "incomplete"))
+                  );
+                }
+              `}
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+                <GoabFormStepper step={step} onChange={(event) => setStep(event.step)}>
+                  <GoabFormStep text="Personal details" status={status[0]} />
+                  <GoabFormStep text="Employment history" status={status[1]} />
+                  <GoabFormStep text="References" status={status[2]} />
+                  <GoabFormStep text="Review" status={status[3]} />
+                </GoabFormStepper>
+                <GoabPages current={step} mb="3xl" mt="xl" mr="xl" ml="xl">
+                  <div>{/*Page 1 content*/}</div>
+                  <div>{/*Page 2 content*/}</div>
+                  <div>{/*Page 3 content*/}</div>
+                  <div>{/*Page 4 content*/}</div>
+                </GoabPages>
+                <div style={{display: 'flex', justifyContent: 'space-between'}}>
+                  <GoabButton type="secondary" onClick={() => setPage(step - 1)}>Previous</GoabButton>
+                  <GoabButton type="primary" onClick={() => setPage(step + 1)}>Next</GoabButton>
+                </div>
+              `}
+        />}
+
+        <GoabFormStepper step={statusStep} onChange={(event) => setStatusStep(+event.step)}>
+          <GoabFormStep text="Personal details" status={status[0]} />
+          <GoabFormStep text="Employment history" status={status[1]} />
+          <GoabFormStep text="References" status={status[2]} />
+          <GoabFormStep text="Review" status={status[3]} />
+        </GoabFormStepper>
+        <GoabPages current={statusStep} mb="3xl" mt="xl" mr="xl" ml="xl">
+          <div>
+            <GoabSkeleton type="article" />
+          </div>
+          <div>
+            <GoabSkeleton type="header" size={'2'} />
+            <GoabSkeleton type="text" />
+            <GoabSkeleton type="header" size={'2'} />
+            <GoabSkeleton type="text" />
+          </div>
+          <div>
+            <GoabSkeleton type="text" />
+            <GoabSpacer vSpacing="m" />
+            <GoabSkeleton type="text" />
+          </div>
+          <div>
+            <GoabSkeleton type="header" size={'2'} />
+            <GoabSkeleton type="text" />
+            <GoabSpacer vSpacing="m" />
+            <GoabSkeleton type="text" />
+          </div>
+        </GoabPages>
+        <div style={{ display: "flex", justifyContent: "space-between" }}>
+          <GoabButton type="secondary" onClick={() => setStatusPage(statusStep - 1)}>
+            Previous
+          </GoabButton>
+          <GoabButton type="primary" onClick={() => setStatusPage(statusStep + 1)}>
+            Next
+          </GoabButton>
+        </div>
+      </Sandbox>
+    </>
+  )
+}
diff --git a/src/examples/microsite-header/MicrositeHeaderExamples.tsx b/src/examples/microsite-header/MicrositeHeaderExamples.tsx
index 32dc93600..0ea2b2e70 100644
--- a/src/examples/microsite-header/MicrositeHeaderExamples.tsx
+++ b/src/examples/microsite-header/MicrositeHeaderExamples.tsx
@@ -1,25 +1,30 @@
-import { GoAMicrositeHeader } from "@abgov/react-components";
+import { GoabMicrositeHeader } from "@abgov/react-components";
 import { Sandbox } from "@components/sandbox";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
 
-const onClick = () => {
-  console.log("Feedback clicked");
-  alert("Thank you for your feedback!");
-};
-
-export default function MicrositeHeaderExamples () {
+export default function MicrositeHeaderExamples() {
+  const { version } = useContext(LanguageVersionContext);
+  const onClick = () => {
+    console.log("Feedback clicked");
+    alert("Thank you for your feedback!");
+  };
   return (
     <>
-      <h2 id="component-examples" className="hidden" aria-hidden="true">Examples</h2>
+      <h2 id="component-examples" className="hidden" aria-hidden="true">
+        Examples
+      </h2>
       <h3 id="component-example-feedbackclick">Custom click event handler (for feedback)</h3>
-            <Sandbox skipRender fullWidth>
-              <GoAMicrositeHeader type="alpha" onFeedbackClick={onClick} />
-
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
+      <Sandbox skipRender fullWidth>
+        <GoabMicrositeHeader type="alpha" onFeedbackClick={onClick} />
+        {/*Angular code*/}
+        {version === "old" && (
+          <CodeSnippet
+            lang="typescript"
+            tags="angular"
+            allowCopy={true}
+            code={`
                   @Component({
                     selector: "abgov-microsite-header",
                     templateUrl: "./microsite-header.component.html",
@@ -33,26 +38,58 @@ export default function MicrositeHeaderExamples () {
                     }
                   }
                 `}
-              />
+          />
+        )}
+        {version === "new" && (
+          <CodeSnippet
+            lang="typescript"
+            tags="angular"
+            allowCopy={true}
+            code={`
+                  export class MicrositeHeaderComponent {
+                    handleFeedbackClick() {
+                      console.log("Feedback clicked");
+                      alert("Thank you for your feedback!");
+                    }
+                  }
+                `}
+          />
+        )}
 
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
+        {version === "old" && (
+          <CodeSnippet
+            lang="html"
+            tags="angular"
+            allowCopy={true}
+            code={`
                   <goa-microsite-header
                     type="alpha"
                     [hasfeedbackhandler]="true"
                     (_feedbackClick)="handleFeedbackClick($event)"
                   ></goa-microsite-header>
                 `}
-              />
+          />
+        )}
+        {version === "new" && (
+          <CodeSnippet
+            lang="html"
+            tags="angular"
+            allowCopy={true}
+            code={`
+                  <goab-microsite-header
+                    type="alpha"
+                    (onFeedbackClick)="handleFeedbackClick()"
+                  ></goab-microsite-header>
+                `}
+          />
+        )}
 
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
+        {version === "old" && (
+          <CodeSnippet
+            lang="typescript"
+            tags="react"
+            allowCopy={true}
+            code={`
                   export default function MicrositeHeader() {
                     function onClick() {
                       console.log("Feedback clicked");
@@ -69,16 +106,41 @@ export default function MicrositeHeaderExamples () {
                     );
                   }
                 `}
-              />
-            </Sandbox>
+          />
+        )}
+        {version === "new" && (
+          <CodeSnippet
+            lang="typescript"
+            tags="react"
+            allowCopy={true}
+            code={`
+                  export default function MicrositeHeader() {
+                    function onClick() {
+                      console.log("Feedback clicked");
+                      alert("Thank you for your feedback!");
+                    }
+
+                    return (
+                      <>
+                        <GoabMicrositeHeader
+                          type="alpha"
+                          onFeedbackClick={() => onClick()}
+                        />
+                      </>
+                    );
+                  }
+                `}
+          />
+        )}
+      </Sandbox>
       <h3 id="component-example-slotted-microsite-header-version">Slotted version</h3>
       <Sandbox fullWidth skipRender>
         {/*Angular*/}
-        <CodeSnippet
-        lang="typescript"
-        tags="angular"
-        allowCopy={true}
-        code={`
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
           <goa-microsite-header type="alpha">
             <div slot="version">
               <span>Slotted <b>version text</b>.</span>
@@ -86,24 +148,55 @@ export default function MicrositeHeaderExamples () {
             </div>
           </goa-microsite-header>
         `}
-        />
+        />}
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+         <goab-microsite-header type="alpha" [version]="version">
+            <ng-template #version>
+              <span>Slotted <b>version text</b>.</span>
+              <span>v1.23</span>
+            </ng-template>
+         </goab-microsite-header>
+        `}
+        />}
         {/*React*/}
-        <CodeSnippet
-        lang="typescript"
-        tags="react"
-        allowCopy={true}
-        code={`
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
           <GoAMicrositeHeader
             type="alpha"
             version={<><span>Slotted <b>version text</b>.</span><span>v1.23</span></>}
           ></GoAMicrositeHeader>
         `}
-        />
-        <GoAMicrositeHeader
+        />}
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+          <GoabMicrositeHeader
+            type="alpha"
+            version={<><span>Slotted <b>version text</b>.</span><span>v1.23</span></>}
+          ></GoabMicrositeHeader>
+        `}
+        />}
+        <GoabMicrositeHeader
           type="alpha"
-          version={<><span>Slotted <b>version text</b>.</span><span>v1.23</span></>}
+          version={
+            <>
+              <span>
+                Slotted <b>version text</b>.
+              </span>
+              <span>v1.23</span>
+            </>
+          }
         />
       </Sandbox>
     </>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/src/examples/modal/ModalAddAnotherItemExample.tsx b/src/examples/modal/ModalAddAnotherItemExample.tsx
new file mode 100644
index 000000000..9acdfccc3
--- /dev/null
+++ b/src/examples/modal/ModalAddAnotherItemExample.tsx
@@ -0,0 +1,331 @@
+import {
+  GoabButton,
+  GoabButtonGroup,
+  GoabContainer,
+  GoabDropdown, GoabDropdownItem,
+  GoabFormItem, GoabInput,
+  GoabModal, GoabTextarea
+} from "@abgov/react-components";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { useContext, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { GoabDropdownOnChangeDetail, GoabTextAreaOnChangeDetail } from "@abgov/ui-components-common";
+
+export const ModalAddAnotherItemExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const [addItemModalOpen, setAddItemModalOpen] = useState<boolean>();
+  const [type, setType] = useState<string>();
+  const [name, setName] = useState<string>();
+  const [description, setDescription] = useState<string>();
+
+  const onChangeName = (value: string) => {
+    setName(value);
+  };
+
+  const onChangeDescription = (event: GoabTextAreaOnChangeDetail) => {
+    setDescription(event.value);
+  };
+  const onChangeType = (event: GoabDropdownOnChangeDetail) => {
+    setType(event.value);
+  };
+
+  return (
+    <>
+      {/*Don't use a Sandbox because the Dropdown inside a modal will make the modal shifts everytime we tab from the dropdown*/}
+      <GoabContainer mt="m" mb="none">
+        <GoabButtonGroup alignment="center">
+          <GoabButton type="tertiary" leadingIcon="add" onClick={() => setAddItemModalOpen(true)}>
+            Add another item
+          </GoabButton>
+        </GoabButtonGroup>
+
+        <GoabModal
+          heading="Add a new item"
+          role="dialog"
+          open={addItemModalOpen}
+          actions={
+            <GoabButtonGroup alignment="end">
+              <GoabButton type="tertiary" onClick={() => setAddItemModalOpen(false)}>
+                Cancel
+              </GoabButton>
+              <GoabButton type="primary" onClick={() => setAddItemModalOpen(false)}>
+                Save new item
+              </GoabButton>
+            </GoabButtonGroup>
+          }>
+          <p>Fill in the information to create a new item</p>
+          <GoabFormItem label="Type" mt="xs">
+            <GoabDropdown onChange={onChangeType} value={type}>
+              <GoabDropdownItem value="1" label="Option 1"></GoabDropdownItem>
+              <GoabDropdownItem value="2" label="Option 2"></GoabDropdownItem>
+            </GoabDropdown>
+          </GoabFormItem>
+          <GoabFormItem label="Name" mt="xs">
+            <GoabInput
+              onChange={event => onChangeName(event.value)}
+              value={name}
+              name="name"></GoabInput>
+          </GoabFormItem>
+          <GoabFormItem label="Description" mt="xs">
+            <GoabTextarea
+              name="description"
+              width="80%"
+              rows={2}
+              onChange={onChangeDescription}
+              value={description}></GoabTextarea>
+          </GoabFormItem>
+        </GoabModal>
+      </GoabContainer>
+      {/*Angular code*/}
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  export class SomeOtherComponent {
+                    open = false;
+                    type = "";
+                    name = "";
+                    description = "";
+                    
+                    toggleModal() {
+                      this.open = !this.open;
+                    }
+                    
+                    updateType(event: Event) {
+                      this.type = (event as CustomEvent).detail.value;
+                    }
+                    
+                    updateName(event: Event) {
+                      this.name = (event as CustomEvent).detail.value;
+                    }
+                    
+                    updateDescription(event: Event) {
+                      this.description = (event as CustomEvent).detail.value;
+                    }
+                  }
+                `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  export class SomeOtherComponent {
+                    open = false;
+                    type: string|undefined = "";
+                    name = "";
+                    description = "";
+
+                    toggleModal() {
+                      this.open = !this.open;
+                    }
+
+                    updateType(event: GoabDropdownOnChangeDetail) {
+                      this.type = event.value;
+                    }
+
+                    updateName(event: GoabInputOnChangeDetail) {
+                      this.name = event.value;
+                    }
+
+                    updateDescription(event: GoabTextAreaOnChangeDetail) {
+                      this.description = event.value;
+                    }
+                  }
+                `}
+      />}
+
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  <goa-button type="tertiary" leadingicon="add" (_click)="toggleModal()">Add another item</goa-button>
+                  <goa-modal [open]="open" role="dialog"
+                    (_close)="toggleModal()" heading="Add a new item">
+                    <p>Fill in the information to create a new item</p>
+                    <goa-form-item label="Type" mt="xs">
+                      <goa-dropdown (_change)="updateType($event)" [value]="type">
+                        <goa-dropdown-item value="1" label="Option 1"></goa-dropdown-item>
+                        <goa-dropdown-item value="2" label="Option 2"></goa-dropdown-item>
+                      </goa-dropdown>
+                    </goa-form-item>
+                    <goa-form-item label="Name" mt="xs">
+                      <goa-input name="name" (_change)="updateName($event)" [value]="name"></goa-input>
+                    </goa-form-item>
+                    <goa-form-item label="Description" mt="xs">
+                      <goa-textarea name="description" width="80%" [rows]="2" (_change)="updateDescription($event)" [value]="description"></goa-textarea>
+                    </goa-form-item>
+                    <div slot="actions">
+                        <goa-button-group alignment="end">
+                          <goa-button type="tertiary" (_click)="toggleModal()">Cancel</goa-button>
+                          <goa-button type="primary" (_click)="toggleModal()">Save new item</goa-button>
+                        </goa-button-group>
+                      </div>
+                  </goa-modal>
+                `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+        <goab-button type="tertiary" leadingIcon="add" (onClick)="toggleModal()">Add another item</goab-button>
+        <goab-modal [open]="open" role="dialog"
+           (onClose)="toggleModal()" heading="Add a new item" [actions]="actions">
+          <p>Fill in the information to create a new item</p>
+          <goab-form-item label="Type" mt="xs">
+            <goab-dropdown (onChange)="updateType($event)" [value]="type">
+              <goab-dropdown-item value="1" label="Option 1"></goab-dropdown-item>
+              <goab-dropdown-item value="2" label="Option 2"></goab-dropdown-item>
+            </goab-dropdown>
+          </goab-form-item>
+          <goab-form-item label="Name" mt="xs">
+            <goab-input name="name" (onChange)="updateName($event)" [value]="name"></goab-input>
+          </goab-form-item>
+          <goab-form-item label="Description" mt="xs">
+            <goab-textarea name="description" width="80%" [rows]="2" (onChange)="updateDescription($event)" [value]="description"></goab-textarea>
+          </goab-form-item>
+          <ng-template #actions>
+            <goab-button-group alignment="end">
+              <goab-button type="tertiary" (onClick)="toggleModal()">Cancel</goab-button>
+              <goab-button type="primary" (onClick)="toggleModal()">Save new item</goab-button>
+            </goab-button-group>
+          </ng-template>
+        </goab-modal>
+        `}
+      />}
+
+      {/*React code*/}
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  const [open, setOpen] = useState(false);
+                  const [type, setType] = useState<string>();
+                  const [name, setName] = useState<string>();
+                  const [description, setDescription] = useState<string>();
+                  
+                  function onChangeName(name: string, value: string) {
+                    setName(value);
+                  }
+                  
+                  function onChangeDescription(name: string, value: string) {
+                    setDescription(value);
+                  }
+                  
+                  function onChangeType(name: string, value: string[] | string) {
+                    setType(value as string);
+                  };
+                  
+                `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  const [open, setOpen] = useState(false);
+                  const [type, setType] = useState<string>();
+                  const [name, setName] = useState<string>();
+                  const [description, setDescription] = useState<string>();
+                  
+                  function onChangeName(value: string) {
+                    setName(value);
+                  }
+                  
+                  function onChangeDescription(event: GoabTextAreaOnChangeDetail) {
+                    setDescription(event.value);
+                  }
+                  
+                  function onChangeType(event: GoabDropdownOnChangeDetail) {
+                    setType(event.value);
+                  };
+                  
+                `}
+      />}
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  <GoAButton type="tertiary" leadingIcon="add" onClick={() => setOpen(true)}>
+                    Add another item
+                  </GoAButton>
+                   <GoAModal
+                    heading="Add a new item"
+                    role="dialog"
+                    open={open}
+                    actions={
+                      <GoAButtonGroup alignment="end">
+                        <GoAButton type="tertiary" onClick={() => setOpen(false)}>
+                          Cancel
+                        </GoAButton>
+                        <GoAButton type="primary" onClick={() => setOpen(false)}>
+                          Save new item
+                        </GoAButton>
+                      </GoAButtonGroup>
+                    }>
+                      <p>Fill in the information to create a new item</p>
+                      <GoAFormItem label="Type" mt="xs">
+                        <GoADropdown onChange={onChangeType} value={type}>
+                          <GoADropdownItem value="1" label="Option 1"></GoADropdownItem>
+                          <GoADropdownItem value="2" label="Option 2"></GoADropdownItem>
+                        </GoADropdown>
+                      </GoAFormItem>
+                      <GoAFormItem label="Name" mt="xs">
+                        <GoAInput onChange={onChangeName} value={name} name="name"></GoAInput>
+                      </GoAFormItem>
+                      <GoAFormItem label="Description" mt="xs">
+                        <GoATextArea name="description" width="80%" rows={2} onChange={onChangeDescription} value={description}></GoATextArea>
+                      </GoAFormItem>
+                   </GoAModal>
+                `}
+      />}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  <GoabButton type="tertiary" leadingIcon="add" onClick={() => setOpen(true)}>
+                    Add another item
+                  </GoabButton>
+                   <GoabModal
+                    heading="Add a new item"
+                    role="dialog"
+                    open={open}
+                    actions={
+                      <GoabButtonGroup alignment="end">
+                        <GoabButton type="tertiary" onClick={() => setOpen(false)}>
+                          Cancel
+                        </GoabButton>
+                        <GoabButton type="primary" onClick={() => setOpen(false)}>
+                          Save new item
+                        </GoabButton>
+                      </GoabButtonGroup>
+                    }>
+                      <p>Fill in the information to create a new item</p>
+                      <GoabFormItem label="Type" mt="xs">
+                        <GoabDropdown onChange={onChangeType} value={type}>
+                          <GoabDropdownItem value="1" label="Option 1"></GoabDropdownItem>
+                          <GoabDropdownItem value="2" label="Option 2"></GoabDropdownItem>
+                        </GoabDropdown>
+                      </GoabFormItem>
+                      <GoabFormItem label="Name" mt="xs">
+                        <GoabInput onChange={event => onChangeName(event.value)} value={name} name="name"></GoabInput>
+                      </GoabFormItem>
+                      <GoabFormItem label="Description" mt="xs">
+                        <GoabTextArea name="description" width="80%" rows={2} onChange={onChangeDescription} value={description}></GoabTextArea>
+                      </GoabFormItem>
+                   </GoabModal>
+                `}
+      />}
+
+    </>
+  )
+}
diff --git a/src/examples/modal/ModalBasicExample.tsx b/src/examples/modal/ModalBasicExample.tsx
new file mode 100644
index 000000000..0ae259c33
--- /dev/null
+++ b/src/examples/modal/ModalBasicExample.tsx
@@ -0,0 +1,154 @@
+import { Sandbox } from "@components/sandbox";
+import { GoabButton, GoabButtonGroup, GoabModal } from "@abgov/react-components";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { useContext, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const ModalBasicExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const [basicModalOpen, setBasicModalOpen] = useState<boolean>();
+  return (
+    <Sandbox skipRender>
+      <GoabButton onClick={() => setBasicModalOpen(true)}>Open Basic Modal</GoabButton>
+      <GoabModal
+        heading="Heading"
+        role="dialog"
+        open={basicModalOpen}
+        onClose={() => setBasicModalOpen(false)}
+        actions={
+          <GoabButtonGroup alignment="end">
+            <GoabButton type="secondary" onClick={() => setBasicModalOpen(false)}>
+              Secondary
+            </GoabButton>
+            <GoabButton type="primary" onClick={() => setBasicModalOpen(false)}>
+              Primary
+            </GoabButton>
+          </GoabButtonGroup>
+        }>
+        <p>Content</p>
+      </GoabModal>
+      {/*Angular*/}
+      <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  export class SomeOtherComponent {
+                    open = false;
+                    toggleModal() {
+                      this.open = !this.open;
+                    }
+                  }
+                `}
+      />
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  <goa-button (_click)="toggleModal();">Open Basic Modal</goa-button>
+                  <goa-modal [open]="open" (_close)="toggleModal()" heading="Heading">
+                      <p>Content</p>
+                      <div slot="actions">
+                      <goa-button-group alignment="end">
+                        <goa-button type="secondary" (_click)="toggleModal()">Secondary</goa-button>
+                        <goa-button type="primary" (_click)="toggleModal()">Primary</goa-button>
+                      </goa-button-group>
+                    </div>
+                  </goa-modal>
+                `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  <goab-button (onClick)="toggleModal();">Open Basic Modal</goab-button>
+                  <goab-modal [open]="open" (close)="toggleModal()" heading="Heading" [actions]="actions">
+                    <p>Content</p>
+                    <ng-template #actions>
+                      <goab-button-group alignment="end">
+                        <goab-button type="secondary" (onClick)="toggleModal()">Secondary</goab-button>
+                        <goab-button type="primary" (onClick)="toggleModal()">Primary</goab-button>
+                      </goab-button-group>
+                    </ng-template>
+                  </goab-modal>
+                `}
+        />
+      )}
+
+      {/*React code*/}
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  const [open, setOpen] = useState(false);
+                `}
+      />
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <GoAButton onClick={() => setOpen(true)}>Open Basic Modal</GoAButton>
+                  <GoAModal
+                    heading="Heading"
+                    role="dialog"
+                    open={open}
+                    onClose={() => setOpen(false)}
+                    actions={
+                      <GoAButtonGroup alignment="end">
+                        <GoAButton type="secondary" onClick={() => setOpen(false)}>
+                          Secondary
+                        </GoAButton>
+                        <GoAButton type="primary" onClick={() => setOpen(false)}>
+                          Primary
+                        </GoAButton>
+                      </GoAButtonGroup>
+                    }
+                  >
+                    <p>Content</p>
+                  </GoAModal>
+                `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <GoabButton onClick={() => setOpen(true)}>Open Basic Modal</GoabButton>
+                  <GoabModal
+                    heading="Heading"
+                    role="dialog"
+                    open={open}
+                    onClose={() => setOpen(false)}
+                    actions={
+                      <GoabButtonGroup alignment="end">
+                        <GoabButton type="secondary" onClick={() => setOpen(false)}>
+                          Secondary
+                        </GoabButton>
+                        <GoabButton type="primary" onClick={() => setOpen(false)}>
+                          Primary
+                        </GoabButton>
+                      </GoabButtonGroup>
+                    }
+                  >
+                    <p>Content</p>
+                  </GoabModal>
+                `}
+        />
+      )}
+    </Sandbox>
+  )
+}
diff --git a/src/examples/modal/ModalConfirmDestructiveActionExample.tsx b/src/examples/modal/ModalConfirmDestructiveActionExample.tsx
new file mode 100644
index 000000000..bf0fce3a0
--- /dev/null
+++ b/src/examples/modal/ModalConfirmDestructiveActionExample.tsx
@@ -0,0 +1,161 @@
+import { GoabButton, GoabButtonGroup, GoabModal } from "@abgov/react-components";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { Sandbox } from "@components/sandbox";
+import { useContext, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const ModalConfirmDestructiveActionExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const [destructiveModalOpen, setDestructiveModalOpen] = useState<boolean>();
+  return (
+    <Sandbox skipRender>
+      <GoabButton
+        type="tertiary"
+        leadingIcon="trash"
+        onClick={() => setDestructiveModalOpen(true)}>
+        Delete my application
+      </GoabButton>
+      <GoabModal
+        heading="Are you sure you want to delete this application?"
+        open={destructiveModalOpen}
+        role="alertdialog"
+        actions={
+          <GoabButtonGroup alignment="end">
+            <GoabButton type="tertiary" onClick={() => setDestructiveModalOpen(false)}>
+              Cancel
+            </GoabButton>
+            <GoabButton
+              type="primary"
+              variant="destructive"
+              onClick={() => setDestructiveModalOpen(false)}>
+              Delete application
+            </GoabButton>
+          </GoabButtonGroup>
+        }>
+        <p>This action cannot be undone.</p>
+      </GoabModal>
+
+      {/*Angular code*/}
+      <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  export class SomeOtherComponent {
+                    open = false;
+                    toggleModal() {
+                      this.open = !this.open;
+                    }
+                  }
+                `}
+      />
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  <goa-button type="tertiary" leadingIcon="trash" (_click)="toggleModal()">Delete my application</goa-button>
+                  <goa-modal [open]="open" role="alertdialog" (_close)="toggleModal()" heading="Are you sure you want to delete this application?">
+                      <p>This action cannot be undone.</p>
+                    <div slot="actions">
+                      <goa-button-group alignment="end">
+                        <goa-button type="tertiary" (_click)="toggleModal()">Cancel</goa-button>
+                        <goa-button type="primary" variant="destructive" (_click)="toggleModal()">Delete application</goa-button>
+                      </goa-button-group>
+                    </div>
+                  </goa-modal>
+                `}
+        />
+      )}
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            <goab-button type="tertiary" leadingIcon="trash" (onClick)="toggleModal()">Delete my application</goab-button>
+            <goab-modal [open]="open" role="alertdialog" (onClose)="toggleModal()" heading="Are you sure you want to delete this application?" [actions]="actions">
+              <p>This action cannot be undone.</p>
+              <ng-template #actions>
+                <goab-button-group alignment="end">
+                <goab-button type="tertiary" (onClick)="toggleModal()">Cancel</goab-button>
+                <goab-button type="primary" variant="destructive" (onClick)="toggleModal()">Delete application</goab-button>
+                </goab-button-group>
+              </ng-template>
+            </goab-modal>
+                `}
+        />
+      )}
+
+      {/*React code*/}
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  const [open, setOpen] = useState(false);
+                `}
+      />
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <GoAButton type="tertiary" leadingIcon="trash" onClick={() => setOpen(true)}>Delete my application</GoAButton>
+                  <GoAModal
+                    heading="Are you sure you want to delete this application?"
+                    open={open}
+                    role="alertdialog"
+                    onClose={() => setOpen(false)}
+                    actions={
+                      <GoAButtonGroup alignment="end">
+                        <GoAButton type="tertiary" onClick={() => setOpen(false)}>
+                          Cancel
+                        </GoAButton>
+                        <GoAButton type="primary" variant="destructive" onClick={() => setOpen(false)}>
+                           Delete application
+                        </GoAButton>
+                      </GoAButtonGroup>
+                    }
+                  >
+                    <p>This action cannot be undone.</p>
+                  </GoAModal>
+                `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <GoabButton type="tertiary" leadingIcon="trash" onClick={() => setOpen(true)}>Delete my application</GoabButton>
+                  <GoabModal
+                    heading="Are you sure you want to delete this application?"
+                    open={open}
+                    role="alertdialog"
+                    onClose={() => setOpen(false)}
+                    actions={
+                      <GoabButtonGroup alignment="end">
+                        <GoabButton type="tertiary" onClick={() => setOpen(false)}>
+                          Cancel
+                        </GoabButton>
+                        <GoabButton type="primary" variant="destructive" onClick={() => setOpen(false)}>
+                           Delete application
+                        </GoabButton>
+                      </GoabButtonGroup>
+                    }
+                  >
+                    <p>This action cannot be undone.</p>
+                  </GoabModal>
+                `}
+        />
+      )}
+    </Sandbox>
+  )
+}
diff --git a/src/examples/modal/ModalConfirmRecordChangeExample.tsx b/src/examples/modal/ModalConfirmRecordChangeExample.tsx
new file mode 100644
index 000000000..d8c039f51
--- /dev/null
+++ b/src/examples/modal/ModalConfirmRecordChangeExample.tsx
@@ -0,0 +1,300 @@
+import {
+  GoabButton,
+  GoabButtonGroup,
+  GoabContainer,
+  GoabDatePicker,
+  GoabFormItem,
+  GoabModal
+} from "@abgov/react-components";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { useContext, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { GoabDatePickerOnChangeDetail } from "@abgov/ui-components-common";
+
+export const ModalConfirmRecordChangeExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const [inputModalOpen, setInputModalOpen] = useState<boolean>();
+  const [effectiveDate, setEffectiveDate] = useState<Date | undefined>(new Date());
+
+  const onChangeEffectiveDate = (detail: GoabDatePickerOnChangeDetail) => {
+    setEffectiveDate(detail.value as Date);
+  };
+  return (
+    <>
+      {/*Don't use a Sandbox because Datepicker inside a modal will make the modal shifts everytime we click on datepicker*/}
+      <GoabContainer mt="m" mb="none">
+        <GoabButtonGroup alignment="center">
+          <GoabButton onClick={() => setInputModalOpen(true)}>Save and continue</GoabButton>
+        </GoabButtonGroup>
+
+        <GoabModal
+          heading="Address has changed"
+          role="dialog"
+          open={inputModalOpen}
+          actions={
+            <GoabButtonGroup alignment="end">
+              <GoabButton type="secondary" onClick={() => setInputModalOpen(false)}>
+                Undo address change
+              </GoabButton>
+              <GoabButton type="primary" onClick={() => setInputModalOpen(false)}>
+                Confirm
+              </GoabButton>
+            </GoabButtonGroup>
+          }>
+          <GoabContainer type="non-interactive" accent="filled" padding="compact" width="full">
+            <dl className="address-change-example--description">
+              <dt>Before</dt>
+              <dd>123456 78 Ave NW, Edmonton, Alberta</dd>
+            </dl>
+            <dl className="address-change-example--description">
+              <dt>After</dt>
+              <dd>881 12 Ave NW, Edmonton, Alberta</dd>
+            </dl>
+          </GoabContainer>
+          <GoabFormItem label="Effective date">
+            <GoabDatePicker
+              onChange={onChangeEffectiveDate}
+              name="effectiveDate"
+              value={effectiveDate}></GoabDatePicker>
+          </GoabFormItem>
+        </GoabModal>
+      </GoabContainer>
+      <CodeSnippet
+        lang="css"
+        allowCopy={true}
+        code={`
+            .address-change-example--description dt {
+              font: var(--goa-typography-heading-s);
+            }
+            .address-change-example--description dd {
+              font: var(--goa-typography-body-m);
+              margin-left: 0;
+            }       
+          `}
+      />
+
+      {/*Angular code*/}
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  export class SomeOtherComponent {
+                    open = false;
+                    effectiveDate = new Date(); 
+                    
+                    toggleModal() {
+                      this.open = !this.open;
+                    }
+                    
+                    onChangeEffectiveDate(event: Event) {
+                      this.effectiveDate = (event as CustomEvent).detail.value;
+                    }
+                  }
+                `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  export class SomeOtherComponent {
+                    open = false;
+                    effectiveDate = new Date(); 
+                    
+                    toggleModal() {
+                      this.open = !this.open;
+                    }
+                    
+                    onChangeEffectiveDate(event: GoabDatePickerOnChangeDetail) {
+                      this.effectiveDate = event.value as Date;
+                    }
+                  }
+                `}
+      />}
+
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  <goa-button (_click)="toggleModal()">Save and continue</goa-button>
+                  <goa-modal [open]="open" role="dialog"
+                    (_close)="toggleModal()" heading="Address has changed">
+                      <goa-container type="non-interactive" accent="filled" padding="compact" width="full">
+                        <dl class="address-change-example--description">
+                          <dt>Before</dt>
+                          <dd>123456 78 Ave NW, Edmonton, Alberta</dd>
+                        </dl>
+                        <dl class="address-change-example--description">
+                          <dt>After</dt>                   
+                          <dd>881 12 Ave NW, Edmonton, Alberta</dd>
+                        </dl>
+                      </goa-container>
+                      <goa-form-item label="Effective date">
+                        <goa-date-picker (_change)="onChangeEffectiveDate($event)" name="effectiveDate" [value]="effectiveDate">
+                        </goa-date-picker>
+                      </goa-form-item>
+                    <div slot="actions">
+                      <goa-button-group alignment="end">
+                        <goa-button type="secondary" (_click)="toggleModal()">
+                          Undo address change
+                        </goa-button>
+                        <goa-button type="primary" (_click)="toggleModal()">
+                          Confirm
+                        </goa-button>
+                      </goa-button-group>
+                    </div>
+                  </goa-modal>
+                `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+          <goab-button (onClick)="toggleModal()">Save and continue</goab-button>
+          <goab-modal [open]="open" role="dialog"
+           (onClose)="toggleModal()" heading="Address has changed" [actions]="actions">
+            <goab-container type="non-interactive" accent="filled" padding="compact" width="full">
+              <dl class="address-change-example--description">
+                <dt>Before</dt>
+                <dd>123456 78 Ave NW, Edmonton, Alberta</dd>
+              </dl>
+              <dl class="address-change-example--description">
+                <dt>After</dt>
+                <dd>881 12 Ave NW, Edmonton, Alberta</dd>
+              </dl>
+            </goab-container>
+            <goab-form-item label="Effective date">
+              <goab-date-picker (onChange)="onChangeEffectiveDate($event)" name="effectiveDate" [value]="effectiveDate"></goab-date-picker>
+            </goab-form-item>
+            <ng-template #actions>
+              <goab-button-group alignment="end">
+                <goab-button type="secondary" (onClick)="toggleModal()">
+                  Undo address change
+                </goab-button>
+                <goab-button type="primary" (onClick)="toggleModal()">
+                  Confirm
+                </goab-button>
+              </goab-button-group>
+            </ng-template>
+          </goab-modal>
+                `}
+      />}
+
+      {/*React code*/}
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  const [open, setOpen] = useState(false);
+                  const [effectiveDate, setEffectiveDate] = useState<Date>(new Date());
+                  
+                  const onChangeEffectiveDate = (name: string, value: Date) => {
+                    setEffectiveDate(value);
+                  }
+                `}
+      />}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  const [open, setOpen] = useState(false);
+                  const [effectiveDate, setEffectiveDate] = useState<Date | undefined>(new Date());
+                  
+                  const onChangeEffectiveDate = (detail: GoabDatePickerOnChangeDetail) => {
+                    setEffectiveDate(detail.value as Date);
+                  }
+                `}
+      />}
+
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  <GoAButton onClick={() => setOpen(true)}>Save and continue</GoAButton>
+                  <GoAModal
+                    heading="Address has changed"
+                    role="dialog"
+                    open={open}
+                    onClose={() => setOpen(false)}
+                    actions={
+                      <GoAButtonGroup alignment="end">
+                        <GoAButton type="secondary" onClick={() => setOpen(false)}>
+                          Undo address change
+                        </GoAButton>
+                        <GoAButton type="primary" onClick={() => setOpen(false)}>
+                          Confirm
+                        </GoAButton>
+                      </GoAButtonGroup>
+                    }
+                  >
+                   <GoAContainer type="non-interactive" accent="filled" padding="compact" width="full">
+                      <dl className="address-change-example--description">
+                        <dt>Before</dt>
+                        <dd>123456 78 Ave NW, Edmonton, Alberta</dd>
+                      </dl>
+                      <dl className="address-change-example--description">
+                        <dt>After</dt>
+                        <dd>881 12 Ave NW, Edmonton, Alberta</dd>
+                      </dl>
+                    </GoAContainer>
+                    <GoAFormItem label="Effective date">
+                      <GoADatePicker
+                        onChange={onChangeEffectiveDate}
+                        name="effectiveDate"
+                        value={effectiveDate}></GoADatePicker>
+                    </GoAFormItem>
+                  </GoAModal>
+                `}
+      />}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  <GoabButton onClick={() => setOpen(true)}>Save and continue</GoabButton>
+                  <GoabModal
+                    heading="Address has changed"
+                    role="dialog"
+                    open={open}
+                    onClose={() => setOpen(false)}
+                    actions={
+                      <GoabButtonGroup alignment="end">
+                        <GoabButton type="secondary" onClick={() => setOpen(false)}>
+                          Undo address change
+                        </GoabButton>
+                        <GoabButton type="primary" onClick={() => setOpen(false)}>
+                          Confirm
+                        </GoabButton>
+                      </GoabButtonGroup>
+                    }
+                  >
+                   <GoabContainer type="non-interactive" accent="filled" padding="compact" width="full">
+                      <dl className="address-change-example--description">
+                        <dt>Before</dt>
+                        <dd>123456 78 Ave NW, Edmonton, Alberta</dd>
+                      </dl>
+                      <dl className="address-change-example--description">
+                        <dt>After</dt>
+                        <dd>881 12 Ave NW, Edmonton, Alberta</dd>
+                      </dl>
+                    </GoabContainer>
+                    <GoabFormItem label="Effective date">
+                      <GoabDatePicker
+                        onChange={onChangeEffectiveDate}
+                        name="effectiveDate"
+                        value={effectiveDate}></GoabDatePicker>
+                    </GoabFormItem>
+                  </GoabModal>
+                `}
+      />}
+    </>
+  )
+}
diff --git a/src/examples/modal/ModalExamples.tsx b/src/examples/modal/ModalExamples.tsx
index e2b2bf7e0..38822fc4b 100644
--- a/src/examples/modal/ModalExamples.tsx
+++ b/src/examples/modal/ModalExamples.tsx
@@ -1,788 +1,34 @@
-import { LanguageContext, Sandbox } from "@components/sandbox";
-import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
-import {
-  GoAButton,
-  GoAButtonGroup,
-  GoAContainer,
-  GoADatePicker,
-  GoADropdown,
-  GoADropdownItem,
-  GoAFormItem,
-  GoAInput,
-  GoAModal,
-  GoATextArea,
-} from "@abgov/react-components";
-import { useContext, useState } from "react";
-import { useNavigate } from "react-router-dom";
 import "./modal-examples.css";
+import { ModalBasicExample } from "@examples/modal/ModalBasicExample.tsx";
+import { ModalConfirmDestructiveActionExample } from "@examples/modal/ModalConfirmDestructiveActionExample.tsx";
+import { ModalWarnUserDeadlineExample } from "@examples/modal/ModalWarnUserDeadlineExample.tsx";
+import { ModalConfirmRecordChangeExample } from "@examples/modal/ModalConfirmRecordChangeExample.tsx";
+import { ModalAddAnotherItemExample } from "@examples/modal/ModalAddAnotherItemExample.tsx";
+import { ModalRouteChangeExample } from "@examples/modal/ModalRouteChangeExample.tsx";
 
 export default function ModalExamples() {
-  // hooks
-  const [basicModalOpen, setBasicModalOpen] = useState<boolean>();
-  const [destructiveModalOpen, setDestructiveModalOpen] = useState<boolean>();
-  const [warnCalloutModalOpen, setWarnCalloutModalOpen] = useState<boolean>();
-  const [inputModalOpen, setInputModalOpen] = useState<boolean>();
-  const [effectiveDate, setEffectiveDate] = useState<Date|undefined>(new Date());
-  const [onRouteChangeModalOpen, setOnRouteChangeModalOpen] = useState<boolean>();
-  const [addItemModalOpen, setAddItemModalOpen] = useState<boolean>();
-  const [type, setType] = useState<string>();
-  const [name, setName] = useState<string>();
-  const [description, setDescription] = useState<string>();
-
-  const navigate = useNavigate();
-  const language = useContext(LanguageContext);
-  // @ts-ignore
-  const onChangeEffectiveDate = (name: string, value: Date | undefined) => {
-    setEffectiveDate(value);
-  };
-
-  // @ts-ignore
-  const onChangeType = (name: string, value: string[] | string) => {
-    setType(value as string);
-  };
-
-  // @ts-ignore
-  const onChangeName = (name: string, value: string) => {
-    setName(value);
-  }
-
-  // @ts-ignore
-  const onChangeDescription = (name: string, value: string) => {
-    setDescription(value);
-  }
-
   return (
     <>
       <h2 id="component-examples" className="hidden" aria-hidden="true">
         Examples
       </h2>
       <h3 id="component-example-basic">Basic Modal</h3>
-      <Sandbox skipRender>
-        <GoAButton onClick={() => setBasicModalOpen(true)}>Open Basic Modal</GoAButton>
-        <GoAModal
-          heading="Heading"
-          role="dialog"
-          open={basicModalOpen}
-          onClose={() => setBasicModalOpen(false)}
-          actions={
-            <GoAButtonGroup alignment="end">
-              <GoAButton type="secondary" onClick={() => setBasicModalOpen(false)}>
-                Secondary
-              </GoAButton>
-              <GoAButton type="primary" onClick={() => setBasicModalOpen(false)}>
-                Primary
-              </GoAButton>
-            </GoAButtonGroup>
-          }>
-          <p>Content</p>
-        </GoAModal>
-        <CodeSnippet
-          lang="typescript"
-          tags="angular"
-          allowCopy={true}
-          code={`
-                  export class SomeOtherComponent {
-                    open = false;
-                    toggleModal() {
-                      this.open = !this.open;
-                    }
-                  }
-                `}
-        />
-        <CodeSnippet
-          lang="typescript"
-          tags="angular"
-          allowCopy={true}
-          code={`
-                  <goa-button (_click)="toggleModal();">Open Basic Modal</goa-button>
-                  <goa-modal [open]="open" (_close)="toggleModal()" heading="Heading">
-                      <p>Content</p>
-                      <div slot="actions">
-                      <goa-button-group alignment="end">
-                        <goa-button type="secondary" (_click)="toggleModal()">Secondary</goa-button>
-                        <goa-button type="primary" (_click)="toggleModal()">Primary</goa-button>
-                      </goa-button-group>
-                    </div>
-                  </goa-modal>
-                `}
-        />
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
-                  const [open, setOpen] = useState(false);
-                `}
-        />
-
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
-                  <GoAButton onClick={() => setOpen(true)}>Open Basic Modal</GoAButton>
-                  <GoAModal
-                    heading="Heading"
-                    open={open}
-                    onClose={() => setOpen(false)}
-                    actions={
-                      <GoAButtonGroup alignment="end">
-                        <GoAButton type="secondary" onClick={() => setOpen(false)}>
-                          Secondary
-                        </GoAButton>
-                        <GoAButton type="primary" onClick={() => setOpen(false)}>
-                          Primary
-                        </GoAButton>
-                      </GoAButtonGroup>
-                    }
-                  >
-                    <p>Content</p>
-                  </GoAModal>
-                `}
-        />
-      </Sandbox>
+      <ModalBasicExample/>
 
       <h3 id="component-example-destructive">Confirm a destructive action</h3>
-      <Sandbox skipRender>
-        <GoAButton
-          type="tertiary"
-          leadingIcon="trash"
-          onClick={() => setDestructiveModalOpen(true)}>
-          Delete my application
-        </GoAButton>
-        <GoAModal
-          heading="Are you sure you want to delete this application?"
-          open={destructiveModalOpen}
-          role="alertdialog"
-          actions={
-            <GoAButtonGroup alignment="end">
-              <GoAButton type="tertiary" onClick={() => setDestructiveModalOpen(false)}>
-                Cancel
-              </GoAButton>
-              <GoAButton
-                type="primary"
-                variant="destructive"
-                onClick={() => setDestructiveModalOpen(false)}>
-                Delete application
-              </GoAButton>
-            </GoAButtonGroup>
-          }>
-          <p>This action cannot be undone.</p>
-        </GoAModal>
-        <CodeSnippet
-          lang="typescript"
-          tags="angular"
-          allowCopy={true}
-          code={`
-                  export class SomeOtherComponent {
-                    open = false;
-                    toggleModal() {
-                      this.open = !this.open;
-                    }
-                  }
-                `}
-        />
-
-        <CodeSnippet
-          lang="typescript"
-          tags="angular"
-          allowCopy={true}
-          code={`
-                  <goa-button type="tertiary" leadingIcon="trash" (_click)="toggleModal()">Delete my application</goa-button>
-                  <goa-modal [open]="open" role="alertdialog" (_close)="toggleModal()" heading="Are you sure you want to delete this application?">
-                      <p>This action cannot be undone.</p>
-                    <div slot="actions">
-                      <goa-button-group alignment="end">
-                        <goa-button type="tertiary" (_click)="toggleModal()">Cancel</goa-button>
-                        <goa-button type="primary" variant="destructive" (_click)="toggleModal()">Delete application</goa-button>
-                      </goa-button-group>
-                    </div>
-                  </goa-modal>
-                `}
-        />
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
-                  const [open, setOpen] = useState(false);
-                `}
-        />
-
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
-                  <GoAButton type="tertiary" leadingIcon="trash" onClick={() => setOpen(true)}>Delete my application</GoAButton>
-                  <GoAModal
-                    heading="Are you sure you want to delete this application?"
-                    open={open}
-                    role="alertdialog"
-                    onClose={() => setOpen(false)}
-                    actions={
-                      <GoAButtonGroup alignment="end">
-                        <GoAButton type="tertiary" onClick={() => setOpen(false)}>
-                          Cancel
-                        </GoAButton>
-                        <GoAButton type="primary" variant="destructive" onClick={() => setOpen(false)}>
-                           Delete application
-                        </GoAButton>
-                      </GoAButtonGroup>
-                    }
-                  >
-                    <p>This action cannot be undone.</p>
-                  </GoAModal>
-                `}
-        />
-      </Sandbox>
+      <ModalConfirmDestructiveActionExample/>
 
       <h3 id="component-example-warning">Warn a user of a deadline</h3>
-      <Sandbox skipRender>
-        <GoAButton type="secondary" onClick={() => setWarnCalloutModalOpen(true)}>
-          Save for later
-        </GoAButton>
-        <GoAModal
-          heading="Complete submission prior to 1PM"
-          calloutVariant="important"
-          role="alertdialog"
-          open={warnCalloutModalOpen}
-          onClose={() => setWarnCalloutModalOpen(false)}
-          actions={
-            <GoAButtonGroup alignment="end">
-              <GoAButton type="primary" onClick={() => setWarnCalloutModalOpen(false)}>
-                I understand
-              </GoAButton>
-            </GoAButtonGroup>
-          }>
-          <p>
-            You’ve selected to adjourn a matter that is required to appear today. This Calgary court
-            location does not accept adjournment requests past 1PM MST. Please submit your
-            adjournment request as soon as possible.
-          </p>
-        </GoAModal>
-        <CodeSnippet
-          lang="typescript"
-          tags="angular"
-          allowCopy={true}
-          code={`
-                  export class SomeOtherComponent {
-                    open = false;
-                    toggleModal() {
-                      this.open = !this.open;
-                    }
-                  }
-                `}
-        />
-        <CodeSnippet
-          lang="typescript"
-          tags="angular"
-          allowCopy={true}
-          code={`
-                  <goa-button type="secondary" (_click)="toggleModal()">Save for later</goa-button>
-                  <goa-modal [open]="open" role="alertdialog" calloutvariant="important"
-                    (_close)="toggleModal()" heading="Complete submission prior to 1PM">
-                      <p>You’ve selected to adjourn a matter that is required to appear today. This Calgary court location does not accept adjournment requests past 1PM MST. Please submit your adjournment request as soon as possible.</p>
-                    <div slot="actions">
-                      <goa-button-group alignment="end">
-                        <goa-button type="primary" (_click)="toggleModal()">
-                          I understand
-                        </goa-button>
-                      </goa-button-group>
-                    </div>
-                  </goa-modal>
-                `}
-        />
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
-                  const [open, setOpen] = useState(false);
-                `}
-        />
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
-                  <GoAButton type="secondary" onClick={() => setOpen(true)}>Save for later</GoAButton>
-                  <GoAModal
-                    heading="Complete submission prior to 1PM"
-                    open={open}
-                    calloutVariant="important"
-                    role="alertdialog"
-                    onClose={() => setOpen(false)}
-                    actions={
-                      <GoAButtonGroup alignment="end">
-                        <GoAButton type="primary" onClick={() => setOpen(false)}>I understand</GoAButton>
-                      </GoAButtonGroup>
-                    }
-                  >
-                    <p>You’ve selected to adjourn a matter that is required to appear today. This Calgary court location does not accept adjournment requests past 1PM MST. Please submit your adjournment request as soon as possible.</p>
-                  </GoAModal>
-                `}
-        />
-      </Sandbox>
+      <ModalWarnUserDeadlineExample/>
 
       <h3 id="component-example-with-input">Confirm record change</h3>
-      {/*Don't use a Sandbox because Datepicker inside a modal will make the modal shifts everytime we click on datepicker*/}
-      <GoAContainer mt="m" mb="none">
-        <GoAButtonGroup alignment="center">
-          <GoAButton onClick={() => setInputModalOpen(true)}>Save and continue</GoAButton>
-        </GoAButtonGroup>
-
-        <GoAModal
-          heading="Address has changed"
-          role="dialog"
-          open={inputModalOpen}
-          actions={
-            <GoAButtonGroup alignment="end">
-              <GoAButton type="secondary" onClick={() => setInputModalOpen(false)}>
-                Undo address change
-              </GoAButton>
-              <GoAButton type="primary" onClick={() => setInputModalOpen(false)}>
-                Confirm
-              </GoAButton>
-            </GoAButtonGroup>
-          }>
-          <GoAContainer type="non-interactive" accent="filled" padding="compact" width="full">
-            <dl className="address-change-example--description">
-              <dt>Before</dt>
-              <dd>123456 78 Ave NW, Edmonton, Alberta</dd>
-            </dl>
-            <dl className="address-change-example--description">
-              <dt>After</dt>
-              <dd>881 12 Ave NW, Edmonton, Alberta</dd>
-            </dl>
-          </GoAContainer>
-          <GoAFormItem label="Effective date">
-            <GoADatePicker
-              onChange={onChangeEffectiveDate}
-              name="effectiveDate"
-              value={effectiveDate}></GoADatePicker>
-          </GoAFormItem>
-        </GoAModal>
-      </GoAContainer>
-      <CodeSnippet
-        lang="css"
-        allowCopy={true}
-        code={`
-            .address-change-example--description dt {
-              font: var(--goa-typography-heading-s);
-            }
-            .address-change-example--description dd {
-              font: var(--goa-typography-body-m);
-              margin-left: 0;
-            }       
-          `}
-      />
-
-      {language === "angular" && (
-        <>
-          <CodeSnippet
-            lang="typescript"
-            tags="angular"
-            allowCopy={true}
-            code={`
-                  export class SomeOtherComponent {
-                    open = false;
-                    effectiveDate = new Date(); 
-                    
-                    toggleModal() {
-                      this.open = !this.open;
-                    }
-                    
-                    onChangeEffectiveDate(event: Event) {
-                      this.effectiveDate = (event as CustomEvent).detail.value;
-                    }
-                  }
-                `}
-          />
-
-          <CodeSnippet
-            lang="typescript"
-            tags="angular"
-            allowCopy={true}
-            code={`
-                  <goa-button (_click)="toggleModal()">Save and continue</goa-button>
-                  <goa-modal [open]="open" role="dialog"
-                    (_close)="toggleModal()" heading="Address has changed">
-                      <goa-container type="non-interactive" accent="filled" padding="compact" width="full">
-                        <dl class="address-change-example--description">
-                          <dt>Before</dt>
-                          <dd>123456 78 Ave NW, Edmonton, Alberta</dd>
-                        </dl>
-                        <dl class="address-change-example--description">
-                          <dt>After</dt>                   
-                          <dd>881 12 Ave NW, Edmonton, Alberta</dd>
-                        </dl>
-                      </goa-container>
-                      <goa-form-item label="Effective date">
-                        <goa-date-picker (_change)="onChangeEffectiveDate($event)" name="effectiveDate" [value]="effectiveDate">
-                        </goa-date-picker>
-                      </goa-form-item>
-                    <div slot="actions">
-                      <goa-button-group alignment="end">
-                        <goa-button type="secondary" (_click)="toggleModal()">
-                          Undo address change
-                        </goa-button>
-                        <goa-button type="primary" (_click)="toggleModal()">
-                          Confirm
-                        </goa-button>
-                      </goa-button-group>
-                    </div>
-                  </goa-modal>
-                `}
-          />
-        </>
-      )}
-
-      {language === "react" && (
-        <>
-          <CodeSnippet
-            lang="typescript"
-            tags="react"
-            allowCopy={true}
-            code={`
-                  const [open, setOpen] = useState(false);
-                  const [effectiveDate, setEffectiveDate] = useState<Date>(new Date());
-                  
-                  const onChangeEffectiveDate = (name: string, value: Date) => {
-                    setEffectiveDate(value);
-                  }
-                `}
-          />
-
-          <CodeSnippet
-            lang="typescript"
-            tags="react"
-            allowCopy={true}
-            code={`
-                  <GoAButton onClick={() => setOpen(true)}>Save and continue</GoAButton>
-                  <GoAModal
-                    heading="Address has changed"
-                    role="dialog"
-                    open={open}
-                    onClose={() => setOpen(false)}
-                    actions={
-                      <GoAButtonGroup alignment="end">
-                        <GoAButton type="secondary" onClick={() => setOpen(false)}>
-                          Undo address change
-                        </GoAButton>
-                        <GoAButton type="primary" onClick={() => setOpen(false)}>
-                          Confirm
-                        </GoAButton>
-                      </GoAButtonGroup>
-                    }
-                  >
-                   <GoAContainer type="non-interactive" accent="filled" padding="compact" width="full">
-                      <dl className="address-change-example--description">
-                        <dt>Before</dt>
-                        <dd>123456 78 Ave NW, Edmonton, Alberta</dd>
-                      </dl>
-                      <dl className="address-change-example--description">
-                        <dt>After</dt>
-                        <dd>881 12 Ave NW, Edmonton, Alberta</dd>
-                      </dl>
-                    </GoAContainer>
-                    <GoAFormItem label="Effective date">
-                      <GoADatePicker
-                        onChange={onChangeEffectiveDate}
-                        name="effectiveDate"
-                        value={effectiveDate}></GoADatePicker>
-                    </GoAFormItem>
-                  </GoAModal>
-                `}
-          />
-        </>
-      )}
+      <ModalConfirmRecordChangeExample/>
 
       <h3 id="component-example-add-item">Add another item</h3>
-      {/*Don't use a Sandbox because the Dropdown inside a modal will make the modal shifts everytime we tab from the dropdown*/}
-      <GoAContainer mt="m" mb="none">
-        <GoAButtonGroup alignment="center">
-          <GoAButton type="tertiary" leadingIcon="add" onClick={() => setAddItemModalOpen(true)}>
-            Add another item
-          </GoAButton>
-        </GoAButtonGroup>
-
-        <GoAModal
-          heading="Add a new item"
-          role="dialog"
-          open={addItemModalOpen}
-          actions={
-            <GoAButtonGroup alignment="end">
-              <GoAButton type="tertiary" onClick={() => setAddItemModalOpen(false)}>
-                Cancel
-              </GoAButton>
-              <GoAButton type="primary" onClick={() => setAddItemModalOpen(false)}>
-                Save new item
-              </GoAButton>
-            </GoAButtonGroup>
-          }>
-          <p>Fill in the information to create a new item</p>
-          <GoAFormItem label="Type" mt="xs">
-            <GoADropdown onChange={onChangeType} value={type}>
-              <GoADropdownItem value="1" label="Option 1"></GoADropdownItem>
-              <GoADropdownItem value="2" label="Option 2"></GoADropdownItem>
-            </GoADropdown>
-          </GoAFormItem>
-          <GoAFormItem label="Name" mt="xs">
-            <GoAInput onChange={onChangeName} value={name} name="name"></GoAInput>
-          </GoAFormItem>
-          <GoAFormItem label="Description" mt="xs">
-            <GoATextArea
-              name="description"
-              width="80%"
-              rows={2}
-              onChange={onChangeDescription}
-              value={description}></GoATextArea>
-          </GoAFormItem>
-        </GoAModal>
-      </GoAContainer>
-
-      {language === "angular" && (
-        <>
-          <CodeSnippet
-            lang="typescript"
-            tags="angular"
-            allowCopy={true}
-            code={`
-                  export class SomeOtherComponent {
-                    open = false;
-                    type = "";
-                    name = "";
-                    description = "";
-                    
-                    toggleModal() {
-                      this.open = !this.open;
-                    }
-                    
-                    updateType(event: Event) {
-                      this.type = (event as CustomEvent).detail.value;
-                    }
-                    
-                    updateName(event: Event) {
-                      this.name = (event as CustomEvent).detail.value;
-                    }
-                    
-                    updateDescription(event: Event) {
-                      this.description = (event as CustomEvent).detail.value;
-                    }
-                    
-                  }
-                `}
-          />
-          <CodeSnippet
-            lang="typescript"
-            tags="angular"
-            allowCopy={true}
-            code={`
-                  <goa-button type="tertiary" leadingicon="add" (_click)="toggleModal()">Add another item</goa-button>
-                  <goa-modal [open]="open" role="dialog"
-                    (_close)="toggleModal()" heading="Add a new item">
-                    <p>Fill in the information to create a new item</p>
-                    <goa-form-item label="Type" mt="xs">
-                      <goa-dropdown (_change)="updateType($event)" [value]="type">
-                        <goa-dropdown-item value="1" label="Option 1"></goa-dropdown-item>
-                        <goa-dropdown-item value="2" label="Option 2"></goa-dropdown-item>
-                      </goa-dropdown>
-                    </goa-form-item>
-                    <goa-form-item label="Name" mt="xs">
-                      <goa-input name="name" (_change)="updateName($event)" [value]="name"></goa-input>
-                    </goa-form-item>
-                    <goa-form-item label="Description" mt="xs">
-                      <goa-textarea name="description" width="80%" [rows]="2" (_change)="updateDescription($event)" [value]="description"></goa-textarea>
-                    </goa-form-item>
-                    <div slot="actions">
-                        <goa-button-group alignment="end">
-                          <goa-button type="tertiary" (_click)="toggleModal()">Cancel</goa-button>
-                          <goa-button type="primary" (_click)="toggleModal()">Save new item</goa-button>
-                        </goa-button-group>
-                      </div>
-                  </goa-modal>
-                `}
-          />
-        </>
-      )}
-
-      {language === "react" && (
-        <>
-          <CodeSnippet
-            lang="typescript"
-            tags="react"
-            allowCopy={true}
-            code={`
-                  const [open, setOpen] = useState(false);
-                  const [type, setType] = useState<string>();
-                  const [name, setName] = useState<string>();
-                  const [description, setDescription] = useState<string>();
-                  
-                  function onChangeName(name: string, value: string) {
-                    setName(value);
-                  }
-                  
-                  function onChangeDescription(name: string, value: string) {
-                    setDescription(value);
-                  }
-                  
-                  function onChangeType(name: string, value: string[] | string) {
-                    setType(value as string);
-                  };
-                  
-                `}
-          />
-          <CodeSnippet
-            lang="typescript"
-            tags="react"
-            allowCopy={true}
-            code={`
-                  <GoAButton type="tertiary" leadingIcon="add" onClick={() => setOpen(true)}>
-                    Add another item
-                  </GoAButton>
-                   <GoAModal
-                    heading="Add a new item"
-                    role="dialog"
-                    open={open}
-                    actions={
-                      <GoAButtonGroup alignment="end">
-                        <GoAButton type="tertiary" onClick={() => setOpen(false)}>
-                          Cancel
-                        </GoAButton>
-                        <GoAButton type="primary" onClick={() => setOpen(false)}>
-                          Save new item
-                        </GoAButton>
-                      </GoAButtonGroup>
-                    }>
-                      <p>Fill in the information to create a new item</p>
-                      <GoAFormItem label="Type" mt="xs">
-                        <GoADropdown onChange={onChangeType} value={type}>
-                          <GoADropdownItem value="1" label="Option 1"></GoADropdownItem>
-                          <GoADropdownItem value="2" label="Option 2"></GoADropdownItem>
-                        </GoADropdown>
-                      </GoAFormItem>
-                      <GoAFormItem label="Name" mt="xs">
-                        <GoAInput onChange={onChangeName} value={name} name="name"></GoAInput>
-                      </GoAFormItem>
-                      <GoAFormItem label="Description" mt="xs">
-                        <GoATextArea name="description" width="80%" rows={2} onChange={onChangeDescription} value={description}></GoATextArea>
-                      </GoAFormItem>
-                   </GoAModal>
-                `}
-          />
-        </>
-      )}
+      <ModalAddAnotherItemExample/>
 
       <h3 id="component-example-route-change">Route changes</h3>
-      <Sandbox skipRender>
-        <CodeSnippet
-          lang="typescript"
-          tags="angular"
-          allowCopy={true}
-          code={`
-                  import { Router } from "@angular/router";
-                  export class SomeOtherComponent {
-                    open = false;
-                    constructor(private router: Router) {}
-                    
-                    onOpen() {
-                      this.open = true;
-                    }
-                    onClose() {
-                      this.open = false;
-                    }
-                    onChangeRoute() {
-                      this.open = false;
-                      setTimeout(() => this.router.navigate(["/components"]), 0)
-                    }
-                  }
-                `}
-        />
-
-        <CodeSnippet
-          lang="typescript"
-          tags="angular"
-          allowCopy={true}
-          code={`
-                  <goa-button (_click)="onOpen();">Open</goa-button>
-                  <goa-modal [open]="open" role="alertdialog" heading="Are you sure you want to change route?">
-                    <div slot="actions">
-                      <goa-button-group alignment="end">
-                        <goa-button type="secondary" (_click)="onClose()">Cancel</goa-button>
-                        <goa-button type="primary" (_click)="onChangeRoute()">Change route</goa-button>
-                      </goa-button-group>
-                    </div>
-                  </goa-modal>
-                `}
-        />
-
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`import { useNavigate } from "react-router-dom";`}
-        />
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
-            const navigate = useNavigate();
-            const [open, setOpen] = useState(false);
-          `}
-        />
-
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
-                  <GoAButton onClick={() => setOpen(true)}>Open</GoAButton>
-                  <GoAModal
-                    heading="Are you sure you want to change route?"
-                    open={open}
-                    role="alertdialog"
-                    onClose={() => setOpen(false)}
-                    actions={
-                      <GoAButtonGroup alignment="end">
-                        <GoAButton type="secondary" onClick={() => setOpen(false)}>
-                          Cancel
-                        </GoAButton>
-                        <GoAButton
-                          size="medium"
-                          onClick={() => {
-                            setOpen(false);
-                            // setTimeout will allow any modal transitions to be run
-                            // setTimeout(() => navigate("/some-path"), 300) }
-                            navigate("/components")
-                        }}>Change route</GoAButton>
-                      </GoAButtonGroup>
-                    }
-                  ></GoAModal>
-                `}
-        />
-        <GoAButton onClick={() => setOnRouteChangeModalOpen(true)}>Open</GoAButton>
-        <GoAModal
-          heading="Are you sure you want to change route?"
-          open={onRouteChangeModalOpen}
-          onClose={() => setOnRouteChangeModalOpen(false)}
-          actions={
-            <GoAButtonGroup alignment="end">
-              <GoAButton type="secondary" onClick={() => setOnRouteChangeModalOpen(false)}>
-                Cancel
-              </GoAButton>
-              <GoAButton
-                type="primary"
-                onClick={() => {
-                  setOnRouteChangeModalOpen(false);
-                  navigate("/components");
-                }}>
-                Change route
-              </GoAButton>
-            </GoAButtonGroup>
-          }></GoAModal>
-      </Sandbox>
+      <ModalRouteChangeExample/>
     </>
   );
 }
diff --git a/src/examples/modal/ModalRouteChangeExample.tsx b/src/examples/modal/ModalRouteChangeExample.tsx
new file mode 100644
index 000000000..9296863be
--- /dev/null
+++ b/src/examples/modal/ModalRouteChangeExample.tsx
@@ -0,0 +1,172 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabButton, GoabButtonGroup, GoabModal } from "@abgov/react-components";
+import { useContext, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { useNavigate } from "react-router-dom";
+
+export const ModalRouteChangeExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const [onRouteChangeModalOpen, setOnRouteChangeModalOpen] = useState<boolean>();
+  const navigate = useNavigate();
+
+  return (
+      <Sandbox skipRender>
+
+        {/*Angular code*/}
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  import { Router } from "@angular/router";
+                  export class SomeOtherComponent {
+                    open = false;
+                    constructor(private router: Router) {}
+                    
+                    onOpen() {
+                      this.open = true;
+                    }
+                    onClose() {
+                      this.open = false;
+                    }
+                    onChangeRoute() {
+                      this.open = false;
+                       // setTimeout will allow any modal transitions to be run
+                       setTimeout(() => this.router.navigate(["/components"]), 0)
+                    }
+                  }
+                `}
+        />
+
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  <goa-button (_click)="onOpen();">Open</goa-button>
+                  <goa-modal [open]="open" role="alertdialog" heading="Are you sure you want to change route?">
+                    <div slot="actions">
+                      <goa-button-group alignment="end">
+                        <goa-button type="secondary" (_click)="onClose()">Cancel</goa-button>
+                        <goa-button type="primary" (_click)="onChangeRoute()">Change route</goa-button>
+                      </goa-button-group>
+                    </div>
+                  </goa-modal>
+                `}
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  <goab-button (onClick)="onOpen();">Open</goab-button>
+                  <goab-modal [open]="open" role="alertdialog" heading="Are you sure you want to change route?" [actions]="actions">
+                    <ng-template #actions>
+                      <goab-button-group alignment="end">
+                        <goab-button type="secondary" (onClick)="onClose()">Cancel</goab-button>
+                        <goab-button type="primary" (onClick)="onChangeRoute()">Change route</goab-button>
+                      </goab-button-group>
+                    </ng-template>
+                  </goab-modal>
+                `}
+        />}
+
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`import { useNavigate } from "react-router-dom";`}
+        />
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            const navigate = useNavigate();
+            const [open, setOpen] = useState(false);
+          `}
+        />
+
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <GoAButton onClick={() => setOpen(true)}>Open</GoAButton>
+                  <GoAModal
+                    heading="Are you sure you want to change route?"
+                    open={open}
+                    role="alertdialog"
+                    onClose={() => setOpen(false)}
+                    actions={
+                      <GoAButtonGroup alignment="end">
+                        <GoAButton type="secondary" onClick={() => setOpen(false)}>
+                          Cancel
+                        </GoAButton>
+                        <GoAButton
+                          onClick={() => {
+                            setOpen(false);
+                            // setTimeout will allow any modal transitions to be run
+                            // setTimeout(() => navigate("/some-path"), 300) }
+                            navigate("/components")
+                        }}>Change route</GoAButton>
+                      </GoAButtonGroup>
+                    }
+                  ></GoAModal>
+                `}
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <GoabButton onClick={() => setOpen(true)}>Open</GoabButton>
+                  <GoabModal
+                    heading="Are you sure you want to change route?"
+                    open={open}
+                    role="alertdialog"
+                    onClose={() => setOpen(false)}
+                    actions={
+                      <GoabButtonGroup alignment="end">
+                        <GoabButton type="secondary" onClick={() => setOpen(false)}>
+                          Cancel
+                        </GoabButton>
+                        <GoabButton
+                          onClick={() => {
+                            setOpen(false);
+                            // setTimeout will allow any modal transitions to be run
+                            // setTimeout(() => navigate("/some-path"), 300) }
+                            navigate("/components")
+                        }}>Change route</GoabButton>
+                      </GoabButtonGroup>
+                    }
+                  ></GoabModal>
+                `}
+        />}
+
+        <GoabButton onClick={() => setOnRouteChangeModalOpen(true)}>Open</GoabButton>
+        <GoabModal
+          heading="Are you sure you want to change route?"
+          open={onRouteChangeModalOpen}
+          onClose={() => setOnRouteChangeModalOpen(false)}
+          actions={
+            <GoabButtonGroup alignment="end">
+              <GoabButton type="secondary" onClick={() => setOnRouteChangeModalOpen(false)}>
+                Cancel
+              </GoabButton>
+              <GoabButton
+                type="primary"
+                onClick={() => {
+                  setOnRouteChangeModalOpen(false);
+                  navigate("/components");
+                }}>
+                Change route
+              </GoabButton>
+            </GoabButtonGroup>
+          }></GoabModal>
+      </Sandbox>
+  )
+}
diff --git a/src/examples/modal/ModalWarnUserDeadlineExample.tsx b/src/examples/modal/ModalWarnUserDeadlineExample.tsx
new file mode 100644
index 000000000..a911b3966
--- /dev/null
+++ b/src/examples/modal/ModalWarnUserDeadlineExample.tsx
@@ -0,0 +1,153 @@
+import { Sandbox } from "@components/sandbox";
+import { GoabButton, GoabButtonGroup, GoabModal } from "@abgov/react-components";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { useContext, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const ModalWarnUserDeadlineExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const [warnCalloutModalOpen, setWarnCalloutModalOpen] = useState<boolean>();
+  return (
+    <Sandbox skipRender>
+      <GoabButton type="secondary" onClick={() => setWarnCalloutModalOpen(true)}>
+        Save for later
+      </GoabButton>
+      <GoabModal
+        heading="Complete submission prior to 1PM"
+        calloutVariant="important"
+        role="alertdialog"
+        open={warnCalloutModalOpen}
+        onClose={() => setWarnCalloutModalOpen(false)}
+        actions={
+          <GoabButtonGroup alignment="end">
+            <GoabButton type="primary" onClick={() => setWarnCalloutModalOpen(false)}>
+              I understand
+            </GoabButton>
+          </GoabButtonGroup>
+        }>
+        <p>
+          You’ve selected to adjourn a matter that is required to appear today. This Calgary court
+          location does not accept adjournment requests past 1PM MST. Please submit your
+          adjournment request as soon as possible.
+        </p>
+      </GoabModal>
+
+      {/*Angular code*/}
+      <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  export class SomeOtherComponent {
+                    open = false;
+                    toggleModal() {
+                      this.open = !this.open;
+                    }
+                  }
+                `}
+      />
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  <goa-button type="secondary" (_click)="toggleModal()">Save for later</goa-button>
+                  <goa-modal [open]="open" role="alertdialog" calloutvariant="important"
+                    (_close)="toggleModal()" heading="Complete submission prior to 1PM">
+                      <p>You’ve selected to adjourn a matter that is required to appear today. This Calgary court location does not accept adjournment requests past 1PM MST. Please submit your adjournment request as soon as possible.</p>
+                    <div slot="actions">
+                      <goa-button-group alignment="end">
+                        <goa-button type="primary" (_click)="toggleModal()">
+                          I understand
+                        </goa-button>
+                      </goa-button-group>
+                    </div>
+                  </goa-modal>
+                `}
+        />
+      )}
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+          <goab-button type="secondary" (onClick)="toggleModal()">Save for later</goab-button>
+          <goab-modal [open]="open" role="alertdialog" calloutVariant="important"
+            (onClose)="toggleModal()" heading="Complete submission prior to 1PM" [actions]="actions">
+            <p>You’ve selected to adjourn a matter that is required to appear today. This Calgary court location does not accept adjournment requests past 1PM MST. Please submit your adjournment request as soon as possible.</p>
+            <ng-template #actions>
+              <goab-button-group alignment="end">
+                <goab-button type="primary" (onClick)="toggleModal()">
+                   I understand
+                </goab-button>
+              </goab-button-group>
+            </ng-template>
+          </goab-modal>
+                `}
+        />
+      )}
+
+      {/*React code*/}
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  const [open, setOpen] = useState(false);
+                `}
+      />
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <GoAButton type="secondary" onClick={() => setOpen(true)}>Save for later</GoAButton>
+                  <GoAModal
+                    heading="Complete submission prior to 1PM"
+                    open={open}
+                    calloutVariant="important"
+                    role="alertdialog"
+                    onClose={() => setOpen(false)}
+                    actions={
+                      <GoAButtonGroup alignment="end">
+                        <GoAButton type="primary" onClick={() => setOpen(false)}>I understand</GoAButton>
+                      </GoAButtonGroup>
+                    }
+                  >
+                    <p>You’ve selected to adjourn a matter that is required to appear today. This Calgary court location does not accept adjournment requests past 1PM MST. Please submit your adjournment request as soon as possible.</p>
+                  </GoAModal>
+                `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <GoabButton type="secondary" onClick={() => setOpen(true)}>Save for later</GoabButton>
+                  <GoabModal
+                    heading="Complete submission prior to 1PM"
+                    open={open}
+                    calloutVariant="important"
+                    role="alertdialog"
+                    onClose={() => setOpen(false)}
+                    actions={
+                      <GoabButtonGroup alignment="end">
+                        <GoabButton type="primary" onClick={() => setOpen(false)}>I understand</GoabButton>
+                      </GoabButtonGroup>
+                    }
+                  >
+                    <p>You’ve selected to adjourn a matter that is required to appear today. This Calgary court location does not accept adjournment requests past 1PM MST. Please submit your adjournment request as soon as possible.</p>
+                  </GoabModal>
+                `}
+        />
+      )}
+    </Sandbox>
+  )
+}
diff --git a/src/examples/pagination/PaginationExamples.tsx b/src/examples/pagination/PaginationExamples.tsx
new file mode 100644
index 000000000..8a98352bc
--- /dev/null
+++ b/src/examples/pagination/PaginationExamples.tsx
@@ -0,0 +1,580 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import {
+  GoabBlock,
+  GoabDropdown,
+  GoabDropdownItem,
+  GoabPagination,
+  GoabSpacer,
+  GoabTable,
+} from "@abgov/react-components";
+import { useContext, useEffect, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { GoabDropdownOnChangeDetail } from "@abgov/ui-components-common";
+import { faker } from "@faker-js/faker";
+
+interface User {
+  id: string;
+  firstName: string;
+  lastName: string;
+  age: number;
+}
+
+export const PaginationExamples = () => {
+  const { version } = useContext(LanguageVersionContext);
+  const [users, setUsers] = useState<User[]>([]);
+  const [pageUsers, setPageUsers] = useState<User[]>([]);
+  const [page, setPage] = useState<number>(1);
+  const [perPage, setPerPage] = useState<number>(10);
+
+  useEffect(() => {
+    const _users = [];
+    for (let i = 1; i <= 100; i++) {
+      _users.push({
+        id: faker.datatype.uuid(),
+        firstName: faker.name.firstName(),
+        lastName: faker.name.lastName(),
+        age: faker.datatype.number({ min: 18, max: 60 }),
+      });
+    }
+    setUsers(_users);
+    setPageUsers(_users.slice(0, perPage));
+  }, [perPage]);
+
+  function changePage(newPage: number) {
+    const offset = (newPage - 1) * 10;
+    const _users = users.slice(offset, offset + perPage);
+    setPage(newPage);
+    setPageUsers(_users);
+  }
+
+  function handlePerPageCountChangeEvent(event: GoabDropdownOnChangeDetail) {
+    const perPageValue = parseInt(event.value || "1");
+    setPage(1);
+    setPerPage(perPageValue);
+    const _users = users.slice(0, perPageValue);
+    setPageUsers(_users);
+  }
+
+  return (
+    <>
+      <h2 id="component-examples" className="hidden" aria-hidden="true">
+        Examples
+      </h2>
+
+      <h3 id="component-example-1">Show X per page</h3>
+      <Sandbox fullWidth skipRender>
+        {/*============= React code ==============*/}
+        {version === "old" && (
+          <CodeSnippet
+            lang="typescript"
+            tags="react"
+            allowCopy={true}
+            code={`
+                import { faker } from "@faker-js/faker";
+
+                interface User {
+                  id: string;
+                  firstName: string;
+                  lastName: string;
+                  age: number;
+                }
+
+                export default function Pagination() {
+                  const [users, setUsers] = useState<User[]>([]);
+                  const [pageUsers, setPageUsers] = useState<User[]>([]);
+                  const [page, setPage] = useState<number>(1);
+                  const [perPage, setPerPage] = useState<number>(10);
+
+                  useEffect(() => {
+                    const _users = [];
+                    for (let i = 1; i <= 100; i++) {
+                      _users.push({
+                        id: faker.datatype.uuid(),
+                        firstName: faker.name.firstName(),
+                        lastName: faker.name.lastName(),
+                        age: faker.datatype.number({ min: 18, max: 60 }),
+                      });
+                    }
+                    setUsers(_users);
+                    setPageUsers(_users.slice(0, perPage));
+                  }, [perPage]);
+
+                  function changePage(newPage: number) {
+                    const offset = (newPage - 1) * 10;
+                    const _users = users.slice(offset, offset + perPage);
+                    setPage(newPage);
+                    setPageUsers(_users);
+                  }
+
+                  function handlePerPageCountChangeEvent(name: string, value: string | string[]) {
+                    const perPageValue = Array.isArray(value) ? parseInt(value[0]) : parseInt(value);
+                    setPage(1);
+                    setPerPage(perPageValue);
+                    const _users = users.slice(0, perPageValue);
+                    setPageUsers(_users);
+                  }
+        `}
+          />
+        )}
+
+        {version === "new" && (
+          <CodeSnippet
+            lang="typescript"
+            tags="react"
+            allowCopy={true}
+            code={`
+                import { faker } from "@faker-js/faker";
+
+                interface User {
+                  id: string;
+                  firstName: string;
+                  lastName: string;
+                  age: number;
+                }
+
+                export default function Pagination() {
+                  const [users, setUsers] = useState<User[]>([]);
+                  const [pageUsers, setPageUsers] = useState<User[]>([]);
+                  const [page, setPage] = useState<number>(1);
+                  const [perPage, setPerPage] = useState<number>(10);
+
+                  useEffect(() => {
+                    const _users = [];
+                    for (let i = 1; i <= 100; i++) {
+                      _users.push({
+                        id: faker.string.uuid(),
+                        firstName: faker.person.firstName(),
+                        lastName: faker.person.lastName(),
+                        age: faker.number.int({ min: 18, max: 60 }),
+                      });
+                    }
+                    setUsers(_users);
+                    setPageUsers(_users.slice(0, perPage));
+                  }, [perPage]);
+
+                  function changePage(newPage: number) {
+                    const offset = (newPage - 1) * 10;
+                    const _users = users.slice(offset, offset + perPage);
+                    setPage(newPage);
+                    setPageUsers(_users);
+                  }
+
+                  function handlePerPageCountChangeEvent(event: GoabDropdownOnChangeDetail) {
+                    const perPageValue = parseInt(event.value || '1');
+                    setPage(1);
+                    setPerPage(perPageValue);
+                    const _users = users.slice(0, perPageValue);
+                    setPageUsers(_users);
+                  }
+              `}
+          />
+        )}
+
+        {version === "old" && (
+          <CodeSnippet
+            lang="typescript"
+            tags="react"
+            allowCopy={true}
+            code={`
+                  <GoATable width="100%" mb="xl">
+                    <thead>
+                      <tr>
+                        <th>First name</th>
+                        <th>Last name</th>
+                        <th>Age</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {pageUsers.map((u) => (
+                        <tr key={u.id}>
+                          <td>{u.firstName}</td>
+                          <td>{u.lastName}</td>
+                          <td>{u.age}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </GoATable>
+
+                  <GoABlock alignment="center">
+                    <GoABlock mb="m" alignment="center">
+                      Show
+                      <GoADropdown
+                        onChange={handlePerPageCountChangeEvent}
+                        value={perPage.toString()}
+                        width="9ch"
+                      >
+                        <GoADropdownItem value="10" label="10"></GoADropdownItem>
+                        <GoADropdownItem value="20" label="20"></GoADropdownItem>
+                        <GoADropdownItem value="30" label="30"></GoADropdownItem>
+                      </GoADropdown>
+                      <span style={{width: "75px"}}>of {users.length}</span>
+                    </GoABlock>
+
+                    <GoASpacer hSpacing="fill"></GoASpacer>
+
+                    <GoAPagination
+                      itemCount={users.length}
+                      perPageCount={perPage}
+                      pageNumber={page}
+                      onChange={changePage}
+                    />
+                  </GoABlock>
+              `}
+          />
+        )}
+
+        {version === "new" && (
+          <CodeSnippet
+            lang="typescript"
+            tags="react"
+            allowCopy={true}
+            code={`
+                  <GoabTable width="100%" mb="xl">
+                    <thead>
+                      <tr>
+                        <th>First name</th>
+                        <th>Last name</th>
+                        <th>Age</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {pageUsers.map((u) => (
+                        <tr key={u.id}>
+                          <td>{u.firstName}</td>
+                          <td>{u.lastName}</td>
+                          <td>{u.age}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </GoabTable>
+
+                  <GoabBlock alignment="center">
+                    <GoabBlock mb="m" alignment="center">
+                      Show
+                      <GoabDropdown
+                        onChange={handlePerPageCountChangeEvent}
+                        value={perPage.toString()}
+                        width="9ch"
+                      >
+                        <GoabDropdownItem value="10" label="10"></GoabDropdownItem>
+                        <GoabDropdownItem value="20" label="20"></GoabDropdownItem>
+                        <GoabDropdownItem value="30" label="30"></GoabDropdownItem>
+                      </GoabDropdown>
+                      <span style={{width: "75px"}}>of {users.length}</span>
+                    </GoabBlock>
+
+                    <GoabSpacer hSpacing="fill"></GoabSpacer>
+
+                    <GoabPagination
+                      itemCount={users.length}
+                      perPageCount={perPage}
+                      pageNumber={page}
+                      onChange={event => changePage(event.page)}
+                    />
+                  </GoabBlock>
+              `}
+          />
+        )}
+
+        {/*================ Angular code ==================*/}
+        {version === "old" && (
+          <CodeSnippet
+            lang="typescript"
+            tags="angular"
+            allowCopy={true}
+            code={`
+                import { Component } from "@angular/core";
+                import { faker } from "@faker-js/faker";
+
+                interface User {
+                  id: string;
+                  firstName: string;
+                  lastName: string;
+                  age: number;
+                }
+
+                @Component({
+                  selector: "abgov-paginate",
+                  templateUrl: "./paginate.html",
+                })
+                export class PaginateComponent {
+                  users: User[] = [];
+                  pageUsers: User[] = [];
+                  page = 1;
+                  perPage = 10;
+                  total = 100;
+
+                  handlePageChange(event: Event) {
+                    const e = event as CustomEvent;
+                    this.page = e.detail.page;
+
+                    if (typeof this.perPage !== "number") {
+                      this.perPage = Number(this.perPage);
+                    }
+
+                    const offset: number = (this.page - 1) * this.perPage;
+                    this.pageUsers = this.users.slice(offset, offset + this.perPage);
+                  }
+
+                  handlePerPageCountChangeEvent(event: Event) {
+                    const e = event as CustomEvent;
+                    this.page = 1;
+                    this.perPage = e.detail.value;
+
+                    if (typeof this.perPage !== "number") {
+                      this.perPage = Number(this.perPage);
+                    }
+
+                    this.pageUsers = this.users.slice(0, this.perPage);
+                  }
+
+                  constructor() {
+                    this.pageUsers = this.prepareUsers().slice(0, this.perPage);
+                  }
+
+                  prepareUsers() {
+                    for (let i = 0; i < this.total; i++) {
+                      this.users.push({
+                        id: faker.datatype.uuid(),
+                        firstName: faker.name.firstName(),
+                        lastName: faker.name.lastName(),
+                        age: faker.datatype.number({ min: 18, max: 60 }),
+                      });
+                    }
+
+                    return this.users;
+                  }
+                }
+              `}
+          />
+        )}
+
+        {version === "new" && (
+          <CodeSnippet
+            lang="typescript"
+            tags="angular"
+            allowCopy={true}
+            code={`
+                import { faker } from "@faker-js/faker";
+
+                interface User {
+                  id: string;
+                  firstName: string;
+                  lastName: string;
+                  age: number;
+                }
+
+                @Component({
+                  selector: "abgov-paginate",
+                  templateUrl: "./paginate.html",
+                })
+                export class PaginateComponent {
+                  users: User[] = [];
+                  pageUsers: User[] = [];
+                  page = 1;
+                  perPage = 10;
+                  total = 100;
+
+                  handlePageChange(event: GoabPaginationOnChangeDetail) {
+                    this.page = event.page;
+
+                    const offset: number = (this.page - 1) * this.perPage;
+                    this.pageUsers = this.users.slice(offset, offset + this.perPage);
+                  }
+
+                  handlePerPageCountChangeEvent(event: GoabDropdownOnChangeDetail) {
+                    this.page = 1;
+                    this.perPage = Number(event.value);
+
+                    this.pageUsers = this.users.slice(0, this.perPage);
+                  }
+
+                  constructor() {
+                    this.pageUsers = this.prepareUsers().slice(0, this.perPage);
+                  }
+
+                  prepareUsers() {
+                    for (let i = 0; i < this.total; i++) {
+                      this.users.push({
+                        id: faker.string.uuid(),
+                        firstName: faker.person.firstName(),
+                        lastName: faker.person.lastName(),
+                        age: faker.number.int({ min: 18, max: 60 }),
+                      });
+                    }
+
+                    return this.users;
+                  }
+                }
+              `}
+          />
+        )}
+
+        {version === "old" && (
+          <CodeSnippet
+            lang="typescript"
+            tags="angular"
+            allowCopy={true}
+            code={`
+                <goa-table width="100%" mb="xl">
+                  <thead>
+                  <tr>
+                    <th>First name</th>
+                    <th>Last name</th>
+                    <th>Age</th>
+                  </tr>
+                  </thead>
+                  <tbody>
+                  <tr *ngFor="let user of pageUsers; index as i">
+                    <td>{{ user.firstName }}</td>
+                    <td>{{ user.lastName }}</td>
+                    <td>{{ user.age }}</td>
+                  </tr>
+                  </tbody>
+                </goa-table>
+
+                <goa-block alignment="center">
+                  <goa-block mb="m" alignment="center">
+                  Show
+                  <goa-dropdown
+                    (_change)="handlePerPageCountChangeEvent($event)"
+                    value="10"
+                    width="9ch"
+                  >
+                    <goa-dropdown-item value="10" label="10"></goa-dropdown-item>
+                    <goa-dropdown-item value="20" label="20"></goa-dropdown-item>
+                    <goa-dropdown-item value="30" label="30"></goa-dropdown-item>
+                    <goa-dropdown-item value="40" label="40"></goa-dropdown-item>
+                    <goa-dropdown-item value="50" label="50"></goa-dropdown-item>
+                    <goa-dropdown-item value="60" label="60"></goa-dropdown-item>
+                    <goa-dropdown-item value="70" label="70"></goa-dropdown-item>
+                    <goa-dropdown-item value="80" label="80"></goa-dropdown-item>
+                    <goa-dropdown-item value="90" label="90"></goa-dropdown-item>
+                    <goa-dropdown-item value="100" label="100"></goa-dropdown-item>
+
+                  </goa-dropdown>
+                  <span style="width: 50px">of {{ this.users.length }}</span
+                  >
+                  </goa-block>
+
+                  <goa-spacer hspacing="fill"></goa-spacer>
+
+                  <goa-pagination
+                    [itemcount]="users.length"
+                    [perpagecount]="perPage"
+                    [pagenumber]="page"
+                  (_change)="handlePageChange($event)"
+                  >
+                  </goa-pagination>
+
+                </goa-block>
+              `}
+          />
+        )}
+
+        {version === "new" && (
+          <CodeSnippet
+            lang="typescript"
+            tags="angular"
+            allowCopy={true}
+            code={`
+                <goab-table width="100%" mb="xl">
+                  <thead>
+                    <tr>
+                      <th>First name</th>
+                      <th>Last name</th>
+                      <th>Age</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let user of pageUsers; index as i">
+                      <td>{{ user.firstName }}</td>
+                      <td>{{ user.lastName }}</td>
+                      <td>{{ user.age }}</td>
+                    </tr>
+                  </tbody>
+                </goab-table>
+
+                <goab-block alignment="center">
+                  <goab-block mb="m" alignment="center">
+                  Show
+                  <goab-dropdown
+                    (onChange)="handlePerPageCountChangeEvent($event)"
+                    value="10"
+                    width="9ch"
+                  >
+                    <goab-dropdown-item value="10" label="10"></goab-dropdown-item>
+                    <goab-dropdown-item value="20" label="20"></goab-dropdown-item>
+                    <goab-dropdown-item value="30" label="30"></goab-dropdown-item>
+                    <goab-dropdown-item value="40" label="40"></goab-dropdown-item>
+                    <goab-dropdown-item value="50" label="50"></goab-dropdown-item>
+                    <goab-dropdown-item value="60" label="60"></goab-dropdown-item>
+                    <goab-dropdown-item value="70" label="70"></goab-dropdown-item>
+                    <goab-dropdown-item value="80" label="80"></goab-dropdown-item>
+                    <goab-dropdown-item value="90" label="90"></goab-dropdown-item>
+                    <goab-dropdown-item value="100" label="100"></goab-dropdown-item>
+                  </goab-dropdown>
+                    <span style="width: 50px">of {{ this.users.length }}</span
+                >
+              </goab-block>
+
+              <goab-spacer hSpacing="fill"></goab-spacer>
+
+              <goab-pagination
+                [itemCount]="users.length"
+                [perPageCount]="perPage"
+                [pageNumber]="page"
+                (onChange)="handlePageChange($event)"
+              ></goab-pagination>
+
+            </goab-block>
+              `}
+          />
+        )}
+
+        <GoabTable width="100%" mb="xl">
+          <thead>
+            <tr>
+              <th>First name</th>
+              <th>Last name</th>
+              <th>Age</th>
+            </tr>
+          </thead>
+          <tbody>
+            {pageUsers.map(u => (
+              <tr key={u.id}>
+                <td>{u.firstName}</td>
+                <td>{u.lastName}</td>
+                <td>{u.age}</td>
+              </tr>
+            ))}
+          </tbody>
+        </GoabTable>
+
+        <GoabBlock alignment="center">
+          <GoabBlock mb="m" alignment="center">
+            Show
+            <GoabDropdown
+              onChange={handlePerPageCountChangeEvent}
+              value={perPage.toString()}
+              width="9ch">
+              {[10, 20, 30].map(value => (
+                <GoabDropdownItem key={value} value={value.toString()} label={value.toString()} />
+              ))}
+            </GoabDropdown>
+            <span style={{ width: "75px" }}>per page</span>
+          </GoabBlock>
+          <GoabSpacer hSpacing={"fill"} />
+
+          <GoabPagination
+            itemCount={users.length}
+            perPageCount={perPage}
+            pageNumber={page}
+            onChange={event => changePage(event.page)}
+          />
+        </GoabBlock>
+      </Sandbox>
+    </>
+  );
+};
diff --git a/src/examples/question-page/QuestionPageExamples.tsx b/src/examples/question-page/QuestionPageExamples.tsx
index 6b0ae5415..5d3a7e920 100644
--- a/src/examples/question-page/QuestionPageExamples.tsx
+++ b/src/examples/question-page/QuestionPageExamples.tsx
@@ -1,16 +1,19 @@
 import { Sandbox } from "@components/sandbox";
-import {
-  GoAButton,
-  GoADetails, GoADropdown, GoADropdownItem,
-  GoAFormItem, GoAInput,
-  GoARadioGroup,
-  GoARadioItem
-} from "@abgov/react-components";
 import "./question-page-example.css";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import {
+  GoabButton,
+  GoabDetails, GoabDropdown, GoabDropdownItem,
+  GoabFormItem,
+  GoabInput,
+  GoabRadioGroup,
+  GoabRadioItem
+} from "@abgov/react-components";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { useContext } from "react";
 
 export default function QuestionPageExamples() {
-
+  const {version} = useContext(LanguageVersionContext);
   return (
     <div className="question-page-example">
       <div className="component-example-header">
@@ -51,21 +54,21 @@ export default function QuestionPageExamples() {
         <a href="#" className="back-link">
           Back
         </a>
-        <GoAFormItem
+        <GoabFormItem
           mt="2xl"
           label="Are you currently in school?"
           labelSize="large"
           helpText="School includes foundational, skills and employment training, micro-credentials, post-secondary and continuing education.">
-          <GoARadioGroup name="school" ariaLabel="are you currently in school?" onChange={() => {}}>
-            <GoARadioItem value="yes" label="Yes"></GoARadioItem>
-            <GoARadioItem value="no" label="No">
+          <GoabRadioGroup name="school" ariaLabel="are you currently in school?" onChange={() => {}}>
+            <GoabRadioItem value="yes" label="Yes"></GoabRadioItem>
+            <GoabRadioItem value="no" label="No">
               No
-            </GoARadioItem>
-          </GoARadioGroup>
-        </GoAFormItem>
-        <GoAButton type="submit" mt="2xl">
+            </GoabRadioItem>
+          </GoabRadioGroup>
+        </GoabFormItem>
+        <GoabButton type="submit" mt="2xl">
           Save and continue
-        </GoAButton>
+        </GoabButton>
       </Sandbox>
 
       <div className="component-example-header">
@@ -126,15 +129,15 @@ export default function QuestionPageExamples() {
           categorized under 'school'.
         </p>
         <p>Contact your provider if you’re concerned about your school status.</p>
-        <GoAFormItem label="Are you currently in school?" mt="xl">
-          <GoARadioGroup name="school" ariaLabel="are you currently in school?" onChange={() => {}}>
-            <GoARadioItem value="yes" label="Yes"></GoARadioItem>
-            <GoARadioItem value="no" label="No"></GoARadioItem>
-          </GoARadioGroup>
-        </GoAFormItem>
-        <GoAButton type="submit" mt="2xl">
+        <GoabFormItem label="Are you currently in school?" mt="xl">
+          <GoabRadioGroup name="school" ariaLabel="are you currently in school?" onChange={() => {}}>
+            <GoabRadioItem value="yes" label="Yes"></GoabRadioItem>
+            <GoabRadioItem value="no" label="No"></GoabRadioItem>
+          </GoabRadioGroup>
+        </GoabFormItem>
+        <GoabButton type="submit" mt="2xl">
           Save and continue
-        </GoAButton>
+        </GoabButton>
       </Sandbox>
 
       <div className="component-example-header">
@@ -176,26 +179,26 @@ export default function QuestionPageExamples() {
         <a href="#" className="back-link">
           Back
         </a>
-        <GoAFormItem
+        <GoabFormItem
           mt="2xl"
           label="Do you pay for child care?"
           labelSize="large"
           helpText="Examples of child care are daycares, day homes and baby-sisters.">
-          <GoARadioGroup
+          <GoabRadioGroup
             name="child-care"
             ariaLabel="Do you pay for child care?"
             onChange={() => {}}>
-            <GoARadioItem value="yes" label="Yes"></GoARadioItem>
-            <GoARadioItem value="no" label="No"></GoARadioItem>
-          </GoARadioGroup>
-        </GoAFormItem>
+            <GoabRadioItem value="yes" label="Yes"></GoabRadioItem>
+            <GoabRadioItem value="no" label="No"></GoabRadioItem>
+          </GoabRadioGroup>
+        </GoabFormItem>
 
-        <GoADetails heading="Why are we asking this question?" mt="xl">
+        <GoabDetails heading="Why are we asking this question?" mt="xl">
           <p>We ask this question to determine if you are eligible for child care benefits.</p>
-        </GoADetails>
-        <GoAButton type="submit" mt="2xl">
+        </GoabDetails>
+        <GoabButton type="submit" mt="2xl">
           Save and continue
-        </GoAButton>
+        </GoabButton>
       </Sandbox>
 
       <div className="component-example-header">
@@ -246,18 +249,18 @@ export default function QuestionPageExamples() {
           Back
         </a>
         <h3 className="section-title">Personal information</h3>
-        <GoAFormItem mt="xs" label="Do you currently live in Canada?" labelSize="large">
-          <GoARadioGroup
+        <GoabFormItem mt="xs" label="Do you currently live in Canada?" labelSize="large">
+          <GoabRadioGroup
             name="canada"
             ariaLabel="Do you currently live in Canada?"
             onChange={() => {}}>
-            <GoARadioItem value="yes" label="Yes"></GoARadioItem>
-            <GoARadioItem value="no" label="No"></GoARadioItem>
-          </GoARadioGroup>
-        </GoAFormItem>
-        <GoAButton type="submit" mt="2xl">
+            <GoabRadioItem value="yes" label="Yes"></GoabRadioItem>
+            <GoabRadioItem value="no" label="No"></GoabRadioItem>
+          </GoabRadioGroup>
+        </GoabFormItem>
+        <GoabButton type="submit" mt="2xl">
           Save and continue
-        </GoAButton>
+        </GoabButton>
       </Sandbox>
 
       <div className="component-example-header">
@@ -307,18 +310,18 @@ export default function QuestionPageExamples() {
           Back
         </a>
         <h3 className="section-title">Question 3 of 9</h3>
-        <GoAFormItem mt="xs" label="Do you currently live in Canada?" labelSize="large">
-          <GoARadioGroup
+        <GoabFormItem mt="xs" label="Do you currently live in Canada?" labelSize="large">
+          <GoabRadioGroup
             name="canada"
             ariaLabel="Do you currently live in Canada?"
             onChange={() => {}}>
-            <GoARadioItem value="yes" label="Yes"></GoARadioItem>
-            <GoARadioItem value="no" label="No"></GoARadioItem>
-          </GoARadioGroup>
-        </GoAFormItem>
-        <GoAButton type="submit" mt="2xl">
+            <GoabRadioItem value="yes" label="Yes"></GoabRadioItem>
+            <GoabRadioItem value="no" label="No"></GoabRadioItem>
+          </GoabRadioGroup>
+        </GoabFormItem>
+        <GoabButton type="submit" mt="2xl">
           Save and continue
-        </GoAButton>
+        </GoabButton>
       </Sandbox>
 
       <div className="component-example-header">
@@ -373,53 +376,53 @@ export default function QuestionPageExamples() {
         </a>
         <h2 className="section-title">Your address</h2>
         <h3>This is the home address of the person applying</h3>
-        <GoAFormItem label="Address line 1" mt="l">
-          <GoAInput
+        <GoabFormItem label="Address line 1" mt="l">
+          <GoabInput
             onChange={() => {}}
             name="address-line-1"
             ariaLabel="Address line 1"
             width="100%"
           />
-        </GoAFormItem>
-        <GoAFormItem label="Address line 2" mt="xl">
-          <GoAInput
+        </GoabFormItem>
+        <GoabFormItem label="Address line 2" mt="xl">
+          <GoabInput
             onChange={() => {}}
             name="address-line-2"
             ariaLabel="Address line 2"
             width="100%"
           />
-        </GoAFormItem>
-        <GoAFormItem label="Town or city" mt="xl">
-          <GoAInput
+        </GoabFormItem>
+        <GoabFormItem label="Town or city" mt="xl">
+          <GoabInput
             onChange={() => {}}
             name="town-city"
             ariaLabel="Town or city name"
             width={"460px"}
           />
-        </GoAFormItem>
-        <GoAFormItem label="Province or territory" mt="xl" id="provinceLabel">
-          <GoADropdown onChange={() => {}} name="province-territory" ariaLabelledBy="provinceLabel">
-            <GoADropdownItem value="AB" label="Alberta" />
-            <GoADropdownItem value="BC" label="British Columbia" />
-            <GoADropdownItem value="MB" label="Manitoba" />
-            <GoADropdownItem value="NB" label="New Brunswick" />
-            <GoADropdownItem value="NL" label="Newfoundland and Labrador" />
-            <GoADropdownItem value="NS" label="Nova Scotia" />
-            <GoADropdownItem value="ON" label="Ontario" />
-            <GoADropdownItem value="PE" label="Prince Edward Island" />
-            <GoADropdownItem value="QC" label="Quebec" />
-            <GoADropdownItem value="SK" label="Saskatchewan" />
-            <GoADropdownItem value="NT" label="Northwest Territories" />
-            <GoADropdownItem value="NU" label="Nunavut" />
-            <GoADropdownItem value="YT" label="Yukon" />
-          </GoADropdown>
-        </GoAFormItem>
-        <GoAFormItem label="Postal code" mt="xl">
-          <GoAInput onChange={() => {}} name="postal-code" width={"105px"} />
-        </GoAFormItem>
-        <GoAButton type="submit" mt="2xl">
+        </GoabFormItem>
+        <GoabFormItem label="Province or territory" mt="xl" id="provinceLabel">
+          <GoabDropdown onChange={() => {}} name="province-territory" ariaLabelledBy="provinceLabel">
+            <GoabDropdownItem value="AB" label="Alberta" />
+            <GoabDropdownItem value="BC" label="British Columbia" />
+            <GoabDropdownItem value="MB" label="Manitoba" />
+            <GoabDropdownItem value="NB" label="New Brunswick" />
+            <GoabDropdownItem value="NL" label="Newfoundland and Labrador" />
+            <GoabDropdownItem value="NS" label="Nova Scotia" />
+            <GoabDropdownItem value="ON" label="Ontario" />
+            <GoabDropdownItem value="PE" label="Prince Edward Island" />
+            <GoabDropdownItem value="QC" label="Quebec" />
+            <GoabDropdownItem value="SK" label="Saskatchewan" />
+            <GoabDropdownItem value="NT" label="Northwest Territories" />
+            <GoabDropdownItem value="NU" label="Nunavut" />
+            <GoabDropdownItem value="YT" label="Yukon" />
+          </GoabDropdown>
+        </GoabFormItem>
+        <GoabFormItem label="Postal code" mt="xl">
+          <GoabInput onChange={() => {}} name="postal-code" width={"105px"} />
+        </GoabFormItem>
+        <GoabButton type="submit" mt="2xl">
           Save and continue
-        </GoAButton>
+        </GoabButton>
       </Sandbox>
 
       <div className="component-example-header">
@@ -471,7 +474,8 @@ export default function QuestionPageExamples() {
         />
 
         {/*Angular Code Snippet - need for leadingContent slot*/}
-        <CodeSnippet
+
+        {version === "old" && <CodeSnippet
           lang="typescript"
           tags="angular"
           allowCopy={true}
@@ -500,10 +504,41 @@ export default function QuestionPageExamples() {
               Save and continue
             </goa-button>
           `}
-        />
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            <a href="#" class="back-link">
+              Back
+            </a>
+            <h3 class="section-title text-secondary">
+              Step 1 of 5
+            </h3>
+            <h2>
+              Personal information
+            </h2>
+            <goab-form-item label="What is your name?" mt="xl">
+              <goab-input (onChange)="onChange($event)" name="name" ariaLabel="what is your name?" width="50ch"></goab-input>
+            </goab-form-item>
+            <goab-form-item label="What is your phone number?" mt="xl">
+              <goab-input (onChange)="onChange($event)" name="phone-number" ariaLabel="what is your phone number?">
+                <div slot="leadingContent">+1</div>
+              </goab-input>
+            </goab-form-item>
+            <goab-form-item label="What is your home postal code?" mt="xl">
+              <goab-input (onChange)="onChange($event)" name="postal-code" width="14ch" ariaLabel="what is your home postal code"></goab-input>
+            </goab-form-item>
+            <goab-button type="submit" mt="2xl">
+              Save and continue
+            </goab-button>
+          `}
+        />}
 
         {/*React Code Snippet - need for leadingContent slot*/}
-        <CodeSnippet
+        {version === "old" && <CodeSnippet
           lang="typescript"
           tags="react"
           allowCopy={true}
@@ -535,7 +570,41 @@ export default function QuestionPageExamples() {
               Save and continue
             </GoAButton>
           `}
-        />
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            <a href="#" className="back-link">
+              Back
+            </a>
+            <h3 className="section-title text-secondary">Step 1 of 5</h3>
+            <h2>Personal information</h2>
+            <GoabFormItem label="What is your name?" mt="xl">
+              <GoabInput onChange={() => {}} name="name" ariaLabel="what is your name?" width="50ch" />
+            </GoabFormItem>
+            <GoabFormItem label="What is your phone number?" mt="xl">
+              <GoabInput
+                onChange={() => {}}
+                name="phone-number"
+                ariaLabel="what is your phone number?"
+                leadingContent="+1"
+              />
+            </GoabFormItem>
+            <GoabFormItem label="What is your home postal code?" mt="xl">
+              <GoabInput
+              onChange={() => {}}
+              name="postal-code"
+              width="14ch"
+              ariaLabel="what is your home postal code"></GoabInput>
+            </GoabFormItem>
+            <GoabButton type="submit" mt="2xl">
+              Save and continue
+            </GoabButton>
+          `}
+        />}
 
         <a href="#" className="back-link">
           Back
@@ -543,27 +612,27 @@ export default function QuestionPageExamples() {
         <h3 className="section-title text-secondary">Step 1 of 5</h3>
         <h2>Personal information</h2>
 
-        <GoAFormItem label="What is your name?" mt="xl">
-          <GoAInput onChange={() => {}} name="name" ariaLabel="what is your name?" width="50ch" />
-        </GoAFormItem>
-        <GoAFormItem label="What is your phone number?" mt="xl">
-          <GoAInput
+        <GoabFormItem label="What is your name?" mt="xl">
+          <GoabInput onChange={() => {}} name="name" ariaLabel="what is your name?" width="50ch" />
+        </GoabFormItem>
+        <GoabFormItem label="What is your phone number?" mt="xl">
+          <GoabInput
             onChange={() => {}}
             name="phone-number"
             ariaLabel="what is your phone number?"
             leadingContent="+1"
           />
-        </GoAFormItem>
-        <GoAFormItem label="What is your home postal code?" mt="xl">
-          <GoAInput
+        </GoabFormItem>
+        <GoabFormItem label="What is your home postal code?" mt="xl">
+          <GoabInput
             onChange={() => {}}
             name="postal-code"
             width="14ch"
-            ariaLabel="what is your home postal code"></GoAInput>
-        </GoAFormItem>
-        <GoAButton type="submit" mt="2xl">
+            ariaLabel="what is your home postal code"></GoabInput>
+        </GoabFormItem>
+        <GoabButton type="submit" mt="2xl">
           Save and continue
-        </GoAButton>
+        </GoabButton>
       </Sandbox>
     </div>
   );
diff --git a/src/examples/radio/RadioExamples.tsx b/src/examples/radio/RadioExamples.tsx
index 8cab85aea..c9fa0b997 100644
--- a/src/examples/radio/RadioExamples.tsx
+++ b/src/examples/radio/RadioExamples.tsx
@@ -1,115 +1,17 @@
-import { GoARadioGroup, GoARadioItem, GoAFormItem } from "@abgov/react-components";
-import { Sandbox } from "@components/sandbox";
-import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
-
-const noop = () => { };
+import { RadioSlottedDescriptionExample } from "@examples/radio/RadioSlottedDescriptionExample.tsx";
+import { RadioMaxWidthExample } from "@examples/radio/RadioMaxWidthExample.tsx";
 
 export default function RadioExamples () {
+
   return (
-    <>      
-      <h2 id="component-examples" className="hidden" aria-hidden="true">Examples</h2>
+    <>
+      <h2 id="component-examples" className="hidden" aria-hidden="true">
+        Examples
+      </h2>
       <h3 id="component-example-use-tags-in-description">Use tags in the description</h3>
-      <Sandbox fullWidth skipRender>
-        {/*Angular*/}
-        <CodeSnippet
-        lang="typescript"
-        tags="angular"
-        allowCopy={true}
-        code={`
-              <goa-form-item label="Select one option">
-              <goa-radio-group name="selectOne" value="1" (_change)="onChange($event)">
-                <goa-radio-item value="1" label="Option one">
-                  <span slot="description">Help text with a <a href="#">link</a>.</span>
-                </goa-radio-item>
-                <goa-radio-item value="2" label="Option two" />
-                <goa-radio-item value="3" label="Option three" />
-              </goa-radio-group>
-            </goa-form-item>     
-            `}
-        />
-        {/*React*/}
-        <CodeSnippet
-        lang="typescript"
-        tags="react"
-        allowCopy={true}
-        code={`
-            <GoAFormItem label="Select one option">
-              <GoARadioGroup name="selectOne" value="1" onChange={onChange}>
-                <GoARadioItem
-                    value="1"
-                    label="Option one"
-                    description={<span>Help text with a <a href="#">link</a>.</span>}
-                    />
-                <GoARadioItem value="2" label="Option two" />
-                <GoARadioItem value="3" label="Option three" />
-              </GoARadioGroup>
-            </GoAFormItem> 
-            `}
-        />
-        <GoAFormItem label="Select one option">
-          <GoARadioGroup name="selectOne" value="1" onChange={noop}>
-            <GoARadioItem
-                value="1"
-                label="Option one"
-                description={<span>Help text with a <a href="#">link</a>.</span>}
-                />
-            <GoARadioItem value="2" label="Option two" />
-            <GoARadioItem value="3" label="Option three" />
-          </GoARadioGroup>
-        </GoAFormItem>        
-      </Sandbox>
+      <RadioSlottedDescriptionExample/>
       <h3 id="component-example-max-width">Radio item with max width</h3>
-      <Sandbox fullWidth skipRender>
-         {/*Angular*/}
-         <CodeSnippet
-        lang="typescript"
-        tags="angular"
-        allowCopy={true}
-        code={`
-              <goa-form-item label="Select one option">
-              <goa-radio-group name="selectOne" value="1" (_change)="onChange($event)">
-                <goa-radio-item
-                  value="1"
-                  label="Option one which has a very long label with lots of text"
-                  maxwidth="300px"
-                />
-                <goa-radio-item value="2" label="Option two" />
-                <goa-radio-item value="3" label="Option three" />
-              </goa-radio-group>
-            </goa-form-item>     
-            `}
-        />
-        {/*React*/}
-        <CodeSnippet
-        lang="typescript"
-        tags="react"
-        allowCopy={true}
-        code={`
-            <GoAFormItem label="Select one option">
-              <GoARadioGroup name="selectOne" value="1" onChange={onChange}>
-                <GoARadioItem
-                    value="1"
-                    label="Option one which has a very long label with lots of text"
-                    maxWidth="300px"
-                    />
-                <GoARadioItem value="2" label="Option two" />
-                <GoARadioItem value="3" label="Option three" />
-              </GoARadioGroup>
-            </GoAFormItem> 
-            `}
-        />
-        <GoAFormItem label="Select one option">
-          <GoARadioGroup name="selectOne" value="1" onChange={noop}>
-            <GoARadioItem
-                value="1"
-                label="Option one which has a very long label with lots of text"
-                maxWidth="300px"
-                />
-            <GoARadioItem value="2" label="Option two" />
-            <GoARadioItem value="3" label="Option three" />
-          </GoARadioGroup>
-        </GoAFormItem>        
-      </Sandbox>
+      <RadioMaxWidthExample/>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/examples/radio/RadioMaxWidthExample.tsx b/src/examples/radio/RadioMaxWidthExample.tsx
new file mode 100644
index 000000000..fe9041fea
--- /dev/null
+++ b/src/examples/radio/RadioMaxWidthExample.tsx
@@ -0,0 +1,62 @@
+import { Sandbox } from "@components/sandbox";
+import { GoabFormItem, GoabRadioGroup, GoabRadioItem } from "@abgov/react-components";
+import { useContext, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+
+export const RadioMaxWidthExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const [selectOne, setSelectOne] = useState<string>("1");
+  return (
+    <Sandbox fullWidth flags={["reactive"]} allow={["form"]} skipRenderOnly={"react"}>
+      {/*We skipRenderOnly React because it is quite complex to remove value (2 els have value: radio-item and radio-group which radio-group is the one should remove value*/}
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+             <GoAFormItem label="Select one option">
+              <GoARadioGroup name="selectOne" value={value} onChange={(_, value) => setValue(value)}>
+              <GoARadioItem value="1" label="Option one which has a very long label with lots of text" maxWidth="300px"/>
+              <GoARadioItem value="2" label="Option two" />
+              <GoARadioItem value="3" label="Option three" />
+             </GoARadioGroup>
+            </GoAFormItem>
+          `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+              <GoabFormItem label="Select one option">
+                <GoabRadioGroup name="selectOne" value={value} onChange={(e: GoabRadioGroupOnChangeDetail) => setValue(e.value)}>
+                  <GoabRadioItem value="1" label="Option one which has a very long label with lots of text" maxWidth="300px"></GoabRadioItem>
+                  <GoabRadioItem value="2" label="Option two"></GoabRadioItem>
+                  <GoabRadioItem value="3" label="Option three"></GoabRadioItem>
+                </GoabRadioGroup>
+              </GoabFormItem>
+          `}
+        />
+      )}
+
+      <form>
+        <GoabFormItem label="Select one option">
+          <GoabRadioGroup name="selectOne" value={selectOne} onChange={(e) => setSelectOne(e.value)}>
+            <GoabRadioItem
+              value="1"
+              label="Option one which has a very long label with lots of text"
+              maxWidth="300px"
+            />
+            <GoabRadioItem value="2" label="Option two" />
+            <GoabRadioItem value="3" label="Option three" />
+          </GoabRadioGroup>
+        </GoabFormItem>
+      </form>
+    </Sandbox>
+  );
+};
diff --git a/src/examples/radio/RadioSlottedDescriptionExample.tsx b/src/examples/radio/RadioSlottedDescriptionExample.tsx
new file mode 100644
index 000000000..eb03ab42e
--- /dev/null
+++ b/src/examples/radio/RadioSlottedDescriptionExample.tsx
@@ -0,0 +1,131 @@
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabFormItem, GoabRadioGroup, GoabRadioItem } from "@abgov/react-components";
+import { Sandbox } from "@components/sandbox";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const RadioSlottedDescriptionExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const noop = () => {}
+  return (
+    <Sandbox fullWidth skipRender>
+      {/* =========== Angular =============== */}
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+              <goa-form-item label="Select one option">
+              <goa-radio-group name="selectOne" value="1" (_change)="onChange($event)">
+                <goa-radio-item value="1" label="Option one">
+                  <span slot="description">Help text with a <a href="#">link</a>.</span>
+                </goa-radio-item>
+                <goa-radio-item value="2" label="Option two" />
+                <goa-radio-item value="3" label="Option three" />
+              </goa-radio-group>
+            </goa-form-item>     
+            `}
+        />
+      )}
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+              export class ExampleComponent {
+                form!: FormGroup;
+
+                public constructor(private fb: FormBuilder) {
+                  this.form = this.fb.group({
+                    selectOne: ["1"]
+                  });
+                }
+              }
+            `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+              <goab-form-item label="Select one option" [formGroup]="form">
+                <goab-radio-group name="selectOne"  formControlName="selectOne">
+                  <goab-radio-item value="1" label="Option one" [description]="optionOneDescription">
+                    <ng-template #optionOneDescription>
+                      Help text with a <a href="#">link</a>.
+                    </ng-template>
+                  </goab-radio-item>
+                  <goab-radio-item value="2" label="Option two"></goab-radio-item>
+                  <goab-radio-item value="3" label="Option three"></goab-radio-item>
+                </goab-radio-group>
+              </goab-form-item>
+            `}
+        />
+      )}
+
+      {/* ============== React ================== */}
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            <GoAFormItem label="Select one option">
+              <GoARadioGroup name="selectOne" value="1" onChange={onChange}>
+                <GoARadioItem
+                    value="1"
+                    label="Option one"
+                    description={<span>Help text with a <a href="#">link</a>.</span>}
+                    />
+                <GoARadioItem value="2" label="Option two" />
+                <GoARadioItem value="3" label="Option three" />
+              </GoARadioGroup>
+            </GoAFormItem> 
+            `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            <GoabFormItem label="Select one option">
+              <GoabRadioGroup name="selectOne" value="1" onChange={onChange}>
+                <GoabRadioItem
+                    value="1"
+                    label="Option one"
+                    description={<span>Help text with a <a href="#">link</a>.</span>}
+                    />
+                <GoabRadioItem value="2" label="Option two" />
+                <GoabRadioItem value="3" label="Option three" />
+              </GoabRadioGroup>
+            </GoabFormItem> 
+            `}
+        />
+      )}
+
+      <GoabFormItem label="Select one option">
+        <GoabRadioGroup name="selectOne" value="1" onChange={noop}>
+          <GoabRadioItem
+            value="1"
+            label="Option one"
+            description={
+              <span>
+                  Help text with a <a href="#">link</a>.
+                </span>
+            }
+          />
+          <GoabRadioItem value="2" label="Option two" />
+          <GoabRadioItem value="3" label="Option three" />
+        </GoabRadioGroup>
+      </GoabFormItem>
+    </Sandbox>
+  )
+}
diff --git a/src/examples/result-page/ResultPageExamples.tsx b/src/examples/result-page/ResultPageExamples.tsx
index ec1f8e575..572249381 100644
--- a/src/examples/result-page/ResultPageExamples.tsx
+++ b/src/examples/result-page/ResultPageExamples.tsx
@@ -1,13 +1,12 @@
 import { Sandbox } from "@components/sandbox";
-import {
-  GoABlock,
-  GoACallout,
-} from "@abgov/react-components";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 import "./result-page-example.css";
+import { GoabBlock, GoabCallout } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
 
 export function ResultPageExamples() {
-
+  const {version} = useContext(LanguageVersionContext);
   return (
     <div className="result-page-example">
       <div className="component-example-header">
@@ -32,7 +31,8 @@ export function ResultPageExamples() {
           `}
         />
 
-        <CodeSnippet
+        {/*Angular code*/}
+        {version === "old" && <CodeSnippet
           lang="typescript"
           tags="angular"
           allowCopy={true}
@@ -57,10 +57,38 @@ export function ResultPageExamples() {
               <p><span>Phone:&nbsp;</span><a href="tel:780 123 4567">780 123 4567</a></p>
             </goa-block>
         `}
-        />
+        />}
 
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            <goab-block direction="column" gap="none">
+              <div class="page-header">
+                <h2>
+                You have completed the application
+                </h2>
+                <goab-callout type="success" heading="Application submitted" mt="xl" mb="2xl">
+                  <p>You will receive a copy of the confirmation to the email name&#64;email.com</p>
+                  <p><span>Your reference number is:&nbsp;</span><strong>1234ABC</strong></p>
+                </goab-callout>
+                  <h3>What happens next</h3>
+              </div>
+              <p>We’ve sent your application to service name. They will contact you to confirm your registration.</p>
+              <p>You can now close this window.</p>
+              <p><span>What did you think of this service?&nbsp;</span><a href="#">Give feedback</a></p>
+              <h3>If you have questions about your application</h3>
+              <p>Contact the [ministry area].</p>
+              <p><span>Email:&nbsp;</span><a href="mailto:information&#64;gov.ab.ca">information&#64;gov.ab.ca</a></p>
+              <p><span>Phone:&nbsp;</span><a href="tel:780 123 4567">780 123 4567</a></p>
+            </goab-block>
+        `}
+        />}
 
-        <CodeSnippet
+
+        {/*React code*/}
+        {version === "old" && <CodeSnippet
           lang="typescript"
           tags="react"
           allowCopy={true}
@@ -83,17 +111,42 @@ export function ResultPageExamples() {
               <p><span>Phone:&nbsp;</span><a href="tel:780 123 4567">780 123 4567</a></p>
             </GoABlock>
           `}
-        />
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            <GoabBlock direction="column" gap="none">
+              <div className="page-header">
+                <h2>You have completed the application</h2>
+                <GoabCallout type="success" heading="Application submitted" mt="xl" mb="2xl">
+                  <p>You will receive a copy of the confirmation to the email name@email.com</p>
+                  <p><span>Your reference number is:&nbsp;</span><strong>1234ABC</strong></p>
+                </GoabCallout>
+                <h3>What happens next</h3>
+              </div>
+              <p>We’ve sent your application to service name. They will contact you to confirm your registration.</p>
+              <p>You can now close this window.</p>
+              <p><span>What did you think of this service?&nbsp;</span><a href="#">Give feedback</a></p>
+              <h3>If you have questions about your application</h3>
+              <p>Contact the [ministry area].</p>
+              <p><span>Email:&nbsp;</span><a href="mailto:information@gov.ab.ca">information@gov.ab.ca</a></p>
+              <p><span>Phone:&nbsp;</span><a href="tel:780 123 4567">780 123 4567</a></p>
+            </GoabBlock>
+          `}
+        />}
 
-        <GoABlock direction="column" gap="none">
+        <GoabBlock direction="column" gap="none">
           <div className="page-header">
             <h2>You have completed the application</h2>
-            <GoACallout type="success" heading="Application submitted" mt="xl" mb="2xl">
+            <GoabCallout type="success" heading="Application submitted" mt="xl" mb="2xl">
               <p>You will receive a copy of the confirmation to the email name@email.com</p>
               <p>
                 <span>Your reference number is: </span><strong>1234ABC</strong>
               </p>
-            </GoACallout>
+            </GoabCallout>
             <h3>What happens next</h3>
           </div>
           <p>
@@ -112,7 +165,7 @@ export function ResultPageExamples() {
           <p>
             <span>Phone: </span><a href="tel:780 123 4567">780 123 4567</a>
           </p>
-        </GoABlock>
+        </GoabBlock>
       </Sandbox>
     </div>
   );
diff --git a/src/examples/review-page/ReviewPageExamples.tsx b/src/examples/review-page/ReviewPageExamples.tsx
index 4dd0032f3..dd5b5c827 100644
--- a/src/examples/review-page/ReviewPageExamples.tsx
+++ b/src/examples/review-page/ReviewPageExamples.tsx
@@ -1,11 +1,7 @@
 import { Sandbox } from "@components/sandbox";
-import {
-  GoAButton,
-  GoAButtonGroup,
-  GoATable
-} from "@abgov/react-components";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 import "./review-page-example.css";
+import { GoabButton, GoabButtonGroup, GoabTable } from "@abgov/react-components";
 
 export function ReviewPageExamples() {
 
@@ -38,7 +34,7 @@ export function ReviewPageExamples() {
         />
         <h2 className="section-title">Review your answers</h2>
         <h3>Your situation</h3>
-        <GoATable mt="l">
+        <GoabTable mt="l">
           <tbody>
             <tr>
               <td>
@@ -46,7 +42,7 @@ export function ReviewPageExamples() {
               </td>
               <td>Other</td>
               <td>
-                <GoAButton type="tertiary">Change</GoAButton>
+                <GoabButton type="tertiary">Change</GoabButton>
               </td>
             </tr>
             <tr>
@@ -55,7 +51,7 @@ export function ReviewPageExamples() {
               </td>
               <td>Manager</td>
               <td>
-                <GoAButton type="tertiary">Change</GoAButton>
+                <GoabButton type="tertiary">Change</GoabButton>
               </td>
             </tr>
             <tr>
@@ -67,7 +63,7 @@ export function ReviewPageExamples() {
               </td>
               <td>No</td>
               <td>
-                <GoAButton type="tertiary">Change</GoAButton>
+                <GoabButton type="tertiary">Change</GoabButton>
               </td>
             </tr>
             <tr>
@@ -76,7 +72,7 @@ export function ReviewPageExamples() {
               </td>
               <td>No</td>
               <td>
-                <GoAButton type="tertiary">Change</GoAButton>
+                <GoabButton type="tertiary">Change</GoabButton>
               </td>
             </tr>
             <tr>
@@ -85,7 +81,7 @@ export function ReviewPageExamples() {
               </td>
               <td>Married</td>
               <td>
-                <GoAButton type="tertiary">Change</GoAButton>
+                <GoabButton type="tertiary">Change</GoabButton>
               </td>
             </tr>
             <tr>
@@ -94,7 +90,7 @@ export function ReviewPageExamples() {
               </td>
               <td>No</td>
               <td>
-                <GoAButton type="tertiary">Change</GoAButton>
+                <GoabButton type="tertiary">Change</GoabButton>
               </td>
             </tr>
             <tr>
@@ -103,15 +99,15 @@ export function ReviewPageExamples() {
               </td>
               <td>Yes</td>
               <td>
-                <GoAButton type="tertiary">Change</GoAButton>
+                <GoabButton type="tertiary">Change</GoabButton>
               </td>
             </tr>
           </tbody>
-        </GoATable>
-        <GoAButtonGroup alignment="start" mt="2xl">
-          <GoAButton type="primary">Confirm and continue</GoAButton>
-          <GoAButton type="tertiary">Back to application overview</GoAButton>
-        </GoAButtonGroup>
+        </GoabTable>
+        <GoabButtonGroup alignment="start" mt="2xl">
+          <GoabButton type="primary">Confirm and continue</GoabButton>
+          <GoabButton type="tertiary">Back to application overview</GoabButton>
+        </GoabButtonGroup>
       </Sandbox>
     </div>
   );
diff --git a/src/examples/start-page/StartPageExamples.tsx b/src/examples/start-page/StartPageExamples.tsx
index ef46c9a06..681524ed6 100644
--- a/src/examples/start-page/StartPageExamples.tsx
+++ b/src/examples/start-page/StartPageExamples.tsx
@@ -1,10 +1,14 @@
 import { Sandbox } from "@components/sandbox";
 import {
-  GoAButton,
+  GoabButton,
 } from "@abgov/react-components";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 import "./start-page-example.css";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
 export function StartPageExamples() {
+  const {version} = useContext(LanguageVersionContext);
 
   return (
     <div className="start-page-example">
@@ -35,7 +39,9 @@ export function StartPageExamples() {
                 `}
         />
 
-        <CodeSnippet
+        {/*Angular code*/}
+
+        {version === "old" && <CodeSnippet
           lang="typescript"
           tags="angular"
           allowCopy={true}
@@ -68,10 +74,46 @@ export function StartPageExamples() {
             <h2>Support</h2>
             <p><span>For assistance, email us at &nbsp;</span><a href="mailto:help@gov.ab.ca">help&#64;gov.ab.ca</a></p>
         `}
-        />
+        />}
 
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            <h1 class="page-title">
+              Name of service
+            </h1>
+            <h3>
+              A short overview of the service. This is a couple sentences that helps the user understand what the service is.
+            </h3>
+            <p>
+              Use this service to apply for [service]. You can use this service to:
+            </p>
+            <ul>
+              <li>see of you or a family member is eligible for [service]</li>
+              <li>create and submit an application for [service]</li>
+              <li>continue an application for [service] that you already started</li>
+            </ul>
+            <h2>Before you begin</h2>
+            <p>The application form should take about 20 minutes to complete.</p>
+            <p><strong>In order to complete the application you will need:</strong></p>
+            <ul>
+              <li>government issued ID for the person applying</li>
+            </ul>
+            <goab-button mt="m" mb="xl" type="start" (onClick)="onClick()">
+              Get started
+            </goab-button>
+            <h2>Other information about the service</h2>
+            <p>This section contains supplementary details about the service, including descriptions of less common scenarios, exceptions, and additional resources available. It provides context and additional insights that may be relevant to your specific circumstances or interests, helping you understand the full scope and utility of the service offered.</p>
+            <h2>Support</h2>
+            <p><span>For assistance, email us at &nbsp;</span><a href="mailto:help@gov.ab.ca">help&#64;gov.ab.ca</a></p>
+        `}
+        />}
 
-        <CodeSnippet
+        {/*React code*/}
+
+        {version === "old" && <CodeSnippet
           lang="typescript"
           tags="react"
           allowCopy={true}
@@ -106,8 +148,44 @@ export function StartPageExamples() {
             <h2>Support</h2>
             <p><span>For assistance, email us at &nbsp;</span><a href="mailto:help@gov.ab.ca">help@gov.ab.ca</a></p>
           `}
-        />
+        />}
 
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            <h1 className="page-title">
+              Name of service
+            </h1>
+            <h3>
+              A short overview of the service. This is a couple sentences that helps the user understand what the service is.
+            </h3>
+            <p>Use this service to apply for [service]. You can use this service to:</p>
+            <ul>
+              <li>see of you or a family member is eligible for [service]</li>
+              <li>create and submit an application for [service]</li>
+              <li>continue an application for [service] that you already started</li>
+            </ul>
+            <h2>Before you begin</h2>
+            <p>The application form should take about 20 minutes to complete.</p>
+            <p><strong>In order to complete the application you will need:</strong></p>
+            <ul>
+              <li>government issued ID for the person applying</li>
+            </ul>
+            <GoabButton mt="m" mb="xl" type="start" onClick={onClick}>
+              Get started
+            </GoabButton>
+            <h2>
+              Other information about the service
+            </h2>
+            <p>
+              This section contains supplementary details about the service, including descriptions of less common scenarios, exceptions, and additional resources available. It provides context and additional insights that may be relevant to your specific circumstances or interests, helping you understand the full scope and utility of the service offered.
+            </p>
+            <h2>Support</h2>
+            <p><span>For assistance, email us at &nbsp;</span><a href="mailto:help@gov.ab.ca">help@gov.ab.ca</a></p>
+          `}
+        />}
 
         <h1 className="page-title">Name of service</h1>
         <h3>
@@ -129,9 +207,9 @@ export function StartPageExamples() {
         <ul>
           <li>government issued ID for the person applying</li>
         </ul>
-        <GoAButton mt="m" mb="xl" type="start" onClick={() => {}}>
+        <GoabButton mt="m" mb="xl" type="start" onClick={() => {}}>
           Get started
-        </GoAButton>
+        </GoabButton>
 
         <h2>Other information about the service</h2>
         <p>
diff --git a/src/examples/tabs/TabsDifferentViewsTableExample.tsx b/src/examples/tabs/TabsDifferentViewsTableExample.tsx
new file mode 100644
index 000000000..c12f15530
--- /dev/null
+++ b/src/examples/tabs/TabsDifferentViewsTableExample.tsx
@@ -0,0 +1,499 @@
+import { GoabBadge, GoabButton, GoabContainer, GoabTab, GoabTable, GoabTabs } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+
+export const TabsDifferentViewsTableExample = () => {
+  const review = [0, 1, 2, 3];
+  const complete = [0, 1];
+  const {version} = useContext(LanguageVersionContext);
+  
+  return (
+    <>
+      <GoabContainer mt="m" mb="none">
+        <div style={{ padding: "40px" }}>
+            <GoabTabs>
+              <GoabTab heading="All">
+                <GoabTable width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th className="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {review.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoabBadge type="important" content="Review pending" />
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoabButton type="tertiary">Action</GoabButton>
+                        </td>
+                      </tr>
+                    ))}
+                    {complete.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoabBadge type="information" content="Complete"></GoabBadge>
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoabButton type="tertiary">Action</GoabButton>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </GoabTable>
+              </GoabTab>
+              <GoabTab heading={<>Review pending<GoabBadge type="important" content="4"></GoabBadge></>}>
+                <GoabTable width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th className="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {review.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoabBadge type="important" content="Review pending" />
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoabButton type="tertiary">Action</GoabButton>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </GoabTable>
+              </GoabTab>
+              <GoabTab heading={<>Complete<GoabBadge type="information" content="338"></GoabBadge></>}>
+                <GoabTable width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th className="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {complete.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoabBadge type="information" content="Complete" />
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoabButton type="tertiary">Action</GoabButton>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </GoabTable>
+              </GoabTab>
+            </GoabTabs>
+        </div>
+      </GoabContainer>
+
+      {/*Angular code*/}
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            <goa-tabs>
+              <goa-tab>
+                <div slot="heading">All</div>
+                <goa-table width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th class="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let i of [0,1,2,3]">
+                      <td>
+                        <goa-badge type="important" content="Review pending" />
+                      </td>
+                      <td>Lorem ipsum</td>
+                      <td class="goa-table-number-column">1234567890</td>
+                      <td>
+                        <goa-button type="tertiary">Action</goa-button>
+                      </td>
+                    </tr>
+                    <tr *ngFor="let i of [0,1]">
+                      <td>
+                        <goa-badge type="information" content="Complete" />
+                      </td>
+                      <td>Lorem Ipsum</td>
+                      <td class="goa-table-number-column">1234567890</td>
+                      <td>
+                        <goa-button type="tertiary">Action</goa-button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </goa-table>
+              </goa-tab>
+              <goa-tab>
+                <div slot="heading">Review pending<goa-badge type="important" content="4"></goa-badge></div>
+                <goa-table width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th class="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let i of [0,1,2,3]">
+                      <td>
+                        <goa-badge type="important" content="Review pending" />
+                      </td>
+                      <td>Lorem ipsum</td>
+                      <td class="goa-table-number-column">1234567890</td>
+                      <td>
+                        <goa-button type="tertiary">Action</goa-button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </goa-table>
+              </goa-tab>
+              <goa-tab>
+                <div slot="heading">Complete<goa-badge type="information" content="338"></goa-badge></div>
+                <goa-table width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th class="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let i of [0,1]">
+                      <td>
+                        <goa-badge type="information" content="Complete" />
+                      </td>
+                      <td>Lorem Ipsum</td>
+                      <td class="goa-table-number-column">1234567890</td>
+                      <td>
+                        <goa-button type="tertiary">Action</goa-button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </goa-table>
+              </goa-tab>
+            </goa-tabs>
+          `}
+        />}
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+           <goab-tabs>
+              <goab-tab heading="All">
+                <goab-table width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th class="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let i of [0,1,2,3]">
+                      <td><goab-badge type="important" content="Review pending" /></td>
+                      <td>Lorem ipsum</td>
+                      <td class="goa-table-number-column">1234567890</td>
+                      <td><goab-button type="tertiary">Action</goab-button></td>
+                    </tr>
+                    <tr *ngFor="let i of [0,1]">
+                      <td><goab-badge type="information" content="Complete" /></td>
+                      <td>Lorem Ipsum</td>
+                      <td class="goa-table-number-column">1234567890</td>
+                      <td><goab-button type="tertiary">Action</goab-button></td>
+                    </tr>
+                  </tbody>
+                </goab-table>
+          </goab-tab>
+          <goab-tab [heading]="reviewPending">
+            <ng-template #reviewPending>Review pending<goab-badge type="important" content="4"></goab-badge></ng-template>
+            <goab-table width="100%">
+              <thead>
+                <tr>
+                  <th>Status</th>
+                  <th>Text</th>
+                  <th class="goa-table-number-header">Number</th>
+                  <th>Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let i of [0,1,2,3]">
+                  <td>
+                    <goab-badge type="important" content="Review pending" />
+                  </td>
+                  <td>Lorem ipsum</td>
+                  <td class="goa-table-number-column">1234567890</td>
+                  <td><goab-button type="tertiary">Action</goab-button></td>
+                </tr>
+              </tbody>
+            </goab-table>
+          </goab-tab>
+          <goab-tab [heading]="complete">
+            <ng-template #complete>Complete<goab-badge type="information" content="338"></goab-badge></ng-template>
+            <goab-table width="100%">
+              <thead>
+              <tr>
+                <th>Status</th>
+                <th>Text</th>
+                <th class="goa-table-number-header">Number</th>
+                <th>Action</th>
+              </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let i of [0,1]">
+                  <td><goab-badge type="information" content="Complete" /></td>
+                  <td>Lorem Ipsum</td>
+                  <td class="goa-table-number-column">1234567890</td>
+                  <td><goab-button type="tertiary">Action</goab-button></td>
+                </tr>
+              </tbody>
+            </goab-table>
+          </goab-tab>
+        </goab-tabs>
+          `}
+        />}
+
+        {/*React code*/}
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            const review = [0, 1, 2, 3];
+            const complete = [0, 1];
+            `}
+        />
+
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            <GoATabs>
+              <GoATab heading="All">
+                <GoATable width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th className="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {review.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoABadge type="important" content="Review pending" />
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoAButton type="tertiary">Action</GoAButton>
+                        </td>
+                      </tr>
+                    ))}
+                    {complete.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoABadge type="information" content="Complete" />
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoAButton type="tertiary">Action</GoAButton>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </GoATable>
+              </GoATab>
+              <GoATab heading={<>Review pending<GoABadge type="important" content="4"></GoABadge></>}>
+                <GoATable width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th className="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {review.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoABadge type="important" content="Review pending" />
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoAButton type="tertiary">Action</GoAButton>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </GoATable>
+              </GoATab>
+              <GoATab heading={<>Complete<GoABadge type="information" content="338"></GoABadge></>}>
+                <GoATable width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th className="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {complete.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoABadge type="information" content="Complete" />
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoAButton type="tertiary">Action</GoAButton>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </GoATable>
+              </GoATab>
+            </GoATabs>
+            `}
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+           <GoabTabs>
+            <GoabTab heading="All">
+                <GoabTable width="100%">
+                    <thead>
+                    <tr>
+                        <th>Status</th>
+                        <th>Text</th>
+                        <th className="goa-table-number-header">Number</th>
+                        <th>Action</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {review.map((i) => (
+                        <tr key={i}>
+                            <td>
+                                <GoabBadge type="important" content="Review pending" />
+                            </td>
+                            <td>Lorem Ipsum</td>
+                            <td className="goa-table-number-column">1234567890</td>
+                            <td>
+                                <GoabButton type="tertiary">Action</GoabButton>
+                            </td>
+                        </tr>
+                    ))}
+                    {complete.map((i) => (
+                        <tr key={i}>
+                            <td>
+                                <GoabBadge type="information" content="Complete" />
+                            </td>
+                            <td>Lorem Ipsum</td>
+                            <td className="goa-table-number-column">1234567890</td>
+                            <td>
+                                <GoabButton type="tertiary">Action</GoabButton>
+                            </td>
+                        </tr>
+                    ))}
+                    </tbody>
+                </GoabTable>
+            </GoabTab>
+            <GoabTab heading={<>Review pending<GoabBadge type="important" content="4"></GoabBadge></>}>
+                <GoabTable width="100%">
+                    <thead>
+                    <tr>
+                        <th>Status</th>
+                        <th>Text</th>
+                        <th className="goa-table-number-header">Number</th>
+                        <th>Action</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {review.map((i) => (
+                        <tr key={i}>
+                            <td>
+                                <GoabBadge type="important" content="Review pending" />
+                            </td>
+                            <td>Lorem Ipsum</td>
+                            <td className="goa-table-number-column">1234567890</td>
+                            <td>
+                                <GoabButton type="tertiary">Action</GoabButton>
+                            </td>
+                        </tr>
+                    ))}
+                    </tbody>
+                </GoabTable>
+            </GoabTab>
+            <GoabTab heading={<>Complete<GoabBadge type="information" content="338"></GoabBadge></>}>
+                <GoabTable width="100%">
+                    <thead>
+                    <tr>
+                        <th>Status</th>
+                        <th>Text</th>
+                        <th className="goa-table-number-header">Number</th>
+                        <th>Action</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {complete.map((i) => (
+                        <tr key={i}>
+                            <td>
+                                <GoabBadge type="information" content="Complete" />
+                            </td>
+                            <td>Lorem Ipsum</td>
+                            <td className="goa-table-number-column">1234567890</td>
+                            <td>
+                                <GoabButton type="tertiary">Action</GoabButton>
+                            </td>
+                        </tr>
+                    ))}
+                    </tbody>
+                </GoabTable>
+            </GoabTab>
+        </GoabTabs>
+            `}
+        />}
+
+    </>
+
+)
+}
diff --git a/src/examples/tabs/TabsExamples.tsx b/src/examples/tabs/TabsExamples.tsx
new file mode 100644
index 000000000..2671a3864
--- /dev/null
+++ b/src/examples/tabs/TabsExamples.tsx
@@ -0,0 +1,19 @@
+import { TabsDifferentViewsTableExample } from "@examples/tabs/TabsDifferentViewsTableExample.tsx";
+import { TabsSetSpecificTabActiveExample } from "@examples/tabs/TabsSetSpecificTabActiveExample.tsx";
+
+export const TabsExamples = () => {
+  return (
+    <>
+      <h2 id="component-examples" className="hidden" aria-hidden="true">
+        Examples
+      </h2>
+      <h3 id="component-example-different-views-data-table">
+        Show different views of data in a table
+      </h3>
+      <TabsDifferentViewsTableExample />
+      <h3 id="component-example-set-specific-tab-active">Set a specific tab to be active</h3>
+      <TabsSetSpecificTabActiveExample/>
+    </>
+
+  )
+}
diff --git a/src/examples/tabs/TabsSetSpecificTabActiveExample.tsx b/src/examples/tabs/TabsSetSpecificTabActiveExample.tsx
new file mode 100644
index 000000000..4bfe8bbd2
--- /dev/null
+++ b/src/examples/tabs/TabsSetSpecificTabActiveExample.tsx
@@ -0,0 +1,510 @@
+import { GoabBadge, GoabButton, GoabContainer, GoabTab, GoabTable, GoabTabs } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+
+export const TabsSetSpecificTabActiveExample = () => {
+  const review = [0, 1, 2, 3];
+  const complete = [0, 1];
+  const {version} = useContext(LanguageVersionContext);
+
+  return (
+    <>
+      <GoabContainer mt="m" mb="none">
+        <div style={{ padding: "40px" }}>
+            <GoabTabs initialTab={2}>
+              <GoabTab heading="All">
+                <GoabTable width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th className="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {review.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoabBadge type="important" content="Review pending" />
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoabButton type="tertiary">Action</GoabButton>
+                        </td>
+                      </tr>
+                    ))}
+                    {complete.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoabBadge type="information" content="Complete" />
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoabButton type="tertiary">Action</GoabButton>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </GoabTable>
+              </GoabTab>
+              <GoabTab heading={<>Review pending<GoabBadge type="important" content="4"></GoabBadge></>}>
+                <GoabTable width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th className="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {review.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoabBadge type="important" content="Review pending" />
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoabButton type="tertiary">Action</GoabButton>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </GoabTable>
+              </GoabTab>
+              <GoabTab heading={<>Complete<GoabBadge type="information" content="338"></GoabBadge></>}>
+                <GoabTable width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th className="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {complete.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoabBadge type="information" content="Complete" />
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoabButton type="tertiary">Action</GoabButton>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </GoabTable>
+              </GoabTab>
+            </GoabTabs>
+        </div>
+      </GoabContainer>
+
+        {/*Angular code*/}
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            <goa-tabs initialTab={2}>
+              <goa-tab>
+                <div slot="heading">All</div>
+                <goa-table width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th class="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let i of [0,1,2,3]">
+                      <td>
+                        <goa-badge type="important" content="Review pending" />
+                      </td>
+                      <td>Lorem ipsum</td>
+                      <td class="goa-table-number-column">1234567890</td>
+                      <td>
+                        <goa-button type="tertiary">Action</goa-button>
+                      </td>
+                    </tr>
+                    <tr *ngFor="let i of [0,1]">
+                      <td>
+                        <goa-badge type="information" content="Complete" />
+                      </td>
+                      <td>Lorem Ipsum</td>
+                      <td class="goa-table-number-column">1234567890</td>
+                      <td>
+                        <goa-button type="tertiary">Action</goa-button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </goa-table>
+              </goa-tab>
+              <goa-tab>
+                <div slot="heading">Review pending<goa-badge type="important" content="4"></goa-badge></div>
+                <goa-table width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th class="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let i of [0,1,2,3]">
+                      <td>
+                        <goa-badge type="important" content="Review pending" />
+                      </td>
+                      <td>Lorem ipsum</td>
+                      <td class="goa-table-number-column">1234567890</td>
+                      <td>
+                        <goa-button type="tertiary">Action</goa-button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </goa-table>
+              </goa-tab>
+              <goa-tab>
+                <div slot="heading">Complete<goa-badge type="information" content="338"></goa-badge></div>
+                <goa-table width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th class="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let i of [0,1]">
+                      <td>
+                        <goa-badge type="information" content="Complete" />
+                      </td>
+                      <td>Lorem Ipsum</td>
+                      <td class="goa-table-number-column">1234567890</td>
+                      <td>
+                        <goa-button type="tertiary">Action</goa-button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </goa-table>
+              </goa-tab>
+            </goa-tabs>
+          `}
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            <goab-tabs [initialTab]="2">
+              <goab-tab heading="All">
+                <goab-table width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th class="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let i of [0,1,2,3]">
+                      <td>
+                        <goab-badge type="important" content="Review pending" />
+                      </td>
+                      <td>Lorem ipsum</td>
+                      <td class="goa-table-number-column">1234567890</td>
+                      <td>
+                        <goab-button type="tertiary">Action</goab-button>
+                      </td>
+                    </tr>
+                    <tr *ngFor="let i of [0,1]">
+                      <td>
+                        <goab-badge type="information" content="Complete" />
+                      </td>
+                      <td>Lorem Ipsum</td>
+                      <td class="goa-table-number-column">1234567890</td>
+                      <td>
+                        <goab-button type="tertiary">Action</goab-button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </goab-table>
+              </goab-tab>
+              <goab-tab [heading]="reviewPending">
+                <ng-template #reviewPending>Review pending<goab-badge type="important" content="4"></goab-badge></ng-template>
+                <goab-table width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th class="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let i of [0,1,2,3]">
+                      <td>
+                        <goab-badge type="important" content="Review pending" />
+                      </td>
+                      <td>Lorem ipsum</td>
+                      <td class="goa-table-number-column">1234567890</td>
+                      <td>
+                        <goab-button type="tertiary">Action</goab-button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </goab-table>
+              </goab-tab>
+              <goab-tab [heading]="complete">
+                <ng-template #complete>Complete<goab-badge type="information" content="338"></goab-badge></ng-template>
+                <goab-table width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th class="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let i of [0,1]">
+                      <td>
+                        <goab-badge type="information" content="Complete" />
+                      </td>
+                      <td>Lorem Ipsum</td>
+                      <td class="goa-table-number-column">1234567890</td>
+                      <td>
+                        <goab-button type="tertiary">Action</goab-button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </goab-table>
+              </goab-tab>
+            </goab-tabs>
+          `}
+        />}
+        {/*React code*/}
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            const review = [0, 1, 2, 3];
+            const complete = [0, 1];
+            `}
+        />
+
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            <GoATabs initialTab={2}>
+              <GoATab heading="All">
+                <GoATable width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th className="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {review.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoABadge type="important" content="Review pending" />
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoAButton type="tertiary">Action</GoAButton>
+                        </td>
+                      </tr>
+                    ))}
+                    {complete.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoABadge type="information" content="Complete" />
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoAButton type="tertiary">Action</GoAButton>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </GoATable>
+              </GoATab>
+              <GoATab heading={<>Review pending<GoABadge type="important" content="4"></GoABadge></>}>
+                <GoATable width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th className="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {review.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoABadge type="important" content="Review pending" />
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoAButton type="tertiary">Action</GoAButton>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </GoATable>
+              </GoATab>
+              <GoATab heading={<>Complete<GoABadge type="information" content="338"></GoABadge></>}>
+                <GoATable width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th className="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {complete.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoABadge type="information" content="Complete" />
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoAButton type="tertiary">Action</GoAButton>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </GoATable>
+              </GoATab>
+            </GoATabs>
+            `}
+        />}
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            <GoabTabs initialTab={2}>
+              <GoabTab heading="All">
+                <GoabTable width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th className="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {review.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoabBadge type="important" content="Review pending" />
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoabButton type="tertiary">Action</GoabButton>
+                        </td>
+                      </tr>
+                    ))}
+                    {complete.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoabBadge type="information" content="Complete" />
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoabButton type="tertiary">Action</GoabButton>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </GoabTable>
+              </GoabTab>
+              <GoabTab heading={<>Review pending<GoabBadge type="important" content="4"></GoabBadge></>}>
+                <GoabTable width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th className="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {review.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoabBadge type="important" content="Review pending" />
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoabButton type="tertiary">Action</GoabButton>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </GoabTable>
+              </GoabTab>
+              <GoabTab heading={<>Complete<GoabBadge type="information" content="338"></GoabBadge></>}>
+                <GoabTable width="100%">
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Text</th>
+                      <th className="goa-table-number-header">Number</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {complete.map((i) => (
+                      <tr key={i}>
+                        <td>
+                          <GoabBadge type="information" content="Complete" />
+                        </td>
+                        <td>Lorem Ipsum</td>
+                        <td className="goa-table-number-column">1234567890</td>
+                        <td>
+                          <GoabButton type="tertiary">Action</GoabButton>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </GoabTable>
+              </GoabTab>
+            </GoabTabs>
+            `}
+        />}
+    </>
+  )
+}
diff --git a/src/examples/task-list-page/TaskListPageExamples.tsx b/src/examples/task-list-page/TaskListPageExamples.tsx
index 0a5e2c77b..b0cc6b96a 100644
--- a/src/examples/task-list-page/TaskListPageExamples.tsx
+++ b/src/examples/task-list-page/TaskListPageExamples.tsx
@@ -1,5 +1,5 @@
 import { Sandbox } from "@components/sandbox";
-import { GoABadge, GoACallout, GoATable } from "@abgov/react-components";
+import { GoabBadge, GoabCallout, GoabTable } from "@abgov/react-components";
 import "./task-list-page-example.css";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 
@@ -32,42 +32,42 @@ export function TaskListPageExamples() {
         />
         <h2>Apply for a service</h2>
         <div className="warning">
-          <GoACallout
+          <GoabCallout
             type="important"
             size="medium"
             heading="Application incomplete"
             mb="2xl"
             mt="xl">
             You have completed 1 of 3 sections.
-          </GoACallout>
+          </GoabCallout>
         </div>
 
         <h3>1. Before you start</h3>
-        <GoATable width="100%" mb="2xl" mt="l">
+        <GoabTable width="100%" mb="2xl" mt="l">
           <tbody>
             <tr>
               <td>
                 <a href="#">Reads terms of use</a>
               </td>
               <td className="goa-table-number-column">
-                <GoABadge type="success" content="Completed" ariaLabel="completed"></GoABadge>
+                <GoabBadge type="success" content="Completed" ariaLabel="completed"></GoabBadge>
               </td>
             </tr>
           </tbody>
-        </GoATable>
+        </GoabTable>
 
         <h3>2. Prepare application</h3>
-        <GoATable width="100%" mb="2xl" mt="l">
+        <GoabTable width="100%" mb="2xl" mt="l">
           <tbody>
             <tr>
               <td>
                 <a href="#">Your contact details</a>
               </td>
               <td className="goa-table-number-column">
-                <GoABadge
+                <GoabBadge
                   type="information"
                   content="Not started"
-                  ariaLabel="not started"></GoABadge>
+                  ariaLabel="not started"></GoabBadge>
               </td>
             </tr>
             <tr>
@@ -75,10 +75,10 @@ export function TaskListPageExamples() {
                 <a href="#">Your family</a>
               </td>
               <td className="goa-table-number-column">
-                <GoABadge
+                <GoabBadge
                   type="information"
                   content="Not started"
-                  ariaLabel="not started"></GoABadge>
+                  ariaLabel="not started"></GoabBadge>
               </td>
             </tr>
             <tr>
@@ -86,41 +86,41 @@ export function TaskListPageExamples() {
                 <a href="#">Verify your identity</a>
               </td>
               <td className="goa-table-number-column">
-                <GoABadge
+                <GoabBadge
                   type="information"
                   content="Not started"
-                  ariaLabel="not started"></GoABadge>
+                  ariaLabel="not started"></GoabBadge>
               </td>
             </tr>
           </tbody>
-        </GoATable>
+        </GoabTable>
 
         <h3>3. Schedule service</h3>
         <p className="small">
           You need to complete the previous section before you can start this task.
         </p>
-        <GoATable width="100%" mt="l" mb="3xl">
+        <GoabTable width="100%" mt="l" mb="3xl">
           <tbody>
             <tr>
               <td>Receive email confirmation</td>
               <td className="goa-table-number-column">
-                <GoABadge
+                <GoabBadge
                   type="light"
                   content="Cannot start yet"
-                  ariaLabel="cannot start yet"></GoABadge>
+                  ariaLabel="cannot start yet"></GoabBadge>
               </td>
             </tr>
             <tr>
               <td>Pay service fee</td>
               <td className="goa-table-number-column">
-                <GoABadge
+                <GoabBadge
                   type="light"
                   content="Cannot start yet"
-                  ariaLabel="cannot start yet"></GoABadge>
+                  ariaLabel="cannot start yet"></GoabBadge>
               </td>
             </tr>
           </tbody>
-        </GoATable>
+        </GoabTable>
       </Sandbox>
     </div>
   );
diff --git a/src/examples/text-field/TextFieldAskBirthdayExample.tsx b/src/examples/text-field/TextFieldAskBirthdayExample.tsx
new file mode 100644
index 000000000..45b81c2d1
--- /dev/null
+++ b/src/examples/text-field/TextFieldAskBirthdayExample.tsx
@@ -0,0 +1,121 @@
+import { Sandbox } from "@components/sandbox";
+import { GoabBlock, GoabDropdown, GoabDropdownItem, GoabFormItem, GoabInput } from "@abgov/react-components";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+
+export const TextFieldAskBirthdayExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+
+  const noop = () => {}
+  return (
+    <Sandbox flags={["reactive"]} skipRenderOnly={"react"}>
+      {/*React code*/}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+           const [day, setDay] = useState<string>('');
+           const [month, setMonth] = useState<string | undefined>('');
+           const [year, setYear] = useState<string>('');
+        `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="html"
+        tags="react"
+        allowCopy={true}
+        code={`
+           <GoabFormItem label="When is your birthday?" labelSize="large" helpText={<>For example, 27 November 2004</>}>
+            <GoabBlock gap="m" direction="row">
+              <GoabFormItem label="Day">
+                <GoabInput onChange={(event: GoabInputOnChangeDetail) => setDay(event.value)} value={day} name="day" width="6ch"></GoabInput>
+              </GoabFormItem>
+              <GoabFormItem label="Month">
+                <GoabDropdown onChange={(event: GoabDropdownOnChangeDetail) => setMonth(event.value)} name="month" value={month}>
+                  <GoabDropdownItem label="January" value="January"></GoabDropdownItem>
+                  <GoabDropdownItem label="February" value="February"></GoabDropdownItem>
+                  <GoabDropdownItem label="March" value="March"></GoabDropdownItem>
+                  <GoabDropdownItem label="April" value="April"></GoabDropdownItem>
+                  <GoabDropdownItem label="May" value="May"></GoabDropdownItem>
+                  <GoabDropdownItem label="June" value="June"></GoabDropdownItem>
+                  <GoabDropdownItem label="July" value="July"></GoabDropdownItem>
+                  <GoabDropdownItem label="August" value="August"></GoabDropdownItem>
+                  <GoabDropdownItem label="September" value="September"></GoabDropdownItem>
+                  <GoabDropdownItem label="October" value="October"></GoabDropdownItem>
+                  <GoabDropdownItem label="November" value="November"></GoabDropdownItem>
+                  <GoabDropdownItem label="December" value="December"></GoabDropdownItem>
+                </GoabDropdown>
+              </GoabFormItem>
+              <GoabFormItem label="Year">
+                <GoabInput onChange={(event: GoabInputOnChangeDetail) => setYear(event.value)} value={year} name="year" width="10ch"></GoabInput>
+              </GoabFormItem>
+            </GoabBlock>
+          </GoabFormItem>
+        `}
+      />}
+
+      {/*Angular code*/}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags={["angular", "reactive"]}
+        allowCopy={true}
+        code={`
+           export class ExampleComponent {
+            form!: FormGroup;
+            constructor(private fb: FormBuilder) {
+              this.form = this.fb.group({
+                day: [''],
+                month: [''],
+                year: [''],
+              });
+            }
+          }
+        `}
+      />}
+
+      <GoabFormItem
+        label="When is your birthday?"
+        labelSize="large"
+        helpText={"For example, 27 November 2004"}>
+        <GoabBlock gap="m" direction="row">
+          <GoabFormItem label="Day">
+            <GoabInput
+              onChange={noop}
+              value=""
+              name="day"
+              width="6ch"
+            />
+          </GoabFormItem>
+          <GoabFormItem label="Month">
+            <GoabDropdown onChange={noop} name="month" value="">
+              <GoabDropdownItem label="January" value="January" />
+              <GoabDropdownItem label="February" value="February" />
+              <GoabDropdownItem label="March" value="March" />
+              <GoabDropdownItem label="April" value="April" />
+              <GoabDropdownItem label="May" value="May" />
+              <GoabDropdownItem label="June" value="June" />
+              <GoabDropdownItem label="July" value="July" />
+              <GoabDropdownItem label="August" value="August" />
+              <GoabDropdownItem label="September" value="September" />
+              <GoabDropdownItem label="October" value="October" />
+              <GoabDropdownItem label="November" value="November" />
+              <GoabDropdownItem label="December" value="December" />
+            </GoabDropdown>
+          </GoabFormItem>
+          <GoabFormItem label="Year">
+            <GoabInput
+              onChange={noop}
+              value=""
+              name="year"
+              width="10ch"
+            />
+          </GoabFormItem>
+        </GoabBlock>
+      </GoabFormItem>
+    </Sandbox>
+
+  )
+}
diff --git a/src/examples/text-field/TextFieldAskUserAddressExample.tsx b/src/examples/text-field/TextFieldAskUserAddressExample.tsx
new file mode 100644
index 000000000..1acc36cd9
--- /dev/null
+++ b/src/examples/text-field/TextFieldAskUserAddressExample.tsx
@@ -0,0 +1,152 @@
+import { Sandbox } from "@components/sandbox";
+import { GoabBlock, GoabDropdown, GoabDropdownItem, GoabFormItem, GoabInput } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+
+export const TextFieldAskUserAddressExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const noop = () => {}
+  return (
+    <Sandbox flags={["reactive"]} allow={["form"]} skipRenderOnly={"react"}>
+      {/*React code*/}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+            const [street, setStreet] = useState<string>('');
+            const [suite, setSuite] = useState<string>('');
+            const [city, setCity] = useState<string>('');
+            const [province, setProvince] = useState<string | undefined>('alberta');
+            const [postalCode, setPostalCode] = useState<string>('');
+        `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="html"
+        tags="react"
+        allowCopy={true}
+        code={`
+              <GoabFormItem label="Street Address">
+                <GoabInput name="address" type="text" value={street} onChange={(event: GoabInputOnChangeDetail) => setStreet(event.value)} width="100%"></GoabInput>
+              </GoabFormItem>
+              <GoabFormItem label="Suite or unit #">
+                <GoabInput name="suite" type="text" value={suite} onChange={(event: GoabInputOnChangeDetail) => setSuite(event.value)} width="100%"></GoabInput>
+              </GoabFormItem>
+              <GoabFormItem label="City/town">
+                <GoabInput name="city" type="text" value={city} onChange={(event: GoabInputOnChangeDetail) => setCity(event.value)} width="100%"></GoabInput>
+              </GoabFormItem>
+              <GoabBlock direction="row">
+                <GoabFormItem label="Provice/territory">
+                  <GoabDropdown name="province" value={province} onChange={(event: GoabDropdownOnChangeDetail) => setProvince(event.value)}>
+                    <GoabDropdownItem label="Alberta" value="alberta"></GoabDropdownItem>
+                    <GoabDropdownItem label="BC" value="bc"></GoabDropdownItem>
+                    <GoabDropdownItem label="Manitoba" value="manitoba"></GoabDropdownItem>
+                    <GoabDropdownItem label="New Brunswick" value="new-brunswick"></GoabDropdownItem>
+                    <GoabDropdownItem label="Newfoundland and Labrador" value="newfoundland"></GoabDropdownItem>
+                    <GoabDropdownItem label="Nova Scotia" value="nova-scotia"></GoabDropdownItem>
+                    <GoabDropdownItem label="Ontario" value="ontario"></GoabDropdownItem>
+                    <GoabDropdownItem label="Prince Edward Island" value="prince-edward-island"></GoabDropdownItem>
+                    <GoabDropdownItem label="Quebec" value="quebec"></GoabDropdownItem>
+                    <GoabDropdownItem label="Saskatchewan" value="saskatchewan"></GoabDropdownItem>
+                  </GoabDropdown>
+                </GoabFormItem>
+                <GoabFormItem label="Postal Code">
+                  <GoabInput name="postalCode" type="text" width="100%" value={postalCode} onChange={(event: GoabInputOnChangeDetail) => setPostalCode(event.value)}></GoabInput>
+                </GoabFormItem>
+            </GoabBlock>
+        `}
+      />}
+
+      {version === "old" && <CodeSnippet
+        lang="html"
+        tags="react"
+        allowCopy={true}
+        code={`
+            <GoAFormItem label="Street Address">
+              <GoAInput name="address" type="text" value="" onChange={onChange} width="100%"></GoAInput>
+            </GoAFormItem>
+            <GoAFormItem label="Suite or unit #">
+              <GoAInput name="suite" type="text" value="" onChange={onChange} width="100%"></GoAInput>
+            </GoAFormItem>
+            <GoAFormItem label="City/town">
+              <GoAInput name="city" type="text" value="" onChange={onChange} width="100%"></GoAInput>
+            </GoAFormItem>
+            <GoABlock direction="row">
+              <GoAFormItem label="Provice/territory">
+                <GoADropdown onChange={onChange} name="province" value="alberta">
+                  <GoADropdownItem label="Alberta" value="alberta"></GoADropdownItem>
+                  <GoADropdownItem label="BC" value="bc"></GoADropdownItem>
+                  <GoADropdownItem label="Manitoba" value="manitoba"></GoADropdownItem>
+                  <GoADropdownItem label="New Brunswick" value="new-brunswick"></GoADropdownItem>
+                  <GoADropdownItem label="Newfoundland and Labrador" value="newfoundland"></GoADropdownItem>
+                  <GoADropdownItem label="Nova Scotia" value="nova-scotia"></GoADropdownItem>
+                  <GoADropdownItem label="Ontario" value="ontario"></GoADropdownItem>
+                  <GoADropdownItem label="Prince Edward Island" value="prince-edward-island"></GoADropdownItem>
+                  <GoADropdownItem label="Quebec" value="quebec"></GoADropdownItem>
+                  <GoADropdownItem label="Saskatchewan" value="saskatchewan"></GoADropdownItem>
+                </GoADropdown>
+              </GoAFormItem>
+              <GoAFormItem label="Postal Code">
+                <GoAInput name="postalCode" type="text" value="" onChange={onChange} width="100%"></GoAInput>
+              </GoAFormItem>
+            </GoABlock>
+        `}
+      />}
+
+      {/*Angular code*/}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags={["angular", "reactive"]}
+        allowCopy={true}
+        code={`
+            export class ExampleComponent {
+              form!: FormGroup;
+
+              constructor(private fb: FormBuilder) {
+                this.form = this.fb.group({
+                  address: [''],
+                  suite: [''],
+                  city: [''],
+                  province: ['alberta'],
+              });
+            }
+          }
+        `}
+      />}
+
+      <form>
+        <GoabFormItem label="Street Address">
+          <GoabInput name="address" type="text" value="" onChange={noop} width="100%" />
+        </GoabFormItem>
+        <GoabFormItem label="Suite or unit #">
+          <GoabInput name="suite" type="text" value="" onChange={noop} width="100%" />
+        </GoabFormItem>
+        <GoabFormItem label="City/town">
+          <GoabInput name="city" type="text" value="" onChange={noop} width="100%" />
+        </GoabFormItem>
+      <GoabBlock direction={"row"}>
+        <GoabFormItem label="Provice/territory">
+          <GoabDropdown onChange={noop} name="province" value="alberta">
+            <GoabDropdownItem label="Alberta" value="alberta" />
+            <GoabDropdownItem label="BC" value="bc" />
+            <GoabDropdownItem label="Manitoba" value="manitoba" />
+            <GoabDropdownItem label="New Brunswick" value="new-brunswick" />
+            <GoabDropdownItem label="Newfoundland and Labrador" value="newfoundland" />
+            <GoabDropdownItem label="Nova Scotia" value="nova-scotia" />
+            <GoabDropdownItem label="Ontario" value="ontario" />
+            <GoabDropdownItem label="Prince Edward Island" value="prince-edward-island" />
+            <GoabDropdownItem label="Quebec" value="quebec" />
+            <GoabDropdownItem label="Saskatchewan" value="saskatchewan" />
+          </GoabDropdown>
+        </GoabFormItem>
+
+        <GoabFormItem label="Postal Code">
+          <GoabInput name="postalCode" type="text" value="" onChange={noop} width="100%" />
+        </GoabFormItem>
+      </GoabBlock>
+      </form>
+    </Sandbox>
+  )
+}
diff --git a/src/examples/text-field/TextFieldAskUserAmountExample.tsx b/src/examples/text-field/TextFieldAskUserAmountExample.tsx
new file mode 100644
index 000000000..75708251f
--- /dev/null
+++ b/src/examples/text-field/TextFieldAskUserAmountExample.tsx
@@ -0,0 +1,212 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabFormItem, GoabInput } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const TextFieldAskUserAmountExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+
+  const noop = () => {}
+  return (
+    <Sandbox flags={["reactive"]} skipRender>
+      {/*Angular Code Snippet - need for leadingContent slot*/}
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  export class ExampleComponent {
+                    tuitionAmount: number|undefined;
+                    suppliesAmount: number|undefined;
+                    othersAmount: number|undefined;
+
+                    onChangeTuitionAmount(event: Event) {
+                      this.tuitionAmount = (event as CustomEvent).detail.value as number;
+                    }
+                    onChangeSuppliesAmount(event: Event) {
+                      this.suppliesAmount = (event as CustomEvent).detail.value as number;
+                    }
+                    onChangeOthersAmount(event: Event) {
+                      this.othersAmount = (event as CustomEvent).detail.value as number;
+                    }
+                  }
+                `}
+      />}
+      {version === "old" && <CodeSnippet
+        lang="html"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  <goa-form-item label="Tuition">
+                    <goa-input (_change)="onChangeTuitionAmount($event)" value="" name="tuition" mb="xl">
+                      <div slot="leadingContent">$</div>
+                    </goa-input>
+                  </goa-form-item>
+                  <goa-form-item label="Books/Supplies/Instruments">
+                    <goa-input (_change)="onChangeSuppliesAmount($event)" value="" name="book" mb="xl">
+                      <div slot="leadingContent">$</div>
+                    </goa-input>
+                  </goa-form-item>
+                  <goa-form-item label="Other costs">
+                    <goa-input (_change)="onChangeOthersAmount($event)" value="" name="others">
+                      <div slot="leadingContent">$</div>
+                    </goa-input>
+                  </goa-form-item>
+                `}
+      />}
+
+      {/*Reactive FormControl Angular Code Snippet*/}
+       <CodeSnippet
+        lang="typescript"
+        tags={["angular", "reactive"]}
+        allowCopy={true}
+        code={`
+                  export class ExampleComponent {
+                    costFormGroup = new FormGroup({
+                      tuitionFeeAmount: new FormControl(""),
+                      suppliesAmount: new FormControl(""),
+                      othersAmount: new FormControl(""),
+                    });
+                  }  
+                `}
+      />
+
+      {version === "old" && <CodeSnippet
+        lang="html"
+        tags={["angular", "reactive"]}
+        allowCopy={true}
+        code={`
+                <form [formGroup]="costFormGroup">
+                  <goa-form-item label="Tuition">
+                    <goa-input goaValue name="tuition" formControlName="tuitionFeeAmount">
+                      <div slot="leadingContent">$</div>
+                    </goa-input>
+                  </goa-form-item>
+                  <goa-form-item label="Books/Supplies/Instruments">
+                    <goa-input goaValue name="book" formControlName="suppliesAmount">
+                     <div slot="leadingContent">$</div>
+                    </goa-input>
+                  </goa-form-item>
+                    <goa-form-item label="Other costs">
+                      <goa-input goaValue name="others" formControlName="othersAmount">
+                        <div slot="leadingContent">$</div>
+                      </goa-input>
+                  </goa-form-item>                
+                </form>
+                `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="html"
+        tags={["angular", "reactive"]}
+        allowCopy={true}
+        code={`
+                <form [formGroup]="costFormGroup">
+                  <goab-form-item label="Tuition">
+                    <goab-input name="tuition" formControlName="tuitionFeeAmount">
+                      <div slot="leadingContent">$</div>
+                    </goab-input>
+                  </goab-form-item>
+                  <goab-form-item label="Books/Supplies/Instruments">
+                    <goab-input name="book" formControlName="suppliesAmount">
+                     <div slot="leadingContent">$</div>
+                    </goab-input>
+                  </goab-form-item>
+                    <goab-form-item label="Other costs">
+                      <goab-input  name="others" formControlName="othersAmount">
+                        <div slot="leadingContent">$</div>
+                      </goab-input>
+                  </goab-form-item>                
+                </form>
+                `}
+      />}
+
+      {/*React Code Snippet - need for leadingContent slot*/}
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  const [tuitionAmount, setTuitionAmount] = useState<string>("");
+                  const [suppliesAmount, setSuppliesAmount] = useState<string>("");
+                  const [othersAmount, setOthersAmount] = useState<string>("");
+                  function onChangeTuitionAmount(_name: string, value: string) {
+                    setTuitionAmount(value);
+                  }
+                  function onChangeSuppliesAmount(_name: string, value: string) {
+                    setSuppliesAmount(value);
+                  }
+                  function onChangeOthersAmount(_name: string, value: string) {
+                    setOthersAmount(value);
+                  }
+                `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  const [tuitionAmount, setTuitionAmount] = useState<string>("");
+                  const [suppliesAmount, setSuppliesAmount] = useState<string>("");
+                  const [othersAmount, setOthersAmount] = useState<string>("");
+                  function onChangeTuitionAmount(event: GoabInputOnChangeDetail) {
+                    setTuitionAmount(event.value);
+                  }
+                  function onChangeSuppliesAmount(event: GoabInputOnChangeDetail) {
+                    setSuppliesAmount(event.value);
+                  }
+                  function onChangeOthersAmount(event: GoabInputOnChangeDetail) {
+                    setOthersAmount(event.value);
+                  }
+                `}
+      />}
+
+      {version === "old" && <CodeSnippet
+        lang="html"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  <GoAFormItem label="Tuition">
+                    <GoAInput onChange={onChangeTuitionAmount} value={tuitionAmount} name="tuitionAmount" leadingContent="$"></GoAInput>
+                  </GoAFormItem>
+                  <GoAFormItem label="Books/Supplies/Instruments">
+                    <GoAInput onChange={onChangeSuppliesAmount} value={suppliesAmount} name="suppliesAmount" leadingContent="$"></GoAInput>
+                  </GoAFormItem>
+                  <GoAFormItem label="Other costs">
+                    <GoAInput onChange={onChangeOthersAmount} value={othersAmount} name="others" leadingContent="$"></GoAInput>
+                  </GoAFormItem>
+                `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="html"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  <GoabFormItem label="Tuition">
+                    <GoabInput onChange={onChangeTuitionAmount} value={tuitionAmount} name="tuitionAmount" leadingContent="$"></GoabInput>
+                  </GoabFormItem>
+                  <GoabFormItem label="Books/Supplies/Instruments">
+                    <GoabInput onChange={onChangeSuppliesAmount} value={suppliesAmount} name="suppliesAmount" leadingContent="$"></GoabInput>
+                  </GoabFormItem>
+                  <GoabFormItem label="Other costs">
+                    <GoabInput onChange={onChangeOthersAmount} value={othersAmount} name="others" leadingContent="$"></GoabInput>
+                  </GoabFormItem>
+                `}
+      />}
+
+      <GoabFormItem label="Tuition">
+        <GoabInput onChange={noop} value="" name="tuitionAmount" leadingContent="$" mb="xl" />
+      </GoabFormItem>
+      <GoabFormItem label="Supplies">
+        <GoabInput onChange={noop} value="" name="suppliesAmount" leadingContent="$" mb="xl" />
+      </GoabFormItem>
+      <GoabFormItem label="Other costs">
+        <GoabInput onChange={noop} value="" name="othersAmount" leadingContent="$" />
+      </GoabFormItem>
+    </Sandbox>
+
+  )
+}
diff --git a/src/examples/text-field/TextFieldAskUserIndianRegistrationExample.tsx b/src/examples/text-field/TextFieldAskUserIndianRegistrationExample.tsx
new file mode 100644
index 000000000..74292c1b0
--- /dev/null
+++ b/src/examples/text-field/TextFieldAskUserIndianRegistrationExample.tsx
@@ -0,0 +1,142 @@
+import { Sandbox } from "@components/sandbox";
+import { GoabBlock, GoabFormItem, GoabInput } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+
+export const TextFieldAskUserIndianRegistrationExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const noop = () => {}
+
+  return (
+    <Sandbox flags={["reactive"]} skipRenderOnly={"react"}>
+      {/*React code*/}
+      {version === "old" && <CodeSnippet
+        lang="html"
+        tags="react"
+        allowCopy={true}
+        code={`
+          <GoAFormItem label="Indian registration number" labelSize="large">
+            <GoABlock gap="m" direction="row">
+              <GoAFormItem label="Band #" helpText="3 digits">
+                <GoAInput onChange={onChange} value="" name="bandNo" width="88px" maxLength={3}></GoAInput>
+              </GoAFormItem>
+              <GoAFormItem label="Family" helpText="Up to 5 digits">
+                <GoAInput onChange={onChange} value="" name="family" width="105px" maxLength={5}></GoAInput>
+              </GoAFormItem>
+              <GoAFormItem label="Position" helpText="2 digits">
+                <GoAInput onChange={onChange} value="" name="position" width="71px" maxLength={2}></GoAInput>
+              </GoAFormItem>
+            </GoABlock>
+          </GoAFormItem>
+        `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+          const [bandNo, setBandNo] = useState<string>('');
+          const [family, setFamily] = useState<string>('');
+          const [position, setPosition] = useState<string>('');
+        `}
+      />}
+      {version === "new" && <CodeSnippet
+        lang="html"
+        tags="react"
+        allowCopy={true}
+        code={`
+        <GoabFormItem label="Indian registration number" labelSize="large">
+          <GoabBlock gap="m" direction="row">
+            <GoabFormItem label="Band #" helpText="3 digits">
+              <GoabInput
+                onChange={(event: GoabInputOnChangeDetail) =>
+                  setBandNo(event.value)
+                }
+                value={bandNo}
+                name="bandNo"
+                width="88px"
+                maxLength={3}
+              ></GoabInput>
+            </GoabFormItem>
+            <GoabFormItem label="Family" helpText="Up to 5 digits">
+              <GoabInput
+                onChange={(event: GoabInputOnChangeDetail) =>
+                  setFamily(event.value)
+                }
+                value={family}
+                name="family"
+                width="105px"
+                maxLength={5}
+              ></GoabInput>
+            </GoabFormItem>
+            <GoabFormItem label="Position" helpText="2 digits">
+              <GoabInput
+                onChange={(event: GoabInputOnChangeDetail) =>
+                  setPosition(event.value)
+                }
+                value={position}
+                name="position"
+                width="71px"
+                maxLength={2}
+              ></GoabInput>
+            </GoabFormItem>
+          </GoabBlock>
+        </GoabFormItem>
+        `}
+      />}
+
+      {/*Angular code*/}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags={["angular", "reactive"]}
+        allowCopy={true}
+        code={`
+         export class ExampleComponent {
+          form!: FormGroup;
+          constructor(private fb: FormBuilder) {
+            this.form = this.fb.group({
+              bandNo: [''],
+              family: [''],
+              position: [''],
+            });
+          }
+        }
+        `}
+      />}
+
+      <GoabFormItem label="Indian registration number" labelSize="large">
+        <GoabBlock gap="m" direction="row">
+          <GoabFormItem label="Band #" helpText="3 digits">
+            <GoabInput
+              onChange={noop}
+              value=""
+              name="bandNo"
+              width="88px"
+              maxLength={3}
+            />
+          </GoabFormItem>
+          <GoabFormItem label="Family" helpText="Up to 5 digits">
+            <GoabInput
+              onChange={noop}
+              value=""
+              name="family"
+              width="105px"
+              maxLength={5}
+            />
+          </GoabFormItem>
+          <GoabFormItem label="Position" helpText="2 digits">
+            <GoabInput
+              onChange={noop}
+              value=""
+              name="position"
+              width="71px"
+              maxLength={2}
+            />
+          </GoabFormItem>
+        </GoabBlock>
+      </GoabFormItem>
+    </Sandbox>
+  )
+}
diff --git a/src/examples/text-field/TextFieldExamples.tsx b/src/examples/text-field/TextFieldExamples.tsx
index 8ad9e5b6b..9963f7fb7 100644
--- a/src/examples/text-field/TextFieldExamples.tsx
+++ b/src/examples/text-field/TextFieldExamples.tsx
@@ -1,16 +1,12 @@
-import { Sandbox } from "@components/sandbox";
+import { TextFieldAskUserAddressExample } from "@examples/text-field/TextFieldAskUserAddressExample.tsx";
+import { TextFieldAskBirthdayExample } from "@examples/text-field/TextFieldAskBirthdayExample.tsx";
+import { TextFieldSearchExample } from "@examples/text-field/TextFieldSearchExample.tsx";
+import { TextFieldAskUserAmountExample } from "@examples/text-field/TextFieldAskUserAmountExample.tsx";
 import {
-  GoABlock,
-  GoAButton,
-  GoADropdown,
-  GoADropdownItem,
-  GoAFormItem,
-  GoAInput,
-} from "@abgov/react-components";
-import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+  TextFieldAskUserIndianRegistrationExample
+} from "@examples/text-field/TextFieldAskUserIndianRegistrationExample.tsx";
 
 export default function TextFieldExamples() {
-  const noop = () => {};
   return (
     <>
       {/*Examples*/}
@@ -19,261 +15,21 @@ export default function TextFieldExamples() {
       </h2>
 
       <h3 id="component-example-ask-user-for-an-address">Ask a user for an address </h3>
-      <Sandbox flags={["reactive"]}>
-        <GoAFormItem label="Street Address">
-          <GoAInput name="address" type="text" value="" onChange={noop} width="100%" mb="xl" />
-        </GoAFormItem>
-        <GoAFormItem label="Suite or unit #">
-          <GoAInput name="suite" type="text" value="" onChange={noop} width="100%" mb="xl" />
-        </GoAFormItem>
-        <GoAFormItem label="City/town">
-          <GoAInput name="city" type="text" value="" onChange={noop} width="100%" mb="xl"  />
-        </GoAFormItem>
-
-        <GoABlock direction="row" gap="l">
-          <GoAFormItem label="Provice/territory">
-            <GoADropdown onChange={noop} name="province" value="alberta">
-              <GoADropdownItem label="Alberta" value="alberta" />
-              <GoADropdownItem label="BC" value="bc" />
-              <GoADropdownItem label="Manitoba" value="manitoba" />
-              <GoADropdownItem label="New Brunswick" value="new-brunswick" />
-              <GoADropdownItem label="Newfoundland and Labrador" value="newfoundland" />
-              <GoADropdownItem label="Nova Scotia" value="nova-scotia" />
-              <GoADropdownItem label="Ontario" value="ontario" />
-              <GoADropdownItem label="Prince Edward Island" value="prince-edward-island" />
-              <GoADropdownItem label="Quebec" value="quebec" />
-              <GoADropdownItem label="Saskatchewan" value="saskatchewan" />
-            </GoADropdown>
-          </GoAFormItem>
-
-          <GoAFormItem label="Postal Code">
-            <GoAInput name="postalCode" type="text" value="" onChange={noop} width="14ch" />
-          </GoAFormItem>
-        </GoABlock>
-      </Sandbox>
+      <TextFieldAskUserAddressExample/>
 
       <h3 id="component-example-ask-user-for-birthday">Ask a user for their birthday</h3>
-      <Sandbox flags={["reactive"]}>
-        <GoAFormItem
-          label="What is your date of birth?"
-          labelSize="large"
-          helpText={"For example, 27 November 2004"}>
-          <GoABlock gap="m" direction="row">
-            <GoAFormItem label="Day">
-              <GoAInput
-                onChange={noop}
-                value=""
-                name="day"
-                width="6ch"
-              />
-            </GoAFormItem>
-            <GoAFormItem label="Month">
-            <GoADropdown onChange={noop} name="month" value="">
-              <GoADropdownItem label="January" value="January" />
-              <GoADropdownItem label="February" value="February" />
-              <GoADropdownItem label="March" value="March" />
-              <GoADropdownItem label="April" value="April" />
-              <GoADropdownItem label="May" value="May" />
-              <GoADropdownItem label="June" value="June" />
-              <GoADropdownItem label="July" value="July" />
-              <GoADropdownItem label="August" value="August" />
-              <GoADropdownItem label="September" value="September" />
-              <GoADropdownItem label="October" value="October" />
-              <GoADropdownItem label="November" value="November" />
-              <GoADropdownItem label="December" value="December" />
-            </GoADropdown>
-            </GoAFormItem>
-            <GoAFormItem label="Year">
-              <GoAInput
-                onChange={noop}
-                value=""
-                name="year"
-                width="10ch"
-              />
-            </GoAFormItem>
-          </GoABlock>
-        </GoAFormItem>
-      </Sandbox>
+      <TextFieldAskBirthdayExample/>
 
       <h3 id="component-example-search">Search</h3>
-      <Sandbox flags={["reactive"]}>
-        <GoABlock gap="xs" direction="row">
-          <GoAInput type="search" name="search" value="" onChange={noop} leadingIcon="search" />
-          <GoAButton type="primary" onClick={noop}>
-            Search
-          </GoAButton>
-        </GoABlock>
-      </Sandbox>
+      <TextFieldSearchExample/>
 
       <h3 id="component-example-ask-for-costs">Ask a user for dollar amounts or costs</h3>
-      <Sandbox flags={["reactive"]} skipRender>
-        {/*Angular Code Snippet - need for leadingContent slot*/}
-        <CodeSnippet
-          lang="typescript"
-          tags="angular"
-          allowCopy={true}
-          code={`
-                  export class ExampleComponent {
-                    tuitionAmount: number|undefined;
-                    suppliesAmount: number|undefined;
-                    othersAmount: number|undefined;
-
-                    onChangeTuitionAmount(event: Event) {
-                      this.tuitionAmount = (event as CustomEvent).detail.value as number;
-                    }
-                    onChangeSuppliesAmount(event: Event) {
-                      this.suppliesAmount = (event as CustomEvent).detail.value as number;
-                    }
-                    onChangeOthersAmount(event: Event) {
-                      this.othersAmount = (event as CustomEvent).detail.value as number;
-                    }
-                  }
-                `}
-        />
-        <CodeSnippet
-          lang="html"
-          tags="angular"
-          allowCopy={true}
-          code={`
-                  <goa-form-item label="Tuition">
-                    <goa-input (_change)="onChangeTuitionAmount($event)" value="" name="tuition" mb="xl">
-                      <div slot="leadingContent">$</div>
-                    </goa-input>
-                  </goa-form-item>
-                  <goa-form-item label="Books/Supplies/Instruments">
-                    <goa-input (_change)="onChangeSuppliesAmount($event)" value="" name="book" mb="xl">
-                      <div slot="leadingContent">$</div>
-                    </goa-input>
-                  </goa-form-item>
-                  <goa-form-item label="Other costs">
-                    <goa-input (_change)="onChangeOthersAmount($event)" value="" name="others">
-                      <div slot="leadingContent">$</div>
-                    </goa-input>
-                  </goa-form-item>
-                `}
-        />
-
-        {/*Reactive FormControl Angular Code Snippet*/}
-        <CodeSnippet
-          lang="typescript"
-          tags={["angular", "reactive"]}
-          allowCopy={true}
-          code={`
-                  export class ExampleComponent {
-                    costFormGroup = new FormGroup({
-                      tuitionFeeAmount: new FormControl(""),
-                      suppliesAmount: new FormControl(""),
-                      othersAmount: new FormControl(""),
-                    });
-                  }  
-                `}
-        />
-        <CodeSnippet
-          lang="html"
-          tags={["angular", "reactive"]}
-          allowCopy={true}
-          code={`
-                <form [formGroup]="costFormGroup">
-                  <goa-form-item label="Tuition">
-                    <goa-input goaValue name="tuition" formControlName="tuitionFeeAmount">
-                      <div slot="leadingContent">$</div>
-                    </goa-input>
-                  </goa-form-item>
-                  <goa-form-item label="Books/Supplies/Instruments">
-                    <goa-input goaValue name="book" formControlName="suppliesAmount">
-                     <div slot="leadingContent">$</div>
-                    </goa-input>
-                  </goa-form-item>
-                    <goa-form-item label="Other costs">
-                      <goa-input goaValue name="others" formControlName="othersAmount">
-                        <div slot="leadingContent">$</div>
-                      </goa-input>
-                  </goa-form-item>                
-                </form>
-                `}
-        />
-
-        {/*React Code Snippet - need for leadingContent slot*/}
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
-                  const [tuitionAmount, setTuitionAmount] = useState<string>("");
-                  const [suppliesAmount, setSuppliesAmount] = useState<string>("");
-                  const [othersAmount, setOthersAmount] = useState<string>("");
-                  function onChangeTuitionAmount(_name: string, value: string) {
-                    setTuitionAmount(value);
-                  }
-                  function onChangeSuppliesAmount(_name: string, value: string) {
-                    setSuppliesAmount(value);
-                  }
-                  function onChangeOthersAmount(_name: string, value: string) {
-                    setOthersAmount(value);
-                  }
-                `}
-        />
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
-                  <GoAFormItem label="Tuition">
-                    <GoAInput onChange={onChangeTuitionAmount} value={tuitionAmount} name="tuitionAmount" leadingContent="$"></GoAInput>
-                  </GoAFormItem>
-                  <GoAFormItem label="Books/Supplies/Instruments">
-                    <GoAInput onChange={onChangeSuppliesAmount} value={suppliesAmount} name="suppliesAmount" leadingContent="$"></GoAInput>
-                  </GoAFormItem>
-                  <GoAFormItem label="Other costs">
-                    <GoAInput onChange={onChangeOthersAmount} value={othersAmount} name="others" leadingContent="$"></GoAInput>
-                  </GoAFormItem>
-                `}
-        />
-
-        <GoAFormItem label="Tuition">
-          <GoAInput onChange={noop} value="" name="tuitionAmount" leadingContent="$" mb="xl" />
-        </GoAFormItem>
-        <GoAFormItem label="Supplies">
-          <GoAInput onChange={noop} value="" name="suppliesAmount" leadingContent="$" mb="xl" />
-        </GoAFormItem>
-        <GoAFormItem label="Other costs">
-          <GoAInput onChange={noop} value="" name="othersAmount" leadingContent="$" />
-        </GoAFormItem>
-      </Sandbox>
+      <TextFieldAskUserAmountExample/>
 
       <h3 id="component-example-registration-number">
         Ask a user for their indian registration number
       </h3>
-      <Sandbox flags={["reactive"]}>
-        <GoAFormItem label="Indian registration number" labelSize="large">
-          <GoABlock gap="m" direction="row">
-            <GoAFormItem label="Band #" helpText="3 digits">
-              <GoAInput
-                onChange={noop}
-                value=""
-                name="bandNo"
-                width="88px"
-              />
-            </GoAFormItem>
-            <GoAFormItem label="Family" helpText="Up to 5 digits">
-              <GoAInput
-                onChange={noop}
-                value=""
-                name="family"
-                width="105px"
-              />
-            </GoAFormItem>
-            <GoAFormItem label="Position" helpText="2 digits">
-              <GoAInput
-                onChange={noop}
-                value=""
-                name="position"
-                width="71px"
-              />
-            </GoAFormItem>
-          </GoABlock>
-        </GoAFormItem>
-      </Sandbox>
+      <TextFieldAskUserIndianRegistrationExample/>
     </>
   );
 }
diff --git a/src/examples/text-field/TextFieldSearchExample.tsx b/src/examples/text-field/TextFieldSearchExample.tsx
new file mode 100644
index 000000000..af41377aa
--- /dev/null
+++ b/src/examples/text-field/TextFieldSearchExample.tsx
@@ -0,0 +1,91 @@
+import { GoabBlock, GoabButton, GoabFormItem, GoabInput } from "@abgov/react-components";
+import { Sandbox } from "@components/sandbox";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+
+export const TextFieldSearchExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const noop = () => {}
+  return (
+    <Sandbox flags={["reactive"]} allow={["form"]} skipRenderOnly={"react"}>
+      {/*Angular code*/}
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags={["angular", "reactive"]}
+          allowCopy={true}
+          code={`
+                  export class ExampleComponent {
+                    form!: FormGroup;
+                    constructor(private fb: FormBuilder) {
+                      this.form = this.fb.group({
+                        search: [''],
+                      });
+                    }
+                    onClick() {
+                      console.log('search:', this.form.controls['search'].value);
+                    }
+                  }
+        `}
+        />
+      )}
+
+      {/*React code*/}
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            <GoAFormItem>
+              <GoABlock gap="xs" direction="row">
+                <GoAInput type="search" name="search" value="" onChange={onChange} leadingIcon="search"></GoAInput>
+                <GoAButton type="primary" onClick={onClick}>Search</GoAButton>
+              </GoABlock>
+            </GoAFormItem>
+        `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+             const [search, setSearch] = useState<string>('');
+             const onClick = () => console.log('search: ', search);
+        `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+            <GoabFormItem>
+              <GoabBlock gap="xs" direction="row">
+                <GoabInput type="search" name="search" value={search} onChange={(event: GoabInputOnChangeDetail) => setSearch(event.value)} leadingIcon="search"></GoabInput>
+                <GoabButton type="primary" onClick={onClick}>Search</GoabButton>
+              </GoabBlock>
+            </GoabFormItem>
+        `}
+        />
+      )}
+
+      <form>
+        <GoabFormItem>
+          <GoabBlock gap="xs" direction="row">
+            <GoabInput type="search" name="search" value="" onChange={noop} leadingIcon="search" />
+            <GoabButton type="primary" onClick={noop}>
+              Search
+            </GoabButton>
+          </GoabBlock>
+        </GoabFormItem>
+      </form>
+    </Sandbox>
+  );
+}
diff --git a/src/examples/textarea/TextAreaAskQuestionMoreInformationExample.tsx b/src/examples/textarea/TextAreaAskQuestionMoreInformationExample.tsx
new file mode 100644
index 000000000..1012fac7d
--- /dev/null
+++ b/src/examples/textarea/TextAreaAskQuestionMoreInformationExample.tsx
@@ -0,0 +1,69 @@
+import { Sandbox } from "@components/sandbox";
+import {
+  GoabButton,
+  GoabButtonGroup,
+  GoabContainer,
+  GoabDetails,
+  GoabFormItem,
+  GoabTextarea
+} from "@abgov/react-components";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const TextAreaAskQuestionMoreInformationExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const noop = () => {}
+  return (
+    <Sandbox flags={["reactive"]} fullWidth allow={["form", "h2", "p"]}>
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags={["angular", "reactive"]}
+        allowCopy={true}
+        code={`
+                   export class TextareaAskQuestionExampleComponent {
+                    form!: FormGroup;
+
+                    public constructor(private fb: FormBuilder) {
+                      this.form = this.fb.group({
+                        program: [""]
+                      })
+                    }
+                  }
+                  `}
+      />}
+      <GoabContainer>
+        <GoabButton type="tertiary" leadingIcon="arrow-back" mb="m">
+          Back
+        </GoabButton>
+
+        <h2>Description</h2>
+        <p>
+          List all components and include a description, including the number of hours for
+          each.
+        </p>
+        <form>
+        <GoabFormItem
+          label="Program outline"
+          helpText="Remember to maintain clarity, accuracy, and coherence throughout the program outline.">
+          <GoabTextarea name="program" value="Input text" onChange={noop} />
+        </GoabFormItem>
+        </form>
+        <GoabDetails heading="How to write a good outline">
+          <p>
+            Break down your outline into easily digestible sections. This can help to ensure
+            that the document is well-organized and easy to navigate.
+          </p>
+        </GoabDetails>
+
+        <GoabButtonGroup alignment="start" mt="l">
+          <GoabButton type="primary">
+            Continue
+          </GoabButton>
+        </GoabButtonGroup>
+      </GoabContainer>
+
+
+    </Sandbox>
+  )
+}
diff --git a/src/examples/textarea/TextAreaExamples.tsx b/src/examples/textarea/TextAreaExamples.tsx
new file mode 100644
index 000000000..6453d9590
--- /dev/null
+++ b/src/examples/textarea/TextAreaExamples.tsx
@@ -0,0 +1,15 @@
+import {
+  TextAreaAskQuestionMoreInformationExample
+} from "@examples/textarea/TextAreaAskQuestionMoreInformationExample.tsx";
+
+export const TextAreaExamples = () => {
+  return (
+    <>
+      <h2 id="component-examples" className="hidden" aria-hidden="true">
+        Examples
+      </h2>
+      <h3 id="component-example-1">Ask a question and give more information</h3>
+      <TextAreaAskQuestionMoreInformationExample/>
+    </>
+  )
+}
diff --git a/src/examples/tooltip/TooltipClickCopyToClipboardExample.tsx b/src/examples/tooltip/TooltipClickCopyToClipboardExample.tsx
new file mode 100644
index 000000000..6357f3cf9
--- /dev/null
+++ b/src/examples/tooltip/TooltipClickCopyToClipboardExample.tsx
@@ -0,0 +1,152 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabBlock, GoabIconButton, GoabTooltip } from "@abgov/react-components";
+import { getCssVarValue } from "src/utils/styling.ts";
+import { useContext, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const TooltipClickCopyToClipboardExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const [isCopied, setIsCopied] = useState(false);
+
+  function copyCode() {
+    const codeToCopy = "$goa-color-interactive-default";
+    navigator.clipboard.writeText(codeToCopy).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 1000);
+    });
+  }
+
+  return (
+    <Sandbox allow={['div', 'pre', 'a']} skipRender>
+      <CodeSnippet
+        lang="css"
+        allowCopy={true}
+        code={`
+                  .token-block {
+                    background-color: var(--goa-color-interactive-default);
+                    height: 22px;
+                    width: 24px;
+                    border-radius: var(--goa-border-radius-m);
+                  }
+                `}
+      />
+      {/*Angular code*/}
+      <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  isCopied = false;
+
+                  copyCode() {
+                    const codeToCopy = "$goa-color-interactive-default";
+                    navigator.clipboard.writeText(codeToCopy).then(() => {
+                      this.isCopied = true;
+                      setTimeout(() => this.isCopied = false, 1000);
+                    });
+                  }
+                `}
+      />
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  <goa-block alignment="center">
+                    <div class="token-block"></div>
+                    <a (_click)="copyCode()">
+                      <u>$goa-color-interactive-default</u>
+                    </a>
+                    <goa-tooltip [content]="isCopied ? 'Copied' : 'Copy?'" position="top">
+                      <goa-icon-button icon="copy" (_click)="copyCode()" mt="2xs" />
+                    </goa-tooltip>
+                  </goa-block>
+                `}
+      />}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  <goab-block alignment="center">
+                    <div class="token-block"></div>
+                    <a (click)="copyCode()">
+                      <u>$goa-color-interactive-default</u>
+                    </a>
+                    <goab-tooltip [content]="isCopied ? 'Copied' : 'Copy?'" position="top">
+                      <goab-icon-button icon="copy" (onClick)="copyCode()" mt="2xs" />
+                    </goab-tooltip>
+                  </goab-block>
+                `}
+      />}
+
+      {/*React code*/}
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  const [isCopied, setIsCopied] = useState(false);
+
+                  function copyCode() {
+                    const codeToCopy = "$goa-color-interactive-default";
+                    navigator.clipboard.writeText(codeToCopy).then(() => {
+                      setIsCopied(true);
+                      setTimeout(() => setIsCopied(false), 1000);
+                    });
+                  }
+                `}
+      />
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  <GoABlock alignment="center">
+                    <div className="token-block"/>
+                    <a onClick={copyCode}>
+                      <u>$goa-color-interactive-default</u>
+                    </a>
+                    <GoATooltip content={isCopied ? "Copied" : "Copy?"} position="top">
+                      <GoAIconButton icon="copy" onClick={copyCode} mt="2xs" />
+                    </GoATooltip>
+                  </GoABlock>
+                `}
+      />}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  <GoabBlock alignment="center">
+                    <div className="token-block"/>
+                    <a onClick={copyCode}>
+                      <u>$goa-color-interactive-default</u>
+                    </a>
+                    <GoabTooltip content={isCopied ? "Copied" : "Copy?"} position="top">
+                      <GoabIconButton icon="copy" onClick={copyCode} mt="2xs" />
+                    </GoabTooltip>
+                  </GoabBlock>
+                `}
+      />}
+      <GoabBlock alignment="center">
+        <div
+          className="token-block"
+          style={{
+            backgroundColor: getCssVarValue(`--goa-color-interactive-default`),
+            height: '22px',
+            width: '24px',
+            borderRadius: getCssVarValue('--goa-border-radius-m')
+          }}
+        />
+        <a onClick={copyCode}>
+          <u>$goa-color-interactive-default</u>
+        </a>
+        <GoabTooltip content={isCopied ? `Copied` : `Copy?`} position="top">
+          <GoabIconButton icon="copy" onClick={copyCode} mt="2xs" />
+        </GoabTooltip>
+      </GoabBlock>
+    </Sandbox>
+  )
+}
diff --git a/src/examples/tooltip/TooltipExamples.tsx b/src/examples/tooltip/TooltipExamples.tsx
new file mode 100644
index 000000000..87384f962
--- /dev/null
+++ b/src/examples/tooltip/TooltipExamples.tsx
@@ -0,0 +1,22 @@
+import { TooltipShowFullDateExample } from "@examples/tooltip/TooltipShowFullDateExample.tsx";
+import {
+  TooltipShowLabelForIconOnlyButtonExample
+} from "@examples/tooltip/TooltipShowLabelForIconOnlyButtonExample.tsx";
+
+export const TooltipExamples = () => {
+  return (
+    <>
+      <h2 id="component-examples" className="hidden" aria-hidden="true">
+        Examples
+      </h2>
+      <h3 id="component-example-date-when-shortened">Use a tooltip to show a full date when shortened</h3>
+      <TooltipShowFullDateExample />
+
+      <h3 id="component-example-label-icon-only">Show a label on an icon only button</h3>
+      <TooltipShowLabelForIconOnlyButtonExample />
+
+      <h3 id="component-example-copy-clipboard">Click to copy something to your clipboard</h3>
+      
+    </>
+  )
+}
diff --git a/src/examples/tooltip/TooltipShowFullDateExample.tsx b/src/examples/tooltip/TooltipShowFullDateExample.tsx
new file mode 100644
index 000000000..49dfd035f
--- /dev/null
+++ b/src/examples/tooltip/TooltipShowFullDateExample.tsx
@@ -0,0 +1,111 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabContainer, GoabTooltip } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const TooltipShowFullDateExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  return (
+    <Sandbox skipRender fullWidth>
+      {/*SkipRender because we need to display a slot that sandbox doesn't support*/}
+
+      {/*Angular code*/}
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  <goa-container type="non-interactive" accent="thick">
+                    <div slot="title">
+                      Joan Smith
+                      <goa-tooltip content="Nov 23, 2023 at 10:35 am">
+                        <span style="color:var(--goa-color-text-secondary); font: var(--goa-typography-body-xs);">4 hours ago</span>
+                      </goa-tooltip>
+                    </div>
+                    <p>Hover on the time it was added to see the full date and time.</p>
+                  </goa-container>     
+                `}
+      />}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  <goab-container type="non-interactive" accent="thick" [title]="containerTitle">
+                    <ng-template #containerTitle>
+                      Joan Smith
+                      <goab-tooltip content="Nov 23, 2023 at 10:35 am">
+                        <span style="color:var(--goa-color-text-secondary); font: var(--goa-typography-body-xs);">4 hours ago</span>
+                      </goab-tooltip>
+                    </ng-template>
+                    <p>Hover on the time it was added to see the full date and time.</p>
+                  </goab-container>     
+                `}
+      />}
+
+      {/*React code*/}
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  <GoAContainer
+                    type="non-interactive"
+                    accent="thick"
+                    heading={
+                      <span>
+                        Joan Smith 
+                        <GoATooltip content="Nov 23, 2023 at 10:35 am">
+                          <span style={{
+                            color:"var(--goa-color-text-secondary)",
+                            font: "var(--goa-typography-body-xs)" }}>
+                            4 hours ago
+                          </span>
+                        </GoATooltip>
+                      </span>
+                    }>
+                    <p>Hover on the time it was added to see the full date and time.</p>
+                  </GoAContainer>
+                `}
+      />}
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  <GoabContainer
+                    type="non-interactive"
+                    accent="thick"
+                    heading={
+                      <span>
+                        Joan Smith 
+                        <GoabTooltip content="Nov 23, 2023 at 10:35 am">
+                          <span style={{
+                            color:"var(--goa-color-text-secondary)",
+                            font: "var(--goa-typography-body-xs)" }}>
+                            4 hours ago
+                          </span>
+                        </GoabTooltip>
+                      </span>
+                    }>
+                    <p>Hover on the time it was added to see the full date and time.</p>
+                  </GoabContainer>
+                `}
+      />}
+
+      <GoabContainer
+        type="non-interactive"
+        accent="thick"
+        heading={
+          <span>
+                  Joan Smith
+                  <GoabTooltip content="Nov 23, 2023 at 10:35 am">
+                    <span style={{ color:"var(--goa-color-text-secondary)", font: "var(--goa-typography-body-xs)" }} >4 hours ago</span>
+                  </GoabTooltip>
+                </span>}>
+        <p>Hover on the time it was added to see the full date and time.</p>
+      </GoabContainer>
+    </Sandbox>
+  )
+}
diff --git a/src/examples/tooltip/TooltipShowLabelForIconOnlyButtonExample.tsx b/src/examples/tooltip/TooltipShowLabelForIconOnlyButtonExample.tsx
new file mode 100644
index 000000000..07f9444fa
--- /dev/null
+++ b/src/examples/tooltip/TooltipShowLabelForIconOnlyButtonExample.tsx
@@ -0,0 +1,20 @@
+import { Sandbox } from "@components/sandbox";
+import { GoabButtonGroup, GoabIconButton, GoabTooltip } from "@abgov/react-components";
+
+export const TooltipShowLabelForIconOnlyButtonExample = () => {
+  return (
+    <Sandbox fullWidth>
+      <GoabButtonGroup alignment="center">
+        <GoabTooltip content="Edit">
+          <GoabIconButton icon="pencil" ariaLabel="Pencil icon"/>
+        </GoabTooltip>
+        <GoabTooltip content="Alerts">
+          <GoabIconButton icon="notifications" ariaLabel="Alert icon"/>
+        </GoabTooltip>
+        <GoabTooltip content="Settings">
+          <GoabIconButton icon="settings" ariaLabel="Settings icon"/>
+        </GoabTooltip>
+      </GoabButtonGroup>
+    </Sandbox>
+  )
+}
diff --git a/src/global-constants.ts b/src/global-constants.ts
new file mode 100644
index 000000000..449ee6cab
--- /dev/null
+++ b/src/global-constants.ts
@@ -0,0 +1,3 @@
+export const MAX_CONTENT_WIDTH = "1360px";
+export const DEFAULT_VERSION = "old";
+export const DEFAULT_LANGUAGE = "react";
diff --git a/src/hooks/useSandboxFormItem.tsx b/src/hooks/useSandboxFormItem.tsx
index 126710f8f..8c5c96dff 100644
--- a/src/hooks/useSandboxFormItem.tsx
+++ b/src/hooks/useSandboxFormItem.tsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { ComponentBinding } from "@components/sandbox";
-import { GoAFormItemProps } from "@abgov/react-components";
+import { GoabFormItemProps } from "@abgov/react-components";
 
-export const useSandboxFormItem = (initialProps: GoAFormItemProps) => {
+export const useSandboxFormItem = (initialProps: GoabFormItemProps) => {
   const [formItemBindings, setFormItemBindings] = useState<ComponentBinding[]>(
     [
       {
diff --git a/src/routes/components/Accordion.tsx b/src/routes/components/Accordion.tsx
index 12bf9036d..0d004b60b 100644
--- a/src/routes/components/Accordion.tsx
+++ b/src/routes/components/Accordion.tsx
@@ -1,9 +1,9 @@
 import {
-  GoAAccordion,
-  GoAAccordionProps,
-  GoABadge,
-  GoATab,
-  GoATabs
+  GoabAccordion,
+  GoabAccordionProps,
+  GoabBadge,
+  GoabTab,
+  GoabTabs,
 } from "@abgov/react-components";
 import {
   ComponentProperties,
@@ -13,8 +13,13 @@ import { ComponentBinding, Sandbox } from "@components/sandbox";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import { useState } from "react";
 import AccordionExamples from "@examples/accordion/AccordionExamples.tsx";
-import { GoAHeadingSize } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { GoabAccordionHeadingSize } from "@abgov/ui-components-common";
+import {
+  LegacyMarginProperty,
+  LegacyTestIdProperties,
+  MarginProperty, TestIdProperty
+} from "@components/component-properties/common-properties.ts";
 
 // == Page props ==
 const componentName = "Accordion";
@@ -25,15 +30,16 @@ const relatedComponents = [
   { link: "/components/tabs", name: "Tabs" },
 ];
 
-type ComponentPropsType = GoAAccordionProps;
+type ComponentPropsType = GoabAccordionProps;
 type CastingType = {
   heading: string;
-  headingSize: GoAHeadingSize;
+  headingSize: GoabAccordionHeadingSize;
   children: React.ReactNode;
   [key: string]: unknown;
 };
 
-export default function AccordionPage() {  
+export default function AccordionPage() {
+
   const [accordionProps, setAccordionProps] = useState<ComponentPropsType>({
     heading: "Heading",
     headingSize: "medium",
@@ -64,8 +70,8 @@ export default function AccordionPage() {
     {
       label: "Open",
       type: "boolean",
-      name: "open", 
-      value: false
+      name: "open",
+      value: false,
     },
     {
       label: "Max Width",
@@ -76,7 +82,7 @@ export default function AccordionPage() {
     },
   ]);
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "heading",
       type: "string",
@@ -140,34 +146,69 @@ export default function AccordionPage() {
       lang: "angular",
     },
     {
-      name: "testId",
-      type: "string",
+      name: "_change",
+      lang: "angular",
+      type: "CustomEvent",
+      description: "Callback function when accordion heading is clicked.",
+    },
+    {
+      name: "onChange",
       lang: "react",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+      type: "(open: boolean) => void",
+      description: "Callback function when accordion heading is clicked.",
     },
+    ...LegacyTestIdProperties,
+    LegacyMarginProperty
+  ];
+
+  const componentProperties: ComponentProperty[] = [
     {
-      name: "testid",
+      name: "heading",
       type: "string",
-      lang: "angular",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+      required: true,
+      description: "Sets the heading text.",
     },
     {
-      name: "mt,mr,mb,ml",
-      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
-      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+      name: "secondaryText",
+      type: "string",
+      description: "Sets secondary text.",
     },
     {
-      name: "_change",
+      name: "open",
+      type: "boolean",
+      defaultValue: "false",
+      description: "Sets the state of the accordion container open or closed.",
+    },
+    {
+      name: "headingSize",
+      type: "GoabAccordionHeadingSize (small | medium)",
+      defaultValue: "small",
+      description: "Sets the heading size of the accordion container heading.",
+    },
+    {
+      name: "headingContent",
+      type: "ReactNode",
+      lang: "react",
+      description: "Add components to the accordion container heading such as badges.",
+    },
+    {
+      name: "headingContent",
+      type: "TemplateRef<any>",
       lang: "angular",
-      type: "CustomEvent",
-      description: "Callback function when accordion heading is clicked.",
+      description: "Add components to the accordion container heading such as badges.",
+    },
+    {
+      name: "maxWidth",
+      type: "string",
+      description: "Sets the maximum width of the accordion.",
     },
     {
       name: "onChange",
-      lang: "react",
       type: "(open: boolean) => void",
       description: "Callback function when accordion heading is clicked.",
-    }
+    },
+    TestIdProperty,
+    MarginProperty,
   ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
@@ -177,31 +218,41 @@ export default function AccordionPage() {
 
   return (
     <div className="accordion-page">
-      <ComponentHeader name={componentName} category={category} description={description} relatedComponents={relatedComponents} />
+      <ComponentHeader
+        name={`${componentName}`}
+        category={category}
+        description={description}
+        relatedComponents={relatedComponents}
+      />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
-            <h2 id="component" style={{display: "none"}}>Component</h2>
+        <GoabTabs>
+          <GoabTab heading="Code examples">
+            <h2 id="component" style={{ display: "none" }}>
+              Component
+            </h2>
             <Sandbox properties={accordionBindings} onChange={onSandboxChange} fullWidth>
-              <GoAAccordion {...accordionProps}>
+              <GoabAccordion {...accordionProps}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                 exercitation ullamco laboris nisi
-              </GoAAccordion>
+              </GoabAccordion>
             </Sandbox>
-            <ComponentProperties properties={componentProperties} />
+            <ComponentProperties
+              properties={componentProperties}
+              oldProperties={oldComponentProperties}
+            />
             <AccordionExamples />
-          </GoATab>
+          </GoabTab>
 
-          <GoATab
-            heading={<>
-              Design guidelines
-              <GoABadge type="information" content="In progress" />
-            </>}
-          >
-            </GoATab>
-        </GoATabs>
+          <GoabTab
+            heading={
+              <>
+                Design guidelines
+                <GoabBadge type="information" content="In progress" />
+              </>
+            }></GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </div>
   );
diff --git a/src/routes/components/AllComponents.tsx b/src/routes/components/AllComponents.tsx
index 51a19967b..2ba71dcae 100644
--- a/src/routes/components/AllComponents.tsx
+++ b/src/routes/components/AllComponents.tsx
@@ -1,8 +1,9 @@
-import { GoAGrid, GoAInput, GoAFormItem } from "@abgov/react-components";
+import { GoabGrid, GoabInput, GoabFormItem } from "@abgov/react-components";
 import { ComponentCard, Props as ComponentProps } from "@components/component-card/ComponentCard";
 import { ReactNode, useState } from "react";
 import "./AllComponents.css";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { GoabInputOnChangeDetail } from "@abgov/ui-components-common";
 
 export default function AllComponentsPage() {
   const cards: ComponentProps[] = [
@@ -314,6 +315,12 @@ export default function AllComponentsPage() {
       tags: ["gap", "margin", "padding", "space", "utilities"],
       description: "Negative area between the components and the interface.",
     },
+    {
+      name: "text",
+      groups: ["utilities"],
+      tags: ["heading", "font", "typography", "utilities"],
+      description: "Provides consistent sizing, spacing, and colour to written content."
+    }
   ];
 
   function getComponentsByGroup(group: string): ReactNode[] {
@@ -368,57 +375,57 @@ export default function AllComponentsPage() {
         </h3>
       </div>
 
-      <GoAFormItem helpText="Search by keyword, category, or name" mb="xl">
-      <GoAInput
+      <GoabFormItem helpText="Search by keyword, category, or name" mb="xl">
+      <GoabInput
         leadingIcon="search" 
         name="filter"
         type="text"
         value=""
         width="100%"
-        onChange={(_name, value) => filterComponents(value)}
+        onChange={(event: GoabInputOnChangeDetail) => filterComponents(event.value)}
       />
-        </GoAFormItem>
+        </GoabFormItem>
 
-      {mode === "search" && <GoAGrid minChildWidth="300px">{getComponentsByFilter()}</GoAGrid>}
+      {mode === "search" && <GoabGrid minChildWidth="300px">{getComponentsByFilter()}</GoabGrid>}
 
       {mode === "list" && (
         <ComponentContent tocCssQuery="h2[id], h3[id]">
           <h2 id="content">Content layout</h2>
-          <GoAGrid minChildWidth="15rem" gap="xl">
+          <GoabGrid minChildWidth="15rem" gap="xl">
             {getComponentsByGroup("content")}
-          </GoAGrid>
+          </GoabGrid>
           <div className="back-to-top">
             <a href="#top">Back to top</a>
           </div>
 
           <h2 id="feedback">Feedback and alerts</h2>
-          <GoAGrid minChildWidth="15rem" gap="xl">
+          <GoabGrid minChildWidth="15rem" gap="xl">
             {getComponentsByGroup("feedback")}
-          </GoAGrid>
+          </GoabGrid>
           <div className="back-to-top">
             <a href="#top">Back to top</a>
           </div>
 
           <h2 id="inputs">Inputs and actions</h2>
-          <GoAGrid minChildWidth="15rem" gap="xl">
+          <GoabGrid minChildWidth="15rem" gap="xl">
             {getComponentsByGroup("inputs")}
-          </GoAGrid>
+          </GoabGrid>
           <div className="back-to-top">
             <a href="#top">Back to top</a>
           </div>
 
           <h2 id="structure">Structure and navigation</h2>
-          <GoAGrid minChildWidth="15rem" gap="xl">
+          <GoabGrid minChildWidth="15rem" gap="xl">
             {getComponentsByGroup("structure")}
-          </GoAGrid>
+          </GoabGrid>
           <div className="back-to-top">
             <a href="#top">Back to top</a>
           </div>
 
           <h2 id="utilities">Utilities</h2>
-          <GoAGrid minChildWidth="15rem" gap="xl">
+          <GoabGrid minChildWidth="15rem" gap="xl">
             {getComponentsByGroup("utilities")}
-          </GoAGrid>
+          </GoabGrid>
           <div className="back-to-top">
             <a href="#top">Back to top</a>
           </div>
diff --git a/src/routes/components/AppFooter.tsx b/src/routes/components/AppFooter.tsx
index 4c16baa6d..b9d76ed6c 100644
--- a/src/routes/components/AppFooter.tsx
+++ b/src/routes/components/AppFooter.tsx
@@ -1,12 +1,9 @@
 import {
-  GoAAppFooter,
-  GoAAppFooterMetaSection,
-  GoAFooterNavSectionProps,
-  GoAAppFooterNavSection,
-  GoAAppFooterProps,
-  GoABadge,
-  GoATab,
-  GoATabs,
+  GoabAppFooter,
+  GoabAppFooterProps,
+  GoabBadge,
+  GoabTab,
+  GoabTabs,
 } from "@abgov/react-components";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import {
@@ -16,8 +13,8 @@ import {
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import { useState, useContext } from "react";
-import { CodeSnippet } from "@components/code-snippet/CodeSnippet";
-import { LanguageContext } from "@components/sandbox";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { AppFooterExamples } from "@examples/app-footer/AppFooterExamples.tsx";
 
 // == Page props ==
 
@@ -26,25 +23,21 @@ const description = "Provides information related your service at the bottom of
 const componentCategory = Category.STRUCTURE_AND_NAVIGATION;
 const relatedComponents = [
   { link: "/components/header", name: "Header" },
-  { link: "/patterns", name: "Layout" },
+  { link: "/patterns/layout", name: "Layout" },
 ];
-type ComponentPropsType = GoAAppFooterProps;
-type FooterNavPropsType = GoAFooterNavSectionProps;
+type ComponentPropsType = GoabAppFooterProps;
+
 type CastingType = {
   // add any required props here
   [key: string]: unknown;
 };
 
 export default function AppFooterPage() {
-  const language = useContext(LanguageContext);
+  const {language} = useContext(LanguageVersionContext);
 
-  const [appFooterProps, setAppFooterProps] = useState<ComponentPropsType>({
+  const [sandbox1Props, setSandbox1Props] = useState<ComponentPropsType>({
     maxContentWidth: "100%",
   });
-  const [appFooterNavProps, setAppFooterNavProps] = useState<FooterNavPropsType>({
-    maxColumnCount: 1,
-    heading: "",
-  });
   const [appFooterBindings, setAppFooterBindings] = useState<ComponentBinding[]>([
     {
       label: "Max content width",
@@ -54,27 +47,6 @@ export default function AppFooterPage() {
     },
   ]);
 
-  const [appFooterNavBindings, setAppFooterNavBindings] = useState<ComponentBinding[]>([
-    {
-      label: "Max content width",
-      type: "string",
-      name: "maxContentWidth",
-      value: "100%",
-    },
-    {
-      label: "Max footer nav columns",
-      type: "number",
-      name: "maxColumnCount",
-      value: 1,
-    },
-    {
-      label: "Heading",
-      type: "string",
-      name: "heading",
-      value: "",
-    },
-  ]);
-
   const componentProperties: ComponentProperty[] = [
     {
       name: "maxContentWidth",
@@ -107,21 +79,17 @@ export default function AppFooterPage() {
     {
       name: "slot",
       lang: "angular",
+      required: true,
       type: "nav",
       description: "Links to nav information to display in the footer",
     },
   ];
 
   function onSandbox1Change(bindings: ComponentBinding[], props: Record<string, unknown>) {
-    setAppFooterProps(props as CastingType);
+    setSandbox1Props(props as CastingType);
     setAppFooterBindings(bindings);
   }
 
-  function onSandbox2Change(bindings: ComponentBinding[], props: Record<string, unknown>) {
-    setAppFooterNavProps(props as CastingType);
-    setAppFooterNavBindings(bindings);
-  }
-
   return (
     <>
       <ComponentHeader
@@ -131,14 +99,14 @@ export default function AppFooterPage() {
         relatedComponents={relatedComponents}
       />
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{ display: "none" }}>
               Component
             </h2>
             <h3>Basic Footer</h3>
             <Sandbox properties={appFooterBindings} onChange={onSandbox1Change} fullWidth>
-              <GoAAppFooter {...appFooterProps} />
+              <GoabAppFooter {...sandbox1Props} />
             </Sandbox>
 
             {/*Component properties table*/}
@@ -156,223 +124,20 @@ export default function AppFooterPage() {
             )}
 
             {/* Examples*/}
-            <h2 id="component-examples" className="hidden" aria-hidden="true">
-              Examples
-            </h2>
-
-            <h3 id="component-example-footer-meta">Show quick links</h3>
-            <Sandbox skipRender fullWidth>
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                <goa-app-footer maxcontentwidth="100%">
-                  <goa-app-footer-meta-section slot="meta">
-                    <a href="privacy.html">
-                      Privacy
-                    </a>
-                    <a href="disclaimer.html">
-                      Disclaimer
-                    </a>
-                    <a href="accessibility.html">
-                      Accessibility
-                    </a>
-                    <a href="using-alberta.html">
-                      Using Alberta.ca
-                    </a>
-                  </goa-app-footer-meta-section>
-                </goa-app-footer>
-               `}
-              />
-
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                 <GoAAppFooter maxContentWidth="100%">
-                  <GoAAppFooterMetaSection>
-                    <a href="privacy.html">
-                      Privacy
-                    </a>
-                    <a href="disclaimer.html">
-                      Disclaimer
-                    </a>
-                    <a href="accessibility.html">
-                      Accessibility
-                    </a>
-                    <a href="using-alberta.html">
-                      Using Alberta.ca
-                    </a>
-                  </GoAAppFooterMetaSection>
-                </GoAAppFooter>
-              `}
-              />
-
-              <GoAAppFooter {...appFooterProps}>
-                <GoAAppFooterMetaSection>
-                  <a href="privacy.html">Privacy</a>
-                  <a href="disclaimer.html">Disclaimer</a>
-                  <a href="accessibility.html">Accessibility</a>
-                  <a href="using-alberta.html">Using Alberta.ca</a>
-                </GoAAppFooterMetaSection>
-              </GoAAppFooter>
-            </Sandbox>
-
-            <h3 id="component-example-footer-secondary-nav">
-              Show links to navigation items
-            </h3>
-            <Sandbox
-              skipRender
-              properties={appFooterNavBindings}
-              onChange={onSandbox2Change}
-              fullWidth>
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                <goa-app-footer maxcontentwidth="100%">
-                  <goa-app-footer-nav-section slot="nav" maxcolumncount="1">
-                    <a href="a.html">
-                      Arts and culture
-                    </a>
-                    <a href="b.html">
-                      Education and training
-                    </a>
-                    <a href="c.html">
-                      Family and social supports
-                    </a>
-                    <a href="d.html">
-                      Housing and community
-                    </a>
-                    <a href="e.html">
-                      Life events
-                    </a>
-                    <a href="f.html">
-                      Business and economy
-                    </a>
-                    <a href="g.html">
-                      Emergencies and public safety
-                    </a>
-                    <a href="h.html">
-                      Government
-                    </a>
-                    <a href="i.html">
-                      Jobs and employment
-                    </a>
-                    <a href="j.html">
-                      Moving to Alberta
-                    </a>
-                  </goa-app-footer-nav-section>
-                  <goa-app-footer-meta-section slot="meta">
-                    <a href="privacy.html">
-                      Privacy
-                    </a>
-                    <a href="disclaimer.html">
-                      Disclaimer
-                    </a>
-                    <a href="accessibility.html">
-                      Accessibility
-                    </a>
-                    <a href="using-alberta.html">
-                      Using Alberta.ca
-                    </a>
-                  </goa-app-footer-meta-section>
-                </goa-app-footer>
-               `}
-              />
-
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                 <GoAAppFooter maxContentWidth="100%">
-                  <GoAAppFooterNavSection maxColumnCount=1>
-                    <a href="a.html">
-                      Arts and culture
-                    </a>
-                    <a href="b.html">
-                      Education and training
-                    </a>
-                    <a href="c.html">
-                      Family and social supports
-                    </a>
-                    <a href="d.html">
-                      Housing and community
-                    </a>
-                    <a href="e.html">
-                      Life events
-                    </a>
-                    <a href="f.html">
-                      Business and economy
-                    </a>
-                    <a href="g.html">
-                      Emergencies and public safety
-                    </a>
-                    <a href="h.html">
-                      Government
-                    </a>
-                    <a href="i.html">
-                      Jobs and employment
-                    </a>
-                    <a href="j.html">
-                      Moving to Alberta
-                    </a>
-                  </GoAAppFooterNavSection>
-                  <GoAAppFooterMetaSection>
-                    <a href="privacy.html">
-                      Privacy
-                    </a>
-                    <a href="disclaimer.html">
-                      Disclaimer
-                    </a>
-                    <a href="accessibility.html">
-                      Accessibility
-                    </a>
-                    <a href="using-alberta.html">
-                      Using Alberta.ca
-                    </a>
-                  </GoAAppFooterMetaSection>
-                </GoAAppFooter>
-              `}
-              />
+            <AppFooterExamples/>
 
-              <GoAAppFooter {...appFooterProps}>
-                <GoAAppFooterNavSection {...appFooterNavProps}>
-                  <a href="a.html">Arts and culture</a>
-                  <a href="b.html">Education and training</a>
-                  <a href="c.html">Family and social supports</a>
-                  <a href="d.html">Housing and community</a>
-                  <a href="e.html">Life events</a>
-                  <a href="f.html">Business and economy</a>
-                  <a href="g.html">Emergencies and public safety</a>
-                  <a href="h.html">Government</a>
-                  <a href="i.html">Jobs and employment</a>
-                  <a href="j.html">Moving to Alberta</a>
-                </GoAAppFooterNavSection>
-                <GoAAppFooterMetaSection>
-                  <a href="privacy.html">Privacy</a>
-                  <a href="disclaimer.html">Disclaimer</a>
-                  <a href="accessibility.html">Accessibility</a>
-                  <a href="using-alberta.html">Using Alberta.ca</a>
-                </GoAAppFooterMetaSection>
-              </GoAAppFooter>
-            </Sandbox>
-          </GoATab>
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }>
             <p>Coming Soon</p>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/AppHeader.tsx b/src/routes/components/AppHeader.tsx
index 6457bb7e2..1f274907a 100644
--- a/src/routes/components/AppHeader.tsx
+++ b/src/routes/components/AppHeader.tsx
@@ -1,20 +1,20 @@
 import {
-  GoAAppHeader,
-  GoAAppHeaderMenu,
-  GoAAppHeaderProps,
-  GoABadge, GoARadioGroup, GoARadioItem,
-  GoATab,
-  GoATabs
+  GoabAppHeader,
+  GoabAppHeaderProps,
+  GoabBadge,
+  GoabTab,
+  GoabTabs
 } from "@abgov/react-components";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import {
   ComponentProperties,
   ComponentProperty,
 } from "@components/component-properties/ComponentProperties.tsx";
-import { CodeSnippet } from "@components/code-snippet/CodeSnippet";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import { useState } from "react";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { LegacyTestIdProperties, TestIdProperty } from "@components/component-properties/common-properties.ts";
+import { AppHeaderExamples } from "@examples/app-header/AppHeaderExamples.tsx";
 
 const componentName = "Header";
 const description =
@@ -22,10 +22,10 @@ const description =
 const componentCategory = Category.STRUCTURE_AND_NAVIGATION;
 const relatedComponents = [
   { link: "/components/footer", name: "Footer" },
-  { link: "/patterns", name: "Layout" },
+  { link: "/patterns/layout", name: "Layout" },
   { link: "/components/microsite-header", name: "Microsite header" }
 ];
-type ComponentPropsType = GoAAppHeaderProps;
+type ComponentPropsType = GoabAppHeaderProps;
 type CastingType = {
   // add any required props here
   [key: string]: unknown;
@@ -56,7 +56,7 @@ export default function AppHeaderPage() {
     },
   ]);
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "url",
       type: "string",
@@ -93,18 +93,7 @@ export default function AppHeaderPage() {
       description: "Sets the breakpoint in px for the full menu to display.",
       lang: "react"
     },
-    {
-      name: "testId",
-      type: "string",
-      lang: "react",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
-    },
-    {
-      name: "testid",
-      type: "string",
-      lang: "angular",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
-    },
+    ...LegacyTestIdProperties,
     {
       name: "hasmenuclickhandler",
       type: "boolean",
@@ -124,16 +113,42 @@ export default function AppHeaderPage() {
       description: "Function invoked when the menu hamburger button (on mobile/tablet device) is clicked."
     }
   ];
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "url",
+      type: "string",
+      description: "Set the URL to link from the alberta.ca logo. A full url is required.",
+    },
+    {
+      name: "heading",
+      type: "string",
+      description: "Set the service name to display in the app header.",
+    },
+    {
+      name: "maxContentWidth",
+      type: "string",
+      description: "Maximum width of the content area.",
+      defaultValue: "100%",
+    },
+    {
+      name: "fullMenuBreakpoint",
+      type: "number",
+      description: "Sets the breakpoint in px for the full menu to display.",
+    },
+    TestIdProperty,
+    {
+      name: "onMenuClick",
+      type: "() => void",
+      description: "Function invoked when the menu hamburger button (on mobile/tablet device) is clicked."
+    }
+  ];
+
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
     setAppHeaderProps(props as CastingType);
     setAppHeaderBindings(bindings);
   }
 
-  const [deviceWidth, setDeviceWidth] = useState("5000");
-  function handleMenuClick() {
-    alert("Menu not being displayed and you can do anything");
-  }
   return (
     <>
       <ComponentHeader
@@ -144,180 +159,31 @@ export default function AppHeaderPage() {
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{ display: "none" }}>
               Component
             </h2>
             <Sandbox properties={appHeaderBindings} onChange={onSandboxChange} fullWidth>
-              <GoAAppHeader {...appHeaderProps} />
+              <GoabAppHeader {...appHeaderProps} />
             </Sandbox>
 
             {/*Component properties*/}
-            <ComponentProperties properties={componentProperties} />
-
-            {/*Examples*/}
-            <h2 id="component-examples" className="hidden" aria-hidden="true">
-              Examples
-            </h2>
-
-            <h3 id="component-example-header-navigation">Header with navigation</h3>
-            <Sandbox fullWidth skipRender>
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                <goa-microsite-header type="live"></goa-microsite-header>
-                <goa-app-header url="https://example.com" heading="Ticket and Fine Payments">
-                  <a href="#">Support</a>
-                  <goa-app-header-menu heading="Tickets" leadingIcon="ticket">
-                    <a href="#">Cases</a>
-                    <a href="#">Payments</a>
-                    <a href="#">Outstanding</a>
-                  </goa-app-header-menu>
-                  <a href="#" className="interactive">Sign in</a>
-                </goa-app-header>
-              `}
-              />
-
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                <GoAAppHeader url="https://example.com" heading="Ticket and Fine Payments">
-                  <a href="#">Support</a>
-                  <GoAAppHeaderMenu heading="Tickets" leadingIcon="ticket">
-                    <a href="#">Cases</a>
-                    <a href="#">Payments</a>
-                    <a href="#">Outstanding</a>
-                  </GoAAppHeaderMenu>
-                  <a href="#" className="interactive">Sign in</a>
-                </GoAAppHeader>
-              `}
-              />
-              <GoAAppHeader url="https://www.alberta.ca" heading="Ticket and Fine Payments">
-                <a href="">Support</a>
-                <GoAAppHeaderMenu heading="Tickets" leadingIcon="ticket">
-                  <a>Cases</a>
-                  <a>Payments</a>
-                  <a>Outstanding</a>
-                </GoAAppHeaderMenu>
-                <a className="interactive">Sign in</a>
-              </GoAAppHeader>
-            </Sandbox>
-
-            <h3 id="component-example-with-menu-click">Header with menu click event</h3>
-            <Sandbox fullWidth skipRender>
-              <GoARadioGroup name="device" value={deviceWidth} onChange={(_, value) => setDeviceWidth(value)}>
-                <GoARadioItem value="600" label="Desktop"></GoARadioItem>
-                <GoARadioItem value="5000" label="Mobile"></GoARadioItem>
-              </GoARadioGroup>
-              <GoAAppHeader
-                url="https://example.com"
-                heading="Design System"
-                onMenuClick={handleMenuClick}
-                fullMenuBreakpoint={+deviceWidth}>
-                <a href="#">Support</a>
-                <GoAAppHeaderMenu heading="Tickets" leadingIcon="ticket">
-                  <a href="#">Cases</a>
-                  <a href="#">Payments</a>
-                  <a href="#">Outstanding</a>
-                </GoAAppHeaderMenu>
-                <a href="#" className="interactive">
-                  Sign in
-                </a>
-              </GoAAppHeader>
-
-              <CodeSnippet
-                lang="typescript"
-                tags={"angular"}
-                allowCopy={true}
-                code={`
-                export class MyComponent {
-                  deviceWidth = '5000';
-                  changeDeviceWidth(event: Event) {
-                    this.deviceWidth = (event as CustomEvent).detail.value;
-                  }
-                  
-                  handleMenuClick() {
-                    alert("Menu not being displayed and you can do anything");
-                  }
-                }
-              `}/>
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
 
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                 <goa-radio-group name="device" value="deviceWidth" (_change)="changeDeviceWidth($event)">
-                  <goa-radio-item value="600" label="Desktop"></goa-radio-item>
-                  <goa-radio-item value="5000" label="Mobile"></goa-radio-item>
-                 </goa-radio-group>
-                  
-                 <goa-app-header url="https://example.com" heading="Design System" [fullmenubreakpoint]="deviceWidth" [hasmenuclickhandler]="true" (_menuClick)="handleMenuClick()">
-                  <a href="#">Support</a>
-                  <goa-app-header-menu heading="Tickets" leadingIcon="ticket">
-                    <a href="#">Cases</a>
-                    <a href="#">Payments</a>
-                    <a href="#">Outstanding</a>
-                  </goa-app-header-menu>
-                  <a href="#" className="interactive">Sign in</a>
-                </goa-app-header>
-              `}
-              />
-
-              <CodeSnippet
-                lang="typescript"
-                tags={"react"}
-                allowCopy={true}
-                code={`
-                const [deviceWidth, setDeviceWidth] = useState("5000");
-                function handleMenuClick() {
-                  alert("Menu not being displayed and you can do anything");
-                }
-              `}/>
-
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                  <GoARadioGroup name="device" value={deviceWidth} onChange={(_, value) => setDeviceWidth(value)}>
-                    <GoARadioItem value="600" label="Desktop"></GoARadioItem>
-                    <GoARadioItem value="5000" label="Mobile"></GoARadioItem>
-                  </GoARadioGroup>
-                  
-                  <GoAAppHeader
-                    url="https://example.com"
-                    heading="Design System"
-                    onMenuClick={handleMenuClick}
-                    fullMenuBreakpoint={+deviceWidth}>
-                    <a href="#">Support</a>
-                    <GoAAppHeaderMenu heading="Tickets" leadingIcon="ticket">
-                      <a href="#">Cases</a>
-                      <a href="#">Payments</a>
-                      <a href="#">Outstanding</a>
-                    </GoAAppHeaderMenu>
-                    <a href="#" className="interactive">Sign in</a>
-                  </GoAAppHeader>
-              `}
-              />
-            </Sandbox>
-          </GoATab>
+            <AppHeaderExamples/>
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }>
             <p>Coming Soon</p>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Badge.tsx b/src/routes/components/Badge.tsx
index c4ed25af6..5e5ccbaa4 100644
--- a/src/routes/components/Badge.tsx
+++ b/src/routes/components/Badge.tsx
@@ -1,6 +1,6 @@
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
-import { GoABadge, GoATab, GoATabs, GoABadgeType, GoABadgeProps } from "@abgov/react-components";
-import { Sandbox, ComponentBinding } from "@components/sandbox";
+import { GoabBadge, GoabTab, GoabTabs, GoabBadgeProps } from "@abgov/react-components";
+import { ComponentBinding, Sandbox } from "@components/sandbox";
 import { useState } from "react";
 import {
   ComponentProperties,
@@ -8,6 +8,7 @@ import {
 } from "@components/component-properties/ComponentProperties.tsx";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import BadgeExamples from "@examples/badge/BadgeExamples.tsx";
+import { GoabBadgeType } from "@abgov/ui-components-common";
 
 // == Page props ==
 
@@ -17,20 +18,20 @@ const description =
 const category = Category.FEEDBACK_AND_ALERTS;
 const relatedComponents = [
   {
-    link: "/components/chip", name: "Chip"
+    link: "/components/filter-chip", name: "Filter Chip"
   },
   {
-    link: "/components/Icons", name: "Icons"
+    link: "/components/icons", name: "Icons"
   },
   {
-    link: "/components/Table", name: "Table"
+    link: "/components/table", name: "Table"
   }
 ];
 
-type ComponentPropsType = GoABadgeProps;
+type ComponentPropsType = GoabBadgeProps;
 type CastingType = {
   // add any required props here
-  type: GoABadgeType;
+  type: GoabBadgeType;
   content: string;
   [key: string]: unknown;
 };
@@ -69,7 +70,7 @@ export default function BadgePage() {
     },
   ]);
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "type",
       type: "success | important | information | emergency | dark | midtone | light",
@@ -118,6 +119,41 @@ export default function BadgePage() {
     },
   ];
 
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "type",
+      type: "GoabBadgeType(success | important | information | emergency | dark | midtone | light)",
+      description: "Define the context and colour of the badge",
+      required: true,
+    },
+    {
+      name: "icon",
+      type: "boolean",
+      description: "Includes an icon in the badge.",
+      defaultValue: "false",
+    },
+    {
+      name: "content",
+      type: "string",
+      description: "Text label of the badge.",
+    },
+    {
+      name: "ariaLabel",
+      type: "string",
+      description: "Accessible label.",
+    },
+    {
+      name: "testId",
+      type: "string",
+      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+    },
+    {
+      name: "mt,mr,mb,ml",
+      type: "Spacing(none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl)",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },
+  ]
+
   function onSandboxChange(badgeBindings: ComponentBinding[], props: Record<string, unknown>) {
     setBadgeBindings(badgeBindings);
     setBadgeProps(props as CastingType);
@@ -128,26 +164,25 @@ export default function BadgePage() {
       <ComponentHeader name={componentName} category={category} description={description} relatedComponents={relatedComponents} />
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
 
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{display: "none"}}>Component</h2>
             <Sandbox properties={badgeBindings} onChange={onSandboxChange}>
-              <GoABadge {...badgeProps} />
+              <GoabBadge {...badgeProps} />
             </Sandbox>
-            <ComponentProperties properties={componentProperties} />
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
             <BadgeExamples />
+          </GoabTab>
 
-          </GoATab>
-
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }
-          ></GoATab>
-        </GoATabs>
+          ></GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Block.tsx b/src/routes/components/Block.tsx
index 8c8418228..dc1f70f43 100644
--- a/src/routes/components/Block.tsx
+++ b/src/routes/components/Block.tsx
@@ -5,7 +5,7 @@ import {
   ComponentProperty,
 } from "@components/component-properties/ComponentProperties.tsx";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
-import { GoABadge, GoABlock, GoATab, GoATabs } from "@abgov/react-components";
+import { GoabBadge, GoabBlock, GoabTab, GoabTabs } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 
 export default function BlockPage() {
@@ -37,7 +37,7 @@ export default function BlockPage() {
     },
   ]);
   const [sandboxFullWidth, setSandboxFullWidth] = useState<boolean>(false);
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "gap",
       type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
@@ -63,6 +63,33 @@ export default function BlockPage() {
     },  
   ];
 
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "gap",
+      type: "Spacing (none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl)",
+      description: "Spacing between items",
+      defaultValue: "m",
+    },
+    {
+      name: "direction",
+      type: "GoabBlockDirection (row | column)",
+      description: "Stacking direction of child components",
+      defaultValue: "row",
+    },
+    {
+      name: "alignment",
+      type: "GoabBlockAlignment (center | start | end | normal) is",
+      description: "Primary axis alignment",
+      defaultValue: "normal",
+    },
+    {
+      name: "mt,mr,mb,ml",
+      type: "Spacing (none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl)",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },
+  ];
+
+
   useEffect(() => {
     const direction = blockBindings.find(binding => binding.name === "direction");
     setSandboxFullWidth(direction?.value === "column");
@@ -81,19 +108,19 @@ export default function BlockPage() {
         description="Used when grouping components into a block with consistent space between."
         relatedComponents={[
           { link: "/components/divider", name: "Divider" },
-          { link: "/components/Grid", name: "Grid" },
-          { link: "/patterns", name: "Layout" },
-          { link: "/component/spacer", name: "Spacer" },
+          { link: "/components/grid", name: "Grid" },
+          { link: "/patterns/layout", name: "Layout" },
+          { link: "/components/spacer", name: "Spacer" },
         ]}
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
 
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{display: "none"}}>Component</h2>
             <Sandbox properties={blockBindings} onChange={onSandboxChange} fullWidth={sandboxFullWidth}>
-              <GoABlock {...blockProps}>
+              <GoabBlock {...blockProps}>
                 <div
                   style={{
                     padding: "1rem",
@@ -124,21 +151,21 @@ export default function BlockPage() {
                 >
                   Item 3
                 </div>
-              </GoABlock>
+              </GoabBlock>
             </Sandbox>
             {/*Block table properties*/}
-            <ComponentProperties properties={componentProperties} />
-          </GoATab>
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }
-          ></GoATab>
-        </GoATabs>
+          ></GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Button.tsx b/src/routes/components/Button.tsx
index 2fce5c8d6..8ee72232c 100644
--- a/src/routes/components/Button.tsx
+++ b/src/routes/components/Button.tsx
@@ -1,19 +1,12 @@
 import { useState } from "react";
 import {
-  GoABadge,
-  GoABlock,
-  GoAButton,
-  GoAButtonGroup,
-  GoADropdown,
-  GoADropdownItem,
-  GoAFormItem,
-  GoAInput,
-  GoATab,
-  GoATabs,
+  GoabBadge,
+  GoabButton,
+  GoabTab,
+  GoabTabs,
 } from "@abgov/react-components";
 import { Sandbox, ComponentBinding } from "@components/sandbox";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet";
-import { GoAModal } from "@components/mock-modal/Modal";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader";
 import {
   ComponentProperties,
@@ -21,6 +14,13 @@ import {
 } from "@components/component-properties/ComponentProperties";
 import ICONS from "@routes/components/icons.json";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { ButtonExamples } from "@examples/button/ButtonExamples.tsx";
+import {
+  LegacyMarginProperty,
+  LegacyTestIdProperties,
+  MarginProperty,
+  TestIdProperty
+} from "@components/component-properties/common-properties.ts";
 
 export default function ButtonPage() {
   const [buttonProps, setButtonProps] = useState({});
@@ -64,7 +64,7 @@ export default function ButtonPage() {
     {label: "Width", type: "string", name: "width", value: ""},
     { label: "Disabled", type: "boolean", name: "disabled", value: false },
   ]);
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "type",
       type: "primary | submit | secondary | tertiary | start",
@@ -130,30 +130,65 @@ export default function ButtonPage() {
       type: "(e: any) => void",
       description: "Callback function when button is clicked.",
     },
+    ...LegacyTestIdProperties,
+    LegacyMarginProperty
+  ];
+  const componentProperties: ComponentProperty[] = [
     {
-      name: "testId",
-      type: "string",
-      lang: "react",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+      name: "type",
+      type: "GoabButtonType (primary | submit | secondary | tertiary | start)",
+      description: "Sets the type of button.",
+      defaultValue: "primary",
+    },
+    {
+      name: "size",
+      type: "GoabButtonSize (normal | compact)",
+      defaultValue: "normal",
+      description: "Sets the size of button.",
+    },
+    {
+      name: "variant",
+      type: "GoabButtonVariant (normal | destructive)",
+      defaultValue: "normal",
+      description: "Styles the button to show a destructive action.",
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      defaultValue: "false",
+      description: "Disables the button.",
+    },
+    {
+      name: "leadingIcon",
+      type: "GoabIconType",
+      description: "Shows an icon to the left of the text.",
+    },
+    {
+      name: "trailingIcon",
+      type: "GoabIconType",
+      description: "Shows an icon to the right of the text.",
     },
     {
-      name: "testid",
+      name: "width",
       type: "string",
-      lang: "angular",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+      description: "Sets the width of the button.",
     },
     {
-      name: "mt,mr,mb,ml",
-      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
-      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+      name: "onClick",
+      type: "() => void",
+      description: "Callback function when button is clicked.",
     },
+    TestIdProperty,
+    MarginProperty,
   ];
-  const noop = () => { };
+
+  const noop = () => {};
 
   function SandboxOnChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
     setButtonBindings(bindings);
     setButtonProps(props);
   }
+
   return (
     <>
       <ComponentHeader
@@ -161,16 +196,18 @@ export default function ButtonPage() {
         category={Category.INPUTS_AND_ACTIONS}
         description="Carry out an important action or to navigate to another page."
         relatedComponents={[
-          { link: "/components/buttonGroup", name: "Button group" },
+          { link: "/components/button-group", name: "Button group" },
           { link: "/components/icon-button", name: "Icon button" },
         ]}
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             {/*Button Sandbox*/}
-            <h2 id="component" style={{display: "none"}}>Component</h2>
+            <h2 id="component" style={{ display: "none" }}>
+              Component
+            </h2>
             <Sandbox properties={buttonBindings} onChange={SandboxOnChange}>
               <CodeSnippet
                 lang="typescript"
@@ -178,117 +215,48 @@ export default function ButtonPage() {
                 allowCopy={true}
                 code={`
                   export class SomeOtherComponent {
-                    onClick(event: Event) {
-                      console.log('clicked ', event);
+                    onClick() {
+                      console.log('clicked');
                     }
                   }
                 `}
               />
-              <GoAButton {...buttonProps} onClick={noop}>
-                Primary Button
-              </GoAButton>
-            </Sandbox>
-
-            {/*Button Table Properties*/}
-            <ComponentProperties properties={componentProperties} />
-
-            {/*Button Examples*/}
-            <h2 id="component-examples" className="hidden" aria-hidden="true">Examples</h2>
 
+              <CodeSnippet
+                lang="typescript"
+                tags="react"
+                allowCopy={true}
+                code={`
+                  function onClick() {
+                    console.log('clicked');
+                  }
+                `}
+              />
 
-            {/*Button Example 1*/}
-            <h3 id="component-example-ask-address">Ask a user for an address</h3>
-            <Sandbox flags={["reactive"]}>
-              
-            <GoABlock gap="xl" direction="column">
-              <GoAFormItem label="Street Address">
-                <GoAInput name="address" type="text" value="" onChange={noop} width="100%" />
-              </GoAFormItem>
-              <GoAFormItem label="Suite or unit #">
-                <GoAInput name="suite" type="text" value="" onChange={noop} width="100%" />
-              </GoAFormItem>
-              <GoAFormItem label="City/town">
-                <GoAInput name="city" type="text" value="" onChange={noop} width="100%" />
-              </GoAFormItem>
-
-              <GoABlock direction={"row"}>
-                <GoAFormItem label="Provice/territory">
-                  <GoADropdown onChange={noop} name="province" value="alberta">
-                    <GoADropdownItem label="Alberta" value="alberta" />
-                    <GoADropdownItem label="BC" value="bc" />
-                    <GoADropdownItem label="Manitoba" value="manitoba" />
-                    <GoADropdownItem label="New Brunswick" value="new-brunswick" />
-                    <GoADropdownItem label="Newfoundland and Labrador" value="newfoundland" />
-                    <GoADropdownItem label="Nova Scotia" value="nova-scotia" />
-                    <GoADropdownItem label="Ontario" value="ontario" />
-                    <GoADropdownItem label="Prince Edward Island" value="prince-edward-island" />
-                    <GoADropdownItem label="Quebec" value="quebec" />
-                    <GoADropdownItem label="Saskatchewan" value="saskatchewan" />
-                  </GoADropdown>
-                </GoAFormItem>
-
-                <GoAFormItem label="Postal Code">
-                  <GoAInput name="postalCode" type="text" value="" onChange={noop} width="100%" />
-                </GoAFormItem>
-              </GoABlock>
-              
-             </GoABlock>
-              
-              <GoAButtonGroup alignment="start" mt="2xl">
-                <GoAButton type="primary" onClick={noop}>
-                  Submit and continue
-                </GoAButton>
-                <GoAButton type="secondary" onClick={noop}>
-                  Cancel
-                </GoAButton>
-              </GoAButtonGroup>
-            </Sandbox>
-
-            {/*Button example 2*/}
-            <h3 id="component-example-confirm-action">Confirm a destructive action</h3>
-            <Sandbox flags={["reactive"]}>
-              <GoAModal heading="Are you sure you want to delete this record?">
-                <p>You cannot undo this action.</p>
-
-                <GoAButtonGroup alignment="end" mt="l">
-                  <GoAButton type="secondary" onClick={noop}>
-                    Cancel
-                  </GoAButton>
-                  <GoAButton type="primary" variant="destructive" onClick={noop}>
-                    Delete record
-                  </GoAButton>
-                </GoAButtonGroup>
-              </GoAModal>
+              <GoabButton {...buttonProps} onClick={noop}>
+                Primary Button
+              </GoabButton>
             </Sandbox>
 
-            {/*Button example 3*/}
-            <h3 id="component-example-disabled-button">Disabled button with a required field</h3>
-            <Sandbox flags={["reactive"]}>
-              <GoAFormItem label="Name" requirement="required">
-                <GoAInput name="input" type="text" value="" onChange={noop} width="100%" />
-              </GoAFormItem>
+            {/*Button Table Properties*/}
+            <ComponentProperties
+              oldProperties={oldComponentProperties}
+              properties={componentProperties}
+            />
 
-              <GoAButtonGroup alignment="start" mt="l">
-                <GoAButton disabled={true} onClick={noop}>
-                  Confirm
-                </GoAButton>
-                <GoAButton type="secondary" onClick={noop}>
-                  Cancel
-                </GoAButton>
-              </GoAButtonGroup>
-            </Sandbox>
-          </GoATab>
+            <ButtonExamples />
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }>
             <p>Coming Soon</p>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/ButtonGroup.tsx b/src/routes/components/ButtonGroup.tsx
index a3db59cd0..dd9463118 100644
--- a/src/routes/components/ButtonGroup.tsx
+++ b/src/routes/components/ButtonGroup.tsx
@@ -5,13 +5,14 @@ import {
   ComponentProperty,
 } from "@components/component-properties/ComponentProperties.tsx";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
-import { GoABadge, GoAButton, GoAButtonGroup, GoATab, GoATabs } from "@abgov/react-components";
-import { GoAButtonGroupAlignment } from "@abgov/react-components";
+import { GoabBadge, GoabButton, GoabButtonGroup, GoabTab, GoabTabs } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { GoabButtonGroupAlignment } from "@abgov/ui-components-common";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 
 export default function ButtonGroupPage() {
   const [buttonGroupProps, setButtonGroupProps] = useState({
-    alignment: "center" as GoAButtonGroupAlignment,
+    alignment: "center" as GoabButtonGroupAlignment,
   });
 
   const [buttonGroupBindings, setButtonGroupBindings] = useState<ComponentBinding[]>([
@@ -32,7 +33,7 @@ export default function ButtonGroupPage() {
     },
   ]);
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "alignment",
       type: "start | end | center",
@@ -62,13 +63,38 @@ export default function ButtonGroupPage() {
       type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
       description: "Apply margin to the top, right, bottom, and/or left of the component.",
     },
-  ]; 
+  ];
+
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "alignment",
+      type: "GoabButtonGroupAlignment (start | end | center)",
+      description: "Positions the button group in the page layout.",
+      required: true,
+    },
+    {
+      name: "gap",
+      type: "GoabButtonGroupGap (relaxed | compact)",
+      description: "Sets the spacing between buttons in the button group.",
+      defaultValue: "relaxed",
+    },
+    {
+      name: "testId",
+      type: "string",
+      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+    },
+    {
+      name: "mt,mr,mb,ml",
+      type: "Spacing (none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl)",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },
+  ];
 
   const noop = () => { };
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
     setButtonGroupBindings(bindings);
-    setButtonGroupProps(props as { alignment: GoAButtonGroupAlignment;[key: string]: unknown });
+    setButtonGroupProps(props as { alignment: GoabButtonGroupAlignment;[key: string]: unknown });
   }
 
   return (
@@ -90,35 +116,58 @@ export default function ButtonGroupPage() {
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
 
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             {/*Button Group Sandbox*/}
             <h2 id="component" style={{display: "none"}}>Component</h2>
             <Sandbox properties={buttonGroupBindings} onChange={onSandboxChange} fullWidth>
-              <GoAButtonGroup {...buttonGroupProps}>
-                <GoAButton type="primary" onClick={noop}>
+              <CodeSnippet
+                lang="typescript"
+                tags="angular"
+                allowCopy={true}
+                code={`
+                  export class SomeOtherComponent {
+                    onClick() {
+                      console.log('clicked');
+                    }
+                  }
+                `}
+              />
+
+              <CodeSnippet
+                lang="typescript"
+                tags="react"
+                allowCopy={true}
+                code={`
+                  function onClick() {
+                    console.log('clicked');
+                  }
+                `}
+              />
+              <GoabButtonGroup {...buttonGroupProps}>
+                <GoabButton type="primary" onClick={noop}>
                   Button
-                </GoAButton>
-                <GoAButton type="secondary" onClick={noop}>
+                </GoabButton>
+                <GoabButton type="secondary" onClick={noop}>
                   Button
-                </GoAButton>
-                <GoAButton type="tertiary" onClick={noop}>
+                </GoabButton>
+                <GoabButton type="tertiary" onClick={noop}>
                   Button
-                </GoAButton>
-              </GoAButtonGroup>
+                </GoabButton>
+              </GoabButtonGroup>
             </Sandbox>
 
-            <ComponentProperties properties={componentProperties} />
-          </GoATab>
-          <GoATab
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties}/>
+          </GoabTab>
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }
-          ></GoATab>
-        </GoATabs>
+          ></GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Callout.tsx b/src/routes/components/Callout.tsx
index 2ab6a6930..fae50771a 100644
--- a/src/routes/components/Callout.tsx
+++ b/src/routes/components/Callout.tsx
@@ -1,14 +1,10 @@
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import {
-  GoABadge,
-  GoAButton,
-  GoAButtonGroup,
-  GoACallout,
-  GoACalloutProps,
-  GoACalloutType,
-  GoASpacer,
-  GoATab,
-  GoATabs,
+  GoabBadge,
+  GoabTab,
+  GoabTabs,
+  GoabCallout,
+  GoabCalloutProps
 } from "@abgov/react-components";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import { useState } from "react";
@@ -18,7 +14,13 @@ import {
   ComponentProperty,
 } from "@components/component-properties/ComponentProperties.tsx";
 import { ComponentContent } from "@components/component-content/ComponentContent";
-import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabCalloutType } from "@abgov/ui-components-common";
+import {
+  LegacyMarginProperty,
+  LegacyTestIdProperties, MarginProperty,
+  TestIdProperty
+} from "@components/component-properties/common-properties.ts";
+import { CalloutExamples } from "@examples/callout/CalloutExamples.tsx";
 
 // == Page props ==
 
@@ -26,11 +28,11 @@ const componentName = "Callout";
 const description = "Communicate important information through a strong visual emphasis.";
 const category = Category.FEEDBACK_AND_ALERTS;
 const relatedComponents = [
-  { link: "/components/Notification-banner", name: "Notification banner" },
+  { link: "/components/notification-banner", name: "Notification banner" },
 ];
-type ComponentPropsType = GoACalloutProps;
+type ComponentPropsType = GoabCalloutProps;
 type CastingType = {
-  type: GoACalloutType;
+  type: GoabCalloutType;
   [key: string]: unknown;
 };
 
@@ -69,7 +71,7 @@ export default function CalloutPage() {
     },
   ]);
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "type",
       type: ["success", "important", "information", "emergency", "event"],
@@ -101,36 +103,61 @@ export default function CalloutPage() {
       lang: "angular",
     },
     {
-      name: "testId",
-      type: "string",
+      name: "arialive",
+      lang: "angular",
+      type: ["off", "polite", "assertive"],
+      description: "Indicates how assistive technology should handle updates to the live region.",
+      defaultValue: "off",
+    },
+    {
+      name: "ariaLive",
       lang: "react",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+      type: ["off", "polite", "assertive"],
+      description: "Indicates how assistive technology should handle updates to the live region.",
+      defaultValue: "off",
+    },
+    ...LegacyTestIdProperties,
+    LegacyMarginProperty,
+  ];
+
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "type",
+      type: "GoabCalloutType (success | important | information | emergency | event)",
+      description: "Define the context and colour of the callout",
+      required: true,
     },
     {
-      name: "testid",
+      name: "heading",
       type: "string",
-      lang: "angular",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+      description: "Callout heading text",
     },
     {
-      name: "mt,mr,mb,ml",
-      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
-      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+      name: "size",
+      type: "GoabCalloutSize (medium | large)",
+      defaultValue: "large",
+      description:
+        "The medium callout has reduced padding and type size to adjust for a compact area and smaller viewport width when a smaller size is required.",
     },
     {
-      name: "arialive",
-      lang: "angular",
-      type: ["off", "polite", "assertive"],
+      name: "maxWidth",
+      type: "string",
+      description: "Sets the maximum width of the callout.",
+    },
+    {
+      name: "ariaLive",
+      type: "GoabCalloutAriaLive (off | polite | assertive)",
       description: "Indicates how assistive technology should handle updates to the live region.",
       defaultValue: "off",
     },
     {
-      name: "ariaLive",
-      lang: "react",
-      type: ["off", "polite", "assertive"],
+      name: "iconTheme",
+      type: "GoabCalloutIconTheme (outline | filled)",
       description: "Indicates how assistive technology should handle updates to the live region.",
       defaultValue: "off",
     },
+    TestIdProperty,
+    MarginProperty,
   ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
@@ -148,101 +175,31 @@ export default function CalloutPage() {
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{ display: "none" }}>
               Component
             </h2>
             <Sandbox properties={componentBindings} onChange={onSandboxChange}>
-              <GoACallout {...componentProps}>
+              <GoabCallout {...componentProps}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-              </GoACallout>
+              </GoabCallout>
             </Sandbox>
-            <ComponentProperties properties={componentProperties} />
-            
-            <h2 id="component-examples" className="hidden" aria-hidden="true">Examples</h2>
-
-            <h3 id="component-example-confirm-application-submitted">Confirm that an application was submitted</h3>
-            <Sandbox fullWidth allow={['h2', 'h3', 'p']} skipRender>
-
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                      <h2>You have completed the application</h2>
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
 
-                      <goa-callout type="success">
-                        <span slot="heading">Your application was successful</span>
-                        <p>You will receive a copy of the confirmation to the email person&#64;email.com</p>
-                        <p>Confirmation number: <strong>1234ABC</strong></p>
-                      </goa-callout>
-
-                      <h3>Go back to the dashboard, or direct your user somewhere else useful.</h3>
-                      <p>
-                        Other information about what was just completed, other tertiary information, and/or contact information.
-                        Phone: <a href="tel:7801234567">780 123 4567</a>
-                        Email: <a href="mailto:information&#64;gov.ab.ca">information&#64;gov.ab.ca</a>
-                      </p>
-
-                      <goa-button-group alignment="start">
-                        <goa-button type="primary">Go to application</goa-button>
-                        <goa-button type="secondary">Back to dashboard</goa-button>
-                      </goa-button-group>
-                    `}
-              />
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                    <h2>You have completed the application</h2>
-
-                    <GoACallout type="success" heading="Your application was successful">
-                      <p>You will receive a copy of the confirmation to the email person@email.com</p>
-                      <p>Confirmation number: <strong>1234ABC</strong></p>
-                    </GoACallout>
-
-                    <h3>Go back to the dashboard, or direct your user somewhere else useful.</h3>
-                    <p>
-                      Other information about what was just completed, other tertiary information, and/or contact information.
-                      Phone: <a href="tel:7801234567">780 123 4567</a>
-                      Email: <a href="mailto:information@gov.ab.ca">information@gov.ab.ca</a>
-                    </p>
+            <h2 id="component-examples" className="hidden" aria-hidden="true">Examples</h2>
+            <CalloutExamples/>
 
-                    <GoAButtonGroup alignment="start">
-                      <GoAButton type="primary">Go to application</GoAButton>
-                      <GoAButton type="secondary">Back to dashboard</GoAButton>
-                    </GoAButtonGroup>
-                  `}
-              />
-              <h2 style={{ marginTop: 0 }}>You have completed the application</h2>
-              <GoACallout type="success" heading="Your application was successful">
-                <p>You will receive a copy of the confirmation to the email person@email.com</p>
-                <p style={{ marginBottom: 0 }}>Confirmation number: <strong>1234ABC</strong></p>
-              </GoACallout>
-              <h3>Go back to the dashboard, or direct your user somewhere else useful.</h3>
-              <p>
-                Other information about what was just completed, other tertiary information, and/or contact information.<br/>
-                Phone: <a href="#">780 123 4567</a><br/>
-                Email: <a href="#">information@gov.ab.ca</a>
-              </p>
-              <GoASpacer vSpacing="l"></GoASpacer>
-              <GoAButtonGroup alignment="start">
-                <GoAButton type="primary">Go to application</GoAButton>
-                <GoAButton type="secondary">Back to dashboard</GoAButton>
-              </GoAButtonGroup>
-            </Sandbox>
-          </GoATab>
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
-            }></GoATab>
-        </GoATabs>
+            }></GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Checkbox.tsx b/src/routes/components/Checkbox.tsx
index 0d758287c..5c0deb2cf 100644
--- a/src/routes/components/Checkbox.tsx
+++ b/src/routes/components/Checkbox.tsx
@@ -1,5 +1,5 @@
-import { useState } from "react";
-import { GoABadge, GoACheckbox, GoACheckboxProps, GoAFormItem, GoATab, GoATabs } from "@abgov/react-components";
+import { useContext, useState } from "react";
+import { GoabBadge, GoabCheckbox, GoabCheckboxProps, GoabFormItem, GoabTab, GoabTabs } from "@abgov/react-components";
 import { Sandbox, ComponentBinding } from "@components/sandbox";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet";
 import {
@@ -10,6 +10,12 @@ import { Category, ComponentHeader } from "@components/component-header/Componen
 import { useSandboxFormItem } from "@hooks/useSandboxFormItem.tsx";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import CheckboxExamples from "@examples/checkbox/CheckboxExamples.tsx";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import {
+  LegacyTestIdProperties,
+  MarginProperty,
+  TestIdProperty
+} from "@components/component-properties/common-properties.ts";
 
 // == Page props ==
 const componentName = "Checkbox";
@@ -20,13 +26,14 @@ const relatedComponents = [
   { link: "/components/form-item", name: "Form item" },
   { link: "/components/radio", name: "Radio" }
 ];
-type ComponentPropsType = GoACheckboxProps;
+type ComponentPropsType = GoabCheckboxProps;
 type CastingType = {
   name: string;
   checked: boolean;
   [key: string]: unknown;
 };
 export default function CheckboxPage() {
+  const {version} = useContext(LanguageVersionContext);
   const [checkboxProps, setCheckboxProps] = useState<ComponentPropsType>({
     name: "item",
     checked: false,
@@ -50,8 +57,7 @@ export default function CheckboxPage() {
   const { formItemBindings, formItemProps, onFormItemChange } = useSandboxFormItem({
     label: "Basic",
   });
-
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "name",
       type: "string",
@@ -131,24 +137,76 @@ export default function CheckboxPage() {
       description: "Sets the maximum width of the checkbox.",
       lang: "angular",
     },
+    ...LegacyTestIdProperties,
+    MarginProperty
+  ];
+
+  const componentProperties: ComponentProperty[] = [
     {
-      name: "testId",
+      name: "name",
       type: "string",
-      lang: "react",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+      description: "Unique name to identify the checkbox.",
+    },
+    {
+      name: "checked",
+      type: "boolean",
+      description: "Marks the checkbox item as selected.",
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      defaultValue: "false",
+      description:
+        "Disable this control. It will not receive focus or events.",
     },
     {
-      name: "testid",
+      name: "error",
+      type: "boolean",
+      defaultValue: "false",
+      description: "Shows an error on the checkbox item.",
+    },
+    {
+      name: "text",
       type: "string",
+      description: "Label shown beside the checkbox.",
+    },
+    {
+      name: "value",
+      type: "string | number | boolean",
+      description: "The value binding.",
+    },
+    {
+      name: "description",
+      type: "string | TemplateRef<any>",
+      description: "Additional content shown below the label.",
       lang: "angular",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
     },
     {
-      name: "mt,mr,mb,ml",
-      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
-      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+      name: "description",
+      type: "string | ReactNode",
+      description: "Additional content shown below the label.",
+      lang: "react",
     },
+    {
+      name: "ariaLabel",
+      type: "string",
+      description:
+        "Defines how the text will be translated for the screen reader. If not specified it will fall back to the name.",
+    },
+    {
+      name: "maxWidth",
+      type: "string",
+      description: "Sets the maximum width of the checkbox.",
+    },
+    {
+      name: "onChange",
+      type: "(event: GoabCheckboxOnChangeDetail) => void",
+      description: "Callback function when checkbox value is changed.",
+    },
+    TestIdProperty,
+    MarginProperty,
   ];
+
   const noop = () => { };
 
   function onChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
@@ -168,31 +226,30 @@ export default function CheckboxPage() {
       <ComponentHeader name={componentName} category={category} description={description} relatedComponents={relatedComponents} />
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
 
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{display: "none"}}>Component</h2>
             <Sandbox
               properties={checkboxBindings}
               formItemProperties={formItemBindings}
               onChange={onChange}
+              allow={["form"]}
               onChangeFormItemBindings={onFormItemChange}
-              flags={["reactive"]}>
+              flags={version === "old" ? ["reactive"] : ["reactive", "template-driven"]}>
               <CodeSnippet
                 lang="typescript"
                 tags="angular"
                 allowCopy={true}
                 code={`
                   export class SomeOtherComponent {
-                    checked = false;
-                    onChange(event: Event) {
-                      const {name, checked, value} = (event as CustomEvent).detail;
-                      // or this.checked = !this.checked;
+                    checkboxOnChange(event: GoabCheckboxOnChangeDetail) {
+                      console.log(event);
                     }
                   }
                 `}
               />
 
-              <CodeSnippet
+              {version === "old" && <CodeSnippet
                 lang="typescript"
                 tags={["angular", "reactive"]}
                 allowCopy={true}
@@ -202,24 +259,70 @@ export default function CheckboxPage() {
                     itemFormCtrl = new FormControl();
                   }
                 `}
+              />}
+
+              {version === "new" && <CodeSnippet
+                lang="typescript"
+                tags={["angular", "reactive"]}
+                allowCopy={true}
+                code={`
+                  export class SomeOtherComponent {
+                   form!: FormGroup;
+                   constructor(private fb: FormBuilder) {
+                    this.form = this.fb.group({
+                      item: [""]
+                    })
+                   }
+                  }
+                `}
+              />}
+
+              {version === "new" && <CodeSnippet
+                lang="typescript"
+                tags={["angular", "template-driven"]}
+                allowCopy={true}
+                code={`
+                  export class SomeOtherComponent {
+                   item=false;
+                   checkboxOnChange(event: GoabCheckboxOnChangeDetail) {
+                    console.log(event);
+                    this.item = event.checked;
+                   }
+                  }
+                `}
+              />}
+
+              {version === "new" && <CodeSnippet
+                lang="typescript"
+                tags="react"
+                allowCopy={true}
+                code={`
+                  function checkboxOnChange(event: GoabCheckboxOnChangeDetail) {
+                    console.log(event.value);
+                  }
+                `}
               />
-              <GoAFormItem {...formItemProps}>
-                <GoACheckbox {...checkboxProps} onChange={noop} />
-              </GoAFormItem>
+              }
+
+              <form>
+                <GoabFormItem {...formItemProps}>
+                  <GoabCheckbox {...checkboxProps} onChange={noop} />
+                </GoabFormItem>
+              </form>
             </Sandbox>
 
-            <ComponentProperties properties={componentProperties} />
+            <ComponentProperties oldProperties={oldComponentProperties} properties={componentProperties} />
             <CheckboxExamples />
-          </GoATab>
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
-            }></GoATab>
-        </GoATabs>
+            }></GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Components.tsx b/src/routes/components/Components.tsx
index 3af4caa30..92e9360ab 100644
--- a/src/routes/components/Components.tsx
+++ b/src/routes/components/Components.tsx
@@ -1,75 +1,83 @@
-import { GoABlock, GoADropdown, GoADropdownItem, GoASideMenu } from "@abgov/react-components";
-import { useEffect, useState } from "react";
+import { GoabNotification, GoabSideMenu } from "@abgov/react-components";
 import { Link, Outlet } from "react-router-dom";
-import { LanguageContext } from "@components/sandbox";
 import { SupportInfo } from "@components/support-info/SupportInfo.tsx";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { getVersionedUrlPath } from "@components/version-language-switcher/version-language-constants.ts";
+import { DEFAULT_VERSION } from "../../global-constants";
 
 export function Components() {
-  const [language, setLanguage] = useState("");
+  const { language, version } = useContext(LanguageVersionContext);
 
-  useEffect(() => {
-    const lang = localStorage.getItem("goa-docs-lang") || "react";
-    setLanguage(lang);
-  }, []);
+  const prefixUrl = getVersionedUrlPath(version, language);
 
-  function onLanguageChange(_name: string, value: string[] | string) {
-    const lang = Array.isArray(value) ? value[0] : value;
-    setLanguage(lang);
-    localStorage.setItem("goa-docs-lang", lang);
-  }
+  const getUrl = (path: string) => {
+    return prefixUrl.length > 0 ? `${prefixUrl}/${path}` : path;
+  };
 
   return (
-    <LanguageContext.Provider value={language}>
+    <>
+      {version !== DEFAULT_VERSION && (
+        <GoabNotification type="important">
+          {DEFAULT_VERSION === "old" ? (
+            <>
+              Most teams should use the Long-term Support (LTS) version of the design system. If
+              you're ready to explore the latest features, check out our{" "}
+              <a href="/get-started/developers/update">upgrade guide</a>
+            </>
+          ) : (
+            <>
+              You are not on the latest version of the design system.{" "}
+              <a href="/get-started/developers/update">Upgrade to latest version</a>
+            </>
+          )}
+        </GoabNotification>
+      )}
+
       <section className="content">
         <section className="side-menu">
-          <GoABlock direction="column" mt="s" mb="s" ml="l" mr="l">
-            <GoADropdown value={language} onChange={onLanguageChange}>
-              <GoADropdownItem label="React" value="react" />
-              <GoADropdownItem label="Angular" value="angular" />
-            </GoADropdown>
-          </GoABlock>
-
-          <GoASideMenu>
+          <GoabSideMenu>
             <Link to="">All</Link>
-            <Link to="accordion">Accordion</Link>
-            <Link to="badge">Badge</Link>
-            <Link to="block">Block</Link>
-            <Link to="button">Button</Link>
-            <Link to="button-group">Button group</Link>
-            <Link to="callout">Callout</Link>
-            <Link to="checkbox">Checkbox</Link>
-            <Link to="container">Container</Link>
-            <Link to="date-picker">Date picker</Link>
-            <Link to="details">Details</Link>
-            <Link to="divider">Divider</Link>
-            <Link to="dropdown">Dropdown</Link>
-            <Link to="file-uploader">File uploader</Link>
-            <Link to="filter-chip">Filter chip</Link>
-            <Link to="footer">Footer</Link>
-            <Link to="form-item">Form item</Link>
-            <Link to="form-stepper">Form stepper</Link>
-            <Link to="grid">Grid</Link>
-            <Link to="header">Header</Link>
-            <Link to="hero-banner">Hero banner</Link>
-            <Link to="icons">Icons</Link>
-            <Link to="icon-button">Icon button</Link>
-            <Link to="input">Input</Link>
-            <Link to="list">List</Link>
-            <Link to="microsite-header">Microsite header</Link>
-            <Link to="modal">Modal</Link>
-            <Link to="notification-banner">Notification banner</Link>
-            <Link to="pagination">Pagination</Link>
-            <Link to="popover">Popover</Link>
-            <Link to="progress-indicator">Progress indicator</Link>
-            <Link to="radio">Radio</Link>
-            <Link to="side-menu">Side menu</Link>
-            <Link to="skeleton-loader">Skeleton loading</Link>
-            <Link to="spacer">Spacer</Link>
-            <Link to="table">Table</Link>
-            <Link to="tabs">Tabs</Link>
-            <Link to="text-area">Text area</Link>
-            <Link to="tooltip">Tooltip</Link>
-          </GoASideMenu>
+            <Link to={getUrl("accordion")}>Accordion</Link>
+            <Link to={getUrl("badge")}>Badge</Link>
+            <Link to={getUrl("block")}>Block</Link>
+            <Link to={getUrl("button")}>Button</Link>
+            <Link to={getUrl("button-group")}>Button group</Link>
+            <Link to={getUrl("callout")}>Callout</Link>
+            <Link to={getUrl("checkbox")}>Checkbox</Link>
+            <Link to={getUrl("container")}>Container</Link>
+            <Link to={getUrl("date-picker")}>Date picker</Link>
+            <Link to={getUrl("details")}>Details</Link>
+            <Link to={getUrl("divider")}>Divider</Link>
+            <Link to={getUrl("dropdown")}>Dropdown</Link>
+            <Link to={getUrl("file-uploader")}>File uploader</Link>
+            <Link to={getUrl("filter-chip")}>Filter chip</Link>
+            <Link to={getUrl("footer")}>Footer</Link>
+            <Link to={getUrl("form-item")}>Form item</Link>
+            <Link to={getUrl("form-stepper")}>Form stepper</Link>
+            <Link to={getUrl("grid")}>Grid</Link>
+            <Link to={getUrl("header")}>Header</Link>
+            <Link to={getUrl("hero-banner")}>Hero banner</Link>
+            <Link to={getUrl("icons")}>Icons</Link>
+            <Link to={getUrl("icon-button")}>Icon button</Link>
+            <Link to={getUrl("input")}>Input</Link>
+            <Link to={getUrl("list")}>List</Link>
+            <Link to={getUrl("microsite-header")}>Microsite header</Link>
+            <Link to={getUrl("modal")}>Modal</Link>
+            <Link to={getUrl("notification-banner")}>Notification banner</Link>
+            <Link to={getUrl("pagination")}>Pagination</Link>
+            <Link to={getUrl("popover")}>Popover</Link>
+            <Link to={getUrl("progress-indicator")}>Progress indicator</Link>
+            <Link to={getUrl("radio")}>Radio</Link>
+            <Link to={getUrl("side-menu")}>Side menu</Link>
+            <Link to={getUrl("skeleton-loader")}>Skeleton loading</Link>
+            <Link to={getUrl("spacer")}>Spacer</Link>
+            <Link to={getUrl("table")}>Table</Link>
+            <Link to={getUrl("tabs")}>Tabs</Link>
+            <Link to={getUrl("text")}>Text</Link>
+            <Link to={getUrl("text-area")}>Text area</Link>
+            <Link to={getUrl("tooltip")}>Tooltip</Link>
+          </GoabSideMenu>
         </section>
 
         <main className="main">
@@ -77,7 +85,7 @@ export function Components() {
           <SupportInfo />
         </main>
       </section>
-    </LanguageContext.Provider>
+    </>
   );
 }
 
diff --git a/src/routes/components/Container.tsx b/src/routes/components/Container.tsx
index 638304822..c5f67abdb 100644
--- a/src/routes/components/Container.tsx
+++ b/src/routes/components/Container.tsx
@@ -6,10 +6,10 @@ import {
 } from "@components/component-properties/ComponentProperties";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader";
 import {
-  GoABadge,
-  GoAContainer, GoAContainerProps,
-  GoATab,
-  GoATabs
+  GoabBadge,
+  GoabContainer, GoabContainerProps,
+  GoabTab,
+  GoabTabs
 } from "@abgov/react-components";
 import ContainerExamples from "@examples/container/ContainerExamples.tsx";
 import { ComponentContent } from "@components/component-content/ComponentContent";
@@ -23,7 +23,7 @@ const relatedComponents = [
   { link: "/components/details", name: "Details" },
   { link: "/components/divider", name: "Divider" }
 ];
-type ComponentPropsType = GoAContainerProps;
+type ComponentPropsType = GoabContainerProps;
 type CastingType = {
   [key: string]: unknown;
 };
@@ -73,7 +73,7 @@ export default function ContainerPage() {
     },
   ]);
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "type",
       type: "interactive | info | error | success | important | non-interactive",
@@ -140,6 +140,75 @@ export default function ContainerPage() {
       description: "Apply margin to the top, right, bottom, and/or left of the component.",
     },
   ];
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "type",
+      type: "GoabContainerType (interactive | info | error | success | important | non-interactive)",
+      description: "Sets the container and accent bar styling.",
+      defaultValue: "interactive",
+    },
+    {
+      name: "accent",
+      type: "GoabContainerAccent (thick | thin | filled)",
+      defaultValue: "filled",
+      description: "Sets the style of accent on the container.",
+    },
+    {
+      name: "padding",
+      type: "GoabContainerPadding (relaxed | compact)",
+      defaultValue: "relaxed",
+      description: "Sets the amount of white space in the container.",
+    },
+    {
+      name: "width",
+      type: "GoabContainerWidth (full | content)",
+      defaultValue: "full",
+      description: "Sets the width of the container."
+    },
+    {
+      name: "maxWidth",
+      type: "string",
+      description: "Sets the maximum width of the container.",
+    },
+    {
+      name: "title",
+      lang: "angular",
+      type: "TemplateRef<any>",
+      description:
+        "Sets the content in the left of the accent bar. Can only be used with accent=thick.",
+    },
+    {
+      name: "actions",
+      type: "TemplateRef<any>",
+      lang: "angular",
+      description:
+        "Sets the content in the right of the accent bar. Can only be used with accent=thick.",
+    },
+    {
+      name: "title",
+      lang: "react",
+      type: "ReactNode",
+      description:
+        "Sets the content in the left of the accent bar. Can only be used with accent=thick.",
+    },
+    {
+      name: "actions",
+      type: "ReactNode",
+      lang: "react",
+      description:
+        "Sets the content in the right of the accent bar. Can only be used with accent=thick.",
+    },
+    {
+      name: "testId",
+      type: "string",
+      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+    },
+    {
+      name: "mt,mr,mb,ml",
+      type: "Spacing (none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl)",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },
+  ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
     setContainerBindings(bindings);
@@ -157,32 +226,32 @@ export default function ContainerPage() {
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
 
-        <GoATabs>
-          <GoATab heading={"Code examples"}>
+        <GoabTabs>
+          <GoabTab heading={"Code examples"}>
             <h2 id="component" style={{display: "none"}}>Component</h2>
             <Sandbox properties={containerBindings} onChange={onSandboxChange} fullWidth>
-              <GoAContainer {...containerProps}>
+              <GoabContainer {...containerProps}>
                 <h2>Detach to use</h2>
                 <p>Add things inside me</p>
-              </GoAContainer>
+              </GoabContainer>
             </Sandbox>
 
             {/*Container Table Properties*/}
-            <ComponentProperties properties={componentProperties} />
+            <ComponentProperties oldProperties={oldComponentProperties} properties={componentProperties} />
             <ContainerExamples />
 
-          </GoATab>
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }>
             <p>Coming Soon</p>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/DatePicker.tsx b/src/routes/components/DatePicker.tsx
index bdcf45a77..999c82919 100644
--- a/src/routes/components/DatePicker.tsx
+++ b/src/routes/components/DatePicker.tsx
@@ -1,24 +1,26 @@
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import {
   ComponentProperties,
   ComponentProperty,
 } from "@components/component-properties/ComponentProperties.tsx";
 
 import {
-  GoABadge,
-  GoATab,
-  GoATabs,
-  GoADatePickerProps,
-  GoADatePicker,
-  GoAFormItem,
-  GoAButton,
-  GoAButtonGroup,
+  GoabBadge,
+  GoabTab,
+  GoabTabs,
+  GoabDatePickerProps,
+  GoabDatePicker,
+  GoabFormItem,
 } from "@abgov/react-components";
 import { useSandboxFormItem } from "@hooks/useSandboxFormItem.tsx";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { GoabDatePickerOnChangeDetail } from "@abgov/ui-components-common";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { LegacyMarginProperty, MarginProperty } from "@components/component-properties/common-properties.ts";
+import { DatePickerExamples } from "@examples/date-picker/DatePickerExamples.tsx";
 
 // == Page props ==
 
@@ -30,13 +32,14 @@ const relatedComponents = [
 ];
 const description =
   "Lets users select a date through a calendar without the need to manually type it in a field.";
-type ComponentPropsType = GoADatePickerProps;
+type ComponentPropsType = GoabDatePickerProps;
 type CastingType = {
   [key: string]: unknown;
-  onChange: (name: string, value: Date | undefined) => void;
+  onChange: (event: GoabDatePickerOnChangeDetail)=> void;
 };
 
 export default function DatePickerPage() {
+  const {version} = useContext(LanguageVersionContext);
   const [componentProps, setComponentProps] = useState<ComponentPropsType>({
     onChange: () => {},
   });
@@ -69,7 +72,7 @@ export default function DatePickerPage() {
     label: "Item",
   });
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "name",
       type: "string",
@@ -98,10 +101,49 @@ export default function DatePickerPage() {
       defaultValue: "5 years forward",
       description: "Maximum date value allowed.",
     },
+    LegacyMarginProperty,
+    {
+      name: "disabled",
+      type: "boolean",
+      defaultValue: "false",
+      description: "Disables the date picker.",
+    },
+    {
+      name: "relative",
+      type: "boolean",
+      description: "Set to true if a parent element has a css position of relative.",
+      defaultValue: "false",
+    },
+  ];
+
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "name",
+      type: "string",
+      description: "Name of the date field.",
+    },
+    {
+      name: "value",
+      type: "Date | string | null | undefined",
+      description: "Value of the calendar date.",
+    },
+    {
+      name: "min",
+      type: "Date | string",
+      defaultValue: "5 year previous",
+      description: "Minimum date value allowed.",
+    },
+    {
+      name: "max",
+      type: "Date | string",
+      defaultValue: "5 years forward",
+      description: "Maximum date value allowed.",
+    },
     {
-      name: "mt,mr,mb,ml",
-      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
-      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+      name: "error",
+      type: "boolean",
+      defaultValue: "false",
+      description: "Sets the input to an error state.",
     },
     {
       name: "disabled",
@@ -115,6 +157,12 @@ export default function DatePickerPage() {
       description: "Set to true if a parent element has a css position of relative.",
       defaultValue: "false",
     },
+    MarginProperty,
+    {
+      name: "onChange",
+      type: "(event: GoabDatePickerOnChangeDetail) => void",
+      description: "Function to call when the date changes.",
+    }
   ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
@@ -124,23 +172,6 @@ export default function DatePickerPage() {
 
   const noop = () => {};
 
-  const [date, setDate] = useState<Date | undefined>();
-
-  const setNewDate = (value: Date | undefined) => {
-    setDate(value);
-  };
-
-  function setValue() {
-    const d = new Date();
-    d.setDate(d.getDate() - 7);
-
-    setDate(d);
-  }
-
-  function clearValue() {
-    setDate(undefined);
-  }
-
   return (
     <>
       <ComponentHeader
@@ -151,34 +182,51 @@ export default function DatePickerPage() {
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
-            <h2 id="component" style={{ display: "none" }}>
-              Component
-            </h2>
+
+        <GoabTabs>
+          <GoabTab heading="Code examples">
+            <h2 id="component" style={{ display: "none" }}>Component</h2>
             <Sandbox
               properties={componentBindings}
               formItemProperties={formItemBindings}
               onChange={onSandboxChange}
               onChangeFormItemBindings={onFormItemChange}
-              flags={["reactive"]}>
-              <CodeSnippet
+              flags={version === "old" ? ["reactive"] : ["reactive", "template-driven", "event"]}>
+
+              {/*Angular*/}
+              {version === "old" && <CodeSnippet
                 lang="typescript"
                 tags="angular"
                 allowCopy={true}
                 code={`
                 // non-reactive code
                 export class MyComponent {
-                  const item = new Date();
+                  item = new Date();
                   onChange(event: Event) {
-                    // handle change
+                  // handle change
                     console.log((event as CustomEvent).detail.value);
                   }
                 }  
               `}
-              />
+              />}
+
+              {version === "new" && <CodeSnippet
+                lang="typescript"
+                tags="angular"
+                allowCopy={true}
+                code={`
+                // non-reactive code
+                export class MyComponent {
+                  item = new Date();
+                  dateOnChange(event: GoabDatePickerOnChangeDetail) {
+                  // handle change
+                    console.log(event.value);
+                  }
+                }  
+              `}
+              />}
 
-              <CodeSnippet
+              {version === "old" && <CodeSnippet
                 lang="typescript"
                 tags={["angular", "reactive"]}
                 allowCopy={true}
@@ -189,176 +237,85 @@ export default function DatePickerPage() {
                   itemFormCtrl = new FormControl(new Date());
                 }  
               `}
-              />
+              />}
 
-              <CodeSnippet
+              {version === "new" && <CodeSnippet
                 lang="typescript"
-                tags="react"
+                tags={["angular", "reactive"]}
                 allowCopy={true}
                 code={`
-                function onChange(name: string, value: Date) {
-                  setValue(value);
+                // reactive code
+                import { FormControl } from "@angular/forms";
+                export class MyComponent {
+                   form!: FormGroup;
+                   constructor(private fb: FormBuilder) {
+                    this.form = this.fb.group({
+                      item: [new Date()],
+                    })
+                  }
                 }
               `}
-              />
-              <GoAFormItem {...formItemProps}>
-                <GoADatePicker {...componentProps} name="item" value={new Date()} onChange={noop} />
-              </GoAFormItem>
-            </Sandbox>
-            <ComponentProperties properties={componentProperties} />
-
-            <h2 id="component-examples" className="hidden" aria-hidden="true">
-              Examples
-            </h2>
+              />}
 
-            <h3 id="component-example-1">Reset example</h3>
-            <Sandbox fullWidth skipRender onChange={onSandboxChange} flags={["reactive"]}>
-              <CodeSnippet
-                tags="react"
+              {version === "new" && <CodeSnippet
                 lang="typescript"
+                tags={["angular", "template-driven"]}
                 allowCopy={true}
                 code={`
-                  export function Datepicker() {
-                    const [date, setDate] = useState<Date | undefined>();
-
-                    const setNewDate = (value: Date | undefined) => {
-                      setDate(value);
-                    };
-
-                    function setValue() {
-                      const d = new Date();
-                      d.setDate(d.getDate() - 7);
-
-                      setDate(d);
-                    }
-
-                    function clearValue() {
-                      setDate(undefined);
-                    }
-
-                    return (
-                      <>
-                        <GoAFormItem label="Item">
-                          <GoADatePicker
-                            name="item"
-                            value={date}
-                            onChange={(_, value) => setNewDate(value)}
-                            mb="xl"
-                          ></GoADatePicker>
-                        </GoAFormItem>
-                        
-                        <GoAButtonGroup mt={"xs"} alignment={"start"}>
-                          <GoAButton onClick={setValue} mr="l">Set Value</GoAButton>
-                          <GoAButton onClick={clearValue}>Clear Value</GoAButton>
-                        </GoAButtonGroup>
-                      </>
-                    );
+                  export class MyComponent {
+                   item = new Date();
+                   dateOnChange(event: GoabDatePickerOnChangeDetail) {
+                      // handle change
+                      console.log(event.value);
+                      this.item = event.value as Date;
+                   }
                   }
+                }
               `}
-              />
+              />}
 
-              <CodeSnippet
+              {/*React*/}
+              {version === "old" && <CodeSnippet
                 lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                  export class DatePickerComponent {
-                    item = "";
-                    onChange(event: Event) {
-                      const value = (event as CustomEvent).detail.value;
-                      this.item = value;
-                    }
-
-                    setValue() {
-                      const today = new Date().toDateString();
-                      this.item = today;
-                    }
-
-                    clearValue() {
-                      this.item = "";
-                    }
-                  }
-                `}
-              />
-              <CodeSnippet
-                lang="html"
-                tags="angular"
+                tags="react"
                 allowCopy={true}
                 code={`
-                  <goa-form-item label="Item">
-                    <goa-date-picker (_change)="onChange($event)" name="item" [value]="item"></goa-date-picker>
-                  </goa-form-item>
-
-                  <goa-button-group alignment="start" mt="xs">
-                    <goa-button (_click)="setValue()" mr="l">Set Value</goa-button>
-                    <goa-button (_click)="clearValue()">Clear Value</goa-button>
-                  </goa-button-group>
-                `}
-              />
+                function onChange(name: string, value: Date) {
+                  console.log(name, value);
+                }
+              `}
+              />}
 
-              <CodeSnippet
-                tags={["angular", "reactive"]}
+              {version === "new" && <CodeSnippet
                 lang="typescript"
+                tags="react"
                 allowCopy={true}
                 code={`
-                  export class DatePickerComponent {
-                    dateCtrl = new FormControl();
+                function onChange(event: GoabDatePickerOnChangeDetail) {
+                  console.log(event.value);
+                }
+              `}
+              />}
 
-                    setValue() {
-                      const d = new Date();
-                      d.setDate(d.getDate() - 7);
-                      this.dateCtrl.patchValue(d);
-                      console.log("setValue called: ", this.dateCtrl.value);
-                    }
+              <GoabFormItem {...formItemProps}>
+                <GoabDatePicker {...componentProps} name="item" value={new Date()} onChange={noop} />
+              </GoabFormItem>
+            </Sandbox>
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
 
-                    clearValue() {
-                      this.dateCtrl.reset();
-                      console.log("reset called: ", this.dateCtrl.value);
-                    }
-                  }
-              `}
-              />
-              <CodeSnippet
-                tags={["angular", "reactive"]}
-                lang="typescript"
-                allowCopy={true}
-                code={`
-                  <goa-form-item label="Input Label" helptext="Helper text" mb="3xl">
-                    <goa-date-picker [formControl]="dateCtrl" [value]="dateCtrl.value" ngDefaultControl />
-                  </goa-form-item>
-                  
-                  <goa-button-group alignment="start" mt="xs">
-                    <goa-button (_click)="setValue()" mr="l">Set Value</goa-button>
-                    <goa-button (_click)="clearValue()">Clear Value</goa-button>
-                  </goa-button-group>
-              `}
-              />
+            <DatePickerExamples/>
 
-              <GoAFormItem label="Date Picker">
-                <GoADatePicker
-                  name="item"
-                  value={date}
-                  onChange={(_, value) => setNewDate(value)}
-                  mb="xl"></GoADatePicker>
-              </GoAFormItem>
+          </GoabTab>
 
-              <GoAButtonGroup mt={"xs"} alignment={"start"}>
-                <GoAButton onClick={setValue} mr="l">
-                  Set Value
-                </GoAButton>
-                <GoAButton onClick={clearValue}>Clear Value</GoAButton>
-              </GoAButtonGroup>
-            </Sandbox>
-          </GoATab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
-            }></GoATab>
-        </GoATabs>
+            }></GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Details.tsx b/src/routes/components/Details.tsx
index 2cf7a75e5..0629e764c 100644
--- a/src/routes/components/Details.tsx
+++ b/src/routes/components/Details.tsx
@@ -6,17 +6,18 @@ import {
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import {
-  GoABadge,
-  GoABlock,
-  GoADetails,
-  GoAFormItem,
-  GoAInput,
-  GoARadioGroup,
-  GoARadioItem,
-  GoATab,
-  GoATabs,
+  GoabBadge,
+  GoabDetails,
+  GoabTab,
+  GoabTabs,
 } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import {
+  LegacyMarginProperty,
+  MarginProperty,
+  TestIdProperty,
+} from "@components/component-properties/common-properties.ts";
+import { DetailsExamples } from "@examples/details/DetailsExamples.tsx";
 
 export default function DetailsPage() {
   const [detailsProps, setDetailsProps] = useState({
@@ -35,10 +36,10 @@ export default function DetailsPage() {
       name: "maxWidth",
       requirement: "optional",
       value: "",
-    },    
+    },
   ]);
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "heading",
       type: "string",
@@ -63,20 +64,36 @@ export default function DetailsPage() {
       description: "Sets the maximum width of the details.",
       lang: "angular",
     },
+    LegacyMarginProperty,
+  ];
+
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "heading",
+      type: "string",
+      required: true,
+      description: "The title heading",
+    },
+    {
+      name: "open",
+      type: "boolean",
+      description: "Controls if details is expanded or not",
+      defaultValue: "false",
+    },
     {
-      name: "mt,mr,mb,ml",
-      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
-      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+      name: "maxWidth",
+      type: "string",
+      description: "Sets the maximum width of the details.",
     },
+    TestIdProperty,
+    MarginProperty,
   ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
-    setDetailsProps(props as { heading: string;[key: string]: unknown });
+    setDetailsProps(props as { heading: string; [key: string]: unknown });
     setDetailsBindings(bindings);
   }
 
-  const noop = () => { };
-
   return (
     <>
       <ComponentHeader
@@ -90,12 +107,13 @@ export default function DetailsPage() {
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-
-        <GoATabs>
-          <GoATab heading="Code examples">
-            <h2 id="component" style={{display: "none"}}>Component</h2>
+        <GoabTabs>
+          <GoabTab heading="Code examples">
+            <h2 id="component" style={{ display: "none" }}>
+              Component
+            </h2>
             <Sandbox properties={detailsBindings} onChange={onSandboxChange} fullWidth>
-              <GoADetails {...detailsProps}>
+              <GoabDetails {...detailsProps}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel lacinia metus, sed
                 sodales lectus. Aliquam sed volutpat velit. Sed in lacus ut dui placerat accumsan
                 malesuada quis erat. Aenean mi diam, rhoncus vitae justo eu, venenatis maximus nunc.
@@ -104,143 +122,27 @@ export default function DetailsPage() {
                 cursus velit vel libero sollicitudin tincidunt. Proin tincidunt, enim et ultrices
                 rhoncus, nibh leo imperdiet sapien, sed porttitor ipsum nulla non massa. Nulla
                 facilisi.
-              </GoADetails>
-            </Sandbox>
-
-            {/*Component properties table*/}
-            <ComponentProperties properties={componentProperties} />
-
-            {/* Examples*/}
-            <h2 id="component-examples" className="hidden" aria-hidden="true">Examples</h2>
-
-            <h3 id="component-example-show-more-information-for-basic-question">
-              Show more information for a basic question
-            </h3>
-            <Sandbox fullWidth note="Example below: Advanced Education - Pay for my education">
-              <GoAFormItem label="Do you pay for childcare?" helpText="Examples of child care include day care, day homes, and baby-sitters.">
-                <GoARadioGroup name="pay" onChange={() => { }}>
-                  <GoARadioItem label="Yes" value="yes" name="pay" />
-                  <GoARadioItem label="No" value="no" name="pay" />
-                </GoARadioGroup>
-              </GoAFormItem>
-
-              <GoADetails heading="Why are we asking this question?" mt="l">
-                <p>
-                  This question helps us better understand your situation and ensure that you receive
-                  the right information and support.
-                </p>
-              </GoADetails>
+              </GoabDetails>
             </Sandbox>
 
-            <h3 id="component-example-additional-information-help">
-              Additional information to help a user understand and answer a question
-            </h3>
-            <Sandbox flags={["reactive"]} fullWidth>
-              <GoAFormItem
-                label="Do you have additional education expense?"
-                helpText="You can request this money now or at any time during your program."
-              >
-                <GoARadioGroup name="additional" onChange={noop}>
-                  <GoARadioItem label="Yes" value="yes" name="additional" />
-                  <GoARadioItem label="No" value="no" name="additional" />
-                </GoARadioGroup>
-              </GoAFormItem>
+            <ComponentProperties
+              oldProperties={oldComponentProperties}
+              properties={componentProperties}
+            />
 
-              <GoADetails heading="What is an additional education expense?">
-                <GoABlock gap="m" mt="m">
-                  <div>
-                    <strong>Examples of education expenses</strong>
-                    <ul className="goa-unordered-list">
-                      <li>Laptop and computer hardware</li>
-                      <li>Computer apps and subscriptions</li>
-                      <li>Home internet</li>
-                      <li>Testing and exam fees</li>
-                      <li>Work or school clothing, like work boots</li>
-                    </ul>
-                  </div>
-                  <div>
-                    <strong>Do not include</strong>
-                    <ul className="goa-unordered-list">
-                      <li>Tuition</li>
-                      <li>Mandatory fees</li>
-                      <li>Books and supplies</li>
-                      <li>School association fees</li>
-                    </ul>
-                  </div>
-                </GoABlock>
-              </GoADetails>
-            </Sandbox>
-
-            <h3 id="component-example-direct-deposit-information">
-              Show more information to help a user fill out direct deposit information
-            </h3>
-            <Sandbox flags={["reactive"]} fullWidth>
-              <h2>Direct deposit information</h2>
-              <p>
-                Find this information on your bank's website or on your personal cheques. Contact your
-                bank if you can't find this information.
-              </p>
-              <GoAFormItem
-                label="Bank or Institution number"
-                id="bankNumber"
-                helpText={"3-4 digits in length"}
-                mb="xl"
-              >
-                <GoAInput
-                  maxLength={4}
-                  name="bankNumber"
-                  onChange={noop}
-                  value={""}
-                  ariaLabel="bankNumber"
-                  width="88px"
-                />
-              </GoAFormItem>
-              <GoAFormItem
-                label="Branch or Transit number"
-                helpText={"5 digits in length"}
-                id="transitNumber"
-                mb="xl"
-              >
-                <GoAInput
-                  maxLength={5}
-                  name="transitNumber"
-                  onChange={noop}
-                  value={""}
-                  ariaLabel="transitNumber"
-                  width="143px"
-                />
-              </GoAFormItem>
-              <GoAFormItem label="Account number" helpText="3-12 digits in length" id="accountNumber">
-                <GoAInput
-                  maxLength={12}
-                  name="accountNumber"
-                  value=""
-                  onChange={noop}
-                  ariaLabel="accountNumber"
-                />
-              </GoAFormItem>
-
-              <GoADetails heading="Where can I find this information on a personal cheque?" mt="l">
-                <p>
-                  Below is an example of where you can find the required bank information on a
-                  personal cheque.
-                </p>
-                <img src="/images/details-demo.jpg" />
-              </GoADetails>
-            </Sandbox>
-          </GoATab>
+            <DetailsExamples />
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
-            }
-          >
+            }>
             <p>Coming Soon</p>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Divider.tsx b/src/routes/components/Divider.tsx
index 7d25debba..d754bd432 100644
--- a/src/routes/components/Divider.tsx
+++ b/src/routes/components/Divider.tsx
@@ -5,7 +5,7 @@ import {
   ComponentProperty,
 } from "@components/component-properties/ComponentProperties.tsx";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
-import { GoABadge, GoADivider, GoATab, GoATabs } from "@abgov/react-components";
+import { GoabBadge, GoabDivider, GoabTab, GoabTabs } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import Sandbox from "@components/sandbox/Sandbox.tsx";
 import "./AllComponents.css";
@@ -29,7 +29,7 @@ export default function DividerPage() {
     },
   ]);
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "mt,mr,mb,ml",
       type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
@@ -49,6 +49,19 @@ export default function DividerPage() {
     },
   ];
 
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "mt,mr,mb,ml",
+      type: "Spacing (none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl)",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },
+    {
+      name: "testId",
+      type: "string",
+      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+    }
+  ];
+
   function onSandboxChange(utilityBindings: ComponentBinding[], props: Record<string, unknown>) {
     setDividerBindings(utilityBindings);
     setDividerProps(props);
@@ -67,25 +80,25 @@ export default function DividerPage() {
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
 
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{display: "none"}}>Component</h2>
             <Sandbox properties={dividerBindings} onChange={onSandboxChange} fullWidth>
-              <GoADivider {...dividerProps} />
+              <GoabDivider {...dividerProps} />
             </Sandbox>
 
-            <ComponentProperties properties={componentProperties} />
-          </GoATab>
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }
-          ></GoATab>
-        </GoATabs>
+          ></GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Dropdown.tsx b/src/routes/components/Dropdown.tsx
index fb28770fc..3f13f2083 100644
--- a/src/routes/components/Dropdown.tsx
+++ b/src/routes/components/Dropdown.tsx
@@ -1,11 +1,11 @@
-import { useState } from "react";
+import { useContext, useState } from "react";
 import {
-  GoABadge,
-  GoADropdown,
-  GoADropdownItem, GoADropdownProps,
-  GoAFormItem,
-  GoATab,
-  GoATabs
+  GoabBadge,
+  GoabDropdown,
+  GoabDropdownItem, GoabDropdownProps,
+  GoabFormItem,
+  GoabTab,
+  GoabTabs
 } from "@abgov/react-components";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
@@ -18,6 +18,9 @@ import {
 import { useSandboxFormItem } from "@hooks/useSandboxFormItem.tsx";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import { DropdownExamples } from "@examples/dropdown/DropdownExamples";
+import { GoabDropdownOnChangeDetail } from "@abgov/ui-components-common";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { LegacyMarginProperty, MarginProperty } from "@components/component-properties/common-properties.ts";
 
 // == Page props ==
 const componentName = "Dropdown";
@@ -29,15 +32,16 @@ const relatedComponents = [
   { link: "/components/popover", name: "Popover" },
   { link: "/components/radio", name: "Radio" },
 ];
-type ComponentPropsType = GoADropdownProps;
+type ComponentPropsType = GoabDropdownProps;
 type CastingType = {
   name: string;
   value: string;
   [key: string]: unknown;
-  onChange: (name: string, values: string[] | string) => void;
+  onChange: (event: GoabDropdownOnChangeDetail) => void;
 }
 
 export default function DropdownPage() {
+  const {version} = useContext(LanguageVersionContext);
   const [dropdownProps, setDropdownProps] = useState<ComponentPropsType>({
     name: "item",
     value: "",
@@ -77,7 +81,7 @@ export default function DropdownPage() {
   ]);
   const { formItemBindings, formItemProps, onFormItemChange } = useSandboxFormItem({ label: "Basic dropdown" });
 
-  const dropdownProperties: ComponentProperty[] = [
+  const oldDropdownProperties: ComponentProperty[] = [
     {
       name: "name",
       type: "string",
@@ -197,13 +201,94 @@ export default function DropdownPage() {
       type: "(name: string, value: string[] | string | null) => void",
       description: "Callback function when dropdown value is changed.",
     },
+    LegacyMarginProperty,
+  ];
+  const dropdownProperties: ComponentProperty[] = [
+    {
+      name: "name",
+      type: "string",
+      description: "Identifier for the Dropdown. Should be unique.",
+    },
+    {
+      name: "value",
+      type: "string",
+      description: "Stores the value of the item selected from the dropdown.",
+    },
+    {
+      name: "leadingIcon",
+      type: "GoAIconType",
+      description: "Show an icon to the left of the dropdown option.",
+    },
+    {
+      name: "maxHeight",
+      type: "string",
+      description: "Maximum height of the dropdown menu items popover. Non-native only.",
+      defaultValue: "276px",
+    },
+    {
+      name: "placeholder",
+      type: "string",
+      description:
+        "The text displayed for the dropdown before a selection is made. Non-native only.",
+    },
+    {
+      name: "width",
+      type: "string",
+      description: "Overrides the autosized menu width. Non-native only.",
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      description: "Disable this control.",
+      defaultValue: "false",
+    },
+    {
+      name: "relative",
+      type: "boolean",
+      description: "Set to true if a parent element has a css positive of relative.",
+      defaultValue: "false",
+    },
+    {
+      name: "error",
+      type: "boolean",
+      description: "Show an error state",
+      defaultValue: "false",
+    },
+    {
+      name: "ariaLabel",
+      type: "string",
+      description:
+        "Defines how the selected value will be translated for the screen reader. If not specified it will fall back to the name.",
+    },
+    {
+      name: "ariaLabelledBy",
+      type: "string",
+      description:
+        "The aria-labelledby attribute identifies the element(or elements) that labels the dropdown it is applied to. Normally it is the id of the label.",
+    },
+    {
+      name: "native",
+      type: "boolean",
+      defaultValue: "false",
+      description: "When true will render the native <select> html element.",
+    },
+    {
+      name: "filterable",
+      type: "boolean",
+      defaultValue: "false",
+      description:
+        "When true the dropdown will have the ability to filter options by typing into the input field.",
+    },
     {
-      name: "mt,mr,mb,ml",
-      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
-      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+      name: "onChange",
+      type: "(event: GoabDropdownOnChangeDetail) => void",
+      required: true,
+      description: "Callback function when dropdown value is changed",
     },
+    MarginProperty,
   ];
-  const dropdownItemProperties: ComponentProperty[] = [
+
+  const oldDropdownItemProperties: ComponentProperty[] = [
     {
       name: "value",
       type: "string",
@@ -237,6 +322,32 @@ export default function DropdownPage() {
       defaultValue: "append"
     }
   ];
+  const dropdownItemProperties: ComponentProperty[] = [
+    {
+      name: "value",
+      type: "string",
+      required: true,
+      description: "The value of the item. This value will be contained within the onChange event",
+    },
+    {
+      name: "label",
+      type: "string",
+      description:
+        "The displayed value within the selection box. The value property is the fallback value.",
+    },
+    {
+      name: "filter",
+      type: "string",
+      description:
+        "In case of the filterable dropdown, this property is for us to set what we want to search the option with different keywords. The label or value property is the fallback value.",
+    },
+    {
+      name: "mountType",
+      type: "GoabDropdownItemMountType (append | prepend | reset)",
+      description: "The mount type for the dropdown item.",
+      defaultValue: "append"
+    }
+  ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
     setDropdownBindings(bindings);
@@ -246,9 +357,9 @@ export default function DropdownPage() {
   // Demo
   const [color, setColor] = useState<string>("");
 
-  function onChange(_name: string, value: string | string[]) {
-    setColor(value as string);
-    setDropdownProps({ ...dropdownProps, value: value as string } as CastingType);
+  function onChange(event: GoabDropdownOnChangeDetail) {
+    setColor(event.value || "");
+    setDropdownProps({ ...dropdownProps, value: event.value || "" } as CastingType);
   }
 
   return (
@@ -256,16 +367,16 @@ export default function DropdownPage() {
       <ComponentHeader name={componentName} category={category} description={description} relatedComponents={relatedComponents} />
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
 
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{display: "none"}}>Component</h2>
             <Sandbox
               properties={dropdownBindings}
               formItemProperties={formItemBindings}
               onChange={onSandboxChange}
               onChangeFormItemBindings={onFormItemChange}
-              flags={["reactive"]}>
-              <CodeSnippet
+              flags={version === "old" ? ["reactive"] : ["reactive", "template-driven", "event"]}>
+              {version === "old" && <CodeSnippet
                 lang="typescript"
                 tags="angular"
                 allowCopy={true}
@@ -278,9 +389,22 @@ export default function DropdownPage() {
                   }
                 }  
               `}
-              />
+              />}
+              {version === "new"  && <CodeSnippet
+                lang="typescript"
+                tags="angular"
+                allowCopy={true}
+                code={`
+                // non-reactive code
+                export class MyComponent {
+                  dropdownOnChange(event: GoabDropdownOnChangeDetail) {
+                    console.log(event.value);
+                  }
+                }  
+              `}
+              />}
 
-              <CodeSnippet
+              {version === "old" && <CodeSnippet
                 lang="typescript"
                 tags={["angular", "reactive"]}
                 allowCopy={true}
@@ -291,9 +415,25 @@ export default function DropdownPage() {
                   itemFormCtrl = new FormControl("");
                 }  
               `}
-              />
+              />}
+
+              {version === "new" && <CodeSnippet
+                lang="typescript"
+                tags={["angular", "reactive"]}
+                allowCopy={true}
+                code={`
+               export class ExampleComponent {
+                  form!: FormGroup;
+                  constructor(private fb: FormBuilder) {
+                    this.form = this.fb.group({
+                      item: [""]
+                    });
+                  }
+              }
+              `}
+              />}
 
-              <CodeSnippet
+              {version === "old" && <CodeSnippet
                 lang="typescript"
                 tags="react"
                 allowCopy={true}
@@ -302,38 +442,64 @@ export default function DropdownPage() {
                  console.log("onChange", name, value);
                 }
               `}
-              />
+              />}
 
-              <GoAFormItem {...formItemProps}>
-                <GoADropdown name="item" value={color} {...dropdownProps}>
-                  <GoADropdownItem value="red" label="Red" />
-                  <GoADropdownItem value="green" label="Green" />
-                  <GoADropdownItem value="blue" label="Blue" />
-                </GoADropdown>
-              </GoAFormItem>
+              {version === "new" && <CodeSnippet
+                lang="typescript"
+                tags="react"
+                allowCopy={true}
+                code={`
+                function dropdownOnChange(event: GoabDropdownOnChangeDetail) {
+                 console.log("onChange", event.name, event.value);
+                }
+              `}
+              />}
+
+              {version === "new" && <CodeSnippet
+                lang="typescript"
+                tags={["angular", "template-driven"]}
+                allowCopy={true}
+                code={`
+               export class ExampleComponent {
+                  item = "";
+                  dropdownOnChange(event: GoabDropdownOnChangeDetail) {
+                    console.log(event.value);
+                    this.item = event.value as string;
+                  }
+               }
+              `}
+              />}
+
+              <GoabFormItem {...formItemProps}>
+                <GoabDropdown name="item" value={color} {...dropdownProps}>
+                  <GoabDropdownItem value="red" label="Red" />
+                  <GoabDropdownItem value="green" label="Green" />
+                  <GoabDropdownItem value="blue" label="Blue" />
+                </GoabDropdown>
+              </GoabFormItem>
             </Sandbox>
 
-            <ComponentProperties properties={dropdownProperties} />
+            <ComponentProperties properties={dropdownProperties} oldProperties={oldDropdownProperties} />
 
             <ComponentProperties
               heading="Dropdown item properties"
               properties={dropdownItemProperties}
+              oldProperties={oldDropdownItemProperties}
             />
-
             <DropdownExamples/>
-          </GoATab>
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }
           >
             <p>Coming Soon</p>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/FileUploader.tsx b/src/routes/components/FileUploader.tsx
index 314baf4e1..49cd8a5f6 100644
--- a/src/routes/components/FileUploader.tsx
+++ b/src/routes/components/FileUploader.tsx
@@ -1,14 +1,14 @@
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader";
 import { propsToString } from "@components/sandbox/BaseSerializer"
 import {
-  GoAFileUploadCard,
-  GoAFileUploadInput,
-  GoAFileUploadInputProps,
-  GoAFormItem,
-  GoATab,
-  GoATabs,
+  GoabFileUploadCard,
+  GoabFileUploadInput,
+  GoabFileUploadInputProps,
+  GoabFormItem,
+  GoabTab,
+  GoabTabs,
 } from "@abgov/react-components";
 import {
   ComponentProperties,
@@ -16,6 +16,8 @@ import {
 } from "@components/component-properties/ComponentProperties";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { MarginProperty, TestIdProperty } from "@components/component-properties/common-properties.ts";
 
 interface Uploader {
   upload: (url: string | ArrayBuffer) => void;
@@ -61,13 +63,14 @@ const relatedComponents = [
   { link: "/components/container", name: "Container" },
   { link: "/components/progress-indicator", name: "Progress indicator" }
 ];
-type ComponentPropsType = Omit<GoAFileUploadInputProps, "onSelectFile">;
+type ComponentPropsType = Omit<GoabFileUploadInputProps, "onSelectFile">;
 type CastingType = {
   maxFileSize: string;
   [key: string]: unknown;
 };
 
 export default function FileUploaderPage() {
+  const {version} = useContext(LanguageVersionContext);
   const [fileUploaderProps, setFileUploaderProps] = useState<ComponentPropsType>({
     maxFileSize: "100MB",
   });
@@ -89,7 +92,7 @@ export default function FileUploaderPage() {
     },
   ]);
 
-  const fileUploadInputProperties: ComponentProperty[] = [
+  const oldFileUploadInputProperties: ComponentProperty[] = [
     {
       name: "variant",
       type: "dragdrop | button",
@@ -130,8 +133,36 @@ export default function FileUploaderPage() {
       description: "Event fired for each file selected",
     },
   ];
+  const fileUploadInputProperties: ComponentProperty[] = [
+    {
+      name: "variant",
+      type: "GoabFileUploadInputVariant (dragdrop | button)",
+      required: true,
+      description: "The variant to be used",
+      defaultValue: "dragdrop",
+    },
+    {
+      name: "accept",
+      type: "string",
+      description: "Mimetype to limit the types of files.",
+    },
+    {
+      name: "maxFileSize",
+      type: "string",
+      description: "Max allowed file size.",
+      defaultValue: "5MB",
+    },
+    TestIdProperty,
+    MarginProperty,
+    {
+      name: "onSelectFile",
+      required: true,
+      type: "(event: GoabFileUploadInputOnSelectFileDetail) => void",
+      description: "Event fired for each file selected",
+    },
+  ];
 
-  const fileUploadCardProperties: ComponentProperty[] = [
+  const oldFileUploadCardProperties: ComponentProperty[] = [
     {
       name: "filename",
       type: "string",
@@ -188,6 +219,49 @@ export default function FileUploaderPage() {
       description: "Event fired when a file upload is deleted",
     },
   ];
+  const fileUploadCardProperties: ComponentProperty[] = [
+    {
+      name: "filename",
+      type: "string",
+      required: true,
+      description: "Name of the file",
+    },
+    {
+      name: "size",
+      type: "number",
+      required: true,
+      description: "Size (B) of the file",
+    },
+    {
+      name: "type",
+      type: "string",
+      description: "Type of the file",
+    },
+    {
+      name: "progress",
+      type: "number",
+      description: "Percent progress of the file upload",
+    },
+    {
+      name: "error",
+      type: "string",
+      description: "Error message",
+    },
+    TestIdProperty,
+    {
+      name: "onCancel",
+      type: "(event: GoabFileUploadOnCancelDetail) => void",
+      required: true,
+      description: "Event fired when a file upload is cancelled",
+    },
+    {
+      name: "onDelete",
+      type: "(event: GoabFileUploadOnDeleteDetail) => void",
+      required: true,
+      description: "Event fired when a file upload is deleted",
+    },
+  ];
+
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
     setFileUploaderBindings(bindings);
@@ -230,8 +304,8 @@ export default function FileUploaderPage() {
       <ComponentHeader name={componentName} category={category} description={description} relatedComponents={relatedComponents} />
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
 
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{display: "none"}}>Component</h2>
             <Sandbox properties={fileUploaderBindings} onChange={onSandboxChange} fullWidth skipRender>
 
@@ -266,8 +340,17 @@ export default function FileUploaderPage() {
                    // implement your logic to abort file upload
                   }
                 }
-              
-                class FileUploadComponent {
+              `}
+              />
+
+              {/************* Angular old code snippets *******************/}
+
+              {version === "old" && <CodeSnippet
+                lang="typescript"
+                tags="angular"
+                allowCopy={true}
+                code={`
+                export class FileUploadComponent {
                   uploads: Upload[] = [];
                   progressList: Record<string, number> = {};
               
@@ -300,15 +383,15 @@ export default function FileUploaderPage() {
                   }
                 }
               `}
-              />
+              />}
 
-              <CodeSnippet
+              {version === "old" && <CodeSnippet
                 lang="html"
                 tags="angular"
                 allowCopy={true}
                 code={`
                 <goa-form-item label="Upload a file">
-                  <goa-file-upload-input (_selectFile)="uploadFile($event)" ${propsToString(fileUploaderProps, "angular")}></goa-file-upload-input>
+                  <goa-file-upload-input (_selectFile)="uploadFile($event)" ${propsToString(fileUploaderProps, "angular", version)}></goa-file-upload-input>
                   <goa-file-upload-card
                     *ngFor="let upload of uploads; index as i"
                     [type]="upload.file.type"
@@ -321,14 +404,170 @@ export default function FileUploaderPage() {
                   </goa-file-upload-card>              
                 </goa-form-item>
               `}
-              />
+              />}
+
+
+              {/************* Angular new code snippets *******************/}
+
+              {version === "new" && <CodeSnippet
+                lang="typescript"
+                tags="angular"
+                allowCopy={true}
+                code={`
+                export class FileUploadComponent {
+                  uploads: Upload[] = [];
+                  progressList: Record<string, number> = {};
+              
+                  uploadFile(e: GoabFileUploadInputOnSelectFileDetail) {
+                    const reader = new FileReader();
+                    const file = e.file;
+                    reader.onload = (e: ProgressEvent<FileReader>) => {
+                      if (!e.target) return;
+                      const url = e.target.result;
+                      const uploader = new MockUploader();
+              
+                      this.uploads.push({file, uploader});
+              
+                      uploader.onabort = () => console.log("Aborting upload");
+                      uploader.onfail = err => console.log("Upload failed: ", err);
+                      uploader.oncomplete = () => console.log("File upload complete");
+                      uploader.onprogress = percent => {
+                        this.progressList[file.name] = percent;
+                      };
+                      if (url) {
+                        uploader.upload(url);
+                      }
+                    };
+                    reader.readAsDataURL(file);
+                  }
+              
+                  deleteFile(upload: Upload) {
+                    upload.uploader.abort();
+                    this.uploads = this.uploads.filter(u => u.file.name !== upload.file.name);
+                  }
+                }
+              `}
+              />}
 
+              {version === "new" && <CodeSnippet
+                lang="html"
+                tags="angular"
+                allowCopy={true}
+                code={`
+                <goab-form-item label="Upload a file">
+                  <goab-file-upload-input variant="dragdrop" (onSelectFile)="uploadFile($event)" maxFileSize="100MB"></goab-file-upload-input>
+                    <goab-file-upload-card
+                      *ngFor="let upload of uploads; index as i"
+                      [type]="upload.file.type"
+                      [size]="upload.file.size"
+                      [filename]="upload.file.name"
+                      [progress]="progressList[upload.file.name]"
+                      (onDelete)="deleteFile(upload)"
+                      (onCancel)="deleteFile(upload)"
+                    >
+                  </goab-file-upload-card>
+                </goab-form-item>
+              `}
+              />}
 
               {/* ***** */}
               {/* React */}
               {/* ***** */}
 
               <CodeSnippet
+                lang="typescript"
+                tags="react"
+                allowCopy={true}
+                code={`
+                  interface Uploader {
+                    upload: (url: string | ArrayBuffer) => void;
+                    abort: () => void;
+                  }
+                  interface Upload {
+                    file: File;
+                    uploader: Uploader;
+                  }
+                  class MockUploader implements Uploader {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    public onprogress: (percent: number) => void = (_: number) => {};
+                    public onabort: () => void = () => {};
+                    public onfail: (err: string) => void = (_: string) => {};
+                    public oncomplete: () => void = () => {};
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    upload(_url: string | ArrayBuffer) {
+                      // implement your logic to upload files
+                    }
+
+                    abort() {
+                      // implement your logic to abort file upload
+                    }
+                  }
+              `}
+              />
+
+              {/************* React old code snippets *******************/}
+              {version === "old" && <CodeSnippet
+                lang="typescript"
+                tags="react"
+                allowCopy={true}
+                code={`
+              const [uploads, setUploads] = useState<Upload[]>([]);
+              const [progressList, setProgressList] = useState<Record<string, number>>({});
+
+              function deleteFile(file: Upload) {
+                  setUploads((uploadz) => {
+                    return uploadz.filter(u => u.name !== file.name);
+                })
+              }
+
+              function uploadFile(file: File) {
+                const reader = new FileReader();
+                reader.onload = (e: ProgressEvent<FileReader>) => {
+                if (!e.target) return;
+                const url = e.target.result;
+                const uploader = new MockUploader();
+                setUploads(old => [...old, {file, uploader}]);
+
+                uploader.onabort = () => console.log("Aborting upload");
+                uploader.onfail = err => console.log("Upload failed: ", err);
+                uploader.oncomplete = () => console.log("File upload complete");
+                uploader.onprogress = percent => {
+                setProgressList(old => ({...old, [file.name]: percent}));
+              };
+
+              if (url) {
+                  uploader.upload(url);
+                }
+              }
+              reader.readAsDataURL(file);
+            `}
+              />}
+
+              {version === "old" && <CodeSnippet
+                lang="html"
+                tags="react"
+                allowCopy={true}
+                code={`
+                <GoAFormItem label="Upload a file">
+                  <GoAFileUploadInput onSelectFile={uploadFile} ${propsToString(fileUploaderProps, "react", version)} />
+                  {uploads.map(upload => (
+                    <GoAFileUploadCard
+                      key={upload.file.name}
+                      filename={upload.file.name}
+                      type={upload.file.type}
+                      size={upload.file.size}
+                      progress={progressList[upload.file.name]}
+                      onDelete={() => deleteFile(upload)}
+                      onCancel={() => deleteFile(upload)}
+                    />
+                  ))}
+                </GoAFormItem>
+              `}
+              />}
+
+              {/************* React new code snippets *******************/}
+              {version === "new" && <CodeSnippet
                 lang="typescript"
                 tags="react"
                 allowCopy={true}
@@ -336,63 +575,65 @@ export default function FileUploaderPage() {
                 const [uploads, setUploads] = useState<Upload[]>([]);
                 const [progressList, setProgressList] = useState<Record<string, number>>({});
 
-                function deleteFile(file: Upload) {
+                function deleteFile(fileName: string) {
                   setUploads((uploadz) => {
-                    return uploadz.filter(u => u.name !== file.name);
+                    return uploadz.filter(u => fileName !== u.file.name);
                   })
                 }
 
                 function uploadFile(file: File) {
                   const reader = new FileReader();
                   reader.onload = (e: ProgressEvent<FileReader>) => {
-                  if (!e.target) return;
-                  const url = e.target.result;
-                  const uploader = new MockUploader();
+                    if (!e.target) return;
+                    const url = e.target.result;
+                    const uploader = new MockUploader();
 
-                  setUploads(old => [...old, {file, uploader}]);
+                    setUploads(old => [...old, { file, uploader }]);
 
-                  uploader.onabort = () => console.log("Aborting upload");
-                  uploader.onfail = err => console.log("Upload failed: ", err);
-                  uploader.oncomplete = () => console.log("File upload complete");
-                  uploader.onprogress = percent => {
-                    setProgressList(old => ({...old, [file.name]: percent}));
-                  };
+                    uploader.onabort = () => console.log("Aborting upload");
+                    uploader.onfail = err => console.log("Upload failed: ", err);
+                    uploader.oncomplete = () => console.log("File upload complete");
+                    uploader.onprogress = percent => {
+                      setProgressList(old => ({ ...old, [file.name]: percent }));
+                    };
 
-                  if (url) {
-                    uploader.upload(url);
+                    if (url) {
+                      uploader.upload(url);
+                    }
                   }
+                  reader.readAsDataURL(file);
                 }
-                reader.readAsDataURL(file);
               `}
-              />
+              />}
 
-              <CodeSnippet
-                lang="typescript"
+              {version === "new" && <CodeSnippet
+                lang="html"
                 tags="react"
                 allowCopy={true}
                 code={`
-                <GoAFormItem label="Upload a file">
-                  <GoAFileUploadInput onSelectFile={uploadFile} ${propsToString(fileUploaderProps, "react")} />
+                <GoabFormItem label="Upload a file">
+                  <GoabFileUploadInput onSelectFile={(event: GoabFileUploadInputOnSelectFileDetail) => uploadFile(event.file)} ${propsToString(fileUploaderProps, "react", version)} />
                   {uploads.map(upload => (
-                    <GoAFileUploadCard
+                    <GoabFileUploadCard
                       key={upload.file.name}
                       filename={upload.file.name}
                       type={upload.file.type}
                       size={upload.file.size}
                       progress={progressList[upload.file.name]}
-                      onDelete={() => deleteFile(upload)}
-                      onCancel={() => deleteFile(upload)}
+                      onDelete={(detail: GoabFileUploadOnDeleteDetail) => deleteFile(detail.filename)}
+                      onCancel={(detail: GoabFileUploadOnCancelDetail) => deleteFile(detail.filename)}
                     />
                   ))}
-                </GoAFormItem>
+                </GoabFormItem>
               `}
-              />
+              />}
 
-              <GoAFormItem label="Upload a file">
-                <GoAFileUploadInput onSelectFile={uploadFile} {...fileUploaderProps} />
+              <GoabFormItem label="Upload a file">
+                <GoabFileUploadInput onSelectFile={(e) => uploadFile(e.file)} {...fileUploaderProps} />
                 {uploads.map(upload => (
-                  <GoAFileUploadCard
+                  <GoabFileUploadCard
                     key={upload.file.name}
+                    testId={"file-upload-card"}
                     filename={upload.file.name}
                     type={upload.file.type}
                     size={upload.file.size}
@@ -401,21 +642,23 @@ export default function FileUploaderPage() {
                     onCancel={() => deleteFile(upload)}
                   />
                 ))}
-              </GoAFormItem>
+              </GoabFormItem>
             </Sandbox>
 
             <ComponentProperties
               heading="FileUploadInput properties"
               properties={fileUploadInputProperties}
+              oldProperties={oldFileUploadInputProperties}
             />
 
             <ComponentProperties
               heading="FileUploadCard properties"
               properties={fileUploadCardProperties}
+              oldProperties={oldFileUploadCardProperties}
             />
 
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/FilterChip.tsx b/src/routes/components/FilterChip.tsx
index 7d3c93380..924a9fb20 100644
--- a/src/routes/components/FilterChip.tsx
+++ b/src/routes/components/FilterChip.tsx
@@ -1,23 +1,23 @@
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import {
-  GoABadge,
-  GoAButton,
-  GoAButtonGroup,
-  GoAContainer,
-  GoAFilterChip,
-  GoAFilterChipProps,
-  GoAInput,
-  GoATab,
-  GoATabs,
+  GoabBadge,
+  GoabFilterChip, GoabFilterChipProps,
+  GoabTab,
+  GoabTabs
 } from "@abgov/react-components";
-import { ComponentBinding, LanguageContext, Sandbox } from "@components/sandbox";
-import { useContext, useState } from "react";
+import { ComponentBinding, Sandbox } from "@components/sandbox";
+import { useState } from "react";
 import {
   ComponentProperties,
   ComponentProperty,
 } from "@components/component-properties/ComponentProperties.tsx";
 import { ComponentContent } from "@components/component-content/ComponentContent";
-import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import {
+  LegacyTestIdProperties,
+  MarginProperty,
+  TestIdProperty
+} from "@components/component-properties/common-properties.ts";
+import { FilterChipExamples } from "@examples/filter-chip/FilterChipExamples.tsx";
 
 // Page props
 const componentName = "Filter Chip";
@@ -26,9 +26,9 @@ const category = Category.FEEDBACK_AND_ALERTS;
 const relatedComponents = [
   { link: "/components/badge", name: "Badge" },
   { link: "/components/popover", name: "Popover" },
-  { link: "/components/Table", name: "Table" },
+  { link: "/components/table", name: "Table" },
 ];
-type ComponentPropsType = GoAFilterChipProps;
+type ComponentPropsType = GoabFilterChipProps;
 
 type CastingType = {
   content: string;
@@ -39,7 +39,6 @@ export default function FilterChipPage() {
   const [componentProps, setComponentProps] = useState<ComponentPropsType>({
     content: "Chip text",
   });
-  const language = useContext(LanguageContext);
   const [componentBindings, setComponentBindings] = useState<ComponentBinding[]>([
     {
       label: "Error",
@@ -55,7 +54,7 @@ export default function FilterChipPage() {
     },
   ]);
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "error",
       type: "boolean",
@@ -80,18 +79,28 @@ export default function FilterChipPage() {
       description: "Callback when deletable and delete icon is clicked.",
       lang: "react",
     },
+    ...LegacyTestIdProperties,
+  ];
+  const componentProperties: ComponentProperty[] = [
     {
-      name: "testId",
-      type: "string",
-      lang: "react",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+      name: "error",
+      type: "boolean",
+      description: "Shows an error state.",
     },
+
     {
-      name: "testid",
+      name: "content",
       type: "string",
-      lang: "angular",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+      required: true,
+      description: "Text label of the chip.",
+    },
+    {
+      name: "onClick",
+      type: "() = void",
+      description: "Callback when deletable and delete icon is clicked.",
     },
+    TestIdProperty,
+    MarginProperty,
   ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
@@ -99,49 +108,6 @@ export default function FilterChipPage() {
     setComponentProps(props as CastingType);
   }
 
-  const [chips, setChips] = useState(["Chip 1", "Chip 2", "Chip 3"]);
-  const [activeFilters, setActiveFilters] = useState<string[]>([]);
-
-  const deleteChip = (chip: string) => {
-    setChips(prevChips => prevChips.filter(c => c !== chip));
-  };
-
-  const addFilter = () => {
-    const randomFilter = `Filter ${Math.floor(Math.random() * 100)}`;
-    if (!activeFilters.includes(randomFilter)) {
-      setActiveFilters(prevFilters => [...prevFilters, randomFilter]);
-    }
-  };
-
-  const removeFilter = (filter: string) => {
-    setActiveFilters(prevFilters => prevFilters.filter(f => f !== filter));
-  };
-
-  const [typedChips, setTypedChips] = useState<string[]>([
-    "Typed Chip 1",
-    "Typed Chip 2",
-    "Typed Chip 3",
-  ]);
-  const [inputValue, setInputValue] = useState("");
-  const handleInputChange = (_name: string, value: string) => {
-    setInputValue(value);
-  };
-
-  const handleInputKeyDown = (_name: string, value: string, key: string) => {
-    if (key === "Enter" && value.trim() !== "") {
-      setTypedChips(prevChips => [...prevChips, value.trim()]);
-      setTimeout(() => {
-        setInputValue("");
-      }, 0);
-    } else if (key === "Backspace" && value === "" && typedChips.length > 0) {
-      setTypedChips(prevChips => prevChips.slice(0, -1));
-    }
-  };
-
-  const removeTypedChip = (chip: string) => {
-    setTypedChips(prevChips => prevChips.filter(c => c !== chip));
-  };
-
   return (
     <>
       <ComponentHeader
@@ -151,369 +117,30 @@ export default function FilterChipPage() {
         relatedComponents={relatedComponents}
       />
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{ display: "none" }}>
               Component
             </h2>
             <Sandbox properties={componentBindings} onChange={onSandboxChange}>
-              <GoAFilterChip {...componentProps} />
-            </Sandbox>
-            <ComponentProperties properties={componentProperties} />
-
-            <h3 id="component-example-delete">Delete Event</h3>
-            <Sandbox skipRender>
-              {chips.map(chip => (
-                <GoAFilterChip key={chip} content={chip} onClick={() => deleteChip(chip)} mr="s" />
-              ))}
-
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                  chips: string[] = ["Chip 1", "Chip 2", "Chip 3"];
-
-                  deleteChip(chip: string): void {
-                    this.chips = this.chips.filter((c) => c !== chip);
-                  }
-                `}
-              />
-
-              <CodeSnippet
-                lang="html"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                  <goa-filter-chip
-                    *ngFor="let chip of chips"
-                    [content]="chip"
-                    (_click)="deleteChip(chip)"
-                    mr="s">
-                  </goa-filter-chip>
-                `}
-              />
-
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                  const [chips, setChips] = useState(["Chip 1", "Chip 2", "Chip 3"]);
-  
-                  const deleteChip = (chip: string) => {
-                    setChips((prevChips) => prevChips.filter((c) => c !== chip));
-                  };
-                `}
-              />
-
-              <CodeSnippet
-                lang="html"
-                tags="react"
-                allowCopy={true}
-                code={`
-                  {chips.map(chip => (
-                    <GoAFilterChip
-                      key={chip}
-                      content={chip}
-                      onClick={() => deleteChip(chip)}
-                      mr="s"
-                    />
-                  ))}
-                `}
-              />
-            </Sandbox>
-
-            <h3 id="component-interactive">Interactive Example</h3>
-            <Sandbox skipRender>
-              {activeFilters.map(filter => (
-                <GoAFilterChip
-                  key={filter}
-                  content={filter}
-                  onClick={() => removeFilter(filter)}
-                  mr="s"
-                  mb="s"
-                  mt="s"
-                />
-              ))}
-
-              <GoAButtonGroup alignment="center" mt="l">
-                <GoAButton onClick={addFilter}>Add Random Filter</GoAButton>
-              </GoAButtonGroup>
-
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                  chips: string[] = ["Chip 1", "Chip 2", "Chip 3"];
-                  activeFilters: string[] = [];
-
-                  removeFilter(filter: string): void {
-                    this.activeFilters = this.activeFilters.filter((f) => f !== filter);
-                  }
-
-                  addFilter(): void {
-                    const randomFilter = "Filter " + Math.floor(Math.random() * 100);
-                    if (!this.activeFilters.includes(randomFilter)) {
-                      this.activeFilters.push(randomFilter);
-                    }
-                  }
-                `}
-              />
-
-              <CodeSnippet
-                lang="html"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                      <div>
-                        <goa-filter-chip
-                          *ngFor="let filter of activeFilters"
-                          [content]="filter"
-                          (_click)="removeFilter(filter)"
-                          mr="s">
-                        </goa-filter-chip>
-                      </div>
-                      <goa-button-group alignment="center" mt="l">
-                        <goa-button (click)="addFilter()">Add Random Filter</goa-button>
-                      </goa-button-group>
-                `}
-              />
-
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                  const [activeFilters, setActiveFilters] = useState<string[]>([]);
-
-                  const removeFilter = (filter: string) => {
-                    setActiveFilters((prevFilters) => prevFilters.filter((f) => f !== filter));
-                  };
-
-                  const addFilter = () => {
-                    const randomFilter = 'Filter ' + Math.floor(Math.random() * 100);
-                    if (!activeFilters.includes(randomFilter)) {
-                      setActiveFilters(prevFilters => [...prevFilters, randomFilter]);
-                    }
-                  };
-                `}
-              />
-
-              <CodeSnippet
-                lang="html"
-                tags="react"
-                allowCopy={true}
-                code={`
-                  <div>
-                    {activeFilters.map((filter) => (
-                      <GoAFilterChip
-                        key={filter}
-                        content={filter}
-                        onClick={() => removeFilter(filter)}
-                        mr="s"
-                        mb="s"
-                        mt="s"
-                      />
-                    ))}
-                  </div>
-                  <GoAButtonGroup alignment="center" mt="l">
-                    <GoAButton onClick={addFilter}>Add Random Filter</GoAButton>
-                  </GoAButtonGroup>
-                `}
-              />
+              <GoabFilterChip {...componentProps} />
             </Sandbox>
+            <ComponentProperties
+              properties={componentProperties}
+              oldProperties={oldComponentProperties}
+            />
 
-            <h3 id="component-typed">Typed Chips Example</h3>
-            <GoAContainer mb="none">
-              <div
-                className="chip-input-wrapper"
-                style={{
-                  border: "1px solid #ddd",
-                  padding: "8px",
-                  borderRadius: "4px",
-                  display: "flex",
-                  flexWrap: "wrap",
-                  alignItems: "center",
-                }}>
-                <GoAInput
-                  name="chipInput"
-                  placeholder="Type and press Enter"
-                  value={inputValue}
-                  onChange={handleInputChange}
-                  onKeyPress={handleInputKeyDown}
-                  width="30ch"
-                  mr="s"
-                />
-                {typedChips.map((chip, index) => (
-                  <GoAFilterChip
-                    key={index}
-                    content={chip}
-                    onClick={() => removeTypedChip(chip)}
-                    mr="s"
-                    mt="s"
-                    mb="s"
-                  />
-                ))}
-              </div>
-            </GoAContainer>
-
-            {language === "angular" && (
-              <>
-                <CodeSnippet
-                  lang="typescript"
-                  tags="angular"
-                  allowCopy={true}
-                  code={`
-
-                  import { Component } from "@angular/core";
-
-                  @Component({
-                    selector: "abgov-chip",
-                    templateUrl: "./filter-chip.component.html",
-                    styleUrl: "./filter-chip.component.css",
-                  })
-                  export class FilterChipComponent {
-                    chips: string[] = ["Chip 1", "Chip 2", "Chip 3"];
-                    activeFilters: string[] = [];
-                    typedChips: string[] = ["Typed Chip 1", "Typed Chip 2", "Typed Chip 3"];
-                    inputValue = "";
-
-
-                    onInput(event: Event): void {
-                      this.inputValue = (event.target as HTMLInputElement).value;
-                    }
-
-                    addChip(): void {
-                      if (this.inputValue.trim()) {
-                        this.typedChips.push(this.inputValue.trim());
-                        this.inputValue = "";
-                      }
-                    }
-
-                    removeTypedChip(chip: string): void {
-                      this.typedChips = this.typedChips.filter((c) => c !== chip);
-                    }
-
-                    handleBackspace(event: KeyboardEvent): void {
-                      if (!this.inputValue && this.typedChips.length > 0 && event.key === "Backspace") {
-                        this.typedChips.pop();
-                        event.preventDefault();
-                      }
-                    }
-                  }
-                
-                `}
-                />
-              </>
-            )}
-
-            {language === "angular" && (
-              <>
-                <CodeSnippet
-                  lang="html"
-                  tags="angular"
-                  allowCopy={true}
-                  code={`
-                      <goa-input
-                          id="chipInput"
-                          type="text"
-                          [value]="inputValue"
-                          (_change)="onInput($event)"
-                          (keydown)="handleBackspace($event)"
-                          (keydown.enter)="addChip()"
-                          placeholder="Type and press Enter"
-                          mr="s">
-                      </goa-input>
-                      <goa-filter-chip
-                          *ngFor="let chip of typedChips"
-                          [content]="chip"
-                          (_click)="removeTypedChip(chip)"
-                          mr="s"
-                          mt="s"
-                          mb="s">
-                      </goa-filter-chip>
-                  `}
-                />
-              </>
-            )}
-
-            {language === "react" && (
-              <>
-                <CodeSnippet
-                  lang="typescript"
-                  tags="react"
-                  allowCopy={true}
-                  code={`
-                      const [typedChips, setTypedChips] = useState<string[]>([
-                        "Typed Chip 1",
-                        "Typed Chip 2",
-                        "Typed Chip 3",
-                      ]);
-                      const [inputValue, setInputValue] = useState("");
-                      const handleInputChange = (name: string, value: string) => {
-                        setInputValue(value);
-                      };
-
-                      const handleInputKeyDown = (name: string, 
-                                                  value: string, 
-                                                  key: string) => {
-                        if (key === "Enter" && value.trim() !== "") {
-                          setTypedChips((prevChips) => [...prevChips, value.trim()]);
-                          setTimeout(() => {
-                            setInputValue("");
-                          }, 0);
-                        } else if (key === "Backspace" 
-                                    && value === "" 
-                                    && typedChips.length > 0) {
-                          setTypedChips((prevChips) => prevChips.slice(0, -1));
-                        }
-                      };
-
-                      const removeTypedChip = (chip: string) => {
-                        setTypedChips((prevChips) => prevChips.filter((c) => c !== chip));
-                      };
-                `}
-                />
-
-                <CodeSnippet
-                  lang="html"
-                  tags="react"
-                  allowCopy={true}
-                  code={`
-                        <GoAInput
-                          name="chipInput"
-                          placeholder="Type and press Enter"
-                          value={inputValue}
-                          onChange={handleInputChange}
-                          onKeyPress={handleInputKeyDown}
-                          width="30ch"
-                          mr="s"
-                        />    
-                        {typedChips.map((chip, index) => (
-                          <GoAFilterChip
-                            key={index}
-                            content={chip}
-                            onClick={() => removeTypedChip(chip)}
-                            mr="s"
-                            mt="s"
-                            mb="s"/>
-                        ))}
-                `}
-                />
-              </>
-            )}
-          </GoATab>
+            <FilterChipExamples/>
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
-            }></GoATab>
-        </GoATabs>
+            }></GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/FormItemPage.tsx b/src/routes/components/FormItemPage.tsx
index 862d2c972..67d654efb 100644
--- a/src/routes/components/FormItemPage.tsx
+++ b/src/routes/components/FormItemPage.tsx
@@ -1,23 +1,27 @@
 import { useContext, useState } from "react";
-import { ComponentBinding, LanguageContext, Sandbox } from "@components/sandbox";
+import { ComponentBinding, Sandbox } from "@components/sandbox";
 import {
   ComponentProperties,
   ComponentProperty,
 } from "@components/component-properties/ComponentProperties.tsx";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
-import { GoABadge, GoAFormItem, GoAInput, GoATab, GoATabs } from "@abgov/react-components";
+import { GoabBadge, GoabFormItem, GoabInput, GoabTab, GoabTabs } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import {
+  LegacyMarginProperty,
+  LegacyTestIdProperties, MarginProperty,
+  TestIdProperty
+} from "@components/component-properties/common-properties.ts";
+import { FormItemExamples } from "@examples/form-item/FormItemExamples.tsx";
 
 export default function FormItemPage() {
-  const language = useContext(LanguageContext);
+  const {version} = useContext(LanguageVersionContext);
   const [formItemProps, setFormItemProps] = useState({
     label: "First name",
   });
 
-  const helptextReactNode: React.ReactNode = <><i>This is </i> slotted <b> help text</b>.</>;
-  const errorReactNode: React.ReactNode = <><i>This is </i> slotted <b>error text</b>.</>;
-
   const [formItemBindings, setFormItemBindings] = useState<ComponentBinding[]>([
     {
       label: "Label",
@@ -68,7 +72,7 @@ export default function FormItemPage() {
       value: "",
     },
   ]);
-  const componentProps: ComponentProperty[] = [
+  const oldComponentProps: ComponentProperty[] = [
     {
       name: "label",
       type: "string",
@@ -134,24 +138,64 @@ export default function FormItemPage() {
       type: "string",
       description: "Sets the maximum width of the form item.",
       lang: "angular",
-    },    
+    },
+    ...LegacyTestIdProperties,
+    LegacyMarginProperty,
+  ];
+  const componentProps: ComponentProperty[] = [
     {
-      name: "testId",
+      name: "label",
       type: "string",
+      description: "Creates a label for a form item.",
+    },
+    {
+      name: "labelSize",
+      type: "GoabFormItemLabelSize (regular | large)",
+      defaultValue: "regular",
+      description: "Sets a regular or large label size.",
+    },
+    {
+      name: "helpText",
+      type: "string | ReactNode",
+      lang: "react",
+      description: "Help text displayed under the form field to provide additional explanation.",
+    },
+    {
+      name: "helpText",
+      type: "string",
+      lang: "angular",
+      description: "Help text displayed under the form field to provide additional explanation.",
+    },
+    {
+      name: "error",
+      type: "string | ReactNode",
       lang: "react",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+      description: "Error text displayed under the form field. Leave blank to indicate valid field.",
     },
     {
-      name: "testid",
+      name: "error",
       type: "string",
       lang: "angular",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+      description: "Error text displayed under the form field. Leave blank to indicate valid field.",
     },
     {
-      name: "mt,mr,mb,ml",
-      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
-      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+      name: "requirement",
+      type: "GoabFormItemRequirement (optional | required)",
+      description: "Marks the field with an optional or required label.",
     },
+    {
+      name: "id",
+      type: "string",
+      description:
+        "The id of the label, necessary for field's aria-labelledby attribute for the screen reader.",
+    },
+    {
+      name: "maxWidth",
+      type: "string",
+      description: "Sets the maximum width of the form item."
+    },
+    TestIdProperty,
+    MarginProperty,
   ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
@@ -170,26 +214,35 @@ export default function FormItemPage() {
         relatedComponents={[
           { link: "/components/checkbox", name: "Checkbox" },
           { link: "/components/dropdown", name: "Dropdown" },
-          { link: "/components/Radio", name: "Radio" },
+          { link: "/components/radio", name: "Radio" },
           { link: "/components/text-area", name: "Text area" },
           { link: "/components/text-field", name: "Text field" },
         ]}
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
+            <h2 id="component" style={{ display: "none" }}>
+              Component
+            </h2>
+            <Sandbox
+              properties={formItemBindings}
+              onChange={onSandboxChange}
+              flags={version === "old" ? ["reactive"] : ["reactive", "template-driven", "event"]}
+              allow={["form"]}>
+              {/* ************** Angular code snippets ****************/}
 
-        <GoATabs>
-          <GoATab heading="Code examples">
-            <h2 id="component" style={{display: "none"}}>Component</h2>
-            <Sandbox properties={formItemBindings} onChange={onSandboxChange} flags={["reactive"]}>
-              <CodeSnippet
-                lang="typescript"
-                tags={["angular"]}
-                allowCopy={true}
-                code={`
+              {/*Old versions*/}
+              {version === "old" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags={["angular"]}
+                  allowCopy={true}
+                  code={`
                 // non-reactive code
                 export class SomeComponent {
-                  value: string = "";
+                  value = "";
                   
                   onChange(event: Event) {
                     console.log("Event ", event);
@@ -197,138 +250,130 @@ export default function FormItemPage() {
                   }
                 }
               `}
-              />
-              <CodeSnippet
-                lang="typescript"
-                tags={["angular", "reactive"]}
-                allowCopy={true}
-                code={`
+                />
+              )}
+
+              {version === "old" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags={["angular", "reactive"]}
+                  allowCopy={true}
+                  code={`
                 // reactive code
                 export class SomeComponent {
                   itemFormCtrl = new FormControl("");
                 }
               `}
-              />
+                />
+              )}
 
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                const [value, setValue] = useState<string>("");
-              
-                onChange(name: string, value: string) {
-                  setValue(value);
+              {/*New version*/}
+              {version === "new" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags={["angular"]}
+                  allowCopy={true}
+                  code={`
+                // non-reactive code
+                export class SomeComponent {
+                  value = "";
+                  
+                 inputOnChange(event: GoabInputOnChangeDetail) {
+                  this.value = event.value;
+                  }
                 }
               `}
-              />
-
-              <GoAFormItem {...formItemProps}>
-                <GoAInput onChange={noop} value="" name="item" />
-              </GoAFormItem>
-            </Sandbox>
-
-            <ComponentProperties properties={componentProps} />
-
-            <h2 id="component-examples" className="hidden" aria-hidden="true">Examples</h2>
-
-            <h3 id="component-example-sortable-columns">Slotted Helper Text</h3>
-            <Sandbox skipRender>
-              <GoAFormItem 
-                label="First name" 
-                helpText={helptextReactNode}>
-                <GoAInput onChange={noop} value="" name="item" />
-              </GoAFormItem>
+                />
+              )}
 
-              {language === "react" && (
+              {version === "new" && (
                 <CodeSnippet
                   lang="typescript"
-                  tags="react"
+                  tags={["angular", "reactive"]}
                   allowCopy={true}
                   code={`
-                  <GoAFormItem label="First name"
-                               helpText={<><i>This is </i> slotted <b>help text</b>.</>}>
-                    <GoAInput onChange={onChange} value={value} name="item"></GoAInput>
-                  </GoAFormItem>
-                  `}
+                // reactive code
+                export class SomeComponent {
+                  form!: FormGroup;
+                  constructor(private fb: FormBuilder) {
+                    this.form = this.fb.group({
+                      item: [""]
+                    });
+                  }
+                }
+              `}
                 />
               )}
 
-              {language === "angular" && (
+              {version === "new" && (
                 <CodeSnippet
                   lang="typescript"
-                  tags="angular"
+                  tags={["angular", "template-driven"]}
                   allowCopy={true}
                   code={`
-                  <goa-form-item label="First name">
-                    <goa-input goaValue name="item" [formControl]="itemFormCtrl" [value]="itemFormCtrl.value"></goa-input>
-
-                    <div slot="helptext">
-                      <span>This is </span>
-                      <i>slotted</i>
-                      <b>help text</b>.
-                    </div>
-
-                  </goa-form-item>
-                  `}
+                //template-driven code
+                export class SomeComponent {
+                  item = "";
+                  
+                 inputOnChange(event: GoabInputOnChangeDetail) {
+                  this.item = event.value;
+                 }
+                }
+              `}
                 />
               )}
-            </Sandbox>
 
-            <h3 id="component-example-sortable-columns">Slotted Error Text</h3>
-            <Sandbox skipRender>
-              <GoAFormItem 
-                label="First name" 
-                error={errorReactNode}>
-                <GoAInput onChange={noop} value="" name="item" />
-              </GoAFormItem>
+              {/* ************** React code *****************/}
 
-              {language === "react" && (
+              {version === "old" && (
                 <CodeSnippet
                   lang="typescript"
                   tags="react"
                   allowCopy={true}
                   code={`
-                  <GoAFormItem 
-                    label="First name"
-                    error={<><i>This is </i> slotted <b>error text</b>.</>}>
-                    <GoAInput onChange={onChange} value={value} name="item"></GoAInput>
-                  </GoAFormItem>
-                  `}
+                const [value, setValue] = useState<string>("");
+              
+                inputOnChange(name: string, value: string) {
+                  setValue(value);
+                }
+              `}
                 />
               )}
 
-              {language === "angular" && (
+              {version === "new" && (
                 <CodeSnippet
                   lang="typescript"
-                  tags="angular"
+                  tags="react"
                   allowCopy={true}
                   code={`
-                  <goa-form-item label="First name">
-                  <goa-input goaValue name="item" [formControl]="itemFormCtrl" [value]="itemFormCtrl.value"></goa-input>
-
-                    <div slot="error">
-                      <span>This is </span>
-                      <i>slotted </i>
-                      <b>error text.</b>
-                    </div>
+                const [value, setValue] = useState<string>("");
 
-                  </goa-form-item>
-                  `}
+                const inputOnChange = (event: GoabInputOnChangeDetail) => {
+                  setValue(event.value);
+                }
+              `}
                 />
               )}
+              <form>
+                <GoabFormItem {...formItemProps}>
+                  <GoabInput onChange={noop} value="" name="item" />
+                </GoabFormItem>
+              </form>
             </Sandbox>
-          </GoATab>
-          <GoATab
+
+            <ComponentProperties properties={componentProps} oldProperties={oldComponentProps} />
+            <FormItemExamples />
+          </GoabTab>
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }>
             <p>Coming Soon</p>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/FormStepper.tsx b/src/routes/components/FormStepper.tsx
index 9775b7fce..2dbfff0cb 100644
--- a/src/routes/components/FormStepper.tsx
+++ b/src/routes/components/FormStepper.tsx
@@ -1,19 +1,13 @@
 import {
-  GoABadge,
-  GoAButton,
-  GoAFormStep,
-  GoAFormStepStatusType,
-  GoAFormStepper,
-  GoAFormStepperProps,
-  GoAPages,
-  GoASkeleton,
-  GoASpacer,
-  GoATab,
-  GoATabs,
-  GoAContainer,
+  GoabBadge,
+  GoabFormStepper,
+  GoabPages,
+  GoabTab,
+  GoabTabs,
+  GoabContainer,
+  GoabFormStep, GoabFormStepperProps
 } from "@abgov/react-components";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet";
-import { LanguageContext, Sandbox } from "@components/sandbox";
 import { useContext, useState } from "react";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader";
 import {
@@ -21,19 +15,26 @@ import {
   ComponentProperty,
 } from "@components/component-properties/ComponentProperties";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import {
+  LegacyMarginProperty,
+  LegacyTestIdProperties, MarginProperty,
+  TestIdProperty
+} from "@components/component-properties/common-properties.ts";
+import { FormStepperExamples } from "@examples/form-stepper/FormStepperExamples.tsx";
 
 const componentName = "Form Stepper";
 const description = "Provides a visual representation of a form through a series of steps.";
 const componentCategory = Category.STRUCTURE_AND_NAVIGATION;
 const relatedComponents = [{ link: "/components/form-item", name: "Form item" }];
-type ComponentPropsType = GoAFormStepperProps;
+type ComponentPropsType = GoabFormStepperProps;
 
 
 export default function FormStepperPage() {
-  const language = useContext(LanguageContext);
+  const {version} = useContext(LanguageVersionContext);
   const [formStepProps] = useState<ComponentPropsType>();
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "step",
       type: "number",
@@ -52,25 +53,39 @@ export default function FormStepperPage() {
       type: "CustomEvent({detail: {step: number}})",
       description: "Event fired on page change..",
     },
+    ...LegacyTestIdProperties,
+    LegacyMarginProperty,
+  ];
+  const componentProperties: ComponentProperty[] = [
     {
-      name: "testId",
-      type: "string",
-      lang: "react",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+      name: "step",
+      type: "number",
+      description:
+        "The current step state value. Leaving it blank will allow any step to be accessed.",
     },
     {
-      name: "testid",
+      name: "onChange",
+      type: "(event: GoabFormStepperOnChangeDetail) => void",
+      description: "Event fired on page change.",
+    },
+    TestIdProperty,
+    MarginProperty,
+  ];
+
+
+  const oldFormStepProperties: ComponentProperty[] = [
+    {
+      name: "text",
       type: "string",
-      lang: "angular",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+      required: true,
+      description: "Text naming or briefly describing the step.",
     },
     {
-      name: "mt,mr,mb,ml",
-      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
-      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+      name: "status",
+      type: "complete | incomplete",
+      description: "The status of the step.",
     },
   ];
-
   const formStepProperties: ComponentProperty[] = [
     {
       name: "text",
@@ -80,26 +95,12 @@ export default function FormStepperPage() {
     },
     {
       name: "status",
-      type: "complete | incomplete",
+      type: "GoabFormStepStatus (complete | incomplete)",
       description: "The status of the step.",
     },
   ];
 
   const [step, setStep] = useState(-1);
-  const [controlledStep, setControlledStep] = useState(1);
-
-  function setControlledPage(page: number) {
-    if (page < 1 || page > 4) return;
-    setControlledStep(page);
-  }
-
-  const [statusStep, setStatusStep] = useState(-1);
-  const status: GoAFormStepStatusType[] = ["complete", "complete", "incomplete", "incomplete"];
-
-  function setStatusPage(page: number) {
-    if (page < 1 || page > 4) return;
-    setStatusStep(page);
-  }
 
   return (
     <>
@@ -110,30 +111,31 @@ export default function FormStepperPage() {
         relatedComponents={relatedComponents}
       />
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{ display: "none" }}>
               Component
             </h2>
-            <GoAContainer mt="m" mb="none">
+            {/*Must use Container because Form Stepper cannot be rendered correctly inside sandbox*/}
+            <GoabContainer mt="m" mb="none">
               <div style={{ padding: "40px" }}>
-                <GoAFormStepper testId="foo" onChange={step => setStep(step)} {...formStepProps}>
-                  <GoAFormStep text="Personal details" />
-                  <GoAFormStep text="Employment history" />
-                  <GoAFormStep text="References" />
-                  <GoAFormStep text="Review" />
-                </GoAFormStepper>
-                <GoAPages current={step} mb="3xl">
+                <GoabFormStepper testId="foo" onChange={(event) => setStep(+event.step)} {...formStepProps}>
+                  <GoabFormStep text="Personal details" />
+                  <GoabFormStep text="Employment history" />
+                  <GoabFormStep text="References" />
+                  <GoabFormStep text="Review" />
+                </GoabFormStepper>
+                <GoabPages current={step} mb="3xl">
                   <div>Page 1 content</div>
                   <div>Page 2 content</div>
                   <div>Page 3 content</div>
                   <div>Page 4 content</div>
-                </GoAPages>
+                </GoabPages>
               </div>
-            </GoAContainer>
-            {language === "angular" && (
-              <>
-                <CodeSnippet
+            </GoabContainer>
+
+            {/*Angular code*/}
+            {version === "old" && <CodeSnippet
                   lang="typescript"
                   tags="angular"
                   allowCopy={true}
@@ -145,8 +147,23 @@ export default function FormStepperPage() {
                       this.step = (event as CustomEvent).detail.step;
                     }
                   }`}
-                />
-                <CodeSnippet
+            />}
+            {version === "new" && <CodeSnippet
+              lang="typescript"
+              tags="angular"
+              allowCopy={true}
+              code={`
+                    export class SomeComponent {
+                    step = -1;
+
+                    onChange(event: GoabFormStepperOnChangeDetail) {
+                      console.log("onChange event ", event);
+                      this.step = event.step;
+                    }
+                  }`}
+            />}
+
+            {version === "old" && <CodeSnippet
                   lang="html"
                   tags="angular"
                   allowCopy={true}
@@ -164,24 +181,42 @@ export default function FormStepperPage() {
                       <div>Page 4 content</div>
                     </goa-pages>
                   `}
-                />
-              </>
-            )}
-            {language === "react" && (
-              <>
-                <CodeSnippet
-                  lang="typescript"
-                  tags="react"
-                  allowCopy={true}
-                  code={`
+            />}
+
+            {version === "new" && <CodeSnippet
+              lang="html"
+              tags="angular"
+              allowCopy={true}
+              code={`
+                    <goab-form-stepper testId="foo" [step]="step" (onChange)="onChange($event)">
+                      <goab-form-step text="Personal details"></goab-form-step>
+                      <goab-form-step text="Employment history"></goab-form-step>
+                      <goab-form-step text="References"></goab-form-step>
+                      <goab-form-step text="Review"></goab-form-step>
+                    </goab-form-stepper>
+                    <goab-pages [current]="step" mb="3xl">
+                      <div>Page 1 content</div>
+                      <div>Page 2 content</div>
+                      <div>Page 3 content</div>
+                      <div>Page 4 content</div>
+                    </goab-pages>
+              `}
+            />}
+
+            {/*React code*/}
+            <CodeSnippet
+              lang="typescript"
+              tags="react"
+              allowCopy={true}
+              code={`
                     const [step, setStep] = useState<number>(-1);
                   `}
-                />
-                <CodeSnippet
-                  lang="html"
-                  tags="react"
-                  allowCopy={true}
-                  code={`
+            />
+            {version === "old" && <CodeSnippet
+              lang="html"
+              tags="react"
+              allowCopy={true}
+              code={`
                     <GoAFormStepper testId="foo" onChange={setStep}>
                       <GoAFormStep text="Personal details"></GoAFormStep>
                       <GoAFormStep text="Employment history"></GoAFormStep>
@@ -195,284 +230,44 @@ export default function FormStepperPage() {
                       <div>Page 4 content</div>
                     </GoAPages>
                   `}
-                />
-              </>
-            )}
-            {/*Component properties table*/}
-            <ComponentProperties heading="Stepper Properties" properties={componentProperties} />
-            <ComponentProperties heading="Step Properties" properties={formStepProperties} />
-
-            {/* Examples*/}
-            <h2 id="component-examples" className="hidden" aria-hidden="true">
-              Examples
-            </h2>
-            {/*Example 1*/}
-            <h3 id="component-example-controlled-navigation">Controlled Navigation</h3>
-            <p>
-              The user needs to partially or completely finish a step to be able to move forward to
-              the next step. In this case:
-              <ul>
-                <li>A step that is “Not started” will not be clickable.</li>
-                <li>A user cannot use the stepper to navigate to another page.</li>
-                <li>
-                  Clicking the Active step when you are on that step will do nothing. (no page
-                  refresh).
-                </li>
-              </ul>
-              To use the controlled type you must set a step value ≥ 1
-            </p>
-            <Sandbox fullWidth skipRender allow={["div"]}>
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                export class SomeComponent {
-                  step = 1;  // set to first step
-                  updateStep(event: Event) {
-                    this.step = (event as CustomEvent).detail.step;
-                  }
-                  setPage(page: number) {
-                    if (page < 1 || page > 4) return;
-                    this.step = page
-                  }
-                }
-              `}
-              />
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                <goa-form-stepper ml="s" mr="s" [step]="step" (_change)="updateStep($event)">
-                  <goa-form-step text="Personal details"></goa-form-step>
-                  <goa-form-step text="Employment history"></goa-form-step>
-                  <goa-form-step text="References"></goa-form-step>
-                  <goa-form-step text="Review"></goa-form-step>
-                </goa-form-stepper>
-                <goa-pages [current]="step">
-                  <div><!-- Page 1 content --></div>
-                  <div><!-- Page 2 content --></div>
-                  <div><!-- Page 3 content --></div>
-                  <div><!-- Page 4 content --></div>
-                </goa-pages>
-                <div style="display: flex; justify-content: space-between">
-                  <goa-button (_click)="setPage(step-1)" type="secondary">Previous</goa-button>
-                  <goa-button (_click)="setPage(step+1)" type="primary">Next</goa-button>
-                </div>
-              `}
-              />
-
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                const [step, setStep] = useState(1); // set to first step
-                function setPage(page) {
-                  if (page < 1 || page > 4) return;
-                  setStep(page);
-                }
-                return (
-                  <>
-                    <GoAFormStepper step={step} onChange={(step) => setStep(step)}>
-                      <GoAFormStep text="Personal details" />
-                      <GoAFormStep text="Employment history" />
-                      <GoAFormStep text="References" />
-                      <GoAFormStep text="Review" />
-                    </GoAFormStepper>
-                    <GoAPages current={step} mb="3xl">
-                      <div><!-- Page 1 content --></div>
-                      <div><!-- Page 2 content --></div>
-                      <div><!-- Page 3 content --></div>
-                      <div><!-- Page 4 content --></div>
-                    </GoAPages>
-                    <div style={{display: 'flex', justifyContent: 'space-between'}}>
-                      <GoAButton type="secondary" onClick={() => setPage(step - 1)}>Previous</GoAButton>
-                      <GoAButton type="primary" onClick={() => setPage(step + 1)}>Next</GoAButton>
-                    </div>
-                  </>
-                ) 
-              `}
-              />
-
-              <GoAFormStepper step={controlledStep} onChange={step => setControlledStep(step)}>
-                <GoAFormStep text="Personal details" />
-                <GoAFormStep text="Employment history" />
-                <GoAFormStep text="References" />
-                <GoAFormStep text="Review" />
-              </GoAFormStepper>
-              <GoAPages current={controlledStep} mb="3xl" mt="xl" mr="xl" ml="xl">
-                <div>
-                  <GoASkeleton type="article" />
-                </div>
-                <div>
-                  <GoASkeleton type="header" size={2} />
-                  <GoASkeleton type="text" />
-                  <GoASkeleton type="header" size={2} />
-                  <GoASkeleton type="text" />
-                </div>
-                <div>
-                  <GoASkeleton type="text" />
-                  <GoASpacer vSpacing="m" />
-                  <GoASkeleton type="text" />
-                </div>
-                <div>
-                  <GoASkeleton type="header" size={2} />
-                  <GoASkeleton type="text" />
-                  <GoASpacer vSpacing="m" />
-                  <GoASkeleton type="text" />
-                </div>
-              </GoAPages>
+            />}
 
-              <div style={{ display: "flex", justifyContent: "space-between" }}>
-                <GoAButton type="secondary" onClick={() => setControlledPage(controlledStep - 1)}>
-                  Previous
-                </GoAButton>
-                <GoAButton type="primary" onClick={() => setControlledPage(controlledStep + 1)}>
-                  Next
-                </GoAButton>
-              </div>
-            </Sandbox>
-
-            {/*Example 2*/}
-            <h3 id="component-example-step-status">Step status</h3>
-            The status of each step can be configured to either “complete” or “incomplete” using the
-            status property.
-
-            <Sandbox fullWidth skipRender allow={["div"]}>
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                export class SomeComponent {
-                  step = -1;
-                  // controlled by the user based on form completion
-                  status = ["complete", "complete", "incomplete", "incomplete"]
-                  updateStep(event: Event) {
-                    this.step = (event as CustomEvent).detail.step;
-                  }
-                  setPage(page: number) {
-                    if (page < 1 || page > 4) return;
-                    this.step = page
-                  }
-                }
-              `}
-              />
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                <goa-form-stepper ml="s" mr="s" [step]="step" (_change)="updateStep($event)">
-                  <goa-form-step text="Personal details" [status]="status[0]"></goa-form-step>
-                  <goa-form-step text="Employment history" [status]="status[1]"></goa-form-step>
-                  <goa-form-step text="References" [status]="status[2]"></goa-form-step>
-                  <goa-form-step text="Review" [status]="status[3]"></goa-form-step>
-                </goa-form-stepper>
-                <goa-pages [current]="step">
-                  <div><!-- Page 1 content --></div>
-                  <div><!-- Page 2 content --></div>
-                  <div><!-- Page 3 content --></div>
-                  <div><!-- Page 4 content --></div>
-                </goa-pages>
-                <div style="display: flex; justify-content: space-between">
-                  <goa-button (_click)="setPage(step-1)" type="secondary">Previous</goa-button>
-                  <goa-button (_click)="setPage(step+1)" type="primary">Next</goa-button>
-                </div>
-              `}
-              />
+            {version === "new" && <CodeSnippet
+              lang="html"
+              tags="react"
+              allowCopy={true}
+              code={`
+                    <GoabFormStepper testId="foo" onChange={(event) => setStep(+event.step)}>
+                      <GoabFormStep text="Personal details"></GoabFormStep>
+                      <GoabFormStep text="Employment history"></GoabFormStep>
+                      <GoabFormStep text="References"></GoabFormStep>
+                      <GoabFormStep text="Review"></GoabFormStep>
+                    </GoabFormStepper>
+                    <GoabPages current={step} mb="3xl">
+                      <div>Page 1 content</div>
+                      <div>Page 2 content</div>
+                      <div>Page 3 content</div>
+                      <div>Page 4 content</div>
+                    </GoabPages>
+                  `}
+            />}
 
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                const [step, setStep] = useState<number>(-1);
-                // controlled by the user based on form completion
-                const [status, setStatus] = useState<GoAFormStepStatusType[]>([
-                        "complete",
-                        "complete",
-                        "incomplete",
-                        "incomplete"
-                    ])
-                function setPage(page) {
-                  if (page < 1 || page > 4) return;
-                  setStep(page);
-                }
-                return (
-                  <>
-                    <GoAFormStepper step={step} onChange={(step) => setStep(step)}>
-                      <GoAFormStep text="Personal details" status={status[0]} />
-                      <GoAFormStep text="Employment history" status={status[1]} />
-                      <GoAFormStep text="References" status={status[2]} />
-                      <GoAFormStep text="Review" status={status[3]} />
-                    </GoAFormStepper>
-                    <GoAPages current={step} mb="xl">
-                      <div><!-- Page 1 content --></div>
-                      <div><!-- Page 2 content --></div>
-                      <div><!-- Page 3 content --></div>
-                      <div><!-- Page 4 content --></div>
-                    </GoAPages>
-                    <div style={{display: 'flex', justifyContent: 'space-between'}}>
-                      <GoAButton type="secondary" onClick={() => setPage(step - 1)}>Previous</GoAButton>
-                      <GoAButton type="primary" onClick={() => setPage(step + 1)}>Next</GoAButton>
-                    </div>
-                  </>
-                )
-              `}
-              />
+            <ComponentProperties heading="Stepper Properties" properties={componentProperties} oldProperties={oldComponentProperties} />
+            <ComponentProperties heading="Step Properties" properties={formStepProperties} oldProperties={oldFormStepProperties} />
 
-              <GoAFormStepper step={statusStep} onChange={step => setStatusStep(step)}>
-                <GoAFormStep text="Personal details" status={status[0]} />
-                <GoAFormStep text="Employment history" status={status[1]} />
-                <GoAFormStep text="References" status={status[2]} />
-                <GoAFormStep text="Review" status={status[3]} />
-              </GoAFormStepper>
-              <GoAPages current={statusStep} mb="3xl" mt="xl" mr="xl" ml="xl">
-                <div>
-                  <GoASkeleton type="article" />
-                </div>
-                <div>
-                  <GoASkeleton type="header" size={2} />
-                  <GoASkeleton type="text" />
-                  <GoASkeleton type="header" size={2} />
-                  <GoASkeleton type="text" />
-                </div>
-                <div>
-                  <GoASkeleton type="text" />
-                  <GoASpacer vSpacing="m" />
-                  <GoASkeleton type="text" />
-                </div>
-                <div>
-                  <GoASkeleton type="header" size={2} />
-                  <GoASkeleton type="text" />
-                  <GoASpacer vSpacing="m" />
-                  <GoASkeleton type="text" />
-                </div>
-              </GoAPages>
-              <div style={{ display: "flex", justifyContent: "space-between" }}>
-                <GoAButton type="secondary" onClick={() => setStatusPage(statusStep - 1)}>
-                  Previous
-                </GoAButton>
-                <GoAButton type="primary" onClick={() => setStatusPage(statusStep + 1)}>
-                  Next
-                </GoAButton>
-              </div>
-            </Sandbox>
-          </GoATab>
+            <FormStepperExamples/>
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }>
             <p>Coming Soon</p>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Grid.tsx b/src/routes/components/Grid.tsx
index 7dc4ad949..198b13581 100644
--- a/src/routes/components/Grid.tsx
+++ b/src/routes/components/Grid.tsx
@@ -5,7 +5,7 @@ import {
   ComponentProperty,
 } from "@components/component-properties/ComponentProperties";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader";
-import { GoABadge, GoAGrid, GoATab, GoATabs } from "@abgov/react-components";
+import { GoabBadge, GoabGrid, GoabTab, GoabTabs } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 
 export default function GridPage() {
@@ -27,7 +27,7 @@ export default function GridPage() {
       value: "320px",
     },
   ]);
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "gap",
       type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
@@ -54,6 +54,31 @@ export default function GridPage() {
       description: "Apply margin to the top, right, bottom, and/or left of the component.",
     },
   ];
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "gap",
+      type: "Spacing (none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl)",
+      description: "Gap between child items",
+      defaultValue: "m",
+    },
+    {
+      name: "minChildWidth",
+      type: "string",
+      description: "Minimum width of the child elements",
+      required: true,
+    },
+    {
+      name: "testId",
+      type: "string",
+      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+    },
+    {
+      name: "mt,mr,mb,ml",
+      type: "Spacing (none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl)",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },
+  ];
+
 
   function onSandboxChange(gridBindings: ComponentBinding[], props: Record<string, unknown>) {
     setGridBindings(gridBindings);
@@ -69,19 +94,19 @@ export default function GridPage() {
         relatedComponents={[
           { link: "/components/block", name: "Block" },
           { link: "/components/divider", name: "Divider" },
-          { link: "/patterns", name: "Layout" },
+          { link: "/patterns/layout", name: "Layout" },
           { link: "/components/spacer", name: "Spacer" },
         ]}
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
 
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             {/*Grid sandbox*/}
             <h2 id="component" style={{display: "none"}}>Component</h2>
             <Sandbox properties={gridBindings} onChange={onSandboxChange} fullWidth>
-              <GoAGrid {...gridProps}>
+              <GoabGrid {...gridProps}>
                 <div
                   style={{
                     padding: "1rem",
@@ -127,21 +152,21 @@ export default function GridPage() {
                 >
                   5
                 </div>
-              </GoAGrid>
+              </GoabGrid>
             </Sandbox>
             {/*Grid component properties*/}
-            <ComponentProperties properties={componentProperties} />
-          </GoATab>
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }
-          ></GoATab>
-        </GoATabs>
+          ></GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/HeroBanner.tsx b/src/routes/components/HeroBanner.tsx
index 9c6d8b77f..0dc828226 100644
--- a/src/routes/components/HeroBanner.tsx
+++ b/src/routes/components/HeroBanner.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import {
   ComponentProperties,
@@ -6,16 +6,18 @@ import {
 } from "@components/component-properties/ComponentProperties.tsx";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import {
-  GoAButton,
-  GoAHeroBanner,
-  GoAHeroBannerActions,
-  GoATab,
-  GoATabs,
+  GoabButton,
+  GoabHeroBanner,
+  GoabHeroBannerActions,
+  GoabTab,
+  GoabTabs,
 } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
 
 export default function HeroBannerPage() {
+  const {version} = useContext(LanguageVersionContext);
   const [heroBannerProps, setHeroBannerProps] = useState({
     heading: "Heading",
   });
@@ -57,7 +59,7 @@ export default function HeroBannerPage() {
       value: "",
     },
   ]);
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "heading",
       type: "string",
@@ -139,6 +141,54 @@ export default function HeroBannerPage() {
       lang: "angular",
     },
   ];
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "heading",
+      type: "string",
+      description: "Main heading text",
+    },
+    {
+      name: "backgroundUrl",
+      type: "string",
+      description: "Background image url",
+    },
+    {
+      name: "minHeight",
+      type: "string",
+      description: "Sets the height of the Hero Banner",
+      lang: "react",
+      defaultValue: "600px",
+    },
+    {
+      name: "maxContentWidth",
+      type: "string",
+      description: "Maximum width of the content area",
+      defaultValue: "100%",
+    },
+    {
+      name: "backgroundColor",
+      type: "string",
+      description: "Hero Banner background color when no background image is provided",
+      defaultValue: "#f8f8f8",
+    },
+    {
+      name: "textColor",
+      type: "string",
+      description: "Text color within the hero banner",
+      defaultValue: "#333",
+    },
+    {
+      name: "testId",
+      type: "string",
+      description: "Test ID for the component",
+    },
+    {
+      name: "actions",
+      type: "slot",
+      description: "Buttons displayed in the bottom left of the hero banner",
+      lang: "angular",
+    },
+  ];
 
   function onSandboxChange(heroBannerBindings: ComponentBinding[], props: Record<string, unknown>) {
     setHeroBannerBindings(heroBannerBindings);
@@ -156,20 +206,20 @@ export default function HeroBannerPage() {
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             {/*Hero Banner Sandbox*/}
             <h2 id="component" style={{ display: "none" }}>
               Component
             </h2>
             <Sandbox properties={heroBannerBindings} fullWidth={true} onChange={onSandboxChange}>
-              <GoAHeroBanner {...heroBannerProps}>
+              <GoabHeroBanner {...heroBannerProps}>
                 Resources are available to help Alberta entrepreneurs and small businesses start,
                 grow and succeed.
-              </GoAHeroBanner>
+              </GoabHeroBanner>
             </Sandbox>
 
-            <ComponentProperties properties={componentProperties} />
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
 
             {/* Examples*/}
             <h2 id="component-examples" className="hidden" aria-hidden="true">
@@ -178,8 +228,8 @@ export default function HeroBannerPage() {
 
             <h3 id="component-example-actions">Hero Banner with actions</h3>
             <Sandbox skipRender fullWidth>
-              <CodeSnippet
-                lang="typescript"
+              {version === "old" && <CodeSnippet
+                lang="html"
                 tags="angular"
                 allowCopy={true}
                 code={`
@@ -190,10 +240,25 @@ export default function HeroBannerPage() {
                     </div>
                   </goa-hero-banner>
                 `}
-              />
+              />}
+
+              {version === "new" && <CodeSnippet
+                lang="html"
+                tags="angular"
+                allowCopy={true}
+                code={`
+                  <goab-hero-banner heading="Supporting Businesses" [actions]="heroBannerActionTemplate">
+                    Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed.
+                    <ng-template #heroBannerActionTemplate>
+                      <goab-button type="start">Call to action</goab-button>
+                    </ng-template>
+                  </goab-hero-banner>
+                `}
+              />}
 
-              <CodeSnippet
-                lang="typescript"
+              {/*React code*/}
+              {version === "old" && <CodeSnippet
+                lang="html"
                 tags="react"
                 allowCopy={true}
                 code={`
@@ -204,20 +269,33 @@ export default function HeroBannerPage() {
                     </GoAHeroBannerActions>
                   </GoAHeroBanner>
                 `}
-              />
+              />}
+              {version === "new" && <CodeSnippet
+                lang="html"
+                tags="react"
+                allowCopy={true}
+                code={`
+                  <GoabHeroBanner heading="Supporting Businesses">
+                    Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed.
+                    <GoabHeroBannerActions>
+                      <GoabButton type="start">Call to action</GoabButton>
+                    </GoabHeroBannerActions>
+                  </GoabHeroBanner>
+                `}
+              />}
 
-              <GoAHeroBanner heading="Supporting Businesses">
+              <GoabHeroBanner heading="Supporting Businesses">
                 Resources are available to help Alberta entrepreneurs and small businesses start,
                 grow and succeed.
-                <GoAHeroBannerActions>
-                  <GoAButton type="start" onClick={noop}>
+                <GoabHeroBannerActions>
+                  <GoabButton type="start" onClick={noop}>
                     Call to action
-                  </GoAButton>
-                </GoAHeroBannerActions>
-              </GoAHeroBanner>
+                  </GoabButton>
+                </GoabHeroBannerActions>
+              </GoabHeroBanner>
             </Sandbox>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/IconButton.tsx b/src/routes/components/IconButton.tsx
index e0c5880ba..3bc562e09 100644
--- a/src/routes/components/IconButton.tsx
+++ b/src/routes/components/IconButton.tsx
@@ -1,12 +1,10 @@
 import {
-  GoABadge,
-  GoABlock,
-  GoAIconButton,
-  GoAIconButtonProps,
-  GoAIconType,
-  GoATab,
-  GoATable,
-  GoATabs,
+  GoabBadge,
+  GoabBlock,
+  GoabIconButton, GoabIconButtonProps,
+  GoabTab,
+  GoabTable,
+  GoabTabs
 } from "@abgov/react-components";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import {
@@ -17,19 +15,20 @@ import { ComponentBinding, Sandbox } from "@components/sandbox";
 import { useState } from "react";
 import ICONS from "./icons.json";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { GoabIconType } from "@abgov/ui-components-common";
 
 const componentName = "Icon button";
 const description = "A compact button with an icon and no text.";
 const componentCategory = Category.INPUTS_AND_ACTIONS;
-type ComponentPropsType = GoAIconButtonProps;
+type ComponentPropsType = GoabIconButtonProps;
 type CastingType = {
   // add any required props here
-  icon: GoAIconType;
+  icon: GoabIconType;
   [key: string]: unknown;
 };
 export default function IconButtonPage() {
   const [iconButtonProps, setIconButtonProps] = useState<ComponentPropsType>({
-    icon: "refresh",
+    icon: "refresh" as GoabIconType,
     ariaLabel: "Refresh icon",
   });
   const [iconButtonBindings, setIconButtonBindings] = useState<ComponentBinding[]>([
@@ -74,7 +73,7 @@ export default function IconButtonPage() {
     }
   ]);
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "icon",
       type: "GoAIconType",
@@ -124,7 +123,7 @@ export default function IconButtonPage() {
       lang: "angular",
     },
     {
-      name: "_click",
+      name: "onClick",
       type: "(e: any) => void",
       description: "Callback function when button is clicked.",
       lang: "react",
@@ -147,6 +146,58 @@ export default function IconButtonPage() {
       description: "Apply margin to the top, right, bottom, and/or left of the component.",
     },
   ];
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "icon",
+      type: "GoabIconType",
+      required: true,
+      description: "Sets the icon.",
+    },
+    {
+      name: "size",
+      type: "GoabIconSize (small | medium | large)",
+      description: "Sets the size of button.",
+      defaultValue: "medium",
+    },
+    {
+      name: "variant",
+      type: "GoabIconButtonVariant (color | light | dark | destructive)",
+      description: "Styles the button to show color, light, dark or destructive action.",
+      defaultValue: "color",
+    },
+    {
+      name: "title",
+      type: "string",
+      description: "Sets the title of the button.",
+      defaultValue: "",
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      description: "Disables the button.",
+      defaultValue: "false",
+    },
+    {
+      name: "ariaLabel",
+      type: "string",
+      description: "Sets the aria-label of the button.",
+    },
+    {
+      name: "onClick",
+      type: "() => void",
+      description: "Callback function when button is clicked.",
+    },
+    {
+      name: "testId",
+      type: "string",
+      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+    },
+    {
+      name: "mt,mr,mb,ml",
+      type: "Spacing (none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl)",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },
+  ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
     setIconButtonProps(props as CastingType);
@@ -162,22 +213,22 @@ export default function IconButtonPage() {
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
 
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{display: "none"}}>Component</h2>
             <Sandbox properties={iconButtonBindings} onChange={onSandboxChange}>
-              <GoAIconButton {...iconButtonProps} />
+              <GoabIconButton {...iconButtonProps} />
             </Sandbox>
 
             {/*Component properties table*/}
-            <ComponentProperties properties={componentProperties} />
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties}/>
 
             {/* Examples */}
             <h2 id="component-examples" className="hidden" aria-hidden="true">Examples</h2>
 
             <h3 id="component-example-multiple-actions-table">Show multiple actions in a compact table</h3>
             <Sandbox fullWidth>
-              <GoATable width="100%">
+              <GoabTable width="100%">
                 <thead>
                   <tr>
                     <th>Status</th>
@@ -189,109 +240,109 @@ export default function IconButtonPage() {
                 <tbody>
                   <tr>
                     <td>
-                      <GoABadge type="information" content="In progress"></GoABadge>
+                      <GoabBadge type="information" content="In progress"></GoabBadge>
                     </td>
                     <td>Darlene Robertson</td>
                     <td className="goa-table-number-column">45904</td>
                     <td>
-                      <GoABlock>
-                        <GoAIconButton size="small" icon="pencil" ariaLabel="Edit"></GoAIconButton>
-                        <GoAIconButton size="small" icon="flag" ariaLabel="Flag"></GoAIconButton>
-                        <GoAIconButton size="small" icon="mail" ariaLabel="Send"></GoAIconButton>
-                      </GoABlock>
+                      <GoabBlock>
+                        <GoabIconButton size="small" icon="pencil" ariaLabel="Edit"></GoabIconButton>
+                        <GoabIconButton size="small" icon="flag" ariaLabel="Flag"></GoabIconButton>
+                        <GoabIconButton size="small" icon="mail" ariaLabel="Send"></GoabIconButton>
+                      </GoabBlock>
                     </td>
                     <td></td>
                   </tr>
                   <tr>
                     <td>
-                      <GoABadge type="dark" content="Inactive"></GoABadge>
+                      <GoabBadge type="dark" content="Inactive"></GoabBadge>
                     </td>
                     <td>Floyd Miles</td>
                     <td className="goa-table-number-column">47838</td>
                     <td>
-                      <GoABlock>
-                        <GoAIconButton size="small" icon="pencil" ariaLabel="Edit"></GoAIconButton>
-                        <GoAIconButton size="small" icon="flag" ariaLabel="Flag"></GoAIconButton>
-                        <GoAIconButton size="small" icon="mail" ariaLabel="Send"></GoAIconButton>
-                      </GoABlock>
+                      <GoabBlock>
+                        <GoabIconButton size="small" icon="pencil" ariaLabel="Edit"></GoabIconButton>
+                        <GoabIconButton size="small" icon="flag" ariaLabel="Flag"></GoabIconButton>
+                        <GoabIconButton size="small" icon="mail" ariaLabel="Send"></GoabIconButton>
+                      </GoabBlock>
                     </td>
                     <td></td>
                   </tr>
                   <tr>
                     <td>
-                      <GoABadge type="success" content="Active"></GoABadge>
+                      <GoabBadge type="success" content="Active"></GoabBadge>
                     </td>
                     <td>Kathryn Murphy</td>
                     <td className="goa-table-number-column">34343</td>
                     <td>
-                      <GoABlock>
-                        <GoAIconButton size="small" icon="pencil" ariaLabel="Edit"></GoAIconButton>
-                        <GoAIconButton size="small" icon="flag" ariaLabel="Flag"></GoAIconButton>
-                        <GoAIconButton size="small" icon="mail" ariaLabel="Send"></GoAIconButton>
-                      </GoABlock>
+                      <GoabBlock>
+                        <GoabIconButton size="small" icon="pencil" ariaLabel="Edit"></GoabIconButton>
+                        <GoabIconButton size="small" icon="flag" ariaLabel="Flag"></GoabIconButton>
+                        <GoabIconButton size="small" icon="mail" ariaLabel="Send"></GoabIconButton>
+                      </GoabBlock>
                     </td>
                     <td></td>
                   </tr>
                   <tr>
                     <td>
-                      <GoABadge type="important" content="Recent"></GoABadge>
+                      <GoabBadge type="important" content="Recent"></GoabBadge>
                     </td>
                     <td>Annette Black</td>
                     <td className="goa-table-number-column">89897</td>
                     <td>
-                      <GoABlock>
-                        <GoAIconButton size="small" icon="pencil" ariaLabel="Edit"></GoAIconButton>
-                        <GoAIconButton size="small" icon="flag" ariaLabel="Flag"></GoAIconButton>
-                        <GoAIconButton size="small" icon="mail" ariaLabel="Send"></GoAIconButton>
-                      </GoABlock>
+                      <GoabBlock>
+                        <GoabIconButton size="small" icon="pencil" ariaLabel="Edit"></GoabIconButton>
+                        <GoabIconButton size="small" icon="flag" ariaLabel="Flag"></GoabIconButton>
+                        <GoabIconButton size="small" icon="mail" ariaLabel="Send"></GoabIconButton>
+                      </GoabBlock>
                     </td>
                     <td></td>
                   </tr>
                   <tr>
                     <td>
-                      <GoABadge type="success" content="Active"></GoABadge>
+                      <GoabBadge type="success" content="Active"></GoabBadge>
                     </td>
                     <td>Esther Howard</td>
                     <td className="goa-table-number-column">12323</td>
                     <td>
-                      <GoABlock>
-                        <GoAIconButton size="small" icon="pencil" ariaLabel="Edit"></GoAIconButton>
-                        <GoAIconButton size="small" icon="flag" ariaLabel="Flag"></GoAIconButton>
-                        <GoAIconButton size="small" icon="mail" ariaLabel="Send"></GoAIconButton>
-                      </GoABlock>
+                      <GoabBlock>
+                        <GoabIconButton size="small" icon="pencil" ariaLabel="Edit"></GoabIconButton>
+                        <GoabIconButton size="small" icon="flag" ariaLabel="Flag"></GoabIconButton>
+                        <GoabIconButton size="small" icon="mail" ariaLabel="Send"></GoabIconButton>
+                      </GoabBlock>
                     </td>
                     <td></td>
                   </tr>
                   <tr>
                     <td>
-                      <GoABadge type="success" content="Active"></GoABadge>
+                      <GoabBadge type="success" content="Active"></GoabBadge>
                     </td>
                     <td>Jane Cooper</td>
                     <td className="goa-table-number-column">56565</td>
                     <td>
-                      <GoABlock>
-                        <GoAIconButton size="small" icon="pencil" ariaLabel="Edit"></GoAIconButton>
-                        <GoAIconButton size="small" icon="flag" ariaLabel="Flag"></GoAIconButton>
-                        <GoAIconButton size="small" icon="mail" ariaLabel="Send"></GoAIconButton>
-                      </GoABlock>
+                      <GoabBlock>
+                        <GoabIconButton size="small" icon="pencil" ariaLabel="Edit"></GoabIconButton>
+                        <GoabIconButton size="small" icon="flag" ariaLabel="Flag"></GoabIconButton>
+                        <GoabIconButton size="small" icon="mail" ariaLabel="Send"></GoabIconButton>
+                      </GoabBlock>
                     </td>
                     <td></td>
                   </tr>
                 </tbody>
-              </GoATable>
+              </GoabTable>
             </Sandbox>
-          </GoATab>
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }>
             <p>Coming Soon</p>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Icons.tsx b/src/routes/components/Icons.tsx
index 93f635d11..303c3325d 100644
--- a/src/routes/components/Icons.tsx
+++ b/src/routes/components/Icons.tsx
@@ -5,14 +5,20 @@ import {
   ComponentProperties,
   ComponentProperty,
 } from "@components/component-properties/ComponentProperties.tsx";
-import { GoAGrid, GoAIcon, GoAIconType, GoATab, GoATabs } from "@abgov/react-components";
+import { GoabGrid, GoabIcon, GoabTab, GoabTabs } from "@abgov/react-components";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import { IconSnippet } from "@components/icon-snippet/IconSnippet.tsx";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { GoabIconType } from "@abgov/ui-components-common";
+import {
+  LegacyMarginProperty,
+  LegacyTestIdProperties, MarginProperty,
+  TestIdProperty
+} from "@components/component-properties/common-properties.ts";
 
 export default function IconsPage() {
   const [iconsProps, setIconsProps] = useState({
-    type: ICONS[0] as GoAIconType,
+    type: ICONS[0] as GoabIconType,
   });
   const [iconsBindings, setIconsBindings] = useState<ComponentBinding[]>([
     {
@@ -43,6 +49,7 @@ export default function IconsPage() {
       type: "number",
       name: "opacity",
       value: 1,
+      step: 0.1,
     },
     {
       label: "Fill Color",
@@ -69,7 +76,7 @@ export default function IconsPage() {
       value: "",
     },
   ]);
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "type",
       type: "GoAIconType",
@@ -131,28 +138,64 @@ export default function IconsPage() {
       lang: "react",
       description: "Sets the accessible name of the icon.",
     },
+    ...LegacyTestIdProperties,
+    LegacyMarginProperty
+  ];
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "type",
+      type: "GoabIconType",
+      description: "Sets the icon.",
+      required: true,
+    },
+    {
+      name: "size",
+      type: "GoabIconSize (small | medium | large)",
+      description: "Sets the size of icon.",
+      defaultValue: "medium",
+    },
+    {
+      name: "theme",
+      type: "GoabIconTheme (outline | filled)",
+      description: "Styles the icon to show outline or filled.",
+      defaultValue: "outline",
+    },
+    {
+      name: "inverted",
+      type: "boolean",
+      description: "Colors the icon white for use on dark backgrounds.",
+      defaultValue: "false",
+    },
     {
-      name: "testId",
+      name: "fillColor",
       type: "string",
-      lang: "react",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+      description: "Sets the fill colour of the icon.",
+      defaultValue: "false",
+    },
+    {
+      name: "opacity",
+      type: "number",
+      description: "Sets the opacity of the icon between 0 and 1.",
+      defaultValue: "1",
     },
     {
-      name: "testid",
+      name: "title",
       type: "string",
-      lang: "angular",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
-    },  
+      description: "Sets the title of the icon.",
+    },
     {
-      name: "mt,mr,mb,ml",
-      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
-      description: "Apply margin to the top, right, bottom, and/or left of the component.",
-    },  
+      name: "ariaLabel",
+      type: "string",
+      description: "Sets the accessible name of the icon.",
+    },
+    TestIdProperty,
+    MarginProperty
   ];
 
+
   function onSandboxChange(iconsBindings: ComponentBinding[], props: Record<string, unknown>) {
     setIconsBindings(iconsBindings);
-    setIconsProps(props as { type: GoAIconType; [key: string]: unknown });
+    setIconsProps(props as { type: GoabIconType; [key: string]: unknown });
   }
 
   return (
@@ -165,23 +208,23 @@ export default function IconsPage() {
           { link: "/components/badge", name: "Badge" },
           { link: "/components/callout", name: "Callout" },
           { link: "/components/icon-button", name: "Icon button" },
-          { link: "/components/Tooltip", name: "Tooltip" },
+          { link: "/components/tooltip", name: "Tooltip" },
         ]}
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             {/*Icons Sandbox*/}
             <h2 id="component" style={{ display: "none" }}>
               Component
             </h2>
             <Sandbox properties={iconsBindings} onChange={onSandboxChange}>
-              <GoAIcon {...iconsProps} />
+              <GoabIcon {...iconsProps} />
             </Sandbox>
 
             {/*Icons Properties*/}
-            <ComponentProperties properties={componentProperties} />
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
 
             {/*Icons example*/}
             <h2 id="component-examples" className="hidden" aria-hidden="true">
@@ -189,7 +232,7 @@ export default function IconsPage() {
             </h2>
 
             <h3 id="component-example-alert-messaging">Alert and messaging</h3>
-            <GoAGrid minChildWidth="230px" gap="l" mt="m">
+            <GoabGrid minChildWidth="230px" gap="l" mt="m">
               <IconSnippet type={"information-circle"} />
               <IconSnippet type={"warning"} />
               <IconSnippet type={"add-circle"} />
@@ -198,18 +241,18 @@ export default function IconsPage() {
               <IconSnippet type={"close-circle"} />
               <IconSnippet type={"help-circle"} />
               <IconSnippet type={"remove-circle"} />
-            </GoAGrid>
+            </GoabGrid>
 
             <h3 id="component-example-basic">Basic</h3>
-            <GoAGrid minChildWidth="230px" gap="l" mt="m">
+            <GoabGrid minChildWidth="230px" gap="l" mt="m">
               <IconSnippet type={"close"} />
               <IconSnippet type={"checkmark"} />
               <IconSnippet type={"add"} />
               <IconSnippet type={"remove"} />
-            </GoAGrid>
+            </GoabGrid>
 
             <h3 id="component-example-direction">Direction</h3>
-            <GoAGrid minChildWidth={"230px"} gap={"l"} mt="m">
+            <GoabGrid minChildWidth={"230px"} gap={"l"} mt="m">
               <IconSnippet type={"chevron-down"} />
               <IconSnippet type={"chevron-up"} />
               <IconSnippet type={"chevron-back"} />
@@ -222,10 +265,10 @@ export default function IconsPage() {
               <IconSnippet type={"caret-up"} />
               <IconSnippet type={"caret-back"} />
               <IconSnippet type={"caret-forward"} />
-            </GoAGrid>
+            </GoabGrid>
 
             <h3 id="component-example-interaction">Interactions</h3>
-            <GoAGrid minChildWidth={"230px"} gap={"l"} mt="m">
+            <GoabGrid minChildWidth={"230px"} gap={"l"} mt="m">
               <IconSnippet type={"menu"} />
               <IconSnippet type={"reload"} />
               <IconSnippet type={"search"} />
@@ -244,17 +287,17 @@ export default function IconsPage() {
               <IconSnippet type={"eye-off"} />
               <IconSnippet type={"cloud-upload"} />
               <IconSnippet type={"download"} />
-            </GoAGrid>
+            </GoabGrid>
 
             <h3 id="component-example-accounts">Accounts</h3>
-            <GoAGrid minChildWidth={"230px"} gap={"l"} mt="m">
+            <GoabGrid minChildWidth={"230px"} gap={"l"} mt="m">
               <IconSnippet type={"person-circle"} />
               <IconSnippet type={"settings"} />
               <IconSnippet type={"mail"} />
               <IconSnippet type={"call"} />
-            </GoAGrid>
-          </GoATab>
-        </GoATabs>
+            </GoabGrid>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/List.tsx b/src/routes/components/List.tsx
index 47ce78fae..e8198f1d2 100644
--- a/src/routes/components/List.tsx
+++ b/src/routes/components/List.tsx
@@ -1,13 +1,9 @@
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
-import { GoABadge, GoAContainer, GoATab, GoATabs } from "@abgov/react-components";
+import { GoabBadge, GoabContainer, GoabTab, GoabTabs } from "@abgov/react-components";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
-import { useContext } from "react";
-import { LanguageContext } from "@components/sandbox";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 
 export default function ListPage() {
-  const language = useContext(LanguageContext);
-
   return (
     <>
       <ComponentHeader
@@ -16,10 +12,10 @@ export default function ListPage() {
         description="Organize information into brief and clear groups."
       />
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             {/*We don't use sandbox because it isn't starting with "GoA" components*/}
-            <GoAContainer>
+            <GoabContainer>
               <ol className="goa-ordered-list">
                 <li>
                   An ordered item
@@ -51,14 +47,13 @@ export default function ListPage() {
                   </ul>
                 </li>
               </ol>
-            </GoAContainer>
+            </GoabContainer>
 
-            {language === "react" && (
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
+            <CodeSnippet
+              lang="html"
+              tags="react"
+              allowCopy={true}
+              code={`
               <ol className="goa-ordered-list">
               <li>
                 An ordered item
@@ -91,15 +86,12 @@ export default function ListPage() {
               </li>
             </ol>
             `}
-              />
-            )}
-
-            {language === "angular" && (
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
+            />
+            <CodeSnippet
+              lang="html"
+              tags="angular"
+              allowCopy={true}
+              code={`
               <ol class="goa-ordered-list">
               <li>
                 An ordered item
@@ -132,8 +124,7 @@ export default function ListPage() {
               </li>
             </ol>
             `}
-              />
-            )}
+            />
             {/* Examples*/}
 
             <h2 id="component-examples" className="hidden" aria-hidden="true">
@@ -141,7 +132,7 @@ export default function ListPage() {
             </h2>
 
             <h3 id="component-example-unordered-list">Unordered list</h3>
-            <GoAContainer mt="m">
+            <GoabContainer mt="m">
               <ul className="goa-unordered-list">
                 <li>Milk</li>
                 <li>
@@ -152,14 +143,12 @@ export default function ListPage() {
                   </ul>
                 </li>
               </ul>
-            </GoAContainer>
-
-            {language === "react" && (
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
+            </GoabContainer>
+            <CodeSnippet
+              lang="html"
+              tags="react"
+              allowCopy={true}
+              code={`
               <ul className="goa-unordered-list">
                 <li>Milk</li>
                 <li>
@@ -171,15 +160,13 @@ export default function ListPage() {
                 </li>
               </ul>
             `}
-              />
-            )}
+            />
 
-            {language === "angular" && (
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
+            <CodeSnippet
+              lang="typescript"
+              tags="angular"
+              allowCopy={true}
+              code={`
               <ul class="goa-unordered-list">
                 <li>Milk</li>
                 <li>
@@ -191,20 +178,19 @@ export default function ListPage() {
                 </li>
               </ul>
             `}
-              />
-            )}
-          </GoATab>
+            />
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }>
             <p>Coming Soon</p>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/MicrositeHeader.tsx b/src/routes/components/MicrositeHeader.tsx
index c876ba7c7..1095fb080 100644
--- a/src/routes/components/MicrositeHeader.tsx
+++ b/src/routes/components/MicrositeHeader.tsx
@@ -1,10 +1,9 @@
 import {
-  GoABadge,
-  GoAHeaderProps,
-  GoAMicrositeHeader,
-  GoAServiceLevel,
-  GoATab,
-  GoATabs,
+  GoabBadge,
+  GoabHeaderProps,
+  GoabMicrositeHeader,
+  GoabTab,
+  GoabTabs,
 } from "@abgov/react-components";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import {
@@ -15,21 +14,22 @@ import { ComponentBinding, Sandbox } from "@components/sandbox";
 import { useState } from "react";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import MicrositeHeaderExamples from "@examples/microsite-header/MicrositeHeaderExamples.tsx";
+import { GoabServiceLevel } from "@abgov/ui-components-common";
 
 const componentName = "Microsite header";
 const description =
   "Communicate what stage the service is at, connect to <a href='https://www.alberta.ca' target='_blank'>Alberta.ca</a>, and gather feedback on your service.";
 const componentCategory = Category.STRUCTURE_AND_NAVIGATION;
+type ComponentPropsType = GoabHeaderProps;
 const relatedComponents = [{ link: "/components/header", name: "Header" }];
-type ComponentPropsType = GoAHeaderProps;
 type CastingType = {
   // add any required props here
-  type: GoAServiceLevel;
+  type: GoabServiceLevel;
   [key: string]: unknown;
 };
 export default function MicrositeHeaderPage() {
   const [micrositeHeaderProps, setMicrositeHeaderProps] = useState<ComponentPropsType>({
-    type: "alpha" as GoAServiceLevel,
+    type: "alpha" as GoabServiceLevel,
   });
   const [micrositeHeaderBindings, setMicrositeHeaderBindings] = useState<ComponentBinding[]>([
     {
@@ -73,7 +73,7 @@ export default function MicrositeHeaderPage() {
     },
   ]);
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "type",
       type: "alpha | beta | live",
@@ -166,6 +166,54 @@ export default function MicrositeHeaderPage() {
       description: "Function invoked when feedback link is clicked.",
     },
   ];
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "type",
+      type: "GoabServiceLevel (alpha | beta | live)",
+      required: true,
+    },
+    {
+      name: "version",
+      type: "string | ReactNode",
+      lang: "react",
+      description: "Displayed on the right-hand side of the header.",
+    },
+    {
+      name: "version",
+      type: "string | TemplateRef",
+      lang: "angular",
+      description: "Displayed on the right-hand side of the header.",
+    },
+    {
+      name: "feedbackUrl",
+      type: "string",
+      description: "Url to feedback page that will be displayed when provided.",
+    },
+    {
+      name: "maxContentWidth",
+      type: "string",
+      description: "Maximum width of the content area",
+      defaultValue: "100%",
+    },
+    {
+      name: "feedbackUrlTarget",
+      type: "GoabLinkTarget(self | blank)",
+      description: "For internal feedback urls sets target='_self'",
+      defaultValue: "blank",
+    },
+    {
+      name: "headerUrlTarget",
+      type: "GoabLinkTarget (self | blank)",
+      description: "For internal header urls sets target='_self'",
+      defaultValue: "blank",
+    },
+    {
+      name: "onFeedbackClick",
+      type: "() => void",
+      description: "Function invoked when feedback link is clicked.",
+    },
+  ];
+
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
     setMicrositeHeaderProps(props as CastingType);
@@ -182,30 +230,29 @@ export default function MicrositeHeaderPage() {
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
-            <h2 id="component" style={{ display: "none" }}>
-              Component
-            </h2>
+
+        <GoabTabs>
+          <GoabTab heading="Code examples">
+            <h2 id="component" style={{display: "none"}}>Component</h2>
             <Sandbox properties={micrositeHeaderBindings} onChange={onSandboxChange} fullWidth>
-              <GoAMicrositeHeader {...micrositeHeaderProps} />
+              <GoabMicrositeHeader {...micrositeHeaderProps} />
             </Sandbox>
 
             {/*Component properties table*/}
-            <ComponentProperties properties={componentProperties} />
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
             <MicrositeHeaderExamples />
-          </GoATab>
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }>
             <p>Coming Soon</p>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Modal.tsx b/src/routes/components/Modal.tsx
index f580b62ec..3a36b9f56 100644
--- a/src/routes/components/Modal.tsx
+++ b/src/routes/components/Modal.tsx
@@ -1,14 +1,14 @@
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import {
-  GoABadge,
-  GoAButton,
-  GoAButtonGroup,
-  GoAModal,
-  GoAModalProps,
-  GoATab,
-  GoATabs,
+  GoabBadge,
+  GoabButton,
+  GoabButtonGroup,
+  GoabModal,
+  GoabModalProps,
+  GoabTab,
+  GoabTabs,
 } from "@abgov/react-components";
-import { ComponentBinding, LanguageContext, Sandbox } from "@components/sandbox";
+import { ComponentBinding, Sandbox } from "@components/sandbox";
 import { useContext, useEffect, useState } from "react";
 import {
   ComponentProperties,
@@ -18,6 +18,8 @@ import { resetScrollbars } from "../../utils/styling";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 import ModalExamples from "@examples/modal/ModalExamples.tsx";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { TestIdProperty } from "@components/component-properties/common-properties.ts";
 
 // == Page props ==
 
@@ -29,14 +31,14 @@ const relatedComponents = [
   { link: "/components/button-group", name: "Button group" },
   { link: "/components/callout", name: "Callout" },
 ];
-type ComponentPropsType = Omit<GoAModalProps, "open"> & { closable?: boolean };
+type ComponentPropsType = Omit<GoabModalProps, "open"> & { closable?: boolean };
 type CastingType = {
   // add any required props here
   [key: string]: unknown;
 };
 
 export default function ModalPage() {
-  const language = useContext(LanguageContext);
+  const {language} = useContext(LanguageVersionContext);
   const [componentProps, setComponentProps] = useState<ComponentPropsType>({
     heading: "Are you sure you want to exit your application?",
     role: "alertdialog",
@@ -101,7 +103,7 @@ export default function ModalPage() {
     },
   ]);
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "calloutvariant",
       type: "information | important | emergency | success | event",
@@ -185,10 +187,73 @@ export default function ModalPage() {
       lang: "react",
     },
   ];
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "calloutVariant",
+      type: "GoabModalCalloutVariant (information | important | emergency | success | event)",
+      description:
+        "Define the context and colour of the callout modal. It is required when type is set to callout.",
+    },
+    {
+      name: "heading",
+      type: "string | TemplateRef<any>",
+      description: "Heading text within the modal",
+      lang: "angular",
+    },
+    {
+      name: "heading",
+      type: "string | ReactNode",
+      description: "Heading text within the modal",
+      lang: "react",
+    },
+    {
+      name: "open",
+      type: "boolean",
+      description: "Controls if modal is visible or not",
+      defaultValue: "false",
+    },
+    {
+      name: "maxWidth",
+      type: "string",
+      description: "Set the max allowed width of the modal",
+    },
+    {
+      name: "closable",
+      type: "boolean",
+      description: "Show close icon and allow clicking the background to close the modal",
+      defaultValue: "false",
+    },
+    {
+      name: "role",
+      type: "dialog | alertdialog",
+      description:
+        "'dialog' will announce header and the 1st input element, and requires at least one interactive element. 'alert-dialog' will read the entire contents of the modal. If the modal does not include any interactive elements, use the 'alertdialog' role.",
+      defaultValue: "dialog",
+    },
+    TestIdProperty,
+    {
+      name: "onClose",
+      type: "() => void",
+      description: "",
+    },
+    {
+      name: "actions",
+      type: "TemplateRef<any>",
+      description: "Buttons displayed in the bottom right of the modal instead of a close icon",
+      lang: "angular",
+    },
+    {
+      name: "actions",
+      type: "ReactNode",
+      description: "Buttons displayed in the bottom right of the modal instead of a close icon",
+      lang: "react",
+    },
+  ];
 
   function isClosableChecked(bindings: ComponentBinding[]): boolean {
     const closable = bindings.find(b => b.name == "closable");
-    return closable?.value === true ? true : false;
+    // setClosableChecked(closable?.value === true);
+    return closable?.value === true;
   }
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
@@ -201,7 +266,6 @@ export default function ModalPage() {
         props["closable"] = true;
       }
     }
-
     setComponentBindings(bindings);
     setComponentProps(props as CastingType);
   }
@@ -224,12 +288,12 @@ export default function ModalPage() {
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{ display: "none" }}>
               Component
             </h2>
-            <Sandbox properties={componentBindings} onChange={onSandboxChange}>
+            <Sandbox properties={componentBindings} onChange={onSandboxChange} allow={["p"]}>
               <CodeSnippet
                 lang="typescript"
                 tags="angular"
@@ -237,13 +301,24 @@ export default function ModalPage() {
                 code={`
                   export class SomeOtherComponent {
                     open = false;
-                    onClick(event: Event) {
+                    onClick() {
                       this.open = !this.open;
                     }
                   }
                 `}
               />
 
+              {isClosableChecked(componentBindings) && <CodeSnippet
+                lang="typescript"
+                tags="angular"
+                allowCopy={true}
+                code={`
+                    onClose() {
+                      this.open = false;
+                   } 
+                `}
+              />}
+
               <CodeSnippet
                 lang="typescript"
                 tags="react"
@@ -256,45 +331,56 @@ export default function ModalPage() {
                 `}
               />
 
-              <GoAButton onClick={() => setOpen(true)}>Show Modal</GoAButton>
+              {isClosableChecked(componentBindings) && <CodeSnippet
+                lang="typescript"
+                tags="react"
+                allowCopy={true}
+                code={`
+                  function modalOnClose() {
+                    setOpen(false);
+                   } 
+                `}
+              />}
+
+              <GoabButton onClick={() => setOpen(true)}>Show Modal</GoabButton>
 
               {!isClosableChecked(componentBindings) && (
-                <GoAModal {...componentProps} open={open}>
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia obcaecati id
+                <GoabModal {...componentProps} open={open}>
+                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia obcaecati id
                   molestiae, natus dicta, eaque qui iusto similique, libero explicabo eligendi eius
-                  laboriosam! Repellendus ducimus officia asperiores. Eos, eius numquam.
-                  <GoAButtonGroup alignment="end" mt="xl">
-                    <GoAButton type="tertiary" onClick={() => setOpen(false)}>
+                    laboriosam! Repellendus ducimus officia asperiores. Eos, eius numquam.</p>
+                  <GoabButtonGroup alignment="end" mt={"xl"}>
+                    <GoabButton type="tertiary" onClick={() => setOpen(false)}>
                       Cancel
-                    </GoAButton>
-                    <GoAButton type="primary" onClick={() => setOpen(false)}>
+                    </GoabButton>
+                    <GoabButton type="primary" onClick={() => setOpen(false)}>
                       Exit
-                    </GoAButton>
-                  </GoAButtonGroup>
-                </GoAModal>
+                    </GoabButton>
+                  </GoabButtonGroup>
+                </GoabModal>
               )}
 
               {isClosableChecked(componentBindings) && (
-                <GoAModal {...componentProps} open={open} onClose={onClose}>
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia obcaecati id
+                <GoabModal {...componentProps} open={open} onClose={onClose}>
+                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia obcaecati id
                   molestiae, natus dicta, eaque qui iusto similique, libero explicabo eligendi eius
-                  laboriosam! Repellendus ducimus officia asperiores. Eos, eius numquam.
-                </GoAModal>
+                    laboriosam! Repellendus ducimus officia asperiores. Eos, eius numquam.</p>
+                </GoabModal>
               )}
             </Sandbox>
 
-            <ComponentProperties properties={componentProperties} />
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
             <ModalExamples/>
-          </GoATab>
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
-            }></GoATab>
-        </GoATabs>
+            }></GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Notificationbanner.tsx b/src/routes/components/Notificationbanner.tsx
index 35df1c9a9..984af7ab2 100644
--- a/src/routes/components/Notificationbanner.tsx
+++ b/src/routes/components/Notificationbanner.tsx
@@ -1,10 +1,9 @@
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import {
-  GoABadge,
-  GoANotification,
-  GoATab,
-  GoATabs,
-  NotificationType,
+  GoabBadge,
+  GoabNotification,
+  GoabTab,
+  GoabTabs,
 } from "@abgov/react-components";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import { useState } from "react";
@@ -13,6 +12,7 @@ import {
   ComponentProperty,
 } from "@components/component-properties/ComponentProperties.tsx";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { GoabNotificationType } from "@abgov/ui-components-common";
 
 // == Page props ==
 
@@ -23,7 +23,7 @@ const relatedComponents = [
   { link: "/components/callout", name: "Callout" },
 ];
 type ComponentPropsType = {
-  type: NotificationType;
+  type: GoabNotificationType;
   content?: string;
   [key: string]: unknown;
 };
@@ -56,7 +56,7 @@ export default function NotificationBannerPage() {
     },
   ]);
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "type",
       type: "success | important | information | emergency",
@@ -101,6 +101,30 @@ export default function NotificationBannerPage() {
       lang: "react",
     },
   ];
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "type",
+      type: "GoabNotificationType(success | important | information | emergency)",
+      description: "Define the context and colour of the badge",
+      defaultValue: "information"
+    },
+    {
+      name: "maxContentWidth",
+      type: "string",
+      description: "Maximum width of the content area",
+    },
+    {
+      name: "ariaLive",
+      type: "GoabAriaLiveType (polite | assertive | off)",
+      description: "Indicates how assistive technology should handle updates to the live region",
+      defaultValue: "polite",
+    },
+    {
+      name: "onDismiss",
+      type: "() => void",
+      description: "Dispatched when notification banner is closed.",
+    },
+  ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
     setComponentBindings(bindings);
@@ -113,24 +137,24 @@ export default function NotificationBannerPage() {
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
 
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{display: "none"}}>Component</h2>
             <Sandbox properties={componentBindings} onChange={onSandboxChange} fullWidth={true}>
-              <GoANotification {...componentProps}>Notification banner message</GoANotification>
+              <GoabNotification {...componentProps}>Notification banner message</GoabNotification>
             </Sandbox>
-            <ComponentProperties properties={componentProperties} />
-          </GoATab>
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties}/>
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }
-          ></GoATab>
-        </GoATabs>
+          ></GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Pagination.tsx b/src/routes/components/Pagination.tsx
index 228e561ab..6dce347d7 100644
--- a/src/routes/components/Pagination.tsx
+++ b/src/routes/components/Pagination.tsx
@@ -1,14 +1,10 @@
 import {
-  GoABadge,
-  GoAPagination,
-  GoAPaginationProps,
-  GoATab,
-  GoATable,
-  GoATabs,
-  GoABlock,
-  GoASpacer,
-  GoADropdown,
-  GoADropdownItem,
+  GoabBadge,
+  GoabPagination,
+  GoabPaginationProps,
+  GoabTab,
+  GoabTable,
+  GoabTabs,
 } from "@abgov/react-components";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import {
@@ -17,11 +13,18 @@ import {
 } from "@components/component-properties/ComponentProperties.tsx";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import { faker } from "@faker-js/faker";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import {
+  LegacyMarginProperty,
+  MarginProperty,
+  TestIdProperty
+} from "@components/component-properties/common-properties.ts";
+import { PaginationExamples } from "@examples/pagination/PaginationExamples.tsx";
 
-type ComponentPropsType = Omit<GoAPaginationProps, "pageNumber" | "onChange">;
+type ComponentPropsType = Omit<GoabPaginationProps, "pageNumber" | "onChange">;
 type CastingType = {
   itemCount: number;
   [key: string]: unknown;
@@ -37,7 +40,9 @@ export function propsToString(
       .join(" ");
   }
   return Object.entries(props)
-    .map(e => `${e[0]}="${e[1]}"`)
+    .map((e) => {
+      return typeof e[1] === 'number' ? `${e[0]}={${e[1]}}` : `${e[0]}="${e[1]}"`
+    })
     .join(" ");
 }
 
@@ -54,16 +59,12 @@ const componentCategory = Category.STRUCTURE_AND_NAVIGATION;
 const relatedComponents = [{ link: "/components/table", name: "Table" }];
 
 export default function PaginationPage() {
+  const {version} = useContext(LanguageVersionContext);
   const [paginationProps, setPaginationProps] = useState<ComponentPropsType>({
     itemCount: 30,
     perPageCount: 10,
   });
 
-  const [paginationPropsCustomExample, setpaginationPropsCustomExample] =
-    useState<ComponentPropsType>({
-      itemCount: 30,
-      perPageCount: 10,
-    });
 
   const [paginationBindings, setPaginationBindings] = useState<ComponentBinding[]>([
     {
@@ -87,31 +88,8 @@ export default function PaginationPage() {
     },
   ]);
 
-  const [paginationBindingsCustomExample, setPaginationBindingsCustomExample] = useState<
-    ComponentBinding[]
-  >([
-    {
-      label: "Variant",
-      type: "dropdown",
-      name: "variant",
-      options: ["", "all", "links-only"],
-      value: "",
-    },
-    {
-      label: "Total item count",
-      type: "number",
-      name: "itemCount",
-      value: 30,
-    },
-    {
-      label: "Items per page count",
-      type: "number",
-      name: "perPageCount",
-      value: 10,
-    },
-  ]);
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "pageNumber",
       type: "number",
@@ -150,11 +128,42 @@ export default function PaginationPage() {
       type: "(e: { detail: { page: number }}) => void",
       description: "Callback function for page change events.",
     },
+    LegacyMarginProperty,
+  ];
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "pageNumber",
+      type: "number",
+      required: true,
+      description: "The current page being viewed (non-zero based)",
+    },
+    {
+      name: "itemCount",
+      type: "number",
+      required: true,
+      description: "Total number of data items within all pages",
+    },
+    {
+      name: "perPageCount",
+      type: "number",
+      required: false,
+      defaultValue: "10",
+      description: "Number of data items shown per page",
+    },
+    {
+      name: "variant",
+      type: "GoabPaginationVariant (all | links-only)",
+      required: false,
+      defaultValue: "all",
+      description: "Controls which nav controls are visible",
+    },
     {
-      name: "mt,mr,mb,ml",
-      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
-      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+      name: "onChange",
+      type: "(event: GoabPaginationOnChangeDetail) => void",
+      description: "Callback function for page change events.",
     },
+    MarginProperty,
+    TestIdProperty,
   ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
@@ -169,6 +178,7 @@ export default function PaginationPage() {
     (paginationBindings.find(binding => binding.name === "itemCount")?.value as number) || 30;
   let perPageUsers: number =
     (paginationBindings.find(binding => binding.name === "perPageCount")?.value as number) || 10;
+
   useEffect(() => {
     const _users = [];
     for (let i = 1; i < totalUsers + 1; i++) {
@@ -182,7 +192,6 @@ export default function PaginationPage() {
     setUsers(_users);
     setPageUsers(_users.slice(0, perPageUsers));
   }, [totalUsers]);
-
   useEffect(() => {
     // Back to 1st page when 'perPageCount' changes
     setPage(1);
@@ -190,86 +199,12 @@ export default function PaginationPage() {
   }, [paginationProps.perPageCount, users]);
 
   function changePage(newPage: number) {
-    if (typeof perPageUsers !== "number") {
-      perPageUsers = Number(perPageUsers);
-    }
-
     const offset = (newPage - 1) * perPageUsers;
     const _users = users.slice(offset, offset + perPageUsers);
     setPage(newPage);
     setPageUsers(_users);
   }
 
-  // Custom Example Setup - Show X per page
-  const [usersCustomExample, setUsersCustomExample] = useState<User[]>([]);
-  const [pageUsersCustomExample, setPageUsersCustomExample] = useState<User[]>([]);
-  const [pageCustomExample, setPageCustomExample] = useState<number>(1);
-  const totalUsersCustomExample =
-    (paginationBindingsCustomExample.find(binding => binding.name === "itemCount")
-      ?.value as number) || 30;
-  let perPageUsersCustomExample: number =
-    (paginationBindingsCustomExample.find(binding => binding.name === "perPageCount")
-      ?.value as number) || 10;
-
-  useEffect(() => {
-    const _users = [];
-    for (let i = 1; i < totalUsersCustomExample + 1; i++) {
-      _users.push({
-        id: faker.string.uuid(),
-        firstName: faker.person.firstName(),
-        lastName: faker.person.lastName(),
-        age: faker.number.int({ min: 18, max: 60 }),
-      });
-    }
-    setUsersCustomExample(_users);
-    setPageUsersCustomExample(_users.slice(0, perPageUsersCustomExample));
-  }, [totalUsersCustomExample]);
-
-  useEffect(() => {
-    // Back to 1st page when 'perPageCount' changes
-    setPageCustomExample(1);
-    setPageUsersCustomExample(users.slice(0, perPageUsersCustomExample));
-  }, [paginationPropsCustomExample.perPageCount, usersCustomExample]);
-
-  function changePageCustomExample(newPageCustomExample: number) {
-    if (typeof perPageUsersCustomExample !== "number") {
-      perPageUsersCustomExample = Number(perPageUsersCustomExample);
-    }
-
-    const offset = (newPageCustomExample - 1) * perPageUsersCustomExample;
-    const _users = users.slice(offset, offset + perPageUsersCustomExample);
-    setPageCustomExample(newPageCustomExample);
-    setPageUsersCustomExample(_users);
-  }
-
-  function onSandboxChangeCustomExample(
-    bindings: ComponentBinding[],
-    props: Record<string, unknown>
-  ) {
-    setpaginationPropsCustomExample(props as CastingType);
-    setPaginationBindingsCustomExample(bindings);
-  }
-
-  // @ts-ignore
-  function handlePerPageChangeCustomExample(name: string, values: string | string[]): void {
-    const newPerPageCount = Array.isArray(values) ? parseInt(values[0]) : parseInt(values);
-
-    // Update paginationProps
-    setpaginationPropsCustomExample(prevProps => ({
-      ...prevProps,
-      perPageCount: newPerPageCount,
-    }));
-
-    // Update paginationBindings
-    setPaginationBindingsCustomExample(prevBindings =>
-      prevBindings.map(binding =>
-        binding.name === "perPageCount"
-          ? ({ ...binding, value: newPerPageCount.toString() } as ComponentBinding)
-          : binding
-      )
-    );
-  }
-
   return (
     <>
       <ComponentHeader
@@ -280,8 +215,8 @@ export default function PaginationPage() {
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{ display: "none" }}>
               Component
             </h2>
@@ -290,6 +225,8 @@ export default function PaginationPage() {
               onChange={onSandboxChange}
               fullWidth
               skipRender>
+
+              {/*========React code =========*/}
               <CodeSnippet
                 lang="typescript"
                 tags="react"
@@ -304,21 +241,21 @@ export default function PaginationPage() {
                 }
 
                 // table data
-                const [users, setUsers ] = useState([]);
+                const [users, setUsers ] = useState<User[]>([]);
 
                 // subset of data shown per page
-                const [pageUsers, setPageUsers] = useState([]);
+                const [pageUsers, setPageUsers] = useState<User[]>([]);
 
                 // page number
-                const [page, setPage] = useState(1);
+                const [page, setPage] = useState<number>(1);
                 useEffect(() => {
                   const _users = []
-                  for (let i = 0; i < 100; i++) {
+                   for (let i = 0; i < 100; i++) {
                     _users.push({
-                      id: faker.datatype.uuid(),
-                      firstName: faker.name.firstName(),
-                      lastName: faker.name.lastName(),
-                      age: faker.datatype.number({min: 18, max: 60}),
+                      id: faker.string.uuid(),
+                      firstName: faker.person.firstName(),
+                      lastName: faker.person.lastName(),
+                      age: faker.number.int({ min: 18, max: 60 }),
                     });
                   }
 
@@ -328,7 +265,7 @@ export default function PaginationPage() {
                   // save current page
                   setPageUsers(_users.slice(0, 10))
                 }, [])
-                function changePage(newPage) {
+                function changePage(newPage: number) {
                   const offset = (newPage - 1) * 10;
                   const _users = users.slice(offset, offset + 10)
                   setPage(newPage);
@@ -336,11 +273,13 @@ export default function PaginationPage() {
                 }
         `}
               />
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
+
+              {version === "old" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags="react"
+                  allowCopy={true}
+                  code={`
                   <GoATable width="100%" mb="xl">
                     <thead>
                       <tr>
@@ -367,9 +306,46 @@ export default function PaginationPage() {
                     onChange={changePage}
                   />
               `}
-              />
+                />
+              )}
+
+              {version === "new" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags="react"
+                  allowCopy={true}
+                  code={`
+                  <GoabTable width="100%" mb="xl">
+                    <thead>
+                      <tr>
+                        <th>First name</th>
+                        <th>Last name</th>
+                        <th>Age</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {pageUsers.map(u => (
+                        <tr key={u.id}>
+                          <td>{u.firstName}</td>
+                          <td>{u.lastName}</td>
+                          <td>{u.age}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </GoabTable>
+                  <GoabPagination ${propsToString(
+                    paginationProps as unknown as Record<string, string | number>,
+                    "react"
+                  )} 
+                    pageNumber={page} 
+                    onChange={event => changePage(event.page)}
+                  />
+              `}
+                />
+              )}
 
-              <CodeSnippet
+              {/*===========Angular code=============*/}
+              {version === "old" && <CodeSnippet
                 lang="typescript"
                 tags="angular"
                 allowCopy={true}
@@ -409,307 +385,101 @@ export default function PaginationPage() {
                   }
                 }
               `}
-              />
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                <goa-table width="100%" mb="xl">
-                  <thead>
-                    <tr>
-                      <th>First name</th>
-                      <th>Last name</th>
-                      <th>Age</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr *ngFor="let user of pageUsers; index as i">
-                      <td>{{ user.firstName }}</td>
-                      <td>{{ user.lastName }}</td>
-                      <td>{{ user.age }}</td>
-                    </tr>
-                  </tbody>
-                </goa-table>
-                <goa-pagination [itemcount]="users.length" perpagecount="10" [pagenumber]="page" (_change)="handlePageChange($event)"></goa-pagination>
-              `}
-              />
-              <GoATable width="100%" mb="xl">
-                <thead>
-                  <tr>
-                    <th>First name</th>
-                    <th>Last name</th>
-                    <th>Age</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {pageUsers.map(u => (
-                    <tr key={u.id}>
-                      <td>{u.firstName}</td>
-                      <td>{u.lastName}</td>
-                      <td>{u.age}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </GoATable>
-
-              <GoAPagination {...paginationProps} pageNumber={page} onChange={changePage} />
-            </Sandbox>
-
-            {/*Component properties table*/}
-            <ComponentProperties properties={componentProperties} />
-
-            <h2 id="component-examples" className="hidden" aria-hidden="true">
-              Examples
-            </h2>
-
-            <h3 id="component-example-1">Show X per page</h3>
-
-            <Sandbox
-              flags={["reactive"]}
-              fullWidth
-              skipRender
-              onChange={onSandboxChangeCustomExample}>
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                import {
-                  GoAPagination,
-                  GoATable,
-                  GoABlock,
-                  GoADropdown,
-                  GoADropdownItem,
-                  GoASpacer,
-                } from "@abgov/react-components";
-                import { useEffect, useState } from "react";
-                import { faker } from "@faker-js/faker";
-
-                interface User {
-                  id: string;
-                  firstName: string;
-                  lastName: string;
-                  age: number;
-                }
-
-                export default function Pagination() {
-                  const [users, setUsers] = useState<User[]>([]);
-                  const [pageUsers, setPageUsers] = useState<User[]>([]);
-                  const [page, setPage] = useState<number>(1);
-                  const [perPage, setPerPage] = useState<number>(10);
-
-                  useEffect(() => {
-                    const _users = [];
-                    for (let i = 1; i <= 100; i++) {
-                      _users.push({
-                        id: faker.datatype.uuid(),
-                        firstName: faker.name.firstName(),
-                        lastName: faker.name.lastName(),
-                        age: faker.datatype.number({ min: 18, max: 60 }),
-                      });
-                    }
-                    setUsers(_users);
-                    setPageUsers(_users.slice(0, perPage));
-                  }, [perPage]);
-
-                  function changePage(newPage: number) {
-                    const offset = (newPage - 1) * 10;
-                    const _users = users.slice(offset, offset + perPage);
-                    setPage(newPage);
-                    setPageUsers(_users);
-                  }
-
-                  function handlePerPageCountChangeEvent(name: string, value: string | string[]) {
-                    const perPageValue = Array.isArray(value) ? parseInt(value[0]) : parseInt(value);
-                    setPage(1);
-                    setPerPage(perPageValue);
-                    const _users = users.slice(0, perPageValue);
-                    setPageUsers(_users);
-                  }
-        `}
-              />
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                  <GoATable width="100%" mb="xl">
-                    <thead>
-                      <tr>
-                        <th>First name</th>
-                        <th>Last name</th>
-                        <th>Age</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {pageUsers.map((u) => (
-                        <tr key={u.id}>
-                          <td>{u.firstName}</td>
-                          <td>{u.lastName}</td>
-                          <td>{u.age}</td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </GoATable>
-
-                  <GoABlock alignment="center">
-                    <GoABlock mb="m" alignment="center">
-                      Show
-                      <GoADropdown
-                        onChange={handlePerPageCountChangeEvent}
-                        value={perPage.toString()}
-                        width="8ch"
-                      >
-                        <GoADropdownItem value="10" label="10"></GoADropdownItem>
-                        <GoADropdownItem value="20" label="20"></GoADropdownItem>
-                        <GoADropdownItem value="30" label="30"></GoADropdownItem>
-                      </GoADropdown>
-                      <span style={{width: "50px"}}>of {users.length}</span>
-                    </GoABlock>
-
-                    <GoASpacer hSpacing="fill"></GoASpacer>
-
-                    <GoAPagination
-                      itemCount={users.length}
-                      perPageCount={perPage}
-                      pageNumber={page}
-                      onChange={changePage}
-                    />
-                  </GoABlock>
-              `}
-              />
+              />}
 
-              <CodeSnippet
+              {version === "new" && <CodeSnippet
                 lang="typescript"
                 tags="angular"
                 allowCopy={true}
                 code={`
-                import { Component } from "@angular/core";
                 import { faker } from "@faker-js/faker";
-
                 interface User {
                   id: string;
                   firstName: string;
                   lastName: string;
                   age: number;
                 }
-
                 @Component({
                   selector: "abgov-paginate",
                   templateUrl: "./paginate.html",
                 })
                 export class PaginateComponent {
                   users: User[] = [];
-                  pageUsers: User[] = [];
+                  pageUsers: User[] = []
                   page = 1;
                   perPage = 10;
-                  total = 100;
-
-                  handlePageChange(event: Event) {
-                    const e = event as CustomEvent;
-                    this.page = e.detail.page;
-
-                    if (typeof this.perPage !== "number") {
-                      this.perPage = Number(this.perPage);
-                    }
-
-                    const offset: number = (this.page - 1) * this.perPage;
+                  handlePageChange(event: GoabPaginationOnChangeDetail) {
+                    this.page = event.page;
+                    const offset = (this.page - 1) * this.perPage;
                     this.pageUsers = this.users.slice(offset, offset + this.perPage);
                   }
-
-                  handlePerPageCountChangeEvent(event: Event) {
-                    const e = event as CustomEvent;
-                    this.page = 1;
-                    this.perPage = e.detail.value;
-
-                    if (typeof this.perPage !== "number") {
-                      this.perPage = Number(this.perPage);
-                    }
-
-                    this.pageUsers = this.users.slice(0, this.perPage);
-                  }
-
                   constructor() {
-                    this.pageUsers = this.prepareUsers().slice(0, this.perPage);
-                  }
-
-                  prepareUsers() {
-                    for (let i = 0; i < this.total; i++) {
+                    for (let i = 0; i < 100; i++) {
                       this.users.push({
-                        id: faker.datatype.uuid(),
-                        firstName: faker.name.firstName(),
-                        lastName: faker.name.lastName(),
-                        age: faker.datatype.number({ min: 18, max: 60 }),
+                        id: faker.string.uuid(),
+                        firstName: faker.person.firstName(),
+                        lastName: faker.person.lastName(),
+                        age: faker.number.int({ min: 18, max: 60 }),
                       });
                     }
-
-                    return this.users;
+                    this.pageUsers = this.users.slice(0, this.perPage)
                   }
                 }
               `}
-              />
-              <CodeSnippet
+              />}
+
+              {version === "old" && <CodeSnippet
                 lang="typescript"
                 tags="angular"
                 allowCopy={true}
                 code={`
                 <goa-table width="100%" mb="xl">
                   <thead>
-                  <tr>
-                    <th>First name</th>
-                    <th>Last name</th>
-                    <th>Age</th>
-                  </tr>
+                    <tr>
+                      <th>First name</th>
+                      <th>Last name</th>
+                      <th>Age</th>
+                    </tr>
                   </thead>
                   <tbody>
-                  <tr *ngFor="let user of pageUsers; index as i">
-                    <td>{{ user.firstName }}</td>
-                    <td>{{ user.lastName }}</td>
-                    <td>{{ user.age }}</td>
-                  </tr>
+                    <tr *ngFor="let user of pageUsers; index as i">
+                      <td>{{ user.firstName }}</td>
+                      <td>{{ user.lastName }}</td>
+                      <td>{{ user.age }}</td>
+                    </tr>
                   </tbody>
                 </goa-table>
+                <goa-pagination [itemcount]="users.length" perpagecount="10" [pagenumber]="page" (_change)="handlePageChange($event)"></goa-pagination>
+              `}
+              />}
 
-                <goa-block alignment="center">
-                  <goa-block mb="m" alignment="center">
-                  Show
-                  <goa-dropdown
-                    (_change)="handlePerPageCountChangeEvent($event)"
-                    value="10"
-                    width="8ch"
-                  >
-                    <goa-dropdown-item value="10" label="10"></goa-dropdown-item>
-                    <goa-dropdown-item value="20" label="20"></goa-dropdown-item>
-                    <goa-dropdown-item value="30" label="30"></goa-dropdown-item>
-                    <goa-dropdown-item value="40" label="40"></goa-dropdown-item>
-                    <goa-dropdown-item value="50" label="50"></goa-dropdown-item>
-                    <goa-dropdown-item value="60" label="60"></goa-dropdown-item>
-                    <goa-dropdown-item value="70" label="70"></goa-dropdown-item>
-                    <goa-dropdown-item value="80" label="80"></goa-dropdown-item>
-                    <goa-dropdown-item value="90" label="90"></goa-dropdown-item>
-                    <goa-dropdown-item value="100" label="100"></goa-dropdown-item>
-
-                  </goa-dropdown>
-                  <span style="width: 50px">of {{ this.users.length }}</span
-                  >
-                  </goa-block>
-
-                  <goa-spacer hspacing="fill"></goa-spacer>
-
-                  <goa-pagination
-                    [itemcount]="users.length"
-                    [perpagecount]="perPage"
-                    [pagenumber]="page"
-                  (_change)="handlePageChange($event)"
-                  >
-                  </goa-pagination>
-
-                </goa-block>
+              {version === "new" && <CodeSnippet
+                lang="typescript"
+                tags="angular"
+                allowCopy={true}
+                code={`
+                  <goab-table width="100%" mb="xl">
+                    <thead>
+                      <tr>
+                        <th>First name</th>
+                        <th>Last name</th>
+                        <th>Age</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr *ngFor="let user of pageUsers; index as i">
+                        <td>{{ user.firstName }}</td>
+                        <td>{{ user.lastName }}</td>
+                        <td>{{ user.age }}</td>
+                      </tr>
+                    </tbody>
+                  </goab-table>
+                  <goab-pagination [itemCount]="users.length" [perPageCount]="10" [pageNumber]="page"
+                                    (onChange)="handlePageChange($event)"></goab-pagination>
               `}
-              />
+              />}
 
-              <GoATable width="100%" mb="xl">
+              <GoabTable width="100%" mb="xl">
                 <thead>
                   <tr>
                     <th>First name</th>
@@ -718,7 +488,7 @@ export default function PaginationPage() {
                   </tr>
                 </thead>
                 <tbody>
-                  {pageUsersCustomExample.map(u => (
+                  {pageUsers.map(u => (
                     <tr key={u.id}>
                       <td>{u.firstName}</td>
                       <td>{u.lastName}</td>
@@ -726,46 +496,32 @@ export default function PaginationPage() {
                     </tr>
                   ))}
                 </tbody>
-              </GoATable>
-
-              <GoABlock alignment="center">
-                <GoABlock mb="m" alignment="center">
-                  Show
-                  <GoADropdown
-                    onChange={handlePerPageChangeCustomExample}
-                    value={paginationPropsCustomExample.perPageCount?.toString()}
-                    width="8ch">
-                    {[10, 20, 30].map(value => (
-                      <GoADropdownItem
-                        key={value}
-                        value={value.toString()}
-                        label={value.toString()}
-                      />
-                    ))}
-                  </GoADropdown>
-                  <span style={{ width: "75px" }}>per page</span>
-                </GoABlock>
-                <GoASpacer hSpacing={"fill"} />
-
-                <GoAPagination
-                  {...paginationPropsCustomExample}
-                  pageNumber={pageCustomExample}
-                  onChange={changePageCustomExample}
-                />
-              </GoABlock>
+              </GoabTable>
+
+              <GoabPagination
+                {...paginationProps}
+                pageNumber={page}
+                onChange={event => changePage(event.page)}
+              />
             </Sandbox>
-          </GoATab>
 
-          <GoATab
+            {/*Component properties table*/}
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
+
+            <PaginationExamples/>
+
+          </GoabTab>
+
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }>
             <p>Coming Soon</p>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Popover.tsx b/src/routes/components/Popover.tsx
index bd187a4e8..84c57f1fa 100644
--- a/src/routes/components/Popover.tsx
+++ b/src/routes/components/Popover.tsx
@@ -1,16 +1,23 @@
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import {
   ComponentProperties,
   ComponentProperty,
 } from "@components/component-properties/ComponentProperties.tsx";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
-import { GoABadge, GoAButton, GoAPopover, GoATab, GoATabs } from "@abgov/react-components";
+import { GoabBadge, GoabButton, GoabPopover, GoabTab, GoabTabs } from "@abgov/react-components";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 import { propsToString } from "@components/sandbox/BaseSerializer.ts";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import {
+  LegacyMarginProperty,
+  LegacyTestIdProperties, MarginProperty,
+  TestIdProperty
+} from "@components/component-properties/common-properties.ts";
 
 export default function PopoverPage() {
+  const {version} = useContext(LanguageVersionContext);
   const [popoverProps, setPopoverProps] = useState({});
   const [popoverBindings, setPopoverBindings] = useState<ComponentBinding[]>([
     {
@@ -40,7 +47,7 @@ export default function PopoverPage() {
       value: true,
     },
   ]);
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "maxWidth",
       type: "string",
@@ -99,23 +106,55 @@ export default function PopoverPage() {
       description: "Set to true if a parent element has a css position of relative.",
       defaultValue: "false",
     },
+    ...LegacyTestIdProperties,
+    LegacyMarginProperty,
+  ];
+  const componentProperties: ComponentProperty[] = [
     {
-      name: "testId",
+      name: "maxWidth",
       type: "string",
-      lang: "react",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+      description: "Sets the maximum width of the popover container.",
+      defaultValue: "320px"
     },
     {
-      name: "testid",
+      name: "minWidth",
       type: "string",
+      description: "Sets the minimum width of the popover container.",
+    },
+    {
+      name: "padded",
+      type: "boolean",
+      description: "Sets if the popover has padding.",
+      defaultValue: "true",
+    },
+    {
+      name: "position",
+      type: "GoabPopoverPosition (above | below | auto)",
+      description: "Provides control to where the popover content is positioned.",
+      defaultValue: "auto",
+    },
+    {
+      name: "target",
+      type: "TemplateRef",
+      description: "The target UI component to open the popover.",
+      required: true,
       lang: "angular",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
     },
     {
-      name: "mt,mr,mb,ml",
-      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
-      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+      name: "target",
+      type: "ReactNode",
+      description: "The target UI component to open the popover.",
+      required: true,
+      lang: "react",
+    },
+    {
+      name: "relative",
+      type: "boolean",
+      description: "Set to true if a parent element has a css position of relative.",
+      defaultValue: "false",
     },
+    TestIdProperty,
+    MarginProperty,
   ];
 
   function onSandboxChange(baseBinding: ComponentBinding[], props: Record<string, unknown>) {
@@ -133,25 +172,24 @@ export default function PopoverPage() {
           { link: "/components/dropdown", name: "Dropdown" },
           { link: "/components/header", name: "Header" },
           { link: "/components/tooltip", name: "Tooltip" },
-
         ]}
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
 
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             {/*Popover sandbox*/}
             <h2 id="component" style={{display: "none"}}>Component</h2>
             <Sandbox properties={popoverBindings} skipRender onChange={onSandboxChange}>
-
+              {/*Must be skipRender because Sandbox doesn't support slot target*/}
               {/*Angular*/}
-              <CodeSnippet
+              {version === "old" && <CodeSnippet
                 lang="html"
                 tags="angular"
                 allowCopy={true}
                 code={`
-                <goa-popover ${propsToString(popoverProps, "angular")}>
+                <goa-popover ${propsToString(popoverProps, "angular", version)}>
                   <p>This is a popover</p>
                   It can be used for a number of different contexts.
                   <div slot="target">
@@ -159,10 +197,25 @@ export default function PopoverPage() {
                   </div>
                 </goa-popover>
               `}
-              />
+              />}
+
+              {version === "new" && <CodeSnippet
+                lang="html"
+                tags="angular"
+                allowCopy={true}
+                code={`
+                <goab-popover ${propsToString(popoverProps, "angular", version)} [target]="target">
+                  <p>This is a popover</p>
+                  It can be used for a number of different contexts.
+                  <ng-template #target>
+                    <goab-button type="secondary" size="compact">Click me</goab-button>
+                  </ng-template>
+                </goab-popover>
+              `}
+              />}
 
               {/*React*/}
-              <CodeSnippet
+              {version === "old" && <CodeSnippet
                 lang="typescript"
                 tags="react"
                 allowCopy={true}
@@ -173,45 +226,71 @@ export default function PopoverPage() {
                   </GoAButton>
                 );
               `}
-              />
-              <CodeSnippet
+              />}
+
+              {version === "new" && <CodeSnippet
                 lang="typescript"
                 tags="react"
                 allowCopy={true}
                 code={`
-                <GoAPopover target={target} ${propsToString(popoverProps, "react")}>
+                const target = (
+                  <GoabButton type="secondary" size="compact">
+                    Click me
+                  </GoabButton>
+                );
+              `}
+              />}
+
+              {version === "old" && <CodeSnippet
+                lang="typescript"
+                tags="react"
+                allowCopy={true}
+                code={`
+                <GoAPopover target={target} ${propsToString(popoverProps, "react", version)}>
                   <p>This is a popover</p>
                   It can be used for a number of different contexts.
                 </GoAPopover>
               `}
-              />
+              />}
+
+              {version === "new" && <CodeSnippet
+                lang="typescript"
+                tags="react"
+                allowCopy={true}
+                code={`
+                <GoabPopover target={target} ${propsToString(popoverProps, "react", version)}>
+                  <p>This is a popover</p>
+                  It can be used for a number of different contexts.
+                </GoabPopover>
+              `}
+              />}
 
-              <GoAPopover
+              <GoabPopover
                 {...popoverProps}
                 target={
-                  <GoAButton type="secondary" size="compact">
+                  <GoabButton type="secondary" size="compact">
                     Click me
-                  </GoAButton>
+                  </GoabButton>
                 }
               >
                 <p>This is a popover</p>
                 It can be used for a number of different contexts.
-              </GoAPopover>
+              </GoabPopover>
             </Sandbox>
 
             {/*Popover table properties*/}
-            <ComponentProperties properties={componentProperties} />
-          </GoATab>
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }
-          ></GoATab>
-        </GoATabs>
+          ></GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/ProgressIndicator.tsx b/src/routes/components/ProgressIndicator.tsx
index 45d3b779a..adcda0636 100644
--- a/src/routes/components/ProgressIndicator.tsx
+++ b/src/routes/components/ProgressIndicator.tsx
@@ -7,14 +7,16 @@ import {
 } from "@components/component-properties/ComponentProperties.tsx";
 
 import {
-  GoABadge,
-  GoATab,
-  GoATabs,
-  GoACircularProgress,
-  GoACircularProgressProps,
+  GoabBadge,
+  GoabTab,
+  GoabTabs,
+  GoabCircularProgress,
+  GoabCircularProgressProps, GoabButton
 } from "@abgov/react-components";
 import { resetScrollbars } from "../../utils/styling";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { TestIdProperty } from "@components/component-properties/common-properties.ts";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 
 // == Page props ==
 
@@ -25,7 +27,7 @@ const relatedComponents = [
   { link: "/components/file-uploader", name: "File uploader" },
   { link: "/components/skeleton-loader", name: "Skeleton loading" }
 ];
-type ComponentPropsType = GoACircularProgressProps;
+type ComponentPropsType = GoabCircularProgressProps;
 type CastingType = {
   // add any required props here
   [key: string]: unknown;
@@ -36,9 +38,7 @@ export default function ProgressIndicatorPage() {
     variant: "inline",
     size: "large",
     message: "Loading message...",
-    visible: true,
   });
-
   const [componentBindings, setComponentBindings] = useState<ComponentBinding[]>([
     {
       label: "Variant",
@@ -56,10 +56,9 @@ export default function ProgressIndicatorPage() {
     },
     {
       label: "Progress",
-      type: "string",
+      type: "number",
       name: "progress",
       width: "8ch",
-      value: "",
     },
     {
       label: "Message",
@@ -70,7 +69,7 @@ export default function ProgressIndicatorPage() {
     },
   ]);
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "variant",
       type: "inline | fullscreen",
@@ -99,46 +98,116 @@ export default function ProgressIndicatorPage() {
         "Show/hide the page loader. This allows for fade transition to be applied in each transition.",
     },
   ];
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "variant",
+      type: "GoabCircularProgressVariant (inline | fullscreen)",
+      description: "Stretch across the full screen or use it inline",
+    },
+    {
+      name: "size",
+      type: "GoabCircularProgressSize (large | small)",
+      description: "Size of the progress indicator",
+    },
+    {
+      name: "progress",
+      type: "number",
+      description:
+        "Set the progress value. Setting this value will change the type from infinite to progress",
+    },
+    {
+      name: "message",
+      type: "string",
+      description: "Loading message displayed under the progress indicator",
+    },
+    {
+      name: "visible",
+      type: "boolean",
+      description:
+        "Show/hide the page loader. This allows for fade transition to be applied in each transition.",
+    },
+    TestIdProperty,
+  ];
 
+  // Sandbox helpers
+  const [visible, setVisible] = useState<boolean>(true);
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
-    const updatedProps = { ...props, visible: true } as CastingType;
+    const updatedProps = { ...props} as CastingType;
 
     setComponentBindings(bindings);
     setComponentProps(updatedProps);
-
     if (props?.variant === "fullscreen") {
-      setTimeout(() => {
-        setComponentProps({ ...updatedProps, visible: false });
-        // reset body styles after closing the modal, sandbox renders multiple times that not trigger modal component no-scroll destroy effects
-        resetScrollbars();
-      }, 3000);
+      setVisible(false);
+    } else {
+      setVisible(true);
     }
   }
 
+  const openFullScreenProgress = () => {
+    setVisible(true);
+    setTimeout(() => {
+      setVisible(false);
+      // reset body styles after closing the modal, sandbox renders multiple times that not trigger modal component no-scroll destroy effects
+      resetScrollbars();
+    }, 3000);
+  }
+
   return (
     <>
       <ComponentHeader name={componentName} category={category} description={description} relatedComponents={relatedComponents} />
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
 
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{display: "none"}}>Component</h2>
-            <Sandbox properties={componentBindings} onChange={onSandboxChange}>
-              <GoACircularProgress {...componentProps} />
+            <Sandbox properties={componentBindings} onChange={onSandboxChange} variableNames={["visible"]}>
+              <CodeSnippet
+                lang="typescript"
+                tags="react"
+                allowCopy={true}
+                code={`
+                    const [visible, setVisible] = useState(${visible});
+                    ${componentProps.variant === 'fullscreen' ? `
+                    function onClick() {
+                      setVisible(true);
+                      setTimeout(() => {
+                        setVisible(false);
+                      }, 3000);
+                    }` : ''}
+                `}
+              />
+              <CodeSnippet
+                lang="typescript"
+                tags="angular"
+                allowCopy={true}
+                code={`
+                    export class ExampleComponent {
+                      visible = ${visible};
+                      ${componentProps.variant === 'fullscreen' ? `
+                      onClick() {
+                      this.visible = true;
+                      setTimeout(() => {
+                        this.visible = false;
+                      }, 3000);
+                    }` : ''}
+                `}
+              />
+              {componentProps.variant === "fullscreen" && <GoabButton onClick={openFullScreenProgress}>Show Fullscreen</GoabButton>}
+              <GoabCircularProgress {...componentProps} visible={visible} />
             </Sandbox>
-            <ComponentProperties properties={componentProperties} />
-          </GoATab>
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }
-          ></GoATab>
-        </GoATabs>
+          ></GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Radio.tsx b/src/routes/components/Radio.tsx
index 289f52c0f..62708c8e2 100644
--- a/src/routes/components/Radio.tsx
+++ b/src/routes/components/Radio.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useContext, useState } from "react";
 import {
   ComponentProperties,
   ComponentProperty,
@@ -6,17 +6,24 @@ import {
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import {
-  GoABadge,
-  GoAFormItem,
-  GoARadioGroup, GoARadioGroupProps,
-  GoARadioItem,
-  GoATab,
-  GoATabs
+  GoabBadge,
+  GoabFormItem,
+  GoabRadioGroup, GoabRadioGroupProps,
+  GoabRadioItem,
+  GoabTab,
+  GoabTabs
 } from "@abgov/react-components";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 import { useSandboxFormItem } from "@hooks/useSandboxFormItem.tsx";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import RadioExamples from "@examples/radio/RadioExamples.tsx";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import {
+  LegacyMarginProperty,
+  MarginProperty,
+  TestIdProperty
+} from "@components/component-properties/common-properties.ts";
+import { GoabRadioGroupOnChangeDetail } from "@abgov/ui-components-common";
 
 // == Page props ==
 const componentName = "Radio";
@@ -27,19 +34,19 @@ const relatedComponents = [
   { link: "/components/dropdown", name: "Dropdown" },
   { link: "/components/form-item", name: "Form item" }
 ];
-type ComponentPropsType = GoARadioGroupProps;
+type ComponentPropsType = GoabRadioGroupProps;
 type CastingType = {
   name: string;
   value: string;
   [key: string]: unknown;
-  onChange: (name: string, value: string) => void;
+  onChange: (detail: GoabRadioGroupOnChangeDetail) => void;
 }
 
 export default function RadioPage() {
+  const {version} = useContext(LanguageVersionContext);
   const [radioProps, setRadioProps] = useState<ComponentPropsType>({
     name: "item",
     value: "",
-    onChange: () => { },
   });
   const [radioBindings, setRadioBindings] = useState<ComponentBinding[]>([
     {
@@ -70,7 +77,7 @@ export default function RadioPage() {
   ]);
   const { formItemBindings, formItemProps, onFormItemChange } = useSandboxFormItem({ label: "Basic" });
 
-  const radioGroupProperties: ComponentProperty[] = [
+  const oldRadioGroupProperties: ComponentProperty[] = [
     {
       name: "name",
       type: "string",
@@ -135,13 +142,54 @@ export default function RadioPage() {
       required: true,
       description: "Callback function when radio value is changed.",
     },
+    LegacyMarginProperty,
+  ];
+  const radioGroupProperties: ComponentProperty[] = [
+    {
+      name: "name",
+      type: "string",
+      required: true,
+      description: "Identifier for the radio group. Should be unique.",
+    },
+    {
+      name: "value",
+      type: "string",
+      description: "The value binding.",
+    },
+    {
+      name: "orientation",
+      type: "GoabRadioGroupOrientation (horizontal|vertical)",
+      description: "Orientation of the radio items.",
+      defaultValue: "vertical",
+    },
+    {
+      name: "error",
+      type: "boolean",
+      defaultValue: "false",
+      description: "Set the component to an error state.",
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      defaultValue: "false",
+      description: "Set the component to disabled. Use [attr.disabled] with [formControl].",
+    },
+    {
+      name: "ariaLabel",
+      description:
+        "Defines how the text will be translated for the screen reader.",
+      type: "string",
+    },
     {
-      name: "mt,mr,mb,ml",
-      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
-      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+      name: "onChange",
+      type: "(event: GoabRadioGroupOnChangeDetail) => void",
+      required: true,
+      description: "Callback function when radio value is changed.",
     },
+    MarginProperty,
+    TestIdProperty,
   ];
-  const radioItemProperties: ComponentProperty[] = [
+  const oldRadioItemProperties: ComponentProperty[] = [
     {
       name: "value",
       type: "string",
@@ -189,11 +237,43 @@ export default function RadioPage() {
       type: "string",
       description: "Defines how the radio item will be translated for the screen reader.",
     },
+    LegacyMarginProperty,
+  ];
+  const radioItemProperties: ComponentProperty[] = [
+    {
+      name: "value",
+      type: "string",
+      required: true,
+      description: "Value of the item that will be returned when selected.",
+    },
+    {
+      name: "label",
+      type: "string",
+      description: "Text shown beside the radio.",
+    },
+    {
+      name: "description",
+      type: "string | TemplateRef",
+      description: "Additional content shown below the label.",
+      lang: "angular",
+    },
     {
-      name: "mt,mr,mb,ml",
-      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
-      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+      name: "description",
+      type: "string | ReactNode",
+      description: "Additional content shown below the label.",
+      lang: "react",
+    },
+    {
+      name: "maxWidth",
+      type: "string",
+      description: "Sets the maximum width of the radio."
+    },
+    {
+      name: "ariaLabel",
+      type: "string",
+      description: "Defines how the radio item will be translated for the screen reader.",
     },
+    MarginProperty,
   ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
@@ -205,25 +285,34 @@ export default function RadioPage() {
 
   return (
     <>
-      <ComponentHeader name={componentName} description={description} category={category} relatedComponents={relatedComponents} />
+      <ComponentHeader
+        name={componentName}
+        description={description}
+        category={category}
+        relatedComponents={relatedComponents}
+      />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             {/*Radio sandbox*/}
-            <h2 id="component" style={{display: "none"}}>Component</h2>
+            <h2 id="component" style={{ display: "none" }}>
+              Component
+            </h2>
             <Sandbox
               properties={radioBindings}
               formItemProperties={formItemBindings}
               onChange={onSandboxChange}
               onChangeFormItemBindings={onFormItemChange}
-              flags={["reactive"]}>
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
+              allow={["form"]}
+              flags={version === "old" ? ["reactive"] : ["event", "reactive", "template-driven"]}>
+              {/*============ Angular code ========== */}
+              {version === "old" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags="angular"
+                  allowCopy={true}
+                  code={`
               // non-reactive code
               export class MyComponent {
                 onChange(e: Event) {
@@ -232,56 +321,146 @@ export default function RadioPage() {
                 }
               }
             `}
-              />
-              <CodeSnippet
-                lang="typescript"
-                tags={["angular", "reactive"]}
-                allowCopy={true}
-                code={`
+                />
+              )}
+
+              {version === "new" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags="angular"
+                  allowCopy={true}
+                  code={`
+              // non-reactive code
+              export class MyComponent {
+                 radioOnChange(e: GoabRadioGroupOnChangeDetail) {
+                    // handle change
+                    console.log("onChange", e.name, e.value);
+                 }
+              }
+            `}
+                />
+              )}
+
+              {version === "old" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags={["angular", "reactive"]}
+                  allowCopy={true}
+                  code={`
               // reactive code
               import { FormControl } from "@angular/forms";
               export class MyComponent {
                itemFormCtrl = new FormControl("1");
               }
             `}
-              />
+                />
+              )}
+
+              {version === "new" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags={["angular", "reactive"]}
+                  allowCopy={true}
+                  code={`
+              // reactive code
+              import { GoabFormItem, GoabRadioGroup, GoabRadioItem } from "@abgov/angular-components";
+              import { FormBuilder, FormGroup, ReactiveFormsModule } from "@angular/forms";
+              
+              export class MyComponent {
+                fg!: FormGroup;
+                constructor(private fb: FormBuilder) {
+                  this.fg = this.fb.group({
+                    item: ""
+                  })
+                }
+              }
+            `}
+                />
+              )}
+
+              {version === "new" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags={["angular", "template-driven"]}
+                  allowCopy={true}
+                  code={`
+              // reactive code
+              import { GoabFormItem, GoabRadioGroup, GoabRadioItem } from "@abgov/angular-components";
+              import { FormsModule } from "@angular/forms";
+              import { GoabRadioGroupOnChangeDetail } from "@abgov/ui-components-common";
+              
+              export class MyComponent {
+                item = "1";
+
+                radioOnChange(event: GoabRadioGroupOnChangeDetail) {
+                  this.item = event.value;
+                }
+              }
+            `}
+                />
+              )}
 
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
+              {/*================ React code ===============*/}
+              {version === "old" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags="react"
+                  allowCopy={true}
+                  code={`
               function onChange(name: string, value: string) {
                 console.log("onChange", name, value);
               }
             `}
-              />
+                />
+              )}
+
+              {version === "new" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags="react"
+                  allowCopy={true}
+                  code={`
+              function radioGroupOnChange(event: GoabRadioGroupOnChangeDetail) {
+                console.log("onChange", event.name, event.value);
+              }
+            `}
+                />
+              )}
 
-              <GoAFormItem {...formItemProps}>
-                <GoARadioGroup {...radioProps} name="item" value="1" onChange={noop}>
-                  <GoARadioItem value="1" label="Label 1"></GoARadioItem>
-                  <GoARadioItem value="2" label="Label 2"></GoARadioItem>
-                  <GoARadioItem value="3" label="Label 3"></GoARadioItem>
-                </GoARadioGroup>
-              </GoAFormItem>
+              <form>
+                <GoabFormItem {...formItemProps}>
+                  <GoabRadioGroup {...radioProps} name="item" value="1" onChange={noop}>
+                    <GoabRadioItem value="1" label="Label 1"></GoabRadioItem>
+                    <GoabRadioItem value="2" label="Label 2"></GoabRadioItem>
+                    <GoabRadioItem value="3" label="Label 3"></GoabRadioItem>
+                  </GoabRadioGroup>
+                </GoabFormItem>
+              </form>
             </Sandbox>
 
             {/*Radio Group properties*/}
-            <ComponentProperties heading="Radio group properties" properties={radioGroupProperties} />
+            <ComponentProperties
+              heading="Radio group properties"
+              properties={radioGroupProperties}
+              oldProperties={oldRadioGroupProperties}
+            />
             {/*Radio Item properties*/}
-            <ComponentProperties heading="Radio Item properties" properties={radioItemProperties} />
+            <ComponentProperties
+              heading="Radio Item properties"
+              properties={radioItemProperties}
+              oldProperties={oldRadioItemProperties}
+            />
             <RadioExamples />
-          </GoATab>
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
-            }
-          ></GoATab>
-        </GoATabs>
+            }></GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/SideMenu.tsx b/src/routes/components/SideMenu.tsx
index f8cb3a86b..c814a8cb2 100644
--- a/src/routes/components/SideMenu.tsx
+++ b/src/routes/components/SideMenu.tsx
@@ -1,10 +1,10 @@
 import {
-  GoABadge,
-  GoASideMenu,
-  GoASideMenuGroup,
-  GoASideMenuHeading,
-  GoATab,
-  GoATabs,
+  GoabBadge,
+  GoabSideMenu,
+  GoabSideMenuGroup,
+  GoabSideMenuHeading,
+  GoabTab,
+  GoabTabs,
 } from "@abgov/react-components";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
@@ -14,6 +14,8 @@ import {
 } from "@components/component-properties/ComponentProperties.tsx";
 import { Sandbox } from "@components/sandbox";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { useContext } from "react";
 
 const componentName = "Side menu";
 const description =
@@ -21,11 +23,13 @@ const description =
 const componentCategory = Category.STRUCTURE_AND_NAVIGATION;
 const relatedComponents = [
   { link: "/components/header", name: "Header" },
-  { link: "/patterns", name: "Layout" }
+  { link: "/patterns/layout", name: "Layout" }
 ];
 
 export default function SideMenuPage() {
-  const sideMenuGroupProperties: ComponentProperty[] = [
+  const {version} = useContext(LanguageVersionContext);
+
+  const oldSideMenuGroupProperties: ComponentProperty[] = [
     {
       name: "heading",
       type: "string",
@@ -43,8 +47,31 @@ export default function SideMenuPage() {
       description: "Apply margin to the top, right, bottom, and/or left of the component.",
     },
   ];
+  const sideMenuGroupProperties: ComponentProperty[] = [
+    {
+      name: "heading",
+      type: "string",
+      required: true,
+      description: "Group header text",
+    },
+    {
+      name: "icon",
+      type: "GoabIconType",
+      description: "Icon placed left of the heading",
+    },
+    {
+      name: "testId",
+      type: "string",
+      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+    },
+    {
+      name: "mt,mr,mb,ml",
+      type: "Spacing(none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl)",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },
+  ];
 
-  const sideMenuHeadingProperties: ComponentProperty[] = [
+  const oldSideMenuHeadingProperties: ComponentProperty[] = [
     {
       name: "icon",
       type: "GoAIconType",
@@ -63,6 +90,30 @@ export default function SideMenuPage() {
       description: "Add badges to the right of the heading",
     },
   ];
+  const sideMenuHeadingProperties: ComponentProperty[] = [
+    {
+      name: "icon",
+      type: "GoabIconType",
+      description: "Icon to position to the left of heading",
+    },
+    {
+      name: "testId",
+      type: "string",
+      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+    },
+    {
+      name: "meta",
+      type: "ReactNode",
+      lang: "react",
+      description: "Add badges to the right of the heading",
+    },
+    {
+      name: "meta",
+      type: "TemplateRef",
+      lang: "angular",
+      description: "Add badges to the right of the heading",
+    },
+  ];
 
   return (
     <>
@@ -75,11 +126,13 @@ export default function SideMenuPage() {
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
 
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{display: "none"}}>Component</h2>
             <Sandbox fullWidth allow={["div"]} skipRender>
-              <CodeSnippet
+
+              {/*Angular code*/}
+              {version === "old" && <CodeSnippet
                 lang="typescript"
                 tags="angular"
                 allowCopy={true}
@@ -93,6 +146,7 @@ export default function SideMenuPage() {
                     <a href="#">Profile</a>
                     <goa-side-menu-heading icon="home">
                       Nav section 2
+                      <div slot="meta"><goa-badge type="midtone" content="details"></goa-badge></div>
                     </goa-side-menu-heading>
                     <a href="#">About</a>
                     <a href="#">Contact</a>
@@ -106,27 +160,57 @@ export default function SideMenuPage() {
                   </goa-side-menu>
                 </div>
               `}
-              />
-              <CodeSnippet
+              />}
+
+              {version === "new" && <CodeSnippet
+                lang="typescript"
+                tags="angular"
+                allowCopy={true}
+                code={`
+                <div style="max-width: 250px">
+                  <goab-side-menu>
+                    <goab-side-menu-heading>
+                      Nav section 1
+                    </goab-side-menu-heading>
+                      <a href="#">Home</a>
+                      <a href="#">Profile</a>
+                    <goab-side-menu-heading icon="home" [meta]="meta">
+                      Nav section 2
+                      <ng-template #meta><goab-badge type="midtone" content="Details"></goab-badge></ng-template>
+                    </goab-side-menu-heading>
+                      <a href="#">About</a>
+                      <a href="#">Contact</a>
+                    <goab-side-menu-heading>
+                      Nav with sub nav
+                    </goab-side-menu-heading>
+                    <goab-side-menu-group heading="Group heading" icon="person">
+                      <a href="#">Foo</a>
+                      <a href="#">Bar</a>
+                    </goab-side-menu-group>
+                  </goab-side-menu>
+                </div>
+              `}
+              />}
+
+              {/*React code*/}
+              {version === "old" && <CodeSnippet
                 allowCopy={true}
                 lang="typescript"
                 tags={["react"]}
                 code={`
                   <div style={{ maxWidth: "250px" }}>
                   <GoASideMenu>
-                    <GoASideMenuHeading>
-                      Nav section 1
-                    </GoASideMenuHeading>
+                    <GoASideMenuHeading>Nav section 1</GoASideMenuHeading>
                     <a href="#">Home</a>
                     <a href="#">Profile</a>
-                    <GoASideMenuHeading icon="home">
-                      Nav section 2
+                    <GoASideMenuHeading
+                      meta={<GoabBadge type="midtone" content="Details"></GoabBadge>}
+                      icon="home">
+                        Nav section 2
                     </GoASideMenuHeading>
                     <a href="#">About</a>
                     <a href="#">Contact</a>
-                    <GoASideMenuHeading>
-                      Nav with sub nav
-                    </GoASideMenuHeading>
+                    <GoASideMenuHeading>Nav with sub nav</GoASideMenuHeading>
                     <GoASideMenuGroup heading="Group heading" icon="person">
                       <a href="#">Foo</a>
                       <a href="#">Bar</a>
@@ -134,25 +218,53 @@ export default function SideMenuPage() {
                   </GoASideMenu>
                 </div>
                 `}
-              />
+              />}
+
+              {version === "new" && <CodeSnippet
+                allowCopy={true}
+                lang="typescript"
+                tags={["react"]}
+                code={`
+                  <div style={{ maxWidth: "250px" }}>
+                  <GoabSideMenu>
+                  <GoabSideMenuHeading>Nav section 1</GoabSideMenuHeading>
+                  <a>Home</a>
+                  <a>Profile</a>
+                  <GoabSideMenuHeading
+                    meta={<GoabBadge type="midtone" content="Details"></GoabBadge>}
+                    icon="home">
+                    Nav section 2
+                  </GoabSideMenuHeading>
+                  <a>About</a>
+                  <a>Contact</a>
+                  <GoabSideMenuHeading>Nav with sub nav</GoabSideMenuHeading>
+                  <GoabSideMenuGroup heading="Group heading" icon="person">
+                    <a>Foo</a>
+                    <a>Bar</a>
+                  </GoabSideMenuGroup>
+                </GoabSideMenu>
+                </div>
+                `}
+              />}
+
               <div style={{ maxWidth: "250px" }}>
-                <GoASideMenu>
-                  <GoASideMenuHeading>Nav section 1</GoASideMenuHeading>
+                <GoabSideMenu>
+                  <GoabSideMenuHeading>Nav section 1</GoabSideMenuHeading>
                   <a>Home</a>
                   <a>Profile</a>
-                  <GoASideMenuHeading
-                    meta={<GoABadge type="midtone" content="Details"></GoABadge>}
+                  <GoabSideMenuHeading
+                    meta={<GoabBadge type="midtone" content="Details"></GoabBadge>}
                     icon="home">
                     Nav section 2
-                  </GoASideMenuHeading>
+                  </GoabSideMenuHeading>
                   <a>About</a>
                   <a>Contact</a>
-                  <GoASideMenuHeading>Nav with sub nav</GoASideMenuHeading>
-                  <GoASideMenuGroup heading="Group heading" icon="person">
+                  <GoabSideMenuHeading>Nav with sub nav</GoabSideMenuHeading>
+                  <GoabSideMenuGroup heading="Group heading" icon="person">
                     <a>Foo</a>
                     <a>Bar</a>
-                  </GoASideMenuGroup>
-                </GoASideMenu>
+                  </GoabSideMenuGroup>
+                </GoabSideMenu>
               </div>
             </Sandbox>
 
@@ -160,23 +272,25 @@ export default function SideMenuPage() {
             <ComponentProperties
               heading="Side menu group properties"
               properties={sideMenuGroupProperties}
+              oldProperties={oldSideMenuGroupProperties}
             />
             <ComponentProperties
               heading="Side menu heading properties"
               properties={sideMenuHeadingProperties}
+              oldProperties={oldSideMenuHeadingProperties}
             />
-          </GoATab>
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }>
             <p>Coming Soon</p>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Skeleton.tsx b/src/routes/components/Skeleton.tsx
index 513633ad1..1cc589535 100644
--- a/src/routes/components/Skeleton.tsx
+++ b/src/routes/components/Skeleton.tsx
@@ -5,26 +5,37 @@ import {
   ComponentProperty,
 } from "@components/component-properties/ComponentProperties.tsx";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
-import { GoABadge, GoASkeleton, GoATab, GoATabs, GoASkeletonProps, SkeletonType } from "@abgov/react-components";
+import {
+  GoabBadge,
+  GoabSkeleton,
+  GoabTab,
+  GoabTabs,
+  GoabSkeletonProps,
+} from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { GoabSkeletonType } from "@abgov/ui-components-common";
+import {
+  LegacyMarginProperty,
+  MarginProperty,
+  TestIdProperty
+} from "@components/component-properties/common-properties.ts";
 
 // == Page props ==
 const componentName = "Skeleton loading";
-const description = "Provide visual feedback to users while loading a content heavy page or page element.";
+const description =
+  "Provide visual feedback to users while loading a content heavy page or page element.";
 const category = Category.CONTENT_AND_LAYOUT;
-const relatedComponents = [
-  { link: "/components/progress-indicator", name: "Progress indicator" },
-];
-type ComponentPropsType = GoASkeletonProps;
+const relatedComponents = [{ link: "/components/progress-indicator", name: "Progress indicator" }];
+type ComponentPropsType = GoabSkeletonProps;
 type CastingType = {
-  type: SkeletonType;
+  type: GoabSkeletonType;
   [key: string]: unknown;
 };
 
 export default function SkeletonPage() {
-  const [skeletonProps, setSkeletonProps] = useState<ComponentPropsType>(
-    { type: "text" as SkeletonType }
-  );
+  const [skeletonProps, setSkeletonProps] = useState<ComponentPropsType>({
+    type: "text" as GoabSkeletonType,
+  });
   const [skeletonBindings, setSkeletonBindings] = useState<ComponentBinding[]>([
     {
       label: "Type",
@@ -65,7 +76,7 @@ export default function SkeletonPage() {
       value: "",
     },
   ]);
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "type",
       type: "image | text | title | text-small | avatar | header | paragraph | thumbnail | card | profile",
@@ -93,12 +104,7 @@ export default function SkeletonPage() {
       defaultValue: "320px",
       lang: "angular",
     },
-    {
-
-      name: "mt,mr,mb,ml",
-      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
-      description: "Apply margin to the top, right, bottom, and/or left of the component.",
-    },
+    LegacyMarginProperty,
     {
       name: "lineCount",
       type: "number",
@@ -115,6 +121,35 @@ export default function SkeletonPage() {
       lang: "react",
     },    
   ];
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "type",
+      type: "GoabSkeletonType (image | text | title | text-small | avatar | header | paragraph | thumbnail | card | profile)",
+      required: true,
+      description: "re-set skeleton shapes to represent your content",
+    },
+    {
+      name: "size",
+      type: "GoabSkeletonSize (1 | 2 | 3 | 4)",
+      description: "Size can affect either the height, width or both for different skeleton types.",
+      defaultValue: "1",
+    },
+    {
+      name: "lineCount",
+      type: "number",
+      description:
+        "Used within components that contain multiple lines. Currently only used in card skeleton type",
+      defaultValue: "3",
+    },
+    {
+      name: "maxWidth",
+      type: "string",
+      description: "Set component maximum width. Currently only used in card skeleton type",
+      defaultValue: "300px",
+    },
+    TestIdProperty,
+    MarginProperty,
+  ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>): void {
     setSkeletonBindings(bindings);
@@ -123,31 +158,36 @@ export default function SkeletonPage() {
 
   return (
     <>
-      <ComponentHeader name={componentName} category={category} description={description} relatedComponents={relatedComponents} />
+      <ComponentHeader
+        name={componentName}
+        category={category}
+        description={description}
+        relatedComponents={relatedComponents}
+      />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             {/*Skeleton Sandbox*/}
-            <h2 id="component" style={{display: "none"}}>Component</h2>
+            <h2 id="component" style={{ display: "none" }}>
+              Component
+            </h2>
             <Sandbox properties={skeletonBindings} onChange={onSandboxChange} fullWidth>
-              <GoASkeleton {...skeletonProps} />
+              <GoabSkeleton {...skeletonProps} />
             </Sandbox>
 
             {/*Skeleton Properties*/}
-            <ComponentProperties properties={componentProperties} />
-          </GoATab>
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
-            }
-          ></GoATab>
-        </GoATabs>
+            }></GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Spacer.tsx b/src/routes/components/Spacer.tsx
index 27cc7280c..ddfe5b769 100644
--- a/src/routes/components/Spacer.tsx
+++ b/src/routes/components/Spacer.tsx
@@ -1,5 +1,5 @@
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
-import { GoABlock, GoASpacer, GoATab, GoATabs } from "@abgov/react-components";
+import { GoabBlock, GoabSpacer, GoabTab, GoabTabs } from "@abgov/react-components";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import { CSSProperties, useState } from "react";
 import {
@@ -33,7 +33,7 @@ export default function SpacerPage() {
     },
   ]);
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "hSpacing",
       type: "fill | none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
@@ -63,6 +63,25 @@ export default function SpacerPage() {
       defaultValue: "none",
     },
   ];
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "hSpacing",
+      type: "GoabSpacerHorizontalSpacing (fill | none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl)",
+      description: "Horizontal spacing",
+      defaultValue: "none",
+    },
+    {
+      name: "vSpacing",
+      type: "GoabSpacerVerticalSpacing (none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl)",
+      description: "Vertical spacing",
+      defaultValue: "none",
+    },
+    {
+      name: "testId",
+      type: "string",
+      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+    },
+  ];
 
   function onHSandboxChange(spacerBindings: ComponentBinding[], props: Record<string, unknown>) {
     setHSpacerBindings(spacerBindings);
@@ -90,50 +109,50 @@ export default function SpacerPage() {
           { link: "/components/block", name: "Block" },
           { link: "/components/divider", name: "Divider" },
           { link: "/components/grid", name: "Grid" },
-          { link: "/patterns", name: "Layout" },
+          { link: "/patterns/layout", name: "Layout" },
         ]}
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
 
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{display: "none"}}>Component</h2>
             <Sandbox properties={hSpacerBindings} onChange={onHSandboxChange}>
-              <GoABlock gap="none">
+              <GoabBlock gap="none">
                 <div style={styles}>
                   Item 1
                 </div>
-                <GoASpacer {...hSpacerProps} />
+                <GoabSpacer {...hSpacerProps} />
                 <div style={styles}>
                   Item 1
                 </div>
-                <GoASpacer {...hSpacerProps} />
+                <GoabSpacer {...hSpacerProps} />
                 <div style={styles}>
                   Item 1
                 </div>
-              </GoABlock>
+              </GoabBlock>
             </Sandbox>
 
             <Sandbox properties={vSpacerBindings} onChange={onVSandboxChange}>
-              <GoABlock direction="column" gap="none">
+              <GoabBlock direction="column" gap="none">
                 <div style={styles}>
                   Item 1
                 </div>
-                <GoASpacer {...vSpacerProps} />
+                <GoabSpacer {...vSpacerProps} />
                 <div style={styles}>
                   Item 1
                 </div>
-                <GoASpacer {...vSpacerProps} />
+                <GoabSpacer {...vSpacerProps} />
                 <div style={styles}>
                   Item 1
                 </div>
-              </GoABlock>
+              </GoabBlock>
             </Sandbox>
 
-            <ComponentProperties properties={componentProperties} />
-          </GoATab>
-        </GoATabs>
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Table.tsx b/src/routes/components/Table.tsx
index 89e98cdec..4c3c2d4c8 100644
--- a/src/routes/components/Table.tsx
+++ b/src/routes/components/Table.tsx
@@ -1,34 +1,38 @@
 import { useContext, useEffect, useState } from "react";
-import { ComponentBinding, LanguageContext, Sandbox } from "@components/sandbox";
+import { ComponentBinding, Sandbox } from "@components/sandbox";
 import {
   ComponentProperties,
   ComponentProperty,
 } from "@components/component-properties/ComponentProperties";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader";
 import {
-  GoABadge,
-  GoAButton,
-  GoAContainer,
-  GoATab,
-  GoATable,
-  GoATableSortHeader,
-  GoATabs,
+  GoabBadge,
+  GoabButton,
+  GoabContainer,
+  GoabTab,
+  GoabTable,
+  GoabTableSortHeader,
+  GoabTabs,
 } from "@abgov/react-components";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
-import { GoATableProps } from "@abgov/react-components";
+import { GoabTableProps } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { GoabTableOnSortDetail } from "@abgov/ui-components-common";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { omit } from "lodash";
 
 interface User {
   firstName: string;
   lastName: string;
   age: number;
 }
-type ComponentPropsType = GoATableProps;
-type CastingType = {
-  width: string;
-  [key: string]: unknown;
-}
+
+type ComponentPropsType = Omit<GoabTableProps, 'onSort'> & {
+  onSort?: (sortBy: string, sortDir: number) => void;
+};
+
 export default function TablePage() {
+  const {version} = useContext(LanguageVersionContext);
   const [tableProps, setTableProps] = useState<ComponentPropsType>({
     width: "100%"
   });
@@ -49,7 +53,7 @@ export default function TablePage() {
     },
   ]);
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "width",
       type: "string",
@@ -79,14 +83,41 @@ export default function TablePage() {
       description: "Apply margin to the top, right, bottom, and/or left of the component.",
     },
   ];
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "width",
+      type: "string",
+      description: "Width of the table. By default it will fit the enclosed content.",
+    },
+    {
+      name: "variant",
+      type: "GoabTableVariant (normal | relaxed)",
+      description: "A relaxed variant of the table with more vertical padding for the cells",
+      defaultValue: "normal",
+    },
+    {
+      name: "onSort",
+      type: "(event: GoabTableOnSortDetail) => void",
+      description: "Sort event fired when a GoATableSortHeader component is used.",
+    },
+    {
+      name: "mt,mr,mb,ml",
+      type: "Spacing (none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl)",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },
+    {
+      name: "testId",
+      type: "string",
+      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+    },
+  ];
 
   function onSandboxChange(tableBindings: ComponentBinding[], props: Record<string, unknown>) {
     setTableBindings(tableBindings);
-    setTableProps(props as CastingType);
+    setTableProps(props as ComponentPropsType);
   }
 
   // For table demo -- needs to do sort functionality
-  const language = useContext(LanguageContext);
   const [users, setUsers] = useState<User[]>([]);
   useEffect(() => {
     const _users: User[] = [
@@ -114,10 +145,10 @@ export default function TablePage() {
     setUsers(_users);
   }, []);
 
-  function sortData(sortBy: string, sortDir: number) {
+  function sortData(event: GoabTableOnSortDetail) {
     const _users = [...users];
     _users.sort((a: any, b: any) => {
-      return (a[sortBy] > b[sortBy] ? 1 : -1) * sortDir;
+      return (a[event.sortBy] > b[event.sortBy] ? 1 : -1) * event.sortDir;
     });
     setUsers(_users);
   }
@@ -138,10 +169,17 @@ export default function TablePage() {
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
 
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <Sandbox properties={tableBindings} onChange={onSandboxChange} fullWidth>
-              <GoATable {...tableProps}>
+              <GoabTable
+                {...(omit(tableProps, 'onSort'))}
+                onSort={(detail: GoabTableOnSortDetail) => {
+                  if (tableProps.onSort) {
+                    tableProps.onSort(detail.sortBy, detail.sortDir);
+                  }
+                }}
+              >
                 <thead>
                   <tr>
                     <th>Status</th>
@@ -153,67 +191,67 @@ export default function TablePage() {
                 <tbody>
                   <tr>
                     <td>
-                      <GoABadge type="information" content="Badge text" />
+                      <GoabBadge type="information" content="Badge text" />
                     </td>
                     <td>Lorem ipsum</td>
                     <td>1234567890</td>
                     <td>
-                      <GoAButton type="tertiary">Action</GoAButton>
+                      <GoabButton type="tertiary">Action</GoabButton>
                     </td>
                   </tr>
                   <tr>
                     <td>
-                      <GoABadge type="information" content="Badge text" />
+                      <GoabBadge type="information" content="Badge text" />
                     </td>
                     <td>Lorem ipsum</td>
                     <td>1234567890</td>
                     <td>
-                      <GoAButton type="tertiary">Action</GoAButton>
+                      <GoabButton type="tertiary">Action</GoabButton>
                     </td>
                   </tr>
                   <tr>
                     <td>
-                      <GoABadge type="information" content="Badge text" />
+                      <GoabBadge type="information" content="Badge text" />
                     </td>
                     <td>Lorem ipsum</td>
                     <td>1234567890</td>
                     <td>
-                      <GoAButton type="tertiary">Action</GoAButton>
+                      <GoabButton type="tertiary">Action</GoabButton>
                     </td>
                   </tr>
                   <tr>
                     <td>
-                      <GoABadge type="information" content="Badge text" />
+                      <GoabBadge type="information" content="Badge text" />
                     </td>
                     <td>Lorem ipsum</td>
                     <td>1234567890</td>
                     <td>
-                      <GoAButton type="tertiary">Action</GoAButton>
+                      <GoabButton type="tertiary">Action</GoabButton>
                     </td>
                   </tr>
                 </tbody>
-              </GoATable>
+              </GoabTable>
             </Sandbox>
 
-            <ComponentProperties properties={componentProperties} />
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
             <h2 id="component-examples" className="hidden" aria-hidden="true">Examples</h2>
 
             <h3 id="component-example-sortable-columns">Sortable columns</h3>
-            <GoAContainer mt="m" mb="none">
+            <GoabContainer mt="m" mb="none">
               <div style={{ padding: "40px" }}>
-                <GoATable onSort={sortData} width="100%">
+                <GoabTable onSort={sortData} width="100%">
                   <thead>
                     <tr>
                       <th>
-                        <GoATableSortHeader name="firstName">First name</GoATableSortHeader>
+                        <GoabTableSortHeader name="firstName">First name</GoabTableSortHeader>
                       </th>
                       <th>
-                        <GoATableSortHeader name="lastName">Last name</GoATableSortHeader>
+                        <GoabTableSortHeader name="lastName">Last name</GoabTableSortHeader>
                       </th>
                       <th>
-                        <GoATableSortHeader name="age" direction="asc">
+                        <GoabTableSortHeader name="age" direction="asc">
                           Age
-                        </GoATableSortHeader>
+                        </GoabTableSortHeader>
                       </th>
                     </tr>
                   </thead>
@@ -226,10 +264,12 @@ export default function TablePage() {
                       </tr>
                     ))}
                   </tbody>
-                </GoATable>
+                </GoabTable>
               </div>
-            </GoAContainer>
-            {language === "react" && (
+            </GoabContainer>
+
+            {/*React code*/}
+            {version === "old" && (
               <CodeSnippet
                 lang="typescript"
                 tags="react"
@@ -277,7 +317,7 @@ export default function TablePage() {
               }
               
               return (
-                <GoATable onSort={sortData}>
+                <GoATable onSort={sortData} width="100%">
                   <thead>
                     <tr>
                       <th>
@@ -306,7 +346,85 @@ export default function TablePage() {
               />
             )}
 
-            {language === "angular" && (
+            {version === "new" && (
+              <CodeSnippet
+                lang="typescript"
+                tags="react"
+                allowCopy={true}
+                code={`
+              interface User {
+                firstName: string;
+                lastName: string;
+                age: number;
+              }
+              const [users, setUsers] = useState<User[]>([]);
+              
+              useEffect(() => {
+                const _users: User[] = [
+                  {
+                    firstName: "Christian",
+                    lastName: "Batz",
+                    age: 18
+                  },
+                  {
+                    firstName: "Brain",
+                    lastName: "Wisozk",
+                    age: 19
+                  },
+                  {
+                    firstName: "Neha",
+                    lastName: "Jones",
+                    age: 23
+                  },
+                  {
+                    firstName: "Tristin",
+                    lastName: "Buckridge",
+                    age: 31
+                  }
+                ];
+                setUsers(_users);
+              }, []);
+              
+              function sortData(event: GoabTableOnSortDetail) {
+                const _users = [...users];
+                _users.sort((a: any, b: any) => {
+                  return (a[event.sortBy] > b[event.sortBy] ? 1 : -1) * event.sortDir;
+                });
+                setUsers(_users);
+              }
+              
+              return (
+                <GoabTable onSort={sortData} width="100%">
+                  <thead>
+                    <tr>
+                      <th>
+                        <GoabTableSortHeader name="firstName">First name</GoabTableSortHeader>
+                      </th>
+                      <th>
+                        <GoabTableSortHeader name="lastName">Last name</GoabTableSortHeader>
+                      </th>
+                      <th>
+                        <GoabTableSortHeader name="age" direction="asc">Age</GoabTableSortHeader>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                  {users.map(user =>
+                    <tr key={user.firstName}>
+                     <td>{user.firstName}</td>
+                     <td>{user.lastName}</td>
+                     <td>{user.age}</td>
+                    </tr>
+                  )}
+                  </tbody>
+                </GoabTable>
+              )
+           `}
+              />
+            )}
+
+            {/*Angular code*/}
+            {version === "old" && (
               <CodeSnippet
                 lang="typescript"
                 tags="angular"
@@ -357,7 +475,7 @@ export default function TablePage() {
               />
             )}
 
-            {language === "angular" && (
+            {version === "old" && (
               <CodeSnippet
                 lang="typescript"
                 tags="angular"
@@ -383,9 +501,86 @@ export default function TablePage() {
               />
             )}
 
+            {version === "new" && (
+              <CodeSnippet
+                lang="typescript"
+                tags="angular"
+                allowCopy={true}
+                code={`
+              interface User {
+                firstName: string;
+                lastName: string;
+                age: number;
+              }
+              
+              export class TableComponent() {
+                users: User[] = [];
+                
+                constructor() {
+                  this.users = [
+                    {
+                      firstName: "Christian",
+                      lastName: "Batz",
+                      age: 18
+                    },
+                    {
+                      firstName: "Brain",
+                      lastName: "Wisozk",
+                      age: 19
+                    },
+                    {
+                      firstName: "Neha",
+                      lastName: "Jones",
+                      age: 23
+                    },
+                    {
+                      firstName: "Tristin",
+                      lastName: "Buckridge",
+                      age: 31
+                    }
+                  ];                
+                }
+                
+                handleSort(event: GoabTableOnSortDetail) {
+                  const { sortBy, sortDir } = event;
+                  this.users.sort(
+                    (a: any, b: any) => (a[sortBy] > b[sortBy] ? 1 : -1) * sortDir
+                  );
+                }
+              }
+              `}
+              />
+            )}
+
+            {version === "new" && (
+              <CodeSnippet
+                lang="typescript"
+                tags="angular"
+                allowCopy={true}
+                code={`
+                <goab-table width="100%" mb="xl" (onSort)="handleSort($event)">
+                  <thead>
+                    <tr>
+                      <th><goab-table-sort-header name="firstName">First name and really long header</goab-table-sort-header></th>
+                      <th><goab-table-sort-header name="lastName">Last name</goab-table-sort-header></th>
+                      <th><goab-table-sort-header name="age" direction="asc">Age</goab-table-sort-header></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let user of users; index as i">
+                      <td>{{ user.firstName }}</td>
+                      <td>{{ user.lastName }}</td>
+                      <td>{{ user.age }}</td>
+                    </tr>
+                  </tbody>
+                </goab-table>
+              `}
+              />
+            )}
+
             <h3 id="component-example-number-column">Number column</h3>
             <Sandbox fullWidth>
-              <GoATable width="100%">
+              <GoabTable width="100%">
                 <thead>
                   <tr>
                     <th>Col 1</th>
@@ -405,18 +600,18 @@ export default function TablePage() {
                     <td className="goa-table-number-column">4567</td>
                   </tr>
                 </tbody>
-              </GoATable>
+              </GoabTable>
             </Sandbox>
-          </GoATab>
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
-            }></GoATab>
-        </GoATabs>
+            }></GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Tabs.tsx b/src/routes/components/Tabs.tsx
index cfe96d05c..1a2e8b3be 100644
--- a/src/routes/components/Tabs.tsx
+++ b/src/routes/components/Tabs.tsx
@@ -1,12 +1,20 @@
-import { GoABadge, GoATab, GoATabs, GoATable, GoAButton } from "@abgov/react-components";
+import {
+  GoabBadge,
+  GoabContainer,
+  GoabTab,
+  GoabTabs,
+} from "@abgov/react-components";
 import {
   ComponentProperties,
   ComponentProperty,
 } from "@components/component-properties/ComponentProperties";
-import { Sandbox } from "@components/sandbox";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { useContext } from "react";
+import { TestIdProperty } from "@components/component-properties/common-properties.ts";
+import { TabsExamples } from "@examples/tabs/TabsExamples.tsx";
 
 // == Page props ==
 const componentName = "Tabs";
@@ -14,7 +22,8 @@ const description =
   "Let users navigate between related sections of content, displaying one section at a time.";
 const category = Category.STRUCTURE_AND_NAVIGATION;
 export default function TabsPage() {
-  const componentProperties: ComponentProperty[] = [
+  const { version } = useContext(LanguageVersionContext);
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "initialtab",
       type: "number",
@@ -42,686 +51,241 @@ export default function TabsPage() {
       description: "Callback function when tab is changed.",
     },
   ];
-  const tabProperties: ComponentProperty[] = [
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "initialTab",
+      type: "number",
+      defaultValue: "1",
+      description: "Current active tab",
+    },
+    {
+      name: "onChange",
+      type: "(event: GoabTabsOnChangeDetail) => void",
+      description: "Callback function when tab is changed.",
+    },
+    TestIdProperty,
+  ];
+
+  const oldTabProperties: ComponentProperty[] = [
     {
       name: "heading",
       type: "slot",
       description: "Add components to the tab heading such as badges",
     },
   ];
+  const tabProperties: ComponentProperty[] = [
+    {
+      name: "heading",
+      type: "ReactNode|string",
+      lang: "react",
+      description: "Add components to the tab heading such as badges",
+    },
+    {
+      name: "heading",
+      type: "TemplateRef|string",
+      lang: "angular",
+      description: "Add components to the tab heading such as badges",
+    },
+  ];
   const noop = () => {};
-  const review = [0, 1, 2, 3];
-  const complete = [0, 1];
+
   return (
     <>
       <ComponentHeader name={componentName} category={category} description={description} />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{ display: "none" }}>
               Component
             </h2>
-            <Sandbox fullWidth>
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                  
+            {/*Cannot use Sandbox because if we change the language/version, the tabs inside the tabs will make the below bugs:*/}
+            {/*1. Scroll down to an example*/}
+            {/*2. Scroll back and change the language selected*/}
+            {/*3. It autoscrolls you back down close to the example you were looking at*/}
+            {/*4. If you click anywhere on the screen, it then autoscrolls back up to the top*/}
+            <GoabContainer mt="m" mb="none">
+              <div style={{ padding: "40px" }}>
+                <GoabTabs onChange={noop}>
+                  <GoabTab heading="Tab Item 1">
+                    Tab Item 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                    eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  </GoabTab>
+                  <GoabTab heading="Tab Item 2">
+                    Tab Item 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                    eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  </GoabTab>
+                  <GoabTab heading="Tab Item 3">
+                    Tab Item 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                    eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  </GoabTab>
+                </GoabTabs>
+              </div>
+            </GoabContainer>
+            {/*Angular code*/}
+
+            {version === "old" && (
+              <>
+                <CodeSnippet
+                  lang="typescript"
+                  tags="angular"
+                  allowCopy={true}
+                  code={`
                   onChange(event: Event) {
                     const customEvent = event as CustomEvent;
                     const tabIndex = customEvent.detail.tab;
                     console.log('Tab changed to ', tabIndex);
                   } 
                 `}
-              />
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                  function onChange(tabIndex: number): void {
-                    console.log('Tab changed to ', tabIndex);
-                  }
-                  `}
-              />
-              <GoATabs onChange={noop}>
-                <GoATab heading="Tab Item 1">
-                  Tab Item 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                  eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                </GoATab>
-                <GoATab heading="Tab Item 2">
-                  Tab Item 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                  eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                </GoATab>
-                <GoATab heading="Tab Item 3">
-                  Tab Item 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                  eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                </GoATab>
-              </GoATabs>
-            </Sandbox>
-
-            {/*GoATabs Table Properties*/}
-            <ComponentProperties heading="GoATabs Properties" properties={componentProperties} />
-            <ComponentProperties heading="GoATab Properties" properties={tabProperties} />
+                />
 
-            {/*Tabs Examples*/}
-            <h2 id="component-examples" className="hidden" aria-hidden="true">Examples</h2>
-
-            <h3 id="component-example-different-views-data-table">Show different views of data in a table</h3>
-            <Sandbox fullWidth skipRender>
-
-            <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                  <goa-tabs>
-                    <goa-tab>
-                      <div slot="heading">All</div>
-                      <goa-table width="100%">
-                        <thead>
-                          <tr>
-                            <th>Status</th>
-                            <th>Text</th>
-                            <th class="goa-table-number-header">Number</th>
-                            <th>Action</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          <tr *ngFor="let i of [0,1,2,3]">
-                            <td>
-                              <goa-badge type="important" content="Review pending" />
-                            </td>
-                            <td>Lorem ipsum</td>
-                            <td class="goa-table-number-column">1234567890</td>
-                            <td>
-                              <goa-button type="tertiary">Action</goa-button>
-                            </td>
-                          </tr>
-                          <tr *ngFor="let i of [0,1]">
-                            <td>
-                              <goa-badge type="information" content="Complete" />
-                            </td>
-                            <td>Lorem Ipsum</td>
-                            <td class="goa-table-number-column">1234567890</td>
-                            <td>
-                              <goa-button type="tertiary">Action</goa-button>
-                            </td>
-                          </tr>
-                        </tbody>
-                      </goa-table>
+                <CodeSnippet
+                  lang="html"
+                  tags="angular"
+                  allowCopy={true}
+                  code={`
+                  <goa-tabs (_change)="onChange($event)">
+                    <goa-tab heading="Tab Item 1">
+                      Tab Item 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                     </goa-tab>
-                    <goa-tab>
-                      <div slot="heading">Review pending<goa-badge type="important" content="4"></goa-badge></div>
-                      <goa-table width="100%">
-                        <thead>
-                          <tr>
-                            <th>Status</th>
-                            <th>Text</th>
-                            <th class="goa-table-number-header">Number</th>
-                            <th>Action</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          <tr *ngFor="let i of [0,1,2,3]">
-                            <td>
-                              <goa-badge type="important" content="Review pending" />
-                            </td>
-                            <td>Lorem ipsum</td>
-                            <td class="goa-table-number-column">1234567890</td>
-                            <td>
-                              <goa-button type="tertiary">Action</goa-button>
-                            </td>
-                          </tr>
-                        </tbody>
-                      </goa-table>
+                    <goa-tab heading="Tab Item 2">
+                      Tab Item 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                     </goa-tab>
-                    <goa-tab>
-                      <div slot="heading">Complete<goa-badge type="information" content="338"></goa-badge></div>
-                      <goa-table width="100%">
-                        <thead>
-                          <tr>
-                            <th>Status</th>
-                            <th>Text</th>
-                            <th class="goa-table-number-header">Number</th>
-                            <th>Action</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          <tr *ngFor="let i of [0,1]">
-                            <td>
-                              <goa-badge type="information" content="Complete" />
-                            </td>
-                            <td>Lorem Ipsum</td>
-                            <td class="goa-table-number-column">1234567890</td>
-                            <td>
-                              <goa-button type="tertiary">Action</goa-button>
-                            </td>
-                          </tr>
-                        </tbody>
-                      </goa-table>
+                    <goa-tab heading="Tab Item 3">
+                      Tab Item 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                     </goa-tab>
                   </goa-tabs>
                 `}
-              />
+                />
+              </>
+            )}
+            {version === "new" && (
+              <>
+                <CodeSnippet
+                  lang="typescript"
+                  tags="angular"
+                  allowCopy={true}
+                  code={`
+                  tabsOnChange(event: GoabTabsOnChangeDetail) {
+                    const tabIndex = event.tab;
+                    console.log('Tab changed to ', tabIndex);
+                  } 
+                `}
+                />
+                <CodeSnippet
+                  lang="html"
+                  tags="angular"
+                  allowCopy={true}
+                  code={`
+                  <goab-tabs (onChange)="tabsOnChange($event)">
+                    <goab-tab heading="Tab Item 1">
+                      Tab Item 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </goab-tab>
+                    <goab-tab heading="Tab Item 2">
+                      Tab Item 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </goab-tab>
+                    <goab-tab heading="Tab Item 3">
+                      Tab Item 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </goab-tab>
+                  </goab-tabs>
+                `}
+                />
+              </>
+            )}
 
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                  const review = [0, 1, 2, 3];
-                  const complete = [0, 1];
-                  `}
-              />
+            {/*React Code*/}
 
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                  <GoATabs>
-                    <GoATab heading="All">
-                      <GoATable width="100%">
-                        <thead>
-                          <tr>
-                            <th>Status</th>
-                            <th>Text</th>
-                            <th className="goa-table-number-header">Number</th>
-                            <th>Action</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {review.map((i) => (
-                            <tr key={i}>
-                              <td>
-                                <GoABadge type="important" content="Review pending" />
-                              </td>
-                              <td>Lorem Ipsum</td>
-                              <td className="goa-table-number-column">1234567890</td>
-                              <td>
-                                <GoAButton type="tertiary">Action</GoAButton>
-                              </td>
-                            </tr>
-                          ))}
-                          {complete.map((i) => (
-                            <tr key={i}>
-                              <td>
-                                <GoABadge type="information" content="Complete" />
-                              </td>
-                              <td>Lorem Ipsum</td>
-                              <td className="goa-table-number-column">1234567890</td>
-                              <td>
-                                <GoAButton type="tertiary">Action</GoAButton>
-                              </td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </GoATable>
-                    </GoATab>
-                    <GoATab heading={<>Review pending<GoABadge type="important" content="4"></GoABadge></>}>
-                      <GoATable width="100%">
-                        <thead>
-                          <tr>
-                            <th>Status</th>
-                            <th>Text</th>
-                            <th className="goa-table-number-header">Number</th>
-                            <th>Action</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {review.map((i) => (
-                            <tr key={i}>
-                              <td>
-                                <GoABadge type="important" content="Review pending" />
-                              </td>
-                              <td>Lorem Ipsum</td>
-                              <td className="goa-table-number-column">1234567890</td>
-                              <td>
-                                <GoAButton type="tertiary">Action</GoAButton>
-                              </td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </GoATable>
-                    </GoATab>
-                    <GoATab heading={<>Complete<GoABadge type="information" content="338"></GoABadge></>}>
-                      <GoATable width="100%">
-                        <thead>
-                          <tr>
-                            <th>Status</th>
-                            <th>Text</th>
-                            <th className="goa-table-number-header">Number</th>
-                            <th>Action</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {complete.map((i) => (
-                            <tr key={i}>
-                              <td>
-                                <GoABadge type="information" content="Complete" />
-                              </td>
-                              <td>Lorem Ipsum</td>
-                              <td className="goa-table-number-column">1234567890</td>
-                              <td>
-                                <GoAButton type="tertiary">Action</GoAButton>
-                              </td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </GoATable>
-                    </GoATab>
-                  </GoATabs>
+            {version === "old" && (
+              <>
+                <CodeSnippet
+                  lang="typescript"
+                  tags="react"
+                  allowCopy={true}
+                  code={`
+                  function onChange(tabIndex: number): void {
+                    console.log('Tab changed to ', tabIndex);
+                  }
                   `}
-              />
-
-              <GoATabs>
-                <GoATab heading="All">
-                  <GoATable width="100%">
-                    <thead>
-                      <tr>
-                        <th>Status</th>
-                        <th>Text</th>
-                        <th className="goa-table-number-header">Number</th>
-                        <th>Action</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {review.map((i) => (
-                        <tr key={i}>
-                          <td>
-                            <GoABadge type="important" content="Review pending" />
-                          </td>
-                          <td>Lorem Ipsum</td>
-                          <td className="goa-table-number-column">1234567890</td>
-                          <td>
-                            <GoAButton type="tertiary">Action</GoAButton>
-                          </td>
-                        </tr>
-                      ))}
-                      {complete.map((i) => (
-                        <tr key={i}>
-                          <td>
-                            <GoABadge type="information" content="Complete" />
-                          </td>
-                          <td>Lorem Ipsum</td>
-                          <td className="goa-table-number-column">1234567890</td>
-                          <td>
-                            <GoAButton type="tertiary">Action</GoAButton>
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </GoATable>
-                </GoATab>
-                <GoATab heading={<>Review pending<GoABadge type="important" content="4"></GoABadge></>}>
-                  <GoATable width="100%">
-                    <thead>
-                      <tr>
-                        <th>Status</th>
-                        <th>Text</th>
-                        <th className="goa-table-number-header">Number</th>
-                        <th>Action</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {review.map((i) => (
-                        <tr key={i}>
-                          <td>
-                            <GoABadge type="important" content="Review pending" />
-                          </td>
-                          <td>Lorem Ipsum</td>
-                          <td className="goa-table-number-column">1234567890</td>
-                          <td>
-                            <GoAButton type="tertiary">Action</GoAButton>
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </GoATable>
-                </GoATab>
-                <GoATab heading={<>Complete<GoABadge type="information" content="338"></GoABadge></>}>
-                  <GoATable width="100%">
-                    <thead>
-                      <tr>
-                        <th>Status</th>
-                        <th>Text</th>
-                        <th className="goa-table-number-header">Number</th>
-                        <th>Action</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {complete.map((i) => (
-                        <tr key={i}>
-                          <td>
-                            <GoABadge type="information" content="Complete" />
-                          </td>
-                          <td>Lorem Ipsum</td>
-                          <td className="goa-table-number-column">1234567890</td>
-                          <td>
-                            <GoAButton type="tertiary">Action</GoAButton>
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </GoATable>
-                </GoATab>
-              </GoATabs>
-            </Sandbox>
-          
-            <h3 id="component-example-set-specific-tab-active">Set a specific tab to be active</h3>
-            <Sandbox fullWidth skipRender>
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                  <goa-tabs initialTab={2}>
-                    <goa-tab>
-                      <div slot="heading">All</div>
-                      <goa-table width="100%">
-                        <thead>
-                          <tr>
-                            <th>Status</th>
-                            <th>Text</th>
-                            <th class="goa-table-number-header">Number</th>
-                            <th>Action</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          <tr *ngFor="let i of [0,1,2,3]">
-                            <td>
-                              <goa-badge type="important" content="Review pending" />
-                            </td>
-                            <td>Lorem ipsum</td>
-                            <td class="goa-table-number-column">1234567890</td>
-                            <td>
-                              <goa-button type="tertiary">Action</goa-button>
-                            </td>
-                          </tr>
-                          <tr *ngFor="let i of [0,1]">
-                            <td>
-                              <goa-badge type="information" content="Complete" />
-                            </td>
-                            <td>Lorem Ipsum</td>
-                            <td class="goa-table-number-column">1234567890</td>
-                            <td>
-                              <goa-button type="tertiary">Action</goa-button>
-                            </td>
-                          </tr>
-                        </tbody>
-                      </goa-table>
-                    </goa-tab>
-                    <goa-tab>
-                      <div slot="heading">Review pending<goa-badge type="important" content="4"></goa-badge></div>
-                      <goa-table width="100%">
-                        <thead>
-                          <tr>
-                            <th>Status</th>
-                            <th>Text</th>
-                            <th class="goa-table-number-header">Number</th>
-                            <th>Action</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          <tr *ngFor="let i of [0,1,2,3]">
-                            <td>
-                              <goa-badge type="important" content="Review pending" />
-                            </td>
-                            <td>Lorem ipsum</td>
-                            <td class="goa-table-number-column">1234567890</td>
-                            <td>
-                              <goa-button type="tertiary">Action</goa-button>
-                            </td>
-                          </tr>
-                        </tbody>
-                      </goa-table>
-                    </goa-tab>
-                    <goa-tab>
-                      <div slot="heading">Complete<goa-badge type="information" content="338"></goa-badge></div>
-                      <goa-table width="100%">
-                        <thead>
-                          <tr>
-                            <th>Status</th>
-                            <th>Text</th>
-                            <th class="goa-table-number-header">Number</th>
-                            <th>Action</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          <tr *ngFor="let i of [0,1]">
-                            <td>
-                              <goa-badge type="information" content="Complete" />
-                            </td>
-                            <td>Lorem Ipsum</td>
-                            <td class="goa-table-number-column">1234567890</td>
-                            <td>
-                              <goa-button type="tertiary">Action</goa-button>
-                            </td>
-                          </tr>
-                        </tbody>
-                      </goa-table>
-                    </goa-tab>
-                  </goa-tabs>
-                `}
-              />
-
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                  const review = [0, 1, 2, 3];
-                  const complete = [0, 1];
+                />
+                <CodeSnippet
+                  lang="html"
+                  tags="react"
+                  allowCopy={true}
+                  code={`
+                <GoATabs onChange={onChange}>
+                  <GoATab heading="Tab Item 1">
+                    Tab Item 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  </GoATab>
+                  <GoATab heading="Tab Item 2">
+                    Tab Item 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  </GoATab>
+                  <GoATab heading="Tab Item 3">
+                    Tab Item 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  </GoATab>
+                </GoATabs>
                   `}
-              />
+                />
+              </>
+            )}
 
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                  <GoATabs initialTab={2}>
-                    <GoATab heading="All">
-                      <GoATable width="100%">
-                        <thead>
-                          <tr>
-                            <th>Status</th>
-                            <th>Text</th>
-                            <th className="goa-table-number-header">Number</th>
-                            <th>Action</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {review.map((i) => (
-                            <tr key={i}>
-                              <td>
-                                <GoABadge type="important" content="Review pending" />
-                              </td>
-                              <td>Lorem Ipsum</td>
-                              <td className="goa-table-number-column">1234567890</td>
-                              <td>
-                                <GoAButton type="tertiary">Action</GoAButton>
-                              </td>
-                            </tr>
-                          ))}
-                          {complete.map((i) => (
-                            <tr key={i}>
-                              <td>
-                                <GoABadge type="information" content="Complete" />
-                              </td>
-                              <td>Lorem Ipsum</td>
-                              <td className="goa-table-number-column">1234567890</td>
-                              <td>
-                                <GoAButton type="tertiary">Action</GoAButton>
-                              </td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </GoATable>
-                    </GoATab>
-                    <GoATab heading={<>Review pending<GoABadge type="important" content="4"></GoABadge></>}>
-                      <GoATable width="100%">
-                        <thead>
-                          <tr>
-                            <th>Status</th>
-                            <th>Text</th>
-                            <th className="goa-table-number-header">Number</th>
-                            <th>Action</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {review.map((i) => (
-                            <tr key={i}>
-                              <td>
-                                <GoABadge type="important" content="Review pending" />
-                              </td>
-                              <td>Lorem Ipsum</td>
-                              <td className="goa-table-number-column">1234567890</td>
-                              <td>
-                                <GoAButton type="tertiary">Action</GoAButton>
-                              </td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </GoATable>
-                    </GoATab>
-                    <GoATab heading={<>Complete<GoABadge type="information" content="338"></GoABadge></>}>
-                      <GoATable width="100%">
-                        <thead>
-                          <tr>
-                            <th>Status</th>
-                            <th>Text</th>
-                            <th className="goa-table-number-header">Number</th>
-                            <th>Action</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {complete.map((i) => (
-                            <tr key={i}>
-                              <td>
-                                <GoABadge type="information" content="Complete" />
-                              </td>
-                              <td>Lorem Ipsum</td>
-                              <td className="goa-table-number-column">1234567890</td>
-                              <td>
-                                <GoAButton type="tertiary">Action</GoAButton>
-                              </td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </GoATable>
-                    </GoATab>
-                  </GoATabs>
+            {version === "new" && (
+              <>
+                <CodeSnippet
+                  lang="typescript"
+                  tags="react"
+                  allowCopy={true}
+                  code={`
+                  function tabsOnChange(event: GoabTabsOnChangeDetail): void {
+                    console.log('Tab changed to ', event.tab);
+                  }
                   `}
-              />
+                />
+                <CodeSnippet
+                  lang="html"
+                  tags="react"
+                  allowCopy={true}
+                  code={`
+                  <GoabTabs onChange={tabsOnChange}>
+                    <GoabTab heading="Tab Item 1">
+                      Tab Item 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </GoabTab>
+                    <GoabTab heading="Tab Item 2">
+                      Tab Item 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </GoabTab>
+                    <GoabTab heading="Tab Item 3">
+                      Tab Item 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </GoabTab>
+                  </GoabTabs>
+                  `}
+                />
+              </>
+            )}
 
-              <GoATabs initialTab={2}>
-                <GoATab heading="All">
-                  <GoATable width="100%">
-                    <thead>
-                      <tr>
-                        <th>Status</th>
-                        <th>Text</th>
-                        <th className="goa-table-number-header">Number</th>
-                        <th>Action</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {review.map((i) => (
-                        <tr key={i}>
-                          <td>
-                            <GoABadge type="important" content="Review pending" />
-                          </td>
-                          <td>Lorem Ipsum</td>
-                          <td className="goa-table-number-column">1234567890</td>
-                          <td>
-                            <GoAButton type="tertiary">Action</GoAButton>
-                          </td>
-                        </tr>
-                      ))}
-                      {complete.map((i) => (
-                        <tr key={i}>
-                          <td>
-                            <GoABadge type="information" content="Complete" />
-                          </td>
-                          <td>Lorem Ipsum</td>
-                          <td className="goa-table-number-column">1234567890</td>
-                          <td>
-                            <GoAButton type="tertiary">Action</GoAButton>
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </GoATable>
-                </GoATab>
-                <GoATab heading={<>Review pending<GoABadge type="important" content="4"></GoABadge></>}>
-                  <GoATable width="100%">
-                    <thead>
-                      <tr>
-                        <th>Status</th>
-                        <th>Text</th>
-                        <th className="goa-table-number-header">Number</th>
-                        <th>Action</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {review.map((i) => (
-                        <tr key={i}>
-                          <td>
-                            <GoABadge type="important" content="Review pending" />
-                          </td>
-                          <td>Lorem Ipsum</td>
-                          <td className="goa-table-number-column">1234567890</td>
-                          <td>
-                            <GoAButton type="tertiary">Action</GoAButton>
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </GoATable>
-                </GoATab>
-                <GoATab heading={<>Complete<GoABadge type="information" content="338"></GoABadge></>}>
-                  <GoATable width="100%">
-                    <thead>
-                      <tr>
-                        <th>Status</th>
-                        <th>Text</th>
-                        <th className="goa-table-number-header">Number</th>
-                        <th>Action</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {complete.map((i) => (
-                        <tr key={i}>
-                          <td>
-                            <GoABadge type="information" content="Complete" />
-                          </td>
-                          <td>Lorem Ipsum</td>
-                          <td className="goa-table-number-column">1234567890</td>
-                          <td>
-                            <GoAButton type="tertiary">Action</GoAButton>
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </GoATable>
-                </GoATab>
-              </GoATabs>
-            </Sandbox>
-          </GoATab>
+            {/*</Sandbox>*/}
+
+            {/*GoATabs Table Properties*/}
+            <ComponentProperties
+              heading="GoATabs Properties"
+              properties={componentProperties}
+              oldProperties={oldComponentProperties}
+            />
+            <ComponentProperties
+              heading="GoATab Properties"
+              properties={tabProperties}
+              oldProperties={oldTabProperties}
+            />
 
-          <GoATab
+            <TabsExamples />
+          </GoabTab>
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
-            }></GoATab>
-        </GoATabs>
+            }></GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/routes/components/TemporaryNotification.tsx b/src/routes/components/TemporaryNotification.tsx
index d6119b134..74c657133 100644
--- a/src/routes/components/TemporaryNotification.tsx
+++ b/src/routes/components/TemporaryNotification.tsx
@@ -6,7 +6,7 @@ import {
   ComponentProperty,
 } from "@components/component-properties/ComponentProperties.tsx";
 
-import { GoABadge, GoATab, GoATabs, GoACalloutProps } from "@abgov/react-components";
+import { GoabBadge, GoabTab, GoabTabs, GoabCalloutProps } from "@abgov/react-components";
 
 // == Page props ==
 
@@ -16,7 +16,7 @@ const relatedComponents = [
   { link: "/components/callout", name: "Callout" },
   { link: "/components/notification-banner", name: "Notification banner" }
 ];
-type ComponentPropsType = GoACalloutProps;
+type ComponentPropsType = GoabCalloutProps;
 type CastingType = {
   // add any required props here
   [key: string]: unknown;
@@ -59,24 +59,24 @@ export default function TEMPLATE_Page() {
         relatedComponents={relatedComponents}
       />
 
-      <GoATabs>
-        <GoATab heading="Code examples">
+      <GoabTabs>
+        <GoabTab heading="Code examples">
           <Sandbox properties={componentBindings} onChange={onSandboxChange}>
             <></>
             {/* <GoABadge {...componentProps} /> */}
           </Sandbox>
           <ComponentProperties properties={componentProperties} />
-        </GoATab>
+        </GoabTab>
 
-        <GoATab
+        <GoabTab
           heading={
             <>
               Design guidelines
-              <GoABadge type="information" content="In progress" />
+              <GoabBadge type="information" content="In progress" />
             </>
           }
-        ></GoATab>
-      </GoATabs>
+        ></GoabTab>
+      </GoabTabs>
     </>
   );
 }
diff --git a/src/routes/components/Text.tsx b/src/routes/components/Text.tsx
new file mode 100644
index 000000000..2d5fe7545
--- /dev/null
+++ b/src/routes/components/Text.tsx
@@ -0,0 +1,124 @@
+import { useState } from "react";
+import { ComponentBinding, Sandbox } from "@components/sandbox";
+import {
+  ComponentProperties,
+  ComponentProperty,
+} from "@components/component-properties/ComponentProperties.tsx";
+import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
+import { GoabText, GoabTab, GoabTabs, GoabBadge } from "@abgov/react-components";
+
+export default function TextPage() {
+  const [textProps, setTextProps] = useState({});
+
+  const [textBindings, setTextBindings] = useState<ComponentBinding[]>([
+    {
+      label: "Size",
+      type: "list",
+      name: "size",
+      options: ["", "heading-xl", "heading-l", "heading-m", "heading-s", "heading-xs", "body-l", "body-m", "body-s", "body-xs"],
+      value: "",
+    },
+    {
+      label: "As",
+      type: "list",
+      name: "as",
+      options: ["", "h1", "h2", "h3", "h4", "h5", "span", "div", "p" ],
+      value: "",
+    },
+    {
+      label: "Max width",
+      type: "string",
+      name: "maxWidth",
+      value: ""
+    },    
+    {
+      label: "Color",
+      type: "list",
+      name: "color",
+      options: ["", "primary", "secondary"],
+      value: ""
+    },
+    {
+      label: "Top Margin",
+      type: "list",
+      name: "mt",
+      options: ["none", "3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl"],
+      value: "none",
+    },
+    {
+      label: "Bottom Margin",
+      type: "list",
+      name: "mb",
+      options: ["none", "3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl"],
+      value: "none",
+    },
+  ]);
+
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "as",
+      type: "h1 | h2 | h3 | h4 | h5 | span | div | p",
+      description: "Sets the tag and text size.",
+      defaultValue: "div"
+    },
+    {
+      name: "size",
+      type: "heading-xl | heading-l | heading-m | heading-s | heading-xs | body-l | body-m | body-s | body-xs",
+      description: "Overrides the text size from the 'as' property."
+    },
+    {
+     name: "maxWidth",
+     type: "string",
+     description: "Sets the max width.",
+     defaultValue: "65ch"
+    },
+     {
+      name: "color",
+      type: "primary | secondary",
+      description: "Sets the text colour.",
+      defaultValue: "primary"
+     },
+    {
+      name: "mt,mr,mb,ml",
+      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },
+  ];
+
+  function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
+    setTextBindings(bindings);
+    setTextProps(props);
+  }
+
+  return (
+    <>
+      <ComponentHeader
+        name="Text"
+        category={Category.CONTENT_AND_LAYOUT}
+        description="Provides consistent sizing, spacing, and colour to written content."
+      />
+
+      <GoabTabs>
+        <GoabTab heading="Code examples">
+          <Sandbox properties={textBindings} onChange={onSandboxChange}>
+            
+            <GoabText {...textProps}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            </GoabText>
+
+          </Sandbox>
+          <ComponentProperties properties={componentProperties} />
+        </GoabTab>
+        
+        <GoabTab
+          heading={
+            <>
+              Design guidelines
+              <GoabBadge type="information" content="In progress" />
+            </>
+          }
+        ></GoabTab>
+      </GoabTabs>
+    </>
+  );
+}
diff --git a/src/routes/components/TextArea.tsx b/src/routes/components/TextArea.tsx
index 8a4903f6a..041bed539 100644
--- a/src/routes/components/TextArea.tsx
+++ b/src/routes/components/TextArea.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import {
   ComponentProperties,
@@ -6,20 +6,23 @@ import {
 } from "@components/component-properties/ComponentProperties.tsx";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import {
-  GoABadge,
-  GoAButton,
-  GoAButtonGroup,
-  GoAContainer,
-  GoADetails,
-  GoAFormItem,
-  GoATab,
-  GoATabs,
-  GoATextArea,
-  GoATextAreaProps,
+  GoabBadge,
+  GoabFormItem,
+  GoabTab,
+  GoabTabs, GoabTextarea,
+  GoabTextAreaProps
 } from "@abgov/react-components";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 import { useSandboxFormItem } from "@hooks/useSandboxFormItem.tsx";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { GoabTextAreaOnChangeDetail } from "@abgov/ui-components-common";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import {
+  LegacyMarginProperty,
+  MarginProperty,
+  TestIdProperty
+} from "@components/component-properties/common-properties.ts";
+import { TextAreaExamples } from "@examples/textarea/TextAreaExamples.tsx";
 
 // == Page props ==
 
@@ -30,15 +33,16 @@ const relatedComponents = [
   { link: "/components/form-item", name: "Form item" },
   { link: "/components/input", name: "Input" },
 ];
-type ComponentPropsType = GoATextAreaProps;
+type ComponentPropsType = GoabTextAreaProps;
 type CastingType = {
   name: string;
   value: string;
-  onChange: (name: string, value: string) => void;
+  onChange: (event: GoabTextAreaOnChangeDetail) => void;
   [key: string]: unknown;
 };
 
 export default function TextAreaPage() {
+  const {version} = useContext(LanguageVersionContext);
   const [componentProps, setComponentProps] = useState<ComponentPropsType>({
     name: "item",
     value: "",
@@ -98,7 +102,8 @@ export default function TextAreaPage() {
   const { formItemBindings, formItemProps, onFormItemChange } = useSandboxFormItem({
     label: "Basic",
   });
-  const componentProperties: ComponentProperty[] = [
+
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "name",
       lang: "angular",
@@ -234,11 +239,93 @@ export default function TextAreaPage() {
       required: false,
       description: "Function invoked when a key is pressed",
     },
+    LegacyMarginProperty,
+  ];
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "name",
+      type: "string",
+      description: "Name of the input value that is received in the _change event",
+    },
+    {
+      name: "value",
+      type: "string",
+      description: "Bound to value",
+    },
+    {
+      name: "placeholder",
+      type: "string",
+      description: "Text displayed within the input when no value is set.",
+    },
+    {
+      name: "id",
+      type: "string",
+      description: "Set the id of the textarea",
+    },
+    {
+      name: "rows",
+      type: "number",
+      description: "Set the number of rows",
+      defaultValue: "3",
+    },
     {
-      name: "mt,mr,mb,ml",
-      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
-      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+      name: "width",
+      type: "string",
+      description: "Width of the text area",
+      defaultValue: "60ch",
+    },
+    {
+      name: "error",
+      type: "boolean",
+      description: "Sets the input to an error state",
+      defaultValue: "false",
+    },
+    {
+      name: "readOnly",
+      type: "boolean",
+      defaultValue: "false",
+      description: "Sets the input to a read only state.",
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      defaultValue: "false",
+      description: "Sets the input to a disabled state. Use [attr.disabled] with [formControl]",
+    },
+    {
+      name: "ariaLabel",
+      type: "string",
+      description:
+        "Defines how the text will be translated for the screen reader. If not specified it will fall back to the name.",
     },
+    {
+      name: "countBy",
+      type: "GoabTextAreaCountBy (character | word)",
+      description:
+        "Counting interval for characters or words, specifying whether to count every character or word.",
+    },
+    {
+      name: "maxCount",
+      type: "number",
+      description: "Maximum number of characters or words allowed",
+    },
+    {
+      name: "maxWidth",
+      type: "string",
+      description: "Maximum width of the text area",
+    },
+    TestIdProperty,
+    {
+      name: "onChange",
+      type: "(event: GoabTextAreaOnChangeDetail) => void",
+      description: "Callback function when textarea value is changed",
+    },
+    {
+      name: "onKeyPress",
+      type: "(event: GoabTextAreaOnKeyPressDetail) => void",
+      description: "Function invoked when a key is pressed",
+    },
+    MarginProperty,
   ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
@@ -258,8 +345,8 @@ export default function TextAreaPage() {
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{ display: "none" }}>
               Component
             </h2>
@@ -268,24 +355,51 @@ export default function TextAreaPage() {
               formItemProperties={formItemBindings}
               onChange={onSandboxChange}
               onChangeFormItemBindings={onFormItemChange}
-              flags={["reactive"]}
+              flags={version === "old" ? ["reactive"] : ["event", "reactive", "template-driven"]}
+              allow={["form"]}
               fullWidth>
-              <CodeSnippet
-                lang="typescript"
-                tags={["angular", "reactive"]}
-                allowCopy={true}
-                code={`
+              {/*Angular code*/}
+              {version === "old" && (
+                <>
+                  <CodeSnippet
+                    lang="typescript"
+                    tags={["angular", "reactive"]}
+                    allowCopy={true}
+                    code={`
                 // reactive code
                 export class SomeComponent {
                   itemFormCtrl = new FormControl("");
                 }
               `}
-              />
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
+                  />
+                </>
+              )}
+
+              {version === "new" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags={["angular", "reactive"]}
+                  allowCopy={true}
+                  code={`
+                // reactive code
+                export class TextareaReactiveSandboxComponent {
+                  form!: FormGroup;
+                  constructor(private fb: FormBuilder) {
+                    this.form = this.fb.group({
+                      item: '',
+                    });
+                  }
+                }
+              `}
+                />
+              )}
+
+              {version === "old" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags="angular"
+                  allowCopy={true}
+                  code={`
                 // non-reactive code
                 export class SomeComponent {
                   value: string = "";
@@ -295,84 +409,107 @@ export default function TextAreaPage() {
                   }
                 }
               `}
-              />
+                />
+              )}
+
+              {version === "new" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags="angular"
+                  allowCopy={true}
+                  code={`
+                // non-reactive code
+                export class SomeComponent {
+                  value = '';
+                  textareaOnChange(event: GoabTextAreaOnChangeDetail) {
+                    // handle change
+                    this.value = event.value;
+                  }
+                }
+              `}
+                />
+              )}
+
+              {version === "new" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags={["angular", "template-driven"]}
+                  allowCopy={true}
+                  code={`
+                // non-reactive code
+                export class SomeComponent {
+                   item = "";
+                   textareaOnChange(event: GoabTextAreaOnChangeDetail) {
+                    // handle change
+                    this.item = event.value;
+                   }
+                }
+              `}
+                />
+              )}
 
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
+              {/*React code*/}
+              {version === "old" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags="react"
+                  allowCopy={true}
+                  code={`
                 const [value, setValue] = useState<string>("");
               
                 function onChange(name: string, value: string) {
                   setValue(value);
                 }
             `}
-              />
+                />
+              )}
 
-              <GoAFormItem {...formItemProps}>
-                <GoATextArea
-                  {...componentProps}
-                  width="60ch"
-                  name="item"
-                  value=""
-                  onChange={noop}
+              {version === "new" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags="react"
+                  allowCopy={true}
+                  code={`
+                const [value, setValue] = useState<string>("");
+              
+                function textareaOnChange(event: GoabTextAreaOnChangeDetail) {
+                  setValue(event.value);
+                }
+            `}
                 />
-              </GoAFormItem>
+              )}
+              <form>
+                <GoabFormItem {...formItemProps}>
+                  <GoabTextarea
+                    {...componentProps}
+                    width="60ch"
+                    name="item"
+                    value=""
+                    onChange={noop}
+                  />
+                </GoabFormItem>
+              </form>
             </Sandbox>
 
-            <ComponentProperties properties={componentProperties} />
+            <ComponentProperties
+              properties={componentProperties}
+              oldProperties={oldComponentProperties}
+            />
 
             {/*Examples*/}
-            <h2 id="component-examples" className="hidden" aria-hidden="true">
-              Examples
-            </h2>
-
-            <h3 id="component-example-1">Ask a question and give more information</h3>
-            <Sandbox flags={["reactive"]} fullWidth>
-              <GoAContainer>
-                <GoAButton type="tertiary" leadingIcon="arrow-back" mb="m">
-                  Back
-                </GoAButton>
-
-                <h2>Description</h2>
-                <p>
-                  List all components and include a description, including the number of hours for
-                  each.
-                </p>
-
-                <GoAFormItem
-                  label="Program outline"
-                  helpText="Remember to maintain clarity, accuracy, and coherence throughout the program outline.">
-                  <GoATextArea name="program" value="Input text" onChange={noop} />
-                </GoAFormItem>
-
-                <GoADetails heading="How to write a good outline">
-                  <p>
-                    Break down your outline into easily digestible sections. This can help to ensure
-                    that the document is well-organized and easy to navigate.
-                  </p>
-                </GoADetails>
-
-                <GoAButtonGroup alignment="start" mt="l">
-                  <GoAButton type="primary" onClick={noop}>
-                    Continue
-                  </GoAButton>
-                </GoAButtonGroup>
-              </GoAContainer>
-            </Sandbox>
-          </GoATab>
+            <TextAreaExamples />
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }>
             <p>Coming Soon</p>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/TextField.tsx b/src/routes/components/TextField.tsx
index 7a19691a7..bf9d97b10 100644
--- a/src/routes/components/TextField.tsx
+++ b/src/routes/components/TextField.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import {
   ComponentProperties,
@@ -6,18 +6,26 @@ import {
 } from "@components/component-properties/ComponentProperties.tsx";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import {
-  GoABadge,
-  GoAFormItem,
-  GoAInput,
-  GoAInputProps,
-  GoATab,
-  GoATabs
+  GoabBadge,
+  GoabFormItem,
+  GoabInput,
+  GoabInputProps,
+  GoabTab,
+  GoabTabs
 } from "@abgov/react-components";
 import ICONS from "./icons.json";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 import { useSandboxFormItem } from "@hooks/useSandboxFormItem.tsx";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import TextFieldExamples from "@examples/text-field/TextFieldExamples";
+import { GoabInputOnChangeDetail } from "@abgov/ui-components-common";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import {
+  LegacyMarginProperty,
+  LegacyTestIdProperties, MarginProperty,
+  TestIdProperty
+} from "@components/component-properties/common-properties.ts";
+import { omit } from "lodash";
 
 // == Page props ==
 const componentName = "Input";
@@ -27,20 +35,23 @@ const relatedComponents = [
   { link: "/components/form-item", name: "Form item" },
   { link: "/components/text-area", name: "Text area" }
 ];
-type ComponentPropsType = GoAInputProps;
+
+type ComponentPropsType = Omit<GoabInputProps, 'onChange'> & {
+  onChange?: (event: GoabInputOnChangeDetail) => void;
+};
 type CastingType = {
   name: string;
   value: string;
   [key: string]: unknown;
-  onChange: (name: string, value: string) => void;
+  onChange: (event: GoabInputOnChangeDetail) => void;
 };
 
 export default function TextFieldPage() {
+  const {version} = useContext(LanguageVersionContext);
   const [componentProps, setComponentProps] = useState<ComponentPropsType>({
     name: "item",
     value: "",
     width: "20ch",
-    onChange: () => { },
   });
   const [componentBindings, setComponentBindings] = useState<ComponentBinding[]>([
     {
@@ -123,7 +134,7 @@ export default function TextFieldPage() {
     }
   ]);
   const { formItemBindings, formItemProps, onFormItemChange } = useSandboxFormItem({ label: "Basic" });
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "type",
       type: "text | number | password | email | search | tel | date | datetime-local | time | url | week",
@@ -394,23 +405,174 @@ export default function TextFieldPage() {
       type: "(name: string, value: string | Date | number) => void",
       description: "Function invoked when a key is pressed",
     },
+    ...LegacyTestIdProperties,
+    LegacyMarginProperty,
+  ];
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "type",
+      type: "GoabInputType (text | number | password | email | search | tel | date | datetime-local | time | url | week)",
+      defaultValue: "text",
+      description: "Sets the type of the input field.",
+    },
+    {
+      name: "name",
+      type: "string",
+      required: true,
+      description: "Name of input value that is received in the onChange event.",
+    },
+    {
+      name: "value",
+      type: "string||null",
+      defaultValue: "''",
+      description: "Bound to value.",
+    },
     {
-      name: "testId",
+      name: "placeholder",
       type: "string",
-      lang: "react",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+      description: "Text displayed within the input when no value is set.",
+    },
+    {
+      name: "leadingIcon",
+      type: "GoabIconType",
+      description: "Icon shown to the left of the text.",
+    },
+    {
+      name: "trailingIcon",
+      type: "GoabIconType",
+      description: "Icon shown to the right of the text.",
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      defaultValue: "false",
+      description:
+        "Disables this input. The input will not receive focus or events. Use [attr.disabled] with [formControl].",
+    },
+    {
+      name: "focused",
+      type: "boolean",
+      defaultValue: "false",
+      description: "Sets the cursor focus to the input.",
+    },
+    {
+      name: "readOnly",
+      type: "boolean",
+      description: "Makes the input readonly.",
+      defaultValue: "false",
+    },
+    {
+      name: "error",
+      type: "boolean",
+      defaultValue: "false",
+      description: "Sets the input to an error state.",
+    },
+    {
+      name: "width",
+      type: "string",
+      defaultValue: "30ch",
+      description: "Sets the width of the text input area.",
+    },
+    {
+      name: "min",
+      type: "string",
+      description:
+        "A string value that supports any number, or an ISO 8601 format if using the date or datetime type.",
     },
     {
-      name: "testid",
+      name: "max",
       type: "string",
+      description:
+        "A string value that supports any number, or an ISO 8601 format if using the date or datetime type.",
+    },
+    {
+      name: "step",
+      type: "number",
+      description: "How much a number or date should changed by.",
+    },
+    {
+      name: "ariaLabel",
+      type: "string",
+      description:
+        "Defines how the input will be translated for the screen reader. If not specified it will fall back to the name. If both arialabel and arialabelledby are specified, arialabelledby will be used.",
+    },
+    {
+      name: "ariaLabelledBy",
+      type: "string",
+      description:
+        "The aria-labelledby attribute identifies the element (or elements) that labels the dropdown it is applied to. Normally it is the id of the label.",
+    },
+    {
+      name: "maxlength",
+      type: "number",
+      description:
+        "Defines the maximum number of characters (as UTF-16 code units) the user can enter into the input.",
+    },
+    {
+      name: "maxLength",
+      type: "number",
+      description:
+        "Defines the maximum number of characters (as UTF-16 code units) the user can enter into the input.",
+    },
+    {
+      name: "autoCapitalize",
+      type: "GoabInputAutoCapitalize (on | off | none | sentences | words | characters)",
+      description:
+        "Controls whether and how text input is automatically capitalized as it is entered/edited by the user.",
+      defaultValue: "off",
+    },
+    {
+      name: "onTrailingIconClick",
+      type: "() => void",
+      description: "onClick function invoked when trailing icon is clicked.",
+    },
+    {
+      name: "leadingContent",
       lang: "angular",
-      description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
+      type: "slot",
+      description: "Sets the content to the left of the input field.",
+    },
+    {
+      name: "leadingContent",
+      lang: "react",
+      type: "ReactNode",
+      description: "Sets the content to the left of the input field.",
+    },
+    {
+      name: "trailingContent",
+      lang: "angular",
+      type: "slot",
+      description: "Sets the content to the right of the input field.",
+    },
+    {
+      name: "trailingContent",
+      lang: "react",
+      type: "ReactNode",
+      description: "Sets the content to the right of the input field.",
+    },
+    {
+      name: "onChange",
+      type: "(event: GoabInputOnChangeDetail) => void",
+      required: true,
+      description: "Callback function when input value is changed.",
+    },
+    {
+      name: "onFocus",
+      type: "(event: GoabInputOnFocusDetail) => void",
+      description: "Function invoked when an element receives focus.",
+    },
+    {
+      name: "onBlur",
+      type: "(event: GoabInputOnBlurDetail) => void",
+      description: "Function invoked when an element loses focus.",
     },
     {
-      name: "mt,mr,mb,ml",
-      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
-      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+      name: "onKeyPress",
+      type: "(event: GoabInputOnKeyPressDetail) => void",
+      description: "Function invoked when a key is pressed",
     },
+    TestIdProperty,
+    MarginProperty,
   ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
@@ -420,6 +582,7 @@ export default function TextFieldPage() {
 
   // For sandbox demo function
   const noop = () => { };
+
   return (
     <>
       <ComponentHeader
@@ -431,8 +594,8 @@ export default function TextFieldPage() {
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
 
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             {/*Input sandbox*/}
             <h2 id="component" style={{display: "none"}}>Component</h2>
             <Sandbox
@@ -440,8 +603,9 @@ export default function TextFieldPage() {
               formItemProperties={formItemBindings}
               onChange={onSandboxChange}
               onChangeFormItemBindings={onFormItemChange}
-              flags={["reactive"]}>
-              <CodeSnippet
+              allow={["form"]}
+              flags={version === "old" ? ["reactive"] : ["event", "reactive", "template-driven"]}>
+              {version === "old" && <CodeSnippet
                 lang="typescript"
                 tags="angular"
                 allowCopy={true}
@@ -455,8 +619,24 @@ export default function TextFieldPage() {
                   }
                 }
               `}
-              />
-              <CodeSnippet
+              />}
+              {version === "new" && <CodeSnippet
+                lang="typescript"
+                tags="angular"
+                allowCopy={true}
+                code={`
+                // non-reactive code
+                export class SomeComponent {
+                  value = "";
+                  inputOnChange(event: GoabInputOnChangeDetail) {
+                    // handle change
+                    console.log(event.value);
+                  }
+                }
+              `}
+              />}
+
+              {version === "old" && <CodeSnippet
                 lang="typescript"
                 tags={["angular", "reactive"]}
                 allowCopy={true}
@@ -466,8 +646,41 @@ export default function TextFieldPage() {
                   itemFormCtrl = new FormControl("");
                 }
               `}
-              />
-              <CodeSnippet
+              />}
+
+              {version === "new" && <CodeSnippet
+                lang="typescript"
+                tags={["angular", "reactive"]}
+                allowCopy={true}
+                code={`
+                // reactive code
+                export class SomeComponent {
+                  form!: FormGroup;
+                  constructor(private fb: FormBuilder) {
+                    this.form = this.fb.group({
+                      item: [""]
+                    });
+                  }
+                }
+              `}
+              />}
+
+              {version === "new" && <CodeSnippet
+                lang="typescript"
+                tags={["angular", "template-driven"]}
+                allowCopy={true}
+                code={`
+                import {FormsModule} from "@angular/forms";
+                export class SomeComponent {
+                  item = "";
+                  inputOnChange(event: GoabInputOnChangeDetail) {
+                    this.item = event.value;
+                  }
+                }
+              `}
+              />}
+
+              {version === "old" && <CodeSnippet
                 lang="typescript"
                 tags="react"
                 allowCopy={true}
@@ -478,29 +691,47 @@ export default function TextFieldPage() {
                   setValue(value);
                 }
               `}
-              />
-
-              <GoAFormItem {...formItemProps}>
-                <GoAInput {...componentProps} name="item" value="" onChange={noop}/>
-              </GoAFormItem>
+              />}
+              {version === "new" && <CodeSnippet
+                lang="typescript"
+                tags="react"
+                allowCopy={true}
+                code={`
+                const [value, setValue] = useState<string>("");
+              
+                function inputOnChange(event: GoabInputOnChangeDetail) {
+                  setValue(event.value);
+                }
+              `}
+              />}
+              <form>
+                <GoabFormItem {...formItemProps}>
+                  <GoabInput 
+                    {...(omit(componentProps, ['onFocus', 'onBlur', 'onKeyPress']))} 
+                    name="item" 
+                    value="" 
+                    onChange={noop}
+                  />
+                </GoabFormItem>
+              </form>
             </Sandbox>
 
             {/*Input component properties table*/}
-            <ComponentProperties properties={componentProperties} />
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
             {/*Examples*/}
             <TextFieldExamples/>
-          </GoATab>
+          </GoabTab>
 
-          <GoATab
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }>
             <p>Coming Soon</p>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/components/Tooltip.tsx b/src/routes/components/Tooltip.tsx
index 81800cf94..16936e81d 100644
--- a/src/routes/components/Tooltip.tsx
+++ b/src/routes/components/Tooltip.tsx
@@ -1,6 +1,5 @@
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
-import { getCssVarValue } from "../../utils/styling";
 import { useState } from "react";
 import {
   ComponentProperties,
@@ -8,19 +7,20 @@ import {
 } from "@components/component-properties/ComponentProperties.tsx";
 
 import {
-  GoAIcon,
-  GoABadge,
-  GoABlock,
-  GoAButtonGroup,
-  GoAContainer,
-  GoAIconButton,
-  GoATab,
-  GoATabs,
-  GoATooltip,
-  GoATooltipProps,
+  GoabIcon,
+  GoabBadge,
+  GoabTab,
+  GoabTabs,
+  GoabTooltip,
+  GoabTooltipProps,
 } from "@abgov/react-components";
-import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import {
+  LegacyMarginProperty,
+  MarginProperty,
+  TestIdProperty
+} from "@components/component-properties/common-properties.ts";
+import { TooltipExamples } from "@examples/tooltip/TooltipExamples.tsx";
 
 // == Page props ==
 
@@ -32,13 +32,14 @@ const relatedComponents = [
   { link: "/components/icon-button", name: "Icon button" },
   { link: "/components/popover", name: "Popover" }
 ];
-type ComponentPropsType = GoATooltipProps;
+type ComponentPropsType = GoabTooltipProps;
 type CastingType = {
   content: string;
   [key: string]: unknown;
 };
 
-export default function TEMPLATE_Page() {
+export default function TooltipPage() {
+
   const [componentProps, setComponentProps] = useState<ComponentPropsType>({
     content: "Tooltip",
   });
@@ -66,7 +67,7 @@ export default function TEMPLATE_Page() {
     },
   ]);
 
-  const componentProperties: ComponentProperty[] = [
+  const oldComponentProperties: ComponentProperty[] = [
     {
       name: "content",
       type: "string",
@@ -84,11 +85,28 @@ export default function TEMPLATE_Page() {
       description: "Horizontal alignment to the child element",
       defaultValue: "center",
     },
+    LegacyMarginProperty,
+  ];
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "content",
+      type: "string",
+      description: "The content of the tooltip",
+    },
+    {
+      name: "position",
+      type: "GoabTooltipPosition (top | bottom | left | right)",
+      description: "Position wrt the child element",
+      defaultValue: "top",
+    },
     {
-      name: "mt,mr,mb,ml",
-      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
-      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+      name: "hAlign",
+      type: "GoabTooltipHorizontalAlignment (left | center | right)",
+      description: "Horizontal alignment to the child element",
+      defaultValue: "center",
     },
+    TestIdProperty,
+    MarginProperty
   ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
@@ -96,15 +114,7 @@ export default function TEMPLATE_Page() {
     setComponentProps(props as CastingType);
   }
 
-  const [isCopied, setIsCopied] = useState(false);
 
-  function copyCode() {
-    const codeToCopy = "$goa-color-interactive-default";
-    navigator.clipboard.writeText(codeToCopy).then(() => {
-      setIsCopied(true);
-      setTimeout(() => setIsCopied(false), 1000);
-    });
-  }
 
   return (
     <>
@@ -117,198 +127,34 @@ export default function TEMPLATE_Page() {
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
 
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <h2 id="component" style={{display: "none"}}>Component</h2>
             <Sandbox properties={componentBindings} onChange={onSandboxChange}>
-              <GoATooltip {...componentProps}>
-                <GoAIcon type="information-circle" />
-              </GoATooltip>
-            </Sandbox>
-            <ComponentProperties properties={componentProperties} />
-            
-            <h2 id="component-examples" className="hidden" aria-hidden="true">
-              Examples
-            </h2>
-        
-            <h3 id="component-example-date-when-shortened">Use a tooltip to show a full date when shortened</h3>
-            <Sandbox skipRender fullWidth>
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                  <goa-container type="non-interactive" accent="thick">
-                    <div slot="title">
-                      Joan Smith
-                      <goa-tooltip content="Nov 23, 2023 at 10:35 am">
-                        <span style="color:var(--goa-color-text-secondary); font: var(--goa-typography-body-xs);">4 hours ago</span>
-                      </goa-tooltip>
-                    </div>
-                    <p>Hover on the time it was added to see the full date and time.</p>
-                  </goa-container>     
-                `}
-              />
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                  <GoAContainer
-                    type="non-interactive"
-                    accent="thick"
-                    heading={
-                      <span>
-                        Joan Smith 
-                        <GoATooltip content="Nov 23, 2023 at 10:35 am">
-                          <span style={{
-                            color:"var(--goa-color-text-secondary)",
-                            font: "var(--goa-typography-body-xs)" }}>
-                            4 hours ago
-                          </span>
-                        </GoATooltip>
-                      </span>
-                    }>
-                    <p>Hover on the time it was added to see the full date and time.</p>
-                  </GoAContainer>
-                `}
-              />
-              <GoAContainer
-                type="non-interactive"
-                accent="thick"
-                heading={
-                <span>
-                  Joan Smith
-                  <GoATooltip content="Nov 23, 2023 at 10:35 am">
-                    <span style={{ color:"var(--goa-color-text-secondary)", font: "var(--goa-typography-body-xs)" }} >4 hours ago</span>
-                  </GoATooltip>
-                </span>}>
-                <p>Hover on the time it was added to see the full date and time.</p>
-              </GoAContainer>
-            </Sandbox>
-            
-            <h3 id="component-example-label-icon-only">Show a label on an icon only button</h3>
-            <Sandbox fullWidth>
-              <GoAButtonGroup alignment="center">
-                  <GoATooltip content="Edit">
-                    <GoAIconButton icon="pencil" ariaLabel="Pencil icon"/>
-                  </GoATooltip>
-                  <GoATooltip content="Alerts">
-                    <GoAIconButton icon="notifications" ariaLabel="Alert icon"/>
-                  </GoATooltip>
-                  <GoATooltip content="Settings">
-                    <GoAIconButton icon="settings" ariaLabel="Settings icon"/>
-                  </GoATooltip>
-              </GoAButtonGroup>
+              <GoabTooltip {...componentProps}>
+                <GoabIcon type="information-circle" />
+              </GoabTooltip>
             </Sandbox>
+            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
 
-            <h3 id="component-example-copy-clipboard">Click to copy something to your clipboard</h3>
-            <Sandbox allow={['div', 'pre', 'a']} skipRender>
-              <CodeSnippet
-                lang="css"
-                allowCopy={true}
-                code={`
-                  .token-block {
-                    background-color: var(--goa-color-interactive-default);
-                    height: 22px;
-                    width: 24px;
-                    border-radius: var(--goa-border-radius-m);
-                  }
-                `}
-              />
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                  isCopied = false;
+            <TooltipExamples/>
 
-                  copyCode() {
-                    const codeToCopy = "$goa-color-interactive-default";
-                    navigator.clipboard.writeText(codeToCopy).then(() => {
-                      this.isCopied = true;
-                      setTimeout(() => this.isCopied = false, 1000);
-                    });
-                  }
-                `}
-              />
-              <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
-                  <goa-block alignment="center">
-                    <div class="token-block"></div>
-                    <a (_click)="copyCode()">
-                      <u>$goa-color-interactive-default</u>
-                    </a>
-                    <goa-tooltip [content]="isCopied ? 'Copied' : 'Copy?'" position="top">
-                      <goa-icon-button icon="copy" (_click)="copyCode()" mt="2xs" />
-                    </goa-tooltip>
-                  </goa-block>
-                `}
-              />
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                  const [isCopied, setIsCopied] = useState(false);
 
-                  function copyCode() {
-                    const codeToCopy = "$goa-color-interactive-default";
-                    navigator.clipboard.writeText(codeToCopy).then(() => {
-                      setIsCopied(true);
-                      setTimeout(() => setIsCopied(false), 1000);
-                    });
-                  }
-                `}
-              />
-              <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
-                  <GoABlock alignment="center">
-                    <div className="token-block"/>
-                    <a onClick={copyCode}>
-                      <u>$goa-color-interactive-default</u>
-                    </a>
-                    <GoATooltip content={isCopied ? "Copied" : "Copy?"} position="top">
-                      <GoAIconButton icon="copy" onClick={copyCode} mt="2xs" />
-                    </GoATooltip>
-                  </GoABlock>
-                `}
-              />
-              <GoABlock alignment="center">
-                <div
-                  className="token-block"
-                  style={{
-                    backgroundColor: getCssVarValue(`--goa-color-interactive-default`),
-                    height: '22px',
-                    width: '24px',
-                    borderRadius: getCssVarValue('--goa-border-radius-m')
-                  }}
-                />
-                <a onClick={copyCode}>
-                  <u>$goa-color-interactive-default</u>
-                </a>
-                <GoATooltip content={isCopied ? `Copied` : `Copy?`} position="top">
-                  <GoAIconButton icon="copy" onClick={copyCode} mt="2xs" />
-                </GoATooltip>
-              </GoABlock>
-            </Sandbox>
-          </GoATab>
 
-          <GoATab
+
+
+
+          </GoabTab>
+
+          <GoabTab
             heading={
               <>
                 Design guidelines
-                <GoABadge type="information" content="In progress" />
+                <GoabBadge type="information" content="In progress" />
               </>
             }
-          ></GoATab>
-        </GoATabs>
+          ></GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/content/Capitalization.tsx b/src/routes/content/Capitalization.tsx
index 0df773265..5628e943c 100644
--- a/src/routes/content/Capitalization.tsx
+++ b/src/routes/content/Capitalization.tsx
@@ -1,4 +1,4 @@
-import { GoABlock, GoADivider, GoAFormItem, GoAGrid, GoASideMenu } from "@abgov/react-components";
+import { GoabBlock, GoabDivider, GoabFormItem, GoabGrid, GoabSideMenu } from "@abgov/react-components";
 import { DoDont } from "@components/do-dont/DoDont";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 
@@ -10,7 +10,7 @@ export default function CapitalizationPage() {
       <h1>Capitalization</h1>
       <h3>Use sentence case for all headings, labels, and content.</h3>
 
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
 
       <h2 id="sentence-case">Sentence case</h2>
       <p>
@@ -24,7 +24,7 @@ export default function CapitalizationPage() {
       </p>
 
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl">
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl">
           <DoDont
             type="do"
             description="Always capitalize the first word of a heading or new sentence.">
@@ -50,10 +50,10 @@ export default function CapitalizationPage() {
             Before the alberta digital filing services, the only way to file court documents was
             in-person or through email.
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
 
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
 
       <h2 id="title-case">Title case</h2>
       <p>
@@ -69,28 +69,28 @@ export default function CapitalizationPage() {
         it.
       </p>
 
-      <GoAGrid minChildWidth={minGridWidth} gap="2xl" mt="xl">
+      <GoabGrid minChildWidth={minGridWidth} gap="2xl" mt="xl">
         <DoDont
           type="do"
           description="Use title case when words are joined by a slash, capitalize the word after the slash if the word before the slash is capitalized.">
           <div style={{ textAlign: "center", height: "176px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
-            <GoAFormItem label="Country/Region" mb="2xl" />
-            <GoAFormItem label="On/Off" />
+            <GoabFormItem label="Country/Region" mb="2xl" />
+            <GoabFormItem label="On/Off" />
           </div>
         </DoDont>
         <DoDont type="do" description="Capitalize the first word after a colon or ampersand.">
           <div style={{ margin: "0 auto", maxWidth: "250px" }}>
-            <GoASideMenu>
+            <GoabSideMenu>
               <a href="">Personal: Employment</a>
               <a href="">Personal: Education</a>
               <a href="">Other cases</a>
               <a href="">Related areas</a>
-            </GoASideMenu>
+            </GoabSideMenu>
           </div>
         </DoDont>
-      </GoAGrid>
+      </GoabGrid>
 
-      <GoAGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl" mb="3xl">
+      <GoabGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl" mb="3xl">
         <DoDont
           type="dont"
           description="Don’t use internal capitalization (such as AutoScale or e-Book) unless it’s part of a proper noun.">
@@ -98,9 +98,9 @@ export default function CapitalizationPage() {
             <h3>Submitting adjournment Pre-Court</h3>
           </div>
         </DoDont>
-      </GoAGrid>
+      </GoabGrid>
 
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
 
       <h2 id="capital-case">Capital case</h2>
       <p>
@@ -117,15 +117,15 @@ export default function CapitalizationPage() {
         Display the following information in sentence case when possible for better readability.
       </p>
 
-      <GoABlock mt="xl" mb="xl">
+      <GoabBlock mt="xl" mb="xl">
         <DoDont type="generic">
           <div style={{ textAlign: "center" }}>
             <img src="/images/capitalization/capital-case-example.png" width="80%"></img>
           </div>
         </DoDont>
-      </GoABlock>
+      </GoabBlock>
 
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
 
       <h2 id="references">References</h2>
       <p>
diff --git a/src/routes/content/ContentLayout.tsx b/src/routes/content/ContentLayout.tsx
index 101980582..b82e47c65 100644
--- a/src/routes/content/ContentLayout.tsx
+++ b/src/routes/content/ContentLayout.tsx
@@ -1,4 +1,4 @@
-import { GoASideMenu, GoASpacer } from "@abgov/react-components";
+import { GoabSideMenu, GoabSideMenuHeading } from "@abgov/react-components";
 import { Link, Outlet } from "react-router-dom";
 import "./content.css";
 import { SupportInfo } from "@components/support-info/SupportInfo";
@@ -7,13 +7,13 @@ export default function ContentLayout() {
   return (
     <div className="content">
       <section className="side-menu">
-        <GoASideMenu>
-          <GoASpacer vSpacing="m"></GoASpacer>
+        <GoabSideMenu>
+          <GoabSideMenuHeading>Content</GoabSideMenuHeading>
           <Link to="capitalization">Capitalization</Link>
           <Link to="date-format">Date format</Link>
           <Link to="error-messages">Error messages</Link>
           <Link to="helper-text">Helper text</Link>
-        </GoASideMenu>
+        </GoabSideMenu>
       </section>
 
       <main className="main">
diff --git a/src/routes/content/DateFormat.tsx b/src/routes/content/DateFormat.tsx
index a59bb4bba..deb7bd510 100644
--- a/src/routes/content/DateFormat.tsx
+++ b/src/routes/content/DateFormat.tsx
@@ -1,4 +1,4 @@
-import { GoACallout, GoAContainer, GoADivider, GoAGrid } from "@abgov/react-components";
+import { GoabCallout, GoabContainer, GoabDivider, GoabGrid } from "@abgov/react-components";
 import { DoDont } from "@components/do-dont/DoDont";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 
@@ -13,19 +13,19 @@ export default function DateFormatPage() {
         and structure of the date data within the date format in different scenarios.
       </h3>
 
-      <GoAContainer type="non-interactive" mb="xl">
+      <GoabContainer type="non-interactive" mb="2xl">
         <div
           className="example"
           style={{
-           
-            
+
+
             textAlign: "center",
           }}>
           March 14, 2021
         </div>
-      </GoAContainer>
+      </GoabContainer>
 
-      <GoADivider mb="2xl" mt="l"></GoADivider>
+      <GoabDivider mb="2xl" mt="l"></GoabDivider>
 
       <h2 id="conversational-long-form">Conversational and long-form</h2>
       <p>
@@ -34,7 +34,7 @@ export default function DateFormatPage() {
         “readable” tone.
       </p>
 
-      <GoAContainer type="non-interactive" mb="l">
+      <GoabContainer type="non-interactive" mb="l">
         <div
           className="example"
           style={{
@@ -42,7 +42,7 @@ export default function DateFormatPage() {
           }}>
           <strong>Month date, Year</strong> (e.g., March 14, 2021)
         </div>
-      </GoAContainer>
+      </GoabContainer>
 
       <p>
         This presents the date in a conventional “speaking” way and aligns with the Canadian Style
@@ -50,7 +50,7 @@ export default function DateFormatPage() {
       </p>
 
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl">
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl">
           <DoDont type="do" description="Use the format: Month, cardinal date, year.">
             <div className="example">March 14, 2021</div>
             <div className="example"></div>
@@ -59,9 +59,9 @@ export default function DateFormatPage() {
             <div className="example">March 14</div>
             <div className="example">March 14th</div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
 
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
           <DoDont type="dont" description="Don’t use ordinal numbers with written out month.">
             <div className="example">March 14th, 2021</div>
           </DoDont>
@@ -73,10 +73,10 @@ export default function DateFormatPage() {
             description="Don’t use two digit abbreviations for the year, as this adds confusion and ambiguity.">
             <div className="example">March 12, 21</div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
 
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
 
       <h2 id="short-hand">Short-hand</h2>
       <p>
@@ -112,15 +112,15 @@ export default function DateFormatPage() {
       </p>
 
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth}>
+        <GoabGrid minChildWidth={minGridWidth}>
           <DoDont
             type="do"
             description="Use the same format as the long-form: month, cardinal date, year.">
             <div className="example">Mar 14, 2021</div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
 
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
           <DoDont
             type="dont"
             description="Don’t use two digit abbreviations for the year, as this adds confusion and ambiguity.">
@@ -142,10 +142,10 @@ export default function DateFormatPage() {
             <div className="example">03/07/21</div>
             <div className="example">07/03/2021</div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
 
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
 
       <h2 id="day-of-the-week">Day of the week</h2>
       <p>
@@ -184,14 +184,14 @@ export default function DateFormatPage() {
       </p>
 
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth}>
+        <GoabGrid minChildWidth={minGridWidth}>
           <DoDont type="do" description="Use the same format: month, cardinal date, year.">
             <div className="example">Monday, March 14, 2021</div>
             <div className="example">Mon, Mar 14, 2021</div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
 
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
           <DoDont type="dont" description="Don’t mix long-form and short-form.">
             <div className="example">Monday, Mar 12, 2021</div>
             <div className="example">Mon, March 12, 2021</div>
@@ -204,18 +204,18 @@ export default function DateFormatPage() {
           <DoDont type="dont" description="Don’t forget to delineate day and month with a comma.">
             <div className="example">Monday March 12, 2021</div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
         <div style={{ maxWidth: "700px" }}>
-          <GoACallout mt="2xl" heading="Best Practices">
+          <GoabCallout mt="2xl" heading="Best Practices">
             <p>
               Avoid using day of the week in tabular, form, summary, or other concise displays, as
               it would crowd the already limited space with unnecessary information.
             </p>
-          </GoACallout>
+          </GoabCallout>
         </div>
       </div>
 
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
 
       <h2 id="time">Time</h2>
       <p>
@@ -238,29 +238,29 @@ export default function DateFormatPage() {
       </p>
       <p>(e.g., Friday, March 14, 2021 at 2:26 pm)</p>
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth}>
+        <GoabGrid minChildWidth={minGridWidth}>
           <DoDont
             type="do"
             description="Use the same format: day, month cardinal date, year at XX:XX am/pm">
             <div className="example">Monday, March 14, 2021 at 3:30 pm</div>
           </DoDont>
-        </GoAGrid>
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
+        </GoabGrid>
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
           <DoDont type="dont" description="Don't include a leading zero for the time.">
             <div className="example">08:15 am</div>
           </DoDont>
           <DoDont type="dont" description="Don’t use periods in the “am” or “pm”.">
             <div className="example">4:43 p.m.</div>
           </DoDont>
-        </GoAGrid>
-        <GoAGrid minChildWidth={minGridWidth} mt="2xl">
+        </GoabGrid>
+        <GoabGrid minChildWidth={minGridWidth} mt="2xl">
           <DoDont type="dont" description="Don’t write the time before the date.">
             <div className="example">7:55 am on Saturday, May 15, 2021</div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
 
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
 
       <h2 id="time-zones">Time zones</h2>
       <p>
@@ -316,7 +316,7 @@ export default function DateFormatPage() {
       </p>
 
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth}>
+        <GoabGrid minChildWidth={minGridWidth}>
           <DoDont
             type="generic"
             description="12-month timeline highlighting those that pertain to daylight time.">
@@ -335,9 +335,9 @@ export default function DateFormatPage() {
               <div className="month">Dec</div>
             </div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
 
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
           <DoDont
             type="do"
             description="Use standard time between the months of November and March.">
@@ -348,22 +348,22 @@ export default function DateFormatPage() {
             description="Use daylight time between the months of April and October.">
             <img src="/images/date-dst.png" width="80%"></img>
           </DoDont>
-        </GoAGrid>
-        <GoAGrid minChildWidth={minGridWidth} mt="2xl">
+        </GoabGrid>
+        <GoabGrid minChildWidth={minGridWidth} mt="2xl">
           <DoDont
             type="dont"
             description="Don’t wrap the three-letter abbreviation in parentheses.">
             <div className="example">4:43pm (MST)</div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
         <div style={{ maxWidth: "700px" }}>
-          <GoACallout type="information" heading="Daylight saving time" size="large" mt="2xl">
+          <GoabCallout type="information" heading="Daylight saving time" size="large" mt="2xl">
             From April to October Alberta participates in daylight saving time.
-          </GoACallout>
+          </GoabCallout>
         </div>
       </div>
 
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
 
       <h2 id="accessibility">Accessibility and Screen readers</h2>
       <p>
@@ -375,7 +375,7 @@ export default function DateFormatPage() {
         </a>
       </p>
 
-      <GoAContainer>
+      <GoabContainer>
         Consider the following html <br />
         <span style={{ color: "var(--goa-color-text-secondary)" }}>
           &lt;time id="timestamp" datetime="2001-05-15T19:30"&gt;May 15, 2001 - 7:30pm&lt;/time&gt;
@@ -393,13 +393,13 @@ export default function DateFormatPage() {
         <strong>
           <i>“Tuesday, May fifteenth, two-thousand one at seven thirty pm”</i>
         </strong>
-      </GoAContainer>
+      </GoabContainer>
 
       <div style={{ maxWidth: "700px" }}>
-        <GoACallout type="information" heading="ISO 8601 format" size="large" mt="xl">
+        <GoabCallout type="information" heading="ISO 8601 format" size="large" mt="xl">
           The date time variables entered into the module for producing “readable” and
           “conversational” need to be rendered in the ISO 8601 format.
-        </GoACallout>
+        </GoabCallout>
       </div>
     </ComponentContent>
   );
diff --git a/src/routes/content/ErrorMessages.tsx b/src/routes/content/ErrorMessages.tsx
index 536a5d122..4d3ddd312 100644
--- a/src/routes/content/ErrorMessages.tsx
+++ b/src/routes/content/ErrorMessages.tsx
@@ -1,12 +1,12 @@
 import { DoDont } from "@components/do-dont/DoDont";
 import {
-  GoACheckbox,
-  GoADivider,
-  GoAFormItem,
-  GoAGrid,
-  GoAInput,
-  GoARadioGroup,
-  GoARadioItem,
+  GoabCheckbox,
+  GoabDivider,
+  GoabFormItem,
+  GoabGrid,
+  GoabInput,
+  GoabRadioGroup,
+  GoabRadioItem,
 } from "@abgov/react-components";
 import { Link } from "react-router-dom";
 import { ComponentContent } from "@components/component-content/ComponentContent";
@@ -20,30 +20,30 @@ export default function ErrorMessagesPage() {
       <h1>Error messages</h1>
       <h3>Error messages appear when the user’s proposed action fails.</h3>
 
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
 
-      <GoAGrid minChildWidth={minGridWidth} gap="3xl">
-        <GoAFormItem
+      <GoabGrid minChildWidth={minGridWidth} gap="3xl">
+        <GoabFormItem
           label="First name"
           helpText="Enter your legal name."
           error="Error message"
           key=".0">
-          <GoAInput onChange={noop} name="firstName" value="" error></GoAInput>
-        </GoAFormItem>
+          <GoabInput onChange={noop} name="firstName" value="" error></GoabInput>
+        </GoabFormItem>
 
-        <GoAFormItem
+        <GoabFormItem
           label="How would you prefer to be contacted"
           labelSize="regular"
           error="Error message">
-          <GoARadioGroup name="item" value="1" onChange={noop} error>
-            <GoARadioItem value="1" label="Email"></GoARadioItem>
-            <GoARadioItem value="2" label="Phone"></GoARadioItem>
-            <GoARadioItem value="3" label="Text message"></GoARadioItem>
-          </GoARadioGroup>
-        </GoAFormItem>
-
-        <GoAFormItem label="Tuition" error="Tuition cost must be lower than $5,000." key=".0">
-          <GoAInput
+          <GoabRadioGroup name="item" value="1" onChange={noop} error>
+            <GoabRadioItem value="1" label="Email"></GoabRadioItem>
+            <GoabRadioItem value="2" label="Phone"></GoabRadioItem>
+            <GoabRadioItem value="3" label="Text message"></GoabRadioItem>
+          </GoabRadioGroup>
+        </GoabFormItem>
+
+        <GoabFormItem label="Tuition" error="Tuition cost must be lower than $5,000." key=".0">
+          <GoabInput
             name="input"
             value="5420.00"
             prefix="$"
@@ -51,22 +51,22 @@ export default function ErrorMessagesPage() {
             onChange={noop}
             error
           />
-        </GoAFormItem>
+        </GoabFormItem>
 
-        <GoAFormItem
+        <GoabFormItem
           label="Acknowledgment"
           labelSize="regular"
           error="Confirm the information accuracy.">
-          <GoACheckbox
+          <GoabCheckbox
             name="item"
             text="I confirm the contact information is correct."
             onChange={noop}
             error
-            checked={false}></GoACheckbox>
-        </GoAFormItem>
-      </GoAGrid>
+            checked={false}></GoabCheckbox>
+        </GoabFormItem>
+      </GoabGrid>
 
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
 
       <h2 id="anatomy">Anatomy</h2>
       <p>
@@ -81,19 +81,19 @@ export default function ErrorMessagesPage() {
       </p>
 
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl">
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl">
           <DoDont type="do" description="Place error message above helper text.">
             <img src="/images/error-messages/helper-text-do.png" width="80%"></img>
           </DoDont>
           <DoDont type="dont" description="Hide the helper text when there is an error.">
             <img src="/images/error-messages/helper-text-dont.png" width="80%"></img>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
 
       <h3>Border</h3>
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl">
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl">
           <DoDont type="do" description="Display input field border in red when there is an error.">
             <img src="/images/error-messages/border-do.png" width="80%"></img>
           </DoDont>
@@ -102,12 +102,12 @@ export default function ErrorMessagesPage() {
             description="Display the input field border in any other colour when there is an error.">
             <img src="/images/error-messages/border-dont.png" width="80%"></img>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
 
       <h3>Button/upload area</h3>
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl">
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl">
           <DoDont type="do" description="Display an error message below the upload button.">
             <div style={{ textAlign: "center" }}>
               <img src="/images/error-messages/upload-button-do.png" width="100px"></img>
@@ -128,10 +128,10 @@ export default function ErrorMessagesPage() {
             description="Add a red border to the upload area.">
             <img src="/images/error-messages/upload-area-dont.png" width="80%"></img>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
 
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
 
       <h2 id="language-and-tone">Language and tone</h2>
       <h3>Be clear and concise</h3>
@@ -154,7 +154,7 @@ export default function ErrorMessagesPage() {
         understand their frustration.
       </p>
 
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
 
       <h2 id="common-error-message-templates">Common error message templates</h2>
       <p>
@@ -162,20 +162,20 @@ export default function ErrorMessagesPage() {
         fits your context.
       </p>
 
-      <GoADivider mb="xl" mt="xl"></GoADivider>
+      <GoabDivider mb="xl" mt="xl"></GoabDivider>
 
       <h3 id="input-empty">Input is empty</h3>
       <p>This error appears when user leaves a required field blank.</p>
 
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth}>
+        <GoabGrid minChildWidth={minGridWidth}>
           <DoDont type="generic">
             <div style={{ textAlign: "center" }}>
               <img src="/images/error-messages/empty-input.png" width="60%"></img>
             </div>
           </DoDont>
-        </GoAGrid>
-        <GoAGrid minChildWidth={minGridWidth} mt="2xl" gap="2xl">
+        </GoabGrid>
+        <GoabGrid minChildWidth={minGridWidth} mt="2xl" gap="2xl">
           <DoDont
             type="do"
             description="Provide a clear solution for the user to correct the error.">
@@ -196,7 +196,7 @@ export default function ErrorMessagesPage() {
             description="Show general errors to the user without including the context.">
             <div className="example">This field is required.</div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
 
       <h3 id="incorrect-information">Incorrect information format</h3>
@@ -210,14 +210,14 @@ export default function ErrorMessagesPage() {
       </p>
 
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl">
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl">
           <DoDont type="generic">
             <div style={{ textAlign: "center" }}>
               <img src="/images/error-messages/incorrect-information.png" width="60%"></img>
             </div>
           </DoDont>
-        </GoAGrid>
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
+        </GoabGrid>
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
           <DoDont type="do" description="Provide a clear positive solution with an example.">
             <div className="example">
               Enter a valid postal code,
@@ -242,7 +242,7 @@ export default function ErrorMessagesPage() {
             description="Provide an error without a solution. Frame the error message with a solution, along with an example of a valid input.">
             <div className="example">Your phone number is not valid.</div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
 
       <h3 id="error-date-input">Error with a date input</h3>
@@ -255,14 +255,14 @@ export default function ErrorMessagesPage() {
       </p>
 
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth}>
+        <GoabGrid minChildWidth={minGridWidth}>
           <DoDont type="generic">
             <div style={{ textAlign: "center" }}>
               <img src="/images/error-messages/error-with-date.png" width="70%"></img>
             </div>
           </DoDont>
-        </GoAGrid>
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
+        </GoabGrid>
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
           <DoDont type="do" description="Provide adequate information.">
             <div className="example">
               The student must be 16 years old or older to be eligible for funding.
@@ -286,39 +286,39 @@ export default function ErrorMessagesPage() {
               Study period must be longer than 3 and shorter than 52 weeks.
             </div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
 
       <h3 id="error-value-range">Error within a value range</h3>
       <p>This error appears when user fails to input a valid/correct amount.</p>
 
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth}>
+        <GoabGrid minChildWidth={minGridWidth}>
           <DoDont type="generic" description="*Include amount if known">
             <div style={{ textAlign: "center" }}>
               <img src="/images/error-messages/error-with-range.png" width="60%"></img>
             </div>
           </DoDont>
-        </GoAGrid>
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
+        </GoabGrid>
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
           <DoDont type="do" description="Provide a correct value if it is known.">
             <div className="example">Books and Materials cost must be lower than $4,000.</div>
           </DoDont>
           <DoDont type="dont" description="Show an error without providing a solution.">
             <div className="example">You have exceeded the maximum amount.</div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
       <div className="dodont-wrapper">
         <h3 id="error-outside-accepted">Input outside accepted values</h3>
-        <GoAGrid minChildWidth={minGridWidth}>
+        <GoabGrid minChildWidth={minGridWidth}>
           <DoDont type="generic">
             <div style={{ textAlign: "center" }}>
               <img src="/images/error-messages/input-outside-expected.png" width="60%"></img>
             </div>
           </DoDont>
-        </GoAGrid>
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
+        </GoabGrid>
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
           <DoDont type="do" description="Give a ranged value when possible.">
             <div className="example">PID must be between 10 and 15 digits.</div>
           </DoDont>
@@ -327,7 +327,7 @@ export default function ErrorMessagesPage() {
             description="Provide inadequate solution. This example gives an unclear solution. User only knows that the PID must be at least 10 digit.">
             <div className="example">PID must be at least 10 digits</div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
 
       <h2 id="upload-errors">Upload errors</h2>
@@ -351,14 +351,14 @@ export default function ErrorMessagesPage() {
 
       <h3 id="wrong-file-type">Wrong file type</h3>
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth}>
+        <GoabGrid minChildWidth={minGridWidth}>
           <DoDont type="generic">
             <div style={{ textAlign: "center" }}>
               <img src="/images/error-messages/wrong-file-types.png" width="60%"></img>
             </div>
           </DoDont>
-        </GoAGrid>
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
+        </GoabGrid>
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
           <DoDont type="do" description="Provide user with the list of accepted formats.">
             <div className="example">The selected file must be a PDF, JPG, PNG, or TIFF.</div>
           </DoDont>
@@ -368,19 +368,19 @@ export default function ErrorMessagesPage() {
               or TIFF file type(s).
             </div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
 
       <h3 id="file-too-large">File too large</h3>
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth}>
+        <GoabGrid minChildWidth={minGridWidth}>
           <DoDont type="generic">
             <div style={{ textAlign: "center" }}>
               <img src="/images/error-messages/file-too-large.png" width="60%"></img>
             </div>
           </DoDont>
-        </GoAGrid>
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
+        </GoabGrid>
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
           <DoDont type="do" description="Provide user with the exact file size limit.">
             <div className="example">The selected file must be less than 5MB.</div>
           </DoDont>
@@ -389,19 +389,19 @@ export default function ErrorMessagesPage() {
             description="Give the user an error without unclear instruction on how to be successful.">
             <div className="example">File size over limit. Please try again.</div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
 
       <h3 id="upload-failed">File upload failed</h3>
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth}>
+        <GoabGrid minChildWidth={minGridWidth}>
           <DoDont type="generic">
             <div style={{ textAlign: "center" }}>
               <img src="/images/error-messages/file-upload-failed.png" width="70%"></img>
             </div>
           </DoDont>
-        </GoAGrid>
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
+        </GoabGrid>
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
           <DoDont
             type="do"
             description="Use humanized tone when stating the problem. In this example, the service accepts the responsibility for the failed upload and eases the frustration that user might feel.">
@@ -414,19 +414,19 @@ export default function ErrorMessagesPage() {
             description="Use blunt language. This example is not taking responsibility for the failed upload, and is passively blaming the user.">
             <div className="example">File upload failed. Please try again.</div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
 
       <h3 id="duplicate-upload">Duplicate file uploaded</h3>
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth}>
+        <GoabGrid minChildWidth={minGridWidth}>
           <DoDont type="generic">
             <div style={{ textAlign: "center" }}>
               <img src="/images/error-messages/duplicate-file-upload.png" width="70%"></img>
             </div>
           </DoDont>
-        </GoAGrid>
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
+        </GoabGrid>
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
           <DoDont
             type="do"
             description="State the problem in a clear language and provide a solution as to what action should be taken.">
@@ -439,19 +439,19 @@ export default function ErrorMessagesPage() {
             description="State unclear problem. This example has a negative structure (“are not”) and does not guide the user to a solution.">
             <div className="example">Duplicate files are not accepted. Please try again.</div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
 
       <div className="dodont-wrapper">
         <h3 id="no-file-selected">No file selected</h3>
-        <GoAGrid minChildWidth={minGridWidth}>
+        <GoabGrid minChildWidth={minGridWidth}>
           <DoDont type="generic">
             <div style={{ textAlign: "center" }}>
               <img src="/images/error-messages/no-file-selected.png" width="60%"></img>
             </div>
           </DoDont>
-        </GoAGrid>
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
+        </GoabGrid>
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
           <DoDont type="do" description="Provide a clear solution as to what user should do.">
             <div className="example">Upload a work permit.</div>
           </DoDont>
@@ -460,7 +460,7 @@ export default function ErrorMessagesPage() {
             description="Provide an error without additional context as to what is required to be successful.">
             <div className="example">Document required</div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
 
       <h3 id="invalid-characters">Invalid characters used</h3>
@@ -470,14 +470,14 @@ export default function ErrorMessagesPage() {
       </p>
 
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth}>
+        <GoabGrid minChildWidth={minGridWidth}>
           <DoDont type="generic">
             <div style={{ textAlign: "center" }}>
               <img src="/images/error-messages/invalid-characters.png" width="60%"></img>
             </div>
           </DoDont>
-        </GoAGrid>
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
+        </GoabGrid>
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
           <DoDont
             type="do"
             description="Display valid characters when possible. This example also conveys the accepted letters case to the users.">
@@ -491,19 +491,19 @@ export default function ErrorMessagesPage() {
               period, apostrophe, hyphen or space.
             </div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
 
       <p>When the accepted characters are known, include an example in the error message.</p>
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth}>
+        <GoabGrid minChildWidth={minGridWidth}>
           <DoDont type="generic" description="*Use “only” when relevant.">
             <div style={{ textAlign: "center" }}>
               <img src="/images/error-messages/invalid-characters-2.png" width="80%"></img>
             </div>
           </DoDont>
-        </GoAGrid>
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
+        </GoabGrid>
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
           <DoDont type="do" description="Provide clear guided solution.">
             <div className="example">
               Alberta Bar ID must include numbers only, such as “12345.”
@@ -514,26 +514,26 @@ export default function ErrorMessagesPage() {
               The Alberta Bar ID must consist of numerical digits only e.g. 12345
             </div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
 
       <h3 id="incorrect-number-of-characters">Incorrect number of characters</h3>
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth}>
+        <GoabGrid minChildWidth={minGridWidth}>
           <DoDont type="generic">
             <div style={{ textAlign: "center" }}>
               <img src="/images/error-messages/invalid-number-of-characters.png" width="60%"></img>
             </div>
           </DoDont>
-        </GoAGrid>
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
+        </GoabGrid>
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl" mt="2xl">
           <DoDont type="do" description="Provide a clear guided solution with context.">
             <div className="example">The Mobius reference number must be 10 digits.</div>
           </DoDont>
           <DoDont type="dont" description="Display numbers in letters.">
             <div className="example">Ensure Mobius reference number is ten digits.</div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
     </ComponentContent>
   );
diff --git a/src/routes/content/HelperText.tsx b/src/routes/content/HelperText.tsx
index e0eabb21c..f52d0bd31 100644
--- a/src/routes/content/HelperText.tsx
+++ b/src/routes/content/HelperText.tsx
@@ -1,12 +1,12 @@
 import {
-  GoABlock,
-  GoACheckbox,
-  GoAContainer,
-  GoADivider,
-  GoAFormItem,
-  GoAGrid,
-  GoAInput,
-  GoATable,
+  GoabBlock,
+  GoabCheckbox,
+  GoabContainer,
+  GoabDivider,
+  GoabFormItem,
+  GoabGrid,
+  GoabInput,
+  GoabTable,
 } from "@abgov/react-components";
 import { DoDont } from "@components/do-dont/DoDont";
 import { Link } from "react-router-dom";
@@ -30,25 +30,25 @@ export default function HelperTextPage() {
         <Link to="/components/checkbox">Checkbox</Link>, <Link to="/components/button">Button</Link>
       </span>
       <h3></h3>
-      <GoAContainer type="non-interactive" mt="2xl" mb="2xl">
+      <GoabContainer type="non-interactive" mt="2xl" mb="2xl">
         <div
           className="example"
           style={{
             margin: "0 auto",
             textAlign: "left",
           }}>
-          <GoAFormItem
+          <GoabFormItem
             label="Project name"
             labelSize="regular"
             helpText="Select an existing or create a new project name.">
-            <GoAInput name="item" onChange={() => {}} value=""></GoAInput>
-          </GoAFormItem>
+            <GoabInput name="item" onChange={() => {}} value=""></GoabInput>
+          </GoabFormItem>
         </div>
-      </GoAContainer>
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      </GoabContainer>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
       <h2 id="considerations">Considerations</h2>
       <p>Consider the following ways to convey more information:</p>      
-      <GoATable width="100%" mb="xl">
+      <GoabTable width="100%" mb="xl">
         <thead>
           <tr>
             <th style={{ font: "var(--goa-typography-body-s)" }}>Is your content...</th>
@@ -66,119 +66,119 @@ export default function HelperTextPage() {
               <a></a>Helper text
             </td>
             <td>
-              <GoACheckbox checked name="helper-text" disabled={true} />
+              <GoabCheckbox checked name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked={false} name="helper-text" disabled={true} />
+              <GoabCheckbox checked={false} name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked={false} name="helper-text" disabled={true} />
+              <GoabCheckbox checked={false} name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="helper-text" disabled={true} />
+              <GoabCheckbox checked name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="helper-text" disabled={true} />
+              <GoabCheckbox checked name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked={false} name="helper-text" disabled={true} />
+              <GoabCheckbox checked={false} name="helper-text" disabled={true} />
             </td>
           </tr>
           <tr>
             <td>Accordion</td>
             <td>
-              <GoACheckbox checked={false} name="helper-text" disabled={true} />
+              <GoabCheckbox checked={false} name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="helper-text" disabled={true} />
+              <GoabCheckbox checked name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="helper-text" disabled={true} />
+              <GoabCheckbox checked name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked={false} name="helper-text" disabled={true} />
+              <GoabCheckbox checked={false} name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked={false} name="helper-text" disabled={true} />
+              <GoabCheckbox checked={false} name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="helper-text" disabled={true} />
+              <GoabCheckbox checked name="helper-text" disabled={true} />
             </td>
           </tr>
           <tr>
             <td>Callout</td>
             <td>
-              <GoACheckbox checked name="helper-text" disabled={true} />
+              <GoabCheckbox checked name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked={false} name="helper-text" disabled={true} />
+              <GoabCheckbox checked={false} name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="helper-text" disabled={true} />
+              <GoabCheckbox checked name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="helper-text" disabled={true} />
+              <GoabCheckbox checked name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="helper-text" disabled={true} />
+              <GoabCheckbox checked name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked={false} name="helper-text" disabled={true} />
+              <GoabCheckbox checked={false} name="helper-text" disabled={true} />
             </td>
           </tr>
           <tr>
             <td>Details</td>
             <td>
-              <GoACheckbox checked={false} name="helper-text" disabled={true} />
+              <GoabCheckbox checked={false} name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="helper-text" disabled={true} />
+              <GoabCheckbox checked name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked={false} name="helper-text" disabled={true} />
+              <GoabCheckbox checked={false} name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="helper-text" disabled={true} />
+              <GoabCheckbox checked name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked={false} name="helper-text" disabled={true} />
+              <GoabCheckbox checked={false} name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="helper-text" disabled={true} />
+              <GoabCheckbox checked name="helper-text" disabled={true} />
             </td>
           </tr>
           <tr>
             <td>Tooltip</td>
             <td>
-              <GoACheckbox checked={false} name="helper-text" disabled={true} />
+              <GoabCheckbox checked={false} name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="helper-text" disabled={true} />
+              <GoabCheckbox checked name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked={false} name="helper-text" disabled={true} />
+              <GoabCheckbox checked={false} name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="helper-text" disabled={true} />
+              <GoabCheckbox checked name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked={false} name="helper-text" disabled={true} />
+              <GoabCheckbox checked={false} name="helper-text" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="helper-text" disabled={true} />
+              <GoabCheckbox checked name="helper-text" disabled={true} />
             </td>
           </tr>
         </tbody>
-      </GoATable>
+      </GoabTable>
       <p>View a pattern and guide on how to show more information.</p>
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
       <h2 id="anatomy">Anatomy</h2>
       <p>Helper text can be used with any input.</p>
-      <GoAContainer>
+      <GoabContainer>
         <div style={{ textAlign: "center" }}>
           <img src="/images/helper-text/anatomy.png" width="80%"></img>
         </div>
-      </GoAContainer>
+      </GoabContainer>
       <ol>
         <li>Input label + optional / required</li>
         <li>Text Input</li>
@@ -191,7 +191,7 @@ export default function HelperTextPage() {
         <li>Input control(s)</li>
         <li>Helper Text</li>
       </ol>
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
       <h2 id="language-and-tone">Language and Tone</h2>
       <h3>Keep it concise</h3>
       <p>
@@ -227,18 +227,18 @@ export default function HelperTextPage() {
           Web writing style guide – Numbers and measurements
         </a>
       </p>
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
       <h2 id="usage">Usage</h2>
       <p>
         Helper text generally falls into 3 different categories. Examine the patterns and examples
         below to use helper text properly.
       </p>
-      <GoABlock direction="column" gap="xs">
+      <GoabBlock direction="column" gap="xs">
         <a href="#disclosure">Disclosure</a>
         <a href="#instructional">Instructional</a>
         <a href="#restrictive">Restrictive</a>
-      </GoABlock>
-      <GoADivider mb="xl" mt="2xl"></GoADivider>
+      </GoabBlock>
+      <GoabDivider mb="xl" mt="2xl"></GoabDivider>
       <h3 id="disclosure">Disclosure – Why are we asking this question</h3>
       <p>
         Disclosive helper text helps a user understand the data, task or system associated with the
@@ -257,7 +257,7 @@ export default function HelperTextPage() {
         </ul>
       </p>
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl">
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl">
           <DoDont
             type="do"
             description="Refer directly to the content in the Text field using words such as This, These, and The when possible.">
@@ -286,7 +286,7 @@ export default function HelperTextPage() {
               <img src="/images/helper-text/disclosure-dont-2.png" width="80%"></img>
             </div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
       <h3 id="instructional">Instructional – Directions for how to use the input</h3>
       <p>
@@ -308,7 +308,7 @@ export default function HelperTextPage() {
         </ul>
       </p>
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl">
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl">
           <DoDont
             type="do"
             description="Begin with an Action (Directive Verb) e.g. Search, Start, Select, Find, Deposit; phrasing that follows should briefly describe or summarize directions.">
@@ -333,7 +333,7 @@ export default function HelperTextPage() {
               <img src="/images/helper-text/instructions-dont-2.png" width="80%"></img>
             </div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
       <h3 id="restrictive">Restrictive – Rules and requirements that the input needs to meet</h3>
       <p>
@@ -353,7 +353,7 @@ export default function HelperTextPage() {
         </ul>
       </p>
       <div className="dodont-wrapper">
-        <GoAGrid minChildWidth={minGridWidth} gap="2xl">
+        <GoabGrid minChildWidth={minGridWidth} gap="2xl">
           <DoDont type="do" description="Be specific about the information you are asking for.">
             <div style={{ textAlign: "center" }}>
               <img src="/images/helper-text/restrictive-do-1.png" width="80%"></img>
@@ -378,16 +378,16 @@ export default function HelperTextPage() {
               <img src="/images/helper-text/restrictive-dont-2.png" width="80%"></img>
             </div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
       <h2 id="formatting">Formatting</h2>
       <p>
         Helper text should be a short succinct statement, sentence case, with no period or
         punctuation.
       </p>
       <div className="dodont-wrapper">
-        <GoAGrid gap="2xl" minChildWidth={minGridWidth}>
+        <GoabGrid gap="2xl" minChildWidth={minGridWidth}>
           <DoDont
             type="do"
             description="Use sentence case with no punctuation at the end of the helper text.">
@@ -400,16 +400,16 @@ export default function HelperTextPage() {
               <img src="/images/helper-text/formatting-dont.png" width="80%"></img>
             </div>
           </DoDont>
-        </GoAGrid>
+        </GoabGrid>
       </div>
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
       <h2 id="accessibility">Accessibility</h2>
       <p>
         For screen reader accessibility, consider using the aria-describedby attribute as helper
         text for the input control. This allows screen readers to provide additional context that
         would be present for a sighted user.
       </p>
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
       <h2 id="references">References</h2>
       <p>
         <a href="https://www.w3.org/TR/WCAG20-TECHS/ARIA1.html" target="_blank">
diff --git a/src/routes/design-tokens/DesignTokenLayout.tsx b/src/routes/design-tokens/DesignTokenLayout.tsx
index f2bf44610..52ecb72a5 100644
--- a/src/routes/design-tokens/DesignTokenLayout.tsx
+++ b/src/routes/design-tokens/DesignTokenLayout.tsx
@@ -1,14 +1,15 @@
 import {
-  GoABlock,
-  GoADropdown,
-  GoADropdownItem,
-  GoASideMenu,
+  GoabBlock,
+  GoabDropdown,
+  GoabDropdownItem,
+  GoabSideMenu,
 } from "@abgov/react-components";
 import { Link, Outlet } from "react-router-dom";
 import { SupportInfo } from "@components/support-info/SupportInfo";
 import { useEffect, useState } from "react";
-import { DesignTokensLanguageContext } from "@components/sandbox";
 import "./DesignToken.css";
+import { GoabDropdownOnChangeDetail } from "@abgov/ui-components-common";
+import { DesignTokensLanguageContext } from "@contexts/DesignTokensLanguageContext";
 
 export function DesignTokenLayout() {
   const [tokenLanguage, setLanguage] = useState("");
@@ -18,8 +19,8 @@ export function DesignTokenLayout() {
     setLanguage(lang || "scss");
   }, []);
 
-  function designTokenLanguageChange(_name: string, value: string[] | string) {
-    const lang = Array.isArray(value) ? value[0] : value;
+  function designTokenLanguageChange(event: GoabDropdownOnChangeDetail) {
+    const lang = event.value || "react6";
     setLanguage(lang);
     localStorage.setItem("goa-docs-design-tokens-lang", lang);
   }
@@ -29,13 +30,13 @@ export function DesignTokenLayout() {
       <DesignTokensLanguageContext.Provider value={tokenLanguage}>
         <div className="content design-tokens">
           <section className="side-menu">
-            <GoASideMenu>
-              <GoABlock direction="column" mt="s" mb="s" ml="l" mr="l">
-                <GoADropdown value={tokenLanguage} onChange={designTokenLanguageChange}>
-                  <GoADropdownItem label="SCSS" value="scss" />
-                  <GoADropdownItem label="CSS" value="css" />
-                </GoADropdown>
-              </GoABlock>
+            <GoabSideMenu>
+              <GoabBlock direction="column" mt="s" mb="s" ml="l" mr="l">
+                <GoabDropdown value={tokenLanguage} onChange={designTokenLanguageChange}>
+                  <GoabDropdownItem label="SCSS" value="scss" />
+                  <GoabDropdownItem label="CSS" value="css" />
+                </GoabDropdown>
+              </GoabBlock>
 
               <Link to="">All</Link>
               <Link to="border-radius">Border Radius</Link>
@@ -46,7 +47,7 @@ export function DesignTokenLayout() {
               <Link to="shadow">Shadow</Link>
               <Link to="spacing">Spacing</Link>
               <Link to="typography">Typography</Link>
-            </GoASideMenu>
+            </GoabSideMenu>
           </section>
 
           <main className="main">
diff --git a/src/routes/design-tokens/border-radius/BorderRadius.tsx b/src/routes/design-tokens/border-radius/BorderRadius.tsx
index 1c2128ac8..bfb85a69e 100644
--- a/src/routes/design-tokens/border-radius/BorderRadius.tsx
+++ b/src/routes/design-tokens/border-radius/BorderRadius.tsx
@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { GoAContainer, GoAGrid, GoATable } from "@abgov/react-components";
+import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components";
 import { TokenSnippet } from "@components/token-snippet/TokenSnippet";
 import "./BorderRadius.css";
 import { Token } from "../token";
@@ -27,7 +27,7 @@ export default function BorderRadiusPage() {
 
   const renderDesktop = () => {
     return (
-      <GoATable variant="normal" width="100%">
+      <GoabTable variant="normal" width="100%">
         <thead>
           <tr>
             <th></th>
@@ -57,17 +57,17 @@ export default function BorderRadiusPage() {
             </tr>
           ))}
         </tbody>
-      </GoATable>
+      </GoabTable>
     );
   };
 
   const renderMobile = () => {
     return (
-      <GoAGrid minChildWidth="22rem" gap="xl">
+      <GoabGrid minChildWidth="22rem" gap="xl">
         {getTokenGroups(tokens).map(group =>
           group.map((token, idx) => (
             <>
-              <GoAContainer key={idx}>
+              <GoabContainer key={idx}>
                 <div
                   className="token-block"
                   style={{
@@ -80,11 +80,11 @@ export default function BorderRadiusPage() {
                   <dt>px</dt> <dd>{token.px}</dd>
                   <dt>Figma variable</dt> <dd>{token.figmaUsage}</dd>
                 </dl>
-              </GoAContainer>
+              </GoabContainer>
             </>
           ))
         )}
-      </GoAGrid>
+      </GoabGrid>
     );
   };
 
diff --git a/src/routes/design-tokens/border-width/BorderWidth.tsx b/src/routes/design-tokens/border-width/BorderWidth.tsx
index 110c8faed..44c1f8ff0 100644
--- a/src/routes/design-tokens/border-width/BorderWidth.tsx
+++ b/src/routes/design-tokens/border-width/BorderWidth.tsx
@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { GoAContainer, GoAGrid, GoATable } from "@abgov/react-components";
+import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components";
 import { TokenSnippet } from "@components/token-snippet/TokenSnippet";
 import "./BorderWidth.css";
 import { Token } from "../token";
@@ -33,7 +33,7 @@ export default function BorderWidthPage() {
 
   const renderDesktop = () => {
     return (
-      <GoATable variant="normal" width="100%">
+      <GoabTable variant="normal" width="100%">
         <thead>
           <tr>
             <th></th>
@@ -63,16 +63,16 @@ export default function BorderWidthPage() {
             </tr>
           ))}
         </tbody>
-      </GoATable>
+      </GoabTable>
     );
   };
 
   const renderMobile = () => {
     return (
-      <GoAGrid minChildWidth="22rem" gap="xl">
+      <GoabGrid minChildWidth="22rem" gap="xl">
         {getTokenGroups(tokens).map(group =>
           group.map((token, idx) => (
-            <GoAContainer key={idx}>
+            <GoabContainer key={idx}>
               <div
                 className="token-block"
                 style={{
@@ -85,10 +85,10 @@ export default function BorderWidthPage() {
                 <dt>px</dt> <dd>{token.px}</dd>
                 <dt>Figma usage</dt> <dd>{token.figmaUsage}</dd>
               </dl>
-            </GoAContainer>
+            </GoabContainer>
           ))
         )}
-      </GoAGrid>
+      </GoabGrid>
     );
   };
 
diff --git a/src/routes/design-tokens/color/Color.tsx b/src/routes/design-tokens/color/Color.tsx
index ee408be52..1d66c4388 100644
--- a/src/routes/design-tokens/color/Color.tsx
+++ b/src/routes/design-tokens/color/Color.tsx
@@ -1,4 +1,4 @@
-import { GoAContainer, GoAGrid, GoATable } from "@abgov/react-components";
+import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components";
 import { TokenSnippet } from "@components/token-snippet/TokenSnippet";
 import "./Color.css";
 import COLORS from "./colors.json";
@@ -25,7 +25,7 @@ export default function ColorPage() {
 
   const renderDesktop = () => {
     return (
-      <GoATable variant="normal" width="100%">
+      <GoabTable variant="normal" width="100%">
         <thead>
           <tr>
             <th>Type</th>
@@ -61,7 +61,7 @@ export default function ColorPage() {
             </React.Fragment>
           ))}
         </tbody>
-      </GoATable>
+      </GoabTable>
     );
   };
 
@@ -75,9 +75,9 @@ export default function ColorPage() {
               {color.name}
             </h3>
 
-            <GoAGrid minChildWidth="22rem" gap="xl">
+            <GoabGrid minChildWidth="22rem" gap="xl">
               {color.tokens.map((token, tokenIndex) => (
-                <GoAContainer key={tokenIndex}>
+                <GoabContainer key={tokenIndex}>
                   <div
                     className="token-block"
                     style={{
@@ -90,9 +90,9 @@ export default function ColorPage() {
                     <dt>Figma colour style</dt> <dd>{token.figmaColorStyle}</dd>
                     <dt>Description</dt> <dd>{token.description}</dd>
                   </dl>
-                </GoAContainer>
+                </GoabContainer>
               ))}
-            </GoAGrid>
+            </GoabGrid>
           </React.Fragment>
         ))}
         </>
diff --git a/src/routes/design-tokens/icon-size/IconSize.tsx b/src/routes/design-tokens/icon-size/IconSize.tsx
index 5e0c2b233..2bba84369 100644
--- a/src/routes/design-tokens/icon-size/IconSize.tsx
+++ b/src/routes/design-tokens/icon-size/IconSize.tsx
@@ -1,15 +1,15 @@
-import { GoAContainer, GoAGrid, GoAIcon, GoATable } from "@abgov/react-components";
+import { GoabContainer, GoabGrid, GoabIcon, GoabTable } from "@abgov/react-components";
 import { TokenSnippet } from "@components/token-snippet/TokenSnippet";
 import "./IconSize.css";
 import { getTokenGroups } from "../getTokenGroups";
-import { IconSize } from "@abgov/react-components";
 import { Token } from "../token";
 import { useContext } from "react";
 import { DeviceWidthContext } from "../../../contexts/DeviceWidthContext";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { GoabIconSize } from "@abgov/ui-components-common";
 
 interface IconSizeToken extends Token {
-  size: IconSize | string;
+  size: GoabIconSize | string;
 }
 
 export default function IconSizePage() {
@@ -40,7 +40,7 @@ export default function IconSizePage() {
 
   const renderDesktop = () => {
     return (
-      <GoATable variant="normal" width="100%">
+      <GoabTable variant="normal" width="100%">
         <thead>
           <tr>
             <th></th>
@@ -55,7 +55,7 @@ export default function IconSizePage() {
             <tr key={index}>
               <td>
                 <div className={`icon ${token.tokenName}`}>
-                  <GoAIcon type="add" size={token.size as IconSize}></GoAIcon>
+                  <GoabIcon type="add" size={token.size as GoabIconSize}></GoabIcon>
                 </div>
               </td>
               <td>
@@ -67,18 +67,18 @@ export default function IconSizePage() {
             </tr>
           ))}
         </tbody>
-      </GoATable>
+      </GoabTable>
     );
   };
 
   const renderMobile = () => {
     return (
-      <GoAGrid minChildWidth="22rem" gap="xl">
+      <GoabGrid minChildWidth="22rem" gap="xl">
         {getTokenGroups(tokens).map(group =>
           group.map((token: IconSizeToken, idx: number) => (
-            <GoAContainer key={idx}>
+            <GoabContainer key={idx}>
               <div className={`icon ${token.tokenName}`}>
-                <GoAIcon type="add" size={token.size as IconSize}></GoAIcon>
+                <GoabIcon type="add" size={token.size as GoabIconSize}></GoabIcon>
               </div>
               <TokenSnippet code={token.tokenName} />
               <dl>
@@ -86,10 +86,10 @@ export default function IconSizePage() {
                 <dt>px</dt> <dd>{token.px}</dd>
                 <dt>Figma usage</dt> <dd>{token.figmaUsage}</dd>
               </dl>
-            </GoAContainer>
+            </GoabContainer>
           ))
         )}
-      </GoAGrid>
+      </GoabGrid>
     );
   };
 
diff --git a/src/routes/design-tokens/opacity/Opacity.tsx b/src/routes/design-tokens/opacity/Opacity.tsx
index 253c8953d..39f3a7b32 100644
--- a/src/routes/design-tokens/opacity/Opacity.tsx
+++ b/src/routes/design-tokens/opacity/Opacity.tsx
@@ -1,4 +1,4 @@
-import { GoAContainer, GoAGrid, GoATable } from "@abgov/react-components";
+import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components";
 import { TokenSnippet } from "@components/token-snippet/TokenSnippet";
 import "./Opacity.css";
 import { getTokenGroups } from "../getTokenGroups";
@@ -30,7 +30,7 @@ export default function OpacityPage() {
 
   const renderDesktop = () => {
     return (
-      <GoATable variant="normal" width="100%">
+      <GoabTable variant="normal" width="100%">
         <thead>
           <tr>
             <th></th>
@@ -61,16 +61,16 @@ export default function OpacityPage() {
             </tr>
           ))}
         </tbody>
-      </GoATable>
+      </GoabTable>
     );
   };
 
   const renderMobile = () => {
     return (
-      <GoAGrid minChildWidth="22rem" gap="xl">
+      <GoabGrid minChildWidth="22rem" gap="xl">
         {getTokenGroups(tokens).map(group =>
           group.map((token: Token, idx: number) => (
-            <GoAContainer key={idx}>
+            <GoabContainer key={idx}>
               <div style={{ display: "flex" }}>
                 <div className="blue-box"></div>
                 <div
@@ -85,10 +85,10 @@ export default function OpacityPage() {
                 <dt>%</dt> <dd>{token.percentage}</dd>
                 <dt>Figma usage</dt> <dd>{token.figmaUsage}</dd>
               </dl>
-            </GoAContainer>
+            </GoabContainer>
           ))
         )}
-      </GoAGrid>
+      </GoabGrid>
     );
   };
 
diff --git a/src/routes/design-tokens/overview/Overview.tsx b/src/routes/design-tokens/overview/Overview.tsx
index 16ba83a51..147ea48e7 100644
--- a/src/routes/design-tokens/overview/Overview.tsx
+++ b/src/routes/design-tokens/overview/Overview.tsx
@@ -1,4 +1,4 @@
-import { GoAContainer } from "@abgov/react-components";
+import { GoabContainer } from "@abgov/react-components";
 import "./Overview.css";
 import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
 export default function DesignTokensOverviewPage() {
@@ -27,14 +27,14 @@ export default function DesignTokensOverviewPage() {
         product teams.
       </p>
 
-      <GoAContainer type="non-interactive" mt="2xl" mb="xs">
+      <GoabContainer type="non-interactive" mt="2xl" mb="xs">
         <h4>Design token example</h4>
         <p>
           The GoA’s colour for a hover interaction is #004F84. This property is defined as a design
           token called <code className="inline">--goa-color-interactive-hover</code>. This token is used in Figma as a
           style and used in code as CSS or SASS variables
         </p>
-      </GoAContainer>
+      </GoabContainer>
 
       <h3>What this means for...</h3>
       <h4>Developers</h4>
diff --git a/src/routes/design-tokens/shadow/Shadow.tsx b/src/routes/design-tokens/shadow/Shadow.tsx
index 95899ca81..cb00423ed 100644
--- a/src/routes/design-tokens/shadow/Shadow.tsx
+++ b/src/routes/design-tokens/shadow/Shadow.tsx
@@ -1,4 +1,4 @@
-import { GoAContainer, GoAGrid, GoATable } from "@abgov/react-components";
+import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components";
 import { TokenSnippet } from "@components/token-snippet/TokenSnippet";
 import "./Shadow.css";
 import { getTokenGroups } from "../getTokenGroups";
@@ -24,7 +24,7 @@ export default function ShadowPage() {
 
   const renderDesktop = () => {
     return (
-      <GoATable variant="normal" width="100%">
+      <GoabTable variant="normal" width="100%">
         <thead>
           <tr>
             <th></th>
@@ -47,26 +47,26 @@ export default function ShadowPage() {
             </tr>
           ))}
         </tbody>
-      </GoATable>
+      </GoabTable>
     );
   };
 
   const renderMobile = () => {
     return (
-      <GoAGrid minChildWidth="22rem" gap="xl">
+      <GoabGrid minChildWidth="22rem" gap="xl">
         {getTokenGroups(tokens).map(group =>
           group.map((token: Token, idx: number) => (
-            <GoAContainer key={idx}>
+            <GoabContainer key={idx}>
               <div className="token-block" />
               <TokenSnippet code={token.tokenName} />
               <dl>
                 <dt>Value</dt> <dd>{token.value}</dd>
                 <dt>Figma usage</dt> <dd>{token.figmaUsage}</dd>
               </dl>
-            </GoAContainer>
+            </GoabContainer>
           ))
         )}
-      </GoAGrid>
+      </GoabGrid>
     );
   };
 
diff --git a/src/routes/design-tokens/spacing/Spacing.tsx b/src/routes/design-tokens/spacing/Spacing.tsx
index fb0f8c7c8..5ddbab548 100644
--- a/src/routes/design-tokens/spacing/Spacing.tsx
+++ b/src/routes/design-tokens/spacing/Spacing.tsx
@@ -1,4 +1,4 @@
-import { GoAContainer, GoAGrid, GoATable } from "@abgov/react-components";
+import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components";
 import { TokenSnippet } from "@components/token-snippet/TokenSnippet";
 import "./Spacing.css";
 import SPACING_TOKENS from "./spacing.json";
@@ -21,7 +21,7 @@ export default function SpacingPage() {
 
   const renderDesktop = () => {
     return (
-      <GoATable variant="normal" width="100%">
+      <GoabTable variant="normal" width="100%">
         <thead>
           <tr>
             <th></th>
@@ -55,16 +55,16 @@ export default function SpacingPage() {
             </tr>
           ))}
         </tbody>
-      </GoATable>
+      </GoabTable>
     );
   };
 
   const renderMobile = () => {
     return (
-      <GoAGrid minChildWidth="22rem" gap="xl">
+      <GoabGrid minChildWidth="22rem" gap="xl">
         {getTokenGroups(tokens).map(group =>
           group.map((token: Token, idx: number) => (
-            <GoAContainer key={idx}>
+            <GoabContainer key={idx}>
               <div className="represent">
                 <div className="grey-circle"></div>
                 <div
@@ -81,10 +81,10 @@ export default function SpacingPage() {
                 <dt>PX</dt> <dd>{token.px}</dd>
                 <dt>Figma usage</dt> <dd>{token.figmaUsage}</dd>
               </dl>
-            </GoAContainer>
+            </GoabContainer>
           ))
         )}
-      </GoAGrid>
+      </GoabGrid>
     );
   };
 
diff --git a/src/routes/design-tokens/typography/Typography.tsx b/src/routes/design-tokens/typography/Typography.tsx
index 95e922424..f468f0cb3 100644
--- a/src/routes/design-tokens/typography/Typography.tsx
+++ b/src/routes/design-tokens/typography/Typography.tsx
@@ -1,4 +1,4 @@
-import { GoAContainer, GoAGrid, GoATable } from "@abgov/react-components";
+import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components";
 import { TokenSnippet } from "@components/token-snippet/TokenSnippet";
 import TYPO_TOKENS from "./typography.json";
 import { getTokenGroups } from "../getTokenGroups";
@@ -22,7 +22,7 @@ export default function TypographyPage() {
 
   const renderDesktop = () => {
     return (
-      <GoATable variant="normal" width="100%">
+      <GoabTable variant="normal" width="100%">
         <thead>
           <tr>
             <th>Figma type style</th>
@@ -49,16 +49,16 @@ export default function TypographyPage() {
             </tr>
           ))}
         </tbody>
-      </GoATable>
+      </GoabTable>
     );
   };
 
   const renderMobile = () => {
     return (
-      <GoAGrid minChildWidth="22rem" gap="xl">
+      <GoabGrid minChildWidth="22rem" gap="xl">
         {getTokenGroups(tokens as Token[]).map(group =>
           group.map((token: TypographyToken, idx: number) => (
-            <GoAContainer key={idx}>
+            <GoabContainer key={idx}>
               <dl>
                 <dd style={{ font: getCssVarValue(`--${token.tokenName}`) }}>
                   {token.figmaTypeStyle}
@@ -71,10 +71,10 @@ export default function TypographyPage() {
                 <dt>Font size</dt> <dd>{token.fontSize}</dd>
                 <dt>Line height</dt> <dd>{token.lineHeight}</dd>
               </dl>
-            </GoAContainer>
+            </GoabContainer>
           ))
         )}
-      </GoAGrid>
+      </GoabGrid>
     );
   };
 
diff --git a/src/routes/get-started/Contribute.tsx b/src/routes/get-started/Contribute.tsx
index a8983f6c1..b71e22472 100644
--- a/src/routes/get-started/Contribute.tsx
+++ b/src/routes/get-started/Contribute.tsx
@@ -1,4 +1,4 @@
-import { GoACallout, GoAContainer, GoADetails, GoADivider, GoASpacer, GoATable,  } from "@abgov/react-components";
+import { GoabCallout, GoabContainer, GoabDetails, GoabDivider, GoabSpacer, GoabTable,  } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 export default function ContributePage() {
@@ -9,25 +9,25 @@ export default function ContributePage() {
       Add to the components or patterns in the design system</h3>
        <p>The design system is a shared resource for product teams to use and contribute to. We encourage everyone, regardless of their role, to help improve the design system.</p>
       
-      <GoAContainer type="non-interactive" mb="l" mt="m">
+      <GoabContainer type="non-interactive" mb="l" mt="m">
         <b>Start by using what's in the design system to design and build services easier</b>
-        <GoADetails heading="What happens when I need a new or different component or pattern?" mt="m">
+        <GoabDetails heading="What happens when I need a new or different component or pattern?" mt="m">
           <img src="/images/Contribution/contribution-process.png" width="100%" alt="Contribute" />
-          <GoASpacer vSpacing="m"></GoASpacer> 
+          <GoabSpacer vSpacing="m"></GoabSpacer>
           <p>
             <a href="https://www.figma.com/board/bFFeTY8CI2qOqCq7yvVXK6/Design-System---Governance-Process-Map?node-id=510-1364&t=gt7XnMUq1UsmJ7Lf-4" target="_blank">  
               View the full governance process in Figma
             </a>
           </p>
-        </GoADetails>
-      </GoAContainer>
+        </GoabDetails>
+      </GoabContainer>
 
-      <GoAContainer type="interactive" mb="l" mt="m">
+      <GoabContainer type="interactive" mb="l" mt="m">
         <h3>Did you know…</h3>
         <p>
         There are open <a href="https://www.figma.com/files/1352057334427203708/team/1365458889622139826" target="_blank">contribution files</a> in Figma for every component and pattern in the design system, including unpublished ideas and experiments.
         </p>
-      </GoAContainer>
+      </GoabContainer>
 
       <h2 id="design-contribution-process">Design contribution process</h2>
       
@@ -35,7 +35,7 @@ export default function ContributePage() {
         <p>
         If a <a href="https://design.alberta.ca/components" target="_blank">component</a> or <a href="https://design.alberta.ca/patterns" target="_blank">pattern</a> doesn’t exist in production or doesn’t meet the needs of your users, please contact the design system team. We’ll discuss the issue to understand it better and decide on the next steps together.
         </p>
-        <GoASpacer vSpacing="2xs"></GoASpacer>
+        <GoabSpacer vSpacing="2xs"></GoabSpacer>
         <h3>1. Come talk to us:</h3>
         <ul>
           <li>
@@ -58,7 +58,7 @@ export default function ContributePage() {
          <h3>2. Your contribution will be evaluated against the following contribution criteria:</h3>
          <h4>Proposing a component or pattern</h4>
          <p>For something to be added or changed in the design system, it needs to be:</p>
-         <GoATable width="100%" mb="xl">
+         <GoabTable width="100%" mb="xl">
             <thead>
               <tr>
                 <th>
@@ -87,11 +87,11 @@ export default function ContributePage() {
                 </td>
               </tr>
             </tbody>
-          </GoATable>
-          <GoASpacer vSpacing="2xs"></GoASpacer>   
+          </GoabTable>
+          <GoabSpacer vSpacing="2xs"></GoabSpacer>
 <h4>Standards for a given solution</h4>
           <p>For a new component or pattern to be published, a given solution has to be:</p>
-          <GoATable width="100%" mb="xl">
+          <GoabTable width="100%" mb="xl">
             <thead>
               <tr>
                 <th>
@@ -120,8 +120,8 @@ export default function ContributePage() {
                 </td>
               </tr>
             </tbody>
-          </GoATable>  
-          <GoASpacer vSpacing="3xs"></GoASpacer> 
+          </GoabTable>
+          <GoabSpacer vSpacing="3xs"></GoabSpacer>
             <h3>3. Once approved, it will be added to the <a href="https://github.com/orgs/GovAlta/projects/35/views/1?filterQuery=" target="_blank">Design System's backlog</a> </h3>
             <ul>
               <li>
@@ -136,7 +136,7 @@ export default function ContributePage() {
             </ul>
       </div>
 
-      <GoADivider mb="2xl" mt="2xl"></GoADivider>
+      <GoabDivider mb="2xl" mt="2xl"></GoabDivider>
       <div className="max-width-72ch contribute-page-content">
         <h2 id="development">Code contribution process</h2>
         <p>In order to support all of the development frameworks that service teams use, we build and support a library of web components. Contributing entire components can be challenging and time-consuming, so we recommend and encourage smaller-scale contributions instead.</p>
@@ -150,9 +150,9 @@ export default function ContributePage() {
           <li>Start by reaching out on the <a href="https://goa-dio.slack.com/archives/C02PLLT9HQ9" target="_blank">#design-system-support</a> channel on slack to let us know you’re interested in contributing.</li>
           <li>
             Find an issue in our <a href="https://github.com/orgs/GovAlta/projects/35/views/1?filterQuery=" target="_blank">backlog</a> tagged with &ldquo;ready-for-contribution&rdquo;. Let us know which issue(s) you&rsquo;re picking up.
-            <GoACallout type="information" mt="xl">
+            <GoabCallout type="information" mt="xl">
               Since our repository is “public”, you'll need to use a different GitHub account than the Enterprise Managed User (EMU) account you use for your product team work.
-            </GoACallout>
+            </GoabCallout>
           </li>
         </ol>
         <h4>Setup contribution environment</h4>
@@ -181,25 +181,25 @@ export default function ContributePage() {
             <br />
             <b>Angular</b>
             <CodeSnippet lang="css" allowCopy={true} code={`npm run dev:angular`}/>
-            <GoASpacer vSpacing="s" />
+            <GoabSpacer vSpacing="s" />
             <b>React</b>
             <CodeSnippet lang="css" allowCopy={true} code={`npm run dev:react`}/>
           </li>
         </ol>
-        <GoASpacer vSpacing="l" />
+        <GoabSpacer vSpacing="l" />
         <h3 id="react-and-web-wrappers">React and Web wrappers</h3>
-        <GoASpacer vSpacing="s" />
+        <GoabSpacer vSpacing="s" />
         <p>
           <strong>React wrappers</strong> <br/>
           <CodeSnippet lang="css" allowCopy={true} code={`/libs/react-components/src/lib`}/>
-          <GoASpacer vSpacing="s"></GoASpacer>
+          <GoabSpacer vSpacing="s"></GoabSpacer>
           Each folder represents a single component with its associated unit tests and wrapper code
         </p>
-        <GoASpacer vSpacing="l"></GoASpacer>
+        <GoabSpacer vSpacing="l"></GoabSpacer>
         <p>
           <strong>Web wrappers</strong> <br /> 
           <CodeSnippet lang="css" allowCopy={true} code={`/libs/web-components/src/components`}/>
-          <GoASpacer vSpacing="s"></GoASpacer>
+          <GoabSpacer vSpacing="s"></GoabSpacer>
           Each folder represents a single component with:
         </p>
         <ul>
@@ -213,7 +213,7 @@ export default function ContributePage() {
             Documentation as <code>doc.md&nbsp;</code>
           </li>
         </ul>
-        <GoASpacer vSpacing="s"></GoASpacer>
+        <GoabSpacer vSpacing="s"></GoabSpacer>
         <h3 id="testing-procedures">Testing procedures</h3>
         <p>All unit tests must be written in Svelte.</p>
         <ul>
@@ -227,13 +227,13 @@ export default function ContributePage() {
           Additionally, our QA automation developer will perform a comprehensive series of tests to
           ensure the components&#39; quality and functionality.
         </p>
-        <GoASpacer vSpacing="s"></GoASpacer>
+        <GoabSpacer vSpacing="s"></GoabSpacer>
 
         <h3 id="submitting-your-code">Submitting your code</h3>
         <ol>
           <li>
             Submit a commit using the following as your commit message:
-            <GoAContainer type="non-interactive" mt="m">
+            <GoabContainer type="non-interactive" mt="m">
               <dl>
                 <dt><strong>Bug Fix:</strong></dt>
                 <dd>fix(#storyNumber): short description of issue fixed (7 words max)</dd>
@@ -242,7 +242,7 @@ export default function ContributePage() {
                 <dt><strong>Feature Request:</strong></dt>
                 <dd>feat(#storyNumber): short description of feature (7 words max)</dd>
               </dl>
-            </GoAContainer>
+            </GoabContainer>
           </li>
           <li>Create a pull request to the alpha branch from your branch</li>
           <li>Mark the PR as a draft</li>
diff --git a/src/routes/get-started/GetStartedLayout.tsx b/src/routes/get-started/GetStartedLayout.tsx
index f63a25d9c..a143cbedb 100644
--- a/src/routes/get-started/GetStartedLayout.tsx
+++ b/src/routes/get-started/GetStartedLayout.tsx
@@ -1,4 +1,4 @@
-import { GoASideMenu, GoASideMenuGroup, GoASpacer } from "@abgov/react-components";
+import { GoabSideMenu, GoabSideMenuGroup, GoabSpacer } from "@abgov/react-components";
 import { Link, Outlet } from "react-router-dom";
 import { SupportInfo } from "@components/support-info/SupportInfo.tsx";
 
@@ -6,24 +6,25 @@ export default function GetStartedLayout() {
   return (
     <div className="content">
       <section className="side-menu">
-        <GoASideMenu>
-        <GoASpacer vSpacing="m"></GoASpacer>
+        <GoabSideMenu>
+          <GoabSpacer vSpacing="m"></GoabSpacer>
           <Link to="">Start with the design system</Link>
           <Link to="designers">UX Designers</Link>
-          <GoASideMenuGroup heading="Developers">
+          <GoabSideMenuGroup heading="Developers">
             <Link to="developers">Overview</Link>
             <Link to="developers/setup">Setup</Link>
             <Link to="developers/bug">Verify a bug</Link>
             <Link to="developers/vscode">VS Code</Link>
             <Link to="developers/technologies">Technologies</Link>
             <Link to="developers/browsers">Supported Browsers</Link>
-          </GoASideMenuGroup>
-            <Link to="qa-testing">QA testing</Link>
-            <Link to="contribute">Contribute</Link>
-            <Link to="support">Support</Link>
-            <Link to="roadmap">Roadmap</Link>
-            <Link to="user-experience-guidelines">User experience guidelines</Link>
-        </GoASideMenu>
+            <Link to="developers/update">Version update guide</Link>
+          </GoabSideMenuGroup>
+          <Link to="qa-testing">QA testing</Link>
+          <Link to="contribute">Contribute</Link>
+          <Link to="support">Support</Link>
+          <Link to="roadmap">Roadmap</Link>
+          <Link to="user-experience-guidelines">User experience guidelines</Link>
+        </GoabSideMenu>
       </section>
 
       <main className="main">
diff --git a/src/routes/get-started/GetStartedOverview.tsx b/src/routes/get-started/GetStartedOverview.tsx
index e881b2c27..2adc272e3 100644
--- a/src/routes/get-started/GetStartedOverview.tsx
+++ b/src/routes/get-started/GetStartedOverview.tsx
@@ -1,4 +1,4 @@
-import { GoAButton, GoAButtonGroup, GoAContainer, GoAGrid } from "@abgov/react-components";
+import { GoabButton, GoabButtonGroup, GoabContainer, GoabGrid } from "@abgov/react-components";
 import { useNavigate } from "react-router-dom";
 import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
 
@@ -13,36 +13,36 @@ export default function GetStartedOverviewPage() {
         </h3>
 
         <div className="max-width-72ch">
-          <GoAGrid minChildWidth="32ch" mb="xl">
+          <GoabGrid minChildWidth="32ch" mb="xl">
             <h4 className="heading">Using the design system by role:</h4>
-            <GoAButtonGroup alignment="start">
-              <GoAButton
+            <GoabButtonGroup alignment="start">
+              <GoabButton
                 type="tertiary"
                 size="compact"
                 onClick={() => navigate("/get-started/designers")}>
                 Designers
-              </GoAButton>
-              <GoAButton
+              </GoabButton>
+              <GoabButton
                 type="tertiary"
                 size="compact"
                 onClick={() => navigate("/get-started/developers")}>
                 Developers
-              </GoAButton>
-              <GoAButton
+              </GoabButton>
+              <GoabButton
                 type="tertiary"
                 size="compact"
                 onClick={() => navigate("/get-started/qa-testing")}>
                 QA Testers
-              </GoAButton>
-            </GoAButtonGroup>
-          </GoAGrid>
+              </GoabButton>
+            </GoabButtonGroup>
+          </GoabGrid>
 
-          <GoAContainer type="non-interactive" mb="l">
+          <GoabContainer type="non-interactive" mb="l">
             Start with the design system. You don't need to reinvent the wheel. The design system is
             the floor, not the ceiling. Start with it to save time building the common parts of a
             service, so that you can spend time on the unique challenges within your service
             context.
-          </GoAContainer>
+          </GoabContainer>
 
           <h3>The value of starting with the design system components</h3>
           <p>
diff --git a/src/routes/get-started/ReportBug.tsx b/src/routes/get-started/ReportBug.tsx
index adee4c7f8..c0c85f6e9 100644
--- a/src/routes/get-started/ReportBug.tsx
+++ b/src/routes/get-started/ReportBug.tsx
@@ -1,18 +1,22 @@
 import {
-  GoABlock,
-  GoAButton,
-  GoACallout,
-  GoADetails,
-  GoAFormItem,
-  GoAInput,
-  GoARadioItem,
-  GoARadioGroup,
-  GoATextArea
+  GoabBlock,
+  GoabButton,
+  GoabCallout,
+  GoabDetails,
+  GoabFormItem,
+  GoabInput,
+  GoabRadioItem,
+  GoabRadioGroup, GoabTextarea
 } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
 import { useEffect, useState } from "react";
 import { Octokit } from "octokit";
 import { useNavigate } from "react-router-dom";
+import {
+  GoabInputOnChangeDetail,
+  GoabRadioGroupOnChangeDetail,
+  GoabTextAreaOnChangeDetail
+} from "@abgov/ui-components-common";
   
 export default function ReportBugPage() {
   interface Package {
@@ -233,53 +237,53 @@ export default function ReportBugPage() {
           Let us know if you find a problem or inconsistency in the design system. Providing complete details in your bug report
           helps our team understand, prioritize, and fix the issue faster.
         </h3>
-        <GoACallout type="information" heading="Ensure you're using the latest package versions" mb="2xl">
+        <GoabCallout type="information" heading="Ensure you're using the latest package versions" mb="2xl">
           <ul>
             <li>Web Components - { versions["web"] }</li>
             <li>Angular Components - 3.2.2</li>
             <li>React Components - 5.4.1</li>
           </ul>
-        </GoACallout>
-        <GoAFormItem label="Your email" mb="xl" error={ emailError }>
-          <GoAInput name="email" value={ formValues.email } onChange={ handleChange } trailingContent="@gov.ab.ca" width="30ch" error={ !!emailError } />
-        </GoAFormItem>
-        <GoABlock gap="3xl" mb="xl">
-          <GoAFormItem label="Web components version" error={ webVersionError }>
-            <GoAInput name="webVersion" value={ formValues.webVersion } onChange={ handleChange } width="167px" error={ !!webVersionError } />
-          </GoAFormItem>
-          <GoAFormItem label="React or Angular components version" error={ otherVersionError }>
-            <GoAInput name="otherVersion" value={ formValues.otherVersion } onChange={ handleChange } width="167px" error={ !!otherVersionError } />
-          </GoAFormItem>
-        </GoABlock>
-        <GoAFormItem label="Expected Behaviour" mb="xl" helpText="A description of what you are expecting to happen." error={ expectedError }>
-          <GoATextArea name="expected" value={ formValues.expected } onChange={ handleChange } rows={ 6 } width="90%" error={ !!expectedError } />
-        </GoAFormItem>
-        <GoAFormItem label="Actual Behaviour" mb="xl" helpText="A description of what is actually happening (what the bug is)." error={ actualError }>
-          <GoATextArea name="actual" value={ formValues.actual } onChange={ handleChange } rows={ 6 } width="90%" error={ !!actualError } />
-        </GoAFormItem>
-        <GoAFormItem label="Replication steps" mb="xl" helpText="Detailed steps to reproduce your issue." error={ replicationError }>
-          <GoATextArea name="replication" value={ formValues.replication } onChange={ handleChange } rows={ 6 } width="90%" error={ !!replicationError } />
-        </GoAFormItem>
-        <GoAFormItem label="StackBlitz URL" mb="s" helpText="Share your code with us in an isolated environment." requirement="optional" error={ stackblitzError }>
-          <GoAInput name="stackblitz" value={ formValues.stackblitz } onChange={ handleChange } width="90%" error={ !!stackblitzError } />
-        </GoAFormItem>
-        <GoADetails heading="Why stackblitz?" maxWidth="90%" mb="s">
+        </GoabCallout>
+        <GoabFormItem label="Your email" mb="xl" error={ emailError }>
+          <GoabInput name="email" value={ formValues.email } onChange={(event: GoabInputOnChangeDetail) => handleChange(event.name, event.value) } trailingContent="@gov.ab.ca" width="30ch" error={ !!emailError } />
+        </GoabFormItem>
+        <GoabBlock gap="3xl" mb="xl">
+          <GoabFormItem label="Web components version" error={ webVersionError }>
+            <GoabInput name="webVersion" value={ formValues.webVersion } onChange={(event: GoabInputOnChangeDetail) => handleChange(event.name, event.value) } width="167px" error={ !!webVersionError } />
+          </GoabFormItem>
+          <GoabFormItem label="React or Angular components version" error={ otherVersionError }>
+            <GoabInput name="otherVersion" value={ formValues.otherVersion } onChange={(event: GoabInputOnChangeDetail) => handleChange(event.name, event.value) } width="167px" error={ !!otherVersionError } />
+          </GoabFormItem>
+        </GoabBlock>
+        <GoabFormItem label="Expected Behaviour" mb="xl" helpText="A description of what you are expecting to happen." error={ expectedError }>
+          <GoabTextarea name="expected" value={ formValues.expected } onChange={(event: GoabTextAreaOnChangeDetail) => handleChange(event.name, event.value) } rows={ 6 } width="90%" error={ !!expectedError } />
+        </GoabFormItem>
+        <GoabFormItem label="Actual Behaviour" mb="xl" helpText="A description of what is actually happening (what the bug is)." error={ actualError }>
+          <GoabTextarea name="actual" value={ formValues.actual } onChange={(event: GoabTextAreaOnChangeDetail) => handleChange(event.name, event.value) } rows={ 6 } width="90%" error={ !!actualError } />
+        </GoabFormItem>
+        <GoabFormItem label="Replication steps" mb="xl" helpText="Detailed steps to reproduce your issue." error={ replicationError }>
+          <GoabTextarea name="replication" value={ formValues.replication } onChange={(event: GoabTextAreaOnChangeDetail) => handleChange(event.name, event.value) } rows={ 6 } width="90%" error={ !!replicationError } />
+        </GoabFormItem>
+        <GoabFormItem label="StackBlitz URL" mb="s" helpText="Share your code with us in an isolated environment." requirement="optional" error={ stackblitzError }>
+          <GoabInput name="stackblitz" value={ formValues.stackblitz } onChange={(event: GoabInputOnChangeDetail) => handleChange(event.name, event.value) } width="90%" error={ !!stackblitzError } />
+        </GoabFormItem>
+        <GoabDetails heading="Why stackblitz?" maxWidth="90%" mb="s">
           The design system team uses <a href="https://stackblitz.com/" target="_blank">StackBlitz</a> to create and share live code
           examples. It allows us to easily see your code in an environment that is unaffected by the rest of your project. Create a free
           account and share your work directly with the team.
-        </GoADetails>
-        <GoAFormItem label="Jam.dev URL" mb="s" helpText="Show us the bug." requirement="optional" error={ jamError }>
-          <GoAInput name="jam" value={ formValues.jam } onChange={ handleChange } width="90%" error={ !!jamError } />
-        </GoAFormItem>
-        <GoADetails heading="Why jam.dev" maxWidth="90%" mb="s">
+        </GoabDetails>
+        <GoabFormItem label="Jam.dev URL" mb="s" helpText="Show us the bug." requirement="optional" error={ jamError }>
+          <GoabInput name="jam" value={ formValues.jam } onChange={(event: GoabInputOnChangeDetail) => handleChange(event.name, event.value) } width="90%" error={ !!jamError } />
+        </GoabFormItem>
+        <GoabDetails heading="Why jam.dev" maxWidth="90%" mb="s">
           The design system team uses <a href="https://jam.dev/" target="_blank">jam.dev</a> to share and report bugs. This gives us
           a lot of the information we need to understand what's happening and how to fix it. Create a free account and record and share
           the issue.        
-        </GoADetails>
-        <GoAFormItem label="Any additional information" mb="2xl" helpText="Add any other relevant context." requirement="optional">
-          <GoATextArea name="additional" value={ formValues.additional } onChange={ handleChange } rows={ 6 } width="90%" />
-        </GoAFormItem>
-        <GoAButton onClick={ submitBug }>Submit bug</GoAButton>
+        </GoabDetails>
+        <GoabFormItem label="Any additional information" mb="2xl" helpText="Add any other relevant context." requirement="optional">
+          <GoabTextarea name="additional" value={ formValues.additional } onChange={(event: GoabTextAreaOnChangeDetail) => handleChange(event.name, event.value) } rows={ 6 } width="90%" />
+        </GoabFormItem>
+        <GoabButton onClick={ submitBug }>Submit bug</GoabButton>
       </ComponentContent>
     );
   } else {
@@ -287,23 +291,22 @@ export default function ReportBugPage() {
       <ComponentContent>
         <a href="/get-started/support" className="back">Back</a>
         <h1>Issue Submitted</h1>
-        <GoACallout type="success" heading="Your issue has been submitted to Github" mb="xl">
+        <GoabCallout type="success" heading="Your issue has been submitted to Github" mb="xl">
           <a href={ responseURL } target="_blank">View your issue</a> in the design system backlog.
-        </GoACallout>
+        </GoabCallout>
         <h3>What happens next</h3>
         <ol>
           <li>The design system team will review the issue in the next backlog grooming</li>
           <li>Subscribe to your issue in Github to get notified of any updates</li>
         </ol>
         <h3>Create another issue</h3>
-        <GoARadioGroup name="bug-or-feature" onChange={bugOrFeature}>
-          <GoARadioItem value="bug" label="Report a bug" />
-          <GoARadioItem value="feature" label="Request a new feature" />
-        </GoARadioGroup>
+        <GoabRadioGroup name="bug-or-feature" onChange={(event: GoabRadioGroupOnChangeDetail) => bugOrFeature(event.name, event.value)}>
+          <GoabRadioItem value="bug" label="Report a bug" />
+          <GoabRadioItem value="feature" label="Request a new feature" />
+        </GoabRadioGroup>
         <br />
-        <GoAButton onClick={openPage} mt="m">Raise an issue</GoAButton>   
+        <GoabButton onClick={openPage} mt="m">Raise an issue</GoabButton>
       </ComponentContent>
     );
   }
 }
-  
\ No newline at end of file
diff --git a/src/routes/get-started/RequestFeature.tsx b/src/routes/get-started/RequestFeature.tsx
index af04bea19..9b3737ba1 100644
--- a/src/routes/get-started/RequestFeature.tsx
+++ b/src/routes/get-started/RequestFeature.tsx
@@ -1,4 +1,4 @@
-import { GoASpacer } from "@abgov/react-components";
+import { GoabSpacer } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
 import { Link } from "react-router-dom";
   
@@ -8,17 +8,17 @@ export default function RequestFeaturePage() {
       <a href="/get-started/support" className="back">Back</a>
       <h1>Request a new feature</h1>
       <h3>Anyone can propose a new component or pattern for the design system.</h3>
-      <GoASpacer vSpacing="2xs" />
+      <GoabSpacer vSpacing="2xs" />
       <h3>1. Check the design system backlog on Github</h3>
       <p>
         First, check the <a href="https://github.com/orgs/GovAlta/projects/35/views/1?filterQuery=" target="_blank">design system backlog</a> to see if someone else has already identified a similar need or idea.</p>
-      <GoASpacer vSpacing="2xs"  />
+      <GoabSpacer vSpacing="2xs"  />
       <h3>2. Talk to us</h3>
       <p>
         If a component or pattern doesn't exist in production or doesn't meet the needs of your users, contact the design
         system team. We'll discuss the issue to understand it better and decide on the next steps together.
       </p>
-      <GoASpacer vSpacing="2xs" />
+      <GoabSpacer vSpacing="2xs" />
       <h4>Get in touch with the design system team:</h4>
       <p>
         Book time with us in <a href="https://outlook.office365.com/book/BKGDesignsystemdropinhours@abgov.onmicrosoft.com/" target="_blank">Design system Drop-in hours</a>
@@ -29,9 +29,8 @@ export default function RequestFeaturePage() {
         <li>Explain your user and service goals</li>
         <li>Share any options and iterations that were explored with and without the Design System</li>
       </ul>
-      <GoASpacer vSpacing="2xs" />
+      <GoabSpacer vSpacing="2xs" />
       <Link to="/get-started/contribute">View our contribution process</Link>
     </ComponentContent>
   );
 }
-  
\ No newline at end of file
diff --git a/src/routes/get-started/Support.tsx b/src/routes/get-started/Support.tsx
index 9c089c5f6..f94c782b7 100644
--- a/src/routes/get-started/Support.tsx
+++ b/src/routes/get-started/Support.tsx
@@ -1,21 +1,21 @@
 import {
-  GoAButton,
-  GoAFormItem,
-  GoARadioGroup,
-  GoARadioItem,
-  GoASpacer,
-  GoAText,
+  GoabButton,
+  GoabFormItem,
+  GoabRadioGroup,
+  GoabRadioItem,
+  GoabSpacer, GoabText
 } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { GoabRadioGroupOnChangeDetail } from "@abgov/ui-components-common";
 
 export default function SupportPage() {
   let navigate = useNavigate();
 
   const [issueSelection, setIssueSelection] = useState<string>("")
 
-  function bugOrFeature(_: string, value: string) {
+  function bugOrFeature(value: string) {
     setIssueSelection(value);
   }
 
@@ -40,14 +40,14 @@ export default function SupportPage() {
         <p>
           Let us know if you find a problem in the design system or if you need a new component or pattern.
         </p>
-        <GoAFormItem label="What would you like to do?" mt="xs">
-          <GoARadioGroup name="bug-or-feature" onChange={bugOrFeature}>
-            <GoARadioItem value="bug" label="Report a bug" />
-            <GoARadioItem value="feature" label="Request a new feature" />
-          </GoARadioGroup>
-        </GoAFormItem>
+        <GoabFormItem label="What would you like to do?" mt="xs">
+          <GoabRadioGroup name="bug-or-feature" onChange={(event: GoabRadioGroupOnChangeDetail) => bugOrFeature(event.value)}>
+            <GoabRadioItem value="bug" label="Report a bug" />
+            <GoabRadioItem value="feature" label="Request a new feature" />
+          </GoabRadioGroup>
+        </GoabFormItem>
         <br />
-        <GoAButton onClick={openPage} mb="xl">Raise an issue</GoAButton>
+        <GoabButton onClick={openPage} mb="xl">Raise an issue</GoabButton>
         <h2 id="talk">Talk to us</h2>
         <h3>Slack</h3>
         <p>
@@ -70,35 +70,35 @@ export default function SupportPage() {
           <br />
           <a href="https://outlook.office365.com/book/BKGDesignsystemdropinhours@abgov.onmicrosoft.com/" target="_blank">Book a time</a>
         </p>
-        <GoASpacer vSpacing="m" /> 
+        <GoabSpacer vSpacing="m" />
         <h2 id="team">Design system team</h2>
-        <GoAText as="h3" mb="2xs">Product Owner</GoAText>
+        <GoabText as="h3" mb="2xs">Product Owner</GoabText>
         <p>
           Mark Elamatha | <a href="mailto:mark.elamatha@gov.ab.ca">mark.elamatha@gov.ab.ca</a>
         </p>
-        <GoAText as="h3" mb="2xs">Scrum master and DevOps</GoAText>
+        <GoabText as="h3" mb="2xs">Scrum master and DevOps</GoabText>
         <p>
           Dustin Nielsen | <a href="mailto:dustin.nielsen@gov.ab.ca">dustin.nielsen@gov.ab.ca</a>
         </p>
-        <GoAText as="h3" mb="2xs">Digital architect and Lead developer</GoAText>
+        <GoabText as="h3" mb="2xs">Digital architect and Lead developer</GoabText>
         <p>
           Chris Olsen | <a href="mailto:chris.olsen@gov.ab.ca">chris.olsen@gov.ab.ca</a>
         </p>
-        <GoAText as="h3" mb="2xs">Developers</GoAText>
+        <GoabText as="h3" mb="2xs">Developers</GoabText>
         <p>
           Vanessa Tran | <a href="mailto:vanessa.m.tran@gov.ab.ca">vanessa.m.tran@gov.ab.ca</a>
           <br />
           Syed Zeeshan | <a href="mailto:syed.zeeshan@gov.ab.ca">syed.zeeshan@gov.ab.ca</a>
         </p>
-        <GoAText as="h3" mb="2xs">QA Automation Developer</GoAText>
+        <GoabText as="h3" mb="2xs">QA Automation Developer</GoabText>
         <p>
           Ken Li | <a href="mailto:ken.li@gov.ab.ca">ken.li@gov.ab.ca</a>
         </p>
-        <GoAText as="h3" mb="2xs">Service designer</GoAText>
+        <GoabText as="h3" mb="2xs">Service designer</GoabText>
         <p>
           Ali Nicholls Asikinack | <a href="mailto:ali.nicholls-asikinack@gov.ab.ca">ali.nicholls-asikinack@gov.ab.ca</a>
         </p>
-        <GoAText as="h3" mb="2xs">UX designers</GoAText>
+        <GoabText as="h3" mb="2xs">UX designers</GoabText>
         <p>
           Thomas Jeffery | <a href="mailto:thomas.jeffery@gov.ab.ca">thomas.jeffery@gov.ab.ca</a>
           <br />
diff --git a/src/routes/get-started/developers/DevelopersOverview.tsx b/src/routes/get-started/developers/DevelopersOverview.tsx
index 30b44e29a..248a45c23 100644
--- a/src/routes/get-started/developers/DevelopersOverview.tsx
+++ b/src/routes/get-started/developers/DevelopersOverview.tsx
@@ -1,6 +1,7 @@
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 import { Link } from "react-router-dom";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import { GoabBlock } from "@abgov/react-components";
 
 export default function DevelopersOverviewPage() {
   return (
@@ -19,11 +20,11 @@ export default function DevelopersOverviewPage() {
       </p>
 
       <p>The design system consists of:</p>
-      <goa-block gap="xs" direction="column" mb="m">
+      <GoabBlock gap="xs" direction="column" mb="m">
         <a href="#design-token-intro">Design tokens</a>
         <a href="#components-intro">Components</a>
         <a href="#product-templates-intro">Product templates</a>
-      </goa-block>
+      </GoabBlock>
 
       <p>
         Designers also have access to the same resources in Figma. To begin with, they should
diff --git a/src/routes/get-started/developers/DevelopersSetup.tsx b/src/routes/get-started/developers/DevelopersSetup.tsx
index 3949033d9..bbb51bf5e 100644
--- a/src/routes/get-started/developers/DevelopersSetup.tsx
+++ b/src/routes/get-started/developers/DevelopersSetup.tsx
@@ -1,4 +1,4 @@
-import { GoABlock, GoAContainer, GoADivider } from "@abgov/react-components";
+import { GoabBlock, GoabContainer, GoabDivider } from "@abgov/react-components";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet";
 import "./Developers.css";
 import { ComponentContent } from "@components/component-content/ComponentContent";
@@ -6,45 +6,45 @@ import { ComponentContent } from "@components/component-content/ComponentContent
 export default function DevelopersSetupPage() {
   return (
     <div className="developer-setup">
-      <ComponentContent tocCssQuery="h2[id], h3[id]">
-        <h1>Developers</h1>
-        <h2 id="setup">Setup</h2>
-        <GoAContainer type="non-interactive">
-          <h3>Once you are setup, you can use the project template to quickly get started.</h3>
-          <a href="#templates">View project templates</a>
-        </GoAContainer>
-
-        <h3 id="angular">Angular UI components</h3>
-        <p>This is the web component library and utilizes Angular's web component integration.</p>
-
-        <h4>1. Add Dependencies</h4>
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
+    <ComponentContent tocCssQuery="h2[id], h3[id]">
+      <h1>Developers</h1>
+      <h2 id="setup">Setup</h2>
+      <GoabContainer type="non-interactive">
+        <h3>Once you are setup, you can use the project template to quickly get started.</h3>
+        <a href="#templates">View project templates</a>
+      </GoabContainer>
+
+      <h3 id="angular">Angular UI components</h3>
+      <p>This is the web component library and utilizes Angular's web component integration.</p>
+
+      <h4>1. Add Dependencies</h4>
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
           npm i @abgov/web-components
           npm i @abgov/angular-components@lts
         `}
-        />
-
-        <h4>2. Link ionicons in app/index.html Add the following in the head element</h4>
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
+      />
+
+      <h4>2. Link ionicons in app/index.html Add the following in the head element</h4>
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
           <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
           <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
         `}
-        />
-
-        <h4>3. Update src/app/app.module.ts as per the four steps below</h4>
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
+      />
+
+      <h4>3. Update src/app/app.module.ts as per the four steps below</h4>
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
           // 1. Import the CUSTOM_ELEMENTS_SCHEMA
           import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
           // 2. Import the libs
@@ -65,17 +65,17 @@ export default function DevelopersSetupPage() {
           })
           export class AppModule {}
         `}
-        />
+      />
 
-        <h4>4. Add the styles link in the src/styles.css file</h4>
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`@import "@abgov/web-components/index.css";`}
-        />
+      <h4>4. Add the styles link in the src/styles.css file</h4>
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`@import "@abgov/web-components/index.css";`}
+      />
 
-        <GoADivider mt="2xl" mb="xl" />
+      <GoabDivider mt="2xl" mb="xl" />
 
         <h3 id="react">React UI components</h3>
         <p>
@@ -113,33 +113,7 @@ export default function DevelopersSetupPage() {
           code={`@import "@abgov/web-components/index.css";`}
         />
 
-        <h4>4. Import the web-component library at the top of your entry point file</h4>
-        <p>Your entry point file might be called index.tsx or main.tsx:</p>
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
-          import React from "react";
-          import ReactDOM from "react-dom/client";
-          // Import the libs
-          import "@abgov/web-components"; 
-          
-          const App: React.FC = () => {
-            return <div>Hello, world!</div>;
-          };
-
-          const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
-          
-          root.render(
-            <React.StrictMode>
-              <App />
-            </React.StrictMode>
-          );
-      `}
-        />
-
-        <GoADivider mt="2xl" mb="xl" />
+      <GoabDivider mt="2xl" mb="xl" />
 
         <h3 id="vue">Vue web components</h3>
         <p>This library contains react components from the Government of Alberta.</p>
@@ -200,17 +174,17 @@ export default function DevelopersSetupPage() {
           code={`@import "@abgov/web-components/index.css";`}
         />
 
-        <GoADivider mt="2xl" mb="xl" />
-
-        <h3 id="templates">Angular/React templates</h3>
-        <GoABlock gap="xl" mb="xl">
-          <a href="https://github.com/GovAlta/ui-components-angular-template" target="_blank">
-            Angular template
-          </a>
-          <a href="https://github.com/GovAlta/ui-components-react-template" target="_blank">
-            React template
-          </a>
-        </GoABlock>
+      <GoabDivider mt="2xl" mb="xl" />
+
+      <h3 id="templates">Angular/React templates</h3>
+      <GoabBlock gap="xl" mb="xl">
+        <a href="https://github.com/GovAlta/ui-components-angular-template" target="_blank">
+          Angular template
+        </a>
+        <a href="https://github.com/GovAlta/ui-components-react-template" target="_blank">
+          React template
+        </a>
+      </GoabBlock>
 
         <p>To use the templates, follow these steps:</p>
         <ol>
diff --git a/src/routes/get-started/developers/SupportedBrowsers.tsx b/src/routes/get-started/developers/SupportedBrowsers.tsx
index 7a24c9a00..63d7ebf27 100644
--- a/src/routes/get-started/developers/SupportedBrowsers.tsx
+++ b/src/routes/get-started/developers/SupportedBrowsers.tsx
@@ -1,4 +1,4 @@
-import { GoACheckbox, GoAContainer, GoATable } from "@abgov/react-components";
+import { GoabCheckbox, GoabContainer, GoabTable } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 
 export default function SupportedBrowsersPage() {
@@ -10,7 +10,7 @@ export default function SupportedBrowsersPage() {
         The design system components are tested on the following browsers and devices:
       </h3>
 
-      <GoATable width="564px">
+      <GoabTable width="564px">
         <thead>
           <tr>
             <th>Browser</th>
@@ -24,64 +24,64 @@ export default function SupportedBrowsersPage() {
           <tr>
             <td>Google Chrome</td>
             <td>
-              <GoACheckbox checked name="browser" disabled={true} />
+              <GoabCheckbox checked name="browser" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="browser" disabled={true} />
+              <GoabCheckbox checked name="browser" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="browser" disabled={true} />
+              <GoabCheckbox checked name="browser" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="browser" disabled={true} />
+              <GoabCheckbox checked name="browser" disabled={true} />
             </td>
           </tr>
           <tr>
             <td>Microsoft Edge</td>
             <td>
-              <GoACheckbox checked name="browser" disabled={true} />
+              <GoabCheckbox checked name="browser" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="browser" disabled={true} />
+              <GoabCheckbox checked name="browser" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked={false} name="browser" disabled={true} />
+              <GoabCheckbox checked={false} name="browser" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked={false} name="browser" disabled={true} />
+              <GoabCheckbox checked={false} name="browser" disabled={true} />
             </td>
           </tr>
           <tr>
             <td>Mozilla Firefox</td>
             <td>
-              <GoACheckbox checked name="browser" disabled={true} />
+              <GoabCheckbox checked name="browser" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="browser" disabled={true} />
+              <GoabCheckbox checked name="browser" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked name="browser" disabled={true} />
+              <GoabCheckbox checked name="browser" disabled={true} />
             </td>
             <td>
-              <GoACheckbox checked={false} name="browser" disabled={true} />
+              <GoabCheckbox checked={false} name="browser" disabled={true} />
             </td>
           </tr>
           <tr>
             <td>Apple Safari</td>
             <td>N/A</td>
             <td>
-              <GoACheckbox checked name="browser" disabled={true} />
+              <GoabCheckbox checked name="browser" disabled={true} />
             </td>
             <td>N/A</td>
             <td>
-              <GoACheckbox checked name="browser" disabled={true} />
+              <GoabCheckbox checked name="browser" disabled={true} />
             </td>
           </tr>
         </tbody>
-      </GoATable>
+      </GoabTable>
 
       <div className="max-width-72ch">
-        <GoAContainer type="non-interactive" mt="2xl">
+        <GoabContainer type="non-interactive" mt="2xl">
           <h3>Representative mobile OS used in testing</h3>
           <p>
             <strong>Android OS:</strong> 10+
@@ -89,7 +89,7 @@ export default function SupportedBrowsersPage() {
           <p>
             <strong>iOS: </strong> 15+
           </p>
-        </GoAContainer>
+        </GoabContainer>
       </div>
     </ComponentContent>
   );
diff --git a/src/routes/get-started/developers/upgrade-guide/AngularGuide.tsx b/src/routes/get-started/developers/upgrade-guide/AngularGuide.tsx
new file mode 100644
index 000000000..4aca0ba4c
--- /dev/null
+++ b/src/routes/get-started/developers/upgrade-guide/AngularGuide.tsx
@@ -0,0 +1,411 @@
+import { GoabCallout, GoabTable } from "@abgov/react-components";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { InlineCode } from "@components/inline-code/InlineCode.tsx";
+import { components } from "@routes/get-started/developers/upgrade-guide/components.ts";
+
+export const AngularGuide = () => {
+  const angularComponents = components.filter(x => x.angular);
+  const componentsWithTemplateRef = angularComponents.filter(component =>
+    component.angular?.some(prop => prop.v4?.type.includes("TemplateRef"))
+  );
+  return (
+    <>
+      <h2 id="angular">Migrating an Angular app</h2>
+      <GoabCallout>
+        <p>
+          <InlineCode>@abgov/angular-components</InlineCode> supports only Angular v16 and above.
+        </p>
+      </GoabCallout>
+
+      <h4>1. Update dependencies</h4>
+      <CodeSnippet
+        lang="typescript"
+        allowCopy={true}
+        code={`
+          npm i @abgov/web-components@latest
+          npm i @abgov/angular-components@latest
+        `}
+      />
+
+      <h4>2. Update angular component dependencies and import paths</h4>
+      <CodeSnippet
+        lang="typescript"
+        allowCopy={true}
+        code={`
+          // Before
+          import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
+          
+          @Component({
+            selector: "app-accordion",
+            standalone: true,
+            templateUrl: "./accordion.component.html",
+            schemas: [CUSTOM_ELEMENTS_SCHEMA] // Required for v3 but will be removed in v4
+          })
+          export class AccordionComponent {}
+          
+          // After
+          import {GoabAccordion, GoabButton, GoabBadge} from '@abgov/angular-components';
+          
+          @Component({
+            selector: "app-accordion",
+            standalone: true,
+            imports: [GoabAccordion, GoabButton, GoabBadge],
+            templateUrl: "./accordion.component.html"
+          })
+          export class AccordionComponent {}
+        `}
+      />
+
+      <h4>
+        3. Rename all components name from <InlineCode>goa-name</InlineCode> to{" "}
+        <InlineCode>goab-name</InlineCode> in HTML templates
+      </h4>
+      <p>
+        In v4, all Angular component names have been updated from <InlineCode>goa-</InlineCode> to{" "}
+        <InlineCode>goab-</InlineCode>, with the following exceptions:
+      </p>
+      <ul>
+        <li>
+          <strong>TwoColumnLayout</strong>: remains <InlineCode>goa-two-column-layout</InlineCode>
+        </li>
+        <li>
+          <strong>ThreeColumnLayout</strong>: remains{" "}
+          <InlineCode>goa-three-column-layout</InlineCode>
+        </li>
+      </ul>
+      <p>
+        As a result, imports and dependencies for pages using these components will not need to be
+        changed.
+      </p>
+      <h4>Special Case:</h4>
+      <p>
+        The <InlineCode>goa-one-column-layout</InlineCode> component has been renamed to{" "}
+        <InlineCode>goab-column-layout</InlineCode>
+      </p>
+      <h4>Next Steps:</h4>
+      <p>
+        After updating your packages and imports, perform a find/replace in your code editor to
+        change <InlineCode>goa-</InlineCode> to <InlineCode>goab-</InlineCode> for all component
+        names. For example:
+      </p>
+      <CodeSnippet
+        lang="html"
+        allowCopy={true}
+        code={`
+            <!--Before-->
+            <goa-circular-progress variant="inline" size="small" visible="true"></goa-circular-progress>
+            <goa-accordion heading="Heading" [open]="open"> Content 1</goa-accordion>
+            <goa-button (_click)="onClick()" type="tertiary">Tertiary</goa-button>
+            // After
+            <goab-circular-progress variant="inline" size="small" [visible]="true"></goab-circular-progress>
+            <goab-accordion heading="Heading" [open]="open"> Content 1 </goab-accordion>
+            <goab-button (onClick)="onClick()" type="tertiary">Tertiary</goab-button>
+        `}
+      />
+
+      <h4>4. Update component margin properties</h4>
+      <p>
+        The margin properties for components have been standardized. Previously, margin values in
+        Angular components were defined as <InlineCode>string</InlineCode>. Now, these margin
+        properties are categorized under <InlineCode>Spacing</InlineCode>, ensuring consistency:
+      </p>
+      <GoabTable width="100%">
+        <thead>
+        <th>Property Name</th>
+        <th>v3</th>
+        <th>v4</th>
+        </thead>
+        <tbody>
+        <tr>
+          <td>
+            <InlineCode>mt</InlineCode>
+          </td>
+          <td>
+            <InlineCode>string</InlineCode>
+          </td>
+          <td>
+            <InlineCode>Spacing</InlineCode>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <InlineCode>mb</InlineCode>
+          </td>
+          <td>
+            <InlineCode>string</InlineCode>
+          </td>
+          <td>
+            <InlineCode>Spacing</InlineCode>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <InlineCode>ml</InlineCode>
+          </td>
+          <td>
+            <InlineCode>string</InlineCode>
+          </td>
+          <td>
+            <InlineCode>Spacing</InlineCode>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <InlineCode>mr</InlineCode>
+          </td>
+          <td>
+            <InlineCode>string</InlineCode>
+          </td>
+          <td>
+            <InlineCode>Spacing</InlineCode>
+          </td>
+        </tr>
+        </tbody>
+      </GoabTable>
+
+      <h4>5. Update component properties</h4>
+      <p>
+        In version 4, we have updated all Angular component properties from lowercase to camelCase.
+        For example, a property previously named <InlineCode>headingsize</InlineCode> is now{" "}
+        <InlineCode>headingSize</InlineCode>.
+      </p>
+      <p>
+        Additionally, in version 3, our Angular component properties were defined using basic types
+        like <InlineCode>string</InlineCode> or <InlineCode>boolean</InlineCode>. In version 4, we
+        introduced custom types for these properties and function arguments to ensure that the type
+        checker validates the data structure specific to our components. You can find these changes
+        detailed in the tables below:
+      </p>
+      <GoabTable width={"100%"} mb={"m"}>
+        <thead>
+        <th>Component Name</th>
+        <th>v3</th>
+        <th>v4</th>
+        </thead>
+        <tbody>
+        {angularComponents.map((component, index) => (
+          <tr key={index}>
+            <td>{component.name}</td>
+            <td>
+              <ul>
+                {component.angular?.map((prop, propsIndex) => (
+                  <li key={propsIndex}>
+                    {prop.v3?.name && <span>{prop.v3.name + ": " + prop.v3.type}</span>}{" "}
+                    {prop.v3 == null && "Do not have"}
+                  </li>
+                ))}
+              </ul>
+            </td>
+            <td>
+              <ul>
+                {component.angular?.map((prop, propsIndex) => (
+                  <li key={propsIndex}>
+                    {prop.v4?.name && <span>{prop.v4.name + ": " + prop.v4.type}</span>}{" "}
+                    {prop.v4 == null && <strong>Removed</strong>}{" "}
+                    {prop.v3 == null && <strong>(Newly added)</strong>}
+                  </li>
+                ))}
+              </ul>
+            </td>
+          </tr>
+        ))}
+        </tbody>
+      </GoabTable>
+
+      <h4>6. Update component slot content using Angular's ng-template</h4>
+      <p>
+        The most common manual update that teams will need to make involves adjusting slot content
+        that uses <InlineCode>slot="name"</InlineCode> to reference a property. For example,
+      </p>
+
+      <CodeSnippet
+        lang="html"
+        allowCopy={true}
+        code={`
+            <!--Before-->
+            <goa-popover>
+              <p>This is a popover</p>
+              It can be used for a number of different contexts.
+              <!--Slot target is required but can be forgotten because there are no errors alerted if we miss it-->
+              <div slot="target">
+                <goa-button type="secondary" size="compact">Click me</goa-button>
+              </div>
+            </goa-popover>
+            
+            <!--After-->
+            <!-- target property is required for goab-popover -->
+            <goab-popover target="popOverTarget">
+              <p>This is a popover</p>
+                It can be used for a number of different contexts.
+              <ng-template #popOverTarget>
+                <goab-button type="secondary" size="compact">Click me</goab-button>
+              </ng-template>
+            </goab-popover>
+        `}
+      />
+
+      <div className="descriptionWithList">
+        <h4>
+          Components with <InlineCode>slot</InlineCode> replaced by Angular{" "}
+          <InlineCode>ng-template</InlineCode> references:
+        </h4>
+        <GoabTable>
+          <thead>
+          <th>Component Name</th>
+          <th>v3</th>
+          <th>v4</th>
+          </thead>
+          <tbody>
+          {componentsWithTemplateRef.map((component, index) => (
+            <tr key={index}>
+              <td>{component.name}</td>
+              <td>
+                <ul>
+                  {component.angular?.map(
+                    (prop, propIndex) =>
+                      prop.v4?.type.includes("TemplateRef") && (
+                        <li key={propIndex}>
+                          {prop.v3?.name}: {prop.v3?.type}
+                        </li>
+                      )
+                  )}
+                </ul>
+              </td>
+              <td>
+                <ul>
+                  {component.angular?.map(
+                    (prop, propIndex) =>
+                      prop.v4?.type.includes("TemplateRef") && (
+                        <li key={propIndex}>
+                          {prop.v4?.name}: {prop.v4?.type}
+                        </li>
+                      )
+                  )}
+                </ul>
+              </td>
+            </tr>
+          ))}
+          </tbody>
+        </GoabTable>
+      </div>
+
+      <h4>
+        7. Remove <InlineCode>goaValue</InlineCode> and <InlineCode>goaChecked</InlineCode> from the
+        Angular input components
+      </h4>
+      <p>
+        In v4, the <InlineCode>goaValue</InlineCode> and <InlineCode>goaChecked</InlineCode>{" "}
+        directives can be removed from our input components when using Angular Forms. This applies
+        to the following components:
+      </p>
+      <ul>
+        <li>Checkbox</li>
+        <li>Date picker</li>
+        <li>Dropdown</li>
+        <li>Input</li>
+        <li>Radio</li>
+        <li>Textarea</li>
+      </ul>
+
+      <p>
+        To handle user input in your app, you can use Angular's reactive forms, template-driven
+        forms, or simply add an event handler. Below are examples of how to use our Angular checkbox
+        component in these three different approaches:
+      </p>
+
+      <h5>1. Reactive</h5>
+      <CodeSnippet
+        lang={"ts"}
+        allowCopy={true}
+        code={`
+          import { GoabCheckbox } from "@abgov/angular-components";
+          import { Component } from "@angular/core";
+          import { FormBuilder, FormGroup, ReactiveFormsModule } from "@angular/forms";
+          @Component({
+            standalone: true,
+            selector: "abgov-checkbox",
+            templateUrl: "./checkbox.component.html",
+            imports: [
+              GoABCheckbox,
+              ReactiveFormsModule
+            ]
+          })
+          class CheckboxComponent {
+            form!: FormGroup;
+            constructor(private fb: FormBuilder) {
+              this.form = this.fb.group({
+                checked: [false]
+              });
+            }
+          }
+        `}></CodeSnippet>
+      <CodeSnippet
+        lang={"html"}
+        allowCopy={true}
+        code={`
+            <form [formGroup]="form">
+              <goab-checkbox formControlName="checked" text="Item"></goab-checkbox>
+            </form>
+          `}></CodeSnippet>
+
+      <h5>2. Template-driven</h5>
+      <CodeSnippet
+        lang={"ts"}
+        allowCopy={true}
+        code={`
+          import { GoabCheckbox } from "@abgov/angular-components";
+          import { Component } from "@angular/core";
+          import { FormsModule } from "@angular/forms";
+          @Component({
+            standalone: true,
+            selector: "abgov-checkbox",
+            templateUrl: "./checkbox.component.html",
+            imports: [
+              GoabCheckbox,
+              FormsModule,
+            ]
+          })
+          class CheckboxComponent {
+            checked = false;
+          }
+        `}></CodeSnippet>
+      <CodeSnippet
+        lang={"html"}
+        allowCopy={true}
+        code={`
+            <form>
+              <goab-checkbox [(ngModel)]="checked" text="Item"></goab-checkbox>
+            </form>
+          `}></CodeSnippet>
+
+      <h5>3. Event handler</h5>
+      <CodeSnippet
+        lang={"ts"}
+        allowCopy={true}
+        code={`
+          import { GoabCheckbox, GoabCheckboxOnChangeDetail } from "@abgov/angular-components";
+          import { Component } from "@angular/core";
+          @Component({
+            standalone: true,
+            selector: "abgov-checkbox",
+            templateUrl: "./checkbox.component.html",
+            imports: [
+              GoABCheckbox
+            ]
+          })
+          class CheckboxComponent {
+            checked = false;
+            onChange(event: GoabCheckboxOnChangeDetail) {
+               this.checked = event.checked;
+            }
+          }
+        `}></CodeSnippet>
+      <CodeSnippet
+        lang="html"
+        allowCopy={true}
+        code={`
+          <goab-checkbox name="item" text="Item" [value]="checked" (onChange)="onChange($event)"></goab-checkbox>
+          `}></CodeSnippet>
+    </>
+  );
+};
diff --git a/src/routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx b/src/routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx
new file mode 100644
index 000000000..e2ed38e3e
--- /dev/null
+++ b/src/routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx
@@ -0,0 +1,59 @@
+import { GoabContainer } from "@abgov/react-components";
+import "../Developers.css";
+import { ComponentContent } from "@components/component-content/ComponentContent";
+import css from "@routes/patterns/patterns.module.css";
+import { ReactGuide } from "@routes/get-started/developers/upgrade-guide/ReactGuide.tsx";
+import { AngularGuide } from "@routes/get-started/developers/upgrade-guide/AngularGuide.tsx";
+import { InlineCode } from "@components/inline-code/InlineCode.tsx";
+
+export default function DevelopersUpgradePage() {
+  return (
+    <div className="developer-setup">
+      <ComponentContent tocCssQuery="h2[id], h3[id]">
+        <h1>Version update guide</h1>
+        <h3>Step-by-step guide to updating your code from DDD Design System v3 to v4 (Angular) and v5 to v6 (React)</h3>
+        <p>
+          This guide will help you update your project to DDD Design System v4 (Angular) and v6 (React). The update
+          introduces key improvements, including enhanced alignment between Angular and React
+          properties, better error checking during builds, and type-ahead suggestions for Angular
+          components. These changes aim to improve the developer experience when working with the
+          design system.
+        </p>
+        <GoabContainer>
+          <h3>Major differences between current and new version</h3>
+          <p>
+            One of the most significant changes in v4 (Angular) and v6 (React) is the renaming of component prefixes to align
+            better across frameworks. In React, the prefix changes from <InlineCode>GoA</InlineCode>{" "}
+            to <InlineCode>Goab</InlineCode>, while in Angular, it changes from{" "}
+            <InlineCode>goa-</InlineCode> to <InlineCode>goab-</InlineCode>. See the following
+            examples:
+          </p>
+          <div className={css.descriptionWithList}>
+            <h4>React</h4>
+            <ul>
+              <li>
+                <InlineCode>GoAButton</InlineCode> will be <InlineCode>GoabButton</InlineCode>
+              </li>
+              <li>
+                <InlineCode>GoAContainer</InlineCode> will be <InlineCode>GoabContainer</InlineCode>
+              </li>
+            </ul>
+            <h4>Angular</h4>
+            <ul>
+              <li>
+                <InlineCode>goa-button</InlineCode> will be <InlineCode>goab-button</InlineCode>
+              </li>
+              <li>
+                <InlineCode>goa-container</InlineCode> will be{" "}
+                <InlineCode>goab-container</InlineCode>
+              </li>
+            </ul>
+          </div>
+        </GoabContainer>
+
+        <ReactGuide />
+        <AngularGuide />
+      </ComponentContent>
+    </div>
+  );
+}
diff --git a/src/routes/get-started/developers/upgrade-guide/ReactGuide.tsx b/src/routes/get-started/developers/upgrade-guide/ReactGuide.tsx
new file mode 100644
index 000000000..eb6887ad6
--- /dev/null
+++ b/src/routes/get-started/developers/upgrade-guide/ReactGuide.tsx
@@ -0,0 +1,86 @@
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabTable } from "@abgov/react-components";
+import { InlineCode } from "@components/inline-code/InlineCode.tsx";
+import { components } from "@routes/get-started/developers/upgrade-guide/components.ts";
+
+export const ReactGuide = () => {
+  const componentNames = components.filter(x => x.react);
+  return (
+    <>
+      <h2 id="react">Migrating a React app</h2>
+      <p>
+        The React components for the DDD Design System are still located in the{" "}
+        <InlineCode>@abgov/react-components</InlineCode> package.
+      </p>
+
+      <h4>1. Update dependencies</h4>
+      <CodeSnippet
+        lang="typescript"
+        allowCopy={true}
+        code={`
+          npm i @abgov/web-components@latest
+          npm i @abgov/react-components@latest
+        `}
+      />
+
+      <h4>
+        2. Rename all components name from <InlineCode>GoAName</InlineCode> to{" "}
+        <InlineCode>GoabName</InlineCode>
+      </h4>
+      <p>
+        After updating your packages, use your preferred code editor to perform a find/replace
+        operation. Replace the prefix <InlineCode>GoA--</InlineCode> with{" "}
+        <InlineCode>Goab--</InlineCode> for all component names. For example:
+      </p>
+      <CodeSnippet
+        lang="typescript"
+        allowCopy={true}
+        code={`
+          // Before
+          import {GoAAccordion, GoAButton, GoACallout, GoAHeadingSize } from '@abgov/react-components';
+          
+          // After
+          import {GoabAccordion, GoabButton, GoabCallout, GoabAccordionHeadingSize} from '@abgov/react-components';
+        `}
+      />
+
+      <h4>3. Update components' props that have changed</h4>
+      <p>
+        In v6, some of our properties have changed, go through the following table and make changes as necessary in your codebase.
+      </p>
+      <GoabTable width={"100%"} mb={"m"}>
+        <thead>
+        <th>Component Name</th>
+        <th>v5(lts)</th>
+        <th>v6(latest)</th>
+        </thead>
+        <tbody>
+        {componentNames.map((component, index) => (
+          <tr key={index}>
+            <td>{component.name}</td>
+            <td>
+              <ul>
+                {component.react?.map((prop, propsIndex) => (
+                  <li key={propsIndex}>
+                    {prop.name}: {prop.v5 && <span>{prop.v5}</span>} {prop.v5 == null && "N/A"}
+                  </li>
+                ))}
+              </ul>
+            </td>
+            <td>
+              <ul>
+                {component.react?.map((prop, propsIndex) => (
+                  <li key={propsIndex}>
+                    {prop.name}: {prop.v6 && <span>{prop.v6}</span>}{" "}
+                    {prop.v6 == null && <strong>Removed</strong>}{" "}
+                  </li>
+                ))}
+              </ul>
+            </td>
+          </tr>
+        ))}
+        </tbody>
+      </GoabTable>
+    </>
+  );
+};
diff --git a/src/routes/get-started/developers/upgrade-guide/components.ts b/src/routes/get-started/developers/upgrade-guide/components.ts
new file mode 100644
index 000000000..c121eaa5e
--- /dev/null
+++ b/src/routes/get-started/developers/upgrade-guide/components.ts
@@ -0,0 +1,1409 @@
+export type UpgradedComponent = {
+  name: string;
+  angular?: AngularUpgradedProps[];
+  react?: ReactUpgradedProps[];
+};
+export type ReactUpgradedProps = {
+  name: string;
+  v5?: string;
+  v6?: string;
+};
+export type AngularUpgradedProps = {
+  v3?: {
+    name: string;
+    type: string;
+  };
+  v4?: {
+    name: string;
+    type: string;
+  };
+};
+
+export const components: UpgradedComponent[] = [
+  {
+    name: "Accordion",
+    angular: [
+      {
+        v3: {
+          name: "headingsize",
+          type: "string",
+        },
+        v4: {
+          name: "headingSize",
+          type: "GoabAccordionHeadingSize",
+        },
+      },
+      {
+        v3: {
+          name: "headingcontent",
+          type: "slot",
+        },
+        v4: {
+          name: "headingContent",
+          type: "TemplateRef",
+        },
+      },
+    ],
+  },
+  {
+    name: "Badge",
+    angular: [
+      {
+        v3: {
+          name: "type",
+          type: "string",
+        },
+        v4: {
+          name: "type",
+          type: "GoabBadgeType",
+        },
+      },
+    ],
+  },
+  {
+    name: "Block",
+    react: [
+      {
+        name: "direction",
+        v5: "Direction",
+        v6: "GoabBlockDirection",
+      },
+      {
+        name: "alignment",
+        v5: "Alignment",
+        v6: "GoabBlockAlignment",
+      },
+    ],
+    angular: [
+      {
+        v3: {
+          name: "gap",
+          type: "string",
+        },
+        v4: {
+          name: "gap",
+          type: "Spacing",
+        },
+      },
+      {
+        v3: {
+          name: "direction",
+          type: "string",
+        },
+        v4: {
+          name: "direction",
+          type: "GoabBlockDirection",
+        },
+      },
+      {
+        v3: {
+          name: "alignment",
+          type: "string",
+        },
+        v4: {
+          name: "alignment",
+          type: "GoabBlockAlignment",
+        },
+      },
+    ],
+  },
+  {
+    name: "Button",
+    angular: [
+      {
+        v3: {
+          name: "type",
+          type: "string",
+        },
+        v4: {
+          name: "type",
+          type: "GoabButtonType",
+        },
+      },
+      {
+        v3: {
+          name: "size",
+          type: "string",
+        },
+        v4: {
+          name: "size",
+          type: "GoabButtonSize",
+        },
+      },
+      {
+        v3: {
+          name: "variant",
+          type: "string",
+        },
+        v4: {
+          name: "variant",
+          type: "GoabButtonVariant",
+        },
+      },
+      {
+        v3: {
+          name: "leadingicon",
+          type: "string",
+        },
+        v4: {
+          name: "leadingIcon",
+          type: "GoabIconType",
+        },
+      },
+      {
+        v3: {
+          name: "trailingicon",
+          type: "string",
+        },
+        v4: {
+          name: "trailingIcon",
+          type: "GoabIconType",
+        },
+      },
+      {
+        v3: {
+          name: "_click",
+          type: "() => void",
+        },
+        v4: {
+          name: "onClick",
+          type: "() => void",
+        },
+      },
+    ],
+  },
+  {
+    name: "Button group",
+    angular: [
+      {
+        v3: {
+          name: "alignment",
+          type: "string",
+        },
+        v4: {
+          name: "alignment",
+          type: "GoabButtonGroupAlignment",
+        },
+      },
+      {
+        v3: {
+          name: "gap",
+          type: "string",
+        },
+        v4: {
+          name: "gap",
+          type: "GoabButtonGroupGap",
+        },
+      },
+    ],
+  },
+  {
+    name: "Callout",
+    angular: [
+      {
+        v3: {
+          name: "type",
+          type: "string",
+        },
+        v4: {
+          name: "type",
+          type: "GoabCalloutType",
+        },
+      },
+      {
+        v3: {
+          name: "size",
+          type: "string",
+        },
+        v4: {
+          name: "size",
+          type: "GoabCalloutSize",
+        },
+      },
+    ],
+  },
+  {
+    name: "Checkbox",
+    react: [
+      {
+        name: "onChange",
+        v5: "(name: string, value: boolean) => void;",
+        v6: "(details: GoabCheckboxOnChangeDetail) => void;",
+      },
+    ],
+    angular: [
+      {
+        v3: {
+          name: "description",
+          type: "string | slot",
+        },
+        v4: {
+          name: "description",
+          type: "string | TemplateRef",
+        },
+      },
+      {
+        v3: {
+          name: "_change",
+          type: "(e: CustomEvent) => void",
+        },
+        v4: {
+          name: "onChange",
+          type: "(e: GoabCheckboxOnChangeDetail) => void",
+        },
+      },
+    ],
+  },
+  {
+    name: "Chip",
+    angular: [
+      {
+        v3: {
+          name: "leadingicon",
+          type: "string",
+        },
+        v4: {
+          name: "leadingIcon",
+          type: "GoabIconType | null",
+        },
+      },
+      {
+        v3: {
+          name: "variant",
+          type: "string",
+        },
+        v4: {
+          name: "variant",
+          type: "GoabChipVariant",
+        },
+      },
+      {
+        v3: {
+          name: "_onClick",
+          type: "() => void",
+        },
+        v4: {
+          name: "onClick",
+          type: "() => void",
+        },
+      },
+    ],
+  },
+  {
+    name: "Container",
+    angular: [
+      {
+        v3: {
+          name: "type",
+          type: "string",
+        },
+        v4: {
+          name: "type",
+          type: "GoabContainerType",
+        },
+      },
+      {
+        v3: {
+          name: "accent",
+          type: "string",
+        },
+        v4: {
+          name: "accent",
+          type: "GoabContainerAccent",
+        },
+      },
+      {
+        v3: {
+          name: "padding",
+          type: "string",
+        },
+        v4: {
+          name: "padding",
+          type: "GoabContainerPadding",
+        },
+      },
+      {
+        v3: {
+          name: "width",
+          type: "string",
+        },
+        v4: {
+          name: "width",
+          type: "GoabContainerWidth",
+        },
+      },
+      {
+        v3: {
+          name: "title",
+          type: "slot",
+        },
+        v4: {
+          name: "title",
+          type: "TemplateRef",
+        },
+      },
+      {
+        v3: {
+          name: "actions",
+          type: "slot",
+        },
+        v4: {
+          name: "actions",
+          type: "TemplateRef",
+        },
+      },
+    ],
+  },
+  {
+    name: "Date picker",
+    react: [
+      {
+        name: "onChange",
+        v5: "(name: string, value: Date) => void;",
+        v6: "(details: GoabDatePickerOnChangeDetail) => void;",
+      },
+    ],
+    angular: [
+      {
+        v3: {
+          name: "_change",
+          type: "(e: CustomEvent) => void",
+        },
+        v4: {
+          name: "onChange",
+          type: "(detail: GoabDatePickerOnChangeDetail) => void",
+        },
+      },
+    ],
+  },
+  {
+    name: "Dropdown",
+    react: [
+      {
+        name: "onChange",
+        v5: "(name: string, value: string) => void;",
+        v6: "(details: GoabDropdownOnChangeDetail) => void;",
+      },
+    ],
+    angular: [
+      {
+        v3: {
+          name: "leadingicon",
+          type: "string",
+        },
+        v4: {
+          name: "leadingIcon",
+          type: "GoabIconType",
+        },
+      },
+      {
+        v3: {
+          name: "_change",
+          type: "(name: string, value: string[] | string | null) => void",
+        },
+        v4: {
+          name: "onChange",
+          type: "(detail: GoabDropdownOnChangeDetail) => void",
+        },
+      },
+    ],
+  },
+  {
+    name: "File uploader",
+    react: [
+      {
+        name: "onDelete",
+        v5: "() => void;",
+        v6: "(detail: GoABFileUploadOnDeleteDetail) => void;",
+      },
+      {
+        name: "onCancel",
+        v5: "() => void;",
+        v6: "(detail: GoABFileUploadOnCancelDetail) => void;",
+      },
+    ],
+    angular: [
+      {
+        v3: {
+          name: "_cancel",
+          type: "() => void",
+        },
+        v4: {
+          name: "onCancel",
+          type: "(detail: GoabFileUploadCardOnCancelDetail) => void",
+        },
+      },
+      {
+        v3: {
+          name: "_delete",
+          type: "() => void",
+        },
+        v4: {
+          name: "onDelete",
+          type: "(detail: GoabFileUploadCardOnDeleteDetail) => void",
+        },
+      },
+    ],
+  },
+  {
+    name: "File uploader input",
+    react: [
+      {
+        name: "onSelect",
+        v5: "(file: File) => void;",
+        v6: "(detail: GoabFileUploadInputOnSelectFileDetail) => void;",
+      },
+    ],
+    angular: [
+      {
+        v3: {
+          name: "variant",
+          type: "string",
+        },
+        v4: {
+          name: "variant",
+          type: "GoabFileUploadInputVariant",
+        },
+      },
+      {
+        v3: {
+          name: "_selectFile",
+          type: "(e: CustomEvent) => void",
+        },
+        v4: {
+          name: "onSelectFile",
+          type: "(detail: GoabFileUploadInputOnSelectFileDetail) => void",
+        },
+      },
+    ],
+  },
+  {
+    name: "App Footer Nav Section",
+    angular: [
+      {
+        v4: {
+          name: "slot",
+          type: "'nav'",
+        },
+      },
+    ],
+  },
+  {
+    name: "App Footer Meta Section",
+    angular: [
+      {
+        v4: {
+          name: "slot",
+          type: "'meta'",
+        },
+      },
+    ],
+  },
+  {
+    name: "Form item",
+    angular: [
+      {
+        v3: {
+          name: "labelsize",
+          type: "string",
+        },
+        v4: {
+          name: "labelSize",
+          type: "GoabFormItemLabelSize",
+        },
+      },
+      {
+        v3: {
+          name: "requirement",
+          type: "string",
+        },
+        v4: {
+          name: "requirement",
+          type: "GoabFormItemRequirement",
+        },
+      },
+    ],
+  },
+  {
+    name: "Form stepper",
+    react: [
+      {
+        name: "onChange",
+        v5: "(step: number) => void;",
+        v6: "(detail: GoabFormStepperOnChangeDetail) => void;",
+      },
+    ],
+    angular: [
+      {
+        v3: {
+          name: "_change",
+          type: "(e: CustomEvent({detail: {step: number}}) => void",
+        },
+        v4: {
+          name: "onChange",
+          type: "(detail: GoabFormStepperOnChangeDetail) => void",
+        },
+      },
+    ],
+  },
+  {
+    name: "Form step",
+    angular: [
+      {
+        v3: {
+          name: "status",
+          type: "string",
+        },
+        v4: {
+          name: "status",
+          type: "GoabFormStepStatus",
+        },
+      },
+    ],
+  },
+  {
+    name: "Grid",
+    angular: [
+      {
+        v3: {
+          name: "gap",
+          type: "string",
+        },
+        v4: {
+          name: "gap",
+          type: "Spacing",
+        },
+      },
+    ],
+  },
+  {
+    name: "Hero banner",
+    angular: [
+      {
+        v3: {
+          name: "actions",
+          type: "slot",
+        },
+        v4: {
+          name: "actions",
+          type: "TemplateRef",
+        },
+      },
+    ],
+  },
+  {
+    name: "Icons",
+    angular: [
+      {
+        v3: {
+          name: "type",
+          type: "string",
+        },
+        v4: {
+          name: "type",
+          type: "GoabIconType",
+        },
+      },
+      {
+        v3: {
+          name: "size",
+          type: "string",
+        },
+        v4: {
+          name: "size",
+          type: "GoabIconSize",
+        },
+      },
+      {
+        v3: {
+          name: "theme",
+          type: "string",
+        },
+        v4: {
+          name: "theme",
+          type: "GoabIconTheme",
+        },
+      },
+    ],
+  },
+  {
+    name: "Icon button",
+    angular: [
+      {
+        v3: {
+          name: "type",
+          type: "string",
+        },
+        v4: {
+          name: "type",
+          type: "GoabIconType",
+        },
+      },
+      {
+        v3: {
+          name: "size",
+          type: "string",
+        },
+        v4: {
+          name: "size",
+          type: "GoabIconSize",
+        },
+      },
+      {
+        v3: {
+          name: "theme",
+          type: "string",
+        },
+        v4: {
+          name: "theme",
+          type: "GoabIconTheme",
+        },
+      },
+      {
+        v3: {
+          name: "_click",
+          type: "() => void",
+        },
+        v4: {
+          name: "onClick",
+          type: "() => void",
+        },
+      },
+    ],
+  },
+  {
+    name: "Input",
+    react: [
+      {
+        name: "onChange",
+        v5: "(name: string, value: string) => void;",
+        v6: "(details: GoabInputOnChangeDetail) => void;",
+      },
+      {
+        name: "onFocus",
+        v5: "(name: string) => void;",
+        v6: "(details: GoabInputOnFocusDetail) => void;",
+      },
+      {
+        name: "onBlur",
+        v5: "(name: string, value: string) => void;",
+        v6: "(details: GoabInputOnBlurDetail) => void;",
+      },
+      {
+        name: "onKeyPress",
+        v5: "(name: string, value: string, key: string) => void;",
+        v6: "(details: GoabInputOnKeyPressDetail) => void;",
+      },
+    ],
+    angular: [
+      {
+        v3: {
+          name: "type",
+          type: "string",
+        },
+        v4: {
+          name: "type",
+          type: "GoabInputType",
+        },
+      },
+      {
+        v3: {
+          name: "autocapidalize",
+          type: "string",
+        },
+        v4: {
+          name: "autocapitalize",
+          type: "GoabInputAutocapitalize",
+        },
+      },
+      {
+        v3: {
+          name: "leadingicon",
+          type: "string",
+        },
+        v4: {
+          name: "leadingIcon",
+          type: "GoabIconType",
+        },
+      },
+      {
+        v3: {
+          name: "trailingicon",
+          type: "string",
+        },
+        v4: {
+          name: "trailingIcon",
+          type: "GoabIconType",
+        },
+      },
+      {
+        v3: {
+          name: "_trailingIconClick",
+          type: "() => void",
+        },
+        v4: {
+          name: "onTrailingIconClick",
+          type: "() => void",
+        },
+      },
+      {
+        v3: {
+          name: "_change",
+          type: "(e: CustomEvent) => void",
+        },
+        v4: {
+          name: "onChange",
+          type: "(detail: GoabInputOnChangeDetail) => void",
+        },
+      },
+      {
+        v3: {
+          name: "_focus",
+          type: "(e: CustomEvent) => void",
+        },
+        v4: {
+          name: "onFocus",
+          type: "(detail: GoabInputOnFocusDetail) => void",
+        },
+      },
+      {
+        v3: {
+          name: "_blur",
+          type: "(e: CustomEvent) => void",
+        },
+        v4: {
+          name: "onBlur",
+          type: "(detail: GoabInputOnBlurDetail) => void",
+        },
+      },
+      {
+        v3: {
+          name: "_keyPress",
+          type: "(e: CustomEvent) => void",
+        },
+        v4: {
+          name: "onKeyPress",
+          type: "(detail: GoabInputOnKeyPressDetail) => void",
+        },
+      },
+    ],
+  },
+  {
+    name: "Microsite header",
+    angular: [
+      {
+        v3: {
+          name: "type",
+          type: "string",
+        },
+        v4: {
+          name: "type",
+          type: "GoabMicrositeHeaderType",
+        },
+      },
+      {
+        v3: {
+          name: "feedbackurltarget",
+          type: "string",
+        },
+        v4: {
+          name: "feedbackUrlTarget",
+          type: "GoabLinkTarget",
+        },
+      },
+      {
+        v3: {
+          name: "headerurltarget",
+          type: "string",
+        },
+        v4: {
+          name: "headerUrlTarget",
+          type: "GoabLinkTarget",
+        },
+      },
+    ],
+  },
+  {
+    name: "Modal",
+    react: [
+      {
+        name: "width",
+        v5: "string (deprecated)",
+        v6: "",
+      },
+      {
+        name: "type",
+        v5: "string (deprecated)",
+        v6: "",
+      },
+    ],
+    angular: [
+      {
+        v3: {
+          name: "calloutvariant",
+          type: "string",
+        },
+        v4: {
+          name: "calloutVariant",
+          type: "GoabModalCalloutVariant",
+        },
+      },
+      {
+        v3: {
+          name: "transition",
+          type: "string",
+        },
+        v4: {
+          name: "transition",
+          type: "GoabModalTransition",
+        },
+      },
+      {
+        v3: {
+          name: "heading",
+          type: "string | slot",
+        },
+        v4: {
+          name: "heading",
+          type: "string | TemplateRef",
+        },
+      },
+      {
+        v3: {
+          name: "actions",
+          type: "slot",
+        },
+        v4: {
+          name: "actions",
+          type: "TemplateRef",
+        },
+      },
+      {
+        v3: {
+          name: "_close",
+          type: "() => void",
+        },
+        v4: {
+          name: "onClose",
+          type: "() => void",
+        },
+      },
+    ],
+  },
+  {
+    name: "Notification banner",
+    angular: [
+      {
+        v3: {
+          name: "type",
+          type: "string",
+        },
+        v4: {
+          name: "type",
+          type: "GoabNotificationType",
+        },
+      },
+      {
+        v3: {
+          name: "arialive",
+          type: "string",
+        },
+        v4: {
+          name: "ariaLive",
+          type: "GoABAriaLiveType",
+        },
+      },
+      {
+        v3: {
+          name: "dismiss",
+          type: "() => void",
+        },
+        v4: {
+          name: "onDismiss",
+          type: "() => void",
+        },
+      },
+    ],
+  },
+  {
+    name: "Pagination",
+    react: [
+      {
+        name: "onChange",
+        v5: "(page: number) => void;",
+        v6: "(details: GoabPaginationOnChangeDetail) => void;",
+      },
+    ],
+    angular: [
+      {
+        v3: {
+          name: "variant",
+          type: "string",
+        },
+        v4: {
+          name: "variant",
+          type: "GoabPaginationVariant",
+        },
+      },
+      {
+        v3: {
+          name: "_change",
+          type: "(e: CustomEvent) => void",
+        },
+        v4: {
+          name: "onChange",
+          type: "(detail: GoabPaginationOnChangeDetail) => void",
+        },
+      },
+    ],
+  },
+  {
+    name: "Popover",
+    react: [
+      {
+        name: "position",
+        v5: "GoAPosition",
+        v6: "GoabPopoverPosition",
+      },
+    ],
+    angular: [
+      {
+        v3: {
+          name: "position",
+          type: "string",
+        },
+        v4: {
+          name: "position",
+          type: "GoabPopoverPosition",
+        },
+      },
+      {
+        v3: {
+          name: "target",
+          type: "slot",
+        },
+        v4: {
+          name: "target",
+          type: "TemplateRef",
+        },
+      },
+    ],
+  },
+  {
+    name: "Progress indicator",
+    angular: [
+      {
+        v3: {
+          name: "variant",
+          type: "string",
+        },
+        v4: {
+          name: "variant",
+          type: "GoabCircularProgressVariant",
+        },
+      },
+      {
+        v3: {
+          name: "size",
+          type: "string",
+        },
+        v4: {
+          name: "size",
+          type: "GoabCircularProgressSize",
+        },
+      },
+    ],
+  },
+  {
+    name: "Radio item",
+    angular: [
+      {
+        v3: {
+          name: "description",
+          type: "string | slot",
+        },
+        v4: {
+          name: "description",
+          type: "string | TemplateRef",
+        },
+      },
+    ],
+  },
+  {
+    name: "Radio group",
+    react: [
+      {
+        name: "onChange",
+        v5: "(name: string, value: string) => void;",
+        v6: "(details: GoabRadioGroupOnChangeDetail) => void;",
+      },
+    ],
+    angular: [
+      {
+        v3: {
+          name: "orientation",
+          type: "string",
+        },
+        v4: {
+          name: "orientation",
+          type: "GoabRadioGroupOrientation",
+        },
+      },
+      {
+        v3: {
+          name: "_change",
+          type: "(e: CustomEvent) => void",
+        },
+        v4: {
+          name: "onChange",
+          type: "(e: GoabRadioGroupOnChangeDetail) => void",
+        },
+      },
+    ],
+  },
+  {
+    name: "Side menu heading",
+    angular: [
+      {
+        v3: {
+          name: "meta",
+          type: "slot",
+        },
+        v4: {
+          name: "meta",
+          type: "TemplateRef",
+        },
+      },
+      {
+        v3: {
+          name: "icon",
+          type: "string",
+        },
+        v4: {
+          name: "icon",
+          type: "GoabIconType",
+        },
+      },
+    ],
+  },
+  {
+    name: "Skeleton loading",
+    angular: [
+      {
+        v3: {
+          name: "type",
+          type: "string",
+        },
+        v4: {
+          name: "type",
+          type: "GoabSkeletonType",
+        },
+      },
+      {
+        v3: {
+          name: "size",
+          type: "string",
+        },
+        v4: {
+          name: "size",
+          type: "GoabSkeletonSize",
+        },
+      },
+    ],
+  },
+  {
+    name: "Spacer",
+    react: [
+      {
+        name: "hSpacing",
+        v5: "Spacing | 'fill'",
+        v6: "GoabSpacerHorizontalSpacing",
+      },
+      {
+        name: "vSpacing",
+        v5: "Spacing",
+        v6: "GoabSpacerVerticalSpacing",
+      },
+    ],
+    angular: [
+      {
+        v3: {
+          name: "hSpacing",
+          type: "string",
+        },
+        v4: {
+          name: "hSpacing",
+          type: "GoabSpacerHorizontalSpacing",
+        },
+      },
+      {
+        v3: {
+          name: "vSpacing",
+          type: "string",
+        },
+        v4: {
+          name: "vSpacing",
+          type: "GoaSpacerVerticalSpacing",
+        },
+      },
+    ],
+  },
+  {
+    name: "Table",
+    react: [{
+      name: "onSort",
+      v5: "(sortBy: string, sortDir: number) => void;",
+      v6: "(details: GoabTableOnSortDetail) => void;",
+    }],
+    angular: [
+      {
+        v3: {
+          name: "_sort",
+          type: "(e: CustomEvent) => void",
+        },
+        v4: {
+          name: "onSort",
+          type: "(details: GoabTableOnSortDetail) => void",
+        },
+      },
+    ],
+  },
+  {
+    name: "Table sort header",
+    angular: [
+      {
+        v3: {
+          name: "direction",
+          type: "string",
+        },
+        v4: {
+          name: "direction",
+          type: "GoabTableSortDirection",
+        },
+      },
+    ],
+  },
+  {
+    name: "Tab item",
+    angular: [
+      {
+        v3: {
+          name: "heading",
+          type: "string | slot",
+        },
+        v4: {
+          name: "heading",
+          type: "string | TemplateRef",
+        },
+      },
+    ],
+  },
+  {
+    name: "Tabs",
+    react: [
+      {
+        name: "onChange",
+        v5: "(tab: number) => void;",
+        v6: "(details: GoabTabsOnChangeDetail) => void;",
+      },
+    ],
+    angular: [
+      {
+        v3: {
+          name: "type",
+          type: "string",
+        },
+        v4: {
+          name: "type",
+          type: "GoabTabsType",
+        },
+      },
+    ],
+  },
+  {
+    name: "Text area",
+    react: [
+      {
+        name: "countBy",
+        v5: "CountBy",
+        v6: "GoabTextAreacountBy",
+      },
+      {
+        name: "onChange",
+        v5: "(name: string, value: string) => void;",
+        v6: "(details: GoabTextAreaOnKeyPressDetail) => void;",
+      },
+      {
+        name: "onKeyPress",
+        v5: "(name: string, value: string, key: string) => void;",
+        v6: "(details: GoabTextAreaOnKeyPressDetail) => void;",
+      },
+    ],
+    angular: [
+      {
+        v3: {
+          name: "countby",
+          type: "string",
+        },
+        v4: {
+          name: "countBy",
+          type: "GoabTextAreaCountBy",
+        },
+      },
+      {
+        v3: {
+          name: "_change",
+          type: "(e: CustomEvent) => void",
+        },
+        v4: {
+          name: "onChange",
+          type: "(detail: GoabTextAreaOnChangeDetail) => void",
+        },
+      },
+      {
+        v3: {
+          name: "_keypress",
+          type: "(e: CustomEvent) => void",
+        },
+        v4: {
+          name: "onKeyPress",
+          type: "(detail: GoabTextAreaOnKeyPressDetail) => void",
+        },
+      },
+    ],
+  },
+  {
+    name: "Tooltip",
+    angular: [
+      {
+        v3: {
+          name: "position",
+          type: "string",
+        },
+        v4: {
+          name: "position",
+          type: "GoabTooltipPosition",
+        },
+      },
+      {
+        v3: {
+          name: "halign",
+          type: "string",
+        },
+        v4: {
+          name: "hAighn",
+          type: "GoabTooltipHorizontalAlignment",
+        },
+      },
+    ],
+  },
+  {
+    name: "AppHeaderMenu",
+    angular: [
+      {
+        v3: {
+          name: "leadingicon",
+          type: "string",
+        },
+        v4: {
+          name: "leadingIcon",
+          type: "GoabIconType",
+        },
+      },
+    ],
+  },
+  {
+    name: "Calendar",
+    react: [
+      {
+        name: "onChange",
+        v5: "(name: string, value: Date) => void;",
+        v6: "(details: GoabCalendarOnChangeDetail) => void;",
+      },
+    ],
+    angular: [
+      {
+        v3: {
+          name: "_change",
+          type: "(e: CustomEvent) => void",
+        },
+        v4: {
+          name: "onChange",
+          type: "(detail: GoabCalendarOnChangeDetail) => void",
+        },
+      },
+    ],
+  },
+  {
+    name: "PageBlock",
+    angular:[
+      {
+        v3: {
+          name: "gap",
+          type: "string",
+        },
+        v4: {
+          name: "gap",
+          type: "Spacing",
+        },
+      },
+      {
+        v3: {
+          name: "direction",
+          type: "string",
+        },
+        v4: {
+          name: "direction",
+          type: "GoabBlockDirection",
+        },
+      },
+      {
+        v3: {
+          name: "alignment",
+          type: "string",
+        },
+        v4: {
+          name: "alignment",
+          type: "GoabBlockAlignment",
+        },
+      },
+    ],
+  },
+  {
+    name: "Spinner",
+    react: [
+      {
+        name: "type",
+        v5: "SpinnerType",
+        v6: "GoabSpinnerType",
+      },
+      {
+        name: "size",
+        v5: "SpinnerSize",
+        v6: "GoabSpinnerSize",
+      },
+    ],
+    angular:[
+      {
+        v3: {
+          name: "type",
+          type: "string",
+        },
+        v4: {
+          name: "type",
+          type: "GoabSpinnerType",
+        },
+      },
+      {
+        v3: {
+          name: "size",
+          type: "string",
+        },
+        v4: {
+          name: "size",
+          type: "GoabSpinnerSize",
+        },
+      },
+    ],
+  },
+];
diff --git a/src/routes/home.tsx b/src/routes/home.tsx
index 333ca33df..82a0a6ab0 100644
--- a/src/routes/home.tsx
+++ b/src/routes/home.tsx
@@ -1,48 +1,49 @@
 import {
-  GoAButton,
-  GoAButtonGroup,
-  GoADivider,
-  GoAGrid,
-  GoAHeroBanner,
-  GoAHeroBannerActions,
-  GoAPageBlock,
-  GoASpacer,
+  GoabButton,
+  GoabButtonGroup,
+  GoabDivider,
+  GoabGrid,
+  GoabHeroBanner,
+  GoabHeroBannerActions,
+  GoabPageBlock,
+  GoabSpacer,
 } from "@abgov/react-components";
 import "./home.css";
-import { MAX_CONTENT_WIDTH } from "@routes/root";
 import CardLite from "../components/card-lite/CardLite";
 import { Link, useNavigate } from "react-router-dom";
 import { SupportInfo } from '../components/support-info/SupportInfo';
+import { MAX_CONTENT_WIDTH } from "../global-constants.ts";
+
 const HomePage = () => {
   const navigate = useNavigate();
   return (
     <>
-      <GoAHeroBanner
+      <GoabHeroBanner
         heading="Design your government service using reusable patterns, components, design tokens, and content guidelines."
         maxContentWidth={MAX_CONTENT_WIDTH}
       >
         Resources for Government of Alberta product teams to build better services. Learn from the research and experience of other 
         product teams and avoid repeating work that’s already been done.
-        <GoAHeroBannerActions>
-          <GoAButtonGroup alignment="start">
-            <GoAButton onClick={() => {
+        <GoabHeroBannerActions>
+          <GoabButtonGroup alignment="start">
+            <GoabButton onClick={() => {
               navigate("get-started");
               }}
               trailingIcon="arrow-forward"
             >
               Get started
-            </GoAButton>
-            <GoAButton onClick={() => {
+            </GoabButton>
+            <GoabButton onClick={() => {
               window.open("https://github.com/GovAlta/ui-components/releases", "_blank");
             }} type="tertiary">
               Learn about the latest release
-            </GoAButton>
-          </GoAButtonGroup>
-        </GoAHeroBannerActions>
-      </GoAHeroBanner>
+            </GoabButton>
+          </GoabButtonGroup>
+        </GoabHeroBannerActions>
+      </GoabHeroBanner>
 
-      <GoAPageBlock width={MAX_CONTENT_WIDTH}>
-        <GoAGrid minChildWidth="300px" mt="2xl" mb="2xl" gap="xl">
+      <GoabPageBlock width={MAX_CONTENT_WIDTH}>
+        <GoabGrid minChildWidth="300px" mt="2xl" mb="2xl" gap="xl">
           <CardLite
             title="Patterns and templates"
             description="Common patterns and page templates to use as a starting point for a government service."
@@ -67,9 +68,9 @@ const HomePage = () => {
             linkTo="/content/capitalization"
             linkDisplay="Browse Content"
           />
-        </GoAGrid>
+        </GoabGrid>
 
-        <GoADivider mb="2xl"></GoADivider>
+        <GoabDivider mb="2xl"></GoabDivider>
         <h2>How to use the design system in your service</h2>
         <div className="max-width-72ch">
           <ol>
@@ -88,8 +89,8 @@ const HomePage = () => {
           </Link>
           <SupportInfo />
         </div>
-        <GoASpacer vSpacing="xl"></GoASpacer>
-      </GoAPageBlock>
+        <GoabSpacer vSpacing="xl"></GoabSpacer>
+      </GoabPageBlock>
     </>
   );
 };
diff --git a/src/routes/patterns/LayoutPage.tsx b/src/routes/patterns/LayoutPage.tsx
index bffcf995c..f375ab98d 100644
--- a/src/routes/patterns/LayoutPage.tsx
+++ b/src/routes/patterns/LayoutPage.tsx
@@ -1,18 +1,15 @@
-import {
-  GoAAppFooter,
-  GoAAppHeader,
-  GoABadge,
-  GoAGrid,
-  GoAMicrositeHeader,
-  GoAOneColumnLayout,
-  GoAPageBlock,
-  GoASkeleton,
-  GoATab,
-  GoATabs,
-} from "@abgov/react-components";
 import {Sandbox} from "@components/sandbox";
 import Browser from "@components/browser/Browser";
 import { ComponentContent } from "@components/component-content/ComponentContent";
+import {
+  GoabAppFooter,
+  GoabAppHeader, GoabBadge, GoabGrid,
+  GoabMicrositeHeader,
+  GoabOneColumnLayout,
+  GoabPageBlock, GoabSkeleton,
+  GoabTab,
+  GoabTabs
+} from "@abgov/react-components";
 
 export default function LayoutPage() {
   return (
@@ -21,48 +18,48 @@ export default function LayoutPage() {
       <h3>
         A structural template that supports consistency across applications by defining visual grids, spacing, and sections.
       </h3>
-      <GoATabs>
-        <GoATab heading="Code examples">
+      <GoabTabs>
+        <GoabTab heading="Code examples">
           <h3>Basic page layout</h3>
           <Sandbox fullWidth allow={["Browser"]}>
             <Browser ignore>
-            <GoAOneColumnLayout>
+            <GoabOneColumnLayout>
               <section slot="header">
-                <GoAMicrositeHeader type="alpha" version="UAT" />
-                <GoAAppHeader url="/" heading="Design System">
+                <GoabMicrositeHeader type="alpha" version="UAT" />
+                <GoabAppHeader url="/" heading="Design System">
                   <a href="/login">Sign in</a>
-                </GoAAppHeader>
+                </GoabAppHeader>
               </section>
-              <GoAPageBlock width="704px">
+              <GoabPageBlock width="704px">
                 <p>
-                  <GoASkeleton type="header" size={4} />
-                  <GoASkeleton type="text" size={1} />
+                  <GoabSkeleton type="header" size={'4'} />
+                  <GoabSkeleton type="text" size={'1'} />
                 </p>
                 <p>
-                  <GoASkeleton type="header" size={4} />
-                  <GoASkeleton type="text" size={1} />
+                  <GoabSkeleton type="header" size={'4'} />
+                  <GoabSkeleton type="text" size={'1'} />
                 </p>
-                <GoAGrid minChildWidth="30ch">
-                  <GoASkeleton type="card" size={2} />
-                  <GoASkeleton type="card" size={2} />
-                </GoAGrid>
-              </GoAPageBlock>
+                <GoabGrid minChildWidth="30ch">
+                  <GoabSkeleton type="card" size={'2'} />
+                  <GoabSkeleton type="card" size={'2'} />
+                </GoabGrid>
+              </GoabPageBlock>
               <section slot="footer">
-                <GoAAppFooter />
+                <GoabAppFooter />
               </section>
-            </GoAOneColumnLayout>
+            </GoabOneColumnLayout>
             </Browser>
           </Sandbox>
-        </GoATab>
+        </GoabTab>
 
-        <GoATab
+        <GoabTab
           heading={
             <>
               Design guidelines
-              <GoABadge type="information" content="In progress" />
+              <GoabBadge type="information" content="In progress" />
             </>
-          }></GoATab>
-      </GoATabs>
+          }></GoabTab>
+      </GoabTabs>
     </ComponentContent>
   );
 }
diff --git a/src/routes/patterns/PatternsLayout.tsx b/src/routes/patterns/PatternsLayout.tsx
index 807cfbf36..8b80b3303 100644
--- a/src/routes/patterns/PatternsLayout.tsx
+++ b/src/routes/patterns/PatternsLayout.tsx
@@ -1,52 +1,39 @@
-import { GoABlock, GoADropdown, GoADropdownItem, GoASideMenu, GoASideMenuHeading, GoASpacer } from "@abgov/react-components";
+import { GoabSideMenu, GoabSideMenuHeading, GoabSpacer } from "@abgov/react-components";
 import {Link, Outlet} from "react-router-dom";
 import {SupportInfo} from "@components/support-info/SupportInfo.tsx";
-import {useEffect, useState} from "react";
-import { LanguageContext } from "@components/sandbox";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { useContext } from "react";
+import { getVersionedUrlPath } from "@components/version-language-switcher/version-language-constants.ts";
 
 export default function PatternsLayout() {
-  const [language, setLanguage] = useState("");
+  const {language, version} = useContext(LanguageVersionContext);
+  const prefixUrl = getVersionedUrlPath(version, language);
 
-  useEffect(() => {
-    const lang = localStorage.getItem("goa-docs-lang") || "react";
-    setLanguage(lang);
-  }, []);
-
-  function onLanguageChange(_name: string, value: string[] | string) {
-    const lang = Array.isArray(value) ? value[0] : value;
-    setLanguage(lang);
-    localStorage.setItem("goa-docs-lang", lang);
+  const getUrl = (path: string) => {
+    return prefixUrl.length > 0 ? `${prefixUrl}/${path}`: path;
   }
 
   return (
-    <LanguageContext.Provider value={language}>
-      <div className="content">
-        <section className="side-menu">
-          <GoASideMenu>
-          <GoASpacer vSpacing="m"></GoASpacer>
-            <Link to="">All</Link>
-            <Link to="simple-form">Public form</Link>
-            <GoASpacer vSpacing="m"></GoASpacer>
-            <GoASideMenuHeading>Pages</GoASideMenuHeading>
-            <GoABlock direction="column" mt="s" mb="s" ml="l" mr="l">
-              <GoADropdown value={language} onChange={onLanguageChange}>
-                <GoADropdownItem label="React" value="react" />
-                <GoADropdownItem label="Angular" value="angular" />
-              </GoADropdown>
-            </GoABlock>
-            <Link to="layout">Basic page layout</Link>
-            <Link to="start-page">Start page</Link>
-            <Link to="task-list-page">Task list page</Link>
-            <Link to="question-page">Question pages</Link>
-            <Link to="review-page">Review page</Link>
-            <Link to="result-page">Results page</Link>
-          </GoASideMenu>
-        </section>
-        <main className="main">
-          <Outlet />
-          <SupportInfo />
-        </main>
-      </div>
-    </LanguageContext.Provider>
+    <div className="content">
+      <section className="side-menu">
+        <GoabSideMenu>
+          <GoabSpacer vSpacing="m"></GoabSpacer>
+          <Link to="">All</Link>
+          <Link to="simple-form">Simple form</Link>
+          <GoabSpacer vSpacing="m"></GoabSpacer>
+          <GoabSideMenuHeading>Pages</GoabSideMenuHeading>
+          <Link to={getUrl('layout')}>Basic page layout</Link>
+          <Link to={getUrl('start-page')}>Start page</Link>
+          <Link to={getUrl('task-list-page')}>Task list page</Link>
+          <Link to={getUrl('question-page')}>Question pages</Link>
+          <Link to={getUrl('review-page')}>Review page</Link>
+          <Link to={getUrl('result-page')}>Results page</Link>
+        </GoabSideMenu>
+      </section>
+      <main className="main">
+        <Outlet />
+        <SupportInfo />
+      </main>
+    </div>
   );
 }
diff --git a/src/routes/patterns/QuestionPage.tsx b/src/routes/patterns/QuestionPage.tsx
index c1fb3272b..c7df960b6 100644
--- a/src/routes/patterns/QuestionPage.tsx
+++ b/src/routes/patterns/QuestionPage.tsx
@@ -1,6 +1,6 @@
 import {
-  GoATab,
-  GoATabs
+  GoabTab,
+  GoabTabs
 } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import QuestionPageExamples from "@examples/question-page/QuestionPageExamples";
@@ -17,12 +17,12 @@ export default function QuestionPage() {
       <ComponentContent
         contentClassName="question-page"
         tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <QuestionPageExamples />
-          </GoATab>
+          </GoabTab>
 
-          <GoATab heading="Design guidelines">
+          <GoabTab heading="Design guidelines">
             <figure className={css.imageContainer}>
               <img
                 alt="question page overview image"
@@ -201,8 +201,8 @@ export default function QuestionPage() {
             <p>
               Make it clear which tasks a user has completed and which they still need to complete.
             </p>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/patterns/ResultPage.tsx b/src/routes/patterns/ResultPage.tsx
index f76aee987..c65e9efd9 100644
--- a/src/routes/patterns/ResultPage.tsx
+++ b/src/routes/patterns/ResultPage.tsx
@@ -1,6 +1,6 @@
 import {
-  GoATab,
-  GoATabs
+  GoabTab,
+  GoabTabs
 } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import css from "./patterns.module.css";
@@ -16,12 +16,12 @@ export default function ResultPage() {
       <ComponentContent
         contentClassName="question-page"
         tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <ResultPageExamples/>
-          </GoATab>
+          </GoabTab>
 
-          <GoATab heading="Design guidelines">
+          <GoabTab heading="Design guidelines">
             <h2 id="overview" className="hidden">Overview</h2>
             <figure className={css.imageContainer}>
               <img
@@ -42,8 +42,8 @@ export default function ResultPage() {
               <li>contact details for the service</li>
               <li>links to information or services that users are likely to need next</li>
             </ul>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/patterns/ReviewPage.tsx b/src/routes/patterns/ReviewPage.tsx
index ad46e3ec2..70c6fe7a0 100644
--- a/src/routes/patterns/ReviewPage.tsx
+++ b/src/routes/patterns/ReviewPage.tsx
@@ -1,6 +1,6 @@
 import {
-  GoATab,
-  GoATabs
+  GoabTab,
+  GoabTabs
 } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import css from "./patterns.module.css";
@@ -14,12 +14,12 @@ export default function ReviewPage() {
       <ComponentContent
         contentClassName="question-page"
         tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <ReviewPageExamples />
-          </GoATab>
+          </GoabTab>
 
-          <GoATab heading="Design guidelines">
+          <GoabTab heading="Design guidelines">
             <figure className={css.imageContainer}>
               <h2 id="overview" className="hidden">
                 Overview
@@ -60,8 +60,8 @@ export default function ReviewPage() {
                 src="/images/patterns/review-page-change-answers.png"
               />
             </figure>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/patterns/SimpleFormPage.tsx b/src/routes/patterns/SimpleFormPage.tsx
index e7c7881a6..e26040698 100644
--- a/src/routes/patterns/SimpleFormPage.tsx
+++ b/src/routes/patterns/SimpleFormPage.tsx
@@ -1,5 +1,5 @@
 import { ComponentContent } from "@components/component-content/ComponentContent";
-import { GoADetails } from "@abgov/react-components";
+import { GoabDetails } from "@abgov/react-components";
 import css from "./patterns.module.css";
 import { Link } from "react-router-dom";
 
@@ -11,7 +11,7 @@ export default function SimpleFormPage() {
         Design forms that help Albertan citizens understand the task, focus on the question and its
         answer, and complete the form.
       </h3>
-      <GoADetails mt="xl" heading={"Who are the primary users for the public form pattern?"}>
+      <GoabDetails mt="xl" heading={"Who are the primary users for the simple form pattern?"}>
         <p>
           <strong>Primary users:</strong> citizens, public, external
           <br />
@@ -22,7 +22,7 @@ export default function SimpleFormPage() {
           There is an emphasis on an accessible experience with a low cognitive load for users who
           use the service infrequently.
         </p>
-      </GoADetails>
+      </GoabDetails>
 
       <h2 id="toc-1">Form structure</h2>
       <p>
diff --git a/src/routes/patterns/StartPage.tsx b/src/routes/patterns/StartPage.tsx
index e04b3e51a..e98c46fad 100644
--- a/src/routes/patterns/StartPage.tsx
+++ b/src/routes/patterns/StartPage.tsx
@@ -1,6 +1,6 @@
 import {
-  GoATab,
-  GoATabs,
+  GoabTab,
+  GoabTabs,
 } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import { StartPageExamples } from "@examples/start-page/StartPageExamples";
@@ -17,12 +17,12 @@ export default function StartPage() {
       <ComponentContent
         contentClassName="start-page"
         tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <StartPageExamples />
-          </GoATab>
+          </GoabTab>
 
-          <GoATab heading="Design guidelines">
+          <GoabTab heading="Design guidelines">
             <figure className={css.imageContainer}>
               <h2 id="overview" className="hidden">
                 Overview
@@ -116,8 +116,8 @@ export default function StartPage() {
             <p>
               Below the call to action, include any additional information as applicable such as customer support, frequently asked questions, or related links.
             </p>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/patterns/TaskListPage.tsx b/src/routes/patterns/TaskListPage.tsx
index f4a011dfd..e9363fb15 100644
--- a/src/routes/patterns/TaskListPage.tsx
+++ b/src/routes/patterns/TaskListPage.tsx
@@ -1,7 +1,7 @@
 import {
-  GoACallout,
-  GoATab,
-  GoATabs
+  GoabCallout,
+  GoabTab,
+  GoabTabs
 } from "@abgov/react-components";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import { TaskListPageExamples } from "@examples/task-list-page/TaskListPageExamples";
@@ -19,12 +19,12 @@ export default function TaskListPage() {
       <ComponentContent
         contentClassName="task-list-page"
         tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-        <GoATabs>
-          <GoATab heading="Code examples">
+        <GoabTabs>
+          <GoabTab heading="Code examples">
             <TaskListPageExamples />
-          </GoATab>
+          </GoabTab>
 
-          <GoATab heading="Design guidelines">
+          <GoabTab heading="Design guidelines">
             <figure className={css.imageContainer}>
               <h2 id="overview" className="hidden">
                 Overview
@@ -61,9 +61,9 @@ export default function TaskListPage() {
             </p>
 
             <div style={{maxWidth: "22rem", marginTop: "0.5rem"}}>
-              <GoACallout type="important" size="medium" heading="Application incomplete" mb="3xl">
+              <GoabCallout type="important" size="medium" heading="Application incomplete" mb="3xl">
                 You have completed 0 of 3 sections.
-              </GoACallout>
+              </GoabCallout>
             </div>
 
 
@@ -114,8 +114,8 @@ export default function TaskListPage() {
                 Task: <Link to="/components/table">goa-table</Link>
               </li>
             </ol>
-          </GoATab>
-        </GoATabs>
+          </GoabTab>
+        </GoabTabs>
       </ComponentContent>
     </>
   );
diff --git a/src/routes/root.css b/src/routes/root.css
index c0ea6d1ac..69e910012 100644
--- a/src/routes/root.css
+++ b/src/routes/root.css
@@ -26,7 +26,7 @@
   Side Menu
 ==================*/
 .side-menu {
-  width: 192px;
+  min-width: 192px;
   border-right: 1px solid var(--goa-color-greyscale-200);
   padding-bottom: var(--goa-space-l);
 }
diff --git a/src/routes/root.tsx b/src/routes/root.tsx
index dbd31612d..7dbd1914b 100644
--- a/src/routes/root.tsx
+++ b/src/routes/root.tsx
@@ -1,19 +1,22 @@
 import {
-  GoAAppFooter,
-  GoAAppFooterMetaSection,
-  GoAAppFooterNavSection,
-  GoAAppHeader,
-  GoAMicrositeHeader,
-  GoAOneColumnLayout,
+  GoabAppFooter,
+  GoabAppFooterMetaSection,
+  GoabAppFooterNavSection,
+  GoabAppHeader,
+  GoabMicrositeHeader, GoabNotification,
+  GoabOneColumnLayout
 } from "@abgov/react-components";
 import { useEffect, useState } from "react";
 import { Link, Outlet } from "react-router-dom";
+import Cookies from "js-cookie";
 
 import "./root.css";
 
 import { useLocation } from "react-router-dom";
-
-export const MAX_CONTENT_WIDTH = "1360px";
+import {
+  MAX_CONTENT_WIDTH,
+} from "../global-constants.ts";
+import { VersionLanguageSwitcher } from "@components/version-language-switcher/VersionLanguageSwitcher.tsx";
 
 function ScrollToTop() {
   const { pathname } = useLocation();
@@ -26,57 +29,70 @@ function ScrollToTop() {
 }
 
 export default function Root() {
+  const isFirstVisit = Cookies.get("hasVisited");
   const [visible, setVisibility] = useState<boolean>(false);
 
+
   useEffect(() => {
     setTimeout(() => {
       setVisibility(true);
     }, 50);
   });
 
+  useEffect(() => {
+    setTimeout(() => {
+      Cookies.set("hasVisited", "true", {expires: 3650}); // increase the time everytime ppl land on so it won't expire
+    }, 600); // update later
+  }, []);
+
   return (
     <div className="app" style={{ opacity: visible ? "1" : "0" }}>
       <ScrollToTop />
-      <GoAOneColumnLayout>
+      <GoabOneColumnLayout>
         <section className="header" slot="header">
-          <GoAMicrositeHeader
+          <GoabMicrositeHeader
             type={"live"}
             feedbackUrl="https://forms.microsoft.com/r/8Zp7zSJS6W"
             maxContentWidth={MAX_CONTENT_WIDTH}
+            version={<VersionLanguageSwitcher/>}
           />
-          <GoAAppHeader heading="Design system" maxContentWidth={MAX_CONTENT_WIDTH} url={"/"} fullMenuBreakpoint={1140}>
+          <GoabAppHeader heading="Design system" maxContentWidth={MAX_CONTENT_WIDTH} url={"/"} fullMenuBreakpoint={1140}>
             <Link to="/get-started">Get started</Link>
             <Link to="/patterns">Patterns</Link>
             <Link to="/components">Components</Link>
             <Link to="/design-tokens">Styles</Link>
             <Link to="/content/capitalization">Content</Link>
             <Link to="/get-started/support">Support</Link>
-          </GoAAppHeader>
+          </GoabAppHeader>
         </section>
 
+        {isFirstVisit == null && <GoabNotification type='information'>
+          Select your development framework to see all code in your development languages. You can change this in the top right of the screen.
+        </GoabNotification>}
+
         <Outlet />
 
         <section slot="footer">
-          <GoAAppFooter maxContentWidth={MAX_CONTENT_WIDTH}>
-            <GoAAppFooterNavSection heading="Resources" maxColumnCount={2}>
+          <GoabAppFooter maxContentWidth={MAX_CONTENT_WIDTH}>
+            <GoabAppFooterNavSection heading="Resources" maxColumnCount={2}>
               <Link to="/get-started">Get started</Link>
               <Link to="/patterns">Patterns</Link>
               <Link to="/components">Components</Link>
               <Link to="/design-tokens">Styles</Link>
               <Link to="/content/capitalization">Content</Link>
-            </GoAAppFooterNavSection>
-            <GoAAppFooterNavSection heading="Get support">
+            </GoabAppFooterNavSection>
+            <GoabAppFooterNavSection heading="Get support">
               <Link to="https://design.alberta.ca/get-started/support/report-bug" target="_blank">Submit an issue</Link>
               <Link to="https://goa-dio.slack.com/archives/C02PLLT9HQ9">#design-system-support</Link>
-            </GoAAppFooterNavSection>
-            <GoAAppFooterMetaSection>
+            </GoabAppFooterNavSection>
+            <GoabAppFooterMetaSection>
               <Link to="support/contribute">Contribute to the design system</Link>
               <Link to="https://forms.microsoft.com/pages/responsepage.aspx?id=Bhy1K5uvxUKL9Tw7exCFCy-G9FVGUGFMnXc6L30n_ANUM0dTOFg4UU01VVY2QzJPT0k1Qzg2RUJMUy4u" target="_blank">Give feedback</Link>
               <Link to="/support/release-notes">Release notes</Link>
-            </GoAAppFooterMetaSection>
-          </GoAAppFooter>
+            </GoabAppFooterMetaSection>
+          </GoabAppFooter>
         </section>
-      </GoAOneColumnLayout>
+      </GoabOneColumnLayout>
     </div>
   );
 }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 7e79f5a3e..60b00509a 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -4,4 +4,4 @@ export function toKebabCase(str: string) {
   .replace(/_/g, '-')          // Replace underscores with -
   .replace(/([a-z])([A-Z])/g, '$1-$2') // Convert camelCase to kebab-case
   .toLowerCase();              // Convert to lowercase
-}
\ No newline at end of file
+}
diff --git a/src/versioned-router.tsx b/src/versioned-router.tsx
new file mode 100644
index 000000000..c61f79b24
--- /dev/null
+++ b/src/versioned-router.tsx
@@ -0,0 +1,165 @@
+import { Route, Routes, useParams } from "react-router-dom";
+import ComponentsPage from "@routes/components/Components.tsx";
+import ComponentNotFoundPage from "@routes/not-found/NotFound.tsx";
+import AllComponentsPage from "@routes/components/AllComponents.tsx";
+import React from "react";
+import AccordionPage from "@routes/components/Accordion.tsx";
+import BadgePage from "@routes/components/Badge.tsx";
+import BlockPage from "@routes/components/Block.tsx";
+import ButtonPage from "@routes/components/Button.tsx";
+import ButtonGroupPage from "@routes/components/ButtonGroup.tsx";
+import CalloutPage from "@routes/components/Callout.tsx";
+import CheckboxPage from "@routes/components/Checkbox.tsx";
+import ContainerPage from "@routes/components/Container.tsx";
+import DatePickerPage from "@routes/components/DatePicker.tsx";
+import DetailsPage from "@routes/components/Details.tsx";
+import DividerPage from "@routes/components/Divider.tsx";
+import DropdownPage from "@routes/components/Dropdown.tsx";
+import FileUploaderPage from "@routes/components/FileUploader.tsx";
+import FormItemPage from "@routes/components/FormItemPage.tsx";
+import FormStepperPage from "@routes/components/FormStepper.tsx";
+import GridPage from "@routes/components/Grid.tsx";
+import HeroBannerPage from "@routes/components/HeroBanner.tsx";
+import IconsPage from "@routes/components/Icons.tsx";
+import IconButtonPage from "@routes/components/IconButton.tsx";
+import TextFieldPage from "@routes/components/TextField.tsx";
+import ListPage from "@routes/components/List.tsx";
+import MicrositeHeaderPage from "@routes/components/MicrositeHeader.tsx";
+import ModalPage from "@routes/components/Modal.tsx";
+import NotificationBannerPage from "@routes/components/Notificationbanner.tsx";
+import PaginationPage from "@routes/components/Pagination.tsx";
+import PopoverPage from "@routes/components/Popover.tsx";
+import ProgressIndicatorPage from "@routes/components/ProgressIndicator.tsx";
+import RadioPage from "@routes/components/Radio.tsx";
+import SideMenuPage from "@routes/components/SideMenu.tsx";
+import SkeletonPage from "@routes/components/Skeleton.tsx";
+import SpacerPage from "@routes/components/Spacer.tsx";
+import TablePage from "@routes/components/Table.tsx";
+import TabsPage from "@routes/components/Tabs.tsx";
+import TextAreaPage from "@routes/components/TextArea.tsx";
+import TooltipPage from "@routes/components/Tooltip.tsx";
+import AppHeaderPage from "@routes/components/AppHeader.tsx";
+import AppFooterPage from "@routes/components/AppFooter.tsx";
+import {
+  VERSIONED_ANGULAR_URL_SEGMENT,
+  VERSIONED_REACT_URL_SEGMENT,
+} from "@components/version-language-switcher/version-language-constants.ts";
+import PatternsLayout from "@routes/patterns/PatternsLayout.tsx";
+import PatternsOverviewPage from "@routes/patterns/PatternsOverview.tsx";
+import LayoutPage from "@routes/patterns/LayoutPage.tsx";
+import StartPage from "@routes/patterns/StartPage.tsx";
+import TaskListPage from "@routes/patterns/TaskListPage.tsx";
+import QuestionPage from "@routes/patterns/QuestionPage.tsx";
+import ReviewPage from "@routes/patterns/ReviewPage.tsx";
+import ResultPage from "@routes/patterns/ResultPage.tsx";
+import SimpleFormPage from "@routes/patterns/SimpleFormPage.tsx";
+import FilterChipPage from "@routes/components/FilterChip.tsx";
+import TextPage from "@routes/components/Text.tsx";
+
+const ComponentRoute: React.FC<{
+  versionedPaths: Record<string, React.ReactElement>;
+}> = ({ versionedPaths }: { versionedPaths: Record<string, React.ReactElement> }) => {
+  const { component } = useParams<{ component: string }>();
+  return versionedPaths[component as keyof typeof versionedPaths] || <ComponentNotFoundPage />;
+};
+
+const VersionedComponentRoute: React.FC<{
+  versionedPaths: Record<string, React.ReactElement>;
+}> = ({ versionedPaths }: { versionedPaths: Record<string, React.ReactElement> }) => {
+  const { version, component } = useParams<{ version: string; component: string }>();
+  if (!version || !component) {
+    return <ComponentNotFoundPage />;
+  }
+  const supportedVersions = [VERSIONED_ANGULAR_URL_SEGMENT, VERSIONED_REACT_URL_SEGMENT];
+  if (!supportedVersions.includes(version)) {
+    return <ComponentNotFoundPage />;
+  }
+
+  const getReactPage = (componentName: keyof typeof versionedPaths) => {
+    return versionedPaths[componentName] || <ComponentNotFoundPage />;
+  };
+
+  return getReactPage(component as keyof typeof versionedPaths);
+};
+
+export const ComponentsRouter = () => {
+  const componentPaths: Record<string, React.ReactElement> = {
+    "accordion": <AccordionPage />,
+    "badge": <BadgePage />,
+    "block": <BlockPage />,
+    "button": <ButtonPage />,
+    "button-group": <ButtonGroupPage />,
+    "callout": <CalloutPage />,
+    "checkbox": <CheckboxPage />,
+    "container": <ContainerPage />,
+    "date-picker": <DatePickerPage />,
+    "details": <DetailsPage />,
+    "divider": <DividerPage />,
+    "dropdown": <DropdownPage />,
+    "file-uploader": <FileUploaderPage />,
+    "filter-chip": <FilterChipPage />,
+    "form-item": <FormItemPage />,
+    "form-stepper": <FormStepperPage />,
+    "grid": <GridPage />,
+    "hero-banner": <HeroBannerPage />,
+    "icons": <IconsPage />,
+    "icon-button": <IconButtonPage />,
+    "input": <TextFieldPage />,
+    "list": <ListPage />,
+    "microsite-header": <MicrositeHeaderPage />,
+    "modal": <ModalPage />,
+    "notification-banner": <NotificationBannerPage />,
+    "pagination": <PaginationPage />,
+    "popover": <PopoverPage />,
+    "progress-indicator": <ProgressIndicatorPage />,
+    "radio": <RadioPage />,
+    "side-menu": <SideMenuPage />,
+    "skeleton-loader": <SkeletonPage />,
+    "spacer": <SpacerPage />,
+    "table": <TablePage />,
+    "tabs": <TabsPage />,
+    "text": <TextPage/>,
+    "text-area": <TextAreaPage />,
+    "tooltip": <TooltipPage />,
+    "text-field": <TextFieldPage />,
+    "header": <AppHeaderPage />,
+    "footer": <AppFooterPage />,
+  };
+
+  return (
+    <Routes>
+      <Route path="/" element={<ComponentsPage />} errorElement={<ComponentNotFoundPage />}>
+        {/* Non-versioned paths components */}
+        <Route index element={<AllComponentsPage />} />
+        <Route path=":component" element={<ComponentRoute versionedPaths={componentPaths} />} />
+
+        {/* Versioned paths components */}
+        <Route path=":version/:component" element={<VersionedComponentRoute versionedPaths={componentPaths}/>} />
+      </Route>
+    </Routes>
+  );
+};
+
+export const PatternsRouter = () => {
+  const patternsPaths = {
+    "layout": <LayoutPage/>,
+    "start-page": <StartPage/>,
+    "task-list-page": <TaskListPage/>,
+    "question-page": <QuestionPage/>,
+    "review-page": <ReviewPage/>,
+    "result-page": <ResultPage/>,
+  };
+
+  return (
+    <Routes>
+      <Route path="/" element={<PatternsLayout />} errorElement={<ComponentNotFoundPage />}>
+        {/* Non-versioned paths components */}
+        <Route index element={<PatternsOverviewPage />} />
+        <Route path="/simple-form" element={<SimpleFormPage/>} />
+        <Route path=":component" element={<ComponentRoute versionedPaths={patternsPaths} />} />
+        {/* Versioned paths components */}
+        <Route path=":version/:component" element={<VersionedComponentRoute versionedPaths={patternsPaths} />} />
+      </Route>
+    </Routes>
+  );
+};
diff --git a/tsconfig.json b/tsconfig.json
index 5abdba5d5..c85970eb3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,7 +21,9 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
     "paths": {
+      "@abgov/ui-components-common": ["node_modules/@abgov/ui-components-common"],
       "@": [
         "./src/*"
       ],