diff --git a/packages/fxa-auth-server/package.json b/packages/fxa-auth-server/package.json
index bfe39ce475..81f68bd981 100644
--- a/packages/fxa-auth-server/package.json
+++ b/packages/fxa-auth-server/package.json
@@ -183,7 +183,7 @@
     "sass": "^1.80.4",
     "simplesmtp": "0.3.35",
     "sinon": "^9.0.3",
-    "storybook": "^7.4.6",
+    "storybook": "^7.6.21",
     "through": "2.3.8",
     "tsc-alias": "^1.8.8",
     "type-fest": "^4.38.0",
diff --git a/packages/fxa-payments-server/package.json b/packages/fxa-payments-server/package.json
index 413cb8023f..33617f4952 100644
--- a/packages/fxa-payments-server/package.json
+++ b/packages/fxa-payments-server/package.json
@@ -106,7 +106,7 @@
     "prettier": "^3.5.3",
     "redux-devtools-extension": "^2.13.9",
     "sinon": "^9.0.3",
-    "storybook": "^7.0.23",
+    "storybook": "^7.6.21",
     "storybook-addon-mock": "4.2.1",
     "supertest": "^7.0.0",
     "tailwindcss": "3.4.3",
diff --git a/packages/fxa-react/package.json b/packages/fxa-react/package.json
index 4c7732c031..ccc55b16b7 100644
--- a/packages/fxa-react/package.json
+++ b/packages/fxa-react/package.json
@@ -86,7 +86,7 @@
     "prettier": "^3.5.3",
     "rimraf": "^6.0.1",
     "sass-loader": "^16.0.3",
-    "storybook": "^7.0.23",
+    "storybook": "^7.6.21",
     "tailwindcss": "3.4.3",
     "tsc-alias": "^1.8.8",
     "typescript": "5.5.3",
diff --git a/packages/fxa-settings/package.json b/packages/fxa-settings/package.json
index 3321dc8185..e0c51138dd 100644
--- a/packages/fxa-settings/package.json
+++ b/packages/fxa-settings/package.json
@@ -249,7 +249,7 @@
     "prop-types": "^15.8.1",
     "raw-loader": "^4.0.2",
     "sinon": "^15.0.1",
-    "storybook": "^7.0.23",
+    "storybook": "^7.6.21",
     "storybook-addon-rtl": "^0.5.0",
     "style-loader": "^4.0.0",
     "ts-jest": "^29.2.3",
diff --git a/yarn.lock b/yarn.lock
index f66dd9f36a..45b930cab2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17870,6 +17870,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/builder-manager@npm:7.6.21":
+  version: 7.6.21
+  resolution: "@storybook/builder-manager@npm:7.6.21"
+  dependencies:
+    "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2"
+    "@storybook/core-common": "npm:7.6.21"
+    "@storybook/manager": "npm:7.6.21"
+    "@storybook/node-logger": "npm:7.6.21"
+    "@types/ejs": "npm:^3.1.1"
+    "@types/find-cache-dir": "npm:^3.2.1"
+    "@yarnpkg/esbuild-plugin-pnp": "npm:^3.0.0-rc.10"
+    browser-assert: "npm:^1.2.1"
+    ejs: "npm:^3.1.8"
+    esbuild: "npm:^0.18.0"
+    esbuild-plugin-alias: "npm:^0.2.1"
+    express: "npm:^4.17.3"
+    find-cache-dir: "npm:^3.0.0"
+    fs-extra: "npm:^11.1.0"
+    process: "npm:^0.11.10"
+    util: "npm:^0.12.4"
+  checksum: 10c0/f75e0543523a836af26ec97ee7e9aefbb2eeaea6413fcd1f3d1625ac752886c904aaea973d025998c3b155a6123c2ac9f0ea0e9aa82fb969e40c8bc506b43e05
+  languageName: node
+  linkType: hard
+
 "@storybook/builder-webpack5@npm:7.5.3":
   version: 7.5.3
   resolution: "@storybook/builder-webpack5@npm:7.5.3"
@@ -18131,6 +18155,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/channels@npm:7.6.21":
+  version: 7.6.21
+  resolution: "@storybook/channels@npm:7.6.21"
+  dependencies:
+    "@storybook/client-logger": "npm:7.6.21"
+    "@storybook/core-events": "npm:7.6.21"
+    "@storybook/global": "npm:^5.0.0"
+    qs: "npm:^6.10.0"
+    telejson: "npm:^7.2.0"
+    tiny-invariant: "npm:^1.3.1"
+  checksum: 10c0/ef2d7b25f34e6d6da9edf28e11f222f94d76a67bd151dd10a8185b8f85206b1939fa2e04830b9c9458fa7464be3845be6888742e7d789e7057d6eab0badb57fd
+  languageName: node
+  linkType: hard
+
 "@storybook/channels@npm:7.6.4":
   version: 7.6.4
   resolution: "@storybook/channels@npm:7.6.4"
