diff --git a/packages/console/src/components/RadioGroup/Radio.tsx b/packages/console/src/components/RadioGroup/Radio.tsx
index 4a75f7ec9..1fa795168 100644
--- a/packages/console/src/components/RadioGroup/Radio.tsx
+++ b/packages/console/src/components/RadioGroup/Radio.tsx
@@ -6,13 +6,10 @@ import { useTranslation } from 'react-i18next';
 import * as styles from './index.module.scss';
 
 const Check = () => (
-  <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <rect x="1" y="1" width="18" height="18" rx="9" fill="#4F37F9" />
+  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M8.31476 13.858L5.13295 10.441C4.95568 10.253 4.95568 9.947 5.13295 9.757L5.77568 9.074C5.95295 8.886 6.24113 8.886 6.4184 9.074L8.63657 11.466L13.5811 6.141C13.7584 5.953 14.0465 5.953 14.2238 6.141L14.8665 6.825C15.0438 7.013 15.0438 7.32 14.8665 7.507L8.95748 13.858C8.78021 14.046 8.49203 14.046 8.31476 13.858Z"
-      fill="white"
+      d="M8.66666 1.33334C4.99999 1.33334 1.99999 4.33334 1.99999 8.00001C1.99999 11.6667 4.99999 14.6667 8.66666 14.6667C12.3333 14.6667 15.3333 11.6667 15.3333 8.00001C15.3333 4.33334 12.3333 1.33334 8.66666 1.33334ZM11.4667 6.86668L8.26666 10.0667C7.99999 10.3333 7.59999 10.3333 7.33333 10.0667L5.86666 8.60001C5.59999 8.33334 5.59999 7.93334 5.86666 7.66668C6.13333 7.40001 6.53333 7.40001 6.79999 7.66668L7.79999 8.66668L10.5333 5.93334C10.8 5.66668 11.2 5.66668 11.4667 5.93334C11.7333 6.20001 11.7333 6.60001 11.4667 6.86668Z"
+      fill="#5D34F2"
     />
   </svg>
 );
