diff --git a/packages/themes/bmf/src/components/abbr.scss b/packages/themes/bmf/src/components/abbr.scss
index 929fa88a65..119abfade6 100644
--- a/packages/themes/bmf/src/components/abbr.scss
+++ b/packages/themes/bmf/src/components/abbr.scss
@@ -2,11 +2,11 @@
 
 @layer kol-theme-component {
 	abbr {
-		border-bottom: dotted var(--color-black) 1px;
+		border-bottom: dotted var(--color-black) rem(1);
 		text-decoration: none;
 	}
 
 	abbr:focus {
-		border-radius: 5px;
+		border-radius: rem(5);
 	}
 }
diff --git a/packages/themes/bmf/src/components/accordion.scss b/packages/themes/bmf/src/components/accordion.scss
index 1301928ab7..f0b72ef02d 100644
--- a/packages/themes/bmf/src/components/accordion.scss
+++ b/packages/themes/bmf/src/components/accordion.scss
@@ -18,13 +18,13 @@
 		}
 
 		&__wrapper {
-			margin-top: 3px;
+			margin-top: rem(3);
 		}
 
 		&__content {
 			padding-left: 2.25em;
-			padding-bottom: 12px;
-			padding-right: 8px;
+			padding-bottom: rem(12);
+			padding-right: rem(8);
 		}
 
 		&__heading-button {
@@ -34,8 +34,8 @@
 				}
 
 				border-radius: var(--border-radius);
-				min-height: 24px;
-				padding: 10px 8px;
+				min-height: rem(24);
+				padding: rem(10) rem(8);
 
 				@include kol-typography-accordion;
 				gap: rem(8);
diff --git a/packages/themes/bmf/src/components/button.scss b/packages/themes/bmf/src/components/button.scss
index 2b2c42b043..ede4b0e460 100644
--- a/packages/themes/bmf/src/components/button.scss
+++ b/packages/themes/bmf/src/components/button.scss
@@ -18,7 +18,7 @@
 			font-weight: 700;
 			border-radius: var(--a11y-min-size);
 			border-style: solid;
-			border-width: 2px;
+			border-width: rem(2);
 			min-height: var(--a11y-min-size);
 			min-width: var(--a11y-min-size);
 			padding: rem(8) rem(14);
diff --git a/packages/themes/bmf/src/components/card.scss b/packages/themes/bmf/src/components/card.scss
index e438fe86cf..28e0d3680e 100644
--- a/packages/themes/bmf/src/components/card.scss
+++ b/packages/themes/bmf/src/components/card.scss
@@ -34,6 +34,6 @@
 	}
 
 	:host > div > div.content + div.footer {
-		border-top: 2px solid var(--color-ice);
+		border-top: rem(2) solid var(--color-ice);
 	}
 }
