diff --git a/less/documentDB.less b/less/documentDB.less
index 9dbbdeb4b..f76419190 100644
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -1740,7 +1740,7 @@ input::-webkit-calendar-picker-indicator {
   flex: 1;
   padding-left: 34px;
   padding-right: 34px;
-  color: @BaseDark;
+  color: var(--colorNeutralForeground1);
   overflow-y: auto;
   overflow-x: auto;
   margin: (2 * @MediumSpace) 0px;
@@ -1749,7 +1749,7 @@ input::-webkit-calendar-picker-indicator {
 .contextual-pane .panelMainContent {
   padding-left: 34px;
   padding-right: 34px;
-  color: @BaseDark;
+  // color: @BaseDark;
   margin: (2 * @MediumSpace) 0px;
 }
 
diff --git a/less/hostedexplorer.less b/less/hostedexplorer.less
index 86186d366..a3de43b5a 100644
--- a/less/hostedexplorer.less
+++ b/less/hostedexplorer.less
@@ -255,7 +255,7 @@ body {
                 flex: 1;
                 padding-left: 34px;
                 padding-right: 34px;
-                color: @BaseDark;
+                color: var(--colorNeutralForeground1);
                 overflow-y: auto;
                 overflow-x: hidden;
                 margin: (2 * @MediumSpace) 0px;
diff --git a/src/Explorer/Panes/PanelComponent.less b/src/Explorer/Panes/PanelComponent.less
index 640f4ff9f..a42580737 100644
--- a/src/Explorer/Panes/PanelComponent.less
+++ b/src/Explorer/Panes/PanelComponent.less
@@ -4,9 +4,8 @@
   display: flex;
   flex-direction: column;
   min-height: 100%;
-  background-color: var(--colorNeutralBackground1, @BaseLight);
-  color: var(--colorNeutralForeground1, @BaseHigh);
-
+  color: var(--colorNeutralForeground2);
+  background-color: var(--colorNeutralBackground1);
   .panelMainContent {
     flex-grow: 1;
     padding: 0 34px;
@@ -27,19 +26,19 @@
       margin: auto 0 auto @SmallSpace;
       cursor: default;
       vertical-align: middle;
-      color: var(--colorNeutralForeground1, @BaseHigh);
+      color: var(--colorNeutralForeground1);
     }
 
     .panelTextBold {
       font-weight: 600;
       line-height: 20px;
-      color: var(--colorNeutralForeground1, @BaseHigh);
+      color: var(--colorNeutralForeground1);
     }
 
     .panelTextField {
       font-size: @mediumFontSize;
       border: 1px solid var(--colorNeutralStroke1, #605e5c);
-      color: var(--colorNeutralForeground1, @BaseHigh);
+      color: var(--colorNeutralForeground1);
       background-color: var(--colorNeutralBackground2, @BaseLight);
       padding: 4px 10px;
       width: @newCollectionPaneInputWidth;
@@ -270,5 +269,31 @@
 }
 
 .panelSeparator::before {
-  background-color: #edebe9;
+  background-color: var(--colorNeutralStroke1);
+}
+
+.dark-theme-panel {
+  &.ms-Panel {
+    .ms-Panel-main {
+      background-color: var(--colorNeutralBackground1);
+    }
+    
+    .ms-Panel-overlay {
+      background-color: var(--overlayBackground);
+    }
+    
+    .ms-Panel-content {
+      background-color: var(--colorNeutralBackground1);
+    }
+  }
+}
+
+:global {
+  .ms-Panel-root {
+    background-color: transparent;
+  }
+
+  .ms-Panel-overlay {
+    background-color: var(--overlayBackground);
+  }
 }
\ No newline at end of file
diff --git a/src/Explorer/Panes/PanelContainerComponent.tsx b/src/Explorer/Panes/PanelContainerComponent.tsx
index 5795ec941..d52cc77c1 100644
--- a/src/Explorer/Panes/PanelContainerComponent.tsx
+++ b/src/Explorer/Panes/PanelContainerComponent.tsx
@@ -62,13 +62,48 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
         closeButtonAriaLabel={`Close ${this.props.headerText}`}
         customWidth={this.props.panelWidth ? this.props.panelWidth : "440px"}
         headerClassName="panelHeader"
+        className="dark-theme-panel"
         onRenderNavigationContent={this.props.onRenderNavigationContent}
         isFooterAtBottom={true}
         styles={{
-          navigation: { borderBottom: "1px solid #cccccc" },
-          content: { padding: 0 },
-          header: { padding: "0 0 8px 34px" },
-          commands: { marginTop: 8, paddingTop: 0 },
+          navigation: { 
+            borderBottom: "1px solid var(--colorNeutralStroke1)",
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)"
+          },
+          content: { 
+            padding: 0,
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)"
+          },
+          header: { 
+            padding: "0 0 8px 34px",
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)"
+          },
+          commands: { 
+            marginTop: 8, 
+            paddingTop: 0,
+            backgroundColor: "var(--colorNeutralBackground1)"
+          },
+          root: {
+          },
+          overlay: {
+            backgroundColor: "var(--overlayBackground)"
+          },
+          main: {
+            backgroundColor: "var(--colorNeutralBackground1)"
+          },
+          scrollableContent: {
+            backgroundColor: "var(--colorNeutralBackground1)"
+          },
+          footerInner: {
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)"
+          },
+          closeButton: {
+            color: "var(--colorNeutralForeground1)"
+          }
         }}
         style={{ height: this.state.height }}
       >
diff --git a/src/Main.tsx b/src/Main.tsx
index 3468e742b..25e186df6 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -64,6 +64,7 @@ import "./Shared/appInsights";
 import { useConfig } from "./hooks/useConfig";
 import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
 import { isDarkMode } from "./hooks/useTheme";
+import "./less/ThemeSystem.less";
 // Initialize icons before React is loaded
 initializeIcons(undefined, { disableWarnings: true });
 
diff --git a/src/less/ThemeSystem.less b/src/less/ThemeSystem.less
index 373f90765..59bdc9e2f 100644
--- a/src/less/ThemeSystem.less
+++ b/src/less/ThemeSystem.less
@@ -1,7 +1,4 @@
-@import "Common/Constants";
-
-// Theme System
-// Define CSS Custom Properties
+@import "../../less/Common/Constants";
 :root {
   // Light theme variables
   --colorNeutralBackground1: @BaseLight;
@@ -14,6 +11,7 @@
   --colorCompoundBrandStroke1: @SelectionColor;
   --colorBrandForeground1: @LinkColor;
   --colorPaletteRedForeground1: @ErrorColor;
+  --overlayBackground: rgba(0, 0, 0, 0.4);
 }
 
 // Dark theme variables
@@ -28,6 +26,7 @@ body.isDarkMode {
   --colorCompoundBrandStroke1: #4db6e8;
   --colorBrandForeground1: #4db6e8;
   --colorPaletteRedForeground1: #f25d5d;
+  --overlayBackground: rgba(0, 0, 0, 0.4);
 }
 
 // Theme Mixins
@@ -61,7 +60,6 @@ body.isDarkMode {
   }
 }
 
-// Global Fluent UI input overrides
 :global {
   .ms-TextField {
     .ms-TextField-fieldGroup {
@@ -72,13 +70,11 @@ body.isDarkMode {
   }
 }
 
-// Common component theme mixins
 .theme-panel() {
   .theme-background();
   .theme-border();
 }
 
-// Override Fluent UI focus states
 :global {
   .ms-Fabric--isFocusVisible .ms-Button:focus::after,
   .ms-Fabric--isFocusVisible .ms-TextField:focus::after,