diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index eb73d2ec85..1ecfd71888 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -50,8 +50,9 @@ limitations under the License.
     > .mx_ThemeSelectors {
         display: flex;
         flex-direction: row;
+        flex-wrap: wrap;
 
-        margin-top: 23px;
+        margin-top: 13px;
 
         > .mx_RadioButton {
             padding: $font-16px;
@@ -61,6 +62,7 @@ limitations under the License.
             flex-shrink: 1;
             flex-grow: 0;
             margin-right: 15px;
+            margin-top: 10px;
         }
 
         > .mx_RadioButton:not([disabled]) {
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index 9146f4ff20..3d19241f42 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -255,6 +255,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                 <div className="mx_ThemeSelectors" onChange={this.onThemeChange}>
                     {orderedThemes.map(theme => {
                         return <StyledRadioButton
+                            key={theme.id}
                             value={theme.id}
                             name={"theme"}
                     disabled={this.state.useSystemTheme}