diff --git a/backend/open_webui/main.py b/backend/open_webui/main.py
index c5e980a270..ca811b1032 100644
--- a/backend/open_webui/main.py
+++ b/backend/open_webui/main.py
@@ -1634,7 +1634,19 @@ async def get_app_config(request: Request):
                 ),
             }
             if user is not None
-            else {}
+            else {
+                **(
+                    {
+                        "metadata": {
+                            "login_footer": app.state.LICENSE_METADATA.get(
+                                "login_footer", ""
+                            )
+                        }
+                    }
+                    if app.state.LICENSE_METADATA
+                    else {}
+                )
+            }
         ),
     }
 
diff --git a/src/routes/auth/+page.svelte b/src/routes/auth/+page.svelte
index 4ff8fbf0ae..d9ee207dc3 100644
--- a/src/routes/auth/+page.svelte
+++ b/src/routes/auth/+page.svelte
@@ -1,4 +1,7 @@
 <script>
+	import DOMPurify from 'dompurify';
+	import { marked } from 'marked';
+
 	import { toast } from 'svelte-sonner';
 
 	import { onMount, getContext, tick } from 'svelte';
@@ -192,9 +195,9 @@
 		<div
 			class="fixed bg-transparent min-h-screen w-full flex justify-center font-primary z-50 text-black dark:text-white"
 		>
