diff --git a/src/app/components/resetWallet/index.tsx b/src/app/components/resetWallet/index.tsx
index d90dda642..eef9a344d 100644
--- a/src/app/components/resetWallet/index.tsx
+++ b/src/app/components/resetWallet/index.tsx
@@ -31,6 +31,7 @@ function ResetWalletPrompt({
   openResetWalletScreen,
 }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'SETTING_SCREEN' });
+
   return (
     <Sheet
       visible={showResetWalletPrompt}
diff --git a/src/app/screens/backupWallet/index.tsx b/src/app/screens/backupWallet/index.tsx
index 58483a5b1..7751a10ec 100644
--- a/src/app/screens/backupWallet/index.tsx
+++ b/src/app/screens/backupWallet/index.tsx
@@ -10,8 +10,8 @@ import styled from 'styled-components';
 
 const Container = styled.div((props) => ({
   flex: 1,
-  paddingLeft: props.theme.spacing(8),
-  paddingRight: props.theme.spacing(8),
+  paddingLeft: props.theme.space.m,
+  paddingRight: props.theme.space.m,
   display: 'flex',
   flexDirection: 'column',
 }));
@@ -27,7 +27,7 @@ const ContentContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
-  marginBottom: props.theme.spacing(32),
+  marginBottom: props.theme.space.xxxl,
 }));
 
 const Title = styled.h1((props) => ({
@@ -46,7 +46,7 @@ const BackupActionsContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'space-between',
-  marginTop: props.theme.spacing(20),
+  marginTop: props.theme.space.xxl,
   width: '100%',
   columnGap: props.theme.space.xs,
 }));
@@ -55,7 +55,7 @@ const LoadingContainer = styled.div((props) => ({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  marginTop: props.theme.spacing(20),
+  marginTop: props.theme.space.xxl,
   width: '100%',
 }));
 
