diff --git a/src/components/WalletButton/index.tsx b/src/components/WalletButton/index.tsx
index c4ad72edae..0f4f9eb79f 100644
--- a/src/components/WalletButton/index.tsx
+++ b/src/components/WalletButton/index.tsx
@@ -22,15 +22,17 @@ const WalletButton = ({ isloginFlow, disabled, onClick, icon, className, text, n
 		<>
 			{!isOptionalLogin && isloginFlow && (
 				<Tooltip
-					// color='#E5007A'
 					title={`${text} wallet ${isAvailable ? '' : 'not'} installed`}
 					placement='top'
 				>
 					<Button
-						className={`flex ${isOptionalLogin ? 'border_grey_stroke w-full' : 'justify-center border-[#F8E3EE]'} ${
-							isAvailable ? 'bg-white' : 'bg-grey_stroke bg-[#F6F7F9] dark:bg-[#3d3d3d]'
-						} items-center rounded-[7px] border-[#F8E3EE] dark:border-section-dark-container dark:bg-[#222222] ${name !== 'Polkasafe' ? 'px-5 py-6' : 'px-3 py-5'} ${className}`}
-						onClick={onClick}
+						className={`flex ${isOptionalLogin ? 'border_grey_stroke w-full' : 'border-borderColor justify-center'} ${
+							isAvailable ? 'bg-white dark:bg-inactiveIconDark' : 'bg-grey_stroke dark:bg-greyColor bg-lightWhite cursor-not-allowed'
+						} border-borderColor items-center rounded-[7px] dark:border-section-dark-container ${name !== 'Polkasafe' ? 'px-5 py-6' : 'px-3 py-5'} ${className}`}
+						onClick={(e) => {
+							if (!isAvailable) return;
+							onClick(e as any);
+						}}
 						disabled={disabled}
 					>
 						<span className={name !== 'Polkasafe' ? 'mt-1.5' : 'mt-3'}>{icon}</span>
@@ -39,20 +41,20 @@ const WalletButton = ({ isloginFlow, disabled, onClick, icon, className, text, n
 			)}
 			{isOptionalLogin && isloginFlow && (
 				<Button
-					className={`flex ${isOptionalLogin ? 'border_grey_stroke w-full' : 'justify-center border-[#F8E3EE]'} ${
-						isAvailable ? 'text- bg-white' : 'bg-[#F6F7F9] dark:bg-[#3d3d3d]'
-					} items-center rounded-[7px] border-[#F8E3EE] dark:border-section-dark-container dark:bg-[#222222] ${name !== 'Polkasafe' ? 'px-5 py-6' : 'px-3 py-5'} ${className}`}
+					className={`flex ${isOptionalLogin ? 'border_grey_stroke w-full' : 'border-borderColor justify-center'} ${
+						isAvailable ? 'text- bg-white dark:bg-inactiveIconDark' : 'dark:bg-greyColor bg-lightWhite'
+					} border-borderColor items-center rounded-[7px] dark:border-section-dark-container ${name !== 'Polkasafe' ? 'px-5 py-6' : 'px-3 py-5'} ${className}`}
 					onClick={onClick}
 					disabled={!isAvailable}
 				>
 					<span className={name !== 'Polkasafe' ? 'mt-1.5' : 'mt-3'}>{icon}</span>
 					{text && isOptionalLogin && <p className={`wallet-text-container m-0 ml-4 p-0 ${!isAvailable ? 'text-disableText' : 'text-lightBlue'} dark:text-white`}>{text}</p>}
-					{isOptionalLogin && !isAvailable && <p className='not-installed-container text-disableText m-0 ml-auto p-0 text-xs dark:text-[#909090]'>Not Installed</p>}
+					{isOptionalLogin && !isAvailable && <p className='not-installed-container text-disableText dark:text-lightGreyTextColor m-0 ml-auto p-0 text-xs'>Not Installed</p>}
 				</Button>
 			)}
 			{!isloginFlow && (
 				<Button
-					className={`flex items-center justify-center rounded-[7px] border-[#F8E3EE] dark:border-section-dark-container dark:bg-[#222222] ${
+					className={`border-borderColor flex items-center justify-center rounded-[7px] dark:border-section-dark-container dark:bg-inactiveIconDark ${
 						name !== 'Polkasafe' ? 'px-5 py-6' : 'px-3 py-5'
 					} ${className}`}
 					onClick={onClick}
diff --git a/styles/globals.css b/styles/globals.css
index 9174e016fd..7bce3ae23d 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -53,6 +53,10 @@
   --errorAlertBgDark: #FF3C5F33;
   --warningAlertBorderDark: #F89118;
   --warningAlertBgDark: #F8911833;
+  --borderColor: #F8E3EE;
+  --greyColor: #3d3d3d;
+  --lightGreyTextColor: #909090;
+  --lightWhite: #F6F7F9
 }
 
 ::-webkit-scrollbar {
diff --git a/tailwind.config.js b/tailwind.config.js
index ad81242d2f..298799eaf1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -54,6 +54,10 @@ module.exports = {
 				errorAlertBgDark: 'var(--errorAlertBgDark)',
 				warningAlertBorderDark: 'var(--warningAlertBorderDark)',
 				warningAlertBgDark: 'var(--warningAlertBgDark)',
+				borderColor: 'var(--borderColor)',
+				greyColor: 'var(--greyColor)',
+				lightGreyTextColor: 'var(--lightGreyTextColor)',
+				lightWhite: 'var(--lightWhite)',
 				blue: {
 					light: {
 						disabled: '#96A4B6',