diff --git a/app/components/ui/MultiCascader.tsx b/app/components/ui/MultiCascader.tsx
index e40bea0..9d57164 100644
--- a/app/components/ui/MultiCascader.tsx
+++ b/app/components/ui/MultiCascader.tsx
@@ -131,7 +131,7 @@ const MultiCascader: React.FC<MultiCascaderProps> = ({
                 toggleExpand(option.value);
               }}
             >
-              {isExpanded ? '▼' : '▶'}
+              <i className={isExpanded ? "ri-arrow-down-s-line" : "ri-arrow-right-s-line"}></i>
             </button>
           )}
         </div>
@@ -151,7 +151,15 @@ const MultiCascader: React.FC<MultiCascaderProps> = ({
   return (
     <div ref={containerRef} className="relative inline-block w-full">
       <div
-        className="border border-gray-300 rounded px-3 py-2 cursor-pointer bg-white flex justify-between items-center"
+        className="border border-gray-300 rounded px-3 py-2 cursor-pointer bg-white flex justify-between items-center focus:outline-none focus:ring-2 focus:ring-[var(--color-primary,#00684a)] focus:border-[var(--color-primary,#00684a)]"
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setVisible(!visible);
+          }
+        }}
         onClick={() => setVisible(!visible)}
       >
         <span className={selected.length === 0 ? 'text-gray-400' : ''}>
diff --git a/app/routes/cross-checking.upload.tsx b/app/routes/cross-checking.upload.tsx
index 258b5c1..ff7c69b 100644
--- a/app/routes/cross-checking.upload.tsx
+++ b/app/routes/cross-checking.upload.tsx
@@ -386,7 +386,7 @@ const TreeNodeCheckbox: React.FC<{
             onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && setExpanded(e => !e)}
             style={{ width: 16, display: "inline-block", textAlign: "center" }}
           >
-            {expanded ? "▼" : "▶"}
+            <i className={expanded ? "ri-arrow-down-s-line" : "ri-arrow-right-s-line"}></i>
           </span>
         )}
         <input