@@ -18145,22 +18183,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/cli@npm:7.6.20":
-  version: 7.6.20
-  resolution: "@storybook/cli@npm:7.6.20"
+"@storybook/cli@npm:7.6.21":
+  version: 7.6.21
+  resolution: "@storybook/cli@npm:7.6.21"
   dependencies:
     "@babel/core": "npm:^7.23.2"
     "@babel/preset-env": "npm:^7.23.2"
     "@babel/types": "npm:^7.23.0"
     "@ndelangen/get-tarball": "npm:^3.0.7"
-    "@storybook/codemod": "npm:7.6.20"
-    "@storybook/core-common": "npm:7.6.20"
-    "@storybook/core-events": "npm:7.6.20"
-    "@storybook/core-server": "npm:7.6.20"
-    "@storybook/csf-tools": "npm:7.6.20"
-    "@storybook/node-logger": "npm:7.6.20"
-    "@storybook/telemetry": "npm:7.6.20"
-    "@storybook/types": "npm:7.6.20"
+    "@storybook/codemod": "npm:7.6.21"
+    "@storybook/core-common": "npm:7.6.21"
+    "@storybook/core-events": "npm:7.6.21"
+    "@storybook/core-server": "npm:7.6.21"
+    "@storybook/csf-tools": "npm:7.6.21"
+    "@storybook/node-logger": "npm:7.6.21"
+    "@storybook/telemetry": "npm:7.6.21"
+    "@storybook/types": "npm:7.6.21"
     "@types/semver": "npm:^7.3.4"
     "@yarnpkg/fslib": "npm:2.10.3"
     "@yarnpkg/libzip": "npm:2.3.0"
@@ -18192,7 +18230,7 @@ __metadata:
   bin:
     getstorybook: ./bin/index.js
     sb: ./bin/index.js
-  checksum: 10c0/93b267043908493347211a1489d5bd325997b416753a1b42c27e78d5c0534f1078da1bf8201f557b8746ecec64f90ac490c8d2854eb3a1283c15f0c1fdfa4df4
+  checksum: 10c0/1754c6513b977220c1132e6c1254b277925c55ae24bdc15174617b8ad33417f5f5a3d73b3443dfcc4e9148a9cb1a83a7cbd040c15d63691a11bac764a076e808
   languageName: node
   linkType: hard
 
@@ -18286,6 +18324,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/client-logger@npm:7.6.21":
+  version: 7.6.21
+  resolution: "@storybook/client-logger@npm:7.6.21"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+  checksum: 10c0/1f1d2de750903c9194dca2a278d8978aa031c5d2e3b8296559bc86e8dab505a6220b93b22cb9d2db51d30525dca414998fb57e25d766b1625ce145f4ea6a308a
+  languageName: node
+  linkType: hard
+
 "@storybook/client-logger@npm:7.6.4":
   version: 7.6.4
   resolution: "@storybook/client-logger@npm:7.6.4"
@@ -18295,17 +18342,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/codemod@npm:7.6.20":
-  version: 7.6.20
-  resolution: "@storybook/codemod@npm:7.6.20"
+"@storybook/codemod@npm:7.6.21":
+  version: 7.6.21
+  resolution: "@storybook/codemod@npm:7.6.21"
   dependencies:
     "@babel/core": "npm:^7.23.2"
     "@babel/preset-env": "npm:^7.23.2"
     "@babel/types": "npm:^7.23.0"
     "@storybook/csf": "npm:^0.1.2"
-    "@storybook/csf-tools": "npm:7.6.20"
-    "@storybook/node-logger": "npm:7.6.20"
-    "@storybook/types": "npm:7.6.20"
+    "@storybook/csf-tools": "npm:7.6.21"
+    "@storybook/node-logger": "npm:7.6.21"
+    "@storybook/types": "npm:7.6.21"
     "@types/cross-spawn": "npm:^6.0.2"
     cross-spawn: "npm:^7.0.3"
     globby: "npm:^11.0.2"
@@ -18313,7 +18360,7 @@ __metadata:
     lodash: "npm:^4.17.21"
     prettier: "npm:^2.8.0"
     recast: "npm:^0.23.1"
