diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
index 990ae84c64..9a679f7d8b 100644
--- a/RELEASE_NOTES.md
+++ b/RELEASE_NOTES.md
@@ -12,4 +12,6 @@
 
 ## Technical changes
 
+- Browser support got significantly increased (now last 2 major versions, Firefox ESR, > 0,5% instead of 1%).
+  - This is only impacting projects consuming the CSS & JS straight from the CDN. If you're pulling the source files then the polyfilling/transpilling will only be done by your own build pipeline anyways.
 - updated dependencies
diff --git a/package-lock.json b/package-lock.json
index 8c4c8f286a..ebc8d303f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6638,9 +6638,9 @@
 			}
 		},
 		"node_modules/caniuse-lite": {
-			"version": "1.0.30001680",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz",
-			"integrity": "sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==",
+			"version": "1.0.30001687",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001687.tgz",
+			"integrity": "sha512-0S/FDhf4ZiqrTUiQ39dKeUjYRjkv7lOZU1Dgif2rIqrTzX/1wV2hfKu9TOm1IHkdSijfLswxTFzl/cvir+SLSQ==",
 			"dev": true,
 			"funding": [
 				{
@@ -6655,7 +6655,8 @@
 					"type": "github",
 					"url": "https://github.com/sponsors/ai"
 				}
-			]
+			],
+			"license": "CC-BY-4.0"
 		},
 		"node_modules/chalk": {
 			"version": "4.1.2",
@@ -23768,9 +23769,9 @@
 			}
 		},
 		"caniuse-lite": {
-			"version": "1.0.30001680",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz",
-			"integrity": "sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==",
+			"version": "1.0.30001687",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001687.tgz",
+			"integrity": "sha512-0S/FDhf4ZiqrTUiQ39dKeUjYRjkv7lOZU1Dgif2rIqrTzX/1wV2hfKu9TOm1IHkdSijfLswxTFzl/cvir+SLSQ==",
 			"dev": true
 		},
 		"chalk": {
diff --git a/package.json b/package.json
index c878990409..b784018b1d 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,9 @@
 	"homepage": "https://github.com/swedbankpay/design.swedbankpay.com#readme",
 	"browserslist": [
 		"last 3 versions",
-		"> 1%",
+		"last 2 major versions",
+		"> 0.5%",
+		"Firefox ESR",
 		"not dead"
 	],
 	"dependencies": {
diff --git a/postcss.config.js b/postcss.config.js
index aca4c104b1..5ee7ebb6d0 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,3 +1,11 @@
+const postcssPresetEnv = require("postcss-preset-env");
+
 module.exports = {
-	plugins: [["postcss-preset-env"]],
+	plugins: [
+		postcssPresetEnv({
+			stage: 2,
+			minimumVendorImplementations: 2,
+			preserve: true,
+		}),
+	],
 };
diff --git a/src/App/GetStarted/get-started/ForDevelopers/__snapshots__/index.test.js.snap b/src/App/GetStarted/get-started/ForDevelopers/__snapshots__/index.test.js.snap
index 51b79a9d73..f77d2c4c13 100644
--- a/src/App/GetStarted/get-started/ForDevelopers/__snapshots__/index.test.js.snap
+++ b/src/App/GetStarted/get-started/ForDevelopers/__snapshots__/index.test.js.snap
@@ -1170,7 +1170,7 @@ exports[`GetStarted: ForDevelopers Installation renders 1`] = `
         <b>
           Target Browser:
         </b>
-         "Last 3 versions, &gt; 1%, not dead"
+         "Last 3 versions, Last 2 major versions, &gt; 0.5%, not dead"
       </p>
     </div>
     <h4>
@@ -1180,6 +1180,9 @@ exports[`GetStarted: ForDevelopers Installation renders 1`] = `
       It is up to every Project manager and development team to decide which browsers their product should support. If you want to support other browsers than the ones supported by the Design Guide you need to maintain and test the component code in in your project.
        
     </p>
+    <p>
+      We of course encourage to use PostCSS to do that in your build pipeline.
+    </p>
   </section>
 </section>
 `;
diff --git a/src/App/GetStarted/get-started/ForDevelopers/index.js b/src/App/GetStarted/get-started/ForDevelopers/index.js
index 573543ad24..7f1095b592 100644
--- a/src/App/GetStarted/get-started/ForDevelopers/index.js
+++ b/src/App/GetStarted/get-started/ForDevelopers/index.js
@@ -350,7 +350,8 @@ const BrowserSupport = () => (
 		<div className="alert alert-informative mt-4">
 			<i className="at-info-circle" aria-hidden="true"></i>
 			<p>
-				<b>Target Browser:</b> &quot;Last 3 versions, &gt; 1%, not dead&quot;
+				<b>Target Browser:</b> &quot;Last 3 versions, Last 2 major versions,
+				&gt; 0.5%, not dead&quot;
 			</p>
 		</div>
 		<h4>Browser support for products using the Design Guide</h4>
@@ -360,6 +361,9 @@ const BrowserSupport = () => (
 			browsers than the ones supported by the Design Guide you need to maintain
 			and test the component code in in your project.{" "}
 		</p>
+		<p>
+			We of course encourage to use PostCSS to do that in your build pipeline.
+		</p>
 	</section>
 );
 const GridAndBreakpoints = () => (