diff --git a/utils/vara-ui/package.json b/utils/vara-ui/package.json
index a82e761663..0515367bfc 100644
--- a/utils/vara-ui/package.json
+++ b/utils/vara-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gear-js/vara-ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "description": "React UI components used across Vara applications",
   "author": "Gear Technologies",
diff --git a/utils/vara-ui/src/assets/images/cross.svg b/utils/vara-ui/src/assets/images/cross.svg
index 0430d64411..2c7ab541c3 100644
--- a/utils/vara-ui/src/assets/images/cross.svg
+++ b/utils/vara-ui/src/assets/images/cross.svg
@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12 4L4 12M4 4L12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 5L5 15M5 5L15 15" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/utils/vara-ui/src/components/alert/alert.module.scss b/utils/vara-ui/src/components/alert/alert.module.scss
index 30cf6eba4e..fd940c8c68 100644
--- a/utils/vara-ui/src/components/alert/alert.module.scss
+++ b/utils/vara-ui/src/components/alert/alert.module.scss
@@ -37,14 +37,7 @@
 }
 
 .button {
-  @include lightDark(color, #000, #fff);
-
   margin-left: auto;
-
-  svg {
-    width: 20px;
-    height: 20px;
-  }
 }
 
 .body {
diff --git a/utils/vara-ui/src/components/alert/alert.tsx b/utils/vara-ui/src/components/alert/alert.tsx
index 04d06d684b..132a24d2a4 100644
--- a/utils/vara-ui/src/components/alert/alert.tsx
+++ b/utils/vara-ui/src/components/alert/alert.tsx
@@ -49,7 +49,9 @@ function Alert({ alert, close }: Props) {
         <SVG className={styles.icon} />
         <h2 className={styles.title}>{title || type}</h2>
 
-        {isClosed && <Button icon={CrossSVG} color="transparent" className={styles.button} onClick={close} />}
+        {isClosed && (
+          <Button icon={CrossSVG} color="transparent" size="medium" className={styles.button} onClick={close} />
+        )}
       </header>
 
       <div className={styles.body}>{content}</div>
diff --git a/utils/vara-ui/src/components/button/button.module.scss b/utils/vara-ui/src/components/button/button.module.scss
index 58c41e69e3..cedb43660a 100644
--- a/utils/vara-ui/src/components/button/button.module.scss
+++ b/utils/vara-ui/src/components/button/button.module.scss
@@ -10,12 +10,11 @@
   }
 }
 
-.button,
-.content {
+.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  gap: 8px;
 }
 
 .button {
@@ -24,9 +23,9 @@
   padding: var(--padding, 0);
   font-family: inherit;
 
-  font-size: 16px;
+  font-size: var(--font-size, 16px);
   font-weight: 600;
-  line-height: 12px;
+  line-height: var(--icon-size);
   color: var(--color, #000);
 
   background-color: var(--background-color, transparent);
@@ -66,6 +65,22 @@
   }
 }
 
+.icon {
+  width: var(--icon-size);
+  height: var(--icon-size);
+
+  &,
+  * {
+    &[stroke]:not([stroke='none']) {
+      stroke: currentColor;
+    }
+
+    &[fill]:not([fill='none']) {
+      fill: currentColor;
+    }
+  }
+}
+
 .block {
   width: 100%;
 }
@@ -89,8 +104,7 @@
   }
 }
 
