diff --git a/ui/admin/app/templates/application.hbs b/ui/admin/app/templates/application.hbs
index 13ef17580..055e305de 100644
--- a/ui/admin/app/templates/application.hbs
+++ b/ui/admin/app/templates/application.hbs
@@ -32,12 +32,18 @@
               <Rose::Form as |form|>
                 <form.radioGroup
                   @name='theme'
-                  @selectedValue={{this.session.data.theme}}
+                  @selectedValue={{or
+                    this.session.data.theme
+                    'system-default-theme'
+                  }}
                   @changed={{route-action 'toggleTheme'}}
                   as |radioGroup|
                 >
                   <dropdown.item>
-                    <radioGroup.radio @label={{t 'themes.system'}} />
+                    <radioGroup.radio
+                      @label={{t 'themes.system'}}
+                      @value='system-default-theme'
+                    />
                   </dropdown.item>
                   <dropdown.item>
                     <radioGroup.radio
diff --git a/ui/admin/tests/acceptance/authentication-test.js b/ui/admin/tests/acceptance/authentication-test.js
index af3be277b..99c4a9603 100644
--- a/ui/admin/tests/acceptance/authentication-test.js
+++ b/ui/admin/tests/acceptance/authentication-test.js
@@ -350,8 +350,11 @@ module('Acceptance | authentication', function (hooks) {
     assert.notOk(getRootElement().classList.contains('rose-theme-light'));
     assert.ok(getRootElement().classList.contains('rose-theme-dark'));
     // toggle system default
-    await click('[name="theme"][value=""]');
-    assert.notOk(currentSession().get('data.theme'));
+    await click('[name="theme"][value="system-default-theme"]');
+    assert.strictEqual(
+      currentSession().get('data.theme'),
+      'system-default-theme'
+    );
     assert.notOk(getRootElement().classList.contains('rose-theme-light'));
     assert.notOk(getRootElement().classList.contains('rose-theme-dark'));
   });
diff --git a/ui/desktop/app/templates/application.hbs b/ui/desktop/app/templates/application.hbs
index fe3f81278..fc9a9d231 100644
--- a/ui/desktop/app/templates/application.hbs
+++ b/ui/desktop/app/templates/application.hbs
@@ -55,12 +55,18 @@
               <Rose::Form as |form|>
                 <form.radioGroup
                   @name='theme'
-                  @selectedValue={{this.session.data.theme}}
+                  @selectedValue={{or
+                    this.session.data.theme
+                    'system-default-theme'
+                  }}
                   @changed={{route-action 'toggleTheme'}}
                   as |radioGroup|
                 >
                   <dropdown.item>
-                    <radioGroup.radio @label={{t 'themes.system'}} />
+                    <radioGroup.radio
+                      @label={{t 'themes.system'}}
+                      @value='system-default-theme'
+                    />
                   </dropdown.item>
                   <dropdown.item>
                     <radioGroup.radio
diff --git a/ui/desktop/tests/acceptance/authentication-test.js b/ui/desktop/tests/acceptance/authentication-test.js
index eb099057e..2389271ad 100644
--- a/ui/desktop/tests/acceptance/authentication-test.js
+++ b/ui/desktop/tests/acceptance/authentication-test.js
@@ -242,8 +242,11 @@ module('Acceptance | authentication', function (hooks) {
     assert.notOk(getRootElement().classList.contains('rose-theme-light'));
     assert.ok(getRootElement().classList.contains('rose-theme-dark'));
     // toggle system default
-    await click('[name="theme"][value=""]');
-    assert.notOk(currentSession().get('data.theme'));
+    await click('[name="theme"][value="system-default-theme"]');
+    assert.strictEqual(
+      currentSession().get('data.theme'),
+      'system-default-theme'
+    );
     assert.notOk(getRootElement().classList.contains('rose-theme-light'));
     assert.notOk(getRootElement().classList.contains('rose-theme-dark'));
   });