diff --git a/web/src/admin/admin-overview/cards/RecentEventsCard.ts b/web/src/admin/admin-overview/cards/RecentEventsCard.ts
index 50978de655..df9ceeb786 100644
--- a/web/src/admin/admin-overview/cards/RecentEventsCard.ts
+++ b/web/src/admin/admin-overview/cards/RecentEventsCard.ts
@@ -88,7 +88,8 @@ export class RecentEventsCard extends Table<Event> {
         }
 
         return super.renderEmpty(
-            html`<ak-empty-state header=${msg("No Events found.")}>
+            html`<ak-empty-state
+                ><span slot="header">${msg("No Events found.")}</span>
                 <div slot="body">${msg("No matching events could be found.")}</div>
             </ak-empty-state>`,
         );
diff --git a/web/src/admin/applications/wizard/steps/ak-application-wizard-bindings-step.ts b/web/src/admin/applications/wizard/steps/ak-application-wizard-bindings-step.ts
index 65b954f441..e7285bce1c 100644
--- a/web/src/admin/applications/wizard/steps/ak-application-wizard-bindings-step.ts
+++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-bindings-step.ts
@@ -115,7 +115,8 @@ export class ApplicationWizardBindingsStep extends ApplicationWizardStep {
                     .columns=${COLUMNS}
                     .content=${[]}
                 ></ak-select-table>
-                <ak-empty-state header=${msg("No bound policies.")} icon="pf-icon-module">
+                <ak-empty-state icon="pf-icon-module"
+                    ><span slot="header">${msg("No bound policies.")} </span>
                     <div slot="body">${msg("No policies are currently bound to this object.")}</div>
                     <div slot="primary">
                         <button
diff --git a/web/src/admin/flows/BoundStagesList.ts b/web/src/admin/flows/BoundStagesList.ts
index 1e88fb219f..4bb35768af 100644
--- a/web/src/admin/flows/BoundStagesList.ts
+++ b/web/src/admin/flows/BoundStagesList.ts
@@ -135,7 +135,8 @@ export class BoundStagesList extends Table<FlowStageBinding> {
 
     renderEmpty(): TemplateResult {
         return super.renderEmpty(
-            html`<ak-empty-state header=${msg("No Stages bound")} icon="pf-icon-module">
+            html`<ak-empty-state icon="pf-icon-module">
+                <span slot="header">${msg("No Stages bound")}</span>
                 <div slot="body">${msg("No stages are currently bound to this flow.")}</div>
                 <div slot="primary">
                     <ak-stage-wizard
diff --git a/web/src/admin/policies/BoundPoliciesList.ts b/web/src/admin/policies/BoundPoliciesList.ts
index f92b0c87cd..51706ebba1 100644
--- a/web/src/admin/policies/BoundPoliciesList.ts
+++ b/web/src/admin/policies/BoundPoliciesList.ts
@@ -198,7 +198,8 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
 
     renderEmpty(): TemplateResult {
         return super.renderEmpty(
-            html`<ak-empty-state header=${msg("No Policies bound.")} icon="pf-icon-module">
+            html`<ak-empty-state icon="pf-icon-module"
+                ><span slot="header">${msg("No Policies bound.")}</span>
                 <div slot="body">${msg("No policies are currently bound to this object.")}</div>
                 <div slot="primary">
                     <ak-policy-wizard
diff --git a/web/src/components/events/ObjectChangelog.ts b/web/src/components/events/ObjectChangelog.ts
index 34c03462fa..653d5ee37f 100644
--- a/web/src/components/events/ObjectChangelog.ts
+++ b/web/src/components/events/ObjectChangelog.ts
@@ -94,7 +94,8 @@ export class ObjectChangelog extends Table<Event> {
 
     renderEmpty(): TemplateResult {
         return super.renderEmpty(
-            html`<ak-empty-state header=${msg("No Events found.")}>
+            html`<ak-empty-state
+                ><span slot="header">${msg("No Events found.")}</span>
                 <div slot="body">${msg("No matching events could be found.")}</div>
             </ak-empty-state>`,
         );
