diff --git a/package-lock.json b/package-lock.json
index 9a7446217..17e4a4c05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2410,9 +2410,9 @@
 			}
 		},
 		"node_modules/@cypress/request": {
-			"version": "2.88.12",
-			"resolved": "https://registry.npmjs.org/@cypress/request/-/request-2.88.12.tgz",
-			"integrity": "sha512-tOn+0mDZxASFM+cuAP9szGUGPI1HwWVSvdzm7V4cCsPdFTx6qMj29CwaQmRAMIEhORIUBFBsYROYJcveK4uOjA==",
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz",
+			"integrity": "sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==",
 			"dependencies": {
 				"aws-sign2": "~0.7.0",
 				"aws4": "^1.8.0",
@@ -2427,7 +2427,7 @@
 				"json-stringify-safe": "~5.0.1",
 				"mime-types": "~2.1.19",
 				"performance-now": "^2.1.0",
-				"qs": "~6.10.3",
+				"qs": "6.10.4",
 				"safe-buffer": "^5.1.2",
 				"tough-cookie": "^4.1.3",
 				"tunnel-agent": "^0.6.0",
@@ -18480,20 +18480,19 @@
 			"dev": true
 		},
 		"node_modules/cypress": {
-			"version": "12.17.4",
-			"resolved": "https://registry.npmjs.org/cypress/-/cypress-12.17.4.tgz",
-			"integrity": "sha512-gAN8Pmns9MA5eCDFSDJXWKUpaL3IDd89N9TtIupjYnzLSmlpVr+ZR+vb4U/qaMp+lB6tBvAmt7504c3Z4RU5KQ==",
+			"version": "13.10.0",
+			"resolved": "https://registry.npmjs.org/cypress/-/cypress-13.10.0.tgz",
+			"integrity": "sha512-tOhwRlurVOQbMduX+KonoMeQILs2cwR3yHGGENoFvvSoLUBHmJ8b9/n21gFSDqjlOJ+SRVcwuh+fG/JDsHsT6Q==",
 			"hasInstallScript": true,
 			"dependencies": {
-				"@cypress/request": "2.88.12",
+				"@cypress/request": "^3.0.0",
 				"@cypress/xvfb": "^1.2.4",
-				"@types/node": "^16.18.39",
 				"@types/sinonjs__fake-timers": "8.1.1",
 				"@types/sizzle": "^2.3.2",
 				"arch": "^2.2.0",
 				"blob-util": "^2.0.2",
 				"bluebird": "^3.7.2",
-				"buffer": "^5.6.0",
+				"buffer": "^5.7.1",
 				"cachedir": "^2.3.0",
 				"chalk": "^4.1.0",
 				"check-more-types": "^2.24.0",
@@ -18511,7 +18510,7 @@
 				"figures": "^3.2.0",
 				"fs-extra": "^9.1.0",
 				"getos": "^3.2.1",
-				"is-ci": "^3.0.0",
+				"is-ci": "^3.0.1",
 				"is-installed-globally": "~0.4.0",
 				"lazy-ass": "^1.6.0",
 				"listr2": "^3.8.3",
@@ -18533,7 +18532,7 @@
 				"cypress": "bin/cypress"
 			},
 			"engines": {
-				"node": "^14.0.0 || ^16.0.0 || >=18.0.0"
+				"node": "^16.0.0 || ^18.0.0 || >=20.0.0"
 			}
 		},
 		"node_modules/cypress-wait-until": {
@@ -18541,11 +18540,6 @@
 			"resolved": "https://registry.npmjs.org/cypress-wait-until/-/cypress-wait-until-1.7.2.tgz",
 			"integrity": "sha512-uZ+M8/MqRcpf+FII/UZrU7g1qYZ4aVlHcgyVopnladyoBrpoaMJ4PKZDrdOJ05H5RHbr7s9Tid635X3E+ZLU/Q=="
 		},
-		"node_modules/cypress/node_modules/@types/node": {
-			"version": "16.18.97",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.97.tgz",
-			"integrity": "sha512-4muilE1Lbfn57unR+/nT9AFjWk0MtWi5muwCEJqnOvfRQDbSfLCUdN7vCIg8TYuaANfhLOV85ve+FNpiUsbSRg=="
-		},
 		"node_modules/cypress/node_modules/chalk": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -37979,7 +37973,7 @@
 				"@emotion/react": "11.9.0",
 				"@searchspring/snap-toolbox": "^0.56.3",
 				"classnames": "^2.3.2",
-				"cypress": "^12.15.0",
+				"cypress": "^13.7.1",
 				"cypress-wait-until": "^1.7.2",
 				"deepmerge": "4.3.1",
 				"dequal": "2.0.3",
@@ -38389,35 +38383,6 @@
 				"webpack-merge": "^5.8.0"
 			}
 		},
