diff --git a/.changeset/mighty-pans-suffer.md b/.changeset/mighty-pans-suffer.md
new file mode 100644
index 00000000000..d58fe1593a3
--- /dev/null
+++ b/.changeset/mighty-pans-suffer.md
@@ -0,0 +1,5 @@
+---
+'@iota/dapp-kit': minor
+---
+
+Improved the connect-modal style so its easier to read and interact in small screens
diff --git a/sdk/dapp-kit/src/components/connect-modal/views/ConnectionStatus.tsx b/sdk/dapp-kit/src/components/connect-modal/views/ConnectionStatus.tsx
index 282ed37348e..43ec4459e93 100644
--- a/sdk/dapp-kit/src/components/connect-modal/views/ConnectionStatus.tsx
+++ b/sdk/dapp-kit/src/components/connect-modal/views/ConnectionStatus.tsx
@@ -43,7 +43,7 @@ export function ConnectionStatus({
                 <div className={styles.retryButtonContainer}>
                     <Button
                         type="button"
-                        variant="outline"
+                        variant="primary"
                         onClick={() => onRetryConnection(selectedWallet)}
                     >
                         Retry Connection
diff --git a/sdk/dapp-kit/src/components/connect-modal/views/GettingStarted.css.ts b/sdk/dapp-kit/src/components/connect-modal/views/GettingStarted.css.ts
index a76855c904d..89e6aece7b4 100644
--- a/sdk/dapp-kit/src/components/connect-modal/views/GettingStarted.css.ts
+++ b/sdk/dapp-kit/src/components/connect-modal/views/GettingStarted.css.ts
@@ -17,6 +17,8 @@ export const content = style({
     flexGrow: 1,
     gap: 20,
     padding: 40,
+    paddingBottom: 60,
+    overflow: 'auto',
 });
 
 export const installButtonContainer = style({
diff --git a/sdk/dapp-kit/src/components/connect-modal/views/GettingStarted.tsx b/sdk/dapp-kit/src/components/connect-modal/views/GettingStarted.tsx
index 816a3d3a7d5..01e36d03f53 100644
--- a/sdk/dapp-kit/src/components/connect-modal/views/GettingStarted.tsx
+++ b/sdk/dapp-kit/src/components/connect-modal/views/GettingStarted.tsx
@@ -24,7 +24,7 @@ export function GettingStarted() {
                     extension.
                 </InfoSection>
                 <div className={styles.installButtonContainer}>
-                    <Button variant="outline" asChild>
+                    <Button variant="primary" asChild>
                         <a
                             href="https://chrome.google.com/webstore/detail/iota-wallet/iidjkmdceolghepehaaddojmnjnkkija"
                             target="_blank"
diff --git a/sdk/dapp-kit/src/components/connect-modal/wallet-list/WalletList.css.ts b/sdk/dapp-kit/src/components/connect-modal/wallet-list/WalletList.css.ts
index c22d8ba24ef..92684cbc1b1 100644
--- a/sdk/dapp-kit/src/components/connect-modal/wallet-list/WalletList.css.ts
+++ b/sdk/dapp-kit/src/components/connect-modal/wallet-list/WalletList.css.ts
@@ -3,9 +3,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { style } from '@vanilla-extract/css';
+import { themeVars } from '../../../themes/themeContract.js';
 
 export const container = style({
     display: 'flex',
     flexDirection: 'column',
     gap: 4,
 });
+
+export const icon = style({
+    color: themeVars.colors.body,
+});
diff --git a/sdk/dapp-kit/src/components/connect-modal/wallet-list/WalletList.tsx b/sdk/dapp-kit/src/components/connect-modal/wallet-list/WalletList.tsx
index 910c6720599..9c952730900 100644
--- a/sdk/dapp-kit/src/components/connect-modal/wallet-list/WalletList.tsx
+++ b/sdk/dapp-kit/src/components/connect-modal/wallet-list/WalletList.tsx
@@ -33,7 +33,7 @@ export function WalletList({ selectedWalletName, onPlaceholderClick, onSelect }:
             ) : (
                 <WalletListItem
                     name="IOTA Wallet"
-                    icon={<IotaIcon />}
+                    icon={<IotaIcon className={styles.icon} />}
                     onClick={onPlaceholderClick}
                     isSelected
                 />
diff --git a/sdk/dapp-kit/src/themes/darkTheme.ts b/sdk/dapp-kit/src/themes/darkTheme.ts
index e12870b478a..ced1fa8ad86 100644
--- a/sdk/dapp-kit/src/themes/darkTheme.ts
+++ b/sdk/dapp-kit/src/themes/darkTheme.ts
@@ -18,8 +18,8 @@ export const darkTheme: ThemeVars = {
         iconButton: 'transparent',
         dropdownMenu: '#0f141c',
         dropdownMenuSeparator: '#bed8ff14',
-        walletItemSelected: '#171D26',
-        walletItemHover: 'rgba(190, 216, 255, 0.12)',
+        walletItemSelected: 'rgba(190, 216, 255, 0.12)',
+        walletItemHover: 'rgba(190, 216, 255, 0.06)',
         scrollThumb: '#3c4656',
     },
     borderColors: {