diff --git a/package-lock.json b/package-lock.json
index a1f03d77..ff793145 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,7 +29,7 @@
 				"axios": "^1.3.4",
 				"bcryptjs": "^2.4.3",
 				"classnames": "^2.3.2",
-				"daisyui": "^3.2.1",
+				"daisyui": "^3.6.3",
 				"ejs": "^3.1.9",
 				"formidable": "^3.5.0",
 				"ip-address": "^8.1.0",
@@ -3734,9 +3734,9 @@
 			"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
 		},
 		"node_modules/daisyui": {
-			"version": "3.5.1",
-			"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.5.1.tgz",
-			"integrity": "sha512-7GG+9QXnr2qQMCqnyFU8TxpaOYJigXiEtmzoivmiiZZHvxqIwYdaMAkgivqTVxEgy3Hot3m1suzZjmt1zUrvmA==",
+			"version": "3.6.3",
+			"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.6.3.tgz",
+			"integrity": "sha512-VNWogAjx37H8kNYd2E/+r1OXc6dOvJTKlKltqIKAlNMFVfx2BIKPcmnVxaHQLfj2vhv1mYDBjgWj+1enQ+4yZA==",
 			"dependencies": {
 				"colord": "^2.9",
 				"css-selector-tokenizer": "^0.8",
diff --git a/package.json b/package.json
index 0bf44b67..135f9944 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
 		"axios": "^1.3.4",
 		"bcryptjs": "^2.4.3",
 		"classnames": "^2.3.2",
-		"daisyui": "^3.2.1",
+		"daisyui": "^3.6.3",
 		"ejs": "^3.1.9",
 		"formidable": "^3.5.0",
 		"ip-address": "^8.1.0",
diff --git a/src/components/modules/debugController.tsx b/src/components/modules/debugController.tsx
index 1b7fc8ab..9fefc6dd 100644
--- a/src/components/modules/debugController.tsx
+++ b/src/components/modules/debugController.tsx
@@ -16,7 +16,6 @@ const DebugMirror = ({ data, title }: Idata) => {
 
 	return (
 		<div
-			tabIndex={0}
 			onClick={() => setIsOpen(!isOpen)}
 			className="collapse-arrow collapse w-full border border-base-300 bg-base-200"
 		>
@@ -24,7 +23,6 @@ const DebugMirror = ({ data, title }: Idata) => {
 			<div className="collapse-title">{title}</div>
 			<div className="collapse-content" style={{ width: "100%" }}>
 				<CodeMirror
-					tabIndex={0}
 					value={JSON.stringify(data, null, 2)}
 					maxHeight="1500px"
 					width="100%"
diff --git a/src/components/modules/networkDns.tsx b/src/components/modules/networkDns.tsx
index b875551a..484ae1b7 100644
--- a/src/components/modules/networkDns.tsx
+++ b/src/components/modules/networkDns.tsx
@@ -114,10 +114,7 @@ export const NetworkDns = ({ central = false }: IProp) => {
 
 	return (
 		<>
-			<div
-				tabIndex={0}
-				className="collapse-arrow collapse w-full border border-base-300 bg-base-200"
-			>
+			<div className="collapse-arrow collapse w-full border border-base-300 bg-base-200">
 				<input type="checkbox" />
 				<div className="collapse-title">{t("networkDns.DNS")}</div>
 				<div className="collapse-content" style={{ width: "100%" }}>
diff --git a/src/components/modules/networkFlowRules.tsx b/src/components/modules/networkFlowRules.tsx
index 306a0942..7839ec0b 100644
--- a/src/components/modules/networkFlowRules.tsx
+++ b/src/components/modules/networkFlowRules.tsx
@@ -80,10 +80,7 @@ export const NetworkFlowRules = () => {
 	});
 
 	return (
-		<div
-			tabIndex={0}
-			className="collapse-arrow collapse w-full border border-base-300 bg-base-200"
-		>
+		<div className="collapse-arrow collapse w-full border border-base-300 bg-base-200">
 			<input type="checkbox" />
 			<div className="collapse-title">Flow Rules</div>
 			<div className="collapse-content" style={{ width: "100%" }}>
diff --git a/src/components/modules/networkHelp.tsx b/src/components/modules/networkHelp.tsx
index 9873b234..b2905239 100644
--- a/src/components/modules/networkHelp.tsx
+++ b/src/components/modules/networkHelp.tsx
@@ -1,10 +1,7 @@
 import React from "react";
 
 const NetworkHelpText: React.FC = () => (
-	<div
-		tabIndex={0}
-		className="collapse collapse-arrow w-full border border-base-300 bg-base-200"
-	>
+	<div className="collapse collapse-arrow w-full border border-base-300 bg-base-200">
 		<input type="checkbox" />
 		<div className="collapse-title">Network Help</div>
 		<div className="collapse-content" style={{ width: "100%" }}>
diff --git a/src/components/modules/networkIpAssignments.tsx b/src/components/modules/networkIpAssignments.tsx
index 459d44d5..6991b8f1 100644
--- a/src/components/modules/networkIpAssignments.tsx
+++ b/src/components/modules/networkIpAssignments.tsx
@@ -14,10 +14,7 @@ export const NetworkIpAssignment = ({ central = false }: IProp) => {
 	const [activeTab, setActiveTab] = useState("IPv4");
 
 	return (
-		<div
-			tabIndex={0}
-			className="collapse collapse-arrow w-full border border-base-300 bg-base-200"
-		>
+		<div className="collapse collapse-arrow w-full border border-base-300 bg-base-200">
 			<input type="checkbox" />
 			<div className="collapse-title">{t("networkIpAssignments.header")}</div>
 			<div className="w-100 collapse-content">
diff --git a/src/components/modules/networkMulticast.tsx b/src/components/modules/networkMulticast.tsx
index be44b049..3d883dab 100644
--- a/src/components/modules/networkMulticast.tsx
+++ b/src/components/modules/networkMulticast.tsx
@@ -87,10 +87,7 @@ export const NetworkMulticast = ({ central = false }: IProp) => {
 
 	const { network } = networkByIdQuery || {};
 	return (
-		<div
-			tabIndex={0}
-			className="collapse-arrow collapse w-full border border-base-300 bg-base-200"
-		>
+		<div className="collapse-arrow collapse w-full border border-base-300 bg-base-200">
 			<input type="checkbox" />
 			<div className="collapse-title">{t("networkMulticast.Multicast")}</div>
 			<div className="collapse-content" style={{ width: "100%" }}>
diff --git a/src/components/modules/networkRoutes.tsx b/src/components/modules/networkRoutes.tsx
index f0db23fd..14f68306 100644
--- a/src/components/modules/networkRoutes.tsx
+++ b/src/components/modules/networkRoutes.tsx
@@ -87,10 +87,7 @@ export const NettworkRoutes = ({ central = false }: IProp) => {
 	if (isLoading) return <div>Loading</div>;
 
 	return (
-		<div
-			tabIndex={0}
-			className="collapse-arrow collapse w-full border border-base-300 bg-base-200"
-		>
+		<div className="collapse-arrow collapse w-full border border-base-300 bg-base-200">
 			<input type="checkbox" />
 			<div className="collapse-title">{t("nettworkRoutes.managedRoutesTitle")}</div>
 			<div className="collapse-content" style={{ width: "100%" }}>
diff --git a/src/components/modules/ztCentral/centralFlowRules.tsx b/src/components/modules/ztCentral/centralFlowRules.tsx
index ae702bff..177b82ee 100644
--- a/src/components/modules/ztCentral/centralFlowRules.tsx
+++ b/src/components/modules/ztCentral/centralFlowRules.tsx
@@ -108,10 +108,7 @@ export const CentralFlowRules = ({ central = true }: IProp) => {
 		);
 	}
 	return (
-		<div
-			tabIndex={0}
-			className="collapse-arrow collapse w-full border border-base-300 bg-base-200"
-		>
+		<div className="collapse-arrow collapse w-full border border-base-300 bg-base-200">
 			<input type="checkbox" />
 			<div className="collapse-title">Flow Rules</div>
 			<div className="collapse-content" style={{ width: "100%" }}>
diff --git a/src/pages/admin/mail/index.tsx b/src/pages/admin/mail/index.tsx
index 36fb95d0..7bae168c 100644
--- a/src/pages/admin/mail/index.tsx
+++ b/src/pages/admin/mail/index.tsx
@@ -143,30 +143,21 @@ const Mail = () => {
 						}}
 					/>
 				</div>
-				<div
-					tabIndex={0}
-					className="collapse collapse-arrow w-full border border-base-300 bg-base-200"
-				>
+				<div className="collapse collapse-arrow w-full border border-base-300 bg-base-200">
 					<input type="checkbox" />
 					<div className="collapse-title">{t("mail.inviteUserTemplate")}</div>
 					<div className="collapse-content" style={{ width: "100%" }}>
 						<MailUserInviteTemplate />
 					</div>
 				</div>
-				<div
-					tabIndex={0}
-					className="collapse-arrow collapse w-full border border-base-300 bg-base-200"
-				>
+				<div className="collapse-arrow collapse w-full border border-base-300 bg-base-200">
 					<input type="checkbox" />
 					<div className="collapse-title">{t("mail.forgotPasswordTemplate")}</div>
 					<div className="collapse-content" style={{ width: "100%" }}>
 						<ForgotPasswordMailTemplate />
 					</div>
 				</div>
-				<div
-					tabIndex={0}
-					className="collapse-arrow collapse w-full border border-base-300 bg-base-200"
-				>
+				<div className="collapse-arrow collapse w-full border border-base-300 bg-base-200">
 					<input type="checkbox" />
 					<div className="collapse-title">{t("mail.notificationTemplate")}</div>
 					<div className="collapse-content" style={{ width: "100%" }}>