diff --git a/apps/skillnet-web/src/components/courses/CourseChatPanel.tsx b/apps/skillnet-web/src/components/courses/CourseChatPanel.tsx
index 077ce666..b26db147 100644
--- a/apps/skillnet-web/src/components/courses/CourseChatPanel.tsx
+++ b/apps/skillnet-web/src/components/courses/CourseChatPanel.tsx
@@ -45,7 +45,7 @@ export function CourseChatPanel({ open, onClose, courseId, courseTitle }: Course
           <motion.button
             type="button"
             aria-label={intl.formatMessage({ id: 'panel.close' })}
-            className="absolute inset-0 h-full w-full bg-slate-950/25 backdrop-blur-sm"
+            className="absolute inset-0 h-full w-full bg-black/40"
             {...backdrop}
             onClick={onClose}
           />
diff --git a/apps/skillnet-web/src/components/courses/ExplainModal.tsx b/apps/skillnet-web/src/components/courses/ExplainModal.tsx
index 0fb401e4..7011e64c 100644
--- a/apps/skillnet-web/src/components/courses/ExplainModal.tsx
+++ b/apps/skillnet-web/src/components/courses/ExplainModal.tsx
@@ -760,7 +760,7 @@ export function ExplainModal({
     // opened inside the card paints above it instead of behind it.
     <ExplainLayer zIndex={EXPLAIN_LAYER_MODAL}>
       {/* Scrim */}
-      <div className="fixed inset-0 z-[100] bg-slate-900/25 backdrop-blur-sm" onClick={onClose} />
+      <div className="fixed inset-0 z-[100] bg-black/40" onClick={onClose} />
 
       {/* Card */}
       <div className="fixed inset-0 z-[101] flex items-center justify-center p-5 pointer-events-none">
diff --git a/apps/skillnet-web/src/components/layout/Sidebar.tsx b/apps/skillnet-web/src/components/layout/Sidebar.tsx
index fbb1dd72..0cf77c80 100644
--- a/apps/skillnet-web/src/components/layout/Sidebar.tsx
+++ b/apps/skillnet-web/src/components/layout/Sidebar.tsx
@@ -339,7 +339,7 @@ export function Sidebar({ role = 'employee' }: { role?: SidebarRole }) {
             <motion.div
               {...backdrop}
               style={{ opacity: backdropOpacity }}
-              className="fixed inset-0 z-30 bg-black/10 backdrop-blur-sm md:hidden"
+              className="fixed inset-0 z-30 bg-black/40 md:hidden"
               onClick={closeMobile}
             />
             <motion.aside