diff --git a/web/react/components/user_settings/user_settings_display.jsx b/web/react/components/user_settings/user_settings_display.jsx
index dc3865c681..c464258de3 100644
--- a/web/react/components/user_settings/user_settings_display.jsx
+++ b/web/react/components/user_settings/user_settings_display.jsx
@@ -241,7 +241,7 @@ export default class UserSettingsDisplay extends React.Component {
             const inputs = [
                 <div key='userDisplayNameOptions'>
                     <div
-                        className='input-group theme-group dropdown'
+                        className='dropdown'
                     >
                         <select
                             className='form-control'
@@ -251,9 +251,6 @@ export default class UserSettingsDisplay extends React.Component {
                         >
                             {options}
                         </select>
-                        <span className={'input-group-addon ' + Constants.FONTS[this.state.selectedFont]}>
-                            {this.state.selectedFont}
-                        </span>
                     </div>
                     <div><br/>{'Select the font displayed in the Mattermost user interface.'}</div>
                 </div>
@@ -312,12 +309,12 @@ export default class UserSettingsDisplay extends React.Component {
                 <div className='user-settings'>
                     <h3 className='tab-header'>{'Display Settings'}</h3>
                     <div className='divider-dark first'/>
+                    {fontSection}
+                    <div className='divider-dark'/>
                     {clockSection}
                     <div className='divider-dark'/>
                     {nameFormatSection}
                     <div className='divider-dark'/>
-                    {fontSection}
-                    <div className='divider-dark'/>
                 </div>
             </div>
         );