diff --git a/packages/themes/bmf/src/components/combobox.scss b/packages/themes/bmf/src/components/combobox.scss
index 40d0e8c2a5..286d66bc64 100644
--- a/packages/themes/bmf/src/components/combobox.scss
+++ b/packages/themes/bmf/src/components/combobox.scss
@@ -52,7 +52,7 @@ $visible-options: 5;
 
 		&__listbox {
 			border-style: solid;
-			border-width: 1px;
+			border-width: rem(1);
 			border-radius: var(--border-radius);
 			border-color: var(--color-grey);
 			overflow-y: auto;
diff --git a/packages/themes/bmf/src/components/details.scss b/packages/themes/bmf/src/components/details.scss
index 6898be2df4..a550ee5a13 100644
--- a/packages/themes/bmf/src/components/details.scss
+++ b/packages/themes/bmf/src/components/details.scss
@@ -42,8 +42,8 @@
 		}
 
 		&__wrapper {
-			margin-top: 4px;
-			margin-left: -2px;
+			margin-top: rem(4);
+			margin-left: rem(-2);
 		}
 
 		&__content {
diff --git a/packages/themes/bmf/src/components/input-radio.scss b/packages/themes/bmf/src/components/input-radio.scss
index bb338d06e3..921c1d1328 100644
--- a/packages/themes/bmf/src/components/input-radio.scss
+++ b/packages/themes/bmf/src/components/input-radio.scss
@@ -39,9 +39,9 @@
 		cursor: pointer;
 
 		border-color: var(--color-grey);
-		border-width: 2px;
+		border-width: rem(2);
 		border-style: solid;
-		border-radius: 5px;
+		border-radius: rem(5);
 		/* padding: rem(10) 14px; */
 		//line-height: 24px;
 		font-size: rem(16);
@@ -109,7 +109,7 @@
 		}
 
 		&.error {
-			border-left: 3px solid var(--color-red);
+			border-left: rem(3) solid var(--color-red);
 			padding-left: 1em;
 
 			input:focus,
diff --git a/packages/themes/bmf/src/components/link-button.scss b/packages/themes/bmf/src/components/link-button.scss
index 36b7963cbb..af3ade07f2 100644
--- a/packages/themes/bmf/src/components/link-button.scss
+++ b/packages/themes/bmf/src/components/link-button.scss
@@ -18,7 +18,7 @@
 			font-weight: 700;
 			border-radius: var(--a11y-min-size);
 			border-style: solid;
-			border-width: 2px;
+			border-width: rem(2);
 			min-height: var(--a11y-min-size);
 			min-width: var(--a11y-min-size);
 			padding: rem(8) rem(14);
diff --git a/packages/themes/bmf/src/components/single-select.scss b/packages/themes/bmf/src/components/single-select.scss
index 4b5262e235..4fde94fcdd 100644
--- a/packages/themes/bmf/src/components/single-select.scss
+++ b/packages/themes/bmf/src/components/single-select.scss
@@ -50,7 +50,7 @@ $visible-options: 5;
 
 		&__listbox {
 			border-style: solid;
-			border-width: 1px;
+			border-width: rem(1);
 			border-radius: var(--border-radius);
 			border-color: var(--color-grey);
 			max-height: calc($option-height * $visible-options + rem(2));
diff --git a/packages/themes/bmf/src/components/skip-nav.scss b/packages/themes/bmf/src/components/skip-nav.scss
index b6267a5ba5..2dd943fa6a 100644
--- a/packages/themes/bmf/src/components/skip-nav.scss
+++ b/packages/themes/bmf/src/components/skip-nav.scss
@@ -4,7 +4,7 @@
 	.kol-link-wc > a > .kol-span-wc {
 		border-radius: var(--a11y-min-size);
 		border-style: solid;
-		border-width: 2px;
+		border-width: rem(2);
 		gap: rem(8);
 		line-height: 1;
 		padding: rem(8) rem(14);
diff --git a/packages/themes/bmf/src/components/split-button.scss b/packages/themes/bmf/src/components/split-button.scss
index 624f4d69bb..8b8132ac24 100644
--- a/packages/themes/bmf/src/components/split-button.scss
+++ b/packages/themes/bmf/src/components/split-button.scss
@@ -6,7 +6,7 @@
 		font-family: var(--font-family);
 		border-radius: var(--a11y-min-size);
 		border-style: solid;
-		border-width: 2px;
+		border-width: rem(2);
 		border-color: var(--color-midnight);
 	}
 
@@ -16,7 +16,7 @@
 
 	.horizontal-line {
 		background-color: var(--color-midnight);
-		border-radius: 2px;
+		border-radius: rem(2);
 		width: rem(1);
 	}
 
diff --git a/packages/themes/bmf/src/components/toolbar.scss b/packages/themes/bmf/src/components/toolbar.scss
index 8aa55ba0c6..dd51a6a990 100644
--- a/packages/themes/bmf/src/components/toolbar.scss
+++ b/packages/themes/bmf/src/components/toolbar.scss
@@ -5,7 +5,7 @@
 		padding: var(--spacing);
 		border-radius: var(--border-radius);
 		background-color: var(--color-ice);
-		border-width: 2px;
+		border-width: rem(2);
 		border-style: solid;
 	}
 }