-		"packages/snap-preact-demo/node_modules/@cypress/request": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz",
-			"integrity": "sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==",
-			"dev": true,
-			"dependencies": {
-				"aws-sign2": "~0.7.0",
-				"aws4": "^1.8.0",
-				"caseless": "~0.12.0",
-				"combined-stream": "~1.0.6",
-				"extend": "~3.0.2",
-				"forever-agent": "~0.6.1",
-				"form-data": "~2.3.2",
-				"http-signature": "~1.3.6",
-				"is-typedarray": "~1.0.0",
-				"isstream": "~0.1.2",
-				"json-stringify-safe": "~5.0.1",
-				"mime-types": "~2.1.19",
-				"performance-now": "^2.1.0",
-				"qs": "6.10.4",
-				"safe-buffer": "^5.1.2",
-				"tough-cookie": "^4.1.3",
-				"tunnel-agent": "^0.6.0",
-				"uuid": "^8.3.2"
-			},
-			"engines": {
-				"node": ">= 6"
-			}
-		},
 		"packages/snap-preact-demo/node_modules/babel-loader": {
 			"version": "9.1.3",
 			"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.3.tgz",
@@ -38435,148 +38400,12 @@
 				"webpack": ">=5"
 			}
 		},
-		"packages/snap-preact-demo/node_modules/chalk": {
-			"version": "4.1.2",
-			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-			"dev": true,
-			"dependencies": {
-				"ansi-styles": "^4.1.0",
-				"supports-color": "^7.1.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/chalk?sponsor=1"
-			}
-		},
-		"packages/snap-preact-demo/node_modules/cli-truncate": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
-			"integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==",
-			"dev": true,
-			"dependencies": {
-				"slice-ansi": "^3.0.0",
-				"string-width": "^4.2.0"
-			},
-			"engines": {
-				"node": ">=8"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"packages/snap-preact-demo/node_modules/commander": {
-			"version": "6.2.1",
-			"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
-			"integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
-			"dev": true,
-			"engines": {
-				"node": ">= 6"
-			}
-		},
-		"packages/snap-preact-demo/node_modules/cypress": {
-			"version": "13.10.0",
-			"resolved": "https://registry.npmjs.org/cypress/-/cypress-13.10.0.tgz",
-			"integrity": "sha512-tOhwRlurVOQbMduX+KonoMeQILs2cwR3yHGGENoFvvSoLUBHmJ8b9/n21gFSDqjlOJ+SRVcwuh+fG/JDsHsT6Q==",
-			"dev": true,
-			"hasInstallScript": true,
-			"dependencies": {
-				"@cypress/request": "^3.0.0",
-				"@cypress/xvfb": "^1.2.4",
-				"@types/sinonjs__fake-timers": "8.1.1",
-				"@types/sizzle": "^2.3.2",
-				"arch": "^2.2.0",
-				"blob-util": "^2.0.2",
-				"bluebird": "^3.7.2",
-				"buffer": "^5.7.1",
-				"cachedir": "^2.3.0",
-				"chalk": "^4.1.0",
-				"check-more-types": "^2.24.0",
-				"cli-cursor": "^3.1.0",
-				"cli-table3": "~0.6.1",
-				"commander": "^6.2.1",
-				"common-tags": "^1.8.0",
-				"dayjs": "^1.10.4",
-				"debug": "^4.3.4",
-				"enquirer": "^2.3.6",
-				"eventemitter2": "6.4.7",
-				"execa": "4.1.0",
-				"executable": "^4.1.1",
-				"extract-zip": "2.0.1",
-				"figures": "^3.2.0",
-				"fs-extra": "^9.1.0",
-				"getos": "^3.2.1",
-				"is-ci": "^3.0.1",
-				"is-installed-globally": "~0.4.0",
-				"lazy-ass": "^1.6.0",
-				"listr2": "^3.8.3",
-				"lodash": "^4.17.21",
-				"log-symbols": "^4.0.0",
-				"minimist": "^1.2.8",
-				"ospath": "^1.2.2",
-				"pretty-bytes": "^5.6.0",
-				"process": "^0.11.10",
-				"proxy-from-env": "1.0.0",
-				"request-progress": "^3.0.0",
-				"semver": "^7.5.3",
-				"supports-color": "^8.1.1",
-				"tmp": "~0.2.1",
-				"untildify": "^4.0.0",
-				"yauzl": "^2.10.0"
-			},
-			"bin": {
-				"cypress": "bin/cypress"
-			},
-			"engines": {
-				"node": "^16.0.0 || ^18.0.0 || >=20.0.0"
-			}
-		},
 		"packages/snap-preact-demo/node_modules/cypress-wait-until": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/cypress-wait-until/-/cypress-wait-until-3.0.1.tgz",
 			"integrity": "sha512-kpoa8yL6Bi/JNsThGBbrrm7g4SNzYyBUv9M5pF6/NTVm/ClY0HnJzeuWnHiAUZKIZ5l86Oedb12wQyjx7/CWPg==",
 			"dev": true
 		},
