diff --git a/apps/storefront/components/Tokens/TokenList/TokenList.tsx b/apps/storefront/components/Tokens/TokenList/TokenList.tsx
index 0a18aa2824..c796b7e376 100644
--- a/apps/storefront/components/Tokens/TokenList/TokenList.tsx
+++ b/apps/storefront/components/Tokens/TokenList/TokenList.tsx
@@ -54,9 +54,7 @@ const TokensTable = ({ tokens }: TokenTableProps) => {
         {tokens.map(([, tokens]) => {
           return tokens.map((token) => {
             const value = token.$value as string;
-            const pxSize = /\b\d+px\b/.test(value)
-              ? value
-              : `${parseFloat(value) * 16}px`;
+            const pxSize = calculateComputedValue(value);
             const isBorderRadius = token.path.includes('border-radius');
 
             return (
@@ -86,6 +84,21 @@ const TokensTable = ({ tokens }: TokenTableProps) => {
   );
 };
 
+function calculateComputedValue(value: string) {
+  const elm = document.createElement('div');
+  elm.style.cssText = `width: ${value}; height: ${value};`;
+
+  document.body.appendChild(elm);
+
+  const computedValue = getComputedStyle(elm).width;
+
+  document.body.removeChild(elm);
+
+  console.log(computedValue);
+
+  return computedValue;
+}
+
 type TokenCardsProps = {
   tokens: [string, Token[]][];
   cols?: number;