v

frontend/src/static/js/components/BulkActionCategoryModal.scss

@@ -54,7 +54,7 @@
 .category-modal-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   padding: 20px 24px;
   border-bottom: 1px solid #e0e0e0;
 
@@ -74,6 +74,19 @@
   }
 }
 
+.category-modal-subtitle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 6px;
+  font-size: 13px;
+  color: #777;
+
+  .dark_theme & {
+    color: #aaa;
+  }
+}
+
 .category-modal-close {
   background: none;
   border: none;

frontend/src/static/js/components/BulkActionCategoryModal.tsx

@@ -193,7 +193,14 @@ export const BulkActionCategoryModal: React.FC<BulkActionCategoryModalProps> = (
     <div className="category-modal-overlay">
       <div className="category-modal">
         <div className="category-modal-header">
-          <h2>{isLmsMode ? translateString('Share with Course') : translateString('Add / Remove from Categories')}</h2>
+          <div>
+            <h2>{isLmsMode ? translateString('Share with Course') : translateString('Add / Remove from Categories')}</h2>
+            {isLmsMode && (
+              <div className="category-modal-subtitle">
+                <span>{translateString('Students will get viewer permissions, while lecturers will get co-owner permissions (same as owner, but cannot delete the media)')}</span>
+              </div>
+            )}
+          </div>
           <button className="category-modal-close" onClick={onCancel}>
             ×
           </button>

frontend/src/static/js/components/BulkActionsDropdown.scss

@@ -40,6 +40,12 @@
       color: #666;
     }
 
+    optgroup {
+      color: #000;
+      font-weight: 700;
+      background-color: white;
+    }
+
     option {
       padding: 10px;
       font-weight: normal;
@@ -77,6 +83,11 @@
         color: #aaa;
       }
 
+      optgroup {
+        color: #fff;
+        background-color: #2a2a2a;
+      }
+
       option {
         background-color: #2a2a2a;
         color: #fff;