diff --git a/src/components/layout/Flex/tests.tsx b/src/components/layout/Flex/tests.tsx
index 2a5d2b6..4ca2346 100644
--- a/src/components/layout/Flex/tests.tsx
+++ b/src/components/layout/Flex/tests.tsx
@@ -21,9 +21,9 @@ describe("Flex", () => {
     expect(FlexElement).toHaveStyle("flex-shrink: 1");
     expect(FlexElement).toHaveStyle("flex-wrap: nowrap");
     expect(FlexElement).toHaveStyle("flex-basis: auto");
-    expect(FlexElement).toHaveStyle("gap: 0rem");
-    expect(FlexElement).toHaveStyle("margin: 0rem");
-    expect(FlexElement).toHaveStyle("padding: 0rem");
+    expect(FlexElement).toHaveStyle("gap: 0px");
+    expect(FlexElement).toHaveStyle("margin: 0px");
+    expect(FlexElement).toHaveStyle("padding: 0px");
     expect(FlexElement).toHaveStyle("height: auto");
     expect(FlexElement).toHaveStyle("width: auto");
     expect(FlexElement).toHaveStyle("position: static");
@@ -180,57 +180,57 @@ describe("Flex", () => {
       it("should render with gap None", () => {
         render(<Flex gap="None">FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("gap: 0rem");
+        expect(FlexElement).toHaveStyle("gap: 0px");
       });
       it("should render with gap XXS", () => {
         render(<Flex gap="XXS">FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("gap: 0.125rem");
+        expect(FlexElement).toHaveStyle("gap: 2px");
       });
       it("should render with gap XS", () => {
         render(<Flex gap="XS">FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("gap: 0.25rem");
+        expect(FlexElement).toHaveStyle("gap: 4px");
       });
       it("should render with gap SNudge", () => {
         render(<Flex gap="SNudge">FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("gap: 0.375rem");
+        expect(FlexElement).toHaveStyle("gap: 6px");
       });
       it("should render with gap S", () => {
         render(<Flex gap="S">FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("gap: 0.5rem");
+        expect(FlexElement).toHaveStyle("gap: 8px");
       });
       it("should render with gap MNudge", () => {
         render(<Flex gap="MNudge">FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("gap: 0.625rem");
+        expect(FlexElement).toHaveStyle("gap: 10px");
       });
       it("should render with gap M", () => {
         render(<Flex gap="M">FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("gap: 0.75rem");
+        expect(FlexElement).toHaveStyle("gap: 12px");
       });
       it("should render with gap L", () => {
         render(<Flex gap="L">FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("gap: 1rem");
+        expect(FlexElement).toHaveStyle("gap: 16px");
       });
       it("should render with gap XL", () => {
         render(<Flex gap="XL">FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("gap: 1.25rem");
+        expect(FlexElement).toHaveStyle("gap: 20px");
       });
       it("should render with gap XXL", () => {
         render(<Flex gap="XXL">FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("gap: 1.5rem");
+        expect(FlexElement).toHaveStyle("gap: 24px");
       });
       it("should render with gap XXXL", () => {
         render(<Flex gap="XXXL">FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("gap: 2rem");
+        expect(FlexElement).toHaveStyle("gap: 32px");
       });
     });
     describe("for grow", () => {
@@ -298,44 +298,44 @@ describe("Flex", () => {
       it("should render with margin None", () => {
         render(<Flex margin={["None"]}>FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("margin: 0rem");
+        expect(FlexElement).toHaveStyle("margin: 0px");
       });
       it("should render with margin XS, L", () => {
         render(<Flex margin={["XS", "L"]}>FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("margin: 0.25rem 1rem 0.25rem 1rem");
+        expect(FlexElement).toHaveStyle("margin: 4px 16px 4px 16px");
       });
       it("should render with margin XS, L, XL", () => {
         render(<Flex margin={["XS", "L", "XL"]}>FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("margin: 0.25rem 1rem 1.25rem 1rem");
+        expect(FlexElement).toHaveStyle("margin: 4px 16px 20px 16px");
       });
       it("should render with margin XS, L, XL, XXL", () => {
         render(<Flex margin={["XS", "L", "XL", "XXL"]}>FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("margin: 0.25rem 1rem 1.25rem 1.5rem");
+        expect(FlexElement).toHaveStyle("margin: 4px 16px 20px 24px");
       });
     });
     describe("for padding", () => {
       it("should render with padding None", () => {
         render(<Flex padding={["None"]}>FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("padding: 0rem");
+        expect(FlexElement).toHaveStyle("padding: 0px");
       });
       it("should render with padding XS, L", () => {
         render(<Flex padding={["XS", "L"]}>FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("padding: 0.25rem 1rem 0.25rem 1rem");
+        expect(FlexElement).toHaveStyle("padding: 4px 16px 4px 16px");
       });
       it("should render with padding XS, L, XL", () => {
         render(<Flex padding={["XS", "L", "XL"]}>FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("padding: 0.25rem 1rem 1.25rem 1rem");
+        expect(FlexElement).toHaveStyle("padding: 4px 16px 20px 16px");
       });
       it("should render with padding XS, L, XL, XXL", () => {
         render(<Flex padding={["XS", "L", "XL", "XXL"]}>FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("padding: 0.25rem 1rem 1.25rem 1.5rem");
+        expect(FlexElement).toHaveStyle("padding: 4px 16px 20px 24px");
       });
     });
     describe("for shHeight", () => {
diff --git a/src/theme/tokens/dimensions.ts b/src/theme/tokens/dimensions.ts
index caa99b9..56e69cd 100644
--- a/src/theme/tokens/dimensions.ts
+++ b/src/theme/tokens/dimensions.ts
@@ -2,223 +2,223 @@ enum EThemeDimensions {
   /**
    * 4px
    */
-  XS1 = "0.25rem",
+  XS1 = "4px",
   /**
    * 8px
    */
-  XS2 = "0.5rem",
+  XS2 = "8px",
   /**
    * 12px
    */
-  XS3 = "0.75rem",
+  XS3 = "12px",
   /**
    * 16px
    */
-  XS4 = "1rem",
+  XS4 = "16px",
   /**
    * 20px
    */
-  XS5 = "1.25rem",
+  XS5 = "20px",
   /**
    * 24px
    */
-  XS6 = "1.5rem",
+  XS6 = "24px",
   /**
    * 28px
    */
-  XS7 = "1.75rem",
+  XS7 = "28px",
   /**
    * 32px
    */
-  XS8 = "2rem",
+  XS8 = "32px",
   /**
    * 36px
    */
-  XS9 = "2.25rem",
+  XS9 = "36px",
   /**
    * 40px
    */
-  S1 = "2.5rem",
+  S1 = "40px",
   /**
    * 48px
    */
-  S2 = "3rem",
+  S2 = "48px",
   /**
    * 56px
    */
-  S3 = "3.5rem",
+  S3 = "56px",
   /**
    * 64px
    */
-  S4 = "4rem",
+  S4 = "64px",
   /**
    * 72px
    */
-  S5 = "4.5rem",
+  S5 = "72px",
   /**
    * 80px
    */
-  S6 = "5rem",
+  S6 = "80px",
   /**
    * 88px
    */
-  S7 = "5.5rem",
+  S7 = "88px",
   /**
    * 96px
    */
-  S8 = "6rem",
+  S8 = "96px",
   /**
    * 104px
    */
-  S9 = "6.5rem",
+  S9 = "104px",
   /**
    * 116px
    */
-  M1 = "7.25rem",
+  M1 = "116px",
   /**
    * 128px
    */
-  M2 = "8rem",
+  M2 = "128px",
   /**
    * 140px
    */
-  M3 = "8.75rem",
+  M3 = "140px",
   /**
    * 152px
    */
-  M4 = "9.5rem",
+  M4 = "152px",
   /**
    * 164px
    */
-  M5 = "10.25rem",
+  M5 = "164px",
   /**
    * 176px
    */
-  M6 = "11rem",
+  M6 = "176px",
   /**
    * 188px
    */
-  M7 = "11.75rem",
+  M7 = "188px",
   /**
    * 200px
    */
-  M8 = "12.5rem",
+  M8 = "200px",
   /**
    * 212px
    */
-  M9 = "13.25rem",
+  M9 = "212px",
   /**
    * 228px
    */
-  L1 = "14.25rem",
+  L1 = "228px",
   /**
    * 244px
    */
-  L2 = "15.25rem",
+  L2 = "244px",
   /**
    * 260px
    */
-  L3 = "16.25rem",
+  L3 = "260px",
   /**
    * 276px
    */
-  L4 = "17.25rem",
+  L4 = "276px",
   /**
    * 292px
    */
-  L5 = "18.25rem",
+  L5 = "292px",
   /**
    * 308px
    */
-  L6 = "19.25rem",
+  L6 = "308px",
   /**
    * 324px
    */
-  L7 = "20.25rem",
+  L7 = "324px",
   /**
    * 340px
    */
-  L8 = "21.25rem",
+  L8 = "340px",
   /**
    * 356px
    */
-  L9 = "22.25rem",
+  L9 = "356px",
   /**
    * 376px
    */
-  XL1 = "23.5rem",
+  XL1 = "376px",
   /**
    * 392px
    */
-  XL2 = "24.5rem",
+  XL2 = "392px",
   /**
    * 408px
    */
-  XL3 = "25.5rem",
+  XL3 = "408px",
   /**
    * 424px
    */
-  XL4 = "26.5rem",
+  XL4 = "424px",
   /**
    * 440px
    */
-  XL5 = "27.5rem",
+  XL5 = "440px",
   /**
    * 456px
    */
-  XL6 = "28.5rem",
+  XL6 = "456px",
   /**
    * 472px
    */
-  XL7 = "29.5rem",
+  XL7 = "472px",
   /**
    * 488px
    */
-  XL8 = "30.5rem",
+  XL8 = "488px",
   /**
    * 504px
    */
-  XL9 = "31.5rem",
+  XL9 = "504px",
   /**
    * 528px
    */
-  O1 = "33rem",
+  O1 = "528px",
   /**
    * 552px
    */
-  O2 = "34.5rem",
+  O2 = "552px",
   /**
    * 576px
    */
-  O3 = "36rem",
+  O3 = "576px",
   /**
    * 600px
    */
-  O4 = "37.5rem",
+  O4 = "600px",
   /**
    * 624px
    */
-  O5 = "39rem",
+  O5 = "624px",
   /**
    * 648px
    */
-  O6 = "40.5rem",
+  O6 = "648px",
   /**
    * 672px
    */
-  O7 = "42rem",
+  O7 = "672px",
   /**
    * 696px
    */
-  O8 = "43.5rem",
+  O8 = "696px",
   /**
    * 720px
    */
-  O9 = "45rem",
+  O9 = "720px",
   /**
    * 744px
    */
-  O10 = "46.5rem",
+  O10 = "744px",
 }
 
 export default EThemeDimensions;
diff --git a/src/theme/tokens/spacing.ts b/src/theme/tokens/spacing.ts
index ed58e6b..c24da2c 100644
--- a/src/theme/tokens/spacing.ts
+++ b/src/theme/tokens/spacing.ts
@@ -2,47 +2,47 @@ enum EThemeSpacing {
   /**
    * 0px
    */
-  None = "0rem",
+  None = "0px",
   /**
    * 2px
    */
-  XXS = "0.125rem",
+  XXS = "2px",
   /**
    * 4px
    */
-  XS = "0.25rem",
+  XS = "4px",
   /**
    * 6px
    */
-  SNudge = "0.375rem",
+  SNudge = "6px",
   /**
    * 8px
    */
-  S = "0.5rem",
+  S = "8px",
   /**
    * 10px
    */
-  MNudge = "0.625rem",
+  MNudge = "10px",
   /**
    * 12px
    */
-  M = "0.75rem",
+  M = "12px",
   /**
    * 16px
    */
-  L = "1rem",
+  L = "16px",
   /**
    * 20px
    */
-  XL = "1.25rem",
+  XL = "20px",
   /**
    * 24px
    */
-  XXL = "1.5rem",
+  XXL = "24px",
   /**
    * 32px
    */
-  XXXL = "2rem",
+  XXXL = "32px",
 }
 
 export default EThemeSpacing;