diff --git a/web/src/admin/applications/ApplicationForm.ts b/web/src/admin/applications/ApplicationForm.ts
index 3e2df4d3b..b3064e27b 100644
--- a/web/src/admin/applications/ApplicationForm.ts
+++ b/web/src/admin/applications/ApplicationForm.ts
@@ -1,6 +1,7 @@
 import "@goauthentik/admin/providers/ProviderWizard";
 import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
+import { first, groupBy } from "@goauthentik/common/utils";
+import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/forms/ModalForm";
@@ -20,6 +21,7 @@ import {
     CoreApi,
     PolicyEngineMode,
     Provider,
+    ProvidersAllListRequest,
     ProvidersApi,
 } from "@goauthentik/api";
 
@@ -78,29 +80,6 @@ export class ApplicationForm extends ModelForm<Application, string> {
         return app;
     };
 
-    groupProviders(providers: Provider[]): TemplateResult {
-        const m = new Map<string, Provider[]>();
-        providers.forEach((p) => {
-            if (!m.has(p.verboseName || "")) {
-                m.set(p.verboseName || "", []);
-            }
-            const tProviders = m.get(p.verboseName || "") || [];
-            tProviders.push(p);
-        });
-        return html`
-            ${Array.from(m).map(([group, providers]) => {
-                return html`<optgroup label=${group}>
-                    ${providers.map((p) => {
-                        const selected = this.instance?.provider === p.pk || this.provider === p.pk;
-                        return html`<option ?selected=${selected} value=${ifDefined(p.pk)}>
-                            ${p.name}
-                        </option>`;
-                    })}
-                </optgroup>`;
-            })}
-        `;
-    }
-
     renderForm(): TemplateResult {
         return html`<form class="pf-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
@@ -132,17 +111,32 @@ export class ApplicationForm extends ModelForm<Application, string> {
                 </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${t`Provider`} name="provider">
-                <select class="pf-c-form-control">
-                    <option value="" ?selected=${this.instance?.provider === undefined}>
-                        ---------
-                    </option>
-                    ${until(
-                        new ProvidersApi(DEFAULT_CONFIG).providersAllList({}).then((providers) => {
-                            return this.groupProviders(providers.results);
-                        }),
-                        html`<option>${t`Loading...`}</option>`,
-                    )}
-                </select>
+                <ak-search-select
+                    .fetchObjects=${async (query?: string): Promise<Provider[]> => {
+                        const args: ProvidersAllListRequest = {
+                            ordering: "name",
+                        };
+                        if (query !== undefined) {
+                            args.search = query;
+                        }
+                        const items = await new ProvidersApi(DEFAULT_CONFIG).providersAllList(args);
+                        return items.results;
+                    }}
+                    .renderElement=${(item: Provider): string => {
+                        return item.name;
+                    }}
+                    .value=${(item: Provider | undefined): number | undefined => {
+                        return item?.pk;
+                    }}
+                    .groupBy=${(items: Provider[]) => {
+                        return groupBy(items, (item) => item.verboseName);
+                    }}
+                    .selected=${(item: Provider): boolean => {
+                        return this.instance?.provider === item.pk;
+                    }}
+                    ?blankable=${true}
+                >
+                </ak-search-select>
                 <p class="pf-c-form__helper-text">
                     ${t`Select a provider that this application should use. Alternatively, create a new provider.`}
                 </p>
diff --git a/web/src/admin/applications/ApplicationListPage.ts b/web/src/admin/applications/ApplicationListPage.ts
index 203b91720..6e7a8b044 100644
--- a/web/src/admin/applications/ApplicationListPage.ts
+++ b/web/src/admin/applications/ApplicationListPage.ts
@@ -70,6 +70,9 @@ export class ApplicationListPage extends TablePage<Application> {
                     text-align: center;
                     vertical-align: middle;
                 }
+                .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
+                    margin-left: calc(var(--pf-c-sidebar__main--child--MarginLeft) / 2);
+                }
             `,
         );
     }
