diff --git a/src/client.py b/src/client.py
index b31f19b..32f6f73 100644
--- a/src/client.py
+++ b/src/client.py
@@ -46,10 +46,18 @@ def createClientBlueprint(wireguardConfigurations: dict[WireguardConfiguration],
 
     @client.get(f'{prefix}/api/signin/oidc/providers')
     def ClientAPI_SignIn_OIDC_GetProviders():
+        _, oidc = dashboardConfig.GetConfig("OIDC", "client_enable")
+        if not oidc:
+            return ResponseObject(status=False, message="OIDC is disabled")
+        
         return ResponseObject(data=dashboardClients.OIDC.GetProviders())
     
     @client.post(f'{prefix}/api/signin/oidc')
     def ClientAPI_SignIn_OIDC():
+        _, oidc = dashboardConfig.GetConfig("OIDC", "client_enable")
+        if not oidc:
+            return ResponseObject(status=False, message="OIDC is disabled")
+        
         data = request.json
         status, oidcData = dashboardClients.SignIn_OIDC(**data)
         if not status:
diff --git a/src/dashboard.py b/src/dashboard.py
index 9ead71e..0049328 100644
--- a/src/dashboard.py
+++ b/src/dashboard.py
@@ -1213,6 +1213,38 @@ def API_SystemStatus():
 def API_ProtocolsEnabled():
     return ResponseObject(data=ProtocolsEnabled())
 
+'''
+OIDC Controller
+'''
+@app.get(f'{APP_PREFIX}/api/oidc/toggle')
+def API_OIDC_Toggle():
+    data = request.args
+    if not data.get('mode'):
+        return ResponseObject(False, "Please provide mode")
+
+    mode = data.get('mode')
+    if mode == 'Client':
+        DashboardConfig.SetConfig("OIDC", "client_enable", 
+                                  not DashboardConfig.GetConfig("OIDC", "client_enable")[1])
+    elif mode == 'Admin':
+        DashboardConfig.SetConfig("OIDC", "admin_enable",
+                                  not DashboardConfig.GetConfig("OIDC", "admin_enable")[1])
+    else:
+        return ResponseObject(False, "Mode does not exist")
+    return ResponseObject()
+
+@app.get(f'{APP_PREFIX}/api/oidc/status')
+def API_OIDC_Status():
+    data = request.args
+    if not data.get('mode'):
+        return ResponseObject(False, "Please provide mode")
+    mode = data.get('mode')
+    if mode == 'Client':
+        return ResponseObject(data=DashboardConfig.GetConfig("OIDC", "client_enable")[1])
+    elif mode == 'Admin':
+        return ResponseObject(data=DashboardConfig.GetConfig("OIDC", "admin_enable")[1])
+    return ResponseObject(False, "Mode does not exist")
+
 '''
 Client Controller
 '''
diff --git a/src/static/app/src/components/clientComponents/clientSettingComponents/oidcSettings.vue b/src/static/app/src/components/clientComponents/clientSettingComponents/oidcSettings.vue
new file mode 100644
index 0000000..bae7250
--- /dev/null
+++ b/src/static/app/src/components/clientComponents/clientSettingComponents/oidcSettings.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import LocaleText from "@/components/text/localeText.vue";
+const props = defineProps(['mode'])
+import { fetchGet } from "@/utilities/fetch.js"
+await fetchGet("/api/oidc/status", {
+	mode: "Client"
+}, (res) => {
+	console.log(res)
+})
+
+</script>
+
+<template>
+<div class="d-flex flex-column gap-2">
+	<div class="d-flex align-items-center">
+		<h6 class="mb-0">
+			<LocaleText t="OpenID Connect (OIDC)"></LocaleText>
+		</h6>
+		<div class="form-check form-switch ms-auto">
+			<label class="form-check-label" for="oidc_switch">
+				<LocaleText t="Enable"></LocaleText>
+			</label>
+			<input class="form-check-input" type="checkbox" role="switch" id="oidc_switch">
+		</div>
+	</div>
+	<div>
+		<div class="alert alert-dark rounded-3 mb-0">
+			<LocaleText t="Due to security reason, in order to edit OIDC configuration, you will need to edit "></LocaleText>
+			<code>wg-dashboard-oidc-providers.json</code> directly. If you updated the file, click the update button below to reload the configuration.
+		</div>
+	</div>
+	<button class="rounded-3 btn bg-success-subtle text-success-emphasis border-success-subtle">
+		<i class="bi bi-arrow-clockwise me-2"></i><LocaleText t="Refresh"></LocaleText>
+	</button>
+</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/static/app/src/components/clientComponents/clientSettings.vue b/src/static/app/src/components/clientComponents/clientSettings.vue
index 9896465..645abb1 100644
--- a/src/static/app/src/components/clientComponents/clientSettings.vue
+++ b/src/static/app/src/components/clientComponents/clientSettings.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import LocaleText from "@/components/text/localeText.vue";
+import OidcSettings from "@/components/clientComponents/clientSettingComponents/oidcSettings.vue";
 const emits = defineEmits(['close'])
 
 </script>
@@ -15,16 +16,8 @@ const emits = defineEmits(['close'])
 		</div>
 		<div class="card-body px-4">
 			<div class="py-2">
-				<h6>
-					<LocaleText t="OpenID Connect (OIDC)"></LocaleText>
-				</h6>
+				<OidcSettings mode="Client"></OidcSettings>
 				<hr>
-				<div class="form-check form-switch">
-					<label class="form-check-label" for="oidc_switch">
-						<LocaleText t="Enable"></LocaleText>
-					</label>
-					<input class="form-check-input" type="checkbox" role="switch" id="oidc_switch">
-				</div>
 			</div>
 		</div>
 	</div>
diff --git a/src/static/app/src/views/clients.vue b/src/static/app/src/views/clients.vue
index f3ee729..d378d76 100644
--- a/src/static/app/src/views/clients.vue
+++ b/src/static/app/src/views/clients.vue
@@ -29,7 +29,7 @@ const oidc = computed(() => {
 
 		<div class="w-100 h-100 card rounded-3">
 			<Transition name="zoom">
-				<ClientSettings v-if="settings"></ClientSettings>
+				<ClientSettings v-if="settings" @close="settings = false"></ClientSettings>
 			</Transition>
 			<div class="border-bottom z-0">
 				<div class="d-flex text-body align-items-center sticky-top p-3 bg-body-tertiary rounded-top-3" style="border-top-right-radius: 0 !important;">