diff --git a/package.json b/package.json
index ee9baa1..4492700 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.110.0",
+  "version": "1.110.1",
   "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 e05bb8e..7437b6c 100644
--- a/src/components/WeeklyView.tsx
+++ b/src/components/WeeklyView.tsx
@@ -5761,6 +5761,9 @@ export default function WeeklyView() {
                         <button onClick={() => { fetchCalendarEvents(true); fetchTasks(); setShowQuickSettings(false); }} style={qsBtnStyle(darkMode)} title="Refresh"><RefreshCcw size={15} /></button>
                     </div>
                     <div style={{ flex: 1 }} />
+                    <button onClick={() => { setShowMobileRail(true); setShowQuickSettings(false); }} style={{ display: "flex", alignItems: "center", gap: "6px", background: "none", border: "none", cursor: "pointer", fontSize: "0.75rem", color: darkMode ? "#9ca3af" : "#6b7280", padding: "4px 0" }}>
+                        <LayoutPanelLeft size={16} />{profile.language === "de" ? "Icon-Leiste" : "Icon Rail"}
+                    </button>
                     <button onClick={() => setShowQuickSettings(false)} style={{ display: "flex", alignItems: "center", gap: "6px", background: "none", border: "none", cursor: "pointer", fontSize: "0.75rem", color: darkMode ? "#6b7280" : "#9ca3af", padding: "4px 0" }}>
                         <PanelLeftClose size={16} />{profile.language === "de" ? "Ausblenden" : "Hide"}
                     </button>
@@ -6063,8 +6066,8 @@ export default function WeeklyView() {
             {/* Mobile Header */}
             {isMobile && (
                 <header className="mobile-header" style={{ background: darkMode ? "#111827" : "#ffffff", borderBottom: `1px solid ${darkMode ? "#374151" : "#e5e7eb"}` }}>
-                    {/* Left: Mobile sidebar */}
-                    <button className="mobile-header-btn" onClick={() => setShowMobileRail(true)} title="Menu" style={{ color: darkMode ? "#e5e7eb" : "#6b7280" }}>
+                    {/* Left: Quick Settings */}
+                    <button className="mobile-header-btn" onClick={() => setShowQuickSettings(true)} title="Quick Settings" style={{ color: darkMode ? "#e5e7eb" : "#6b7280" }}>
                         <PanelLeftOpen size={22} />
                     </button>
 
@@ -6112,12 +6115,12 @@ export default function WeeklyView() {
                 </header>
             )}
 
-            {/* Mobile left sidebar */}
+            {/* Mobile left sidebar (icon rail — mirrors desktop collapsed rail) */}
             {isMobile && showMobileRail && (
                 <>
                     <div
                         className="mobile-rail-backdrop"
-                        onClick={() => setShowMobileRail(false)}
+                        onClick={() => { setShowMobileRail(false); setFlyoutSection(null); }}
                         style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.35)", zIndex: 200 }}
                     />
                     <div className="mobile-left-sidebar" style={{
@@ -6125,31 +6128,95 @@ export default function WeeklyView() {
                         background: darkMode ? "#1a1a2e" : "var(--paper)",
                         borderRight: `1px solid var(--line)`,
                         zIndex: 201, display: "flex", flexDirection: "column",
-                        alignItems: "center", paddingTop: "8px", paddingBottom: "8px", gap: "4px",
+                        alignItems: "center", paddingTop: "6px", paddingBottom: "8px", gap: "2px",
                         overflowY: "auto",
                     }}>
-                        {/* Close */}
-                        <button className="mobile-rail-btn" onClick={() => setShowMobileRail(false)} title="Close" style={{ ...railIconBtnStyle }}><PanelLeftOpen size={16} /></button>
-                        <div className="mobile-rail-sep" style={{ width: "32px", height: "1px", background: "var(--line)", margin: "4px 0" }} />
+                        {/* Collapse */}
+                        <button className="mobile-rail-btn" onClick={() => { setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title="Close"><PanelLeftClose size={16} /></button>
+                        {railSep}
                         {/* Navigation */}
-                        <button className="mobile-rail-btn" onClick={() => { goToPrevWeek(); setShowMobileRail(false); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Vorherige Woche" : "Prev week"}><ChevronsLeft size={15} /></button>
-                        <button className="mobile-rail-btn" onClick={() => { goToPrevDay(); setShowMobileRail(false); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Vorheriger Tag" : "Prev day"}><ChevronLeft size={15} /></button>
+                        <button className="mobile-rail-btn" onClick={() => { goToPrevWeek(); setShowMobileRail(false); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Vorherige Woche" : "Previous Week"}><ChevronsLeft size={15} /></button>
+                        <button className="mobile-rail-btn" onClick={() => { goToPrevDay(); setShowMobileRail(false); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Vorheriger Tag" : "Previous Day"}><ChevronLeft size={15} /></button>
                         <button className="mobile-rail-btn" onClick={() => { goToToday(); setShowMobileRail(false); }} style={{ ...railIconBtnStyle, fontSize: "0.5rem", fontWeight: 800, letterSpacing: "0.05em" }} title="Today">{profile.language === "de" ? "HEUTE" : "TODAY"}</button>
-                        <button className="mobile-rail-btn" onClick={() => { goToNextDay(); setShowMobileRail(false); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Nächster Tag" : "Next day"}><ChevronRight size={15} /></button>
-                        <button className="mobile-rail-btn" onClick={() => { goToNextWeek(); setShowMobileRail(false); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Nächste Woche" : "Next week"}><ChevronsRight size={15} /></button>
-                        <div className="mobile-rail-sep" style={{ width: "32px", height: "1px", background: "var(--line)", margin: "4px 0" }} />
-                        {/* Actions */}
-                        <button className="mobile-rail-btn" onClick={() => { setIsSearchOpen(true); setShowMobileRail(false); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Suche" : "Search"}><Search size={15} /></button>
-                        <button className="mobile-rail-btn" onClick={() => { setShowDatePicker(true); setShowMobileRail(false); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Datum" : "Jump to date"}><CalendarDays size={15} /></button>
-                        <button className="mobile-rail-btn" onClick={() => { setShowProjectsSidebar(true); setShowMobileRail(false); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Projekte" : "Projects"}><FolderOpen size={15} /></button>
-                        <button className="mobile-rail-btn" onClick={() => { setShowFocusMode(true); setShowMobileRail(false); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Fokus" : "Focus"}><Zap size={15} /></button>
-                        <button className="mobile-rail-btn" onClick={() => { setShowQuickSettings(true); setShowMobileRail(false); }} style={{ ...railIconBtnStyle }} title="Quick settings"><SlidersHorizontal size={15} /></button>
+                        <button className="mobile-rail-btn" onClick={() => { goToNextDay(); setShowMobileRail(false); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Nächster Tag" : "Next Day"}><ChevronRight size={15} /></button>
+                        <button className="mobile-rail-btn" onClick={() => { goToNextWeek(); setShowMobileRail(false); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Nächste Woche" : "Next Week"}><ChevronsRight size={15} /></button>
+                        {railSep}
+                        {/* View flyout */}
+                        <button className="mobile-rail-btn" style={{ ...railIconBtnStyle, color: "var(--accent)" }} title={profile.language === "de" ? "Ansicht" : "View"} onClick={(e) => { const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); setFlyoutY(rect.top); setFlyoutSection(flyoutSection === "view" ? null : "view"); }}>
+                            {profile.viewStyle === "simple" ? <Calendar size={15} /> : profile.viewStyle === "calendar" ? <CalendarDays size={15} /> : profile.viewStyle === "list" ? <ListTodo size={15} /> : profile.viewStyle === "kanban" ? <Kanban size={15} /> : <Target size={15} />}
+                        </button>
+                        {/* Columns flyout */}
+                        <button className="mobile-rail-btn" style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Spalten" : "Columns"} onClick={(e) => { const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); setFlyoutY(rect.top); setFlyoutSection(flyoutSection === "columns" ? null : "columns"); }}><LayoutGrid size={15} /></button>
+                        {/* Slot flyout */}
+                        {profile.showTimeGrid && (<button className="mobile-rail-btn" style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Zeitfenster" : "Slot"} onClick={(e) => { const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); setFlyoutY(rect.top); setFlyoutSection(flyoutSection === "slot" ? null : "slot"); }}><Clock size={15} /></button>)}
+                        {railSep}
+                        {/* Quick Actions */}
+                        <button className="mobile-rail-btn" onClick={() => { setIsSearchOpen(true); setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Suche" : "Search"}><Search size={15} /></button>
+                        <button className="mobile-rail-btn" onClick={() => { setShowDatePicker(true); setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Datum wählen" : "Jump to date"}><CalendarDays size={15} /></button>
+                        <button className="mobile-rail-btn" onClick={() => { const now = new Date(); setCalendarEventModal({ isOpen: true, event: undefined, initialDate: now, initialStartTime: `${String(now.getHours()).padStart(2, "0")}:00` }); setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Kalendereintrag" : "Calendar Event"}><Plus size={15} /></button>
+                        <button className="mobile-rail-btn" onClick={() => { setShowProjectsSidebar(true); setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Projekte" : "Projects"}><FolderOpen size={15} /></button>
+                        <button className="mobile-rail-btn" onClick={() => { setIsRecurringTasksOpen(true); setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Wiederkehrend" : "Recurring"}><Repeat size={15} /></button>
+                        <button className="mobile-rail-btn" onClick={() => { const nv = !profile.showNextTask; setShowNextTask(nv); saveSetting("showNextTask", nv); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Ziel" : "Goal"}>{profile.showNextTask ? <Play size={15} /> : <Target size={15} />}</button>
+                        <button className="mobile-rail-btn" onClick={() => { setShowFocusMode(true); setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Fokus" : "Focus"}><Zap size={15} /></button>
+                        {railSep}
+                        {/* Visibility flyout */}
+                        <button className="mobile-rail-btn" style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Sichtbarkeit" : "Visibility"} onClick={(e) => { const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); setFlyoutY(rect.top); setFlyoutSection(flyoutSection === "visibility" ? null : "visibility"); }}><Eye size={15} /></button>
+                        {/* Appearance flyout */}
+                        <button className="mobile-rail-btn" style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Darstellung" : "Appearance"} onClick={(e) => { const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); setFlyoutY(rect.top); setFlyoutSection(flyoutSection === "display" ? null : "display"); }}>{darkMode ? <Moon size={15} /> : <Sun size={15} />}</button>
+                        {railSep}
+                        {/* History & Utilities */}
+                        <button className="mobile-rail-btn" onClick={handleUndo} disabled={undoCount === 0} style={{ ...railIconBtnStyle, opacity: undoCount === 0 ? 0.3 : 1 }} title="Undo"><Undo2 size={15} /></button>
+                        <button className="mobile-rail-btn" onClick={handleRedo} disabled={redoCount === 0} style={{ ...railIconBtnStyle, opacity: redoCount === 0 ? 0.3 : 1 }} title="Redo"><Redo2 size={15} /></button>
+                        <button className="mobile-rail-btn" onClick={() => { fetchCalendarEvents(true); fetchTasks(); setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title="Refresh"><RefreshCcw size={15} /></button>
+                        <button className="mobile-rail-btn" onClick={() => { setShowWeekPrintModal(true); setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Drucken" : "Print"}><Printer size={15} /></button>
+                        <button className="mobile-rail-btn" onClick={() => setDarkMode(!darkMode)} style={{ ...railIconBtnStyle }} title={darkMode ? "Light Mode" : "Dark Mode"}>{darkMode ? <Sun size={15} /> : <Moon size={15} />}</button>
                         <div style={{ flex: 1 }} />
-                        <div className="mobile-rail-sep" style={{ width: "32px", height: "1px", background: "var(--line)", margin: "4px 0" }} />
-                        <button className="mobile-rail-btn" onClick={() => setDarkMode(!darkMode)} style={{ ...railIconBtnStyle }} title={darkMode ? "Light" : "Dark"}>{darkMode ? <Sun size={15} /> : <Moon size={15} />}</button>
-                        <button className="mobile-rail-btn" onClick={() => { setShowSettings(true); setShowMobileRail(false); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Einstellungen" : "Settings"}><Settings size={15} /></button>
+                        {railSep}
+                        {/* Settings + User/logout */}
+                        <button className="mobile-rail-btn" onClick={() => { setShowSettings(true); setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Einstellungen" : "Settings"}><Settings size={15} /></button>
                         <button className="mobile-rail-btn" onClick={() => signOut()} style={{ ...railIconBtnStyle, color: "#ef4444" }} title={profile.language === "de" ? "Abmelden" : "Sign out"}><LogOut size={15} /></button>
                     </div>
+                    {/* Mobile flyout panel — positioned right of the 60px rail */}
+                    {flyoutSection && (
+                        <>
+                            <div onClick={() => setFlyoutSection(null)} style={{ position: "fixed", inset: 0, zIndex: 202 }} />
+                            <div style={{ ...flyoutPanelStyle, left: "68px", zIndex: 203 }} onClick={(e) => e.stopPropagation()}>
+                                {flyoutSection === "view" && (
+                                    <>
+                                        <div style={flyoutLabelStyle}>{profile.language === "de" ? "Ansicht" : "View"}</div>
+                                        <div style={{ display: "flex", gap: "4px" }}>{[{ key: "simple", icon: <Calendar size={13} />, label: profile.language === "de" ? "Einfach" : "Simple" }, { key: "calendar", icon: <CalendarDays size={13} />, label: profile.language === "de" ? "Kalender" : "Calendar" }, { key: "list", icon: <ListTodo size={13} />, label: profile.language === "de" ? "Liste" : "List" }, { key: "kanban", icon: <Kanban size={13} />, label: "Kanban" }, { key: "priority", icon: <Target size={13} />, label: profile.language === "de" ? "Priorität" : "Priority" }].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); } setFlyoutSection(null); }} title={v.label} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", background: profile.viewStyle === v.key ? "var(--accent)" : (darkMode ? "#1f2937" : "#e5e7eb"), color: profile.viewStyle === v.key ? "#fff" : (darkMode ? "#9ca3af" : "var(--ink-3)") }}>{v.icon}</button>))}</div>
+                                    </>
+                                )}
+                                {flyoutSection === "columns" && (
+                                    <>
+                                        <div style={flyoutLabelStyle}>{profile.language === "de" ? "Spalten" : "Days"}</div>
+                                        <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" : "var(--ink)") : (darkMode ? "#1f2937" : "#e5e7eb"), color: viewDays === num ? "#fff" : (darkMode ? "#9ca3af" : "var(--ink-3)") }}>{num}</button>))}</div>
+                                    </>
+                                )}
+                                {flyoutSection === "slot" && (
+                                    <>
+                                        <div style={flyoutLabelStyle}>{profile.language === "de" ? "Zeitfenster" : "Slot Duration"}</div>
+                                        <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" : "var(--ink)") : (darkMode ? "#1f2937" : "#e5e7eb"), color: effectiveCellDuration === d ? "#fff" : (darkMode ? "#9ca3af" : "var(--ink-3)") }}>{d}m</button>))}</div>
+                                        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}><span style={{ fontSize: "0.75rem", color: darkMode ? "#9ca3af" : "#6b7280" }}>:15/:30/:45</span><button onClick={() => { const v = !effectiveShowSubHourSlots; setShowSubHourSlots(v); saveSetting("showSubHourSlots", v); }} style={{ background: "none", border: "none", cursor: "pointer", color: darkMode ? "#9ca3af" : "#6b7280" }}>{effectiveShowSubHourSlots ? <Eye size={15} /> : <EyeOff size={15} />}</button></div>
+                                    </>
+                                )}
+                                {flyoutSection === "visibility" && (
+                                    <>
+                                        <div style={flyoutLabelStyle}>{profile.language === "de" ? "Sichtbarkeit" : "Visibility"}</div>
+                                        {[{ label: profile.language === "de" ? "Irgendwann" : "Someday", value: effectiveShowSomeday, toggle: () => saveViewSetting("showSomeday", !effectiveShowSomeday, true) }, { label: profile.language === "de" ? "Ganztägig" : "All-day", value: effectiveShowAllDay, toggle: () => saveViewSetting("showAllDayEvents", !effectiveShowAllDay, true) }, { label: profile.language === "de" ? "Checkboxen" : "Checkboxes", value: effectiveShowTaskCheckboxes, toggle: () => saveViewSetting("showTaskCheckboxes", !effectiveShowTaskCheckboxes, true) }, { label: profile.language === "de" ? "Projekt-Icons" : "Project Icons", value: effectiveShowProjectIcons, toggle: () => saveViewSetting("showProjectIcons", !effectiveShowProjectIcons, true) }, { label: profile.language === "de" ? "Prioritäts-Icons" : "Priority Icons", value: effectiveShowPriorityIcons, toggle: () => saveViewSetting("showPriorityIcons", !effectiveShowPriorityIcons, true) }, ...((profile.weatherEnabled || profile.weatherLat || profile.weatherLon) ? [{ label: profile.language === "de" ? "Wetter" : "Weather", value: effectiveWeatherEnabled, toggle: () => { const v = !effectiveWeatherEnabled; setProfile((p: any) => ({ ...p, weatherEnabled: v })); saveViewSetting("weatherEnabled", v, true); } }] : []) ].map(({ label, value, toggle }) => (<div key={label} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: "16px" }}><span style={{ fontSize: "0.8rem", color: darkMode ? "#d1d5db" : "#333", whiteSpace: "nowrap" }}>{label}</span><button onClick={toggle} style={{ background: "none", border: "none", cursor: "pointer", color: darkMode ? "#9ca3af" : "#6b7280", flexShrink: 0 }}>{value ? <Eye size={15} /> : <EyeOff size={15} />}</button></div>))}
+                                    </>
+                                )}
+                                {flyoutSection === "display" && (
+                                    <>
+                                        <div style={flyoutLabelStyle}>{profile.language === "de" ? "Darstellung" : "Appearance"}</div>
+                                        <div><div style={{ fontSize: "0.7rem", color: darkMode ? "#9ca3af" : "#6b7280", marginBottom: "4px" }}>{profile.language === "de" ? "Textgröße" : "Text size"}</div><div style={{ display: "flex", gap: "4px" }}>{(["S", "M", "L"] as const).map((size) => (<button key={size} onClick={() => { setFontSize(size); saveSetting("fontSize", size); }} style={{ flex: 1, padding: "4px 0", fontSize: "0.8rem", borderRadius: "6px", border: "none", cursor: "pointer", fontWeight: profile.fontSize === size ? 700 : 400, background: profile.fontSize === size ? (darkMode ? "#374151" : "#333") : (darkMode ? "#1f2937" : "#e5e7eb"), color: profile.fontSize === size ? "#fff" : (darkMode ? "#9ca3af" : "#6b7280") }}>{size}</button>))}</div></div>
+                                        <div><div style={{ fontSize: "0.7rem", color: darkMode ? "#9ca3af" : "#6b7280", marginBottom: "4px" }}>{profile.language === "de" ? "Starten mit" : "Start on"}</div><div style={{ display: "flex", gap: "4px" }}><button onClick={() => { setProfile({ ...profile, startDayOffset: 0 }); saveSetting("startDayOffset", 0); const d = new Date(); d.setHours(0, 0, 0, 0); setCurrentWeekStart(d); }} style={{ flex: 1, padding: "4px 0", fontSize: "0.75rem", borderRadius: "6px", border: "none", cursor: "pointer", fontWeight: (profile.startDayOffset || 0) === 0 ? 700 : 400, background: (profile.startDayOffset || 0) === 0 ? (darkMode ? "#374151" : "#333") : (darkMode ? "#1f2937" : "#e5e7eb"), color: (profile.startDayOffset || 0) === 0 ? "#fff" : (darkMode ? "#9ca3af" : "#6b7280") }}>{profile.language === "de" ? "Heute" : "Today"}</button><button onClick={() => { setProfile({ ...profile, startDayOffset: -1 }); saveSetting("startDayOffset", -1); const d = new Date(); d.setHours(0, 0, 0, 0); d.setDate(d.getDate() - 1); setCurrentWeekStart(d); }} style={{ flex: 1, padding: "4px 0", fontSize: "0.75rem", borderRadius: "6px", border: "none", cursor: "pointer", fontWeight: profile.startDayOffset === -1 ? 700 : 400, background: profile.startDayOffset === -1 ? (darkMode ? "#374151" : "#333") : (darkMode ? "#1f2937" : "#e5e7eb"), color: profile.startDayOffset === -1 ? "#fff" : (darkMode ? "#9ca3af" : "#6b7280") }}>{profile.language === "de" ? "Gestern" : "Yesterday"}</button></div></div>
+                                        <div><div style={{ fontSize: "0.7rem", color: darkMode ? "#9ca3af" : "#6b7280", marginBottom: "4px" }}>{profile.language === "de" ? "Anzeige" : "Display"}</div><div style={{ display: "flex", gap: "4px" }}><button onClick={() => setDarkMode(false)} style={{ flex: 1, padding: "4px 0", fontSize: "0.75rem", borderRadius: "6px", border: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: "4px", fontWeight: !darkMode ? 700 : 400, background: !darkMode ? "#333" : (darkMode ? "#1f2937" : "#e5e7eb"), color: !darkMode ? "#fff" : (darkMode ? "#9ca3af" : "#6b7280") }}><Sun size={12} /> {profile.language === "de" ? "Hell" : "Light"}</button><button onClick={() => setDarkMode(true)} style={{ flex: 1, padding: "4px 0", fontSize: "0.75rem", borderRadius: "6px", border: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: "4px", fontWeight: darkMode ? 700 : 400, background: darkMode ? "#374151" : "#e5e7eb", color: darkMode ? "#fff" : "#6b7280" }}><Moon size={12} /> {profile.language === "de" ? "Dunkel" : "Dark"}</button></div></div>
+                                    </>
+                                )}
+                            </div>
+                        </>
+                    )}
                 </>
             )}