diff --git a/web/components/core/theme/custom-theme-selector.tsx b/web/components/core/theme/custom-theme-selector.tsx
index bd6f43569..fdb7a6483 100644
--- a/web/components/core/theme/custom-theme-selector.tsx
+++ b/web/components/core/theme/custom-theme-selector.tsx
@@ -66,7 +66,6 @@ export const CustomThemeSelector: React.FC = observer(() => {
 
   const handleValueChange = (val: string | undefined, onChange: any) => {
     let hex = val;
-
     // prepend a hashtag if it doesn't exist
     if (val && val[0] !== "#") hex = `#${val}`;
 
@@ -94,7 +93,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
                       placeholder="#0d101b"
                       className="w-full"
                       style={{
-                        backgroundColor: value,
+                        backgroundColor: watch("background"),
                         color: watch("text"),
                       }}
                       hasError={Boolean(errors?.background)}
@@ -120,8 +119,8 @@ export const CustomThemeSelector: React.FC = observer(() => {
                       placeholder="#c5c5c5"
                       className="w-full"
                       style={{
-                        backgroundColor: watch("background"),
-                        color: value,
+                        backgroundColor: watch("text"),
+                        color: watch("background"),
                       }}
                       hasError={Boolean(errors?.text)}
                     />
@@ -146,7 +145,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
                       placeholder="#3f76ff"
                       className="w-full"
                       style={{
-                        backgroundColor: value,
+                        backgroundColor: watch("primary"),
                         color: watch("text"),
                       }}
                       hasError={Boolean(errors?.primary)}
@@ -172,7 +171,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
                       placeholder="#0d101b"
                       className="w-full"
                       style={{
-                        backgroundColor: value,
+                        backgroundColor: watch("sidebarBackground"),
                         color: watch("sidebarText"),
                       }}
                       hasError={Boolean(errors?.sidebarBackground)}
@@ -200,8 +199,8 @@ export const CustomThemeSelector: React.FC = observer(() => {
                       placeholder="#c5c5c5"
                       className="w-full"
                       style={{
-                        backgroundColor: watch("sidebarBackground"),
-                        color: value,
+                        backgroundColor: watch("sidebarText"),
+                        color: watch("sidebarBackground"),
                       }}
                       hasError={Boolean(errors?.sidebarText)}
                     />