diff --git a/web/src/elements/buttons/ModalButton.ts b/web/src/elements/buttons/ModalButton.ts
index 401639bff..dc58f8e4b 100644
--- a/web/src/elements/buttons/ModalButton.ts
+++ b/web/src/elements/buttons/ModalButton.ts
@@ -1,5 +1,4 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { unsafeHTML } from "lit-html/directives/unsafe-html";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFModalBox from "@patternfly/patternfly/components/ModalBox/modal-box.css";
@@ -22,9 +21,6 @@ export class ModalButton extends LitElement {
     @property({type: Boolean})
     open = false;
 
-    @property()
-    modal = "<slot name='modal'></slot>";
-
     static get styles(): CSSResult[] {
         return [PFBase, PFButton, PFModalBox, PFForm, PFFormControl, PFBullseye, PFBackdrop, PFPage, PFStack, PFCard, PFContent, AKGlobal].concat(
             css`
@@ -72,7 +68,7 @@ export class ModalButton extends LitElement {
     }
 
     renderModalInner(): TemplateResult {
-        return html`${unsafeHTML(this.modal)}`;
+        return html`<slot name='modal'></slot>`;
     }
 
     renderModal(): TemplateResult {
diff --git a/web/src/locales/en.po b/web/src/locales/en.po
index 2262c7d83..f623da8ad 100644
--- a/web/src/locales/en.po
+++ b/web/src/locales/en.po
@@ -496,7 +496,7 @@ msgstr "Clear cache"
 msgid "Click to change value"
 msgstr "Click to change value"
 
-#: src/pages/outposts/OutpostListPage.ts:112
+#: src/pages/outposts/OutpostDeploymentModal.ts:42
 msgid "Click to copy token"
 msgstr "Click to copy token"
 
@@ -520,7 +520,7 @@ msgstr "Client Secret"
 msgid "Client type"
 msgstr "Client type"
 
-#: src/pages/outposts/OutpostListPage.ts:126
+#: src/pages/outposts/OutpostDeploymentModal.ts:56
 msgid "Close"
 msgstr "Close"
 
@@ -674,8 +674,8 @@ msgstr "Copy Key"
 #: src/pages/flows/FlowListPage.ts:117
 #: src/pages/groups/GroupListPage.ts:91
 #: src/pages/groups/GroupListPage.ts:99
-#: src/pages/outposts/OutpostListPage.ts:136
-#: src/pages/outposts/OutpostListPage.ts:144
+#: src/pages/outposts/OutpostListPage.ts:102
+#: src/pages/outposts/OutpostListPage.ts:110
 #: src/pages/outposts/ServiceConnectionListPage.ts:110
 #: src/pages/outposts/ServiceConnectionListPage.ts:119
 #: src/pages/policies/BoundPoliciesList.ts:158
@@ -746,7 +746,7 @@ msgstr "Create Notification Rule"
 msgid "Create Notification Transport"
 msgstr "Create Notification Transport"
 
-#: src/pages/outposts/OutpostListPage.ts:139
+#: src/pages/outposts/OutpostListPage.ts:105
 msgid "Create Outpost"
 msgstr "Create Outpost"
 
@@ -1470,7 +1470,7 @@ msgstr "If left empty, authentik will try to extract the launch URL based on the
 msgid "If this flag is set, this Stage will jump to the next Stage when no Invitation is given. By default this Stage will cancel the Flow when no invitation is given."
 msgstr "If this flag is set, this Stage will jump to the next Stage when no Invitation is given. By default this Stage will cancel the Flow when no invitation is given."
 
-#: src/pages/outposts/OutpostListPage.ts:116
+#: src/pages/outposts/OutpostDeploymentModal.ts:46
 msgid "If your authentik Instance is using a self-signed certificate, set this value."
 msgstr "If your authentik Instance is using a self-signed certificate, set this value."
 
@@ -2105,7 +2105,7 @@ msgstr "Order"
 msgid "Outpost"
 msgstr "Outpost"
 
-#: src/pages/outposts/OutpostListPage.ts:95
+#: src/pages/outposts/OutpostDeploymentModal.ts:25
 msgid "Outpost Deployment Info"
 msgstr "Outpost Deployment Info"
 
@@ -3635,7 +3635,7 @@ msgstr "Version: {0}"
 msgid "View Deployment Info"
 msgstr "View Deployment Info"
 
-#: src/pages/outposts/OutpostListPage.ts:98
+#: src/pages/outposts/OutpostDeploymentModal.ts:28
 msgid "View deployment documentation"
 msgstr "View deployment documentation"
 
diff --git a/web/src/locales/pseudo-LOCALE.po b/web/src/locales/pseudo-LOCALE.po
index f7a613ed2..5ba014597 100644
--- a/web/src/locales/pseudo-LOCALE.po
+++ b/web/src/locales/pseudo-LOCALE.po
@@ -492,7 +492,7 @@ msgstr ""
 msgid "Click to change value"
 msgstr ""
 
-#: src/pages/outposts/OutpostListPage.ts:112
+#: src/pages/outposts/OutpostDeploymentModal.ts:42
 msgid "Click to copy token"
 msgstr ""
 
@@ -516,7 +516,7 @@ msgstr ""
 msgid "Client type"
 msgstr ""
 
-#: src/pages/outposts/OutpostListPage.ts:126
+#: src/pages/outposts/OutpostDeploymentModal.ts:56
 msgid "Close"
 msgstr ""
 
@@ -670,8 +670,8 @@ msgstr ""
 #: src/pages/flows/FlowListPage.ts:117
 #: src/pages/groups/GroupListPage.ts:91
 #: src/pages/groups/GroupListPage.ts:99
-#: src/pages/outposts/OutpostListPage.ts:136
-#: src/pages/outposts/OutpostListPage.ts:144
+#: src/pages/outposts/OutpostListPage.ts:102
+#: src/pages/outposts/OutpostListPage.ts:110
 #: src/pages/outposts/ServiceConnectionListPage.ts:110
 #: src/pages/outposts/ServiceConnectionListPage.ts:119
 #: src/pages/policies/BoundPoliciesList.ts:158
@@ -742,7 +742,7 @@ msgstr ""
 msgid "Create Notification Transport"
 msgstr ""
 
-#: src/pages/outposts/OutpostListPage.ts:139
+#: src/pages/outposts/OutpostListPage.ts:105
 msgid "Create Outpost"
 msgstr ""
 
@@ -1466,7 +1466,7 @@ msgstr ""
 msgid "If this flag is set, this Stage will jump to the next Stage when no Invitation is given. By default this Stage will cancel the Flow when no invitation is given."
 msgstr ""
 
-#: src/pages/outposts/OutpostListPage.ts:116
+#: src/pages/outposts/OutpostDeploymentModal.ts:46
 msgid "If your authentik Instance is using a self-signed certificate, set this value."
 msgstr ""
 
@@ -2101,7 +2101,7 @@ msgstr ""
 msgid "Outpost"
 msgstr ""
 
-#: src/pages/outposts/OutpostListPage.ts:95
+#: src/pages/outposts/OutpostDeploymentModal.ts:25
 msgid "Outpost Deployment Info"
 msgstr ""
 
@@ -3629,7 +3629,7 @@ msgstr ""
 msgid "View Deployment Info"
 msgstr ""
 
-#: src/pages/outposts/OutpostListPage.ts:98
+#: src/pages/outposts/OutpostDeploymentModal.ts:28
 msgid "View deployment documentation"
 msgstr ""
 
diff --git a/web/src/pages/outposts/OutpostDeploymentModal.ts b/web/src/pages/outposts/OutpostDeploymentModal.ts
new file mode 100644
index 000000000..7dcadab09
--- /dev/null
+++ b/web/src/pages/outposts/OutpostDeploymentModal.ts
@@ -0,0 +1,61 @@
+import { Outpost } from "authentik-api";
+import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { t } from "@lingui/macro";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFModalBox from "@patternfly/patternfly/components/ModalBox/modal-box.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import AKGlobal from "../../authentik.css";
+import { ifDefined } from "lit-html/directives/if-defined";
+import "../../elements/buttons/TokenCopyButton";
+
+@customElement("ak-outpost-deployment-modal")
+export class OutpostDeploymentModal extends LitElement {
+
+    @property({attribute: false})
+    outpost?: Outpost;
+
+    static get styles(): CSSResult[] {
+        return [PFBase, PFTitle, PFButton, PFModalBox, PFForm, PFFormControl, AKGlobal];
+    }
+
+    render(): TemplateResult {
+        return html`<div class="pf-c-modal-box__header">
+                <h1 class="pf-c-title pf-m-2xl">${t`Outpost Deployment Info`}</h1>
+            </div>
+            <div class="pf-c-modal-box__body">
+                <p><a target="_blank" href="https://goauthentik.io/docs/outposts/outposts/#deploy">${t`View deployment documentation`}</a></p>
+                <form class="pf-c-form">
+                    <div class="pf-c-form__group">
+                        <label class="pf-c-form__label" for="help-text-simple-form-name">
+                            <span class="pf-c-form__label-text">AUTHENTIK_HOST</span>
+                        </label>
+                        <input class="pf-c-form-control" readonly type="text" value="${document.location.origin}" />
+                    </div>
+                    <div class="pf-c-form__group">
+                        <label class="pf-c-form__label" for="help-text-simple-form-name">
+                            <span class="pf-c-form__label-text">AUTHENTIK_TOKEN</span>
+                        </label>
+                        <div>
+                            <ak-token-copy-button identifier="${ifDefined(this.outpost?.tokenIdentifier)}">
+                                ${t`Click to copy token`}
+                            </ak-token-copy-button>
+                        </div>
+                    </div>
+                    <h3>${t`If your authentik Instance is using a self-signed certificate, set this value.`}</h3>
+                    <div class="pf-c-form__group">
+                        <label class="pf-c-form__label" for="help-text-simple-form-name">
+                            <span class="pf-c-form__label-text">AUTHENTIK_INSECURE</span>
+                        </label>
+                        <input class="pf-c-form-control" readonly type="text" value="true" />
+                    </div>
+                </form>
+            </div>
+            <footer class="pf-c-modal-box__footer pf-m-align-left">
+                <a class="pf-c-button pf-m-primary">${t`Close`}</a>
+            </footer>`;
+    }
+
+}
diff --git a/web/src/pages/outposts/OutpostListPage.ts b/web/src/pages/outposts/OutpostListPage.ts
index cb2529af9..bb76ce057 100644
--- a/web/src/pages/outposts/OutpostListPage.ts
+++ b/web/src/pages/outposts/OutpostListPage.ts
@@ -7,8 +7,8 @@ import { TablePage } from "../../elements/table/TablePage";
 
 import "./OutpostHealth";
 import "./OutpostForm";
+import "./OutpostDeploymentModal";
 import "../../elements/buttons/SpinnerButton";
-import "../../elements/buttons/TokenCopyButton";
 import "../../elements/forms/DeleteForm";
 import "../../elements/forms/ModalForm";
 import { PAGE_SIZE } from "../../constants";
@@ -87,42 +87,8 @@ export class OutpostListPage extends TablePage<Outpost> {
                 <button slot="trigger" class="pf-c-button pf-m-tertiary">
                     ${t`View Deployment Info`}
                 </button>
-                <div slot="modal">
-                    <div class="pf-c-modal-box__header">
-                        <h1 class="pf-c-title pf-m-2xl" id="modal-title">${t`Outpost Deployment Info`}</h1>
-                    </div>
-                    <div class="pf-c-modal-box__body" id="modal-description">
-                        <p><a href="https://goauthentik.io/docs/outposts/outposts/#deploy">${t`View deployment documentation`}</a></p>
-                        <form class="pf-c-form">
-                            <div class="pf-c-form__group">
-                                <label class="pf-c-form__label" for="help-text-simple-form-name">
-                                    <span class="pf-c-form__label-text">AUTHENTIK_HOST</span>
-                                </label>
-                                <input class="pf-c-form-control" readonly type="text" value="${document.location.toString()}" />
-                            </div>
-                            <div class="pf-c-form__group">
-                                <label class="pf-c-form__label" for="help-text-simple-form-name">
-                                    <span class="pf-c-form__label-text">AUTHENTIK_TOKEN</span>
-                                </label>
-                                <div>
-                                    <ak-token-copy-button identifier="${ifDefined(item.tokenIdentifier)}">
-                                        ${t`Click to copy token`}
-                                    </ak-token-copy-button>
-                                </div>
-                            </div>
-                            <h3>${t`If your authentik Instance is using a self-signed certificate, set this value.`}</h3>
-                            <div class="pf-c-form__group">
-                                <label class="pf-c-form__label" for="help-text-simple-form-name">
-                                    <span class="pf-c-form__label-text">AUTHENTIK_INSECURE</span>
-                                </label>
-                                <input class="pf-c-form-control" readonly type="text" value="true" />
-                            </div>
-                        </form>
-                    </div>
-                    <footer class="pf-c-modal-box__footer pf-m-align-left">
-                        <a class="pf-c-button pf-m-primary">${t`Close`}</a>
-                    </footer>
-                </div>
+                <ak-outpost-deployment-modal .outpost=${item} slot="modal">
+                </ak-outpost-deployment-modal>
             </ak-modal-button>`,
         ];
     }