diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
index 6d23836d51f..1d5d4fa9339 100644
--- a/packages/calcite-components/src/components/dialog/dialog.scss
+++ b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -115,14 +115,11 @@
 }
 
 calcite-panel {
+  --calcite-panel-content-space: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));
   --calcite-panel-footer-padding: var(--calcite-dialog-footer-space);
   --calcite-panel-header-border-block-end: var(--calcite-border-width-sm) solid var(--calcite-dialog-border-color);
 }
 
-.content {
-  padding: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));
-}
-
 .dialog {
   @apply pointer-events-none
     float-none
diff --git a/packages/calcite-components/src/components/dialog/dialog.stories.ts b/packages/calcite-components/src/components/dialog/dialog.stories.ts
index d89822b27da..97670089cc0 100644
--- a/packages/calcite-components/src/components/dialog/dialog.stories.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.stories.ts
@@ -360,6 +360,27 @@ const themedStyle = html`--calcite-dialog-scrim-background-color: purple; --calc
 --calcite-dialog-size-y: 400px; --calcite-dialog-footer-space: 50px; --calcite-dialog-border-color: pink;
 --calcite-dialog-content-space: 50px; --calcite-dialog-offset-x: 50px; --calcite-dialog-offset-y: -30px;`;
 
+export const withShellInside = (): string =>
+  html`<calcite-dialog open modal heading="heading" description="description" scale="m" width-scale="l">
+    <calcite-shell>
+      <calcite-shell-panel slot="panel-start">
+        <calcite-action-bar slot="action-bar" expanded>
+          <calcite-action-group>
+            <calcite-action text-enabled text="Action 1"></calcite-action>
+            <calcite-action text-enabled text="Action 2"></calcite-action>
+            <calcite-action text-enabled text="Action 3"></calcite-action>
+            <calcite-action text-enabled text="Action 4"></calcite-action>
+          </calcite-action-group>
+        </calcite-action-bar>
+      </calcite-shell-panel>
+      <calcite-shell-center-row>
+        <calcite-button>button</calcite-button>
+      </calcite-shell-center-row>
+    </calcite-shell>
+    <calcite-button slot="footer-end" appearance="outline"> Cancel </calcite-button>
+    <calcite-button slot="footer-end"> Save </calcite-button>
+  </calcite-dialog>`;
+
 export const themed = (): string =>
   html`<calcite-dialog
     style="${themedStyle}"
diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index 94760d6b5ba..991f3b66d18 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -275,9 +275,7 @@ export class Dialog
                 <slot name={SLOTS.footerStart} slot={PANEL_SLOTS.footerStart} />
                 <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />
                 <slot name={SLOTS.footerEnd} slot={PANEL_SLOTS.footerEnd} />
-                <div class={CSS.content}>
-                  <slot />
-                </div>
+                <slot />
               </calcite-panel>
             </slot>
           </div>
diff --git a/packages/calcite-components/src/components/dialog/resources.ts b/packages/calcite-components/src/components/dialog/resources.ts
index 7265d7e5a75..db9ab305dcc 100644
--- a/packages/calcite-components/src/components/dialog/resources.ts
+++ b/packages/calcite-components/src/components/dialog/resources.ts
@@ -7,7 +7,6 @@ export const CSS = {
   container: "container",
   containerOpen: "container--open",
   containerEmbedded: "container--embedded",
-  content: "content",
 
   // these classes help apply the animation in phases to only set transform on open/close
   // this helps avoid a positioning issue for any floating-ui-owning children