-  checksum: 10c0/9800e9f8cbb25558fc23b3b4699f232d2fbbe5d27a2d795ffbf509460bce73d2d970aa4a84f7c94924708b73853d8659f677fae7141af0f641ce88b40f93462d
+  checksum: 10c0/4c37d74a0946692ea706b0c0f1a724ac4412a8ef9f1e4baa119db2c27caf10672082db0976737c54507b289553710a6f04a28ae0f20c72ad1c84edc0e86aed3c
   languageName: node
   linkType: hard
 
@@ -18745,6 +18792,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/core-common@npm:7.6.21":
+  version: 7.6.21
+  resolution: "@storybook/core-common@npm:7.6.21"
+  dependencies:
+    "@storybook/core-events": "npm:7.6.21"
+    "@storybook/node-logger": "npm:7.6.21"
+    "@storybook/types": "npm:7.6.21"
+    "@types/find-cache-dir": "npm:^3.2.1"
+    "@types/node": "npm:^18.0.0"
+    "@types/node-fetch": "npm:^2.6.4"
+    "@types/pretty-hrtime": "npm:^1.0.0"
+    chalk: "npm:^4.1.0"
+    esbuild: "npm:^0.18.0"
+    esbuild-register: "npm:^3.5.0"
+    file-system-cache: "npm:2.3.0"
+    find-cache-dir: "npm:^3.0.0"
+    find-up: "npm:^5.0.0"
+    fs-extra: "npm:^11.1.0"
+    glob: "npm:^10.0.0"
+    handlebars: "npm:^4.7.7"
+    lazy-universal-dotenv: "npm:^4.0.0"
+    node-fetch: "npm:^2.0.0"
+    picomatch: "npm:^2.3.0"
+    pkg-dir: "npm:^5.0.0"
+    pretty-hrtime: "npm:^1.0.3"
+    resolve-from: "npm:^5.0.0"
+    ts-dedent: "npm:^2.0.0"
+  checksum: 10c0/7531535304ae676b955a3f8ecd155f4aeea774578454f7500f8428835771ade341cc524a63184c21975ddb30de9abcdae3dfddf15711a90e928e237b5c0683f8
+  languageName: node
+  linkType: hard
+
 "@storybook/core-events@npm:7.0.23":
   version: 7.0.23
   resolution: "@storybook/core-events@npm:7.0.23"
@@ -18829,6 +18907,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/core-events@npm:7.6.21":
+  version: 7.6.21
+  resolution: "@storybook/core-events@npm:7.6.21"
+  dependencies:
+    ts-dedent: "npm:^2.0.0"
+  checksum: 10c0/7d7618a40e99e933f45b8eb0433b0c297b16d67c91b5fc2d18e57f0decdd58cdc2626e41e9481b0becb3572d3e0da75d98bf85beb7ff80bad01f127623af348c
+  languageName: node
+  linkType: hard
+
 "@storybook/core-events@npm:7.6.4":
   version: 7.6.4
   resolution: "@storybook/core-events@npm:7.6.4"
@@ -18886,6 +18973,54 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/core-server@npm:7.6.21":
+  version: 7.6.21
+  resolution: "@storybook/core-server@npm:7.6.21"
+  dependencies:
+    "@aw-web-design/x-default-browser": "npm:1.4.126"
+    "@discoveryjs/json-ext": "npm:^0.5.3"
+    "@storybook/builder-manager": "npm:7.6.21"
+    "@storybook/channels": "npm:7.6.21"
+    "@storybook/core-common": "npm:7.6.21"
+    "@storybook/core-events": "npm:7.6.21"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/csf-tools": "npm:7.6.21"
+    "@storybook/docs-mdx": "npm:^0.1.0"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/manager": "npm:7.6.21"
+    "@storybook/node-logger": "npm:7.6.21"
+    "@storybook/preview-api": "npm:7.6.21"
+    "@storybook/telemetry": "npm:7.6.21"
+    "@storybook/types": "npm:7.6.21"
+    "@types/detect-port": "npm:^1.3.0"
+    "@types/node": "npm:^18.0.0"
+    "@types/pretty-hrtime": "npm:^1.0.0"
+    "@types/semver": "npm:^7.3.4"
+    better-opn: "npm:^3.0.2"
+    chalk: "npm:^4.1.0"
+    cli-table3: "npm:^0.6.1"
+    compression: "npm:^1.7.4"
+    detect-port: "npm:^1.3.0"
+    express: "npm:^4.17.3"
+    fs-extra: "npm:^11.1.0"
+    globby: "npm:^11.0.2"
+    lodash: "npm:^4.17.21"
+    open: "npm:^8.4.0"
+    pretty-hrtime: "npm:^1.0.3"
+    prompts: "npm:^2.4.0"
+    read-pkg-up: "npm:^7.0.1"
+    semver: "npm:^7.3.7"
+    telejson: "npm:^7.2.0"
+    tiny-invariant: "npm:^1.3.1"
+    ts-dedent: "npm:^2.0.0"
+    util: "npm:^0.12.4"
+    util-deprecate: "npm:^1.0.2"
+    watchpack: "npm:^2.2.0"
+    ws: "npm:^8.2.3"
+  checksum: 10c0/9f2db5ae0d97df6ef1b804e1b872d3d14e599fe0c44b292a27050777e4129076b53680a12490fc02823199a99e831e915c07ae23f45cc0c4a0d838262174d6e9
+  languageName: node
+  linkType: hard
+
 "@storybook/core-webpack@npm:7.5.3":
   version: 7.5.3
   resolution: "@storybook/core-webpack@npm:7.5.3"
