diff --git a/client/coral-admin/src/actions/moderation.js b/client/coral-admin/src/actions/moderation.js
index 1c803d87d..5136db4c3 100644
--- a/client/coral-admin/src/actions/moderation.js
+++ b/client/coral-admin/src/actions/moderation.js
@@ -15,33 +15,11 @@ export const hideShortcutsNote = () => {
   return {type: actions.HIDE_SHORTCUTS_NOTE};
 };
 
-export const viewUserDetail = (userId) => ({type: actions.VIEW_USER_DETAIL, userId});
-export const hideUserDetail = () => ({type: actions.HIDE_USER_DETAIL});
-
 export const setSortOrder = (order) => ({
   type: actions.SET_SORT_ORDER,
   order
 });
 
-export const changeUserDetailStatuses = (tab) => {
-  let statuses;
-  if (tab === 'all') {
-    statuses = ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'];
-  } else if (tab === 'rejected') {
-    statuses = ['REJECTED'];
-  }
-  return {type: actions.CHANGE_USER_DETAIL_STATUSES, tab, statuses};
-};
-
-export const clearUserDetailSelections = () => ({type: actions.CLEAR_USER_DETAIL_SELECTIONS});
-
-export const toggleSelectCommentInUserDetail = (id, active) => {
-  return {
-    type: active ? actions.SELECT_USER_DETAIL_COMMENT : actions.UNSELECT_USER_DETAIL_COMMENT,
-    id
-  };
-};
-
 export const toggleStorySearch = (active) => ({
   type: active ? actions.SHOW_STORY_SEARCH : actions.HIDE_STORY_SEARCH
 });
diff --git a/client/coral-admin/src/actions/userDetail.js b/client/coral-admin/src/actions/userDetail.js
new file mode 100644
index 000000000..fe9aa2df5
--- /dev/null
+++ b/client/coral-admin/src/actions/userDetail.js
@@ -0,0 +1,24 @@
+import * as actions from 'constants/userDetail';
+
+export const viewUserDetail = (userId) => ({type: actions.VIEW_USER_DETAIL, userId});
+export const hideUserDetail = () => ({type: actions.HIDE_USER_DETAIL});
+
+export const changeUserDetailStatuses = (tab) => {
+  let statuses;
+  if (tab === 'all') {
+    statuses = ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'];
+  } else if (tab === 'rejected') {
+    statuses = ['REJECTED'];
+  }
+  return {type: actions.CHANGE_USER_DETAIL_STATUSES, tab, statuses};
+};
+
+export const clearUserDetailSelections = () => ({type: actions.CLEAR_USER_DETAIL_SELECTIONS});
+
+export const toggleSelectCommentInUserDetail = (id, active) => {
+  return {
+    type: active ? actions.SELECT_USER_DETAIL_COMMENT : actions.UNSELECT_USER_DETAIL_COMMENT,
+    id
+  };
+};
+
diff --git a/client/coral-admin/src/components/ActionButton.js b/client/coral-admin/src/components/ActionButton.js
index e084d8e7a..3dbac206b 100644
--- a/client/coral-admin/src/components/ActionButton.js
+++ b/client/coral-admin/src/components/ActionButton.js
@@ -1,7 +1,7 @@
 import React, {PropTypes} from 'react';
 import styles from './ModerationList.css';
 import {Button} from 'coral-ui';
-import {menuActionsMap} from '../routes/Moderation/helpers/moderationQueueActionsMap';
+import {menuActionsMap} from '../utils/moderationQueueActionsMap';
 
 import t from 'coral-framework/services/i18n';
 