-		"packages/snap-preact-demo/node_modules/cypress/node_modules/supports-color": {
-			"version": "8.1.1",
-			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-			"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-			"dev": true,
-			"dependencies": {
-				"has-flag": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/supports-color?sponsor=1"
-			}
-		},
-		"packages/snap-preact-demo/node_modules/execa": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
-			"integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
-			"dev": true,
-			"dependencies": {
-				"cross-spawn": "^7.0.0",
-				"get-stream": "^5.0.0",
-				"human-signals": "^1.1.1",
-				"is-stream": "^2.0.0",
-				"merge-stream": "^2.0.0",
-				"npm-run-path": "^4.0.0",
-				"onetime": "^5.1.0",
-				"signal-exit": "^3.0.2",
-				"strip-final-newline": "^2.0.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sindresorhus/execa?sponsor=1"
-			}
-		},
 		"packages/snap-preact-demo/node_modules/find-cache-dir": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-4.0.0.tgz",
@@ -38609,80 +38438,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"packages/snap-preact-demo/node_modules/form-data": {
-			"version": "2.3.3",
-			"resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
-			"integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-			"dev": true,
-			"dependencies": {
-				"asynckit": "^0.4.0",
-				"combined-stream": "^1.0.6",
-				"mime-types": "^2.1.12"
-			},
-			"engines": {
-				"node": ">= 0.12"
-			}
-		},
-		"packages/snap-preact-demo/node_modules/get-stream": {
-			"version": "5.2.0",
-			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-			"integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-			"dev": true,
-			"dependencies": {
-				"pump": "^3.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"packages/snap-preact-demo/node_modules/human-signals": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
-			"integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
-			"dev": true,
-			"engines": {
-				"node": ">=8.12.0"
-			}
-		},
-		"packages/snap-preact-demo/node_modules/is-fullwidth-code-point": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"packages/snap-preact-demo/node_modules/listr2": {
-			"version": "3.14.0",
-			"resolved": "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz",
-			"integrity": "sha512-TyWI8G99GX9GjE54cJ+RrNMcIFBfwMPxc3XTFiAYGN4s10hWROGtOg7+O6u6LE3mNkyld7RSLE6nrKBvTfcs3g==",
-			"dev": true,
-			"dependencies": {
-				"cli-truncate": "^2.1.0",
-				"colorette": "^2.0.16",
-				"log-update": "^4.0.0",
-				"p-map": "^4.0.0",
-				"rfdc": "^1.3.0",
-				"rxjs": "^7.5.1",
-				"through": "^2.3.8",
-				"wrap-ansi": "^7.0.0"
-			},
-			"engines": {
-				"node": ">=10.0.0"
-			},
-			"peerDependencies": {
-				"enquirer": ">= 2.3.0 < 3"
-			},
-			"peerDependenciesMeta": {
-				"enquirer": {
-					"optional": true
-				}
-			}
-		},
 		"packages/snap-preact-demo/node_modules/locate-path": {
 			"version": "7.2.0",
 			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-7.2.0.tgz",
@@ -38698,15 +38453,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"packages/snap-preact-demo/node_modules/minimist": {
-			"version": "1.2.8",
-			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-			"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-			"dev": true,
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
 		"packages/snap-preact-demo/node_modules/p-limit": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
@@ -38761,27 +38507,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"packages/snap-preact-demo/node_modules/proxy-from-env": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
-			"integrity": "sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==",
-			"dev": true
-		},
-		"packages/snap-preact-demo/node_modules/qs": {
-			"version": "6.10.4",
-			"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.4.tgz",
-			"integrity": "sha512-OQiU+C+Ds5qiH91qh/mg0w+8nwQuLjM4F4M/PbmhDOoYehPh+Fb0bDjtR1sOvy7YKxvj28Y/M0PhP5uVX0kB+g==",
-			"dev": true,
-			"dependencies": {
-				"side-channel": "^1.0.4"
-			},
-			"engines": {
-				"node": ">=0.6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
 		"packages/snap-preact-demo/node_modules/schema-utils": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
@@ -38801,38 +38526,6 @@
 				"url": "https://opencollective.com/webpack"
 			}
 		},
-		"packages/snap-preact-demo/node_modules/slice-ansi": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
-			"integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==",
-			"dev": true,
-			"dependencies": {
-				"ansi-styles": "^4.0.0",
-				"astral-regex": "^2.0.0",
-				"is-fullwidth-code-point": "^3.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"packages/snap-preact-demo/node_modules/tmp": {
-			"version": "0.2.3",
-			"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
-			"integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==",
-			"dev": true,
-			"engines": {
-				"node": ">=14.14"
-			}
-		},
-		"packages/snap-preact-demo/node_modules/uuid": {
-			"version": "8.3.2",
-			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-			"dev": true,
-			"bin": {
-				"uuid": "dist/bin/uuid"
-			}
-		},
 		"packages/snap-preact-demo/node_modules/yocto-queue": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz",
diff --git a/packages/snap-preact-components/package.json b/packages/snap-preact-components/package.json
index cd19ad4d1..a22a33820 100644
--- a/packages/snap-preact-components/package.json
+++ b/packages/snap-preact-components/package.json
@@ -31,7 +31,7 @@
 		"@emotion/react": "11.9.0",
 		"@searchspring/snap-toolbox": "^0.56.3",
 		"classnames": "^2.3.2",
-		"cypress": "^12.15.0",
+		"cypress": "^13.7.1",
 		"cypress-wait-until": "^1.7.2",
 		"deepmerge": "4.3.1",
 		"dequal": "2.0.3",
diff --git a/packages/snap-preact-components/src/components/Atoms/BadgeImage/BadgeImage.tsx b/packages/snap-preact-components/src/components/Atoms/BadgeImage/BadgeImage.tsx
index d2d3c53e8..4484f831e 100644
--- a/packages/snap-preact-components/src/components/Atoms/BadgeImage/BadgeImage.tsx
+++ b/packages/snap-preact-components/src/components/Atoms/BadgeImage/BadgeImage.tsx
@@ -3,7 +3,7 @@ import { Fragment, h } from 'preact';
 
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
-import { observer } from 'mobx-react-lite';
+import { observer } from 'mobx-react';
 
 import { Theme, useTheme, CacheProvider } from '../../../providers';
 import { ComponentProps, StylingCSS } from '../../../types';
diff --git a/packages/snap-preact-components/src/components/Atoms/BadgePill/BadgePill.tsx b/packages/snap-preact-components/src/components/Atoms/BadgePill/BadgePill.tsx
index a58806edd..89cb55f2f 100644
--- a/packages/snap-preact-components/src/components/Atoms/BadgePill/BadgePill.tsx
+++ b/packages/snap-preact-components/src/components/Atoms/BadgePill/BadgePill.tsx
@@ -3,7 +3,7 @@ import { Fragment, h } from 'preact';
 
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
-import { observer } from 'mobx-react-lite';
+import { observer } from 'mobx-react';
 import { Theme, useTheme, CacheProvider } from '../../../providers';
 import { ComponentProps, StylingCSS } from '../../../types';
 
diff --git a/packages/snap-preact-components/src/components/Atoms/BadgeRectangle/BadgeRectangle.tsx b/packages/snap-preact-components/src/components/Atoms/BadgeRectangle/BadgeRectangle.tsx
index d4412ebde..f453b6dbb 100644
--- a/packages/snap-preact-components/src/components/Atoms/BadgeRectangle/BadgeRectangle.tsx
+++ b/packages/snap-preact-components/src/components/Atoms/BadgeRectangle/BadgeRectangle.tsx
@@ -3,7 +3,7 @@ import { Fragment, h } from 'preact';
 
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
-import { observer } from 'mobx-react-lite';
+import { observer } from 'mobx-react';
 import { Theme, useTheme, CacheProvider } from '../../../providers';
 import { ComponentProps, StylingCSS } from '../../../types';
 
diff --git a/packages/snap-preact-components/src/components/Atoms/BadgeText/BadgeText.tsx b/packages/snap-preact-components/src/components/Atoms/BadgeText/BadgeText.tsx
index aac52b065..e0280c87f 100644
--- a/packages/snap-preact-components/src/components/Atoms/BadgeText/BadgeText.tsx
+++ b/packages/snap-preact-components/src/components/Atoms/BadgeText/BadgeText.tsx
@@ -3,7 +3,7 @@ import { Fragment, h } from 'preact';
 
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
-import { observer } from 'mobx-react-lite';
+import { observer } from 'mobx-react';
 import { Theme, useTheme, CacheProvider } from '../../../providers';
 import { ComponentProps, StylingCSS } from '../../../types';
 
diff --git a/packages/snap-preact-components/src/components/Molecules/CalloutBadge/CalloutBadge.tsx b/packages/snap-preact-components/src/components/Molecules/CalloutBadge/CalloutBadge.tsx
index 8391ab040..c1211efde 100644
--- a/packages/snap-preact-components/src/components/Molecules/CalloutBadge/CalloutBadge.tsx
+++ b/packages/snap-preact-components/src/components/Molecules/CalloutBadge/CalloutBadge.tsx
@@ -3,7 +3,7 @@ import { Fragment, h } from 'preact';
 
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
-import { observer } from 'mobx-react-lite';
+import { observer } from 'mobx-react';
 
 import { Theme, useTheme, CacheProvider } from '../../../providers';
 import { ComponentProps, StylingCSS, ComponentMap } from '../../../types';
diff --git a/packages/snap-preact-components/src/components/Molecules/OverlayBadge/OverlayBadge.tsx b/packages/snap-preact-components/src/components/Molecules/OverlayBadge/OverlayBadge.tsx
index 7a612238f..3a9c35a65 100644
--- a/packages/snap-preact-components/src/components/Molecules/OverlayBadge/OverlayBadge.tsx
+++ b/packages/snap-preact-components/src/components/Molecules/OverlayBadge/OverlayBadge.tsx
@@ -3,7 +3,7 @@ import { ComponentChildren, Fragment, h } from 'preact';
 
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
-import { observer } from 'mobx-react-lite';
+import { observer } from 'mobx-react';
 
 import { Theme, useTheme, CacheProvider } from '../../../providers';
 import { ComponentProps, StylingCSS, ComponentMap } from '../../../types';
diff --git a/packages/snap-store-mobx/src/Search/Stores/SearchResultStore.ts b/packages/snap-store-mobx/src/Search/Stores/SearchResultStore.ts
index b8c301d8d..b7e2caed5 100644
--- a/packages/snap-store-mobx/src/Search/Stores/SearchResultStore.ts
+++ b/packages/snap-store-mobx/src/Search/Stores/SearchResultStore.ts
@@ -119,16 +119,20 @@ export class Banner {
 export type VariantData = {
 	mappings: SearchResponseModelResultMappings;
 	attributes: Record<string, unknown>;
-	options: Record<
-		string,
-		{
-			value: string;
-			attributeId?: string;
-			optionId?: string;
-		}
-	>;
+	options: VariantDataOptions;
 };
 
+export type VariantDataOptions = Record<
+	string,
+	{
+		value: string;
+		background?: string;
+		backgroundImageUrl?: string;
+		attributeId?: string;
+		optionId?: string;
+	}
+>;
+
 type ProductMinimal = {
 	id: string;
 	attributes: Record<string, unknown>;
@@ -505,6 +509,12 @@ export class VariantSelection {
 
 					if (this.config.thumbnailBackgroundImages) {
 						mappedValue.backgroundImageUrl = thumbnailImageUrl;
+					} else if (variant.options[this.field].backgroundImageUrl) {
+						mappedValue.backgroundImageUrl = variant.options[this.field].backgroundImageUrl;
+					}
+
+					if (variant.options[this.field].background) {
+						mappedValue.background = variant.options[this.field].background;
 					}
 
 					if (this.config.mappings && this.config.mappings && this.config.mappings[value.toString().toLowerCase()]) {
@@ -580,14 +590,7 @@ export class Variant {
 	public type = 'variant';
 	public available: boolean;
 	public attributes: Record<string, unknown> = {};
-	public options: Record<
-		string,
-		{
-			value: string;
-			attributeId?: string;
-			optionId?: string;
-		}
-	>;
+	public options: VariantDataOptions;
 
 	public mappings: SearchResponseModelResultMappings = {
 		core: {},