diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
index 93df530ea..4447a05e9 100644
--- a/client/coral-admin/src/components/UserDetail.js
+++ b/client/coral-admin/src/components/UserDetail.js
@@ -1,44 +1,21 @@
 import React from 'react';
+import cn from 'classnames';
 import PropTypes from 'prop-types';
-import Comment from '../containers/UserDetailComment';
+import capitalize from 'lodash/capitalize';
+import {getErrorMessages} from 'coral-framework/utils';
 import styles from './UserDetail.css';
-import {Icon, Drawer, Spinner} from 'coral-ui';
+import RejectButton from './RejectButton';
+import ApproveButton from './ApproveButton';
+import LoadMore from '../components/LoadMore';
+import AccountHistory from './AccountHistory';
 import {Slot} from 'coral-framework/components';
+import Comment from '../containers/UserDetailComment';
+import {getReliability} from 'coral-framework/utils/user';
 import ButtonCopyToClipboard from './ButtonCopyToClipboard';
 import ClickOutside from 'coral-framework/components/ClickOutside';
-import LoadMore from '../components/LoadMore';
-import cn from 'classnames';
-import capitalize from 'lodash/capitalize';
-import {getReliability} from 'coral-framework/utils/user';
-import ApproveButton from './ApproveButton';
-import RejectButton from './RejectButton';
-import {getErrorMessages} from 'coral-framework/utils';
-import AccountHistory from './AccountHistory';
-import {TabBar, Tab, TabContent, TabPane} from 'coral-ui';
+import {Icon, Drawer, Spinner, TabBar, Tab, TabContent, TabPane} from 'coral-ui';
 
