diff --git a/frontend/src/lib/components/AutheliaSetting.svelte b/frontend/src/lib/components/AutheliaSetting.svelte
new file mode 100644
index 0000000000..48d2a08d64
--- /dev/null
+++ b/frontend/src/lib/components/AutheliaSetting.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import IconedResourceType from './IconedResourceType.svelte'
+	import Toggle from './Toggle.svelte'
+
+	export let value: any
+
+	$: enabled = value != undefined
+
+	let org = ''
+
+	$: changeOrg(org)
+
+	function changeOrg(org) {
+		if (value) {
+			value = {
+				...value,
+				connect_config: {
+					auth_url: `${org}/api/oidc/authorization`,
+					token_url: `${org}/api/oidc/token`,
+					scopes: ['openid', 'profile', 'email', 'groups']
+				},
+				login_config: {
+					auth_url: `${org}/api/oidc/authorization`,
+					token_url: `${org}/api/oidc/token`,
+					userinfo_url: `${org}/api/oidc/userinfo`,
+					scopes: ['openid', 'profile', 'email', 'groups']
+				}
+			}
+		}
+	}
+</script>
+
+<div class="flex flex-col gap-1">
+	<label class="text-sm font-medium text-primary flex gap-4 items-center"
+		><div class="w-[120px]"><IconedResourceType name={'authelia'} after={true} /></div><Toggle
+			checked={enabled}
+			on:change={(e) => {
+				if (e.detail) {
+					value = { id: '', secret: '' }
+				} else {
+					value = undefined
+				}
+			}}
+		/></label
+	>
+	{#if enabled}
+		<div class="border rounded p-2">
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm"
+					>Authelia Url ({'AUTHELIA_URL/api/oidc/authorization'})</span
+				>
+				<input type="text" placeholder="yourorg" bind:value={org} />
+			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Client Id</span>
+				<input type="text" placeholder="Client Id" bind:value={value['id']} />
+			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Client Secret </span>
+				<input type="text" placeholder="Client Secret" bind:value={value['secret']} />
+			</label>
+		</div>
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/InstanceSettings.svelte b/frontend/src/lib/components/InstanceSettings.svelte
index 0c6a24b6a3..5e19c3d310 100644
--- a/frontend/src/lib/components/InstanceSettings.svelte
+++ b/frontend/src/lib/components/InstanceSettings.svelte
@@ -19,6 +19,7 @@
 	import { AlertTriangle, Plus } from 'lucide-svelte'
 	import CustomSso from './CustomSso.svelte'
 	import AuthentikSetting from '$lib/components/AuthentikSetting.svelte'
+	import AutheliaSetting from '$lib/components/AutheliaSetting.svelte'
 
 	export let tab: string = 'Core'
 	export let hideTabs: boolean = false
@@ -217,8 +218,9 @@
 								<OAuthSetting name="jumpcloud" bind:value={oauths['jumpcloud']} />
 								<KeycloakSetting bind:value={oauths['keycloak']} />
 								<AuthentikSetting bind:value={oauths['authentik']} />
+								<AutheliaSetting bind:value={oauths['authelia']} />
 								{#each Object.keys(oauths) as k}
-									{#if !['authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'keycloak', 'slack'].includes(k) && 'login_config' in oauths[k]}
+									{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'keycloak', 'slack'].includes(k) && 'login_config' in oauths[k]}
 										{#if oauths[k]}
 											<div class="flex flex-col gap-2 pb-4">
 												<div class="flex flex-row items-center gap-2">
@@ -283,7 +285,7 @@
 							<div class="py-1" />
 
 							{#each Object.keys(oauths) as k}
-								{#if !['authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'keycloak', 'slack'].includes(k) && !('login_config' in oauths[k])}
+								{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'keycloak', 'slack'].includes(k) && !('login_config' in oauths[k])}
 									{#if oauths[k]}
 										<div class="flex flex-col gap-2 pb-4">
 											<div class="flex flex-row items-center gap-2">
diff --git a/frontend/src/lib/components/icons/AutheliaIcon.svelte b/frontend/src/lib/components/icons/AutheliaIcon.svelte
new file mode 100644
index 0000000000..037844b4d3
--- /dev/null
+++ b/frontend/src/lib/components/icons/AutheliaIcon.svelte
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335.000000 335.000000" width="24" height="24" >
+    <title>authelia-svg</title>
+    <g transform="translate(0.000000,335.000000) scale(0.100000,-0.100000)" fill="#3F51B4" stroke="none">
+        <path d="M1359 3300 c-142 -23 -312 -83 -477 -170 -422 -222 -751 -668 -836
+        -1130 -31 -172 -36 -276 -21 -456 20 -235 69 -414 168 -610 56 -112 173 -280
+        251 -360 67 -70 74 -74 115 -74 57 0 111 49 111 103 0 36 -13 57 -87 141 -57
+        64 -156 212 -198 296 -50 99 -102 256 -126 383 -31 155 -31 388 0 534 94 447
+        385 818 795 1014 120 57 239 93 396 119 63 11 125 22 138 25 52 12 81 119 44
+        165 -15 19 -29 22 -117 25 -55 2 -125 0 -156 -5z"/>
+        <path d="M2049 2801 c-23 -24 -29 -38 -29 -73 0 -56 19 -82 83 -114 281 -142
+        464 -357 552 -649 34 -113 61 -145 122 -145 33 0 50 7 75 29 30 27 33 34 31
+        83 -3 102 -83 298 -184 453 -64 98 -229 264 -324 326 -188 124 -269 147 -326
+        90z"/>
+        <path d="M1030 2750 c-113 -68 -175 -118 -263 -209 -315 -330 -418 -808 -271
+        -1256 136 -417 487 -726 929 -821 98 -20 360 -24 454 -5 321 63 602 234 785
+        478 85 114 151 244 151 301 0 58 -45 102 -104 102 -55 0 -84 -27 -136 -129
+        -180 -348 -561 -567 -950 -548 -241 12 -474 110 -657 276 -130 118 -237 296
+        -285 477 -23 88 -26 119 -27 269 -1 148 2 181 22 255 28 101 93 242 152 331
+        59 88 191 215 279 269 41 25 92 62 114 83 37 35 39 40 34 80 -4 30 -15 50 -37
+        70 -47 42 -90 37 -190 -23z"/>
+        <path d="M1528 2494 c-312 -56 -570 -293 -652 -599 -24 -87 -31 -249 -16 -342
+        53 -330 298 -595 623 -673 158 -38 369 -22 512 40 177 76 329 219 415 391 187
+        371 69 825 -273 1053 -186 124 -396 169 -609 130z m216 -266 c25 -8 59 -31 86
+        -58 94 -94 94 -219 -1 -313 l-48 -49 64 -261 c72 -291 72 -297 12 -355 -43
+        -42 -105 -62 -191 -62 -115 0 -206 56 -221 137 -4 17 19 129 58 287 l65 258
+        -41 37 c-103 93 -103 245 1 332 67 56 135 71 216 47z"/>
+        <path d="M3034 2306 c-42 -42 -43 -69 -9 -159 50 -135 69 -256 69 -457 1 -206
+        -10 -279 -69 -457 -118 -354 -379 -654 -714 -823 -96 -48 -283 -106 -401 -125
+        -158 -25 -178 -32 -200 -68 -61 -99 20 -179 165 -162 702 79 1290 633 1421
+        1340 25 134 25 437 0 575 -26 150 -80 311 -114 343 -43 41 -103 38 -148 -7z"/>
+    </g>
+</svg>
diff --git a/frontend/src/lib/components/icons/index.ts b/frontend/src/lib/components/icons/index.ts
index bee278a9d4..d36451f9b0 100644
--- a/frontend/src/lib/components/icons/index.ts
+++ b/frontend/src/lib/components/icons/index.ts
@@ -67,6 +67,7 @@ import AzureIcon from './AzureIcon.svelte'
 import OktaIcon from './OktaIcon.svelte'
 import MsSqlServerIcon from './MSSqlServerIcon.svelte'
 import AuthentikIcon from './AuthentikIcon.svelte';
+import AutheliaIcon from './AutheliaIcon.svelte';
 
 export const APP_TO_ICON_COMPONENT = {
 	postgresql: PostgresIcon,
@@ -140,7 +141,8 @@ export const APP_TO_ICON_COMPONENT = {
 	nocodb: NocoDbIcon,
 	azure: AzureIcon,
 	okta: OktaIcon,
-	authentik: AuthentikIcon
+	authentik: AuthentikIcon,
+	authelia: AutheliaIcon
 } as const
 
 export {
@@ -207,5 +209,6 @@ export {
 	AzureIcon,
 	MicrosoftIcon,
 	OktaIcon,
-	AuthentikIcon
+	AuthentikIcon,
+	AutheliaIcon
 }