@@ -29,7 +26,6 @@ export type Props = {
   type?: 'card' | 'plain';
   isDisabled?: boolean;
   disabledLabel?: AdminConsoleKey;
-  size?: 'normal' | 'small';
 };
 
 const Radio = ({
@@ -44,7 +40,6 @@ const Radio = ({
   type,
   isDisabled,
   disabledLabel,
-  size = 'normal',
 }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
@@ -68,7 +63,6 @@ const Radio = ({
         styles.radio,
         isChecked && styles.checked,
         isDisabled && styles.disabled,
-        styles[size],
         className
       )}
       // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
@@ -77,14 +71,22 @@ const Radio = ({
       onClick={isDisabled ? undefined : onClick}
       onKeyPress={handleKeyPress}
     >
-      <input readOnly disabled type="radio" name={name} value={value} checked={isChecked} />
-      {type === 'card' && <Check />}
-      {children}
-      {type === 'plain' && <div className={styles.indicator} />}
-      {title && t(title)}
-      {isDisabled && disabledLabel && (
-        <div className={styles.disabledLabel}>{t(disabledLabel)}</div>
-      )}
+      <div className={styles.content}>
+        <input readOnly disabled type="radio" name={name} value={value} checked={isChecked} />
+        {type === 'card' && (
+          <div className={styles.indicator}>
+            <Check />
+          </div>
+        )}
+        {children}
+        {type === 'plain' && <div className={styles.indicator} />}
+        {title && t(title)}
+        {isDisabled && disabledLabel && (
+          <div className={classNames(styles.indicator, styles.disabledLabel)}>
+            {t(disabledLabel)}
+          </div>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/packages/console/src/components/RadioGroup/index.module.scss b/packages/console/src/components/RadioGroup/index.module.scss
index f1d1e882a..599320e9b 100644
--- a/packages/console/src/components/RadioGroup/index.module.scss
+++ b/packages/console/src/components/RadioGroup/index.module.scss
@@ -11,18 +11,8 @@
 }
 
 .card {
-  display: flex;
-  flex-wrap: wrap;
-  gap: _.unit(3);
-
   > .radio {
-    position: relative;
-    flex: 1;
-    min-width: 170px;
-    max-width: 230px;
-    padding: _.unit(5);
-    display: flex;
-    flex-direction: column;
+    padding: _.unit(3);
     border-radius: _.unit(4);
     border: 1px solid transparent;
     outline: 1px solid var(--color-neutral-90);
@@ -45,39 +35,36 @@
       box-shadow: var(--shadow-2);
     }
 
-    svg {
-      opacity: 0%;
-      position: absolute;
-      right: _.unit(5);
-      top: _.unit(5);
-    }
+    .content {
+      position: relative;
 
-    &.small {
-      padding: _.unit(3);
+      .indicator {
+        position: absolute;
+        right: 0;
+        top: 0;
 
-      svg {
-        right: _.unit(3);
-        top: _.unit(3);
+        svg {
+          opacity: 0%;
+        }
       }
-    }
 
-    .disabledLabel {
-      position: absolute;
-      right: _.unit(3);
-      top: _.unit(3);
-      background: var(--color-neutral-90);
-      padding: _.unit(0.5) _.unit(2);
-      border-radius: 10px;
-      font: var(--font-label-medium);
-      color: var(--color-text);
+      .disabledLabel {
+        background: var(--color-neutral-90);
+        padding: _.unit(0.5) _.unit(2);
+        border-radius: 10px;
+        font: var(--font-label-medium);
+        color: var(--color-text);
+      }
     }
 
     &.checked {
       border-color: var(--color-primary);
       outline: 1px solid var(--color-primary);
 
-      svg {
-        opacity: 100%;
+      .indicator {
+        svg {
+          opacity: 100%;
+        }
       }
     }
   }
@@ -88,8 +75,6 @@
 
   /* stylelint-disable-next-line no-descending-specificity */
   > .radio {
-    display: flex;
-    align-items: center;
     cursor: pointer;
 
     /* stylelint-disable-next-line no-descending-specificity */
@@ -97,29 +82,36 @@
       margin-bottom: _.unit(2);
     }
 
-    .indicator {
-      border-radius: 50%;
-      border: 2px solid var(--color-neutral-60);
-      display: inline-block;
-      margin-right: _.unit(2);
+    .content {
+      display: flex;
+      align-items: center;
 
-      &::before {
-        content: '';
-        background: var(--color-layer-1);
-        width: 10px;
-        height: 10px;
-        display: block;
+      .indicator {
         border-radius: 50%;
-        border: 2px solid var(--color-layer-1);
+        border: 2px solid var(--color-neutral-60);
+        display: inline-block;
+        margin-right: _.unit(2);
+
+        &::before {
+          content: '';
+          background: var(--color-layer-1);
+          width: 10px;
+          height: 10px;
+          display: block;
+          border-radius: 50%;
+          border: 2px solid var(--color-layer-1);
+        }
       }
     }
 
     &.checked {
-      .indicator {
-        border-color: var(--color-primary);
+      .content {
+        .indicator {
+          border-color: var(--color-primary);
 
-        &::before {
-          background: var(--color-primary);
+          &::before {
+            background: var(--color-primary);
+          }
         }
       }
     }
@@ -128,11 +120,13 @@
       cursor: not-allowed;
       color: var(--color-disabled);
 
-      .indicator {
-        border-color: var(--color-disabled);
+      .content {
+        .indicator {
+          border-color: var(--color-disabled);
 
-        &::before {
-          background: var(--color-layer-1);
+          &::before {
+            background: var(--color-layer-1);
+          }
         }
       }
     }
diff --git a/packages/console/src/pages/Applications/components/CreateForm/index.module.scss b/packages/console/src/pages/Applications/components/CreateForm/index.module.scss
index 112da9ab7..1ab29e909 100644
--- a/packages/console/src/pages/Applications/components/CreateForm/index.module.scss
+++ b/packages/console/src/pages/Applications/components/CreateForm/index.module.scss
@@ -1,7 +1,19 @@
 @use '@/scss/underscore' as _;
+@use '@/scss/dimensions' as dim;
 
 .radioGroup {
   margin-top: _.unit(2);
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: _.unit(4);
+
+  @media screen and (max-width: dim.$modal-layout-grid-medium) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media screen and (max-width: dim.$modal-layout-grid-small) {
+    grid-template-columns: repeat(1, 1fr);
+  }
 }
 
 .error {
diff --git a/packages/console/src/pages/Applications/components/CreateForm/index.tsx b/packages/console/src/pages/Applications/components/CreateForm/index.tsx
index f50a5e4d3..80d04307b 100644
--- a/packages/console/src/pages/Applications/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Applications/components/CreateForm/index.tsx
@@ -90,6 +90,7 @@ const CreateForm = ({ onClose }: Props) => {
             {Object.values(ApplicationType).map((value) => (
               <Radio key={value} value={value}>
                 <TypeDescription
+                  type={value}
                   title={t(`${applicationTypeI18nKey[value]}.title`)}
                   subtitle={t(`${applicationTypeI18nKey[value]}.subtitle`)}
                   description={t(`${applicationTypeI18nKey[value]}.description`)}
diff --git a/packages/console/src/pages/Applications/components/SdkSelector/index.module.scss b/packages/console/src/pages/Applications/components/SdkSelector/index.module.scss
index 93438c246..955ed5bff 100644
--- a/packages/console/src/pages/Applications/components/SdkSelector/index.module.scss
+++ b/packages/console/src/pages/Applications/components/SdkSelector/index.module.scss
@@ -31,10 +31,14 @@
     width: 100%;
     margin-top: _.unit(6);
     margin-right: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: _.unit(5);
   }
 
   .radio {
     border-radius: _.unit(2);
+    padding: _.unit(5);
     width: 240px;
     max-width: unset;
     font: var(--font-subhead-2);
diff --git a/packages/console/src/pages/Applications/components/TypeDescription/index.tsx b/packages/console/src/pages/Applications/components/TypeDescription/index.tsx
index 5ff17a6ff..f63ddd341 100644
--- a/packages/console/src/pages/Applications/components/TypeDescription/index.tsx
+++ b/packages/console/src/pages/Applications/components/TypeDescription/index.tsx
@@ -1,14 +1,20 @@
+import { ApplicationType } from '@logto/schemas';
+
+import ApplicationIcon from '@/components/ApplicationIcon';
+
 import * as styles from './index.module.scss';
 
 type Props = {
   title: string;
   subtitle: string;
   description: string;
+  type: ApplicationType;
 };
 
-const TypeDescription = ({ title, subtitle, description }: Props) => {
+const TypeDescription = ({ title, subtitle, description, type }: Props) => {
   return (
     <>
+      <ApplicationIcon type={type} />
       <div className={styles.title}>{title}</div>
       <div className={styles.subtitle}>{subtitle}</div>
       <div className={styles.description}>{description}</div>
diff --git a/packages/console/src/pages/Connectors/components/CreateForm/index.module.scss b/packages/console/src/pages/Connectors/components/CreateForm/index.module.scss
index 4c9df39cf..588ce46fe 100644
--- a/packages/console/src/pages/Connectors/components/CreateForm/index.module.scss
+++ b/packages/console/src/pages/Connectors/components/CreateForm/index.module.scss
@@ -1,15 +1,42 @@
 @use '@/scss/underscore' as _;
+@use '@/scss/dimensions' as dim;
 
 .body {
   .connectorGroup {
     gap: _.unit(4);
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
 
-    .connectorRadio {
-      // Override radio style
-      min-width: 276px;
-      max-width: 276px;
-      width: 276px;
-      height: 96px;
+    @media screen and (max-width: dim.$modal-layout-grid-large) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    @media screen and (max-width: dim.$modal-layout-grid-medium) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media screen and (max-width: dim.$modal-layout-grid-small) {
+      grid-template-columns: repeat(1, 1fr);
+    }
+
+    &.medium {
+      grid-template-columns: repeat(2, 1fr);
+
+      @media screen and (max-width: dim.$modal-layout-grid-small) {
+        grid-template-columns: repeat(1, 1fr);
+      }
+    }
+
+    &.large {
+      grid-template-columns: repeat(3, 1fr);
+
+      @media screen and (max-width: dim.$modal-layout-grid-medium) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      @media screen and (max-width: dim.$modal-layout-grid-small) {
+        grid-template-columns: repeat(1, 1fr);
+      }
     }
 
     .connector {
@@ -17,14 +44,15 @@
       display: flex;
 
       .logo {
-        width: 48px;
-        height: 48px;
+        width: 40px;
+        height: 40px;
         display: flex;
         align-items: center;
+        margin-right: _.unit(3);
 
         img {
-          width: 36px;
-          height: 36px;
+          width: 40px;
+          height: 40px;
         }
       }
 
@@ -33,6 +61,11 @@
 
         .name {
           font: var(--font-subhead-2);
+          @include _.multi-line-ellipsis(1);
+
+          &.nameWithRightPadding {
+            padding-right: _.unit(12); /* For check mark and added label */
+          }
         }
 
         .connectorId {
@@ -45,7 +78,7 @@
           font: var(--font-body-small);
           color: var(--color-text-secondary);
           margin-top: _.unit(1);
-          @include _.multi-line-ellipsis(3);
+          @include _.multi-line-ellipsis(4);
         }
       }
     }
diff --git a/packages/console/src/pages/Connectors/components/CreateForm/index.tsx b/packages/console/src/pages/Connectors/components/CreateForm/index.tsx
index 806067889..6548e1a86 100644
--- a/packages/console/src/pages/Connectors/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Connectors/components/CreateForm/index.tsx
@@ -1,4 +1,5 @@
 import { ConnectorType } from '@logto/schemas';
+import classNames from 'classnames';
 import { useMemo, useState } from 'react';
 import Modal from 'react-modal';
 
@@ -78,6 +79,18 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
     setActiveConnectorId(undefined);
   };
 
+  const modalSize = useMemo(() => {
+    if (!groups || groups.length <= 2) {
+      return 'medium';
+    }
+
+    if (groups.length === 3) {
+      return 'large';
+    }
+
+    return 'xlarge';
+  }, [groups]);
+
   return (
     <Modal
       isOpen={isFormOpen}
@@ -97,7 +110,7 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
           />
         }
         className={styles.body}
-        size="xlarge"
+        size={modalSize}
         onClose={onClose}
       >
         {isLoading && 'Loading...'}
@@ -107,33 +120,35 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
             name="group"
             value={activeGroupId}
             type="card"
-            className={styles.connectorGroup}
+            className={classNames(styles.connectorGroup, styles[modalSize])}
             onChange={handleGroupChange}
           >
-            {groups.map(({ id, name, logo, description, connectors }) => (
-              <Radio
-                key={id}
-                value={id}
-                className={styles.connectorRadio}
-                isDisabled={connectors.every(({ enabled }) => enabled)}
-                disabledLabel="general.added"
-                size="small"
-              >
-                <div className={styles.connector}>
-                  <div className={styles.logo}>
-                    <img src={logo} alt="logo" />
-                  </div>
-                  <div className={styles.content}>
-                    <div className={styles.name}>
-                      <UnnamedTrans resource={name} />
+            {groups.map(({ id, name, logo, description, connectors }) => {
+              const isDisabled = connectors.every(({ enabled }) => enabled);
+
+              return (
+                <Radio key={id} value={id} isDisabled={isDisabled} disabledLabel="general.added">
+                  <div className={styles.connector}>
+                    <div className={styles.logo}>
+                      <img src={logo} alt="logo" />
                     </div>
-                    <div className={styles.description}>
-                      <UnnamedTrans resource={description} />
+                    <div className={styles.content}>
+                      <div
+                        className={classNames(
+                          styles.name,
+                          isDisabled && styles.nameWithRightPadding
+                        )}
+                      >
+                        <UnnamedTrans resource={name} />
+                      </div>
+                      <div className={styles.description}>
+                        <UnnamedTrans resource={description} />
+                      </div>
                     </div>
                   </div>
-                </div>
-              </Radio>
-            ))}
+                </Radio>
+              );
+            })}
           </RadioGroup>
         )}
         {activeGroup && (
diff --git a/packages/console/src/scss/_dimensions.scss b/packages/console/src/scss/_dimensions.scss
index 62eca0605..c4e473c34 100644
--- a/packages/console/src/scss/_dimensions.scss
+++ b/packages/console/src/scss/_dimensions.scss
@@ -2,4 +2,7 @@ $modal-layout-width-xlarge: 1224px;
 $modal-layout-width-large: 784px;
 $modal-layout-width-medium: 600px;
 $modal-layout-width-small: 352px;
+$modal-layout-grid-large: 850px;
+$modal-layout-grid-medium: 668px;
+$modal-layout-grid-small: 500px;
 $form-text-field-width: 556px;