diff --git a/src/app/components/accountHeader/optionsDialog.tsx b/src/app/components/accountHeader/optionsDialog.tsx
index c07b21c85..4baa96287 100644
--- a/src/app/components/accountHeader/optionsDialog.tsx
+++ b/src/app/components/accountHeader/optionsDialog.tsx
@@ -10,9 +10,9 @@ const Container = styled.div((props) => ({
   position: 'absolute',
   top: 30,
   right: 20,
-  paddingTop: props.theme.spacing(12.5),
-  paddingBottom: props.theme.spacing(1),
   borderRadius: 12,
+  paddingTop: 11,
+  paddingBottom: 11,
   width: 179,
   background: props.theme.colors.background.elevation2,
 }));
@@ -22,16 +22,17 @@ const ButtonRow = styled.button`
   align-items: center;
   background: transparent;
   justify-content: flex-start;
-  margin-left: 24px;
-  margin-right: 24px;
-  margin-bottom: 24px;
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 11px;
+  padding-bottom: 11px;
   font: ${(props) => props.theme.body_medium_m};
   color: ${(props) => props.theme.colors.white['0']};
   :hover {
-    opacity: 0.8;
+    background: ${(props) => props.theme.colors.background.elevation3};
   }
   :active {
-    opacity: 0.6;
+    background: ${(props) => props.theme.colors.background.elevation3};
   }
 `;
 
diff --git a/src/app/components/button/index.tsx b/src/app/components/button/index.tsx
index 4c04918fe..99c265b19 100644
--- a/src/app/components/button/index.tsx
+++ b/src/app/components/button/index.tsx
@@ -21,26 +21,27 @@ const Button = styled.button<ButtonProps>((props) => ({
 }));
 
 const AnimatedButton = styled(Button)`
-:hover {
-  background: #6977F8;
-}
-:focus {
-  background: #6977F8;
-  opacity:0.6;
-}
+  :hover {
+    background: ${(props) => (props.warning ? props.theme.colors.feedback.error : props.theme.colors.action.classicLight)};
+    opacity: 0.6;
+  }
+  :focus {
+    background: ${(props) => (props.warning ? props.theme.colors.feedback.error : props.theme.colors.action.classicLight)};
+    opacity: 0.6;
+  }
 `;
 
 const TransparentButton = styled(Button)`
   background-color: transparent;
-  border: 1px solid #4C5187;
+  border: ${(props) => `1px solid ${props.theme.colors.background.elevation6}`}
 `;
 
 const AnimatedTransparentButton = styled(TransparentButton)`
 :hover {
-  background: rgba(76, 81, 135, 0.2);
+  background: ${(props) => props.theme.colors.background.elevation6_800};
 }
 :focus {
-  background: rgba(85, 101, 247, 0.2);
+  background: ${(props) => props.theme.colors.action.classic800};
 }
 `;
 
