diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
index 45812453cbe..ead0111d5d8 100644
--- a/packages/calcite-components/src/components/dialog/dialog.scss
+++ b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -121,6 +121,10 @@ calcite-panel {
   --calcite-panel-background-color: var(--calcite-dialog-background-color, var(--calcite-color-foreground-1));
 }
 
+::slotted(calcite-panel) {
+  --calcite-panel-background-color: initial;
+}
+
 .dialog {
   @apply pointer-events-none
     m-6
diff --git a/packages/calcite-components/src/components/dialog/dialog.stories.ts b/packages/calcite-components/src/components/dialog/dialog.stories.ts
index 9a0ba8d918d..4bffdb0057b 100644
--- a/packages/calcite-components/src/components/dialog/dialog.stories.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.stories.ts
@@ -232,6 +232,12 @@ export const withCustomContent = (): string => html`
   </calcite-dialog>
 `;
 
+export const withCustomContentPanel = (): string => html`
+  <calcite-dialog open modal heading="heading" description="description" scale="m" width-scale="s">
+    <calcite-panel heading="Custom Panel" slot="${SLOTS.content}">Custom Panel Content!</calcite-panel>
+  </calcite-dialog>
+`;
+
 export const loading = (): string => html`
   <calcite-dialog loading open modal heading="heading" description="description" scale="m" width-scale="s">
     <p>Slotted content!</p>