diff --git a/src/renderer/components/+preferences/application.tsx b/src/renderer/components/+preferences/application.tsx
index d73982a468..b85d3e9665 100644
--- a/src/renderer/components/+preferences/application.tsx
+++ b/src/renderer/components/+preferences/application.tsx
@@ -45,7 +45,10 @@ const NonInjectedApplication: React.FC<Dependencies> = ({ appPreferenceItems })
       <section id="appearance">
         <SubTitle title="Theme" />
         <Select
-          options={themeStore.themeOptions}
+          options={[
+            { label: "Sync with computer", value: "system" },
+            ...themeStore.themeOptions,
+          ]}
           value={userStore.colorTheme}
           onChange={({ value }) => userStore.colorTheme = value}
           themeName="lens"
diff --git a/src/renderer/theme.store.ts b/src/renderer/theme.store.ts
index 059a7ac832..e76b47dc38 100644
--- a/src/renderer/theme.store.ts
+++ b/src/renderer/theme.store.ts
@@ -70,14 +70,10 @@ export class ThemeStore extends Singleton {
   }
 
   @computed get themeOptions(): SelectOption<string>[] {
-    const options = Array.from(this.themes).map(([themeId, theme]) => ({
+    return Array.from(this.themes).map(([themeId, theme]) => ({
       label: theme.name,
       value: themeId,
     }));
-
-    options.unshift({ label: "Sync with computer", value: "system" });
-
-    return options;
   }
 
   @computed get systemTheme() {