diff --git a/components/modules/Kue705FO.tsx b/components/modules/Kue705FO.tsx
index eed4a55..3c5c58b 100644
--- a/components/modules/Kue705FO.tsx
+++ b/components/modules/Kue705FO.tsx
@@ -477,6 +477,26 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
     const input = e.currentTarget;
     input.value = input.value.replace(/[^0-9]/g, "");
   };
+  //---------------------------------------------------
+  //Auswahlmenü für Jahr, Monat und Sortierung
+  const [jahr, setJahr] = useState(new Date().getFullYear());
+  const [monat, setMonat] = useState(new Date().getMonth() + 1);
+  const [sortAscending, setSortAscending] = useState(true);
+
+  const handleSortToggle = () => {
+    setSortAscending(!sortAscending);
+    console.log(
+      "Sortierung umkehren:",
+      sortAscending ? "Absteigend" : "Aufsteigend"
+    );
+  };
+
+  const handleAktualisieren = () => {
+    console.log("Aktualisieren mit Jahr:", jahr, "Monat:", monat);
+    // Logik für die Aktualisierung hinzufügen
+  };
+
+  //---------------------------------------------------
 
   return (
     <div
@@ -647,10 +667,11 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
                   bottom: "auto",
                   marginRight: "-50%",
                   transform: "translate(-50%, -50%)",
-                  width: "95%",
-                  maxWidth: "75rem",
-                  height: "40.625rem",
-                  padding: "0.625rem",
+                  width: "80%", // Breite reduzieren
+                  maxWidth: "50rem", // Maximale Breite
+                  height: "30rem", // Höhe anpassen
+                  padding: "1rem", // Weniger Padding
+                  overflow: "hidden", // Scrollen vermeiden
                 },
               }}
             >
@@ -669,124 +690,22 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
                 <i className="bi bi-x-circle-fill"></i>{" "}
                 {/* Bootstrap Icon "X" */}
               </button>
-              <input
-                className="input-group-field"
-                id="jahrSelect"
-                type="number"
-                value=""
-                min="2020"
-                max="2030"
-                onKeyUp={(e) => noLetter(e)}
-              />
-              <ul className="menu">
-                <li>
-                  <div
-                    className="input-group"
-                    style={{
-                      marginTop: "12px",
-                      width: "125px",
-                      paddingRight: "5px",
-                    }}
-                  >
-                    <span className="input-group-label">Jahr</span>
-                    <input
-                      className="input-group-field"
-                      id="jahrSelect"
-                      type="number"
-                      value=""
-                      min="2020"
-                      max="2030"
-                      onKeyUp={() => noLetter(this)}
-                    />
-                  </div>
-                </li>
 
-                <li>
-                  <div
-                    className="input-group"
-                    style={{
-                      marginTop: "12px",
-                      width: "125px",
-                      paddingRight: "10px",
-                    }}
-                  >
-                    <span className="input-group-label">Monat</span>
-                    <input
-                      className="input-group-field"
-                      id="monatSelect"
-                      type="number"
-                      value=""
-                      min="1"
-                      max="12"
-                      onkeyup="noLetter(this);"
-                    />
-                  </div>
-                </li>
+              {/* Verwenden Sie die separate TDRPopup-Komponente */}
+              <div
+                style={{
+                  maxHeight: "100%", // Inhalte anpassen
+                  overflow: "auto", // Nur bei Bedarf Scrollen aktivieren
+                }}
+              >
+                <TDRPopup />
+              </div>
 
