diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts
index 03896e1bad0..90309326579 100644
--- a/packages/calcite-components/src/components/panel/panel.e2e.ts
+++ b/packages/calcite-components/src/components/panel/panel.e2e.ts
@@ -11,6 +11,7 @@ import {
   renders,
   slots,
   t9n,
+  themed,
 } from "../../tests/commonTests";
 import { GlobalTestProps } from "../../tests/utils";
 import { CSS, SLOTS } from "./resources";
@@ -501,4 +502,13 @@ describe("calcite-panel", () => {
     expect(await container.isVisible()).toBe(true);
     expect(calcitePanelClose).toHaveReceivedEventTimes(0);
   });
+
+  describe("theme", () => {
+    themed(html`<calcite-panel collapsible closable>scrolling content</calcite-panel>`, {
+      "--calcite-panel-content-space": {
+        shadowSelector: `.${CSS.contentWrapper}`,
+        targetProp: "padding",
+      },
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index 0b7e786cd4c..e8c0367c885 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -3,6 +3,7 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
+ * @prop --calcite-panel-content-space: Specifies the padding of the component's content.
  * @prop --calcite-panel-footer-padding: Specifies the padding of the component's footer.
  * @prop --calcite-panel-header-border-block-end: Specifies the component header's block end border.
  */
@@ -167,7 +168,9 @@
   bg-background
   overflow-auto
   h-full
-  focus-base;
+  focus-base
+  relative;
+  padding: var(--calcite-panel-content-space, 0);
 }
 
 .content-wrapper:focus {