@@ -19010,6 +19145,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/csf-tools@npm:7.6.21":
+  version: 7.6.21
+  resolution: "@storybook/csf-tools@npm:7.6.21"
+  dependencies:
+    "@babel/generator": "npm:^7.23.0"
+    "@babel/parser": "npm:^7.23.0"
+    "@babel/traverse": "npm:^7.23.2"
+    "@babel/types": "npm:^7.23.0"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/types": "npm:7.6.21"
+    fs-extra: "npm:^11.1.0"
+    recast: "npm:^0.23.1"
+    ts-dedent: "npm:^2.0.0"
+  checksum: 10c0/a68b2e03988a1f0a5a37c5d60f5c6a3cc1f7f34d46b75190b692bba1380cc6ad41e387883061010cf13d9ca51fc9a36ea903797d989699f636422fd7110bfdbe
+  languageName: node
+  linkType: hard
+
 "@storybook/csf@npm:^0.1.0, @storybook/csf@npm:^0.1.2":
   version: 0.1.13
   resolution: "@storybook/csf@npm:0.1.13"
@@ -19405,6 +19557,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/manager@npm:7.6.21":
+  version: 7.6.21
+  resolution: "@storybook/manager@npm:7.6.21"
+  checksum: 10c0/7c02e9f17c4fbe08717a9472cf506c726daebf6b15f1f147bee0c778d9530151d0d583702bc4f30d5a77bea1f085f97b6d230275f1065e2e0c91ce0c1bed783c
+  languageName: node
+  linkType: hard
+
 "@storybook/mdx2-csf@npm:^1.0.0":
   version: 1.1.0
   resolution: "@storybook/mdx2-csf@npm:1.1.0"
@@ -19535,6 +19694,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/node-logger@npm:7.6.21":
+  version: 7.6.21
+  resolution: "@storybook/node-logger@npm:7.6.21"
+  checksum: 10c0/edefb6cf7b742ea2141c2ef9258c7fa8d6ba076014bc4221f67e3ecc53136215a433f2ec787d54a59cb663324459fb13a354845a5c28a0c6264a93a65d77833a
+  languageName: node
+  linkType: hard
+
 "@storybook/postinstall@npm:7.6.12":
   version: 7.6.12
   resolution: "@storybook/postinstall@npm:7.6.12"
@@ -19869,6 +20035,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/preview-api@npm:7.6.21":
+  version: 7.6.21
+  resolution: "@storybook/preview-api@npm:7.6.21"
+  dependencies:
+    "@storybook/channels": "npm:7.6.21"
+    "@storybook/client-logger": "npm:7.6.21"
+    "@storybook/core-events": "npm:7.6.21"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/types": "npm:7.6.21"
+    "@types/qs": "npm:^6.9.5"
+    dequal: "npm:^2.0.2"
+    lodash: "npm:^4.17.21"
+    memoizerific: "npm:^1.11.3"
+    qs: "npm:^6.10.0"
+    synchronous-promise: "npm:^2.0.15"
+    ts-dedent: "npm:^2.0.0"
+    util-deprecate: "npm:^1.0.2"
+  checksum: 10c0/94b14b0dd4092cfe1c2736a66a7d2b49c4ff3b1b4e38e7c0cde46dd2a8962275152dede89e0aac4e7e8fb6a2cbdd32e7f88d2ecfb0a535e6e80f70149b2a63f0
+  languageName: node
+  linkType: hard
+
 "@storybook/preview@npm:7.5.3":
   version: 7.5.3
   resolution: "@storybook/preview@npm:7.5.3"