-                <li>
-                  <div
-                    className="input-group"
-                    style={{
-                      marginTop: "12px",
-                      width: "160px",
-                      paddingRight: "10px",
-                      height: "28px",
-                    }}
-                  >
-                    <select
-                      id="options"
-                      name="options"
-                      style={{
-                        width: "100%",
-                        height: "100%",
-                        fontSize: "13px",
-                      }}
-                    ></select>
-                  </div>
-                </li>
-                <li
-                  style={{
-                    marginTop: "7px",
-                    paddingLeft: "5px",
-                    paddingRight: "5px",
-                  }}
-                >
-                  <button
-                    type="button"
-                    className="button littwin small"
-                    onClick={() => sortieren()}
-                  >
-                    <i
-                      className="fi-arrow-up"
-                      style={{ fontSize: "1.2em" }}
-                    ></i>
-                    <i
-                      className="fi-arrow-down"
-                      style={{ fontSize: "1.2em" }}
-                    ></i>
-                  </button>
-                </li>
-
-                <li
-                  style={{
-                    marginTop: "7px",
-                    paddingLeft: "5px",
-                    paddingRight: "5px",
-                  }}
-                >
-                  <button
-                    type="button"
-                    className="button littwin small"
-                    onclick="aktualisieren()"
-                  >
-                    Aktualisieren
-                  </button>
-                </li>
-              </ul>
+              {/* Canvas für die Chart.js-Grafik */}
               <canvas
                 id="myChart"
                 ref={chartRef}
-                style={{ width: "100%", height: "37.5rem" }}
+                style={{ width: "100%", height: "20rem" }} // Grafikhöhe reduzieren
               ></canvas>
             </ReactModal>
           )}
@@ -811,3 +730,95 @@ interface Kue705FOProps {
   tdrLocation: number[];
   alarmStatus?: boolean;
 }
+//-------------------------------------------------------------
+// TDRPopup Komponente
+//-------------------------------------------------------------
+// Im Modal für TDR
+const TDRPopup = () => {
+  const [jahr, setJahr] = useState(new Date().getFullYear());
+  const [monat, setMonat] = useState(new Date().getMonth() + 1);
+  const [sortAscending, setSortAscending] = useState(true);
+
+  const handleSortToggle = () => {
+    setSortAscending(!sortAscending);
+    console.log(
+      "Sortierung umkehren:",
+      sortAscending ? "Absteigend" : "Aufsteigend"
+    );
+  };
+
+  const handleAktualisieren = () => {
+    console.log("Aktualisieren mit Jahr:", jahr, "Monat:", monat);
+    // Logik für die Aktualisierung hinzufügen
+  };
+
+  return (
+    <div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2 mr-4">
+      <div className="flex items-center space-x-2">
+        <label htmlFor="jahrSelect" className="text-sm font-semibold">
+          Jahr
+        </label>
+        <select
+          id="jahrSelect"
+          className="border rounded px-2 py-1"
+          value={jahr}
+          onChange={(e) => setJahr(Number(e.target.value))}
+        >
+          {Array.from({ length: 11 }, (_, i) => 2020 + i).map((year) => (
+            <option key={year} value={year}>
+              {year}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <label htmlFor="monatSelect" className="text-sm font-semibold">
+          Monat
+        </label>
+        <select
+          id="monatSelect"
+          className="border rounded px-2 py-1"
+          value={monat}
+          onChange={(e) => setMonat(Number(e.target.value))}
+        >
+          {Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (
+            <option key={month} value={month}>
+              {month}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <label htmlFor="emptySelect" className="text-sm font-semibold">
+          Auswahl
+        </label>
+        <select
+          id="emptySelect"
+          className="border rounded px-2 py-1"
+          defaultValue=""
+        >
+          <option value="" disabled>
+            Bitte wählen...
+          </option>
+        </select>
+      </div>
+
+      <button
+        onClick={handleSortToggle}
+        className="flex items-center justify-center px-3 py-1 bg-blue-500 text-white rounded text-sm"
+      >
+        <i className={`bi bi-arrow-${sortAscending ? "down" : "up"}-short`} />
+        <span className="ml-1">Sortieren</span>
+      </button>
+
+      <button
+        onClick={handleAktualisieren}
+        className="px-3 py-1 bg-green-500 text-white rounded text-sm"
+      >
+        Aktualisieren
+      </button>
+    </div>
+  );
+};