-			<div class="w-full sm:max-w-md px-10 min-h-screen flex flex-col text-center">
+			<div class="w-full px-10 min-h-screen flex flex-col text-center">
 				{#if ($config?.features.auth_trusted_header ?? false) || $config?.features.auth === false}
-					<div class=" my-auto pb-10 w-full">
+					<div class=" my-auto pb-10 w-full sm:max-w-md">
 						<div
 							class="flex items-center justify-center gap-3 text-xl sm:text-2xl text-center font-semibold dark:text-gray-200"
 						>
@@ -208,282 +211,304 @@
 						</div>
 					</div>
 				{:else}
-					<div class="  my-auto pb-10 w-full dark:text-gray-100">
-						<form
-							class=" flex flex-col justify-center"
-							on:submit={(e) => {
-								e.preventDefault();
-								submitHandler();
-							}}
-						>
-							<div class="mb-1">
-								<div class=" text-2xl font-medium">
+					<div class="my-auto flex flex-col justify-center items-center">
+						<div class=" sm:max-w-md my-auto pb-10 w-full dark:text-gray-100">
+							<form
+								class=" flex flex-col justify-center"
+								on:submit={(e) => {
+									e.preventDefault();
+									submitHandler();
+								}}
+							>
+								<div class="mb-1">
+									<div class=" text-2xl font-medium">
+										{#if $config?.onboarding ?? false}
+											{$i18n.t(`Get started with {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
+										{:else if mode === 'ldap'}
+											{$i18n.t(`Sign in to {{WEBUI_NAME}} with LDAP`, { WEBUI_NAME: $WEBUI_NAME })}
+										{:else if mode === 'signin'}
+											{$i18n.t(`Sign in to {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
+										{:else}
+											{$i18n.t(`Sign up to {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
+										{/if}
+									</div>
+
 									{#if $config?.onboarding ?? false}
-										{$i18n.t(`Get started with {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
-									{:else if mode === 'ldap'}
-										{$i18n.t(`Sign in to {{WEBUI_NAME}} with LDAP`, { WEBUI_NAME: $WEBUI_NAME })}
-									{:else if mode === 'signin'}
-										{$i18n.t(`Sign in to {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
-									{:else}
-										{$i18n.t(`Sign up to {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
+										<div class="mt-1 text-xs font-medium text-gray-600 dark:text-gray-500">
+											ⓘ {$WEBUI_NAME}
+											{$i18n.t(
+												'does not make any external connections, and your data stays securely on your locally hosted server.'
+											)}
+										</div>
 									{/if}
 								</div>
 
-								{#if $config?.onboarding ?? false}
-									<div class="mt-1 text-xs font-medium text-gray-600 dark:text-gray-500">
-										ⓘ {$WEBUI_NAME}
-										{$i18n.t(
-											'does not make any external connections, and your data stays securely on your locally hosted server.'
-										)}
-									</div>
-								{/if}
-							</div>
-
-							{#if $config?.features.enable_login_form || $config?.features.enable_ldap}
-								<div class="flex flex-col mt-4">
-									{#if mode === 'signup'}
-										<div class="mb-2">
-											<label for="name" class="text-sm font-medium text-left mb-1 block"
-												>{$i18n.t('Name')}</label
-											>
-											<input
-												bind:value={name}
-												type="text"
-												id="name"
-												class="my-0.5 w-full text-sm outline-hidden bg-transparent"
-												autocomplete="name"
-												placeholder={$i18n.t('Enter Your Full Name')}
-												required
-											/>
-										</div>
-									{/if}
-
-									{#if mode === 'ldap'}
-										<div class="mb-2">
-											<label for="username" class="text-sm font-medium text-left mb-1 block"
-												>{$i18n.t('Username')}</label
-											>
-											<input
-												bind:value={ldapUsername}
-												type="text"
-												class="my-0.5 w-full text-sm outline-hidden bg-transparent"
-												autocomplete="username"
-												name="username"
-												id="username"
-												placeholder={$i18n.t('Enter Your Username')}
-												required
-											/>
-										</div>
-									{:else}
-										<div class="mb-2">
-											<label for="email" class="text-sm font-medium text-left mb-1 block"
-												>{$i18n.t('Email')}</label
-											>
-											<input
-												bind:value={email}
-												type="email"
-												id="email"
-												class="my-0.5 w-full text-sm outline-hidden bg-transparent"
-												autocomplete="email"
-												name="email"
-												placeholder={$i18n.t('Enter Your Email')}
-												required
-											/>
-										</div>
-									{/if}
-
-									<div>
-										<label for="password" class="text-sm font-medium text-left mb-1 block"
-											>{$i18n.t('Password')}</label
-										>
-										<input
-											bind:value={password}
-											type="password"
-											id="password"
-											class="my-0.5 w-full text-sm outline-hidden bg-transparent"
-											placeholder={$i18n.t('Enter Your Password')}
-											autocomplete={mode === 'signup' ? 'new-password' : 'current-password'}
-											name="password"
-											required
-										/>
-									</div>
-								</div>
-							{/if}
-							<div class="mt-5">
 								{#if $config?.features.enable_login_form || $config?.features.enable_ldap}
-									{#if mode === 'ldap'}
-										<button
-											class="bg-gray-700/5 hover:bg-gray-700/10 dark:bg-gray-100/5 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition w-full rounded-full font-medium text-sm py-2.5"
-											type="submit"
-										>
-											{$i18n.t('Authenticate')}
-										</button>
-									{:else}
-										<button
-											class="bg-gray-700/5 hover:bg-gray-700/10 dark:bg-gray-100/5 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition w-full rounded-full font-medium text-sm py-2.5"
-											type="submit"
-										>
-											{mode === 'signin'
-												? $i18n.t('Sign in')
-												: ($config?.onboarding ?? false)
-													? $i18n.t('Create Admin Account')
-													: $i18n.t('Create Account')}
-										</button>
-
-										{#if $config?.features.enable_signup && !($config?.onboarding ?? false)}
-											<div class=" mt-4 text-sm text-center">
-												{mode === 'signin'
-													? $i18n.t("Don't have an account?")
-													: $i18n.t('Already have an account?')}
-
-												<button
-													class=" font-medium underline"
-													type="button"
-													on:click={() => {
-														if (mode === 'signin') {
-															mode = 'signup';
-														} else {
-															mode = 'signin';
-														}
-													}}
+									<div class="flex flex-col mt-4">
+										{#if mode === 'signup'}
+											<div class="mb-2">
+												<label for="name" class="text-sm font-medium text-left mb-1 block"
+													>{$i18n.t('Name')}</label
 												>
-													{mode === 'signin' ? $i18n.t('Sign up') : $i18n.t('Sign in')}
-												</button>
+												<input
+													bind:value={name}
+													type="text"
+													id="name"
+													class="my-0.5 w-full text-sm outline-hidden bg-transparent"
+													autocomplete="name"
+													placeholder={$i18n.t('Enter Your Full Name')}
+													required
+												/>
 											</div>
 										{/if}
+
+										{#if mode === 'ldap'}
+											<div class="mb-2">
+												<label for="username" class="text-sm font-medium text-left mb-1 block"
+													>{$i18n.t('Username')}</label
+												>
+												<input
+													bind:value={ldapUsername}
+													type="text"
+													class="my-0.5 w-full text-sm outline-hidden bg-transparent"
+													autocomplete="username"
+													name="username"
+													id="username"
+													placeholder={$i18n.t('Enter Your Username')}
+													required
+												/>
+											</div>
+										{:else}
+											<div class="mb-2">
+												<label for="email" class="text-sm font-medium text-left mb-1 block"
+													>{$i18n.t('Email')}</label
+												>
+												<input
+													bind:value={email}
+													type="email"
+													id="email"
+													class="my-0.5 w-full text-sm outline-hidden bg-transparent"
+													autocomplete="email"
+													name="email"
+													placeholder={$i18n.t('Enter Your Email')}
+													required
+												/>
+											</div>
+										{/if}
+
+										<div>
+											<label for="password" class="text-sm font-medium text-left mb-1 block"
+												>{$i18n.t('Password')}</label
+											>
+											<input
+												bind:value={password}
+												type="password"
+												id="password"
+												class="my-0.5 w-full text-sm outline-hidden bg-transparent"
+												placeholder={$i18n.t('Enter Your Password')}
+												autocomplete={mode === 'signup' ? 'new-password' : 'current-password'}
+												name="password"
+												required
+											/>
+										</div>
+									</div>
+								{/if}
+								<div class="mt-5">
+									{#if $config?.features.enable_login_form || $config?.features.enable_ldap}
+										{#if mode === 'ldap'}
+											<button
+												class="bg-gray-700/5 hover:bg-gray-700/10 dark:bg-gray-100/5 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition w-full rounded-full font-medium text-sm py-2.5"
+												type="submit"
+											>
+												{$i18n.t('Authenticate')}
+											</button>
+										{:else}
+											<button
+												class="bg-gray-700/5 hover:bg-gray-700/10 dark:bg-gray-100/5 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition w-full rounded-full font-medium text-sm py-2.5"
+												type="submit"
+											>
+												{mode === 'signin'
+													? $i18n.t('Sign in')
+													: ($config?.onboarding ?? false)
+														? $i18n.t('Create Admin Account')
+														: $i18n.t('Create Account')}
+											</button>
+
+											{#if $config?.features.enable_signup && !($config?.onboarding ?? false)}
+												<div class=" mt-4 text-sm text-center">
+													{mode === 'signin'
+														? $i18n.t("Don't have an account?")
+														: $i18n.t('Already have an account?')}
+
+													<button
+														class=" font-medium underline"
+														type="button"
+														on:click={() => {
+															if (mode === 'signin') {
+																mode = 'signup';
+															} else {
+																mode = 'signin';
+															}
+														}}
+													>
+														{mode === 'signin' ? $i18n.t('Sign up') : $i18n.t('Sign in')}
+													</button>
+												</div>
+											{/if}
+										{/if}
 									{/if}
-								{/if}
-							</div>
-						</form>
-
-						{#if Object.keys($config?.oauth?.providers ?? {}).length > 0}
-							<div class="inline-flex items-center justify-center w-full">
-								<hr class="w-32 h-px my-4 border-0 dark:bg-gray-100/10 bg-gray-700/10" />
-								{#if $config?.features.enable_login_form || $config?.features.enable_ldap}
-									<span
-										class="px-3 text-sm font-medium text-gray-900 dark:text-white bg-transparent"
-										>{$i18n.t('or')}</span
-									>
-								{/if}
-
-								<hr class="w-32 h-px my-4 border-0 dark:bg-gray-100/10 bg-gray-700/10" />
-							</div>
-							<div class="flex flex-col space-y-2">
-								{#if $config?.oauth?.providers?.google}
-									<button
-										class="flex justify-center items-center bg-gray-700/5 hover:bg-gray-700/10 dark:bg-gray-100/5 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition w-full rounded-full font-medium text-sm py-2.5"
-										on:click={() => {
-											window.location.href = `${WEBUI_BASE_URL}/oauth/google/login`;
-										}}
-									>
-										<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="size-6 mr-3">
-											<path
-												fill="#EA4335"
-												d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
-											/><path
-												fill="#4285F4"
-												d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
-											/><path
-												fill="#FBBC05"
-												d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
-											/><path
-												fill="#34A853"
-												d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
-											/><path fill="none" d="M0 0h48v48H0z" />
-										</svg>
-										<span>{$i18n.t('Continue with {{provider}}', { provider: 'Google' })}</span>
-									</button>
-								{/if}
-								{#if $config?.oauth?.providers?.microsoft}
-									<button
-										class="flex justify-center items-center bg-gray-700/5 hover:bg-gray-700/10 dark:bg-gray-100/5 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition w-full rounded-full font-medium text-sm py-2.5"
-										on:click={() => {
-											window.location.href = `${WEBUI_BASE_URL}/oauth/microsoft/login`;
-										}}
-									>
-										<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" class="size-6 mr-3">
-											<rect x="1" y="1" width="9" height="9" fill="#f25022" /><rect
-												x="1"
-												y="11"
-												width="9"
-												height="9"
-												fill="#00a4ef"
-											/><rect x="11" y="1" width="9" height="9" fill="#7fba00" /><rect
-												x="11"
-												y="11"
-												width="9"
-												height="9"
-												fill="#ffb900"
-											/>
-										</svg>
-										<span>{$i18n.t('Continue with {{provider}}', { provider: 'Microsoft' })}</span>
-									</button>
-								{/if}
-								{#if $config?.oauth?.providers?.github}
-									<button
-										class="flex justify-center items-center bg-gray-700/5 hover:bg-gray-700/10 dark:bg-gray-100/5 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition w-full rounded-full font-medium text-sm py-2.5"
-										on:click={() => {
-											window.location.href = `${WEBUI_BASE_URL}/oauth/github/login`;
-										}}
-									>
-										<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-6 mr-3">
-											<path
-												fill="currentColor"
-												d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.92 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57C20.565 21.795 24 17.31 24 12c0-6.63-5.37-12-12-12z"
-											/>
-										</svg>
-										<span>{$i18n.t('Continue with {{provider}}', { provider: 'GitHub' })}</span>
-									</button>
-								{/if}
-								{#if $config?.oauth?.providers?.oidc}
-									<button
-										class="flex justify-center items-center bg-gray-700/5 hover:bg-gray-700/10 dark:bg-gray-100/5 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition w-full rounded-full font-medium text-sm py-2.5"
-										on:click={() => {
-											window.location.href = `${WEBUI_BASE_URL}/oauth/oidc/login`;
-										}}
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											fill="none"
-											viewBox="0 0 24 24"
-											stroke-width="1.5"
-											stroke="currentColor"
-											class="size-6 mr-3"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"
-											/>
-										</svg>
+								</div>
+							</form>
 
+							{#if Object.keys($config?.oauth?.providers ?? {}).length > 0}
+								<div class="inline-flex items-center justify-center w-full">
+									<hr class="w-32 h-px my-4 border-0 dark:bg-gray-100/10 bg-gray-700/10" />
+									{#if $config?.features.enable_login_form || $config?.features.enable_ldap}
 										<span
-											>{$i18n.t('Continue with {{provider}}', {
-												provider: $config?.oauth?.providers?.oidc ?? 'SSO'
-											})}</span
+											class="px-3 text-sm font-medium text-gray-900 dark:text-white bg-transparent"
+											>{$i18n.t('or')}</span
+										>
+									{/if}
+
+									<hr class="w-32 h-px my-4 border-0 dark:bg-gray-100/10 bg-gray-700/10" />
+								</div>
+								<div class="flex flex-col space-y-2">
+									{#if $config?.oauth?.providers?.google}
+										<button
+											class="flex justify-center items-center bg-gray-700/5 hover:bg-gray-700/10 dark:bg-gray-100/5 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition w-full rounded-full font-medium text-sm py-2.5"
+											on:click={() => {
+												window.location.href = `${WEBUI_BASE_URL}/oauth/google/login`;
+											}}
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												viewBox="0 0 48 48"
+												class="size-6 mr-3"
+											>
+												<path
+													fill="#EA4335"
+													d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+												/><path
+													fill="#4285F4"
+													d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
+												/><path
+													fill="#FBBC05"
+													d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
+												/><path
+													fill="#34A853"
+													d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+												/><path fill="none" d="M0 0h48v48H0z" />
+											</svg>
+											<span>{$i18n.t('Continue with {{provider}}', { provider: 'Google' })}</span>
+										</button>
+									{/if}
+									{#if $config?.oauth?.providers?.microsoft}
+										<button
+											class="flex justify-center items-center bg-gray-700/5 hover:bg-gray-700/10 dark:bg-gray-100/5 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition w-full rounded-full font-medium text-sm py-2.5"
+											on:click={() => {
+												window.location.href = `${WEBUI_BASE_URL}/oauth/microsoft/login`;
+											}}
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												viewBox="0 0 21 21"
+												class="size-6 mr-3"
+											>
+												<rect x="1" y="1" width="9" height="9" fill="#f25022" /><rect
+													x="1"
+													y="11"
+													width="9"
+													height="9"
+													fill="#00a4ef"
+												/><rect x="11" y="1" width="9" height="9" fill="#7fba00" /><rect
+													x="11"
+													y="11"
+													width="9"
+													height="9"
+													fill="#ffb900"
+												/>
+											</svg>
+											<span>{$i18n.t('Continue with {{provider}}', { provider: 'Microsoft' })}</span
+											>
+										</button>
+									{/if}
+									{#if $config?.oauth?.providers?.github}
+										<button
+											class="flex justify-center items-center bg-gray-700/5 hover:bg-gray-700/10 dark:bg-gray-100/5 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition w-full rounded-full font-medium text-sm py-2.5"
+											on:click={() => {
+												window.location.href = `${WEBUI_BASE_URL}/oauth/github/login`;
+											}}
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												viewBox="0 0 24 24"
+												class="size-6 mr-3"
+											>
+												<path
+													fill="currentColor"
+													d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.92 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57C20.565 21.795 24 17.31 24 12c0-6.63-5.37-12-12-12z"
+												/>
+											</svg>
+											<span>{$i18n.t('Continue with {{provider}}', { provider: 'GitHub' })}</span>
+										</button>
+									{/if}
+									{#if $config?.oauth?.providers?.oidc}
+										<button
+											class="flex justify-center items-center bg-gray-700/5 hover:bg-gray-700/10 dark:bg-gray-100/5 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition w-full rounded-full font-medium text-sm py-2.5"
+											on:click={() => {
+												window.location.href = `${WEBUI_BASE_URL}/oauth/oidc/login`;
+											}}
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke-width="1.5"
+												stroke="currentColor"
+												class="size-6 mr-3"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"
+												/>
+											</svg>
+
+											<span
+												>{$i18n.t('Continue with {{provider}}', {
+													provider: $config?.oauth?.providers?.oidc ?? 'SSO'
+												})}</span
+											>
+										</button>
+									{/if}
+								</div>
+							{/if}
+
+							{#if $config?.features.enable_ldap && $config?.features.enable_login_form}
+								<div class="mt-2">
+									<button
+										class="flex justify-center items-center text-xs w-full text-center underline"
+										type="button"
+										on:click={() => {
+											if (mode === 'ldap')
+												mode = ($config?.onboarding ?? false) ? 'signup' : 'signin';
+											else mode = 'ldap';
+										}}
+									>
+										<span
+											>{mode === 'ldap'
+												? $i18n.t('Continue with Email')
+												: $i18n.t('Continue with LDAP')}</span
 										>
 									</button>
-								{/if}
-							</div>
-						{/if}
-
-						{#if $config?.features.enable_ldap && $config?.features.enable_login_form}
-							<div class="mt-2">
-								<button
-									class="flex justify-center items-center text-xs w-full text-center underline"
-									type="button"
-									on:click={() => {
-										if (mode === 'ldap')
-											mode = ($config?.onboarding ?? false) ? 'signup' : 'signin';
-										else mode = 'ldap';
-									}}
-								>
-									<span
-										>{mode === 'ldap'
-											? $i18n.t('Continue with Email')
-											: $i18n.t('Continue with LDAP')}</span
-									>
-								</button>
+								</div>
+							{/if}
+						</div>
+						{#if $config?.metadata?.login_footer}
+							<div class="max-w-3xl mx-auto">
+								<div class="mt-2 text-[0.7rem] text-gray-500 dark:text-gray-400 marked">
+									{@html DOMPurify.sanitize(marked($config?.metadata?.login_footer))}
+								</div>
 							</div>
 						{/if}
 					</div>