From b5e8a67b3095be56b1195cff3b64c1a93317f19d Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Tue, 8 Nov 2022 13:11:16 +0100
Subject: [PATCH 01/23] cherry pick index changes

---
 .../ResetSendButtonsBlock.jsx                 |  12 +-
 .../ResetSendButtonsBlock.module.scss         |  10 +-
 .../homepage/Benefits/Benefits.module.scss    |  36 +-
 src/components/homepage/Benefits/Benefits.tsx |   2 +-
 .../ClientLibraries.module.scss               | 113 +--
 .../ClientLibraries/ClientLibraries.tsx       |   4 +-
 .../DerivApiFeatures.module.scss              |   9 -
 .../GetStarted/GetStarted.module.scss         |  16 +
 .../homepage/GetStarted/GetStarted.tsx        |   6 +-
 .../HomepageFooter/HomepageFooter.module.scss |   8 +
 .../HomepageFooter/HomepageFooter.tsx         |   3 +-
 .../HomepageSlider/HomepageSlider.module.scss |  93 +-
 .../HomepageSlider/HomepageSlider.tsx         |   8 +-
 .../homepage/HomepageSlider/Slide.tsx         |   4 +-
 .../WaysToEarn/WaysToEarn.module.scss         |  18 -
 .../homepage/WaysToEarn/WaysToEarn.tsx        |   2 +-
 src/index.scss                                | 954 +++++-------------
 src/themes.scss                               | 130 +++
 18 files changed, 580 insertions(+), 848 deletions(-)
 create mode 100644 src/components/homepage/HomepageFooter/HomepageFooter.module.scss

diff --git a/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.jsx b/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.jsx
index 4cefa8ba..258328a4 100644
--- a/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.jsx
+++ b/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.jsx
@@ -1,5 +1,5 @@
-import Button from "../GeneralButton/GeneralButton";
 import React from "react";
+import Button from "../GeneralButton/GeneralButton";
 import style from "./ResetSendButtonsBlock.module.scss";
 import { ticksSubject } from "../../../global-functions/ticksSubject";
 