diff --git a/src/app/screens/coinDashboard/index.tsx b/src/app/screens/coinDashboard/index.tsx
index 56e89c919..13df8e350 100644
--- a/src/app/screens/coinDashboard/index.tsx
+++ b/src/app/screens/coinDashboard/index.tsx
@@ -50,7 +50,7 @@ const SecondaryContainer = styled.div((props) => ({
   flexDirection: 'column',
   paddingLeft: props.theme.space.m,
   paddingRight: props.theme.space.m,
-  marginTop: props.theme.space.xl,
+  marginTop: props.theme.space.l,
   marginBottom: props.theme.space.xl,
   h1: {
     ...props.theme.typography.body_medium_m,
@@ -295,6 +295,7 @@ export default function CoinDashboard() {
             brc20Token={protocol === 'brc-20' ? selectedFt?.principal || null : null}
             runeToken={protocol === 'runes' ? selectedFt?.name || null : null}
             runeSymbol={protocol === 'runes' ? selectedFt?.runeSymbol || null : null}
+            withTitle={!displayTabs}
           />
         )}
         {showStxContract && (
diff --git a/src/app/screens/coinDashboard/transactionsHistoryList.tsx b/src/app/screens/coinDashboard/transactionsHistoryList.tsx
index f78c73e08..a2bf69848 100644
--- a/src/app/screens/coinDashboard/transactionsHistoryList.tsx
+++ b/src/app/screens/coinDashboard/transactionsHistoryList.tsx
@@ -34,18 +34,18 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
-const ListItemsContainer = styled.div({
+const ListItemsContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-});
+  marginTop: props.theme.space.l,
+}));
 
 const ListHeader = styled.h1((props) => ({
-  marginTop: props.theme.spacing(20),
-  marginBottom: props.theme.spacing(12),
-  marginLeft: props.theme.spacing(8),
-  marginRight: props.theme.spacing(8),
-  ...props.theme.headline_s,
+  ...props.theme.typography.headline_xs,
+  margin: props.theme.space.m,
+  marginTop: 0,
+  marginBottom: props.theme.space.l,
 }));
 
 const LoadingContainer = styled.div({
@@ -65,7 +65,7 @@ const NoTransactionsContainer = styled.div((props) => ({
 }));
 
 const GroupContainer = styled(animated.div)((props) => ({
-  marginBottom: props.theme.spacing(8),
+  marginBottom: props.theme.space.m,
 }));
 
 const SectionHeader = styled.div((props) => ({
@@ -73,8 +73,8 @@ const SectionHeader = styled.div((props) => ({
   flexDirection: 'row',
   alignItems: 'center',
   marginBottom: props.theme.spacing(7),
-  paddingLeft: props.theme.spacing(8),
-  paddingRight: props.theme.spacing(8),
+  paddingLeft: props.theme.space.m,
+  paddingRight: props.theme.space.m,
 }));
 
 const SectionSeparator = styled.div((props) => ({
@@ -86,17 +86,9 @@ const SectionSeparator = styled.div((props) => ({
 const SectionTitle = styled.p((props) => ({
   ...props.theme.body_xs,
   color: props.theme.colors.white_200,
-  marginRight: props.theme.spacing(4),
+  marginRight: props.theme.space.xs,
 }));
 
-interface TransactionsHistoryListProps {
-  coin: CurrencyTypes;
-  stxTxFilter: string | null;
-  brc20Token: string | null;
-  runeToken: string | null;
-  runeSymbol: string | null;
-}
-
 const sortTransactionsByBlockHeight = (transactions: BtcTransactionData[]) =>
   transactions.sort((txA, txB) => {
     if (txB.blockHeight > txA.blockHeight) {
@@ -189,8 +181,24 @@ const filterStxTxs = (
     );
   });
 
-export default function TransactionsHistoryList(props: TransactionsHistoryListProps) {
-  const { coin, stxTxFilter, brc20Token, runeToken, runeSymbol } = props;
+type Props = {
+  coin: CurrencyTypes;
+  stxTxFilter: string | null;
+  brc20Token: string | null;
+  runeToken: string | null;
+  runeSymbol: string | null;
+  withTitle?: boolean;
+};
+
+function TransactionsHistoryList({
+  coin,
+  stxTxFilter,
+  brc20Token,
+  runeToken,
+  runeSymbol,
+  withTitle = true,
+}: Props) {
+  const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
   const selectedAccount = useSelectedAccount();
   const { network, selectedAccountType } = useWalletSelector();
   const btcClient = useBtcClient();
@@ -209,7 +217,6 @@ export default function TransactionsHistoryList(props: TransactionsHistoryListPr
     },
   });
 
-  const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
   const wallet = selectedAccount
     ? {
         ...selectedAccount,
@@ -249,7 +256,7 @@ export default function TransactionsHistoryList(props: TransactionsHistoryListPr
 
   return (
     <ListItemsContainer>
-      <ListHeader>{t('TRANSACTION_HISTORY_TITLE')}</ListHeader>
+      {withTitle && <ListHeader>{t('TRANSACTION_HISTORY_TITLE')}</ListHeader>}
       {groupedTxs &&
         !isLoading &&
         Object.keys(groupedTxs).map((group) => (
@@ -317,3 +324,5 @@ export default function TransactionsHistoryList(props: TransactionsHistoryListPr
     </ListItemsContainer>
   );
 }
+
+export default TransactionsHistoryList;
diff --git a/src/app/screens/ordinalDetail/index.tsx b/src/app/screens/ordinalDetail/index.tsx
index 52dc44216..22bd4c6bb 100644
--- a/src/app/screens/ordinalDetail/index.tsx
+++ b/src/app/screens/ordinalDetail/index.tsx
@@ -526,7 +526,7 @@ function OrdinalDetailScreen() {
           <Button
             variant="tertiary"
             icon={<img src={ArrowLeft} alt="go back" />}
-            dataTestId="back-to-gallery"
+            data-testid="back-to-gallery"
             onClick={handleBackButtonClick}
             title={backButtonText}
           />
@@ -561,7 +561,7 @@ function OrdinalDetailScreen() {
           <Button
             variant="tertiary"
             icon={<img src={ArrowLeft} alt="go back" />}
-            dataTestId="back-button"
+            data-testid="back-button"
             onClick={handleBackButtonClick}
             title={backButtonText}
           />
diff --git a/src/app/screens/settings/index.tsx b/src/app/screens/settings/index.tsx
index b0b4209ec..685c720e4 100644
--- a/src/app/screens/settings/index.tsx
+++ b/src/app/screens/settings/index.tsx
@@ -17,8 +17,8 @@ const Container = styled.div`
 
 const Title = styled.h1((props) => ({
   ...props.theme.typography.headline_l,
-  paddingTop: props.theme.space.xxl,
-  paddingBottom: props.theme.space.m,
+  marginTop: props.theme.space.xxl,
+  marginBottom: props.theme.space.s,
 }));
 
 function Setting() {
diff --git a/src/app/screens/settings/security/backupWallet/index.tsx b/src/app/screens/settings/security/backupWallet/index.tsx
index 16ec8a7bd..4ca405edc 100644
--- a/src/app/screens/settings/security/backupWallet/index.tsx
+++ b/src/app/screens/settings/security/backupWallet/index.tsx
@@ -3,7 +3,7 @@ import BottomBar from '@components/tabBar';
 import TopRow from '@components/topRow';
 import useSeedVault from '@hooks/useSeedVault';
 import SeedCheck from '@screens/backupWalletSteps/seedCheck';
-import { Container, Title } from '@screens/settings/index.styles';
+import { Container } from '@screens/settings/index.styles';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -12,16 +12,10 @@ import styled from 'styled-components';
 const EnterPasswordContainer = styled.div((props) => ({
   width: '100%',
   height: '100%',
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  position: 'fixed',
   zIndex: 10,
   background: props.theme.colors.elevation0,
   backdropFilter: 'blur(16px)',
-  padding: 16,
-  paddingTop: props.theme.spacing(40),
+  paddingTop: props.theme.space.l,
 }));
 
 const SeedphraseContainer = styled.div((props) => ({
@@ -30,10 +24,10 @@ const SeedphraseContainer = styled.div((props) => ({
 
 function BackupWalletScreen() {
   const { t } = useTranslation('translation');
-  const [password, setPassword] = useState<string>('');
-  const [error, setError] = useState<string>('');
-  const [loading, setLoading] = useState<boolean>(false);
-  const [showSeed, setShowSeed] = useState<boolean>(false);
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [showSeed, setShowSeed] = useState(false);
   const [seed, setSeed] = useState('');
   const navigate = useNavigate();
   const { getSeed, unlockVault } = useSeedVault();
@@ -49,7 +43,7 @@ function BackupWalletScreen() {
     };
   }, []);
 
-  const goBack = () => {
+  const handleBackButtonClick = () => {
     navigate(-1);
   };
 
@@ -69,9 +63,8 @@ function BackupWalletScreen() {
 
   return (
     <>
-      <TopRow onClick={goBack} />
+      <TopRow onClick={handleBackButtonClick} />
       <Container>
-        <Title>{t('SETTING_SCREEN.BACKUP_WALLET')}</Title>
         {!showSeed && (
           <EnterPasswordContainer>
             <PasswordInput
@@ -80,15 +73,16 @@ function BackupWalletScreen() {
               enteredPassword={password}
               setEnteredPassword={setPassword}
               handleContinue={handlePasswordNextClick}
-              handleBack={goBack}
+              handleBack={handleBackButtonClick}
               passwordError={error}
               stackButtonAlignment
               loading={loading}
+              autoFocus
             />
           </EnterPasswordContainer>
         )}
         <SeedphraseContainer>
-          {showSeed && <SeedCheck seedPhrase={seed} onContinue={goBack} />}
+          {showSeed && <SeedCheck seedPhrase={seed} onContinue={handleBackButtonClick} />}
         </SeedphraseContainer>
       </Container>
       <BottomBar tab="settings" />
diff --git a/src/app/screens/settings/security/index.tsx b/src/app/screens/settings/security/index.tsx
index 05198bac1..6b13959cc 100644
--- a/src/app/screens/settings/security/index.tsx
+++ b/src/app/screens/settings/security/index.tsx
@@ -109,6 +109,7 @@ function Security() {
           text={t('RESET_WALLET')}
           onClick={openResetWalletPrompt}
           showWarningTitle
+          showArrow={false}
         />
         <ResetWalletPrompt
           showResetWalletPrompt={showResetWalletPrompt}
diff --git a/src/app/screens/settings/settingComponent/index.tsx b/src/app/screens/settings/settingComponent/index.tsx
index e4c715b7d..b7fddbbf2 100644
--- a/src/app/screens/settings/settingComponent/index.tsx
+++ b/src/app/screens/settings/settingComponent/index.tsx
@@ -26,11 +26,11 @@ const TitleText = styled.h1((props) => ({
   paddingTop: props.theme.space.xl,
 }));
 
-const ComponentText = styled.h1<{
-  textColor: string;
+const ComponentText = styled.p<{
+  $textColor: string;
 }>((props) => ({
   ...props.theme.typography.body_medium_l,
-  color: props.textColor,
+  color: props.$textColor,
   flex: 1,
   textAlign: 'left',
 }));
@@ -79,6 +79,7 @@ type Props = {
   onClick?: () => void;
   showDivider?: boolean;
   showWarningTitle?: boolean;
+  showArrow?: boolean;
   toggle?: boolean;
   toggleValue?: boolean;
   description?: string;
@@ -95,6 +96,7 @@ function SettingComponent({
   link,
   showDivider,
   showWarningTitle,
+  showArrow = true,
   toggle,
   toggleValue,
   description,
@@ -103,6 +105,7 @@ function SettingComponent({
   isLoading,
 }: Props) {
   const theme = useTheme();
+
   return (
     <Wrapper>
       <ColumnContainer>
@@ -113,7 +116,7 @@ function SettingComponent({
         >
           <Column>
             <ComponentText
-              textColor={showWarningTitle ? theme.colors.feedback.error : theme.colors.white['200']}
+              $textColor={showWarningTitle ? theme.colors.feedback.error : theme.colors.white_200}
             >
               {text}
             </ComponentText>
@@ -121,7 +124,9 @@ function SettingComponent({
           </Column>
           {textDetail && <ComponentDescriptionText>{textDetail}</ComponentDescriptionText>}
           {!toggle && link && <ArrowUpRight color={theme.colors.white_0} size={16} weight="bold" />}
-          {!toggle && !link && <CaretRight color={theme.colors.white_0} size={16} weight="bold" />}
+          {!toggle && !link && showArrow && (
+            <CaretRight color={theme.colors.white_0} size={16} weight="bold" />
+          )}
           {isLoading && <Spinner color="white" size={16} />}
           {toggle && toggleFunction && !isLoading && (
             <Toggle onChange={toggleFunction} checked={toggleValue ?? false} disabled={disabled} />
diff --git a/src/app/ui-library/button.tsx b/src/app/ui-library/button.tsx
index 47f130f79..d117e6338 100644
--- a/src/app/ui-library/button.tsx
+++ b/src/app/ui-library/button.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import type React from 'react';
 import styled from 'styled-components';
 import Spinner from './spinner';
 
@@ -105,42 +106,32 @@ const CenterDiv = styled.div`
   align-content: center;
 `;
 
-type Props = {
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   title: string;
-  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
   icon?: React.ReactNode;
   iconPosition?: 'left' | 'right';
-  disabled?: boolean;
   loading?: boolean;
+  disabled?: boolean;
   className?: string;
   variant?: ButtonVariant;
-  type?: 'button' | 'submit' | 'reset';
-  id?: string;
-  dataTestId?: string;
 };
 
 function Button({
   title,
-  onClick,
   icon,
   iconPosition = 'left',
   className,
   loading = false,
   disabled = false,
   variant = 'primary',
-  type,
-  id,
-  dataTestId,
+  ...props
 }: Props) {
   return (
     <StyledButton
+      {...props}
       className={classNames(className, variant)}
-      onClick={onClick}
       tabIndex={0}
       disabled={disabled || loading}
-      type={type}
-      id={id}
-      data-testid={dataTestId}
     >
       {loading ? (
         <Spinner />
diff --git a/src/locales/en.json b/src/locales/en.json
index 8ead71045..ac0a420d5 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1007,7 +1007,7 @@
     "SWAP": "Swap",
     "BUY": "Buy",
     "LIST": "List",
-    "TRANSACTION_HISTORY_TITLE": "Transaction history",
+    "TRANSACTION_HISTORY_TITLE": "Transactions",
     "TRANSACTIONS_LIST_EMPTY": "No transactions found.",
     "TRANSACTIONS_LIST_ERROR": "Error fetching transaction history for this token",
     "TRANSACTION_SENT": "Sent",
diff --git a/tests/specs/transactionHistory.spec.ts b/tests/specs/transactionHistory.spec.ts
index 3d1b6e16d..51b4918c2 100644
--- a/tests/specs/transactionHistory.spec.ts
+++ b/tests/specs/transactionHistory.spec.ts
@@ -80,7 +80,7 @@ test.describe('Transaction', () => {
     await wallet.checkAndClickOnSpecificRune('SKIBIDI•OHIO•RIZZ');
     const originalBalanceAmount = await wallet.checkVisualsRunesDashboard('SKIBIDI•OHIO•RIZZ');
     await expect(originalBalanceAmount).toBeGreaterThan(0);
-    await expect(wallet.containerTransactionHistory.first()).toBeVisible();
+    await expect(wallet.containerTransactionHistory.first()).toBeHidden();
     // There should be at least one transaction visible
     await expect(await wallet.containerTransactionHistory.count()).toBeGreaterThanOrEqual(1);
     // check able to see rune bundles