diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index 0db7ad3b4e..9fac64c301 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -246,9 +246,9 @@ const AppPublisher = ({
                   }}>
                   <div className='grow flex items-center gap-x-1.5 pr-1'>
                     <RiLockLine className='w-4 h-4 text-text-secondary shrink-0' />
-                    {appDetail?.access_mode === AccessMode.ORGANIZATION && <p className='system-xs-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.organization')}</p>}
-                    {appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && <p className='system-xs-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.specific')}</p>}
-                    {appDetail?.access_mode === AccessMode.PUBLIC && <p className='system-xs-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.anyone')}</p>}
+                    {appDetail?.access_mode === AccessMode.ORGANIZATION && <p className='system-sm-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.organization')}</p>}
+                    {appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && <p className='system-sm-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.specific')}</p>}
+                    {appDetail?.access_mode === AccessMode.PUBLIC && <p className='system-sm-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.anyone')}</p>}
                   </div>
                   {!isAppAccessSet && <p className='shrink-0 system-xs-regular text-text-tertiary'>{t('app.publishApp.notSet')}</p>}
                   <div className='shrink-0 w-4 h-4 flex items-center justify-center'>
diff --git a/web/app/components/app/app-publisher/suggested-action.tsx b/web/app/components/app/app-publisher/suggested-action.tsx
index 171e146175..368ff6d2c5 100644
--- a/web/app/components/app/app-publisher/suggested-action.tsx
+++ b/web/app/components/app/app-publisher/suggested-action.tsx
@@ -8,22 +8,30 @@ export type SuggestedActionProps = PropsWithChildren<HTMLProps<HTMLAnchorElement
   disabled?: boolean
 }>
 
-const SuggestedAction = ({ icon, link, disabled, children, className, ...props }: SuggestedActionProps) => (
-  <a
-    href={disabled ? undefined : link}
-    target='_blank'
-    rel='noreferrer'
-    className={classNames(
-      'flex-1 flex justify-start items-center gap-2 h-[34px] px-2.5 bg-gray-100 rounded-lg transition-colors [&:not(:first-child)]:mt-1',
-      disabled ? 'shadow-xs opacity-30 cursor-not-allowed' : 'hover:bg-primary-50 hover:text-primary-600 cursor-pointer',
-      className,
-    )}
-    {...props}
-  >
-    <div className='relative w-4 h-4'>{icon}</div>
-    <div className='grow shrink basis-0 text-[13px] font-medium leading-[18px]'>{children}</div>
-    <ArrowUpRight />
-  </a>
-)
+const SuggestedAction = ({ icon, link, disabled, children, className, onClick, ...props }: SuggestedActionProps) => {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (disabled)
+      return
+    onClick?.(e)
+  }
+  return (
+    <a
+      href={disabled ? undefined : link}
+      target='_blank'
+      rel='noreferrer'
+      className={classNames(
+        'flex-1 flex justify-start items-center text-text-secondary gap-2 h-[34px] px-2.5 bg-gray-100 rounded-lg transition-colors [&:not(:first-child)]:mt-1',
+        disabled ? 'shadow-xs opacity-30 cursor-not-allowed' : 'hover:bg-primary-50 hover:text-primary-600 cursor-pointer',
+        className,
+      )}
+      onClick={handleClick}
+      {...props}
+    >
+      <div className='relative w-4 h-4'>{icon}</div>
+      <div className='grow shrink basis-0 text-[13px] font-medium leading-[18px]'>{children}</div>
+      <ArrowUpRight />
+    </a>
+  )
+}
 
 export default SuggestedAction