@@ -14,21 +14,21 @@ export const ResetSendButtonsBlock = (
       setIsScrolling?.(true)
     }
        return (
-      <div className={style["json-btn-wrapper"]}>
+      <div className={style.jsonBtnWrapper}>
         <div
           id="playground-reset-btn"
           className={
             isAppRegistration
-              ? `${style["btn-reset"]} ${style["gray-btn-submit"]}`
-              : `${style["btn-reset"]} ${style["btn-reset-playground"]}`
+              ? `${style.btnReset} ${style.grayBtnSubmit}`
+              : `${style.btnReset} ${style.btnResetPlayground}`
           }
         >
           <Button text={"Reset Connection"} clickHandler={onClick}  />
         </div>
-        <div className={style["btn-submit"]}>
+        <div className={style.btnSubmit}>
           <Button
             id="playground-send-btn"
-            className={style["btn-submit"]}
+            className={style.btnSubmit}
             text={"Send Request"}
             clickHandler={sendRequest}
           />
diff --git a/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.module.scss b/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.module.scss
index b59cc128..9d9c1c62 100644
--- a/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.module.scss
+++ b/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.module.scss
@@ -1,11 +1,11 @@
-.json-btn-wrapper {
+.jsonBtnWrapper {
   display: flex;
   flex-direction: row;
   align-items: var(--text-align-center);
   justify-content: var(--text-align-center);
   margin: 2.6rem 0 4rem;
 
-  .btn-reset button {
+  .btnReset button {
     cursor: pointer;
     width: fit-content;
     height: fit-content;
@@ -15,14 +15,14 @@
     font-weight: 700;
   }
 
-  .btn-reset-playground button {
+  .btnResetPlayground button {
     background-color: var(--white);
     color: var(--black-03);
     padding: 1rem 1.6rem;
     border: var(--gray-04) 1px solid;
   }
 
-  .gray-btn-submit button {
+  .grayBtnSubmit button {
     padding: 0.8rem 1.6rem;
     border: solid 2px var(--gray-05);
     background-color: var(--white);
@@ -32,7 +32,7 @@
     color: var(--black-03);
   }
 
-  .btn-submit button {
+  .btnSubmit button {
     cursor: pointer;
     width: fit-content;
     height: fit-content;
diff --git a/src/components/homepage/Benefits/Benefits.module.scss b/src/components/homepage/Benefits/Benefits.module.scss
index dbc0bcd3..320a185a 100644
--- a/src/components/homepage/Benefits/Benefits.module.scss
+++ b/src/components/homepage/Benefits/Benefits.module.scss
@@ -1,12 +1,4 @@
 .benefitsContainer {
-    .benefitsTitle {
-        margin-bottom: 1rem;
-        color: var(--text-01);
-        font-size: var(--text-size-xl);
-        margin-bottom: 40px;
-        text-align: center;
-    }
-
     .benefitsIcons {
         width: 65%;
         flex-wrap: nowrap;
@@ -44,6 +36,10 @@
         justify-content: space-evenly;
         width: 100%;
 
+        h3 {
+            margin: 16px 0;
+        }
+
         div {
             width: 48.6rem;
         }
@@ -192,20 +188,6 @@
                 margin-bottom: 0;
             }
 
-            .personalisationContainer {
-                .personalisationImage {
-                    width: 100%;
-                    margin: 0 auto;
-                }
-            }
-
-            .earnMoreContainer {
-                .earnMoreImage {
-                    width: 100%;
-                    margin: 0 auto;
-                }
-            }
-
             .personalisation,
             .earnMore {
                 margin: 0;
@@ -225,4 +207,14 @@
         max-width: 48.6rem;
         height: 15rem;
     }
+}
+
+[data-state~="responsive.desktopL"] {
+    .personalisation {
+        order: 2;
+    }
+
+    .personalisationImage {
+        order: 1;
+    }
 }
\ No newline at end of file
diff --git a/src/components/homepage/Benefits/Benefits.tsx b/src/components/homepage/Benefits/Benefits.tsx
index d9c804ee..9dad7f29 100644
--- a/src/components/homepage/Benefits/Benefits.tsx
+++ b/src/components/homepage/Benefits/Benefits.tsx
@@ -3,7 +3,7 @@ export const Benefits = () => {
     return (
         <div className="main-page-row">
             <div className={`column-container ${styles.benefitsContainer}`}>
-                <h2 className={styles.benefitsTitle}>Benefits of using Deriv API</h2>
+                <h1>Benefits of using Deriv API</h1>
                 <div className={`container ${styles.benefitsIcons}`}>
                     <div className="single-container">
                         <div className={`${styles.automationIcon} ${styles.image}`} />
diff --git a/src/components/homepage/ClientLibraries/ClientLibraries.module.scss b/src/components/homepage/ClientLibraries/ClientLibraries.module.scss
index 34610674..3d3757ad 100644
--- a/src/components/homepage/ClientLibraries/ClientLibraries.module.scss
+++ b/src/components/homepage/ClientLibraries/ClientLibraries.module.scss
@@ -1,72 +1,71 @@
-.clientLibrary {
-    .iconJsLibrary {
-        background-image: url(/img/js-library.svg);
-        background-repeat: no-repeat;
-        background-position: var(--text-align-center);
-        width: 6.4rem;
-        height: 6.4rem;
-    }
+.takeToLib {
+    padding: 80px 0 0;
+    .clientLibrary {
 
-    .libraryLinks {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: var(--text-align-center);
+        h1 {
+            margin: 1.8rem 0;
+        }
 
-        .logoAndLink {
-            padding: 1rem 2rem;
+        .iconJsLibrary {
+            background-image: url(/img/js-library.svg);
+            background-repeat: no-repeat;
+            background-position: var(--text-align-center);
+            width: 6.4rem;
+            height: 6.4rem;
+        }
 
-            .libraryGoTo {
-                display: flex;
-                align-items: var(--text-align-center);
+        .libraryLinks {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: var(--text-align-center);
 
-                .logoJavascript {
-                    background-image: url(/img/js.svg);
-                }
+            .logoAndLink {
+                padding: 1rem 2rem;
 
-                .logoPython {
-                    background-image: url(/img/py.svg);
-                }
+                .libraryGoTo {
+                    display: flex;
+                    align-items: var(--text-align-center);
 
-                .logoFlutter {
-                    background-image: url(/img/flutter.svg);
-                }
+                    .logoJavascript {
+                        background-image: url(/img/js.svg);
+                    }
 
-                .logoJavascript,
-                .logoPython,
-                .logoFlutter {
-                    background-repeat: no-repeat;
-                    background-position: var(--text-align-center);
-                    width: 4rem;
-                    height: 4rem;
-                }
+                    .logoPython {
+                        background-image: url(/img/py.svg);
+                    }
 
-                .logoJavascript,
-                .logoPython {
-                    margin-right: 1rem;
-                }
+                    .logoFlutter {
+                        background-image: url(/img/flutter.svg);
+                    }
 
-                .libraryChevron {
-                    background-image: url(/img/library-chevron.svg);
-                    background-repeat: no-repeat;
-                    background-position: var(--text-align-center);
-                    width: 1.2rem;
-                    height: 1.2rem;
-                    margin-left: 1.3rem;
-                }
+                    .logoJavascript,
+                    .logoPython,
+                    .logoFlutter {
+                        background-repeat: no-repeat;
+                        background-position: var(--text-align-center);
+                        width: 4rem;
+                        height: 4rem;
+                    }
+
+                    .logoJavascript,
+                    .logoPython {
+                        margin-right: 1rem;
+                    }
 
-                label {
-                    cursor: pointer;
+                    .libraryChevron {
+                        background-image: url(/img/library-chevron.svg);
+                        background-repeat: no-repeat;
+                        background-position: var(--text-align-center);
+                        width: 1.2rem;
+                        height: 1.2rem;
+                        margin-left: 1.3rem;
+                    }
+
+                    label {
+                        cursor: pointer;
+                    }
                 }
             }
         }
     }
-}
-
-[data-state*="responsive.mobile"] {
-    .clientLibrary {
-        h1 {
-            max-width: 29rem;
-            margin-bottom: 0.8rem;
-        }
-    }
 }
\ No newline at end of file
diff --git a/src/components/homepage/ClientLibraries/ClientLibraries.tsx b/src/components/homepage/ClientLibraries/ClientLibraries.tsx
index 7d8cfda7..eda28d0e 100644
--- a/src/components/homepage/ClientLibraries/ClientLibraries.tsx
+++ b/src/components/homepage/ClientLibraries/ClientLibraries.tsx
@@ -1,11 +1,11 @@
 import styles from "./ClientLibraries.module.scss";
 export const ClientLibraries = () => {
     return (
-        <div className="main-page-row gray take-to-lib">
+        <div className={`main-page-row gray ${styles.takeToLib}`}>
             <div className="row-container">
                 <div className={`single-container gray ${styles.clientLibrary}`}>
                     <div className={styles.iconJsLibrary} />
-                    <h2 className="header">Comprehensive all-in-one client library</h2>
+                    <h1>Comprehensive all-in-one client library</h1>
                     <p className="subheader">
                         Simplify your development processes and get your app up and
                         running <br />
diff --git a/src/components/homepage/DerivApiFeatures/DerivApiFeatures.module.scss b/src/components/homepage/DerivApiFeatures/DerivApiFeatures.module.scss
index 7f6cd467..5b69ce56 100644
--- a/src/components/homepage/DerivApiFeatures/DerivApiFeatures.module.scss
+++ b/src/components/homepage/DerivApiFeatures/DerivApiFeatures.module.scss
@@ -17,15 +17,6 @@
         padding: 0 1rem;
         box-sizing: border-box;
 
-        h2 {
-            font-size: var(--text-size-xl);
-        }
-
-        p {
-            font-size: var(--text-size-s);
-            line-height: 3.2rem;
-        }
-
         ul {
             margin-left: 0;
 
diff --git a/src/components/homepage/GetStarted/GetStarted.module.scss b/src/components/homepage/GetStarted/GetStarted.module.scss
index e062a839..ba648ddd 100644
--- a/src/components/homepage/GetStarted/GetStarted.module.scss
+++ b/src/components/homepage/GetStarted/GetStarted.module.scss
@@ -17,4 +17,20 @@
 
 .registerYourAppIcon {
     background-image: url(/img/register-your-app.svg);
+}
+
+.withPattern {
+    background-image: url(/img/pattern.svg);
+    object-fit: contain;
+}
+
+[data-state*="responsive.mobile"] {
+
+    .termConditions,
+    .termConditions a {
+        text-align: center;
+        max-width: 350px;
+        font-size: 13px;
+        margin-top: 0;
+    }
 }
\ No newline at end of file
diff --git a/src/components/homepage/GetStarted/GetStarted.tsx b/src/components/homepage/GetStarted/GetStarted.tsx
index c399bb15..e8102595 100644
--- a/src/components/homepage/GetStarted/GetStarted.tsx
+++ b/src/components/homepage/GetStarted/GetStarted.tsx
@@ -1,9 +1,9 @@
 import styles from "./GetStarted.module.scss";
 export const GetStarted = () => {
     return (
-        <div className="main-page-row with-pattern">
+        <div className={`main-page-row ${styles.withPattern}`}>
             <div className="column-container">
-                <h2 className="header_h2">Get started with our API in 3 simple steps:</h2>
+                <h1>Get started with our API in 3 simple steps:</h1>
                 <div className="card-container">
                     <a
                         target="_blank"
@@ -45,7 +45,7 @@ export const GetStarted = () => {
                         </div>
                     </a>
                 </div>
-                <span className="term-conditions">
+                <span className={styles.termConditions}>
                     By using our API, you confirm that you have read and agreed to our
                     <a
                         href="https://deriv.com/tnc/business-partners-api-user.pdf"
diff --git a/src/components/homepage/HomepageFooter/HomepageFooter.module.scss b/src/components/homepage/HomepageFooter/HomepageFooter.module.scss
new file mode 100644
index 00000000..30e17001
--- /dev/null
+++ b/src/components/homepage/HomepageFooter/HomepageFooter.module.scss
@@ -0,0 +1,8 @@
+.communityBtn {
+    padding: 6px 16px;
+    border-radius: 4px;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 20px;
+    border: solid 1px var(--gray-04);
+}
\ No newline at end of file
diff --git a/src/components/homepage/HomepageFooter/HomepageFooter.tsx b/src/components/homepage/HomepageFooter/HomepageFooter.tsx
index 84b0b7d2..ac74aeca 100644
--- a/src/components/homepage/HomepageFooter/HomepageFooter.tsx
+++ b/src/components/homepage/HomepageFooter/HomepageFooter.tsx
@@ -1,3 +1,4 @@
+import styles from './HomepageFooter.module.scss';
 export const HomepageFooter = () => {
     return (
         <div className="container dark" id="derivFooter">
@@ -10,7 +11,7 @@ export const HomepageFooter = () => {
                     <a
                         target="_blank"
                         href="https://binary.vanillacommunity.com/"
-                        className="community-btn"
+                        className={styles.communityBtn}
                         rel="noreferrer noopener"
                     >
                         Join our community
diff --git a/src/components/homepage/HomepageSlider/HomepageSlider.module.scss b/src/components/homepage/HomepageSlider/HomepageSlider.module.scss
index 03368188..2c2b4b00 100644
--- a/src/components/homepage/HomepageSlider/HomepageSlider.module.scss
+++ b/src/components/homepage/HomepageSlider/HomepageSlider.module.scss
@@ -3,9 +3,46 @@
   left: 50%;
   transform: translate(0);
   width: 33vw;
-  height: 24.8rem;
+  height: 248px;
+
+  .control {
+    position: absolute;
+    top: 35%;
+    width: 50px;
+    height: 50px;
+    z-index: 2;
+  }
+
+  .prev,
+  .next {
+    background-size: 22px;
+    background-position: center;
+    background-repeat: no-repeat;
+    cursor: pointer;
+  }
+
+  .prev {
+    background-image: url(/img/arrow_left.svg);
+    left: -10rem;
+  }
+
+  .next {
+    background-image: url(/img/arrow_right.svg);
+    right: -10rem;
+  }
+
+  .prev:active,
+  .next:active {
+    transform: scale(0.8);
+  }
+
   .sliderWrapper {
     width: 33vw;
+    height: 248px;
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+
     .slides {
       transition: left 0.75s;
       display: flex;
@@ -13,6 +50,7 @@
       top: 0;
       width: 1000rem;
       cursor: pointer;
+
       .slide {
         width: 33vw;
         height: 24.8rem;
@@ -23,6 +61,40 @@
         transition: all 1s;
         position: relative;
         pointer-events: none;
+
+        blockquote {
+          position: relative;
+          text-align: left;
+        }
+        
+        blockquote:after {
+          box-sizing: border-box;
+          content: "\201c";
+          position: absolute;
+          font-size: 17rem;
+          font-weight: 700;
+          z-index: -1;
+          left: 0rem;
+          top: -6.9rem;
+          color: var(--blockquote-text-color);
+          opacity: 56%;
+        }
+        
+        .blockquoteSeparator {
+          margin: 20px 0;
+          border: none;
+          width: 15rem;
+          height: 1px;
+          background-color: var(--blockquote-separator-color);
+        }
+        
+        .blockquoteAuthor {
+          text-align: left;
+          line-height: 1.5;
+          font-size: 1rem;
+          width: auto;
+        }
+
         blockquote,
         hr,
         p {
@@ -34,6 +106,13 @@
   }
 }
 
+[data-state*="responsive.mobileL"],
+[data-state*="responsive.mobileTablet"] {
+  .clientsOpinion {
+    margin-bottom: 1rem;
+  }
+}
+
 [data-state~="responsive.mobileS"],
 [data-state~="responsive.mobileM"] {
   .slider {
@@ -44,11 +123,21 @@
 [data-state*="responsive.mobile"] {
   .slider {
     width: 70vw;
+
+    .prev {
+      left: -5.5rem;
+    }
+
+    .next {
+      right: -5.5rem;
+    }
+
     .sliderWrapper {
       width: 70vw;
+
       .slides .slide {
         width: 70vw;
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/homepage/HomepageSlider/HomepageSlider.tsx b/src/components/homepage/HomepageSlider/HomepageSlider.tsx
index a1a040f7..d3e1018a 100644
--- a/src/components/homepage/HomepageSlider/HomepageSlider.tsx
+++ b/src/components/homepage/HomepageSlider/HomepageSlider.tsx
@@ -140,10 +140,10 @@ export const HomepageSlider = () => {
     return (
         <React.Fragment>
             <div className="main-page-row white">
-                <h2 className="clients-opinion">See what our clients say</h2>
+                <h1 className="clients-opinion">See what our clients say</h1>
                 <div className="column-container"></div>
                 <div id='slider' className={`${styles.slider} loaded`}>
-                    <div className={`${styles.sliderWrapper} wrapper`}>
+                    <div className={`${styles.sliderWrapper} ${styles.wrapper}`}>
                         <div
                             id='slides'
                             className={styles.slides}
@@ -177,8 +177,8 @@ export const HomepageSlider = () => {
                             <SlidePortal portal_entry={FIRST_SLIDE} />
                         </div>
                     </div>
-                    <div id='prev' className='control prev' onClick={() => nextOrPrevSlide(PREVIOUS)} />
-                    <div id='next' className='control next' onClick={() => nextOrPrevSlide(NEXT)} />
+                    <div id='prev' className={`${styles.control} ${styles.prev}`} onClick={() => nextOrPrevSlide(PREVIOUS)} />
+                    <div id='next' className={`${styles.control} ${styles.next}`} onClick={() => nextOrPrevSlide(NEXT)} />
                 </div>
             </div>
         </React.Fragment>
diff --git a/src/components/homepage/HomepageSlider/Slide.tsx b/src/components/homepage/HomepageSlider/Slide.tsx
index 96da9046..41d0831a 100644
--- a/src/components/homepage/HomepageSlider/Slide.tsx
+++ b/src/components/homepage/HomepageSlider/Slide.tsx
@@ -4,8 +4,8 @@ export const Slide = ({ content, author }) => {
   return (
     <div className={`${styles.slide}`}>
       <blockquote className="content">{content}</blockquote>
-      <hr className="blockquote-separator" />
-      <p className="blockquote-author">{author}</p>
+      <hr className={styles.blockquoteSeparator} />
+      <p className={styles.blockquoteAuthor}>{author}</p>
     </div>
   );
 }
diff --git a/src/components/homepage/WaysToEarn/WaysToEarn.module.scss b/src/components/homepage/WaysToEarn/WaysToEarn.module.scss
index 05cc2558..5bc02b73 100644
--- a/src/components/homepage/WaysToEarn/WaysToEarn.module.scss
+++ b/src/components/homepage/WaysToEarn/WaysToEarn.module.scss
@@ -9,15 +9,6 @@
         align-items: var(--text-align-center);
         justify-content: space-around;
 
-        h2 {
-            text-align: var(--text-align-center);
-            max-width: 38.4rem;
-            color: var(--text-01);
-            font-size: var(--text-size-xl);
-            margin-bottom: 4rem;
-            text-align: var(--text-align-center);
-        }
-
         .ways {
             display: flex;
             align-items: var(--text-align-center);
@@ -57,12 +48,3 @@
         }
     }
 }
-
-[data-state~="responsive.mobileS"],
-[data-state~="responsive.mobileM"] {
-    .waysWrapper h1 {
-        padding: 0 1rem;
-        width: 100%;
-        box-sizing: border-box;
-    }
-}
\ No newline at end of file
diff --git a/src/components/homepage/WaysToEarn/WaysToEarn.tsx b/src/components/homepage/WaysToEarn/WaysToEarn.tsx
index ca8fb836..c5e53262 100644
--- a/src/components/homepage/WaysToEarn/WaysToEarn.tsx
+++ b/src/components/homepage/WaysToEarn/WaysToEarn.tsx
@@ -4,7 +4,7 @@ export const WaysToEarn = () => {
         <div className={`column-container ${styles.waysContainer}`}>
             <div className={styles.waysWrapper}>
                 <div>
-                    <h2>Ways to earn with Deriv API</h2>
+                    <h1>Ways to earn with Deriv API</h1>
                 </div>
                 <div>
                     <div className={`main-page-card ${styles.ways}`}>
diff --git a/src/index.scss b/src/index.scss
index 78785fc9..ca999532 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,372 +1,56 @@
-@charset "UTF-8";
-@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;400;500;700&display=swap");
-
-:root {
-  --text-01: #333333;
-  --brown-01: #311912;
-  --brown-02: #443e39;
-  --red-01: #ff444f;
-  --red-02: #d43e47;
-  --wine-01: #c7254e;
-  --gray-01: #f0f1f3a3;
-  --gray-02: #e6e9e9;
-  --gray-03: #fbfbfb;
-  --gray-04: #6e6e6e;
-  --gray-05: #999999;
-  --gray-06: #577a9214;
-  --gray-07: #d6d6d6;
-  --gray-08: #c2c2c2;
-  --gray-09: #999;
-  --gray-10: #252525b8;
-  --gray-11: #1f1f1f;
-  --gray-12: #303536;
-  --gray-13: #f8fafb;
-  --gray-14: #f5f7fa;
-  --gray-15: #f2f3f4;
-  --blue-01: #85acb0;
-  --blue-03: #85acb0;
-  --teal-01: #4bb4b3;
-  --blue-04: #5d5381;
-  --green-01: #556b2f;
-  --green-02: #9ed178;
-  --green-03: #21d169;
-  --app-registration-tab-secondary: #999999;
-  --app-registration-tab-light-grey: #e6e9e9;
-  --app-registration-tab-table-row-grey: #fbfbfb;
-  --black-01: #0e0e0e;
-  --black-02: #1d1f20;
-  --black-03: #333;
-  --black-04: #151717;
-  --border-normal: #d6dadb;
-  --brand-secondary: #85acb0;
-  --copy-hover: #424242;
-  --copy-color: #c2c2c2;
-  --hamburger-active-link: var(--gray-06);
-  --hamburger-menu-width: 260px;
-  --white: #ffffff;
-  --json-purple: #8860e8;
-  --json-magenta: #de5ea0;
-  --json-gold: #f3ca5e;
-  --json-midnight: #282a35;
-  --blockquote-separator-color: var(--gray-14);
-  --blockquote-text-color: var(--gray-15);
-  --btn-background: var(--red-01);
-  --btn-text-color: var(--white);
-  --btn-background-disabled: var(--gray-02);
-  --btn-text-color-disabled: var(--white);
-  --spinner-height: 100px;
-  --spinner-width: 100px;
-  --text-size-xxxxs: 0.8rem;
-  --text-size-xxxs: 1rem;
-  --text-size-xxs: 1.2rem;
-  --text-size-xs: 1.4rem;
-  --text-size-s: 1.6rem;
-  --text-size-xsm: 1.8rem;
-  --text-size-sm: 2rem;
-  --text-size-m: 2.4rem;
-  --text-size-xm:2.8rem
-  --text-size-l: 3.2rem;
-  --text-size-xl: 4.8rem;
-  --text-size-xxl: 6.4rem;
-
-  //Line Height
-  --text-lh-xxs: 1;
-  --text-lh-xs: 1.25;
-  --text-lh-s: 1.4;
-  --text-lh-m: 1.5;
-  --text-lh-l: 1.75;
-  --text-lh-xl: 2;
-  --text-lh-xxl: 2.4;
-
-  //Font Weight
-  --text-weight-lighter: lighter;
-  --text-weight-normal: normal;
-  --text-weight-bold: bold;
-  --text-weight-bolder: bolder;
-
-  //Text Align
-  --text-align-left: start;
-  --text-align-right: right;
-  --text-align-center: center;
-}
-
-* {
-  font-family: "IBM Plex Sans", sans-serif;
-  font-size: 10px;
-  margin: 0;
-  padding: 0;
-  scroll-margin-top: 100px;
-}
-
-html * {
-  font-size: var(--text-size-s);
-}
-
 html,
 body {
   overflow-x: hidden;
 }
 
-a {
-  color: var(--red-01);
-  text-decoration: none;
-}
-
-@mixin header {
-  margin-bottom: 16px;
-  color: var(--text-01);
-}
-
-h1 {
-  @include header;
-  font-size: 48px;
-  margin-bottom: 40px;
-  text-align: center;
-}
-
-h2 {
-  @include header;
-  font-size: 32px;
-  line-height: 1.5;
-}
-
-h3 {
-  @include header;
-  font-size: 24px;
-  line-height: 1.5;
-}
-
-h4 {
-  font-size: 20px;
-}
-
-h5 {
-  margin-bottom: 10px;
-}
-
-p {
-  line-height: 28px;
-  margin-bottom: 16px;
-}
-
-.numbered-list {
-  margin-left: 40px;
-  margin-bottom: 24px;
-
-  li {
-    margin-bottom: 10px;
-    list-style-type: decimal;
-  }
-}
-
-.inline-code {
-  font-weight: 400;
-  color: var(--red-01);
-  border-radius: 4px;
-  padding: 2px 4px;
-  background-color: var(--gray-01);
-  border: 1px solid var(--gray-02);
-}
-
-.language-json {
-
-  .token.string,
-  .token.number {
-    color: var(--json-purple) !important;
-  }
-
-  .token.punctuation {
-    color: var(--json-gold) !important;
-  }
-
-  .token.property {
-    color: var(--json-magenta) !important;
-  }
-}
-
-.doc-content {
-  display: flex;
-  min-height: 95vh;
-  overflow-y: auto;
-}
-
-button:focus {
-  outline: none;
-}
-
-[data-state*="responsive.mobile"] {
-  #sidebar {
-    display: none;
-  }
-
-  .row-container {
-    flex-direction: column;
-  }
-
-  .term-conditions,
-  .term-conditions a {
-    text-align: center;
-    max-width: 350px;
-    font-size: 13px;
-    margin-top: 0;
-  }
-
-  h1 {
-    font-size: 32px;
-  }
-
-  h2 {
-    font-size: 24px;
-  }
-
-  h3 {
-    font-size: 18px;
-  }
-
-  h4 {
-    font-size: 16px;
-  }
-
-  .single-container>p {
-    text-align: center;
-    margin-bottom: 24px !important;
-  }
-
-  body>#content>h1 {
-    font-size: 24px;
-    margin-top: 43px;
-  }
-
-  .doc-content {
-    padding: 75px 15px 40px;
-  }
-}
-
-[data-state*="responsive.desktop"] {
-  .doc-content {
-    padding: 128px 50px 0 50px;
-  }
-}
-
-@media (max-width: 992px) {
-  .main-content .main-page-row {
-    padding: 40px 0;
-  }
-}
-
-@media (max-width: 992px) and (max-width: 480px) {
-  .main-content .main-page-row .clients-opinion {
-    margin-bottom: 10px;
-  }
-}
-
-@media (max-width: 992px) {
-
-  .main-content .main-page-row .row-container,
-  .main-content .main-page-row .row-container .single-container {
-    width: 100%;
-  }
-}
-
-@media (max-width: 992px) {
-  .main-content .main-page-row .column-container {
-    width: 100%;
-  }
-
-  .main-content .main-page-row .column-container h1 {
-    margin-bottom: 0 !important;
-  }
-
-  .main-content .main-page-row .column-container .benefits {
-    flex-wrap: wrap;
-  }
-
-  .main-content .main-page-row .column-container .benefits h3 {
-    margin: 16px 0;
-  }
-
-  .main-content .main-page-row .column-container .benefits div {
-    width: 100%;
-  }
-
-  .main-content .main-page-row .column-container .ways {
-    max-width: 328px;
-  }
-
-  .main-content .main-page-row .column-container .prev {
-    left: -50px;
-  }
-
-  .main-content .main-page-row .column-container .next {
-    right: -50px;
-  }
-}
-
-@media (max-width: 992px) {
-  .main-content .main-page-row .card-container {
-    flex-direction: column;
-    padding: 24px 16px 0;
-    margin-bottom: 0;
-  }
-
-  .main-content .main-page-row .card-container .main-page-card {
-    width: unset;
-    margin: 0 0 24px;
-  }
-}
+a.active {
+  background-color: var(--hamburger-active-link);
+  font-weight: bold;
 
-@media (max-width: 992px) and (max-width: 480px) {
-  .main-content .main-page-row h1 {
-    font-size: 32px;
+  &::before {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    height: 40px;
+    width: 4px;
+    border-radius: 4px 0 0 4px;
+    left: 0;
+    bottom: 0;
+    background-color: var(--red-01);
+    visibility: visible;
   }
 }
 
-@media (max-width: 992px) {
-  .main-content .main-page-row .single-container h1 {
-    font-size: 24px;
-  }
+button {
+  cursor: pointer;
 
-  .main-content .main-page-row .single-container .subheader {
-    font-size: 16px;
+  &:focus {
+    outline: none;
   }
 }
 
-@media (max-width: 992px) {
-  .main-content .container {
-    flex-direction: column;
-  }
-
-  .main-content .container .row-container {
-    width: 100%;
-  }
-
-  .main-content .container .row-container .single-container {
-    width: unset;
-    padding: 40px 16px 0;
-  }
+li {
+  font-size: var(--text-size-s);
+  margin-top: 16px;
 }
 
-@media (max-width: 1499px) {
-  .personalisation {
-    order: 2;
-  }
-
-  .personalisation-image {
-    order: 1;
-  }
-
-  .earn-more-image {
-    order: 3;
-  }
+ul {
+  margin-left: 20px;
 
-  .earn-more {
-    order: 4;
+  li {
+    margin-bottom: 16px;
   }
 }
 
-li {
-  font-size: var(--text-size-s);
-  margin-top: 16px;
+textarea {
+  font-size: 16px;
+  resize: none;
+  width: calc(100% - 16px);
+  min-height: 119px;
+  margin-top: 1.5rem;
+  padding: 10px;
+  border-radius: 4px;
+  border: solid 1px var(--border-normal);
 }
 
 .container {
@@ -379,110 +63,18 @@ li {
   justify-content: center;
 }
 
-.error-message {
-  color: var(--red-01);
-  font-size: 14px;
-  font-weight: 400;
-  padding-left: 10px;
-}
-
-.take-to-lib {
-  padding: 80px 0 0;
-}
-
-.wrapper {
-  overflow: hidden;
-  position: relative;
-  width: 588px;
-  height: 248px;
-  z-index: 1;
+.card-container {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 40px;
 }
 
-.slide {
-  width: 588px;
-  height: 248px;
-  cursor: pointer;
+.center {
   display: flex;
-  flex-direction: column;
+  width: 100%;
   justify-content: center;
   align-items: center;
-  transition: all 1s;
-  position: relative;
-}
-
-.control {
-  position: absolute;
-  top: 35%;
-  width: 50px;
-  height: 50px;
-  z-index: 2;
-}
-
-.prev,
-.next {
-  background-size: 22px;
-  background-position: center;
-  background-repeat: no-repeat;
-  cursor: pointer;
-}
-
-.prev {
-  background-image: url(/img/arrow_left.svg);
-  left: -100px;
-}
-
-.next {
-  background-image: url(/img/arrow_right.svg);
-  right: -100px;
-}
-
-.prev:active,
-.next:active {
-  transform: scale(0.8);
-}
-
-blockquote {
-  position: relative;
-  text-align: left;
-}
-
-blockquote:after {
-  box-sizing: border-box;
-  content: "\201c";
-  position: absolute;
-  font-size: 17rem;
-  font-weight: 700;
-  z-index: -1;
-  left: 0rem;
-  top: -6.9rem;
-  color: var(--blockquote-text-color);
-  opacity: 56%;
-}
-
-.blockquote-separator {
-  margin: 20px 0;
-  border: none;
-  width: 15rem;
-  height: 1px;
-  background-color: var(--blockquote-separator-color);
-}
-
-.blockquote-author {
-  text-align: left;
-  line-height: 1.5;
-  font-size: 1rem;
-  width: auto;
-}
-
-.with-pattern {
-  background-image: url(/img/pattern.svg);
-  object-fit: contain;
-}
-
-.card-container {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 10px;
+  margin-bottom: 1rem;
 }
 
 .column-container {
@@ -494,95 +86,38 @@ blockquote:after {
   justify-content: center;
 }
 
-.gray {
-  background-color: var(--blockquote-separator-color);
-}
-
-.white {
-  background-color: var(--white);
-}
-
-.subheader {
-  font-size: 24px;
-  text-align: center;
-  line-height: 1.5;
-  color: var(--text-01);
-  margin-bottom: 40px;
-}
-
-textarea {
-  width: calc(100% - 16px);
-  min-height: 119px;
-  border-radius: 4px;
-  border: solid 1px var(--border-normal);
-  margin-top: 1.5rem;
-}
-
-.center {
+.doc-content {
   display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 1rem;
+  min-height: 95vh;
+  overflow-y: auto;
 }
 
-@media (max-width: 992px) {
-  .row-container .single-container>h2 {
-    font-size: 24px;
-  }
+.error-message {
+  color: var(--red-01);
+  font-size: 14px;
+  font-weight: 400;
+  padding-left: 10px;
 }
 
-@media (max-width: 992px) {
-  .main-content .main-page-row {
-    padding: 40px 0;
-  }
-
-  .main-content .main-page-row .row-container,
-  .main-content .main-page-row .row-container .single-container,
-  .main-content .main-page-row .column-container {
-    width: 100%;
-  }
-
-  .main-content .main-page-row .column-container h1 {
-    margin-bottom: 0 !important;
-  }
-
-  .main-content .main-page-row .card-container {
-    flex-direction: column;
-    padding: 24px 16px 0;
-    margin-bottom: 0;
-  }
-
-  .main-content .main-page-row .card-container .main-page-card {
-    width: unset;
-    margin: 0 0 24px;
-  }
-
-  .main-content .main-page-row h1 {
-    width: 90%;
-    font-size: 28px;
-  }
-
-  .main-content .main-page-row .single-container h1 {
-    font-size: 24px;
-  }
+.language-json {
 
-  .main-content .main-page-row .single-container .subheader {
-    font-size: 16px;
+  .token.string,
+  .token.number {
+    color: var(--json-purple) !important;
   }
 
-  .main-content .container {
-    flex-direction: column;
+  .token.punctuation {
+    color: var(--json-gold) !important;
   }
 
-  .main-content .container .row-container {
-    width: 100%;
+  .token.property {
+    color: var(--json-magenta) !important;
   }
+}
 
-  .main-content .container .row-container .single-container {
-    width: unset;
-    padding: 40px 16px 0;
-  }
+.main-content {
+  display: flex;
+  flex-direction: column;
 }
 
 .main-page-row {
@@ -598,240 +133,247 @@ textarea {
   &.ways-row {
     padding: 0;
   }
-
-  .clients-opinion {
-    color: var(--text-01);
-    font-size: 48px;
-    margin-bottom: 40px;
-    text-align: center;
-  }
 }
 
-.pageWrapper {
+.main-page-card {
   width: 100%;
-  color: var(--text-01);
-  padding-bottom: 20px;
-  margin-left: 300px;
-}
-
-.single-container {
-  display: flex;
-  flex-direction: column;
-  height: fit-content;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  width: 80%;
+  max-width: 316px;
+  padding: 32px 24px;
+  border-radius: 4px;
+  box-shadow: 0 4px 8px 0 rgb(14, 14, 14, 0.1);
+  background-color: var(--white);
+  margin: 0 12px;
 
-  .header {
+  .content {
+    font-size: 16px;
+    line-height: 1.5;
     color: var(--text-01);
-    font-size: 48px;
-    margin-bottom: 40px;
-    text-align: center;
+    margin-bottom: 0;
   }
-}
 
-.single-container p {
-  margin-bottom: 32px;
-  text-align: center;
-}
+  .hide-on-desktop {
+    display: none;
+  }
 
-.single-container p a {
-  color: var(--red-01);
-}
+  .hide-on-mobile {
+    display: block;
+  }
 
-.single-container h1 {
-  width: 80%;
-  margin-bottom: 12px;
-  line-height: 1.25;
-}
+  .header {
+    display: flex;
+    width: 100%;
 
-.single-container img {
-  margin-bottom: 24px;
-}
+    h3 {
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--text-01);
+      margin-bottom: 8px;
+      float: left;
+      width: 100%;
+    }
 
-.container {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  min-height: 208px;
-  align-items: center;
-  justify-content: center;
-}
+    img {
+      float: right;
+      padding-left: 10px;
+    }
 
-.single-container>h2 {
-  font-size: 32px;
-  margin-bottom: 8px;
-  color: var(--white);
+  }
 }
 
-.with-pattern {
-  background-image: url(/img/pattern.svg);
-  object-fit: contain;
-}
+.numbered-list {
+  margin-left: 4rem;
+  margin-bottom: 2.4rem;
 
-.community-btn {
-  padding: 6px 16px;
-  border-radius: 4px;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 20px;
-  border: solid 1px var(--gray-04);
+  li {
+    margin-bottom: 1rem;
+    list-style-type: decimal;
+  }
 }
 
-.card-container {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 40px;
+.pageWrapper {
+  width: 100%;
+  color: var(--text-01);
+  padding-bottom: 20px;
+  margin-left: 300px;
 }
 
-.column-container {
+.row-container {
   display: flex;
-  flex-direction: column;
   flex-wrap: nowrap;
   width: 80%;
   align-items: center;
   justify-content: center;
-
-  .header_h2 {
-    color: var(--text-01);
-    font-size: 48px;
-    margin-bottom: 40px;
-    text-align: center;
-  }
 }
 
-.row-container {
+.single-container {
   display: flex;
-  flex-wrap: nowrap;
-  width: 80%;
+  flex-direction: column;
+  height: fit-content;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-}
+  width: 80%;
 
-.main-page-card {
-  width: 100%;
-  max-width: 316px;
-  padding: 32px 24px;
-  border-radius: 4px;
-  box-shadow: 0 4px 8px 0 rgb(14, 14, 14, 0.1);
-  background-color: var(--white);
-  margin: 0 12px;
-}
+  h1 {
+    width: 80%;
+    margin-bottom: 12px;
+    line-height: 1.25;
+  }
 
-.main-page-card .header {
-  display: flex;
-  width: 100%;
-}
+  >h2 {
+    font-size: 32px;
+    margin-bottom: 8px;
+    color: var(--white);
+  }
 
-.main-page-card .header img {
-  float: right;
-  padding-left: 10px;
+  p {
+    margin-bottom: 32px;
+    text-align: center;
+
+    a {
+      color: var(--red-01);
+    }
+  }
+
+  img {
+    margin-bottom: 24px;
+  }
 }
 
-.main-page-card .header h3 {
+.subheader {
   font-size: 24px;
-  font-weight: 700;
+  text-align: center;
+  line-height: 1.5;
   color: var(--text-01);
-  margin-bottom: 8px;
-  float: left;
-  width: 100%;
+  margin-bottom: 40px;
 }
 
-.main-page-card .content {
-  font-size: 16px;
-  line-height: 1.5;
-  color: var(--text-01);
-  margin-bottom: 0;
+.gray {
+  background-color: var(--blockquote-separator-color);
 }
 
-.main-page-card .hide-on-desktop {
-  display: none;
+.white {
+  background-color: var(--white);
 }
 
-@media (max-width: 480px) {
-  .main-page-card .hide-on-desktop {
-    display: block;
+.dark {
+  color: var(--white);
+  background-color: var(--black-01);
+
+  p {
+    color: var(--copy-color);
   }
-}
 
-.main-page-card .hide-on-mobile {
-  display: block;
+  .selected,
+  a {
+    color: var(--white);
+  }
 }
 
-@media (max-width: 480px) {
-  .main-page-card .hide-on-mobile {
-    display: none;
+[data-state*="responsive.mobile"] {
+  .row-container {
+    flex-direction: column;
   }
-}
 
-@media (max-width: 480px) {
-  .main-page-card {
-    padding: 28px 16px 24px;
+  .doc-content {
+    padding: 7.5rem 1.5rem 4rem;
   }
-}
 
-ul {
-  margin-left: 20px;
-}
+  .main-content {
+    .main-page-row {
+      padding: 4rem 0;
 
-ul li {
-  margin-bottom: 16px;
-}
+      .card-container {
+        flex-direction: column;
+        padding: 24px 16px 0;
+        margin-bottom: 0;
 
-.subheader {
-  font-size: 24px;
-  text-align: center;
-  color: var(--text-01);
-  margin-bottom: 40px;
-}
+        .main-page-card {
+          width: unset;
+          margin: 0 0 24px;
+        }
+      }
 
-textarea {
-  width: calc(100% - 16px);
-  min-height: 119px;
-  padding: 10px;
-  border-radius: 4px;
-  border: solid 1px var(--border-normal);
-}
+      .column-container h1 {
+        margin-bottom: 0 !important;
+      }
 
-button {
-  cursor: pointer;
-}
+      .single-container {
+        font-size: 24px;
 
-.main-content {
-  display: flex;
-  flex-direction: column;
-}
+        .subheader {
+          font-size: 16px;
+        }
+      }
 
-textarea {
-  font-size: 16px;
-  resize: none;
-}
+      .column-container,
+      .row-container,
+      .row-container .single-container {
+        width: 100%;
+      }
+    }
+  }
 
-.progress {
-  margin: 0 auto;
-}
+  .container {
+    flex-direction: column;
 
-.dark {
-  color: var(--white);
-  background-color: var(--black-01);
-}
+    .row-container {
+      width: 100%;
 
-.dark .selected,
-.dark a {
-  color: var(--white);
+      .single-container {
+        width: unset;
+        padding: 40px 16px 0;
+      }
+    }
+  }
 }
 
-.dark p {
-  color: var(--copy-color);
-}
+[data-state*="responsive.desktop"] {
+  .doc-content {
+    padding: 12.8rem 5rem 0 5rem;
+  }
+
+  .main-content {
+    .container {
+      flex-direction: column;
+
+      .row-container {
+        width: 100%;
+
+        .single-container {
+          width: unset;
+          padding: 40px 16px 0;
+        }
+      }
+    }
 
-.hidden {
-  display: none;
+    .main-page-row {
+      .card-container {
+        margin-bottom: 0;
+
+        .main-page-card {
+          width: unset;
+          margin: 0 1.2rem 2.4rem;
+        }
+      }
+    }
+  }
 }
 
-.mb-16p {
-  margin-bottom: 16px;
+[data-state~="responsive.mobileS"],
+[data-state~="responsive.mobileM"] {
+
+  .main-page-card {
+    padding: 28px 16px 24px;
+
+    .hide-on-desktop {
+      display: block;
+    }
+
+    .hide-on-mobile {
+      display: none;
+    }
+  }
 }
 
 [data-state*="responsive.mobile"][data-state~="hamburger.hamburger_open"] {
@@ -840,26 +382,8 @@ textarea {
   }
 }
 
-a.active {
-  background-color: var(--hamburger-active-link);
-  font-weight: bold;
-
-  &::before {
-    content: "";
-    display: inline-block;
-    position: absolute;
-    height: 40px;
-    width: 4px;
-    border-radius: 4px 0 0 4px;
-    left: 0;
-    bottom: 0;
-    background-color: var(--red-01);
-    visibility: visible;
-  }
-}
-
 [data-state*="responsive.mobile"] {
   .pageWrapper {
     margin-left: 0;
   }
-}
\ No newline at end of file
+}
diff --git a/src/themes.scss b/src/themes.scss
index 53c9b4ac..8fed6bc4 100644
--- a/src/themes.scss
+++ b/src/themes.scss
@@ -1,5 +1,68 @@
+@charset "UTF-8";
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;400;500;700&display=swap");
+
+* {
+    font-family: "IBM Plex Sans", sans-serif;
+    font-size: 10px;
+    margin: 0;
+    padding: 0;
+    scroll-margin-top: 100px;
+}
+
 :host,
 :root {
+    // Brand colors
+    --text-01: #333333;
+    --brown-01: #311912;
+    --brown-02: #443e39;
+    --red-01: #ff444f;
+    --red-02: #d43e47;
+    --wine-01: #c7254e;
+    --gray-01: #f0f1f3a3;
+    --gray-02: #e6e9e9;
+    --gray-03: #fbfbfb;
+    --gray-04: #6e6e6e;
+    --gray-05: #999999;
+    --gray-06: #577a9214;
+    --gray-07: #d6d6d6;
+    --gray-08: #c2c2c2;
+    --gray-09: #999;
+    --gray-10: #252525b8;
+    --gray-11: #1f1f1f;
+    --gray-12: #303536;
+    --gray-13: #f8fafb;
+    --gray-14: #f5f7fa;
+    --gray-15: #f2f3f4;
+    --teal-01: #4bb4b3;
+    --blue-04: #5d5381;
+    --green-01: #556b2f;
+    --green-02: #9ed178;
+    --green-03: #21d169;
+    --app-registration-tab-secondary: #999999;
+    --app-registration-tab-light-grey: #e6e9e9;
+    --app-registration-tab-table-row-grey: #fbfbfb;
+    --black-01: #0e0e0e;
+    --black-02: #1d1f20;
+    --black-03: #333;
+    --black-04: #151717;
+    --border-normal: #d6dadb;
+    --brand-secondary: #85acb0;
+    --copy-hover: #424242;
+    --copy-color: #c2c2c2;
+    --hamburger-active-link: var(--gray-06);
+    --hamburger-menu-width: 260px;
+    --white: #ffffff;
+    --json-purple: #8860e8;
+    --json-magenta: #de5ea0;
+    --json-gold: #f3ca5e;
+    --json-midnight: #282a35;
+    --blockquote-separator-color: var(--gray-14);
+    --blockquote-text-color: var(--gray-15);
+    --btn-background: var(--red-01);
+    --btn-text-color: var(--white);
+    --btn-background-disabled: var(--gray-02);
+    --btn-text-color-disabled: var(--white);
+
     // Text sizes
     --text-size-xxxxs: 0.8rem;
     --text-size-xxxs: 1rem;
@@ -32,4 +95,71 @@
     --text-align-left: start;
     --text-align-right: right;
     --text-align-center: center;
+
+    // Spinner
+    --spinner-height: 100px;
+    --spinner-width: 100px;
+}
+
+a {
+    font-size: var(--text-size-s);
+    color: var(--red-01);
+    text-decoration: none;
+}
+
+p {
+    font-size: var(--text-size-s);
+    line-height: 28px;
+    margin-bottom: 16px;
+}
+
+@mixin header {
+    margin-bottom: 16px;
+    color: var(--text-01);
+}
+
+h1 {
+    @include header;
+    font-size: var(--text-size-xl);
+    margin-bottom: 40px;
+    text-align: center;
+}
+
+h2 {
+    @include header;
+    font-size: var(--text-size-l);
+    line-height: 1.5;
+}
+
+h3 {
+    @include header;
+    font-size: var(--text-size-m);
+    line-height: 1.5;
+}
+
+h4 {
+    font-size: var(--text-size-sm);
+}
+
+h5 {
+    font-size: var(--text-size-xsm);
+    margin-bottom: 10px;
+}
+
+[data-state*="responsive.mobile"] {
+    h1 {
+        font-size: var(--text-size-l);
+    }
+
+    h2 {
+        font-size: var(--text-size-m);
+    }
+
+    h3 {
+        font-size: var(--text-size-xsm);
+    }
+
+    h4 {
+        font-size: var(--text-size-s);
+    }
 }

From b815882e0c2f84157d1570ac01f351e12b8db35b Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Tue, 8 Nov 2022 16:35:14 +0100
Subject: [PATCH 02/23] cherry picking rem changes

---
 .../SelectRequestInput/SelectRequestInput.jsx | 12 ++-
 src/index.scss                                | 77 +++++++++----------
 src/themes.scss                               |  7 +-
 3 files changed, 50 insertions(+), 46 deletions(-)

diff --git a/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.jsx b/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.jsx
index 7165fbb0..224f5db5 100644
--- a/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.jsx
+++ b/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.jsx
@@ -37,7 +37,7 @@ const SelectRequestInput = ({ selected, setSelected, handleChange, selected_valu
                     onClick={handleToggleDropdown}
                     data-testid='apiDropdown'
                 >
-                    {selected_value}
+                    <span>{selected_value}</span>
                     <span className={`${styles.arrow} ${isActive ? styles.down : ''}`} />
                 </div>
                 {isActive && (
@@ -52,8 +52,12 @@ const SelectRequestInput = ({ selected, setSelected, handleChange, selected_valu
                             }}
                         />
                         <div className={styles.dropdownList}>
-                            <div className={styles.dropdownSelect}> Select API Call - Version 3</div>
-                            <div className={styles.dropdownStart}>ALL CALLS</div>
+                            <div className={styles.dropdownSelect}>
+                                <span>Select API Call - Version 3</span>
+                            </div>
+                            <div className={styles.dropdownStart}>
+                                <span>ALL CALLS</span>
+                            </div>
                             {playground_requests
                                 .filter(option => {
                                     return option.title.toLowerCase().includes(searchResults.toLowerCase())
@@ -74,7 +78,7 @@ const SelectRequestInput = ({ selected, setSelected, handleChange, selected_valu
                                         }`}
                                         data-testid={`apiDropdownItem${option.name}`}
                                     >
-                                        {option.title}
+                                        <span>{option.title}</span>
                                     </div>
                                 ))}
                         </div>
diff --git a/src/index.scss b/src/index.scss
index ca999532..f0d03a77 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -13,7 +13,7 @@ a.active {
     position: absolute;
     height: 40px;
     width: 4px;
-    border-radius: 4px 0 0 4px;
+    border-radius: 0.4rem 0 0 0.4rem;
     left: 0;
     bottom: 0;
     background-color: var(--red-01);
@@ -31,24 +31,24 @@ button {
 
 li {
   font-size: var(--text-size-s);
-  margin-top: 16px;
+  margin-top: 1.6rem;
 }
 
 ul {
-  margin-left: 20px;
+  margin-left: 2rem;
 
   li {
-    margin-bottom: 16px;
+    margin-bottom: 1.6rem;
   }
 }
 
 textarea {
-  font-size: 16px;
+  font-size: var(--text-size-s);
   resize: none;
-  width: calc(100% - 16px);
+  width: calc(100% - 1.6rem);
   min-height: 119px;
   margin-top: 1.5rem;
-  padding: 10px;
+  padding: 1rem;
   border-radius: 4px;
   border: solid 1px var(--border-normal);
 }
@@ -66,7 +66,7 @@ textarea {
 .card-container {
   display: flex;
   flex-direction: row;
-  margin-bottom: 40px;
+  margin-bottom: 4rem;
 }
 
 .center {
@@ -94,9 +94,9 @@ textarea {
 
 .error-message {
   color: var(--red-01);
-  font-size: 14px;
+  font-size: var(--text-size-xs);
   font-weight: 400;
-  padding-left: 10px;
+  padding-left: 1rem;
 }
 
 .language-json {
@@ -128,7 +128,7 @@ textarea {
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  padding: 80px 0;
+  padding: 8rem 0;
 
   &.ways-row {
     padding: 0;
@@ -138,14 +138,14 @@ textarea {
 .main-page-card {
   width: 100%;
   max-width: 316px;
-  padding: 32px 24px;
+  padding: 3.2rem 2.4rem;
   border-radius: 4px;
   box-shadow: 0 4px 8px 0 rgb(14, 14, 14, 0.1);
   background-color: var(--white);
-  margin: 0 12px;
+  margin: 0 1.2rem;
 
   .content {
-    font-size: 16px;
+    font-size: var(--text-size-s);
     line-height: 1.5;
     color: var(--text-01);
     margin-bottom: 0;
@@ -164,17 +164,17 @@ textarea {
     width: 100%;
 
     h3 {
-      font-size: 24px;
+      font-size: var(--text-size-m);
       font-weight: 700;
       color: var(--text-01);
-      margin-bottom: 8px;
+      margin-bottom: 0.8rem;
       float: left;
       width: 100%;
     }
 
     img {
       float: right;
-      padding-left: 10px;
+      padding-left: 1rem;
     }
 
   }
@@ -193,8 +193,8 @@ textarea {
 .pageWrapper {
   width: 100%;
   color: var(--text-01);
-  padding-bottom: 20px;
-  margin-left: 300px;
+  padding-bottom: 2rem;
+  margin-left: 30rem;
 }
 
 .row-container {
@@ -216,18 +216,18 @@ textarea {
 
   h1 {
     width: 80%;
-    margin-bottom: 12px;
+    margin-bottom: 1.2rem;
     line-height: 1.25;
   }
 
   >h2 {
-    font-size: 32px;
+    font-size: var(--text-size-l);
     margin-bottom: 8px;
     color: var(--white);
   }
 
   p {
-    margin-bottom: 32px;
+    margin-bottom: 3.2rem;
     text-align: center;
 
     a {
@@ -236,16 +236,16 @@ textarea {
   }
 
   img {
-    margin-bottom: 24px;
+    margin-bottom: 2.4rem;
   }
 }
 
 .subheader {
-  font-size: 24px;
+  font-size: var(--text-size-m);
   text-align: center;
   line-height: 1.5;
   color: var(--text-01);
-  margin-bottom: 40px;
+  margin-bottom: 4rem;
 }
 
 .gray {
@@ -285,12 +285,12 @@ textarea {
 
       .card-container {
         flex-direction: column;
-        padding: 24px 16px 0;
+        padding: 2.4rem 1.6rem 0;
         margin-bottom: 0;
 
         .main-page-card {
           width: unset;
-          margin: 0 0 24px;
+          margin: 0 0 2.4rem;
         }
       }
 
@@ -299,10 +299,10 @@ textarea {
       }
 
       .single-container {
-        font-size: 24px;
+        font-size: var(--text-size-m);
 
         .subheader {
-          font-size: 16px;
+          font-size: var(--text-size-s);
         }
       }
 
@@ -322,7 +322,7 @@ textarea {
 
       .single-container {
         width: unset;
-        padding: 40px 16px 0;
+        padding: 4rem 1.6rem 0;
       }
     }
   }
@@ -334,16 +334,13 @@ textarea {
   }
 
   .main-content {
-    .container {
-      flex-direction: column;
 
-      .row-container {
-        width: 100%;
+    .row-container {
+      width: 100%;
 
-        .single-container {
-          width: unset;
-          padding: 40px 16px 0;
-        }
+      .single-container {
+        width: unset;
+        padding: 4rem 1.6rem 0;
       }
     }
 
@@ -364,7 +361,7 @@ textarea {
 [data-state~="responsive.mobileM"] {
 
   .main-page-card {
-    padding: 28px 16px 24px;
+    padding: 2.8rem 1.6rem 2.4rem;
 
     .hide-on-desktop {
       display: block;
@@ -386,4 +383,4 @@ textarea {
   .pageWrapper {
     margin-left: 0;
   }
-}
+}
\ No newline at end of file
diff --git a/src/themes.scss b/src/themes.scss
index 8fed6bc4..d061427d 100644
--- a/src/themes.scss
+++ b/src/themes.scss
@@ -101,14 +101,16 @@
     --spinner-width: 100px;
 }
 
-a {
+a, p, span, b, label, strong {
     font-size: var(--text-size-s);
+}
+
+a {
     color: var(--red-01);
     text-decoration: none;
 }
 
 p {
-    font-size: var(--text-size-s);
     line-height: 28px;
     margin-bottom: 16px;
 }
@@ -149,6 +151,7 @@ h5 {
 [data-state*="responsive.mobile"] {
     h1 {
         font-size: var(--text-size-l);
+        padding: 0 1.5rem;
     }
 
     h2 {

From c6f355ec52ee4da2ca242a30c7191e1fb52b2d5c Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Mon, 7 Nov 2022 10:22:43 +0100
Subject: [PATCH 03/23] cherry pick more changes

---
 .../DerivGuideContent/DerivGuideContent.tsx   | 19 ++++++++++---------
 .../global/InlineCode/InlineCode.module.scss  |  8 ++++++++
 .../global/InlineCode/InlineCode.tsx          |  7 +++++++
 src/themes.scss                               |  6 +++---
 4 files changed, 28 insertions(+), 12 deletions(-)
 create mode 100644 src/components/global/InlineCode/InlineCode.module.scss
 create mode 100644 src/components/global/InlineCode/InlineCode.tsx

diff --git a/src/components/api-guide/ApiGuide/DerivGuideContent/DerivGuideContent.tsx b/src/components/api-guide/ApiGuide/DerivGuideContent/DerivGuideContent.tsx
index 30f63759..52ecbed5 100644
--- a/src/components/api-guide/ApiGuide/DerivGuideContent/DerivGuideContent.tsx
+++ b/src/components/api-guide/ApiGuide/DerivGuideContent/DerivGuideContent.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { Link } from "react-router-dom";
 import ApiGuideTable from "../ApiGuideTable/ApiGuideTable";
 import CodeBlockSingleLanguage from "../../../global/CodeBlock/CodeBlockSingleLanguage";
+import { InlineCode } from "../../../global/InlineCode/InlineCode";
 import styles from "../ApiGuide.module.scss";
 
 import ticksJSON from "../../../../../public/demos/json/ticks.json";
@@ -175,7 +176,7 @@ export const DerivGuideContent = () => {
         </div>
         <p>
           When you are writing an API client, you will write something like{" "}
-          <code className="inline-code">print address.street_number </code>
+          <InlineCode>print address.street_number</InlineCode>
           (depending on the programming language) to print the street number.
         </p>
         <p>
@@ -185,9 +186,9 @@ export const DerivGuideContent = () => {
         <p>
           For example, when we send information about account status, it
           requires several levels to print information (
-          <code className="inline-code">
-            print authentication.identity.services.manual
-          </code>
+            <InlineCode>
+              print authentication.identity.services.manual
+            </InlineCode>
           ) about the manual Identity service status:
         </p>
         <div className={styles.apiCodeBlock}>
@@ -328,11 +329,11 @@ export const DerivGuideContent = () => {
           with the user's session tokens, and will look similar to this:
         </p>
         <p>
-          <code className="inline-code">
-            https://mywebsite.com/redirect/?acct1=cr799393&
-            token1=a1-f7pnteezo4jzhpxclctizt27hyeot&cur1=usd& acct2=vrtc1859315&
-            token2=a1clwe3vfuuus5kraceykdsoqm4snfq& cur2=usd&state=
-          </code>
+          <InlineCode>
+              https://mywebsite.com/redirect/?acct1=cr799393&
+              token1=a1-f7pnteezo4jzhpxclctizt27hyeot&cur1=usd& acct2=vrtc1859315&
+              token2=a1clwe3vfuuus5kraceykdsoqm4snfq& cur2=usd&state=
+          </InlineCode>
         </p>
         <p>
           In the parameters of the URL you will see all the accounts and the
diff --git a/src/components/global/InlineCode/InlineCode.module.scss b/src/components/global/InlineCode/InlineCode.module.scss
new file mode 100644
index 00000000..3b293657
--- /dev/null
+++ b/src/components/global/InlineCode/InlineCode.module.scss
@@ -0,0 +1,8 @@
+.inlineCode {
+    font-weight: 400;
+    color: var(--red-01);
+    border-radius: 4px;
+    padding: 2px 4px;
+    background-color: var(--gray-01);
+    border: 1px solid var(--gray-02);
+  }
\ No newline at end of file
diff --git a/src/components/global/InlineCode/InlineCode.tsx b/src/components/global/InlineCode/InlineCode.tsx
new file mode 100644
index 00000000..788193cf
--- /dev/null
+++ b/src/components/global/InlineCode/InlineCode.tsx
@@ -0,0 +1,7 @@
+import styles from './InlineCode.module.scss';
+
+export const InlineCode = ({ children }) => {
+    return (
+        <code className={styles.inlineCode}>{children}</code>
+    )
+}
diff --git a/src/themes.scss b/src/themes.scss
index d061427d..a3a40b97 100644
--- a/src/themes.scss
+++ b/src/themes.scss
@@ -76,7 +76,7 @@
     --text-size-xl: 4.8rem;
     --text-size-xxl: 6.4rem;
 
-    //Line Height
+    // Line Height
     --text-lh-xxs: 1;
     --text-lh-xs: 1.25;
     --text-lh-s: 1.4;
@@ -85,13 +85,13 @@
     --text-lh-xl: 2;
     --text-lh-xxl: 2.4;
 
-    //Font Weight
+    // Font Weight
     --text-weight-lighter: lighter;
     --text-weight-normal: normal;
     --text-weight-bold: bold;
     --text-weight-bolder: bolder;
 
-    //Text Align
+    // Text Align
     --text-align-left: start;
     --text-align-right: right;
     --text-align-center: center;

From f8baf4e607dbad4cb86740952016584d2455d17c Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Tue, 8 Nov 2022 16:44:25 +0100
Subject: [PATCH 04/23] refactor

---
 src/index.scss  | 40 +++++++++++++++++++++++++---------------
 src/themes.scss | 10 ----------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index f0d03a77..266de6dc 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -3,24 +3,34 @@ body {
   overflow-x: hidden;
 }
 
-a.active {
-  background-color: var(--hamburger-active-link);
-  font-weight: bold;
-
-  &::before {
-    content: "";
-    display: inline-block;
-    position: absolute;
-    height: 40px;
-    width: 4px;
-    border-radius: 0.4rem 0 0 0.4rem;
-    left: 0;
-    bottom: 0;
-    background-color: var(--red-01);
-    visibility: visible;
+a {
+  color: var(--red-01);
+  text-decoration: none;
+
+  .active {
+    background-color: var(--hamburger-active-link);
+    font-weight: bold;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      height: 40px;
+      width: 4px;
+      border-radius: 0.4rem 0 0 0.4rem;
+      left: 0;
+      bottom: 0;
+      background-color: var(--red-01);
+      visibility: visible;
+    }
   }
 }
 
+p {
+  line-height: 2.8rem;
+  margin-bottom: 1.6rem;
+}
+
 button {
   cursor: pointer;
 
diff --git a/src/themes.scss b/src/themes.scss
index a3a40b97..851b2040 100644
--- a/src/themes.scss
+++ b/src/themes.scss
@@ -105,16 +105,6 @@ a, p, span, b, label, strong {
     font-size: var(--text-size-s);
 }
 
-a {
-    color: var(--red-01);
-    text-decoration: none;
-}
-
-p {
-    line-height: 28px;
-    margin-bottom: 16px;
-}
-
 @mixin header {
     margin-bottom: 16px;
     color: var(--text-01);

From 33e6f0505821c12b26cf2fff2f74e8c448ca23b6 Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Tue, 8 Nov 2022 16:59:27 +0100
Subject: [PATCH 05/23] refactor

---
 src/index.scss  | 2 +-
 src/themes.scss | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index 266de6dc..bf9a130a 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -7,7 +7,7 @@ a {
   color: var(--red-01);
   text-decoration: none;
 
-  .active {
+  &.active {
     background-color: var(--hamburger-active-link);
     font-weight: bold;
 
diff --git a/src/themes.scss b/src/themes.scss
index 851b2040..18fd7111 100644
--- a/src/themes.scss
+++ b/src/themes.scss
@@ -106,14 +106,14 @@ a, p, span, b, label, strong {
 }
 
 @mixin header {
-    margin-bottom: 16px;
+    margin-bottom: 1.6rem;
     color: var(--text-01);
 }
 
 h1 {
     @include header;
     font-size: var(--text-size-xl);
-    margin-bottom: 40px;
+    margin-bottom: 4rem;
     text-align: center;
 }
 

From f4726a9c2f01fad927ccf9c25400f6939481a35a Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Thu, 10 Nov 2022 16:03:52 +0100
Subject: [PATCH 06/23] standard font size throughout app

---
 src/themes.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/themes.scss b/src/themes.scss
index 18fd7111..f6158847 100644
--- a/src/themes.scss
+++ b/src/themes.scss
@@ -101,7 +101,7 @@
     --spinner-width: 100px;
 }
 
-a, p, span, b, label, strong {
+html * {
     font-size: var(--text-size-s);
 }
 

From 7a308499d2f67e7363a5de00f27e71991046b53b Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Wed, 16 Nov 2022 13:02:49 +0100
Subject: [PATCH 07/23] updating px values to rem

---
 .../ApiGuideTable/ApiGuideTable.module.scss   |   6 +-
 .../ApiGuide/Navigator/Navigator.module.scss  |  26 +--
 .../AppManagement/AppManagement.module.scss   |   8 +-
 .../AppRegistration/AppRegistration.scss      |  22 +--
 .../AppRegistrationForm.module.scss           |  16 +-
 .../docs/Docs/Sidebar/Sidebar.module.scss     |  30 ++--
 .../endpoint/Endpoint/Endpoint.module.scss    |  20 +--
 src/components/faq/Faq/Faq.module.scss        |  10 +-
 .../global/Accordion/Accordion.module.scss    | 152 +++++++++---------
 .../global/Button/Button.module.scss          |   6 +-
 .../global/Checkbox/Checkbox.module.scss      |  12 +-
 .../global/CodeBlock/CodeBlock.module.scss    |   8 +-
 .../CodeBlockSingleLanguage.module.scss       |   2 +-
 .../global/CodeBlock/CopyButton.module.scss   |   4 +-
 .../global/DerivLogo/DerivLogo.module.scss    |   4 +-
 .../global/Dialog/Dialog.module.scss          |   4 +-
 .../global/Header/Header.module.scss          |  42 ++---
 .../global/InlineCode/InlineCode.module.scss  |   6 +-
 .../LogoutButton/LogoutButton.module.scss     |   6 +-
 src/components/global/Modal/Modal.module.scss |   4 +-
 .../ResetSendButtonsBlock.module.scss         |   8 +-
 .../homepage/Benefits/Benefits.module.scss    |   6 +-
 .../ClientLibraries.module.scss               |   2 +-
 .../DelayedFallbackHomepage.module.scss       |   6 +-
 .../GetStarted/GetStarted.module.scss         |   4 +-
 .../HeroHeader/HeroHeader.module.scss         |   2 +-
 .../HomepageFooter/HomepageFooter.module.scss |  10 +-
 .../HomepageSlider/HomepageSlider.module.scss |  14 +-
 .../WaysToEarn/WaysToEarn.module.scss         |   2 +-
 .../PlaygroundComponent.module.scss           |  38 ++---
 .../RequestJSONBox/RequestJSONBox.module.scss |  16 +-
 .../SelectRequestInput.module.scss            |   4 +-
 .../TokenInputField.module.scss               |  10 +-
 .../playground/Schema/Schema.module.scss      |  24 +--
 src/index.scss                                |  20 +--
 src/themes.scss                               |  10 +-
 36 files changed, 285 insertions(+), 279 deletions(-)

diff --git a/src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.module.scss b/src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.module.scss
index 674ed99f..f8ca18f2 100644
--- a/src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.module.scss
+++ b/src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.module.scss
@@ -1,8 +1,8 @@
 .apiGuideTable {
   width: 75%;
-  border-radius: 4px;
+  border-radius: 0.4rem;
   overflow: hidden;
-  border: 1px solid var(--gray-02);
+  border: 0.1rem solid var(--gray-02);
   th {
     background-color: var(--gray-02);
     padding: 2.4rem 3.2rem;
@@ -10,7 +10,7 @@
   }
   td {
     padding: 2.4rem 3.2rem;
-    box-shadow: inset 0 -1px 0 var(--gray-15);
+    box-shadow: inset 0 -0.1rem 0 var(--gray-15);
   }
 }
 
diff --git a/src/components/api-guide/ApiGuide/Navigator/Navigator.module.scss b/src/components/api-guide/ApiGuide/Navigator/Navigator.module.scss
index a14a767c..aba9cf36 100644
--- a/src/components/api-guide/ApiGuide/Navigator/Navigator.module.scss
+++ b/src/components/api-guide/ApiGuide/Navigator/Navigator.module.scss
@@ -3,11 +3,11 @@
   flex-direction: column;
   width: 100%;
   background-color: var(--gray-06);
-  right: 40px;
+  right: 4rem;
   z-index: 10;
   box-sizing: border-box;
   padding: 1.6rem;
-  margin: 0 auto 30px;
+  margin: 0 auto 3rem;
   .navigatorContent {
     display: flex;
     flex-direction: column;
@@ -15,13 +15,13 @@
     overflow: hidden;
     transition: height 0.3s ease-in-out;
     &.opened {
-      height: 370px;
+      height: 37rem;
     }
     .navigatorLink {
-      line-height: 26px;
-      font-size: 12px;
+      line-height: 2.6rem;
+      font-size: var(--text-size-xxs);
       color: var(--gray-05);
-      padding: 4px 0;
+      padding: 0.4rem 0;
       &:hover {
         background-color: var(--gray-01);
       }
@@ -36,22 +36,22 @@
     align-items: center;
     justify-content: space-between;
     .navigatorTitle {
-      font-size: 18px;
+      font-size: var(--text-size-xsm);
       margin: 0;
       &.bold {
         font-weight: 700;
       }
     }
     .arrow {
-      background-size: 22px;
+      background-size: 2.2rem;
       background-position: center;
       background-repeat: no-repeat;
       cursor: pointer;
       background-image: url(/img/arrow_up.svg);
       transform: rotate(-180deg);
       transition: transform 0.2s;
-      width: 22px;
-      height: 22px;
+      width: 2.2rem;
+      height: 2.2rem;
       &.down {
         transform: rotate(0deg);
       }
@@ -61,14 +61,14 @@
 
 [data-state~="responsive.mobileTablet"] {
   .navigator {
-    width: 650px;
+    width: 65rem;
   }
 }
 
 [data-state*="responsive.desktop"] {
   .navigator {
-    max-width: 270px;
-    width: 270px;
+    max-width: 27rem;
+    width: 27rem;
     position: fixed;
   }
 }
diff --git a/src/components/app-registration/AppManagement/AppManagement.module.scss b/src/components/app-registration/AppManagement/AppManagement.module.scss
index 9df6255d..4998bf1f 100644
--- a/src/components/app-registration/AppManagement/AppManagement.module.scss
+++ b/src/components/app-registration/AppManagement/AppManagement.module.scss
@@ -97,10 +97,10 @@
         width: 13rem;
         height: 1.5rem;
         background-color: var(--border-normal);
-        border-radius: 4px;
+        border-radius: 0.4rem;
         color: var(--app-registration-tab-active-font);
         text-align: var(--text-align-center);
-        border-radius: 6px;
+        border-radius: 0.6rem;
         padding: 0.5rem 0;
         position: absolute;
         z-index: 1;
@@ -117,14 +117,14 @@
             top: 100%;
             left: 50%;
             margin-left: -0.5rem;
-            border-width: 5px;
+            border-width: 0.5rem;
             border-style: solid;
             border-color: var(--border-normal) transparent transparent transparent;
         }
     }
 
     &:hover {
-        transform: translateY(-2px);
+        transform: translateY(-0.2rem);
 
         .tooltipText {
             visibility: visible;
diff --git a/src/components/app-registration/AppRegistration/AppRegistration.scss b/src/components/app-registration/AppRegistration/AppRegistration.scss
index 7d365efe..f0b60017 100644
--- a/src/components/app-registration/AppRegistration/AppRegistration.scss
+++ b/src/components/app-registration/AppRegistration/AppRegistration.scss
@@ -21,7 +21,7 @@
   background-clip: content-box;
   background-color: transparent;
   border: none;
-  border-radius: 4px;
+  border-radius: 0.4rem;
   font-size: var(--text-size-xs);
   font-weight: var(--text-weight-bold);
   width: 3.2rem;
@@ -82,8 +82,8 @@
   width: 32rem;
   height: auto;
   background-color: var(--white);
-  border-radius: 16px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+  border-radius: 1.6rem;
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
   justify-content: space-between;
 }
 
@@ -153,7 +153,7 @@
   font-weight: var(--text-weight-bold);
   height: 4rem;
   border: none;
-  border-radius: 4px;
+  border-radius: 0.4rem;
   padding: 1rem 1.6rem 1rem 1.6rem;
 }
 
@@ -166,9 +166,9 @@
   background-color: var(--white);
   color: black;
   font-weight: var(--text-weight-bold);
-  border: 1px solid #999999;
+  border: 0.1rem solid #999999;
   height: 4rem;
-  border-radius: 4px;
+  border-radius: 0.4rem;
   padding: 1rem 1.6rem 1rem 1.6rem;
   margin-right: 2.4rem;
 }
@@ -236,7 +236,7 @@ fieldset {
 
 .main-register-btn {
   padding: 1rem 1.6rem;
-  border-radius: 4px;
+  border-radius: 0.4rem;
   background-color: var(--red-01);
   text-decoration: none;
   font-weight: 700;
@@ -290,7 +290,7 @@ fieldset {
   border: none;
   background-color: transparent;
   color: var(--gray-05);
-  border-bottom: 1px solid var(--gray-05);
+  border-bottom: 0.1rem solid var(--gray-05);
   padding: 1rem 2rem;
 }
 
@@ -298,7 +298,7 @@ fieldset {
 [data-state~="registration.logged_in.register_tab"] .register-button {
   font-weight: bold;
   color: var(--text-01);
-  border-bottom: 3px solid var(--red-01);
+  border-bottom: 0.3rem solid var(--red-01);
 }
 
 [data-state~="registration.logged_in.update_mode"] .register-button {
@@ -312,13 +312,13 @@ fieldset {
   content: "Update your application";
   font-weight: var(--text-weight-bold);
   color: var(--text-01);
-  border-bottom: 3px solid var(--red-01);
+  border-bottom: 0.3rem solid var(--red-01);
   position: absolute;
   padding: 1rem 0;
   width: 100%;
   right: 0;
   top: 0;
-  bottom: -1px;
+  bottom: -0.1rem;
 }
 
 [data-state~="registration.logged_in.update_mode"] .register-app {
diff --git a/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss b/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss
index 4d19a9f2..b4d2d0e1 100644
--- a/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss
+++ b/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss
@@ -4,8 +4,8 @@ fieldset .customTextInput:last-child {
 
 .customTextInput {
     align-items: center;
-    border: 1px solid var(--border-normal);
-    border-radius: 4px;
+    border: 0.1rem solid var(--border-normal);
+    border-radius: 0.4rem;
     display: flex;
     line-height: var(--text-lh-s);
     position: relative;
@@ -15,7 +15,7 @@ fieldset .customTextInput:last-child {
         border-color: var(--brand-secondary);
     }
     &:hover {
-        border: 1px solid var(--app-registration-tab-secondary);
+        border: 0.1rem solid var(--app-registration-tab-secondary);
     }
     label {
         position: absolute;
@@ -70,7 +70,7 @@ fieldset .customTextInput:last-child {
         width: 80%;
         input[type='number'],
         input[type='text'] {
-            height: 40px;
+            height: 4rem;
         }
         input[type='number'] {
             appearance: none;
@@ -184,7 +184,7 @@ fieldset .customTextInput:last-child {
     }
     .infoIcon:hover .tooltip {
         width: 14rem;
-        transform: translate(-19%, calc(-100% - 10px));
+        transform: translate(-19%, calc(-100% - 1rem));
     }
 }
 
@@ -214,12 +214,12 @@ input[type='checkbox'] {
         background-image: url(/img/check.svg);
         background-repeat: no-repeat;
         display: inline-block;
-        border: 2px solid var(--app-registration-tab-secondary);
+        border: 0.2rem solid var(--app-registration-tab-secondary);
         min-width: 1.1rem;
         height: 1.1rem;
-        border-radius: 2px;
+        border-radius: 0.2rem;
         transition: background-color 0.25s, border-color 0.25s;
-        top: 3px;
+        top: 0.3rem;
         z-index: 1;
     }
     input:checked + .customCheckbox {
diff --git a/src/components/docs/Docs/Sidebar/Sidebar.module.scss b/src/components/docs/Docs/Sidebar/Sidebar.module.scss
index 2d590024..5cc383d1 100644
--- a/src/components/docs/Docs/Sidebar/Sidebar.module.scss
+++ b/src/components/docs/Docs/Sidebar/Sidebar.module.scss
@@ -6,7 +6,7 @@
     height: 100%;
     z-index: 10;
     background: white;
-    border-right: 2px solid var(--gray-01);
+    border-right: 0.2rem solid var(--gray-01);
     margin-right: 4.8rem;
     top: 10.5rem;
     .sidebarContainer {
@@ -24,8 +24,8 @@
         height: 4.4rem;
         display: flex;
         align-items: var(--text-align-center);
-        border-top-left-radius: 4px;
-        border-bottom-left-radius: 4px;
+        border-top-left-radius: 0.4rem;
+        border-bottom-left-radius: 0.4rem;
         &:empty {
             display: none;
         }
@@ -38,8 +38,8 @@
             background-color: red;
             visibility: hidden;
             transition: all 0.2s ease-in-out;
-            border-top-left-radius: 4px;
-            border-bottom-left-radius: 4px;
+            border-top-left-radius: 0.4rem;
+            border-bottom-left-radius: 0.4rem;
         }
 
         &:hover {
@@ -72,7 +72,7 @@
     line-height: var(--text-lh-xxl);
     font-weight: 700;
     color: var(--text-01);
-    border-top: 2px solid var(--gray-01);
+    border-top: 0.2rem solid var(--gray-01);
 }
 
 .menuItem {
@@ -103,7 +103,7 @@
     line-height: var(--text-lh-xs);
     color: var(--text-01);
     font-weight: bold;
-    border-bottom: 2px solid var(--gray-01);
+    border-bottom: 0.2rem solid var(--gray-01);
 }
 
 .dropdown {
@@ -146,10 +146,10 @@
         color: var(--black-01);
     }
     .dropdownList {
-        max-height: 700px;
+        max-height: 70rem;
         overflow: auto;
         a {
-            padding: 2px 16px 2px 32px;
+            padding: 0.2rem 1.6rem 0.2rem 3.2rem;
         }
         .dropdownContent {
             font-weight: 400;
@@ -159,7 +159,7 @@
         }
         .selected {
             background-color: var(--gray-01);
-            font-size: 16px;
+            font-size: var(--text-size-s);
             font-weight: bold;
             line-height: 1.88;
             opacity: 1;
@@ -180,7 +180,7 @@
         width: 23.6rem;
         min-height: 2.4rem;
         font-size: var(--text-size-xs);
-        line-height: 24px;
+        line-height: 2.4rem;
         .dropdownBtn {
             opacity: unset;
             font-size: var(--text-size-xs);
@@ -205,13 +205,13 @@
                 color: var(--text-01);
                 display: flex;
                 align-items: var(--text-align-center);
-                border-radius: 0px 4px 4px 0px;
+                border-radius: 0 0.4rem 0.4rem 0;
                 position: relative;
                 font-size: var(--text-size-xs);
                 &:before {
                     width: 0.4rem;
                     margin-bottom: 0.2rem;
-                    border-radius: 4px 0 0 4px;
+                    border-radius: 0.4rem 0 0 0.4rem;
                 }
             }
             .selected {
@@ -234,7 +234,7 @@
                     visibility: visible;
                     height: 100%;
                     width: 0.4rem;
-                    border-radius: 4px 0 0 4px;
+                    border-radius: 0.4rem 0 0 0.4rem;
                 }
             }
             &[href~="/docs/"] {
@@ -248,7 +248,7 @@
             line-height: var(--text-lh-xxl);
             font-weight: 700;
             color: var(--text-01);
-            border-top: 2px solid var(--gray-01);
+            border-top: 0.2rem solid var(--gray-01);
         }
     }
 }
diff --git a/src/components/endpoint/Endpoint/Endpoint.module.scss b/src/components/endpoint/Endpoint/Endpoint.module.scss
index 4d011e97..302b1f2b 100644
--- a/src/components/endpoint/Endpoint/Endpoint.module.scss
+++ b/src/components/endpoint/Endpoint/Endpoint.module.scss
@@ -32,7 +32,7 @@
             width: 100%;
         }
         .customTextInput {
-            border-radius: 4px;
+            border-radius: 0.4rem;
             align-items: var(--text-align-center);
             display: flex;
             flex-direction: column;
@@ -63,7 +63,7 @@
                         background-color: var(--white);
                         background-size: 1rem;
                         padding: 0 0.4rem;
-                        transform: translateY(-20px) scale(0.75);
+                        transform: translateY(-2rem) scale(0.75);
                     }
                     &:focus {
                         outline: none;
@@ -71,7 +71,7 @@
                             color: var(--brand-secondary);
                             background-color: var(--white);
                             padding: 0 0.4rem;
-                            transform: translateY(-20px) scale(0.75);
+                            transform: translateY(-2rem) scale(0.75);
                         }
                     }
                 }
@@ -91,7 +91,7 @@
                 }
                 .textInput {
                     background: none;
-                    border: 1px solid #ccc;
+                    border: 0.1rem solid #ccc;
                     color: var(--black-01);
                     padding: 1.6rem 1.6rem 1.6rem 1.28rem;
                     width: 100%;
@@ -116,11 +116,11 @@
                 font-size: var(--text-size-sm);
             }
             .urlId {
-                border-radius: 4px;
+                border-radius: 0.4rem;
                 padding: 0.2rem 0.4rem;
                 color: var(--wine-01);
                 font-size: 90%;
-                border: 1px solid var(--gray-01);
+                border: 0.1rem solid var(--gray-01);
                 font-weight: 400;
             }
         }
@@ -129,25 +129,25 @@
             margin: 0.5rem;
 
             .submitButton {
-                border-radius: 4px;
+                border-radius: 0.4rem;
                 padding: 1rem 1.6rem;
                 font-size: var(--text-size-xs);
                 transition: all 0.25s ease 0s;
                 font-weight: bold;
                 height: fit-content;
-                border: 2px solid var(--red-01);
+                border: 0.2rem solid var(--red-01);
                 color: var(--white);
                 background: var(--red-01);
             }
 
             .resetButton {
-                border-radius: 4px;
+                border-radius: 0.4rem;
                 padding: 1rem 1.6rem;
                 font-size: var(--text-size-xs);
                 transition: all 0.25s ease 0s;
                 font-weight: var(--text-weight-bold);
                 height: fit-content;
-                border: 2px solid var(--gray-05);
+                border: 0.2rem solid var(--gray-05);
                 color: var(--black-01);
                 background: transparent;
             }
diff --git a/src/components/faq/Faq/Faq.module.scss b/src/components/faq/Faq/Faq.module.scss
index e62592b8..6ea41203 100644
--- a/src/components/faq/Faq/Faq.module.scss
+++ b/src/components/faq/Faq/Faq.module.scss
@@ -1,7 +1,7 @@
 .pageContent {
   width: 70%;
   padding-left: 4.2rem;
-  border-left: 2px solid var(--gray-01);
+  border-left: 0.2rem solid var(--gray-01);
 
   @media (max-width: 99.2rem) {
     width: 100% !important;
@@ -12,7 +12,7 @@
   background-image: url("/img/pattern-left.svg"), url("/img/pattern-right.svg");
   background-size: 46%, 50%;
   background-repeat: no-repeat, no-repeat;
-  background-position: top 20px left 8px, bottom 0 right -8px;
+  background-position: top 2rem left 0.8rem, bottom 0 right -0.8rem;
   z-index: 0;
 }
 .pre {
@@ -21,9 +21,9 @@
   white-space: pre-wrap;
   word-break: break-word;
   color: var(--white);
-  border-radius: 4px;
-  padding: 24px;
-  margin-bottom: 16px;
+  border-radius: 0.4rem;
+  padding: 2.4rem;
+  margin-bottom: 1.6rem;
   background: #1d1f20;
   font-size: inherit;
   word-wrap: inherit;
diff --git a/src/components/global/Accordion/Accordion.module.scss b/src/components/global/Accordion/Accordion.module.scss
index ba587e9b..9f2ec59b 100644
--- a/src/components/global/Accordion/Accordion.module.scss
+++ b/src/components/global/Accordion/Accordion.module.scss
@@ -1,79 +1,85 @@
 .accordion {
-    @media (min-width: 992px) {
-      padding-left: 7.5rem;
+
+  .accordionWrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-bottom: 2.4rem;
+
+    .accordionHeader {
+      display: inline-flex;
+      min-height: 5.6rem;
+      align-items: center;
+      max-height: fit-content;
+      padding: 0 4rem;
+      border: none;
+      border-radius: 0.6rem;
+      box-shadow: -0.2rem 0.6rem 1.5rem 0 rgba(195, 195, 195, 0.31);
+      background-color: var(--white);
+      transition: 0.2s;
+      font-weight: 700;
+
+      >div {
+        margin-right: 1.6rem;
+      }
+
+      .accordionText {
+        font-size: 1.6rem;
+        margin-right: 1.6rem;
+        color: var(--text-01);
+      }
+
+      .accordionButtonPlus {
+        background-image: url("/img/plus.svg");
+        width: 1.6rem;
+        height: 1.6rem;
+        margin-left: auto;
+      }
+
+      .accordionButtonMinus {
+        background-image: url("/img/minus.svg");
+        width: 1.6rem;
+        height: 1.6rem;
+        margin-left: auto;
+        transform: rotate(90deg);
+      }
     }
-    .accordionWrapper {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
+
+    .accordionHeader :nth-child(2) {
+      margin-left: auto !important;
+      flex-shrink: 0;
+    }
+
+    .accordionPanel {
+      height: fit-content;
+      padding: 2.4rem 4rem;
+      background-color: rgba(87, 122, 146, 0.04);
       margin-bottom: 2.4rem;
-  
-      .accordionHeader {
-        display: inline-flex;
-        min-height: 5.6rem;
-        align-items: center;
-        max-height: fit-content;
-        padding: 0 4rem;
-        border: none;
-        border-radius: 6px;
-        box-shadow: -2px 6px 15px 0 rgba(195, 195, 195, 0.31);
-        background-color: var(--white);
-        transition: 0.2s;
-        font-weight: 700;
-        @media (max-width: 992px) {
-          padding: 16px 28px;
-        }
-  
-        > div {
-          margin-right: 1.6rem;
-        }
-        .accordionText {
-          font-size: 1.6rem;
-          margin-right: 1.6rem;
-          color: var(--text-01);
-        }
-  
-        .accordionButtonPlus {
-          background-image: url("/img/plus.svg");
-          width: 1.6rem;
-          height: 1.6rem;
-          margin-left: auto;
-        }
-        .accordionButtonMinus {
-          background-image: url("/img/minus.svg");
-          width: 1.6rem;
-          height: 1.6rem;
-          margin-left: auto;
-          transform: rotate(90deg);
-        }
-      }
-  
-      .accordionHeader :nth-child(2) {
-        margin-left: auto !important;
-        flex-shrink: 0;
+      z-index: 2;
+      color: var(--text-01);
+
+      .code {
+        color: var(--red-01);
+        font-weight: 400;
+        margin: 0 0.2rem 0 0;
+        border-radius: 0.4rem;
+        padding: 0.2rem 0.4rem;
+        border: 0.1rem solid #eaeced;
+        font-family: ibm plex sans, sans-serif;
       }
-  
-      .accordionPanel {
-        height: fit-content;
-        padding: 2.4rem 4rem;
-        background-color: rgba(87, 122, 146, 0.04);
-        margin-bottom: 2.4rem;
-        z-index: 2;
-        color: var(--text-01);
-  
-        .code {
-          color: var(--red-01);
-          font-weight: 400;
-          margin: 0 2px 0 0;
-          border-radius: 4px;
-          padding: 2px 4px;
-          border: 1px solid #eaeced;
-          font-family: ibm plex sans, sans-serif;
-        }
-  
-        ol {
-          margin-left: 2rem;
-        }
+
+      ol {
+        margin-left: 2rem;
       }
     }
-  }
\ No newline at end of file
+  }
+}
+
+[data-state*="responsive.desktop"] {
+  .accordion {
+    padding-left: 7.5rem;
+    .accordionHeader {
+      padding: 1.6rem 2.8rem;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/global/Button/Button.module.scss b/src/components/global/Button/Button.module.scss
index 11c16f06..c8f072bd 100644
--- a/src/components/global/Button/Button.module.scss
+++ b/src/components/global/Button/Button.module.scss
@@ -5,7 +5,7 @@
   height: fit-content;
   padding: 1rem 1.6rem;
   border: none;
-  border-radius: 4px;
+  border-radius: 0.4rem;
   font-size:var(--text-size-xs);
   font-weight: 700;
   line-height: var(--text-lh-s);
@@ -18,8 +18,8 @@
   &.secondary {
     --btn-background: transparent;
     --btn-text-color: var(--black-01);
-    border: solid 2px var(--gray-05);
-    border-radius: 4px;
+    border: solid 0.2rem var(--gray-05);
+    border-radius: 0.4rem;
     width: fit-content;
     padding: 0.8rem 1.6rem;
     &:hover {
diff --git a/src/components/global/Checkbox/Checkbox.module.scss b/src/components/global/Checkbox/Checkbox.module.scss
index dd9354ab..ab24f1ea 100644
--- a/src/components/global/Checkbox/Checkbox.module.scss
+++ b/src/components/global/Checkbox/Checkbox.module.scss
@@ -1,6 +1,6 @@
 input[type="checkbox"] {
   display: none;
-  margin-right: 16px;
+  margin-right: 1.6rem;
   transform: scale(1.23);
   padding: 0.9rem;
 }
@@ -9,13 +9,13 @@ input[type="checkbox"] {
   background-image: url(/img/check.svg);
   background-repeat: no-repeat;
   display: inline-block;
-  border: 2px solid var(--app-registration-tab-secondary);
+  border: 0.2rem solid var(--app-registration-tab-secondary);
   min-width: 1.1rem;
-  height: 11px;
+  height: 1.1rem;
   position: relative;
-  top: 1px;
-  margin-right: 8px;
-  border-radius: 2px;
+  top: 0.1rem;
+  margin-right: 0.8rem;
+  border-radius: 0.2rem;
   transition: background-color 0.25s, border-color 0.25s;
 }
 
diff --git a/src/components/global/CodeBlock/CodeBlock.module.scss b/src/components/global/CodeBlock/CodeBlock.module.scss
index 3e73a461..b6d906c1 100644
--- a/src/components/global/CodeBlock/CodeBlock.module.scss
+++ b/src/components/global/CodeBlock/CodeBlock.module.scss
@@ -4,7 +4,7 @@
   white-space: pre-wrap;
   word-break: break-word;
   color: var(--white);
-  border-radius: 0 0 4px 4px;
+  border-radius: 0 0 0.4rem 0.4rem;
   padding: 2.4rem;
   margin-bottom: 1.6rem;
   background: var(--json-midnight);
@@ -18,7 +18,7 @@
   .sub_title {
     font-size: var(--text-size-l);
     text-align: left;
-    margin-bottom: 8px;
+    margin-bottom: 0.8rem;
   }
 
   p {
@@ -42,14 +42,14 @@
 }
 
 .card {
-  border-radius: 6px;
+  border-radius: 0.6rem;
   background-color: var(--black-02);
 
   .cardHeader {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
-    border-radius: 6px;
+    border-radius: 0.6rem;
     background-color: var(--json-midnight);
     color: var(--gray-07);
     line-height: 1.5;
diff --git a/src/components/global/CodeBlock/CodeBlockSingleLanguage.module.scss b/src/components/global/CodeBlock/CodeBlockSingleLanguage.module.scss
index e81787f0..a98299c0 100644
--- a/src/components/global/CodeBlock/CodeBlockSingleLanguage.module.scss
+++ b/src/components/global/CodeBlock/CodeBlockSingleLanguage.module.scss
@@ -1,4 +1,4 @@
 .codeBlockSingleLanguage {
   background-color: var(--black-02);
-  border-radius: 4px;
+  border-radius: 0.4rem;
 }
diff --git a/src/components/global/CodeBlock/CopyButton.module.scss b/src/components/global/CodeBlock/CopyButton.module.scss
index 875a403e..c2c59c8a 100644
--- a/src/components/global/CodeBlock/CopyButton.module.scss
+++ b/src/components/global/CodeBlock/CopyButton.module.scss
@@ -1,5 +1,5 @@
 .copyButtonHeader {
-  border-radius: 4px 4px 0 0;
+  border-radius: 0.4rem 0.4rem 0 0;
   position: relative;
   display: flex;
   justify-content: end;
@@ -27,7 +27,7 @@
 
     &:hover {
       background-color: var(--copy-hover);
-      border-top-right-radius: 6px;
+      border-top-right-radius: 0.6rem;
     }
   }
 }
diff --git a/src/components/global/DerivLogo/DerivLogo.module.scss b/src/components/global/DerivLogo/DerivLogo.module.scss
index b3cd0309..dd9e9211 100644
--- a/src/components/global/DerivLogo/DerivLogo.module.scss
+++ b/src/components/global/DerivLogo/DerivLogo.module.scss
@@ -16,7 +16,7 @@
         padding-top: 4rem;
         font-weight: normal;
         color: #ffffff;
-        margin-left: 24px;
+        margin-left: 2.4rem;
     }
     .logo {
         background-image: url(/img/deriv.svg);
@@ -43,6 +43,6 @@
     }
     .branding {
         font-size: var(--text-size-s);
-        margin-left: 8px;
+        margin-left: 0.8rem;
     }
 }
\ No newline at end of file
diff --git a/src/components/global/Dialog/Dialog.module.scss b/src/components/global/Dialog/Dialog.module.scss
index b710d1a1..3a3e6e0c 100644
--- a/src/components/global/Dialog/Dialog.module.scss
+++ b/src/components/global/Dialog/Dialog.module.scss
@@ -19,8 +19,8 @@
   width: 32rem;
   height: auto;
   background-color: #fff;
-  border-radius: 16px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+  border-radius: 1.6rem;
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
   justify-content: space-between;
 }
 
diff --git a/src/components/global/Header/Header.module.scss b/src/components/global/Header/Header.module.scss
index 8132919e..e4f3574d 100644
--- a/src/components/global/Header/Header.module.scss
+++ b/src/components/global/Header/Header.module.scss
@@ -19,8 +19,8 @@
       content: "";
       position: absolute;
       width: 0;
-      height: 2px;
-      bottom: -2px;
+      height: 0.2rem;
+      bottom: -0.2rem;
       left: 0;
       background-color: var(--red-01);
       visibility: hidden;
@@ -50,14 +50,14 @@
     height: 3.2rem;
     padding-left: 1.1rem;
     justify-content: var(--text-align-center);
-    box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.1);
+    box-shadow: inset 0 -0.1rem 0 0 rgba(255, 255, 255, 0.1);
     z-index: 1;
     &Container {
       display: flex;
       flex-wrap: nowrap;
       width: 80%;
       a {
-        margin-right: 40px;
+        margin-right: 4rem;
         font-size: var(--text-size-xxs);
         line-height: var(--text-lh-m);
         color: #c2c2c2;
@@ -93,7 +93,7 @@
 
 .hamburgerNavigation {
   overflow-y: auto;
-  box-shadow: rgb(0, 0, 0, 0.1) 0 16px 20px 0;
+  box-shadow: rgb(0, 0, 0, 0.1) 0 1.6rem 2rem 0;
   display: inline-block;
   position: fixed;
   left: -26rem;
@@ -124,7 +124,7 @@
           color: var(--text-01);
           display: flex;
           align-items: var(--text-align-center);
-          border-radius: 0px 4px 4px 0px;
+          border-radius: 0 0.4rem 0.4rem 0;
           position: relative;
           font-size: var(--text-size-xs);
         }
@@ -139,7 +139,7 @@
         display: flex;
         align-items: center;
         padding-left: 2.2rem;
-        border-radius: 0px 4px 4px 0px;
+        border-radius: 0 0.4rem 0.4rem 0;
         background-color: transparent;
         border: none;
         &::after {
@@ -165,16 +165,16 @@
 }
 [data-state*="responsive.mobile"] {
   .header {
-    height: 48px;
+    height: 4.8rem;
     .headerContainer {
       width: 100%;
-      height: 56px;
-      padding-left: 16px;
+      height: 5.6rem;
+      padding-left: 1.6rem;
       .hamburger {
         display: flex;
         justify-content: center;
         align-items: center;
-        margin-right: 12px;
+        margin-right: 1.2rem;
         z-index: 101;
         cursor: pointer;
         transition: transform 0.25s;
@@ -183,7 +183,7 @@
   }
   &[data-state~="hamburger.hamburger_closed"] {
     .hamburgerNavigation {
-      left: -260px;
+      left: -26rem;
     }
   }
   &[data-state~="hamburger.hamburger_open"] {
@@ -219,26 +219,26 @@
 [data-state*="responsive.mobile"] {
   .nav {
     a {
-      padding-left: 16px;
-      height: 40px;
-      width: calc(100% - 22px);
+      padding-left: 1.6rem;
+      height: 4rem;
+      width: calc(100% - 2.2rem);
       color: var(--text-01);
       display: flex;
       align-items: center;
-      border-radius: 0px 4px 4px 0px;
+      border-radius: 0 0.4rem 0.4rem 0;
       position: relative;
-      font-size: 14px;
+      font-size: var(--text-size-xs);
     }
     .selected {
       font-weight: bold;
       &::before {
-        width: 20px;
+        width: 2rem;
         visibility: visible;
         line-height: 1.5;
         height: 100%;
         bottom: 0;
-        width: 4px;
-        border-radius: 4px 0 0 4px;
+        width: 0.4rem;
+        border-radius: 0.4rem 0 0 0.4rem;
       }
       &::after {
         content: "";
@@ -249,7 +249,7 @@
         top: 0;
         left: 0;
         z-index: -1;
-        border-radius: 0 4px 4px 0;
+        border-radius: 0 0.4rem 0.4rem 0;
       }
     }
   }
diff --git a/src/components/global/InlineCode/InlineCode.module.scss b/src/components/global/InlineCode/InlineCode.module.scss
index 3b293657..3d48de28 100644
--- a/src/components/global/InlineCode/InlineCode.module.scss
+++ b/src/components/global/InlineCode/InlineCode.module.scss
@@ -1,8 +1,8 @@
 .inlineCode {
     font-weight: 400;
     color: var(--red-01);
-    border-radius: 4px;
-    padding: 2px 4px;
+    border-radius: 0.4rem;
+    padding: 0.2rem 0.4rem;
     background-color: var(--gray-01);
-    border: 1px solid var(--gray-02);
+    border: 0.1rem solid var(--gray-02);
   }
\ No newline at end of file
diff --git a/src/components/global/LogoutButton/LogoutButton.module.scss b/src/components/global/LogoutButton/LogoutButton.module.scss
index 098a5ee9..936537ff 100644
--- a/src/components/global/LogoutButton/LogoutButton.module.scss
+++ b/src/components/global/LogoutButton/LogoutButton.module.scss
@@ -4,13 +4,13 @@
   z-index: 100;
   color: var(--white);
   background-color: transparent;
-  border: solid 2px var(--gray-05);
-  border-radius: 4px;
+  border: solid 0.2rem var(--gray-05);
+  border-radius: 0.4rem;
 }
 
 [data-state*="mobile"] .signOut {
   position: relative;
   width: 13rem;
   text-align: center;
-  bottom: 1px;
+  bottom: 0.1rem;
 }
diff --git a/src/components/global/Modal/Modal.module.scss b/src/components/global/Modal/Modal.module.scss
index 0a6dac2c..79ca1b63 100644
--- a/src/components/global/Modal/Modal.module.scss
+++ b/src/components/global/Modal/Modal.module.scss
@@ -1,13 +1,13 @@
 .modalHeader {
   width: 100%;
-  height: 50px;
+  height: 5rem;
   display: flex;
   justify-content: flex-end;
   align-items: center;
 }
 
 .closeModal {
-  margin: 26px 18px;
+  margin: 2.6rem 1.8rem;
   cursor: pointer;
   background-image: url(/img/close_dialog.svg);
   background-repeat: no-repeat;
diff --git a/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.module.scss b/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.module.scss
index 9d9c1c62..9f703536 100644
--- a/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.module.scss
+++ b/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.module.scss
@@ -9,7 +9,7 @@
     cursor: pointer;
     width: fit-content;
     height: fit-content;
-    border-radius: 4px;
+    border-radius: 0.4rem;
     margin-right: 0.8rem;
     font-size: var(--text-size-xs);
     font-weight: 700;
@@ -19,12 +19,12 @@
     background-color: var(--white);
     color: var(--black-03);
     padding: 1rem 1.6rem;
-    border: var(--gray-04) 1px solid;
+    border: var(--gray-04) 0.1rem solid;
   }
 
   .grayBtnSubmit button {
     padding: 0.8rem 1.6rem;
-    border: solid 2px var(--gray-05);
+    border: solid 0.2rem var(--gray-05);
     background-color: var(--white);
     line-height: var(--text-lh-s);
     letter-spacing: normal;
@@ -38,7 +38,7 @@
     height: fit-content;
     padding: 1rem 1.6rem;
     border: none;
-    border-radius: 4px;
+    border-radius: 0.4rem;
     background-color: var(--red-01);
     font-size: var(--text-size-xs);
     font-weight: 700;
diff --git a/src/components/homepage/Benefits/Benefits.module.scss b/src/components/homepage/Benefits/Benefits.module.scss
index 320a185a..3ff903ca 100644
--- a/src/components/homepage/Benefits/Benefits.module.scss
+++ b/src/components/homepage/Benefits/Benefits.module.scss
@@ -37,7 +37,7 @@
         width: 100%;
 
         h3 {
-            margin: 16px 0;
+            margin: 1.6rem 0;
         }
 
         div {
@@ -79,7 +79,7 @@
                 }
 
                 p {
-                    font-size: 22px;
+                    font-size: var(--text-size-m);
                     line-height: 3.2rem;
                 }
             }
@@ -145,7 +145,7 @@
 
                 .personalisation {
                     width: 90% !important;
-                    margin: 0 auto 30px;
+                    margin: 0 auto 3rem;
 
                     h3 {
                         font-size: var(--text-size-m);
diff --git a/src/components/homepage/ClientLibraries/ClientLibraries.module.scss b/src/components/homepage/ClientLibraries/ClientLibraries.module.scss
index 3d3757ad..b03c8d38 100644
--- a/src/components/homepage/ClientLibraries/ClientLibraries.module.scss
+++ b/src/components/homepage/ClientLibraries/ClientLibraries.module.scss
@@ -1,5 +1,5 @@
 .takeToLib {
-    padding: 80px 0 0;
+    padding: 8rem 0 0;
     .clientLibrary {
 
         h1 {
diff --git a/src/components/homepage/DelayedFallbackHomepage/DelayedFallbackHomepage.module.scss b/src/components/homepage/DelayedFallbackHomepage/DelayedFallbackHomepage.module.scss
index bfa7adf6..cc99f25e 100644
--- a/src/components/homepage/DelayedFallbackHomepage/DelayedFallbackHomepage.module.scss
+++ b/src/components/homepage/DelayedFallbackHomepage/DelayedFallbackHomepage.module.scss
@@ -9,11 +9,11 @@
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
-  height: 488px;
+  height: 48.8rem;
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-top: 40px;
+  padding-top: 4rem;
   position: relative;
   &:before {
     content: " ";
@@ -24,7 +24,7 @@
       var(--brown-01)
     );
     width: 100%;
-    height: 488px;
+    height: 48.8rem;
     display: inline-block;
     position: absolute;
     bottom: 0;
diff --git a/src/components/homepage/GetStarted/GetStarted.module.scss b/src/components/homepage/GetStarted/GetStarted.module.scss
index ba648ddd..fd542a79 100644
--- a/src/components/homepage/GetStarted/GetStarted.module.scss
+++ b/src/components/homepage/GetStarted/GetStarted.module.scss
@@ -29,8 +29,8 @@
     .termConditions,
     .termConditions a {
         text-align: center;
-        max-width: 350px;
-        font-size: 13px;
+        max-width: 35rem;
+        font-size: var(--text-size-xs);
         margin-top: 0;
     }
 }
\ No newline at end of file
diff --git a/src/components/homepage/HeroHeader/HeroHeader.module.scss b/src/components/homepage/HeroHeader/HeroHeader.module.scss
index 9ad988cf..8bba9e7a 100644
--- a/src/components/homepage/HeroHeader/HeroHeader.module.scss
+++ b/src/components/homepage/HeroHeader/HeroHeader.module.scss
@@ -10,7 +10,7 @@
     display: flex;
     justify-content: var(--text-align-center);
     align-items: var(--text-align-center);
-    padding-top: 40px;
+    padding-top: 4rem;
 
     .heroContainer {
         display: flex;
diff --git a/src/components/homepage/HomepageFooter/HomepageFooter.module.scss b/src/components/homepage/HomepageFooter/HomepageFooter.module.scss
index 30e17001..c9409041 100644
--- a/src/components/homepage/HomepageFooter/HomepageFooter.module.scss
+++ b/src/components/homepage/HomepageFooter/HomepageFooter.module.scss
@@ -1,8 +1,8 @@
 .communityBtn {
-    padding: 6px 16px;
-    border-radius: 4px;
+    padding: 0.6rem 1.6rem;
+    border-radius: 0.4rem;
     font-weight: 700;
-    font-size: 14px;
-    line-height: 20px;
-    border: solid 1px var(--gray-04);
+    font-size: var(--text-size-xs);
+    line-height: 2rem;
+    border: solid 0.1rem var(--gray-04);
 }
\ No newline at end of file
diff --git a/src/components/homepage/HomepageSlider/HomepageSlider.module.scss b/src/components/homepage/HomepageSlider/HomepageSlider.module.scss
index 2c2b4b00..d9bbfe5d 100644
--- a/src/components/homepage/HomepageSlider/HomepageSlider.module.scss
+++ b/src/components/homepage/HomepageSlider/HomepageSlider.module.scss
@@ -3,19 +3,19 @@
   left: 50%;
   transform: translate(0);
   width: 33vw;
-  height: 248px;
+  height: 24.8rem;
 
   .control {
     position: absolute;
     top: 35%;
-    width: 50px;
-    height: 50px;
+    width: 5rem;
+    height: 5rem;
     z-index: 2;
   }
 
   .prev,
   .next {
-    background-size: 22px;
+    background-size: 2.2rem;
     background-position: center;
     background-repeat: no-repeat;
     cursor: pointer;
@@ -38,7 +38,7 @@
 
   .sliderWrapper {
     width: 33vw;
-    height: 248px;
+    height: 24.8rem;
     overflow: hidden;
     position: relative;
     z-index: 1;
@@ -81,10 +81,10 @@
         }
         
         .blockquoteSeparator {
-          margin: 20px 0;
+          margin: 2rem 0;
           border: none;
           width: 15rem;
-          height: 1px;
+          height: 0.1rem;
           background-color: var(--blockquote-separator-color);
         }
         
diff --git a/src/components/homepage/WaysToEarn/WaysToEarn.module.scss b/src/components/homepage/WaysToEarn/WaysToEarn.module.scss
index 5bc02b73..48fc1ef2 100644
--- a/src/components/homepage/WaysToEarn/WaysToEarn.module.scss
+++ b/src/components/homepage/WaysToEarn/WaysToEarn.module.scss
@@ -1,5 +1,5 @@
 .waysContainer {
-    margin-top: 20px;
+    margin-top: 2rem;
 
     .waysWrapper {
         width: 100%;
diff --git a/src/components/playground/PlaygroundComponent/PlaygroundComponent.module.scss b/src/components/playground/PlaygroundComponent/PlaygroundComponent.module.scss
index 2d171110..6826d963 100644
--- a/src/components/playground/PlaygroundComponent/PlaygroundComponent.module.scss
+++ b/src/components/playground/PlaygroundComponent/PlaygroundComponent.module.scss
@@ -2,7 +2,7 @@
   margin-top: 12.5rem;
   min-height: 95vh;
   width: 100%;
-  border-left: 2px solid var(--app-sidebar-border-color);
+  border-left: 0.2rem solid var(--app-sidebar-border-color);
 
   .headerTitle h1 {
     text-align: var(--text-align-center);
@@ -21,7 +21,7 @@
       flex-wrap: wrap;
       height: fit-content;
       width: 100%;
-      margin-top: 40px;
+      margin-top: 4rem;
       .playgroundPageWrapper {
         display: flex;
         justify-content: var(--text-align-center);
@@ -40,7 +40,7 @@
   .apiToken {
     display: flex;
     flex-wrap: nowrap;
-    border-radius: 4px;
+    border-radius: 0.4rem;
     background-color: var(--gray-13);
     padding: 2.4rem;
     margin-bottom: 4.8rem;
@@ -65,9 +65,9 @@
   .apiRequest {
     display: flex;
     flex-wrap: nowrap;
-    border-radius: 4px;
+    border-radius: 0.4rem;
     margin-bottom: 2.4rem;
-    border: 0.5px solid var(--gray-10);
+    border: 0.05rem solid var(--gray-10);
     width: 100%;
   }
 
@@ -75,21 +75,21 @@
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
-    font-size: 14px;
+    font-size: var(--text-size-xs);
     width: 100%;
     margin-bottom: unset;
     align-items: var(--text-align-center);
     justify-content: var(--text-align-center);
     padding: 1rem 0;
-    border-left: 1px solid var(--app-sidebar-border-color);
+    border-left: 0.1rem solid var(--app-sidebar-border-color);
 
     &-button button {
       cursor: pointer;
       font-size: var(--text-size-xs);
       font-weight: 700;
       padding: 1rem 1.6rem;
-      border-radius: 4px;
-      border: solid 2px var(--gray-04);
+      border-radius: 0.4rem;
+      border: solid 0.2rem var(--gray-04);
       color: var(--black-03);
       background-color: var(--white);
       
@@ -129,7 +129,7 @@
   height: 4.2rem;
   padding: 1rem 1.6rem;
   border: none;
-  border-radius: 0 4px 4px 0;
+  border-radius: 0 0.4rem 0.4rem 0;
   background-color: var(--red-01);
   font-size: var(--text-size-xs);
   line-height: var(--text-lh-s);
@@ -141,7 +141,7 @@
 }
 
 .playgroundBox {
-  border-radius: 6px;
+  border-radius: 0.6rem;
   border: none;
   padding: 2.4rem 2.4rem 8.2rem 2.4rem;
   margin-bottom: 4rem;
@@ -167,7 +167,7 @@
     pre.err {
       padding: 1.6rem;
       border: none;
-      border-radius: 4px;
+      border-radius: 0.4rem;
       background-color: var(--black-01);
       color: var(--copy-color);
       line-height: var(--text-lh-xxl);
@@ -196,7 +196,7 @@
 
     .btnSubmit {
       background-color: var(--black-04);
-      border: var(--gray-04) 2px solid;
+      border: var(--gray-04) 0.2rem solid;
       color: var(--white);
       font-weight: bold;
       font-size: var(--text-size-xs);
@@ -225,7 +225,7 @@
     min-height: 20rem;
     padding: 1rem 1.2rem;
     border: none;
-    border-radius: 4px;
+    border-radius: 0.4rem;
     background-color: var(--black-01);
     color: var(--copy-color);
     resize: none;
@@ -245,14 +245,14 @@
 .apiRequest {
   display: flex;
   flex-wrap: nowrap;
-  border-radius: 4px;
+  border-radius: 0.4rem;
   margin-bottom: 2.4rem;
-  border: 0.5px var(--gray-10);
+  border: 0.05rem var(--gray-10);
 }
 .select2 {
   width: 100% !important;
   color: var(--gray-05);
-  border: solid 1px var(--border-normal) !important;
+  border: solid 0.1rem var(--border-normal) !important;
   display: block;
   padding-left: 0.8rem;
   padding-right: 2rem;
@@ -266,8 +266,8 @@
 }
 .option {
   border: none;
-  border-radius: 3.5px !important;
-  border: solid 1px var(--border-normal) !important;
+  border-radius: 0.35rem !important;
+  border: solid 0.1rem var(--border-normal) !important;
   color: var(--gray-05) !important;
 }
 
diff --git a/src/components/playground/PlaygroundComponent/RequestJSONBox/RequestJSONBox.module.scss b/src/components/playground/PlaygroundComponent/RequestJSONBox/RequestJSONBox.module.scss
index 54f4a2bd..5cebc5d4 100644
--- a/src/components/playground/PlaygroundComponent/RequestJSONBox/RequestJSONBox.module.scss
+++ b/src/components/playground/PlaygroundComponent/RequestJSONBox/RequestJSONBox.module.scss
@@ -1,5 +1,5 @@
 .playgroundBox {
-  border-radius: 6px;
+  border-radius: 0.6rem;
   border: none;
   margin-left: 0.5rem;
   position: relative;
@@ -36,7 +36,7 @@
 }
 
 .textareaRequest {
-  border-radius: 4px;
+  border-radius: 0.4rem;
   resize: none;
 }
 
@@ -45,13 +45,13 @@
   padding: 1rem 1.2rem;
   border: none;
   color: var(--blue-04);
-  border: 1px solid var(--border-normal);
+  border: 0.1rem solid var(--border-normal);
 }
 
 .registrationRequest {
   min-height: 11.9rem;
   padding: 1rem;
-  border: solid 1px var(--border-normal);
+  border: solid 0.1rem var(--border-normal);
   font-size: var(--text-size-s);
 }
 
@@ -66,7 +66,7 @@
     cursor: pointer;
     width: fit-content;
     height: fit-content;
-    border-radius: 4px;
+    border-radius: 0.4rem;
     margin-right: 0.8rem;
     font-size: 1.4rem;
     font-weight: 700;
@@ -76,12 +76,12 @@
     background-color: var(--black-04);
     color: var(--white);
     padding: 1rem 1.6rem;
-    border: var(--gray-04) 2px solid;
+    border: var(--gray-04) 0.2rem solid;
   }
 
   .grayBtnSubmit button {
     padding: 1rem 1.6rem;
-    border: solid 2px var(--gray-09);
+    border: solid 0.2rem var(--gray-09);
     background-color: var(--white);
     line-height: var(--text-lh-s);
     letter-spacing: normal;
@@ -95,7 +95,7 @@
     height: fit-content;
     padding: 1rem 1.6rem;
     border: none;
-    border-radius: 4px;
+    border-radius: 0.4rem;
     background-color: var(--red-01);
     font-size: var(--text-size-xs);
     font-weight: 700;
diff --git a/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.module.scss b/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.module.scss
index ac6438d0..7e949a0e 100644
--- a/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.module.scss
+++ b/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.module.scss
@@ -1,6 +1,6 @@
 .dropdown {
   user-select: none;
-  border: 1px solid var(--border-normal);
+  border: 0.1rem solid var(--border-normal);
   position: relative;
   overflow-x: hidden;
 
@@ -45,7 +45,7 @@
       margin: 1rem;
       width: 97%;
       box-sizing: border-box;
-      border: 1px solid #ccc;
+      border: 0.1rem solid #ccc;
     }
 
     .dropdownSelect{
diff --git a/src/components/playground/PlaygroundComponent/TokenInputField/TokenInputField.module.scss b/src/components/playground/PlaygroundComponent/TokenInputField/TokenInputField.module.scss
index 7614f7d6..1ed84102 100644
--- a/src/components/playground/PlaygroundComponent/TokenInputField/TokenInputField.module.scss
+++ b/src/components/playground/PlaygroundComponent/TokenInputField/TokenInputField.module.scss
@@ -11,7 +11,7 @@
     position: relative;
 
     button {
-      border-radius: 0 4px 4px 0;
+      border-radius: 0 0.4rem 0.4rem 0;
     }
 
     .helper-label {
@@ -31,8 +31,8 @@
       width: 100%;
       height: 4rem;
       padding: 0 1.2rem;
-      border-radius: 4px 0 0 4px;
-      border: solid 1px var(--border-normal);
+      border-radius: 0.4rem 0 0 0.4rem;
+      border: solid 0.1rem var(--border-normal);
       font-size: 1.4rem;
       line-height: var(--text-lh-s);
       color: var(--black-03);
@@ -43,8 +43,8 @@
       padding: 0 1.2rem;
       font-size: var(--text-size-xs);
       line-height: var(--text-lh-s);
-      border: 1px solid var(--border-normal);
-      border-radius: 4px 0 0 4px;
+      border: 0.1rem solid var(--border-normal);
+      border-radius: 0.4rem 0 0 0.4rem;
       color: var(--black-03);
       background-color: var(--white);
     }
diff --git a/src/components/playground/Schema/Schema.module.scss b/src/components/playground/Schema/Schema.module.scss
index 47b38bdd..162308a9 100644
--- a/src/components/playground/Schema/Schema.module.scss
+++ b/src/components/playground/Schema/Schema.module.scss
@@ -19,7 +19,7 @@
   border: none;
   margin: 0.8rem 0.8rem 0 0;
   padding: 0.6rem 0.8rem;
-  border-radius: 4px;
+  border-radius: 0.4rem;
   background-color: rgba(0, 255, 104, 0.16);
 }
 
@@ -35,8 +35,8 @@
 
 .schemaHeader {
   padding: 2.4rem;
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
+  border-top-left-radius: 0.6rem;
+  border-top-right-radius: 0.6rem;
   border: none;
   background: var(--black-04);
 
@@ -75,7 +75,7 @@
     background-color: #0e0e0e;
     border: none;
     padding: 1rem;
-    border-radius: 4px;
+    border-radius: 0.4rem;
     font-size: var(--text-size-xs);
   }
 }
@@ -120,7 +120,7 @@
       padding: 1rem;
       color: var(--white);
       background-color: rgba(219, 219, 219, 0.05) !important;
-      border-radius: 4px;
+      border-radius: 0.4rem;
     }
 
     .schemaBodySignature {
@@ -153,7 +153,7 @@
         color: var(--green-03);
         border: none;
         padding: 0.6rem 0.8rem;
-        border-radius: 4px;
+        border-radius: 0.4rem;
         background-color: rgba(0, 255, 104, 0.16);
       }
 
@@ -166,7 +166,7 @@
         margin: 0.8rem 0.8rem 0 0;
         padding: 0.6rem 0.8rem;
         white-space: nowrap;
-        border-radius: 4px;
+        border-radius: 0.4rem;
       }
 
       .schemaRegexContainer {
@@ -231,7 +231,7 @@
     .defaultValue {
       display: flex;
       align-items: var(--text-align-center);
-      gap: 5px;
+      gap: 0.5rem;
     }
     .defaultValueLabel,
     .schemaDefaultValue {
@@ -239,8 +239,8 @@
       color: #c2c2c2;
     }
     .schemaDefaultValue {
-      border: 2px solid #c2c2c2;
-      border-radius: 4px;
+      border: 0.2rem solid #c2c2c2;
+      border-radius: 0.4rem;
       padding: 0.3rem;
     }
     .enumContainer {
@@ -274,7 +274,7 @@
   }
   > .schemaBodySignature {
     background-color: rgba(219, 219, 219, 0.05) !important;
-    border-radius: 4px;
+    border-radius: 0.4rem;
     margin-bottom: 1rem;
   }
 }
@@ -286,7 +286,7 @@
   position: absolute;
   padding: 0.2rem;
   margin-top: 0.3rem;
-  right: 2px;
+  right: 0.2rem;
   width: 1.8rem;
   text-align: var(--text-align-center);
   cursor: pointer;
diff --git a/src/index.scss b/src/index.scss
index bf9a130a..c949899d 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -15,8 +15,8 @@ a {
       content: "";
       display: inline-block;
       position: absolute;
-      height: 40px;
-      width: 4px;
+      height: 4rem;
+      width: 0.4rem;
       border-radius: 0.4rem 0 0 0.4rem;
       left: 0;
       bottom: 0;
@@ -56,18 +56,18 @@ textarea {
   font-size: var(--text-size-s);
   resize: none;
   width: calc(100% - 1.6rem);
-  min-height: 119px;
+  min-height: 11.9rem;
   margin-top: 1.5rem;
   padding: 1rem;
-  border-radius: 4px;
-  border: solid 1px var(--border-normal);
+  border-radius: 0.4rem;
+  border: solid 0.1rem var(--border-normal);
 }
 
 .container {
   display: flex;
   flex-direction: row;
   width: 100%;
-  min-height: 208px;
+  min-height: 20.8rem;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
@@ -147,10 +147,10 @@ textarea {
 
 .main-page-card {
   width: 100%;
-  max-width: 316px;
+  max-width: 31.6rem;
   padding: 3.2rem 2.4rem;
-  border-radius: 4px;
-  box-shadow: 0 4px 8px 0 rgb(14, 14, 14, 0.1);
+  border-radius: 0.4rem;
+  box-shadow: 0 0.4rem 0.8rem 0 rgb(14, 14, 14, 0.1);
   background-color: var(--white);
   margin: 0 1.2rem;
 
@@ -232,7 +232,7 @@ textarea {
 
   >h2 {
     font-size: var(--text-size-l);
-    margin-bottom: 8px;
+    margin-bottom: 0.8rem;
     color: var(--white);
   }
 
diff --git a/src/themes.scss b/src/themes.scss
index f6158847..aab00330 100644
--- a/src/themes.scss
+++ b/src/themes.scss
@@ -6,7 +6,7 @@
     font-size: 10px;
     margin: 0;
     padding: 0;
-    scroll-margin-top: 100px;
+    scroll-margin-top: 10rem;
 }
 
 :host,
@@ -50,7 +50,7 @@
     --copy-hover: #424242;
     --copy-color: #c2c2c2;
     --hamburger-active-link: var(--gray-06);
-    --hamburger-menu-width: 260px;
+    --hamburger-menu-width: 26rem;
     --white: #ffffff;
     --json-purple: #8860e8;
     --json-magenta: #de5ea0;
@@ -97,8 +97,8 @@
     --text-align-center: center;
 
     // Spinner
-    --spinner-height: 100px;
-    --spinner-width: 100px;
+    --spinner-height: 10rem;
+    --spinner-width: 10rem;
 }
 
 html * {
@@ -135,7 +135,7 @@ h4 {
 
 h5 {
     font-size: var(--text-size-xsm);
-    margin-bottom: 10px;
+    margin-bottom: 1rem;
 }
 
 [data-state*="responsive.mobile"] {

From 1f7ab2779c830f301e3d21792c2deefbbfd3072b Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Wed, 16 Nov 2022 13:09:11 +0100
Subject: [PATCH 08/23] small refactors

---
 src/components/global/InlineCode/InlineCode.module.scss   | 3 ++-
 src/components/global/InlineCode/InlineCode.tsx           | 8 +++-----
 .../homepage/HomepageFooter/HomepageFooter.module.scss    | 2 +-
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/global/InlineCode/InlineCode.module.scss b/src/components/global/InlineCode/InlineCode.module.scss
index 3d48de28..f0318fa4 100644
--- a/src/components/global/InlineCode/InlineCode.module.scss
+++ b/src/components/global/InlineCode/InlineCode.module.scss
@@ -5,4 +5,5 @@
     padding: 0.2rem 0.4rem;
     background-color: var(--gray-01);
     border: 0.1rem solid var(--gray-02);
-  }
\ No newline at end of file
+  }
+  
\ No newline at end of file
diff --git a/src/components/global/InlineCode/InlineCode.tsx b/src/components/global/InlineCode/InlineCode.tsx
index 788193cf..94f598fd 100644
--- a/src/components/global/InlineCode/InlineCode.tsx
+++ b/src/components/global/InlineCode/InlineCode.tsx
@@ -1,7 +1,5 @@
 import styles from './InlineCode.module.scss';
 
-export const InlineCode = ({ children }) => {
-    return (
-        <code className={styles.inlineCode}>{children}</code>
-    )
-}
+export const InlineCode = ({ children }) => (
+    <code className={styles.inlineCode}>{children}</code>
+)
diff --git a/src/components/homepage/HomepageFooter/HomepageFooter.module.scss b/src/components/homepage/HomepageFooter/HomepageFooter.module.scss
index c9409041..7d553af1 100644
--- a/src/components/homepage/HomepageFooter/HomepageFooter.module.scss
+++ b/src/components/homepage/HomepageFooter/HomepageFooter.module.scss
@@ -5,4 +5,4 @@
     font-size: var(--text-size-xs);
     line-height: 2rem;
     border: solid 0.1rem var(--gray-04);
-}
\ No newline at end of file
+}

From 950a015ab9db11069b7f04dfc8c2ae6935e22887 Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Wed, 16 Nov 2022 13:48:35 +0100
Subject: [PATCH 09/23] border rem to px

---
 .../ApiGuideTable/ApiGuideTable.module.scss   |  4 +--
 .../AppManagement/AppManagement.module.scss   | 12 +++----
 .../AppRegistration/AppRegistration.scss      | 16 ++++-----
 .../AppRegistrationForm.module.scss           | 14 ++++----
 .../docs/Docs/Sidebar/Sidebar.module.scss     | 22 ++++++------
 .../endpoint/Endpoint/Endpoint.module.scss    | 16 ++++-----
 src/components/faq/Faq/Faq.module.scss        |  4 +--
 .../global/Accordion/Accordion.module.scss    |  6 ++--
 .../global/Button/Button.module.scss          |  6 ++--
 .../global/Checkbox/Checkbox.module.scss      |  4 +--
 .../global/CodeBlock/CodeBlock.module.scss    |  6 ++--
 .../CodeBlockSingleLanguage.module.scss       |  2 +-
 .../global/CodeBlock/CopyButton.module.scss   |  4 +--
 .../global/Dialog/Dialog.module.scss          |  2 +-
 .../global/Header/Header.module.scss          | 10 +++---
 .../global/InlineCode/InlineCode.module.scss  |  4 +--
 .../LogoutButton/LogoutButton.module.scss     |  4 +--
 .../ResetSendButtonsBlock.module.scss         |  8 ++---
 .../HomepageFooter/HomepageFooter.module.scss |  4 +--
 .../PlaygroundComponent.module.scss           | 34 +++++++++----------
 .../RequestJSONBox/RequestJSONBox.module.scss | 16 ++++-----
 .../SelectRequestInput.module.scss            |  4 +--
 .../TokenInputField.module.scss               |  8 ++---
 .../playground/Schema/Schema.module.scss      | 20 +++++------
 src/index.scss                                |  8 ++---
 25 files changed, 119 insertions(+), 119 deletions(-)

diff --git a/src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.module.scss b/src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.module.scss
index f8ca18f2..bb54b077 100644
--- a/src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.module.scss
+++ b/src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.module.scss
@@ -1,8 +1,8 @@
 .apiGuideTable {
   width: 75%;
-  border-radius: 0.4rem;
+  border-radius: 4px;
   overflow: hidden;
-  border: 0.1rem solid var(--gray-02);
+  border: 1px solid var(--gray-02);
   th {
     background-color: var(--gray-02);
     padding: 2.4rem 3.2rem;
diff --git a/src/components/app-registration/AppManagement/AppManagement.module.scss b/src/components/app-registration/AppManagement/AppManagement.module.scss
index 4998bf1f..5db58b2f 100644
--- a/src/components/app-registration/AppManagement/AppManagement.module.scss
+++ b/src/components/app-registration/AppManagement/AppManagement.module.scss
@@ -97,10 +97,10 @@
         width: 13rem;
         height: 1.5rem;
         background-color: var(--border-normal);
-        border-radius: 0.4rem;
+        border-radius: 4px;
         color: var(--app-registration-tab-active-font);
         text-align: var(--text-align-center);
-        border-radius: 0.6rem;
+        border-radius: 4px;
         padding: 0.5rem 0;
         position: absolute;
         z-index: 1;
@@ -117,7 +117,7 @@
             top: 100%;
             left: 50%;
             margin-left: -0.5rem;
-            border-width: 0.5rem;
+            border-width: 5px;
             border-style: solid;
             border-color: var(--border-normal) transparent transparent transparent;
         }
@@ -134,13 +134,13 @@
 }
 
 .scope {
-    border: 0.16rem solid #d6dadb;
-    border-radius: 0.4rem;
+    border: 1.6px solid #d6dadb;
+    border-radius: 4px;
     padding: 0.32rem 0.32rem;
     font-size: var(--text-size-xxs);
 }
 
 .adminScope {
-    border: 0.1rem solid var(--teal-01);
+    border: 1px solid var(--teal-01);
     color: var(--teal-01);
 }
\ No newline at end of file
diff --git a/src/components/app-registration/AppRegistration/AppRegistration.scss b/src/components/app-registration/AppRegistration/AppRegistration.scss
index f0b60017..c4d06e20 100644
--- a/src/components/app-registration/AppRegistration/AppRegistration.scss
+++ b/src/components/app-registration/AppRegistration/AppRegistration.scss
@@ -21,7 +21,7 @@
   background-clip: content-box;
   background-color: transparent;
   border: none;
-  border-radius: 0.4rem;
+  border-radius: 4px;
   font-size: var(--text-size-xs);
   font-weight: var(--text-weight-bold);
   width: 3.2rem;
@@ -82,7 +82,7 @@
   width: 32rem;
   height: auto;
   background-color: var(--white);
-  border-radius: 1.6rem;
+  border-radius: 16px;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
   justify-content: space-between;
 }
@@ -153,7 +153,7 @@
   font-weight: var(--text-weight-bold);
   height: 4rem;
   border: none;
-  border-radius: 0.4rem;
+  border-radius: 4px;
   padding: 1rem 1.6rem 1rem 1.6rem;
 }
 
@@ -168,7 +168,7 @@
   font-weight: var(--text-weight-bold);
   border: 0.1rem solid #999999;
   height: 4rem;
-  border-radius: 0.4rem;
+  border-radius: 4px;
   padding: 1rem 1.6rem 1rem 1.6rem;
   margin-right: 2.4rem;
 }
@@ -236,7 +236,7 @@ fieldset {
 
 .main-register-btn {
   padding: 1rem 1.6rem;
-  border-radius: 0.4rem;
+  border-radius: 4px;
   background-color: var(--red-01);
   text-decoration: none;
   font-weight: 700;
@@ -290,7 +290,7 @@ fieldset {
   border: none;
   background-color: transparent;
   color: var(--gray-05);
-  border-bottom: 0.1rem solid var(--gray-05);
+  border-bottom: 1px solid var(--gray-05);
   padding: 1rem 2rem;
 }
 
@@ -298,7 +298,7 @@ fieldset {
 [data-state~="registration.logged_in.register_tab"] .register-button {
   font-weight: bold;
   color: var(--text-01);
-  border-bottom: 0.3rem solid var(--red-01);
+  border-bottom: 3px solid var(--red-01);
 }
 
 [data-state~="registration.logged_in.update_mode"] .register-button {
@@ -312,7 +312,7 @@ fieldset {
   content: "Update your application";
   font-weight: var(--text-weight-bold);
   color: var(--text-01);
-  border-bottom: 0.3rem solid var(--red-01);
+  border-bottom: 3px solid var(--red-01);
   position: absolute;
   padding: 1rem 0;
   width: 100%;
diff --git a/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss b/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss
index b4d2d0e1..712649b4 100644
--- a/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss
+++ b/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss
@@ -4,8 +4,8 @@ fieldset .customTextInput:last-child {
 
 .customTextInput {
     align-items: center;
-    border: 0.1rem solid var(--border-normal);
-    border-radius: 0.4rem;
+    border: 1px solid var(--border-normal);
+    border-radius: 4px;
     display: flex;
     line-height: var(--text-lh-s);
     position: relative;
@@ -15,7 +15,7 @@ fieldset .customTextInput:last-child {
         border-color: var(--brand-secondary);
     }
     &:hover {
-        border: 0.1rem solid var(--app-registration-tab-secondary);
+        border: 1px solid var(--app-registration-tab-secondary);
     }
     label {
         position: absolute;
@@ -157,8 +157,8 @@ fieldset .customTextInput:last-child {
 }
 
 .scopeItem {
-    border: 0.16rem solid #d6dadb;
-    border-radius: 0.64rem;
+    border: 1.6px solid #d6dadb;
+    border-radius: 6.4px;
     padding: 1.28rem 0.64rem;
 }
 
@@ -214,10 +214,10 @@ input[type='checkbox'] {
         background-image: url(/img/check.svg);
         background-repeat: no-repeat;
         display: inline-block;
-        border: 0.2rem solid var(--app-registration-tab-secondary);
+        border: 2px solid var(--app-registration-tab-secondary);
         min-width: 1.1rem;
         height: 1.1rem;
-        border-radius: 0.2rem;
+        border-radius: 2px;
         transition: background-color 0.25s, border-color 0.25s;
         top: 0.3rem;
         z-index: 1;
diff --git a/src/components/docs/Docs/Sidebar/Sidebar.module.scss b/src/components/docs/Docs/Sidebar/Sidebar.module.scss
index 5cc383d1..22ace32f 100644
--- a/src/components/docs/Docs/Sidebar/Sidebar.module.scss
+++ b/src/components/docs/Docs/Sidebar/Sidebar.module.scss
@@ -6,7 +6,7 @@
     height: 100%;
     z-index: 10;
     background: white;
-    border-right: 0.2rem solid var(--gray-01);
+    border-right: 2px solid var(--gray-01);
     margin-right: 4.8rem;
     top: 10.5rem;
     .sidebarContainer {
@@ -24,8 +24,8 @@
         height: 4.4rem;
         display: flex;
         align-items: var(--text-align-center);
-        border-top-left-radius: 0.4rem;
-        border-bottom-left-radius: 0.4rem;
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
         &:empty {
             display: none;
         }
@@ -38,8 +38,8 @@
             background-color: red;
             visibility: hidden;
             transition: all 0.2s ease-in-out;
-            border-top-left-radius: 0.4rem;
-            border-bottom-left-radius: 0.4rem;
+            border-top-left-radius: 4px;
+            border-bottom-left-radius: 4px;
         }
 
         &:hover {
@@ -72,7 +72,7 @@
     line-height: var(--text-lh-xxl);
     font-weight: 700;
     color: var(--text-01);
-    border-top: 0.2rem solid var(--gray-01);
+    border-top: 2px solid var(--gray-01);
 }
 
 .menuItem {
@@ -103,7 +103,7 @@
     line-height: var(--text-lh-xs);
     color: var(--text-01);
     font-weight: bold;
-    border-bottom: 0.2rem solid var(--gray-01);
+    border-bottom: 2px solid var(--gray-01);
 }
 
 .dropdown {
@@ -205,13 +205,13 @@
                 color: var(--text-01);
                 display: flex;
                 align-items: var(--text-align-center);
-                border-radius: 0 0.4rem 0.4rem 0;
+                border-radius: 0 4px 4px 0;
                 position: relative;
                 font-size: var(--text-size-xs);
                 &:before {
                     width: 0.4rem;
                     margin-bottom: 0.2rem;
-                    border-radius: 0.4rem 0 0 0.4rem;
+                    border-radius: 4px 0 0 4px;
                 }
             }
             .selected {
@@ -234,7 +234,7 @@
                     visibility: visible;
                     height: 100%;
                     width: 0.4rem;
-                    border-radius: 0.4rem 0 0 0.4rem;
+                    border-radius: 4px 0 0 4px;
                 }
             }
             &[href~="/docs/"] {
@@ -248,7 +248,7 @@
             line-height: var(--text-lh-xxl);
             font-weight: 700;
             color: var(--text-01);
-            border-top: 0.2rem solid var(--gray-01);
+            border-top: 2px solid var(--gray-01);
         }
     }
 }
diff --git a/src/components/endpoint/Endpoint/Endpoint.module.scss b/src/components/endpoint/Endpoint/Endpoint.module.scss
index 302b1f2b..d1ac8de5 100644
--- a/src/components/endpoint/Endpoint/Endpoint.module.scss
+++ b/src/components/endpoint/Endpoint/Endpoint.module.scss
@@ -32,7 +32,7 @@
             width: 100%;
         }
         .customTextInput {
-            border-radius: 0.4rem;
+            border-radius: 4px;
             align-items: var(--text-align-center);
             display: flex;
             flex-direction: column;
@@ -91,7 +91,7 @@
                 }
                 .textInput {
                     background: none;
-                    border: 0.1rem solid #ccc;
+                    border: 1px solid #ccc;
                     color: var(--black-01);
                     padding: 1.6rem 1.6rem 1.6rem 1.28rem;
                     width: 100%;
@@ -116,11 +116,11 @@
                 font-size: var(--text-size-sm);
             }
             .urlId {
-                border-radius: 0.4rem;
+                border-radius: 4px;
                 padding: 0.2rem 0.4rem;
                 color: var(--wine-01);
                 font-size: 90%;
-                border: 0.1rem solid var(--gray-01);
+                border: 1px solid var(--gray-01);
                 font-weight: 400;
             }
         }
@@ -129,25 +129,25 @@
             margin: 0.5rem;
 
             .submitButton {
-                border-radius: 0.4rem;
+                border-radius: 4px;
                 padding: 1rem 1.6rem;
                 font-size: var(--text-size-xs);
                 transition: all 0.25s ease 0s;
                 font-weight: bold;
                 height: fit-content;
-                border: 0.2rem solid var(--red-01);
+                border: 2px solid var(--red-01);
                 color: var(--white);
                 background: var(--red-01);
             }
 
             .resetButton {
-                border-radius: 0.4rem;
+                border-radius: 4px;
                 padding: 1rem 1.6rem;
                 font-size: var(--text-size-xs);
                 transition: all 0.25s ease 0s;
                 font-weight: var(--text-weight-bold);
                 height: fit-content;
-                border: 0.2rem solid var(--gray-05);
+                border: 2px solid var(--gray-05);
                 color: var(--black-01);
                 background: transparent;
             }
diff --git a/src/components/faq/Faq/Faq.module.scss b/src/components/faq/Faq/Faq.module.scss
index 6ea41203..87f5fe19 100644
--- a/src/components/faq/Faq/Faq.module.scss
+++ b/src/components/faq/Faq/Faq.module.scss
@@ -1,7 +1,7 @@
 .pageContent {
   width: 70%;
   padding-left: 4.2rem;
-  border-left: 0.2rem solid var(--gray-01);
+  border-left: 2px solid var(--gray-01);
 
   @media (max-width: 99.2rem) {
     width: 100% !important;
@@ -21,7 +21,7 @@
   white-space: pre-wrap;
   word-break: break-word;
   color: var(--white);
-  border-radius: 0.4rem;
+  border-radius: 4px;
   padding: 2.4rem;
   margin-bottom: 1.6rem;
   background: #1d1f20;
diff --git a/src/components/global/Accordion/Accordion.module.scss b/src/components/global/Accordion/Accordion.module.scss
index 9f2ec59b..19f19257 100644
--- a/src/components/global/Accordion/Accordion.module.scss
+++ b/src/components/global/Accordion/Accordion.module.scss
@@ -13,7 +13,7 @@
       max-height: fit-content;
       padding: 0 4rem;
       border: none;
-      border-radius: 0.6rem;
+      border-radius: 6px;
       box-shadow: -0.2rem 0.6rem 1.5rem 0 rgba(195, 195, 195, 0.31);
       background-color: var(--white);
       transition: 0.2s;
@@ -62,9 +62,9 @@
         color: var(--red-01);
         font-weight: 400;
         margin: 0 0.2rem 0 0;
-        border-radius: 0.4rem;
+        border-radius: 4px;
         padding: 0.2rem 0.4rem;
-        border: 0.1rem solid #eaeced;
+        border: 1px solid #eaeced;
         font-family: ibm plex sans, sans-serif;
       }
 
diff --git a/src/components/global/Button/Button.module.scss b/src/components/global/Button/Button.module.scss
index c8f072bd..11c16f06 100644
--- a/src/components/global/Button/Button.module.scss
+++ b/src/components/global/Button/Button.module.scss
@@ -5,7 +5,7 @@
   height: fit-content;
   padding: 1rem 1.6rem;
   border: none;
-  border-radius: 0.4rem;
+  border-radius: 4px;
   font-size:var(--text-size-xs);
   font-weight: 700;
   line-height: var(--text-lh-s);
@@ -18,8 +18,8 @@
   &.secondary {
     --btn-background: transparent;
     --btn-text-color: var(--black-01);
-    border: solid 0.2rem var(--gray-05);
-    border-radius: 0.4rem;
+    border: solid 2px var(--gray-05);
+    border-radius: 4px;
     width: fit-content;
     padding: 0.8rem 1.6rem;
     &:hover {
diff --git a/src/components/global/Checkbox/Checkbox.module.scss b/src/components/global/Checkbox/Checkbox.module.scss
index ab24f1ea..ce476314 100644
--- a/src/components/global/Checkbox/Checkbox.module.scss
+++ b/src/components/global/Checkbox/Checkbox.module.scss
@@ -9,13 +9,13 @@ input[type="checkbox"] {
   background-image: url(/img/check.svg);
   background-repeat: no-repeat;
   display: inline-block;
-  border: 0.2rem solid var(--app-registration-tab-secondary);
+  border: 2px solid var(--app-registration-tab-secondary);
   min-width: 1.1rem;
   height: 1.1rem;
   position: relative;
   top: 0.1rem;
   margin-right: 0.8rem;
-  border-radius: 0.2rem;
+  border-radius: 2px;
   transition: background-color 0.25s, border-color 0.25s;
 }
 
diff --git a/src/components/global/CodeBlock/CodeBlock.module.scss b/src/components/global/CodeBlock/CodeBlock.module.scss
index b6d906c1..f8bacc78 100644
--- a/src/components/global/CodeBlock/CodeBlock.module.scss
+++ b/src/components/global/CodeBlock/CodeBlock.module.scss
@@ -4,7 +4,7 @@
   white-space: pre-wrap;
   word-break: break-word;
   color: var(--white);
-  border-radius: 0 0 0.4rem 0.4rem;
+  border-radius: 0 0 4px 4px;
   padding: 2.4rem;
   margin-bottom: 1.6rem;
   background: var(--json-midnight);
@@ -42,14 +42,14 @@
 }
 
 .card {
-  border-radius: 0.6rem;
+  border-radius: 6px;
   background-color: var(--black-02);
 
   .cardHeader {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
-    border-radius: 0.6rem;
+    border-radius: 6px;
     background-color: var(--json-midnight);
     color: var(--gray-07);
     line-height: 1.5;
diff --git a/src/components/global/CodeBlock/CodeBlockSingleLanguage.module.scss b/src/components/global/CodeBlock/CodeBlockSingleLanguage.module.scss
index a98299c0..e81787f0 100644
--- a/src/components/global/CodeBlock/CodeBlockSingleLanguage.module.scss
+++ b/src/components/global/CodeBlock/CodeBlockSingleLanguage.module.scss
@@ -1,4 +1,4 @@
 .codeBlockSingleLanguage {
   background-color: var(--black-02);
-  border-radius: 0.4rem;
+  border-radius: 4px;
 }
diff --git a/src/components/global/CodeBlock/CopyButton.module.scss b/src/components/global/CodeBlock/CopyButton.module.scss
index c2c59c8a..875a403e 100644
--- a/src/components/global/CodeBlock/CopyButton.module.scss
+++ b/src/components/global/CodeBlock/CopyButton.module.scss
@@ -1,5 +1,5 @@
 .copyButtonHeader {
-  border-radius: 0.4rem 0.4rem 0 0;
+  border-radius: 4px 4px 0 0;
   position: relative;
   display: flex;
   justify-content: end;
@@ -27,7 +27,7 @@
 
     &:hover {
       background-color: var(--copy-hover);
-      border-top-right-radius: 0.6rem;
+      border-top-right-radius: 6px;
     }
   }
 }
diff --git a/src/components/global/Dialog/Dialog.module.scss b/src/components/global/Dialog/Dialog.module.scss
index 3a3e6e0c..b449d16e 100644
--- a/src/components/global/Dialog/Dialog.module.scss
+++ b/src/components/global/Dialog/Dialog.module.scss
@@ -19,7 +19,7 @@
   width: 32rem;
   height: auto;
   background-color: #fff;
-  border-radius: 1.6rem;
+  border-radius: 16px;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
   justify-content: space-between;
 }
diff --git a/src/components/global/Header/Header.module.scss b/src/components/global/Header/Header.module.scss
index e4f3574d..1280ad6b 100644
--- a/src/components/global/Header/Header.module.scss
+++ b/src/components/global/Header/Header.module.scss
@@ -124,7 +124,7 @@
           color: var(--text-01);
           display: flex;
           align-items: var(--text-align-center);
-          border-radius: 0 0.4rem 0.4rem 0;
+          border-radius: 0 4px 4px 0;
           position: relative;
           font-size: var(--text-size-xs);
         }
@@ -139,7 +139,7 @@
         display: flex;
         align-items: center;
         padding-left: 2.2rem;
-        border-radius: 0 0.4rem 0.4rem 0;
+        border-radius: 0 4px 4px 0;
         background-color: transparent;
         border: none;
         &::after {
@@ -225,7 +225,7 @@
       color: var(--text-01);
       display: flex;
       align-items: center;
-      border-radius: 0 0.4rem 0.4rem 0;
+      border-radius: 0 4px 4px 0;
       position: relative;
       font-size: var(--text-size-xs);
     }
@@ -238,7 +238,7 @@
         height: 100%;
         bottom: 0;
         width: 0.4rem;
-        border-radius: 0.4rem 0 0 0.4rem;
+        border-radius: 4px 0 0 4px;
       }
       &::after {
         content: "";
@@ -249,7 +249,7 @@
         top: 0;
         left: 0;
         z-index: -1;
-        border-radius: 0 0.4rem 0.4rem 0;
+        border-radius: 0 4px 4px 0;
       }
     }
   }
diff --git a/src/components/global/InlineCode/InlineCode.module.scss b/src/components/global/InlineCode/InlineCode.module.scss
index f0318fa4..18642ed2 100644
--- a/src/components/global/InlineCode/InlineCode.module.scss
+++ b/src/components/global/InlineCode/InlineCode.module.scss
@@ -1,9 +1,9 @@
 .inlineCode {
     font-weight: 400;
     color: var(--red-01);
-    border-radius: 0.4rem;
+    border-radius: 4px;
     padding: 0.2rem 0.4rem;
     background-color: var(--gray-01);
-    border: 0.1rem solid var(--gray-02);
+    border: 1px solid var(--gray-02);
   }
   
\ No newline at end of file
diff --git a/src/components/global/LogoutButton/LogoutButton.module.scss b/src/components/global/LogoutButton/LogoutButton.module.scss
index 936537ff..cec25115 100644
--- a/src/components/global/LogoutButton/LogoutButton.module.scss
+++ b/src/components/global/LogoutButton/LogoutButton.module.scss
@@ -4,8 +4,8 @@
   z-index: 100;
   color: var(--white);
   background-color: transparent;
-  border: solid 0.2rem var(--gray-05);
-  border-radius: 0.4rem;
+  border: solid 2px var(--gray-05);
+  border-radius: 4px;
 }
 
 [data-state*="mobile"] .signOut {
diff --git a/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.module.scss b/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.module.scss
index 9f703536..9d9c1c62 100644
--- a/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.module.scss
+++ b/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.module.scss
@@ -9,7 +9,7 @@
     cursor: pointer;
     width: fit-content;
     height: fit-content;
-    border-radius: 0.4rem;
+    border-radius: 4px;
     margin-right: 0.8rem;
     font-size: var(--text-size-xs);
     font-weight: 700;
@@ -19,12 +19,12 @@
     background-color: var(--white);
     color: var(--black-03);
     padding: 1rem 1.6rem;
-    border: var(--gray-04) 0.1rem solid;
+    border: var(--gray-04) 1px solid;
   }
 
   .grayBtnSubmit button {
     padding: 0.8rem 1.6rem;
-    border: solid 0.2rem var(--gray-05);
+    border: solid 2px var(--gray-05);
     background-color: var(--white);
     line-height: var(--text-lh-s);
     letter-spacing: normal;
@@ -38,7 +38,7 @@
     height: fit-content;
     padding: 1rem 1.6rem;
     border: none;
-    border-radius: 0.4rem;
+    border-radius: 4px;
     background-color: var(--red-01);
     font-size: var(--text-size-xs);
     font-weight: 700;
diff --git a/src/components/homepage/HomepageFooter/HomepageFooter.module.scss b/src/components/homepage/HomepageFooter/HomepageFooter.module.scss
index 7d553af1..a74fc4d4 100644
--- a/src/components/homepage/HomepageFooter/HomepageFooter.module.scss
+++ b/src/components/homepage/HomepageFooter/HomepageFooter.module.scss
@@ -1,8 +1,8 @@
 .communityBtn {
     padding: 0.6rem 1.6rem;
-    border-radius: 0.4rem;
+    border-radius: 4px;
     font-weight: 700;
     font-size: var(--text-size-xs);
     line-height: 2rem;
-    border: solid 0.1rem var(--gray-04);
+    border: solid 1px var(--gray-04);
 }
diff --git a/src/components/playground/PlaygroundComponent/PlaygroundComponent.module.scss b/src/components/playground/PlaygroundComponent/PlaygroundComponent.module.scss
index 6826d963..0a54d5f0 100644
--- a/src/components/playground/PlaygroundComponent/PlaygroundComponent.module.scss
+++ b/src/components/playground/PlaygroundComponent/PlaygroundComponent.module.scss
@@ -2,7 +2,7 @@
   margin-top: 12.5rem;
   min-height: 95vh;
   width: 100%;
-  border-left: 0.2rem solid var(--app-sidebar-border-color);
+  border-left: 2px solid var(--app-sidebar-border-color);
 
   .headerTitle h1 {
     text-align: var(--text-align-center);
@@ -40,7 +40,7 @@
   .apiToken {
     display: flex;
     flex-wrap: nowrap;
-    border-radius: 0.4rem;
+    border-radius: 4px;
     background-color: var(--gray-13);
     padding: 2.4rem;
     margin-bottom: 4.8rem;
@@ -65,9 +65,9 @@
   .apiRequest {
     display: flex;
     flex-wrap: nowrap;
-    border-radius: 0.4rem;
+    border-radius: 4px;
     margin-bottom: 2.4rem;
-    border: 0.05rem solid var(--gray-10);
+    border: 0.5px solid var(--gray-10);
     width: 100%;
   }
 
@@ -81,15 +81,15 @@
     align-items: var(--text-align-center);
     justify-content: var(--text-align-center);
     padding: 1rem 0;
-    border-left: 0.1rem solid var(--app-sidebar-border-color);
+    border-left: 1px solid var(--app-sidebar-border-color);
 
     &-button button {
       cursor: pointer;
       font-size: var(--text-size-xs);
       font-weight: 700;
       padding: 1rem 1.6rem;
-      border-radius: 0.4rem;
-      border: solid 0.2rem var(--gray-04);
+      border-radius: 4px;
+      border: solid 2px var(--gray-04);
       color: var(--black-03);
       background-color: var(--white);
       
@@ -129,7 +129,7 @@
   height: 4.2rem;
   padding: 1rem 1.6rem;
   border: none;
-  border-radius: 0 0.4rem 0.4rem 0;
+  border-radius: 0 4px 4px 0;
   background-color: var(--red-01);
   font-size: var(--text-size-xs);
   line-height: var(--text-lh-s);
@@ -141,7 +141,7 @@
 }
 
 .playgroundBox {
-  border-radius: 0.6rem;
+  border-radius: 6px;
   border: none;
   padding: 2.4rem 2.4rem 8.2rem 2.4rem;
   margin-bottom: 4rem;
@@ -167,7 +167,7 @@
     pre.err {
       padding: 1.6rem;
       border: none;
-      border-radius: 0.4rem;
+      border-radius: 4px;
       background-color: var(--black-01);
       color: var(--copy-color);
       line-height: var(--text-lh-xxl);
@@ -196,7 +196,7 @@
 
     .btnSubmit {
       background-color: var(--black-04);
-      border: var(--gray-04) 0.2rem solid;
+      border: var(--gray-04) 2px solid;
       color: var(--white);
       font-weight: bold;
       font-size: var(--text-size-xs);
@@ -225,7 +225,7 @@
     min-height: 20rem;
     padding: 1rem 1.2rem;
     border: none;
-    border-radius: 0.4rem;
+    border-radius: 4px;
     background-color: var(--black-01);
     color: var(--copy-color);
     resize: none;
@@ -245,14 +245,14 @@
 .apiRequest {
   display: flex;
   flex-wrap: nowrap;
-  border-radius: 0.4rem;
+  border-radius: 4px;
   margin-bottom: 2.4rem;
-  border: 0.05rem var(--gray-10);
+  border: 0.5px var(--gray-10);
 }
 .select2 {
   width: 100% !important;
   color: var(--gray-05);
-  border: solid 0.1rem var(--border-normal) !important;
+  border: solid 1px var(--border-normal) !important;
   display: block;
   padding-left: 0.8rem;
   padding-right: 2rem;
@@ -266,8 +266,8 @@
 }
 .option {
   border: none;
-  border-radius: 0.35rem !important;
-  border: solid 0.1rem var(--border-normal) !important;
+  border-radius: 3.5px !important;
+  border: solid 1px var(--border-normal) !important;
   color: var(--gray-05) !important;
 }
 
diff --git a/src/components/playground/PlaygroundComponent/RequestJSONBox/RequestJSONBox.module.scss b/src/components/playground/PlaygroundComponent/RequestJSONBox/RequestJSONBox.module.scss
index 5cebc5d4..54f4a2bd 100644
--- a/src/components/playground/PlaygroundComponent/RequestJSONBox/RequestJSONBox.module.scss
+++ b/src/components/playground/PlaygroundComponent/RequestJSONBox/RequestJSONBox.module.scss
@@ -1,5 +1,5 @@
 .playgroundBox {
-  border-radius: 0.6rem;
+  border-radius: 6px;
   border: none;
   margin-left: 0.5rem;
   position: relative;
@@ -36,7 +36,7 @@
 }
 
 .textareaRequest {
-  border-radius: 0.4rem;
+  border-radius: 4px;
   resize: none;
 }
 
@@ -45,13 +45,13 @@
   padding: 1rem 1.2rem;
   border: none;
   color: var(--blue-04);
-  border: 0.1rem solid var(--border-normal);
+  border: 1px solid var(--border-normal);
 }
 
 .registrationRequest {
   min-height: 11.9rem;
   padding: 1rem;
-  border: solid 0.1rem var(--border-normal);
+  border: solid 1px var(--border-normal);
   font-size: var(--text-size-s);
 }
 
@@ -66,7 +66,7 @@
     cursor: pointer;
     width: fit-content;
     height: fit-content;
-    border-radius: 0.4rem;
+    border-radius: 4px;
     margin-right: 0.8rem;
     font-size: 1.4rem;
     font-weight: 700;
@@ -76,12 +76,12 @@
     background-color: var(--black-04);
     color: var(--white);
     padding: 1rem 1.6rem;
-    border: var(--gray-04) 0.2rem solid;
+    border: var(--gray-04) 2px solid;
   }
 
   .grayBtnSubmit button {
     padding: 1rem 1.6rem;
-    border: solid 0.2rem var(--gray-09);
+    border: solid 2px var(--gray-09);
     background-color: var(--white);
     line-height: var(--text-lh-s);
     letter-spacing: normal;
@@ -95,7 +95,7 @@
     height: fit-content;
     padding: 1rem 1.6rem;
     border: none;
-    border-radius: 0.4rem;
+    border-radius: 4px;
     background-color: var(--red-01);
     font-size: var(--text-size-xs);
     font-weight: 700;
diff --git a/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.module.scss b/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.module.scss
index 7e949a0e..ac6438d0 100644
--- a/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.module.scss
+++ b/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.module.scss
@@ -1,6 +1,6 @@
 .dropdown {
   user-select: none;
-  border: 0.1rem solid var(--border-normal);
+  border: 1px solid var(--border-normal);
   position: relative;
   overflow-x: hidden;
 
@@ -45,7 +45,7 @@
       margin: 1rem;
       width: 97%;
       box-sizing: border-box;
-      border: 0.1rem solid #ccc;
+      border: 1px solid #ccc;
     }
 
     .dropdownSelect{
diff --git a/src/components/playground/PlaygroundComponent/TokenInputField/TokenInputField.module.scss b/src/components/playground/PlaygroundComponent/TokenInputField/TokenInputField.module.scss
index 1ed84102..d9db21b8 100644
--- a/src/components/playground/PlaygroundComponent/TokenInputField/TokenInputField.module.scss
+++ b/src/components/playground/PlaygroundComponent/TokenInputField/TokenInputField.module.scss
@@ -11,7 +11,7 @@
     position: relative;
 
     button {
-      border-radius: 0 0.4rem 0.4rem 0;
+      border-radius: 0 4px 4px 0;
     }
 
     .helper-label {
@@ -32,7 +32,7 @@
       height: 4rem;
       padding: 0 1.2rem;
       border-radius: 0.4rem 0 0 0.4rem;
-      border: solid 0.1rem var(--border-normal);
+      border: solid 1px var(--border-normal);
       font-size: 1.4rem;
       line-height: var(--text-lh-s);
       color: var(--black-03);
@@ -43,8 +43,8 @@
       padding: 0 1.2rem;
       font-size: var(--text-size-xs);
       line-height: var(--text-lh-s);
-      border: 0.1rem solid var(--border-normal);
-      border-radius: 0.4rem 0 0 0.4rem;
+      border: 1px solid var(--border-normal);
+      border-radius: 4px 0 0 4px;
       color: var(--black-03);
       background-color: var(--white);
     }
diff --git a/src/components/playground/Schema/Schema.module.scss b/src/components/playground/Schema/Schema.module.scss
index 162308a9..d1e8ed60 100644
--- a/src/components/playground/Schema/Schema.module.scss
+++ b/src/components/playground/Schema/Schema.module.scss
@@ -19,7 +19,7 @@
   border: none;
   margin: 0.8rem 0.8rem 0 0;
   padding: 0.6rem 0.8rem;
-  border-radius: 0.4rem;
+  border-radius: 4px;
   background-color: rgba(0, 255, 104, 0.16);
 }
 
@@ -35,8 +35,8 @@
 
 .schemaHeader {
   padding: 2.4rem;
-  border-top-left-radius: 0.6rem;
-  border-top-right-radius: 0.6rem;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
   border: none;
   background: var(--black-04);
 
@@ -75,7 +75,7 @@
     background-color: #0e0e0e;
     border: none;
     padding: 1rem;
-    border-radius: 0.4rem;
+    border-radius: 4px;
     font-size: var(--text-size-xs);
   }
 }
@@ -120,7 +120,7 @@
       padding: 1rem;
       color: var(--white);
       background-color: rgba(219, 219, 219, 0.05) !important;
-      border-radius: 0.4rem;
+      border-radius: 4px;
     }
 
     .schemaBodySignature {
@@ -153,7 +153,7 @@
         color: var(--green-03);
         border: none;
         padding: 0.6rem 0.8rem;
-        border-radius: 0.4rem;
+        border-radius: 4px;
         background-color: rgba(0, 255, 104, 0.16);
       }
 
@@ -166,7 +166,7 @@
         margin: 0.8rem 0.8rem 0 0;
         padding: 0.6rem 0.8rem;
         white-space: nowrap;
-        border-radius: 0.4rem;
+        border-radius: 4px;
       }
 
       .schemaRegexContainer {
@@ -239,8 +239,8 @@
       color: #c2c2c2;
     }
     .schemaDefaultValue {
-      border: 0.2rem solid #c2c2c2;
-      border-radius: 0.4rem;
+      border: 2px solid #c2c2c2;
+      border-radius: 4px;
       padding: 0.3rem;
     }
     .enumContainer {
@@ -274,7 +274,7 @@
   }
   > .schemaBodySignature {
     background-color: rgba(219, 219, 219, 0.05) !important;
-    border-radius: 0.4rem;
+    border-radius: 4px;
     margin-bottom: 1rem;
   }
 }
diff --git a/src/index.scss b/src/index.scss
index c949899d..57fc628e 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -17,7 +17,7 @@ a {
       position: absolute;
       height: 4rem;
       width: 0.4rem;
-      border-radius: 0.4rem 0 0 0.4rem;
+      border-radius: 4px 0 0 4px;
       left: 0;
       bottom: 0;
       background-color: var(--red-01);
@@ -59,8 +59,8 @@ textarea {
   min-height: 11.9rem;
   margin-top: 1.5rem;
   padding: 1rem;
-  border-radius: 0.4rem;
-  border: solid 0.1rem var(--border-normal);
+  border-radius: 4px;
+  border: solid 1px var(--border-normal);
 }
 
 .container {
@@ -149,7 +149,7 @@ textarea {
   width: 100%;
   max-width: 31.6rem;
   padding: 3.2rem 2.4rem;
-  border-radius: 0.4rem;
+  border-radius: 4px;
   box-shadow: 0 0.4rem 0.8rem 0 rgb(14, 14, 14, 0.1);
   background-color: var(--white);
   margin: 0 1.2rem;

From 63a306dc6bc853dccaf197f49490bec47affb9f5 Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Wed, 16 Nov 2022 14:06:28 +0100
Subject: [PATCH 10/23] color to variables

---
 .../AppManagement/AppManagement.module.scss   |  2 +-
 .../AppRegistration/AppRegistration.scss      |  2 +-
 .../AppRegistrationForm.module.scss           |  2 +-
 .../endpoint/Endpoint/Endpoint.module.scss    |  2 +-
 src/components/faq/Faq/Faq.module.scss        |  2 +-
 .../global/Accordion/Accordion.module.scss    |  2 +-
 .../global/DerivLogo/DerivLogo.module.scss    |  2 +-
 .../global/Dialog/Dialog.module.scss          |  2 +-
 .../global/Header/Header.module.scss          |  2 +-
 .../SkeletonText/SkeletonText.module.scss     |  4 +-
 .../PlaygroundComponent.module.scss           |  6 +-
 .../SelectRequestInput.module.scss            |  6 +-
 .../playground/Schema/Schema.module.scss      | 60 +++++++++++++------
 src/themes.scss                               | 13 ++--
 14 files changed, 68 insertions(+), 39 deletions(-)

diff --git a/src/components/app-registration/AppManagement/AppManagement.module.scss b/src/components/app-registration/AppManagement/AppManagement.module.scss
index 5db58b2f..771ab10b 100644
--- a/src/components/app-registration/AppManagement/AppManagement.module.scss
+++ b/src/components/app-registration/AppManagement/AppManagement.module.scss
@@ -134,7 +134,7 @@
 }
 
 .scope {
-    border: 1.6px solid #d6dadb;
+    border: 1.6px solid var(--border-normal);
     border-radius: 4px;
     padding: 0.32rem 0.32rem;
     font-size: var(--text-size-xxs);
diff --git a/src/components/app-registration/AppRegistration/AppRegistration.scss b/src/components/app-registration/AppRegistration/AppRegistration.scss
index c4d06e20..4d0255a3 100644
--- a/src/components/app-registration/AppRegistration/AppRegistration.scss
+++ b/src/components/app-registration/AppRegistration/AppRegistration.scss
@@ -166,7 +166,7 @@
   background-color: var(--white);
   color: black;
   font-weight: var(--text-weight-bold);
-  border: 0.1rem solid #999999;
+  border: 0.1rem solid var(--gray-05);
   height: 4rem;
   border-radius: 4px;
   padding: 1rem 1.6rem 1rem 1.6rem;
diff --git a/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss b/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss
index 712649b4..e396b0c9 100644
--- a/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss
+++ b/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss
@@ -157,7 +157,7 @@ fieldset .customTextInput:last-child {
 }
 
 .scopeItem {
-    border: 1.6px solid #d6dadb;
+    border: 1.6px solid var(--border-normal);
     border-radius: 6.4px;
     padding: 1.28rem 0.64rem;
 }
diff --git a/src/components/endpoint/Endpoint/Endpoint.module.scss b/src/components/endpoint/Endpoint/Endpoint.module.scss
index d1ac8de5..70c0a0c9 100644
--- a/src/components/endpoint/Endpoint/Endpoint.module.scss
+++ b/src/components/endpoint/Endpoint/Endpoint.module.scss
@@ -91,7 +91,7 @@
                 }
                 .textInput {
                     background: none;
-                    border: 1px solid #ccc;
+                    border: 1px solid var(--gray-08);
                     color: var(--black-01);
                     padding: 1.6rem 1.6rem 1.6rem 1.28rem;
                     width: 100%;
diff --git a/src/components/faq/Faq/Faq.module.scss b/src/components/faq/Faq/Faq.module.scss
index 87f5fe19..fba0bc31 100644
--- a/src/components/faq/Faq/Faq.module.scss
+++ b/src/components/faq/Faq/Faq.module.scss
@@ -24,7 +24,7 @@
   border-radius: 4px;
   padding: 2.4rem;
   margin-bottom: 1.6rem;
-  background: #1d1f20;
+  background: var(--black-02);
   font-size: inherit;
   word-wrap: inherit;
 }
diff --git a/src/components/global/Accordion/Accordion.module.scss b/src/components/global/Accordion/Accordion.module.scss
index 19f19257..ecdebf05 100644
--- a/src/components/global/Accordion/Accordion.module.scss
+++ b/src/components/global/Accordion/Accordion.module.scss
@@ -64,7 +64,7 @@
         margin: 0 0.2rem 0 0;
         border-radius: 4px;
         padding: 0.2rem 0.4rem;
-        border: 1px solid #eaeced;
+        border: 1px solid var(--gray-02);
         font-family: ibm plex sans, sans-serif;
       }
 
diff --git a/src/components/global/DerivLogo/DerivLogo.module.scss b/src/components/global/DerivLogo/DerivLogo.module.scss
index dd9e9211..398bfa4a 100644
--- a/src/components/global/DerivLogo/DerivLogo.module.scss
+++ b/src/components/global/DerivLogo/DerivLogo.module.scss
@@ -15,7 +15,7 @@
         font-size: var(--text-size-m);
         padding-top: 4rem;
         font-weight: normal;
-        color: #ffffff;
+        color: var(--white);
         margin-left: 2.4rem;
     }
     .logo {
diff --git a/src/components/global/Dialog/Dialog.module.scss b/src/components/global/Dialog/Dialog.module.scss
index b449d16e..cec74046 100644
--- a/src/components/global/Dialog/Dialog.module.scss
+++ b/src/components/global/Dialog/Dialog.module.scss
@@ -18,7 +18,7 @@
   transform: translate(-50%, -50%);
   width: 32rem;
   height: auto;
-  background-color: #fff;
+  background-color: var(--white);
   border-radius: 16px;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
   justify-content: space-between;
diff --git a/src/components/global/Header/Header.module.scss b/src/components/global/Header/Header.module.scss
index 1280ad6b..031ec8ca 100644
--- a/src/components/global/Header/Header.module.scss
+++ b/src/components/global/Header/Header.module.scss
@@ -60,7 +60,7 @@
         margin-right: 4rem;
         font-size: var(--text-size-xxs);
         line-height: var(--text-lh-m);
-        color: #c2c2c2;
+        color: var(--copy-color);
 
         &::before {
           visibility: hidden;
diff --git a/src/components/global/SkeletonText/SkeletonText.module.scss b/src/components/global/SkeletonText/SkeletonText.module.scss
index b0b5aa13..5820d7a4 100644
--- a/src/components/global/SkeletonText/SkeletonText.module.scss
+++ b/src/components/global/SkeletonText/SkeletonText.module.scss
@@ -1,5 +1,5 @@
 .skeleton {
-  background-image: linear-gradient(to right, white, #e6e6e6, #e6e6e6);
+  background-image: linear-gradient(to right, var(--white), var(--gray-02), var(--gray-02));
   padding: 1rem;
   height: 2rem;
   margin-bottom: 1.6rem;
@@ -9,7 +9,7 @@
 
 .skeleton:before {
   content: " ";
-  background-image: linear-gradient(to right, #e6e6e6, #e6e6e6, white);
+  background-image: linear-gradient(to right, var(--gray-02), var(--gray-02), var(--white));
   width: 100%;
   height: 100%;
   display: inline-block;
diff --git a/src/components/playground/PlaygroundComponent/PlaygroundComponent.module.scss b/src/components/playground/PlaygroundComponent/PlaygroundComponent.module.scss
index 0a54d5f0..c10f2a90 100644
--- a/src/components/playground/PlaygroundComponent/PlaygroundComponent.module.scss
+++ b/src/components/playground/PlaygroundComponent/PlaygroundComponent.module.scss
@@ -154,13 +154,13 @@
       margin: 0 auto;
     }
     pre .key {
-      color: #f92672;
+      color: var(--json-magenta);
     }
     pre .string {
-      color: #e6db74;
+      color: var(--json-gold);
     }
     pre .number {
-      color: #ae81ff;
+      color: var(--json-purple);
     }
     pre.req,
     pre.res,
diff --git a/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.module.scss b/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.module.scss
index ac6438d0..3332a4b6 100644
--- a/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.module.scss
+++ b/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.module.scss
@@ -45,7 +45,7 @@
       margin: 1rem;
       width: 97%;
       box-sizing: border-box;
-      border: 1px solid #ccc;
+      border: 1px solid var(--gray-08);
     }
 
     .dropdownSelect{
@@ -64,7 +64,7 @@
     }
 
     .dropdownSelected {
-      background: #ccc;
+      background: var(--gray-08);
     }
 
     .dropdownList{
@@ -86,7 +86,7 @@
       font-size: var(--text-size-s);
       transition: all 0.2s;
       &:hover {
-        background: #1e90ff;
+        background: var(--blue-01);
         color: var(--white);
       }
     }
diff --git a/src/components/playground/Schema/Schema.module.scss b/src/components/playground/Schema/Schema.module.scss
index d1e8ed60..f93c4fe3 100644
--- a/src/components/playground/Schema/Schema.module.scss
+++ b/src/components/playground/Schema/Schema.module.scss
@@ -1,20 +1,22 @@
 .array {
-  color: #ff8fc8;
+  color: var(--schema-array);
 }
+
 .number {
-  color: #acb2ff;
+  color: var(--schema-number);
 }
+
 .string {
-  color: var(--green-03);
+  color: var(--schema-string);
 }
 
 .integer {
-  color: #f8c272;
+  color: var(--schema-integer);
 }
 
 .schemaRole {
   font-size: var(--text-size-xs);
-  line-height: var(--text-lh-s) ;
+  line-height: var(--text-lh-s);
   color: var(--green-03);
   border: none;
   margin: 0.8rem 0.8rem 0 0;
@@ -66,13 +68,15 @@
   display: flex;
   flex-direction: row;
   position: relative;
+
   p {
     color: var(--white);
   }
+
   button {
     position: relative;
-    color: #9ed178 !important;
-    background-color: #0e0e0e;
+    color: var(--green-02) !important;
+    background-color: var(--black-01);
     border: none;
     padding: 1rem;
     border-radius: 4px;
@@ -82,6 +86,7 @@
 
 .schemaObjectHeader {
   flex-direction: column !important;
+
   .schemaObjectBody {
     padding: 0.8rem 1.6rem;
     width: 100%;
@@ -89,6 +94,7 @@
     height: fit-content;
     opacity: 0;
     display: none;
+
     &.objectOpen {
       opacity: 1;
       gap: 2.4rem;
@@ -96,10 +102,12 @@
       display: flex;
       flex-direction: column;
     }
+
     .schemaObjectDescription {
       font-weight: normal;
       font-size: var(--text-size-xs);
     }
+
     .schemaBodyHeader {
       flex-direction: column;
     }
@@ -107,7 +115,7 @@
 }
 
 .schemaBody {
-  background-color: #282a35;
+  background-color: var(--json-midnight);
   padding: 2.8rem 2.3rem;
 
   .schemaBodySignature {
@@ -115,7 +123,7 @@
     flex-direction: column;
     position: relative;
 
-    .schemaBodyDescription + .schemaBodyDescription {
+    .schemaBodyDescription+.schemaBodyDescription {
       text-indent: 1.6rem;
       padding: 1rem;
       color: var(--white);
@@ -197,10 +205,12 @@
       font-size: var(--text-size-xs);
       line-height: var(--text-lh-xl);
       margin-bottom: 2.4rem;
+
       &.objectOpen {
         margin-bottom: 1rem;
       }
     }
+
     .schemaRole {
       background-color: rgba(255, 255, 255, 0.16);
       border: none;
@@ -213,50 +223,60 @@
       margin: 0 0.5rem;
     }
   }
+
   .enumFlex {
     font-size: var(--text-size-xs);
     display: flex;
     gap: 0.8rem;
     width: 100%;
-    strong{
+
+    strong {
       font-size: var(--text-size-s);
     }
-    > p {
+
+    >p {
       display: flex;
       color: var(--white);
       min-width: 35%;
       margin-bottom: unset;
       align-items: var(--text-align-center);
     }
+
     .defaultValue {
       display: flex;
       align-items: var(--text-align-center);
       gap: 0.5rem;
     }
+
     .defaultValueLabel,
     .schemaDefaultValue {
       font-size: var(--text-size-xs);
-      color: #c2c2c2;
+      color: var(--gray-08);
     }
+
     .schemaDefaultValue {
-      border: 2px solid #c2c2c2;
+      border: 2px solid var(--gray-08);
       border-radius: 4px;
       padding: 0.3rem;
     }
+
     .enumContainer {
       display: flex;
       flex-wrap: wrap;
       gap: 0.8rem;
       align-items: var(--text-align-center);
     }
+
     .enumLabel {
       font-size: var(--text-size-xs);
       line-height: var(--text-lh-s);
-      color: #c2c2c2;
+      color: var(--gray-08);
     }
+
     .enumType {
       font-size: var(--text-size-xs);
     }
+
     .enumLabel,
     .enumType {
       display: flex;
@@ -268,11 +288,12 @@
 
 .schemaBodySignature {
   &:hover {
-    > .sourceButton {
+    >.sourceButton {
       opacity: 1;
     }
   }
-  > .schemaBodySignature {
+
+  >.schemaBodySignature {
     background-color: rgba(219, 219, 219, 0.05) !important;
     border-radius: 4px;
     margin-bottom: 1rem;
@@ -293,12 +314,13 @@
   font-weight: 700;
   font-size: var(--text-size-xxxs);
   transition: opacity 0.2s ease-in-out;
+
   &:hover {
     opacity: 1;
   }
 }
 
-.schemaHeader:hover + .schemaBody .sourceButtonMain {
+.schemaHeader:hover+.schemaBody .sourceButtonMain {
   opacity: 1;
 }
 
@@ -315,12 +337,14 @@
   .enumFlex {
     flex-wrap: wrap;
   }
+
   .schemaHeader {
     .schemaDescription {
       flex-wrap: wrap;
+
       .schemaAuthRequired {
         width: unset;
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/themes.scss b/src/themes.scss
index aab00330..b3f9030c 100644
--- a/src/themes.scss
+++ b/src/themes.scss
@@ -34,6 +34,7 @@
     --gray-14: #f5f7fa;
     --gray-15: #f2f3f4;
     --teal-01: #4bb4b3;
+    --blue-01: #1e90ff;
     --blue-04: #5d5381;
     --green-01: #556b2f;
     --green-02: #9ed178;
@@ -48,14 +49,18 @@
     --border-normal: #d6dadb;
     --brand-secondary: #85acb0;
     --copy-hover: #424242;
-    --copy-color: #c2c2c2;
+    --copy-color: var(--gray-08);
     --hamburger-active-link: var(--gray-06);
     --hamburger-menu-width: 26rem;
     --white: #ffffff;
-    --json-purple: #8860e8;
-    --json-magenta: #de5ea0;
-    --json-gold: #f3ca5e;
+    --json-purple: #ae81ff;
+    --json-magenta: #f92672;
+    --json-gold: #e6db74;
     --json-midnight: #282a35;
+    --schema-array: #ff8fc8;
+    --schema-number: #acb2ff;
+    --schema-integer: #f8c272;
+    --schema-string: var(--green-03);
     --blockquote-separator-color: var(--gray-14);
     --blockquote-text-color: var(--gray-15);
     --btn-background: var(--red-01);

From 74323819535e3da645890cb0a0a8d5c2827f0326 Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Thu, 17 Nov 2022 09:19:24 +0100
Subject: [PATCH 11/23] page breajs

---
 src/components/global/Accordion/Accordion.module.scss           | 2 +-
 src/components/global/DerivLogo/DerivLogo.module.scss           | 2 +-
 src/components/global/InlineCode/InlineCode.module.scss         | 1 -
 .../homepage/ClientLibraries/ClientLibraries.module.scss        | 2 +-
 src/components/homepage/GetStarted/GetStarted.module.scss       | 2 +-
 .../homepage/HomepageSlider/HomepageSlider.module.scss          | 2 +-
 src/components/playground/Schema/Schema.module.scss             | 2 +-
 7 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/global/Accordion/Accordion.module.scss b/src/components/global/Accordion/Accordion.module.scss
index ecdebf05..965aca22 100644
--- a/src/components/global/Accordion/Accordion.module.scss
+++ b/src/components/global/Accordion/Accordion.module.scss
@@ -82,4 +82,4 @@
       padding: 1.6rem 2.8rem;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/global/DerivLogo/DerivLogo.module.scss b/src/components/global/DerivLogo/DerivLogo.module.scss
index 398bfa4a..cd058ebf 100644
--- a/src/components/global/DerivLogo/DerivLogo.module.scss
+++ b/src/components/global/DerivLogo/DerivLogo.module.scss
@@ -45,4 +45,4 @@
         font-size: var(--text-size-s);
         margin-left: 0.8rem;
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/global/InlineCode/InlineCode.module.scss b/src/components/global/InlineCode/InlineCode.module.scss
index 18642ed2..c984f971 100644
--- a/src/components/global/InlineCode/InlineCode.module.scss
+++ b/src/components/global/InlineCode/InlineCode.module.scss
@@ -6,4 +6,3 @@
     background-color: var(--gray-01);
     border: 1px solid var(--gray-02);
   }
-  
\ No newline at end of file
diff --git a/src/components/homepage/ClientLibraries/ClientLibraries.module.scss b/src/components/homepage/ClientLibraries/ClientLibraries.module.scss
index b03c8d38..e28cd81b 100644
--- a/src/components/homepage/ClientLibraries/ClientLibraries.module.scss
+++ b/src/components/homepage/ClientLibraries/ClientLibraries.module.scss
@@ -68,4 +68,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/homepage/GetStarted/GetStarted.module.scss b/src/components/homepage/GetStarted/GetStarted.module.scss
index fd542a79..5f26a430 100644
--- a/src/components/homepage/GetStarted/GetStarted.module.scss
+++ b/src/components/homepage/GetStarted/GetStarted.module.scss
@@ -33,4 +33,4 @@
         font-size: var(--text-size-xs);
         margin-top: 0;
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/homepage/HomepageSlider/HomepageSlider.module.scss b/src/components/homepage/HomepageSlider/HomepageSlider.module.scss
index d9bbfe5d..28008e8c 100644
--- a/src/components/homepage/HomepageSlider/HomepageSlider.module.scss
+++ b/src/components/homepage/HomepageSlider/HomepageSlider.module.scss
@@ -140,4 +140,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/playground/Schema/Schema.module.scss b/src/components/playground/Schema/Schema.module.scss
index f93c4fe3..5a96aedc 100644
--- a/src/components/playground/Schema/Schema.module.scss
+++ b/src/components/playground/Schema/Schema.module.scss
@@ -347,4 +347,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}

From c5501b3888b4140759764523aea88dd248f7bd4c Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Thu, 17 Nov 2022 11:23:11 +0100
Subject: [PATCH 12/23] husky

---
 .../DerivGuideContent/DerivGuideContent.tsx   | 10 +--
 .../ResetSendButtonsBlock.jsx                 | 78 +++++++++----------
 .../ClientLibraries/ClientLibraries.tsx       |  7 +-
 .../homepage/GetStarted/GetStarted.tsx        |  4 +-
 .../HomepageFooter/HomepageFooter.tsx         |  6 +-
 .../HomepageSlider/HomepageSlider.tsx         | 18 +++--
 .../homepage/HomepageSlider/Slide.tsx         | 16 ++--
 .../SelectRequestInput/SelectRequestInput.jsx |  6 +-
 8 files changed, 74 insertions(+), 71 deletions(-)

diff --git a/src/components/api-guide/ApiGuide/DerivGuideContent/DerivGuideContent.tsx b/src/components/api-guide/ApiGuide/DerivGuideContent/DerivGuideContent.tsx
index 9574e84a..4f624a5f 100644
--- a/src/components/api-guide/ApiGuide/DerivGuideContent/DerivGuideContent.tsx
+++ b/src/components/api-guide/ApiGuide/DerivGuideContent/DerivGuideContent.tsx
@@ -1,8 +1,8 @@
-import React from "react"
-import { Link } from "react-router-dom";
-import ApiGuideTable from "../ApiGuideTable/ApiGuideTable";
-import CodeBlockSingleLanguage from "../../../global/CodeBlock/CodeBlockSingleLanguage";
-import styles from "../ApiGuide.module.scss";
+import React from 'react';
+import { Link } from 'react-router-dom';
+import ApiGuideTable from '../ApiGuideTable/ApiGuideTable';
+import CodeBlockSingleLanguage from '../../../global/CodeBlock/CodeBlockSingleLanguage';
+import styles from '../ApiGuide.module.scss';
 
 import ticksJSON from '../../../../../public/demos/json/ticks.json';
 import nestedJSON from '../../../../../public/demos/json/nested.json';
diff --git a/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.jsx b/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.jsx
index 4bab289b..a4a79a30 100644
--- a/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.jsx
+++ b/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.jsx
@@ -1,45 +1,45 @@
-import React from "react";
-import Button from "../GeneralButton/GeneralButton";
-import style from "./ResetSendButtonsBlock.module.scss";
-import { ticksSubject } from "../../../global-functions/ticksSubject";
+import React from 'react';
+import Button from '../GeneralButton/GeneralButton';
+import style from './ResetSendButtonsBlock.module.scss';
+import { ticksSubject } from '../../../global-functions/ticksSubject';
 
 export const ResetSendButtonsBlock = ({
-  isAppRegistration,
-  sendRequest,
-  resetMessagesInConsole,
-  current_api,
-  setIsScrolling,
-  setScrollDirection,
+    isAppRegistration,
+    sendRequest,
+    resetMessagesInConsole,
+    current_api,
+    setIsScrolling,
+    setScrollDirection,
 }) => {
-  const onClick = () => {
-    setScrollDirection("down");
-    current_api.connection.close();
-    ticksSubject.complete();
-    resetMessagesInConsole?.([]);
-    setIsScrolling?.(true)
-  }
-  return (
-    <div className={style.jsonBtnWrapper}>
-      <div
-        id="playground-reset-btn"
-        className={
-          isAppRegistration
-            ? `${style.btnReset} ${style.grayBtnSubmit}`
-            : `${style.btnReset} ${style.btnResetPlayground}`
-        }
-      >
-        <Button text={"Reset Connection"} clickHandler={onClick} />
-      </div>
-      <div className={style.btnSubmit}>
-        <Button
-          id="playground-send-btn"
-          className={style.btnSubmit}
-          text={"Send Request"}
-          clickHandler={sendRequest}
-        />
-      </div>
-    </div>
-  );
+    const onClick = () => {
+        setScrollDirection('down');
+        current_api.connection.close();
+        ticksSubject.complete();
+        resetMessagesInConsole?.([]);
+        setIsScrolling?.(true);
+    };
+    return (
+        <div className={style.jsonBtnWrapper}>
+            <div
+                id='playground-reset-btn'
+                className={
+                    isAppRegistration
+                        ? `${style.btnReset} ${style.grayBtnSubmit}`
+                        : `${style.btnReset} ${style.btnResetPlayground}`
+                }
+            >
+                <Button text={'Reset Connection'} clickHandler={onClick} />
+            </div>
+            <div className={style.btnSubmit}>
+                <Button
+                    id='playground-send-btn'
+                    className={style.btnSubmit}
+                    text={'Send Request'}
+                    clickHandler={sendRequest}
+                />
+            </div>
+        </div>
+    );
 };
 
 ResetSendButtonsBlock.displayName = 'ResetSendButtonsBlock';
diff --git a/src/components/homepage/ClientLibraries/ClientLibraries.tsx b/src/components/homepage/ClientLibraries/ClientLibraries.tsx
index 068c4276..abdc5dc1 100644
--- a/src/components/homepage/ClientLibraries/ClientLibraries.tsx
+++ b/src/components/homepage/ClientLibraries/ClientLibraries.tsx
@@ -2,13 +2,12 @@ import styles from './ClientLibraries.module.scss';
 export const ClientLibraries = () => {
     return (
         <div className={`main-page-row gray ${styles.takeToLib}`}>
-            <div className="row-container">
+            <div className='row-container'>
                 <div className={`single-container gray ${styles.clientLibrary}`}>
                     <div className={styles.iconJsLibrary} />
                     <h1>Comprehensive all-in-one client library</h1>
-                    <p className="subheader">
-                        Simplify your development processes and get your app up and
-                        running <br />
+                    <p className='subheader'>
+                        Simplify your development processes and get your app up and running <br />
                         faster with the client library of your choice.
                     </p>
                     <div className={styles.libraryLinks}>
diff --git a/src/components/homepage/GetStarted/GetStarted.tsx b/src/components/homepage/GetStarted/GetStarted.tsx
index da2aa947..740865c1 100644
--- a/src/components/homepage/GetStarted/GetStarted.tsx
+++ b/src/components/homepage/GetStarted/GetStarted.tsx
@@ -2,9 +2,9 @@ import styles from './GetStarted.module.scss';
 export const GetStarted = () => {
     return (
         <div className={`main-page-row ${styles.withPattern}`}>
-            <div className="column-container">
+            <div className='column-container'>
                 <h1>Get started with our API in 3 simple steps:</h1>
-                <div className="card-container">
+                <div className='card-container'>
                     <a
                         target='_blank'
                         href='https://deriv.com/signup/'
diff --git a/src/components/homepage/HomepageFooter/HomepageFooter.tsx b/src/components/homepage/HomepageFooter/HomepageFooter.tsx
index 0b64c427..ded2637d 100644
--- a/src/components/homepage/HomepageFooter/HomepageFooter.tsx
+++ b/src/components/homepage/HomepageFooter/HomepageFooter.tsx
@@ -7,10 +7,10 @@ export const HomepageFooter = () => {
                     <h2>Get connected</h2>
                     <p className='mb-16p'>Discuss ideas and share solutions with developers worldwide.</p>
                     <a
-                        target="_blank"
-                        href="https://binary.vanillacommunity.com/"
+                        target='_blank'
+                        href='https://binary.vanillacommunity.com/'
                         className={styles.communityBtn}
-                        rel="noreferrer noopener"
+                        rel='noreferrer noopener'
                     >
                         Join our community
                     </a>
diff --git a/src/components/homepage/HomepageSlider/HomepageSlider.tsx b/src/components/homepage/HomepageSlider/HomepageSlider.tsx
index 745f7ffe..399b6051 100644
--- a/src/components/homepage/HomepageSlider/HomepageSlider.tsx
+++ b/src/components/homepage/HomepageSlider/HomepageSlider.tsx
@@ -139,9 +139,9 @@ export const HomepageSlider = () => {
 
     return (
         <React.Fragment>
-            <div className="main-page-row white">
-                <h1 className="clients-opinion">See what our clients say</h1>
-                <div className="column-container"></div>
+            <div className='main-page-row white'>
+                <h1 className='clients-opinion'>See what our clients say</h1>
+                <div className='column-container'></div>
                 <div id='slider' className={`${styles.slider} loaded`}>
                     <div className={`${styles.sliderWrapper} ${styles.wrapper}`}>
                         <div
@@ -177,8 +177,16 @@ export const HomepageSlider = () => {
                             <SlidePortal portal_entry={FIRST_SLIDE} />
                         </div>
                     </div>
-                    <div id='prev' className={`${styles.control} ${styles.prev}`} onClick={() => nextOrPrevSlide(PREVIOUS)} />
-                    <div id='next' className={`${styles.control} ${styles.next}`} onClick={() => nextOrPrevSlide(NEXT)} />
+                    <div
+                        id='prev'
+                        className={`${styles.control} ${styles.prev}`}
+                        onClick={() => nextOrPrevSlide(PREVIOUS)}
+                    />
+                    <div
+                        id='next'
+                        className={`${styles.control} ${styles.next}`}
+                        onClick={() => nextOrPrevSlide(NEXT)}
+                    />
                 </div>
             </div>
         </React.Fragment>
diff --git a/src/components/homepage/HomepageSlider/Slide.tsx b/src/components/homepage/HomepageSlider/Slide.tsx
index 05f6ac4e..6b0c6f7e 100644
--- a/src/components/homepage/HomepageSlider/Slide.tsx
+++ b/src/components/homepage/HomepageSlider/Slide.tsx
@@ -1,11 +1,11 @@
 import styles from './HomepageSlider.module.scss';
 
 export const Slide = ({ content, author }) => {
-  return (
-    <div className={`${styles.slide}`}>
-      <blockquote className="content">{content}</blockquote>
-      <hr className={styles.blockquoteSeparator} />
-      <p className={styles.blockquoteAuthor}>{author}</p>
-    </div>
-  );
-}
+    return (
+        <div className={`${styles.slide}`}>
+            <blockquote className='content'>{content}</blockquote>
+            <hr className={styles.blockquoteSeparator} />
+            <p className={styles.blockquoteAuthor}>{author}</p>
+        </div>
+    );
+};
diff --git a/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.jsx b/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.jsx
index 224f5db5..c8f4fb9b 100644
--- a/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.jsx
+++ b/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.jsx
@@ -32,11 +32,7 @@ const SelectRequestInput = ({ selected, setSelected, handleChange, selected_valu
     return (
         <div>
             <div className={styles.dropdown} ref={ref}>
-                <div
-                    className={styles.dropdownBtn}
-                    onClick={handleToggleDropdown}
-                    data-testid='apiDropdown'
-                >
+                <div className={styles.dropdownBtn} onClick={handleToggleDropdown} data-testid='apiDropdown'>
                     <span>{selected_value}</span>
                     <span className={`${styles.arrow} ${isActive ? styles.down : ''}`} />
                 </div>

From d1809f1bd0787028d80b520ac5da6977accd46eb Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Thu, 17 Nov 2022 11:32:28 +0100
Subject: [PATCH 13/23] empty line

---
 src/components/homepage/Benefits/Benefits.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/homepage/Benefits/Benefits.module.scss b/src/components/homepage/Benefits/Benefits.module.scss
index 3ff903ca..a2001157 100644
--- a/src/components/homepage/Benefits/Benefits.module.scss
+++ b/src/components/homepage/Benefits/Benefits.module.scss
@@ -217,4 +217,4 @@
     .personalisationImage {
         order: 1;
     }
-}
\ No newline at end of file
+}

From efae2c5077648bb8b2f6f27ff94a28a36b211127 Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Fri, 18 Nov 2022 11:08:34 +0100
Subject: [PATCH 14/23] font-size fix

---
 .../api-guide/ApiGuide/ApiGuide.jsx           |  4 ++--
 .../DerivGuideContent/DerivGuideContent.tsx   | 24 ++++++++++---------
 .../ApiGuide/Navigator/Navigator.tsx          |  4 ++--
 .../global/InlineCode/InlineCode.module.scss  |  8 +++++++
 .../global/InlineCode/InlineCode.tsx          |  5 ++++
 src/themes.scss                               |  5 ++++
 6 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 src/components/global/InlineCode/InlineCode.module.scss
 create mode 100644 src/components/global/InlineCode/InlineCode.tsx

diff --git a/src/components/api-guide/ApiGuide/ApiGuide.jsx b/src/components/api-guide/ApiGuide/ApiGuide.jsx
index 79c29adf..87082b1c 100644
--- a/src/components/api-guide/ApiGuide/ApiGuide.jsx
+++ b/src/components/api-guide/ApiGuide/ApiGuide.jsx
@@ -18,7 +18,7 @@ export default function ApiGuide() {
                 <h1>API guide</h1>
                 {isMobile && <RenderOfficialDomainContents Component={Navigator} />}
                 <div className={styles.textBlock}>
-                    <h2 id='what-is-api'>What is API?</h2>
+                    <h2 id='what-is-an-api'>What is an API?</h2>
                     <p>
                         API stands for Application Programming Interface - a software that allows 2 or more computer
                         programs to communicate with each other. These 2 programs are usually referred to as server and
@@ -70,7 +70,7 @@ export default function ApiGuide() {
                     <div className={styles.apiGuideImage}>
                         <img src={howAPIWorksUrl} alt='How API works' loading='lazy' />
                     </div>
-                    <h3>Client libraries</h3>
+                    <h4>Client libraries</h4>
                     <p>
                         {' '}
                         Client libraries are pre-written pieces of code that can be used to send API calls instead of
diff --git a/src/components/api-guide/ApiGuide/DerivGuideContent/DerivGuideContent.tsx b/src/components/api-guide/ApiGuide/DerivGuideContent/DerivGuideContent.tsx
index 4f624a5f..d399d6a7 100644
--- a/src/components/api-guide/ApiGuide/DerivGuideContent/DerivGuideContent.tsx
+++ b/src/components/api-guide/ApiGuide/DerivGuideContent/DerivGuideContent.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { InlineCode } from '../../../global/InlineCode/InlineCode';
 import ApiGuideTable from '../ApiGuideTable/ApiGuideTable';
 import CodeBlockSingleLanguage from '../../../global/CodeBlock/CodeBlockSingleLanguage';
 import styles from '../ApiGuide.module.scss';
@@ -79,7 +80,7 @@ export const DerivGuideContent = () => {
                         Client's stake with the markup = 1.07 USD + (2 USD x 2%) = <b>1.11 USD</b>
                     </li>
                 </ul>
-                <h3>Conditions of using the Deriv API</h3>
+                <h4>Conditions of using the Deriv API</h4>
                 <p>
                     The Deriv API is free of charge and is subject to our{' '}
                     <a href='https://deriv.com/terms-and-conditions'>terms and conditions</a> and{' '}
@@ -120,7 +121,7 @@ export const DerivGuideContent = () => {
                     For more information on how to write a client using WebSockets, visit this{' '}
                     <a href='/docs/'>guide</a>.
                 </p>
-                <h2 id='json'>JSON</h2>
+                <h3 id='json'>JSON</h3>
                 <p>
                     JavaScript Object Notation (JSON) is a data format based on JavaScript. However, it is completely
                     language-independent, and can be used by any modern programming language. JSON has a good balance
@@ -156,7 +157,7 @@ export const DerivGuideContent = () => {
             <div className={styles.apiCodeBlock}>
                 <CodeBlockSingleLanguage lang='json' content={statusContent} />
             </div>
-            <h2 id='json-schemas'>JSON Schemas</h2>
+            <h3 id='json-schemas'>JSON Schemas</h3>
             <p>
                 JSON Schema is a defined format for the JSON messages used to describe their structure to Deriv API
                 users. In a nutshell, it’s a standardised way of explaining what a JSON request should look like using
@@ -186,12 +187,12 @@ export const DerivGuideContent = () => {
                 <img src={showJSONSchemaImg} alt='API Guide' loading='lazy' />
             </div>
             <p>The JSON Schema also forms the documentation for the API Explorer.</p>
-            <h2 id='authorisation'>Authorisation</h2>
+            <h3 id='authorisation'>Authorisation</h3>
             <p>
                 Third-party developers can authorise calls to the API in two different ways: via API token or via
                 OAuth2.
             </p>
-            <h3>API token</h3>
+            <h4>API token</h4>
             <p>
                 An API token is a unique identifier of a client that requests access from a server. It's the simplest
                 way of authorisation.
@@ -223,7 +224,7 @@ export const DerivGuideContent = () => {
                 Please bear in mind that the API token can be used with any app, so both your app and your clients need
                 to keep it secure.
             </p>
-            <h3>OAuth2</h3>
+            <h4>OAuth2</h4>
             <p>
                 OAuth stands for Open Authorisation - a protocol that allows a client access resources hosted on a
                 server on behalf of the user without revealing the credentials.
@@ -245,7 +246,7 @@ export const DerivGuideContent = () => {
             <div className={styles.apiGuideImage}>
                 <img src={howOauthWorksImg} alt='API Guide' loading='lazy' />
             </div>
-            <h2>What do you need to do to use OAuth authorisation for Deriv API?</h2>
+            <h3>What do you need to do to use OAuth authorisation for Deriv API?</h3>
             <ul>
                 <li>
                     <p>
@@ -270,10 +271,11 @@ export const DerivGuideContent = () => {
                 will have arguments added to it with the user's session tokens, and will look similar to this:
             </p>
             <p>
-                <code className='inline-code'>
-                    https://mywebsite.com/redirect/?acct1=cr799393& token1=a1-f7pnteezo4jzhpxclctizt27hyeot&cur1=usd&
-                    acct2=vrtc1859315& token2=a1clwe3vfuuus5kraceykdsoqm4snfq& cur2=usd&state=
-                </code>
+                <InlineCode>
+                    https://&#91;YOUR_WEBSITE_URL&#93;/redirect/?acct1=cr799393&
+                    token1=a1-f7pnteezo4jzhpxclctizt27hyeot&cur1=usd& acct2=vrtc1859315&
+                    token2=a1clwe3vfuuus5kraceykdsoqm4snfq& cur2=usd&state=
+                </InlineCode>
             </p>
             <p>In the parameters of the URL you will see all the accounts and the session token for each account.</p>
             <ul>
diff --git a/src/components/api-guide/ApiGuide/Navigator/Navigator.tsx b/src/components/api-guide/ApiGuide/Navigator/Navigator.tsx
index 6ed5c89f..b60320a8 100644
--- a/src/components/api-guide/ApiGuide/Navigator/Navigator.tsx
+++ b/src/components/api-guide/ApiGuide/Navigator/Navigator.tsx
@@ -13,8 +13,8 @@ export default function Navigator() {
                 />
             </div>
             <div className={`${styles.navigatorContent} ${is_closed ? '' : styles.opened}`}>
-                <a className={styles.navigatorLink} href='#what-is-api'>
-                    What is API?
+                <a className={styles.navigatorLink} href='#what-is-an-api'>
+                    What is an API?
                 </a>
                 <a className={styles.navigatorLink} href='#the-deriv-api'>
                     The Deriv API
diff --git a/src/components/global/InlineCode/InlineCode.module.scss b/src/components/global/InlineCode/InlineCode.module.scss
new file mode 100644
index 00000000..b5de8772
--- /dev/null
+++ b/src/components/global/InlineCode/InlineCode.module.scss
@@ -0,0 +1,8 @@
+.inlineCode {
+    font-weight: 400;
+    color: var(--red-01);
+    border-radius: 4px;
+    padding: 0.2rem 0.4rem;
+    background-color: var(--gray-01);
+    border: 1px solid var(--gray-02);
+}
\ No newline at end of file
diff --git a/src/components/global/InlineCode/InlineCode.tsx b/src/components/global/InlineCode/InlineCode.tsx
new file mode 100644
index 00000000..e9d673cf
--- /dev/null
+++ b/src/components/global/InlineCode/InlineCode.tsx
@@ -0,0 +1,5 @@
+import styles from './InlineCode.module.scss';
+
+export const InlineCode = ({ children }) => (
+    <code className={styles.inlineCode}>{children}</code>
+)
\ No newline at end of file
diff --git a/src/themes.scss b/src/themes.scss
index b3f9030c..408fe35b 100644
--- a/src/themes.scss
+++ b/src/themes.scss
@@ -110,6 +110,11 @@ html * {
     font-size: var(--text-size-s);
 }
 
+// Table text and headers font-size
+th, td {
+    font-size: var(--text-size-xs);
+}
+
 @mixin header {
     margin-bottom: 1.6rem;
     color: var(--text-01);

From d75add4027c449f62b55d65b4c7a898b26f769fa Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Fri, 18 Nov 2022 11:09:18 +0100
Subject: [PATCH 15/23] husky

---
 src/components/global/InlineCode/InlineCode.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/global/InlineCode/InlineCode.tsx b/src/components/global/InlineCode/InlineCode.tsx
index e9d673cf..84f05d75 100644
--- a/src/components/global/InlineCode/InlineCode.tsx
+++ b/src/components/global/InlineCode/InlineCode.tsx
@@ -1,5 +1,3 @@
 import styles from './InlineCode.module.scss';
 
-export const InlineCode = ({ children }) => (
-    <code className={styles.inlineCode}>{children}</code>
-)
\ No newline at end of file
+export const InlineCode = ({ children }) => <code className={styles.inlineCode}>{children}</code>;

From 0e86ffb53e40d06854bfef223b0227d267cdeee4 Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Fri, 18 Nov 2022 13:00:54 +0100
Subject: [PATCH 16/23] fixing sidez

---
 .../homepage/Benefits/Benefits.module.scss          |  1 +
 .../ClientLibraries/ClientLibraries.module.scss     |  6 +++++-
 .../DerivApiFeatures/DerivApiFeatures.module.scss   | 13 +++++++++++--
 .../homepage/DerivApiFeatures/DerivApiFeatures.tsx  |  2 +-
 .../homepage/WaysToEarn/WaysToEarn.module.scss      |  9 ++++++++-
 src/themes.scss                                     |  1 +
 6 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/homepage/Benefits/Benefits.module.scss b/src/components/homepage/Benefits/Benefits.module.scss
index a2001157..6e5d32fe 100644
--- a/src/components/homepage/Benefits/Benefits.module.scss
+++ b/src/components/homepage/Benefits/Benefits.module.scss
@@ -1,4 +1,5 @@
 .benefitsContainer {
+    width: 80%;
     .benefitsIcons {
         width: 65%;
         flex-wrap: nowrap;
diff --git a/src/components/homepage/ClientLibraries/ClientLibraries.module.scss b/src/components/homepage/ClientLibraries/ClientLibraries.module.scss
index e28cd81b..19697644 100644
--- a/src/components/homepage/ClientLibraries/ClientLibraries.module.scss
+++ b/src/components/homepage/ClientLibraries/ClientLibraries.module.scss
@@ -1,9 +1,13 @@
 .takeToLib {
-    padding: 8rem 0 0;
     .clientLibrary {
 
         h1 {
             margin: 1.8rem 0;
+            width: 100%;
+        }
+
+        .subheader {
+            padding: 0 1.5rem;
         }
 
         .iconJsLibrary {
diff --git a/src/components/homepage/DerivApiFeatures/DerivApiFeatures.module.scss b/src/components/homepage/DerivApiFeatures/DerivApiFeatures.module.scss
index 5b69ce56..b0280136 100644
--- a/src/components/homepage/DerivApiFeatures/DerivApiFeatures.module.scss
+++ b/src/components/homepage/DerivApiFeatures/DerivApiFeatures.module.scss
@@ -13,7 +13,7 @@
 
     .apiFeaturesDescription {
         width: 48.6rem;
-        margin-left: 4rem;
+        margin-left: 2rem;
         padding: 0 1rem;
         box-sizing: border-box;
 
@@ -67,4 +67,13 @@
             font-size: 2.2rem;
         }
     }
-}
\ No newline at end of file
+}
+
+[data-state*="responsive.mobile"] {
+    .apiFeaturesDescription {
+        h1 {
+            padding: 0 0 1rem 0;
+            text-align: left;
+        }
+    }
+}
diff --git a/src/components/homepage/DerivApiFeatures/DerivApiFeatures.tsx b/src/components/homepage/DerivApiFeatures/DerivApiFeatures.tsx
index 7e2ee3eb..d6397be2 100644
--- a/src/components/homepage/DerivApiFeatures/DerivApiFeatures.tsx
+++ b/src/components/homepage/DerivApiFeatures/DerivApiFeatures.tsx
@@ -6,7 +6,7 @@ export const DerivApiFeatures = () => {
             <div className='column-container'>
                 <div className={styles.apiFeatures}>
                     <div className={styles.apiFeaturesDescription}>
-                        <h2>Deriv API features</h2>
+                        <h1>Deriv API features</h1>
                         <p>
                             Deriv API gives you full access to all the trading functionalities of DTrader and allows you
                             to build your own comprehensive trading systems and analysis tools.
diff --git a/src/components/homepage/WaysToEarn/WaysToEarn.module.scss b/src/components/homepage/WaysToEarn/WaysToEarn.module.scss
index 48fc1ef2..8946a2d0 100644
--- a/src/components/homepage/WaysToEarn/WaysToEarn.module.scss
+++ b/src/components/homepage/WaysToEarn/WaysToEarn.module.scss
@@ -2,13 +2,20 @@
     margin-top: 2rem;
 
     .waysWrapper {
-        width: 100%;
+        width: 80%;
         margin-bottom: 3rem;
         display: flex;
         flex-wrap: wrap;
         align-items: var(--text-align-center);
         justify-content: space-around;
 
+        h1 {
+            max-width: 384px;
+            color: var(--text-01);
+            margin-bottom: 40px;
+            text-align: center;
+        }
+
         .ways {
             display: flex;
             align-items: var(--text-align-center);
diff --git a/src/themes.scss b/src/themes.scss
index 408fe35b..0f7e44e3 100644
--- a/src/themes.scss
+++ b/src/themes.scss
@@ -152,6 +152,7 @@ h5 {
     h1 {
         font-size: var(--text-size-l);
         padding: 0 1.5rem;
+        box-sizing: border-box;
     }
 
     h2 {

From 12d3c23c72ba7eb676b53f8585dcc19a78452d0a Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Fri, 18 Nov 2022 14:54:40 +0100
Subject: [PATCH 17/23] refactoring and fixing

---
 .../AppManagement/AppManagement.module.scss   | 22 ++++++++--------
 .../AppRegistration/AppRegistration.scss      | 25 +++++++++----------
 .../global/Button/Button.module.scss          |  4 +--
 .../LogoutButton/LogoutButton.module.scss     |  2 +-
 4 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/src/components/app-registration/AppManagement/AppManagement.module.scss b/src/components/app-registration/AppManagement/AppManagement.module.scss
index 771ab10b..53a6bb76 100644
--- a/src/components/app-registration/AppManagement/AppManagement.module.scss
+++ b/src/components/app-registration/AppManagement/AppManagement.module.scss
@@ -10,11 +10,11 @@
     thead {
         background-color: var(--gray-02);
         height: 5rem;
-        text-align: var(--text-align-left);
     }
 
     th,
     td {
+        text-align: var(--text-align-left);
         padding: 1.6rem;
         min-width: 12rem;
         max-width: 20rem;
@@ -22,6 +22,12 @@
         text-overflow: ellipsis;
     }
 
+    td:nth-child(3) {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.64rem;
+    }
+
     td:last-child,
     th:last-child {
         white-space: nowrap;
@@ -36,12 +42,6 @@
     tbody tr:nth-child(even) {
         background-color: var(--gray-03);
     }
-
-    td:nth-child(2n + 3) {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.64rem;
-    }
 }
 
 [data-state~='registration.logged_in.manage_tab'] .manageApps {
@@ -85,7 +85,7 @@
 
 .appActions {
     display: flex;
-    justify-content: var(--text-align-center);
+    justify-content: var(--text-align-left);
     margin: 3rem;
 }
 
@@ -136,11 +136,11 @@
 .scope {
     border: 1.6px solid var(--border-normal);
     border-radius: 4px;
-    padding: 0.32rem 0.32rem;
-    font-size: var(--text-size-xxs);
+    padding: 0.24rem 0.24rem;
+    font-size: 1.1rem;
 }
 
 .adminScope {
-    border: 1px solid var(--teal-01);
+    border: 1.6px solid var(--teal-01);
     color: var(--teal-01);
 }
\ No newline at end of file
diff --git a/src/components/app-registration/AppRegistration/AppRegistration.scss b/src/components/app-registration/AppRegistration/AppRegistration.scss
index 4d0255a3..7a45a24a 100644
--- a/src/components/app-registration/AppRegistration/AppRegistration.scss
+++ b/src/components/app-registration/AppRegistration/AppRegistration.scss
@@ -2,13 +2,12 @@
   display: none;
 }
 
-.app-registration-header .form-title {
-  font-size: var(--text-size-xm);
-}
-
-.app-registration-header .form-title,
-.app-registration-header .form-subtitle {
-  text-align: var(--text-align-center);
+.app-registration-header {
+  padding: 0 2rem;
+  .form-title,
+  .form-subtitle {
+    text-align: var(--text-align-center);
+  }
 }
 
 /* add delete.svg icon to app-remove-btn */
@@ -200,6 +199,7 @@ fieldset {
   width: 80%;
   margin: 0 auto;
   border: none;
+
   .first {
     margin-top: 2rem;
   }
@@ -257,8 +257,7 @@ fieldset {
   display: none;
 }
 
-[data-state~="registration.logged_in.manage_tab.loadingApps.empty"]
-  .no-apps-wrapper {
+[data-state~="registration.logged_in.manage_tab.loadingApps.empty"] .no-apps-wrapper {
   display: inline-block;
   visibility: visible;
 }
@@ -346,8 +345,7 @@ fieldset {
 }
 
 /*  display register-app when [data-state] success */
-[data-state~="registration.logged_in.register_tab.unfolded_form.submitting_registration.registration_success"]
-  .registration-dialog {
+[data-state~="registration.logged_in.register_tab.unfolded_form.submitting_registration.registration_success"] .registration-dialog {
   display: flex;
 }
 
@@ -387,10 +385,11 @@ fieldset {
 
 [data-state~="responsive.mobileL"],
 [data-state~="responsive.mobileTablet"],
-[data-state*="responsive.desktop"] { 
+[data-state*="responsive.desktop"] {
   .dialog {
     width: 38.5rem;
   }
+
   .dialog-delete,
   .dialog-update {
     width: 32rem;
@@ -447,4 +446,4 @@ fieldset {
   .expandable-form .register-app-button {
     padding: 1.2rem 2rem;
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/global/Button/Button.module.scss b/src/components/global/Button/Button.module.scss
index 11c16f06..5e064be7 100644
--- a/src/components/global/Button/Button.module.scss
+++ b/src/components/global/Button/Button.module.scss
@@ -1,9 +1,9 @@
 .btn {
   background-color: var(--btn-background);
   color: var(--btn-text-color);
-  width: fit-content;
+  width: 100%;
   height: fit-content;
-  padding: 1rem 1.6rem;
+  padding: 1rem 0.5rem;
   border: none;
   border-radius: 4px;
   font-size:var(--text-size-xs);
diff --git a/src/components/global/LogoutButton/LogoutButton.module.scss b/src/components/global/LogoutButton/LogoutButton.module.scss
index cec25115..37179dd4 100644
--- a/src/components/global/LogoutButton/LogoutButton.module.scss
+++ b/src/components/global/LogoutButton/LogoutButton.module.scss
@@ -1,5 +1,6 @@
 .signOut {
   --btn-background: var(--black-01);
+  width: 13rem;
   display: block;
   z-index: 100;
   color: var(--white);
@@ -10,7 +11,6 @@
 
 [data-state*="mobile"] .signOut {
   position: relative;
-  width: 13rem;
   text-align: center;
   bottom: 0.1rem;
 }

From 90a7af6ca42e31ee19816a33e786e524516e1aee Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Mon, 21 Nov 2022 10:07:28 +0100
Subject: [PATCH 18/23] fixing margins

---
 src/components/global/Button/Button.module.scss           | 8 ++++++--
 src/components/homepage/Benefits/Benefits.module.scss     | 2 +-
 .../DerivApiFeatures/DerivApiFeatures.module.scss         | 7 +++++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/global/Button/Button.module.scss b/src/components/global/Button/Button.module.scss
index 5e064be7..0bd3e61a 100644
--- a/src/components/global/Button/Button.module.scss
+++ b/src/components/global/Button/Button.module.scss
@@ -6,15 +6,17 @@
   padding: 1rem 0.5rem;
   border: none;
   border-radius: 4px;
-  font-size:var(--text-size-xs);
+  font-size: var(--text-size-xs);
   font-weight: 700;
   line-height: var(--text-lh-s);
   letter-spacing: normal;
   text-align: var(--text-align-center);
   cursor: pointer;
+
   &:hover {
     --btn-background: var(--red-02);
   }
+
   &.secondary {
     --btn-background: transparent;
     --btn-text-color: var(--black-01);
@@ -22,6 +24,7 @@
     border-radius: 4px;
     width: fit-content;
     padding: 0.8rem 1.6rem;
+
     &:hover {
       --btn-background: var(--gray-05);
     }
@@ -32,7 +35,8 @@ button[disabled] {
   background-color: var(--btn-background-disabled);
   color: var(--btn-text-color-disabled);
   cursor: not-allowed;
+
   &:hover {
     background-color: var(--btn-background-disabled);
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/homepage/Benefits/Benefits.module.scss b/src/components/homepage/Benefits/Benefits.module.scss
index 6e5d32fe..009e8819 100644
--- a/src/components/homepage/Benefits/Benefits.module.scss
+++ b/src/components/homepage/Benefits/Benefits.module.scss
@@ -62,7 +62,7 @@
         .personalisationContainer {
             display: flex;
             width: 100%;
-            justify-content: space-around;
+            justify-content: space-evenly;
             align-items: var(--text-align-center);
             margin: 4rem 0;
         }
diff --git a/src/components/homepage/DerivApiFeatures/DerivApiFeatures.module.scss b/src/components/homepage/DerivApiFeatures/DerivApiFeatures.module.scss
index b0280136..f3af9ec9 100644
--- a/src/components/homepage/DerivApiFeatures/DerivApiFeatures.module.scss
+++ b/src/components/homepage/DerivApiFeatures/DerivApiFeatures.module.scss
@@ -5,6 +5,10 @@
     width: 90%;
     align-items: center;
 
+    h1 {
+        text-align: left;
+    }
+
     .apiFeaturesDescription,
     .apiFeaturesImage {
         min-width: 32rem;
@@ -73,7 +77,6 @@
     .apiFeaturesDescription {
         h1 {
             padding: 0 0 1rem 0;
-            text-align: left;
         }
     }
-}
+}
\ No newline at end of file

From be392d29abd209ece31b0dccb65226f3f13338bb Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Mon, 21 Nov 2022 14:14:56 +0100
Subject: [PATCH 19/23] fixing buttons

---
 src/components/global/Button/Button.module.scss             | 2 +-
 src/components/global/LogoutButton/LogoutButton.module.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/global/Button/Button.module.scss b/src/components/global/Button/Button.module.scss
index 0bd3e61a..b3d1336a 100644
--- a/src/components/global/Button/Button.module.scss
+++ b/src/components/global/Button/Button.module.scss
@@ -1,7 +1,7 @@
 .btn {
   background-color: var(--btn-background);
   color: var(--btn-text-color);
-  width: 100%;
+  width: fit-content;
   height: fit-content;
   padding: 1rem 0.5rem;
   border: none;
diff --git a/src/components/global/LogoutButton/LogoutButton.module.scss b/src/components/global/LogoutButton/LogoutButton.module.scss
index 37179dd4..9913bca3 100644
--- a/src/components/global/LogoutButton/LogoutButton.module.scss
+++ b/src/components/global/LogoutButton/LogoutButton.module.scss
@@ -1,6 +1,7 @@
 .signOut {
   --btn-background: var(--black-01);
   width: 13rem;
+  text-align: center;
   display: block;
   z-index: 100;
   color: var(--white);
@@ -11,6 +12,5 @@
 
 [data-state*="mobile"] .signOut {
   position: relative;
-  text-align: center;
   bottom: 0.1rem;
 }

From 8431d821727a9b165f1e8594c7893ee03f070ec0 Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Tue, 22 Nov 2022 10:13:20 +0100
Subject: [PATCH 20/23] fixing padding bugs

---
 .../global/Accordion/Accordion.module.scss    |  7 ++++---
 .../global/DerivLogo/DerivLogo.module.scss    | 19 ++++++++++++------
 .../HeroHeader/HeroHeader.module.scss         |  1 +
 .../WaysToEarn/WaysToEarn.module.scss         | 20 ++++++++++++++-----
 src/index.scss                                |  4 ++++
 src/themes.scss                               |  2 +-
 6 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/components/global/Accordion/Accordion.module.scss b/src/components/global/Accordion/Accordion.module.scss
index 965aca22..7f4f63fc 100644
--- a/src/components/global/Accordion/Accordion.module.scss
+++ b/src/components/global/Accordion/Accordion.module.scss
@@ -1,4 +1,5 @@
 .accordion {
+  padding-left: 7.5rem;
 
   .accordionWrapper {
     display: flex;
@@ -75,11 +76,11 @@
   }
 }
 
-[data-state*="responsive.desktop"] {
+[data-state*="responsive.mobile"] {
   .accordion {
-    padding-left: 7.5rem;
+    padding-left: 0;
     .accordionHeader {
       padding: 1.6rem 2.8rem;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/global/DerivLogo/DerivLogo.module.scss b/src/components/global/DerivLogo/DerivLogo.module.scss
index cd058ebf..a0833dda 100644
--- a/src/components/global/DerivLogo/DerivLogo.module.scss
+++ b/src/components/global/DerivLogo/DerivLogo.module.scss
@@ -38,11 +38,18 @@
 }
 
 [data-state*="responsive.mobile"] {
-    .logo {
-        width: 8.4rem;
-    }
-    .branding {
-        font-size: var(--text-size-s);
-        margin-left: 0.8rem;
+    .logoLink {
+        justify-content: center;
+        .logo {
+            height: 4.8rem;
+            width: 8.4rem;
+        }
+        .branding {
+            font-size: var(--text-size-s);
+            margin-left: 0.8rem;
+            margin-bottom: 0;
+            padding-top: 0;
+            padding-left: 0.2rem;
+        }
     }
 }
diff --git a/src/components/homepage/HeroHeader/HeroHeader.module.scss b/src/components/homepage/HeroHeader/HeroHeader.module.scss
index 8bba9e7a..1ec091b3 100644
--- a/src/components/homepage/HeroHeader/HeroHeader.module.scss
+++ b/src/components/homepage/HeroHeader/HeroHeader.module.scss
@@ -20,6 +20,7 @@
         width: 100.8rem;
 
         .heroHeader {
+            padding: 0;
             max-width: 77.5rem;
             font-size: var(--text-size-xxl);
             font-weight: 700;
diff --git a/src/components/homepage/WaysToEarn/WaysToEarn.module.scss b/src/components/homepage/WaysToEarn/WaysToEarn.module.scss
index 8946a2d0..34287760 100644
--- a/src/components/homepage/WaysToEarn/WaysToEarn.module.scss
+++ b/src/components/homepage/WaysToEarn/WaysToEarn.module.scss
@@ -46,11 +46,21 @@
     .waysContainer {
         margin-top: 0;
 
-        .waysWrapper .ways {
-            max-width: 32.8rem;
-
-            >div {
-                padding-right: 2.4rem;
+        .waysWrapper {
+            width: 100%;
+            .ways {
+                max-width: 32.8rem;
+                margin: 1.6rem;
+                align-items: flex-start;
+                .checklistIcon {
+                    width: 3rem;
+                    height: 3rem;
+                    background-size: 3rem 3rem;
+                    margin-top: 0.4rem;
+                }
+                >div {
+                    padding-right: 2.4rem;
+                }
             }
         }
     }
diff --git a/src/index.scss b/src/index.scss
index e27d2a79..2185b06d 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -418,4 +418,8 @@ a.active {
   .pageWrapper {
     margin-left: 0;
   }
+
+  .subheader {
+    margin: 0 1.6rem 3.2rem 1.6rem;
+  }
 }
\ No newline at end of file
diff --git a/src/themes.scss b/src/themes.scss
index 0f7e44e3..744f6026 100644
--- a/src/themes.scss
+++ b/src/themes.scss
@@ -151,8 +151,8 @@ h5 {
 [data-state*="responsive.mobile"] {
     h1 {
         font-size: var(--text-size-l);
-        padding: 0 1.5rem;
         box-sizing: border-box;
+        padding: 0 1.6rem;
     }
 
     h2 {

From 78c495254f927788a7681a1160f82143d56f45c7 Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Tue, 22 Nov 2022 11:03:35 +0100
Subject: [PATCH 21/23] button fix

---
 .../AppRegistrationForm/AppRegistrationForm.module.scss        | 3 ---
 src/components/global/Button/Button.module.scss                | 3 ++-
 src/components/global/LogoutButton/LogoutButton.module.scss    | 3 +++
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss b/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss
index e396b0c9..77a69fff 100644
--- a/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss
+++ b/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss
@@ -133,9 +133,6 @@ fieldset .customTextInput:last-child {
                 margin-top: 2.5rem;
                 flex-wrap: wrap-reverse;
                 gap: 1.6rem;
-                button {
-                    font-size: 1.6rem;
-                }
             }
         }
         .formHeaderContainer {
diff --git a/src/components/global/Button/Button.module.scss b/src/components/global/Button/Button.module.scss
index b3d1336a..4ea42835 100644
--- a/src/components/global/Button/Button.module.scss
+++ b/src/components/global/Button/Button.module.scss
@@ -1,9 +1,10 @@
 .btn {
+  font-size: 1.4rem;
   background-color: var(--btn-background);
   color: var(--btn-text-color);
   width: fit-content;
   height: fit-content;
-  padding: 1rem 0.5rem;
+  padding: 1rem 1.6rem;
   border: none;
   border-radius: 4px;
   font-size: var(--text-size-xs);
diff --git a/src/components/global/LogoutButton/LogoutButton.module.scss b/src/components/global/LogoutButton/LogoutButton.module.scss
index 9913bca3..b98caca5 100644
--- a/src/components/global/LogoutButton/LogoutButton.module.scss
+++ b/src/components/global/LogoutButton/LogoutButton.module.scss
@@ -13,4 +13,7 @@
 [data-state*="mobile"] .signOut {
   position: relative;
   bottom: 0.1rem;
+  button {
+    padding: 1rem;
+  }
 }

From e32e0feb63a6344fbdf01e16469f27b7bf58e1fd Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Thu, 24 Nov 2022 09:36:07 +0100
Subject: [PATCH 22/23] fixing padding issues

---
 src/components/docs/Docs/Sidebar/Sidebar.module.scss        | 2 +-
 src/components/global/Header/Header.module.scss             | 1 +
 src/components/global/LogoutButton/LogoutButton.module.scss | 6 ++++--
 src/index.scss                                              | 2 +-
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/docs/Docs/Sidebar/Sidebar.module.scss b/src/components/docs/Docs/Sidebar/Sidebar.module.scss
index 22ace32f..9355d10d 100644
--- a/src/components/docs/Docs/Sidebar/Sidebar.module.scss
+++ b/src/components/docs/Docs/Sidebar/Sidebar.module.scss
@@ -97,7 +97,7 @@
 }
 
 .sidebartitle {
-    margin: 2.4rem 0 0 2rem;
+    margin: 2.4rem 0 0 0;
     padding-bottom: 1rem;
     font-size: 3.2rem;
     line-height: var(--text-lh-xs);
diff --git a/src/components/global/Header/Header.module.scss b/src/components/global/Header/Header.module.scss
index 031ec8ca..971b98b4 100644
--- a/src/components/global/Header/Header.module.scss
+++ b/src/components/global/Header/Header.module.scss
@@ -166,6 +166,7 @@
 [data-state*="responsive.mobile"] {
   .header {
     height: 4.8rem;
+    position: relative;
     .headerContainer {
       width: 100%;
       height: 5.6rem;
diff --git a/src/components/global/LogoutButton/LogoutButton.module.scss b/src/components/global/LogoutButton/LogoutButton.module.scss
index b98caca5..d6ee3e67 100644
--- a/src/components/global/LogoutButton/LogoutButton.module.scss
+++ b/src/components/global/LogoutButton/LogoutButton.module.scss
@@ -1,6 +1,6 @@
 .signOut {
   --btn-background: var(--black-01);
-  width: 13rem;
+  width: fit-content;
   text-align: center;
   display: block;
   z-index: 100;
@@ -11,7 +11,9 @@
 }
 
 [data-state*="mobile"] .signOut {
-  position: relative;
+  position: absolute;
+  top: 0;
+  right: 5px;
   bottom: 0.1rem;
   button {
     padding: 1rem;
diff --git a/src/index.scss b/src/index.scss
index 2185b06d..363d6280 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -212,7 +212,7 @@ textarea {
   flex-wrap: nowrap;
   width: 80%;
   align-items: center;
-  justify-content: center;
+  justify-content: space-evenly;
 }
 
 .single-container {

From 3fb3d72acde9f7430948da25505dc431ae64267e Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Thu, 1 Dec 2022 13:18:51 +0100
Subject: [PATCH 23/23] fix: fixing footer padding bug

---
 src/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.scss b/src/index.scss
index 363d6280..25547e94 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -350,7 +350,7 @@ textarea {
 
       .single-container {
         width: unset;
-        padding: 4rem 1.6rem 0;
+        padding: 4rem 1.6rem;
       }
     }