@@ -20215,6 +20403,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/telemetry@npm:7.6.21":
+  version: 7.6.21
+  resolution: "@storybook/telemetry@npm:7.6.21"
+  dependencies:
+    "@storybook/client-logger": "npm:7.6.21"
+    "@storybook/core-common": "npm:7.6.21"
+    "@storybook/csf-tools": "npm:7.6.21"
+    chalk: "npm:^4.1.0"
+    detect-package-manager: "npm:^2.0.1"
+    fetch-retry: "npm:^5.0.2"
+    fs-extra: "npm:^11.1.0"
+    read-pkg-up: "npm:^7.0.1"
+  checksum: 10c0/0b9d94787d05eb4fd8738f8734e9dd96d1017e8b5a29e282d0423a98a94a4a5bd164f1484b400cd3d8ee0aeb83ad5ddf8f1ee61499c0b348e9cc6777c0ef7a79
+  languageName: node
+  linkType: hard
+
 "@storybook/testing-library@npm:0.2.0":
   version: 0.2.0
   resolution: "@storybook/testing-library@npm:0.2.0"
@@ -20451,6 +20655,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/types@npm:7.6.21":
+  version: 7.6.21
+  resolution: "@storybook/types@npm:7.6.21"
+  dependencies:
+    "@storybook/channels": "npm:7.6.21"
+    "@types/babel__core": "npm:^7.0.0"
+    "@types/express": "npm:^4.7.0"
+    file-system-cache: "npm:2.3.0"
+  checksum: 10c0/7b46217a0bcb2afe3d233a99744c0d00d176d820593410875df9571b8af00ee44d23f736ec1e27dc8873b750b8e3e90715b2ab1893d965f2603c2bd4637af01e
+  languageName: node
+  linkType: hard
+
 "@storybook/types@npm:7.6.4":
   version: 7.6.4
   resolution: "@storybook/types@npm:7.6.4"
@@ -35190,7 +35406,7 @@ __metadata:
     sass: "npm:^1.80.4"
     simplesmtp: "npm:0.3.35"
     sinon: "npm:^9.0.3"
-    storybook: "npm:^7.4.6"
+    storybook: "npm:^7.6.21"
     through: "npm:2.3.8"
     tsc-alias: "npm:^1.8.8"
     type-fest: "npm:^4.38.0"
@@ -35636,7 +35852,7 @@ __metadata:
     redux-thunk: "npm:^2.4.1"
     serve-static: "npm:^1.16.0"
     sinon: "npm:^9.0.3"
-    storybook: "npm:^7.0.23"
+    storybook: "npm:^7.6.21"
     storybook-addon-mock: "npm:4.2.1"
     supertest: "npm:^7.0.0"
     tailwindcss: "npm:3.4.3"
@@ -35740,7 +35956,7 @@ __metadata:
     rimraf: "npm:^6.0.1"
     sass-loader: "npm:^16.0.3"
     sinon: "npm:^9.2.3"
-    storybook: "npm:^7.0.23"
+    storybook: "npm:^7.6.21"
     tailwindcss: "npm:3.4.3"
     tailwindcss-dir: "npm:^4.0.0"
     tsc-alias: "npm:^1.8.8"
@@ -35862,7 +36078,7 @@ __metadata:
     semver: "npm:^7.7.1"
     sinon: "npm:^15.0.1"
     source-map-loader: "npm:^5.0.0"
-    storybook: "npm:^7.0.23"
+    storybook: "npm:^7.6.21"
     storybook-addon-rtl: "npm:^0.5.0"
     stream-browserify: "npm:^3.0.0"
     style-loader: "npm:^4.0.0"
@@ -54640,15 +54856,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"storybook@npm:^7.0.23, storybook@npm:^7.4.6":
-  version: 7.6.20
-  resolution: "storybook@npm:7.6.20"
+"storybook@npm:^7.6.21":
+  version: 7.6.21
+  resolution: "storybook@npm:7.6.21"
   dependencies:
-    "@storybook/cli": "npm:7.6.20"
+    "@storybook/cli": "npm:7.6.21"
   bin:
     sb: ./index.js
     storybook: ./index.js
-  checksum: 10c0/c710019def6053c505ba072da539d873ca06dfbd4210ab63dcde12a1efb78b95af105b7b875571e685f2fc4e77c15462145e59372dbab3ebe176ae073915cd70
+  checksum: 10c0/4730b0e1616e8b786d36477b16037a07111700e425811345ac6de33901d0a9138ca2509f23bd36b0212f174ace7c9ae35573e9ad53eeb46da9ba2bf367a1ed56
   languageName: node
   linkType: hard