diff --git a/components/Navigation.jsx b/components/Navigation.jsx
index dcb11e4..f65a3f5 100644
--- a/components/Navigation.jsx
+++ b/components/Navigation.jsx
@@ -1,4 +1,4 @@
-"use client";
+"use client"; // components/Navigation.jsx
 import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -13,7 +13,12 @@ function Navigation() {
     }
   }, [pathname]);
 
-  // Menüeinträge ohne .html-Endungen für SPA-Navigation
+  // Funktion, die das ".html" basierend auf der Umgebung hinzufügt
+  const formatPath = (path) => {
+    return process.env.NODE_ENV === "production" ? `${path}.html` : path;
+  };
+
+  // Menüeinträge ohne .html-Endungen für die Entwicklungsumgebung
   const menuItems = [
     { name: "Übersicht", path: "/dashboard" },
     { name: "Kabelüberwachung", path: "/kabelueberwachung" },
@@ -24,7 +29,7 @@ function Navigation() {
     <aside>
       <nav className="w-64 flex-shrink-0 mt-32 overflow-hidden">
         {menuItems.map((item) => (
-          <Link href={item.path} key={item.name}>
+          <Link href={formatPath(item.path)} key={item.name}>
             <div
               className={`block px-4 py-2 mb-4 font-bold whitespace-nowrap transition duration-300 ${
                 activeLink.startsWith(item.path)
diff --git a/components/modales/SettingsModal.jsx b/components/modales/SettingsModal.jsx
index 063e4c2..be26968 100644
--- a/components/modales/SettingsModal.jsx
+++ b/components/modales/SettingsModal.jsx
@@ -266,7 +266,7 @@ function SettingModal({ showModal, onClose }) {
         </button>
 
         {/* Weitere Inhalte wie Formular */}
-        <div>
+        <div className="text-black">
           <h2 className="text-lg font-bold mb-4">System:</h2>
           <form>
             <div className="mb-4">