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/ApiGuideTable/ApiGuideTable.module.scss b/src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.module.scss
index 674ed99f..bb54b077 100644
--- a/src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.module.scss
+++ b/src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.module.scss
@@ -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/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.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/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/app-registration/AppManagement/AppManagement.module.scss b/src/components/app-registration/AppManagement/AppManagement.module.scss
index 9df6255d..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;
 }
 
@@ -100,7 +100,7 @@
         border-radius: 4px;
         color: var(--app-registration-tab-active-font);
         text-align: var(--text-align-center);
-        border-radius: 6px;
+        border-radius: 4px;
         padding: 0.5rem 0;
         position: absolute;
         z-index: 1;
@@ -124,7 +124,7 @@
     }
 
     &:hover {
-        transform: translateY(-2px);
+        transform: translateY(-0.2rem);
 
         .tooltipText {
             visibility: visible;
@@ -134,13 +134,13 @@
 }
 
 .scope {
-    border: 0.16rem solid #d6dadb;
-    border-radius: 0.4rem;
-    padding: 0.32rem 0.32rem;
-    font-size: var(--text-size-xxs);
+    border: 1.6px solid var(--border-normal);
+    border-radius: 4px;
+    padding: 0.24rem 0.24rem;
+    font-size: 1.1rem;
 }
 
 .adminScope {
-    border: 0.1rem 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 7d365efe..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 */
@@ -83,7 +82,7 @@
   height: auto;
   background-color: var(--white);
   border-radius: 16px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
   justify-content: space-between;
 }
 
@@ -166,7 +165,7 @@
   background-color: var(--white);
   color: black;
   font-weight: var(--text-weight-bold);
-  border: 1px solid #999999;
+  border: 0.1rem solid var(--gray-05);
   height: 4rem;
   border-radius: 4px;
   padding: 1rem 1.6rem 1rem 1.6rem;
@@ -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;
 }
