diff --git a/.env.development b/.env.development
index 2b573ba..ae94ea8 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.737
+NEXT_PUBLIC_APP_VERSION=1.6.738
 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 32435c5..b7cb9f2 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.737
+NEXT_PUBLIC_APP_VERSION=1.6.738
 NEXT_PUBLIC_CPL_MODE=production
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 169bf4f..e73b4c0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## [1.6.738] – 2025-08-18
+
+- feat: Navigation dar und light mode
+
+---
 ## [1.6.737] – 2025-08-18
 
 - feat: playwright scraper
diff --git a/components/header/Header.tsx b/components/header/Header.tsx
index d7dd9b8..4db2545 100644
--- a/components/header/Header.tsx
+++ b/components/header/Header.tsx
@@ -121,9 +121,15 @@ function Header() {
             title={isDark ? "Light Mode" : "Dark Mode"}
           >
             {isDark ? (
-              <Icon icon="mdi:weather-night" className="text-xl text-yellow-300" />
+              <Icon
+                icon="mdi:weather-night"
+                className="text-xl text-yellow-300"
+              />
             ) : (
-              <Icon icon="mdi:white-balance-sunny" className="text-xl text-yellow-500" />
+              <Icon
+                icon="mdi:white-balance-sunny"
+                className="text-xl text-yellow-500"
+              />
             )}
           </button>
         </div>
diff --git a/components/main/dashboard/DashboardView.tsx b/components/main/dashboard/DashboardView.tsx
index 9bf7768..e9e2d9a 100644
--- a/components/main/dashboard/DashboardView.tsx
+++ b/components/main/dashboard/DashboardView.tsx
@@ -25,7 +25,7 @@ const DashboardView: React.FC = () => {
   }, [dispatch]);
   //-------------------------------------
   return (
-    <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0">
+    <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
       {/* Header */}
       <div className="flex justify-between items-center w-full lg:w-2/3">
         <div className="flex justify-between gap-1">
diff --git a/components/main/dashboard/NetworkInfo.tsx b/components/main/dashboard/NetworkInfo.tsx
index 7794dfa..283cfd5 100644
--- a/components/main/dashboard/NetworkInfo.tsx
+++ b/components/main/dashboard/NetworkInfo.tsx
@@ -38,7 +38,7 @@ const NetworkInfo: React.FC = () => {
 
   return (
     <div className="w-full flex-direction: row flex">
-      <div className=" flex-grow flex justify-between items-center mt-1 bg-white p-2 rounded-lg shadow-md border border-gray-200 laptop:m-0 laptop:scale-y-75 2xl:scale-y-75">
+      <div className=" flex-grow flex justify-between items-center mt-1 bg-white dark:bg-gray-800 p-2 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 laptop:m-0 laptop:scale-y-75 2xl:scale-y-75">
         <div className="flex items-center space-x-4">
           <Image
             src="/images/IP-icon.svg"
@@ -49,8 +49,12 @@ const NetworkInfo: React.FC = () => {
             priority
           />
           <div>
-            <p className="text-xs text-gray-500">IP-Adresse</p>
-            <p className="text-sm font-medium text-gray-700">{ip}</p>
+            <p className="text-xs text-gray-500 dark:text-gray-400">
+              IP-Adresse
+            </p>
+            <p className="text-sm font-medium text-gray-700 dark:text-gray-200">
+              {ip}
+            </p>
           </div>
         </div>
 
@@ -64,8 +68,12 @@ const NetworkInfo: React.FC = () => {
             priority
           />
           <div>
-            <p className="text-xs text-gray-500">Subnet-Maske</p>
-            <p className="text-sm font-medium text-gray-700">{subnet}</p>
+            <p className="text-xs text-gray-500 dark:text-gray-400">
+              Subnet-Maske
+            </p>
+            <p className="text-sm font-medium text-gray-700 dark:text-gray-200">
+              {subnet}
+            </p>
           </div>
         </div>
 
@@ -79,16 +87,20 @@ const NetworkInfo: React.FC = () => {
             priority
           />
           <div>
-            <p className="text-xs text-gray-500">Gateway</p>
-            <p className="text-sm font-medium text-gray-700">{gateway}</p>
+            <p className="text-xs text-gray-500 dark:text-gray-400">Gateway</p>
+            <p className="text-sm font-medium text-gray-700 dark:text-gray-200">
+              {gateway}
+            </p>
           </div>
         </div>
 
         <div className="flex items-center space-x-4">
           <div className="text-xs font-bold text-littwin-blue">OPC-UA</div>
           <div>
-            <p className="text-xs text-gray-500">Status</p>
-            <p className="text-sm font-medium text-gray-700">{opcUaZustand}</p>
+            <p className="text-xs text-gray-500 dark:text-gray-400">Status</p>
+            <p className="text-sm font-medium text-gray-700 dark:text-gray-200">
+              {opcUaZustand}
+            </p>
           </div>
         </div>
         {/* OPC UA Nodeset Name */}
diff --git a/components/main/dashboard/VersionInfo.tsx b/components/main/dashboard/VersionInfo.tsx
index 84acd1b..3d1dd86 100644
--- a/components/main/dashboard/VersionInfo.tsx
+++ b/components/main/dashboard/VersionInfo.tsx
@@ -18,22 +18,24 @@ const VersionInfo: React.FC<VersionInfoProps> = ({ className = "" }) => {
 
   return (
     <div
-      className={`bg-gray-50 rounded-lg shadow-sm border border-gray-200 w-full laptop:p-2 ${className}`}
+      className={`bg-gray-50 dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 w-full laptop:p-2 ${className}`}
     >
-      <h2 className="text-lg font-semibold text-gray-700 mb-2">
+      <h2 className="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">
         Versionsinformationen
       </h2>
 
       <div className="flex flex-row p-2 space-x-2">
         <Icon icon="bx:code-block" className="text-xl text-blue-400" />
-        <p className="text-sm text-gray-600">
+        <p className="text-sm text-gray-600 dark:text-gray-300">
           Applikationsversion: {appVersion}
         </p>
       </div>
 
       <div className="flex flex-row p-2 space-x-2">
         <Icon icon="mdi:web" className="text-xl text-blue-400" />
-        <p className="text-sm text-gray-600">Webversion: {webVersion}</p>
+        <p className="text-sm text-gray-600 dark:text-gray-300">
+          Webversion: {webVersion}
+        </p>
       </div>
     </div>
   );
diff --git a/package-lock.json b/package-lock.json
index a5083a6..b6851ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.737",
+  "version": "1.6.738",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.737",
+      "version": "1.6.738",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@headlessui/react": "^2.2.4",
diff --git a/package.json b/package.json
index d5c5ecd..78100a3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.737",
+  "version": "1.6.738",
   "private": true,
   "scripts": {
     "dev": "next dev",