diff --git a/package.json b/package.json
index 888c400..8581cc6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.105.1",
+  "version": "1.105.2",
   "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
   "main": "index.js",
   "scripts": {
diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx
index 0eeaf62..10a74da 100644
--- a/src/components/WeeklyView.tsx
+++ b/src/components/WeeklyView.tsx
@@ -5681,15 +5681,15 @@ export default function WeeklyView() {
                         top: 0,
                         bottom: 0,
                         width: "240px",
-                        background: darkMode ? "#1a1a2e" : "#fafafa",
-                        borderRight: `1px solid ${darkMode ? "#333" : "#e5e7eb"}`,
+                        background: darkMode ? "#1a1a2e" : "var(--paper)",
+                        borderRight: "1px solid var(--line)",
                         zIndex: 1000,
                         display: "flex",
                         flexDirection: "column",
                         padding: "16px 14px",
                         gap: "10px",
                         overflowY: "auto",
-                        boxShadow: "2px 0 12px rgba(0,0,0,0.08)",
+                        boxShadow: "2px 0 8px rgba(0,0,0,0.04)",
                     }}
                 >
                     <div style={{ fontSize: "0.85rem", fontWeight: 700, color: darkMode ? "#e5e7eb" : "#333", marginBottom: "2px" }}>
@@ -5697,7 +5697,7 @@ export default function WeeklyView() {
                     </div>
 
                     {/* Navigation Row */}
-                    <div style={{ display: "flex", justifyContent: "center", gap: "4px", padding: "4px 0", borderBottom: `1px solid ${darkMode ? "#333" : "#e5e7eb"}`, paddingBottom: "10px" }}>
+                    <div style={{ display: "flex", justifyContent: "center", gap: "4px", padding: "4px 0", borderBottom: "1px solid var(--line)", paddingBottom: "10px" }}>
                         <button onClick={() => { goToPrevWeek(); setShowQuickSettings(false); }} style={{ ...qsBtnStyle(darkMode), minWidth: "36px" }} title="Previous Week"><ChevronsLeft size={16} /></button>
                         <button onClick={() => { goToPrevDay(); setShowQuickSettings(false); }} style={{ ...qsBtnStyle(darkMode), minWidth: "36px" }} title="Previous Day"><ChevronLeft size={16} /></button>
                         <button onClick={() => { goToToday(); setShowQuickSettings(false); }} style={{ ...qsBtnStyle(darkMode), minWidth: "56px", fontWeight: 700, fontSize: "0.7rem" }} title="Today">{profile.language === "de" ? "Heute" : "Today"}</button>
@@ -5720,11 +5720,11 @@ export default function WeeklyView() {
                     </div>
 
                     {/* Separator */}
-                    <div style={{ borderTop: `1px solid ${darkMode ? "#333" : "#e5e7eb"}`, paddingTop: "8px" }} />
+                    <div style={{ borderTop: "1px solid var(--line)", paddingTop: "8px" }} />
 
                     {/* View Style */}
                     <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
-                        <span style={{ fontSize: "0.7rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "#6b7280" }}>
+                        <span style={{ fontSize: "0.7rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "var(--ink-3)" }}>
                             {profile.language === "de" ? "Ansicht" : "View"}
                         </span>
                         <div style={{ display: "flex", gap: "4px" }}>
@@ -5736,7 +5736,7 @@ export default function WeeklyView() {
                                 { key: "priority", icon: <Target size={13} /> },
                             ].map((v) => (
                                 <button key={v.key} onClick={() => { setViewStyle(v.key as any); saveSetting("viewStyle", v.key); if (v.key === "list") { setShowTimeGrid(false); saveSetting("showTimeGrid", false); } if (v.key === "simple" || v.key === "calendar") { setShowTimeGrid(true); saveSetting("showTimeGrid", true); } if (v.key === "priority" || v.key === "kanban") { setShowTimeGrid(false); saveSetting("showTimeGrid", false); } }}
-                                    style={{ flex: 1, padding: "5px 0", borderRadius: "6px", border: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: profile.viewStyle ===v.key ? 700 : 400, background: profile.viewStyle ===v.key ? "#0ea5e9" : (darkMode ? "#1f2937" : "#e5e7eb"), color: profile.viewStyle ===v.key ? "#fff" : (darkMode ? "#9ca3af" : "#6b7280") }}>
+                                    style={{ flex: 1, padding: "5px 0", borderRadius: "6px", border: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: profile.viewStyle ===v.key ? 700 : 400, background: profile.viewStyle ===v.key ? "var(--accent)" : (darkMode ? "#1f2937" : "#e5e7eb"), color: profile.viewStyle ===v.key ? "#fff" : (darkMode ? "#9ca3af" : "var(--ink-3)") }}>
                                     {v.icon}
                                 </button>
                             ))}
@@ -5745,13 +5745,13 @@ export default function WeeklyView() {
 
                     {/* Columns / Days */}
                     <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
-                        <span style={{ fontSize: "0.7rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "#6b7280" }}>
+                        <span style={{ fontSize: "0.7rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "var(--ink-3)" }}>
                             {profile.language === "de" ? "Spalten" : "Days"}
                         </span>
                         <div style={{ display: "flex", gap: "4px" }}>
                             {[1, 2, 3, 5, 7].map((num) => (
                                 <button key={num} onClick={() => { setViewDays(num); savedViewDaysRef.current = num; saveSetting("viewDays", num); }}
-                                    style={{ flex: 1, padding: "5px 0", fontSize: "0.8rem", borderRadius: "6px", border: "none", cursor: "pointer", fontWeight: viewDays === num ? 700 : 400, background: viewDays === num ? (darkMode ? "#374151" : "#333") : (darkMode ? "#1f2937" : "#e5e7eb"), color: viewDays === num ? "#fff" : (darkMode ? "#9ca3af" : "#6b7280") }}>
+                                    style={{ flex: 1, padding: "5px 0", fontSize: "0.8rem", borderRadius: "6px", border: "none", cursor: "pointer", fontWeight: viewDays === num ? 700 : 400, background: viewDays === num ? (darkMode ? "#374151" : "var(--ink)") : (darkMode ? "#1f2937" : "#e5e7eb"), color: viewDays === num ? "#fff" : (darkMode ? "#9ca3af" : "var(--ink-3)") }}>
                                     {num}
                                 </button>
                             ))}
@@ -5761,13 +5761,13 @@ export default function WeeklyView() {
                     {/* Slot Duration + sub-hour slots (only with time grid) */}
                     {profile.showTimeGrid && (
                         <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
-                            <span style={{ fontSize: "0.7rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "#6b7280" }}>
+                            <span style={{ fontSize: "0.7rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "var(--ink-3)" }}>
                                 {profile.language === "de" ? "Zeitfenster" : "Slot"}
                             </span>
                             <div style={{ display: "flex", gap: "4px" }}>
                                 {(([15, 20, 30, 60] as CellDuration[])).map((d) => (
                                     <button key={d} onClick={() => { setCellDuration(d); saveSetting("cellDuration", d); saveViewSetting("cellDuration", d, true); }}
-                                        style={{ flex: 1, padding: "5px 0", fontSize: "0.8rem", borderRadius: "6px", border: "none", cursor: "pointer", fontWeight: effectiveCellDuration === d ? 700 : 400, background: effectiveCellDuration === d ? (darkMode ? "#374151" : "#333") : (darkMode ? "#1f2937" : "#e5e7eb"), color: effectiveCellDuration === d ? "#fff" : (darkMode ? "#9ca3af" : "#6b7280") }}>
+                                        style={{ flex: 1, padding: "5px 0", fontSize: "0.8rem", borderRadius: "6px", border: "none", cursor: "pointer", fontWeight: effectiveCellDuration === d ? 700 : 400, background: effectiveCellDuration === d ? (darkMode ? "#374151" : "var(--ink)") : (darkMode ? "#1f2937" : "#e5e7eb"), color: effectiveCellDuration === d ? "#fff" : (darkMode ? "#9ca3af" : "var(--ink-3)") }}>
                                         {d}m
                                     </button>
                                 ))}