diff --git a/web/app/components/app/app-access-control/access-control-dialog.tsx b/web/app/components/app/app-access-control/access-control-dialog.tsx
index e3e013fbd4..72dd33c72e 100644
--- a/web/app/components/app/app-access-control/access-control-dialog.tsx
+++ b/web/app/components/app/app-access-control/access-control-dialog.tsx
@@ -47,7 +47,7 @@ const AccessControlDialog = ({
           >
             <Dialog.Panel className={cn('relative h-auto min-h-[323px] w-[600px] overflow-y-auto rounded-2xl bg-components-panel-bg p-0 shadow-xl transition-all', className)}>
               <div onClick={() => close()} className="absolute right-5 top-5 z-10 flex h-8 w-8 cursor-pointer items-center justify-center">
-                <RiCloseLine className='h-5 w-5' />
+                <RiCloseLine className='h-5 w-5 text-text-tertiary' />
               </div>
               {children}
             </Dialog.Panel>
diff --git a/web/app/components/app/app-access-control/index.tsx b/web/app/components/app/app-access-control/index.tsx
index 13faaea957..e8e2358e0e 100644
--- a/web/app/components/app/app-access-control/index.tsx
+++ b/web/app/components/app/app-access-control/index.tsx
@@ -72,7 +72,7 @@ export default function AccessControl(props: AccessControlProps) {
       </div>
       <div className='flex flex-col gap-y-1 px-6 pb-3'>
         <div className='leading-6'>
-          <p className='system-sm-medium'>{t('app.accessControlDialog.accessLabel')}</p>
+          <p className='system-sm-medium text-text-tertiary'>{t('app.accessControlDialog.accessLabel')}</p>
         </div>
         <AccessControlItem type={AccessMode.ORGANIZATION}>
           <div className='flex items-center p-3'>