From 03e0eecb1de4e3316d464b0f58f525aee3c418cf Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Fri, 26 Nov 2021 14:08:45 +0100
Subject: [PATCH] web/admin: redesign provider pages to provide more info

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 .vscode/settings.json                         |   3 +-
 locale/en/LC_MESSAGES/django.po               |  18 +-
 web/src/elements/Tabs.ts                      |   2 +-
 web/src/elements/events/ObjectChangelog.ts    |   2 +-
 web/src/locales/en.po                         |  80 +++-
 web/src/locales/fr_FR.po                      |  80 +++-
 web/src/locales/pseudo-LOCALE.po              |  80 +++-
 .../pages/outposts/OutpostDeploymentModal.ts  |   8 +-
 web/src/pages/providers/ProviderViewPage.ts   |  36 +-
 .../providers/ldap/LDAPProviderViewPage.ts    | 229 ++++++-----
 .../oauth2/OAuth2ProviderViewPage.ts          |  81 +---
 .../providers/proxy/ProxyProviderViewPage.ts  | 373 ++++++++++--------
 .../providers/saml/SAMLProviderViewPage.ts    | 320 ++++++++-------
 .../docs/providers/proxy/_nginx_ingress.md    |   4 +-
 .../providers/proxy/_nginx_proxy_manager.md   |   3 +-
 .../docs/providers/proxy/_nginx_standalone.md |   3 +-
 .../docs/providers/proxy/_traefik_ingress.md  |   6 +-
 17 files changed, 783 insertions(+), 545 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 90277c2e6..939403a9f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -10,7 +10,8 @@
         "plex",
         "saml",
         "totp",
-        "webauthn"
+        "webauthn",
+        "traefik"
     ],
     "python.linting.pylintEnabled": true,
     "todo-tree.tree.showCountsInTree": true,
diff --git a/locale/en/LC_MESSAGES/django.po b/locale/en/LC_MESSAGES/django.po
index 8da1a953e..8ad7c7631 100644
--- a/locale/en/LC_MESSAGES/django.po
+++ b/locale/en/LC_MESSAGES/django.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2021-11-24 08:54+0000\n"
+"POT-Creation-Date: 2021-11-26 12:54+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -31,11 +31,11 @@ msgstr ""
 msgid "Validation Error"
 msgstr ""
 
-#: authentik/core/api/providers.py:88
+#: authentik/core/api/providers.py:89
 msgid "SAML Provider from Metadata"
 msgstr ""
 
-#: authentik/core/api/providers.py:89
+#: authentik/core/api/providers.py:90
 msgid "Create a SAML Provider by importing its Metadata."
 msgstr ""
 
@@ -380,12 +380,12 @@ msgstr ""
 msgid "Managed by authentik"
 msgstr ""
 
-#: authentik/outposts/api/service_connections.py:130
+#: authentik/outposts/api/service_connections.py:131
 msgid ""
 "You can only use an empty kubeconfig when connecting to a local cluster."
 msgstr ""
 
-#: authentik/outposts/api/service_connections.py:138
+#: authentik/outposts/api/service_connections.py:139
 msgid "Invalid kubeconfig"
 msgstr ""
 
@@ -1393,19 +1393,19 @@ msgstr ""
 msgid "Email Stages"
 msgstr ""
 
-#: authentik/stages/email/stage.py:104
+#: authentik/stages/email/stage.py:103
 msgid "Invalid token"
 msgstr ""
 
-#: authentik/stages/email/stage.py:108
+#: authentik/stages/email/stage.py:107
 msgid "Successfully verified Email."
 msgstr ""
 
-#: authentik/stages/email/stage.py:115 authentik/stages/email/stage.py:137
+#: authentik/stages/email/stage.py:114 authentik/stages/email/stage.py:136
 msgid "No pending user."
 msgstr ""
 
-#: authentik/stages/email/stage.py:127
+#: authentik/stages/email/stage.py:126
 msgid "Email sent."
 msgstr ""
 
