diff --git a/cypress/e2e/keyboard-navigation.cy.ts b/cypress/e2e/keyboard-navigation.cy.ts
index 96fe85ed..ea8e6339 100644
--- a/cypress/e2e/keyboard-navigation.cy.ts
+++ b/cypress/e2e/keyboard-navigation.cy.ts
@@ -13,7 +13,7 @@ describe('keyboard navigation and accessibility', () => {
 
     closeErrorReportingNotice();
     pressTabAndAssertFocusOutline(() => cy.dataCy('api3-logo'));
-    pressTabAndAssertFocusOutline(() => cy.findAllByText('Connect Wallet').filter(':visible'));
+    pressTabAndAssertFocusOutline(() => cy.findAllByText('Connect Wallet').parent().filter(':visible'));
 
     pressTabAndAssertFocusOutline(() => cy.findAllByText('Staking').filter(':visible').closest('a'));
     pressTabAndAssertFocusOutline(() => cy.findAllByText('Governance').filter(':visible').closest('a'));
diff --git a/src/components/navigation/navigation.module.scss b/src/components/navigation/navigation.module.scss
index 1a1cec41..2f59b971 100644
--- a/src/components/navigation/navigation.module.scss
+++ b/src/components/navigation/navigation.module.scss
@@ -2,7 +2,6 @@
 
 .navigation {
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: space-between;
   padding: 0 16px;
@@ -18,7 +17,6 @@
   }
 
   @media (min-width: $md) {
-    flex-direction: row;
     padding: 0 24px 0 40px;
     height: 120px;
 
@@ -33,16 +31,8 @@
   }
 }
 
-.navigationMenu {
+.right {
   display: flex;
+  gap: 16px;
   align-items: center;
-  justify-content: space-between;
-  align-self: flex-start;
-  box-sizing: border-box;
-  width: 100%;
-
-  @media (min-width: $md) {
-    align-self: center;
-    height: unset;
-  }
 }
diff --git a/src/components/navigation/navigation.tsx b/src/components/navigation/navigation.tsx
index 10134aa5..c63872ec 100644
--- a/src/components/navigation/navigation.tsx
+++ b/src/components/navigation/navigation.tsx
@@ -7,13 +7,13 @@ import styles from './navigation.module.scss';
 const Navigation = () => {
   return (
     <div className={styles.navigation}>
-      <div className={styles.navigationMenu}>
-        <Link to="/" data-cy="api3-logo">
-          <img src={images.api3DaoLogoLightTheme} alt="logo" className={styles.api3DaoLogo} />
-        </Link>
+      <Link to="/" data-cy="api3-logo">
+        <img src={images.api3DaoLogoLightTheme} alt="logo" className={styles.api3DaoLogo} />
+      </Link>
+      <div className={styles.right}>
+        <SignIn position="navigation" />
         <MobileMenu />
       </div>
-      <SignIn position="navigation" />
     </div>
   );
 };
diff --git a/src/components/sign-in/sign-in.module.scss b/src/components/sign-in/sign-in.module.scss
index 8b8ca223..c0195bcf 100644
--- a/src/components/sign-in/sign-in.module.scss
+++ b/src/components/sign-in/sign-in.module.scss
@@ -41,18 +41,14 @@
 }
 
 .connectButton {
-  width: calc(100% - 64px);
-  min-width: 165px;
-  max-width: 404px;
-  margin-top: 24px;
+  white-space: nowrap;
 
-  button {
-    width: 100%;
-  }
+  .connectButtonLabel {
+    padding: 0 8px;
 
-  @media (min-width: $md) {
-    margin-top: 0;
-    max-width: 224px;
+    @media (min-width: $md) {
+      padding: 0 24px;
+    }
   }
 }
 
diff --git a/src/components/sign-in/sign-in.tsx b/src/components/sign-in/sign-in.tsx
index 4fece04c..b0c00e69 100644
--- a/src/components/sign-in/sign-in.tsx
+++ b/src/components/sign-in/sign-in.tsx
@@ -12,6 +12,7 @@ import { SUPPORTED_NETWORKS, useProviderSubscriptions } from '../../contracts';
 import DisconnectIcon from './disconnect-icon';
 import Button from '../button';
 import { ExclamationTriangleFillIcon } from '../icons';
+import { useWindowDimensions } from '../../hooks/use-window-dimensions';
 
 type Props = {
   dark?: boolean;
@@ -77,6 +78,7 @@ const SignIn = ({ dark, position }: Props) => {
   const { provider, networkName } = useChainData();
   const { disconnect } = useDisconnect();
   const { switchNetwork } = useSwitchNetwork();
+  const { isDesktop } = useWindowDimensions();
   useProviderSubscriptions();
 
   const switchToMainnet = () => {
@@ -96,11 +98,11 @@ const SignIn = ({ dark, position }: Props) => {
       {!provider && (
         <ConnectButton
           type={dark ? 'primary' : 'secondary'}
-          size="sm"
+          size="xxs"
           md={{ size: 'md' }}
           className={styles.connectButton}
         >
-          Connect Wallet
+          <span className={styles.connectButtonLabel}>{isDesktop ? 'Connect Wallet' : 'Connect'}</span>
         </ConnectButton>
       )}
       {provider && <ConnectedStatus dark={dark} position={position} />}