diff --git a/client/src/components/SidePanel/SidePanelGroup.tsx b/client/src/components/SidePanel/SidePanelGroup.tsx
index 14473127b5..171947cd6b 100644
--- a/client/src/components/SidePanel/SidePanelGroup.tsx
+++ b/client/src/components/SidePanel/SidePanelGroup.tsx
@@ -6,7 +6,7 @@ import { ResizablePanel, ResizablePanelGroup, useMediaQuery } from '@librechat/c
 import type { ImperativePanelHandle } from 'react-resizable-panels';
 import { useGetStartupConfig } from '~/data-provider';
 import ArtifactsPanel from './ArtifactsPanel';
-import { normalizeLayout } from '~/utils';
+import { normalizeLayout, cn } from '~/utils';
 import SidePanel from './SidePanel';
 import store from '~/store';
 
@@ -149,9 +149,9 @@ const SidePanelGroup = memo(
         )}
         {!hideSidePanel && interfaceConfig.sidePanel === true && (
           <button
-            aria-label="Close right side panel"
-            className={`nav-mask ${!isCollapsed ? 'active' : ''}`}
             onClick={handleClosePanel}
+            aria-label="Close right side panel"
+            className={cn('sidenav-mask', !isCollapsed ? 'active' : '')}
           />
         )}
       </>
diff --git a/client/src/mobile.css b/client/src/mobile.css
index da0058492e..20eeb5d1da 100644
--- a/client/src/mobile.css
+++ b/client/src/mobile.css
@@ -153,7 +153,7 @@
     right: 0;
     top: 0;
     bottom: 0;
-    background-color: rgba(86, 88, 105, 0.75);
+    background-color: rgba(7, 7, 7, 0.4);
     padding-left: 420px;
     padding-top: 12px;
     opacity: 0;