diff --git a/typescript/packages/common-os-ui/index.html b/typescript/packages/common-os-ui/index.html
index 2a171f83f..4c36788c6 100644
--- a/typescript/packages/common-os-ui/index.html
+++ b/typescript/packages/common-os-ui/index.html
@@ -47,11 +47,11 @@
             <os-charm-row icon="cloud" text="Weather"> </os-charm-row>
             <os-charm-row icon="folder" text="CHEM131"> </os-charm-row>
           </os-charm-row-group>
-          <os-sidebar-group>
+          <os-sidebar-group safearea>
             <div slot="label">Notes</div>
             <os-rich-text-editor></os-rich-text-editor>
           </os-sidebar-group>
-          <os-sidebar-group>
+          <os-sidebar-group safearea>
             <div slot="label">Title</div>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
diff --git a/typescript/packages/common-os-ui/src/components/os-sidebar-group.ts b/typescript/packages/common-os-ui/src/components/os-sidebar-group.ts
index 83c18063c..8b12fe60e 100644
--- a/typescript/packages/common-os-ui/src/components/os-sidebar-group.ts
+++ b/typescript/packages/common-os-ui/src/components/os-sidebar-group.ts
@@ -15,13 +15,23 @@ export class OsSidebarGroup extends LitElement {
       .sgroup {
         gap: var(--u);
       }
+
+      .sgroup-heading {
+        padding-left: var(--pad);
+        padding-right: var(--pad);
+      }
+
+      :host([safearea]) .sgroup-content {
+        padding-left: var(--pad);
+        padding-right: var(--pad);
+      }
     `,
   ];
 
   override render() {
     return html`
       <aside class="sgroup vstack">
-        <heading class="sgroup-heading pad-h"
+        <heading class="sgroup-heading"
           ><slot class="label" name="label"></slot
         ></heading>
         <div class="sgroup-content"><slot></slot></div>