diff --git a/packages/themes/bmf/src/global.scss b/packages/themes/bmf/src/global.scss
index d29f0ac544..cebf3f1010 100644
--- a/packages/themes/bmf/src/global.scss
+++ b/packages/themes/bmf/src/global.scss
@@ -4,7 +4,7 @@
 @layer kol-theme-global {
 	/* Design Tokens */
 	:host {
-		--border-radius: 5px;
+		--border-radius: rem(5);
 		--color-midnight: #004b76;
 		--color-ocean: #0077b6;
 		--color-sky: #99c9e2;
@@ -86,12 +86,12 @@
 	}
 
 	.kol-tooltip-wc .tooltip-floating {
-		border: 1px solid var(--color-metal);
+		border: rem(1) solid var(--color-metal);
 		border-radius: var(--border-radius);
 	}
 
 	.kol-tooltip-wc .tooltip-arrow {
-		border: 1px solid var(--color-metal);
+		border: rem(1) solid var(--color-metal);
 	}
 
 	.kol-tooltip-wc .tooltip-area {
diff --git a/packages/themes/bmf/src/mixins/alert.scss b/packages/themes/bmf/src/mixins/alert.scss
index db11c8e0eb..01d8ffe82d 100644
--- a/packages/themes/bmf/src/mixins/alert.scss
+++ b/packages/themes/bmf/src/mixins/alert.scss
@@ -2,9 +2,9 @@
 
 @mixin kol-alert-theme {
 	.kol-alert-wc {
-		border-width: 2px;
+		border-width: rem(2);
 		border-style: solid;
-		border-radius: 5px;
+		border-radius: rem(5);
 		display: flex;
 		width: 100%;
 		overflow: unset;
@@ -174,7 +174,7 @@
 	}
 
 	.card {
-		border-width: 2px;
+		border-width: rem(2);
 		border-style: solid;
 		filter: drop-shadow(rem(0) rem(2) rem(4) rgba(8, 35, 48, 0.24));
 		flex-direction: column;
@@ -323,7 +323,7 @@
 		cursor: pointer;
 		border-radius: 1.5em;
 		border-style: solid;
-		border-width: 2px;
+		border-width: rem(2);
 		font-size: rem(16);
 		align-items: center;
 		padding: rem(8);
diff --git a/packages/themes/bmf/src/mixins/indented-text.scss b/packages/themes/bmf/src/mixins/indented-text.scss
index d6957b1cf4..2b62e2b3e2 100644
--- a/packages/themes/bmf/src/mixins/indented-text.scss
+++ b/packages/themes/bmf/src/mixins/indented-text.scss
@@ -2,9 +2,9 @@
 
 @mixin indented-text {
 	font-family: var(--font-family);
-	border-left: 2px solid var(--color-ocean);
+	border-left: rem(2) solid var(--color-ocean);
 	padding: 0 0.5em;
-	margin-left: -2px;
+	margin-left: -rem(-2);
 	width: 100%;
 	color: var(--color-grey);
 }
diff --git a/packages/themes/bmf/src/mixins/input-messages.scss b/packages/themes/bmf/src/mixins/input-messages.scss
index d5f26490da..3cdbec1cd1 100644
--- a/packages/themes/bmf/src/mixins/input-messages.scss
+++ b/packages/themes/bmf/src/mixins/input-messages.scss
@@ -93,7 +93,7 @@
 	&.#{$type} {
 		.input {
 			border-color: var(#{$color});
-			border-width: 3px;
+			border-width: rem(3);
 
 			&:hover {
 				border-color: var(--color-midnight);
@@ -102,7 +102,7 @@
 
 		&:not(.hidden-error) {
 			padding-left: 1em;
-			border-left: 3px solid var(#{$color});
+			border-left: rem(3) solid var(#{$color});
 		}
 	}
 }
diff --git a/packages/themes/bmf/src/mixins/input.scss b/packages/themes/bmf/src/mixins/input.scss
index d7ce39779d..816857c3b8 100644
--- a/packages/themes/bmf/src/mixins/input.scss
+++ b/packages/themes/bmf/src/mixins/input.scss
@@ -1,4 +1,5 @@
 @import './input-messages.scss';
+@import 'rem';
 
 @mixin input {
 	:host {
@@ -62,7 +63,7 @@
 		border-color: var(--color-grey);
 		border-radius: var(--border-radius);
 		border-style: solid;
-		border-width: 2px;
+		border-width: rem(2);
 
 		> .kol-icon {
 			width: 1em;
diff --git a/packages/themes/bmf/src/mixins/link.scss b/packages/themes/bmf/src/mixins/link.scss
index f37deb0bcf..b4b709b420 100644
--- a/packages/themes/bmf/src/mixins/link.scss
+++ b/packages/themes/bmf/src/mixins/link.scss
@@ -13,7 +13,7 @@
 			text-decoration-thickness: unset;
 
 			.kol-span-wc {
-				border-radius: 5px;
+				border-radius: rem(5);
 				outline: 3px solid var(--color-ocean);
 			}
 
diff --git a/packages/themes/default/src/global.scss b/packages/themes/default/src/global.scss
index 68e388bdf5..173987426d 100644
--- a/packages/themes/default/src/global.scss
+++ b/packages/themes/default/src/global.scss
@@ -2,11 +2,11 @@
 
 @layer kol-theme-global {
 	:host {
-		--border-radius: var(--kolibri-border-radius, 5px);
+		--border-radius: var(--kolibri-border-radius, rem(5));
 		--font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);
 		--font-size: var(--kolibri-font-size, rem(16));
 		--spacing: var(--kolibri-spacing, #{rem(4)});
-		--border-width: var(--kolibri-border-width, 1px);
+		--border-width: var(--kolibri-border-width, rem(1));
 		--color-primary: var(--kolibri-color-primary, #004b76);
 		--color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);
 		--color-danger: var(--kolibri-color-danger, #b4003c);
diff --git a/packages/themes/default/src/mixins/link.scss b/packages/themes/default/src/mixins/link.scss
index 49cb01143b..108b4ad70f 100644
--- a/packages/themes/default/src/mixins/link.scss
+++ b/packages/themes/default/src/mixins/link.scss
@@ -1,3 +1,5 @@
+@import 'rem';
+
 @mixin kol-link {
 	:is(a, button) {
 		color: var(--color-primary);
@@ -27,7 +29,7 @@
 	}
 
 	.skip {
-		left: -99999px;
+		left: rem(-99999);
 		overflow: hidden;
 		position: absolute;
 		z-index: 9999999;