diff --git a/src/components/CustomAccordion/custom-accordion.scss b/src/components/CustomAccordion/custom-accordion.scss
index fe7a6fe1..2efd91fc 100644
--- a/src/components/CustomAccordion/custom-accordion.scss
+++ b/src/components/CustomAccordion/custom-accordion.scss
@@ -1,8 +1,8 @@
 .accordion_root {
   margin: 16px;
-  margin-top: 48px;
   display: flex;
   flex-direction: column;
+  gap: 0.25rem;
 
   @media screen and (max-width: 786px) {
     margin-top: 15px;
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
index 4327699a..1395489c 100644
--- a/src/components/Footer/Footer.module.scss
+++ b/src/components/Footer/Footer.module.scss
@@ -24,7 +24,7 @@
     position: relative;
     align-self: flex-start;
     padding-bottom: rem(4.8);
-    gap: 24px;
+    gap: rem(1.5);
   }
 
   .Section1 {
@@ -39,6 +39,9 @@
     font-size: rem(1.6) !important;
     color: var(--core-color-solid-slate-1400, #000);
     text-align: left;
+  }
+
+  h6 {
     margin-bottom: rem(1.6);
   }
 
@@ -51,7 +54,7 @@
     margin-bottom: rem(1.6) !important;
     display: flex;
     align-items: flex-start;
-    gap: 8px;
+    gap: rem(0.5);
   }
 
   h3 {
@@ -67,10 +70,12 @@
   .Link {
     display: flex;
     align-items: center;
-    gap: 8px;
-    color: #000;
+    gap: rem(0.5);
     text-decoration: none;
-    margin-bottom: rem(1.6);
+  }
+
+  .labelcolor {
+    color: var(--component-textIcon-normal-prominent);
   }
 
   .SectionContent {
@@ -90,15 +95,16 @@
     font-weight: 700;
     line-height: 22px;
     display: flex;
-    gap: 20px;
+    gap: rem(0.8);
     white-space: nowrap;
+    justify-content: center;
   }
 
   .PaddedButton {
     display: flex;
     width: 100%;
-    padding: 8px 10px;
-    gap: 8px;
+    padding: rem(0.5) rem(0.625);
+    gap: rem(0.5);
   }
 
   .FullWidthButton {
@@ -108,8 +114,11 @@
 
   .Box {
     border: 1px solid #ddd;
-    padding: 16px;
+    padding: rem(1.6);
     border-radius: rem(2.4);
+    display: flex;
+    flex-direction: column;
+    gap: rem(0.8);
   }
 
   .EmailButton {
@@ -118,7 +127,6 @@
     line-height: 22px;
     display: flex;
     width: 100%;
-    margin-top: 12px;
   }
 
   .MobileAccordion {
@@ -142,11 +150,12 @@
     .CommunityButton {
       display: flex;
       flex-direction: column !important;
-      gap: 10px;
+      gap: rem(0.625);
+      padding-right: rem(2);
     }
     .PaddedButton {
       width: 100%;
-      padding: 10px 0px;
+      padding: rem(0.625) rem(0);
     }
     .FullWidthButton {
       width: 100%;
@@ -162,8 +171,7 @@
     .CommunityButton {
       display: flex;
       flex-direction: row;
-      align-items: center;
-      gap: 10px;
+      gap: rem(0.8);
       flex-wrap: nowrap;
       width: 100%;
     }
@@ -173,7 +181,7 @@
     }
     .FooterSection {
       grid-template-columns: 2fr;
-      gap: 24px;
+      gap: rem(1.5);
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
@@ -196,18 +204,16 @@
     }
 
     .Box {
-      width: 400px !important;
       display: flex;
       flex-direction: column;
-      gap: 16px;
+      gap: rem(1);
       flex: 1 0 0;
-      padding-left: 32px;
-      padding-right: 32px;
+      padding: rem(2) rem(2);
     }
 
     .FooterLogo {
       display: flex;
-      gap: 24px;
+      gap: rem(1.5);
       padding-bottom: 0px;
     }
 
@@ -224,7 +230,7 @@
       .MobileAccordion {
         display: block;
         width: 100%;
-        margin-bottom: 16px;
+        margin-bottom: rem(1);
       }
 
       .Box {
@@ -245,13 +251,14 @@
       }
       .FooterSection {
         justify-content: center;
-        gap: 24px;
+        gap: rem(1.5);
         width: 100%;
       }
     }
 
     .LogoWrapper {
       align-self: center;
+      padding: rem(1);
     }
 
     .Section1:nth-child(1),
@@ -268,5 +275,5 @@
 }
 
 .accordion_header_trigger {
-  padding: 24px 0px;
+  padding: rem(1.5) 0;
 }
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 3d6a15c7..0b6c55c9 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
-import { Text } from '@deriv/ui';
-import { LabelPairedArrowUpRightSmRegularIcon } from '@deriv/quill-icons';
-import { Button } from '@deriv/ui';
-import { SocialTelegramBlackIcon } from '@deriv/quill-icons';
-import { LabelPairedEnvelopeCaptionBoldIcon } from '@deriv/quill-icons';
-import Translate from '@docusaurus/Translate';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import CustomAccordion from '../CustomAccordion';
+import { Text, Button } from '@deriv-com/quill-ui';
+import {
+  LabelPairedArrowUpRightSmRegularIcon,
+  SocialTelegramBlackIcon,
+  LabelPairedEnvelopeCaptionBoldIcon,
+} from '@deriv/quill-icons';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Translate from '@docusaurus/Translate';
 import styles from './Footer.module.scss';
 
 import GrayLogo from '../../assets/gray-logo.svg';
@@ -53,13 +54,23 @@ const Footer = () => {
             </a>
           </li>
           <li>
-            <a href='https://tech.deriv.com/' target='blank' className={styles.Link}>
-              <LabelPairedArrowUpRightSmRegularIcon /> <Translate>Deriv Tech</Translate>
+            <a
+              href='https://deriv.com/derivtech'
+              target='_blank'
+              className={styles.Link}
+              rel='noreferrer'
+            >
+              <Translate>Deriv Tech</Translate> <LabelPairedArrowUpRightSmRegularIcon />
             </a>
           </li>
           <li>
-            <a href='https://hackerone.com/deriv?type=team' target='blank' className={styles.Link}>
-              <LabelPairedArrowUpRightSmRegularIcon /> <Translate>Bug bounty</Translate>
+            <a
+              href='https://hackerone.com/deriv?type=team'
+              target='_blank'
+              className={styles.Link}
+              rel='noreferrer'
+            >
+              <Translate>Bug bounty</Translate> <LabelPairedArrowUpRightSmRegularIcon />
             </a>
           </li>
         </ul>
@@ -70,18 +81,28 @@ const Footer = () => {
       content: (
         <ul className={styles.List}>
           <li>
-            <a href={footer_links.root} target='blank' className={styles.Link}>
-              <LabelPairedArrowUpRightSmRegularIcon /> <Translate>Homepage</Translate>
+            <a href={footer_links.root} target='_blank' className={styles.Link} rel='noreferrer'>
+              <Translate>Homepage</Translate> <LabelPairedArrowUpRightSmRegularIcon />
             </a>
           </li>
           <li>
-            <a href={footer_links.who_we_are} target='blank' className={styles.Link}>
-              <LabelPairedArrowUpRightSmRegularIcon /> <Translate>Who we are</Translate>
+            <a
+              href={footer_links.who_we_are}
+              target='_blank'
+              className={styles.Link}
+              rel='noreferrer'
+            >
+              <Translate>Who we are</Translate> <LabelPairedArrowUpRightSmRegularIcon />
             </a>
           </li>
           <li>
-            <a href={footer_links.contact_us} target='blank' className={styles.Link}>
-              <LabelPairedArrowUpRightSmRegularIcon /> <Translate>Contact us</Translate>
+            <a
+              href={footer_links.contact_us}
+              target='_blank'
+              className={styles.Link}
+              rel='noreferrer'
+            >
+              <Translate>Contact us</Translate> <LabelPairedArrowUpRightSmRegularIcon />
             </a>
           </li>
         </ul>
@@ -126,7 +147,7 @@ const Footer = () => {
                 </li>
                 <li>
                   <a href='https://tech.deriv.com/' target='blank' className={styles.Link}>
-                    <LabelPairedArrowUpRightSmRegularIcon /> <Translate>Deriv Tech</Translate>
+                    <Translate>Deriv Tech</Translate> <LabelPairedArrowUpRightSmRegularIcon />
                   </a>
                 </li>
                 <li>
@@ -135,7 +156,7 @@ const Footer = () => {
                     target='blank'
                     className={styles.Link}
                   >
-                    <LabelPairedArrowUpRightSmRegularIcon /> <Translate>Bug bounty</Translate>
+                    <Translate>Bug bounty</Translate> <LabelPairedArrowUpRightSmRegularIcon />
                   </a>
                 </li>
               </ul>
@@ -147,17 +168,17 @@ const Footer = () => {
               <ul className={styles.List}>
                 <li>
                   <a href={footer_links.root} target='blank' className={styles.Link}>
-                    <LabelPairedArrowUpRightSmRegularIcon /> <Translate>Homepage</Translate>
+                    <Translate>Homepage</Translate> <LabelPairedArrowUpRightSmRegularIcon />
                   </a>
                 </li>
                 <li>
                   <a href={footer_links.who_we_are} target='blank' className={styles.Link}>
-                    <LabelPairedArrowUpRightSmRegularIcon /> <Translate>Who we are</Translate>
+                    <Translate>Who we are</Translate> <LabelPairedArrowUpRightSmRegularIcon />
                   </a>
                 </li>
                 <li>
                   <a href={footer_links.contact_us} target='blank' className={styles.Link}>
-                    <LabelPairedArrowUpRightSmRegularIcon /> <Translate>Contact us</Translate>
+                    <Translate>Contact us</Translate> <LabelPairedArrowUpRightSmRegularIcon />
                   </a>
                 </li>
               </ul>
@@ -166,7 +187,7 @@ const Footer = () => {
               <CustomAccordion items={accordionItems} />
             </div>
             <div className={styles.Box} data-testid='get-connected'>
-              <Text type='subtitle-1' as='h3' className={styles.SectionTitle}>
+              <Text as='h3' bold className={styles.SectionTitle}>
                 <Translate>Get connected</Translate>
               </Text>
               <p className={styles.SectionContent}>
@@ -174,11 +195,10 @@ const Footer = () => {
               </p>
               <div className={styles.CommunityButton} data-testid='community-button'>
                 <Button
-                  color='secondary'
+                  color='black'
+                  variant='secondary'
                   size='md'
-                  rounded='md'
                   type='button'
-                  variant='outlined'
                   className={styles.PaddedButton}
                   onClick={() => {
                     window.open('https://deriv.vanillacommunity.com/', '_blank');
@@ -187,11 +207,10 @@ const Footer = () => {
                   <Translate>Join our community</Translate>
                 </Button>
                 <Button
-                  color='secondary'
+                  color='black'
+                  variant='secondary'
                   size='md'
-                  rounded='md'
                   type='button'
-                  variant='outlined'
                   className={styles.PaddedButton}
                   onClick={() => {
                     window.open('https://t.me/+g6FV5tFY1u9lZGE1', '_blank');
@@ -203,7 +222,7 @@ const Footer = () => {
               </div>
             </div>
             <div className={styles.Box}>
-              <Text type='subtitle-1' as='h3' className={styles.SectionTitle}>
+              <Text type='subtitle-1' as='h3' bold className={styles.SectionTitle}>
                 <Translate>We&apos;re here to help</Translate>
               </Text>
               <p className={styles.SectionContent}>
@@ -215,17 +234,17 @@ const Footer = () => {
               </p>
               <div className={styles.EmailButton}>
                 <Button
-                  color='secondary'
+                  color='black'
+                  variant='secondary'
                   size='md'
-                  rounded='md'
                   type='button'
-                  variant='outlined'
                   className={`${styles.PaddedButton} ${styles.FullWidthButton}`}
                   onClick={() => {
                     window.open('mailto:api-support@deriv.com', '_blank');
                   }}
                 >
-                  <LabelPairedEnvelopeCaptionBoldIcon /> <Translate>Send an email</Translate>
+                  <LabelPairedEnvelopeCaptionBoldIcon height={30} width={30} />{' '}
+                  <Translate>Send an email</Translate>
                 </Button>
               </div>
             </div>