diff --git a/packages/console/src/components/Button/index.module.scss b/packages/console/src/components/Button/index.module.scss
index 2269f8b02..d1dc65563 100644
--- a/packages/console/src/components/Button/index.module.scss
+++ b/packages/console/src/components/Button/index.module.scss
@@ -106,19 +106,21 @@
     color: var(--color-on-primary);
 
     &:focus-visible {
-      outline: 3px solid var(--color-focused-variant);
+      background:
+        linear-gradient(0deg, rgba(0, 0, 0, 20%), rgba(0, 0, 0, 20%)),
+        linear-gradient(90deg, #5d34f2 32%, #bd31ff 102%);
     }
 
     &:active {
       background:
         linear-gradient(0deg, rgba(0, 0, 0, 20%), rgba(0, 0, 0, 20%)),
-        linear-gradient(69.73deg, #492ef3 5.52%, #cf69ff 94.22%);
+        linear-gradient(90deg, #5d34f2 32%, #bd31ff 102%);
     }
 
     &:not(:disabled):not(:active):hover {
       background:
-        linear-gradient(0deg, rgba(0, 0, 0, 20%), rgba(0, 0, 0, 20%)),
-        linear-gradient(69.73deg, #492ef3 5.52%, #cf69ff 94.22%);
+        linear-gradient(0deg, rgba(255, 255, 255, 20%), rgba(255, 255, 255, 20%)),
+        linear-gradient(90deg, #5d34f2 32%, #bd31ff 102%);
     }
   }
 
diff --git a/packages/console/src/pages/Welcome/index.module.scss b/packages/console/src/pages/Welcome/index.module.scss
index a0923609b..b9ff66334 100644
--- a/packages/console/src/pages/Welcome/index.module.scss
+++ b/packages/console/src/pages/Welcome/index.module.scss
@@ -17,17 +17,17 @@
     background-image: url('../../assets/icons/welcome-dark.svg');
     background-position: right 0 bottom 40px;
     background-repeat: no-repeat;
+  }
 
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 92px;
-      width: 273px;
-      height: 221px;
-      background: url('../../assets/icons/snowflake.svg') no-repeat;
-      background-position: center;
-    }
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 92px;
+    width: 273px;
+    height: 221px;
+    background: url('../../assets/icons/snowflake.svg') no-repeat;
+    background-position: center;
   }
 }
 
diff --git a/packages/ui/src/components/Button/SocialIconButton.module.scss b/packages/ui/src/components/Button/SocialIconButton.module.scss
index 36d5dc538..ab0ccb15d 100644
--- a/packages/ui/src/components/Button/SocialIconButton.module.scss
+++ b/packages/ui/src/components/Button/SocialIconButton.module.scss
@@ -8,10 +8,10 @@
   width: 40px;
   height: 40px;
   cursor: pointer;
+}
 
-  &.inverse {
-    background: #fff;
-  }
+.inverse {
+  background: var(--color-inverse-social-bg);
 }
 
 .icon {
@@ -31,4 +31,14 @@
       background: var(--color-hover);
     }
   }
+
+  .inverse {
+    &:active {
+      background: var(--color-inverse-social-pressed);
+    }
+
+    &:hover:not(:active) {
+      background: var(--color-inverse-social-hover);
+    }
+  }
 }