diff --git a/web/src/elements/Tabs.ts b/web/src/elements/Tabs.ts
index 44abcd6d7..0de0f4bb1 100644
--- a/web/src/elements/Tabs.ts
+++ b/web/src/elements/Tabs.ts
@@ -14,7 +14,7 @@ import { getURLParams, updateURLParams } from "./router/RouteMatch";
 @customElement("ak-tabs")
 export class Tabs extends LitElement {
     @property()
-    pageIdentifier: string = "page";
+    pageIdentifier = "page";
 
     @property()
     currentPage?: string;
diff --git a/web/src/elements/events/ObjectChangelog.ts b/web/src/elements/events/ObjectChangelog.ts
index 11672a47a..98fb2e4bc 100644
--- a/web/src/elements/events/ObjectChangelog.ts
+++ b/web/src/elements/events/ObjectChangelog.ts
@@ -29,7 +29,7 @@ export class ObjectChangelog extends Table<Event> {
     @property()
     targetModelApp?: string;
 
-    private _targetModelName: string = "";
+    private _targetModelName = "";
 
     @property()
     set targetModelName(value: string) {
diff --git a/web/src/locales/en.po b/web/src/locales/en.po
index 3c147f89b..c43236a4c 100644
--- a/web/src/locales/en.po
+++ b/web/src/locales/en.po
@@ -566,6 +566,11 @@ msgstr "Bearer Token"
 msgid "Bind CN"
 msgstr "Bind CN"
 
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
+msgid "Bind DN"
+msgstr "Bind DN"
+
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 msgid "Bind Password"
 msgstr "Bind Password"
@@ -662,6 +667,7 @@ msgid "Certificate"
 msgstr "Certificate"
 
 #: src/pages/crypto/CertificateKeyPairListPage.ts
+#: src/pages/providers/saml/SAMLProviderViewPage.ts
 msgid "Certificate Fingerprint (SHA1)"
 msgstr "Certificate Fingerprint (SHA1)"
 
@@ -711,10 +717,7 @@ msgstr "Change your password"
 
 #: src/pages/applications/ApplicationViewPage.ts
 #: src/pages/flows/FlowViewPage.ts
-#: src/pages/providers/ldap/LDAPProviderViewPage.ts
-#: src/pages/providers/oauth2/OAuth2ProviderViewPage.ts
-#: src/pages/providers/proxy/ProxyProviderViewPage.ts
-#: src/pages/providers/saml/SAMLProviderViewPage.ts
+#: src/pages/providers/ProviderViewPage.ts
 #: src/pages/sources/ldap/LDAPSourceViewPage.ts
 #: src/pages/sources/oauth/OAuthSourceViewPage.ts
 #: src/pages/sources/plex/PlexSourceViewPage.ts
@@ -755,6 +758,10 @@ msgstr "Check outposts."
 msgid "Check status"
 msgstr "Check status"
 
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
+msgid "Check the IP of the Kubernetes service, or"
+msgstr "Check the IP of the Kubernetes service, or"
+
 #: 
 #~ msgid "Check your Emails for a password reset link."
 #~ msgstr "Check your Emails for a password reset link."
@@ -947,6 +954,10 @@ msgstr "Configure what data should be used as unique User Identifier. For most c
 msgid "Connect"
 msgstr "Connect"
 
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
+msgid "Connect to the LDAP Server on port 389:"
+msgstr "Connect to the LDAP Server on port 389:"
+
 #: src/user/user-settings/UserSettingsPage.ts
 msgid "Connected services"
 msgstr "Connected services"
@@ -2027,7 +2038,12 @@ msgstr "Format: \"weeks=3;days=2;hours=3,seconds=2\"."
 msgid "Forward auth (domain level)"
 msgstr "Forward auth (domain level)"
 
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Forward auth (domain-level)"
+msgstr "Forward auth (domain-level)"
+
 #: src/pages/providers/proxy/ProxyProviderForm.ts
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
 msgid "Forward auth (single application)"
 msgstr "Forward auth (single application)"
 
@@ -2197,6 +2213,10 @@ msgstr "Hold control/command to select multiple items."
 msgid "How many attempts a user has before the flow is canceled. To lock the user out, use a reputation policy and a user_write stage."
 msgstr "How many attempts a user has before the flow is canceled. To lock the user out, use a reputation policy and a user_write stage."
 
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
+msgid "How to connect"
+msgstr "How to connect"
+
 #: src/elements/forms/DeleteBulkForm.ts
 #: src/pages/stages/invitation/InvitationListPage.ts
 #: src/pages/users/UserListPage.ts
@@ -2722,9 +2742,7 @@ msgstr "Message"
 msgid "Messages"
 msgstr "Messages"
 
-#: src/pages/providers/oauth2/OAuth2ProviderViewPage.ts
 #: src/pages/providers/saml/SAMLProviderImportForm.ts
-#: src/pages/providers/saml/SAMLProviderViewPage.ts
 #: src/pages/sources/saml/SAMLSourceViewPage.ts
 msgid "Metadata"
 msgstr "Metadata"
@@ -2900,6 +2918,18 @@ msgstr "Newly created users are added to this group, if a group is selected."
 msgid "Next stage"
 msgstr "Next stage"
 
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Nginx (Ingress)"
+msgstr "Nginx (Ingress)"
+
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Nginx (Proxy Manager)"
+msgstr "Nginx (Proxy Manager)"
+
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Nginx (standalone)"
+msgstr "Nginx (standalone)"
+
 #: src/elements/oauth/UserRefreshList.ts
 #: src/pages/applications/ApplicationCheckAccessForm.ts
 #: src/pages/crypto/CertificateKeyPairListPage.ts
@@ -3213,10 +3243,7 @@ msgstr "Outposts are deployments of authentik components to support different en
 
 #: src/interfaces/AdminInterface.ts
 #: src/pages/applications/ApplicationViewPage.ts
-#: src/pages/providers/ldap/LDAPProviderViewPage.ts
-#: src/pages/providers/oauth2/OAuth2ProviderViewPage.ts
-#: src/pages/providers/proxy/ProxyProviderViewPage.ts
-#: src/pages/providers/saml/SAMLProviderViewPage.ts
+#: src/pages/providers/ProviderViewPage.ts
 #: src/pages/sources/ldap/LDAPSourceViewPage.ts
 #: src/pages/sources/oauth/OAuthSourceViewPage.ts
 #: src/pages/sources/plex/PlexSourceViewPage.ts
@@ -3509,6 +3536,7 @@ msgstr "Providers"
 
 #: src/pages/outposts/OutpostForm.ts
 #: src/pages/providers/proxy/ProxyProviderForm.ts
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
 msgid "Proxy"
 msgstr "Proxy"
 
@@ -3649,6 +3677,10 @@ msgstr "Regular user"
 msgid "Related"
 msgstr "Related"
 
+#: src/pages/providers/saml/SAMLProviderViewPage.ts
+msgid "Related objects"
+msgstr "Related objects"
+
 #: src/pages/stages/user_logout/UserLogoutStageForm.ts
 msgid "Remove the user from the current session."
 msgstr "Remove the user from the current session."
@@ -3743,6 +3775,10 @@ msgstr "Run sync again"
 msgid "SAML Attribute Name"
 msgstr "SAML Attribute Name"
 
+#: src/pages/providers/saml/SAMLProviderViewPage.ts
+msgid "SAML Metadata"
+msgstr "SAML Metadata"
+
 #: src/pages/providers/saml/SAMLProviderForm.ts
 #: src/pages/sources/saml/SAMLSourceForm.ts
 msgid "SHA1"
@@ -3829,6 +3865,10 @@ msgstr "Scopes"
 msgid "Score"
 msgstr "Score"
 
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
+msgid "Search base"
+msgstr "Search base"
+
 #: src/pages/providers/ldap/LDAPProviderForm.ts
 msgid "Search group"
 msgstr "Search group"
@@ -4041,6 +4081,10 @@ msgstr "Set a custom HTTP-Basic Authentication header based on values from authe
 msgid "Set custom attributes using YAML or JSON."
 msgstr "Set custom attributes using YAML or JSON."
 
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Setup"
+msgstr "Setup"
+
 #: src/pages/events/RuleForm.ts
 #: src/pages/events/RuleListPage.ts
 msgid "Severity"
@@ -4754,6 +4798,10 @@ msgstr "Text (read-only): Simple Text input, but cannot be edited."
 msgid "Text: Simple Text input"
 msgstr "Text: Simple Text input"
 
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
+msgid "The Host IP of the docker host"
+msgstr "The Host IP of the docker host"
+
 #: src/elements/router/Router404.ts
 msgid "The URL \"{0}\" was not found."
 msgstr "The URL \"{0}\" was not found."
@@ -4974,6 +5022,18 @@ msgstr "Total users"
 msgid "Traditional authenticator"
 msgstr "Traditional authenticator"
 
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Traefik (Compose)"
+msgstr "Traefik (Compose)"
+
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Traefik (Ingress)"
+msgstr "Traefik (Ingress)"
+
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Traefik (Standalone)"
+msgstr "Traefik (Standalone)"
+
 #: src/pages/sources/saml/SAMLSourceForm.ts
 msgid "Transient"
 msgstr "Transient"
diff --git a/web/src/locales/fr_FR.po b/web/src/locales/fr_FR.po
index f6a5d9f7c..c86b66dfc 100644
--- a/web/src/locales/fr_FR.po
+++ b/web/src/locales/fr_FR.po
@@ -569,6 +569,11 @@ msgstr ""
 msgid "Bind CN"
 msgstr "Bind DN"
 
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
+msgid "Bind DN"
+msgstr ""
+
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 msgid "Bind Password"
 msgstr "Mot de passe"
@@ -664,6 +669,7 @@ msgid "Certificate"
 msgstr "Certificat"
 
 #: src/pages/crypto/CertificateKeyPairListPage.ts
+#: src/pages/providers/saml/SAMLProviderViewPage.ts
 msgid "Certificate Fingerprint (SHA1)"
 msgstr "Empreinte du certificat (SHA1)"
 
@@ -712,10 +718,7 @@ msgstr "Changer votre mot de pass"
 
 #: src/pages/applications/ApplicationViewPage.ts
 #: src/pages/flows/FlowViewPage.ts
-#: src/pages/providers/ldap/LDAPProviderViewPage.ts
-#: src/pages/providers/oauth2/OAuth2ProviderViewPage.ts
-#: src/pages/providers/proxy/ProxyProviderViewPage.ts
-#: src/pages/providers/saml/SAMLProviderViewPage.ts
+#: src/pages/providers/ProviderViewPage.ts
 #: src/pages/sources/ldap/LDAPSourceViewPage.ts
 #: src/pages/sources/oauth/OAuthSourceViewPage.ts
 #: src/pages/sources/plex/PlexSourceViewPage.ts
@@ -756,6 +759,10 @@ msgstr "Vérifier les avant-postes."
 msgid "Check status"
 msgstr "Vérifier le statut"
 
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
+msgid "Check the IP of the Kubernetes service, or"
+msgstr ""
+
 #: 
 #~ msgid "Check your Emails for a password reset link."
 #~ msgstr "Vérifiez vos courriels pour un lien de récupération de mot de passe."
@@ -945,6 +952,10 @@ msgstr "Configure quelle donnée utiliser pour l'identifiant unique utilisateur.
 msgid "Connect"
 msgstr "Connecter"
 
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
+msgid "Connect to the LDAP Server on port 389:"
+msgstr ""
+
 #: src/user/user-settings/UserSettingsPage.ts
 msgid "Connected services"
 msgstr "Services connectés"
@@ -2012,7 +2023,12 @@ msgstr "Format : \"weeks=3;days=2;hours=3,seconds=2\"."
 msgid "Forward auth (domain level)"
 msgstr "Transférer l'authentification (niveau domaine)"
 
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Forward auth (domain-level)"
+msgstr ""
+
 #: src/pages/providers/proxy/ProxyProviderForm.ts
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
 msgid "Forward auth (single application)"
 msgstr "Transférer l'authentification (application unique)"
 
@@ -2180,6 +2196,10 @@ msgstr "Garder ctrl/command enfoncé pour sélectionner de multiples éléments"
 msgid "How many attempts a user has before the flow is canceled. To lock the user out, use a reputation policy and a user_write stage."
 msgstr "Nombre de tentatives dont dispose un utilisateur avant que le flux ne soit annulé. Pour verrouiller l'utilisateur, utilisez une politique de réputation et une étape user_write."
 
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
+msgid "How to connect"
+msgstr ""
+
 #: src/elements/forms/DeleteBulkForm.ts
 #: src/pages/stages/invitation/InvitationListPage.ts
 #: src/pages/users/UserListPage.ts
@@ -2703,9 +2723,7 @@ msgstr "Message"
 msgid "Messages"
 msgstr "Messages"
 
-#: src/pages/providers/oauth2/OAuth2ProviderViewPage.ts
 #: src/pages/providers/saml/SAMLProviderImportForm.ts
-#: src/pages/providers/saml/SAMLProviderViewPage.ts
 #: src/pages/sources/saml/SAMLSourceViewPage.ts
 msgid "Metadata"
 msgstr "Métadonnées"
@@ -2880,6 +2898,18 @@ msgstr "Les utilisateurs nouvellement créés sont ajoutés à ce groupe, si un
 msgid "Next stage"
 msgstr "Étape suivante"
 
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Nginx (Ingress)"
+msgstr ""
+
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Nginx (Proxy Manager)"
+msgstr ""
+
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Nginx (standalone)"
+msgstr ""
+
 #: src/elements/oauth/UserRefreshList.ts
 #: src/pages/applications/ApplicationCheckAccessForm.ts
 #: src/pages/crypto/CertificateKeyPairListPage.ts
@@ -3187,10 +3217,7 @@ msgstr "Les avant-postes sont des déploiements de composants Authentik pour sup
 
 #: src/interfaces/AdminInterface.ts
 #: src/pages/applications/ApplicationViewPage.ts
-#: src/pages/providers/ldap/LDAPProviderViewPage.ts
-#: src/pages/providers/oauth2/OAuth2ProviderViewPage.ts
-#: src/pages/providers/proxy/ProxyProviderViewPage.ts
-#: src/pages/providers/saml/SAMLProviderViewPage.ts
+#: src/pages/providers/ProviderViewPage.ts
 #: src/pages/sources/ldap/LDAPSourceViewPage.ts
 #: src/pages/sources/oauth/OAuthSourceViewPage.ts
 #: src/pages/sources/plex/PlexSourceViewPage.ts
@@ -3479,6 +3506,7 @@ msgstr "Fournisseurs"
 
 #: src/pages/outposts/OutpostForm.ts
 #: src/pages/providers/proxy/ProxyProviderForm.ts
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
 msgid "Proxy"
 msgstr "Proxy"
 
@@ -3618,6 +3646,10 @@ msgstr "Utilisateur normal"
 msgid "Related"
 msgstr "Lié"
 
+#: src/pages/providers/saml/SAMLProviderViewPage.ts
+msgid "Related objects"
+msgstr ""
+
 #: src/pages/stages/user_logout/UserLogoutStageForm.ts
 msgid "Remove the user from the current session."
 msgstr "Supprimer l'utilisateur de la session actuelle."
@@ -3711,6 +3743,10 @@ msgstr "Relancer la synchro"
 msgid "SAML Attribute Name"
 msgstr "Nom d'attribut SAML"
 
+#: src/pages/providers/saml/SAMLProviderViewPage.ts
+msgid "SAML Metadata"
+msgstr ""
+
 #: src/pages/providers/saml/SAMLProviderForm.ts
 #: src/pages/sources/saml/SAMLSourceForm.ts
 msgid "SHA1"
@@ -3797,6 +3833,10 @@ msgstr "Portées"
 msgid "Score"
 msgstr "Note"
 
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
+msgid "Search base"
+msgstr ""
+
 #: src/pages/providers/ldap/LDAPProviderForm.ts
 msgid "Search group"
 msgstr "Rechercher un groupe"
@@ -4002,6 +4042,10 @@ msgstr "Définir un en-tête d'authentification HTTP-Basic personnalisé basé s
 msgid "Set custom attributes using YAML or JSON."
 msgstr "Définissez des attributs personnalisés via YAML ou JSON."
 
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Setup"
+msgstr ""
+
 #: src/pages/events/RuleForm.ts
 #: src/pages/events/RuleListPage.ts
 msgid "Severity"
@@ -4706,6 +4750,10 @@ msgstr ""
 msgid "Text: Simple Text input"
 msgstr "Texte : simple champ texte"
 
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
+msgid "The Host IP of the docker host"
+msgstr ""
+
 #: src/elements/router/Router404.ts
 msgid "The URL \"{0}\" was not found."
 msgstr "L'URL \"{0}\" est introuvable."
@@ -4916,6 +4964,18 @@ msgstr "Utilisateurs totaux"
 msgid "Traditional authenticator"
 msgstr "Authentificateur traditionnel"
 
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Traefik (Compose)"
+msgstr ""
+
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Traefik (Ingress)"
+msgstr ""
+
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Traefik (Standalone)"
+msgstr ""
+
 #: src/pages/sources/saml/SAMLSourceForm.ts
 msgid "Transient"
 msgstr "Transitoire"
diff --git a/web/src/locales/pseudo-LOCALE.po b/web/src/locales/pseudo-LOCALE.po
index 606fdd6cb..184fd3b1d 100644
--- a/web/src/locales/pseudo-LOCALE.po
+++ b/web/src/locales/pseudo-LOCALE.po
@@ -562,6 +562,11 @@ msgstr ""
 msgid "Bind CN"
 msgstr ""
 
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
+msgid "Bind DN"
+msgstr ""
+
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 msgid "Bind Password"
 msgstr ""
@@ -658,6 +663,7 @@ msgid "Certificate"
 msgstr ""
 
 #: src/pages/crypto/CertificateKeyPairListPage.ts
+#: src/pages/providers/saml/SAMLProviderViewPage.ts
 msgid "Certificate Fingerprint (SHA1)"
 msgstr ""
 
@@ -707,10 +713,7 @@ msgstr ""
 
 #: src/pages/applications/ApplicationViewPage.ts
 #: src/pages/flows/FlowViewPage.ts
-#: src/pages/providers/ldap/LDAPProviderViewPage.ts
-#: src/pages/providers/oauth2/OAuth2ProviderViewPage.ts
-#: src/pages/providers/proxy/ProxyProviderViewPage.ts
-#: src/pages/providers/saml/SAMLProviderViewPage.ts
+#: src/pages/providers/ProviderViewPage.ts
 #: src/pages/sources/ldap/LDAPSourceViewPage.ts
 #: src/pages/sources/oauth/OAuthSourceViewPage.ts
 #: src/pages/sources/plex/PlexSourceViewPage.ts
@@ -751,6 +754,10 @@ msgstr ""
 msgid "Check status"
 msgstr ""
 
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
+msgid "Check the IP of the Kubernetes service, or"
+msgstr ""
+
 #: 
 #~ msgid "Check your Emails for a password reset link."
 #~ msgstr ""
@@ -941,6 +948,10 @@ msgstr ""
 msgid "Connect"
 msgstr ""
 
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
+msgid "Connect to the LDAP Server on port 389:"
+msgstr ""
+
 #: src/user/user-settings/UserSettingsPage.ts
 msgid "Connected services"
 msgstr ""
@@ -2019,7 +2030,12 @@ msgstr ""
 msgid "Forward auth (domain level)"
 msgstr ""
 
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Forward auth (domain-level)"
+msgstr ""
+
 #: src/pages/providers/proxy/ProxyProviderForm.ts
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
 msgid "Forward auth (single application)"
 msgstr ""
 
@@ -2189,6 +2205,10 @@ msgstr ""
 msgid "How many attempts a user has before the flow is canceled. To lock the user out, use a reputation policy and a user_write stage."
 msgstr ""
 
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
+msgid "How to connect"
+msgstr ""
+
 #: src/elements/forms/DeleteBulkForm.ts
 #: src/pages/stages/invitation/InvitationListPage.ts
 #: src/pages/users/UserListPage.ts
@@ -2714,9 +2734,7 @@ msgstr ""
 msgid "Messages"
 msgstr ""
 
-#: src/pages/providers/oauth2/OAuth2ProviderViewPage.ts
 #: src/pages/providers/saml/SAMLProviderImportForm.ts
-#: src/pages/providers/saml/SAMLProviderViewPage.ts
 #: src/pages/sources/saml/SAMLSourceViewPage.ts
 msgid "Metadata"
 msgstr ""
@@ -2892,6 +2910,18 @@ msgstr ""
 msgid "Next stage"
 msgstr ""
 
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Nginx (Ingress)"
+msgstr ""
+
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Nginx (Proxy Manager)"
+msgstr ""
+
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Nginx (standalone)"
+msgstr ""
+
 #: src/elements/oauth/UserRefreshList.ts
 #: src/pages/applications/ApplicationCheckAccessForm.ts
 #: src/pages/crypto/CertificateKeyPairListPage.ts
@@ -3205,10 +3235,7 @@ msgstr ""
 
 #: src/interfaces/AdminInterface.ts
 #: src/pages/applications/ApplicationViewPage.ts
-#: src/pages/providers/ldap/LDAPProviderViewPage.ts
-#: src/pages/providers/oauth2/OAuth2ProviderViewPage.ts
-#: src/pages/providers/proxy/ProxyProviderViewPage.ts
-#: src/pages/providers/saml/SAMLProviderViewPage.ts
+#: src/pages/providers/ProviderViewPage.ts
 #: src/pages/sources/ldap/LDAPSourceViewPage.ts
 #: src/pages/sources/oauth/OAuthSourceViewPage.ts
 #: src/pages/sources/plex/PlexSourceViewPage.ts
@@ -3501,6 +3528,7 @@ msgstr ""
 
 #: src/pages/outposts/OutpostForm.ts
 #: src/pages/providers/proxy/ProxyProviderForm.ts
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
 msgid "Proxy"
 msgstr ""
 
@@ -3641,6 +3669,10 @@ msgstr ""
 msgid "Related"
 msgstr ""
 
+#: src/pages/providers/saml/SAMLProviderViewPage.ts
+msgid "Related objects"
+msgstr ""
+
 #: src/pages/stages/user_logout/UserLogoutStageForm.ts
 msgid "Remove the user from the current session."
 msgstr ""
@@ -3735,6 +3767,10 @@ msgstr ""
 msgid "SAML Attribute Name"
 msgstr ""
 
+#: src/pages/providers/saml/SAMLProviderViewPage.ts
+msgid "SAML Metadata"
+msgstr ""
+
 #: src/pages/providers/saml/SAMLProviderForm.ts
 #: src/pages/sources/saml/SAMLSourceForm.ts
 msgid "SHA1"
@@ -3821,6 +3857,10 @@ msgstr ""
 msgid "Score"
 msgstr ""
 
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
+msgid "Search base"
+msgstr ""
+
 #: src/pages/providers/ldap/LDAPProviderForm.ts
 msgid "Search group"
 msgstr ""
@@ -4033,6 +4073,10 @@ msgstr ""
 msgid "Set custom attributes using YAML or JSON."
 msgstr ""
 
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Setup"
+msgstr ""
+
 #: src/pages/events/RuleForm.ts
 #: src/pages/events/RuleListPage.ts
 msgid "Severity"
@@ -4746,6 +4790,10 @@ msgstr ""
 msgid "Text: Simple Text input"
 msgstr ""
 
+#: src/pages/providers/ldap/LDAPProviderViewPage.ts
+msgid "The Host IP of the docker host"
+msgstr ""
+
 #: src/elements/router/Router404.ts
 msgid "The URL \"{0}\" was not found."
 msgstr ""
@@ -4959,6 +5007,18 @@ msgstr ""
 msgid "Traditional authenticator"
 msgstr ""
 
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Traefik (Compose)"
+msgstr ""
+
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Traefik (Ingress)"
+msgstr ""
+
+#: src/pages/providers/proxy/ProxyProviderViewPage.ts
+msgid "Traefik (Standalone)"
+msgstr ""
+
 #: src/pages/sources/saml/SAMLSourceForm.ts
 msgid "Transient"
 msgstr ""
diff --git a/web/src/pages/outposts/OutpostDeploymentModal.ts b/web/src/pages/outposts/OutpostDeploymentModal.ts
index 8242444fb..88c5a5a95 100644
--- a/web/src/pages/outposts/OutpostDeploymentModal.ts
+++ b/web/src/pages/outposts/OutpostDeploymentModal.ts
@@ -28,7 +28,7 @@ export class OutpostDeploymentModal extends ModalButton {
                 </p>
                 <form class="pf-c-form">
                     <div class="pf-c-form__group">
-                        <label class="pf-c-form__label" for="help-text-simple-form-name">
+                        <label class="pf-c-form__label">
                             <span class="pf-c-form__label-text">AUTHENTIK_HOST</span>
                         </label>
                         <input
@@ -39,7 +39,7 @@ export class OutpostDeploymentModal extends ModalButton {
                         />
                     </div>
                     <div class="pf-c-form__group">
-                        <label class="pf-c-form__label" for="help-text-simple-form-name">
+                        <label class="pf-c-form__label">
                             <span class="pf-c-form__label-text">AUTHENTIK_TOKEN</span>
                         </label>
                         <div>
@@ -55,7 +55,7 @@ export class OutpostDeploymentModal extends ModalButton {
                         ${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">
+                        <label class="pf-c-form__label">
                             <span class="pf-c-form__label-text">AUTHENTIK_INSECURE</span>
                         </label>
                         <input class="pf-c-form-control" readonly type="text" value="true" />
@@ -66,7 +66,7 @@ export class OutpostDeploymentModal extends ModalButton {
                                   ${t`If your authentik_host setting does not match the URL you want to login with, add this setting.`}
                               </h3>
                               <div class="pf-c-form__group">
-                                  <label class="pf-c-form__label" for="help-text-simple-form-name">
+                                  <label class="pf-c-form__label">
                                       <span class="pf-c-form__label-text"
                                           >AUTHENTIK_HOST_BROWSER</span
                                       >
diff --git a/web/src/pages/providers/ProviderViewPage.ts b/web/src/pages/providers/ProviderViewPage.ts
index dc34c1814..6161ec5be 100644
--- a/web/src/pages/providers/ProviderViewPage.ts
+++ b/web/src/pages/providers/ProviderViewPage.ts
@@ -1,7 +1,12 @@
-import { LitElement, TemplateResult, html } from "lit";
+import { t } from "@lingui/macro";
+
+import { CSSResult, LitElement, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
+import AKGlobal from "../../authentik.css";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+
 import { Provider, ProvidersApi } from "@goauthentik/api";
 
 import { DEFAULT_CONFIG } from "../../api/Config";
@@ -27,6 +32,10 @@ export class ProviderViewPage extends LitElement {
     @property({ attribute: false })
     provider?: Provider;
 
+    static get styles(): CSSResult[] {
+        return [PFPage, AKGlobal];
+    }
+
     renderProvider(): TemplateResult {
         if (!this.provider) {
             return html`<ak-empty-state ?loading=${true} ?fullHeight=${true}></ak-empty-state>`;
@@ -60,6 +69,29 @@ export class ProviderViewPage extends LitElement {
                 description=${ifDefined(this.provider?.verboseName)}
             >
             </ak-page-header>
-            ${this.renderProvider()}`;
+            <ak-tabs>
+                <section
+                    slot="page-overview"
+                    data-tab-title="${t`Overview`}"
+                    class="pf-c-page__main-section pf-m-no-padding-mobile"
+                >
+                    ${this.renderProvider()}
+                </section>
+                <section
+                    slot="page-changelog"
+                    data-tab-title="${t`Changelog`}"
+                    class="pf-c-page__main-section pf-m-no-padding-mobile"
+                >
+                    <div class="pf-c-card">
+                        <div class="pf-c-card__body">
+                            <ak-object-changelog
+                                targetModelPk=${this.provider?.pk || ""}
+                                targetModelName=${this.provider?.metaModelName || ""}
+                            >
+                            </ak-object-changelog>
+                        </div>
+                    </div>
+                </section>
+            </ak-tabs>`;
     }
 }
diff --git a/web/src/pages/providers/ldap/LDAPProviderViewPage.ts b/web/src/pages/providers/ldap/LDAPProviderViewPage.ts
index 444b89ed5..d4c2cf8a9 100644
--- a/web/src/pages/providers/ldap/LDAPProviderViewPage.ts
+++ b/web/src/pages/providers/ldap/LDAPProviderViewPage.ts
@@ -1,7 +1,9 @@
 import { t } from "@lingui/macro";
 
 import { CSSResult, LitElement, TemplateResult, html } from "lit";
+import { until } from "lit-html/directives/until.js";
 import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 import AKGlobal from "../../../authentik.css";
 import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
@@ -9,16 +11,17 @@ import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFList from "@patternfly/patternfly/components/List/list.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
-import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
-import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
-import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
-import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
 
 import { LDAPProvider, ProvidersApi } from "@goauthentik/api";
 
 import { DEFAULT_CONFIG } from "../../../api/Config";
+import { me } from "../../../api/Users";
 import { EVENT_REFRESH } from "../../../constants";
 import "../../../elements/CodeMirror";
 import "../../../elements/Tabs";
@@ -51,15 +54,15 @@ export class LDAPProviderViewPage extends LitElement {
         return [
             PFBase,
             PFButton,
+            PFBanner,
+            PFForm,
+            PFFormControl,
+            PFList,
+            PFGrid,
             PFPage,
-            PFFlex,
-            PFDisplay,
-            PFGallery,
             PFContent,
             PFCard,
             PFDescriptionList,
-            PFSizing,
-            PFBanner,
             AKGlobal,
         ];
     }
@@ -76,101 +79,131 @@ export class LDAPProviderViewPage extends LitElement {
         if (!this.provider) {
             return html``;
         }
-        return html` ${this.provider?.assignedApplicationName
+        return html`${
+            this.provider?.assignedApplicationName
                 ? html``
                 : html`<div slot="header" class="pf-c-banner pf-m-warning">
                       ${t`Warning: Provider is not used by an Application.`}
-                  </div>`}
-            ${this.provider?.outpostSet.length < 1
-                ? html`<div slot="header" class="pf-c-banner pf-m-warning">
-                      ${t`Warning: Provider is not used by any Outpost.`}
                   </div>`
-                : html``}
-            <ak-tabs>
-                <section
-                    slot="page-overview"
-                    data-tab-title="${t`Overview`}"
-                    class="pf-c-page__main-section pf-m-no-padding-mobile"
-                >
-                    <div class="pf-u-display-flex pf-u-justify-content-center">
-                        <div class="pf-u-w-75">
-                            <div class="pf-c-card">
-                                <div class="pf-c-card__body">
-                                    <dl class="pf-c-description-list pf-m-3-col-on-lg">
-                                        <div class="pf-c-description-list__group">
-                                            <dt class="pf-c-description-list__term">
-                                                <span class="pf-c-description-list__text"
-                                                    >${t`Name`}</span
-                                                >
-                                            </dt>
-                                            <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">
-                                                    ${this.provider.name}
-                                                </div>
-                                            </dd>
-                                        </div>
-                                        <div class="pf-c-description-list__group">
-                                            <dt class="pf-c-description-list__term">
-                                                <span class="pf-c-description-list__text"
-                                                    >${t`Assigned to application`}</span
-                                                >
-                                            </dt>
-                                            <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">
-                                                    <ak-provider-related-application
-                                                        .provider=${this.provider}
-                                                    ></ak-provider-related-application>
-                                                </div>
-                                            </dd>
-                                        </div>
-                                        <div class="pf-c-description-list__group">
-                                            <dt class="pf-c-description-list__term">
-                                                <span class="pf-c-description-list__text"
-                                                    >${t`Base DN`}</span
-                                                >
-                                            </dt>
-                                            <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">
-                                                    ${this.provider.baseDn}
-                                                </div>
-                                            </dd>
-                                        </div>
-                                    </dl>
-                                </div>
-                                <div class="pf-c-card__footer">
-                                    <ak-forms-modal>
-                                        <span slot="submit"> ${t`Update`} </span>
-                                        <span slot="header"> ${t`Update LDAP Provider`} </span>
-                                        <ak-provider-ldap-form
-                                            slot="form"
-                                            .instancePk=${this.provider.pk}
-                                        >
-                                        </ak-provider-ldap-form>
-                                        <button slot="trigger" class="pf-c-button pf-m-primary">
-                                            ${t`Edit`}
-                                        </button>
-                                    </ak-forms-modal>
-                                </div>
+        }
+            ${
+                this.provider?.outpostSet.length < 1
+                    ? html`<div slot="header" class="pf-c-banner pf-m-warning">
+                          ${t`Warning: Provider is not used by any Outpost.`}
+                      </div>`
+                    : html``
+            }
+            <div class="pf-l-grid pf-m-gutter">
+                <div class="pf-c-card pf-l-grid__item pf-m-12-col">
+                    <div class="pf-c-card__body">
+                        <dl class="pf-c-description-list pf-m-3-col-on-lg">
+                            <div class="pf-c-description-list__group">
+                                <dt class="pf-c-description-list__term">
+                                    <span class="pf-c-description-list__text">${t`Name`}</span>
+                                </dt>
+                                <dd class="pf-c-description-list__description">
+                                    <div class="pf-c-description-list__text">
+                                        ${this.provider.name}
+                                    </div>
+                                </dd>
                             </div>
-                        </div>
+                            <div class="pf-c-description-list__group">
+                                <dt class="pf-c-description-list__term">
+                                    <span class="pf-c-description-list__text"
+                                        >${t`Assigned to application`}</span
+                                    >
+                                </dt>
+                                <dd class="pf-c-description-list__description">
+                                    <div class="pf-c-description-list__text">
+                                        <ak-provider-related-application
+                                            .provider=${this.provider}
+                                        ></ak-provider-related-application>
+                                    </div>
+                                </dd>
+                            </div>
+                            <div class="pf-c-description-list__group">
+                                <dt class="pf-c-description-list__term">
+                                    <span class="pf-c-description-list__text"
+                                        >${t`Base DN`}</span
+                                    >
+                                </dt>
+                                <dd class="pf-c-description-list__description">
+                                    <div class="pf-c-description-list__text">
+                                        ${this.provider.baseDn}
+                                    </div>
+                                </dd>
+                            </div>
+                        </dl>
                     </div>
-                </section>
-                <section
-                    slot="page-changelog"
-                    data-tab-title="${t`Changelog`}"
-                    class="pf-c-page__main-section pf-m-no-padding-mobile"
-                >
-                    <div class="pf-c-card">
-                        <div class="pf-c-card__body">
-                            <ak-object-changelog
-                                targetModelPk=${this.provider.pk || ""}
-                                targetModelApp="authentik_providers_ldap"
-                                targetModelName="LDAPProvider"
-                            >
-                            </ak-object-changelog>
-                        </div>
+                    <div class="pf-c-card__footer">
+                        <ak-forms-modal>
+                            <span slot="submit"> ${t`Update`} </span>
+                            <span slot="header"> ${t`Update LDAP Provider`} </span>
+                            <ak-provider-ldap-form slot="form" .instancePk=${this.provider.pk}>
+                            </ak-provider-ldap-form>
+                            <button slot="trigger" class="pf-c-button pf-m-primary">
+                                ${t`Edit`}
+                            </button>
+                        </ak-forms-modal>
                     </div>
-                </section>
-            </ak-tabs>`;
+                </div>
+                <div class="pf-c-card pf-l-grid__item pf-m-12-col">
+                    <div class="pf-c-card__title">
+                        ${t`How to connect`}
+                    </div>
+                    <div class="pf-c-card__body">
+                        <p>
+                            ${t`Connect to the LDAP Server on port 389:`}
+                        </p>
+                        <ul class="pf-c-list">
+                            <li>${t`Check the IP of the Kubernetes service, or`}</li>
+                            <li>${t`The Host IP of the docker host`}</li>
+                        </ul>
+                        <form class="pf-c-form">
+                            <div class="pf-c-form__group">
+                                <label class="pf-c-form__label">
+                                    <span class="pf-c-form__label-text">${t`Bind DN`}</span>
+                                </label>
+                                <!-- @ts-ignore -->
+                                <input
+                                    class="pf-c-form-control"
+                                    readonly
+                                    type="text"
+                                    value=${until(
+                                        me().then((m) => {
+                                            return `cn=${
+                                                m.user.username
+                                            },ou=users,${this.provider?.baseDn?.toLowerCase()}`;
+                                        }),
+                                    )}
+                                />
+                            </div>
+                            <div class="pf-c-form__group">
+                                <label class="pf-c-form__label">
+                                    <span class="pf-c-form__label-text">${t`Bind Password`}</span>
+                                </label>
+                                <input
+                                    class="pf-c-form-control"
+                                    readonly
+                                    type="text"
+                                    value="Your authentik password"
+                                />
+                            </div>
+                            <div class="pf-c-form__group">
+                                <label class="pf-c-form__label">
+                                    <span class="pf-c-form__label-text">${t`Search base`}</span>
+                                </label>
+                                <input
+                                    class="pf-c-form-control"
+                                    readonly
+                                    type="text"
+                                    value=${ifDefined(this.provider?.baseDn?.toLowerCase())}
+                                />
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>`;
     }
 }
diff --git a/web/src/pages/providers/oauth2/OAuth2ProviderViewPage.ts b/web/src/pages/providers/oauth2/OAuth2ProviderViewPage.ts
index c331616d6..a75a79005 100644
--- a/web/src/pages/providers/oauth2/OAuth2ProviderViewPage.ts
+++ b/web/src/pages/providers/oauth2/OAuth2ProviderViewPage.ts
@@ -12,11 +12,8 @@ import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
-import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
-import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
-import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
-import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
 
 import { OAuth2Provider, OAuth2ProviderSetupURLs, ProvidersApi } from "@goauthentik/api";
 
@@ -59,13 +56,10 @@ export class OAuth2ProviderViewPage extends LitElement {
             PFBase,
             PFButton,
             PFPage,
-            PFFlex,
-            PFDisplay,
-            PFGallery,
+            PFGrid,
             PFContent,
             PFCard,
             PFDescriptionList,
-            PFSizing,
             PFForm,
             PFFormControl,
             PFBanner,
@@ -85,18 +79,15 @@ export class OAuth2ProviderViewPage extends LitElement {
         if (!this.provider) {
             return html``;
         }
-        return html` ${this.provider?.assignedApplicationName
+        return html` ${
+            this.provider?.assignedApplicationName
                 ? html``
                 : html`<div slot="header" class="pf-c-banner pf-m-warning">
                       ${t`Warning: Provider is not used by an Application.`}
-                  </div>`}<ak-tabs>
-                <section
-                    slot="page-overview"
-                    data-tab-title="${t`Overview`}"
-                    class="pf-c-page__main-section pf-m-no-padding-mobile"
-                >
-                    <div class="pf-u-display-flex pf-u-justify-content-center">
-                        <div class="pf-u-w-75">
+                  </div>`
+        }
+            <div class="pf-l-grid pf-m-gutter">
+                <div class="pf-c-card pf-l-grid__item pf-m-12-col">
                             <div class="pf-c-card">
                                 <div class="pf-c-card__body">
                                     <dl class="pf-c-description-list pf-m-2-col-on-lg">
@@ -182,39 +173,12 @@ export class OAuth2ProviderViewPage extends LitElement {
                                 </div>
                             </div>
                         </div>
-                    </div>
-                </section>
-                <section
-                    slot="page-changelog"
-                    data-tab-title="${t`Changelog`}"
-                    class="pf-c-page__main-section pf-m-no-padding-mobile"
-                >
-                    <div class="pf-c-card">
-                        <div class="pf-c-card__body">
-                            <ak-object-changelog
-                                targetModelPk=${this.provider.pk || ""}
-                                targetModelApp="authentik_providers_oauth2"
-                                targetModelName="oauth2provider"
-                            >
-                            </ak-object-changelog>
-                        </div>
-                    </div>
-                </section>
-                <section
-                    slot="page-metadata"
-                    data-tab-title="${t`Metadata`}"
-                    class="pf-c-page__main-section pf-m-no-padding-mobile"
-                >
-                    <div class="pf-u-display-flex pf-u-justify-content-center">
-                        <div class="pf-u-w-75">
+                        <div class="pf-c-card pf-l-grid__item pf-m-12-col">
                             <div class="pf-c-card">
                                 <div class="pf-c-card__body">
                                     <form class="pf-c-form">
                                         <div class="pf-c-form__group">
-                                            <label
-                                                class="pf-c-form__label"
-                                                for="help-text-simple-form-name"
-                                            >
+                                            <label class="pf-c-form__label">
                                                 <span class="pf-c-form__label-text"
                                                     >${t`OpenID Configuration URL`}</span
                                                 >
@@ -227,10 +191,7 @@ export class OAuth2ProviderViewPage extends LitElement {
                                             />
                                         </div>
                                         <div class="pf-c-form__group">
-                                            <label
-                                                class="pf-c-form__label"
-                                                for="help-text-simple-form-name"
-                                            >
+                                            <label class="pf-c-form__label">
                                                 <span class="pf-c-form__label-text"
                                                     >${t`OpenID Configuration Issuer`}</span
                                                 >
@@ -244,10 +205,7 @@ export class OAuth2ProviderViewPage extends LitElement {
                                         </div>
                                         <hr />
                                         <div class="pf-c-form__group">
-                                            <label
-                                                class="pf-c-form__label"
-                                                for="help-text-simple-form-name"
-                                            >
+                                            <label class="pf-c-form__label">
                                                 <span class="pf-c-form__label-text"
                                                     >${t`Authorize URL`}</span
                                                 >
@@ -260,10 +218,7 @@ export class OAuth2ProviderViewPage extends LitElement {
                                             />
                                         </div>
                                         <div class="pf-c-form__group">
-                                            <label
-                                                class="pf-c-form__label"
-                                                for="help-text-simple-form-name"
-                                            >
+                                            <label class="pf-c-form__label">
                                                 <span class="pf-c-form__label-text"
                                                     >${t`Token URL`}</span
                                                 >
@@ -276,10 +231,7 @@ export class OAuth2ProviderViewPage extends LitElement {
                                             />
                                         </div>
                                         <div class="pf-c-form__group">
-                                            <label
-                                                class="pf-c-form__label"
-                                                for="help-text-simple-form-name"
-                                            >
+                                            <label class="pf-c-form__label">
                                                 <span class="pf-c-form__label-text"
                                                     >${t`Userinfo URL`}</span
                                                 >
@@ -292,10 +244,7 @@ export class OAuth2ProviderViewPage extends LitElement {
                                             />
                                         </div>
                                         <div class="pf-c-form__group">
-                                            <label
-                                                class="pf-c-form__label"
-                                                for="help-text-simple-form-name"
-                                            >
+                                            <label class="pf-c-form__label">
                                                 <span class="pf-c-form__label-text"
                                                     >${t`Logout URL`}</span
                                                 >
diff --git a/web/src/pages/providers/proxy/ProxyProviderViewPage.ts b/web/src/pages/providers/proxy/ProxyProviderViewPage.ts
index 95d84c333..eeeb6bcd0 100644
--- a/web/src/pages/providers/proxy/ProxyProviderViewPage.ts
+++ b/web/src/pages/providers/proxy/ProxyProviderViewPage.ts
@@ -1,6 +1,7 @@
 import { t } from "@lingui/macro";
 
 import { CSSResult, LitElement, TemplateResult, html } from "lit";
+import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
 import { customElement, property } from "lit/decorators.js";
 
 import AKGlobal from "../../../authentik.css";
@@ -9,13 +10,20 @@ import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
-import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
 import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import { ProvidersApi, ProxyProvider } from "@goauthentik/api";
+import { ProvidersApi, ProxyMode, ProxyProvider } from "@goauthentik/api";
 
+import MDNginxIngress from "../../../../../website/docs/providers/proxy/_nginx_ingress.md";
+import MDNginxPM from "../../../../../website/docs/providers/proxy/_nginx_proxy_manager.md";
+import MDNginxStandalone from "../../../../../website/docs/providers/proxy/_nginx_standalone.md";
+import MDTraefikCompose from "../../../../../website/docs/providers/proxy/_traefik_compose.md";
+import MDTraefikIngres from "../../../../../website/docs/providers/proxy/_traefik_ingress.md";
+import MDTraefikStandalone from "../../../../../website/docs/providers/proxy/_traefik_standalone.md";
 import { DEFAULT_CONFIG } from "../../../api/Config";
 import { EVENT_REFRESH } from "../../../constants";
 import "../../../elements/CodeMirror";
@@ -23,10 +31,21 @@ import "../../../elements/Tabs";
 import "../../../elements/buttons/ModalButton";
 import "../../../elements/buttons/SpinnerButton";
 import "../../../elements/events/ObjectChangelog";
-import { convertToTitle } from "../../../utils";
 import "../RelatedApplicationButton";
 import "./ProxyProviderForm";
 
+export function ModeToLabel(action?: ProxyMode): string {
+    if (!action) return "";
+    switch (action) {
+        case ProxyMode.Proxy:
+            return t`Proxy`;
+        case ProxyMode.ForwardSingle:
+            return t`Forward auth (single application)`;
+        case ProxyMode.ForwardDomain:
+            return t`Forward auth (domain-level)`;
+    }
+}
+
 @customElement("ak-provider-proxy-view")
 export class ProxyProviderViewPage extends LitElement {
     @property()
@@ -52,8 +71,9 @@ export class ProxyProviderViewPage extends LitElement {
             PFButton,
             PFPage,
             PFGrid,
-            PFGallery,
             PFContent,
+            PFForm,
+            PFFormControl,
             PFCard,
             PFDescriptionList,
             PFBanner,
@@ -69,11 +89,20 @@ export class ProxyProviderViewPage extends LitElement {
         });
     }
 
+    renderConfigTemplate(tmpl: string): TemplateResult {
+        // See website/docs/providers/proxy/forward_auth.mdx
+        const final = tmpl
+            .replaceAll("authentik.company", window.location.hostname)
+            .replaceAll("outpost.company", window.location.hostname)
+            .replaceAll("app.company", this.provider?.externalHost || "");
+        return html`${unsafeHTML(final)}`;
+    }
+
     render(): TemplateResult {
         if (!this.provider) {
             return html``;
         }
-        return html` ${this.provider?.assignedApplicationName
+        return html`${this.provider?.assignedApplicationName
                 ? html``
                 : html`<div slot="header" class="pf-c-banner pf-m-warning">
                       ${t`Warning: Provider is not used by an Application.`}
@@ -83,166 +112,186 @@ export class ProxyProviderViewPage extends LitElement {
                       ${t`Warning: Provider is not used by any Outpost.`}
                   </div>`
                 : html``}
-            <ak-tabs>
-                <section
-                    slot="page-overview"
-                    data-tab-title="${t`Overview`}"
-                    class="pf-c-page__main-section pf-m-no-padding-mobile"
-                >
-                    <div class="pf-l-grid pf-m-gutter">
-                        <div class="pf-l-grid__item pf-m-6-col">
-                            <div class="pf-c-card">
-                                <div class="pf-c-card__body">
-                                    <dl class="pf-c-description-list pf-m-3-col-on-lg">
-                                        <div class="pf-c-description-list__group">
-                                            <dt class="pf-c-description-list__term">
-                                                <span class="pf-c-description-list__text"
-                                                    >${t`Name`}</span
-                                                >
-                                            </dt>
-                                            <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">
-                                                    ${this.provider.name}
-                                                </div>
-                                            </dd>
-                                        </div>
-                                        <div class="pf-c-description-list__group">
-                                            <dt class="pf-c-description-list__term">
-                                                <span class="pf-c-description-list__text"
-                                                    >${t`Assigned to application`}</span
-                                                >
-                                            </dt>
-                                            <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">
-                                                    <ak-provider-related-application
-                                                        .provider=${this.provider}
-                                                    ></ak-provider-related-application>
-                                                </div>
-                                            </dd>
-                                        </div>
-                                        <div class="pf-c-description-list__group">
-                                            <dt class="pf-c-description-list__term">
-                                                <span class="pf-c-description-list__text"
-                                                    >${t`Internal Host`}</span
-                                                >
-                                            </dt>
-                                            <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">
-                                                    ${this.provider.internalHost}
-                                                </div>
-                                            </dd>
-                                        </div>
-                                        <div class="pf-c-description-list__group">
-                                            <dt class="pf-c-description-list__term">
-                                                <span class="pf-c-description-list__text"
-                                                    >${t`External Host`}</span
-                                                >
-                                            </dt>
-                                            <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">
-                                                    ${this.provider.externalHost}
-                                                </div>
-                                            </dd>
-                                        </div>
-                                        <div class="pf-c-description-list__group">
-                                            <dt class="pf-c-description-list__term">
-                                                <span class="pf-c-description-list__text"
-                                                    >${t`Basic-Auth`}</span
-                                                >
-                                            </dt>
-                                            <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">
-                                                    ${this.provider.basicAuthEnabled
-                                                        ? html`<span
-                                                                  class="pf-c-button__icon pf-m-start"
-                                                              >
-                                                                  <i
-                                                                      class="fas fa-check-circle"
-                                                                      aria-hidden="true"
-                                                                  ></i
-                                                                  >&nbsp; </span
-                                                              >${t`Yes`}`
-                                                        : html`<span
-                                                                  class="pf-c-button__icon pf-m-start"
-                                                              >
-                                                                  <i
-                                                                      class="fas fa-times-circle"
-                                                                      aria-hidden="true"
-                                                                  ></i
-                                                                  >&nbsp; </span
-                                                              >${t`No`}`}
-                                                </div>
-                                            </dd>
-                                        </div>
-                                        <div class="pf-c-description-list__group">
-                                            <dt class="pf-c-description-list__term">
-                                                <span class="pf-c-description-list__text"
-                                                    >${t`Mode`}</span
-                                                >
-                                            </dt>
-                                            <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">
-                                                    ${convertToTitle(this.provider.mode || "")}
-                                                </div>
-                                            </dd>
-                                        </div>
-                                    </dl>
-                                </div>
-                                <div class="pf-c-card__footer">
-                                    <ak-forms-modal>
-                                        <span slot="submit"> ${t`Update`} </span>
-                                        <span slot="header"> ${t`Update Proxy Provider`} </span>
-                                        <ak-provider-proxy-form
-                                            slot="form"
-                                            .instancePk=${this.provider.pk || 0}
-                                        >
-                                        </ak-provider-proxy-form>
-                                        <button slot="trigger" class="pf-c-button pf-m-primary">
-                                            ${t`Edit`}
-                                        </button>
-                                    </ak-forms-modal>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="pf-l-grid__item pf-m-6-col">
-                            <div class="pf-c-card">
-                                <div class="pf-c-card__title">${t`Protocol Settings`}</div>
-                                <div class="pf-c-card__body">
-                                    <dl class="pf-c-description-list pf-m-3-col-on-lg">
-                                        <div class="pf-c-description-list__group">
-                                            <dt class="pf-c-description-list__term">
-                                                <span class="pf-c-description-list__text"
-                                                    >${t`Allowed Redirect URIs`}</span
-                                                >
-                                            </dt>
-                                            <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">
-                                                    ${this.provider.redirectUris}
-                                                </div>
-                                            </dd>
-                                        </div>
-                                    </dl>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </section>
-                <section
-                    slot="page-changelog"
-                    data-tab-title="${t`Changelog`}"
-                    class="pf-c-page__main-section pf-m-no-padding-mobile"
-                >
+            <div class="pf-l-grid pf-m-gutter">
+                <div class="pf-l-grid__item pf-m-12-col">
                     <div class="pf-c-card">
                         <div class="pf-c-card__body">
-                            <ak-object-changelog
-                                targetModelPk=${this.provider.pk || ""}
-                                targetModelApp="authentik_providers_proxy"
-                                targetModelName="proxyprovider"
-                            >
-                            </ak-object-changelog>
+                            <dl class="pf-c-description-list pf-m-3-col-on-lg">
+                                <div class="pf-c-description-list__group">
+                                    <dt class="pf-c-description-list__term">
+                                        <span class="pf-c-description-list__text">${t`Name`}</span>
+                                    </dt>
+                                    <dd class="pf-c-description-list__description">
+                                        <div class="pf-c-description-list__text">
+                                            ${this.provider.name}
+                                        </div>
+                                    </dd>
+                                </div>
+                                <div class="pf-c-description-list__group">
+                                    <dt class="pf-c-description-list__term">
+                                        <span class="pf-c-description-list__text"
+                                            >${t`Assigned to application`}</span
+                                        >
+                                    </dt>
+                                    <dd class="pf-c-description-list__description">
+                                        <div class="pf-c-description-list__text">
+                                            <ak-provider-related-application
+                                                .provider=${this.provider}
+                                            ></ak-provider-related-application>
+                                        </div>
+                                    </dd>
+                                </div>
+                                <div class="pf-c-description-list__group">
+                                    <dt class="pf-c-description-list__term">
+                                        <span class="pf-c-description-list__text"
+                                            >${t`Internal Host`}</span
+                                        >
+                                    </dt>
+                                    <dd class="pf-c-description-list__description">
+                                        <div class="pf-c-description-list__text">
+                                            ${this.provider.internalHost}
+                                        </div>
+                                    </dd>
+                                </div>
+                                <div class="pf-c-description-list__group">
+                                    <dt class="pf-c-description-list__term">
+                                        <span class="pf-c-description-list__text"
+                                            >${t`External Host`}</span
+                                        >
+                                    </dt>
+                                    <dd class="pf-c-description-list__description">
+                                        <div class="pf-c-description-list__text">
+                                            ${this.provider.externalHost}
+                                        </div>
+                                    </dd>
+                                </div>
+                                <div class="pf-c-description-list__group">
+                                    <dt class="pf-c-description-list__term">
+                                        <span class="pf-c-description-list__text"
+                                            >${t`Basic-Auth`}</span
+                                        >
+                                    </dt>
+                                    <dd class="pf-c-description-list__description">
+                                        <div class="pf-c-description-list__text">
+                                            ${this.provider.basicAuthEnabled
+                                                ? html`<span class="pf-c-button__icon pf-m-start">
+                                                          <i
+                                                              class="fas fa-check-circle"
+                                                              aria-hidden="true"
+                                                          ></i
+                                                          >&nbsp; </span
+                                                      >${t`Yes`}`
+                                                : html`<span class="pf-c-button__icon pf-m-start">
+                                                          <i
+                                                              class="fas fa-times-circle"
+                                                              aria-hidden="true"
+                                                          ></i
+                                                          >&nbsp; </span
+                                                      >${t`No`}`}
+                                        </div>
+                                    </dd>
+                                </div>
+                                <div class="pf-c-description-list__group">
+                                    <dt class="pf-c-description-list__term">
+                                        <span class="pf-c-description-list__text">${t`Mode`}</span>
+                                    </dt>
+                                    <dd class="pf-c-description-list__description">
+                                        <div class="pf-c-description-list__text">
+                                            ${ModeToLabel(this.provider.mode || ProxyMode.Proxy)}
+                                        </div>
+                                    </dd>
+                                </div>
+                            </dl>
+                        </div>
+                        <div class="pf-c-card__footer">
+                            <ak-forms-modal>
+                                <span slot="submit"> ${t`Update`} </span>
+                                <span slot="header"> ${t`Update Proxy Provider`} </span>
+                                <ak-provider-proxy-form
+                                    slot="form"
+                                    .instancePk=${this.provider.pk || 0}
+                                >
+                                </ak-provider-proxy-form>
+                                <button slot="trigger" class="pf-c-button pf-m-primary">
+                                    ${t`Edit`}
+                                </button>
+                            </ak-forms-modal>
                         </div>
                     </div>
-                </section>
-            </ak-tabs>`;
+                </div>
+                <div class="pf-l-grid__item pf-m-12-col">
+                    <div class="pf-c-card">
+                        <div class="pf-c-card__title">${t`Protocol Settings`}</div>
+                        <div class="pf-c-card__body">
+                            <form class="pf-c-form">
+                                <div class="pf-c-form__group">
+                                    <label class="pf-c-form__label">
+                                        <span class="pf-c-form__label-text"
+                                            >${t`Allowed Redirect URIs`}</span
+                                        >
+                                    </label>
+                                    <input
+                                        class="pf-c-form-control"
+                                        readonly
+                                        type="text"
+                                        value=${this.provider.redirectUris}
+                                    />
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <div class="pf-l-grid__item pf-m-12-col">
+                    <div class="pf-c-card">
+                        <div class="pf-c-card__title">${t`Setup`}</div>
+                        <div class="pf-c-card__body">
+                            <ak-tabs pageIdentifier="proxy-setup">
+                                <section
+                                    slot="page-nginx-ingress"
+                                    data-tab-title="${t`Nginx (Ingress)`}"
+                                    class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
+                                >
+                                    ${this.renderConfigTemplate(MDNginxIngress.html)}
+                                </section>
+                                <section
+                                    slot="page-nginx-proxy-manager"
+                                    data-tab-title="${t`Nginx (Proxy Manager)`}"
+                                    class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
+                                >
+                                    ${this.renderConfigTemplate(MDNginxPM.html)}
+                                </section>
+                                <section
+                                    slot="page-nginx-standalone"
+                                    data-tab-title="${t`Nginx (standalone)`}"
+                                    class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
+                                >
+                                    ${this.renderConfigTemplate(MDNginxStandalone.html)}
+                                </section>
+                                <section
+                                    slot="page-traefik-ingress"
+                                    data-tab-title="${t`Traefik (Ingress)`}"
+                                    class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
+                                >
+                                    ${this.renderConfigTemplate(MDTraefikIngres.html)}
+                                </section>
+                                <section
+                                    slot="page-traefik-compose"
+                                    data-tab-title="${t`Traefik (Compose)`}"
+                                    class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
+                                >
+                                    ${this.renderConfigTemplate(MDTraefikCompose.html)}
+                                </section>
+                                <section
+                                    slot="page-traefik-standalone"
+                                    data-tab-title="${t`Traefik (Standalone)`}"
+                                    class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
+                                >
+                                    ${this.renderConfigTemplate(MDTraefikStandalone.html)}
+                                </section>
+                            </ak-tabs>
+                        </div>
+                    </div>
+                </div>
+            </div>`;
     }
 }
diff --git a/web/src/pages/providers/saml/SAMLProviderViewPage.ts b/web/src/pages/providers/saml/SAMLProviderViewPage.ts
index 41ad022dc..98c7b5167 100644
--- a/web/src/pages/providers/saml/SAMLProviderViewPage.ts
+++ b/web/src/pages/providers/saml/SAMLProviderViewPage.ts
@@ -12,13 +12,10 @@ import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
-import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
-import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
-import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
-import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
 
-import { ProvidersApi, SAMLProvider } from "@goauthentik/api";
+import { CryptoApi, ProvidersApi, SAMLProvider } from "@goauthentik/api";
 
 import { DEFAULT_CONFIG } from "../../../api/Config";
 import { EVENT_REFRESH } from "../../../constants";
@@ -55,14 +52,11 @@ export class SAMLProviderViewPage extends LitElement {
             PFBase,
             PFPage,
             PFButton,
-            PFFlex,
-            PFDisplay,
-            PFGallery,
+            PFBanner,
             PFContent,
             PFCard,
             PFDescriptionList,
-            PFSizing,
-            PFBanner,
+            PFGrid,
             AKGlobal,
         ];
     }
@@ -75,171 +69,167 @@ export class SAMLProviderViewPage extends LitElement {
         });
     }
 
+    renderSigningCert(): Promise<TemplateResult> {
+        if (!this.provider?.signingKp) {
+            return Promise.resolve(html``);
+        }
+        return new CryptoApi(DEFAULT_CONFIG)
+            .cryptoCertificatekeypairsRetrieve({
+                kpUuid: this.provider.signingKp,
+            })
+            .then((kp) => {
+                return html` <div class="pf-c-description-list__group">
+                    <dt class="pf-c-description-list__term">
+                        <span class="pf-c-description-list__text"
+                            >${t`Download signing certificate`}</span
+                        >
+                    </dt>
+                    <dd class="pf-c-description-list__description">
+                        <div class="pf-c-description-list__text">
+                            <a class="pf-c-button pf-m-primary" href=${kp.certificateDownloadUrl}
+                                >${t`Download`}</a
+                            >
+                        </div>
+                    </dd>
+                </div>`;
+            });
+    }
+
     render(): TemplateResult {
         if (!this.provider) {
             return html``;
         }
-        return html` ${this.provider?.assignedApplicationName
+        return html`${
+            this.provider?.assignedApplicationName
                 ? html``
                 : html`<div slot="header" class="pf-c-banner pf-m-warning">
                       ${t`Warning: Provider is not used by an Application.`}
-                  </div>`}<ak-tabs>
-                <section
-                    slot="page-overview"
-                    data-tab-title="${t`Overview`}"
-                    class="pf-c-page__main-section pf-m-no-padding-mobile"
-                >
-                    <div class="pf-u-display-flex pf-u-justify-content-center">
-                        <div class="pf-u-w-75">
-                            <div class="pf-c-card">
-                                <div class="pf-c-card__body">
-                                    <dl class="pf-c-description-list pf-m-3-col-on-lg">
-                                        <div class="pf-c-description-list__group">
-                                            <dt class="pf-c-description-list__term">
-                                                <span class="pf-c-description-list__text"
-                                                    >${t`Name`}</span
-                                                >
-                                            </dt>
-                                            <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">
-                                                    ${this.provider.name}
-                                                </div>
-                                            </dd>
-                                        </div>
-                                        <div class="pf-c-description-list__group">
-                                            <dt class="pf-c-description-list__term">
-                                                <span class="pf-c-description-list__text"
-                                                    >${t`Assigned to application`}</span
-                                                >
-                                            </dt>
-                                            <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">
-                                                    <ak-provider-related-application
-                                                        .provider=${this.provider}
-                                                    ></ak-provider-related-application>
-                                                </div>
-                                            </dd>
-                                        </div>
-                                        <div class="pf-c-description-list__group">
-                                            <dt class="pf-c-description-list__term">
-                                                <span class="pf-c-description-list__text"
-                                                    >${t`ACS URL`}</span
-                                                >
-                                            </dt>
-                                            <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">
-                                                    ${this.provider.acsUrl}
-                                                </div>
-                                            </dd>
-                                        </div>
-                                        <div class="pf-c-description-list__group">
-                                            <dt class="pf-c-description-list__term">
-                                                <span class="pf-c-description-list__text"
-                                                    >${t`Audience`}</span
-                                                >
-                                            </dt>
-                                            <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">
-                                                    ${this.provider.audience || "-"}
-                                                </div>
-                                            </dd>
-                                        </div>
-                                        <div class="pf-c-description-list__group">
-                                            <dt class="pf-c-description-list__term">
-                                                <span class="pf-c-description-list__text"
-                                                    >${t`Issuer`}</span
-                                                >
-                                            </dt>
-                                            <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">
-                                                    ${this.provider.issuer}
-                                                </div>
-                                            </dd>
-                                        </div>
-                                    </dl>
-                                </div>
-                                <div class="pf-c-card__footer">
-                                    <ak-forms-modal>
-                                        <span slot="submit"> ${t`Update`} </span>
-                                        <span slot="header"> ${t`Update SAML Provider`} </span>
-                                        <ak-provider-saml-form
-                                            slot="form"
-                                            .instancePk=${this.provider.pk || 0}
-                                        >
-                                        </ak-provider-saml-form>
-                                        <button slot="trigger" class="pf-c-button pf-m-primary">
-                                            ${t`Edit`}
-                                        </button>
-                                    </ak-forms-modal>
-                                </div>
+                  </div>`
+        }
+            <div class="pf-l-grid pf-m-gutter">
+                <div class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl">
+                    <div class="pf-c-card__body">
+                        <dl class="pf-c-description-list pf-m-3-col-on-lg">
+                            <div class="pf-c-description-list__group">
+                                <dt class="pf-c-description-list__term">
+                                    <span class="pf-c-description-list__text">${t`Name`}</span>
+                                </dt>
+                                <dd class="pf-c-description-list__description">
+                                    <div class="pf-c-description-list__text">
+                                        ${this.provider.name}
+                                    </div>
+                                </dd>
                             </div>
-                        </div>
+                            <div class="pf-c-description-list__group">
+                                <dt class="pf-c-description-list__term">
+                                    <span class="pf-c-description-list__text"
+                                        >${t`Assigned to application`}</span
+                                    >
+                                </dt>
+                                <dd class="pf-c-description-list__description">
+                                    <div class="pf-c-description-list__text">
+                                        <ak-provider-related-application
+                                            .provider=${this.provider}
+                                        ></ak-provider-related-application>
+                                    </div>
+                                </dd>
+                            </div>
+                            <div class="pf-c-description-list__group">
+                                <dt class="pf-c-description-list__term">
+                                    <span class="pf-c-description-list__text">${t`ACS URL`}</span>
+                                </dt>
+                                <dd class="pf-c-description-list__description">
+                                    <div class="pf-c-description-list__text">
+                                        ${this.provider.acsUrl}
+                                    </div>
+                                </dd>
+                            </div>
+                            <div class="pf-c-description-list__group">
+                                <dt class="pf-c-description-list__term">
+                                    <span class="pf-c-description-list__text">${t`Audience`}</span>
+                                </dt>
+                                <dd class="pf-c-description-list__description">
+                                    <div class="pf-c-description-list__text">
+                                        ${this.provider.audience || "-"}
+                                    </div>
+                                </dd>
+                            </div>
+                            <div class="pf-c-description-list__group">
+                                <dt class="pf-c-description-list__term">
+                                    <span class="pf-c-description-list__text">${t`Issuer`}</span>
+                                </dt>
+                                <dd class="pf-c-description-list__description">
+                                    <div class="pf-c-description-list__text">
+                                        ${this.provider.issuer}
+                                    </div>
+                                </dd>
+                            </div>
+                        </dl>
                     </div>
-                </section>
-                <section
-                    slot="page-changelog"
-                    data-tab-title="${t`Changelog`}"
-                    class="pf-c-page__main-section pf-m-no-padding-mobile"
-                >
-                    <div class="pf-c-card">
-                        <div class="pf-c-card__body">
-                            <ak-object-changelog
-                                targetModelPk=${this.provider.pk || ""}
-                                targetModelApp="authentik_providers_saml"
-                                targetModelName="samlprovider"
-                            >
-                            </ak-object-changelog>
-                        </div>
+                    <div class="pf-c-card__footer">
+                        <ak-forms-modal>
+                            <span slot="submit"> ${t`Update`} </span>
+                            <span slot="header"> ${t`Update SAML Provider`} </span>
+                            <ak-provider-saml-form slot="form" .instancePk=${this.provider.pk || 0}>
+                            </ak-provider-saml-form>
+                            <button slot="trigger" class="pf-c-button pf-m-primary">
+                                ${t`Edit`}
+                            </button>
+                        </ak-forms-modal>
                     </div>
-                </section>
-                ${this.provider.assignedApplicationName
-                    ? html` <section
-                          slot="page-metadata"
-                          data-tab-title="${t`Metadata`}"
-                          class="pf-c-page__main-section pf-m-no-padding-mobile"
-                      >
-                          <div class="pf-u-display-flex pf-u-justify-content-center">
-                              <div class="pf-u-w-75">
-                                  <div class="pf-c-card">
-                                      <div class="pf-c-card__body">
-                                          ${until(
-                                              new ProvidersApi(DEFAULT_CONFIG)
-                                                  .providersSamlMetadataRetrieve({
-                                                      id: this.provider.pk || 0,
-                                                  })
-                                                  .then((m) => {
-                                                      return html`<ak-codemirror
-                                                          mode="xml"
-                                                          ?readOnly=${true}
-                                                          value="${ifDefined(m.metadata)}"
-                                                      ></ak-codemirror>`;
-                                                  }),
-                                          )}
-                                      </div>
-                                      <div class="pf-c-card__footer">
-                                          <a
-                                              class="pf-c-button pf-m-primary"
-                                              target="_blank"
-                                              href=${this.provider.metadataDownloadUrl}
-                                          >
-                                              ${t`Download`}
-                                          </a>
-                                          <ak-action-button
-                                              .apiRequest=${() => {
-                                                  const fullUrl =
-                                                      window.location.origin +
-                                                      this.provider?.metadataDownloadUrl;
-                                                  return navigator.clipboard.writeText(fullUrl);
-                                              }}
-                                          >
-                                              ${t`Copy download URL`}
-                                          </ak-action-button>
-                                      </div>
-                                  </div>
+                </div>
+                <div class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl">
+                    <div class="pf-c-card__title">
+                        ${t`Related objects`}
+                    </div>
+                    <div class="pf-c-card__body">
+                        <dl class="pf-c-description-list pf-m-2-col">
+                            ${until(this.renderSigningCert())}
+                        </dl>
+                    </div>
+                </div>
+                ${
+                    this.provider.assignedApplicationName
+                        ? html`<div class="pf-c-card pf-l-grid__item pf-m-12-col">
+                              <div class="pf-c-card__title">${t`SAML Metadata`}</div>
+                              <div class="pf-c-card__body">
+                                  ${until(
+                                      new ProvidersApi(DEFAULT_CONFIG)
+                                          .providersSamlMetadataRetrieve({
+                                              id: this.provider.pk || 0,
+                                          })
+                                          .then((m) => {
+                                              return html`<ak-codemirror
+                                                  mode="xml"
+                                                  ?readOnly=${true}
+                                                  value="${ifDefined(m.metadata)}"
+                                              ></ak-codemirror>`;
+                                          }),
+                                  )}
                               </div>
-                          </div>
-                      </section>`
-                    : html``}
-            </ak-tabs>`;
+                              <div class="pf-c-card__footer">
+                                  <a
+                                      class="pf-c-button pf-m-primary"
+                                      target="_blank"
+                                      href=${this.provider.metadataDownloadUrl}
+                                  >
+                                      ${t`Download`}
+                                  </a>
+                                  <ak-action-button
+                                      .apiRequest=${() => {
+                                          const fullUrl =
+                                              window.location.origin +
+                                              this.provider?.metadataDownloadUrl;
+                                          return navigator.clipboard.writeText(fullUrl);
+                                      }}
+                                  >
+                                      ${t`Copy download URL`}
+                                  </ak-action-button>
+                              </div>
+                          </div>`
+                        : html``
+                }
+            </div>
+        </div>`;
     }
 }
diff --git a/website/docs/providers/proxy/_nginx_ingress.md b/website/docs/providers/proxy/_nginx_ingress.md
index 945dd2a51..d162b8bf9 100644
--- a/website/docs/providers/proxy/_nginx_ingress.md
+++ b/website/docs/providers/proxy/_nginx_ingress.md
@@ -11,7 +11,9 @@ spec:
     http:
       paths:
       - backend:
-          serviceName: authentik-outpost-example-outpost
+          # Or, to use an external Outpost, create an ExternalName service and reference that here.
+          # See https://kubernetes.io/docs/concepts/services-networking/service/#externalname
+          serviceName: ak-outpost-example-outpost
           servicePort: 9000
         path: /akprox
 ```
diff --git a/website/docs/providers/proxy/_nginx_proxy_manager.md b/website/docs/providers/proxy/_nginx_proxy_manager.md
index 4e4ec7159..e8ec47c9c 100644
--- a/website/docs/providers/proxy/_nginx_proxy_manager.md
+++ b/website/docs/providers/proxy/_nginx_proxy_manager.md
@@ -2,7 +2,8 @@ For Nginx Proxy Manager you can use this snippet
 
 ```
 # Increase buffer size for large headers
-# This is needed only if you get 'upstream sent too big header while reading response header from upstream' error when trying to access an application protected by goauthentik
+# This is needed only if you get 'upstream sent too big header while reading response
+# header from upstream' error when trying to access an application protected by goauthentik
 proxy_buffers 8 16k;
 proxy_buffer_size 32k;
 fastcgi_buffers 16 16k;
diff --git a/website/docs/providers/proxy/_nginx_standalone.md b/website/docs/providers/proxy/_nginx_standalone.md
index e113386b2..24885063c 100644
--- a/website/docs/providers/proxy/_nginx_standalone.md
+++ b/website/docs/providers/proxy/_nginx_standalone.md
@@ -9,7 +9,8 @@ server {
     ssl_certificate_key     /etc/ssl/private/ssl-cert-snakeoil.key;
 
     # Increase buffer size for large headers
-    # This is needed only if you get 'upstream sent too big header while reading response header from upstream' error when trying to access an application protected by goauthentik
+    # This is needed only if you get 'upstream sent too big header while reading response
+    # header from upstream' error when trying to access an application protected by goauthentik
     proxy_buffers 8 16k;
     proxy_buffer_size 32k;
     fastcgi_buffers 16 16k;
diff --git a/website/docs/providers/proxy/_traefik_ingress.md b/website/docs/providers/proxy/_traefik_ingress.md
index 3dc18778d..dd0c2236f 100644
--- a/website/docs/providers/proxy/_traefik_ingress.md
+++ b/website/docs/providers/proxy/_traefik_ingress.md
@@ -20,11 +20,9 @@ spec:
 
 Add the following settings to your IngressRoute
 
-:::warning
 By default traefik does not allow cross-namespace references for middlewares:
 
 See [here](https://doc.traefik.io/traefik/v2.4/providers/kubernetes-crd/#allowcrossnamespace) to enable it.
-:::
 
 ```yaml
 spec:
@@ -42,6 +40,8 @@ spec:
       priority: 15
       services:
         - kind: Service
-          name: authentik-outpost-example-outpost
+          # Or, to use an external Outpost, create an ExternalName service and reference that here.
+          # See https://kubernetes.io/docs/concepts/services-networking/service/#externalname
+          name: ak-outpost-example-outpost
           port: 9000
 ```