diff --git a/src/constants/internal/DefaultSettings.tsx b/src/constants/internal/DefaultSettings.tsx
index 22f963e1..fd790597 100644
--- a/src/constants/internal/DefaultSettings.tsx
+++ b/src/constants/internal/DefaultSettings.tsx
@@ -154,7 +154,7 @@ export const DefaultSettings: Settings = {
 						background: "linear-gradient(to right, #42b0c5, #491d8d)",
 					}}
 				>
-					<ChatIcon style={{ width: "80%", height: "80%" }} />
+					<ChatIcon style={{ width: "80%", height: "80%", fill: "#fff" }} />
 				</div>
 				<span key={2} style={{fontWeight: "bold"}}> React ChatBotify</span>
 			</div>
diff --git a/src/hooks/internal/useIsDesktopInternal.ts b/src/hooks/internal/useIsDesktopInternal.ts
index 9d1279df..cd1fe2ac 100644
--- a/src/hooks/internal/useIsDesktopInternal.ts
+++ b/src/hooks/internal/useIsDesktopInternal.ts
@@ -5,7 +5,12 @@ export const useIsDesktopInternal = () => {
 		if (typeof window === 'undefined' || !window.navigator) {
 			return false; // Default to false if running on server-side
 		}
-		return !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
+		const userAgent = navigator.userAgent;
+		const isNotMobileUA = !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent));
+		const isWideEnough = window.innerWidth >= 768;
+
+		// device is desktop if it is not a mobile agent and if the width is wide enough
+		return isNotMobileUA && isWideEnough;
 	}, []);
 
 	// boolean indicating if user is on desktop (otherwise treated as on mobile)