diff --git a/packages/console/src/components/RadioGroup/Radio.tsx b/packages/console/src/components/RadioGroup/Radio.tsx
index 5bf52d7ef..d50601989 100644
--- a/packages/console/src/components/RadioGroup/Radio.tsx
+++ b/packages/console/src/components/RadioGroup/Radio.tsx
@@ -1,5 +1,7 @@
+import { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
 import React, { KeyboardEventHandler, ReactNode, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import * as styles from './index.module.scss';
 
@@ -18,12 +20,13 @@ const Check = () => (
 export type Props = {
   className?: string;
   value: string;
-  title?: string;
+  title?: AdminConsoleKey;
   name?: string;
   children?: ReactNode;
   isChecked?: boolean;
   onClick?: () => void;
   tabIndex?: number;
+  type?: 'card' | 'plain';
 };
 
 const Radio = ({
@@ -35,7 +38,10 @@ const Radio = ({
   isChecked,
   onClick,
   tabIndex,
+  type,
 }: Props) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
   const handleKeyPress: KeyboardEventHandler<HTMLDivElement> = useCallback(
     (event) => {
       if ([' ', 'Enter'].includes(event.key)) {
@@ -54,13 +60,10 @@ const Radio = ({
       onKeyPress={handleKeyPress}
     >
       <input readOnly disabled type="radio" name={name} value={value} checked={isChecked} />
-      {title && (
-        <div className={classNames(styles.headline, !children && styles.center)}>
-          <div className={styles.title}>{title}</div>
-        </div>
-      )}
-      <Check />
+      {type === 'card' && <Check />}
       {children}
+      {type === 'plain' && <div className={styles.indicator} />}
+      {title && t(title)}
     </div>
   );
 };
diff --git a/packages/console/src/components/RadioGroup/index.module.scss b/packages/console/src/components/RadioGroup/index.module.scss
index a16be0bd4..e5b1a5911 100644
--- a/packages/console/src/components/RadioGroup/index.module.scss
+++ b/packages/console/src/components/RadioGroup/index.module.scss
@@ -1,72 +1,96 @@
 @use '@/scss/underscore' as _;
 
 .radioGroup {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 _.unit(-8) _.unit(-8) 0;
+  input[type='radio'] {
+    appearance: none;
+    position: absolute;
+    margin: 0;
+    width: 0;
+    height: 0;
+  }
 
-  > .radio {
-    position: relative;
-    flex: 1;
-    min-width: 180px;
-    max-width: 220px;
-    padding: _.unit(5);
+  &.card {
     display: flex;
-    flex-direction: column;
-    border-radius: _.unit(4);
-    border: 1px solid var(--color-neutral-90);
-    outline: none;
-    user-select: none;
-    cursor: pointer;
-    transition: border 0.2s ease-in-out;
-    margin: 0 _.unit(8) _.unit(8) 0;
+    flex-wrap: wrap;
+    margin: 0 _.unit(-8) _.unit(-8) 0;
 
-    &:focus,
-    &:hover {
-      border-color: var(--color-primary);
-    }
+    > .radio {
+      position: relative;
+      flex: 1;
+      min-width: 180px;
+      max-width: 220px;
+      padding: _.unit(5);
+      display: flex;
+      flex-direction: column;
+      border-radius: _.unit(4);
+      border: 1px solid transparent;
+      outline: 1px solid var(--color-neutral-90);
+      user-select: none;
+      cursor: pointer;
+      margin: 0 _.unit(8) _.unit(8) 0;
 
-    svg {
-      opacity: 0%;
-      position: absolute;
-      right: _.unit(5);
-      top: _.unit(5);
-    }
-
-    &.checked {
-      border-color: var(--color-primary);
-      outline: 1px solid var(--color-primary);
+      &:focus,
+      &:hover {
+        outline: 1px solid var(--color-primary);
+        box-shadow: var(--shadow-light-s2);
+      }
 
       svg {
-        opacity: 100%;
+        opacity: 0%;
+        position: absolute;
+        right: _.unit(5);
+        top: _.unit(5);
+      }
+
+      &.checked {
+        border-color: var(--color-primary);
+        outline: 1px solid var(--color-primary);
+
+        svg {
+          opacity: 100%;
+        }
       }
     }
+  }
 
-    .headline {
-      flex: 1;
+  &.plain {
+    font: var(--font-body-medium);
+
+    > .radio {
       display: flex;
-      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
 
-      &.center {
-        align-items: center;
+      &:not(:last-child) {
+        margin-bottom: _.unit(2);
       }
 
-      > *:not(:first-child) {
-        margin-left: _.unit(3);
+      .indicator {
+        border-radius: 50%;
+        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);
+        }
       }
-    }
 
-    .title {
-      font: var(--font-subhead-2);
-      color: var(--color-text);
-    }
+      &.checked {
+        .indicator {
+          border-color: var(--color-primary);
 
-    input[type='radio'] {
-      appearance: none;
-      position: absolute;
-      margin: 0;
-      width: 0;
-      height: 0;
+          &::before {
+            background: var(--color-primary);
+          }
+        }
+      }
     }
   }
 }
diff --git a/packages/console/src/components/RadioGroup/index.tsx b/packages/console/src/components/RadioGroup/index.tsx
index 855f35558..be5dbc82c 100644
--- a/packages/console/src/components/RadioGroup/index.tsx
+++ b/packages/console/src/components/RadioGroup/index.tsx
@@ -15,16 +15,17 @@ type Props = {
   name: string;
   children: ReactNode;
   value?: string;
+  type?: 'card' | 'plain';
   className?: string;
   onChange?: (value: string) => void;
 };
 
 const RadioGroup = (
-  { name, children, value, className, onChange }: Props,
+  { name, children, value, className, onChange, type = 'plain' }: Props,
   reference?: LegacyRef<HTMLDivElement>
 ) => {
   return (
-    <div ref={reference} className={classNames(styles.radioGroup, className)}>
+    <div ref={reference} className={classNames(styles.radioGroup, styles[type], className)}>
       {Children.map(children, (child) => {
         if (!isValidElement(child) || child.type !== Radio) {
           return child;
@@ -37,6 +38,7 @@ const RadioGroup = (
             onChange?.(child.props.value);
           },
           tabIndex: 0,
+          type,
         });
       })}
     </div>
diff --git a/packages/console/src/pages/Applications/components/CreateForm/index.tsx b/packages/console/src/pages/Applications/components/CreateForm/index.tsx
index 685b54bd1..4389eef08 100644
--- a/packages/console/src/pages/Applications/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Applications/components/CreateForm/index.tsx
@@ -95,10 +95,11 @@ const CreateForm = ({ onClose }: Props) => {
     >
       <form>
         <FormField title="admin_console.applications.select_application_type">
-          <RadioGroup ref={ref} name={name} value={value} onChange={onChange}>
+          <RadioGroup ref={ref} name={name} value={value} type="card" onChange={onChange}>
             {Object.values(ApplicationType).map((value) => (
-              <Radio key={value} title={t(`${applicationTypeI18nKey[value]}.title`)} value={value}>
+              <Radio key={value} value={value}>
                 <TypeDescription
+                  title={t(`${applicationTypeI18nKey[value]}.title`)}
                   subtitle={t(`${applicationTypeI18nKey[value]}.subtitle`)}
                   description={t(`${applicationTypeI18nKey[value]}.description`)}
                 />
diff --git a/packages/console/src/pages/Applications/components/LibrarySelector/index.tsx b/packages/console/src/pages/Applications/components/LibrarySelector/index.tsx
index 35a6ed6c1..7d794a5e6 100644
--- a/packages/console/src/pages/Applications/components/LibrarySelector/index.tsx
+++ b/packages/console/src/pages/Applications/components/LibrarySelector/index.tsx
@@ -39,10 +39,13 @@ const LibrarySelector = ({
           className={styles.radioGroup}
           name="libraryName"
           value={libraryName}
+          type="card"
           onChange={onChange}
         >
           {Object.values(SupportedJavascriptLibraries).map((library) => (
-            <Radio key={library} className={styles.radio} title={library} value={library} />
+            <Radio key={library} className={styles.radio} value={library}>
+              {library}
+            </Radio>
           ))}
         </RadioGroup>
         <div className={styles.buttonWrapper}>
diff --git a/packages/console/src/pages/Applications/components/TypeDescription/index.module.scss b/packages/console/src/pages/Applications/components/TypeDescription/index.module.scss
index bd2d1f6f6..e61b41d0d 100644
--- a/packages/console/src/pages/Applications/components/TypeDescription/index.module.scss
+++ b/packages/console/src/pages/Applications/components/TypeDescription/index.module.scss
@@ -1,5 +1,10 @@
 @use '@/scss/underscore' as _;
 
+.title {
+  font: var(--font-subhead-2);
+  color: var(--color-text);
+}
+
 .subtitle,
 .description {
   margin-top: _.unit(3);
diff --git a/packages/console/src/pages/Applications/components/TypeDescription/index.tsx b/packages/console/src/pages/Applications/components/TypeDescription/index.tsx
index 61b6b39d7..812b059dd 100644
--- a/packages/console/src/pages/Applications/components/TypeDescription/index.tsx
+++ b/packages/console/src/pages/Applications/components/TypeDescription/index.tsx
@@ -3,13 +3,15 @@ import React from 'react';
 import * as styles from './index.module.scss';
 
 type Props = {
+  title: string;
   subtitle: string;
   description: string;
 };
 
-const TypeDescription = ({ subtitle, description }: Props) => {
+const TypeDescription = ({ title, subtitle, description }: Props) => {
   return (
     <>
+      <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/SignInExperience/components/BrandingForm.tsx b/packages/console/src/pages/SignInExperience/components/BrandingForm.tsx
index 2b56b63eb..f7a7acc76 100644
--- a/packages/console/src/pages/SignInExperience/components/BrandingForm.tsx
+++ b/packages/console/src/pages/SignInExperience/components/BrandingForm.tsx
@@ -46,10 +46,11 @@ const BrandingForm = () => {
           defaultValue={BrandingStyle.Logo_Slogan}
           render={({ field: { onChange, value, name } }) => (
             <RadioGroup value={value} name={name} onChange={onChange}>
-              <Radio value={BrandingStyle.Logo_Slogan}>
-                {t('sign_in_exp.branding.styles.logo_slogan')}
-              </Radio>
-              <Radio value={BrandingStyle.Logo}>{t('sign_in_exp.branding.styles.logo')}</Radio>
+              <Radio
+                value={BrandingStyle.Logo_Slogan}
+                title="sign_in_exp.branding.styles.logo_slogan"
+              />
+              <Radio value={BrandingStyle.Logo} title="sign_in_exp.branding.styles.logo" />
             </RadioGroup>
           )}
         />