diff --git a/web/src/admin/applications/wizard/oauth/TypeOAuthCodeApplicationWizardPage.ts b/web/src/admin/applications/wizard/oauth/TypeOAuthCodeApplicationWizardPage.ts
index 813f9e2be..15ded0e83 100644
--- a/web/src/admin/applications/wizard/oauth/TypeOAuthCodeApplicationWizardPage.ts
+++ b/web/src/admin/applications/wizard/oauth/TypeOAuthCodeApplicationWizardPage.ts
@@ -50,7 +50,7 @@ export class TypeOAuthCodeApplicationWizardPage extends WizardFormPage {
                 <ak-search-select
                     .fetchObjects=${async (query?: string): Promise<Flow[]> => {
                         const args: FlowsInstancesListRequest = {
-                            ordering: "name",
+                            ordering: "slug",
                             designation: FlowsInstancesListDesignationEnum.Authorization,
                         };
                         if (query !== undefined) {
diff --git a/web/src/admin/events/TransportForm.ts b/web/src/admin/events/TransportForm.ts
index 82a55f0a8..bfc0fcb76 100644
--- a/web/src/admin/events/TransportForm.ts
+++ b/web/src/admin/events/TransportForm.ts
@@ -1,5 +1,6 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
+import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 
@@ -8,13 +9,14 @@ import { t } from "@lingui/macro";
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { until } from "lit/directives/until.js";
 
 import {
     EventsApi,
     NotificationTransport,
     NotificationTransportModeEnum,
+    NotificationWebhookMapping,
     PropertymappingsApi,
+    PropertymappingsNotificationListRequest,
 } from "@goauthentik/api";
 
 @customElement("ak-event-transport-form")
@@ -132,26 +134,33 @@ export class TransportForm extends ModelForm<NotificationTransport, string> {
                 label=${t`Webhook Mapping`}
                 name="webhookMapping"
             >
-                <select class="pf-c-form-control">
-                    <option value="" ?selected=${this.instance?.webhookMapping === undefined}>
-                        ---------
-                    </option>
-                    ${until(
-                        new PropertymappingsApi(DEFAULT_CONFIG)
-                            .propertymappingsNotificationList({})
-                            .then((mappings) => {
-                                return mappings.results.map((mapping) => {
-                                    return html`<option
-                                        value=${ifDefined(mapping.pk)}
-                                        ?selected=${this.instance?.webhookMapping === mapping.pk}
-                                    >
-                                        ${mapping.name}
-                                    </option>`;
-                                });
-                            }),
-                        html`<option>${t`Loading...`}</option>`,
-                    )}
-                </select>
+                <ak-search-select
+                    .fetchObjects=${async (
+                        query?: string,
+                    ): Promise<NotificationWebhookMapping[]> => {
+                        const args: PropertymappingsNotificationListRequest = {
+                            ordering: "name",
+                        };
+                        if (query !== undefined) {
+                            args.search = query;
+                        }
+                        const items = await new PropertymappingsApi(
+                            DEFAULT_CONFIG,
+                        ).propertymappingsNotificationList(args);
+                        return items.results;
+                    }}
+                    .renderElement=${(item: NotificationWebhookMapping): string => {
+                        return item.name;
+                    }}
+                    .value=${(item: NotificationWebhookMapping | undefined): string | undefined => {
+                        return item?.pk;
+                    }}
+                    .selected=${(item: NotificationWebhookMapping): boolean => {
+                        return this.instance?.webhookMapping === item.pk;
+                    }}
+                    ?blankable=${true}
+                >
+                </ak-search-select>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="sendOnce">
                 <div class="pf-c-check">
diff --git a/web/src/admin/outposts/OutpostForm.ts b/web/src/admin/outposts/OutpostForm.ts
index 2c85bf1ff..a213bf5bc 100644
--- a/web/src/admin/outposts/OutpostForm.ts
+++ b/web/src/admin/outposts/OutpostForm.ts
@@ -1,6 +1,8 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { docLink } from "@goauthentik/common/global";
+import { groupBy } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
+import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 import YAML from "yaml";
@@ -12,7 +14,14 @@ import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { until } from "lit/directives/until.js";
 
-import { Outpost, OutpostTypeEnum, OutpostsApi, ProvidersApi } from "@goauthentik/api";
+import {
+    Outpost,
+    OutpostTypeEnum,
+    OutpostsApi,
+    OutpostsServiceConnectionsAllListRequest,
+    ProvidersApi,
+    ServiceConnection,
+} from "@goauthentik/api";
 
 @customElement("ak-outpost-form")
 export class OutpostForm extends ModelForm<Outpost, string> {
@@ -134,32 +143,38 @@ export class OutpostForm extends ModelForm<Outpost, string> {
                 </select>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${t`Integration`} name="serviceConnection">
-                <select class="pf-c-form-control">
-                    <option value="" ?selected=${this.instance?.serviceConnection === undefined}>
-                        ---------
-                    </option>
-                    ${until(
-                        new OutpostsApi(DEFAULT_CONFIG)
-                            .outpostsServiceConnectionsAllList({
-                                ordering: "name",
-                            })
-                            .then((scs) => {
-                                return scs.results.map((sc) => {
-                                    let selected = this.instance?.serviceConnection === sc.pk;
-                                    if (scs.results.length === 1 && !this.instance) {
-                                        selected = true;
-                                    }
-                                    return html`<option
-                                        value=${ifDefined(sc.pk)}
-                                        ?selected=${selected}
-                                    >
-                                        ${sc.name} (${sc.verboseName})
-                                    </option>`;
-                                });
-                            }),
-                        html`<option>${t`Loading...`}</option>`,
-                    )}
-                </select>
+                <ak-search-select
+                    .fetchObjects=${async (query?: string): Promise<ServiceConnection[]> => {
+                        const args: OutpostsServiceConnectionsAllListRequest = {
+                            ordering: "name",
+                        };
+                        if (query !== undefined) {
+                            args.search = query;
+                        }
+                        const items = await new OutpostsApi(
+                            DEFAULT_CONFIG,
+                        ).outpostsServiceConnectionsAllList(args);
+                        return items.results;
+                    }}
+                    .renderElement=${(item: ServiceConnection): string => {
+                        return item.name;
+                    }}
+                    .value=${(item: ServiceConnection | undefined): string | undefined => {
+                        return item?.pk;
+                    }}
+                    .groupBy=${(items: ServiceConnection[]) => {
+                        return groupBy(items, (item) => item.verboseName);
+                    }}
+                    .selected=${(item: ServiceConnection, items: ServiceConnection[]): boolean => {
+                        let selected = this.instance?.serviceConnection === sc.pk;
+                        if (items.length === 1 && !this.instance) {
+                            selected = true;
+                        }
+                        return selected;
+                    }}
+                    ?blankable=${true}
+                >
+                </ak-search-select>
                 <p class="pf-c-form__helper-text">
                     ${t`Selecting an integration enables the management of the outpost by authentik.`}
                 </p>
diff --git a/web/src/admin/outposts/ServiceConnectionDockerForm.ts b/web/src/admin/outposts/ServiceConnectionDockerForm.ts
index cfaf32237..8b9c1b3ab 100644
--- a/web/src/admin/outposts/ServiceConnectionDockerForm.ts
+++ b/web/src/admin/outposts/ServiceConnectionDockerForm.ts
@@ -1,5 +1,6 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
+import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 
@@ -8,9 +9,14 @@ import { t } from "@lingui/macro";
 import { TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { until } from "lit/directives/until.js";
 
-import { CryptoApi, DockerServiceConnection, OutpostsApi } from "@goauthentik/api";
+import {
+    CertificateKeyPair,
+    CryptoApi,
+    CryptoCertificatekeypairsListRequest,
+    DockerServiceConnection,
+    OutpostsApi,
+} from "@goauthentik/api";
 
 @customElement("ak-service-connection-docker-form")
 export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnection, string> {
@@ -79,34 +85,33 @@ export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnecti
                 label=${t`TLS Verification Certificate`}
                 name="tlsVerification"
             >
-                <select class="pf-c-form-control">
-                    <option value="" ?selected=${this.instance?.tlsVerification === undefined}>
-                        ---------
-                    </option>
-                    ${until(
-                        new CryptoApi(DEFAULT_CONFIG)
-                            .cryptoCertificatekeypairsList({
-                                ordering: "name",
-                                includeDetails: false,
-                            })
-                            .then((certs) => {
-                                return certs.results.map((cert) => {
-                                    return html`<option
-                                        value=${ifDefined(cert.pk)}
-                                        ?selected=${this.instance?.tlsVerification === cert.pk}
-                                    >
-                                        ${cert.name}
-                                    </option>`;
-                                });
-                            }),
-                        html`<option
-                            value=${ifDefined(this.instance?.tlsVerification || undefined)}
-                            ?selected=${this.instance?.tlsVerification !== undefined}
-                        >
-                            ${t`Loading...`}
-                        </option>`,
-                    )}
-                </select>
+                <ak-search-select
+                    .fetchObjects=${async (query?: string): Promise<CertificateKeyPair[]> => {
+                        const args: CryptoCertificatekeypairsListRequest = {
+                            ordering: "name",
+                            hasKey: true,
+                            includeDetails: false,
+                        };
+                        if (query !== undefined) {
+                            args.search = query;
+                        }
+                        const certificates = await new CryptoApi(
+                            DEFAULT_CONFIG,
+                        ).cryptoCertificatekeypairsList(args);
+                        return certificates.results;
+                    }}
+                    .renderElement=${(item: CertificateKeyPair): string => {
+                        return item.name;
+                    }}
+                    .value=${(item: CertificateKeyPair | undefined): string | undefined => {
+                        return item?.pk;
+                    }}
+                    .selected=${(item: CertificateKeyPair): boolean => {
+                        return this.instance?.tlsVerification === item.pk;
+                    }}
+                    ?blankable=${true}
+                >
+                </ak-search-select>
                 <p class="pf-c-form__helper-text">
                     ${t`CA which the endpoint's Certificate is verified against. Can be left empty for no validation.`}
                 </p>
@@ -115,34 +120,33 @@ export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnecti
                 label=${t`TLS Authentication Certificate/SSH Keypair`}
                 name="tlsAuthentication"
             >
-                <select class="pf-c-form-control">
-                    <option value="" ?selected=${this.instance?.tlsAuthentication === undefined}>
-                        ---------
-                    </option>
-                    ${until(
-                        new CryptoApi(DEFAULT_CONFIG)
-                            .cryptoCertificatekeypairsList({
-                                ordering: "name",
-                                includeDetails: false,
-                            })
-                            .then((certs) => {
-                                return certs.results.map((cert) => {
-                                    return html`<option
-                                        value=${ifDefined(cert.pk)}
-                                        ?selected=${this.instance?.tlsAuthentication === cert.pk}
-                                    >
-                                        ${cert.name}
-                                    </option>`;
-                                });
-                            }),
-                        html`<option
-                            value=${ifDefined(this.instance?.tlsAuthentication || undefined)}
-                            ?selected=${this.instance?.tlsAuthentication !== undefined}
-                        >
-                            ${t`Loading...`}
-                        </option>`,
-                    )}
-                </select>
+                <ak-search-select
+                    .fetchObjects=${async (query?: string): Promise<CertificateKeyPair[]> => {
+                        const args: CryptoCertificatekeypairsListRequest = {
+                            ordering: "name",
+                            hasKey: true,
+                            includeDetails: false,
+                        };
+                        if (query !== undefined) {
+                            args.search = query;
+                        }
+                        const certificates = await new CryptoApi(
+                            DEFAULT_CONFIG,
+                        ).cryptoCertificatekeypairsList(args);
+                        return certificates.results;
+                    }}
+                    .renderElement=${(item: CertificateKeyPair): string => {
+                        return item.name;
+                    }}
+                    .value=${(item: CertificateKeyPair | undefined): string | undefined => {
+                        return item?.pk;
+                    }}
+                    .selected=${(item: CertificateKeyPair): boolean => {
+                        return this.instance?.tlsAuthentication === item.pk;
+                    }}
+                    ?blankable=${true}
+                >
+                </ak-search-select>
                 <p class="pf-c-form__helper-text">
                     ${t`Certificate/Key used for authentication. Can be left empty for no authentication.`}
                 </p>
diff --git a/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts b/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts
index 57da744f4..0d565067e 100644
--- a/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts
+++ b/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts
@@ -85,7 +85,7 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
                 <ak-search-select
                     .fetchObjects=${async (query?: string): Promise<Flow[]> => {
                         const args: FlowsInstancesListRequest = {
-                            ordering: "name",
+                            ordering: "slug",
                             designation: FlowsInstancesListDesignationEnum.Authorization,
                         };
                         if (query !== undefined) {
@@ -103,6 +103,9 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
                     .value=${(flow: Flow | undefined): string | undefined => {
                         return flow?.pk;
                     }}
+                    .selected=${(flow: Flow): boolean => {
+                        return flow.pk === this.instance?.authorizationFlow;
+                    }}
                 >
                 </ak-search-select>
                 <p class="pf-c-form__helper-text">
diff --git a/web/src/admin/providers/proxy/ProxyProviderForm.ts b/web/src/admin/providers/proxy/ProxyProviderForm.ts
index 8e9c0b449..830b60cc8 100644
--- a/web/src/admin/providers/proxy/ProxyProviderForm.ts
+++ b/web/src/admin/providers/proxy/ProxyProviderForm.ts
@@ -301,7 +301,7 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
                 <ak-search-select
                     .fetchObjects=${async (query?: string): Promise<Flow[]> => {
                         const args: FlowsInstancesListRequest = {
-                            ordering: "name",
+                            ordering: "slug",
                             designation: FlowsInstancesListDesignationEnum.Authorization,
                         };
                         if (query !== undefined) {
diff --git a/web/src/admin/providers/saml/SAMLProviderForm.ts b/web/src/admin/providers/saml/SAMLProviderForm.ts
index 8a975486e..05b75e83c 100644
--- a/web/src/admin/providers/saml/SAMLProviderForm.ts
+++ b/web/src/admin/providers/saml/SAMLProviderForm.ts
@@ -75,7 +75,7 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
                 <ak-search-select
                     .fetchObjects=${async (query?: string): Promise<Flow[]> => {
                         const args: FlowsInstancesListRequest = {
-                            ordering: "name",
+                            ordering: "slug",
                             designation: FlowsInstancesListDesignationEnum.Authorization,
                         };
                         if (query !== undefined) {
diff --git a/web/src/admin/providers/saml/SAMLProviderImportForm.ts b/web/src/admin/providers/saml/SAMLProviderImportForm.ts
index 2d0760820..d8a948d43 100644
--- a/web/src/admin/providers/saml/SAMLProviderImportForm.ts
+++ b/web/src/admin/providers/saml/SAMLProviderImportForm.ts
@@ -50,7 +50,7 @@ export class SAMLProviderImportForm extends Form<SAMLProvider> {
                 <ak-search-select
                     .fetchObjects=${async (query?: string): Promise<Flow[]> => {
                         const args: FlowsInstancesListRequest = {
-                            ordering: "name",
+                            ordering: "slug",
                             designation: FlowsInstancesListDesignationEnum.Authorization,
                         };
                         if (query !== undefined) {
diff --git a/web/src/admin/sources/saml/SAMLSourceForm.ts b/web/src/admin/sources/saml/SAMLSourceForm.ts
index a8e1ad1a8..cf41a1313 100644
--- a/web/src/admin/sources/saml/SAMLSourceForm.ts
+++ b/web/src/admin/sources/saml/SAMLSourceForm.ts
@@ -20,8 +20,10 @@ import {
     CryptoApi,
     CryptoCertificatekeypairsListRequest,
     DigestAlgorithmEnum,
+    Flow,
     FlowsApi,
     FlowsInstancesListDesignationEnum,
+    FlowsInstancesListRequest,
     NameIdPolicyEnum,
     SAMLSource,
     SignatureAlgorithmEnum,
@@ -478,42 +480,44 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
                         ?required=${true}
                         name="preAuthenticationFlow"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value=""
-                                ?selected=${this.instance?.preAuthenticationFlow === undefined}
-                            >
-                                ---------
-                            </option>
-                            ${until(
-                                new FlowsApi(DEFAULT_CONFIG)
-                                    .flowsInstancesList({
-                                        ordering: "slug",
-                                        designation:
-                                            FlowsInstancesListDesignationEnum.StageConfiguration,
-                                    })
-                                    .then((flows) => {
-                                        return flows.results.map((flow) => {
-                                            let selected =
-                                                this.instance?.preAuthenticationFlow === flow.pk;
-                                            if (
-                                                !this.instance?.pk &&
-                                                !this.instance?.preAuthenticationFlow &&
-                                                flow.slug === "default-source-pre-authentication"
-                                            ) {
-                                                selected = true;
-                                            }
-                                            return html`<option
-                                                value=${ifDefined(flow.pk)}
-                                                ?selected=${selected}
-                                            >
-                                                ${flow.name} (${flow.slug})
-                                            </option>`;
-                                        });
-                                    }),
-                                html`<option>${t`Loading...`}</option>`,
-                            )}
-                        </select>
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Flow[]> => {
+                                const args: FlowsInstancesListRequest = {
+                                    ordering: "slug",
+                                    designation:
+                                        FlowsInstancesListDesignationEnum.StageConfiguration,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
+                                    args,
+                                );
+                                return flows.results;
+                            }}
+                            .renderElement=${(flow: Flow): string => {
+                                return flow.name;
+                            }}
+                            .renderDescription=${(flow: Flow): string => {
+                                return flow.slug;
+                            }}
+                            .value=${(flow: Flow | undefined): string | undefined => {
+                                return flow?.pk;
+                            }}
+                            .selected=${(flow: Flow): boolean => {
+                                let selected = this.instance?.preAuthenticationFlow === flow.pk;
+                                if (
+                                    !this.instance?.pk &&
+                                    !this.instance?.preAuthenticationFlow &&
+                                    flow.slug === "default-source-pre-authentication"
+                                ) {
+                                    selected = true;
+                                }
+                                return selected;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
                         <p class="pf-c-form__helper-text">${t`Flow used before authentication.`}</p>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
@@ -521,42 +525,43 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
                         ?required=${true}
                         name="authenticationFlow"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value=""
-                                ?selected=${this.instance?.authenticationFlow === undefined}
-                            >
-                                ---------
-                            </option>
-                            ${until(
-                                new FlowsApi(DEFAULT_CONFIG)
-                                    .flowsInstancesList({
-                                        ordering: "slug",
-                                        designation:
-                                            FlowsInstancesListDesignationEnum.Authentication,
-                                    })
-                                    .then((flows) => {
-                                        return flows.results.map((flow) => {
-                                            let selected =
-                                                this.instance?.authenticationFlow === flow.pk;
-                                            if (
-                                                !this.instance?.pk &&
-                                                !this.instance?.authenticationFlow &&
-                                                flow.slug === "default-source-authentication"
-                                            ) {
-                                                selected = true;
-                                            }
-                                            return html`<option
-                                                value=${ifDefined(flow.pk)}
-                                                ?selected=${selected}
-                                            >
-                                                ${flow.name} (${flow.slug})
-                                            </option>`;
-                                        });
-                                    }),
-                                html`<option>${t`Loading...`}</option>`,
-                            )}
-                        </select>
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Flow[]> => {
+                                const args: FlowsInstancesListRequest = {
+                                    ordering: "slug",
+                                    designation: FlowsInstancesListDesignationEnum.Authentication,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
+                                    args,
+                                );
+                                return flows.results;
+                            }}
+                            .renderElement=${(flow: Flow): string => {
+                                return flow.name;
+                            }}
+                            .renderDescription=${(flow: Flow): string => {
+                                return flow.slug;
+                            }}
+                            .value=${(flow: Flow | undefined): string | undefined => {
+                                return flow?.pk;
+                            }}
+                            .selected=${(flow: Flow): boolean => {
+                                let selected = this.instance?.authenticationFlow === flow.pk;
+                                if (
+                                    !this.instance?.pk &&
+                                    !this.instance?.authenticationFlow &&
+                                    flow.slug === "default-source-authentication"
+                                ) {
+                                    selected = true;
+                                }
+                                return selected;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
                         <p class="pf-c-form__helper-text">
                             ${t`Flow to use when authenticating existing users.`}
                         </p>
@@ -566,41 +571,43 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
                         ?required=${true}
                         name="enrollmentFlow"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value=""
-                                ?selected=${this.instance?.enrollmentFlow === undefined}
-                            >
-                                ---------
-                            </option>
-                            ${until(
-                                new FlowsApi(DEFAULT_CONFIG)
-                                    .flowsInstancesList({
-                                        ordering: "slug",
-                                        designation: FlowsInstancesListDesignationEnum.Enrollment,
-                                    })
-                                    .then((flows) => {
-                                        return flows.results.map((flow) => {
-                                            let selected =
-                                                this.instance?.enrollmentFlow === flow.pk;
-                                            if (
-                                                !this.instance?.pk &&
-                                                !this.instance?.enrollmentFlow &&
-                                                flow.slug === "default-source-enrollment"
-                                            ) {
-                                                selected = true;
-                                            }
-                                            return html`<option
-                                                value=${ifDefined(flow.pk)}
-                                                ?selected=${selected}
-                                            >
-                                                ${flow.name} (${flow.slug})
-                                            </option>`;
-                                        });
-                                    }),
-                                html`<option>${t`Loading...`}</option>`,
-                            )}
-                        </select>
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Flow[]> => {
+                                const args: FlowsInstancesListRequest = {
+                                    ordering: "slug",
+                                    designation: FlowsInstancesListDesignationEnum.Enrollment,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
+                                    args,
+                                );
+                                return flows.results;
+                            }}
+                            .renderElement=${(flow: Flow): string => {
+                                return flow.name;
+                            }}
+                            .renderDescription=${(flow: Flow): string => {
+                                return flow.slug;
+                            }}
+                            .value=${(flow: Flow | undefined): string | undefined => {
+                                return flow?.pk;
+                            }}
+                            .selected=${(flow: Flow): boolean => {
+                                let selected = this.instance?.enrollmentFlow === flow.pk;
+                                if (
+                                    !this.instance?.pk &&
+                                    !this.instance?.enrollmentFlow &&
+                                    flow.slug === "default-source-enrollment"
+                                ) {
+                                    selected = true;
+                                }
+                                return selected;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
                         <p class="pf-c-form__helper-text">
                             ${t`Flow to use when enrolling new users.`}
                         </p>
diff --git a/web/src/admin/stages/invitation/InvitationForm.ts b/web/src/admin/stages/invitation/InvitationForm.ts
index 31a4fa788..045ecf12c 100644
--- a/web/src/admin/stages/invitation/InvitationForm.ts
+++ b/web/src/admin/stages/invitation/InvitationForm.ts
@@ -78,7 +78,7 @@ export class InvitationForm extends ModelForm<Invitation, string> {
                 <ak-search-select
                     .fetchObjects=${async (query?: string): Promise<Flow[]> => {
                         const args: FlowsInstancesListRequest = {
-                            ordering: "name",
+                            ordering: "slug",
                             designation: FlowsInstancesListDesignationEnum.Enrollment,
                         };
                         if (query !== undefined) {
diff --git a/web/src/admin/tenants/TenantForm.ts b/web/src/admin/tenants/TenantForm.ts
index aebe6e8f7..905b5eae5 100644
--- a/web/src/admin/tenants/TenantForm.ts
+++ b/web/src/admin/tenants/TenantForm.ts
@@ -12,15 +12,16 @@ import { t } from "@lingui/macro";
 
 import { TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators.js";
-import { until } from "lit/directives/until.js";
 
 import {
     CertificateKeyPair,
     CoreApi,
     CryptoApi,
     CryptoCertificatekeypairsListRequest,
+    Flow,
     FlowsApi,
     FlowsInstancesListDesignationEnum,
+    FlowsInstancesListRequest,
     Tenant,
 } from "@goauthentik/api";
 
@@ -144,35 +145,35 @@ export class TenantForm extends ModelForm<Tenant, string> {
                         label=${t`Authentication flow`}
                         name="flowAuthentication"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value=""
-                                ?selected=${this.instance?.flowAuthentication === undefined}
-                            >
-                                ---------
-                            </option>
-                            ${until(
-                                new FlowsApi(DEFAULT_CONFIG)
-                                    .flowsInstancesList({
-                                        ordering: "slug",
-                                        designation:
-                                            FlowsInstancesListDesignationEnum.Authentication,
-                                    })
-                                    .then((flows) => {
-                                        return flows.results.map((flow) => {
-                                            const selected =
-                                                this.instance?.flowAuthentication === flow.pk;
-                                            return html`<option
-                                                value=${flow.pk}
-                                                ?selected=${selected}
-                                            >
-                                                ${flow.name} (${flow.slug})
-                                            </option>`;
-                                        });
-                                    }),
-                                html`<option>${t`Loading...`}</option>`,
-                            )}
-                        </select>
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Flow[]> => {
+                                const args: FlowsInstancesListRequest = {
+                                    ordering: "slug",
+                                    designation: FlowsInstancesListDesignationEnum.Authentication,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
+                                    args,
+                                );
+                                return flows.results;
+                            }}
+                            .renderElement=${(flow: Flow): string => {
+                                return flow.name;
+                            }}
+                            .renderDescription=${(flow: Flow): string => {
+                                return flow.slug;
+                            }}
+                            .value=${(flow: Flow | undefined): string | undefined => {
+                                return flow?.pk;
+                            }}
+                            .selected=${(flow: Flow): boolean => {
+                                return this.instance?.flowAuthentication === flow.pk;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
                         <p class="pf-c-form__helper-text">
                             ${t`Flow used to authenticate users. If left empty, the first applicable flow sorted by the slug is used.`}
                         </p>
@@ -181,64 +182,70 @@ export class TenantForm extends ModelForm<Tenant, string> {
                         label=${t`Invalidation flow`}
                         name="flowInvalidation"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value=""
-                                ?selected=${this.instance?.flowInvalidation === undefined}
-                            >
-                                ---------
-                            </option>
-                            ${until(
-                                new FlowsApi(DEFAULT_CONFIG)
-                                    .flowsInstancesList({
-                                        ordering: "slug",
-                                        designation: FlowsInstancesListDesignationEnum.Invalidation,
-                                    })
-                                    .then((flows) => {
-                                        return flows.results.map((flow) => {
-                                            const selected =
-                                                this.instance?.flowInvalidation === flow.pk;
-                                            return html`<option
-                                                value=${flow.pk}
-                                                ?selected=${selected}
-                                            >
-                                                ${flow.name} (${flow.slug})
-                                            </option>`;
-                                        });
-                                    }),
-                                html`<option>${t`Loading...`}</option>`,
-                            )}
-                        </select>
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Flow[]> => {
+                                const args: FlowsInstancesListRequest = {
+                                    ordering: "slug",
+                                    designation: FlowsInstancesListDesignationEnum.Invalidation,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
+                                    args,
+                                );
+                                return flows.results;
+                            }}
+                            .renderElement=${(flow: Flow): string => {
+                                return flow.name;
+                            }}
+                            .renderDescription=${(flow: Flow): string => {
+                                return flow.slug;
+                            }}
+                            .value=${(flow: Flow | undefined): string | undefined => {
+                                return flow?.pk;
+                            }}
+                            .selected=${(flow: Flow): boolean => {
+                                return this.instance?.flowInvalidation === flow.pk;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
+
                         <p class="pf-c-form__helper-text">
                             ${t`Flow used to logout. If left empty, the first applicable flow sorted by the slug is used.`}
                         </p>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal label=${t`Recovery flow`} name="flowRecovery">
-                        <select class="pf-c-form-control">
-                            <option value="" ?selected=${this.instance?.flowRecovery === undefined}>
-                                ---------
-                            </option>
-                            ${until(
-                                new FlowsApi(DEFAULT_CONFIG)
-                                    .flowsInstancesList({
-                                        ordering: "slug",
-                                        designation: FlowsInstancesListDesignationEnum.Recovery,
-                                    })
-                                    .then((flows) => {
-                                        return flows.results.map((flow) => {
-                                            const selected =
-                                                this.instance?.flowRecovery === flow.pk;
-                                            return html`<option
-                                                value=${flow.pk}
-                                                ?selected=${selected}
-                                            >
-                                                ${flow.name} (${flow.slug})
-                                            </option>`;
-                                        });
-                                    }),
-                                html`<option>${t`Loading...`}</option>`,
-                            )}
-                        </select>
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Flow[]> => {
+                                const args: FlowsInstancesListRequest = {
+                                    ordering: "slug",
+                                    designation: FlowsInstancesListDesignationEnum.Recovery,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
+                                    args,
+                                );
+                                return flows.results;
+                            }}
+                            .renderElement=${(flow: Flow): string => {
+                                return flow.name;
+                            }}
+                            .renderDescription=${(flow: Flow): string => {
+                                return flow.slug;
+                            }}
+                            .value=${(flow: Flow | undefined): string | undefined => {
+                                return flow?.pk;
+                            }}
+                            .selected=${(flow: Flow): boolean => {
+                                return this.instance?.flowRecovery === flow.pk;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
                         <p class="pf-c-form__helper-text">
                             ${t`Recovery flow. If left empty, the first applicable flow sorted by the slug is used.`}
                         </p>
@@ -247,34 +254,35 @@ export class TenantForm extends ModelForm<Tenant, string> {
                         label=${t`Unenrollment flow`}
                         name="flowUnenrollment"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value=""
-                                ?selected=${this.instance?.flowUnenrollment === undefined}
-                            >
-                                ---------
-                            </option>
-                            ${until(
-                                new FlowsApi(DEFAULT_CONFIG)
-                                    .flowsInstancesList({
-                                        ordering: "slug",
-                                        designation: FlowsInstancesListDesignationEnum.Unenrollment,
-                                    })
-                                    .then((flows) => {
-                                        return flows.results.map((flow) => {
-                                            const selected =
-                                                this.instance?.flowUnenrollment === flow.pk;
-                                            return html`<option
-                                                value=${flow.pk}
-                                                ?selected=${selected}
-                                            >
-                                                ${flow.name} (${flow.slug})
-                                            </option>`;
-                                        });
-                                    }),
-                                html`<option>${t`Loading...`}</option>`,
-                            )}
-                        </select>
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Flow[]> => {
+                                const args: FlowsInstancesListRequest = {
+                                    ordering: "slug",
+                                    designation: FlowsInstancesListDesignationEnum.Unenrollment,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
+                                    args,
+                                );
+                                return flows.results;
+                            }}
+                            .renderElement=${(flow: Flow): string => {
+                                return flow.name;
+                            }}
+                            .renderDescription=${(flow: Flow): string => {
+                                return flow.slug;
+                            }}
+                            .value=${(flow: Flow | undefined): string | undefined => {
+                                return flow?.pk;
+                            }}
+                            .selected=${(flow: Flow): boolean => {
+                                return this.instance?.flowUnenrollment === flow.pk;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
                         <p class="pf-c-form__helper-text">
                             ${t`If set, users are able to unenroll themselves using this flow. If no flow is set, option is not shown.`}
                         </p>
@@ -283,69 +291,71 @@ export class TenantForm extends ModelForm<Tenant, string> {
                         label=${t`User settings flow`}
                         name="flowUserSettings"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value=""
-                                ?selected=${this.instance?.flowUserSettings === undefined}
-                            >
-                                ---------
-                            </option>
-                            ${until(
-                                new FlowsApi(DEFAULT_CONFIG)
-                                    .flowsInstancesList({
-                                        ordering: "slug",
-                                        designation:
-                                            FlowsInstancesListDesignationEnum.StageConfiguration,
-                                    })
-                                    .then((flows) => {
-                                        return flows.results.map((flow) => {
-                                            const selected =
-                                                this.instance?.flowUserSettings === flow.pk;
-                                            return html`<option
-                                                value=${flow.pk}
-                                                ?selected=${selected}
-                                            >
-                                                ${flow.name} (${flow.slug})
-                                            </option>`;
-                                        });
-                                    }),
-                                html`<option>${t`Loading...`}</option>`,
-                            )}
-                        </select>
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Flow[]> => {
+                                const args: FlowsInstancesListRequest = {
+                                    ordering: "slug",
+                                    designation:
+                                        FlowsInstancesListDesignationEnum.StageConfiguration,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
+                                    args,
+                                );
+                                return flows.results;
+                            }}
+                            .renderElement=${(flow: Flow): string => {
+                                return flow.name;
+                            }}
+                            .renderDescription=${(flow: Flow): string => {
+                                return flow.slug;
+                            }}
+                            .value=${(flow: Flow | undefined): string | undefined => {
+                                return flow?.pk;
+                            }}
+                            .selected=${(flow: Flow): boolean => {
+                                return this.instance?.flowUserSettings === flow.pk;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
                         <p class="pf-c-form__helper-text">
                             ${t`If set, users are able to configure details of their profile.`}
                         </p>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal label=${t`Device code flow`} name="flowDeviceCode">
-                        <select class="pf-c-form-control">
-                            <option
-                                value=""
-                                ?selected=${this.instance?.flowDeviceCode === undefined}
-                            >
-                                ---------
-                            </option>
-                            ${until(
-                                new FlowsApi(DEFAULT_CONFIG)
-                                    .flowsInstancesList({
-                                        ordering: "slug",
-                                        designation:
-                                            FlowsInstancesListDesignationEnum.StageConfiguration,
-                                    })
-                                    .then((flows) => {
-                                        return flows.results.map((flow) => {
-                                            const selected =
-                                                this.instance?.flowDeviceCode === flow.pk;
-                                            return html`<option
-                                                value=${flow.pk}
-                                                ?selected=${selected}
-                                            >
-                                                ${flow.name} (${flow.slug})
-                                            </option>`;
-                                        });
-                                    }),
-                                html`<option>${t`Loading...`}</option>`,
-                            )}
-                        </select>
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Flow[]> => {
+                                const args: FlowsInstancesListRequest = {
+                                    ordering: "slug",
+                                    designation:
+                                        FlowsInstancesListDesignationEnum.StageConfiguration,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
+                                    args,
+                                );
+                                return flows.results;
+                            }}
+                            .renderElement=${(flow: Flow): string => {
+                                return flow.name;
+                            }}
+                            .renderDescription=${(flow: Flow): string => {
+                                return flow.slug;
+                            }}
+                            .value=${(flow: Flow | undefined): string | undefined => {
+                                return flow?.pk;
+                            }}
+                            .selected=${(flow: Flow): boolean => {
+                                return this.instance?.flowDeviceCode === flow.pk;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
                         <p class="pf-c-form__helper-text">
                             ${t`If set, the OAuth Device Code profile can be used, and the selected flow will be used to enter the code.`}
                         </p>