diff --git a/frontend/src/components/user-settings/delete-account.js b/frontend/src/components/user-settings/delete-account.js
index db7e2ed808..b3d19c9038 100644
--- a/frontend/src/components/user-settings/delete-account.js
+++ b/frontend/src/components/user-settings/delete-account.js
@@ -35,7 +35,7 @@ class DeleteAccount extends React.Component {
         <div className="setting-item" id="del-account">
           <h3 className="setting-item-heading">{gettext('Delete Account')}</h3>
           <p className="mb-2">{gettext('This operation will not be reverted. Please think twice!')}</p>
-          <button className="btn btn-secondary" onClick={this.confirmDelete}>{gettext('Delete')}</button>
+          <button className="btn btn-outline-primary" onClick={this.confirmDelete}>{gettext('Delete')}</button>
         </div>
         {this.state.isConfirmDialogOpen && (
           <ModalPortal>
diff --git a/frontend/src/components/user-settings/language-setting.js b/frontend/src/components/user-settings/language-setting.js
index 708ced5b43..27d9360a60 100644
--- a/frontend/src/components/user-settings/language-setting.js
+++ b/frontend/src/components/user-settings/language-setting.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import Select from 'react-select';
-import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import { gettext, siteRoot } from '../../utils/constants';
 
 const {
diff --git a/frontend/src/components/user-settings/social-login.js b/frontend/src/components/user-settings/social-login.js
index 565fc17c12..1c5ce02d01 100644
--- a/frontend/src/components/user-settings/social-login.js
+++ b/frontend/src/components/user-settings/social-login.js
@@ -39,8 +39,8 @@ class SocialLogin extends React.Component {
           <h3 className="setting-item-heading">{gettext('Social Login')}</h3>
           <p className="mb-2">{langCode == 'zh-cn' ? '企业微信': 'WeChat Work'}</p>
           {socialConnected ?
-            <a href="#" className="btn btn-secondary" onClick={this.confirmDisconnect}>{gettext('Disconnect')}</a> :
-            <a href={`${siteRoot}social/login/weixin-work/?next=${encodeURIComponent(socialNextPage)}`} className="btn btn-secondary">{gettext('Connect')}</a>
+            <a href="#" className="btn btn-outline-primary" onClick={this.confirmDisconnect}>{gettext('Disconnect')}</a> :
+            <a href={`${siteRoot}social/login/weixin-work/?next=${encodeURIComponent(socialNextPage)}`} className="btn btn-outline-primary">{gettext('Connect')}</a>
           }
         </div>
         {this.state.isConfirmDialogOpen && (
diff --git a/frontend/src/components/user-settings/user-basic-info-form.js b/frontend/src/components/user-settings/user-basic-info-form.js
index fee084ea3c..19e42c84b1 100644
--- a/frontend/src/components/user-settings/user-basic-info-form.js
+++ b/frontend/src/components/user-settings/user-basic-info-form.js
@@ -79,7 +79,7 @@ class UserBasicInfoForm extends React.Component {
             <div className="col-sm-5">
               <input className="form-control" id="user-name" type="text" name="username" value={loginID} disabled={true} readOnly={true} />
             </div>
-            <p className="col-sm-5 m-0">{gettext('You can use this field at login.')}</p>
+            <p className="col-sm-5 m-0 input-tip">{gettext('You can use this field at login.')}</p>
           </div>
         )}
 
@@ -89,7 +89,7 @@ class UserBasicInfoForm extends React.Component {
             <div className="col-sm-5">
               <input className="form-control" id="contact-email" type="text" name="contact_email" value={contactEmail} disabled={!enableUserSetContactEmail} readOnly={!enableUserSetContactEmail} onChange={this.handleContactEmailInputChange} />
             </div>
-            <p className="col-sm-5 m-0">{gettext('Your notifications will be sent to this email.')}</p>
+            <p className="col-sm-5 m-0 input-tip">{gettext('Your notifications will be sent to this email.')}</p>
           </div>
         )}
 
diff --git a/frontend/src/css/user-settings.css b/frontend/src/css/user-settings.css
index 797f004a95..2eace6ca3c 100644
--- a/frontend/src/css/user-settings.css
+++ b/frontend/src/css/user-settings.css
@@ -30,7 +30,7 @@ body {
     margin:0;
 }
 .content {
-  padding: 0rem 1rem;
+  padding: 0rem 1rem 8rem;
   overflow: auto;
 }
 .setting-item {
@@ -64,7 +64,7 @@ body {
   flex: auto;
   margin: 0;
   padding-left: 1em;
-  border-left: 1px solid transparent;
+  border-left: 2px solid transparent;
   color: #333;
 }
 .user-setting-nav .nav-item.active .nav-link {
@@ -77,3 +77,7 @@ body {
 .eye-icon {
   color: #666;
 }
+.input-tip {
+  padding-top: calc(0.375rem + 1px);
+  color: #666;
+}