diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/AddSignInMethodButton.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/AddSignInMethodButton.tsx
index fc3435a9e..c7d31f9e6 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/AddSignInMethodButton.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/AddSignInMethodButton.tsx
@@ -19,11 +19,6 @@ const AddSignInMethodButton = ({ options, onSelected }: Props) => {
     return null;
   }
 
-  const candidates = options.map((identifier) => ({
-    value: identifier,
-    title: t('sign_in_exp.sign_up_and_sign_in.identifiers', { context: snakeCase(identifier) }),
-  }));
-
   return (
     <ActionMenu
       buttonProps={{
@@ -34,14 +29,14 @@ const AddSignInMethodButton = ({ options, onSelected }: Props) => {
       dropdownHorizontalAlign="start"
       dropDownClassName={styles.addSignInMethodDropdown}
     >
-      {candidates.map(({ value, title }) => (
+      {options.map((identifier) => (
         <DropdownItem
-          key={value}
+          key={identifier}
           onClick={() => {
-            onSelected(value);
+            onSelected(identifier);
           }}
         >
-          {title}
+          {t('sign_in_exp.sign_up_and_sign_in.identifiers', { context: snakeCase(identifier) })}
         </DropdownItem>
       ))}
     </ActionMenu>
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/AddButton.module.scss b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/AddButton.module.scss
index 89722b9ab..12944b76b 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/AddButton.module.scss
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/AddButton.module.scss
@@ -16,11 +16,6 @@
     margin-right: _.unit(3);
     width: 20px;
     height: 20px;
-
-    img {
-      width: 20px;
-      height: 20px;
-    }
   }
 
   .name {
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/AddButton.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/AddButton.tsx
index 93003825d..468dc1c25 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/AddButton.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/AddButton.tsx
@@ -19,26 +19,6 @@ const AddButton = ({ options, onSelected, hasSelectedConnectors }: Props) => {
     return null;
   }
 
-  const candidates = options.map(({ target, logo, name, connectors }) => ({
-    value: target,
-    title: (
-      <div className={styles.title}>
-        <div className={styles.logo}>
-          <img src={logo} alt={target} />
-        </div>
-        <UnnamedTrans resource={name} className={styles.name} />
-        {connectors.length > 1 &&
-          connectors
-            .filter(({ enabled }) => enabled)
-            .map(({ platform }) => (
-              <div key={platform} className={styles.icon}>
-                {platform && <ConnectorPlatformIcon platform={platform} />}
-              </div>
-            ))}
-      </div>
-    ),
-  }));
-
   const addSocialConnectorButtonProps: ButtonProps = {
     type: 'default',
     size: 'medium',
@@ -58,14 +38,25 @@ const AddButton = ({ options, onSelected, hasSelectedConnectors }: Props) => {
       dropdownHorizontalAlign="start"
       dropDownClassName={styles.dropdown}
     >
-      {candidates.map(({ value, title }) => (
+      {options.map(({ target, logo, name, connectors }) => (
         <DropdownItem
-          key={value}
+          key={target}
           onClick={() => {
-            onSelected(value);
+            onSelected(target);
           }}
         >
-          {title}
+          <div className={styles.title}>
+            <img src={logo} alt={target} className={styles.logo} />
+            <UnnamedTrans resource={name} className={styles.name} />
+            {connectors.length > 1 &&
+              connectors
+                .filter(({ enabled }) => enabled)
+                .map(({ platform }) => (
+                  <div key={platform} className={styles.icon}>
+                    {platform && <ConnectorPlatformIcon platform={platform} />}
+                  </div>
+                ))}
+          </div>
         </DropdownItem>
       ))}
     </ActionMenu>
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/SelectedConnectorItem.module.scss b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/SelectedConnectorItem.module.scss
index 0f036ef0e..67474dbf3 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/SelectedConnectorItem.module.scss
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/SelectedConnectorItem.module.scss
@@ -26,11 +26,6 @@
       margin: auto _.unit(3);
       width: 20px;
       height: 20px;
-
-      img {
-        width: 20px;
-        height: 20px;
-      }
     }
 
     .name {
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/SelectedConnectorItem.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/SelectedConnectorItem.tsx
index acd40d1ed..fcce893f9 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/SelectedConnectorItem.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/SelectedConnectorItem.tsx
@@ -17,9 +17,7 @@ const SelectedConnectorItem = ({ data: { logo, target, name, connectors }, onDel
     <div className={styles.item}>
       <div className={styles.info}>
         <Draggable className={styles.draggableIcon} />
-        <div className={styles.logo}>
-          <img src={logo} alt={target} />
-        </div>
+        <img src={logo} alt={target} className={styles.logo} />
         <UnnamedTrans resource={name} className={styles.name} />
         {connectors.length > 1 &&
           connectors