diff --git a/client/coral-admin/src/routes/Moderation/components/ButtonCopyToClipboard.js b/client/coral-admin/src/components/ButtonCopyToClipboard.js
similarity index 100%
rename from client/coral-admin/src/routes/Moderation/components/ButtonCopyToClipboard.js
rename to client/coral-admin/src/components/ButtonCopyToClipboard.js
diff --git a/client/coral-admin/src/components/CommentAnimatedEdit.css b/client/coral-admin/src/components/CommentAnimatedEdit.css
new file mode 100644
index 000000000..83be36c11
--- /dev/null
+++ b/client/coral-admin/src/components/CommentAnimatedEdit.css
@@ -0,0 +1,24 @@
+.bodyLeave {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  background-color: white;
+  opacity: 1.0;
+  transition: background 400ms, opacity 800ms 1600ms;
+  pointer-events: none;
+}
+
+.bodyLeaveActive {
+  opacity: 0;
+  background-color: rgba(255,255,0, 0.2);
+}
+
+.bodyEnter {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.bodyEnterActive {
+  opacity: 1.0;
+  transition: opacity 800ms 2400ms;
+}
diff --git a/client/coral-admin/src/components/CommentAnimatedEdit.js b/client/coral-admin/src/components/CommentAnimatedEdit.js
new file mode 100644
index 000000000..141dc12cc
--- /dev/null
+++ b/client/coral-admin/src/components/CommentAnimatedEdit.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import {murmur3} from 'murmurhash-js';
+import {CSSTransitionGroup} from 'react-transition-group';
+import styles from './CommentAnimatedEdit.css';
+
+export default ({children, body}) => {
+  return (
+    <CSSTransitionGroup
+      component={'div'}
+      transitionName={{
+        enter: styles.bodyEnter,
+        enterActive: styles.bodyEnterActive,
+        leave: styles.bodyLeave,
+        leaveActive: styles.bodyLeaveActive,
+      }}
+      transitionEnter={true}
+      transitionLeave={true}
+      transitionEnterTimeout={3600}
+      transitionLeaveTimeout={2800}
+    >
+      {React.cloneElement(React.Children.only(children), {key: murmur3(body)})}
+    </CSSTransitionGroup>
+  );
+};
diff --git a/client/coral-admin/src/components/CommentBodyHighlighter.js b/client/coral-admin/src/components/CommentBodyHighlighter.js
new file mode 100644
index 000000000..3b3ee3318
--- /dev/null
+++ b/client/coral-admin/src/components/CommentBodyHighlighter.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import Highlighter from 'react-highlight-words';
+import Linkify from 'react-linkify';
+const linkify = new Linkify();
+
+export default ({suspectWords, bannedWords, body, ...rest}) => {
+
+  const links = linkify.getMatches(body);
+  const linkText = links ? links.map((link) => link.raw) : [];
+
+  // since words are checked against word boundaries on the backend,
+  // should be the behavior on the front end as well.
+  // currently the highlighter plugin does not support out of the box.
+  const searchWords = [...suspectWords, ...bannedWords]
+    .filter((w) => {
+      return new RegExp(`(^|\\s)${w}(\\s|$)`, 'i').test(body);
+    })
+    .concat(linkText);
+
+  return (
+    <Highlighter
+      {...rest}
+      searchWords={searchWords}
+      textToHighlight={body}
+    />
+  );
+};
diff --git a/client/coral-admin/src/routes/Moderation/components/CommentType.css b/client/coral-admin/src/components/CommentType.css
similarity index 70%
rename from client/coral-admin/src/routes/Moderation/components/CommentType.css
rename to client/coral-admin/src/components/CommentType.css
index 3144a5bd7..beafc2a7c 100644
--- a/client/coral-admin/src/routes/Moderation/components/CommentType.css
+++ b/client/coral-admin/src/components/CommentType.css
@@ -1,22 +1,19 @@
 .commentType {
-  position: absolute;
-  right: 15px;
-  top: 11px;
+  display: inline-block;
   color: white;
   background: grey;
   height: 32px;
   box-sizing: border-box;
   line-height: 29px;
-  padding: 2px 8px 2px 26px;
+  padding: 2px 8px;
   border-radius: 2px;
   font-size: 12px;
 
-  i {
+  > i {
     font-size: 14px;
-    position: absolute;
-    left: 6px;
-    top: 8px;
+    vertical-align: text-top;
     margin: 0;
+    margin-right: 4px;
   }
 
   &.premod {
diff --git a/client/coral-admin/src/routes/Moderation/components/CommentType.js b/client/coral-admin/src/components/CommentType.js
similarity index 84%
rename from client/coral-admin/src/routes/Moderation/components/CommentType.js
rename to client/coral-admin/src/components/CommentType.js
index 346b5f1e6..075ec5a78 100644
--- a/client/coral-admin/src/routes/Moderation/components/CommentType.js
+++ b/client/coral-admin/src/components/CommentType.js
@@ -1,12 +1,13 @@
 import React, {PropTypes} from 'react';
 import styles from './CommentType.css';
 import {Icon} from 'coral-ui';
+import cn from 'classnames';
 
 const CommentType = (props) => {
   const typeData = getTypeData(props.type);
 
   return (
-    <span className={`${styles.commentType} ${styles[typeData.className]}`}>
+    <span className={cn(styles.commentType, styles[typeData.className], props.className)}>
       <Icon name={typeData.icon}/>{typeData.text}
     </span>
   );
diff --git a/client/coral-admin/src/routes/Moderation/components/FlagBox.css b/client/coral-admin/src/components/FlagBox.css
similarity index 100%
rename from client/coral-admin/src/routes/Moderation/components/FlagBox.css
rename to client/coral-admin/src/components/FlagBox.css
diff --git a/client/coral-admin/src/routes/Moderation/components/FlagBox.js b/client/coral-admin/src/components/FlagBox.js
similarity index 98%
rename from client/coral-admin/src/routes/Moderation/components/FlagBox.js
rename to client/coral-admin/src/components/FlagBox.js
index caa8b3fbc..38af61c5c 100644
--- a/client/coral-admin/src/routes/Moderation/components/FlagBox.js
+++ b/client/coral-admin/src/components/FlagBox.js
@@ -61,7 +61,7 @@ class FlagBox extends Component {
                       <ul>
                         {actionList.map((action, j) =>
                           <li key={`${i}_${j}`} className={styles.subDetail}>
-                            <a className={styles.username} onClick={viewUserDetail}>
+                            <a className={styles.username} onClick={() => viewUserDetail(action.user.id)}>
                               {action.user.username}
                             </a>
                             {action.message}
diff --git a/client/coral-admin/src/components/IfHasLink.js b/client/coral-admin/src/components/IfHasLink.js
new file mode 100644
index 000000000..cd37ea951
--- /dev/null
+++ b/client/coral-admin/src/components/IfHasLink.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import Linkify from 'react-linkify';
+const linkify = new Linkify();
+
+export default ({text, children}) => {
+  const hasLinks = !!linkify.getMatches(text);
+
+  if (!hasLinks) {
+    return null;
+  }
+
+  return React.Children.only(children);
+};
diff --git a/client/coral-admin/src/components/ModerationList.css b/client/coral-admin/src/components/ModerationList.css
index 2b5989191..89e43e02a 100644
--- a/client/coral-admin/src/components/ModerationList.css
+++ b/client/coral-admin/src/components/ModerationList.css
@@ -192,7 +192,6 @@
 .minimal {
   width: 45px;
   min-width: 0;
-  float: left;
 }
 
 .approve__active {
diff --git a/client/coral-admin/src/routes/Moderation/components/UserDetail.css b/client/coral-admin/src/components/UserDetail.css
similarity index 100%
rename from client/coral-admin/src/routes/Moderation/components/UserDetail.css
rename to client/coral-admin/src/components/UserDetail.css
diff --git a/client/coral-admin/src/routes/Moderation/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
similarity index 78%
rename from client/coral-admin/src/routes/Moderation/components/UserDetail.js
rename to client/coral-admin/src/components/UserDetail.js
index 59f696b5f..eab25c41d 100644
--- a/client/coral-admin/src/routes/Moderation/components/UserDetail.js
+++ b/client/coral-admin/src/components/UserDetail.js
@@ -1,22 +1,20 @@
 import React, {PropTypes} from 'react';
-import Comment from './Comment';
+import Comment from './UserDetailComment';
 import styles from './UserDetail.css';
-import {Button, Drawer} from 'coral-ui';
+import {Button, Drawer, Spinner} from 'coral-ui';
 import {Slot} from 'coral-framework/components';
 import ButtonCopyToClipboard from './ButtonCopyToClipboard';
-import {actionsMap} from '../helpers/moderationQueueActionsMap';
+import {actionsMap} from '../utils/moderationQueueActionsMap';
 import ClickOutside from 'coral-framework/components/ClickOutside';
 
 export default class UserDetail extends React.Component {
 
   static propTypes = {
-    id: PropTypes.string.isRequired,
+    userId: PropTypes.string.isRequired,
     hideUserDetail: PropTypes.func.isRequired,
     root: PropTypes.object.isRequired,
     bannedWords: PropTypes.array.isRequired,
     suspectWords: PropTypes.array.isRequired,
-    showBanUserDialog: PropTypes.func.isRequired,
-    showSuspendUserDialog: PropTypes.func.isRequired,
     acceptComment: PropTypes.func.isRequired,
     rejectComment: PropTypes.func.isRequired,
     changeStatus: PropTypes.func.isRequired,
@@ -45,7 +43,17 @@ export default class UserDetail extends React.Component {
     this.props.changeStatus('rejected');
   }
 
-  render () {
+  renderLoading() {
+    return (
+      <ClickOutside onClickOutside={this.props.hideUserDetail}>
+        <Drawer onClose={this.props.hideUserDetail}>
+          <Spinner />
+        </Drawer>
+      </ClickOutside>
+    );
+  }
+
+  renderLoaded() {
     const {
       root: {
         user,
@@ -53,19 +61,17 @@ export default class UserDetail extends React.Component {
         rejectedComments,
         comments: {nodes}
       },
-      moderation: {
-        userDetailActiveTab: tab,
-        userDetailSelectedIds: selectedIds
-      },
+      activeTab,
+      selectedCommentIds,
       bannedWords,
       suspectWords,
       toggleSelect,
       bulkAccept,
       bulkReject,
-      showBanUserDialog,
-      showSuspendUserDialog,
-      hideUserDetail
+      hideUserDetail,
+      viewUserDetail,
     } = this.props;
+
     const localProfile = user.profiles.find((p) => p.provider === 'local');
 
     let profile;
@@ -113,11 +119,11 @@ export default class UserDetail extends React.Component {
             </div>
           </div>
           {
-            selectedIds.length === 0
+            selectedCommentIds.length === 0
             ? (
               <ul className={styles.commentStatuses}>
-                <li className={tab === 'all' ? styles.active : ''} onClick={this.showAll}>All</li>
-                <li className={tab === 'rejected' ? styles.active : ''} onClick={this.showRejected}>Rejected</li>
+                <li className={activeTab === 'all' ? styles.active : ''} onClick={this.showAll}>All</li>
+                <li className={activeTab === 'rejected' ? styles.active : ''} onClick={this.showRejected}>Rejected</li>
               </ul>
             )
             : (
@@ -134,34 +140,30 @@ export default class UserDetail extends React.Component {
                   cStyle='reject'
                   icon='close'>
                 </Button>
-                {`${selectedIds.length} comments selected`}
+                {`${selectedCommentIds.length} comments selected`}
               </div>
             )
           }
 
           <div>
             {
-              nodes.map((comment, i) => {
+              nodes.map((comment) => {
                 const status = comment.action_summaries ? 'FLAGGED' : comment.status;
-                const selected = selectedIds.indexOf(comment.id) !== -1;
+                const selected = selectedCommentIds.indexOf(comment.id) !== -1;
                 return <Comment
                   key={comment.id}
-                  index={i}
+                  user={user}
                   comment={comment}
                   selected={false}
                   suspectWords={suspectWords}
                   bannedWords={bannedWords}
-                  viewUserDetail={() => {}}
                   actions={actionsMap[status]}
-                  showBanUserDialog={showBanUserDialog}
-                  showSuspendUserDialog={showSuspendUserDialog}
                   acceptComment={this.acceptThenReload}
                   rejectComment={this.rejectThenReload}
                   selected={selected}
                   toggleSelect={toggleSelect}
-                  currentAsset={null}
-                  currentUserId={this.props.id}
-                  minimal={true} />;
+                  viewUserDetail={viewUserDetail}
+                />;
               })
             }
           </div>
@@ -169,4 +171,11 @@ export default class UserDetail extends React.Component {
       </ClickOutside>
     );
   }
+
+  render () {
+    if (this.props.loading) {
+      return this.renderLoading();
+    }
+    return this.renderLoaded();
+  }
 }
diff --git a/client/coral-admin/src/components/UserDetailComment.css b/client/coral-admin/src/components/UserDetailComment.css
new file mode 100644
index 000000000..0e10f00c0
--- /dev/null
+++ b/client/coral-admin/src/components/UserDetailComment.css
@@ -0,0 +1,128 @@
+.root {
+  display: block;
+  margin: 0;
+  border-bottom: 1px solid #e0e0e0;
+  width: 100%;
+  transition: all 200ms;
+  padding: 10px 0px;
+  min-height: 0;
+}
+
+.rootSelected {
+  background-color: #ecf4ff;
+}
+
+.container {
+  padding: 0px 14px;
+}
+
+.story {
+  font-size: 14px;
+  margin: 10px 0;
+  font-weight: 500;
+  line-height: 1.2;
+  max-width: 500px;
+}
+
+.story > a {
+  display: inline-block;
+  color: #063b9a;
+  text-decoration: none;
+  font-weight: 500;
+  letter-spacing: .5px;
+  margin-left: 10px;
+  font-size: 13px;
+  margin-left: 5px;
+  padding-bottom: 0px;
+  border-bottom: solid 1px;
+  line-height: 16px;
+}
+
+.bodyContainer {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 300;
+  margin-bottom: 8px;
+}
+
+.header {
+  position: relative;
+}
+
+.commentType {
+  position: absolute;
+  right: 0px;
+}
+
+.created {
+  padding: 5px;
+  color: #262626;
+  font-size: 14px;
+  line-height: 1px;
+  font-weight: 300;
+}
+
+.body {
+  margin-top: 0px;
+  flex: 1;
+  color: black;
+  max-width: 500px;
+  word-wrap: break-word;
+  font-weight: 300;
+  font-size: 16px;
+  max-width: 360px;
+}
+
+.sideActions {
+}
+
+.editedMarker {
+  font-style: italic;
+  color: #666;
+  font-size: 12px;
+  line-height: 1px;
+  font-weight: 300;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.bulkSelectInput {
+  cursor: pointer;
+}
+
+.external {
+  font-size: .7em;
+  text-decoration: none;
+  color: #063b9a;
+  cursor: pointer;
+  font-weight: normal;
+  margin-left: 10px;
+  white-space: nowrap;
+
+  &:hover {
+    text-decoration: underline;
+    opacity: .9;
+  }
+
+  > i {
+    font-size: 12px;
+    top: 2px;
+    position: relative;
+  }
+}
+
+.hasLinks {
+  color: #f00;
+  text-align: right;
+  display: flex;
+  align-items: center;
+
+  > i {
+    margin-right: 5px;
+  }
+}
diff --git a/client/coral-admin/src/components/UserDetailComment.js b/client/coral-admin/src/components/UserDetailComment.js
new file mode 100644
index 000000000..1ec181214
--- /dev/null
+++ b/client/coral-admin/src/components/UserDetailComment.js
@@ -0,0 +1,151 @@
+import React, {PropTypes} from 'react';
+import {Link} from 'react-router';
+
+import {Icon} from 'coral-ui';
+import FlagBox from './FlagBox';
+import styles from './UserDetailComment.css';
+import CommentType from './CommentType';
+import {getActionSummary} from 'coral-framework/utils';
+import ActionButton from 'coral-admin/src/components/ActionButton';
+import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter';
+import IfHasLink from 'coral-admin/src/components/IfHasLink';
+import cn from 'classnames';
+import {getCommentType} from 'coral-admin/src/utils/comment';
+import CommentAnimatedEdit from './CommentAnimatedEdit';
+
+import t, {timeago} from 'coral-framework/services/i18n';
+
+class UserDetailComment extends React.Component {
+
+  render() {
+    const {
+      actions = [],
+      comment,
+      viewUserDetail,
+      suspectWords,
+      bannedWords,
+      selected,
+      toggleSelect,
+      className,
+      user,
+      ...props
+    } = this.props;
+
+    const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
+    const flagActions = comment.actions && comment.actions.filter((a) => a.__typename === 'FlagAction');
+    const commentType = getCommentType(comment);
+
+    return (
+      <li
+        tabIndex={0}
+        className={cn(className, styles.root, {[styles.rootSelected]: selected})}
+      >
+        <div className={styles.container}>
+          <div className={styles.header}>
+            <input
+              className={styles.bulkSelectInput}
+              type='checkbox'
+              value={comment.id}
+              checked={selected}
+              onChange={(e) => toggleSelect(e.target.value, e.target.checked)} />
+            <span className={styles.created}>
+              {timeago(comment.created_at)}
+            </span>
+            {
+              (comment.editing && comment.editing.edited)
+              ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
+              : null
+            }
+            <CommentType type={commentType} className={styles.commentType}/>
+          </div>
+          <div className={styles.story}>
+            Story: {comment.asset.title}
+            {<Link to={`/admin/moderate/all/${comment.asset.id}`}>{t('modqueue.moderate')}</Link>}
+          </div>
+          <CommentAnimatedEdit body={comment.body}>
+            <div className={styles.bodyContainer}>
+              <p className={styles.body}>
+                <CommentBodyHighlighter
+                  suspectWords={suspectWords}
+                  bannedWords={bannedWords}
+                  body={comment.body}
+                />
+                {' '}
+                <a
+                  className={styles.external}
+                  href={`${comment.asset.url}?commentId=${comment.id}`}
+                  target="_blank"
+                >
+                  <Icon name="open_in_new" /> {t('comment.view_context')}
+                </a>
+              </p>
+              <div className={styles.sideActions}>
+                <IfHasLink text={comment.body}>
+                  <span className={styles.hasLinks}>
+                    <Icon name="error_outline" /> Contains Link
+                  </span>
+                </IfHasLink>
+                <div className={styles.actions}>
+                  {actions.map((action, i) => {
+                    const active =
+                      (action === 'REJECT' && comment.status === 'REJECTED') ||
+                      (action === 'APPROVE' && comment.status === 'ACCEPTED');
+                    return (
+                      <ActionButton
+                        minimal={true}
+                        key={i}
+                        type={action}
+                        user={user}
+                        status={comment.status}
+                        active={active}
+                        acceptComment={() =>
+                          (comment.status === 'ACCEPTED'
+                            ? null
+                            : props.acceptComment({commentId: comment.id}))}
+                        rejectComment={() =>
+                          (comment.status === 'REJECTED'
+                            ? null
+                            : props.rejectComment({commentId: comment.id}))}
+                      />
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          </CommentAnimatedEdit>
+        </div>
+        {flagActions && flagActions.length
+          ? <FlagBox
+              actions={flagActions}
+              actionSummaries={flagActionSummaries}
+              viewUserDetail={viewUserDetail}
+            />
+          : null}
+      </li>
+    );
+  }
+}
+
+UserDetailComment.propTypes = {
+  user: PropTypes.object.isRequired,
+  viewUserDetail: PropTypes.func.isRequired,
+  acceptComment: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
+  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
+  toggleSelect: PropTypes.func,
+  comment: PropTypes.shape({
+    body: PropTypes.string.isRequired,
+    action_summaries: PropTypes.array,
+    actions: PropTypes.array,
+    created_at: PropTypes.string.isRequired,
+    asset: PropTypes.shape({
+      title: PropTypes.string,
+      url: PropTypes.string,
+      id: PropTypes.string
+    })
+  })
+};
+
+export default UserDetailComment;
diff --git a/client/coral-admin/src/constants/moderation.js b/client/coral-admin/src/constants/moderation.js
index 2c3fc08db..cae13947d 100644
--- a/client/coral-admin/src/constants/moderation.js
+++ b/client/coral-admin/src/constants/moderation.js
@@ -1,13 +1,7 @@
 export const TOGGLE_MODAL = 'TOGGLE_MODAL';
 export const SINGLE_VIEW = 'SINGLE_VIEW';
 export const HIDE_SHORTCUTS_NOTE = 'HIDE_SHORTCUTS_NOTE';
-export const VIEW_USER_DETAIL = 'VIEW_USER_DETAIL';
-export const HIDE_USER_DETAIL = 'HIDE_USER_DETAIL';
 export const SET_SORT_ORDER = 'MODERATION_SET_SORT_ORDER';
-export const CHANGE_USER_DETAIL_STATUSES = 'CHANGE_USER_DETAIL_STATUSES';
-export const SELECT_USER_DETAIL_COMMENT = 'SELECT_USER_DETAIL_COMMENT';
-export const UNSELECT_USER_DETAIL_COMMENT = 'UNSELECT_USER_DETAIL_COMMENT';
-export const CLEAR_USER_DETAIL_SELECTIONS = 'CLEAR_USER_DETAIL_SELECTIONS';
 export const SHOW_STORY_SEARCH = 'SHOW_STORY_SEARCH';
 export const HIDE_STORY_SEARCH = 'HIDE_STORY_SEARCH';
 export const STORY_SEARCH_CHANGE_VALUE = 'STORY_SEARCH_CHANGE_VALUE';
diff --git a/client/coral-admin/src/constants/userDetail.js b/client/coral-admin/src/constants/userDetail.js
new file mode 100644
index 000000000..b68efb5ea
--- /dev/null
+++ b/client/coral-admin/src/constants/userDetail.js
@@ -0,0 +1,7 @@
+export const VIEW_USER_DETAIL = 'VIEW_USER_DETAIL';
+export const HIDE_USER_DETAIL = 'HIDE_USER_DETAIL';
+export const CHANGE_USER_DETAIL_STATUSES = 'CHANGE_USER_DETAIL_STATUSES';
+export const SELECT_USER_DETAIL_COMMENT = 'SELECT_USER_DETAIL_COMMENT';
+export const UNSELECT_USER_DETAIL_COMMENT = 'UNSELECT_USER_DETAIL_COMMENT';
+export const CLEAR_USER_DETAIL_SELECTIONS = 'CLEAR_USER_DETAIL_SELECTIONS';
+
diff --git a/client/coral-admin/src/containers/Layout.js b/client/coral-admin/src/containers/Layout.js
index dacf768c0..8b119fb72 100644
--- a/client/coral-admin/src/containers/Layout.js
+++ b/client/coral-admin/src/containers/Layout.js
@@ -10,6 +10,7 @@ import SuspendUserDialog from './SuspendUserDialog';
 import {toggleModal as toggleShortcutModal} from '../actions/moderation';
 import {checkLogin, handleLogin, requestPasswordReset} from '../actions/auth';
 import {can} from 'coral-framework/services/perms';
+import UserDetail from 'coral-admin/src/containers/UserDetail';
 
 class LayoutContainer extends Component {
   componentWillMount() {
@@ -57,6 +58,7 @@ class LayoutContainer extends Component {
         >
         <BanUserDialog />
         <SuspendUserDialog />
+        <UserDetail />
         {this.props.children}
         </Layout>
       );
diff --git a/client/coral-admin/src/routes/Moderation/containers/UserDetail.js b/client/coral-admin/src/containers/UserDetail.js
similarity index 66%
rename from client/coral-admin/src/routes/Moderation/containers/UserDetail.js
rename to client/coral-admin/src/containers/UserDetail.js
index 6b476b861..a54e70734 100644
--- a/client/coral-admin/src/routes/Moderation/containers/UserDetail.js
+++ b/client/coral-admin/src/containers/UserDetail.js
@@ -1,4 +1,4 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
 import {compose, gql} from 'react-apollo';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
@@ -6,23 +6,25 @@ import UserDetail from '../components/UserDetail';
 import withQuery from 'coral-framework/hocs/withQuery';
 import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
 import {
+  viewUserDetail,
+  hideUserDetail,
   changeUserDetailStatuses,
   clearUserDetailSelections,
-  toggleSelectCommentInUserDetail
-} from 'coral-admin/src/actions/moderation';
+  toggleSelectCommentInUserDetail,
+} from 'coral-admin/src/actions/userDetail';
 import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
-import Comment from './Comment';
+import UserDetailComment from './UserDetailComment';
 
 const commentConnectionFragment = gql`
   fragment CoralAdmin_Moderation_CommentConnection on CommentConnection {
     nodes {
-      ...${getDefinitionName(Comment.fragments.comment)}
+      ...${getDefinitionName(UserDetailComment.fragments.comment)}
     }
     hasNextPage
     startCursor
     endCursor
   }
-  ${Comment.fragments.comment}
+  ${UserDetailComment.fragments.comment}
 `;
 
 const slots = [
@@ -30,14 +32,10 @@ const slots = [
 ];
 
 class UserDetailContainer extends React.Component {
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    hideUserDetail: PropTypes.func.isRequired
-  }
 
   // status can be 'ACCEPTED' or 'REJECTED'
   bulkSetCommentStatus = (status) => {
-    const changes = this.props.moderation.userDetailSelectedIds.map((commentId) => {
+    const changes = this.props.selectedCommentIds.map((commentId) => {
       return this.props.setCommentStatus({commentId, status});
     });
 
@@ -55,16 +53,29 @@ class UserDetailContainer extends React.Component {
     this.bulkSetCommentStatus('ACCEPTED');
   }
 
+  acceptComment = ({commentId}) => {
+    return this.props.setCommentStatus({commentId, status: 'ACCEPTED'});
+  }
+
+  rejectComment = ({commentId}) => {
+    return this.props.setCommentStatus({commentId, status: 'REJECTED'});
+  }
+
   render () {
-    if (!('user' in this.props.root)) {
+    if (!this.props.userId) {
       return null;
     }
 
+    const loading = !('user' in this.props.root) || this.props.root.user.id !== this.props.userId;
+
     return <UserDetail
       bulkReject={this.bulkReject}
       bulkAccept={this.bulkAccept}
       changeStatus={this.props.changeUserDetailStatuses}
       toggleSelect={this.props.toggleSelectCommentInUserDetail}
+      acceptComment={this.acceptComment}
+      rejectComment={this.rejectComment}
+      loading={loading}
       {...this.props} />;
   }
 }
@@ -93,22 +104,30 @@ export const withUserDetailQuery = withQuery(gql`
   }
   ${commentConnectionFragment}
 `, {
-  options: ({id, moderation: {userDetailStatuses: statuses}}) => {
+  options: ({userId, statuses}) => {
     return {
-      variables: {author_id: id, statuses}
+      variables: {author_id: userId, statuses}
     };
-  }
+  },
+  skip: (ownProps) => !ownProps.userId,
 });
 
 const mapStateToProps = (state) => ({
-  moderation: state.moderation.toJS()
+  userId: state.userDetail.userId,
+  selectedCommentIds: state.userDetail.selectedCommentIds,
+  statuses: state.userDetail.statuses,
+  activeTab: state.userDetail.activeTab,
+  bannedWords: state.settings.toJS().wordlist.banned,
+  suspectWords: state.settings.toJS().wordlist.suspect,
 });
 
 const mapDispatchToProps = (dispatch) => ({
   ...bindActionCreators({
     changeUserDetailStatuses,
     clearUserDetailSelections,
-    toggleSelectCommentInUserDetail
+    toggleSelectCommentInUserDetail,
+    viewUserDetail,
+    hideUserDetail,
   }, dispatch)
 });
 
diff --git a/client/coral-admin/src/containers/UserDetailComment.js b/client/coral-admin/src/containers/UserDetailComment.js
new file mode 100644
index 000000000..a70a9394d
--- /dev/null
+++ b/client/coral-admin/src/containers/UserDetailComment.js
@@ -0,0 +1,39 @@
+import {gql} from 'react-apollo';
+import UserDetailComment from '../components/UserDetailComment';
+import withFragments from 'coral-framework/hocs/withFragments';
+
+export default withFragments({
+  comment: gql`
+    fragment CoralAdmin_UserDetail_comment on Comment {
+      id
+      body
+      created_at
+      status
+      asset {
+        id
+        title
+        url
+      }
+      action_summaries {
+        count
+        ... on FlagActionSummary {
+          reason
+        }
+      }
+      actions {
+        ... on FlagAction {
+          id
+          reason
+          message
+          user {
+            id
+            username
+          }
+        }
+      }
+      editing {
+        edited
+      }
+    }
+  `
+})(UserDetailComment);
diff --git a/client/coral-admin/src/reducers/index.js b/client/coral-admin/src/reducers/index.js
index f94b50817..b329675a4 100644
--- a/client/coral-admin/src/reducers/index.js
+++ b/client/coral-admin/src/reducers/index.js
@@ -7,11 +7,13 @@ import install from './install';
 import config from './config';
 import banUserDialog from './banUserDialog';
 import suspendUserDialog from './suspendUserDialog';
+import userDetail from './userDetail';
 
 export default {
   auth,
   banUserDialog,
   suspendUserDialog,
+  userDetail,
   assets,
   settings,
   community,
diff --git a/client/coral-admin/src/reducers/moderation.js b/client/coral-admin/src/reducers/moderation.js
index a2c8975ff..a0cba1f5f 100644
--- a/client/coral-admin/src/reducers/moderation.js
+++ b/client/coral-admin/src/reducers/moderation.js
@@ -1,13 +1,9 @@
-import {fromJS, Set} from 'immutable';
+import {fromJS} from 'immutable';
 import * as actions from '../constants/moderation';
 
 const initialState = fromJS({
   singleView: false,
   modalOpen: false,
-  userDetailId: null,
-  userDetailActiveTab: 'all',
-  userDetailStatuses: ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'],
-  userDetailSelectedIds: new Set(),
   storySearchVisible: false,
   storySearchString: '',
   shortcutsNoteVisible: window.localStorage.getItem('coral:shortcutsNote') || 'show',
@@ -18,9 +14,6 @@ export default function moderation (state = initialState, action) {
   switch (action.type) {
   case actions.MODERATION_CLEAR_STATE:
     return initialState;
-  case actions.SET_ACTIVE_TAB:
-    return state
-      .set('activeTab', action.activeTab);
   case actions.TOGGLE_MODAL:
     return state
       .set('modalOpen', action.open);
@@ -30,22 +23,6 @@ export default function moderation (state = initialState, action) {
   case actions.HIDE_SHORTCUTS_NOTE:
     return state
       .set('shortcutsNoteVisible', 'hide');
-  case actions.VIEW_USER_DETAIL:
-    return state.set('userDetailId', action.userId);
-  case actions.HIDE_USER_DETAIL:
-    return state
-      .set('userDetailId', null)
-      .update('userDetailSelectedIds', (set) => set.clear());
-  case actions.CLEAR_USER_DETAIL_SELECTIONS:
-    return state.update('userDetailSelectedIds', (set) => set.clear());
-  case actions.CHANGE_USER_DETAIL_STATUSES:
-    return state
-      .set('userDetailActiveTab', action.tab)
-      .set('userDetailStatuses', action.statuses);
-  case actions.SELECT_USER_DETAIL_COMMENT:
-    return state.update('userDetailSelectedIds', (set) => set.add(action.id));
-  case actions.UNSELECT_USER_DETAIL_COMMENT:
-    return state.update('userDetailSelectedIds', (set) => set.delete(action.id));
   case actions.SHOW_STORY_SEARCH:
     return state.set('storySearchVisible', true);
   case actions.HIDE_STORY_SEARCH:
diff --git a/client/coral-admin/src/reducers/userDetail.js b/client/coral-admin/src/reducers/userDetail.js
new file mode 100644
index 000000000..8e1d35885
--- /dev/null
+++ b/client/coral-admin/src/reducers/userDetail.js
@@ -0,0 +1,47 @@
+import * as actions from '../constants/userDetail';
+
+const initialState = {
+  userId: null,
+  activeTab: 'all',
+  statuses: ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'],
+  selectedCommentIds: [],
+};
+
+export default function banUserDialog(state = initialState, action) {
+  switch (action.type) {
+  case actions.VIEW_USER_DETAIL:
+    return {
+      ...state,
+      userId: action.userId,
+    };
+  case actions.HIDE_USER_DETAIL:
+    return {
+      ...state,
+      userId: null,
+      selectedCommentIds: [],
+    };
+  case actions.CLEAR_USER_DETAIL_SELECTIONS:
+    return {
+      ...state,
+      selectedCommentIds: [],
+    };
+  case actions.CHANGE_USER_DETAIL_STATUSES:
+    return {
+      ...state,
+      activeTab: action.tab,
+      statuses: action.statuses,
+    };
+  case actions.SELECT_USER_DETAIL_COMMENT:
+    return {
+      ...state,
+      selectedCommentIds: [...state.selectedCommentIds, action.id],
+    };
+  case actions.UNSELECT_USER_DETAIL_COMMENT:
+    return {
+      ...state,
+      selectedCommentIds: state.selectedCommentIds.filter((id) => id !== action.id),
+    };
+  default:
+    return state;
+  }
+}
diff --git a/client/coral-admin/src/routes/Community/components/ActionButton.js b/client/coral-admin/src/routes/Community/components/ActionButton.js
index b0b68b063..09af420f6 100644
--- a/client/coral-admin/src/routes/Community/components/ActionButton.js
+++ b/client/coral-admin/src/routes/Community/components/ActionButton.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './Community.css';
 import {Button} from 'coral-ui';
-import {menuActionsMap} from '../../Moderation/helpers/moderationQueueActionsMap';
+import {menuActionsMap} from '../../../utils/moderationQueueActionsMap';
 
 import t from 'coral-framework/services/i18n';
 
diff --git a/client/coral-admin/src/routes/Community/components/Community.css b/client/coral-admin/src/routes/Community/components/Community.css
index e65c34514..629045ab8 100644
--- a/client/coral-admin/src/routes/Community/components/Community.css
+++ b/client/coral-admin/src/routes/Community/components/Community.css
@@ -52,57 +52,6 @@
   }
 }
 
-.email {
-  display: block;
-}
-
-.dataTable {
-  width: 100%;
-  border-left: none;
-  border-right: none;
-
-  th {
-    font-size: 1.1em;
-  }
-
-  th:nth-child(2), th:nth-child(3) {
-    width: 100px;
-  }
-}
-
-.selectField {
-  position: relative;
-  width: 150px;
-  height: 36px;
-  background: #2c2c2c;
-  padding: 10px 15px;
-  box-sizing: border-box;
-  color: white;
-  border-radius: 2px;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-
-  > div {
-    padding: 0;
-  }
-
-  i {
-    position: absolute;
-    top: 7px;
-    right: 7px;
-  }
-
-  input {
-    padding: 0;
-    font-size: 13px;
-    letter-spacing: 0.7px;
-    font-weight: 400;
-  }
-
-  &:hover {
-    cursor: pointer;
-   }
-}
-
 .list {
   padding: 8px 0;
   list-style: none;
@@ -340,3 +289,11 @@ p.flaggedByReason {
   margin: 0px;
   line-height: 1.4;
 }
+
+.button {
+  composes: buttonReset from 'coral-framework/styles/reset.css';
+  vertical-align: text-bottom;
+  &:hover {
+    background-color: #E0E0E0;
+  }
+}
diff --git a/client/coral-admin/src/routes/Community/components/Community.js b/client/coral-admin/src/routes/Community/components/Community.js
index e87e7ac54..b2451cd9a 100644
--- a/client/coral-admin/src/routes/Community/components/Community.js
+++ b/client/coral-admin/src/routes/Community/components/Community.js
@@ -54,7 +54,7 @@ export default class Community extends Component {
   }
 
   getTabContent(searchValue, props) {
-    const {community, root: {users}} = props;
+    const {community, root: {users}, viewUserDetail} = props;
     const activeTab = props.route.path === ':id' ? 'flagged' : props.route.path;
 
     if (activeTab === 'people') {
@@ -84,6 +84,7 @@ export default class Community extends Component {
           approveUser={props.approveUser}
           rejectUsername={props.rejectUsername}
           currentUser={this.props.currentUser}
+          viewUserDetail={viewUserDetail}
         />
         <RejectUsernameDialog
           open={community.rejectUsernameDialog}
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.css b/client/coral-admin/src/routes/Community/components/FlaggedAccounts.css
similarity index 100%
rename from client/coral-admin/src/routes/Moderation/components/Comment.css
rename to client/coral-admin/src/routes/Community/components/FlaggedAccounts.css
diff --git a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js b/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js
index 3e730e0ac..bb8504293 100644
--- a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js
+++ b/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js
@@ -5,7 +5,7 @@ import styles from './Community.css';
 import EmptyCard from 'coral-admin/src/components/EmptyCard';
 import User from './User';
 
-const FlaggedAccounts = ({...props}) => {
+const FlaggedAccounts = (props) => {
   const {commenters} = props;
   const hasResults = commenters && !!commenters.length;
 
@@ -25,6 +25,7 @@ const FlaggedAccounts = ({...props}) => {
               showRejectUsernameDialog={props.showRejectUsernameDialog}
               approveUser={props.approveUser}
               currentUser={props.currentUser}
+              viewUserDetail={props.viewUserDetail}
               />;
           })
           : <EmptyCard>{t('community.no_flagged_accounts')}</EmptyCard>
diff --git a/client/coral-admin/src/routes/Community/components/Table.css b/client/coral-admin/src/routes/Community/components/Table.css
new file mode 100644
index 000000000..affc6c0e2
--- /dev/null
+++ b/client/coral-admin/src/routes/Community/components/Table.css
@@ -0,0 +1,58 @@
+.dataTable {
+  width: 100%;
+  border-left: none;
+  border-right: none;
+
+  th {
+    font-size: 1.1em;
+  }
+
+  th:nth-child(2), th:nth-child(3) {
+    width: 100px;
+  }
+}
+
+.button {
+  composes: buttonReset from 'coral-framework/styles/reset.css';
+  &:hover {
+    background-color: #D0D0D0;
+  }
+}
+
+.email {
+  display: block;
+}
+
+.selectField {
+  position: relative;
+  width: 150px;
+  height: 36px;
+  background: #2c2c2c;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  color: white;
+  border-radius: 2px;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+
+  > div {
+    padding: 0;
+  }
+
+  i {
+    position: absolute;
+    top: 7px;
+    right: 7px;
+  }
+
+  input {
+    padding: 0;
+    font-size: 13px;
+    letter-spacing: 0.7px;
+    font-weight: 400;
+  }
+
+  &:hover {
+    cursor: pointer;
+   }
+}
+
diff --git a/client/coral-admin/src/routes/Community/components/Table.js b/client/coral-admin/src/routes/Community/components/Table.js
index dac97b1ad..f851b1f84 100644
--- a/client/coral-admin/src/routes/Community/components/Table.js
+++ b/client/coral-admin/src/routes/Community/components/Table.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import {SelectField, Option} from 'react-mdl-selectfield';
-import styles from '../components/Community.css';
+import styles from '../components/Table.css';
 import t from 'coral-framework/services/i18n';
 
-export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange}) => (
+export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange, viewUserDetail}) => (
   <table className={`mdl-data-table ${styles.dataTable}`}>
     <thead>
       <tr>
@@ -21,7 +21,7 @@ export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onComm
       {commenters.map((row, i)=> (
         <tr key={i}>
           <td className="mdl-data-table__cell--non-numeric">
-            {row.username}
+            <button onClick={() => {viewUserDetail(row.id);}} className={styles.button}>{row.username}</button>
             <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
           </td>
           <td className="mdl-data-table__cell--non-numeric">
diff --git a/client/coral-admin/src/routes/Community/components/User.js b/client/coral-admin/src/routes/Community/components/User.js
index 5aea161b5..2d921a1c7 100644
--- a/client/coral-admin/src/routes/Community/components/User.js
+++ b/client/coral-admin/src/routes/Community/components/User.js
@@ -38,9 +38,7 @@ const User = (props) => {
       <div className={styles.container}>
         <div className={styles.itemHeader}>
           <div className={styles.author}>
-            <span>
-              {user.username}
-            </span>
+            <button onClick={() => {props.viewUserDetail(user.id);}} className={styles.button}>{user.username}</button>
             {props.currentUser.id !== user.id &&
               <ActionsMenu icon="not_interested">
                 <ActionsMenuItem
@@ -82,7 +80,12 @@ const User = (props) => {
                       (action, j) => {
                         if (action.reason === action_sum.reason) {
                           return <p className={styles.flaggedByReason} key={j}>
-                            {action.user && action.user.username}: {action.message ? action.message : 'n/a'}
+                            {action.user &&
+                              <button onClick={() => {props.viewUserDetail(action.user.id);}} className={styles.button}>
+                                {action.user.username}
+                              </button>
+                            }
+                            : {action.message ? action.message : 'n/a'}
                           </p>;
                         }
                         return null;
diff --git a/client/coral-admin/src/routes/Community/containers/Community.js b/client/coral-admin/src/routes/Community/containers/Community.js
index ee2f874a8..a9a164ac9 100644
--- a/client/coral-admin/src/routes/Community/containers/Community.js
+++ b/client/coral-admin/src/routes/Community/containers/Community.js
@@ -17,6 +17,7 @@ import {
   showRejectUsernameDialog,
   hideRejectUsernameDialog
 } from '../../../actions/community';
+import {viewUserDetail} from '../../../actions/userDetail';
 
 import Community from '../components/Community';
 
@@ -99,6 +100,7 @@ const mapDispatchToProps = (dispatch) =>
     hideRejectUsernameDialog,
     updateSorting,
     newPage,
+    viewUserDetail,
   }, dispatch);
 
 export default compose(
diff --git a/client/coral-admin/src/routes/Community/containers/Table.js b/client/coral-admin/src/routes/Community/containers/Table.js
index 499e0718a..8bd5395e4 100644
--- a/client/coral-admin/src/routes/Community/containers/Table.js
+++ b/client/coral-admin/src/routes/Community/containers/Table.js
@@ -4,6 +4,7 @@ import {bindActionCreators} from 'redux';
 import {compose} from 'react-apollo';
 import {setRole, setCommenterStatus} from '../../../actions/community';
 import Table from '../components/Table';
+import {viewUserDetail} from '../../../actions/userDetail';
 
 class TableContainer extends Component {
 
@@ -29,6 +30,7 @@ const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     setCommenterStatus,
     setRole,
+    viewUserDetail,
   }, dispatch);
 
 export default compose(
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index 26543be6e..e37fa887c 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.js
@@ -1,22 +1,20 @@
 import React, {PropTypes} from 'react';
 import {Link} from 'react-router';
-import Linkify from 'react-linkify';
 
 import {Icon} from 'coral-ui';
-import FlagBox from './FlagBox';
+import FlagBox from 'coral-admin/src/components/FlagBox';
 import styles from './styles.css';
-import CommentType from './CommentType';
-import Highlighter from 'react-highlight-words';
+import CommentType from 'coral-admin/src/components/CommentType';
+import CommentAnimatedEdit from 'coral-admin/src/components/CommentAnimatedEdit';
 import Slot from 'coral-framework/components/Slot';
 import {getActionSummary} from 'coral-framework/utils';
 import ActionButton from 'coral-admin/src/components/ActionButton';
 import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
 import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
+import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter';
+import IfHasLink from 'coral-admin/src/components/IfHasLink';
 import cn from 'classnames';
-import {murmur3} from 'murmurhash-js';
-import {CSSTransitionGroup} from 'react-transition-group';
-
-const linkify = new Linkify();
+import {getCommentType} from 'coral-admin/src/utils/comment';
 
 import t, {timeago} from 'coral-framework/services/i18n';
 
@@ -29,41 +27,16 @@ class Comment extends React.Component {
       viewUserDetail,
       suspectWords,
       bannedWords,
-      minimal,
       selected,
-      toggleSelect,
       className,
       ...props
     } = this.props;
 
-    const links = linkify.getMatches(comment.body);
-    const linkText = links ? links.map((link) => link.raw) : [];
     const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
-    const flagActions =
-      comment.actions &&
-      comment.actions.filter((a) => a.__typename === 'FlagAction');
-    let commentType = '';
-    if (comment.status === 'PREMOD') {
-      commentType = 'premod';
-    } else if (flagActions && flagActions.length) {
-      commentType = 'flagged';
-    }
+    const flagActions = comment.actions && comment.actions.filter((a) => a.__typename === 'FlagAction');
+    const commentType = getCommentType(comment);
 
-    // since words are checked against word boundaries on the backend,
-    // should be the behavior on the front end as well.
-    // currently the highlighter plugin does not support out of the box.
-    const searchWords = [...suspectWords, ...bannedWords]
-      .filter((w) => {
-        return new RegExp(`(^|\\s)${w}(\\s|$)`, 'i').test(comment.body);
-      })
-      .concat(linkText);
-
-    let selectionStateCSS;
-    if (minimal) {
-      selectionStateCSS = selected ? styles.minimalSelection : '';
-    } else {
-      selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
-    }
+    let selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
 
     const showSuspenUserDialog = () => props.showSuspendUserDialog({
       userId: comment.user.id,
@@ -81,31 +54,21 @@ class Comment extends React.Component {
 
     return (
       <li
-        tabIndex={props.index}
-        className={cn(className, 'mdl-card', selectionStateCSS, styles.Comment, styles.listItem, {[styles.minimal]: minimal, [styles.selected]: selected})}
+        tabIndex={0}
+        className={cn(className, 'mdl-card', selectionStateCSS, styles.Comment, styles.listItem, {[styles.selected]: selected})}
       >
         <div className={styles.container}>
           <div className={styles.itemHeader}>
             <div className={styles.author}>
               {
-                !minimal && (
+                (
                   <span className={styles.username} onClick={() => viewUserDetail(comment.user.id)}>
                     {comment.user.username}
                   </span>
                 )
               }
-              {
-                minimal && typeof selected === 'boolean' && typeof toggleSelect === 'function' && (
-                  <input
-                    className={styles.bulkSelectInput}
-                    type='checkbox'
-                    value={comment.id}
-                    checked={selected}
-                    onChange={(e) => toggleSelect(e.target.value, e.target.checked)} />
-                )
-              }
               <span className={styles.created}>
-                {timeago(comment.created_at || Date.now() - props.index * 60 * 1000)}
+                {timeago(comment.created_at)}
               </span>
               {
                 (comment.editing && comment.editing.edited)
@@ -125,45 +88,27 @@ class Comment extends React.Component {
                   </ActionsMenuItem>
                 </ActionsMenu>
               }
-              <CommentType type={commentType} />
+              <CommentType type={commentType} className={styles.commentType}/>
             </div>
-            {comment.user.status === 'banned'
-              ? <span className={styles.banned}>
-                  <Icon name="error_outline" />
-                  {t('comment.banned_user')}
-                </span>
-              : null}
-              <Slot
-                data={props.data}
-                root={props.root}
-                fill="adminCommentInfoBar"
-                comment={comment}
-              />
+            <Slot
+              data={props.data}
+              root={props.root}
+              fill="adminCommentInfoBar"
+              comment={comment}
+            />
           </div>
           <div className={styles.moderateArticle}>
             Story: {comment.asset.title}
             {!props.currentAsset &&
               <Link to={`/admin/moderate/all/${comment.asset.id}`}>{t('modqueue.moderate')}</Link>}
           </div>
-          <CSSTransitionGroup
-            component={'div'}
-            style={{position: 'relative'}}
-            transitionName={{
-              enter: styles.bodyEnter,
-              enterActive: styles.bodyEnterActive,
-              leave: styles.bodyLeave,
-              leaveActive: styles.bodyLeaveActive,
-            }}
-            transitionEnter={true}
-            transitionLeave={true}
-            transitionEnterTimeout={3600}
-            transitionLeaveTimeout={2800}
-          >
-            <div className={styles.itemBody} key={murmur3(comment.body)}>
+          <CommentAnimatedEdit body={comment.body}>
+            <div className={styles.itemBody}>
               <p className={styles.body}>
-                <Highlighter
-                  searchWords={searchWords}
-                  textToHighlight={comment.body}
+                <CommentBodyHighlighter
+                  suspectWords={suspectWords}
+                  bannedWords={bannedWords}
+                  body={comment.body}
                 />
                 {' '}
                 <a
@@ -181,11 +126,11 @@ class Comment extends React.Component {
                 comment={comment}
               />
               <div className={styles.sideActions}>
-                {links
-                  ? <span className={styles.hasLinks}>
-                      <Icon name="error_outline" /> Contains Link
-                    </span>
-                  : null}
+                <IfHasLink text={comment.body}>
+                  <span className={styles.hasLinks}>
+                    <Icon name="error_outline" /> Contains Link
+                  </span>
+                </IfHasLink>
                 <div className={`actions ${styles.actions}`}>
                   {actions.map((action, i) => {
                     const active =
@@ -193,7 +138,6 @@ class Comment extends React.Component {
                       (action === 'APPROVE' && comment.status === 'ACCEPTED');
                     return (
                       <ActionButton
-                        minimal={minimal}
                         key={i}
                         type={action}
                         user={comment.user}
@@ -219,7 +163,7 @@ class Comment extends React.Component {
                 />
               </div>
             </div>
-          </CSSTransitionGroup>
+          </CommentAnimatedEdit>
         </div>
         <Slot
           data={props.data}
@@ -231,7 +175,7 @@ class Comment extends React.Component {
           ? <FlagBox
               actions={flagActions}
               actionSummaries={flagActionSummaries}
-              viewUserDetail={() => viewUserDetail(comment.user.id)}
+              viewUserDetail={viewUserDetail}
             />
           : null}
       </li>
@@ -240,7 +184,6 @@ class Comment extends React.Component {
 }
 
 Comment.propTypes = {
-  minimal: PropTypes.bool,
   viewUserDetail: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
@@ -251,7 +194,6 @@ Comment.propTypes = {
   showBanUserDialog: PropTypes.func.isRequired,
   showSuspendUserDialog: PropTypes.func.isRequired,
   currentUserId: PropTypes.string.isRequired,
-  toggleSelect: PropTypes.func,
   comment: PropTypes.shape({
     body: PropTypes.string.isRequired,
     action_summaries: PropTypes.array,
diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.js b/client/coral-admin/src/routes/Moderation/components/Moderation.js
index 693be075e..d9822724d 100644
--- a/client/coral-admin/src/routes/Moderation/components/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/components/Moderation.js
@@ -6,7 +6,6 @@ import ModerationQueue from './ModerationQueue';
 import ModerationMenu from './ModerationMenu';
 import ModerationHeader from './ModerationHeader';
 import ModerationKeysModal from '../../../components/ModerationKeysModal';
-import UserDetail from '../containers/UserDetail';
 import StorySearch from '../containers/StorySearch';
 
 export default class Moderation extends Component {
@@ -173,18 +172,6 @@ export default class Moderation extends Component {
           open={moderation.modalOpen}
           onClose={this.onClose}/>
 
-        {moderation.userDetailId && (
-          <UserDetail
-            id={moderation.userDetailId}
-            hideUserDetail={hideUserDetail}
-            bannedWords={settings.wordlist.banned}
-            suspectWords={settings.wordlist.suspect}
-            showBanUserDialog={props.showBanUserDialog}
-            showSuspendUserDialog={props.showSuspendUserDialog}
-            acceptComment={props.acceptComment}
-            rejectComment={props.rejectComment} />
-        )}
-
         <StorySearch
           assetId={assetId}
           moderation={this.props.moderation}
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index 2adf17b23..57b551df2 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -3,7 +3,7 @@ import React, {PropTypes} from 'react';
 import Comment from '../containers/Comment';
 import styles from './styles.css';
 import EmptyCard from '../../../components/EmptyCard';
-import {actionsMap} from '../helpers/moderationQueueActionsMap';
+import {actionsMap} from '../../../utils/moderationQueueActionsMap';
 import LoadMore from './LoadMore';
 import t from 'coral-framework/services/i18n';
 import {CSSTransitionGroup} from 'react-transition-group';
@@ -85,7 +85,6 @@ class ModerationQueue extends React.Component {
                 data={this.props.data}
                 root={this.props.root}
                 key={comment.id}
-                index={i}
                 comment={comment}
                 selected={i === selectedIndex}
                 suspectWords={props.suspectWords}
diff --git a/client/coral-admin/src/routes/Moderation/components/styles.css b/client/coral-admin/src/routes/Moderation/components/styles.css
index 1228c61a4..948f72158 100644
--- a/client/coral-admin/src/routes/Moderation/components/styles.css
+++ b/client/coral-admin/src/routes/Moderation/components/styles.css
@@ -213,11 +213,12 @@ span {
 
     .author {
       font-weight: 300;
-      min-width: 230px;
+      width: 100%;
       display: flex;
       align-items: center;
       color: #262626;
       font-size: 16px;
+      position: relative;
     }
   }
 
@@ -457,18 +458,6 @@ span {
   }
 }
 
-.minimal {
-  margin: 0;
-}
-
-.minimalSelection {
-  background-color: #ecf4ff;
-}
-
-.bulkSelectInput {
-  cursor: pointer;
-}
-
 .emptyCardContainer {
   margin-top: 16px;
 }
@@ -491,31 +480,6 @@ span {
   opacity: 1.0;
 }
 
-.bodyLeave {
-  position: absolute;
-  width: 100%;
-  top: 0;
-  background-color: white;
-  opacity: 1.0;
-  transition: background 400ms, opacity 800ms 1600ms;
-  pointer-events: none;
-}
-
-.bodyLeaveActive {
-  opacity: 0;
-  background-color: rgba(255,255,0, 0.2);
-}
-
-.bodyEnter {
-  opacity: 0;
-  pointer-events: none;
-}
-
-.bodyEnterActive {
-  opacity: 1.0;
-  transition: opacity 800ms 2400ms;
-}
-
 .editedMarker {
   font-style: italic;
   color: #666;
@@ -528,3 +492,8 @@ span {
   position: relative;
   top: .3em;
 }
+
+.commentType {
+  position: absolute;
+  right: 0px;
+}
diff --git a/client/coral-admin/src/routes/Moderation/containers/Comment.js b/client/coral-admin/src/routes/Moderation/containers/Comment.js
index d724682ab..87b29a779 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Comment.js
@@ -41,9 +41,11 @@ export default withFragments({
       }
       actions {
         ... on FlagAction {
+          id
           reason
           message
           user {
+            id
             username
           }
         }
diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
index 3ea47f32b..19cb0e8a1 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
@@ -15,13 +15,12 @@ import {handleCommentChange} from '../../../graphql/utils';
 import {fetchSettings} from 'actions/settings';
 import {showBanUserDialog} from 'actions/banUserDialog';
 import {showSuspendUserDialog} from 'actions/suspendUserDialog';
+import {viewUserDetail} from '../../../actions/userDetail';
 import {
   toggleModal,
   singleView,
   hideShortcutsNote,
   toggleStorySearch,
-  viewUserDetail,
-  hideUserDetail,
   setSortOrder,
   storySearchChange,
   clearState
@@ -426,7 +425,6 @@ const mapDispatchToProps = (dispatch) => ({
     toggleStorySearch,
     showSuspendUserDialog,
     viewUserDetail,
-    hideUserDetail,
     setSortOrder,
     storySearchChange,
     clearState
diff --git a/client/coral-admin/src/utils/comment.js b/client/coral-admin/src/utils/comment.js
new file mode 100644
index 000000000..26530f6c9
--- /dev/null
+++ b/client/coral-admin/src/utils/comment.js
@@ -0,0 +1,9 @@
+export function getCommentType(comment) {
+  let commentType = '';
+  if (comment.status === 'PREMOD') {
+    commentType = 'premod';
+  } else if (comment.actions && comment.actions.some((a) => a.__typename === 'FlagAction')) {
+    commentType = 'flagged';
+  }
+  return commentType;
+}
diff --git a/client/coral-admin/src/routes/Moderation/helpers/moderationQueueActionsMap.js b/client/coral-admin/src/utils/moderationQueueActionsMap.js
similarity index 100%
rename from client/coral-admin/src/routes/Moderation/helpers/moderationQueueActionsMap.js
rename to client/coral-admin/src/utils/moderationQueueActionsMap.js