diff --git a/web/src/components/events/UserEvents.ts b/web/src/components/events/UserEvents.ts
index 27c369ada1..c10a12d832 100644
--- a/web/src/components/events/UserEvents.ts
+++ b/web/src/components/events/UserEvents.ts
@@ -66,7 +66,8 @@ export class UserEvents extends Table<Event> {
 
     renderEmpty(): TemplateResult {
         return super.renderEmpty(
-            html`<ak-empty-state header=${msg("No Events found.")}>
+            html`<ak-empty-state
+                ><span slot="header">${msg("No Events found.")}</span>
                 <div slot="body">${msg("No matching events could be found.")}</div>
             </ak-empty-state>`,
         );
diff --git a/web/src/elements/EmptyState.ts b/web/src/elements/EmptyState.ts
index 42d92c378d..24b7fbdab2 100644
--- a/web/src/elements/EmptyState.ts
+++ b/web/src/elements/EmptyState.ts
@@ -3,6 +3,7 @@ import { AKElement } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/Spinner";
 import { type SlottedTemplateResult, type Spread } from "@goauthentik/elements/types";
 import { spread } from "@open-wc/lit-helpers";
+import { SlotController } from "@patternfly/pfe-core/controllers/slot-controller.js";
 
 import { msg } from "@lit/localize";
 import { css, html, nothing } from "lit";
@@ -33,6 +34,8 @@ export class EmptyState extends AKElement implements IEmptyState {
     @property()
     header?: string;
 
+    slots = new SlotController(this, "header", "body", "primary");
+
     static get styles() {
         return [
             PFBase,
@@ -48,6 +51,12 @@ export class EmptyState extends AKElement implements IEmptyState {
     }
 
     render() {
+        const showHeader = this.loading || this.slots.hasSlotted("header");
+        const header = () =>
+            this.slots.hasSlotted("header")
+                ? html`<slot name="header"></slot>`
+                : html`<span>${msg("Loading")}</span>`;
+
         return html`<div class="pf-c-empty-state ${this.fullHeight && "pf-m-full-height"}">
             <div class="pf-c-empty-state__content">
                 ${this.loading
@@ -59,15 +68,17 @@ export class EmptyState extends AKElement implements IEmptyState {
                           "fa-question-circle"} pf-c-empty-state__icon"
                           aria-hidden="true"
                       ></i>`}
-                <h1 class="pf-c-title pf-m-lg">
-                    ${this.loading && this.header === undefined ? msg("Loading") : this.header}
-                </h1>
-                <div class="pf-c-empty-state__body">
-                    <slot name="body"></slot>
-                </div>
-                <div class="pf-c-empty-state__primary">
-                    <slot name="primary"></slot>
-                </div>
+                ${showHeader ? html` <h1 class="pf-c-title pf-m-lg">${header()}</h1>` : nothing}
+                ${this.slots.hasSlotted("body")
+                    ? html` <div class="pf-c-empty-state__body">
+                          <slot name="body"></slot>
+                      </div>`
+                    : nothing}
+                ${this.slots.hasSlotted("primary")
+                    ? html` <div class="pf-c-empty-state__primary">
+                          <slot name="primary"></slot>
+                      </div>`
+                    : nothing}
             </div>
         </div>`;
     }
diff --git a/web/src/elements/charts/Chart.ts b/web/src/elements/charts/Chart.ts
index f8cac84728..d5156a8950 100644
--- a/web/src/elements/charts/Chart.ts
+++ b/web/src/elements/charts/Chart.ts
@@ -200,7 +200,8 @@ export abstract class AKChart<T> extends AKElement {
             <div class="container">
                 ${this.error
                     ? html`
-                          <ak-empty-state header="${msg("Failed to fetch data.")}" icon="fa-times">
+                          <ak-empty-state icon="fa-times"
+                              ><span slot="header">${msg("Failed to fetch data.")}</span>
                               <p slot="body">${pluckErrorDetail(this.error)}</p>
                           </ak-empty-state>
                       `
diff --git a/web/src/elements/events/LogViewer.ts b/web/src/elements/events/LogViewer.ts
index 4a0958a5d1..5ae0aa91c2 100644
--- a/web/src/elements/events/LogViewer.ts
+++ b/web/src/elements/events/LogViewer.ts
@@ -40,7 +40,9 @@ export class LogViewer extends Table<LogEvent> {
 
     renderEmpty(): TemplateResult {
         return super.renderEmpty(
-            html`<ak-empty-state header=${msg("No log messages.")}> </ak-empty-state>`,
+            html`<ak-empty-state
+                ><span slot="header">${msg("No log messages.")}</span>
+            </ak-empty-state>`,
         );
     }
 
diff --git a/web/src/elements/notifications/NotificationDrawer.ts b/web/src/elements/notifications/NotificationDrawer.ts
index cfa58d819b..1372a2bc33 100644
--- a/web/src/elements/notifications/NotificationDrawer.ts
+++ b/web/src/elements/notifications/NotificationDrawer.ts
@@ -163,7 +163,8 @@ export class NotificationDrawer extends AKElement {
     }
 
     renderEmpty() {
-        return html`<ak-empty-state header=${msg("No notifications found.")}>
+        return html`<ak-empty-state
+            ><span slot="header">${msg("No notifications found.")}</span>
             <div slot="body">${msg("You don't have any notifications currently.")}</div>
         </ak-empty-state>`;
     }
diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts
index daa483bdaa..81b0c4ad68 100644
--- a/web/src/elements/table/Table.ts
+++ b/web/src/elements/table/Table.ts
@@ -288,7 +288,9 @@ export abstract class Table<T> extends AKElement implements TableLike {
         return html`<tr role="row">
             <td role="cell" colspan="25">
                 <div class="pf-l-bullseye">
-                    <ak-empty-state loading header=${msg("Loading")}></ak-empty-state>
+                    <ak-empty-state loading
+                        ><span slot="header">${msg("Loading")}</span></ak-empty-state
+                    >
                 </div>
             </td>
         </tr>`;
@@ -300,8 +302,9 @@ export abstract class Table<T> extends AKElement implements TableLike {
                 <td role="cell" colspan="8">
                     <div class="pf-l-bullseye">
                         ${inner ??
-                        html`<ak-empty-state header="${msg("No objects found.")}"
-                            ><div slot="primary">${this.renderObjectCreate()}</div>
+                        html`<ak-empty-state
+                            ><span slot="header">${msg("No objects found.")}</span> >
+                            <div slot="primary">${this.renderObjectCreate()}</div>
                         </ak-empty-state>`}
                     </div>
                 </td>
@@ -316,7 +319,8 @@ export abstract class Table<T> extends AKElement implements TableLike {
     renderError(): SlottedTemplateResult {
         if (!this.error) return nothing;
 
-        return html`<ak-empty-state header="${msg("Failed to fetch objects.")}" icon="fa-ban">
+        return html`<ak-empty-state icon="fa-ban"
+            ><span slot="header">${msg("Failed to fetch objects.")}</span>
             <div slot="body">${pluckErrorDetail(this.error)}</div>
         </ak-empty-state>`;
     }
diff --git a/web/src/elements/tests/EmptyState.test.ts b/web/src/elements/tests/EmptyState.test.ts
index e1ec6f1098..542bcdf301 100644
--- a/web/src/elements/tests/EmptyState.test.ts
+++ b/web/src/elements/tests/EmptyState.test.ts
@@ -19,7 +19,11 @@ describe("ak-empty-state", () => {
     });
 
     it("should render the default loader", async () => {
-        render(html`<ak-empty-state loading header=${msg("Loading")}> </ak-empty-state>`);
+        render(
+            html`<ak-empty-state loading
+                ><span slot="header">${msg("Loading")}</span>
+            </ak-empty-state>`,
+        );
 
         const empty = await $("ak-empty-state").$(">>>.pf-c-empty-state__icon");
         await expect(empty).toExist();
@@ -29,7 +33,11 @@ describe("ak-empty-state", () => {
     });
 
     it("should handle standard boolean", async () => {
-        render(html`<ak-empty-state loading header=${msg("Loading")}> </ak-empty-state>`);
+        render(
+            html`<ak-empty-state loading
+                ><span slot="header">${msg("Loading")}</span>
+            </ak-empty-state>`,
+        );
 
         const empty = await $("ak-empty-state").$(">>>.pf-c-empty-state__icon");
         await expect(empty).toExist();
@@ -39,7 +47,11 @@ describe("ak-empty-state", () => {
     });
 
     it("should render a static empty state", async () => {
-        render(html`<ak-empty-state header=${msg("No messages found")}> </ak-empty-state>`);
+        render(
+            html`<ak-empty-state
+                ><span slot="header">${msg("No messages found")}</span>
+            </ak-empty-state>`,
+        );
 
         const empty = await $("ak-empty-state").$(">>>.pf-c-empty-state__icon");
         await expect(empty).toExist();
@@ -51,7 +63,8 @@ describe("ak-empty-state", () => {
 
     it("should render a slotted message", async () => {
         render(
-            html`<ak-empty-state header=${msg("No messages found")}>
+            html`<ak-empty-state
+                ><span slot="header">${msg("No messages found")}</span>
                 <p slot="body">Try again with a different filter</p>
             </ak-empty-state>`,
         );