diff --git a/src/app/components/confirmScreen/index.tsx b/src/app/components/confirmScreen/index.tsx
index bbfb11b46..331e56c8a 100644
--- a/src/app/components/confirmScreen/index.tsx
+++ b/src/app/components/confirmScreen/index.tsx
@@ -50,7 +50,7 @@ const CancelButton = styled.button((props) => ({
   alignItems: 'center',
   borderRadius: props.theme.radius(1),
   backgroundColor: props.theme.colors.background.elevation0,
-  border: '1px solid #272A44',
+  border: `1px solid ${props.theme.colors.background.elevation2}`,
   color: props.theme.colors.white['0'],
   width: '50%',
   height: 44,
diff --git a/src/app/components/extendedScreenContainer/index.tsx b/src/app/components/extendedScreenContainer/index.tsx
index 0d252c6b8..9ebc9e9ee 100644
--- a/src/app/components/extendedScreenContainer/index.tsx
+++ b/src/app/components/extendedScreenContainer/index.tsx
@@ -9,7 +9,7 @@ const ExtendedScreenRouteContainer = styled.div((props) => ({
   height: '100vh',
   width: '100vw',
   backgroundColor: props.theme.colors.background.elevation0,
-  border: '1px solid #272a44',
+  border: `1px solid ${props.theme.colors.background.elevation2}`,
   boxShadow: '0px 8px 28px rgba(0, 0, 0, 0.35)',
 }));
 
diff --git a/src/app/components/seedPhraseInput/index.tsx b/src/app/components/seedPhraseInput/index.tsx
index d0a2c6952..9e115cf82 100644
--- a/src/app/components/seedPhraseInput/index.tsx
+++ b/src/app/components/seedPhraseInput/index.tsx
@@ -8,11 +8,16 @@ const InputContainer = styled.div({
 });
 
 const SeedPhraseInputLabel = styled.p((props) => ({
+  ...props.theme.body_bold_m,
   textAlign: 'left',
   marginBottom: props.theme.spacing(8),
 }));
 
-const SeedphraseInput = styled.textarea((props) => ({
+interface ContainerProps {
+  error: boolean;
+}
+
+const SeedphraseInput = styled.textarea<ContainerProps>((props) => ({
   ...props.theme.body_medium_m,
   backgroundColor: props.theme.colors.background.elevation0,
   color: props.theme.colors.white['0'],
@@ -20,8 +25,12 @@ const SeedphraseInput = styled.textarea((props) => ({
   resize: 'none',
   minHeight: 140,
   padding: props.theme.spacing(8),
-  border: '1px solid #272A44',
+  border: props.error ? `1px solid ${props.theme.colors.feedback.error_700}` : `1px solid ${props.theme.colors.background.elevation3}`,
+  outline: 'none',
   borderRadius: props.theme.radius(1),
+  ':focus-within': {
+    border: `1px solid ${props.theme.colors.background.elevation6}`,
+  },
 }));
 const ErrorMessage = styled.h2((props) => ({
   ...props.theme.body_medium_m,
@@ -54,6 +63,7 @@ export default function SeedPhraseInput(props: SeedPhraseInputProps): JSX.Elemen
     <InputContainer>
       <SeedPhraseInputLabel>{t('SEED_INPUT_LABEL')}</SeedPhraseInputLabel>
       <SeedphraseInput
+        error={seedError !== ''}
         value={seed}
         name="secretKey"
         placeholder={t('SEED_INPUT_PLACEHOLDER')}
diff --git a/src/app/components/seedPhraseView/index.tsx b/src/app/components/seedPhraseView/index.tsx
index 235739816..d8253639c 100644
--- a/src/app/components/seedPhraseView/index.tsx
+++ b/src/app/components/seedPhraseView/index.tsx
@@ -37,10 +37,11 @@ const OuterSeedContainer = styled.div((props) => ({
 const ShowSeedButton = styled.button((props) => ({
   ...props.theme.body_xs,
   color: props.theme.colors.white[0],
-  backgroundColor: 'rgba(255, 255, 255, 0.1)',
+  backgroundColor: props.theme.colors.white[900],
+  border: `1px solid ${props.theme.colors.white[600]}`,
   height: 36,
   width: 110,
-  borderRadius: props.theme.radius(3),
+  borderRadius: 48,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -51,6 +52,14 @@ const ShowSeedButton = styled.button((props) => ({
   img: {
     marginRight: props.theme.spacing(4),
   },
+  ':hover': {
+    backgroundColor: props.theme.colors.white[850],
+    border: `1px solid ${props.theme.colors.white[800]}`,
+  },
+  ':focus': {
+    backgroundColor: props.theme.colors.white[600],
+    border: `1px solid ${props.theme.colors.white[800]}`,
+  },
 }));
 
 export default function SeedphraseView(props: SeedPhraseViewProps) {
diff --git a/src/app/components/tokenTile/index.tsx b/src/app/components/tokenTile/index.tsx
index bdf3e43f9..514285d3b 100644
--- a/src/app/components/tokenTile/index.tsx
+++ b/src/app/components/tokenTile/index.tsx
@@ -14,6 +14,7 @@ import { getFtBalance, getFtTicker } from '@utils/tokens';
 
 interface TileProps {
   margin?: number;
+  inModel: boolean;
 }
 
 interface TickerProps {
@@ -29,7 +30,15 @@ const TileContainer = styled.button<TileProps>((props) => ({
   paddingTop: props.theme.spacing(7.25),
   paddingBottom: props.margin ?? props.theme.spacing(7.25),
   borderRadius: props.theme.radius(2),
-  marginBottom: props.theme.spacing(6),
+  marginBottom: props.inModel ? props.theme.spacing(0) : props.theme.spacing(6),
+  ':hover': {
+    ':-webkit-transform': props.inModel ? 'translateY(0px)' : 'translateY(-1px)',
+    transform: props.inModel ? 'translateY(0px)' : 'translateY(-1px)',
+    backgroundColor: props.inModel ? `1px solid ${props.theme.colors.background.elevation3}` : props.color,
+  },
+  ':focus': {
+    backgroundColor: props.inModel ? props.theme.colors.background.elevation3 : props.theme.colors.background.elevation2,
+  },
 }));
 
 const TickerImage = styled.img<TickerProps>((props) => ({
@@ -313,7 +322,7 @@ function TokenTile({
   };
 
   return (
-    <TileContainer color={underlayColor} margin={margin} onClick={handleTokenPressed}>
+    <TileContainer inModel={enlargeTicker} color={underlayColor} margin={margin} onClick={handleTokenPressed}>
       <RowContainer>
         {renderIcon()}
         <TextContainer>
diff --git a/src/app/components/topRow/index.tsx b/src/app/components/topRow/index.tsx
index 10901af87..52e7aa92d 100644
--- a/src/app/components/topRow/index.tsx
+++ b/src/app/components/topRow/index.tsx
@@ -22,11 +22,11 @@ const BackButton = styled.button({
 
 const AnimatedBackButton = styled(BackButton)`
 :hover {
-  background: rgba(255, 255, 255, 0.08);
+  background: ${(props) => props.theme.colors.white[900]};
   border-radius: 24px;
 }
 :focus {
-  background: rgba(255, 255, 255, 0.12);
+  background: ${(props) => props.theme.colors.white[850]};
   border-radius: 24px;
 }
 `;
diff --git a/src/app/components/transactions/btcTransaction.tsx b/src/app/components/transactions/btcTransaction.tsx
index d72874902..70f2ea12a 100644
--- a/src/app/components/transactions/btcTransaction.tsx
+++ b/src/app/components/transactions/btcTransaction.tsx
@@ -14,8 +14,15 @@ interface TransactionHistoryItemProps {
 
 const TransactionContainer = styled.button((props) => ({
   display: 'flex',
-  marginBottom: props.theme.spacing(10),
+  paddingTop: props.theme.spacing(5),
+  paddingBottom: props.theme.spacing(5),
   background: 'none',
+  ':hover': {
+    background: props.theme.colors.white[900],
+  },
+  ':focus': {
+    background: props.theme.colors.white[850],
+  },
 }));
 
 const TransactionInfoContainer = styled.div((props) => ({
diff --git a/src/app/components/transactions/stxTransferTransaction.tsx b/src/app/components/transactions/stxTransferTransaction.tsx
index 300f0fac2..3bf29e489 100644
--- a/src/app/components/transactions/stxTransferTransaction.tsx
+++ b/src/app/components/transactions/stxTransferTransaction.tsx
@@ -10,8 +10,15 @@ import useWalletSelector from '@hooks/useWalletSelector';
 
 const TransactionContainer = styled.button((props) => ({
   display: 'flex',
-  marginBottom: props.theme.spacing(10),
+  paddingTop: props.theme.spacing(5),
+  paddingBottom: props.theme.spacing(5),
   background: 'none',
+  ':hover': {
+    background: props.theme.colors.white[900],
+  },
+  ':focus': {
+    background: props.theme.colors.white[850],
+  },
 }));
 
 const TransactionInfoContainer = styled.div((props) => ({
diff --git a/src/app/screens/backupWallet/index.tsx b/src/app/screens/backupWallet/index.tsx
index 4ae41c705..532189725 100644
--- a/src/app/screens/backupWallet/index.tsx
+++ b/src/app/screens/backupWallet/index.tsx
@@ -2,6 +2,7 @@ import backup from '@assets/img/backupWallet/backup.svg';
 import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import ActionButton from '@components/button';
 
 const Container = styled.div((props) => ({
   flex: 1,
@@ -45,29 +46,9 @@ const BackupActionsContainer = styled.div((props) => ({
   width: '100%',
 }));
 
-const BackupButton = styled.button((props) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: props.theme.radius(1),
-  backgroundColor: props.theme.colors.action.classic,
-  color: props.theme.colors.white['0'],
-  width: '48%',
-  height: 44,
-}));
-
-const SkipBackupButton = styled.button((props) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: props.theme.radius(1),
-  backgroundColor: props.theme.colors.background.elevation0,
-  border: '1px solid #272A44',
-  color: props.theme.colors.white['0'],
-  width: '48%',
-  height: 44,
+const TransparentButtonContainer = styled.div((props) => ({
+  marginRight: props.theme.spacing(8),
+  width: '100%',
 }));
 
 function BackupWallet(): JSX.Element {
@@ -91,8 +72,10 @@ function BackupWallet(): JSX.Element {
         <Title>{t('SCREEN_TITLE')}</Title>
         <SubTitle>{t('SCREEN_SUBTITLE')}</SubTitle>
         <BackupActionsContainer>
-          <SkipBackupButton onClick={handleSkip}>{t('BACKUP_SKIP_BUTTON')}</SkipBackupButton>
-          <BackupButton onClick={handleBackup}>{t('BACKUP_BUTTON')}</BackupButton>
+          <TransparentButtonContainer>
+            <ActionButton onPress={handleSkip} transparent text={t('BACKUP_SKIP_BUTTON')} />
+          </TransparentButtonContainer>
+          <ActionButton onPress={handleBackup} text={t('BACKUP_BUTTON')} />
         </BackupActionsContainer>
       </ContentContainer>
     </Container>
diff --git a/src/app/screens/backupWalletSteps/verifySeed.tsx b/src/app/screens/backupWalletSteps/verifySeed.tsx
index 768047351..6a420a01e 100644
--- a/src/app/screens/backupWalletSteps/verifySeed.tsx
+++ b/src/app/screens/backupWalletSteps/verifySeed.tsx
@@ -1,3 +1,4 @@
+import ActionButton from '@components/button';
 import SeedPhraseInput from '@components/seedPhraseInput';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -22,33 +23,18 @@ const ButtonsContainer = styled.div((props) => ({
   justifyContent: 'space-between',
   flex: 1,
   alignItems: 'flex-end',
-  marginBottom: props.theme.spacing(20),
+  marginBottom: props.theme.spacing(30),
   width: '100%',
 }));
 
-const VerifyButton = styled.button((props) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: props.theme.radius(1),
-  backgroundColor: props.theme.colors.action.classic,
-  color: props.theme.colors.white['0'],
-  width: '48%',
-  height: 44,
+const TransparentButtonContainer = styled.div((props) => ({
+  marginRight: props.theme.spacing(2),
+  width: '100%',
 }));
 
-const BackButton = styled.button((props) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: props.theme.radius(1),
-  backgroundColor: props.theme.colors.background.elevation0,
-  border: '1px solid #272A44',
-  color: props.theme.colors.white['0'],
-  width: '48%',
-  height: 44,
+const ButtonContainer = styled.div((props) => ({
+  marginLeft: props.theme.spacing(2),
+  width: '100%',
 }));
 
 interface VerifySeedProps {
@@ -63,8 +49,7 @@ export default function VerifySeed(props: VerifySeedProps): JSX.Element {
   const { t } = useTranslation('translation', { keyPrefix: 'BACKUP_WALLET_SCREEN' });
   const { onBack, onVerifySuccess, seedPhrase } = props;
 
-  const cleanMnemonic = (rawSeed: string): string =>
-    rawSeed.replace(/\s\s+/g, ' ').replace(/\n/g, ' ').trim();
+  const cleanMnemonic = (rawSeed: string): string => rawSeed.replace(/\s\s+/g, ' ').replace(/\n/g, ' ').trim();
 
   const handleVerify = () => {
     if (seedPhrase === cleanMnemonic(seedInput)) {
@@ -84,8 +69,20 @@ export default function VerifySeed(props: VerifySeedProps): JSX.Element {
         setSeedError={setErr}
       />
       <ButtonsContainer>
-        <BackButton onClick={onBack}>{t('SEED_PHRASE_BACK_BUTTON')}</BackButton>
-        <VerifyButton onClick={handleVerify}>{t('SEED_PHRASE_VERIFY_BUTTON')}</VerifyButton>
+        <TransparentButtonContainer>
+          <ActionButton
+            onPress={onBack}
+            transparent
+            text={t('SEED_PHRASE_BACK_BUTTON')}
+          />
+        </TransparentButtonContainer>
+        <ButtonContainer>
+          <ActionButton
+            text={t('SEED_PHRASE_VERIFY_BUTTON')}
+            onPress={handleVerify}
+            disabled={seedInput === ''}
+          />
+        </ButtonContainer>
       </ButtonsContainer>
     </Container>
   );
diff --git a/src/app/screens/coinDashboard/transactionsHistoryList.tsx b/src/app/screens/coinDashboard/transactionsHistoryList.tsx
index 3495b1059..23e71e7fa 100644
--- a/src/app/screens/coinDashboard/transactionsHistoryList.tsx
+++ b/src/app/screens/coinDashboard/transactionsHistoryList.tsx
@@ -50,7 +50,7 @@ const SectionHeader = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
-  marginBottom: props.theme.spacing(12),
+  marginBottom: props.theme.spacing(7),
 }));
 
 const SectionSeparator = styled.div((props) => ({
diff --git a/src/app/screens/createWalletSuccess/index.tsx b/src/app/screens/createWalletSuccess/index.tsx
index 0924f88f2..28ac96fbf 100644
--- a/src/app/screens/createWalletSuccess/index.tsx
+++ b/src/app/screens/createWalletSuccess/index.tsx
@@ -69,6 +69,13 @@ const ContinueButton = styled.button((props) => ({
   marginBottom: props.theme.spacing(30),
   height: 44,
   textAlign: 'center',
+  ':hover': {
+    background: props.theme.colors.action.classicLight,
+  },
+  ':focus': {
+    background: props.theme.colors.action.classicLight,
+    opacity: 0.6,
+  },
 }));
 
 function CreateWalletSuccess(): JSX.Element {
diff --git a/src/app/screens/forgotPassword/index.tsx b/src/app/screens/forgotPassword/index.tsx
index aea073e51..e927c3eb4 100644
--- a/src/app/screens/forgotPassword/index.tsx
+++ b/src/app/screens/forgotPassword/index.tsx
@@ -54,7 +54,7 @@ const CancelButton = styled.button((props) => ({
   alignItems: 'center',
   borderRadius: props.theme.radius(1),
   backgroundColor: props.theme.colors.background.elevation0,
-  border: '1px solid #272A44',
+  border: `1px solid ${props.theme.colors.background.elevation2}`,
   color: props.theme.colors.white['0'],
   width: '48%',
   height: 44,
diff --git a/src/app/screens/home/coinSelectModal/index.tsx b/src/app/screens/home/coinSelectModal/index.tsx
index 53f9502bd..f692cc6a8 100644
--- a/src/app/screens/home/coinSelectModal/index.tsx
+++ b/src/app/screens/home/coinSelectModal/index.tsx
@@ -58,7 +58,7 @@ function CoinSelectModal({
           icon={IconBitcoin}
           loading={loadingBtcData}
           underlayColor={theme.colors.background.elevation2}
-          margin={2}
+          margin={14}
           enlargeTicker
           onPress={handleOnBitcoinPress}
         />
@@ -69,7 +69,7 @@ function CoinSelectModal({
           icon={IconStacks}
           loading={loadingWalletData}
           underlayColor={theme.colors.background.elevation2}
-          margin={2}
+          margin={14}
           enlargeTicker
           onPress={handleOnStackPress}
         />
@@ -89,7 +89,7 @@ function CoinSelectModal({
             icon={IconStacks}
             loading={loadingWalletData}
             underlayColor={theme.colors.background.elevation2}
-            margin={2}
+            margin={14}
             enlargeTicker
             onPress={() => {
               onSelectCoin(coin);
diff --git a/src/app/screens/landing/index.tsx b/src/app/screens/landing/index.tsx
index 184b00e06..954599165 100644
--- a/src/app/screens/landing/index.tsx
+++ b/src/app/screens/landing/index.tsx
@@ -39,8 +39,9 @@ const ActionButtonsContainer = styled.div((props) => ({
 
 const CreateButton = styled.button((props) => ({
   display: 'flex',
-  ...props.theme.body_xs,
-  color: props.theme.colors.white['200'],
+  ...props.theme.tile_text,
+  fontSize: 12,
+  color: props.theme.colors.white['0'],
   textAlign: 'center',
   flexDirection: 'row',
   justifyContent: 'center',
@@ -50,6 +51,13 @@ const CreateButton = styled.button((props) => ({
   marginBottom: props.theme.spacing(8),
   width: '100%',
   height: 44,
+  ':hover': {
+    background: props.theme.colors.action.classicLight,
+  },
+  ':focus': {
+    background: props.theme.colors.action.classicLight,
+    opacity: 0.6,
+  },
 }));
 
 const AppVersion = styled.p((props) => ({
@@ -62,8 +70,9 @@ const AppVersion = styled.p((props) => ({
 
 const RestoreButton = styled.button((props) => ({
   display: 'flex',
-  ...props.theme.body_xs,
-  color: props.theme.colors.white['200'],
+  ...props.theme.tile_text,
+  fontSize: 12,
+  color: props.theme.colors.white['0'],
   textAlign: 'center',
   flexDirection: 'row',
   justifyContent: 'center',
@@ -73,6 +82,12 @@ const RestoreButton = styled.button((props) => ({
   border: `0.5px solid ${props.theme.colors.background.elevation2}`,
   width: '100%',
   height: 44,
+  ':hover': {
+    background: props.theme.colors.background.elevation6_800,
+  },
+  ':focus': {
+    background: props.theme.colors.action.classic800,
+  },
 }));
 
 function Landing(): JSX.Element {
diff --git a/src/app/screens/login/index.tsx b/src/app/screens/login/index.tsx
index 40374f14d..e2a03c3d0 100644
--- a/src/app/screens/login/index.tsx
+++ b/src/app/screens/login/index.tsx
@@ -5,9 +5,9 @@ import Eye from '@assets/img/createPassword/Eye.svg';
 import EyeSlash from '@assets/img/createPassword/EyeSlash.svg';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { MoonLoader } from 'react-spinners';
 import useWalletReducer from '@hooks/useWalletReducer';
 import { animated, useSpring } from '@react-spring/web';
+import ActionButton from '@components/button';
 
 declare const VERSION: string;
 
@@ -51,7 +51,7 @@ const PasswordInputContainer = styled.div((props) => ({
   display: 'flex',
   alignItems: 'center',
   width: '100%',
-  border: '1px solid #303354;',
+  border: `1px solid ${props.theme.colors.background.elevation3}`,
   paddingLeft: props.theme.spacing(8),
   paddingRight: props.theme.spacing(8),
   borderRadius: props.theme.radius(1),
@@ -76,17 +76,9 @@ const LandingTitle = styled.h1((props) => ({
   textAlign: 'center',
 }));
 
-const VerifyButton = styled.button((props) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: props.theme.radius(1),
-  backgroundColor: props.theme.colors.action.classic,
-  color: props.theme.colors.white['0'],
+const ButtonContainer = styled.div((props) => ({
   marginTop: props.theme.spacing(8),
   width: '100%',
-  height: 44,
 }));
 
 const ErrorMessage = styled.h2((props) => ({
@@ -185,9 +177,9 @@ function Login(): JSX.Element {
           </button>
         </PasswordInputContainer>
         {error && <ErrorMessage>{error}</ErrorMessage>}
-        <VerifyButton onClick={handleVerifyPassword}>
-          {!isVerifying ? t('VERIFY_PASSWORD_BUTTON') : <MoonLoader color="white" size={20} />}
-        </VerifyButton>
+        <ButtonContainer>
+          <ActionButton onPress={handleVerifyPassword} text={t('VERIFY_PASSWORD_BUTTON')} processing={isVerifying} />
+        </ButtonContainer>
         <ForgotPasswordButton onClick={handleForgotPassword}>
           {t('FORGOT_PASSWORD_BUTTON')}
         </ForgotPasswordButton>
diff --git a/src/app/screens/nftDashboard/index.tsx b/src/app/screens/nftDashboard/index.tsx
index 0926bf62e..e9d03342f 100644
--- a/src/app/screens/nftDashboard/index.tsx
+++ b/src/app/screens/nftDashboard/index.tsx
@@ -89,12 +89,16 @@ const WebGalleryButton = styled.button((props) => ({
   backgroundColor: 'transparent',
   width: '100%',
   marginTop: props.theme.spacing(8),
+  opacity: 0.8,
+  ':hover': {
+    opacity: 1,
+  },
 }));
 
 const WebGalleryButtonText = styled.div((props) => ({
   ...props.theme.body_xs,
   fontWeight: 700,
-  color: props.theme.colors.white['200'],
+  color: props.theme.colors.white['0'],
   textAlign: 'center',
 }));
 
diff --git a/src/app/screens/nftDetail/index.tsx b/src/app/screens/nftDetail/index.tsx
index 85ea3d037..8add83399 100644
--- a/src/app/screens/nftDetail/index.tsx
+++ b/src/app/screens/nftDetail/index.tsx
@@ -23,7 +23,6 @@ import { NftData } from '@secretkeylabs/xverse-core/types/api/stacks/assets';
 import { NftDetailResponse } from '@secretkeylabs/xverse-core/types';
 import { MoonLoader } from 'react-spinners';
 import AccountHeaderComponent from '@components/accountHeader';
-import Seperator from '@components/seperator';
 import NftAttribute from './nftAttribute';
 import DescriptionTile from './descriptionTile';
 
@@ -149,7 +148,7 @@ const GridContainer = styled.div((props) => ({
   gridTemplateColumns: 'repeat(auto-fit,minmax(150px,1fr))',
   paddingBottom: props.theme.spacing(16),
   marginBottom: props.theme.spacing(12),
-  borderBottom: '1px solid #272A44',
+  borderBottom: `1px solid ${props.theme.colors.background.elevation2}`,
 }));
 
 const ShareButtonContainer = styled.div((props) => ({
diff --git a/src/app/screens/onboarding/index.tsx b/src/app/screens/onboarding/index.tsx
index 395109932..fef6f4bd8 100644
--- a/src/app/screens/onboarding/index.tsx
+++ b/src/app/screens/onboarding/index.tsx
@@ -8,6 +8,7 @@ import { useNavigate } from 'react-router-dom';
 import { animated, useTransition } from '@react-spring/web';
 import { getIsTermsAccepted, saveHasFinishedOnboarding } from '@utils/localStorage';
 import Steps from '@components/steps';
+import ActionButton from '@components/button';
 
 const Container = styled.div`
   display: flex;
@@ -55,45 +56,9 @@ const OnBoardingActionsContainer = styled.div((props) => ({
   marginBottom: props.theme.spacing(30),
 }));
 
-const OnBoardingNextButton = styled.button((props) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: props.theme.radius(1),
-  backgroundColor: props.theme.colors.action.classic,
-  marginLeft: props.theme.spacing(8),
-  color: props.theme.colors.white['0'],
-  flex: 1,
-  height: 44,
-}));
-
-const OnBoardingSkipButton = styled.button((props) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: props.theme.radius(1),
-  backgroundColor: props.theme.colors.background.elevation0,
-  border: '1px solid #272A44',
-  color: props.theme.colors.white['0'],
-  flex: 1,
-  height: 44,
-}));
-
-const OnBoardingContinueButton = styled(animated.button)((props) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: props.theme.radius(1),
-  backgroundColor: props.theme.colors.action.classic,
-  marginLeft: props.theme.spacing(8),
+const TransparentButtonContainer = styled.div((props) => ({
   marginRight: props.theme.spacing(8),
-  marginBottom: props.theme.spacing(30),
-  color: props.theme.colors.white['0'],
-  width: '90%',
-  height: 44,
+  width: '100%',
 }));
 
 function Onboarding(): JSX.Element {
@@ -170,17 +135,18 @@ function Onboarding(): JSX.Element {
             <OnboardingSubTitle>{onboardingViews[index].subtitle}</OnboardingSubTitle>
           </OnBoardingContentContainer>
           {index === onboardingViews.length - 1 ? (
-            <OnBoardingContinueButton onClick={handleSkip} style={style}>
-              {t('ONBOARDING_CONTINUE_BUTTON')}
-            </OnBoardingContinueButton>
+            <OnBoardingActionsContainer>
+              <ActionButton
+                onPress={handleSkip}
+                text={t('ONBOARDING_CONTINUE_BUTTON')}
+              />
+            </OnBoardingActionsContainer>
           ) : (
             <OnBoardingActionsContainer>
-              <OnBoardingSkipButton onClick={handleSkip}>
-                {t('ONBOARDING_SKIP_BUTTON')}
-              </OnBoardingSkipButton>
-              <OnBoardingNextButton onClick={handleClickNext}>
-                {t('ONBOARDING_NEXT_BUTTON')}
-              </OnBoardingNextButton>
+              <TransparentButtonContainer>
+                <ActionButton onPress={handleSkip} transparent text={t('ONBOARDING_SKIP_BUTTON')} />
+              </TransparentButtonContainer>
+              <ActionButton onPress={handleClickNext} text={t('ONBOARDING_NEXT_BUTTON')} />
             </OnBoardingActionsContainer>
           )}
         </>
diff --git a/src/app/screens/restoreWallet/enterSeedphrase.tsx b/src/app/screens/restoreWallet/enterSeedphrase.tsx
index 062b977c5..fc13696eb 100644
--- a/src/app/screens/restoreWallet/enterSeedphrase.tsx
+++ b/src/app/screens/restoreWallet/enterSeedphrase.tsx
@@ -1,3 +1,4 @@
+import ActionButton from '@components/button';
 import SeedPhraseInput from '@components/seedPhraseInput';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,18 +11,14 @@ const Container = styled.div({
 });
 
 const Title = styled.h1((props) => ({
-  ...props.theme.body_medium_m,
-  color: props.theme.colors.white['400'],
+  ...props.theme.body_l,
+  color: props.theme.colors.white[200],
   marginTop: props.theme.spacing(21),
   marginBottom: props.theme.spacing(16),
 }));
 
-const ContinueButton = styled.button((props) => ({
-  borderRadius: props.theme.radius(1),
-  backgroundColor: props.theme.colors.action.classic,
-  color: props.theme.colors.white['0'],
+const ButtonContainer = styled.div((props) => ({
   width: '100%',
-  height: 44,
   marginTop: 'auto',
   marginBottom: props.theme.spacing(30),
 }));
@@ -50,7 +47,9 @@ function EnterSeedPhrase(props: Props): JSX.Element {
         seedError={seedError}
         setSeedError={setSeedError}
       />
-      <ContinueButton onClick={onContinue}>{t('CONTINUE_BUTTON')}</ContinueButton>
+      <ButtonContainer>
+        <ActionButton onPress={onContinue} disabled={seed === ''} text={t('CONTINUE_BUTTON')} />
+      </ButtonContainer>
     </Container>
   );
 }
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 4c2966443..83659ceb4 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -2,12 +2,17 @@ const Theme = {
   colors: {
     action: {
       classic: '#5565F7',
+      classicLight: '#7383FF',
+      classic800: 'rgba(85, 101, 247, 0.2)',
     },
     white: {
       0: '#FFFFFF',
       200: 'rgba(255, 255, 255, 0.8)',
       400: 'rgba(255, 255, 255, 0.6)',
       600: 'rgba(255, 255, 255, 0.2)',
+      800: 'rgba(255, 255, 255, 0.20)',
+      850: 'rgba(255, 255, 255, 0.15)',
+      900: 'rgba(255, 255, 255, 0.1)',
     },
     background: {
       'elevation-1': '#070A13',
@@ -16,6 +21,8 @@ const Theme = {
       elevation2: '#272A44',
       elevation3: '#303354',
       elevation6: '#4C5187',
+      elevation6_600: 'rgba(76, 81, 135, 0.4)',
+      elevation6_800: 'rgba(76, 81, 135, 0.2)',
       elevation8: '#7E89AB',
       modalBackdrop: 'rgba(18,21,30,0.6)',
     },
@@ -23,6 +30,7 @@ const Theme = {
       success: '#51D6A6',
       caution: '#F2A900',
       error: '#D33C3C',
+      error_700: 'rgba(211, 60, 60, 0.3)',
     },
     grey: '#24252C',
   },