@@ -318,7 +317,7 @@ fieldset {
   width: 100%;
   right: 0;
   top: 0;
-  bottom: -1px;
+  bottom: -0.1rem;
 }
 
 [data-state~="registration.logged_in.update_mode"] .register-app {
@@ -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/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss b/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss
index 4d19a9f2..77a69fff 100644
--- a/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss
+++ b/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss
@@ -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;
@@ -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 {
@@ -157,8 +154,8 @@ fieldset .customTextInput:last-child {
 }
 
 .scopeItem {
-    border: 0.16rem solid #d6dadb;
-    border-radius: 0.64rem;
+    border: 1.6px solid var(--border-normal);
+    border-radius: 6.4px;
     padding: 1.28rem 0.64rem;
 }
 
@@ -184,7 +181,7 @@ fieldset .customTextInput:last-child {
     }
     .infoIcon:hover .tooltip {
         width: 14rem;
-        transform: translate(-19%, calc(-100% - 10px));
+        transform: translate(-19%, calc(-100% - 1rem));
     }
 }
 
@@ -219,7 +216,7 @@ input[type='checkbox'] {
         height: 1.1rem;
         border-radius: 2px;
         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..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);
@@ -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,7 +205,7 @@
                 color: var(--text-01);
                 display: flex;
                 align-items: var(--text-align-center);
-                border-radius: 0px 4px 4px 0px;
+                border-radius: 0 4px 4px 0;
                 position: relative;
                 font-size: var(--text-size-xs);
                 &:before {
diff --git a/src/components/endpoint/Endpoint/Endpoint.module.scss b/src/components/endpoint/Endpoint/Endpoint.module.scss
index 4d011e97..70c0a0c9 100644
--- a/src/components/endpoint/Endpoint/Endpoint.module.scss
+++ b/src/components/endpoint/Endpoint/Endpoint.module.scss
@@ -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: 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 e62592b8..fba0bc31 100644
--- a/src/components/faq/Faq/Faq.module.scss
+++ b/src/components/faq/Faq/Faq.module.scss
@@ -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 {
@@ -22,9 +22,9 @@
   word-break: break-word;
   color: var(--white);
   border-radius: 4px;
-  padding: 24px;
-  margin-bottom: 16px;
-  background: #1d1f20;
+  padding: 2.4rem;
+  margin-bottom: 1.6rem;
+  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 ba587e9b..7f4f63fc 100644
--- a/src/components/global/Accordion/Accordion.module.scss
+++ b/src/components/global/Accordion/Accordion.module.scss
@@ -1,79 +1,86 @@
 .accordion {
-    @media (min-width: 992px) {
-      padding-left: 7.5rem;
+  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: 6px;
+      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: 4px;
+        padding: 0.2rem 0.4rem;
+        border: 1px solid var(--gray-02);
+        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.mobile"] {
+  .accordion {
+    padding-left: 0;
+    .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..4ea42835 100644
--- a/src/components/global/Button/Button.module.scss
+++ b/src/components/global/Button/Button.module.scss
@@ -1,4 +1,5 @@
 .btn {
+  font-size: 1.4rem;
   background-color: var(--btn-background);
   color: var(--btn-text-color);
   width: fit-content;
@@ -6,15 +7,17 @@
   padding: 1rem 1.6rem;
   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 +25,7 @@
     border-radius: 4px;
     width: fit-content;
     padding: 0.8rem 1.6rem;
+
     &:hover {
       --btn-background: var(--gray-05);
     }
@@ -32,7 +36,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/global/Checkbox/Checkbox.module.scss b/src/components/global/Checkbox/Checkbox.module.scss
index dd9354ab..ce476314 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;
 }
@@ -11,10 +11,10 @@ input[type="checkbox"] {
   display: inline-block;
   border: 2px solid var(--app-registration-tab-secondary);
   min-width: 1.1rem;
-  height: 11px;
+  height: 1.1rem;
   position: relative;
-  top: 1px;
-  margin-right: 8px;
+  top: 0.1rem;
+  margin-right: 0.8rem;
   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 3e73a461..f8bacc78 100644
--- a/src/components/global/CodeBlock/CodeBlock.module.scss
+++ b/src/components/global/CodeBlock/CodeBlock.module.scss
@@ -18,7 +18,7 @@
   .sub_title {
     font-size: var(--text-size-l);
     text-align: left;
-    margin-bottom: 8px;
+    margin-bottom: 0.8rem;
   }
 
   p {
diff --git a/src/components/global/DerivLogo/DerivLogo.module.scss b/src/components/global/DerivLogo/DerivLogo.module.scss
index b3cd0309..a0833dda 100644
--- a/src/components/global/DerivLogo/DerivLogo.module.scss
+++ b/src/components/global/DerivLogo/DerivLogo.module.scss
@@ -15,8 +15,8 @@
         font-size: var(--text-size-m);
         padding-top: 4rem;
         font-weight: normal;
-        color: #ffffff;
-        margin-left: 24px;
+        color: var(--white);
+        margin-left: 2.4rem;
     }
     .logo {
         background-image: url(/img/deriv.svg);
@@ -38,11 +38,18 @@
 }
 
 [data-state*="responsive.mobile"] {
-    .logo {
-        width: 8.4rem;
-    }
-    .branding {
-        font-size: var(--text-size-s);
-        margin-left: 8px;
+    .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;
+        }
     }
-}
\ 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..cec74046 100644
--- a/src/components/global/Dialog/Dialog.module.scss
+++ b/src/components/global/Dialog/Dialog.module.scss
@@ -18,9 +18,9 @@
   transform: translate(-50%, -50%);
   width: 32rem;
   height: auto;
-  background-color: #fff;
+  background-color: var(--white);
   border-radius: 16px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+  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..971b98b4 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,17 +50,17 @@
     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;
+        color: var(--copy-color);
 
         &::before {
           visibility: hidden;
@@ -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 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: 0px 4px 4px 0px;
+        border-radius: 0 4px 4px 0;
         background-color: transparent;
         border: none;
         &::after {
@@ -165,16 +165,17 @@
 }
 [data-state*="responsive.mobile"] {
   .header {
-    height: 48px;
+    height: 4.8rem;
+    position: relative;
     .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 +184,7 @@
   }
   &[data-state~="hamburger.hamburger_closed"] {
     .hamburgerNavigation {
-      left: -260px;
+      left: -26rem;
     }
   }
   &[data-state~="hamburger.hamburger_open"] {
@@ -219,25 +220,25 @@
 [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 4px 4px 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;
+        width: 0.4rem;
         border-radius: 4px 0 0 4px;
       }
       &::after {
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..84f05d75
--- /dev/null
+++ b/src/components/global/InlineCode/InlineCode.tsx
@@ -0,0 +1,3 @@
+import styles from './InlineCode.module.scss';
+
+export const InlineCode = ({ children }) => <code className={styles.inlineCode}>{children}</code>;
diff --git a/src/components/global/LogoutButton/LogoutButton.module.scss b/src/components/global/LogoutButton/LogoutButton.module.scss
index 098a5ee9..d6ee3e67 100644
--- a/src/components/global/LogoutButton/LogoutButton.module.scss
+++ b/src/components/global/LogoutButton/LogoutButton.module.scss
@@ -1,5 +1,7 @@
 .signOut {
   --btn-background: var(--black-01);
+  width: fit-content;
+  text-align: center;
   display: block;
   z-index: 100;
   color: var(--white);
@@ -9,8 +11,11 @@
 }
 
 [data-state*="mobile"] .signOut {
-  position: relative;
-  width: 13rem;
-  text-align: center;
-  bottom: 1px;
+  position: absolute;
+  top: 0;
+  right: 5px;
+  bottom: 0.1rem;
+  button {
+    padding: 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.jsx b/src/components/global/ResetSendButtonsBlock/ResetSendButtonsBlock.jsx
index d84fab5e..a4a79a30 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';
 
@@ -19,21 +19,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/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/homepage/Benefits/Benefits.module.scss b/src/components/homepage/Benefits/Benefits.module.scss
index dbc0bcd3..009e8819 100644
--- a/src/components/homepage/Benefits/Benefits.module.scss
+++ b/src/components/homepage/Benefits/Benefits.module.scss
@@ -1,12 +1,5 @@
 .benefitsContainer {
-    .benefitsTitle {
-        margin-bottom: 1rem;
-        color: var(--text-01);
-        font-size: var(--text-size-xl);
-        margin-bottom: 40px;
-        text-align: center;
-    }
-
+    width: 80%;
     .benefitsIcons {
         width: 65%;
         flex-wrap: nowrap;
@@ -44,6 +37,10 @@
         justify-content: space-evenly;
         width: 100%;
 
+        h3 {
+            margin: 1.6rem 0;
+        }
+
         div {
             width: 48.6rem;
         }
@@ -65,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;
         }
@@ -83,7 +80,7 @@
                 }
 
                 p {
-                    font-size: 22px;
+                    font-size: var(--text-size-m);
                     line-height: 3.2rem;
                 }
             }
@@ -149,7 +146,7 @@
 
                 .personalisation {
                     width: 90% !important;
-                    margin: 0 auto 30px;
+                    margin: 0 auto 3rem;
 
                     h3 {
                         font-size: var(--text-size-m);
@@ -192,20 +189,6 @@
                 margin-bottom: 0;
             }
 
-            .personalisationContainer {
-                .personalisationImage {
-                    width: 100%;
-                    margin: 0 auto;
-                }
-            }
-
-            .earnMoreContainer {
-                .earnMoreImage {
-                    width: 100%;
-                    margin: 0 auto;
-                }
-            }
-
             .personalisation,
             .earnMore {
                 margin: 0;
@@ -225,4 +208,14 @@
         max-width: 48.6rem;
         height: 15rem;
     }
-}
\ No newline at end of file
+}
+
+[data-state~="responsive.desktopL"] {
+    .personalisation {
+        order: 2;
+    }
+
+    .personalisationImage {
+        order: 1;
+    }
+}
diff --git a/src/components/homepage/Benefits/Benefits.tsx b/src/components/homepage/Benefits/Benefits.tsx
index 3b9c2c7d..5e465089 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..19697644 100644
--- a/src/components/homepage/ClientLibraries/ClientLibraries.module.scss
+++ b/src/components/homepage/ClientLibraries/ClientLibraries.module.scss
@@ -1,72 +1,75 @@
-.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 {
+    .clientLibrary {
 
-    .libraryLinks {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: var(--text-align-center);
+        h1 {
+            margin: 1.8rem 0;
+            width: 100%;
+        }
 
-        .logoAndLink {
-            padding: 1rem 2rem;
+        .subheader {
+            padding: 0 1.5rem;
+        }
 
-            .libraryGoTo {
-                display: flex;
-                align-items: var(--text-align-center);
+        .iconJsLibrary {
+            background-image: url(/img/js-library.svg);
+            background-repeat: no-repeat;
+            background-position: var(--text-align-center);
+            width: 6.4rem;
+            height: 6.4rem;
+        }
 
-                .logoJavascript {
-                    background-image: url(/img/js.svg);
-                }
+        .libraryLinks {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: var(--text-align-center);
 
-                .logoPython {
-                    background-image: url(/img/py.svg);
-                }
+            .logoAndLink {
+                padding: 1rem 2rem;
 
-                .logoFlutter {
-                    background-image: url(/img/flutter.svg);
-                }
+                .libraryGoTo {
+                    display: flex;
+                    align-items: var(--text-align-center);
 
-                .logoJavascript,
-                .logoPython,
-                .logoFlutter {
-                    background-repeat: no-repeat;
-                    background-position: var(--text-align-center);
-                    width: 4rem;
-                    height: 4rem;
-                }
+                    .logoJavascript {
+                        background-image: url(/img/js.svg);
+                    }
 
-                .logoJavascript,
-                .logoPython {
-                    margin-right: 1rem;
-                }
+                    .logoPython {
+                        background-image: url(/img/py.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;
-                }
+                    .logoFlutter {
+                        background-image: url(/img/flutter.svg);
+                    }
+
+                    .logoJavascript,
+                    .logoPython,
+                    .logoFlutter {
+                        background-repeat: no-repeat;
+                        background-position: var(--text-align-center);
+                        width: 4rem;
+                        height: 4rem;
+                    }
+
+                    .logoJavascript,
+                    .logoPython {
+                        margin-right: 1rem;
+                    }
+
+                    .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;
+                    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 b3f93aab..abdc5dc1 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 />
                         faster with the client library of your choice.
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/DerivApiFeatures/DerivApiFeatures.module.scss b/src/components/homepage/DerivApiFeatures/DerivApiFeatures.module.scss
index 7f6cd467..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;
@@ -13,19 +17,10 @@
 
     .apiFeaturesDescription {
         width: 48.6rem;
-        margin-left: 4rem;
+        margin-left: 2rem;
         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;
 
@@ -76,4 +71,12 @@
             font-size: 2.2rem;
         }
     }
+}
+
+[data-state*="responsive.mobile"] {
+    .apiFeaturesDescription {
+        h1 {
+            padding: 0 0 1rem 0;
+        }
+    }
 }
\ No newline at end of file
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/GetStarted/GetStarted.module.scss b/src/components/homepage/GetStarted/GetStarted.module.scss
index e062a839..5f26a430 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);
-}
\ No newline at end of file
+}
+
+.withPattern {
+    background-image: url(/img/pattern.svg);
+    object-fit: contain;
+}
+
+[data-state*="responsive.mobile"] {
+
+    .termConditions,
+    .termConditions a {
+        text-align: center;
+        max-width: 35rem;
+        font-size: var(--text-size-xs);
+        margin-top: 0;
+    }
+}
diff --git a/src/components/homepage/GetStarted/GetStarted.tsx b/src/components/homepage/GetStarted/GetStarted.tsx
index a5de75b7..740865c1 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'
@@ -42,7 +42,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/HeroHeader/HeroHeader.module.scss b/src/components/homepage/HeroHeader/HeroHeader.module.scss
index 9ad988cf..1ec091b3 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;
@@ -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/HomepageFooter/HomepageFooter.module.scss b/src/components/homepage/HomepageFooter/HomepageFooter.module.scss
new file mode 100644
index 00000000..a74fc4d4
--- /dev/null
+++ b/src/components/homepage/HomepageFooter/HomepageFooter.module.scss
@@ -0,0 +1,8 @@
+.communityBtn {
+    padding: 0.6rem 1.6rem;
+    border-radius: 4px;
+    font-weight: 700;
+    font-size: var(--text-size-xs);
+    line-height: 2rem;
+    border: solid 1px var(--gray-04);
+}
diff --git a/src/components/homepage/HomepageFooter/HomepageFooter.tsx b/src/components/homepage/HomepageFooter/HomepageFooter.tsx
index 704a8d36..ded2637d 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'>
@@ -8,7 +9,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..28008e8c 100644
--- a/src/components/homepage/HomepageSlider/HomepageSlider.module.scss
+++ b/src/components/homepage/HomepageSlider/HomepageSlider.module.scss
@@ -4,8 +4,45 @@
   transform: translate(0);
   width: 33vw;
   height: 24.8rem;
+
+  .control {
+    position: absolute;
+    top: 35%;
+    width: 5rem;
+    height: 5rem;
+    z-index: 2;
+  }
+
+  .prev,
+  .next {
+    background-size: 2.2rem;
+    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: 24.8rem;
+    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: 2rem 0;
+          border: none;
+          width: 15rem;
+          height: 0.1rem;
+          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,8 +123,18 @@
 [data-state*="responsive.mobile"] {
   .slider {
     width: 70vw;
+
+    .prev {
+      left: -5.5rem;
+    }
+
+    .next {
+      right: -5.5rem;
+    }
+
     .sliderWrapper {
       width: 70vw;
+
       .slides .slide {
         width: 70vw;
       }
diff --git a/src/components/homepage/HomepageSlider/HomepageSlider.tsx b/src/components/homepage/HomepageSlider/HomepageSlider.tsx
index 11cd99a5..399b6051 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,16 @@ 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 fc88b94f..6b0c6f7e 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..34287760 100644
--- a/src/components/homepage/WaysToEarn/WaysToEarn.module.scss
+++ b/src/components/homepage/WaysToEarn/WaysToEarn.module.scss
@@ -1,21 +1,19 @@
 .waysContainer {
-    margin-top: 20px;
+    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;
 
-        h2 {
-            text-align: var(--text-align-center);
-            max-width: 38.4rem;
+        h1 {
+            max-width: 384px;
             color: var(--text-01);
-            font-size: var(--text-size-xl);
-            margin-bottom: 4rem;
-            text-align: var(--text-align-center);
+            margin-bottom: 40px;
+            text-align: center;
         }
 
         .ways {
@@ -48,21 +46,22 @@
     .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;
+                }
             }
         }
     }
 }
-
-[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 d2c5e136..099f9bd1 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/components/playground/PlaygroundComponent/PlaygroundComponent.module.scss b/src/components/playground/PlaygroundComponent/PlaygroundComponent.module.scss
index 2d171110..c10f2a90 100644
--- a/src/components/playground/PlaygroundComponent/PlaygroundComponent.module.scss
+++ b/src/components/playground/PlaygroundComponent/PlaygroundComponent.module.scss
@@ -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);
@@ -75,7 +75,7 @@
     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);
@@ -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.jsx b/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.jsx
index 0366acb1..c8f4fb9b 100644
--- a/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.jsx
+++ b/src/components/playground/PlaygroundComponent/SelectRequestInput/SelectRequestInput.jsx
@@ -33,7 +33,7 @@ const SelectRequestInput = ({ selected, setSelected, handleChange, selected_valu
         <div>
             <div className={styles.dropdown} ref={ref}>
                 <div className={styles.dropdownBtn} onClick={handleToggleDropdown} data-testid='apiDropdown'>
-                    {selected_value}
+                    <span>{selected_value}</span>
                     <span className={`${styles.arrow} ${isActive ? styles.down : ''}`} />
                 </div>
                 {isActive && (
@@ -48,8 +48,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())
@@ -70,7 +74,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/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/PlaygroundComponent/TokenInputField/TokenInputField.module.scss b/src/components/playground/PlaygroundComponent/TokenInputField/TokenInputField.module.scss
index 7614f7d6..d9db21b8 100644
--- a/src/components/playground/PlaygroundComponent/TokenInputField/TokenInputField.module.scss
+++ b/src/components/playground/PlaygroundComponent/TokenInputField/TokenInputField.module.scss
@@ -31,7 +31,7 @@
       width: 100%;
       height: 4rem;
       padding: 0 1.2rem;
-      border-radius: 4px 0 0 4px;
+      border-radius: 0.4rem 0 0 0.4rem;
       border: solid 1px var(--border-normal);
       font-size: 1.4rem;
       line-height: var(--text-lh-s);
diff --git a/src/components/playground/Schema/Schema.module.scss b/src/components/playground/Schema/Schema.module.scss
index 47b38bdd..5a96aedc 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: 5px;
+      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;
@@ -286,19 +307,20 @@
   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;
   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,9 +337,11 @@
   .enumFlex {
     flex-wrap: wrap;
   }
+
   .schemaHeader {
     .schemaDescription {
       flex-wrap: wrap;
+
       .schemaAuthRequired {
         width: unset;
       }
diff --git a/src/index.scss b/src/index.scss
index fe8757c3..25547e94 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,107 +1,3 @@
-@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;
@@ -110,379 +6,85 @@ body {
 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;
-  }
+  &.active {
+    background-color: var(--hamburger-active-link);
+    font-weight: bold;
 
-  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;
+    &::before {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      height: 4rem;
+      width: 0.4rem;
+      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 {
-    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;
-  }
-}
-
-@media (max-width: 992px) and (max-width: 480px) {
-  .main-content .main-page-row h1 {
-    font-size: 32px;
-  }
+p {
+  line-height: 2.8rem;
+  margin-bottom: 1.6rem;
 }
 
-@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: 1.6rem;
 }
 
-@media (max-width: 1499px) {
-  .personalisation {
-    order: 2;
-  }
-
-  .personalisation-image {
-    order: 1;
-  }
-
-  .earn-more-image {
-    order: 3;
-  }
+ul {
+  margin-left: 2rem;
 
-  .earn-more {
-    order: 4;
+  li {
+    margin-bottom: 1.6rem;
   }
 }
 
-li {
+textarea {
   font-size: var(--text-size-s);
-  margin-top: 16px;
+  resize: none;
+  width: calc(100% - 1.6rem);
+  min-height: 11.9rem;
+  margin-top: 1.5rem;
+  padding: 1rem;
+  border-radius: 4px;
+  border: solid 1px 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;
 }
 
-.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: 4rem;
 }
 
-.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,124 +96,123 @@ blockquote:after {
   justify-content: center;
 }
 
-.gray {
-  background-color: var(--blockquote-separator-color);
+.doc-content {
+  display: flex;
+  min-height: 95vh;
+  overflow-y: auto;
 }
 
-.white {
-  background-color: var(--white);
+.error-message {
+  color: var(--red-01);
+  font-size: var(--text-size-xs);
+  font-weight: 400;
+  padding-left: 1rem;
 }
 
-.subheader {
-  font-size: 24px;
-  text-align: center;
-  line-height: 1.5;
-  color: var(--text-01);
-  margin-bottom: 40px;
+.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;
+  }
 }
 
-textarea {
-  width: calc(100% - 16px);
-  min-height: 119px;
-  border-radius: 4px;
-  border: solid 1px var(--border-normal);
-  margin-top: 1.5rem;
+.main-content {
+  display: flex;
+  flex-direction: column;
 }
 
-.center {
+.main-page-row {
   display: flex;
+  flex-direction: column;
   width: 100%;
-  justify-content: center;
+  height: fit-content;
+  flex-wrap: wrap;
   align-items: center;
-  margin-bottom: 1rem;
-}
+  justify-content: center;
+  padding: 8rem 0;
 
-@media (max-width: 992px) {
-  .row-container .single-container>h2 {
-    font-size: 24px;
+  &.ways-row {
+    padding: 0;
   }
 }
 
-@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-page-card {
+  width: 100%;
+  max-width: 31.6rem;
+  padding: 3.2rem 2.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;
 
-  .main-content .main-page-row .card-container {
-    flex-direction: column;
-    padding: 24px 16px 0;
+  .content {
+    font-size: var(--text-size-s);
+    line-height: 1.5;
+    color: var(--text-01);
     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;
+  .hide-on-desktop {
+    display: none;
   }
 
-  .main-content .main-page-row .single-container h1 {
-    font-size: 24px;
+  .hide-on-mobile {
+    display: block;
   }
 
-  .main-content .main-page-row .single-container .subheader {
-    font-size: 16px;
-  }
+  .header {
+    display: flex;
+    width: 100%;
 
-  .main-content .container {
-    flex-direction: column;
-  }
+    h3 {
+      font-size: var(--text-size-m);
+      font-weight: 700;
+      color: var(--text-01);
+      margin-bottom: 0.8rem;
+      float: left;
+      width: 100%;
+    }
 
-  .main-content .container .row-container {
-    width: 100%;
-  }
+    img {
+      float: right;
+      padding-left: 1rem;
+    }
 
-  .main-content .container .row-container .single-container {
-    width: unset;
-    padding: 40px 16px 0;
   }
 }
 
-.main-page-row {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: fit-content;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  padding: 80px 0;
-
-  &.ways-row {
-    padding: 0;
-  }
+.numbered-list {
+  margin-left: 4rem;
+  margin-bottom: 2.4rem;
 
-  .clients-opinion {
-    color: var(--text-01);
-    font-size: 48px;
-    margin-bottom: 40px;
-    text-align: center;
+  li {
+    margin-bottom: 1rem;
+    list-style-type: decimal;
   }
 }
 
 .pageWrapper {
   width: 100%;
   color: var(--text-01);
-  padding-bottom: 20px;
-  margin-left: 300px;
+  padding-bottom: 2rem;
+  margin-left: 30rem;
+}
+
+.row-container {
+  display: flex;
+  flex-wrap: nowrap;
+  width: 80%;
+  align-items: center;
+  justify-content: space-evenly;
 }
 
 .single-container {
@@ -623,215 +224,163 @@ textarea {
   justify-content: center;
   width: 80%;
 
-  .header {
-    color: var(--text-01);
-    font-size: 48px;
-    margin-bottom: 40px;
-    text-align: center;
+  h1 {
+    width: 80%;
+    margin-bottom: 1.2rem;
+    line-height: 1.25;
   }
-}
-
-.single-container p {
-  margin-bottom: 32px;
-  text-align: center;
-}
-
-.single-container p a {
-  color: var(--red-01);
-}
 
-.single-container h1 {
-  width: 80%;
-  margin-bottom: 12px;
-  line-height: 1.25;
-}
+  >h2 {
+    font-size: var(--text-size-l);
+    margin-bottom: 0.8rem;
+    color: var(--white);
+  }
 
-.single-container img {
-  margin-bottom: 24px;
-}
+  p {
+    margin-bottom: 3.2rem;
+    text-align: center;
 
-.container {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  min-height: 208px;
-  align-items: center;
-  justify-content: center;
-}
+    a {
+      color: var(--red-01);
+    }
+  }
 
-.single-container>h2 {
-  font-size: 32px;
-  margin-bottom: 8px;
-  color: var(--white);
+  img {
+    margin-bottom: 2.4rem;
+  }
 }
 
-.with-pattern {
-  background-image: url(/img/pattern.svg);
-  object-fit: contain;
+.subheader {
+  font-size: var(--text-size-m);
+  text-align: center;
+  line-height: 1.5;
+  color: var(--text-01);
+  margin-bottom: 4rem;
 }
 
-.community-btn {
-  padding: 6px 16px;
-  border-radius: 4px;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 20px;
-  border: solid 1px var(--gray-04);
+.gray {
+  background-color: var(--blockquote-separator-color);
 }
 
-.card-container {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 40px;
+.white {
+  background-color: var(--white);
 }
 
-.column-container {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  width: 80%;
-  align-items: center;
-  justify-content: center;
+.dark {
+  color: var(--white);
+  background-color: var(--black-01);
 
-  .header_h2 {
-    color: var(--text-01);
-    font-size: 48px;
-    margin-bottom: 40px;
-    text-align: center;
+  p {
+    color: var(--copy-color);
   }
-}
 
-.row-container {
-  display: flex;
-  flex-wrap: nowrap;
-  width: 80%;
-  align-items: center;
-  justify-content: center;
+  .selected,
+  a {
+    color: var(--white);
+  }
 }
 
-.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;
-}
+[data-state*="responsive.mobile"] {
+  .row-container {
+    flex-direction: column;
+  }
 
-.main-page-card .header {
-  display: flex;
-  width: 100%;
-}
+  .doc-content {
+    padding: 7.5rem 1.5rem 4rem;
+  }
 
-.main-page-card .header img {
-  float: right;
-  padding-left: 10px;
-}
+  .main-content {
+    .main-page-row {
+      padding: 4rem 0;
 
-.main-page-card .header h3 {
-  font-size: 24px;
-  font-weight: 700;
-  color: var(--text-01);
-  margin-bottom: 8px;
-  float: left;
-  width: 100%;
-}
+      .card-container {
+        flex-direction: column;
+        padding: 2.4rem 1.6rem 0;
+        margin-bottom: 0;
 
-.main-page-card .content {
-  font-size: 16px;
-  line-height: 1.5;
-  color: var(--text-01);
-  margin-bottom: 0;
-}
+        .main-page-card {
+          width: unset;
+          margin: 0 0 2.4rem;
+        }
+      }
 
-.main-page-card .hide-on-desktop {
-  display: none;
-}
+      .column-container h1 {
+        margin-bottom: 0 !important;
+      }
 
-@media (max-width: 480px) {
-  .main-page-card .hide-on-desktop {
-    display: block;
-  }
-}
+      .single-container {
+        font-size: var(--text-size-m);
 
-.main-page-card .hide-on-mobile {
-  display: block;
-}
-
-@media (max-width: 480px) {
-  .main-page-card .hide-on-mobile {
-    display: none;
-  }
-}
+        .subheader {
+          font-size: var(--text-size-s);
+        }
+      }
 
-@media (max-width: 480px) {
-  .main-page-card {
-    padding: 28px 16px 24px;
+      .column-container,
+      .row-container,
+      .row-container .single-container {
+        width: 100%;
+      }
+    }
   }
-}
 
-ul {
-  margin-left: 20px;
-}
+  .container {
+    flex-direction: column;
 
-ul li {
-  margin-bottom: 16px;
-}
+    .row-container {
+      width: 100%;
 
-.subheader {
-  font-size: 24px;
-  text-align: center;
-  color: var(--text-01);
-  margin-bottom: 40px;
+      .single-container {
+        width: unset;
+        padding: 4rem 1.6rem 0;
+      }
+    }
+  }
 }
 
-textarea {
-  width: calc(100% - 16px);
-  min-height: 119px;
-  padding: 10px;
-  border-radius: 4px;
-  border: solid 1px var(--border-normal);
-}
+[data-state*="responsive.desktop"] {
+  .doc-content {
+    padding: 12.8rem 5rem 0 5rem;
+  }
 
-button {
-  cursor: pointer;
-}
+  .main-content {
 
-.main-content {
-  display: flex;
-  flex-direction: column;
-}
+    .row-container {
+      width: 100%;
 
-textarea {
-  font-size: 16px;
-  resize: none;
-}
+      .single-container {
+        width: unset;
+        padding: 4rem 1.6rem;
+      }
+    }
 
-.progress {
-  margin: 0 auto;
-}
+    .main-page-row {
+      .card-container {
+        margin-bottom: 0;
 
-.dark {
-  color: var(--white);
-  background-color: var(--black-01);
+        .main-page-card {
+          width: unset;
+          margin: 0 1.2rem 2.4rem;
+        }
+      }
+    }
+  }
 }
 
-.dark .selected,
-.dark a {
-  color: var(--white);
-}
+[data-state~="responsive.mobileS"],
+[data-state~="responsive.mobileM"] {
 
-.dark p {
-  color: var(--copy-color);
-}
+  .main-page-card {
+    padding: 2.8rem 1.6rem 2.4rem;
 
-.hidden {
-  display: none;
-}
+    .hide-on-desktop {
+      display: block;
+    }
 
-.mb-16p {
-  margin-bottom: 16px;
+    .hide-on-mobile {
+      display: none;
+    }
+  }
 }
 
 [data-state*="responsive.mobile"][data-state~="hamburger.hamburger_open"] {
@@ -869,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 53c9b4ac..744f6026 100644
--- a/src/themes.scss
+++ b/src/themes.scss
@@ -1,5 +1,73 @@
+@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: 10rem;
+}
+
 :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-01: #1e90ff;
+    --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: var(--gray-08);
+    --hamburger-active-link: var(--gray-06);
+    --hamburger-menu-width: 26rem;
+    --white: #ffffff;
+    --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);
+    --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;
@@ -13,7 +81,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;
@@ -22,14 +90,80 @@
     --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;
+
+    // Spinner
+    --spinner-height: 10rem;
+    --spinner-width: 10rem;
+}
+
+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);
+}
+
+h1 {
+    @include header;
+    font-size: var(--text-size-xl);
+    margin-bottom: 4rem;
+    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: 1rem;
+}
+
+[data-state*="responsive.mobile"] {
+    h1 {
+        font-size: var(--text-size-l);
+        box-sizing: border-box;
+        padding: 0 1.6rem;
+    }
+
+    h2 {
+        font-size: var(--text-size-m);
+    }
+
+    h3 {
+        font-size: var(--text-size-xsm);
+    }
+
+    h4 {
+        font-size: var(--text-size-s);
+    }
 }