diff --git a/cypress/e2e/delegation.cy.ts b/cypress/e2e/delegation.cy.ts
index 8c50be7d..13750e6c 100644
--- a/cypress/e2e/delegation.cy.ts
+++ b/cypress/e2e/delegation.cy.ts
@@ -5,7 +5,7 @@ describe('delegation', () => {
     cy.resetBlockchain().login();
 
     // Approve, deposit and stake
-    cy.findByText('+ Deposit').click();
+    cy.findByTestId('staking-card-deposit-btn').click();
     cy.get('#modal').find('input').type('200');
     cy.findByText('Approve').click();
     cy.findByText('Deposit and Stake').click();
diff --git a/cypress/e2e/keyboard-navigation.cy.ts b/cypress/e2e/keyboard-navigation.cy.ts
index dd803795..d2a5d4bb 100644
--- a/cypress/e2e/keyboard-navigation.cy.ts
+++ b/cypress/e2e/keyboard-navigation.cy.ts
@@ -23,6 +23,7 @@ describe('keyboard navigation and accessibility', () => {
     pressTabAndAssertFocusOutline(() => cy.findAllByText('Api3 Market').filter(':visible').closest('a'));
     pressTabAndAssertFocusOutline(() => cy.findAllByText('Docs').filter(':visible').closest('a'));
 
+    pressTabAndAssertFocusOutline(() => cy.findByTestId('connect-wallet-staking-btn'));
     pressTabAndAssertFocusOutline(() => cy.findByText('About API3'));
     pressTabAndAssertFocusOutline(() => cy.findByText('Error Reporting'));
     pressTabAndAssertFocusOutline(() => cy.findByText('Github'));
@@ -36,7 +37,7 @@ describe('keyboard navigation and accessibility', () => {
     });
 
     it('uses focus lock (cannot tab outside modal)', () => {
-      cy.findByText('+ Deposit').click();
+      cy.findByText('Deposit').click();
 
       cy.get('#modal').find('input').should('have.focus');
       cy.get('#modal').find('input').type('123');
@@ -52,12 +53,12 @@ describe('keyboard navigation and accessibility', () => {
 
     it('can use keyboard to "press" the buttons', () => {
       // Can close the modal by pressing ESC
-      cy.findByText('+ Deposit').click();
+      cy.findByText('Deposit').click();
       cy.get('body').type('{esc}');
       cy.get('#modal').find('input').should('not.exist');
 
       // Can deposit by pressing ENTER when button has focus
-      cy.findByText('+ Deposit').click();
+      cy.findByText('Deposit').click();
       cy.get('#modal').find('input').type('123').tab(); // Tab over "Max" button
       pressTabAndAssertFocusOutline(() => cy.findByText('Approve'));
 
diff --git a/cypress/e2e/staking.cy.ts b/cypress/e2e/staking.cy.ts
index 81244aea..df378ff6 100644
--- a/cypress/e2e/staking.cy.ts
+++ b/cypress/e2e/staking.cy.ts
@@ -7,18 +7,19 @@ describe('staking', () => {
     cy.resetBlockchain().login();
 
     // Approve and deposit
-    cy.findByText('+ Deposit').click();
+    cy.findByTestId('staking-card-deposit-btn').click();
     cy.get('#modal').find('input').type('500');
     cy.findByText('Approve').click();
     cy.findByText('Deposit').should('be.visible');
+    cy.get('#modal').findByRole('button', { name: 'Deposit' }).should('be.visible');
     cy.percySnapshot('Staking: Deposit modal');
-    cy.findByText('Deposit').click();
+    cy.get('#modal').findByRole('button', { name: 'Deposit' }).click();
     cy.dataCy('balance').should('have.text', '500.0');
 
     // Stake
-    cy.findByText('+ Stake').click();
+    cy.findByTestId('staking-card-stake-btn').click();
     cy.get('#modal').find('input').type('100');
-    cy.findByText('Stake').click();
+    cy.get('#modal').findByRole('button', { name: 'Stake' }).click();
     cy.dataCy('unstaked').should('have.text', '400.0');
     cy.dataCy('withdrawable').should('have.text', '400.0');
     cy.dataCy('staked').should('have.text', '100.0');
@@ -31,7 +32,7 @@ describe('staking', () => {
   it('can deposit and stake', () => {
     cy.useChainSnapshot('user-staked');
 
-    cy.findByText('+ Deposit').click();
+    cy.findByTestId('staking-card-deposit-btn').click();
     cy.get('#modal').find('input').type('200');
     cy.findByText('Deposit and Stake').click();
 
@@ -86,7 +87,7 @@ it.skip('user can unstake & withdraw', () => {
   cy.resetBlockchain().login();
 
   // Approve and deposit
-  cy.findByText('+ Deposit').click();
+  cy.findByTestId('staking-card-deposit-btn').click();
   cy.get('#modal').find('input').type('1000');
   cy.findByText('Approve').click();
   cy.findByText('Deposit and Stake').click();
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 2b342500..0ed113ea 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -65,7 +65,7 @@ Cypress.Commands.add('login', () => {
   });
 
   // Login
-  cy.findByRole('button', { name: 'Connect Wallet' }).click();
+  cy.findAllByRole('button', { name: 'Connect Wallet' }).first().click();
 
   // Web3 Modal
   cy.get('w3m-modal')
diff --git a/public/help-outline.svg b/public/help-outline.svg
new file mode 100644
index 00000000..e5f5e183
--- /dev/null
+++ b/public/help-outline.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="7.99979" cy="8.02347" r="6.28788" stroke="#5D66C4" />
+    <path
+        d="M6.40967 6.68436C6.48165 5.80877 7.25186 5.15714 8.13 5.22891C8.93346 5.29458 9.58967 5.90466 9.58967 6.73635C9.58967 7.67825 8.70344 7.95588 8.13 8.65962C7.86934 8.9795 7.76508 9.17798 7.76508 9.80174M7.79963 11.2235H7.74963"
+        stroke="#5D66C4" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
+    
\ No newline at end of file
diff --git a/public/info-circle.svg b/public/info-circle.svg
new file mode 100644
index 00000000..b06119e2
--- /dev/null
+++ b/public/info-circle.svg
@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="16.0003" cy="16.001" r="12.5833" stroke="#5D66C4" stroke-width="1.5" />
+    <path d="M14 14.001H16.0076L16.0076 22.001H18" stroke="#5D66C4" stroke-width="1.5"
+        stroke-linecap="round" stroke-linejoin="round" />
+    <circle cx="15.7996" cy="10.201" r="1.2" fill="#5D66C4" />
+</svg>
+    
\ No newline at end of file
diff --git a/src/components/button/button.module.scss b/src/components/button/button.module.scss
index 285286e2..83f58c36 100644
--- a/src/components/button/button.module.scss
+++ b/src/components/button/button.module.scss
@@ -1,6 +1,10 @@
 @import '../../styles/variables.module.scss';
 @import '../../styles/fonts.module.scss';
-@import '../../styles/link-styles.module.scss';
+@import './variants/primary.module.scss';
+@import './variants/secondary.module.scss';
+@import './variants/secondary-neutral.module.scss';
+@import './variants/link-blue.module.scss';
+@import './variants/menu-link-secondary.module.scss';
 
 .buttonWrapper {
   display: inline-block;
@@ -21,139 +25,15 @@
   cursor: pointer;
 
   &.primary {
-    background-color: $color-blue-500;
-    color: $color-base-light;
-    border: none;
-
-    &.xxs {
-      padding: 0 10px;
-      border-radius: 24px;
-      height: 24px;
-      @include font-body-17;
-    }
-
-    &.xs {
-      padding: 0 16px;
-      border-radius: 24px;
-      height: 32px;
-      @include font-body-14;
-    }
-
-    &.sm {
-      padding: 0 20px;
-      border-radius: 24px;
-      height: 40px;
-      @include font-button-3;
-    }
-
-    &.md {
-      padding: 0 24px;
-      border-radius: 28px;
-      height: 48px;
-      @include font-button-2;
-    }
-
-    &.lg {
-      padding: 0 32px;
-      border-radius: 32px;
-      height: 56px;
-      @include font-button-1;
-    }
-
-    &:hover {
-      background-color: $color-blue-200;
-    }
-
-    &:active {
-      background-color: $color-blue-600;
-    }
-
-    &:disabled {
-      color: $color-blue-50;
-      background-color: $color-blue-10;
-    }
-
-    &.dark {
-      background-color: $color-blue-400;
-
-      &:hover {
-        background-color: $color-blue-200;
-      }
-
-      &:active {
-        background-color: $color-blue-500;
-      }
-
-      &:disabled {
-        color: $color-blue-400;
-        background-color: $color-dark-blue-400;
-      }
-    }
+    @include button-primary;
   }
 
   &.secondary {
-    position: relative;
-    color: $color-dark-blue-400;
-    border: 1px solid transparent;
-    @include gradient-border($gradient-soft-light);
-
-    &.xxs {
-      padding: 0 10px;
-      border-radius: 24px;
-      height: 24px;
-      @include font-body-17;
-    }
-
-    &.xs {
-      padding: 0 16px;
-      border-radius: 24px;
-      height: 32px;
-      @include font-body-14;
-    }
-
-    &.sm {
-      padding: 0 20px;
-      border-radius: 24px;
-      height: 40px;
-      @include font-button-3;
-    }
-
-    &.md {
-      padding: 0 24px;
-      border-radius: 28px;
-      height: 48px;
-      @include font-button-2;
-    }
-
-    &.lg {
-      padding: 0 32px;
-      border-radius: 32px;
-      height: 56px;
-      @include font-button-1;
-    }
-
-    &:hover,
-    &:active,
-    &:disabled {
-      &:before {
-        padding: 0px;
-      }
-    }
-
-    &:hover {
-      color: $color-blue-200;
-      border: 1px solid $color-blue-200;
-    }
-
-    &:active {
-      color: $color-blue-600;
-      border: 1px solid $color-blue-600;
-    }
+    @include button-secondary;
+  }
 
-    &:disabled {
-      color: $color-gray-400;
-      border: 1px solid $color-gray-400;
-    }
+  &.secondary-neutral {
+    @include button-secondary-neutral;
   }
 
   &.link-blue {
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 7d013f21..e5551f5c 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -10,12 +10,13 @@ type BreakpointsProps = { [key in BreakpointKeys]?: { size?: Size } };
 export interface Props extends BreakpointsProps {
   children: ReactNode;
   className?: string;
-  type?: 'primary' | 'secondary' | 'link' | 'text' | 'menu-link-secondary' | 'link-blue';
+  type?: 'primary' | 'secondary' | 'secondary-neutral' | 'link' | 'text' | 'menu-link-secondary' | 'link-blue';
   size?: Size;
   disabled?: boolean;
   href?: string;
   theme?: 'light' | 'dark';
   onClick?: () => void;
+  'data-testid'?: string;
 }
 
 const Button = ({
@@ -31,6 +32,7 @@ const Button = ({
   sm,
   md,
   lg,
+  ...rest
 }: Props) => {
   const { width } = useWindowDimensions();
   const sizeClass = getSizeClass(width, size, { xs, sm, md, lg });
@@ -42,6 +44,7 @@ const Button = ({
           href={href}
           className={classNames(styles.button, styles[type], styles[theme], styles[sizeClass])}
           {...(isExternal(href) ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+          {...rest}
         >
           {children}
         </a>
@@ -50,6 +53,7 @@ const Button = ({
           className={classNames(styles.button, styles[type], styles[theme], styles[sizeClass])}
           onClick={onClick}
           disabled={disabled}
+          {...rest}
         >
           {children}
         </button>
diff --git a/src/styles/link-styles.module.scss b/src/components/button/variants/link-blue.module.scss
similarity index 55%
rename from src/styles/link-styles.module.scss
rename to src/components/button/variants/link-blue.module.scss
index b46afed5..ed15d792 100644
--- a/src/styles/link-styles.module.scss
+++ b/src/components/button/variants/link-blue.module.scss
@@ -1,4 +1,4 @@
-@import './fonts.module.scss';
+@import '../../../styles/fonts.module.scss';
 
 @mixin link-blue {
   color: $color-blue-500;
@@ -50,40 +50,3 @@
     }
   }
 }
-
-@mixin menu-link-secondary {
-  position: relative;
-  border: none;
-  color: $color-dark-blue-400;
-  height: 20px;
-  padding: 0;
-
-  &.xs {
-    @include font-overline-2;
-  }
-
-  &.sm {
-    @include font-body-15;
-  }
-
-  &.md {
-    @include font-body-12;
-  }
-
-  &.lg {
-    height: 24px;
-    @include font-description-6;
-  }
-
-  &:hover {
-    color: $color-blue-400;
-  }
-
-  &:active {
-    color: $color-blue-300;
-  }
-
-  &:disabled {
-    color: $color-dark-blue-25;
-  }
-}
diff --git a/src/components/button/variants/menu-link-secondary.module.scss b/src/components/button/variants/menu-link-secondary.module.scss
new file mode 100644
index 00000000..c5e76019
--- /dev/null
+++ b/src/components/button/variants/menu-link-secondary.module.scss
@@ -0,0 +1,38 @@
+@import '../../../styles/fonts.module.scss';
+
+@mixin menu-link-secondary {
+  position: relative;
+  border: none;
+  color: $color-dark-blue-400;
+  height: 20px;
+  padding: 0;
+
+  &.xs {
+    @include font-overline-2;
+  }
+
+  &.sm {
+    @include font-body-15;
+  }
+
+  &.md {
+    @include font-body-12;
+  }
+
+  &.lg {
+    height: 24px;
+    @include font-description-6;
+  }
+
+  &:hover {
+    color: $color-blue-400;
+  }
+
+  &:active {
+    color: $color-blue-300;
+  }
+
+  &:disabled {
+    color: $color-dark-blue-25;
+  }
+}
diff --git a/src/components/button/variants/primary.module.scss b/src/components/button/variants/primary.module.scss
new file mode 100644
index 00000000..47aec2da
--- /dev/null
+++ b/src/components/button/variants/primary.module.scss
@@ -0,0 +1,70 @@
+@mixin button-primary {
+  background-color: $color-blue-500;
+  color: $color-base-light;
+  border: none;
+
+  &.xxs {
+    padding: 0 10px;
+    border-radius: 24px;
+    height: 24px;
+    @include font-body-17;
+  }
+
+  &.xs {
+    padding: 0 16px;
+    border-radius: 24px;
+    height: 32px;
+    @include font-body-14;
+  }
+
+  &.sm {
+    padding: 0 20px;
+    border-radius: 24px;
+    height: 40px;
+    @include font-button-3;
+  }
+
+  &.md {
+    padding: 0 24px;
+    border-radius: 28px;
+    height: 48px;
+    @include font-button-2;
+  }
+
+  &.lg {
+    padding: 0 32px;
+    border-radius: 32px;
+    height: 56px;
+    @include font-button-1;
+  }
+
+  &:hover {
+    background-color: $color-blue-200;
+  }
+
+  &:active {
+    background-color: $color-blue-600;
+  }
+
+  &:disabled {
+    color: $color-blue-50;
+    background-color: $color-blue-10;
+  }
+
+  &.dark {
+    background-color: $color-blue-400;
+
+    &:hover {
+      background-color: $color-blue-200;
+    }
+
+    &:active {
+      background-color: $color-blue-500;
+    }
+
+    &:disabled {
+      color: $color-blue-400;
+      background-color: $color-dark-blue-400;
+    }
+  }
+}
diff --git a/src/components/button/variants/secondary-neutral.module.scss b/src/components/button/variants/secondary-neutral.module.scss
new file mode 100644
index 00000000..ccff7fdc
--- /dev/null
+++ b/src/components/button/variants/secondary-neutral.module.scss
@@ -0,0 +1,56 @@
+@mixin button-secondary-neutral {
+  position: relative;
+  color: $color-blue-500;
+  border: 1px solid $color-blue-500;
+  background: $color-base-light;
+
+  &.xxs {
+    padding: 0 10px;
+    border-radius: 24px;
+    height: 24px;
+    @include font-body-17;
+  }
+
+  &.xs {
+    padding: 0 16px;
+    border-radius: 24px;
+    height: 32px;
+    @include font-body-14;
+  }
+
+  &.sm {
+    padding: 0 20px;
+    border-radius: 24px;
+    height: 40px;
+    @include font-button-3;
+  }
+
+  &.md {
+    padding: 0 24px;
+    border-radius: 28px;
+    height: 48px;
+    @include font-button-2;
+  }
+
+  &.lg {
+    padding: 0 32px;
+    border-radius: 32px;
+    height: 56px;
+    @include font-button-1;
+  }
+
+  &:hover {
+    color: $color-blue-200;
+    border: 1px solid $color-blue-200;
+  }
+
+  &:active {
+    color: $color-blue-600;
+    border: 1px solid $color-blue-600;
+  }
+
+  &:disabled {
+    color: $color-gray-400;
+    border: 1px solid $color-blue-50;
+  }
+}
diff --git a/src/components/button/variants/secondary.module.scss b/src/components/button/variants/secondary.module.scss
new file mode 100644
index 00000000..2bb7301b
--- /dev/null
+++ b/src/components/button/variants/secondary.module.scss
@@ -0,0 +1,64 @@
+@mixin button-secondary {
+  position: relative;
+  color: $color-dark-blue-400;
+  border: 1px solid transparent;
+  @include gradient-border($gradient-soft-light);
+
+  &.xxs {
+    padding: 0 10px;
+    border-radius: 24px;
+    height: 24px;
+    @include font-body-17;
+  }
+
+  &.xs {
+    padding: 0 16px;
+    border-radius: 24px;
+    height: 32px;
+    @include font-body-14;
+  }
+
+  &.sm {
+    padding: 0 20px;
+    border-radius: 24px;
+    height: 40px;
+    @include font-button-3;
+  }
+
+  &.md {
+    padding: 0 24px;
+    border-radius: 28px;
+    height: 48px;
+    @include font-button-2;
+  }
+
+  &.lg {
+    padding: 0 32px;
+    border-radius: 32px;
+    height: 56px;
+    @include font-button-1;
+  }
+
+  &:hover,
+  &:active,
+  &:disabled {
+    &:before {
+      padding: 0px;
+    }
+  }
+
+  &:hover {
+    color: $color-blue-200;
+    border: 1px solid $color-blue-200;
+  }
+
+  &:active {
+    color: $color-blue-600;
+    border: 1px solid $color-blue-600;
+  }
+
+  &:disabled {
+    color: $color-gray-400;
+    border: 1px solid $color-gray-400;
+  }
+}
diff --git a/src/components/card/card.module.scss b/src/components/card/card.module.scss
new file mode 100644
index 00000000..ca4f5ac2
--- /dev/null
+++ b/src/components/card/card.module.scss
@@ -0,0 +1,44 @@
+@import '../../styles/variables.module.scss';
+@import '../../styles/fonts.module.scss';
+
+.card {
+  position: relative;
+  border-radius: 20px;
+  border: 1px solid $color-blue-25;
+  background: $gradient-light;
+  box-shadow: 0px 4px 4px 0px rgba(190, 210, 255, 0.2);
+  padding: $space-lg;
+  padding-bottom: $space-xl;
+}
+
+.cardHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: $space-md;
+  margin-bottom: $space-xxl;
+
+  > h5 {
+    @include font-heading-9;
+  }
+
+  @media (min-width: $md) {
+    > h5 {
+      @include font-heading-7;
+    }
+  }
+}
+
+.contentFooter {
+  margin-top: $space-xl;
+  text-align: center;
+}
+
+.cardChildren {
+  margin-top: $space-lg;
+}
+
+.gradientBorder {
+  border: none;
+  @include gradient-border($gradient-base-blue-01);
+}
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
new file mode 100644
index 00000000..1fe0cdb6
--- /dev/null
+++ b/src/components/card/card.tsx
@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import styles from './card.module.scss';
+import classNames from 'classnames';
+
+type Props = {
+  header: ReactNode;
+  content: ReactNode;
+  contentFooter?: ReactNode;
+  children?: ReactNode;
+  gradientBorder?: boolean;
+};
+
+type HeaderProps = {
+  children: ReactNode;
+};
+
+export const Header = ({ children }: HeaderProps) => {
+  return <div className={styles.cardHeader}>{children}</div>;
+};
+
+const Card = (props: Props) => {
+  const { header, content, contentFooter, children, gradientBorder } = props;
+
+  return (
+    <div className={classNames(styles.card, { [styles.gradientBorder]: gradientBorder })}>
+      {header}
+      {content}
+      {contentFooter && <div className={styles.contentFooter}>{contentFooter}</div>}
+      {children && <div className={styles.cardChildren}>{children}</div>}
+    </div>
+  );
+};
+
+export default Card;
diff --git a/src/components/card/index.ts b/src/components/card/index.ts
new file mode 100644
index 00000000..ca6b6599
--- /dev/null
+++ b/src/components/card/index.ts
@@ -0,0 +1,2 @@
+export { default } from './card';
+export * from './card';
diff --git a/src/components/header/header.module.scss b/src/components/header/header.module.scss
index d6b6a7c1..9242fa77 100644
--- a/src/components/header/header.module.scss
+++ b/src/components/header/header.module.scss
@@ -1,51 +1,26 @@
 @import '../../styles/variables.module.scss';
+@import '../../styles/fonts.module.scss';
 
 .header {
   position: relative;
-  margin-bottom: 2.5 * $space-xxl;
   pointer-events: none;
+  margin-top: 56px;
 
-  @media (max-width: $max-md) {
-    margin-bottom: $space-xxxl;
+  @media (min-width: $md) {
+    margin-top: 0;
   }
 }
 
-.headerLargeTitle {
-  position: absolute;
-  bottom: -20px;
-  font-size: $heading-1;
-  line-height: $lh-heading-1;
-  font-weight: 600;
-  background-image: linear-gradient(76.31deg, #c3c4c3 2.01%, #f3f3f3 99.02%);
-  background-clip: text;
-  opacity: 0.1;
-
-  @media (max-width: $max-lg) {
-    bottom: -10px;
-    font-size: $heading-2;
-    line-height: $lh-heading-2;
-  }
-
-  @media (max-width: $max-md) {
-    font-size: 80px;
-    line-height: 101px;
-  }
+.headerTitle {
+  @include font-heading-7;
+  color: $color-dark-blue-400;
 
-  @media (max-width: $max-sm) {
-    bottom: -5px;
-    font-size: $heading-3;
-    line-height: $lh-heading-3;
+  @media (min-width: $sm) {
+    @include font-heading-6;
   }
-}
-
-.headerTitle {
-  font-size: $heading-4;
-  line-height: $lh-heading-4;
-  font-weight: 600;
 
-  @media (max-width: $max-sm) {
-    font-size: $heading-5;
-    line-height: $lh-heading-5;
+  @media (min-width: $md) {
+    @include font-heading-4;
   }
 }
 
diff --git a/src/components/layout/error-reporting-notice/error-reporting-notice.module.scss b/src/components/layout/error-reporting-notice/error-reporting-notice.module.scss
index 58851cdc..8fe8b2d9 100644
--- a/src/components/layout/error-reporting-notice/error-reporting-notice.module.scss
+++ b/src/components/layout/error-reporting-notice/error-reporting-notice.module.scss
@@ -1,6 +1,6 @@
 @import '../../../styles/variables.module.scss';
 @import '../../../styles/fonts.module.scss';
-@import '../../../styles/link-styles.module.scss';
+@import '../../button/variants/link-blue.module.scss';
 @import '../layout.module.scss';
 
 .wrapper {
diff --git a/src/components/layout/layout.module.scss b/src/components/layout/layout.module.scss
index f62923aa..ebdfe8a2 100644
--- a/src/components/layout/layout.module.scss
+++ b/src/components/layout/layout.module.scss
@@ -1,6 +1,6 @@
 @import '../../styles/variables.module.scss';
 @import '../../styles/fonts.module.scss';
-@import '../../styles/link-styles.module.scss';
+@import '../button//variants/menu-link-secondary.module.scss';
 
 .layout {
   background: linear-gradient(334deg, #fafafa -0.91%, #ebf0ff 48.81%, #fafafa 99.52%);
diff --git a/src/pages/dashboard/dashboard.module.scss b/src/pages/dashboard/dashboard.module.scss
index 251e96e6..28376bc8 100644
--- a/src/pages/dashboard/dashboard.module.scss
+++ b/src/pages/dashboard/dashboard.module.scss
@@ -1,67 +1,101 @@
 @import '../../styles/variables.module.scss';
+@import '../../styles/fonts.module.scss';
 
-.borderedBoxesWrap {
+.cardsWrapper {
   display: flex;
-  align-items: flex-start;
+  flex-direction: column;
+  align-items: center;
   justify-content: space-between;
+  box-sizing: border-box;
+  gap: $space-xl;
+  width: 100%;
 
-  & > * {
-    margin-right: $space-xxl;
-  }
-
-  & > *:last-child {
-    margin-right: 0;
+  & > div {
+    width: 100%;
+    box-sizing: border-box;
   }
 
-  @media (max-width: $max-md) {
-    flex-direction: column;
-    align-items: center;
+  @media (min-width: $sm) {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 32px;
 
-    & > * {
-      margin-right: 0;
-      margin-bottom: 100px;
+    & > div {
+      width: 50%;
     }
+  }
 
-    & > *:last-child {
-      margin-bottom: 0;
-    }
+  @media (min-width: $md) {
+    padding-top: $space-xl;
+    gap: 64px;
   }
 }
 
-.stakingBoxWrap {
-  width: 100%;
-  max-width: 420px;
-  & > * {
-    margin-bottom: $space-xl;
+.cardContent {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  & > div {
+    text-align: center;
   }
-  & > *:last-child {
-    margin-bottom: 0;
+}
+
+.cardHeaderButton {
+  display: flex;
+  align-items: center;
+  gap: $space-xs;
+}
+
+.cardContentTitle {
+  @include font-tagline-11;
+  color: $color-dark-blue-100;
+  margin-bottom: $space-xs;
+
+  @media (min-width: $md) {
+    @include font-tagline-8;
   }
 }
 
-.borderedBoxContentTitle {
-  font-size: 14px;
-  line-height: 17px;
-  font-weight: 500;
-  color: $secondary-color;
-  text-transform: uppercase;
+.cardContentValue {
+  @include font-heading-5;
+  color: $color-dark-blue-400;
+  line-height: 25px;
+
+  @media (min-width: $md) {
+    @include font-heading-4;
+    line-height: 28px;
+  }
 }
 
 .dashboardHeader {
-  font-size: $heading-5;
-  line-height: $lh-heading-5;
-  color: $green-color;
+  @include font-heading-9;
+  color: $color-dark-blue-100;
+
+  @media (min-width: $sm) {
+    @include font-heading-8;
+  }
+  @media (min-width: $md) {
+    @include font-heading-7;
+  }
+}
+
+.extraTopSpacing {
+  margin-top: $space-xl;
 
-  @media (max-width: $max-sm) {
-    font-size: $text-normal;
-    line-height: $lh-normal;
+  @media (min-width: $md) {
+    margin-top: 72px;
   }
 }
 
 .tutorialVideo {
   position: relative;
   padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */
-  margin: $space-xl 0;
+  margin: $space-lg 0 $space-xxl 0;
+
+  @media (min-width: $md) {
+    margin-bottom: 72px;
+  }
 
   iframe {
     position: absolute;
@@ -71,3 +105,81 @@
     height: 100%;
   }
 }
+
+.connectWalletBox {
+  display: flex;
+  flex-direction: column;
+  gap: $space-lg;
+  color: $color-dark-blue-400;
+  padding: $space-lg 0;
+  margin: $space-xl 0;
+  border-top: 1px solid $color-dark-blue-10;
+  border-bottom: 1px solid $color-dark-blue-10;
+
+  @media (min-width: $sm) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    margin: $space-xxxl 0;
+  }
+  @media (min-width: $md) {
+    margin: $space-xxl 0 72px 0;
+  }
+}
+
+.connectWalletBoxContent {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  height: 40px;
+
+  & img {
+    width: 32px;
+    height: 32px;
+  }
+
+  @media (min-width: $sm) {
+    gap: $space-xl;
+    height: 54px;
+
+    & img {
+      width: 40px;
+      height: 40px;
+    }
+  }
+}
+
+.connectWalletBoxText {
+  display: flex;
+  flex-direction: column;
+}
+
+.connectWalletBoxTitle {
+  @include font-body-10;
+
+  @media (min-width: $sm) {
+    @include font-body-8;
+  }
+  @media (min-width: $md) {
+    @include font-body-4;
+  }
+}
+
+.connectWalletBoxSubtitle {
+  @include font-body-12;
+
+  @media (min-width: $sm) {
+    @include font-body-9;
+  }
+  @media (min-width: $md) {
+    @include font-body-6;
+  }
+}
+
+.connectWalletBoxButton {
+  margin-left: 42px;
+
+  @media (min-width: $sm) {
+    margin-left: 0;
+  }
+}
diff --git a/src/pages/dashboard/dashboard.tsx b/src/pages/dashboard/dashboard.tsx
index 41f98405..da61aa7e 100644
--- a/src/pages/dashboard/dashboard.tsx
+++ b/src/pages/dashboard/dashboard.tsx
@@ -12,12 +12,12 @@ import Button from '../../components/button';
 import { Tooltip } from '../../components/tooltip';
 import PendingUnstakePanel from './pending-unstake-panel/pending-unstake-panel';
 import StakingPool from './staking/staking-pool';
-import BorderedBox, { Header } from '../../components/bordered-box/bordered-box';
+import Card, { Header as CardHeader } from '../../components/card/card';
 import UnstakeBanner from './unstake-banner/unstake-banner';
-import globalStyles from '../../styles/global-styles.module.scss';
 import styles from './dashboard.module.scss';
 import ConfirmUnstakeForm from './forms/confirm-unstake-form';
 import classNames from 'classnames';
+import ConnectButton from '../../components/connect-button';
 
 type ModalType = 'deposit' | 'withdraw' | 'stake' | 'unstake' | 'confirm-unstake';
 
@@ -47,6 +47,24 @@ const Dashboard = () => {
       {pendingUnstake?.canUnstake && <UnstakeBanner canUnstakeAndWithdraw={pendingUnstake.canUnstakeAndWithdraw} />}
       {!provider && (
         <>
+          {/* Connect Wallet */}
+          <div className={styles.connectWalletBox}>
+            <div className={styles.connectWalletBoxContent}>
+              <img src={images.infoCircle} alt="connect wallet info" />
+              <div className={styles.connectWalletBoxText}>
+                <span className={styles.connectWalletBoxTitle}>Connect your Wallet.</span>
+                <span className={styles.connectWalletBoxSubtitle}>Connect wallet to start operating</span>
+              </div>
+            </div>
+
+            <div className={styles.connectWalletBoxButton}>
+              <ConnectButton type="link-blue" size="sm" sm={{ size: 'md' }} data-testid="connect-wallet-staking-btn">
+                Connect Wallet
+              </ConnectButton>
+            </div>
+          </div>
+
+          {/* How This Works */}
           <p className={styles.dashboardHeader}>How This Works</p>
           <div className={styles.tutorialVideo}>
             <iframe
@@ -59,80 +77,101 @@ const Dashboard = () => {
           </div>
         </>
       )}
-      <p className={styles.dashboardHeader}>Staking Pool</p>
+
+      {/* Staking Pool */}
+      <p className={classNames(styles.dashboardHeader, provider && styles.extraTopSpacing)}>Staking Pool</p>
       <StakingPool />
-      <div className={styles.borderedBoxesWrap}>
-        <div className={styles.stakingBoxWrap} data-cy="balance-panel">
-          <BorderedBox
-            header={
-              <Header>
-                <h5>Balance</h5>
-                <Button onClick={() => setOpenModal('deposit')} disabled={!data}>
-                  + Deposit
+      <div className={styles.cardsWrapper}>
+        <Card
+          header={
+            <CardHeader>
+              <h5>Balance</h5>
+              <div className={styles.cardHeaderButton}>
+                <Button
+                  type="secondary"
+                  size="sm"
+                  onClick={() => setOpenModal('deposit')}
+                  disabled={!data}
+                  data-testid="staking-card-deposit-btn"
+                >
+                  Deposit
                 </Button>
-              </Header>
-            }
-            content={
-              <>
-                <div className={classNames(globalStyles.textCenter, globalStyles.mbLg)}>
-                  <p className={styles.borderedBoxContentTitle}>total</p>
-                  <p className={globalStyles.textXLarge} data-cy="balance">
-                    {tokenBalances ? formatAndRoundApi3(tokenBalances.userTotal) : UNKNOWN_NUMBER}
-                  </p>
-                </div>
-                <div className={globalStyles.textCenter}>
-                  <p className={styles.borderedBoxContentTitle}>withdrawable</p>
-                  <p className={globalStyles.textXLarge} data-cy="withdrawable">
-                    {tokenBalances ? formatAndRoundApi3(tokenBalances.withdrawable) : UNKNOWN_NUMBER}
-                  </p>
-                </div>
-              </>
-            }
-            footer={
-              <Button type="link" onClick={() => setOpenModal('withdraw')} disabled={!canWithdraw}>
-                Withdraw
-              </Button>
-            }
-          />
-        </div>
-        <div className={styles.stakingBoxWrap} data-cy="staking-panel">
-          <BorderedBox
-            header={
-              <Header>
-                <h5>Staking</h5>
-                <div>
-                  <Button onClick={() => setOpenModal('stake')} disabled={!canStake}>
-                    + Stake
-                  </Button>
-                  <Tooltip overlay="You need to deposit API3 tokens before staking">
-                    <img src={images.help} alt="new proposal help" className={globalStyles.helpIcon} />
-                  </Tooltip>
-                </div>
-              </Header>
-            }
-            content={
-              <>
-                <div className={classNames(globalStyles.textCenter, globalStyles.mbLg)}>
-                  <p className={styles.borderedBoxContentTitle}>staked</p>
-                  <p className={globalStyles.textXLarge} data-cy="staked">
-                    {data ? formatAndRoundApi3(data.userStaked) : UNKNOWN_NUMBER}
-                  </p>
-                </div>
-                <div className={globalStyles.textCenter}>
-                  <p className={styles.borderedBoxContentTitle}>unstaked</p>
-                  <p className={globalStyles.textXLarge} data-cy="unstaked">
-                    {data ? formatAndRoundApi3(data.userUnstaked) : UNKNOWN_NUMBER}
-                  </p>
-                </div>
-              </>
-            }
-            footer={
-              // TODO: In case there is a pending unstake there should be no button, just green arrow (see figma)
-              <Button type="link" onClick={() => setOpenModal('unstake')} disabled={!canInitiateUnstake}>
+              </div>
+            </CardHeader>
+          }
+          content={
+            <div className={styles.cardContent}>
+              <div>
+                <p className={styles.cardContentTitle}>total</p>
+                <p className={styles.cardContentValue} data-cy="balance">
+                  {tokenBalances ? formatAndRoundApi3(tokenBalances.userTotal) : UNKNOWN_NUMBER}
+                </p>
+              </div>
+              <div>
+                <p className={styles.cardContentTitle}>withdrawable</p>
+                <p className={styles.cardContentValue} data-cy="withdrawable">
+                  {tokenBalances ? formatAndRoundApi3(tokenBalances.withdrawable) : UNKNOWN_NUMBER}
+                </p>
+              </div>
+            </div>
+          }
+          contentFooter={
+            <Button type="secondary-neutral" size="xs" onClick={() => setOpenModal('withdraw')} disabled={!canWithdraw}>
+              Withdraw
+            </Button>
+          }
+        />
+
+        <Card
+          header={
+            <CardHeader>
+              <h5>Staking</h5>
+              <div className={styles.cardHeaderButton}>
+                <Tooltip overlay="You need to deposit API3 tokens before staking">
+                  <img src={images.helpOutline} alt="new proposal help" />
+                </Tooltip>
+                <Button
+                  type="secondary"
+                  size="sm"
+                  onClick={() => setOpenModal('stake')}
+                  disabled={!canStake}
+                  data-testid="staking-card-stake-btn"
+                >
+                  Stake
+                </Button>
+              </div>
+            </CardHeader>
+          }
+          content={
+            <div className={styles.cardContent}>
+              <div>
+                <p className={styles.cardContentTitle}>staked</p>
+                <p className={styles.cardContentValue} data-cy="staked">
+                  {data ? formatAndRoundApi3(data.userStaked) : UNKNOWN_NUMBER}
+                </p>
+              </div>
+              <div>
+                <p className={styles.cardContentTitle}>unstaked</p>
+                <p className={styles.cardContentValue} data-cy="unstaked">
+                  {data ? formatAndRoundApi3(data.userUnstaked) : UNKNOWN_NUMBER}
+                </p>
+              </div>
+            </div>
+          }
+          contentFooter={
+            !pendingUnstake && (
+              <Button
+                type="secondary-neutral"
+                size="xs"
+                onClick={() => setOpenModal('unstake')}
+                disabled={!canInitiateUnstake}
+              >
                 Initiate Unstake
               </Button>
-            }
-          />
+            )
+          }
+          gradientBorder={!!pendingUnstake}
+        >
           {pendingUnstake && (
             <PendingUnstakePanel
               amount={pendingUnstake.tokensAtUnstakeTime}
@@ -141,8 +180,10 @@ const Dashboard = () => {
               unstakeDate={pendingUnstake.unstakeDate}
             />
           )}
-        </div>
+        </Card>
       </div>
+
+      {/* Modals */}
       {data && (
         <Modal open={openModal === 'deposit'} onClose={closeModal}>
           <TokenDepositForm allowance={data.allowance} onClose={closeModal} walletBalance={data.userApi3Balance} />
diff --git a/src/pages/dashboard/pending-unstake-panel/pending-unstake-panel.module.scss b/src/pages/dashboard/pending-unstake-panel/pending-unstake-panel.module.scss
index d17eb4f0..e235e0db 100644
--- a/src/pages/dashboard/pending-unstake-panel/pending-unstake-panel.module.scss
+++ b/src/pages/dashboard/pending-unstake-panel/pending-unstake-panel.module.scss
@@ -1,4 +1,15 @@
 @import '../../../styles/variables.module.scss';
+@import '../../../styles/fonts.module.scss';
+
+.pendingUnstakePanel {
+  padding-top: 16px;
+  border-top: 1px solid $color-dark-blue-10;
+  box-sizing: border-box;
+
+  @media (min-width: $md) {
+    padding: 24px 24px 8px 24px;
+  }
+}
 
 .pendingUnstakeContent {
   display: flex;
@@ -8,43 +19,72 @@
 .pendingUnstakeRow {
   width: 100%;
   display: flex;
-  margin-top: $space-lg;
+  margin-top: $space-xs;
+
   &.amount {
     align-items: center;
   }
+
+  h5 {
+    @include font-subtitle-6;
+    color: $color-dark-blue-400;
+  }
+
+  @media (min-width: $md) {
+    h5 {
+      @include font-subtitle-3;
+    }
+  }
 }
 
 .pendingUnstakeTitle {
-  font-size: $text-small;
-  line-height: 17px;
-  color: $green-color;
-  font-weight: 500;
+  @include font-body-11;
+  color: $color-dark-blue-50;
   text-align: center;
+  padding-top: $space-xs;
 }
 
 .pendingUnstakeName {
-  flex: 0 0 40%;
-  font-size: $text-small;
-  line-height: 17px;
-  font-weight: 500;
+  @include font-body-11;
+  color: $color-dark-blue-100;
   text-align: right;
-  margin-right: $space-md;
+  margin-right: 24px;
+  width: 40%;
 }
 
 .pendingUnstakeActions {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  margin-top: $space-md;
-  margin-bottom: $space-xs;
+  justify-content: center;
+  flex-direction: column;
+  gap: $space-md;
+  margin-top: $space-lg;
+  white-space: nowrap;
+
+  * {
+    width: 100%;
+    max-width: 240px;
+
+    @media (min-width: $md) {
+      max-width: 264px;
+    }
+  }
 }
 
 .pendingUnstakeCountdown {
   display: flex;
+  margin-left: 2px;
+
+  @media (min-width: $md) {
+    margin-left: 4px;
+  }
 }
 
 .pendingUnstakeCountdownItem {
+  @include font-body-11;
+  color: $color-dark-blue-400;
   text-align: center;
+
   & > * {
     margin-bottom: $space-xxs;
   }
@@ -54,15 +94,12 @@
 }
 
 .shortcut {
-  font-size: $text-xsmall;
-  line-height: 18px;
-  font-weight: 500;
-  color: $tertiary-color;
+  @include font-body-14;
+  color: $color-dark-blue-50;
 }
 
 .colon {
-  font-size: $text-small;
-  line-height: 17px;
-  font-weight: 500;
-  margin: 0 $space-xxs;
+  @include font-body-11;
+  color: $color-dark-blue-50;
+  margin: 0 5px;
 }
diff --git a/src/pages/dashboard/pending-unstake-panel/pending-unstake-panel.tsx b/src/pages/dashboard/pending-unstake-panel/pending-unstake-panel.tsx
index cc809ae9..81d3c6a4 100644
--- a/src/pages/dashboard/pending-unstake-panel/pending-unstake-panel.tsx
+++ b/src/pages/dashboard/pending-unstake-panel/pending-unstake-panel.tsx
@@ -1,12 +1,10 @@
 import { BigNumber } from 'ethers';
 import { useState, useEffect } from 'react';
 import classNames from 'classnames';
-import BorderedBox, { Header } from '../../../components/bordered-box/bordered-box';
 import Button from '../../../components/button';
 import { useApi3Pool } from '../../../contracts';
 import { useChainData } from '../../../chain-data';
 import { formatAndRoundApi3, getDays, getHours, getMinutes, getSeconds } from '../../../utils';
-import globalStyles from '../../../styles/global-styles.module.scss';
 import styles from './pending-unstake-panel.module.scss';
 import { handleTransactionError } from '../../../utils';
 
@@ -77,55 +75,47 @@ const PendingUnstakePanel = (props: Props) => {
   };
 
   return (
-    <BorderedBox
-      header={
-        <Header alignCenter>
-          <p className={styles.pendingUnstakeTitle}>Pending API3 tokens unstaking</p>
-        </Header>
-      }
-      content={
-        <div className={styles.pendingUnstakeContent} data-cy="pending-unstake">
-          <div className={classNames(styles.pendingUnstakeRow, styles.amount)}>
-            <p className={styles.pendingUnstakeName}>Amount</p>
-            <h5 data-cy="amount">{formatAndRoundApi3(amount)}</h5>
-          </div>
-          <div className={classNames(styles.pendingUnstakeRow, { [globalStyles.tertiaryColor]: canUnstake })}>
-            <p className={styles.pendingUnstakeName}>Cooldown</p>
-            <div className={styles.pendingUnstakeCountdown}>
-              <div className={styles.pendingUnstakeCountdownItem}>
-                <p className={classNames(globalStyles.textSmall, globalStyles.medium)}>{timerDays}</p>
-                <p className={styles.shortcut}>D</p>
-              </div>
-              <div className={styles.colon}>:</div>
-              <div className={styles.pendingUnstakeCountdownItem}>
-                <p className={classNames(globalStyles.textSmall, globalStyles.medium)}>{timerHours}</p>
-                <p className={styles.shortcut}>HR</p>
-              </div>
-              <div className={styles.colon}>:</div>
-              <div className={styles.pendingUnstakeCountdownItem}>
-                <p className={classNames(globalStyles.textSmall, globalStyles.medium)}>{timerMinutes}</p>
-                <p className={styles.shortcut}>MIN</p>
-              </div>
-              <div className={styles.colon}>:</div>
-              <div className={styles.pendingUnstakeCountdownItem}>
-                <p className={classNames(globalStyles.textSmall, globalStyles.medium)}>{timerSeconds}</p>
-                <p className={styles.shortcut}>SEC</p>
-              </div>
+    <div className={styles.pendingUnstakePanel}>
+      <p className={styles.pendingUnstakeTitle}>Pending API3 tokens unstaking</p>
+      <div className={styles.pendingUnstakeContent} data-cy="pending-unstake">
+        <div className={classNames(styles.pendingUnstakeRow, styles.amount)}>
+          <p className={styles.pendingUnstakeName}>Amount</p>
+          <h5 data-cy="amount">{formatAndRoundApi3(amount)}</h5>
+        </div>
+        <div className={styles.pendingUnstakeRow}>
+          <p className={styles.pendingUnstakeName}>Cooldown</p>
+          <div className={styles.pendingUnstakeCountdown}>
+            <div className={styles.pendingUnstakeCountdownItem}>
+              <p>{timerDays}</p>
+              <p className={styles.shortcut}>D</p>
+            </div>
+            <div className={styles.colon}>:</div>
+            <div className={styles.pendingUnstakeCountdownItem}>
+              <p>{timerHours}</p>
+              <p className={styles.shortcut}>HR</p>
+            </div>
+            <div className={styles.colon}>:</div>
+            <div className={styles.pendingUnstakeCountdownItem}>
+              <p>{timerMinutes}</p>
+              <p className={styles.shortcut}>MIN</p>
+            </div>
+            <div className={styles.colon}>:</div>
+            <div className={styles.pendingUnstakeCountdownItem}>
+              <p>{timerSeconds}</p>
+              <p className={styles.shortcut}>SEC</p>
             </div>
-          </div>
-          <div className={styles.pendingUnstakeActions}>
-            <Button type="link" onClick={handleUnstake} disabled={!canUnstake}>
-              Unstake
-            </Button>
-            <Button onClick={handleUnstakeAndWithdraw} disabled={!canUnstakeAndWithdraw}>
-              Unstake and Withdraw
-            </Button>
           </div>
         </div>
-      }
-      borderColor="green"
-      borderBottom
-    />
+        <div className={styles.pendingUnstakeActions}>
+          <Button size="xs" type="primary" onClick={handleUnstakeAndWithdraw} disabled={!canUnstakeAndWithdraw}>
+            Unstake and Withdraw
+          </Button>
+          <Button size="xs" type="secondary-neutral" onClick={handleUnstake} disabled={!canUnstake}>
+            Unstake
+          </Button>
+        </div>
+      </div>
+    </div>
   );
 };
 
diff --git a/src/pages/dashboard/staking/radial-chart.tsx b/src/pages/dashboard/staking/radial-chart.tsx
index b6d8a8d8..936529dd 100644
--- a/src/pages/dashboard/staking/radial-chart.tsx
+++ b/src/pages/dashboard/staking/radial-chart.tsx
@@ -9,7 +9,7 @@ type Props = {
 
 const RadialChart = ({ completionPercent }: Props) => {
   const r = 73,
-    strokeWidth = 10,
+    strokeWidth = 8,
     side = r * 2 + strokeWidth * 2,
     center = r + strokeWidth;
 
@@ -19,12 +19,13 @@ const RadialChart = ({ completionPercent }: Props) => {
 
   return (
     <svg width={side} height={side}>
-      <circle cx={center} cy={center} r={r} stroke="#404141" strokeWidth={5} />
+      <circle cx={center} cy={center} r={r} stroke="#D1D5FD" strokeWidth={5} fill="none" />
 
       <path
         stroke="url(#gradient)"
         strokeWidth={strokeWidth}
         strokeLinecap="round"
+        fill="none"
         d={describeArc(center, center, r, 0, completionValue === 100 ? 359 : round((completionValue / 100) * 360))}
       />
 
@@ -33,8 +34,9 @@ const RadialChart = ({ completionPercent }: Props) => {
         y="45%"
         textAnchor="middle"
         dominantBaseline="middle"
-        fill="white"
-        fontSize={27}
+        fill="#1F267B"
+        fontSize={32}
+        fontWeight={500}
         children={completionText}
       />
 
@@ -43,15 +45,16 @@ const RadialChart = ({ completionPercent }: Props) => {
         y="62%"
         textAnchor="middle"
         dominantBaseline="middle"
-        fill="white"
-        children="OF TARGET MET"
+        fill="#455065"
         fontSize={12}
+        fontWeight={600}
+        children="OF TARGET MET"
       />
 
       <defs>
         <linearGradient id="gradient" x1="0%" x2="100%" y1="0%" y2="0%">
-          <stop offset="0%" stopColor="#7ce3cb" />
-          <stop offset="100%" stopColor="#7963b2" />
+          <stop offset="0%" stopColor="#1B39FF" />
+          <stop offset="100%" stopColor="#1B39FF" />
         </linearGradient>
       </defs>
     </svg>
diff --git a/src/pages/dashboard/staking/staking-pool.module.scss b/src/pages/dashboard/staking/staking-pool.module.scss
index c07d7558..7b7e05ee 100644
--- a/src/pages/dashboard/staking/staking-pool.module.scss
+++ b/src/pages/dashboard/staking/staking-pool.module.scss
@@ -1,133 +1,226 @@
 @import '../../../styles/variables.module.scss';
+@import '../../../styles/fonts.module.scss';
 
 .stakingPool {
   display: flex;
   align-items: center;
-  margin-top: $space-xxxl;
-  margin-bottom: 100px;
+  flex-direction: column;
+  margin-top: $space-xxl;
+  margin-bottom: 64px;
 
-  @media (max-width: $max-md) {
-    flex-direction: column;
-    margin-top: $space-xxl;
+  @media (min-width: $sm) {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: $space-xxl;
+    margin-top: $space-xl;
+    margin-bottom: 64px;
+    height: 162px;
+  }
+
+  @media (min-width: $md) {
+    margin-bottom: 72px;
   }
 }
 
 .reverseDirectionWrap {
   display: flex;
+  flex-direction: column-reverse;
   justify-content: center;
   align-items: center;
   width: 100%;
 
-  @media (max-width: $max-md) {
-    flex-direction: column-reverse;
+  @media (min-width: $sm) {
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
   }
 }
 
-.sectionBase {
+.firstSection {
   display: flex;
   flex-direction: column;
   width: 100%;
+}
+
+.sectionRow {
+  height: 86px;
+  display: flex;
+  align-items: center;
+  padding: $space-md;
+  padding-right: 0;
+  box-sizing: border-box;
+  gap: $space-xxl;
+  width: 100%;
+  border-top: 1px solid $color-dark-blue-10;
 
-  margin-right: $space-xxxl;
-  @media (max-width: $max-md) {
-    margin-right: unset;
+  &:nth-of-type(2) {
+    border-bottom: 1px solid $color-dark-blue-10;
+  }
+
+  @media (min-width: $sm) {
+    padding-left: 0;
+
+    &:nth-of-type(2) {
+      height: unset;
+      border-bottom: none;
+      padding-bottom: 0;
+    }
   }
 }
 
-.firstSection {
-  @extend .sectionBase;
-  justify-content: stretch;
+.firstSectionCell {
+  display: flex;
+  justify-content: space-between;
 }
 
-.secondSection {
-  @extend .sectionBase;
-  justify-content: center;
+.leftColumn {
+  text-align: right;
+}
 
-  @media (max-width: $max-md) {
-    flex-direction: row;
+.rightColumn {
+  width: 100%;
+
+  & img {
+    margin-left: 4px;
   }
 }
 
-.stakingTableRow {
-  height: 96px;
-  display: flex;
-  align-items: center;
-  padding: $space-md 0;
-  border-top: 1px solid $black-line-color;
-  box-sizing: border-box;
-  justify-content: center;
-  width: 100%;
+.firstSectionLabel {
+  @include font-body-6;
+  text-wrap: pretty;
+  color: $color-dark-blue-100;
 
-  // On "lg" resolution the text is "cluttered" because there is not enough height
-  @media (max-width: $max-lg) {
-    height: 120px;
+  @media (min-width: $sm) {
+    @include font-body-9;
   }
-  // On "md" resolution the layout changes to column and there is enough height
-  @media (max-width: $max-md) {
-    height: 96px;
+
+  @media (min-width: $md) {
+    @include font-body-6;
   }
 }
 
-.firstSectionCell {
-  width: 50%;
-  padding: 0 $space-md;
-  box-sizing: border-box;
+.firstSectionValue {
+  @include font-heading-4;
+  color: $color-dark-blue-400;
+  width: 120px; // Designs are saying 80px here, but they haven't accounted for the decimals
+
+  @media (min-width: $sm) {
+    @include font-heading-4;
+    width: 104px;
+  }
+
+  @media (min-width: $md) {
+    @include font-heading-3;
+    width: 168px;
+  }
+}
+
+.firstSectionValueSupplyGrowth {
+  @include font-heading-6; // Temporary, until we have the correct font size
+  color: $color-dark-blue-400;
+  // css below is from the designs, but it doesn't seem to be correct
+  // font-family: Inter;
+  // font-size: 40.5px;
+  // font-style: normal;
+  // font-weight: 600;
+  // line-height: 60px; /* 148.148% */
+
+  @media (min-width: $sm) {
+    @include font-heading-7; // Temporary
+  }
+
+  @media (min-width: $md) {
+    @include font-heading-6;
+  }
+}
+
+.secondSection {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
+  flex-direction: row;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 $space-xl $space-xs $space-xl;
+  border-bottom: 1px solid $color-dark-blue-10;
 
-  &.rightAlign {
+  @media (min-width: $sm) {
     flex-direction: column;
-    text-align: right;
+    padding: 0;
+    border: none;
   }
+}
+
+.secondSectionRow {
+  padding: 0;
+  margin: 0;
+  width: unset;
+  border: none;
 
-  @media (max-width: $max-xl) {
-    padding: 0 $space-xs;
+  &:nth-of-type(2) {
+    border: none;
   }
 }
 
 .secondSectionCell {
-  padding: 0 $space-md;
-  box-sizing: border-box;
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
+  align-items: center;
   flex-direction: column;
-  text-align: right;
-  flex: 1;
-  min-width: 110px;
-
-  @media (max-width: $max-md) {
-    align-items: center;
+  gap: 4px;
+  height: 60px;
+
+  @media (min-width: $sm) {
+    height: 86px;
+    align-items: flex-start;
+    box-sizing: border-box;
+    padding: 23px 32px 16px 0;
+    border-top: 1px solid $color-dark-blue-10;
+    border-bottom: 1px solid $color-dark-blue-10;
   }
 
-  @media (max-width: $max-xl) {
-    padding: 0 $space-xs;
+  @media screen and (min-width: $md) {
+    width: 220px;
   }
 }
 
-.secondSectionTitle {
-  font-size: $text-xsmall;
-  line-height: 18px;
-  color: $secondary-color;
-  font-weight: 500;
-  text-transform: uppercase;
+.secondSectionLabel {
+  @include font-tagline-11;
+  color: $color-dark-blue-100;
+
+  @media (min-width: $sm) {
+    @include font-body-13;
+  }
 }
 
-.stakingRadialChart {
-  display: flex;
+.secondSectionValue {
+  @include font-tagline-2;
+  color: $color-dark-blue-400;
+  text-align: center;
 
-  @media (max-width: $max-md) {
-    margin-top: $space-xl;
-    margin-bottom: $space-xl;
+  @media (min-width: $sm) {
+    @include font-body-8;
+  }
+
+  @media (min-width: $md) {
+    @include font-body-5;
+  }
+}
+
+.secondSectionCellTarget {
+  @media (min-width: $sm) {
+    padding-bottom: 0;
+    height: unset;
+    border: none;
   }
 }
 
-.stakingAnnualApy {
-  font-size: $heading-3;
-  line-height: $lh-heading-3;
-  font-weight: 600;
+.stakingRadialChart {
+  display: flex;
+  margin-top: $space-xxl;
+  margin-bottom: 18px;
+  padding: 0 6px 10px 6px;
 
-  @media (max-width: $max-xl) {
-    font-size: $heading-4;
-    line-height: $lh-heading-4;
+  @media (min-width: $sm) {
+    margin: 0;
   }
 }
diff --git a/src/pages/dashboard/staking/staking-pool.tsx b/src/pages/dashboard/staking/staking-pool.tsx
index 92c42617..56e278fe 100644
--- a/src/pages/dashboard/staking/staking-pool.tsx
+++ b/src/pages/dashboard/staking/staking-pool.tsx
@@ -2,7 +2,6 @@ import { useChainData } from '../../../chain-data';
 import { formatAndRoundApi3, round } from '../../../utils/api3-format';
 import { stakingPoolSelector } from '../../../logic/dashboard';
 import RadialChart from './radial-chart';
-import globalStyles from '../../../styles/global-styles.module.scss';
 import styles from './staking-pool.module.scss';
 import classNames from 'classnames';
 import { images, UNKNOWN_NUMBER } from '../../../utils';
@@ -26,25 +25,27 @@ const StakingPool = () => {
   return (
     <div className={styles.stakingPool}>
       <div className={styles.firstSection}>
-        <div className={styles.stakingTableRow}>
-          <div className={classNames(styles.firstSectionCell, styles.rightAlign)}>
-            <p className={styles.stakingAnnualApy}>{currentApyText}</p>
+        <div className={styles.sectionRow}>
+          <div className={classNames(styles.firstSectionCell, styles.leftColumn)}>
+            <p className={styles.firstSectionValue}>{currentApyText}</p>
           </div>
-          <div className={styles.firstSectionCell}>
-            <p className={globalStyles.secondaryColor}>Annual Rewards (APY)</p>
+          <div className={classNames(styles.firstSectionCell, styles.rightColumn)}>
+            <p className={styles.firstSectionLabel}>Annual Rewards (APY)</p>
             <Tooltip overlay={estimatedValueTooltip}>
-              <img src={images.help} alt="help" className={globalStyles.helpIcon} />
+              <img src={images.helpOutline} alt="help" />
             </Tooltip>
           </div>
         </div>
-        <div className={styles.stakingTableRow}>
-          <div className={classNames(styles.firstSectionCell, styles.rightAlign)}>
-            <h5>{annualTotalSupplyGrowthText}</h5>
+        <div className={styles.sectionRow}>
+          <div className={classNames(styles.firstSectionCell, styles.leftColumn)}>
+            <h5 className={classNames(styles.firstSectionValue, styles.firstSectionValueSupplyGrowth)}>
+              {annualTotalSupplyGrowthText}
+            </h5>
           </div>
-          <div className={styles.firstSectionCell}>
-            <p className={globalStyles.secondaryColor}>Annual Total Supply Growth</p>
+          <div className={classNames(styles.firstSectionCell, styles.rightColumn)}>
+            <p className={styles.firstSectionLabel}>Annual Total Supply Growth</p>
             <Tooltip overlay={estimatedValueTooltip}>
-              <img src={images.help} alt="help" className={globalStyles.helpIcon} />
+              <img src={images.helpOutline} alt="help" />
             </Tooltip>
           </div>
         </div>
@@ -52,16 +53,16 @@ const StakingPool = () => {
 
       <div className={classNames(styles.reverseDirectionWrap)}>
         <div className={styles.secondSection}>
-          <div className={styles.stakingTableRow}>
+          <div className={classNames(styles.sectionRow, styles.secondSectionRow)}>
             <div className={styles.secondSectionCell}>
-              <p className={styles.secondSectionTitle}>total staked</p>
-              <p className={globalStyles.medium}>{totalStaked}</p>
+              <p className={styles.secondSectionLabel}>total staked</p>
+              <p className={styles.secondSectionValue}>{totalStaked}</p>
             </div>
           </div>
-          <div className={styles.stakingTableRow}>
-            <div className={styles.secondSectionCell}>
-              <p className={styles.secondSectionTitle}>staking target</p>
-              <p className={globalStyles.medium}>{stakingTargetInTokens}</p>
+          <div className={classNames(styles.sectionRow, styles.secondSectionRow)}>
+            <div className={classNames(styles.secondSectionCell, styles.secondSectionCellTarget)}>
+              <p className={styles.secondSectionLabel}>staking target</p>
+              <p className={styles.secondSectionValue}>{stakingTargetInTokens}</p>
             </div>
           </div>
         </div>
diff --git a/src/styles/fonts.module.scss b/src/styles/fonts.module.scss
index e7086208..0108ae2d 100644
--- a/src/styles/fonts.module.scss
+++ b/src/styles/fonts.module.scss
@@ -209,6 +209,15 @@
   letter-spacing: 1px;
 }
 
+@mixin font-heading-4 {
+  font-family: Poppins;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 110%; /* 44px */
+  letter-spacing: 1px;
+}
+
 @mixin font-heading-5 {
   font-family: Poppins;
   font-size: 36px;
@@ -321,6 +330,15 @@
   letter-spacing: -0.44px;
 }
 
+@mixin font-subtitle-6 {
+  font-family: Karla;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 130%; /* 28.6px */
+  letter-spacing: -0.44px;
+}
+
 @mixin font-subtitle-8 {
   font-family: Karla;
   font-size: 20px;
@@ -383,3 +401,30 @@
   line-height: 100%; /* 14px */
   letter-spacing: 0.2px;
 }
+
+@mixin font-tagline-2 {
+  font-family: Karla;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 150%; /* 27px */
+  text-transform: uppercase;
+}
+
+@mixin font-tagline-8 {
+  font-family: Karla;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 150%; /* 21px */
+  text-transform: uppercase;
+}
+
+@mixin font-tagline-11 {
+  font-family: Karla;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 150%; /* 18px */
+  text-transform: uppercase;
+}
diff --git a/src/styles/global-styles.module.scss b/src/styles/global-styles.module.scss
index ef57c588..b6a309d2 100644
--- a/src/styles/global-styles.module.scss
+++ b/src/styles/global-styles.module.scss
@@ -31,36 +31,6 @@ p {
   margin: 0;
 }
 
-h1 {
-  font-size: 136px;
-  line-height: 164px;
-  font-weight: 600;
-}
-
-h2 {
-  font-size: 91px;
-  line-height: 104px;
-  font-weight: 600;
-}
-
-h3 {
-  font-size: 50px;
-  line-height: 60px;
-  font-weight: 600;
-}
-
-h4 {
-  font-size: 40px;
-  line-height: 52px;
-  font-weight: 600;
-}
-
-h5 {
-  font-size: 27px;
-  line-height: 35px;
-  font-weight: 300;
-}
-
 a {
   color: $secondary-color;
   border: 0;
diff --git a/src/styles/variables.module.scss b/src/styles/variables.module.scss
index 1ca36128..b90c4ba4 100644
--- a/src/styles/variables.module.scss
+++ b/src/styles/variables.module.scss
@@ -157,18 +157,46 @@ $gradient-medium-light: linear-gradient(
   #3c82ee 84%,
   #53a0d7 98%
 );
+$gradient-light: linear-gradient(180deg, #fafafa 0%, #f0f4ff 100%);
+$gradient-base-blue-01: linear-gradient(223deg, rgba(26, 79, 222, 0.6) 0%, rgba(26, 79, 222, 0.61) 100%),
+  conic-gradient(
+    from 110deg at 50% 47%,
+    rgba(30, 39, 57, 0.8) 0%,
+    rgba(250, 250, 250, 0.8) 5%,
+    rgba(30, 39, 57, 0.8) 9%,
+    rgba(250, 250, 250, 0.8) 13%,
+    rgba(30, 39, 57, 0.8) 20%,
+    rgba(250, 250, 250, 0.8) 25%,
+    rgba(30, 39, 57, 0.8) 30%,
+    rgba(250, 250, 250, 0.8) 36%,
+    rgba(30, 39, 57, 0.8) 41%,
+    rgba(250, 250, 250, 0.8) 45%,
+    rgba(30, 39, 57, 0.8) 50%,
+    rgba(250, 250, 250, 0.8) 55%,
+    rgba(30, 39, 57, 0.8) 58%,
+    rgba(250, 250, 250, 0.8) 62%,
+    rgba(30, 39, 57, 0.8) 65%,
+    rgba(250, 250, 250, 0.8) 69%,
+    rgba(30, 39, 57, 0.8) 77%,
+    rgba(250, 250, 250, 0.8) 83%,
+    rgba(30, 39, 57, 0.8) 90%,
+    rgba(250, 250, 250, 0.8) 96%,
+    rgba(30, 39, 57, 0.8) 100%
+  ),
+  linear-gradient(#fafafa 8%, #fafafa 40%, #d2dfff 62%, #ffffff 81%, rgba(245, 245, 245, 0.6) 100%);
 
 @mixin gradient-border($gradient) {
   @supports (mask-composite: exclude) {
     &:before {
       content: '';
       position: absolute;
-      inset: -1px -1px -1px -1px;
+      inset: -1px;
       padding: 1px;
       -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       mask-composite: exclude;
       background: $gradient;
       border-radius: inherit;
+      pointer-events: none;
     }
   }
 }
diff --git a/src/utils/image-list.ts b/src/utils/image-list.ts
index d3e7bfa9..c5d09986 100644
--- a/src/utils/image-list.ts
+++ b/src/utils/image-list.ts
@@ -20,7 +20,9 @@ export const images = {
   externalLink: '/external-link.svg',
   hamburgerMenu: '/hamburger-menu.svg',
   help: '/help.svg',
+  helpOutline: '/help-outline.svg',
   info: '/info.svg',
+  infoCircle: '/info-circle.svg',
   notificationClose: '/notification-close.svg',
   success: '/success.svg',
   texture: '/texture.png',