diff --git a/.env.development b/.env.development
index 2d7513b..38e6d70 100644
--- a/.env.development
+++ b/.env.development
@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.740
+NEXT_PUBLIC_APP_VERSION=1.6.741
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 
diff --git a/.env.production b/.env.production
index 033686c..b653536 100644
--- a/.env.production
+++ b/.env.production
@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.740
+NEXT_PUBLIC_APP_VERSION=1.6.741
 NEXT_PUBLIC_CPL_MODE=production
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 27ad0ed..0ad4b70 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## [1.6.741] – 2025-08-18
+
+- feat: System light and dark mode
+
+---
 ## [1.6.740] – 2025-08-18
 
 - feat: system dark and light mode
diff --git a/components/main/settingsPageComponents/DatabaseSettings.tsx b/components/main/settingsPageComponents/DatabaseSettings.tsx
index 036357b..f59bf51 100644
--- a/components/main/settingsPageComponents/DatabaseSettings.tsx
+++ b/components/main/settingsPageComponents/DatabaseSettings.tsx
@@ -10,7 +10,7 @@ import { useAdminAuth } from "./hooks/useAdminAuth";
 const DatabaseSettings: React.FC = () => {
   const { isAdminLoggedIn } = useAdminAuth(true);
   return (
-    <div className="p-6 bg-gray-100 max-w-5xl mr-auto rounded shadow">
+    <div className="p-6 bg-gray-100 dark:bg-gray-800 max-w-5xl mr-auto rounded shadow text-gray-900 dark:text-gray-100">
       <h2 className="text-lg font-bold mb-6">Datenbank Einstellungen</h2>
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
diff --git a/components/main/settingsPageComponents/GeneralSettings.tsx b/components/main/settingsPageComponents/GeneralSettings.tsx
index ba12fb7..e3a6c55 100644
--- a/components/main/settingsPageComponents/GeneralSettings.tsx
+++ b/components/main/settingsPageComponents/GeneralSettings.tsx
@@ -64,7 +64,7 @@ const GeneralSettings: React.FC = () => {
   }, [systemSettings]);
 
   return (
-    <div className="p-6 md:p-3 bg-gray-100 max-w-5xl mr-auto overflow-y-auto max-h-[calc(100vh-200px)] ">
+    <div className="p-6 md:p-3 bg-gray-100 dark:bg-gray-800 max-w-5xl mr-auto overflow-y-auto max-h-[calc(100vh-200px)] text-gray-900 dark:text-gray-100 ">
       <h2 className="text-sm md:text-md font-bold mb-2">
         Allgemeine Einstellungen
       </h2>
@@ -74,7 +74,7 @@ const GeneralSettings: React.FC = () => {
           <label className="block text-xs md:text-sm font-medium">Name:</label>
           <input
             type="text"
-            className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+            className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
             value={name}
             onChange={(e) => setName(e.target.value)}
           />
@@ -87,7 +87,7 @@ const GeneralSettings: React.FC = () => {
           </label>
           <input
             type="text"
-            className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+            className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
             value={mac1}
             disabled
           />
@@ -101,7 +101,7 @@ const GeneralSettings: React.FC = () => {
           <div className="flex flex-row gap-2">
             <input
               type="text"
-              className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+              className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
               value={systemUhr.replace(/\s*Uhr$/, "")}
               disabled
             />
@@ -120,7 +120,7 @@ const GeneralSettings: React.FC = () => {
           <label className="block text-xs md:text-sm font-medium">IP:</label>
           <input
             type="text"
-            className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+            className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
             value={ip}
             onChange={(e) => setIp(e.target.value)}
           />
@@ -131,7 +131,7 @@ const GeneralSettings: React.FC = () => {
           </label>
           <input
             type="text"
-            className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+            className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
             value={subnet}
             onChange={(e) => setSubnet(e.target.value)}
           />
@@ -142,7 +142,7 @@ const GeneralSettings: React.FC = () => {
           </label>
           <input
             type="text"
-            className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+            className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
             value={gateway}
             onChange={(e) => setGateway(e.target.value)}
           />
diff --git a/components/main/settingsPageComponents/NTPSettings.tsx b/components/main/settingsPageComponents/NTPSettings.tsx
index f9a494c..16d3395 100644
--- a/components/main/settingsPageComponents/NTPSettings.tsx
+++ b/components/main/settingsPageComponents/NTPSettings.tsx
@@ -27,7 +27,7 @@ const NTPSettings: React.FC = () => {
   }
 
   return (
-    <div className="p-6 md:p-3 bg-gray-100 max-w-5xl mr-auto">
+    <div className="p-6 md:p-3 bg-gray-100 dark:bg-gray-800 max-w-5xl mr-auto text-gray-900 dark:text-gray-100">
       <h2 className="text-sm md:text-md font-bold mb-4">NTP Einstellungen</h2>
 
       <div className="grid md:grid-cols-2 gap-3">
@@ -35,7 +35,7 @@ const NTPSettings: React.FC = () => {
           <label className="block text-xs font-medium">NTP Server 1</label>
           <input
             type="text"
-            className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+            className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
             value={ntp1}
             onChange={(e) => setNtp1(e.target.value)}
           />
@@ -45,7 +45,7 @@ const NTPSettings: React.FC = () => {
           <label className="block text-xs font-medium">NTP Server 2</label>
           <input
             type="text"
-            className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+            className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
             value={ntp2}
             onChange={(e) => setNtp2(e.target.value)}
           />
@@ -55,7 +55,7 @@ const NTPSettings: React.FC = () => {
           <label className="block text-xs font-medium">NTP Server 3</label>
           <input
             type="text"
-            className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+            className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
             value={ntp3}
             onChange={(e) => setNtp3(e.target.value)}
           />
@@ -65,7 +65,7 @@ const NTPSettings: React.FC = () => {
           <label className="block text-xs font-medium">Zeitzone</label>
           <input
             type="text"
-            className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+            className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
             value={ntpTimezone}
             onChange={(e) => setNtpTimezone(e.target.value)}
           />
diff --git a/components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx b/components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx
index ab267ef..181a78a 100644
--- a/components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx
+++ b/components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx
@@ -21,7 +21,7 @@ export default function OPCUAInterfaceSettings() {
   );
 
   return (
-    <div className="p-6 md:p-3 bg-gray-100 max-w-5xl mr-auto ">
+    <div className="p-6 md:p-3 bg-gray-100 dark:bg-gray-800 max-w-5xl mr-auto text-gray-900 dark:text-gray-100 ">
       <div className="flex justify-between items-center mb-3">
         <Image
           src="/images/OPCUA.jpg"
@@ -74,7 +74,7 @@ export default function OPCUAInterfaceSettings() {
       {/* ✅ OPCUA Zustand */}
       <div className="mb-3">
         <label className="block font-medium text-sm mb-1">OPCUA Zustand</label>
-        <div className="p-1 border border-gray-300 rounded-md bg-white text-sm">
+        <div className="p-1 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-sm text-gray-900 dark:text-gray-100">
           {opcuaSettings.opcUaZustand}
         </div>
       </div>
@@ -85,7 +85,7 @@ export default function OPCUAInterfaceSettings() {
         <div className="flex">
           <input
             type="text"
-            className="flex-grow p-1 border border-gray-300 rounded-l-md text-sm"
+            className="flex-grow p-1 border border-gray-300 dark:border-gray-700 rounded-l-md text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
             value={nodesetName}
             onChange={(e) => setNodesetName(e.target.value)}
             disabled={opcuaSettings.isEnabled} // Disable input when server is enabled
@@ -106,7 +106,7 @@ export default function OPCUAInterfaceSettings() {
         <label className="block font-medium text-sm mb-1">
           Aktuelle OPC-Clients
         </label>
-        <div className="p-1 border border-gray-300 rounded-md bg-white text-sm">
+        <div className="p-1 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-sm text-gray-900 dark:text-gray-100">
           {opcUaActiveClientCount}
         </div>
       </div>
diff --git a/components/main/settingsPageComponents/UserManagementSettings.tsx b/components/main/settingsPageComponents/UserManagementSettings.tsx
index e6912f8..dff5f0e 100644
--- a/components/main/settingsPageComponents/UserManagementSettings.tsx
+++ b/components/main/settingsPageComponents/UserManagementSettings.tsx
@@ -38,7 +38,7 @@ const UserManagementSettings: React.FC = () => {
   };
 
   return (
-    <div className="p-6 md:p-3 bg-gray-100 max-w-5xl mr-auto">
+    <div className="p-6 md:p-3 bg-gray-100 dark:bg-gray-800 max-w-5xl mr-auto text-gray-900 dark:text-gray-100">
       <h2 className="text-sm md:text-md font-bold mb-4">Login Admin-Bereich</h2>
 
       {/* Admin Login/Logout */}
@@ -57,7 +57,7 @@ const UserManagementSettings: React.FC = () => {
               <input
                 type="text"
                 placeholder="Benutzername"
-                className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+                className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
                 value={username}
                 onChange={(e) => setUsername(e.target.value)}
                 onKeyDown={handleKeyDown}
@@ -65,7 +65,7 @@ const UserManagementSettings: React.FC = () => {
               <input
                 type="password"
                 placeholder="Passwort"
-                className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+                className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 onKeyDown={handleKeyDown}
diff --git a/components/main/settingsPageComponents/modals/ProgressModal.tsx b/components/main/settingsPageComponents/modals/ProgressModal.tsx
index b4a4e38..ab41326 100644
--- a/components/main/settingsPageComponents/modals/ProgressModal.tsx
+++ b/components/main/settingsPageComponents/modals/ProgressModal.tsx
@@ -13,7 +13,7 @@ const ProgressModal: React.FC<Props> = ({ visible, progress, slot }) => {
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 ">
-      <div className="bg-white p-6 rounded shadow-md text-center w-80">
+      <div className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-6 rounded shadow-md text-center w-80">
         {/* 
                 <h2 className="text-lg font-bold mb-4">
           Firmwareupdate
diff --git a/package-lock.json b/package-lock.json
index 76e6be7..05c18de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.740",
+  "version": "1.6.741",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.740",
+      "version": "1.6.741",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@headlessui/react": "^2.2.4",
diff --git a/package.json b/package.json
index fd5c66e..d3b5a84 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.740",
+  "version": "1.6.741",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 2ec02ee..dc7801e 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -149,11 +149,11 @@ function AppContent({
   }, [pathname, dispatch]);
 
   return (
-    <div className="flex flex-col h-screen overflow-hidden">
+    <div className="flex flex-col h-screen overflow-hidden bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
       <Header />
       <div className="flex flex-grow w-full">
         <Navigation className="w-56" />
-        <main className="w-full flex-grow">
+        <main className="w-full flex-grow bg-white dark:bg-gray-900">
           {sessionExpired && (
             <div className="bg-red-500 text-white p-4 text-center">
               ❌ Ihre Sitzung ist abgelaufen oder die Verbindung ist