diff --git a/frontend/src/app/main/data/profile.cljs b/frontend/src/app/main/data/profile.cljs
index b43ef9f55c..c0d1e29f53 100644
--- a/frontend/src/app/main/data/profile.cljs
+++ b/frontend/src/app/main/data/profile.cljs
@@ -160,8 +160,10 @@
     (update [_ state]
       (update-in state [:profile :theme]
                  (fn [current]
-                   (if (= current "default")
-                     "light"
+                   (case current
+                     "dark"   "light"
+                     "light"  "system"
+                     "system" "dark"
                      "default"))))
 
     ptk/WatchEvent
diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs
index ddf43430e2..309deedc49 100644
--- a/frontend/src/app/main/ui.cljs
+++ b/frontend/src/app/main/ui.cljs
@@ -358,7 +358,10 @@
   (let [route   (mf/deref refs/route)
         edata   (mf/deref refs/exception)
         profile (mf/deref refs/profile)
-        theme   (or (:theme profile) "default")]
+        theme   (case (:theme profile)
+                  "system" (dom/get-system-theme)
+                  "default" "dark"
+                  (:theme profile))]
 
     (mf/with-effect [theme]
       (dom/set-html-theme-color theme))
diff --git a/frontend/src/app/main/ui/settings/options.cljs b/frontend/src/app/main/ui/settings/options.cljs
index f3ab76e288..5efb157d9b 100644
--- a/frontend/src/app/main/ui/settings/options.cljs
+++ b/frontend/src/app/main/ui/settings/options.cljs
@@ -59,8 +59,9 @@
       [:& fm/select {:label (tr "dashboard.select-ui-theme")
                      :name :theme
                      :default "default"
-                     :options [{:label "Penpot Dark (default)" :value "default"}
-                               {:label "Penpot Light" :value "light"}]
+                     :options [{:label (tr "dashboard.select-ui-theme.dark") :value "dark"}
+                               {:label (tr "dashboard.select-ui-theme.light") :value "light"}
+                               {:label (tr "dashboard.select-ui-theme.system") :value "system"}]
                      :data-testid "setting-theme"}]]
 
      [:> fm/submit-button*
diff --git a/frontend/src/app/main/ui/workspace/main_menu.cljs b/frontend/src/app/main/ui/workspace/main_menu.cljs
index 7bc717faf6..e92cfbb4c6 100644
--- a/frontend/src/app/main/ui/workspace/main_menu.cljs
+++ b/frontend/src/app/main/ui/workspace/main_menu.cljs
@@ -280,9 +280,11 @@
                               :data-testid   "toggle-theme"
                               :id          "file-menu-toggle-theme"}
       [:span {:class (stl/css :item-name)}
-       (if (= (:theme profile) "default")
-         (tr "workspace.header.menu.toggle-light-theme")
-         (tr "workspace.header.menu.toggle-dark-theme"))]
+       (case (:theme profile)  ;; default = dark -> light -> system -> dark and so on
+         "default" (tr "workspace.header.menu.toggle-light-theme")
+         "light"   (tr "workspace.header.menu.toggle-system-theme")
+         "system" (tr "workspace.header.menu.toggle-dark-theme")
+         (tr "workspace.header.menu.toggle-light-theme"))]
       [:span {:class (stl/css :shortcut)}
        (for [sc (scd/split-sc (sc/get-tooltip :toggle-theme))]
          [:span {:class (stl/css :shortcut-key) :key sc} sc])]]]))
diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs
index 026986ce95..e150c44d6c 100644
--- a/frontend/src/app/util/dom.cljs
+++ b/frontend/src/app/util/dom.cljs
@@ -76,9 +76,10 @@
 
 (defn set-html-theme-color
   [^string color]
-  (let [node (.querySelector js/document "body")]
+  (let [node (.querySelector js/document "body")
+        class (if (= color "dark") "default" "light")]
     (.removeAttribute node "class")
-    (.add ^js (.-classList ^js node) color)))
+    (.add ^js (.-classList ^js node) class)))
 
 (defn set-page-style!
   [styles]
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index 92b383b1ae..869b446d19 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -923,6 +923,15 @@ msgstr "Select UI language"
 msgid "dashboard.select-ui-theme"
 msgstr "Select theme"
 
+msgid "dashboard.select-ui-theme.dark"
+msgstr "Penpot Dark (default)"
+
+msgid "dashboard.select-ui-theme.light"
+msgstr "Penpot Light"
+
+msgid "dashboard.select-ui-theme.system"
+msgstr "System theme"
+
 #: src/app/main/ui/settings/notifications.cljs:57
 msgid "dashboard.settings.notifications.dashboard-comments.all"
 msgstr "All comments, mentions and replies"
@@ -5166,6 +5175,9 @@ msgstr "Switch to dark theme"
 msgid "workspace.header.menu.toggle-light-theme"
 msgstr "Switch to light theme"
 
+msgid "workspace.header.menu.toggle-system-theme"
+msgstr "Switch to system theme"
+
 #: src/app/main/ui/workspace/main_menu.cljs:457
 msgid "workspace.header.menu.undo"
 msgstr "Undo"
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index 98fc145a85..3503445f25 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -935,6 +935,15 @@ msgstr "Cambiar el idioma de la interfaz"
 msgid "dashboard.select-ui-theme"
 msgstr "Selecciona un tema"
 
+msgid "dashboard.select-ui-theme.dark"
+msgstr "Penpot Dark (por defecto)"
+
+msgid "dashboard.select-ui-theme.light"
+msgstr "Penpot Light"
+
+msgid "dashboard.select-ui-theme.system"
+msgstr "Sistema"
+
 #: src/app/main/ui/settings/notifications.cljs:57
 msgid "dashboard.settings.notifications.dashboard-comments.all"
 msgstr "Todos los comentarios, menciones y respuestas"