diff --git a/packages/quarkd/src/popupextra/index.tsx b/packages/quarkd/src/popupextra/index.tsx
index 4748d957..d51fd041 100644
--- a/packages/quarkd/src/popupextra/index.tsx
+++ b/packages/quarkd/src/popupextra/index.tsx
@@ -150,14 +150,16 @@ class QuarkPopupExtra extends QuarkElement {
               this.title || this.subtitle ? "quark-popup-extra-header" : ""
             }
           >
-            <div className="quark-popup-extra-toper">
-              <slot name="title">
+            <slot name="title">
+              <div className="quark-popup-extra-toper">
                 <div className="quark-popup-extra-title">{this.title}</div>
-              </slot>
-            </div>
-            {this.subtitle && (
-              <div className="quark-popup-extra-subtitle">{this.subtitle}</div>
-            )}
+              </div>
+              {this.subtitle && (
+                <div className="quark-popup-extra-subtitle">
+                  {this.subtitle}
+                </div>
+              )}
+            </slot>
           </header>
           <div
             className={this.contentClassNames}