diff --git a/src/app/base/components/AppSidePanel/AppSidePanel.tsx b/src/app/base/components/AppSidePanel/AppSidePanel.tsx
index 03e2100acb..a655bc0585 100644
--- a/src/app/base/components/AppSidePanel/AppSidePanel.tsx
+++ b/src/app/base/components/AppSidePanel/AppSidePanel.tsx
@@ -1,6 +1,7 @@
 import { useEffect, type ReactNode } from "react";
 
-import { Col, Row, useOnEscapePressed } from "@canonical/react-components";
+import { ContentSection } from "@canonical/maas-react-components";
+import { useOnEscapePressed } from "@canonical/react-components";
 import classNames from "classnames";
 import { useHistory } from "react-router-dom";
 
@@ -60,20 +61,18 @@ const AppSidePanelContent = ({
       data-testid="app-side-panel"
       id="aside-panel"
     >
-      <Row>
-        <Col size={12}>
-          {title ? (
-            <div className="row section-header">
-              <div className="col-12">
-                <h3 className="section-header__title u-flex--no-shrink p-heading--4">
-                  {title}
-                </h3>
-              </div>
+      <ContentSection>
+        {title ? (
+          <div className="row section-header section-header--side-panel">
+            <div className="col-12">
+              <h3 className="section-header__title u-flex--no-shrink p-heading--4">
+                {title}
+              </h3>
             </div>
-          ) : null}
-          {content}
-        </Col>
-      </Row>
+          </div>
+        ) : null}
+        {content}
+      </ContentSection>
     </aside>
   );
 };