diff --git a/web/src/elements/router/Route.ts b/web/src/elements/router/Route.ts
index cafbb7740..bf4b61301 100644
--- a/web/src/elements/router/Route.ts
+++ b/web/src/elements/router/Route.ts
@@ -4,11 +4,15 @@ export const SLUG_REGEX = "[-a-zA-Z0-9_]+";
 export const ID_REGEX = "\\d+";
 export const UUID_REGEX = "[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}";
 
+export interface RouteArgs {
+    [key: string]: string;
+}
+
 export class Route {
     url: RegExp;
 
     private element?: TemplateResult;
-    private callback?: (args: { [key: string]: string }) => TemplateResult;
+    private callback?: (args: RouteArgs) => TemplateResult;
 
     constructor(url: RegExp, element?: TemplateResult) {
         this.url = url;
@@ -24,12 +28,12 @@ export class Route {
         return this;
     }
 
-    then(render: (args: { [key: string]: string }) => TemplateResult): Route {
+    then(render: (args: RouteArgs) => TemplateResult): Route {
         this.callback = render;
         return this;
     }
 
-    render(args: { [key: string]: string }): TemplateResult {
+    render(args: RouteArgs): TemplateResult {
         if (this.callback) {
             return this.callback(args);
         }
diff --git a/web/src/pages/providers/OAuth2ProviderViewPage.ts b/web/src/pages/providers/OAuth2ProviderViewPage.ts
index c2ac450ee..c58413c92 100644
--- a/web/src/pages/providers/OAuth2ProviderViewPage.ts
+++ b/web/src/pages/providers/OAuth2ProviderViewPage.ts
@@ -10,11 +10,12 @@ import "../../elements/CodeMirror";
 import "../../elements/Tabs";
 import { Page } from "../../elements/Page";
 import { convertToTitle } from "../../utils";
+import "./RelatedApplicationButton";
 
 @customElement("ak-provider-oauth2-view")
 export class OAuth2ProviderViewPage extends Page {
     pageTitle(): string {
-        return gettext(`OAuth Provider ${this.provider?.name}`);
+        return gettext(`OAuth Provider ${this.provider?.name || ""}`);
     }
     pageDescription(): string | undefined {
         return;
@@ -72,12 +73,7 @@ export class OAuth2ProviderViewPage extends Page {
                                             </dt>
                                             <dd class="pf-c-description-list__description">
                                                 <div class="pf-c-description-list__text">
-                                                    ${this.provider.assigned_application_slug ?
-                                                        html`<a href="#/applications/${this.provider.assigned_application_slug}">
-                                                            ${this.provider.assigned_application_name}
-                                                        </a>`:
-                                                        html`-`
-                                                    }
+                                                    <ak-provider-related-application .provider=${this.provider}></ak-provider-related-application>
                                                 </div>
                                             </dd>
                                         </div>
diff --git a/web/src/pages/providers/ProviderViewPage.ts b/web/src/pages/providers/ProviderViewPage.ts
index 133345a30..55a8bc6c6 100644
--- a/web/src/pages/providers/ProviderViewPage.ts
+++ b/web/src/pages/providers/ProviderViewPage.ts
@@ -12,10 +12,6 @@ import "./ProxyProviderViewPage";
 
 @customElement("ak-provider-view")
 export class ProviderViewPage extends LitElement {
-    @property()
-    set args(value: { [key: string]: number }) {
-        this.providerID = value.id;
-    }
 
     @property({type: Number})
     set providerID(value: number) {
diff --git a/web/src/pages/providers/ProxyProviderViewPage.ts b/web/src/pages/providers/ProxyProviderViewPage.ts
index f827caf2d..ab9304f4b 100644
--- a/web/src/pages/providers/ProxyProviderViewPage.ts
+++ b/web/src/pages/providers/ProxyProviderViewPage.ts
@@ -9,11 +9,12 @@ import "../../elements/buttons/SpinnerButton";
 import "../../elements/CodeMirror";
 import "../../elements/Tabs";
 import { Page } from "../../elements/Page";
+import "./RelatedApplicationButton";
 
 @customElement("ak-provider-proxy-view")
 export class ProxyProviderViewPage extends Page {
     pageTitle(): string {
-        return gettext(`Proxy Provider ${this.provider?.name}`);
+        return gettext(`Proxy Provider ${this.provider?.name || ""}`);
     }
     pageDescription(): string | undefined {
         return;
@@ -72,9 +73,7 @@ export class ProxyProviderViewPage extends Page {
                                             </dt>
                                             <dd class="pf-c-description-list__description">
                                                 <div class="pf-c-description-list__text">
-                                                    <a href="#/applications/${this.provider.assigned_application_slug}">
-                                                        ${this.provider.assigned_application_name}
-                                                    </a>
+                                                    <ak-provider-related-application .provider=${this.provider}></ak-provider-related-application>
                                                 </div>
                                             </dd>
                                         </div>
diff --git a/web/src/pages/providers/RelatedApplicationButton.ts b/web/src/pages/providers/RelatedApplicationButton.ts
new file mode 100644
index 000000000..5abe601a3
--- /dev/null
+++ b/web/src/pages/providers/RelatedApplicationButton.ts
@@ -0,0 +1,29 @@
+import { gettext } from "django";
+import { customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { Application } from "../../api/Applications";
+import { Provider } from "../../api/Providers";
+
+import "../../elements/buttons/ModalButton";
+import "../../elements/Spinner";
+
+@customElement("ak-provider-related-application")
+export class RelatedApplicationButton extends LitElement {
+
+    @property({attribute: false})
+    provider?: Provider;
+
+    render(): TemplateResult {
+        if (this.provider?.assigned_application_slug) {
+            return html`<a href="#/applications/${this.provider.assigned_application_slug}">
+                ${this.provider.assigned_application_name}
+            </a>`;
+        }
+        return html`<ak-modal-button href=${Application.adminUrl(`create/?provider=${this.provider ? this.provider.pk : ""}`)}>
+                <ak-spinner-button slot="trigger" class="pf-m-primary">
+                    ${gettext("Create")}
+                </ak-spinner-button>
+                <div slot="modal"></div>
+            </ak-modal-button>`;
+    }
+
+}
diff --git a/web/src/pages/providers/SAMLProviderViewPage.ts b/web/src/pages/providers/SAMLProviderViewPage.ts
index 5af846cbe..021f373d5 100644
--- a/web/src/pages/providers/SAMLProviderViewPage.ts
+++ b/web/src/pages/providers/SAMLProviderViewPage.ts
@@ -10,11 +10,12 @@ import "../../elements/buttons/SpinnerButton";
 import "../../elements/CodeMirror";
 import "../../elements/Tabs";
 import { Page } from "../../elements/Page";
+import "./RelatedApplicationButton";
 
 @customElement("ak-provider-saml-view")
 export class SAMLProviderViewPage extends Page {
     pageTitle(): string {
-        return gettext(`SAML Provider ${this.provider?.name}`);
+        return gettext(`SAML Provider ${this.provider?.name || ""}`);
     }
     pageDescription(): string | undefined {
         return;
@@ -73,9 +74,7 @@ export class SAMLProviderViewPage extends Page {
                                             </dt>
                                             <dd class="pf-c-description-list__description">
                                                 <div class="pf-c-description-list__text">
-                                                    <a href="#/applications/${this.provider.assigned_application_slug}">
-                                                        ${this.provider.assigned_application_name}
-                                                    </a>
+                                                    <ak-provider-related-application .provider=${this.provider}></ak-provider-related-application>
                                                 </div>
                                             </dd>
                                         </div>
diff --git a/web/src/routes.ts b/web/src/routes.ts
index e5a90026d..84ef1ad37 100644
--- a/web/src/routes.ts
+++ b/web/src/routes.ts
@@ -25,7 +25,7 @@ export const ROUTES: Route[] = [
     new Route(new RegExp("^/administration/overview$"), html`<ak-admin-overview></ak-admin-overview>`),
     new Route(new RegExp("^/providers$"), html`<ak-provider-list></ak-provider-list>`),
     new Route(new RegExp(`^/providers/(?<id>${ID_REGEX})$`)).then((args) => {
-        return html`<ak-provider-view .args=${args}></ak-provider-view>`;
+        return html`<ak-provider-view .providerID=${parseInt(args.id, 10)}></ak-provider-view>`;
     }),
     new Route(new RegExp("^/applications$"), html`<ak-application-list></ak-application-list>`),
     new Route(new RegExp(`^/applications/(?<slug>${SLUG_REGEX})$`)).then((args) => {