-.contrast,
-.dark {
+.contrast {
   @include lightDark(--background-color, #000, #fff);
   @include lightDark(--spinner-color, #fff, #000);
   @include lightDark(--color, #fff, #000);
@@ -107,8 +121,7 @@
   }
 }
 
-.blend,
-.light {
+.plain {
   @include lightDark(--spinner-color, #fff, #000);
 
   @include darkMode {
@@ -177,7 +190,7 @@
 }
 
 .transparent {
-  --spinner-size: 16px;
+  --padding: 0 !important; // overriding size classes
 
   @include darkMode() {
     --color: #fff;
@@ -189,39 +202,57 @@
   }
 
   &:not(.loading):disabled {
-    --background-color: transparent;
+    @include lightDark(--background-color, transparent, transparent);
   }
 }
 
 .x-small {
-  --padding: 10px 16px;
+  --padding: 8px 16px;
   --spinner-size: 20px;
+  --icon-size: 16px;
+
+  &.noText {
+    --padding: 8px;
+  }
 }
 
 .small {
-  --padding: 14px 24px;
+  --padding: 10px 24px;
   --spinner-size: 20px;
+  --icon-size: 20px;
 
   &.noText {
-    --padding: 12px 16px;
+    --padding: 10px;
   }
 }
 
 .medium {
-  --padding: 16px 24px;
+  --padding: 12px 24px;
   --spinner-size: 24px;
+  --icon-size: 20px;
+
+  &.noText {
+    --padding: 12px;
+  }
 }
 
 .default {
-  --padding: 18px 24px;
+  --padding: 12px 24px;
   --spinner-size: 24px;
+  --icon-size: 24px;
 
   &.noText {
-    --padding: 15px 16px;
+    --padding: 12px;
   }
 }
 
 .x-large {
-  --padding: 20px 28px;
+  --padding: 14px 28px;
   --spinner-size: 24px;
+  --font-size: 18px;
+  --icon-size: 24px;
+
+  &.noText {
+    --padding: 14px;
+  }
 }
diff --git a/utils/vara-ui/src/components/button/button.stories.tsx b/utils/vara-ui/src/components/button/button.stories.tsx
index d7d3de262e..9c9423bb73 100644
--- a/utils/vara-ui/src/components/button/button.stories.tsx
+++ b/utils/vara-ui/src/components/button/button.stories.tsx
@@ -10,7 +10,7 @@ const meta: Meta<Type> = {
   title: 'Button',
   component: Button,
   args: {
-    children: 'Click me!',
+    text: 'Click me!',
     color: 'primary',
     size: 'default',
     disabled: false,
@@ -25,11 +25,11 @@ const meta: Meta<Type> = {
     noWrap: { control: 'boolean' },
     size: {
       options: ['x-small', 'small', 'medium', 'default', 'x-large'],
-      control: { type: 'select' },
+      control: { type: 'radio' },
     },
     color: {
-      options: ['primary', 'blend', 'contrast', 'grey', 'border', 'transparent', 'danger'],
-      control: { type: 'select' },
+      options: ['primary', 'plain', 'contrast', 'grey', 'border', 'transparent', 'danger'],
+      control: { type: 'radio' },
     },
   },
 };
@@ -39,12 +39,15 @@ const Border: Story = { args: { color: 'border' } };
 const Grey: Story = { args: { color: 'grey' } };
 const Transparent: Story = { args: { color: 'transparent' } };
 const Contrast: Story = { args: { color: 'contrast' } };
-const Blend: Story = { args: { color: 'blend' } };
+const Plain: Story = { args: { color: 'plain' } };
 const Danger: Story = { args: { color: 'danger' } };
-const NoText: Story = { args: { color: 'primary', children: undefined, icon: CrossSVG } };
-const WithChildrenAndIcons: Story = {
+const Icon: Story = { args: { color: 'primary', text: undefined, icon: CrossSVG } };
+const IconAndText: Story = { args: { color: 'primary', icon: CrossSVG } };
+
+const Children: Story = {
   args: {
     color: 'primary',
+    text: undefined,
     children: (
       <>
         <CrossSVG />
@@ -56,4 +59,4 @@ const WithChildrenAndIcons: Story = {
 };
 
 export default meta;
-export { Default, Border, Grey, Transparent, Contrast, Blend, Danger, NoText, WithChildrenAndIcons };
+export { Default, Border, Grey, Transparent, Contrast, Plain, Danger, Icon, IconAndText, Children };
diff --git a/utils/vara-ui/src/components/button/button.tsx b/utils/vara-ui/src/components/button/button.tsx
index eeb1f06490..51eb6df010 100644
--- a/utils/vara-ui/src/components/button/button.tsx
+++ b/utils/vara-ui/src/components/button/button.tsx
@@ -6,18 +6,7 @@ import styles from './button.module.scss';
 type BaseProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   text?: string;
   icon?: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string | undefined }>;
-  color?:
-    | 'primary'
-    | 'blend'
-    | 'contrast'
-    /** @deprecated use 'contrast' instead */
-    | 'dark'
-    /** @deprecated use 'blend' instead */
-    | 'light'
-    | 'grey'
-    | 'border'
-    | 'transparent'
-    | 'danger';
+  color?: 'primary' | 'plain' | 'contrast' | 'grey' | 'border' | 'transparent' | 'danger';
   size?: 'x-small' | 'small' | 'medium' | 'default' | 'x-large';
   isLoading?: boolean;
   block?: boolean;
@@ -64,7 +53,7 @@ const Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {
       className={cx(
         styles.button,
         styles[color],
-        color !== 'transparent' && styles[size],
+        styles[size],
         isLoading && styles.loading,
         !text && !children && styles.noText,
         block && styles.block,
@@ -74,8 +63,10 @@ const Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {
       disabled={disabled || isLoading}
       ref={ref}
       {...attrs}>
-      {Icon && <Icon />}
-      {(text || children) && <span className={styles.content}>{text || children}</span>}
+      {Icon && <Icon className={styles.icon} />}
+      {text && <span>{text}</span>}
+
+      {children}
     </button>
   );
 });
diff --git a/utils/vara-ui/src/components/modal/modal.module.scss b/utils/vara-ui/src/components/modal/modal.module.scss
index e80773b901..ff7687985d 100644
--- a/utils/vara-ui/src/components/modal/modal.module.scss
+++ b/utils/vara-ui/src/components/modal/modal.module.scss
@@ -110,11 +110,6 @@
   }
 }
 
-.button svg {
-  width: 20px;
-  height: 20px;
-}
-
 .body,
 .footer {
   @include lightDark(color, #000, rgba(246, 246, 246, 0.8));
diff --git a/utils/vara-ui/src/components/modal/modal.tsx b/utils/vara-ui/src/components/modal/modal.tsx
index 7000b67d87..198a8e91a8 100644
--- a/utils/vara-ui/src/components/modal/modal.tsx
+++ b/utils/vara-ui/src/components/modal/modal.tsx
@@ -36,7 +36,7 @@ const Modal = ({ heading, close, children, className, headerAddon, footer, maxWi
             {headerAddon}
           </div>
 
-          <Button icon={CrossSVG} color="transparent" onClick={close} className={styles.button} />
+          <Button icon={CrossSVG} color="transparent" size="medium" onClick={close} />
         </header>
 
         {children && <ScrollArea className={cx(styles.body, className)}>{children}</ScrollArea>}
diff --git a/utils/wallet-connect/package.json b/utils/wallet-connect/package.json
index b527f20a5a..2614d35a22 100644
--- a/utils/wallet-connect/package.json
+++ b/utils/wallet-connect/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gear-js/wallet-connect",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "type": "module",
   "description": "React library to connect Substrate based wallets to Gear dApps",
   "author": "Gear Technologies",
diff --git a/utils/wallet-connect/src/assets/copy.svg b/utils/wallet-connect/src/assets/copy.svg
index 35e5778d8b..0233e9c50f 100644
--- a/utils/wallet-connect/src/assets/copy.svg
+++ b/utils/wallet-connect/src/assets/copy.svg
@@ -1,8 +1,15 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.5669 2.43333H12.2385C12.3831 2.43333 12.5003 2.31613 12.5003 2.17153V0.8C12.5003 0.358167 12.1421 0 11.7003 0H4.13359C3.98633 0 3.86693 0.1194 3.86693 0.266667V2.63333C3.86693 3.07517 3.50876 3.43333 3.06693 3.43333H0.70026C0.552994 3.43333 0.433594 3.55273 0.433594 3.7V15.2C0.433594 15.6418 0.79176 16 1.23359 16H11.7003C12.1421 16 12.5003 15.6418 12.5003 15.2V14.9691C12.5003 14.8414 12.4077 14.7348 12.2822 14.7109C12.0292 14.6627 11.8023 14.5441 11.6216 14.375L11.0823 13.8693C10.8183 13.622 10.6669 13.2723 10.6669 12.9103V9.174C10.6669 9.04267 10.5697 8.93223 10.4396 8.9145C9.97636 8.85137 8.96693 8.57303 8.96693 7.33333V4.03333C8.96693 3.14967 9.68326 2.43333 10.5669 2.43333ZM3.13359 13.3333C3.13359 13.4807 3.01426 13.6 2.86693 13.6C2.71959 13.6 2.60026 13.4807 2.60026 13.3333V11.348L2.45393 11.4513C2.33359 11.536 2.16726 11.5073 2.08226 11.387C1.99759 11.2667 2.02626 11.1003 2.14659 11.0153L2.71326 10.6153C2.88996 10.4908 3.13359 10.618 3.13359 10.8333V13.3333ZM3.25026 9.53333C2.67126 9.53333 2.20026 9.06233 2.20026 8.48333V7.55C2.20026 6.971 2.67126 6.5 3.25026 6.5C3.82926 6.5 4.30026 6.971 4.30026 7.55V8.48333C4.30026 9.06233 3.82926 9.53333 3.25026 9.53333ZM6.16693 12.55C6.16693 13.129 5.69593 13.6 5.11693 13.6C4.53793 13.6 4.06693 13.129 4.06693 12.55V11.6167C4.06693 11.0377 4.53793 10.5667 5.11693 10.5667C5.69593 10.5667 6.16693 11.0377 6.16693 11.6167V12.55ZM6.16693 9.26667C6.16693 9.414 6.04759 9.53333 5.90026 9.53333C5.75293 9.53333 5.63359 9.414 5.63359 9.26667V7.28133L5.48726 7.38467C5.36693 7.46933 5.20059 7.44067 5.11559 7.32033C5.03093 7.2 5.05959 7.03367 5.17993 6.94867L5.74659 6.54867C5.92329 6.4241 6.16693 6.55137 6.16693 6.76667V9.26667ZM8.16693 13.3333C8.16693 13.4807 8.0476 13.6 7.90026 13.6C7.75293 13.6 7.63359 13.4807 7.63359 13.3333V11.348L7.48726 11.4513C7.36693 11.536 7.20059 11.5073 7.11559 11.387C7.03093 11.2667 7.05959 11.1003 7.17993 11.0153L7.74659 10.6153C7.9233 10.4908 8.16693 10.618 8.16693 10.8333V13.3333ZM8.16693 9.26667C8.16693 9.414 8.0476 9.53333 7.90026 9.53333C7.75293 9.53333 7.63359 9.414 7.63359 9.26667V7.28133L7.48726 7.38467C7.36693 7.46933 7.20059 7.44067 7.11559 7.32033C7.03093 7.2 7.05959 7.03367 7.17993 6.94867L7.74659 6.54867C7.9233 6.4241 8.16693 6.55137 8.16693 6.76667V9.26667ZM8.16693 4.41667C8.16693 4.99567 7.69593 5.46667 7.11693 5.46667C6.53793 5.46667 6.06693 4.99567 6.06693 4.41667V3.48333C6.06693 2.90433 6.53793 2.43333 7.11693 2.43333C7.69593 2.43333 8.16693 2.90433 8.16693 3.48333V4.41667Z" fill="#000000"/>
-<path d="M3.33304 0.477359V2.63279C3.33304 2.78006 3.21364 2.89946 3.06637 2.89946H0.910938C0.792138 2.89946 0.732672 2.75583 0.816672 2.67186L3.10544 0.383093C3.18941 0.299059 3.33304 0.358559 3.33304 0.477359Z" fill="#000000"/>
-<path d="M3.76771 7.54987V8.4832C3.76771 8.7682 3.53604 8.99987 3.25104 8.99987C2.96604 8.99987 2.73438 8.7682 2.73438 8.4832V7.54987C2.73438 7.26487 2.96604 7.0332 3.25104 7.0332C3.53604 7.0332 3.76771 7.26487 3.76771 7.54987Z" fill="#000000"/>
-<path d="M5.63294 11.6163V12.5496C5.63294 12.8346 5.40128 13.0663 5.11628 13.0663C4.83128 13.0663 4.59961 12.8346 4.59961 12.5496V11.6163C4.59961 11.3313 4.83128 11.0996 5.11628 11.0996C5.40128 11.0996 5.63294 11.3313 5.63294 11.6163Z" fill="#000000"/>
-<path d="M7.63294 3.48346V4.4168C7.63294 4.7018 7.40128 4.93346 7.11628 4.93346C6.83128 4.93346 6.59961 4.7018 6.59961 4.4168V3.48346C6.59961 3.19846 6.83128 2.9668 7.11628 2.9668C7.40128 2.9668 7.63294 3.19846 7.63294 3.48346Z" fill="#000000"/>
-<path d="M14.5 2.9668H10.5667C9.97867 2.9668 9.5 3.44513 9.5 4.03346V7.33346C9.5 7.9218 9.97867 8.40013 10.5667 8.40013H11.2V12.9105C11.2 13.1258 11.29 13.3335 11.447 13.4805L11.986 13.9861C12.2919 14.2722 12.7715 14.2752 13.0807 13.9861L13.5847 13.5135C13.8523 13.2625 13.9113 12.8688 13.7287 12.5561L13.585 12.3091C13.498 12.1598 13.498 11.9738 13.585 11.8245L13.7287 11.5775C13.9123 11.2625 13.9123 10.8711 13.7287 10.5561L13.585 10.3091C13.498 10.1598 13.4981 9.97383 13.585 9.82446C13.7405 9.55733 13.8667 9.38476 13.8667 9.0668V8.40013H14.5C15.088 8.40013 15.5667 7.9218 15.5667 7.33346V4.03346C15.5667 3.44513 15.088 2.9668 14.5 2.9668ZM13.6 5.13346H11.4667C11.3193 5.13346 11.2 5.01413 11.2 4.8668C11.2 4.71946 11.3193 4.60013 11.4667 4.60013H13.6C13.7473 4.60013 13.8667 4.71946 13.8667 4.8668C13.8667 5.01413 13.7473 5.13346 13.6 5.13346Z" fill="#000000"/>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_9)">
+<path d="M12.5669 4.43333H14.2385C14.3831 4.43333 14.5003 4.31613 14.5003 4.17153V2.8C14.5003 2.35817 14.1421 2 13.7003 2H6.13359C5.98633 2 5.86693 2.1194 5.86693 2.26667V4.63333C5.86693 5.07517 5.50876 5.43333 5.06693 5.43333H2.70026C2.55299 5.43333 2.43359 5.55273 2.43359 5.7V17.2C2.43359 17.6418 2.79176 18 3.23359 18H13.7003C14.1421 18 14.5003 17.6418 14.5003 17.2V16.9691C14.5003 16.8414 14.4077 16.7348 14.2822 16.7109C14.0292 16.6627 13.8023 16.5441 13.6216 16.375L13.0823 15.8693C12.8183 15.622 12.6669 15.2723 12.6669 14.9103V11.174C12.6669 11.0427 12.5697 10.9322 12.4396 10.9145C11.9764 10.8514 10.9669 10.573 10.9669 9.33333V6.03333C10.9669 5.14967 11.6833 4.43333 12.5669 4.43333ZM5.13359 15.3333C5.13359 15.4807 5.01426 15.6 4.86693 15.6C4.71959 15.6 4.60026 15.4807 4.60026 15.3333V13.348L4.45393 13.4513C4.33359 13.536 4.16726 13.5073 4.08226 13.387C3.99759 13.2667 4.02626 13.1003 4.14659 13.0153L4.71326 12.6153C4.88996 12.4908 5.13359 12.618 5.13359 12.8333V15.3333ZM5.25026 11.5333C4.67126 11.5333 4.20026 11.0623 4.20026 10.4833V9.55C4.20026 8.971 4.67126 8.5 5.25026 8.5C5.82926 8.5 6.30026 8.971 6.30026 9.55V10.4833C6.30026 11.0623 5.82926 11.5333 5.25026 11.5333ZM8.16693 14.55C8.16693 15.129 7.69593 15.6 7.11693 15.6C6.53793 15.6 6.06693 15.129 6.06693 14.55V13.6167C6.06693 13.0377 6.53793 12.5667 7.11693 12.5667C7.69593 12.5667 8.16693 13.0377 8.16693 13.6167V14.55ZM8.16693 11.2667C8.16693 11.414 8.04759 11.5333 7.90026 11.5333C7.75293 11.5333 7.63359 11.414 7.63359 11.2667V9.28133L7.48726 9.38467C7.36693 9.46933 7.20059 9.44067 7.11559 9.32033C7.03093 9.2 7.05959 9.03367 7.17993 8.94867L7.74659 8.54867C7.92329 8.4241 8.16693 8.55137 8.16693 8.76667V11.2667ZM10.1669 15.3333C10.1669 15.4807 10.0476 15.6 9.90026 15.6C9.75293 15.6 9.63359 15.4807 9.63359 15.3333V13.348L9.48726 13.4513C9.36693 13.536 9.20059 13.5073 9.11559 13.387C9.03093 13.2667 9.05959 13.1003 9.17993 13.0153L9.74659 12.6153C9.9233 12.4908 10.1669 12.618 10.1669 12.8333V15.3333ZM10.1669 11.2667C10.1669 11.414 10.0476 11.5333 9.90026 11.5333C9.75293 11.5333 9.63359 11.414 9.63359 11.2667V9.28133L9.48726 9.38467C9.36693 9.46933 9.20059 9.44067 9.11559 9.32033C9.03093 9.2 9.05959 9.03367 9.17993 8.94867L9.74659 8.54867C9.9233 8.4241 10.1669 8.55137 10.1669 8.76667V11.2667ZM10.1669 6.41667C10.1669 6.99567 9.69593 7.46667 9.11693 7.46667C8.53793 7.46667 8.06693 6.99567 8.06693 6.41667V5.48333C8.06693 4.90433 8.53793 4.43333 9.11693 4.43333C9.69593 4.43333 10.1669 4.90433 10.1669 5.48333V6.41667Z" fill="black"/>
+<path d="M5.33304 2.47736V4.63279C5.33304 4.78006 5.21364 4.89946 5.06637 4.89946H2.91094C2.79214 4.89946 2.73267 4.75583 2.81667 4.67186L5.10544 2.38309C5.18941 2.29906 5.33304 2.35856 5.33304 2.47736Z" fill="black"/>
+<path d="M5.76771 9.54987V10.4832C5.76771 10.7682 5.53604 10.9999 5.25104 10.9999C4.96604 10.9999 4.73438 10.7682 4.73438 10.4832V9.54987C4.73438 9.26487 4.96604 9.0332 5.25104 9.0332C5.53604 9.0332 5.76771 9.26487 5.76771 9.54987Z" fill="black"/>
+<path d="M7.63294 13.6163V14.5496C7.63294 14.8346 7.40128 15.0663 7.11628 15.0663C6.83128 15.0663 6.59961 14.8346 6.59961 14.5496V13.6163C6.59961 13.3313 6.83128 13.0996 7.11628 13.0996C7.40128 13.0996 7.63294 13.3313 7.63294 13.6163Z" fill="black"/>
+<path d="M9.63294 5.48346V6.4168C9.63294 6.7018 9.40128 6.93346 9.11628 6.93346C8.83128 6.93346 8.59961 6.7018 8.59961 6.4168V5.48346C8.59961 5.19846 8.83128 4.9668 9.11628 4.9668C9.40128 4.9668 9.63294 5.19846 9.63294 5.48346Z" fill="black"/>
+<path d="M16.5 4.9668H12.5667C11.9787 4.9668 11.5 5.44513 11.5 6.03346V9.33346C11.5 9.9218 11.9787 10.4001 12.5667 10.4001H13.2V14.9105C13.2 15.1258 13.29 15.3335 13.447 15.4805L13.986 15.9861C14.2919 16.2722 14.7715 16.2752 15.0807 15.9861L15.5847 15.5135C15.8523 15.2625 15.9113 14.8688 15.7287 14.5561L15.585 14.3091C15.498 14.1598 15.498 13.9738 15.585 13.8245L15.7287 13.5775C15.9123 13.2625 15.9123 12.8711 15.7287 12.5561L15.585 12.3091C15.498 12.1598 15.4981 11.9738 15.585 11.8245C15.7405 11.5573 15.8667 11.3848 15.8667 11.0668V10.4001H16.5C17.088 10.4001 17.5667 9.9218 17.5667 9.33346V6.03346C17.5667 5.44513 17.088 4.9668 16.5 4.9668ZM15.6 7.13346H13.4667C13.3193 7.13346 13.2 7.01413 13.2 6.8668C13.2 6.71946 13.3193 6.60013 13.4667 6.60013H15.6C15.7473 6.60013 15.8667 6.71946 15.8667 6.8668C15.8667 7.01413 15.7473 7.13346 15.6 7.13346Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1_9">
+<rect width="16" height="16" fill="white" transform="translate(2 2)"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/utils/wallet-connect/src/assets/exit.svg b/utils/wallet-connect/src/assets/exit.svg
index b8c91bbedc..b8f5255e2f 100644
--- a/utils/wallet-connect/src/assets/exit.svg
+++ b/utils/wallet-connect/src/assets/exit.svg
@@ -1,3 +1,10 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.8896 7.29076L10.3896 11.2283C10.3311 11.2952 10.2533 11.3425 10.167 11.3636C10.0806 11.3847 9.98983 11.3787 9.90701 11.3464C9.82422 11.3147 9.75297 11.2586 9.70263 11.1857C9.65229 11.1127 9.62523 11.0262 9.625 10.9375V8.3125H4.8125C4.69647 8.3125 4.58519 8.26641 4.50314 8.18436C4.42109 8.10231 4.375 7.99103 4.375 7.875V6.125C4.375 6.00897 4.42109 5.89769 4.50314 5.81564C4.58519 5.73359 4.69647 5.6875 4.8125 5.6875H9.625V3.0625C9.62496 2.97375 9.65191 2.88709 9.70228 2.81402C9.75264 2.74095 9.82404 2.68492 9.90699 2.65337C9.98994 2.62183 10.0805 2.61626 10.1667 2.6374C10.2529 2.65854 10.3306 2.70539 10.3896 2.77174L13.8896 6.70924C13.9607 6.78939 14 6.89284 14 7C14 7.10716 13.9607 7.21061 13.8896 7.29076ZM4.8125 11.375H2.625V2.625H4.8125C4.92853 2.625 5.03981 2.57891 5.12186 2.49686C5.20391 2.41481 5.25 2.30353 5.25 2.1875V0.4375C5.25 0.321468 5.20391 0.210188 5.12186 0.128141C5.03981 0.0460937 4.92853 0 4.8125 0H0.4375C0.321468 0 0.210188 0.0460937 0.128141 0.128141C0.0460937 0.210188 0 0.321468 0 0.4375V13.5625C0 13.6785 0.0460937 13.7898 0.128141 13.8719C0.210188 13.9539 0.321468 14 0.4375 14H4.8125C4.92853 14 5.03981 13.9539 5.12186 13.8719C5.20391 13.7898 5.25 13.6785 5.25 13.5625V11.8125C5.25 11.6965 5.20391 11.5852 5.12186 11.5031C5.03981 11.4211 4.92853 11.375 4.8125 11.375Z" fill="#000000"/>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_12)">
+<path d="M18.8738 11.3323L14.8738 15.8323C14.807 15.9088 14.7181 15.9629 14.6194 15.987C14.5207 16.0111 14.4169 16.0042 14.3223 15.9673C14.2277 15.9311 14.1463 15.867 14.0887 15.7837C14.0312 15.7002 14.0003 15.6014 14 15.5V12.5H8.5C8.36739 12.5 8.24022 12.4473 8.14645 12.3536C8.05267 12.2598 8 12.1326 8 12V10C8 9.86739 8.05267 9.74022 8.14645 9.64645C8.24022 9.55267 8.36739 9.5 8.5 9.5H14V6.5C14 6.39857 14.0308 6.29953 14.0883 6.21602C14.1459 6.13251 14.2275 6.06848 14.3223 6.03242C14.4171 5.99638 14.5206 5.99001 14.6191 6.01417C14.7176 6.03833 14.8064 6.09187 14.8738 6.1677L18.8738 10.6677C18.9551 10.7593 19 10.8775 19 11C19 11.1225 18.9551 11.2407 18.8738 11.3323ZM8.5 16H6V6H8.5C8.63261 6 8.75978 5.94733 8.85355 5.85355C8.94733 5.75978 9 5.63261 9 5.5V3.5C9 3.36739 8.94733 3.24021 8.85355 3.14645C8.75978 3.05268 8.63261 3 8.5 3H3.5C3.36739 3 3.24021 3.05268 3.14645 3.14645C3.05268 3.24021 3 3.36739 3 3.5V18.5C3 18.6326 3.05268 18.7598 3.14645 18.8536C3.24021 18.9473 3.36739 19 3.5 19H8.5C8.63261 19 8.75978 18.9473 8.85355 18.8536C8.94733 18.7598 9 18.6326 9 18.5V16.5C9 16.3674 8.94733 16.2402 8.85355 16.1464C8.75978 16.0527 8.63261 16 8.5 16Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1_12">
+<rect width="16" height="16" fill="white" transform="translate(3 3)"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/utils/wallet-connect/src/components/account-button/account-button.tsx b/utils/wallet-connect/src/components/account-button/account-button.tsx
index f06ecebd56..45efde8c44 100644
--- a/utils/wallet-connect/src/components/account-button/account-button.tsx
+++ b/utils/wallet-connect/src/components/account-button/account-button.tsx
@@ -10,7 +10,7 @@ type Props<T extends Vara.ButtonProps | Gear.ButtonProps> = {
   address: string;
 } & Pick<T, 'block' | 'color' | 'size' | 'onClick'>;
 
-function VaraAccountButton({ address, name, color = 'dark', size, block, onClick }: Props<Vara.ButtonProps>) {
+function VaraAccountButton({ address, name, color = 'contrast', size, block, onClick }: Props<Vara.ButtonProps>) {
   return (
     <Vara.Button type="button" size={size} color={color} onClick={onClick} block={block}>
       <Identicon value={address} size={16} theme="polkadot" className={styles.icon} />
@@ -40,12 +40,14 @@ function GearAccountButton(props: Props<Gear.ButtonProps>) {
   );
 }
 
-type ModalProps<T extends Gear.ButtonProps | Vara.ButtonProps> = Omit<Props<T>, 'size' | 'block'> & {
-  color: 'primary' | 'light';
+type ModalProps<T extends Gear.ButtonProps | Vara.ButtonProps> = Omit<Props<T>, 'size' | 'block' | 'color'> & {
+  color: 'primary' | 'plain';
 };
 
 VaraAccountButton.Modal = (props: ModalProps<Vara.ButtonProps>) => <VaraAccountButton size="small" block {...props} />;
 
-GearAccountButton.Modal = (props: ModalProps<Gear.ButtonProps>) => <GearAccountButton size="large" block {...props} />;
+GearAccountButton.Modal = ({ color, ...props }: ModalProps<Gear.ButtonProps>) => (
+  <GearAccountButton size="large" color={color === 'plain' ? 'light' : 'primary'} block {...props} />
+);
 
 export { VaraAccountButton, GearAccountButton };
diff --git a/utils/wallet-connect/src/components/wallet-button/wallet-button.tsx b/utils/wallet-connect/src/components/wallet-button/wallet-button.tsx
index 6ab87e09a2..ffd071b182 100644
--- a/utils/wallet-connect/src/components/wallet-button/wallet-button.tsx
+++ b/utils/wallet-connect/src/components/wallet-button/wallet-button.tsx
@@ -27,7 +27,7 @@ function Wallet({ SVG, name }: WalletProps) {
 
 function VaraWalletButton({ children, SVG, name, ...props }: Props & WalletProps) {
   return (
-    <Vara.Button className={styles.button} color="light" size="small" block {...props}>
+    <Vara.Button className={styles.button} color="plain" size="small" block {...props}>
       <Wallet SVG={SVG} name={name} />
       {children}
     </Vara.Button>
diff --git a/utils/wallet-connect/src/components/wallet-modal/wallet-modal.tsx b/utils/wallet-connect/src/components/wallet-modal/wallet-modal.tsx
index 452448c30c..11e99d2deb 100644
--- a/utils/wallet-connect/src/components/wallet-modal/wallet-modal.tsx
+++ b/utils/wallet-connect/src/components/wallet-modal/wallet-modal.tsx
@@ -54,7 +54,7 @@ function WalletModal({ theme = 'vara', close }: Props) {
       const { address, meta } = _account;
 
       const isActive = address === account?.address;
-      const color = isActive ? 'primary' : 'light';
+      const color = isActive ? 'primary' : 'plain';
 
       const handleClick = () => {
         if (isActive) return;
@@ -74,6 +74,7 @@ function WalletModal({ theme = 'vara', close }: Props) {
 
           <Button
             icon={CopySVG}
+            size="medium"
             color="transparent"
             onClick={handleCopyClick}
             className={cx(styles.copyButton, themeClassName)}
@@ -127,6 +128,7 @@ function WalletModal({ theme = 'vara', close }: Props) {
           <Button
             icon={ExitSVG}
             text="Logout"
+            size="medium"
             color="transparent"
             onClick={handleLogoutButtonClick}
             className={cx(styles.logoutButton, themeClassName)}