diff --git a/CHANGELOG.md b/CHANGELOG.md
index c91f5bd..13ac3d4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 All notable changes to this project are documented in this file.
 
+## [1.113.1] - 2026-07-08
+
+### Changed
+- CSS Variables panel: added the existing "Today Highlight", "Past Days", "Saturday" and
+  "Sunday" color controls as their own groups (bound to the same profile fields as the
+  standalone Element/Weekend Colors sections, so both stay in sync).
+- CSS Variables panel: every row now shows the color swatch before its label.
+
 ## [1.113.0] - 2026-07-08
 
 ### Added
diff --git a/package.json b/package.json
index 461dded..99b69bc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.113.0",
+  "version": "1.113.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/SettingsSidebar.tsx b/src/components/SettingsSidebar.tsx
index 6650794..5ebc4a2 100644
--- a/src/components/SettingsSidebar.tsx
+++ b/src/components/SettingsSidebar.tsx
@@ -147,8 +147,25 @@ function ExtraTimezonesEditor({
 
 // All customizable color custom-properties defined in globals.css :root, grouped for the
 // "Styling" tab's CSS Variables editor. Overrides are stored as a flat { "--var-name": "#hex" }
-// map in profile.customCssVars and applied on top of containerStyle in WeeklyView.
-const CSS_VARIABLE_GROUPS: { title: string; vars: { name: string; label: string; default: string }[] }[] = [
+// map in profile.customCssVars and applied on top of containerStyle in WeeklyView. Entries with
+// a `profileKey` instead read/write that scalar profile field directly (same fields the
+// "Element Colors" / "Weekend Highlight Colors" controls elsewhere in this tab use), so both
+// controls for the same setting always stay in sync.
+const CSS_VARIABLE_GROUPS: { title: string; vars: { name: string; label: string; default: string; profileKey?: string }[] }[] = [
+    {
+        title: "Element Colors",
+        vars: [
+            { name: "todayHighlightColor", label: "Today Highlight", default: "#f0fafa", profileKey: "todayHighlightColor" },
+            { name: "pastDayColor", label: "Past Days", default: "#a6a6a7", profileKey: "pastDayColor" },
+        ],
+    },
+    {
+        title: "Weekend Highlight Colors",
+        vars: [
+            { name: "weekendColorSat", label: "Saturday", default: "#666666", profileKey: "weekendColorSat" },
+            { name: "weekendColorSun", label: "Sunday", default: "#dc2626", profileKey: "weekendColorSun" },
+        ],
+    },
     {
         title: "Base Colors",
         vars: [
@@ -256,6 +273,7 @@ function CssVariablesEditor({
     const de = profile.language === "de";
     const vars: Record<string, string> = profile.customCssVars || {};
     const debounceTimer = useRef<NodeJS.Timeout | null>(null);
+    const fieldDebounceTimers = useRef<Record<string, NodeJS.Timeout>>({});
 
     const setVar = (name: string, value: string) => {
         const next = { ...(profile.customCssVars || {}), [name]: value };
@@ -264,6 +282,12 @@ function CssVariablesEditor({
         debounceTimer.current = setTimeout(() => saveSetting("customCssVars", next), 500);
     };
 
+    const setProfileField = (key: string, value: string) => {
+        setProfile((p: any) => ({ ...p, [key]: value }));
+        if (fieldDebounceTimers.current[key]) clearTimeout(fieldDebounceTimers.current[key]);
+        fieldDebounceTimers.current[key] = setTimeout(() => saveSetting(key, value), 500);
+    };
+
     const reset = () => {
         setProfile((p: any) => ({ ...p, customCssVars: {} }));
         saveSetting("customCssVars", {});
@@ -318,39 +342,44 @@ function CssVariablesEditor({
                         {group.title}
                     </div>
                     <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "6px 12px" }}>
-                        {group.vars.map((v) => (
-                            <div
-                                key={v.name}
-                                title={v.name}
-                                style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px" }}
-                            >
-                                <span
-                                    style={{
-                                        fontSize: "0.72rem",
-                                        color: "var(--weekly-settings-label)",
-                                        overflow: "hidden",
-                                        textOverflow: "ellipsis",
-                                        whiteSpace: "nowrap",
-                                    }}
+                        {group.vars.map((v) => {
+                            const value = v.profileKey ? (profile[v.profileKey] || v.default) : (vars[v.name] || v.default);
+                            const onChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+                                v.profileKey ? setProfileField(v.profileKey, e.target.value) : setVar(v.name, e.target.value);
+                            return (
+                                <div
+                                    key={v.name}
+                                    title={v.name}
+                                    style={{ display: "flex", alignItems: "center", gap: "8px" }}
                                 >
-                                    {v.label}
-                                </span>
-                                <input
-                                    type="color"
-                                    value={vars[v.name] || v.default}
-                                    onChange={(e) => setVar(v.name, e.target.value)}
-                                    style={{
-                                        width: "32px",
-                                        height: "22px",
-                                        cursor: "pointer",
-                                        border: "1px solid var(--weekly-settings-input-border)",
-                                        borderRadius: "4px",
-                                        background: "transparent",
-                                        flexShrink: 0,
-                                    }}
-                                />
-                            </div>
-                        ))}
+                                    <input
+                                        type="color"
+                                        value={value}
+                                        onChange={onChange}
+                                        style={{
+                                            width: "32px",
+                                            height: "22px",
+                                            cursor: "pointer",
+                                            border: "1px solid var(--weekly-settings-input-border)",
+                                            borderRadius: "4px",
+                                            background: "transparent",
+                                            flexShrink: 0,
+                                        }}
+                                    />
+                                    <span
+                                        style={{
+                                            fontSize: "0.72rem",
+                                            color: "var(--weekly-settings-label)",
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                            whiteSpace: "nowrap",
+                                        }}
+                                    >
+                                        {v.label}
+                                    </span>
+                                </div>
+                            );
+                        })}
                     </div>
                 </div>
             ))}