diff --git a/packages/ui/src/containers/SocialSignIn/SocialSignInIconList/index.tsx b/packages/ui/src/containers/SocialSignIn/SocialSignInIconList/index.tsx
index feacd50d3..6aca49ca5 100644
--- a/packages/ui/src/containers/SocialSignIn/SocialSignInIconList/index.tsx
+++ b/packages/ui/src/containers/SocialSignIn/SocialSignInIconList/index.tsx
@@ -32,11 +32,19 @@ const SocialSignInIconList = ({
       {connectors.map((connector) => {
         const { id, target, logo, logoDark } = connector;
 
+        const getLogo = () => {
+          if (theme === 'dark') {
+            return (!isAppleConnector(target) && logoDark) || logo;
+          }
+
+          return (isAppleConnector(target) && logoDark) || logo;
+        };
+
         return (
           <SocialIconButton
             key={id}
             className={styles.socialButton}
-            logo={(theme === 'dark' && !isAppleConnector(target) && logoDark) || logo}
+            logo={getLogo()}
             target={target}
             onClick={() => {
               void invokeSocialSignIn(connector);
diff --git a/packages/ui/src/containers/UsernameSignin/index.module.scss b/packages/ui/src/containers/UsernameSignin/index.module.scss
index 4c5f6430a..0ac4e9dd7 100644
--- a/packages/ui/src/containers/UsernameSignin/index.module.scss
+++ b/packages/ui/src/containers/UsernameSignin/index.module.scss
@@ -12,10 +12,15 @@
   }
 
   .terms {
-    margin: _.unit(8) 0  _.unit(4);
+    margin: _.unit(8) 0 _.unit(4);
   }
 
   .formErrors {
     margin-top: _.unit(-2);
+    margin-bottom: _.unit(4);
+
+    + .terms {
+      margin-top: _.unit(4);
+    }
   }
 }
diff --git a/packages/ui/src/scss/_desktop.scss b/packages/ui/src/scss/_desktop.scss
index 8f0f0f6e0..98b62659d 100644
--- a/packages/ui/src/scss/_desktop.scss
+++ b/packages/ui/src/scss/_desktop.scss
@@ -1,13 +1,6 @@
 /* Foundation */
-$font-family: -apple-system,
-  system-ui,
-  'BlinkMacSystemFont',
-  'Segoe UI',
-  'Roboto',
-  'Helvetica Neue',
-  'Helvetica',
-  'Arial',
-  sans-serif;
+$font-family: -apple-system, system-ui, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue',
+  'Helvetica', 'Arial', sans-serif;
 
 @mixin colors-light-theme {
   --color-base: #e5e1ec;
@@ -37,6 +30,10 @@ $font-family: -apple-system,
   --color-divider: #e0e3e3;
   --color-error: #ba1b1b;
   --color-loading-icon: #191c1d;
+
+  --color-inverse-social-bg: #000;
+  --color-inverse-social-hover: rgba(0, 0, 0, 92%);
+  --color-inverse-social-pressed: rgba(0, 0, 0, 88%);
 }
 
 @mixin colors-dark-theme {
@@ -49,7 +46,7 @@ $font-family: -apple-system,
   --color-border-variant: #5f5d67;
   --color-caption: #a9acac;
   --color-icon: #a9acac;
-  --color-focused: rgba(247, 248, 248, 16%);  // 16% Neutral-10
+  --color-focused: rgba(247, 248, 248, 16%); // 16% Neutral-10
   --color-pressed: rgba(247, 248, 248, 12%); // 12% Neutral-10
   --color-hover: rgba(247, 248, 248, 8%); // 8% Neutral-10
 
@@ -60,16 +57,21 @@ $font-family: -apple-system,
   --color-primary-pressed: var(--dark-pressed);
   --color-primary-hover: var(--dark-hover);
 
-
   --color-inverse-on-surface: #2d3132;
   --color-outline: #928f9a;
   --color-layer: #2a2c32;
-  --color-dialogue: linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
+  --color-dialogue:
+    linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)),
+    linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)),
+    #191c1d;
   --color-divider: #444748;
   --color-error: #dd3730;
   --color-loading-icon: #f7f8f8;
-}
 
+  --color-inverse-social-bg: #fff;
+  --color-inverse-social-hover: rgba(255, 255, 255, 92%);
+  --color-inverse-social-pressed: rgba(255, 255, 255, 88%);
+}
 
 @mixin colors-universal {
   --color-primary-button-text: #fff;
diff --git a/packages/ui/src/scss/_mobile.scss b/packages/ui/src/scss/_mobile.scss
index ef012bc82..e0f765c0c 100644
--- a/packages/ui/src/scss/_mobile.scss
+++ b/packages/ui/src/scss/_mobile.scss
@@ -1,13 +1,6 @@
 /* Foundation */
-$font-family: -apple-system,
-  system-ui,
-  'BlinkMacSystemFont',
-  'Segoe UI',
-  'Roboto',
-  'Helvetica Neue',
-  'Helvetica',
-  'Arial',
-  sans-serif;
+$font-family: -apple-system, system-ui, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue',
+  'Helvetica', 'Arial', sans-serif;
 
 @mixin colors-light-theme {
   --color-base: #fff;
@@ -25,6 +18,8 @@ $font-family: -apple-system,
   --color-error: #ba1b1b;
   --color-dialogue: #fff;
   --color-loading-icon: #191c1d;
+
+  --color-inverse-social-bg: #000;
 }
 
 @mixin colors-dark-theme {
@@ -41,10 +36,14 @@ $font-family: -apple-system,
   --color-primary: var(--dark-primary-color);
   --color-layer: #2a2c32;
   --color-error: #dd3730;
-  --color-dialogue: linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
+  --color-dialogue:
+    linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)),
+    linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)),
+    #191c1d;
   --color-loading-icon: #f7f8f8;
-}
 
+  --color-inverse-social-bg: #fff;
+}
 
 @mixin colors-universal {
   --color-primary-button-text: #fff;