-export default class UserDetail extends React.Component {
-
-  static propTypes = {
-    userId: PropTypes.string.isRequired,
-    hideUserDetail: PropTypes.func.isRequired,
-    root: PropTypes.object.isRequired,
-    acceptComment: PropTypes.func.isRequired,
-    rejectComment: PropTypes.func.isRequired,
-    changeStatus: PropTypes.func.isRequired,
-    toggleSelect: PropTypes.func.isRequired,
-    bulkAccept: PropTypes.func.isRequired,
-    bulkReject: PropTypes.func.isRequired,
-    toggleSelectAll: PropTypes.func.isRequired,
-    loading: PropTypes.bool.isRequired,
-    data: PropTypes.shape({
-      refetch: PropTypes.func.isRequired,
-    }),
-    activeTab: PropTypes.string.isRequired,
-    selectedCommentIds: PropTypes.array.isRequired,
-    viewUserDetail: PropTypes.any.isRequired,
-    loadMore: PropTypes.any.isRequired,
-    notify: PropTypes.func.isRequired
-  }
+class UserDetail extends React.Component {
 
   rejectThenReload = async (info) => {
     try {
@@ -84,21 +61,22 @@ export default class UserDetail extends React.Component {
     }
   }
 
-  show = (content) => {
-    this.props.changeStatus(content);
+  changeTab = (tab) => {
+    this.props.changeStatus(tab);
   }
 
-  renderLoading() {
-    return (
-      <ClickOutside onClickOutside={this.props.hideUserDetail}>
-        <Drawer onClose={this.props.hideUserDetail}>
-          <Spinner />
-        </Drawer>
-      </ClickOutside>
-    );
-  }
+  render() {
+
+    if (this.props.loading) {
+      return (
+        <ClickOutside onClickOutside={this.props.hideUserDetail}>
+          <Drawer onClose={this.props.hideUserDetail}>
+            <Spinner />
+          </Drawer>
+        </ClickOutside>
+      );
+    }
 
-  renderLoaded() {
     const {
       data,
       root,
@@ -106,7 +84,10 @@ export default class UserDetail extends React.Component {
         user,
         totalComments,
         rejectedComments,
-        comments: {nodes, hasNextPage}
+        comments: {
+          nodes,
+          hasNextPage
+        }
       },
       activeTab,
       selectedCommentIds,
@@ -118,9 +99,8 @@ export default class UserDetail extends React.Component {
     } = this.props;
 
     let rejectedPercent = (rejectedComments / totalComments) * 100;
-    if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
 
-      // if totalComments is 0, you're dividing by zero, which is naughty
+    if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
       rejectedPercent = 0;
     }
 
@@ -171,16 +151,29 @@ export default class UserDetail extends React.Component {
             data={this.props.data}
             queryData={{root, user}}
           />
+
           <hr />
+          
           <div className={(selectedCommentIds.length > 0) ? cn(styles.bulkActionHeader, styles.selected) : styles.bulkActionHeader}>
+
             {
               selectedCommentIds.length === 0
                 ? (
-                  <ul className={styles.commentStatuses}>
-                    <li className={activeTab === 'all' ? styles.active : ''} onClick={() => this.show('all')}>All</li>
-                    <li className={activeTab === 'rejected' ? styles.active : ''} onClick={() => this.show('rejected')}>Rejected</li>
-                    <li className={activeTab === 'history' ? styles.active : ''} onClick={() => this.show('history')}>Account History</li>
-                  </ul>
+                  <TabBar
+                    onTabClick={this.changeTab}
+                    activeTab={activeTab}
+                    className={cn(styles.commentStatuses, 'talk-admin-user-detail-tab-bar')}
+                    aria-controls='talk-admin-user-detail-content' >
+                    <Tab tabId={'all'} className={'talk-admin-user-detail-all-tab'}>
+                      All
+                    </Tab>
+                    <Tab tabId={'rejected'} className={'talk-admin-user-detail-rejected-tab'}>
+                      Rejected
+                    </Tab>
+                    <Tab tabId={'history'} className={'talk-admin-user-detail-history-tab'}>
+                      Account History
+                    </Tab>
+                  </TabBar>
                 )
                 : (
                   <div className={styles.bulkActionGroup}>
@@ -207,11 +200,11 @@ export default class UserDetail extends React.Component {
                 }} />
               <label htmlFor='toogleAll'>Select all</label>
             </div>
-            
+
           </div>
 
-          { 
-            activeTab !== 'history' ?
+          <TabContent activeTab={activeTab} className='talk-admin-user-detail-content'>
+            <TabPane tabId={'all'} className={'talk-admin-user-detail-all-tab-pane'}>
               <div className={styles.commentList}>
                 {
                   nodes.map((comment) => {
@@ -231,26 +224,67 @@ export default class UserDetail extends React.Component {
                   })
                 }
               </div>
-              :
+            </TabPane>
+            <TabPane tabId={'rejected'} className={'talk-admin-user-detail-rejected-tab-pane'}>
+              <div className={styles.commentList}>
+                {
+                  nodes.map((comment) => {
+                    const selected = selectedCommentIds.indexOf(comment.id) !== -1;
+                    return <Comment
+                      key={comment.id}
+                      user={user}
+                      root={root}
+                      data={data}
+                      comment={comment}
+                      acceptComment={this.acceptThenReload}
+                      rejectComment={this.rejectThenReload}
+                      selected={selected}
+                      toggleSelect={toggleSelect}
+                      viewUserDetail={viewUserDetail}
+                    />;
+                  })
+                }
+              </div>
+            </TabPane>
+            <TabPane tabId={'history'} className={'talk-admin-user-detail-history-tab-pane'}>
               <AccountHistory
                 userState={user.state}
               />
-          }
+            </TabPane>
+          </TabContent>
 
           <LoadMore
             className={styles.loadMore}
             loadMore={loadMore}
             showLoadMore={hasNextPage}
           />
+          
         </Drawer>
       </ClickOutside>
     );
   }
-
-  render() {
-    if (this.props.loading) {
-      return this.renderLoading();
-    }
-    return this.renderLoaded();
-  }
 }
+
+UserDetail.propTypes = {
+  userId: PropTypes.string.isRequired,
+  hideUserDetail: PropTypes.func.isRequired,
+  root: PropTypes.object.isRequired,
+  acceptComment: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  changeStatus: PropTypes.func.isRequired,
+  toggleSelect: PropTypes.func.isRequired,
+  bulkAccept: PropTypes.func.isRequired,
+  bulkReject: PropTypes.func.isRequired,
+  toggleSelectAll: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired,
+  data: PropTypes.shape({
+    refetch: PropTypes.func.isRequired,
+  }),
+  activeTab: PropTypes.string.isRequired,
+  selectedCommentIds: PropTypes.array.isRequired,
+  viewUserDetail: PropTypes.any.isRequired,
+  loadMore: PropTypes.any.isRequired,
+  notify: PropTypes.func.isRequired
+};
+
+export default UserDetail;