diff --git a/src/core/client/admin/components/UserStatus/PremodModal.css b/src/core/client/admin/components/ModalBodyText.css
similarity index 68%
rename from src/core/client/admin/components/UserStatus/PremodModal.css
rename to src/core/client/admin/components/ModalBodyText.css
index 9617ee7a5..62ae84c8d 100644
--- a/src/core/client/admin/components/UserStatus/PremodModal.css
+++ b/src/core/client/admin/components/ModalBodyText.css
@@ -1,9 +1,9 @@
-$premod-modal-text: var(--v2-colors-mono-500);
+$modal-body-text: var(--v2-colors-mono-500);
 
-.bodyText {
+.root {
   font-size: var(--v2-font-size-3);
   font-family: var(--v2-font-family-primary);
   font-weight: var(--v2-font-weight-primary-regular);
   line-height: var(--v2-line-height-body-short);
-  color: $premod-modal-text;
+  color: $modal-body-text;
 }
diff --git a/src/core/client/admin/components/ModalBodyText.tsx b/src/core/client/admin/components/ModalBodyText.tsx
new file mode 100644
index 000000000..69e069139
--- /dev/null
+++ b/src/core/client/admin/components/ModalBodyText.tsx
@@ -0,0 +1,9 @@
+import React, { FunctionComponent } from "react";
+
+import styles from "./ModalBodyText.css";
+
+const ModalBodyText: FunctionComponent = ({ children }) => (
+  <p className={styles.root}>{children}</p>
+);
+
+export default ModalBodyText;
diff --git a/src/core/client/admin/components/UserStatus/ChangeStatusModalHeader.css b/src/core/client/admin/components/ModalHeader.css
similarity index 73%
rename from src/core/client/admin/components/UserStatus/ChangeStatusModalHeader.css
rename to src/core/client/admin/components/ModalHeader.css
index 8222b9bb7..b5e9408ca 100644
--- a/src/core/client/admin/components/UserStatus/ChangeStatusModalHeader.css
+++ b/src/core/client/admin/components/ModalHeader.css
@@ -1,10 +1,10 @@
-$status-modal-text: var(--v2-colors-mono-500);
+$modal-text: var(--v2-colors-mono-500);
 
 .root {
   font-size: var(--v2-font-size-5);
   font-family: var(--v2-font-family-primary);
   font-weight: var(--v2-font-weight-primary-semi-bold);
   line-height: var(--v2-line-height-title);
-  color: $status-modal-text;
+  color: $modal-text;
   margin: 0;
 }
diff --git a/src/core/client/admin/components/ModalHeader.tsx b/src/core/client/admin/components/ModalHeader.tsx
new file mode 100644
index 000000000..b94ca0266
--- /dev/null
+++ b/src/core/client/admin/components/ModalHeader.tsx
@@ -0,0 +1,16 @@
+import React, { FunctionComponent, HTMLAttributes } from "react";
+
+import styles from "./ModalHeader.css";
+
+const ModalHeader: FunctionComponent<HTMLAttributes<HTMLHeadingElement>> = ({
+  children,
+  ...rest
+}) => {
+  return (
+    <h2 {...rest} className={styles.root}>
+      {children}
+    </h2>
+  );
+};
+
+export default ModalHeader;
diff --git a/src/core/client/admin/components/UserStatus/ModalHeaderUsername.css b/src/core/client/admin/components/ModalHeaderUsername.css
similarity index 100%
rename from src/core/client/admin/components/UserStatus/ModalHeaderUsername.css
rename to src/core/client/admin/components/ModalHeaderUsername.css
diff --git a/src/core/client/admin/components/UserStatus/ModalHeaderUsername.tsx b/src/core/client/admin/components/ModalHeaderUsername.tsx
similarity index 73%
rename from src/core/client/admin/components/UserStatus/ModalHeaderUsername.tsx
rename to src/core/client/admin/components/ModalHeaderUsername.tsx
index 0e31e17df..cc7dd5404 100644
--- a/src/core/client/admin/components/UserStatus/ModalHeaderUsername.tsx
+++ b/src/core/client/admin/components/ModalHeaderUsername.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent } from "react";
 
 import styles from "./ModalHeaderUsername.css";
 
-const ModalHeaderUsername: FunctionComponent<{}> = ({ children }) => {
+const ModalHeaderUsername: FunctionComponent = ({ children }) => {
   return <strong className={styles.root}>{children}</strong>;
 };
 
diff --git a/src/core/client/admin/components/ModerateCard/ApproveButton.css b/src/core/client/admin/components/ModerateCard/ApproveButton.css
index e1de1e004..052169cce 100644
--- a/src/core/client/admin/components/ModerateCard/ApproveButton.css
+++ b/src/core/client/admin/components/ModerateCard/ApproveButton.css
@@ -16,8 +16,19 @@ $moderateCardButtonOutlineApproveColor: var(--v2-colors-green-500);
   }
 }
 
+.readOnly {
+  background-color: transparent;
+  border-color: var(--v2-colors-grey-300);
+  color: var(--v2-colors-grey-300);
+
+  &:hover {
+    cursor: not-allowed;
+  }
+}
+
 .invert {
   background-color: $moderateCardButtonOutlineApproveColor;
+  border-color: $moderateCardButtonOutlineApproveColor;
   color: var(--v2-colors-pure-white);
 }
 
diff --git a/src/core/client/admin/components/ModerateCard/ApproveButton.tsx b/src/core/client/admin/components/ModerateCard/ApproveButton.tsx
index 6d077c52d..cdd1b103e 100644
--- a/src/core/client/admin/components/ModerateCard/ApproveButton.tsx
+++ b/src/core/client/admin/components/ModerateCard/ApproveButton.tsx
@@ -9,10 +9,12 @@ import styles from "./ApproveButton.css";
 
 interface Props extends Omit<PropTypesOf<typeof BaseButton>, "ref"> {
   invert?: boolean;
+  readOnly?: boolean;
 }
 
 const ApproveButton: FunctionComponent<Props> = ({
   invert,
+  readOnly,
   className,
   ...rest
 }) => (
@@ -21,6 +23,7 @@ const ApproveButton: FunctionComponent<Props> = ({
       {...rest}
       className={cn(className, styles.root, {
         [styles.invert]: invert,
+        [styles.readOnly]: readOnly,
       })}
       aria-label="Approve"
     >
diff --git a/src/core/client/admin/components/ModerateCard/FeatureButton.css b/src/core/client/admin/components/ModerateCard/FeatureButton.css
index f496436d9..34cb3e9c5 100644
--- a/src/core/client/admin/components/ModerateCard/FeatureButton.css
+++ b/src/core/client/admin/components/ModerateCard/FeatureButton.css
@@ -24,8 +24,7 @@
   }
 
   &:disabled {
-    cursor: default;
-
+    cursor: not-allowed;
     background-color: transparent;
     border-color: var(--v2-colors-grey-300);
     color: var(--v2-colors-grey-300);
diff --git a/src/core/client/admin/components/ModerateCard/ModerateCard.css b/src/core/client/admin/components/ModerateCard/ModerateCard.css
index 22e18525b..02506bb9b 100644
--- a/src/core/client/admin/components/ModerateCard/ModerateCard.css
+++ b/src/core/client/admin/components/ModerateCard/ModerateCard.css
@@ -120,10 +120,6 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
   text-transform: uppercase;
 }
 
-.storyTitle {
-  color: $moderateCardStoryTitleColor;
-}
-
 .commentOn {
   font-size: var(--v2-font-size-2);
   font-family: var(--v2-font-family-primary);
@@ -136,6 +132,7 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
 }
 
 .storyTitle {
+  color: $moderateCardStoryTitleColor;
   font-weight: var(--v2-font-weight-primary-semi-bold);
 }
 
@@ -150,10 +147,6 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
   height: 40px;
 }
 
-.deleted {
-  background: var(--v2-palette-grey-lightest);
-}
-
 .timestamp {
   color: $moderateCardTimestampColor;
   font-family: var(--v2-font-family-primary);
@@ -186,6 +179,7 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
 }
 
 .deleted {
+  background: var(--v2-palette-grey-lightest);
   font-family: var(--v2-font-family-primary);
   font-weight: var(--v2-font-weight-primary-regular);
   font-size: var(--v2-font-size-2);
diff --git a/src/core/client/admin/components/ModerateCard/ModerateCard.tsx b/src/core/client/admin/components/ModerateCard/ModerateCard.tsx
index 117e7bf24..7a54986a0 100644
--- a/src/core/client/admin/components/ModerateCard/ModerateCard.tsx
+++ b/src/core/client/admin/components/ModerateCard/ModerateCard.tsx
@@ -6,6 +6,7 @@ import React, {
   FunctionComponent,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
 } from "react";
 
@@ -71,6 +72,12 @@ interface Props {
    */
   dangling?: boolean;
   deleted?: boolean;
+
+  /**
+   * If set to true, it means that this comment cannot be moderated by the
+   * current user.
+   */
+  readOnly?: boolean;
   edited: boolean;
   selectPrev?: () => void;
   selectNext?: () => void;
@@ -108,6 +115,7 @@ const ModerateCard: FunctionComponent<Props> = ({
   mini = false,
   hideUsername = false,
   deleted = false,
+  readOnly = false,
   edited,
   selectNext,
   selectPrev,
@@ -115,6 +123,7 @@ const ModerateCard: FunctionComponent<Props> = ({
   isQA,
 }) => {
   const div = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     if (selected) {
       if (selectNext) {
@@ -143,31 +152,39 @@ const ModerateCard: FunctionComponent<Props> = ({
     }
 
     return noop;
-  }, [selected, id]);
+  }, [selected, id, selectNext, selectPrev, onBan, onApprove, onReject]);
 
   useEffect(() => {
     if (selected && div && div.current) {
       div.current.focus();
     }
-  }, [selected]);
-  const commentBody = deleted ? (
-    <Localized id="moderate-comment-deleted-body">
-      <div className={styles.deleted}>
-        This comment is no longer available. The commenter has deleted their
-        account.
-      </div>
-    </Localized>
-  ) : (
-    body
+  }, [selected, div]);
+
+  const commentBody = useMemo(
+    () =>
+      deleted ? (
+        <Localized id="moderate-comment-deleted-body">
+          <div className={styles.deleted}>
+            This comment is no longer available. The commenter has deleted their
+            account.
+          </div>
+        </Localized>
+      ) : (
+        body
+      ),
+    [deleted, body]
   );
+
   const commentAuthorClick = useCallback(() => {
     onUsernameClick();
   }, [onUsernameClick]);
+
   const commentParentAuthorClick = useCallback(() => {
     if (inReplyTo) {
       onUsernameClick(inReplyTo.id);
     }
   }, [onUsernameClick, inReplyTo]);
+
   return (
     <Card
       className={cn(
@@ -209,7 +226,7 @@ const ModerateCard: FunctionComponent<Props> = ({
               <FeatureButton
                 featured={featured}
                 onClick={onFeature}
-                enabled={!deleted && !isQA}
+                enabled={!deleted && !isQA && !readOnly}
               />
             </Flex>
             {inReplyTo && inReplyTo.username && (
@@ -304,14 +321,24 @@ const ModerateCard: FunctionComponent<Props> = ({
             <RejectButton
               onClick={onReject}
               invert={status === "rejected"}
-              disabled={status === "rejected" || dangling || deleted}
-              className={cn({ [styles.miniButton]: mini })}
+              disabled={
+                status === "rejected" || dangling || deleted || readOnly
+              }
+              readOnly={readOnly}
+              className={cn({
+                [styles.miniButton]: mini,
+              })}
             />
             <ApproveButton
               onClick={onApprove}
               invert={status === "approved"}
-              disabled={status === "approved" || dangling || deleted}
-              className={cn({ [styles.miniButton]: mini })}
+              disabled={
+                status === "approved" || dangling || deleted || readOnly
+              }
+              readOnly={readOnly}
+              className={cn({
+                [styles.miniButton]: mini,
+              })}
             />
           </Flex>
           {moderatedBy}
diff --git a/src/core/client/admin/components/ModerateCard/ModerateCardContainer.tsx b/src/core/client/admin/components/ModerateCard/ModerateCardContainer.tsx
index 1d306e177..9c7fc7f02 100644
--- a/src/core/client/admin/components/ModerateCard/ModerateCardContainer.tsx
+++ b/src/core/client/admin/components/ModerateCard/ModerateCardContainer.tsx
@@ -1,5 +1,10 @@
 import { Match, Router, withRouter } from "found";
-import React, { FunctionComponent, useCallback, useState } from "react";
+import React, {
+  FunctionComponent,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 import { graphql } from "react-relay";
 
 import NotAvailable from "coral-admin/components/NotAvailable";
@@ -11,18 +16,20 @@ import {
 import FadeInTransition from "coral-framework/components/FadeInTransition";
 import { getModerationLink } from "coral-framework/helpers";
 import parseModerationOptions from "coral-framework/helpers/parseModerationOptions";
+import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
 import {
-  MutationProp,
-  withFragmentContainer,
-  withMutation,
-} from "coral-framework/lib/relay";
-import { GQLSTORY_MODE, GQLTAG, GQLUSER_STATUS } from "coral-framework/schema";
+  GQLFEATURE_FLAG,
+  GQLSTORY_MODE,
+  GQLTAG,
+  GQLUSER_STATUS,
+} from "coral-framework/schema";
 
 import {
   COMMENT_STATUS,
   ModerateCardContainer_comment,
 } from "coral-admin/__generated__/ModerateCardContainer_comment.graphql";
 import { ModerateCardContainer_settings } from "coral-admin/__generated__/ModerateCardContainer_settings.graphql";
+import { ModerateCardContainer_viewer } from "coral-admin/__generated__/ModerateCardContainer_viewer.graphql";
 
 import BanCommentUserMutation from "./BanCommentUserMutation";
 import FeatureCommentMutation from "./FeatureCommentMutation";
@@ -31,13 +38,9 @@ import ModeratedByContainer from "./ModeratedByContainer";
 import UnfeatureCommentMutation from "./UnfeatureCommentMutation";
 
 interface Props {
+  viewer: ModerateCardContainer_viewer;
   comment: ModerateCardContainer_comment;
   settings: ModerateCardContainer_settings;
-  approveComment: MutationProp<typeof ApproveCommentMutation>;
-  rejectComment: MutationProp<typeof RejectCommentMutation>;
-  featureComment: MutationProp<typeof FeatureCommentMutation>;
-  unfeatureComment: MutationProp<typeof UnfeatureCommentMutation>;
-  banUser: MutationProp<typeof BanCommentUserMutation>;
   danglingLogic: (status: COMMENT_STATUS) => boolean;
   match: Match;
   router: Router;
@@ -71,14 +74,11 @@ function isFeatured(comment: ModerateCardContainer_comment) {
 const ModerateCardContainer: FunctionComponent<Props> = ({
   comment,
   settings,
+  viewer,
   danglingLogic,
   showStoryInfo,
   match,
   router,
-  approveComment,
-  rejectComment,
-  featureComment,
-  unfeatureComment,
   mini,
   hideUsername,
   selected,
@@ -87,15 +87,36 @@ const ModerateCardContainer: FunctionComponent<Props> = ({
   onUsernameClicked: usernameClicked,
   onConversationClicked: conversationClicked,
   onSetSelected: setSelected,
-  banUser,
   loadNext,
 }) => {
+  const approveComment = useMutation(ApproveCommentMutation);
+  const rejectComment = useMutation(RejectCommentMutation);
+  const featureComment = useMutation(FeatureCommentMutation);
+  const unfeatureComment = useMutation(UnfeatureCommentMutation);
+  const banUser = useMutation(BanCommentUserMutation);
+
+  const scoped = useMemo(
+    () =>
+      settings.featureFlags.includes(GQLFEATURE_FLAG.SITE_MODERATOR) &&
+      !!viewer.moderationScopes?.scoped,
+    [settings, viewer]
+  );
+
+  const readOnly = useMemo(() => scoped && !comment.canModerate, [
+    scoped,
+    comment,
+  ]);
+
   const [showBanModal, setShowBanModal] = useState(false);
   const handleApprove = useCallback(async () => {
     if (!comment.revision) {
       return;
     }
 
+    if (readOnly) {
+      return;
+    }
+
     const { storyID, siteID, section } = parseModerationOptions(match);
 
     await approveComment({
@@ -108,13 +129,17 @@ const ModerateCardContainer: FunctionComponent<Props> = ({
     if (loadNext) {
       loadNext();
     }
-  }, [approveComment, comment, match]);
+  }, [approveComment, comment, match, readOnly]);
 
   const handleReject = useCallback(async () => {
     if (!comment.revision) {
       return;
     }
 
+    if (readOnly) {
+      return;
+    }
+
     const { storyID, siteID, section } = parseModerationOptions(match);
 
     await rejectComment({
@@ -127,13 +152,17 @@ const ModerateCardContainer: FunctionComponent<Props> = ({
     if (loadNext) {
       loadNext();
     }
-  }, [rejectComment, comment, match]);
+  }, [rejectComment, comment, match, readOnly]);
 
   const handleFeature = useCallback(() => {
     if (!comment.revision) {
       return;
     }
 
+    if (readOnly) {
+      return;
+    }
+
     const { storyID, siteID, section } = parseModerationOptions(match);
 
     void featureComment({
@@ -143,24 +172,31 @@ const ModerateCardContainer: FunctionComponent<Props> = ({
       siteID,
       section,
     });
-  }, [featureComment, comment, match]);
+  }, [featureComment, comment, match, readOnly]);
 
   const handleUnfeature = useCallback(() => {
+    if (readOnly) {
+      return;
+    }
+
     void unfeatureComment({
       commentID: comment.id,
       storyID: match.params.storyID,
     });
-  }, [unfeatureComment, comment, match]);
+  }, [unfeatureComment, comment, match, readOnly]);
 
   const onFeature = useCallback(() => {
-    const featured = isFeatured(comment);
+    if (readOnly) {
+      return;
+    }
 
+    const featured = isFeatured(comment);
     if (featured) {
       handleUnfeature();
     } else {
       handleFeature();
     }
-  }, [comment]);
+  }, [comment, readOnly, handleFeature, handleUnfeature]);
 
   const onUsernameClicked = useCallback(
     (id?: string) => {
@@ -197,7 +233,7 @@ const ModerateCardContainer: FunctionComponent<Props> = ({
 
   const handleBanModalClose = useCallback(() => {
     setShowBanModal(false);
-  }, []);
+  }, [setShowBanModal]);
 
   const openBanModal = useCallback(() => {
     if (
@@ -206,8 +242,9 @@ const ModerateCardContainer: FunctionComponent<Props> = ({
     ) {
       return;
     }
+
     setShowBanModal(true);
-  }, [comment]);
+  }, [comment, setShowBanModal]);
 
   const handleBanConfirm = useCallback(
     async (rejectExistingComments: boolean, message: string) => {
@@ -220,17 +257,22 @@ const ModerateCardContainer: FunctionComponent<Props> = ({
       }
       setShowBanModal(false);
     },
-    [comment]
+    [comment, banUser, setShowBanModal]
   );
 
   // Only highlight comments that have been flagged for containing a banned or
   // suspect word.
-  const highlight = comment.revision
-    ? comment.revision.actionCounts.flag.reasons.COMMENT_DETECTED_BANNED_WORD +
-        comment.revision.actionCounts.flag.reasons
-          .COMMENT_DETECTED_SUSPECT_WORD >
-      0
-    : false;
+  const highlight = useMemo(
+    () =>
+      comment.revision
+        ? comment.revision.actionCounts.flag.reasons
+            .COMMENT_DETECTED_BANNED_WORD +
+            comment.revision.actionCounts.flag.reasons
+              .COMMENT_DETECTED_SUSPECT_WORD >
+          0
+        : false,
+    [comment]
+  );
 
   return (
     <>
@@ -284,6 +326,7 @@ const ModerateCardContainer: FunctionComponent<Props> = ({
           hideUsername={hideUsername}
           deleted={comment.deleted ? comment.deleted : false}
           edited={comment.editing.edited}
+          readOnly={readOnly}
           isQA={comment.story.settings.mode === GQLSTORY_MODE.QA}
         />
       </FadeInTransition>
@@ -341,6 +384,7 @@ const enhanced = withFragmentContainer<Props>({
           username
         }
       }
+      canModerate
       story {
         id
         metadata {
@@ -374,18 +418,13 @@ const enhanced = withFragmentContainer<Props>({
       ...MarkersContainer_settings
     }
   `,
-})(
-  withRouter(
-    withMutation(BanCommentUserMutation)(
-      withMutation(ApproveCommentMutation)(
-        withMutation(RejectCommentMutation)(
-          withMutation(FeatureCommentMutation)(
-            withMutation(UnfeatureCommentMutation)(ModerateCardContainer)
-          )
-        )
-      )
-    )
-  )
-);
+  viewer: graphql`
+    fragment ModerateCardContainer_viewer on User {
+      moderationScopes {
+        scoped
+      }
+    }
+  `,
+})(withRouter(ModerateCardContainer));
 
 export default enhanced;
diff --git a/src/core/client/admin/components/ModerateCard/RejectButton.css b/src/core/client/admin/components/ModerateCard/RejectButton.css
index a4b826914..aa247e4a7 100644
--- a/src/core/client/admin/components/ModerateCard/RejectButton.css
+++ b/src/core/client/admin/components/ModerateCard/RejectButton.css
@@ -16,8 +16,19 @@ $moderateCardButtonOutlineRejectColor: var(--v2-colors-red-500);
   }
 }
 
+.readOnly {
+  background-color: transparent;
+  border-color: var(--v2-colors-grey-300);
+  color: var(--v2-colors-grey-300);
+
+  &:hover {
+    cursor: not-allowed;
+  }
+}
+
 .invert {
   background-color: $moderateCardButtonOutlineRejectColor;
+  border-color: $moderateCardButtonOutlineRejectColor;
   color: var(--v2-colors-pure-white);
 }
 
diff --git a/src/core/client/admin/components/ModerateCard/RejectButton.tsx b/src/core/client/admin/components/ModerateCard/RejectButton.tsx
index 1b4f74f55..0007af6a8 100644
--- a/src/core/client/admin/components/ModerateCard/RejectButton.tsx
+++ b/src/core/client/admin/components/ModerateCard/RejectButton.tsx
@@ -9,10 +9,12 @@ import styles from "./RejectButton.css";
 
 interface Props extends Omit<PropTypesOf<typeof BaseButton>, "ref"> {
   invert?: boolean;
+  readOnly?: boolean;
 }
 
 const RejectButton: FunctionComponent<Props> = ({
   invert,
+  readOnly,
   className,
   ...rest
 }) => (
@@ -21,6 +23,7 @@ const RejectButton: FunctionComponent<Props> = ({
       {...rest}
       className={cn(className, styles.root, {
         [styles.invert]: invert,
+        [styles.readOnly]: readOnly,
       })}
       aria-label="Reject"
     >
diff --git a/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap b/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap
index 3a4107f45..c10c20628 100644
--- a/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap
+++ b/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap
@@ -122,12 +122,14 @@ exports[`renders approved correctly 1`] = `
           disabled={false}
           invert={false}
           onClick={[Function]}
+          readOnly={false}
         />
         <ApproveButton
           className=""
           disabled={true}
           invert={true}
           onClick={[Function]}
+          readOnly={false}
         />
       </ForwardRef(forwardRef)>
     </ForwardRef(forwardRef)>
@@ -257,12 +259,14 @@ exports[`renders correctly 1`] = `
           disabled={false}
           invert={false}
           onClick={[Function]}
+          readOnly={false}
         />
         <ApproveButton
           className=""
           disabled={false}
           invert={false}
           onClick={[Function]}
+          readOnly={false}
         />
       </ForwardRef(forwardRef)>
     </ForwardRef(forwardRef)>
@@ -392,12 +396,14 @@ exports[`renders dangling correctly 1`] = `
           disabled={true}
           invert={false}
           onClick={[Function]}
+          readOnly={false}
         />
         <ApproveButton
           className=""
           disabled={true}
           invert={false}
           onClick={[Function]}
+          readOnly={false}
         />
       </ForwardRef(forwardRef)>
     </ForwardRef(forwardRef)>
@@ -527,12 +533,14 @@ exports[`renders rejected correctly 1`] = `
           disabled={true}
           invert={true}
           onClick={[Function]}
+          readOnly={false}
         />
         <ApproveButton
           className=""
           disabled={false}
           invert={false}
           onClick={[Function]}
+          readOnly={false}
         />
       </ForwardRef(forwardRef)>
     </ForwardRef(forwardRef)>
@@ -671,12 +679,14 @@ exports[`renders reply correctly 1`] = `
           disabled={false}
           invert={false}
           onClick={[Function]}
+          readOnly={false}
         />
         <ApproveButton
           className=""
           disabled={false}
           invert={false}
           onClick={[Function]}
+          readOnly={false}
         />
       </ForwardRef(forwardRef)>
     </ForwardRef(forwardRef)>
@@ -844,12 +854,14 @@ exports[`renders story info 1`] = `
           disabled={false}
           invert={false}
           onClick={[Function]}
+          readOnly={false}
         />
         <ApproveButton
           className=""
           disabled={false}
           invert={false}
           onClick={[Function]}
+          readOnly={false}
         />
       </ForwardRef(forwardRef)>
     </ForwardRef(forwardRef)>
@@ -987,12 +999,14 @@ exports[`renders tombstoned when comment is deleted 1`] = `
           disabled={true}
           invert={false}
           onClick={[Function]}
+          readOnly={false}
         />
         <ApproveButton
           className=""
           disabled={true}
           invert={false}
           onClick={[Function]}
+          readOnly={false}
         />
       </ForwardRef(forwardRef)>
     </ForwardRef(forwardRef)>
diff --git a/src/core/client/admin/components/TranslatedRole.tsx b/src/core/client/admin/components/TranslatedRole.tsx
index 83ffca619..b7c1b491e 100644
--- a/src/core/client/admin/components/TranslatedRole.tsx
+++ b/src/core/client/admin/components/TranslatedRole.tsx
@@ -5,22 +5,24 @@ import { GQLUSER_ROLE, GQLUSER_ROLE_RL } from "coral-framework/schema";
 
 interface Props {
   container?: React.ReactElement<any> | React.ComponentType<any> | string;
-  children: GQLUSER_ROLE_RL;
+  role: GQLUSER_ROLE_RL;
+  scoped?: boolean;
+  moderationScopesEnabled: boolean;
 }
 
 function createElement(
   Container: React.ReactElement<any> | React.ComponentType<any> | string,
-  children: React.ReactNode
+  text: string
 ) {
   if (React.isValidElement<any>(Container)) {
-    return React.cloneElement(Container, { children });
+    return React.cloneElement(Container, { children: text });
   } else {
-    return <Container>{children}</Container>;
+    return <Container>{text}</Container>;
   }
 }
 
 const TranslatedRole: React.FunctionComponent<Props> = (props) => {
-  switch (props.children) {
+  switch (props.role) {
     case GQLUSER_ROLE.COMMENTER:
       return (
         <Localized id="role-commenter">
@@ -34,9 +36,25 @@ const TranslatedRole: React.FunctionComponent<Props> = (props) => {
         </Localized>
       );
     case GQLUSER_ROLE.MODERATOR:
+      if (!props.moderationScopesEnabled) {
+        return (
+          <Localized id="role-moderator">
+            {createElement(props.container!, "Moderator")}
+          </Localized>
+        );
+      }
+
+      if (props.scoped) {
+        return (
+          <Localized id="role-siteModerator">
+            {createElement(props.container!, "Site Moderator")}
+          </Localized>
+        );
+      }
+
       return (
-        <Localized id="role-moderator">
-          {createElement(props.container!, "Moderator")}
+        <Localized id="role-organizationModerator">
+          {createElement(props.container!, "Organization Moderator")}
         </Localized>
       );
     case GQLUSER_ROLE.STAFF:
@@ -47,7 +65,7 @@ const TranslatedRole: React.FunctionComponent<Props> = (props) => {
       );
     default:
       // Unknown role, just use untranslated string.
-      return createElement(props.container!, props.children);
+      return createElement(props.container!, props.role);
   }
 };
 
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistory.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistory.tsx
index ae91bcd33..7dcaf18d7 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistory.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistory.tsx
@@ -2,7 +2,7 @@ import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useMemo } from "react";
 import { graphql } from "react-relay";
 
-import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { useDateTimeFormatter } from "coral-framework/hooks";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import {
   CallOut,
@@ -48,7 +48,6 @@ const UserDrawerAccountHistory: FunctionComponent<Props> = ({ user }) => {
       </span>
     </Localized>
   );
-  const { locales } = useCoralContext();
   const combinedHistory = useMemo(() => {
     // Collect all the different types of history items.
     const history: HistoryRecord[] = [];
@@ -137,7 +136,7 @@ const UserDrawerAccountHistory: FunctionComponent<Props> = ({ user }) => {
     // Sort the history so that it's in the right order.
     return history.sort((a, b) => b.date.getTime() - a.date.getTime());
   }, [user]);
-  const formatter = new Intl.DateTimeFormat(locales, {
+  const formatter = useDateTimeFormatter({
     year: "numeric",
     month: "long",
     day: "numeric",
@@ -167,7 +166,7 @@ const UserDrawerAccountHistory: FunctionComponent<Props> = ({ user }) => {
           {combinedHistory.map((history, index) => (
             <TableRow key={index} className={styles.row}>
               <TableCell className={styles.date}>
-                {formatter.format(history.date)}
+                {formatter(history.date)}
               </TableCell>
               <TableCell className={styles.action}>
                 <AccountHistoryAction {...history} />
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllComments.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllComments.tsx
index 0e9985bfb..266ec21e2 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllComments.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllComments.tsx
@@ -11,6 +11,7 @@ import { Button, CallOut, Divider } from "coral-ui/components/v2";
 
 import { UserHistoryDrawerAllComments_settings } from "coral-admin/__generated__/UserHistoryDrawerAllComments_settings.graphql";
 import { UserHistoryDrawerAllComments_user } from "coral-admin/__generated__/UserHistoryDrawerAllComments_user.graphql";
+import { UserHistoryDrawerAllComments_viewer } from "coral-admin/__generated__/UserHistoryDrawerAllComments_viewer.graphql";
 import { UserHistoryDrawerAllCommentsPaginationQueryVariables } from "coral-admin/__generated__/UserHistoryDrawerAllCommentsPaginationQuery.graphql";
 
 import styles from "./UserHistoryDrawerAllComments.css";
@@ -18,12 +19,14 @@ import styles from "./UserHistoryDrawerAllComments.css";
 interface Props {
   user: UserHistoryDrawerAllComments_user;
   settings: UserHistoryDrawerAllComments_settings;
+  viewer: UserHistoryDrawerAllComments_viewer;
   relay: RelayPaginationProp;
 }
 
 const UserHistoryDrawerAllComments: FunctionComponent<Props> = ({
   user,
   settings,
+  viewer,
   relay,
 }) => {
   const [loadMore, isLoadingMore] = useLoadMore(relay, 5);
@@ -59,6 +62,7 @@ const UserHistoryDrawerAllComments: FunctionComponent<Props> = ({
           <ModerateCardContainer
             comment={c}
             settings={settings}
+            viewer={viewer}
             danglingLogic={(status) => false}
             hideUsername
             showStoryInfo
@@ -92,6 +96,11 @@ const enhanced = withPaginationContainer<
         ...ModerateCardContainer_settings
       }
     `,
+    viewer: graphql`
+      fragment UserHistoryDrawerAllComments_viewer on User {
+        ...ModerateCardContainer_viewer
+      }
+    `,
     user: graphql`
       fragment UserHistoryDrawerAllComments_user on User
         @argumentDefinitions(
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllCommentsQuery.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllCommentsQuery.tsx
index a7e52f2dd..782a8517f 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllCommentsQuery.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllCommentsQuery.tsx
@@ -28,12 +28,15 @@ const UserHistoryDrawerAllCommentsQuery: FunctionComponent<Props> = ({
           settings {
             ...UserHistoryDrawerAllComments_settings
           }
+          viewer {
+            ...UserHistoryDrawerAllComments_viewer
+          }
         }
       `}
       variables={{ userID }}
       cacheConfig={{ force: true }}
       render={({ error, props }) => {
-        if (!props) {
+        if (!props || !props.viewer) {
           return (
             <div className={styles.root}>
               <Spinner />
@@ -56,6 +59,7 @@ const UserHistoryDrawerAllCommentsQuery: FunctionComponent<Props> = ({
         return (
           <UserHistoryDrawerAllComments
             settings={props.settings}
+            viewer={props.viewer}
             user={props.user}
           />
         );
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.tsx
index 216d79b7a..06d0fec6a 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.tsx
@@ -4,7 +4,7 @@ import { graphql } from "react-relay";
 
 import { UserStatusChangeContainer } from "coral-admin/components/UserStatus";
 import { CopyButton } from "coral-framework/components";
-import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { useDateTimeFormatter } from "coral-framework/hooks";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import {
   Button,
@@ -16,6 +16,7 @@ import {
 
 import { UserHistoryDrawerContainer_settings } from "coral-admin/__generated__/UserHistoryDrawerContainer_settings.graphql";
 import { UserHistoryDrawerContainer_user } from "coral-admin/__generated__/UserHistoryDrawerContainer_user.graphql";
+import { UserHistoryDrawerContainer_viewer } from "coral-admin/__generated__/UserHistoryDrawerContainer_viewer.graphql";
 
 import RecentHistoryContainer from "./RecentHistoryContainer";
 import Tabs from "./Tabs";
@@ -27,16 +28,17 @@ import styles from "./UserHistoryDrawerContainer.css";
 interface Props {
   user: UserHistoryDrawerContainer_user;
   settings: UserHistoryDrawerContainer_settings;
+  viewer: UserHistoryDrawerContainer_viewer;
   onClose: () => void;
 }
 
 const UserHistoryDrawerContainer: FunctionComponent<Props> = ({
   settings,
   user,
+  viewer,
   onClose,
 }) => {
-  const { locales } = useCoralContext();
-  const formatter = new Intl.DateTimeFormat(locales, {
+  const formatter = useDateTimeFormatter({
     month: "long",
     day: "numeric",
     year: "numeric",
@@ -69,6 +71,7 @@ const UserHistoryDrawerContainer: FunctionComponent<Props> = ({
                   bordered={true}
                   settings={settings}
                   user={user}
+                  viewer={viewer}
                 />
               </div>
               <UserStatusDetailsContainer user={user} />
@@ -101,7 +104,7 @@ const UserHistoryDrawerContainer: FunctionComponent<Props> = ({
                 </Icon>
               </Localized>
               <span className={styles.userDetailValue}>
-                {formatter.format(new Date(user.createdAt))}
+                {formatter(user.createdAt)}
               </span>
             </Flex>
             <Flex alignItems="center" spacing={2}>
@@ -153,6 +156,11 @@ const enhanced = withFragmentContainer<Props>({
       }
     }
   `,
+  viewer: graphql`
+    fragment UserHistoryDrawerContainer_viewer on User {
+      ...UserStatusChangeContainer_viewer
+    }
+  `,
 })(UserHistoryDrawerContainer);
 
 export default enhanced;
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.tsx
index 4aafa5c79..a6999d6c6 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.tsx
@@ -32,12 +32,15 @@ const UserHistoryDrawerQuery: FunctionComponent<Props> = ({
           settings {
             ...UserHistoryDrawerContainer_settings
           }
+          viewer {
+            ...UserHistoryDrawerContainer_viewer
+          }
         }
       `}
       variables={{ userID }}
       cacheConfig={{ force: true }}
       render={({ props }: QueryRenderData<QueryTypes>) => {
-        if (!props) {
+        if (!props || !props.viewer) {
           return (
             <div className={styles.root}>
               <Spinner />
@@ -62,6 +65,7 @@ const UserHistoryDrawerQuery: FunctionComponent<Props> = ({
             onClose={onClose}
             user={props.user}
             settings={props.settings}
+            viewer={props.viewer}
           />
         );
       }}
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedComments.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedComments.tsx
index c47c2eda9..8421af8b7 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedComments.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedComments.tsx
@@ -11,6 +11,7 @@ import { Button, CallOut, Divider } from "coral-ui/components/v2";
 
 import { UserHistoryDrawerRejectedComments_settings } from "coral-admin/__generated__/UserHistoryDrawerRejectedComments_settings.graphql";
 import { UserHistoryDrawerRejectedComments_user } from "coral-admin/__generated__/UserHistoryDrawerRejectedComments_user.graphql";
+import { UserHistoryDrawerRejectedComments_viewer } from "coral-admin/__generated__/UserHistoryDrawerRejectedComments_viewer.graphql";
 import { UserHistoryDrawerRejectedCommentsPaginationQueryVariables } from "coral-admin/__generated__/UserHistoryDrawerRejectedCommentsPaginationQuery.graphql";
 
 import styles from "./UserHistoryDrawerRejectedComments.css";
@@ -18,6 +19,7 @@ import styles from "./UserHistoryDrawerRejectedComments.css";
 const danglingLogic = () => false;
 
 interface Props {
+  viewer: UserHistoryDrawerRejectedComments_viewer;
   user: UserHistoryDrawerRejectedComments_user;
   settings: UserHistoryDrawerRejectedComments_settings;
   relay: RelayPaginationProp;
@@ -26,6 +28,7 @@ interface Props {
 const UserHistoryDrawerRejectedComments: FunctionComponent<Props> = ({
   user,
   settings,
+  viewer,
   relay,
 }) => {
   const [loadMore, isLoadingMore] = useLoadMore(relay, 5);
@@ -63,6 +66,7 @@ const UserHistoryDrawerRejectedComments: FunctionComponent<Props> = ({
           <ModerateCardContainer
             comment={c}
             settings={settings}
+            viewer={viewer}
             danglingLogic={danglingLogic}
             hideUsername
             showStoryInfo
@@ -96,6 +100,11 @@ const enhanced = withPaginationContainer<
         ...ModerateCardContainer_settings
       }
     `,
+    viewer: graphql`
+      fragment UserHistoryDrawerRejectedComments_viewer on User {
+        ...ModerateCardContainer_viewer
+      }
+    `,
     user: graphql`
       fragment UserHistoryDrawerRejectedComments_user on User
         @argumentDefinitions(
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedCommentsQuery.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedCommentsQuery.tsx
index 3bcbd7b11..6b7477cb2 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedCommentsQuery.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedCommentsQuery.tsx
@@ -26,12 +26,15 @@ const UserHistoryDrawerRejectedCommentsQuery: FunctionComponent<Props> = ({
           settings {
             ...UserHistoryDrawerRejectedComments_settings
           }
+          viewer {
+            ...UserHistoryDrawerRejectedComments_viewer
+          }
         }
       `}
       variables={{ userID }}
       cacheConfig={{ force: true }}
       render={({ error, props }) => {
-        if (!props) {
+        if (!props || !props.viewer) {
           return (
             <div className={styles.root}>
               <Spinner />
@@ -54,6 +57,7 @@ const UserHistoryDrawerRejectedCommentsQuery: FunctionComponent<Props> = ({
         return (
           <UserHistoryDrawerRejectedComments
             settings={props.settings}
+            viewer={props.viewer}
             user={props.user}
           />
         );
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserStatusDetailsContainer.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserStatusDetailsContainer.tsx
index fd195ed6c..63ca92cb3 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserStatusDetailsContainer.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserStatusDetailsContainer.tsx
@@ -2,7 +2,7 @@ import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useMemo } from "react";
 import { graphql } from "react-relay";
 
-import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { useDateTimeFormatter } from "coral-framework/hooks";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import {
   BaseButton,
@@ -33,9 +33,7 @@ const UserStatusDetailsContainer: FunctionComponent<Props> = ({ user }) => {
     return user.status.suspension.history.find((item) => item.active);
   }, [user]);
 
-  const { locales } = useCoralContext();
-
-  const formatter = new Intl.DateTimeFormat(locales, {
+  const formatter = useDateTimeFormatter({
     day: "2-digit",
     month: "2-digit",
     year: "numeric",
@@ -55,12 +53,12 @@ const UserStatusDetailsContainer: FunctionComponent<Props> = ({ user }) => {
                 <div>
                   <Localized
                     id="userDetails-banned-on"
-                    $timestamp={formatter.format(new Date(activeBan.createdAt))}
+                    $timestamp={formatter(activeBan.createdAt)}
                     strong={<strong />}
                   >
                     <p className={styles.root}>
                       <strong>Banned on </strong>{" "}
-                      {formatter.format(new Date(activeBan.createdAt))}
+                      {formatter(activeBan.createdAt)}
                     </p>
                   </Localized>
                   {activeBan.createdBy && (
@@ -94,25 +92,21 @@ const UserStatusDetailsContainer: FunctionComponent<Props> = ({ user }) => {
                   <Localized
                     id="userDetails-suspension-start"
                     strong={<strong />}
-                    $timestamp={formatter.format(
-                      new Date(activeSuspension.from.start)
-                    )}
+                    $timestamp={formatter(activeSuspension.from.start)}
                   >
                     <p className={styles.root}>
                       <strong>Start: </strong>
-                      {formatter.format(new Date(activeSuspension.from.start))}
+                      {formatter(activeSuspension.from.start)}
                     </p>
                   </Localized>
                   <Localized
                     strong={<strong />}
-                    $timestamp={formatter.format(
-                      new Date(activeSuspension.from.finish)
-                    )}
+                    $timestamp={formatter(activeSuspension.from.finish)}
                     id="userDetails-suspension-finish"
                   >
                     <p className={styles.root}>
                       <strong>End: </strong>
-                      {formatter.format(new Date(activeSuspension.from.finish))}
+                      {formatter(activeSuspension.from.finish)}
                     </p>
                   </Localized>
                 </div>
diff --git a/src/core/client/admin/components/UserRole/SiteModeratorModal.css b/src/core/client/admin/components/UserRole/SiteModeratorModal.css
new file mode 100644
index 000000000..91838626b
--- /dev/null
+++ b/src/core/client/admin/components/UserRole/SiteModeratorModal.css
@@ -0,0 +1,5 @@
+.root {
+  max-width: 500px;
+  padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3)
+    var(--v2-spacing-3);
+}
diff --git a/src/core/client/admin/components/UserRole/SiteModeratorModal.tsx b/src/core/client/admin/components/UserRole/SiteModeratorModal.tsx
new file mode 100644
index 000000000..761bb770e
--- /dev/null
+++ b/src/core/client/admin/components/UserRole/SiteModeratorModal.tsx
@@ -0,0 +1,120 @@
+import { Localized } from "@fluent/react/compat";
+import { FORM_ERROR } from "final-form";
+import React, { FunctionComponent, useCallback } from "react";
+import { Form } from "react-final-form";
+
+import { InvalidRequestError } from "coral-framework/lib/errors";
+import {
+  Button,
+  CallOut,
+  Card,
+  CardCloseButton,
+  Flex,
+  HorizontalGutter,
+  Modal,
+} from "coral-ui/components/v2";
+import { PropTypesOf } from "coral-ui/types";
+
+import ModalBodyText from "../ModalBodyText";
+import ModalHeader from "../ModalHeader";
+import ModalHeaderUsername from "../ModalHeaderUsername";
+import NotAvailable from "../NotAvailable";
+import SiteModeratorModalSiteFieldContainer from "./SiteModeratorModalSiteFieldContainer";
+
+import styles from "./SiteModeratorModal.css";
+
+interface Props {
+  username: string | null;
+  open: boolean;
+  onCancel: () => void;
+  onFinish: (siteIDs: string[]) => Promise<void>;
+  selectedSiteIDs?: string[];
+  query: PropTypesOf<typeof SiteModeratorModalSiteFieldContainer>["query"];
+}
+
+const SiteModeratorModal: FunctionComponent<Props> = ({
+  username,
+  open,
+  onFinish,
+  onCancel,
+  selectedSiteIDs = [],
+  query,
+}) => {
+  const onSubmit = useCallback(
+    async (values: { siteIDs: string[] }) => {
+      try {
+        await onFinish(values.siteIDs);
+        return;
+      } catch (err) {
+        if (err instanceof InvalidRequestError) {
+          return err.invalidArgs;
+        }
+        return { [FORM_ERROR]: err.message };
+      }
+    },
+    [onFinish]
+  );
+
+  return (
+    <Modal open={open} onClose={onCancel}>
+      {({ firstFocusableRef, lastFocusableRef }) => (
+        <Card className={styles.root}>
+          <Flex justifyContent="flex-end">
+            <CardCloseButton onClick={onCancel} ref={firstFocusableRef} />
+          </Flex>
+          <Form
+            onSubmit={onSubmit}
+            initialValues={{ siteIDs: selectedSiteIDs }}
+          >
+            {({ handleSubmit, submitError, submitting }) => (
+              <form onSubmit={handleSubmit}>
+                <HorizontalGutter spacing={3}>
+                  <Localized
+                    id="community-siteModeratorModal-assignSites"
+                    strong={<ModalHeaderUsername />}
+                    $username={username || <NotAvailable />}
+                  >
+                    <ModalHeader>
+                      Assign sites for{" "}
+                      <ModalHeaderUsername>{username}</ModalHeaderUsername>
+                    </ModalHeader>
+                  </Localized>
+                  {submitError && (
+                    <CallOut color="error" fullWidth>
+                      {submitError}
+                    </CallOut>
+                  )}
+                  <Localized id="community-siteModeratorModal-assignSitesDescription">
+                    <ModalBodyText>
+                      Site moderators are permitted to make moderation decisions
+                      and issue suspensions on the sites they are assigned.
+                    </ModalBodyText>
+                  </Localized>
+                  <SiteModeratorModalSiteFieldContainer query={query} />
+                  <Flex justifyContent="flex-end" itemGutter="half">
+                    <Localized id="community-siteModeratorModal-cancel">
+                      <Button variant="flat" onClick={onCancel}>
+                        Cancel
+                      </Button>
+                    </Localized>
+                    <Localized id="community-siteModeratorModal-assign">
+                      <Button
+                        type="submit"
+                        disabled={submitting}
+                        ref={lastFocusableRef}
+                      >
+                        Assign
+                      </Button>
+                    </Localized>
+                  </Flex>
+                </HorizontalGutter>
+              </form>
+            )}
+          </Form>
+        </Card>
+      )}
+    </Modal>
+  );
+};
+
+export default SiteModeratorModal;
diff --git a/src/core/client/admin/components/UserRole/SiteModeratorModalSiteField.css b/src/core/client/admin/components/UserRole/SiteModeratorModalSiteField.css
new file mode 100644
index 000000000..b793b2d9e
--- /dev/null
+++ b/src/core/client/admin/components/UserRole/SiteModeratorModalSiteField.css
@@ -0,0 +1,3 @@
+.listGroup {
+  max-height: 250px;
+}
diff --git a/src/core/client/admin/components/UserRole/SiteModeratorModalSiteField.tsx b/src/core/client/admin/components/UserRole/SiteModeratorModalSiteField.tsx
new file mode 100644
index 000000000..44b286267
--- /dev/null
+++ b/src/core/client/admin/components/UserRole/SiteModeratorModalSiteField.tsx
@@ -0,0 +1,93 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent, useCallback } from "react";
+import { useField } from "react-final-form";
+
+import AutoLoadMore from "coral-admin/components/AutoLoadMore";
+import {
+  CheckBox,
+  FieldSet,
+  Flex,
+  FormField,
+  Label,
+  ListGroup,
+  ListGroupRow,
+  Spinner,
+} from "coral-ui/components/v2";
+
+import styles from "./SiteModeratorModalSiteField.css";
+
+interface Props {
+  sites: Array<{ id: string; name: string }>;
+  onLoadMore: () => void;
+  hasMore: boolean;
+  disableLoadMore: boolean;
+  loading: boolean;
+}
+
+const SiteModeratorModalSiteField: FunctionComponent<Props> = ({
+  sites,
+  onLoadMore,
+  hasMore,
+  disableLoadMore,
+  loading,
+}) => {
+  const { input } = useField<string[]>("siteIDs");
+  const onChange = useCallback(
+    (siteID: string, selectedIndex: number) => () => {
+      const changed = [...input.value];
+      if (selectedIndex >= 0) {
+        changed.splice(selectedIndex, 1);
+      } else {
+        changed.push(siteID);
+      }
+
+      input.onChange(changed);
+    },
+    [input]
+  );
+
+  return (
+    <FieldSet>
+      <FormField>
+        <Localized id="community-siteModeratorModal-selectSites">
+          <Label>Select sites to moderate</Label>
+        </Localized>
+        <ListGroup className={styles.listGroup}>
+          {sites.map((site) => {
+            const selectedIndex = input.value.indexOf(site.id);
+            return (
+              <ListGroupRow key={site.id}>
+                <CheckBox
+                  checked={selectedIndex >= 0}
+                  onChange={onChange(site.id, selectedIndex)}
+                >
+                  {site.name}
+                </CheckBox>
+              </ListGroupRow>
+            );
+          })}
+          {!loading && sites.length === 0 && (
+            <Localized id="community-siteModeratorModal-noSites">
+              <span>No sites</span>
+            </Localized>
+          )}
+          {loading && (
+            <Flex justifyContent="center">
+              <Spinner />
+            </Flex>
+          )}
+          {hasMore && (
+            <Flex justifyContent="center">
+              <AutoLoadMore
+                disableLoadMore={disableLoadMore}
+                onLoadMore={onLoadMore}
+              />
+            </Flex>
+          )}
+        </ListGroup>
+      </FormField>
+    </FieldSet>
+  );
+};
+
+export default SiteModeratorModalSiteField;
diff --git a/src/core/client/admin/components/UserRole/SiteModeratorModalSiteFieldContainer.tsx b/src/core/client/admin/components/UserRole/SiteModeratorModalSiteFieldContainer.tsx
new file mode 100644
index 000000000..3e4e06964
--- /dev/null
+++ b/src/core/client/admin/components/UserRole/SiteModeratorModalSiteFieldContainer.tsx
@@ -0,0 +1,105 @@
+import React, { FunctionComponent, useMemo } from "react";
+import { graphql, RelayPaginationProp } from "react-relay";
+
+import { IntersectionProvider } from "coral-framework/lib/intersection";
+import {
+  useLoadMore,
+  useRefetch,
+  withPaginationContainer,
+} from "coral-framework/lib/relay";
+
+import { SiteModeratorModalSiteFieldContainer_query } from "coral-admin/__generated__/SiteModeratorModalSiteFieldContainer_query.graphql";
+import { SiteModeratorModalSiteFieldContainerPaginationQueryVariables } from "coral-admin/__generated__/SiteModeratorModalSiteFieldContainerPaginationQuery.graphql";
+
+import SiteModeratorModalSiteField from "./SiteModeratorModalSiteField";
+
+interface Props {
+  query: SiteModeratorModalSiteFieldContainer_query;
+  relay: RelayPaginationProp;
+}
+
+const SiteModeratorModalSiteFieldContainer: FunctionComponent<Props> = ({
+  query,
+  relay,
+}) => {
+  const sites = useMemo(
+    () => query?.sites.edges.map((edge) => edge.node) || [],
+    [query?.sites.edges]
+  );
+  const [loadMore, isLoadingMore] = useLoadMore(relay, 1);
+  const [, isRefetching] = useRefetch<
+    SiteModeratorModalSiteFieldContainerPaginationQueryVariables
+  >(relay);
+
+  return (
+    <IntersectionProvider>
+      <SiteModeratorModalSiteField
+        loading={!query || isRefetching}
+        sites={sites}
+        onLoadMore={loadMore}
+        hasMore={!isRefetching && relay.hasMore()}
+        disableLoadMore={isLoadingMore}
+      />
+    </IntersectionProvider>
+  );
+};
+
+type FragmentVariables = SiteModeratorModalSiteFieldContainerPaginationQueryVariables;
+
+const enhanced = withPaginationContainer<
+  Props,
+  SiteModeratorModalSiteFieldContainerPaginationQueryVariables,
+  FragmentVariables
+>(
+  {
+    query: graphql`
+      fragment SiteModeratorModalSiteFieldContainer_query on Query
+        @argumentDefinitions(
+          count: { type: "Int!", defaultValue: 20 }
+          cursor: { type: "Cursor" }
+        ) {
+        sites(first: $count, after: $cursor)
+          @connection(key: "SiteModeratorModalSiteField_sites") {
+          edges {
+            node {
+              id
+              name
+            }
+          }
+        }
+      }
+    `,
+  },
+  {
+    direction: "forward",
+    getConnectionFromProps(props) {
+      return props.query && props.query.sites;
+    },
+    // This is also the default implementation of `getFragmentVariables` if it isn't provided.
+    getFragmentVariables(prevVars, totalCount) {
+      return {
+        ...prevVars,
+        count: totalCount,
+      };
+    },
+    getVariables(props, { count, cursor }, fragmentVariables) {
+      return {
+        count,
+        cursor,
+      };
+    },
+    query: graphql`
+      # Pagination query to be fetched upon calling 'loadMore'.
+      # Notice that we re-use our fragment, and the shape of this query matches our fragment spec.
+      query SiteModeratorModalSiteFieldContainerPaginationQuery(
+        $count: Int!
+        $cursor: Cursor
+      ) {
+        ...SiteModeratorModalSiteFieldContainer_query
+          @arguments(count: $count, cursor: $cursor)
+      }
+    `,
+  }
+)(SiteModeratorModalSiteFieldContainer);
+
+export default enhanced;
diff --git a/src/core/client/admin/components/UserRole/UpdateUserModerationScopesMutation.ts b/src/core/client/admin/components/UserRole/UpdateUserModerationScopesMutation.ts
new file mode 100644
index 000000000..1cb046243
--- /dev/null
+++ b/src/core/client/admin/components/UserRole/UpdateUserModerationScopesMutation.ts
@@ -0,0 +1,47 @@
+import { graphql } from "react-relay";
+import { Environment } from "relay-runtime";
+
+import {
+  commitMutationPromiseNormalized,
+  createMutation,
+  MutationInput,
+} from "coral-framework/lib/relay";
+
+import { UpdateUserModerationScopesMutation as MutationTypes } from "coral-admin/__generated__/UpdateUserModerationScopesMutation.graphql";
+
+let clientMutationId = 0;
+
+const UpdateUserModerationScopesMutation = createMutation(
+  "updateUserModerationScopes",
+  (environment: Environment, input: MutationInput<MutationTypes>) =>
+    commitMutationPromiseNormalized<MutationTypes>(environment, {
+      mutation: graphql`
+        mutation UpdateUserModerationScopesMutation(
+          $input: UpdateUserModerationScopesInput!
+        ) {
+          updateUserModerationScopes(input: $input) {
+            user {
+              id
+              role
+              moderationScopes {
+                scoped
+                sites {
+                  id
+                  name
+                }
+              }
+            }
+            clientMutationId
+          }
+        }
+      `,
+      variables: {
+        input: {
+          ...input,
+          clientMutationId: (clientMutationId++).toString(),
+        },
+      },
+    })
+);
+
+export default UpdateUserModerationScopesMutation;
diff --git a/src/core/client/admin/components/UserRole/UserRoleChange.tsx b/src/core/client/admin/components/UserRole/UserRoleChange.tsx
index 676e61f63..c8b871c3e 100644
--- a/src/core/client/admin/components/UserRole/UserRoleChange.tsx
+++ b/src/core/client/admin/components/UserRole/UserRoleChange.tsx
@@ -1,82 +1,192 @@
 import { Localized } from "@fluent/react/compat";
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, useCallback, useMemo } from "react";
 
-import TranslatedRole from "coral-admin/components/TranslatedRole";
+import { useToggleState } from "coral-framework/hooks";
 import { GQLUSER_ROLE, GQLUSER_ROLE_RL } from "coral-framework/schema";
 import {
   Button,
   ButtonIcon,
   ClickOutside,
   Dropdown,
-  DropdownButton,
   Popover,
 } from "coral-ui/components/v2";
+import { PropTypesOf } from "coral-ui/types";
 
+import { UserRoleChangeContainer_user } from "coral-admin/__generated__/UserRoleChangeContainer_user.graphql";
+
+import SiteModeratorModal from "./SiteModeratorModal";
+import UserRoleChangeButton from "./UserRoleChangeButton";
 import UserRoleText from "./UserRoleText";
 
 import styles from "./UserRoleChange.css";
 
 interface Props {
-  onChangeRole: (role: GQLUSER_ROLE_RL) => void;
+  username: string | null;
+  onChangeRole: (role: GQLUSER_ROLE_RL) => Promise<void>;
+  onChangeModerationScopes: (siteIDs: string[]) => Promise<void>;
   role: GQLUSER_ROLE_RL;
+  scoped?: boolean;
+  moderationScopes: UserRoleChangeContainer_user["moderationScopes"];
+  moderationScopesEnabled?: boolean;
+  query: PropTypesOf<typeof SiteModeratorModal>["query"];
 }
 
-const UserRoleChange: FunctionComponent<Props> = (props) => (
-  <Localized id="community-role-popover" attrs={{ description: true }}>
-    <Popover
-      id="community-roleChange"
-      placement="bottom-start"
-      description="A dropdown to change the user role"
-      body={({ toggleVisibility }) => (
-        <ClickOutside onClickOutside={toggleVisibility}>
-          <Dropdown>
-            {Object.keys(GQLUSER_ROLE).map((r: GQLUSER_ROLE_RL) => (
-              <TranslatedRole
-                key={r}
-                container={
-                  <DropdownButton
+const UserRoleChange: FunctionComponent<Props> = ({
+  username,
+  role,
+  scoped,
+  onChangeRole,
+  onChangeModerationScopes,
+  moderationScopes,
+  moderationScopesEnabled = false,
+  query,
+}) => {
+  // Setup state and callbacks for the popover.
+  const [
+    isPopoverVisible,
+    setPopoverVisibility,
+    togglePopoverVisibility,
+  ] = useToggleState();
+
+  /**
+   * handleChangeRole combines the change role function with the change
+   * moderation scopes.
+   */
+  const handleChangeRole = useCallback(
+    async (r: GQLUSER_ROLE_RL, siteIDs: string[] = []) => {
+      await onChangeRole(r);
+
+      if (moderationScopesEnabled) {
+        await onChangeModerationScopes(siteIDs);
+      }
+    },
+    [onChangeRole, onChangeModerationScopes, moderationScopesEnabled]
+  );
+  const onClick = useCallback(
+    (r: GQLUSER_ROLE_RL, siteIDs: string[] = []) => async () => {
+      await handleChangeRole(r, siteIDs);
+      togglePopoverVisibility();
+    },
+    [handleChangeRole, togglePopoverVisibility]
+  );
+
+  // Setup state and callbacks for the site moderator modal.
+  const [
+    isModalVisible,
+    setModalVisibility,
+    toggleModalVisibility,
+  ] = useToggleState();
+  const onFinishModal = useCallback(
+    async (siteIDs: string[]) => {
+      // Set the user as a moderator and then update the siteIDs.
+      await handleChangeRole(GQLUSER_ROLE.MODERATOR, siteIDs);
+
+      // Close the modal.
+      setModalVisibility(false);
+    },
+    [setModalVisibility, handleChangeRole]
+  );
+
+  const selectedSiteIDs = useMemo(
+    () => moderationScopes?.sites?.map((site) => site.id),
+    [moderationScopes]
+  );
+
+  return (
+    <>
+      {moderationScopesEnabled && (
+        <SiteModeratorModal
+          username={username}
+          open={isModalVisible}
+          query={query}
+          selectedSiteIDs={selectedSiteIDs}
+          onCancel={toggleModalVisibility}
+          onFinish={onFinishModal}
+        />
+      )}
+      <Localized id="community-role-popover" attrs={{ description: true }}>
+        <Popover
+          id="community-roleChange"
+          placement="bottom-start"
+          description="A dropdown to change the user role"
+          visible={isPopoverVisible}
+          body={
+            <ClickOutside onClickOutside={togglePopoverVisibility}>
+              <Dropdown>
+                <UserRoleChangeButton
+                  active={role === GQLUSER_ROLE.COMMENTER}
+                  role={GQLUSER_ROLE.COMMENTER}
+                  moderationScopesEnabled={moderationScopesEnabled}
+                  onClick={onClick(GQLUSER_ROLE.COMMENTER)}
+                />
+                <UserRoleChangeButton
+                  active={role === GQLUSER_ROLE.STAFF}
+                  role={GQLUSER_ROLE.STAFF}
+                  moderationScopesEnabled={moderationScopesEnabled}
+                  onClick={onClick(GQLUSER_ROLE.STAFF)}
+                />
+                {moderationScopesEnabled && (
+                  <UserRoleChangeButton
+                    active={scoped && role === GQLUSER_ROLE.MODERATOR}
+                    role={GQLUSER_ROLE.MODERATOR}
+                    scoped
+                    moderationScopesEnabled
                     onClick={() => {
-                      props.onChangeRole(r);
-                      toggleVisibility();
+                      setModalVisibility(true);
+                      setPopoverVisibility(false);
                     }}
-                  >
-                    dummy
-                  </DropdownButton>
-                }
-              >
-                {r}
-              </TranslatedRole>
-            ))}
-          </Dropdown>
-        </ClickOutside>
-      )}
-    >
-      {({ toggleVisibility, ref, visible }) => (
-        <Localized
-          id="community-changeRoleButton"
-          attrs={{ "aria-label": true }}
+                  />
+                )}
+                <UserRoleChangeButton
+                  active={
+                    (!moderationScopesEnabled ||
+                      (moderationScopesEnabled && !scoped)) &&
+                    role === GQLUSER_ROLE.MODERATOR
+                  }
+                  role={GQLUSER_ROLE.MODERATOR}
+                  moderationScopesEnabled={moderationScopesEnabled}
+                  onClick={onClick(GQLUSER_ROLE.MODERATOR)}
+                />
+                <UserRoleChangeButton
+                  active={role === GQLUSER_ROLE.ADMIN}
+                  role={GQLUSER_ROLE.ADMIN}
+                  moderationScopesEnabled={moderationScopesEnabled}
+                  onClick={onClick(GQLUSER_ROLE.ADMIN)}
+                />
+              </Dropdown>
+            </ClickOutside>
+          }
         >
-          <Button
-            aria-label="Change role"
-            className={styles.button}
-            onClick={toggleVisibility}
-            uppercase={false}
-            size="large"
-            color="mono"
-            ref={ref}
-            variant="text"
-          >
-            <UserRoleText>{props.role}</UserRoleText>
-            {
-              <ButtonIcon size="lg">
-                {visible ? "arrow_drop_up" : "arrow_drop_down"}
-              </ButtonIcon>
-            }
-          </Button>
-        </Localized>
-      )}
-    </Popover>
-  </Localized>
-);
+          {({ ref }) => (
+            <Localized
+              id="community-changeRoleButton"
+              attrs={{ "aria-label": true }}
+            >
+              <Button
+                aria-label="Change role"
+                className={styles.button}
+                onClick={togglePopoverVisibility}
+                uppercase={false}
+                size="large"
+                color="mono"
+                ref={ref}
+                variant="text"
+              >
+                <UserRoleText
+                  moderationScopesEnabled={moderationScopesEnabled}
+                  scoped={scoped}
+                  role={role}
+                />
+                <ButtonIcon size="lg">
+                  {isPopoverVisible ? "arrow_drop_up" : "arrow_drop_down"}
+                </ButtonIcon>
+              </Button>
+            </Localized>
+          )}
+        </Popover>
+      </Localized>
+    </>
+  );
+};
 
 export default UserRoleChange;
diff --git a/src/core/client/admin/components/UserRole/UserRoleChangeButton.css b/src/core/client/admin/components/UserRole/UserRoleChangeButton.css
new file mode 100644
index 000000000..e45df6ea3
--- /dev/null
+++ b/src/core/client/admin/components/UserRole/UserRoleChangeButton.css
@@ -0,0 +1,3 @@
+.active {
+  font-weight: bold;
+}
diff --git a/src/core/client/admin/components/UserRole/UserRoleChangeButton.tsx b/src/core/client/admin/components/UserRole/UserRoleChangeButton.tsx
new file mode 100644
index 000000000..39bcb6291
--- /dev/null
+++ b/src/core/client/admin/components/UserRole/UserRoleChangeButton.tsx
@@ -0,0 +1,38 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import TranslatedRole from "coral-admin/components/TranslatedRole";
+import { PropTypesOf } from "coral-framework/types";
+import { ButtonIcon, DropdownButton } from "coral-ui/components/v2";
+
+import styles from "./UserRoleChangeButton.css";
+
+interface Props extends Omit<PropTypesOf<typeof TranslatedRole>, "container"> {
+  active?: boolean;
+  onClick: () => void;
+}
+
+const UserRoleChangeButton: FunctionComponent<Props> = ({
+  active,
+  onClick,
+  ...props
+}) => {
+  return (
+    <TranslatedRole
+      container={
+        <DropdownButton
+          className={cn(active && styles.active)}
+          onClick={onClick}
+          adornment={
+            props.scoped && active && <ButtonIcon>settings</ButtonIcon>
+          }
+        >
+          dummy
+        </DropdownButton>
+      }
+      {...props}
+    />
+  );
+};
+
+export default UserRoleChangeButton;
diff --git a/src/core/client/admin/components/UserRole/UserRoleChangeContainer.tsx b/src/core/client/admin/components/UserRole/UserRoleChangeContainer.tsx
index a50267b4c..0ff9bdada 100644
--- a/src/core/client/admin/components/UserRole/UserRoleChangeContainer.tsx
+++ b/src/core/client/admin/components/UserRole/UserRoleChangeContainer.tsx
@@ -1,14 +1,17 @@
-import React, { FunctionComponent, useCallback } from "react";
+import React, { FunctionComponent, useCallback, useMemo } from "react";
 import { graphql } from "react-relay";
 
 import { Ability, can } from "coral-admin/permissions";
 import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
-import { GQLUSER_ROLE_RL } from "coral-framework/schema";
+import { GQLFEATURE_FLAG, GQLUSER_ROLE_RL } from "coral-framework/schema";
 
+import { UserRoleChangeContainer_query } from "coral-admin/__generated__/UserRoleChangeContainer_query.graphql";
+import { UserRoleChangeContainer_settings } from "coral-admin/__generated__/UserRoleChangeContainer_settings.graphql";
 import { UserRoleChangeContainer_user } from "coral-admin/__generated__/UserRoleChangeContainer_user.graphql";
 import { UserRoleChangeContainer_viewer } from "coral-admin/__generated__/UserRoleChangeContainer_viewer.graphql";
 
 import ButtonPadding from "../ButtonPadding";
+import UpdateUserModerationScopesMutation from "./UpdateUserModerationScopesMutation";
 import UpdateUserRoleMutation from "./UpdateUserRoleMutation";
 import UserRoleChange from "./UserRoleChange";
 import UserRoleText from "./UserRoleText";
@@ -16,35 +19,75 @@ import UserRoleText from "./UserRoleText";
 interface Props {
   viewer: UserRoleChangeContainer_viewer;
   user: UserRoleChangeContainer_user;
+  settings: UserRoleChangeContainer_settings;
+  query: UserRoleChangeContainer_query;
 }
 
-const UserRoleChangeContainer: FunctionComponent<Props> = (props) => {
+const UserRoleChangeContainer: FunctionComponent<Props> = ({
+  user,
+  viewer,
+  settings,
+  query,
+}) => {
   const updateUserRole = useMutation(UpdateUserRoleMutation);
+  const updateUserModerationScopes = useMutation(
+    UpdateUserModerationScopesMutation
+  );
   const handleOnChangeRole = useCallback(
-    (role: GQLUSER_ROLE_RL) => {
-      if (role === props.user.role) {
+    async (role: GQLUSER_ROLE_RL) => {
+      if (role === user.role) {
+        // No role change is needed! User already has the selected role.
         return;
       }
-      void updateUserRole({ userID: props.user.id, role });
+
+      await updateUserRole({ userID: user.id, role });
     },
-    [props.user.id, props.user.role, updateUserRole]
+    [user, updateUserRole]
+  );
+  const handleOnChangeModerationScopes = useCallback(
+    async (siteIDs: string[]) => {
+      await updateUserModerationScopes({
+        userID: user.id,
+        moderationScopes: { siteIDs },
+      });
+    },
+    [user]
+  );
+  const canChangeRole = useMemo(
+    () => viewer.id !== user.id && can(viewer, Ability.CHANGE_ROLE),
+    [viewer, user]
   );
 
-  const canChangeRole =
-    props.viewer.id !== props.user.id && can(props.viewer, Ability.CHANGE_ROLE);
+  const moderationScopesEnabled = useMemo(
+    () =>
+      settings.featureFlags.includes(GQLFEATURE_FLAG.SITE_MODERATOR) &&
+      settings.multisite,
+    [settings]
+  );
 
-  if (canChangeRole) {
+  if (!canChangeRole) {
     return (
-      <UserRoleChange
-        onChangeRole={handleOnChangeRole}
-        role={props.user.role}
-      />
+      <ButtonPadding>
+        <UserRoleText
+          moderationScopesEnabled={moderationScopesEnabled}
+          scoped={user.moderationScopes?.scoped}
+          role={user.role}
+        />
+      </ButtonPadding>
     );
   }
+
   return (
-    <ButtonPadding>
-      <UserRoleText>{props.user.role}</UserRoleText>
-    </ButtonPadding>
+    <UserRoleChange
+      username={user.username}
+      onChangeRole={handleOnChangeRole}
+      onChangeModerationScopes={handleOnChangeModerationScopes}
+      role={user.role}
+      scoped={user.moderationScopes?.scoped}
+      moderationScopes={user.moderationScopes}
+      moderationScopesEnabled={moderationScopesEnabled}
+      query={query}
+    />
   );
 };
 
@@ -58,7 +101,26 @@ const enhanced = withFragmentContainer<Props>({
   user: graphql`
     fragment UserRoleChangeContainer_user on User {
       id
+      username
       role
+      moderationScopes {
+        scoped
+        sites {
+          id
+          name
+        }
+      }
+    }
+  `,
+  settings: graphql`
+    fragment UserRoleChangeContainer_settings on Settings {
+      multisite
+      featureFlags
+    }
+  `,
+  query: graphql`
+    fragment UserRoleChangeContainer_query on Query {
+      ...SiteModeratorModalSiteFieldContainer_query
     }
   `,
 })(UserRoleChangeContainer);
diff --git a/src/core/client/admin/components/UserRole/UserRoleText.tsx b/src/core/client/admin/components/UserRole/UserRoleText.tsx
index 9208bfa82..0f06eedcc 100644
--- a/src/core/client/admin/components/UserRole/UserRoleText.tsx
+++ b/src/core/client/admin/components/UserRole/UserRoleText.tsx
@@ -7,9 +7,7 @@ import { PropTypesOf } from "coral-ui/types";
 
 import styles from "./UserRoleText.css";
 
-interface Props {
-  children: PropTypesOf<typeof TranslatedRole>["children"];
-}
+type Props = Omit<PropTypesOf<typeof TranslatedRole>, "container">;
 
 const UserRoleText: FunctionComponent<Props> = (props) => (
   <TranslatedRole
@@ -20,9 +18,8 @@ const UserRoleText: FunctionComponent<Props> = (props) => (
         })}
       />
     }
-  >
-    {props.children}
-  </TranslatedRole>
+    {...props}
+  />
 );
 
 export default UserRoleText;
diff --git a/src/core/client/admin/components/UserStatus/BanModal.tsx b/src/core/client/admin/components/UserStatus/BanModal.tsx
index c3905fbad..e130a69e5 100644
--- a/src/core/client/admin/components/UserStatus/BanModal.tsx
+++ b/src/core/client/admin/components/UserStatus/BanModal.tsx
@@ -12,9 +12,9 @@ import {
   Textarea,
 } from "coral-ui/components/v2";
 
+import ModalHeader from "../ModalHeader";
+import ModalHeaderUsername from "../ModalHeaderUsername";
 import ChangeStatusModal from "./ChangeStatusModal";
-import ChangeStatusModalHeader from "./ChangeStatusModalHeader";
-import ModalHeaderUsername from "./ModalHeaderUsername";
 
 import styles from "./BanModal.css";
 
@@ -66,13 +66,13 @@ const BanModal: FunctionComponent<Props> = ({
                 <strong>{username || <NotAvailable />}</strong>
               ))}
             >
-              <ChangeStatusModalHeader id="banModal-title">
+              <ModalHeader id="banModal-title">
                 Are you sure you want to ban{" "}
                 <ModalHeaderUsername>
                   {username || <NotAvailable />}
                 </ModalHeaderUsername>
                 ?
-              </ChangeStatusModalHeader>
+              </ModalHeader>
             </Localized>
             <Localized id="community-banModal-consequence">
               <p className={styles.bodyText}>
diff --git a/src/core/client/admin/components/UserStatus/ChangeStatusModalHeader.tsx b/src/core/client/admin/components/UserStatus/ChangeStatusModalHeader.tsx
deleted file mode 100644
index e94b65aa1..000000000
--- a/src/core/client/admin/components/UserStatus/ChangeStatusModalHeader.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { FunctionComponent, HTMLAttributes } from "react";
-
-import styles from "./ChangeStatusModalHeader.css";
-
-const ChangeStatusModalHeader: FunctionComponent<HTMLAttributes<
-  HTMLHeadingElement
->> = ({ children, ...rest }) => {
-  return (
-    <h2 {...rest} className={styles.root}>
-      {children}
-    </h2>
-  );
-};
-
-export default ChangeStatusModalHeader;
diff --git a/src/core/client/admin/components/UserStatus/PremodModal.tsx b/src/core/client/admin/components/UserStatus/PremodModal.tsx
index b9f6272f9..0ba9938cd 100644
--- a/src/core/client/admin/components/UserStatus/PremodModal.tsx
+++ b/src/core/client/admin/components/UserStatus/PremodModal.tsx
@@ -4,11 +4,10 @@ import React, { FunctionComponent } from "react";
 import NotAvailable from "coral-admin/components/NotAvailable";
 import { Button, Flex, HorizontalGutter } from "coral-ui/components/v2";
 
+import ModalBodyText from "../ModalBodyText";
+import ModalHeader from "../ModalHeader";
+import ModalHeaderUsername from "../ModalHeaderUsername";
 import ChangeStatusModal from "./ChangeStatusModal";
-import ChangeStatusModalHeader from "./ChangeStatusModalHeader";
-import ModalHeaderUsername from "./ModalHeaderUsername";
-
-import styles from "./PremodModal.css";
 
 interface Props {
   username: string | null;
@@ -36,19 +35,19 @@ const PremodModal: FunctionComponent<Props> = ({
             strong={<ModalHeaderUsername />}
             $username={username || <NotAvailable />}
           >
-            <ChangeStatusModalHeader id="PremodModal-title">
+            <ModalHeader id="PremodModal-title">
               Are you sure you want to always premoderate{" "}
               <ModalHeaderUsername>
                 {username || <NotAvailable />}
               </ModalHeaderUsername>
               ?
-            </ChangeStatusModalHeader>
+            </ModalHeader>
           </Localized>
           <Localized id="community-premodModal-consequence">
-            <div className={styles.bodyText}>
+            <ModalBodyText>
               Note: Always premoderating this user will place all of their
               comments in the Pre-Moderate queue.
-            </div>
+            </ModalBodyText>
           </Localized>
           <Flex justifyContent="flex-end" itemGutter>
             <Localized id="community-premodModal-cancel">
diff --git a/src/core/client/admin/components/UserStatus/SuspendForm.css b/src/core/client/admin/components/UserStatus/SuspendForm.css
index 296f41a4a..95549ad7e 100644
--- a/src/core/client/admin/components/UserStatus/SuspendForm.css
+++ b/src/core/client/admin/components/UserStatus/SuspendForm.css
@@ -1,12 +1,18 @@
-.textArea {
-  height: calc(12 * var(--mini-unit));
+.radioButton {
+  margin: 0 var(--spacing-1) 0 0 !important;
 }
 
-.subTitle {
-  font-size: var(--v2-font-size-4);
-  font-family: var(--v2-font-family-primary);
-  font-weight: var(--v2-font-weight-primary-semi-bold);
-  line-height: var(--v2-line-height-title);
-  color: $suspend-modal-text;
-  margin: 0;
+.textArea {
+  width: 100%;
+  box-sizing: border-box;
+  height: calc(12 * var(--mini-unit));
+  padding: calc(0.5 * var(--mini-unit));
+}
+
+.header {
+  margin: 0 0 var(--spacing-3) 0 !important;
+}
+
+.footer {
+  margin-top: var(--spacing-3);
 }
diff --git a/src/core/client/admin/components/UserStatus/SuspendForm.tsx b/src/core/client/admin/components/UserStatus/SuspendForm.tsx
index cbb39fca1..8f2d4c355 100644
--- a/src/core/client/admin/components/UserStatus/SuspendForm.tsx
+++ b/src/core/client/admin/components/UserStatus/SuspendForm.tsx
@@ -10,11 +10,12 @@ import {
   CheckBox,
   Flex,
   HorizontalGutter,
+  Label,
   RadioButton,
   Textarea,
 } from "coral-ui/components/v2";
 
-import styles from "./SuspendModal.css";
+import styles from "./SuspendForm.css";
 
 interface Props {
   username: string | null;
@@ -120,7 +121,7 @@ const SuspendForm: FunctionComponent<Props> = ({
             <HorizontalGutter spacing={3}>
               <HorizontalGutter spacing={1}>
                 <Localized id="community-suspendModal-selectDuration">
-                  <p className={styles.subTitle}>Select suspension length</p>
+                  <Label>Select suspension length</Label>
                 </Localized>
 
                 <div>
diff --git a/src/core/client/admin/components/UserStatus/SuspendModal.css b/src/core/client/admin/components/UserStatus/SuspendModal.css
deleted file mode 100644
index 350b1036c..000000000
--- a/src/core/client/admin/components/UserStatus/SuspendModal.css
+++ /dev/null
@@ -1,37 +0,0 @@
-$suspend-modal-text: var(--v2-colors-mono-500);
-
-.bodyText {
-  font-size: var(--v2-font-size-3);
-  font-family: var(--v2-font-family-primary);
-  font-weight: var(--v2-font-weight-primary-regular);
-  line-height: var(--v2-line-height-body-short);
-  color: $suspend-modal-text;
-}
-
-.subTitle {
-  font-size: var(--v2-font-size-4);
-  font-family: var(--v2-font-family-primary);
-  font-weight: var(--v2-font-weight-primary-semi-bold);
-  line-height: var(--v2-line-height-title);
-  color: $suspend-modal-text;
-  margin: 0;
-}
-
-.radioButton {
-  margin: 0 var(--spacing-1) 0 0 !important;
-}
-
-.textArea {
-  width: 100%;
-  box-sizing: border-box;
-  height: calc(12 * var(--mini-unit));
-  padding: calc(0.5 * var(--mini-unit));
-}
-
-.header {
-  margin: 0 0 var(--spacing-3) 0 !important;
-}
-
-.footer {
-  margin-top: var(--spacing-3);
-}
diff --git a/src/core/client/admin/components/UserStatus/SuspendModal.tsx b/src/core/client/admin/components/UserStatus/SuspendModal.tsx
index 06a52b656..681c4cfb3 100644
--- a/src/core/client/admin/components/UserStatus/SuspendModal.tsx
+++ b/src/core/client/admin/components/UserStatus/SuspendModal.tsx
@@ -6,14 +6,12 @@ import { ScaledUnit } from "coral-common/helpers/i18n";
 import { GetMessage, withGetMessage } from "coral-framework/lib/i18n";
 import { Button, Flex, HorizontalGutter } from "coral-ui/components/v2";
 
+import ModalBodyText from "../ModalBodyText";
+import ModalHeader from "../ModalHeader";
+import ModalHeaderUsername from "../ModalHeaderUsername";
 import ChangeStatusModal from "./ChangeStatusModal";
-import ChangeStatusModalHeader from "./ChangeStatusModalHeader";
-import ModalHeaderUsername from "./ModalHeaderUsername";
-
 import SuspendForm from "./SuspendForm";
 
-import styles from "./SuspendModal.css";
-
 interface Props {
   username: string | null;
   getMessage: GetMessage;
@@ -63,10 +61,10 @@ const SuspendModal: FunctionComponent<Props> = ({
                 strong={<ModalHeaderUsername />}
                 $duration={successDuration}
               >
-                <ChangeStatusModalHeader>
+                <ModalHeader>
                   <ModalHeaderUsername>{username}</ModalHeaderUsername> has been
                   suspended for <strong>{successDuration}</strong>
-                </ChangeStatusModalHeader>
+                </ModalHeader>
               </Localized>
 
               <Flex justifyContent="flex-end" itemGutter="half">
@@ -85,19 +83,19 @@ const SuspendModal: FunctionComponent<Props> = ({
                 strong={<ModalHeaderUsername />}
                 $username={username || <NotAvailable />}
               >
-                <ChangeStatusModalHeader id="suspendModal-title">
+                <ModalHeader id="suspendModal-title">
                   Suspend{" "}
                   <ModalHeaderUsername>
                     {username || <NotAvailable />}
                   </ModalHeaderUsername>
                   ?
-                </ChangeStatusModalHeader>
+                </ModalHeader>
               </Localized>
               <Localized id="community-suspendModal-consequence">
-                <div className={styles.bodyText}>
+                <ModalBodyText>
                   While suspended, this user will no longer be able to comment,
                   use reactions, or report comments.
-                </div>
+                </ModalBodyText>
               </Localized>
 
               <SuspendForm
diff --git a/src/core/client/admin/components/UserStatus/UserStatusChange.tsx b/src/core/client/admin/components/UserStatus/UserStatusChange.tsx
index e313d6966..52f452485 100644
--- a/src/core/client/admin/components/UserStatus/UserStatusChange.tsx
+++ b/src/core/client/admin/components/UserStatus/UserStatusChange.tsx
@@ -14,8 +14,20 @@ import {
 import styles from "./UserStatusChange.css";
 
 interface Props {
-  onBan: () => void;
-  onRemoveBan: () => void;
+  /**
+   * onBan when set to false disables the controls associated with banning a
+   * user. Otherwise the provided function is called when the control is
+   * clicked.
+   */
+  onBan: false | (() => void);
+
+  /**
+   * onRemoveBan when set to false disables the controls associated with
+   * banning a user. Otherwise the provided function is called when the control
+   * is clicked.
+   */
+  onRemoveBan: false | (() => void);
+
   onSuspend: () => void;
   onRemoveSuspension: () => void;
   onPremod: () => void;
@@ -54,9 +66,12 @@ const UserStatusChange: FunctionComponent<Props> = ({
               <Localized id="community-userStatus-removeUserBan">
                 <DropdownButton
                   className={styles.dropdownButton}
+                  disabled={!onRemoveBan}
                   onClick={() => {
-                    onRemoveBan();
-                    toggleVisibility();
+                    if (onRemoveBan) {
+                      onRemoveBan();
+                      toggleVisibility();
+                    }
                   }}
                 >
                   Remove ban
@@ -66,9 +81,12 @@ const UserStatusChange: FunctionComponent<Props> = ({
               <Localized id="community-userStatus-ban">
                 <DropdownButton
                   className={styles.dropdownButton}
+                  disabled={!onBan}
                   onClick={() => {
-                    onBan();
-                    toggleVisibility();
+                    if (onBan) {
+                      onBan();
+                      toggleVisibility();
+                    }
                   }}
                 >
                   Ban
diff --git a/src/core/client/admin/components/UserStatus/UserStatusChangeContainer.tsx b/src/core/client/admin/components/UserStatus/UserStatusChangeContainer.tsx
index 1997b5ce0..e7a4a4a00 100644
--- a/src/core/client/admin/components/UserStatus/UserStatusChangeContainer.tsx
+++ b/src/core/client/admin/components/UserStatus/UserStatusChangeContainer.tsx
@@ -4,8 +4,9 @@ import { graphql } from "react-relay";
 import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
 import { GQLUSER_ROLE } from "coral-framework/schema";
 
-import { UserStatusChangeContainer_settings as SettingsData } from "coral-admin/__generated__/UserStatusChangeContainer_settings.graphql";
-import { UserStatusChangeContainer_user as UserData } from "coral-admin/__generated__/UserStatusChangeContainer_user.graphql";
+import { UserStatusChangeContainer_settings } from "coral-admin/__generated__/UserStatusChangeContainer_settings.graphql";
+import { UserStatusChangeContainer_user } from "coral-admin/__generated__/UserStatusChangeContainer_user.graphql";
+import { UserStatusChangeContainer_viewer } from "coral-admin/__generated__/UserStatusChangeContainer_viewer.graphql";
 
 import BanModal from "./BanModal";
 import BanUserMutation from "./BanUserMutation";
@@ -20,14 +21,20 @@ import UserStatusChange from "./UserStatusChange";
 import UserStatusContainer from "./UserStatusContainer";
 
 interface Props {
-  user: UserData;
+  settings: UserStatusChangeContainer_settings;
+  user: UserStatusChangeContainer_user;
+  viewer: UserStatusChangeContainer_viewer;
   fullWidth?: boolean;
-  settings: SettingsData;
   bordered?: boolean;
 }
 
-const UserStatusChangeContainer: FunctionComponent<Props> = (props) => {
-  const { user, settings, fullWidth, bordered } = props;
+const UserStatusChangeContainer: FunctionComponent<Props> = ({
+  user,
+  settings,
+  fullWidth,
+  bordered,
+  viewer,
+}) => {
   const banUser = useMutation(BanUserMutation);
   const suspendUser = useMutation(SuspendUserMutation);
   const removeUserBan = useMutation(RemoveUserBanMutation);
@@ -119,11 +126,13 @@ const UserStatusChangeContainer: FunctionComponent<Props> = (props) => {
     return <UserStatusContainer user={user} />;
   }
 
+  const scoped = !!viewer.moderationScopes?.scoped;
+
   return (
     <>
       <UserStatusChange
-        onBan={handleBan}
-        onRemoveBan={handleRemoveBan}
+        onBan={!scoped && handleBan}
+        onRemoveBan={!scoped && handleRemoveBan}
         onSuspend={handleSuspend}
         onRemoveSuspension={handleRemoveSuspension}
         onPremod={handlePremod}
@@ -150,12 +159,14 @@ const UserStatusChangeContainer: FunctionComponent<Props> = (props) => {
         onClose={hidePremod}
         onConfirm={handlePremodConfirm}
       />
-      <BanModal
-        username={user.username}
-        open={showBanned}
-        onClose={handleBanModalClose}
-        onConfirm={handleBanConfirm}
-      />
+      {!scoped && (
+        <BanModal
+          username={user.username}
+          open={showBanned}
+          onClose={handleBanModalClose}
+          onConfirm={handleBanConfirm}
+        />
+      )}
     </>
   );
 };
@@ -187,6 +198,13 @@ const enhanced = withFragmentContainer<Props>({
       }
     }
   `,
+  viewer: graphql`
+    fragment UserStatusChangeContainer_viewer on User {
+      moderationScopes {
+        scoped
+      }
+    }
+  `,
 })(UserStatusChangeContainer);
 
 export default enhanced;
diff --git a/src/core/client/admin/routes/Community/InviteUsers/InviteUsersModal.tsx b/src/core/client/admin/routes/Community/InviteUsers/InviteUsersModal.tsx
index 49202c148..b22faa407 100644
--- a/src/core/client/admin/routes/Community/InviteUsers/InviteUsersModal.tsx
+++ b/src/core/client/admin/routes/Community/InviteUsers/InviteUsersModal.tsx
@@ -11,7 +11,7 @@ import {
 import InviteForm from "./InviteUsersForm";
 import Success from "./Success";
 
-import * as styles from "./InviteUsersModal.css";
+import styles from "./InviteUsersModal.css";
 
 interface Props {
   onHide: () => void;
diff --git a/src/core/client/admin/routes/Community/InviteUsers/RoleField.css b/src/core/client/admin/routes/Community/InviteUsers/RoleField.css
deleted file mode 100644
index b2f5bdbbc..000000000
--- a/src/core/client/admin/routes/Community/InviteUsers/RoleField.css
+++ /dev/null
@@ -1,9 +0,0 @@
-$role-field-text: var(--v2-colors-mono-500);
-
-.legend {
-  font-size: var(--v2-font-size-3);
-  font-family: var(--v2-font-family-primary);
-  font-weight: var(--v2-font-weight-primary-semi-bold);
-  line-height: var(--v2-line-height-body-short);
-  color: $role-field-text;
-}
diff --git a/src/core/client/admin/routes/Community/InviteUsers/RoleField.tsx b/src/core/client/admin/routes/Community/InviteUsers/RoleField.tsx
index 9e1658e68..14fd3e16a 100644
--- a/src/core/client/admin/routes/Community/InviteUsers/RoleField.tsx
+++ b/src/core/client/admin/routes/Community/InviteUsers/RoleField.tsx
@@ -3,9 +3,7 @@ import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { GQLUSER_ROLE } from "coral-framework/schema";
-import { FieldSet, RadioButton } from "coral-ui/components/v2";
-
-import styles from "./RoleField.css";
+import { FieldSet, Label, RadioButton } from "coral-ui/components/v2";
 
 interface Props {
   disabled: boolean;
@@ -14,7 +12,7 @@ interface Props {
 const RoleField: FunctionComponent<Props> = ({ disabled }) => (
   <FieldSet>
     <Localized id="community-invite-inviteAsLabel">
-      <legend className={styles.legend}>Invite as:</legend>
+      <Label>Invite as:</Label>
     </Localized>
     <div>
       <Field name="role" type="radio" value={GQLUSER_ROLE.STAFF}>
diff --git a/src/core/client/admin/routes/Community/UserRow.tsx b/src/core/client/admin/routes/Community/UserRow.tsx
index 70a047712..0dc285794 100644
--- a/src/core/client/admin/routes/Community/UserRow.tsx
+++ b/src/core/client/admin/routes/Community/UserRow.tsx
@@ -16,8 +16,11 @@ interface Props {
   memberSince: string;
   user: PropTypesOf<typeof UserRole>["user"] &
     PropTypesOf<typeof UserStatus>["user"];
-  viewer: PropTypesOf<typeof UserRole>["viewer"];
-  settings: PropTypesOf<typeof UserStatus>["settings"];
+  viewer: PropTypesOf<typeof UserRole>["viewer"] &
+    PropTypesOf<typeof UserStatus>["viewer"];
+  query: PropTypesOf<typeof UserRole>["query"];
+  settings: PropTypesOf<typeof UserStatus>["settings"] &
+    PropTypesOf<typeof UserRole>["settings"];
   onUsernameClicked?: (userID: string) => void;
   deletedAt?: string | null;
 }
@@ -32,6 +35,7 @@ const UserRow: FunctionComponent<Props> = ({
   onUsernameClicked,
   settings,
   deletedAt,
+  query,
 }) => {
   const usernameClicked = useCallback(() => {
     if (!onUsernameClicked) {
@@ -75,10 +79,15 @@ const UserRow: FunctionComponent<Props> = ({
       </TableCell>
       <TableCell className={styles.memberSinceColumn}>{memberSince}</TableCell>
       <TableCell className={styles.roleColumn}>
-        <UserRole user={user} viewer={viewer} />
+        <UserRole
+          user={user}
+          viewer={viewer}
+          settings={settings}
+          query={query}
+        />
       </TableCell>
       <TableCell className={styles.statusColumn}>
-        <UserStatus user={user} settings={settings} fullWidth />
+        <UserStatus user={user} settings={settings} viewer={viewer} fullWidth />
       </TableCell>
     </TableRow>
   );
diff --git a/src/core/client/admin/routes/Community/UserRowContainer.tsx b/src/core/client/admin/routes/Community/UserRowContainer.tsx
index 65db615ac..9587f7b4d 100644
--- a/src/core/client/admin/routes/Community/UserRowContainer.tsx
+++ b/src/core/client/admin/routes/Community/UserRowContainer.tsx
@@ -1,9 +1,10 @@
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
 
-import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { useDateTimeFormatter } from "coral-framework/hooks";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 
+import { UserRowContainer_query as QueryData } from "coral-admin/__generated__/UserRowContainer_query.graphql";
 import { UserRowContainer_settings as SettingsData } from "coral-admin/__generated__/UserRowContainer_settings.graphql";
 import { UserRowContainer_user as UserData } from "coral-admin/__generated__/UserRowContainer_user.graphql";
 import { UserRowContainer_viewer as ViewerData } from "coral-admin/__generated__/UserRowContainer_viewer.graphql";
@@ -14,24 +15,29 @@ interface Props {
   user: UserData;
   viewer: ViewerData;
   settings: SettingsData;
+  query: QueryData;
   onUsernameClicked?: (userID: string) => void;
 }
 
 const UserRowContainer: FunctionComponent<Props> = (props) => {
-  const { locales } = useCoralContext();
+  const formatter = useDateTimeFormatter({
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+
   return (
     <UserRow
       user={props.user}
       settings={props.settings}
       viewer={props.viewer}
+      query={props.query}
       userID={props.user.id}
       username={props.user.username}
       email={props.user.email}
-      memberSince={new Intl.DateTimeFormat(locales, {
-        day: "2-digit",
-        month: "2-digit",
-        year: "numeric",
-      }).format(new Date(props.user.createdAt))}
+      memberSince={formatter(props.user.createdAt)}
       onUsernameClicked={props.onUsernameClicked}
       deletedAt={props.user.deletedAt}
     />
@@ -41,12 +47,14 @@ const UserRowContainer: FunctionComponent<Props> = (props) => {
 const enhanced = withFragmentContainer<Props>({
   viewer: graphql`
     fragment UserRowContainer_viewer on User {
+      ...UserStatusChangeContainer_viewer
       ...UserRoleChangeContainer_viewer
     }
   `,
   settings: graphql`
     fragment UserRowContainer_settings on Settings {
       ...UserStatusChangeContainer_settings
+      ...UserRoleChangeContainer_settings
     }
   `,
   user: graphql`
@@ -60,6 +68,11 @@ const enhanced = withFragmentContainer<Props>({
       deletedAt
     }
   `,
+  query: graphql`
+    fragment UserRowContainer_query on Query {
+      ...UserRoleChangeContainer_query
+    }
+  `,
 })(UserRowContainer);
 
 export default enhanced;
diff --git a/src/core/client/admin/routes/Community/UserTable.tsx b/src/core/client/admin/routes/Community/UserTable.tsx
index 06120eb8e..1cc4a45b5 100644
--- a/src/core/client/admin/routes/Community/UserTable.tsx
+++ b/src/core/client/admin/routes/Community/UserTable.tsx
@@ -23,6 +23,7 @@ import styles from "./UserTable.css";
 interface Props {
   viewer: PropTypesOf<typeof UserRowContainer>["viewer"] | null;
   settings: PropTypesOf<typeof UserRowContainer>["settings"] | null;
+  query: PropTypesOf<typeof UserRowContainer>["query"] | null;
   users: Array<{ id: string } & PropTypesOf<typeof UserRowContainer>["user"]>;
   onLoadMore: () => void;
   hasMore: boolean;
@@ -33,9 +34,12 @@ interface Props {
 const UserTable: FunctionComponent<Props> = ({
   viewer,
   settings,
+  query,
   ...props
 }) => {
-  const [userDrawerUserID, setUserDrawerUserID] = useState("");
+  const [userDrawerUserID, setUserDrawerUserID] = useState<string | undefined>(
+    undefined
+  );
   const [userDrawerVisible, setUserDrawerVisible] = useState(false);
 
   const onShowUserDrawer = useCallback(
@@ -48,73 +52,72 @@ const UserTable: FunctionComponent<Props> = ({
 
   const onHideUserDrawer = useCallback(() => {
     setUserDrawerVisible(false);
-    setUserDrawerUserID("");
+    setUserDrawerUserID(undefined);
   }, [setUserDrawerUserID, setUserDrawerVisible]);
+
   return (
-    <>
-      <HorizontalGutter size="double">
-        <Table fullWidth>
-          <TableHead>
-            <TableRow>
-              <Localized id="community-column-username">
-                <TableCell className={styles.usernameColumn}>
-                  Username
-                </TableCell>
-              </Localized>
-              <Localized id="community-column-email">
-                <TableCell className={styles.emailColumn}>
-                  Email Address
-                </TableCell>
-              </Localized>
-              <Localized id="community-column-memberSince">
-                <TableCell className={styles.memberSinceColumn}>
-                  Member Since
-                </TableCell>
-              </Localized>
-              <Localized id="community-column-role">
-                <TableCell className={styles.roleColumn}>Role</TableCell>
-              </Localized>
-              <Localized id="community-column-status">
-                <TableCell className={styles.statusColumn}>Status</TableCell>
-              </Localized>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {!props.loading &&
-              settings &&
-              viewer &&
-              props.users.map((u) => (
-                <UserRowContainer
-                  key={u.id}
-                  user={u}
-                  settings={settings}
-                  viewer={viewer}
-                  onUsernameClicked={onShowUserDrawer}
-                />
-              ))}
-          </TableBody>
-        </Table>
-        {!props.loading && props.users.length === 0 && <EmptyMessage />}
-        {props.loading && (
-          <Flex justifyContent="center">
-            <Spinner />
-          </Flex>
-        )}
-        {props.hasMore && (
-          <Flex justifyContent="center">
-            <AutoLoadMore
-              disableLoadMore={props.disableLoadMore}
-              onLoadMore={props.onLoadMore}
-            />
-          </Flex>
-        )}
-        <UserHistoryDrawer
-          userID={userDrawerUserID}
-          open={userDrawerVisible}
-          onClose={onHideUserDrawer}
-        />
-      </HorizontalGutter>
-    </>
+    <HorizontalGutter size="double">
+      <Table fullWidth>
+        <TableHead>
+          <TableRow>
+            <Localized id="community-column-username">
+              <TableCell className={styles.usernameColumn}>Username</TableCell>
+            </Localized>
+            <Localized id="community-column-email">
+              <TableCell className={styles.emailColumn}>
+                Email Address
+              </TableCell>
+            </Localized>
+            <Localized id="community-column-memberSince">
+              <TableCell className={styles.memberSinceColumn}>
+                Member Since
+              </TableCell>
+            </Localized>
+            <Localized id="community-column-role">
+              <TableCell className={styles.roleColumn}>Role</TableCell>
+            </Localized>
+            <Localized id="community-column-status">
+              <TableCell className={styles.statusColumn}>Status</TableCell>
+            </Localized>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {!props.loading &&
+            settings &&
+            viewer &&
+            query &&
+            props.users.map((user) => (
+              <UserRowContainer
+                key={user.id}
+                user={user}
+                settings={settings}
+                viewer={viewer}
+                query={query}
+                onUsernameClicked={onShowUserDrawer}
+              />
+            ))}
+        </TableBody>
+      </Table>
+      {!props.loading && props.users.length === 0 && <EmptyMessage />}
+      {props.loading && (
+        <Flex justifyContent="center">
+          <Spinner />
+        </Flex>
+      )}
+      {props.hasMore && (
+        <Flex justifyContent="center">
+          <AutoLoadMore
+            disableLoadMore={props.disableLoadMore}
+            onLoadMore={props.onLoadMore}
+          />
+        </Flex>
+      )}
+      <UserHistoryDrawer
+        userID={userDrawerUserID}
+        open={userDrawerVisible}
+        onClose={onHideUserDrawer}
+      />
+    </HorizontalGutter>
   );
 };
 
diff --git a/src/core/client/admin/routes/Community/UserTableContainer.tsx b/src/core/client/admin/routes/Community/UserTableContainer.tsx
index 2f2b2fd64..fcd87c756 100644
--- a/src/core/client/admin/routes/Community/UserTableContainer.tsx
+++ b/src/core/client/admin/routes/Community/UserTableContainer.tsx
@@ -54,6 +54,7 @@ const UserTableContainer: FunctionComponent<Props> = (props) => {
         <UserTable
           viewer={props.query && props.query.viewer}
           settings={props.query && props.query.settings}
+          query={props.query}
           loading={!props.query || isRefetching}
           users={users}
           onLoadMore={loadMore}
@@ -105,6 +106,7 @@ const enhanced = withPaginationContainer<
             }
           }
         }
+        ...UserRowContainer_query
       }
     `,
   },
diff --git a/src/core/client/admin/routes/Configure/sections/General/Announcement.tsx b/src/core/client/admin/routes/Configure/sections/General/Announcement.tsx
index 158372db8..dec5503da 100644
--- a/src/core/client/admin/routes/Configure/sections/General/Announcement.tsx
+++ b/src/core/client/admin/routes/Configure/sections/General/Announcement.tsx
@@ -2,7 +2,7 @@ import { Localized } from "@fluent/react/compat";
 import { DateTime } from "luxon";
 import React, { FunctionComponent, useMemo } from "react";
 
-import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { useDateTimeFormatter } from "coral-framework/hooks";
 import {
   FormField,
   FormFieldFooter,
@@ -22,19 +22,20 @@ const Announcement: FunctionComponent<Props> = ({
   createdAt,
   duration,
 }) => {
-  const { locales } = useCoralContext();
+  const formatter = useDateTimeFormatter({
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
   const formattedDate = useMemo(() => {
     const disableAt = DateTime.fromISO(createdAt)
       .plus({ seconds: duration })
       .toJSDate();
-    return new Intl.DateTimeFormat(locales, {
-      day: "2-digit",
-      month: "2-digit",
-      year: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
-    }).format(new Date(disableAt));
-  }, [createdAt, duration]);
+
+    return formatter(disableAt);
+  }, [createdAt, duration, formatter]);
   return (
     <FormField>
       <FormFieldHeader>
diff --git a/src/core/client/admin/routes/Configure/sections/Organization/SitesConfigContainer.tsx b/src/core/client/admin/routes/Configure/sections/Organization/SitesConfigContainer.tsx
index 42ac5e795..fec55e6ad 100644
--- a/src/core/client/admin/routes/Configure/sections/Organization/SitesConfigContainer.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Organization/SitesConfigContainer.tsx
@@ -22,7 +22,7 @@ const SitesConfigContainer: React.FunctionComponent<Props> = (props) => {
     () => (props.query ? props.query.sites.edges.map((edge) => edge.node) : []),
     [props?.query?.sites.edges]
   );
-  const [loadMore, isLoadingMore] = useLoadMore(props.relay, 10);
+  const [loadMore, isLoadingMore] = useLoadMore(props.relay, 20);
   const [, isRefetching] = useRefetch<
     SitesConfigContainerPaginationQueryVariables
   >(props.relay);
@@ -92,4 +92,5 @@ const enhanced = withPaginationContainer<
     `,
   }
 )(SitesConfigContainer);
+
 export default enhanced;
diff --git a/src/core/client/admin/routes/Dashboard/sections/CommentActivity.tsx b/src/core/client/admin/routes/Dashboard/sections/CommentActivity.tsx
index 6c3965d45..9570dfdb6 100644
--- a/src/core/client/admin/routes/Dashboard/sections/CommentActivity.tsx
+++ b/src/core/client/admin/routes/Dashboard/sections/CommentActivity.tsx
@@ -12,11 +12,10 @@ import {
   YAxis,
 } from "recharts";
 
-import { Flex } from "coral-ui/components/v2";
-
 import { TimeSeriesMetricsJSON } from "coral-common/rest/dashboard/types";
+import { useDateTimeFormatter } from "coral-framework/hooks";
 import { useImmediateFetch } from "coral-framework/lib/relay/fetch";
-import { useUIContext } from "coral-ui/components";
+import { Flex } from "coral-ui/components/v2";
 
 import { DashboardBox, DashboardComponentHeading, Loader } from "../components";
 import createDashboardFetch from "../createDashboardFetch";
@@ -31,7 +30,6 @@ import CommentActivityTooltip from "./CommentActivityTooltip";
 import styles from "./CommentActivity.css";
 
 interface Props {
-  locales?: string[];
   siteID: string;
   lastUpdated: string;
 }
@@ -41,18 +39,16 @@ const HourlyCommentsMetricsFetch = createDashboardFetch<TimeSeriesMetricsJSON>(
   "/dashboard/hourly/comments"
 );
 
-const CommentActivity: FunctionComponent<Props> = ({
-  locales: localesFromProps,
-  siteID,
-  lastUpdated,
-}) => {
+const CommentActivity: FunctionComponent<Props> = ({ siteID, lastUpdated }) => {
   const [hourly, loading] = useImmediateFetch(
     HourlyCommentsMetricsFetch,
     { siteID },
     lastUpdated
   );
-  const { locales: localesFromContext } = useUIContext();
-  const locales = localesFromProps || localesFromContext || ["en-US"];
+  const formatter = useDateTimeFormatter({
+    hour: "numeric",
+    hour12: true,
+  });
   return (
     <DashboardBox>
       <Localized id="dashboard-comment-activity-heading">
@@ -81,16 +77,9 @@ const CommentActivity: FunctionComponent<Props> = ({
                 tick={{ fontSize: 12, fontWeight: 600 }}
                 tickLine={false}
                 dy={6}
-                tickFormatter={(unixTime: number) => {
-                  const formatter = new Intl.DateTimeFormat(locales, {
-                    hour: "numeric",
-                    hour12: true,
-                  });
-                  return formatter
-                    .format(new Date(unixTime))
-                    .toLowerCase()
-                    .replace(" ", "");
-                }}
+                tickFormatter={(unixTime: number) =>
+                  formatter(unixTime).toLowerCase().replace(" ", "")
+                }
               />
               <YAxis
                 allowDecimals={false}
@@ -110,7 +99,7 @@ const CommentActivity: FunctionComponent<Props> = ({
               />
               <Tooltip
                 content={(tooltipProps: TooltipProps) => (
-                  <CommentActivityTooltip {...tooltipProps} locales={locales} />
+                  <CommentActivityTooltip {...tooltipProps} />
                 )}
               />
             </LineChart>
diff --git a/src/core/client/admin/routes/Dashboard/sections/CommentActivityTooltip.tsx b/src/core/client/admin/routes/Dashboard/sections/CommentActivityTooltip.tsx
index eb8142bca..a5929d73b 100644
--- a/src/core/client/admin/routes/Dashboard/sections/CommentActivityTooltip.tsx
+++ b/src/core/client/admin/routes/Dashboard/sections/CommentActivityTooltip.tsx
@@ -2,28 +2,27 @@ import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useMemo } from "react";
 import { TooltipProps } from "recharts";
 
+import { useDateTimeFormatter } from "coral-framework/hooks";
+
 import styles from "./CommentActivityTooltip.css";
 
-type Props = TooltipProps & {
-  locales: string[];
-};
+type Props = TooltipProps;
 
 const CommentActivityTooltip: FunctionComponent<Props> = ({
   active,
   payload,
   label,
-  locales,
 }) => {
+  const formatter = useDateTimeFormatter({
+    hour: "2-digit",
+    minute: "2-digit",
+  });
   const formattedLabel = useMemo(() => {
     if (label) {
-      const formatter = new Intl.DateTimeFormat(locales, {
-        hour: "2-digit",
-        minute: "2-digit",
-      });
-      return formatter.format(new Date(label)).toLowerCase();
+      return formatter(label).toLowerCase();
     }
     return "";
-  }, [label]);
+  }, [label, formatter]);
   if (active) {
     return (
       <div className={styles.root}>
diff --git a/src/core/client/admin/routes/Dashboard/sections/SignupActivity.tsx b/src/core/client/admin/routes/Dashboard/sections/SignupActivity.tsx
index 6935e71cd..d60361bb5 100644
--- a/src/core/client/admin/routes/Dashboard/sections/SignupActivity.tsx
+++ b/src/core/client/admin/routes/Dashboard/sections/SignupActivity.tsx
@@ -12,7 +12,6 @@ import {
 
 import { TimeSeriesMetricsJSON } from "coral-common/rest/dashboard/types";
 import { useImmediateFetch } from "coral-framework/lib/relay/fetch";
-import { useUIContext } from "coral-ui/components";
 
 import { DashboardBox, DashboardComponentHeading, Loader } from "../components";
 import createDashboardFetch from "../createDashboardFetch";
@@ -27,7 +26,6 @@ import SignupActivityTick from "./SignupActivityTick";
 import styles from "./SignupActivity.css";
 
 interface Props {
-  locales?: string[];
   siteID: string;
   lastUpdated: string;
 }
@@ -37,7 +35,6 @@ const DailySignupMetrics = createDashboardFetch<TimeSeriesMetricsJSON>(
 );
 
 const CommenterActivity: FunctionComponent<Props> = ({
-  locales: localesFromProps,
   siteID,
   lastUpdated,
 }) => {
@@ -46,8 +43,7 @@ const CommenterActivity: FunctionComponent<Props> = ({
     { siteID },
     lastUpdated
   );
-  const { locales: localesFromContext } = useUIContext();
-  const locales = localesFromProps || localesFromContext || ["en-US"];
+
   return (
     <DashboardBox>
       <Localized id="dashboard-commenters-activity-heading">
@@ -77,7 +73,6 @@ const CommenterActivity: FunctionComponent<Props> = ({
                     daily.series &&
                     daily.series.length - 1 === props.index
                   }
-                  locales={locales}
                   {...props}
                 />
               )}
diff --git a/src/core/client/admin/routes/Dashboard/sections/SignupActivityTick.tsx b/src/core/client/admin/routes/Dashboard/sections/SignupActivityTick.tsx
index aa0f36b9f..1bec08bdb 100644
--- a/src/core/client/admin/routes/Dashboard/sections/SignupActivityTick.tsx
+++ b/src/core/client/admin/routes/Dashboard/sections/SignupActivityTick.tsx
@@ -1,5 +1,7 @@
 import React, { FunctionComponent, useMemo } from "react";
 
+import { useDateTimeFormatter } from "coral-framework/hooks";
+
 import {
   CHART_COLOR_MONO_100,
   CHART_COLOR_MONO_500,
@@ -12,7 +14,6 @@ interface TickPayload {
 
 interface Props {
   x: number;
-  locales: string[];
   y: number;
   payload: TickPayload;
   isToday: boolean;
@@ -22,22 +23,22 @@ const SignupActivityTick: FunctionComponent<Props> = ({
   x,
   y,
   payload,
-  locales,
   isToday,
 }) => {
-  const date = useMemo(() => {
-    const formatter = new Intl.DateTimeFormat(locales, {
-      day: "numeric",
-      month: "numeric",
-    });
-    return formatter.format(new Date(payload.value));
-  }, [payload.value]);
-  const dayOfWeek = useMemo(() => {
-    const formatter = new Intl.DateTimeFormat(locales, {
-      weekday: "short",
-    });
-    return formatter.format(new Date(payload.value));
-  }, [payload.value]);
+  const dateFormatter = useDateTimeFormatter({
+    day: "numeric",
+    month: "numeric",
+  });
+  const date = useMemo(() => dateFormatter(payload.value), [
+    payload.value,
+    dateFormatter,
+  ]);
+  const dayOfWeekFormatter = useDateTimeFormatter({
+    weekday: "short",
+  });
+  const dayOfWeek = useMemo(() => dayOfWeekFormatter(payload.value), [
+    payload.value,
+  ]);
   return (
     <g transform={`translate(${x},${y})`}>
       <text
diff --git a/src/core/client/admin/routes/Login/AccountCompletionContainer.tsx b/src/core/client/admin/routes/Login/AccountCompletionContainer.tsx
index 87fb1fd69..860661c96 100644
--- a/src/core/client/admin/routes/Login/AccountCompletionContainer.tsx
+++ b/src/core/client/admin/routes/Login/AccountCompletionContainer.tsx
@@ -1,121 +1,140 @@
 import { RouterState, withRouter } from "found";
-import React, { Component } from "react";
+import React, {
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 import { graphql } from "react-relay";
 
-import { SetRedirectPathMutation } from "coral-admin/mutations";
 import {
-  MutationProp,
+  useMutation,
   withFragmentContainer,
   withLocalStateContainer,
-  withMutation,
 } from "coral-framework/lib/relay";
 
-import { AccountCompletionContainer_auth as AuthData } from "coral-admin/__generated__/AccountCompletionContainer_auth.graphql";
-import { AccountCompletionContainer_viewer as UserData } from "coral-admin/__generated__/AccountCompletionContainer_viewer.graphql";
-import { AccountCompletionContainerLocal as Local } from "coral-admin/__generated__/AccountCompletionContainerLocal.graphql";
+import { AccountCompletionContainer_auth } from "coral-admin/__generated__/AccountCompletionContainer_auth.graphql";
+import { AccountCompletionContainer_viewer } from "coral-admin/__generated__/AccountCompletionContainer_viewer.graphql";
+import { AccountCompletionContainerLocal } from "coral-admin/__generated__/AccountCompletionContainerLocal.graphql";
 
 import CompleteAccountMutation from "./CompleteAccountMutation";
-import SetAuthViewMutation from "./SetAuthViewMutation";
+import SetAuthViewMutation, { SetAuthViewInput } from "./SetAuthViewMutation";
 
-type Props = {
-  completeAccount: MutationProp<typeof CompleteAccountMutation>;
-  setAuthView: MutationProp<typeof SetAuthViewMutation>;
-  local: Local;
-  auth: AuthData;
-  viewer: UserData | null;
-  setRedirectPath: MutationProp<typeof SetRedirectPathMutation>;
-} & RouterState;
+interface Props extends RouterState {
+  local: AccountCompletionContainerLocal;
+  auth: AccountCompletionContainer_auth;
+  viewer: AccountCompletionContainer_viewer | null;
+}
 
-function handleAccountCompletion(props: Props) {
-  const {
-    local: { authView, authDuplicateEmail },
-    viewer,
-    auth,
-    setAuthView,
-  } = props;
-  if (viewer) {
+const AccountCompletionContainer: FunctionComponent<Props> = ({
+  local,
+  auth,
+  viewer,
+  children,
+  router,
+}) => {
+  const completeAccount = useMutation(CompleteAccountMutation);
+  const [checked, setChecked] = useState(false);
+  const [completed, setCompleted] = useState(false);
+  const setAuthView = useMutation(SetAuthViewMutation);
+  const redirect = useCallback(
+    (view: SetAuthViewInput["view"]) => {
+      if (local.authView !== view) {
+        setAuthView({ view });
+      }
+    },
+    [local, setAuthView]
+  );
+
+  useEffect(() => {
+    // If we've already been marked as completed, stop now.
+    if (completed) {
+      return;
+    }
+
+    // Mark that we checked the completion status.
+    setChecked(true);
+
+    // If there is no viewer, exit now!
+    if (!viewer) {
+      return;
+    }
+
+    // Check if the user has an email address.
     if (!viewer.email) {
-      // email not set yet.
+      // The email is not set on the viewer, check to see if the duplicate email
+      // was detected via the `ADD_EMAIL_ADDRESS` process (indicated via
+      // `authDuplicateEmail`) or from social login (indicated via
+      // `viewer.duplicateEmail`). If they're already at the `ADD_EMAIL_ADDRESS`
+      // view we don't need to change that.
       if (
-        // duplicate email detected during the `ADD_EMAIL_ADDRESS` process.
-        authDuplicateEmail ||
-        // detected duplicate email usually coming from a social login.
-        viewer.duplicateEmail
+        (local.authDuplicateEmail || viewer.duplicateEmail) &&
+        local.authView !== "ADD_EMAIL_ADDRESS"
       ) {
-        // Duplicate email detected.
-        if (authView !== "ADD_EMAIL_ADDRESS" && authView !== "LINK_ACCOUNT") {
-          // `ADD_EMAIL_ADDRESS` view is allowed in case the viewer wants to change the email address.
-          // otherwise direct to the link account view.
-          setAuthView({ view: "LINK_ACCOUNT" });
-        }
-      } else if (authView !== "ADD_EMAIL_ADDRESS") {
-        setAuthView({ view: "ADD_EMAIL_ADDRESS" });
+        redirect("LINK_ACCOUNT");
+        return;
       }
-    } else if (!viewer.username) {
-      // username not set yet.
-      if (authView !== "CREATE_USERNAME") {
-        // direct to create username view.
-        setAuthView({ view: "CREATE_USERNAME" });
-      }
-    } else if (
-      // password not set when local auth is enabled.
+
+      redirect("ADD_EMAIL_ADDRESS");
+      return;
+    }
+
+    // Check if the user has a username.
+    if (!viewer.username) {
+      // The username is not set on the viewer, ensure we're on the create
+      // username view.
+      redirect("CREATE_USERNAME");
+      return;
+    }
+
+    // Check if the user has a password (and if they need one).
+    if (
       !viewer.profiles.some((p) => p.__typename === "LocalProfile") &&
       auth.integrations.local.enabled &&
-      (auth.integrations.local.targetFilter.admin ||
-        auth.integrations.local.targetFilter.stream)
+      auth.integrations.local.targetFilter.admin
     ) {
-      if (authView !== "CREATE_PASSWORD") {
-        // direct to create password view.
-        setAuthView({ view: "CREATE_PASSWORD" });
-      }
-    } else {
-      // all set, complete account.
-      void props
-        .completeAccount({ accessToken: props.local.accessToken! })
-        .then(() => {
-          props.router.replace(props.local.redirectPath || "/admin");
-        });
-      // account completed.
-      return true;
+      // The password is not set on the viewer and the password is configured on
+      // the admin area.
+      redirect("CREATE_PASSWORD");
+      return;
     }
-  }
-  // account not completed yet.
-  return false;
-}
 
-interface State {
-  checkedCompletionStatus: boolean;
-  completed: boolean;
-}
-
-class AccountCompletionContainer extends Component<Props, State> {
-  public state = {
-    checkedCompletionStatus: false,
-    completed: false,
-  };
-
-  public componentDidMount() {
-    const completed = handleAccountCompletion(this.props);
-    this.setState({ checkedCompletionStatus: true, completed });
-  }
-  public componentDidUpdate() {
-    if (!this.state.completed) {
-      const completed = handleAccountCompletion(this.props);
-      if (completed) {
-        this.setState({ completed });
+    // Create a callback finish function that will redirect the user once the
+    // access token has been set in the store.
+    async function finish() {
+      try {
+        await completeAccount({ accessToken: local.accessToken! });
+        router.replace(local.redirectPath || "/admin");
+      } catch (err) {
+        window.console.error(err);
       }
     }
+
+    // Looks like the account is complete! Finish the account setup.
+    void finish();
+
+    // Mark the account as completed.
+    setCompleted(true);
+  }, [
+    completed,
+    setChecked,
+    viewer,
+    auth,
+    redirect,
+    local,
+    router,
+    completeAccount,
+    setCompleted,
+  ]);
+
+  // If we haven't checked or we haven't completed the account, then render
+  // nothing.
+  if (!checked || completed) {
+    return null;
   }
 
-  public render() {
-    const { children } = this.props;
-    // We skip first frame to check for completion status.
-    if (!this.state.checkedCompletionStatus || this.state.completed) {
-      return null;
-    }
-    return <>{children}</>;
-  }
-}
+  return <>{children}</>;
+};
 
 const enhanced = withLocalStateContainer(
   graphql`
@@ -151,15 +170,7 @@ const enhanced = withLocalStateContainer(
         }
       }
     `,
-  })(
-    withMutation(SetAuthViewMutation)(
-      withMutation(SetRedirectPathMutation)(
-        withMutation(CompleteAccountMutation)(
-          withRouter(AccountCompletionContainer)
-        )
-      )
-    )
-  )
+  })(withRouter(AccountCompletionContainer))
 );
 
 export default enhanced;
diff --git a/src/core/client/admin/routes/Login/LoginRoute.tsx b/src/core/client/admin/routes/Login/LoginRoute.tsx
index 5d211e50b..3f9b15933 100644
--- a/src/core/client/admin/routes/Login/LoginRoute.tsx
+++ b/src/core/client/admin/routes/Login/LoginRoute.tsx
@@ -64,4 +64,5 @@ const enhanced = withRouteConfig<LoginRouteQueryResponse>({
     `
   )(LoginRoute)
 );
+
 export default enhanced;
diff --git a/src/core/client/admin/routes/Moderate/Moderate.spec.tsx b/src/core/client/admin/routes/Moderate/Moderate.spec.tsx
index d85a50a0e..b3abc7ff9 100644
--- a/src/core/client/admin/routes/Moderate/Moderate.spec.tsx
+++ b/src/core/client/admin/routes/Moderate/Moderate.spec.tsx
@@ -13,6 +13,7 @@ it("renders correctly", () => {
     allStories: true,
     moderationQueues: {},
     story: {},
+    viewer: null,
     siteID: null,
     query: "",
     routeParams: {},
diff --git a/src/core/client/admin/routes/Moderate/Moderate.tsx b/src/core/client/admin/routes/Moderate/Moderate.tsx
index 1bf671044..7db5f2a74 100644
--- a/src/core/client/admin/routes/Moderate/Moderate.tsx
+++ b/src/core/client/admin/routes/Moderate/Moderate.tsx
@@ -30,13 +30,17 @@ interface Props {
     PropTypesOf<typeof ModerateSearchBarContainer>["story"];
   query: PropTypesOf<typeof SiteSelectorContainer>["query"] &
     PropTypesOf<typeof SectionSelectorContainer>["query"];
+  viewer: PropTypesOf<typeof SiteSelectorContainer>["viewer"];
   moderationQueues: PropTypesOf<
     typeof ModerateNavigationContainer
   >["moderationQueues"];
   allStories: boolean;
   siteID: string | null;
   section?: SectionFilter | null;
-  settings: PropTypesOf<typeof ModerateSearchBarContainer>["settings"] | null;
+  settings:
+    | (PropTypesOf<typeof ModerateSearchBarContainer>["settings"] &
+        PropTypesOf<typeof SiteSelectorContainer>["settings"])
+    | null;
   children?: React.ReactNode;
   queueName: string;
   routeParams: RouteParams;
@@ -46,6 +50,7 @@ const Moderate: FunctionComponent<Props> = ({
   moderationQueues,
   story,
   query,
+  viewer,
   allStories,
   children,
   queueName,
@@ -71,6 +76,7 @@ const Moderate: FunctionComponent<Props> = ({
       key.unbind(HOTKEYS.GUIDE);
     };
   }, []);
+
   return (
     <div data-testid="moderate-container">
       <ModerateSearchBarContainer
@@ -82,6 +88,8 @@ const Moderate: FunctionComponent<Props> = ({
           <SiteSelectorContainer
             queueName={queueName}
             query={query}
+            settings={settings}
+            viewer={viewer}
             siteID={routeParams.siteID || siteID || null}
           />
         }
diff --git a/src/core/client/admin/routes/Moderate/ModerateContainer.tsx b/src/core/client/admin/routes/Moderate/ModerateContainer.tsx
index c228f79bf..7a651dabf 100644
--- a/src/core/client/admin/routes/Moderate/ModerateContainer.tsx
+++ b/src/core/client/admin/routes/Moderate/ModerateContainer.tsx
@@ -1,9 +1,11 @@
-import { Match, RouteProps, Router, withRouter } from "found";
-import React from "react";
+import { Match, Router, withRouter } from "found";
+import React, { FunctionComponent, useEffect, useMemo } from "react";
 import { graphql } from "react-relay";
 
+import { getModerationLink, QUEUE_NAME } from "coral-framework/helpers";
 import parseModerationOptions from "coral-framework/helpers/parseModerationOptions";
 import { withRouteConfig } from "coral-framework/lib/router";
+import { GQLFEATURE_FLAG } from "coral-framework/schema";
 import { Spinner } from "coral-ui/components/v2";
 
 import { ModerateContainerQueryResponse } from "coral-admin/__generated__/ModerateContainerQuery.graphql";
@@ -16,64 +18,134 @@ interface RouteParams {
 }
 
 interface Props {
-  data: ModerateContainerQueryResponse;
+  data: ModerateContainerQueryResponse | null;
   router: Router;
   match: Match & { params: RouteParams };
 }
 
-class ModerateContainer extends React.Component<Props> {
-  public static routeConfig: RouteProps;
+const queueNames: QUEUE_NAME[] = [
+  "reported",
+  "pending",
+  "unmoderated",
+  "approved",
+  "rejected",
+];
 
-  public render() {
-    const allStories = !this.props.match.params.storyID;
-    // TODO: (tessalt) get active route in a better way
-    const queueName = [
+const ModerateContainer: FunctionComponent<Props> = ({
+  data,
+  match,
+  router,
+  children,
+}) => {
+  const allStories = !match.params.storyID;
+  const queueName = useMemo(
+    () =>
+      // TODO: (tessalt) get active route in a better way
+      queueNames.find((name) => match.location.pathname.includes(name)) ||
       "default",
-      "reported",
-      "pending",
-      "unmoderated",
-      "approved",
-      "rejected",
-    ].find((name) => {
-      return this.props.match.location.pathname.includes(name);
-    });
-    const { section } = parseModerationOptions(this.props.match);
+    [match.location.pathname]
+  );
 
-    if (!this.props.data) {
-      return (
-        <Moderate
-          moderationQueues={null}
-          story={null}
-          settings={null}
-          siteID={null}
-          section={section}
-          query={this.props.data}
-          routeParams={this.props.match.params}
-          queueName={queueName || "default"}
-          allStories={allStories}
-        >
-          <Spinner />
-        </Moderate>
-      );
+  // This guard is used to ensure that the current viewer has permission to
+  // moderate on this site. It's injected here because we get the result from
+  // relay here for the site that is referenced if this is supposed to moderate
+  // a story.
+  useEffect(() => {
+    // Wait for the data and viewer to become available.
+    if (!data || !data.viewer) {
+      return;
     }
 
+    // If the feature flag isn't enabled, we don't need to do anything!
+    if (!data.settings.featureFlags.includes(GQLFEATURE_FLAG.SITE_MODERATOR)) {
+      return;
+    }
+
+    // If the viewer isn't moderation scoped, nothing we need to do!
+    if (
+      !data.viewer.moderationScopes?.scoped ||
+      !data.viewer.moderationScopes.sites
+    ) {
+      return;
+    }
+
+    // Grab a reference for the following function to make the type checker
+    // happy.
+    const sites = data.viewer.moderationScopes.sites;
+    const redirect = () =>
+      router.push(
+        getModerationLink({
+          queue: queueName as QUEUE_NAME,
+          // We'll grab the first site in the moderation scopes (a user can only
+          // be scoped if there is at least one site).
+          siteID: sites[0].id,
+        })
+      );
+
+    // If we've loaded a specific story, we'll have the site on that story too,
+    // so check if we're allowed to moderate it.
+    if (data.story && !data.story.site.canModerate) {
+      redirect();
+      return;
+    }
+
+    // Get some options from the router.
+    const { siteID } = parseModerationOptions(match);
+
+    // If the viewer is moderation scoped, they cannot moderate under all sites.
+    if (!siteID) {
+      redirect();
+      return;
+    }
+
+    // Check to see if the user is allowed to moderate on this site given that
+    // they are already scoped. If the current site ID is not found, redirect
+    // them!
+    if (!sites.some(({ id }) => id === siteID)) {
+      redirect();
+      return;
+    }
+  }, [router, match, data]);
+
+  // Get some options for the moderate cards.
+  const { section } = parseModerationOptions(match);
+
+  if (!data) {
     return (
       <Moderate
-        moderationQueues={this.props.data.moderationQueues}
-        story={this.props.data.story || null}
-        siteID={this.props.data.story ? this.props.data.story.site.id : null}
+        moderationQueues={null}
+        story={null}
+        settings={null}
+        siteID={null}
         section={section}
-        routeParams={this.props.match.params}
-        query={this.props.data}
+        query={data}
+        viewer={null}
+        routeParams={match.params}
+        queueName={queueName}
         allStories={allStories}
-        settings={this.props.data.settings}
-        queueName={queueName || "default"}
       >
-        {this.props.children}
+        <Spinner />
       </Moderate>
     );
   }
-}
+
+  return (
+    <Moderate
+      moderationQueues={data.moderationQueues}
+      story={data.story || null}
+      siteID={data.story?.site.id || null}
+      section={section}
+      routeParams={match.params}
+      query={data}
+      viewer={data.viewer}
+      allStories={allStories}
+      settings={data.settings}
+      queueName={queueName}
+    >
+      {children}
+    </Moderate>
+  );
+};
 
 const enhanced = withRouteConfig<Props>({
   query: graphql`
@@ -83,21 +155,42 @@ const enhanced = withRouteConfig<Props>({
       $siteID: ID
       $section: SectionFilter
     ) {
+      ...SiteSelectorContainer_query
+      ...SectionSelectorContainer_query
+
       settings {
         ...ModerateSearchBarContainer_settings
+        ...SiteSelectorContainer_settings
+
+        featureFlags
       }
+
       story(id: $storyID) @include(if: $includeStory) {
         ...ModerateNavigationContainer_story
         ...ModerateSearchBarContainer_story
+
         site {
           id
+          canModerate
         }
       }
+
       moderationQueues(storyID: $storyID, siteID: $siteID, section: $section) {
         ...ModerateNavigationContainer_moderationQueues
       }
-      ...SiteSelectorContainer_query
-      ...SectionSelectorContainer_query
+
+      viewer {
+        ...SiteSelectorContainer_viewer
+
+        id
+        role
+        moderationScopes {
+          scoped
+          sites {
+            id
+          }
+        }
+      }
     }
   `,
   cacheConfig: { force: true },
@@ -108,8 +201,7 @@ const enhanced = withRouteConfig<Props>({
       storyID,
       siteID,
       section,
-      includeStory: Boolean(storyID),
-      includeSite: Boolean(siteID),
+      includeStory: !!storyID,
     };
   },
 })(withRouter(ModerateContainer));
diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateSearchBarContainer.tsx b/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateSearchBarContainer.tsx
index b4339ced9..0bc3c337f 100644
--- a/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateSearchBarContainer.tsx
+++ b/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateSearchBarContainer.tsx
@@ -104,12 +104,13 @@ function getStoryDetails(
 }
 
 function getContextOptionsWhenModeratingAll(
-  onClickOrEnter: ListBoxOptionClickOrEnterHandler
+  onClickOrEnter: ListBoxOptionClickOrEnterHandler,
+  siteID: string | null
 ): SearchBarOptions {
   return [
     {
       element: (
-        <Option href="/admin/moderate">
+        <Option href={getModerationLink({ siteID })}>
           <GoToAriaInfo />
           <Localized id="moderate-searchBar-allStories">
             <span>All stories</span>
@@ -125,7 +126,8 @@ function getContextOptionsWhenModeratingAll(
 function getContextOptionsWhenModeratingStory(
   onClickOrEnter: ListBoxOptionClickOrEnterHandler,
   settings: SettingsData | null,
-  story: ModerationQueuesData | null
+  story: ModerationQueuesData | null,
+  siteID: string | null
 ): SearchBarOptions {
   if (story === null || settings === null) {
     return [];
@@ -144,7 +146,13 @@ function getContextOptionsWhenModeratingStory(
       group: "CONTEXT",
     },
     {
-      element: <ModerateAllOption href="/admin/moderate" />,
+      element: (
+        <ModerateAllOption
+          href={getModerationLink({
+            siteID: siteID || (story && story.site.id),
+          })}
+        />
+      ),
       onClickOrEnter,
       group: "CONTEXT",
     },
@@ -269,11 +277,12 @@ function useSearchOptions(
 const ModerateSearchBarContainer: React.FunctionComponent<Props> = (props) => {
   const linkNavHandler = useLinkNavHandler(props.router);
   const contextOptions: PropTypesOf<typeof Bar>["options"] = props.allStories
-    ? getContextOptionsWhenModeratingAll(linkNavHandler)
+    ? getContextOptionsWhenModeratingAll(linkNavHandler, props.siteID)
     : getContextOptionsWhenModeratingStory(
         linkNavHandler,
         props.settings,
-        props.story
+        props.story,
+        props.siteID
       );
 
   const [searchOptions, onSearch] = useSearchOptions(
diff --git a/src/core/client/admin/routes/Moderate/Queue/ApprovedQueueRoute.tsx b/src/core/client/admin/routes/Moderate/Queue/ApprovedQueueRoute.tsx
index 4d51c3ecb..50d9ed405 100644
--- a/src/core/client/admin/routes/Moderate/Queue/ApprovedQueueRoute.tsx
+++ b/src/core/client/admin/routes/Moderate/Queue/ApprovedQueueRoute.tsx
@@ -36,11 +36,16 @@ export class ApprovedQueueRoute extends React.Component<
   };
 
   public render() {
+    if (!this.props.query.viewer) {
+      return null;
+    }
+
     const comments = this.props.query.comments.edges.map((edge) => edge.node);
     return (
       <IntersectionProvider>
         <Queue
           settings={this.props.query.settings}
+          viewer={this.props.query.viewer}
           comments={comments}
           onLoadMore={this.loadMore}
           hasLoadMore={this.props.relay.hasMore()}
@@ -111,6 +116,9 @@ const enhanced = (withPaginationContainer<
         settings {
           ...ModerateCardContainer_settings
         }
+        viewer {
+          ...ModerateCardContainer_viewer
+        }
       }
     `,
   },
diff --git a/src/core/client/admin/routes/Moderate/Queue/Queue.spec.tsx b/src/core/client/admin/routes/Moderate/Queue/Queue.spec.tsx
index 790f3fb60..cbefa1e89 100644
--- a/src/core/client/admin/routes/Moderate/Queue/Queue.spec.tsx
+++ b/src/core/client/admin/routes/Moderate/Queue/Queue.spec.tsx
@@ -13,6 +13,7 @@ it("renders correctly with load more", () => {
   const props: PropTypesOf<typeof QueueN> = {
     comments: [],
     settings: {},
+    viewer: {},
     onLoadMore: noop,
     hasLoadMore: true,
     disableLoadMore: false,
@@ -28,6 +29,7 @@ it("renders correctly without load more", () => {
   const props: PropTypesOf<typeof QueueN> = {
     comments: [],
     settings: {},
+    viewer: {},
     onLoadMore: noop,
     hasLoadMore: false,
     disableLoadMore: false,
diff --git a/src/core/client/admin/routes/Moderate/Queue/Queue.tsx b/src/core/client/admin/routes/Moderate/Queue/Queue.tsx
index 7ec90b74d..7ca064f11 100644
--- a/src/core/client/admin/routes/Moderate/Queue/Queue.tsx
+++ b/src/core/client/admin/routes/Moderate/Queue/Queue.tsx
@@ -19,6 +19,7 @@ interface Props {
     { id: string } & PropTypesOf<typeof ModerateCardContainer>["comment"]
   >;
   settings: PropTypesOf<typeof ModerateCardContainer>["settings"];
+  viewer: PropTypesOf<typeof ModerateCardContainer>["viewer"];
   onLoadMore: () => void;
   onViewNew?: () => void;
   hasLoadMore: boolean;
@@ -32,6 +33,7 @@ interface Props {
 const Queue: FunctionComponent<Props> = ({
   settings,
   comments,
+  viewer,
   hasLoadMore: hasMore,
   disableLoadMore,
   onLoadMore,
@@ -134,6 +136,7 @@ const Queue: FunctionComponent<Props> = ({
           <ModerateCardContainer
             key={comment.id}
             settings={settings}
+            viewer={viewer}
             comment={comment}
             danglingLogic={danglingLogic}
             showStoryInfo={Boolean(allStories)}
diff --git a/src/core/client/admin/routes/Moderate/Queue/QueueRoute.tsx b/src/core/client/admin/routes/Moderate/Queue/QueueRoute.tsx
index 027356cdb..faa163bf9 100644
--- a/src/core/client/admin/routes/Moderate/Queue/QueueRoute.tsx
+++ b/src/core/client/admin/routes/Moderate/Queue/QueueRoute.tsx
@@ -1,10 +1,5 @@
 import { Localized } from "@fluent/react/compat";
-import React, {
-  FunctionComponent,
-  useCallback,
-  useEffect,
-  useMemo,
-} from "react";
+import React, { FunctionComponent, useCallback, useEffect } from "react";
 import { graphql, GraphQLTaggedNode, RelayPaginationProp } from "react-relay";
 
 import { SectionFilter } from "coral-common/section";
@@ -22,6 +17,7 @@ import { GQLMODERATION_QUEUE } from "coral-framework/schema";
 
 import { QueueRoute_queue } from "coral-admin/__generated__/QueueRoute_queue.graphql";
 import { QueueRoute_settings } from "coral-admin/__generated__/QueueRoute_settings.graphql";
+import { QueueRoute_viewer } from "coral-admin/__generated__/QueueRoute_viewer.graphql";
 import { QueueRoutePaginationPendingQueryVariables } from "coral-admin/__generated__/QueueRoutePaginationPendingQuery.graphql";
 
 import EmptyMessage from "./EmptyMessage";
@@ -36,20 +32,31 @@ interface Props {
   queueName: GQLMODERATION_QUEUE;
   queue: QueueRoute_queue | null;
   settings: QueueRoute_settings | null;
+  viewer: QueueRoute_viewer | null;
   relay: RelayPaginationProp;
   emptyElement: React.ReactElement;
   storyID?: string | null;
   siteID?: string | null;
   section?: SectionFilter | null;
-  count?: string;
 }
 
 // TODO: use generated types
 const danglingLogic = (status: string) =>
   ["APPROVED", "REJECTED"].includes(status);
 
-export const QueueRoute: FunctionComponent<Props> = (props) => {
-  const [loadMore, isLoadingMore] = useLoadMore(props.relay, 10);
+export const QueueRoute: FunctionComponent<Props> = ({
+  isLoading,
+  queueName,
+  queue,
+  settings,
+  viewer,
+  relay,
+  emptyElement,
+  storyID = null,
+  siteID = null,
+  section,
+}) => {
+  const [loadMore, isLoadingMore] = useLoadMore(relay, 10);
   const subscribeToQueueCommentEntered = useSubscription(
     QueueCommentEnteredSubscription
   );
@@ -59,56 +66,62 @@ export const QueueRoute: FunctionComponent<Props> = (props) => {
   const viewNew = useMutation(QueueViewNewMutation);
   const onViewNew = useCallback(() => {
     void viewNew({
-      queue: props.queueName,
-      storyID: props.storyID || null,
-      siteID: props.siteID || null,
-      section: props.section,
+      queue: queueName,
+      storyID,
+      siteID,
+      section,
     });
-  }, [props.queueName, props.storyID, props.siteID, viewNew]);
+  }, [queueName, storyID, siteID, viewNew]);
+
+  // Handle subscribing and unsubscribing to the subscriptions.
   useEffect(() => {
     const vars = {
-      queue: props.queueName,
-      storyID: props.storyID || null,
-      siteID: props.siteID || null,
-      section: props.section,
+      queue: queueName,
+      storyID,
+      siteID,
+      section,
     };
+
     const disposable = combineDisposables(
       subscribeToQueueCommentEntered(vars),
       subscribeToQueueCommentLeft(vars)
     );
+
     return () => {
       disposable.dispose();
     };
   }, [
-    props.storyID,
-    props.siteID,
-    props.section,
-    props.queueName,
+    storyID,
+    siteID,
+    section,
+    queueName,
     subscribeToQueueCommentEntered,
     subscribeToQueueCommentLeft,
   ]);
-  const comments = useMemo(
-    () => props.queue?.comments.edges.map((edge) => edge.node),
-    [props.queue?.comments.edges]
-  );
-  if (props.isLoading) {
+
+  // It's never the case really that the query has loaded but queue or settings
+  // is null, but this was to appease the type system.
+  if (isLoading || !queue || !settings || !viewer) {
     return <LoadingQueue />;
   }
+
+  const comments = queue.comments.edges.map((edge) => edge.node);
+
   const viewNewCount =
-    (props.queue!.comments.viewNewEdges &&
-      props.queue!.comments.viewNewEdges.length) ||
-    0;
+    (queue.comments.viewNewEdges && queue.comments.viewNewEdges.length) || 0;
+
   return (
     <IntersectionProvider>
       <Queue
-        comments={comments!}
-        settings={props.settings!}
+        comments={comments}
+        settings={settings}
+        viewer={viewer}
         onLoadMore={loadMore}
-        hasLoadMore={props.relay.hasMore()}
+        hasLoadMore={relay.hasMore()}
         disableLoadMore={isLoadingMore}
         danglingLogic={danglingLogic}
-        emptyElement={props.emptyElement}
-        allStories={!props.storyID}
+        emptyElement={emptyElement}
+        allStories={!storyID}
         viewNewCount={viewNewCount}
         onViewNew={onViewNew}
       />
@@ -135,13 +148,14 @@ const createQueueRoute = (
 
       const { storyID, siteID, section } = parseModerationOptions(match);
 
-      if (!data || !data.moderationQueues) {
+      if (!data) {
         return (
           <Component
             isLoading
             queueName={queueName}
             queue={null}
             settings={null}
+            viewer={null}
             emptyElement={emptyElement}
             storyID={storyID}
             siteID={siteID}
@@ -149,6 +163,7 @@ const createQueueRoute = (
           />
         );
       }
+
       const queue =
         data.moderationQueues[Object.keys(data.moderationQueues)[0]];
 
@@ -158,6 +173,7 @@ const createQueueRoute = (
           queueName={queueName}
           queue={queue}
           settings={data.settings}
+          viewer={data.viewer}
           emptyElement={emptyElement}
           storyID={storyID}
           siteID={siteID}
@@ -198,6 +214,11 @@ const createQueueRoute = (
             ...ModerateCardContainer_settings
           }
         `,
+        viewer: graphql`
+          fragment QueueRoute_viewer on User {
+            ...ModerateCardContainer_viewer
+          }
+        `,
       },
       {
         direction: "forward",
@@ -243,6 +264,9 @@ export const PendingQueueRoute = createQueueRoute(
       settings {
         ...QueueRoute_settings
       }
+      viewer {
+        ...QueueRoute_viewer
+      }
     }
   `,
   graphql`
@@ -286,6 +310,9 @@ export const ReportedQueueRoute = createQueueRoute(
       settings {
         ...QueueRoute_settings
       }
+      viewer {
+        ...QueueRoute_viewer
+      }
     }
   `,
   graphql`
@@ -329,6 +356,9 @@ export const UnmoderatedQueueRoute = createQueueRoute(
       settings {
         ...QueueRoute_settings
       }
+      viewer {
+        ...QueueRoute_viewer
+      }
     }
   `,
   graphql`
diff --git a/src/core/client/admin/routes/Moderate/Queue/RejectedQueueRoute.tsx b/src/core/client/admin/routes/Moderate/Queue/RejectedQueueRoute.tsx
index a7328b654..af200a44c 100644
--- a/src/core/client/admin/routes/Moderate/Queue/RejectedQueueRoute.tsx
+++ b/src/core/client/admin/routes/Moderate/Queue/RejectedQueueRoute.tsx
@@ -36,11 +36,16 @@ export class RejectedQueueRoute extends React.Component<
   };
 
   public render() {
+    if (!this.props.query.viewer) {
+      return null;
+    }
+
     const comments = this.props.query.comments.edges.map((edge) => edge.node);
     return (
       <IntersectionProvider>
         <Queue
           settings={this.props.query.settings}
+          viewer={this.props.query.viewer}
           comments={comments}
           onLoadMore={this.loadMore}
           hasLoadMore={this.props.relay.hasMore()}
@@ -111,6 +116,9 @@ const enhanced = (withPaginationContainer<
         settings {
           ...ModerateCardContainer_settings
         }
+        viewer {
+          ...ModerateCardContainer_viewer
+        }
       }
     `,
   },
diff --git a/src/core/client/admin/routes/Moderate/SingleModerate/SingleModerateRoute.tsx b/src/core/client/admin/routes/Moderate/SingleModerate/SingleModerateRoute.tsx
index 3f904fde7..64eecc6dd 100644
--- a/src/core/client/admin/routes/Moderate/SingleModerate/SingleModerateRoute.tsx
+++ b/src/core/client/admin/routes/Moderate/SingleModerate/SingleModerateRoute.tsx
@@ -30,14 +30,20 @@ const SingleModerateRoute: FunctionComponent<Props> = (props) => {
     };
   }, [props.comment, subscribeToSingleModerate]);
 
+  if (!props.viewer) {
+    return null;
+  }
+
   if (!props.comment) {
     return <NotFound />;
   }
+
   return (
     <SingleModerate>
       <Queue
         comments={[props.comment]}
         settings={props.settings}
+        viewer={props.viewer}
         onLoadMore={noop}
         hasLoadMore={false}
         disableLoadMore={false}
@@ -57,6 +63,9 @@ const enhanced = withRouteConfig<Props, SingleModerateRouteQueryResponse>({
       settings {
         ...ModerateCardContainer_settings
       }
+      viewer {
+        ...ModerateCardContainer_viewer
+      }
     }
   `,
   cacheConfig: { force: true },
diff --git a/src/core/client/admin/routes/Moderate/SiteSelector/SiteSelector.tsx b/src/core/client/admin/routes/Moderate/SiteSelector/SiteSelector.tsx
index 936329054..2b0ab94cc 100644
--- a/src/core/client/admin/routes/Moderate/SiteSelector/SiteSelector.tsx
+++ b/src/core/client/admin/routes/Moderate/SiteSelector/SiteSelector.tsx
@@ -11,7 +11,10 @@ import SiteSelectorSite from "./SiteSelectorSite";
 import styles from "./SiteSelector.css";
 
 interface Props {
-  sites: Array<{ id: string } & PropTypesOf<typeof SiteSelectorSite>["site"]>;
+  scoped: boolean;
+  sites: ReadonlyArray<
+    { id: string } & PropTypesOf<typeof SiteSelectorSite>["site"]
+  >;
   queueName: string;
   onLoadMore: () => void;
   hasMore: boolean;
@@ -22,6 +25,7 @@ interface Props {
 
 const SiteSelector: FunctionComponent<Props> = ({
   sites,
+  scoped,
   queueName,
   loading,
   onLoadMore,
@@ -40,8 +44,7 @@ const SiteSelector: FunctionComponent<Props> = ({
       selected={
         <>
           {siteID && <SiteSelectorCurrentSiteQuery siteID={siteID} />}
-
-          {!siteID && (
+          {!scoped && !siteID && (
             <Localized id="site-selector-all-sites">
               <span className={styles.buttonText}>All sites</span>
             </Localized>
@@ -50,11 +53,13 @@ const SiteSelector: FunctionComponent<Props> = ({
       }
     >
       <>
-        <SiteSelectorSite
-          link={getModerationLink({ queue: queueName as QUEUE_NAME })}
-          site={null}
-          active={!siteID}
-        />
+        {!scoped && (
+          <SiteSelectorSite
+            link={getModerationLink({ queue: queueName as QUEUE_NAME })}
+            site={null}
+            active={!siteID}
+          />
+        )}
         {sites.map((s) => (
           <SiteSelectorSite
             link={getModerationLink({
diff --git a/src/core/client/admin/routes/Moderate/SiteSelector/SiteSelectorContainer.tsx b/src/core/client/admin/routes/Moderate/SiteSelector/SiteSelectorContainer.tsx
index 03be71ac6..70ce6a516 100644
--- a/src/core/client/admin/routes/Moderate/SiteSelector/SiteSelectorContainer.tsx
+++ b/src/core/client/admin/routes/Moderate/SiteSelector/SiteSelectorContainer.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { graphql, RelayPaginationProp } from "react-relay";
 
 import {
@@ -6,30 +6,57 @@ import {
   useRefetch,
   withPaginationContainer,
 } from "coral-framework/lib/relay";
+import { GQLFEATURE_FLAG } from "coral-framework/schema";
 
-import { SiteSelectorContainer_query as QueryData } from "coral-admin/__generated__/SiteSelectorContainer_query.graphql";
+import { SiteSelectorContainer_query } from "coral-admin/__generated__/SiteSelectorContainer_query.graphql";
+import { SiteSelectorContainer_settings } from "coral-admin/__generated__/SiteSelectorContainer_settings.graphql";
+import { SiteSelectorContainer_viewer } from "coral-admin/__generated__/SiteSelectorContainer_viewer.graphql";
 import { SiteSelectorContainerPaginationQueryVariables } from "coral-admin/__generated__/SiteSelectorContainerPaginationQuery.graphql";
 
 import SiteSelector from "./SiteSelector";
 
 interface Props {
-  query: QueryData | null;
+  query: SiteSelectorContainer_query | null;
+  viewer: SiteSelectorContainer_viewer | null;
+  settings: SiteSelectorContainer_settings | null;
   relay: RelayPaginationProp;
   queueName: string;
   siteID: string | null;
 }
 
 const SiteSelectorContainer: React.FunctionComponent<Props> = (props) => {
-  const sites = props.query
-    ? props.query.sites.edges.map((edge) => edge.node)
-    : [];
   const [loadMore, isLoadingMore] = useLoadMore(props.relay, 10);
   const [, isRefetching] = useRefetch<
     SiteSelectorContainerPaginationQueryVariables
   >(props.relay);
+  const { sites, scoped } = useMemo(() => {
+    // If the viewer is moderation scoped, then only provide those sites.
+    if (
+      props.settings &&
+      props.settings.featureFlags.includes(GQLFEATURE_FLAG.SITE_MODERATOR) &&
+      props.viewer &&
+      props.viewer.moderationScopes?.scoped &&
+      props.viewer.moderationScopes.sites
+    ) {
+      return { scoped: true, sites: props.viewer.moderationScopes.sites };
+    }
+
+    // As the moderation is not scoped, return the sites from the query instead.
+
+    if (props.query) {
+      return {
+        scoped: false,
+        sites: props.query.sites.edges.map((edge) => edge.node),
+      };
+    }
+
+    return { scoped: false, sites: [] };
+  }, [props.query, props.viewer, props.settings]);
+
   return (
     <SiteSelector
       loading={!props.query || isRefetching}
+      scoped={scoped}
       sites={sites}
       onLoadMore={loadMore}
       hasMore={!isRefetching && props.relay.hasMore()}
@@ -65,6 +92,22 @@ const enhanced = withPaginationContainer<
         }
       }
     `,
+    viewer: graphql`
+      fragment SiteSelectorContainer_viewer on User {
+        moderationScopes {
+          scoped
+          sites {
+            id
+            ...SiteSelectorSite_site
+          }
+        }
+      }
+    `,
+    settings: graphql`
+      fragment SiteSelectorContainer_settings on Settings {
+        featureFlags
+      }
+    `,
   },
   {
     direction: "forward",
@@ -97,4 +140,5 @@ const enhanced = withPaginationContainer<
     `,
   }
 )(SiteSelectorContainer);
+
 export default enhanced;
diff --git a/src/core/client/admin/routes/Moderate/__snapshots__/Moderate.spec.tsx.snap b/src/core/client/admin/routes/Moderate/__snapshots__/Moderate.spec.tsx.snap
index 6783bdad0..6b74e61da 100644
--- a/src/core/client/admin/routes/Moderate/__snapshots__/Moderate.spec.tsx.snap
+++ b/src/core/client/admin/routes/Moderate/__snapshots__/Moderate.spec.tsx.snap
@@ -22,7 +22,13 @@ exports[`renders correctly 1`] = `
       <Relay(SiteSelectorContainer)
         query=""
         queueName=""
+        settings={
+          Object {
+            "multisite": false,
+          }
+        }
         siteID={null}
+        viewer={null}
       />
     }
     story={Object {}}
diff --git a/src/core/client/admin/routes/Stories/StoryRow.tsx b/src/core/client/admin/routes/Stories/StoryRow.tsx
index 2a3417f32..b9c27ecae 100644
--- a/src/core/client/admin/routes/Stories/StoryRow.tsx
+++ b/src/core/client/admin/routes/Stories/StoryRow.tsx
@@ -21,6 +21,7 @@ interface Props {
   storyID: string;
   title: string | null;
   author: string | null;
+  readOnly: boolean;
   publishDate: string | null;
   story: PropTypesOf<typeof StoryActionsContainer>["story"] &
     PropTypesOf<typeof StoryStatusContainer>["story"];
@@ -38,12 +39,16 @@ const UserRow: FunctionComponent<Props> = (props) => (
     <TableCell className={styles.titleColumn}>
       <HorizontalGutter>
         <p>
-          <Link
-            to={getModerationLink({ storyID: props.storyID })}
-            as={TextLink}
-          >
-            {props.title || <NotAvailable />}
-          </Link>
+          {!props.readOnly ? (
+            <Link
+              to={getModerationLink({ storyID: props.storyID })}
+              as={TextLink}
+            >
+              {props.title || <NotAvailable />}
+            </Link>
+          ) : (
+            props.title || <NotAvailable />
+          )}
         </p>
         {(props.author || props.publishDate) && (
           <p className={styles.meta}>
@@ -78,7 +83,9 @@ const UserRow: FunctionComponent<Props> = (props) => (
       <StoryStatusContainer story={props.story} />
     </TableCell>
     <TableCell className={styles.actionsColumn}>
-      <StoryActionsContainer story={props.story} viewer={props.viewer} />
+      {!props.readOnly && (
+        <StoryActionsContainer story={props.story} viewer={props.viewer} />
+      )}
     </TableCell>
   </TableRow>
 );
diff --git a/src/core/client/admin/routes/Stories/StoryRowContainer.tsx b/src/core/client/admin/routes/Stories/StoryRowContainer.tsx
index 32aff9fa0..5a3094ee7 100644
--- a/src/core/client/admin/routes/Stories/StoryRowContainer.tsx
+++ b/src/core/client/admin/routes/Stories/StoryRowContainer.tsx
@@ -1,7 +1,7 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, useMemo } from "react";
 import { graphql } from "react-relay";
 
-import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { useDateTimeFormatter } from "coral-framework/hooks";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 
 import { StoryRowContainer_story as StoryData } from "coral-admin/__generated__/StoryRowContainer_story.graphql";
@@ -16,12 +16,31 @@ interface Props {
 }
 
 const StoryRowContainer: FunctionComponent<Props> = (props) => {
-  const { locales } = useCoralContext();
+  const formatter = useDateTimeFormatter({
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour12: true,
+    hour: "numeric",
+    minute: "2-digit",
+  });
+
   const title = props.story.metadata && props.story.metadata.title;
   const author = props.story.metadata && props.story.metadata.author;
-  const publishedAt = props.story.metadata && props.story.metadata.publishedAt;
+  const publishedAt = useMemo(() => {
+    if (!props.story.metadata || !props.story.metadata.publishedAt) {
+      return null;
+    }
+
+    return formatter(props.story.metadata.publishedAt);
+  }, [props.story, formatter]);
+
+  // A story is readOnly if the viewer can't moderate it.
+  const readOnly = !props.story.canModerate;
+
   return (
     <StoryRow
+      readOnly={readOnly}
       storyID={props.story.id}
       title={title}
       author={author}
@@ -33,18 +52,7 @@ const StoryRowContainer: FunctionComponent<Props> = (props) => {
       totalCount={props.story.commentCounts.totalPublished}
       reportedCount={props.story.moderationQueues.reported.count}
       pendingCount={props.story.moderationQueues.pending.count}
-      publishDate={
-        publishedAt
-          ? new Intl.DateTimeFormat(locales, {
-              day: "2-digit",
-              month: "2-digit",
-              year: "numeric",
-              hour12: true,
-              hour: "numeric",
-              minute: "2-digit",
-            }).format(new Date(publishedAt))
-          : null
-      }
+      publishDate={publishedAt}
     />
   );
 };
@@ -79,6 +87,7 @@ const enhanced = withFragmentContainer<Props>({
         name
         id
       }
+      canModerate
       isClosed
       ...StoryActionsContainer_story
       ...StoryStatusContainer_story
diff --git a/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap b/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
index 9dab380b1..f6026102e 100644
--- a/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
+++ b/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
@@ -291,7 +291,7 @@ exports[`renders community 1`] = `
             <td
               className="TableCell-root UserRow-memberSinceColumn TableCell-body"
             >
-              07/06/2018
+              07/06/2018, 6:24 PM
             </td>
             <td
               className="TableCell-root UserRow-roleColumn TableCell-body"
@@ -356,7 +356,7 @@ exports[`renders community 1`] = `
             <td
               className="TableCell-root UserRow-memberSinceColumn TableCell-body"
             >
-              07/06/2018
+              07/06/2018, 6:24 PM
             </td>
             <td
               className="TableCell-root UserRow-roleColumn TableCell-body"
@@ -454,7 +454,7 @@ exports[`renders community 1`] = `
             <td
               className="TableCell-root UserRow-memberSinceColumn TableCell-body"
             >
-              07/06/2018
+              07/06/2018, 6:24 PM
             </td>
             <td
               className="TableCell-root UserRow-roleColumn TableCell-body"
@@ -552,7 +552,7 @@ exports[`renders community 1`] = `
             <td
               className="TableCell-root UserRow-memberSinceColumn TableCell-body"
             >
-              07/06/2018
+              07/06/2018, 6:24 PM
             </td>
             <td
               className="TableCell-root UserRow-roleColumn TableCell-body"
@@ -574,7 +574,7 @@ exports[`renders community 1`] = `
                   type="button"
                 >
                   <span
-                    className="UserRoleText-root UserRoleText-commenter"
+                    className="UserRoleText-root"
                   >
                     Commenter
                   </span>
diff --git a/src/core/client/admin/test/community/community.spec.tsx b/src/core/client/admin/test/community/community.spec.tsx
index a3c8987ad..566fbe8ad 100644
--- a/src/core/client/admin/test/community/community.spec.tsx
+++ b/src/core/client/admin/test/community/community.spec.tsx
@@ -29,6 +29,7 @@ import {
   disabledLocalRegistration,
   emptyCommunityUsers,
   settings,
+  siteConnection,
   users,
 } from "../fixtures";
 
@@ -52,6 +53,7 @@ const createTestRenderer = async (
             return communityUsers;
           },
           viewer: () => viewer,
+          sites: () => siteConnection,
         },
       }),
       params.resolvers
@@ -249,7 +251,6 @@ it("change user role", async () => {
     within(popup).getByText("Staff", { selector: "button" }).props.onClick();
   });
 
-  within(userRow).getByText("Staff");
   expect(resolvers.Mutation!.updateUserRole!.called).toBe(true);
 });
 
diff --git a/src/core/client/admin/test/fixtures.ts b/src/core/client/admin/test/fixtures.ts
index 952ad0455..744a682e5 100644
--- a/src/core/client/admin/test/fixtures.ts
+++ b/src/core/client/admin/test/fixtures.ts
@@ -275,6 +275,7 @@ export const site = createFixture<GQLSite>({
   id: "site-id",
   createdAt: "2018-05-06T18:24:00.000Z",
   allowedOrigins: ["http://test-site.com"],
+  canModerate: true,
 });
 
 export const sites = createFixtures<GQLSite>([
@@ -283,12 +284,14 @@ export const sites = createFixtures<GQLSite>([
     id: "site-1",
     createdAt: "2018-07-06T18:24:00.000Z",
     allowedOrigins: ["http://test-site.com"],
+    canModerate: true,
   },
   {
     name: "Second Site",
     id: "site-2",
     createdAt: "2018-09-06T18:24:00.000Z",
     allowedOrigins: ["http://test-2-site.com"],
+    canModerate: true,
   },
 ]);
 
@@ -533,6 +536,7 @@ export const stories = createFixtures<GQLStory>([
       },
     },
     site: sites[0],
+    canModerate: true,
     settings: {
       mode: GQLSTORY_MODE.COMMENTS,
     },
@@ -563,6 +567,7 @@ export const stories = createFixtures<GQLStory>([
       },
     },
     site: sites[1],
+    canModerate: true,
     settings: {
       mode: GQLSTORY_MODE.COMMENTS,
     },
@@ -593,6 +598,7 @@ export const stories = createFixtures<GQLStory>([
       publishedAt: "2018-11-29T16:01:51.897Z",
     },
     site: sites[1],
+    canModerate: true,
     settings: {
       mode: GQLSTORY_MODE.COMMENTS,
     },
@@ -632,6 +638,7 @@ export const baseComment = createFixture<GQLComment>({
       createdAt: "2018-07-06T18:24:00.000Z",
     },
   ],
+  canModerate: true,
   revision: {
     actionCounts: {
       flag: {
diff --git a/src/core/client/admin/test/moderate/searchBar.spec.tsx b/src/core/client/admin/test/moderate/searchBar.spec.tsx
index 8fc1e07be..fcd562d93 100644
--- a/src/core/client/admin/test/moderate/searchBar.spec.tsx
+++ b/src/core/client/admin/test/moderate/searchBar.spec.tsx
@@ -270,6 +270,8 @@ describe("specified story", () => {
     moderateAllOptions.props.onClick({ button: 0, preventDefault: noop });
 
     // Expect a routing request was made to the right url.
-    expect(transitionControl.history[0].pathname).toBe("/admin/moderate");
+    expect(transitionControl.history[0].pathname).toBe(
+      "/admin/moderate/sites/site-1"
+    );
   });
 });
diff --git a/src/core/client/framework/hooks/index.ts b/src/core/client/framework/hooks/index.ts
index 1a13b3026..0dde5d606 100644
--- a/src/core/client/framework/hooks/index.ts
+++ b/src/core/client/framework/hooks/index.ts
@@ -1,6 +1,9 @@
+export { default as useDateTimeFormat } from "./useDateTimeFormat";
+export { default as useDateTimeFormatter } from "./useDateTimeFormatter";
 export { default as useEffectAfterMount } from "./useEffectAfterMount";
 export { default as usePrevious } from "./usePrevious";
 export { default as useEffectWhenChanged } from "./useEffectWhenChanged";
 export { default as useUUID } from "./useUUID";
 export { default as useToken } from "./useToken";
 export { default as useResizeObserver } from "./useResizeObserver";
+export { default as useToggleState } from "./useToggleState";
diff --git a/src/core/client/framework/hooks/useDateTimeFormat.ts b/src/core/client/framework/hooks/useDateTimeFormat.ts
new file mode 100644
index 000000000..2bbaedd25
--- /dev/null
+++ b/src/core/client/framework/hooks/useDateTimeFormat.ts
@@ -0,0 +1,11 @@
+import { useMemo } from "react";
+
+import { useCoralContext } from "coral-framework/lib/bootstrap";
+
+export default function useDateTimeFormat(options: Intl.DateTimeFormatOptions) {
+  const { locales } = useCoralContext();
+  return useMemo(() => new Intl.DateTimeFormat(locales, options), [
+    locales,
+    options,
+  ]);
+}
diff --git a/src/core/client/framework/hooks/useDateTimeFormatter.ts b/src/core/client/framework/hooks/useDateTimeFormatter.ts
new file mode 100644
index 000000000..c58e8c2ea
--- /dev/null
+++ b/src/core/client/framework/hooks/useDateTimeFormatter.ts
@@ -0,0 +1,21 @@
+import { useCallback } from "react";
+
+import useDateTimeFormat from "./useDateTimeFormat";
+
+export default function useDateTimeFormatter(
+  options: Intl.DateTimeFormatOptions
+) {
+  const formatter = useDateTimeFormat(options);
+  const format = useCallback(
+    (date: string | number | Date) => {
+      if (typeof date === "string" || typeof date === "number") {
+        return formatter.format(new Date(date));
+      }
+
+      return formatter.format(date);
+    },
+    [formatter]
+  );
+
+  return format;
+}
diff --git a/src/core/client/framework/hooks/useToggleState.ts b/src/core/client/framework/hooks/useToggleState.ts
new file mode 100644
index 000000000..4071e3526
--- /dev/null
+++ b/src/core/client/framework/hooks/useToggleState.ts
@@ -0,0 +1,12 @@
+import { Dispatch, SetStateAction, useCallback, useState } from "react";
+
+function useToggleState(
+  initialState = false
+): [boolean, Dispatch<SetStateAction<boolean>>, () => void] {
+  const [state, setState] = useState<boolean>(initialState);
+  const toggleState = useCallback(() => setState((s) => !s), [setState]);
+
+  return [state, setState, toggleState];
+}
+
+export default useToggleState;
diff --git a/src/core/client/stream/App/TabBarContainer.tsx b/src/core/client/stream/App/TabBarContainer.tsx
index 0805ca9bb..db1cdda9e 100644
--- a/src/core/client/stream/App/TabBarContainer.tsx
+++ b/src/core/client/stream/App/TabBarContainer.tsx
@@ -35,6 +35,7 @@ export class TabBarContainer extends Component<Props> {
     const {
       local: { activeTab },
       viewer,
+      story,
     } = this.props;
 
     return (
@@ -47,7 +48,10 @@ export class TabBarContainer extends Component<Props> {
         activeTab={activeTab}
         showProfileTab={Boolean(viewer)}
         showConfigureTab={
-          !!viewer && can(viewer, Ability.CHANGE_STORY_CONFIGURATION)
+          !!viewer &&
+          !!story &&
+          story.canModerate &&
+          can(viewer, Ability.CHANGE_STORY_CONFIGURATION)
         }
         onTabClick={this.handleSetActiveTab}
       />
@@ -71,6 +75,7 @@ const enhanced = withSetActiveTabMutation(
       `,
       story: graphql`
         fragment TabBarContainer_story on Story {
+          canModerate
           settings {
             mode
           }
diff --git a/src/core/client/stream/common/ModerateStream/ModerateStreamContainer.tsx b/src/core/client/stream/common/ModerateStream/ModerateStreamContainer.tsx
index 0da7512df..6531bb17a 100644
--- a/src/core/client/stream/common/ModerateStream/ModerateStreamContainer.tsx
+++ b/src/core/client/stream/common/ModerateStream/ModerateStreamContainer.tsx
@@ -26,7 +26,7 @@ interface Props {
 const ModerateStreamContainer: FunctionComponent<Props> = ({
   local: { accessToken },
   settings,
-  story: { id },
+  story: { id, canModerate },
   viewer,
 }) => {
   const href = useMemo(() => {
@@ -42,7 +42,7 @@ const ModerateStreamContainer: FunctionComponent<Props> = ({
     return link;
   }, [accessToken, settings, id]);
 
-  if (!viewer || !can(viewer, Ability.MODERATE)) {
+  if (!canModerate || !viewer || !can(viewer, Ability.MODERATE)) {
     return null;
   }
 
@@ -80,6 +80,7 @@ const enhanced = withFragmentContainer<Props>({
   story: graphql`
     fragment ModerateStreamContainer_story on Story {
       id
+      canModerate
     }
   `,
   viewer: graphql`
diff --git a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.spec.tsx b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.spec.tsx
index 7b0203b61..1130ac0a2 100644
--- a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.spec.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.spec.tsx
@@ -22,6 +22,7 @@ function createDefaultProps(add: DeepPartial<Props> = {}): Props {
       story: {
         url: "http://localhost/story",
         isClosed: false,
+        canModerate: false,
         settings: {
           mode: "COMMENTS",
         },
diff --git a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
index d5e051a78..12f6076ff 100644
--- a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
@@ -271,6 +271,7 @@ export class CommentContainer extends Component<Props, State> {
     );
     const showCaret =
       this.props.viewer &&
+      this.props.story.canModerate &&
       can(this.props.viewer, Ability.MODERATE) &&
       !this.props.hideModerationCarat;
 
@@ -537,6 +538,7 @@ const enhanced = withContext(({ eventEmitter }) => ({ eventEmitter }))(
           fragment CommentContainer_story on Story {
             url
             isClosed
+            canModerate
             settings {
               mode
             }
diff --git a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
index b25d0c61f..4d2ba7e71 100644
--- a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
+++ b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
@@ -69,6 +69,7 @@ exports[`hide reply button 1`] = `
                 commentID="comment-id"
                 story={
                   Object {
+                    "canModerate": false,
                     "isClosed": false,
                     "settings": Object {
                       "mode": "COMMENTS",
@@ -201,6 +202,7 @@ exports[`hide reply button 1`] = `
             }
             story={
               Object {
+                "canModerate": false,
                 "isClosed": false,
                 "settings": Object {
                   "mode": "COMMENTS",
@@ -333,6 +335,7 @@ exports[`hide reply button 1`] = `
             }
             story={
               Object {
+                "canModerate": false,
                 "isClosed": false,
                 "settings": Object {
                   "mode": "COMMENTS",
@@ -458,6 +461,7 @@ exports[`renders body only 1`] = `
                 commentID="comment-id"
                 story={
                   Object {
+                    "canModerate": false,
                     "isClosed": false,
                     "settings": Object {
                       "mode": "COMMENTS",
@@ -590,6 +594,7 @@ exports[`renders body only 1`] = `
             }
             story={
               Object {
+                "canModerate": false,
                 "isClosed": false,
                 "settings": Object {
                   "mode": "COMMENTS",
@@ -722,6 +727,7 @@ exports[`renders body only 1`] = `
             }
             story={
               Object {
+                "canModerate": false,
                 "isClosed": false,
                 "settings": Object {
                   "mode": "COMMENTS",
@@ -847,6 +853,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
                 commentID="comment-id"
                 story={
                   Object {
+                    "canModerate": false,
                     "isClosed": false,
                     "settings": Object {
                       "mode": "COMMENTS",
@@ -979,6 +986,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
             }
             story={
               Object {
+                "canModerate": false,
                 "isClosed": false,
                 "settings": Object {
                   "mode": "COMMENTS",
@@ -1111,6 +1119,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
             }
             story={
               Object {
+                "canModerate": false,
                 "isClosed": false,
                 "settings": Object {
                   "mode": "COMMENTS",
@@ -1236,6 +1245,7 @@ exports[`renders disabled reply when story is closed 1`] = `
                 commentID="comment-id"
                 story={
                   Object {
+                    "canModerate": false,
                     "isClosed": true,
                     "settings": Object {
                       "mode": "COMMENTS",
@@ -1368,6 +1378,7 @@ exports[`renders disabled reply when story is closed 1`] = `
             }
             story={
               Object {
+                "canModerate": false,
                 "isClosed": true,
                 "settings": Object {
                   "mode": "COMMENTS",
@@ -1500,6 +1511,7 @@ exports[`renders disabled reply when story is closed 1`] = `
             }
             story={
               Object {
+                "canModerate": false,
                 "isClosed": true,
                 "settings": Object {
                   "mode": "COMMENTS",
@@ -1629,6 +1641,7 @@ exports[`renders in reply to 1`] = `
                 commentID="comment-id"
                 story={
                   Object {
+                    "canModerate": false,
                     "isClosed": false,
                     "settings": Object {
                       "mode": "COMMENTS",
@@ -1773,6 +1786,7 @@ exports[`renders in reply to 1`] = `
             }
             story={
               Object {
+                "canModerate": false,
                 "isClosed": false,
                 "settings": Object {
                   "mode": "COMMENTS",
@@ -1917,6 +1931,7 @@ exports[`renders in reply to 1`] = `
             }
             story={
               Object {
+                "canModerate": false,
                 "isClosed": false,
                 "settings": Object {
                   "mode": "COMMENTS",
@@ -2046,6 +2061,7 @@ exports[`renders username and body 1`] = `
                 commentID="comment-id"
                 story={
                   Object {
+                    "canModerate": false,
                     "isClosed": false,
                     "settings": Object {
                       "mode": "COMMENTS",
@@ -2178,6 +2194,7 @@ exports[`renders username and body 1`] = `
             }
             story={
               Object {
+                "canModerate": false,
                 "isClosed": false,
                 "settings": Object {
                   "mode": "COMMENTS",
@@ -2310,6 +2327,7 @@ exports[`renders username and body 1`] = `
             }
             story={
               Object {
+                "canModerate": false,
                 "isClosed": false,
                 "settings": Object {
                   "mode": "COMMENTS",
@@ -2444,6 +2462,7 @@ exports[`shows conversation link 1`] = `
                 commentID="comment-id"
                 story={
                   Object {
+                    "canModerate": false,
                     "isClosed": false,
                     "settings": Object {
                       "mode": "COMMENTS",
@@ -2582,6 +2601,7 @@ exports[`shows conversation link 1`] = `
             }
             story={
               Object {
+                "canModerate": false,
                 "isClosed": false,
                 "settings": Object {
                   "mode": "COMMENTS",
@@ -2714,6 +2734,7 @@ exports[`shows conversation link 1`] = `
             }
             story={
               Object {
+                "canModerate": false,
                 "isClosed": false,
                 "settings": Object {
                   "mode": "COMMENTS",
diff --git a/src/core/client/stream/tabs/Comments/Stream/DeleteAccount/StreamDeletionRequestCalloutContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/DeleteAccount/StreamDeletionRequestCalloutContainer.tsx
index a74574e02..0989c754f 100644
--- a/src/core/client/stream/tabs/Comments/Stream/DeleteAccount/StreamDeletionRequestCalloutContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/DeleteAccount/StreamDeletionRequestCalloutContainer.tsx
@@ -1,9 +1,9 @@
 import { Localized } from "@fluent/react/compat";
-import React, { FunctionComponent, useCallback } from "react";
+import React, { FunctionComponent, useCallback, useMemo } from "react";
 import { graphql } from "react-relay";
 
 import { SCHEDULED_DELETION_WINDOW_DURATION } from "coral-common/constants";
-import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { useDateTimeFormatter } from "coral-framework/hooks";
 import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
 import CLASSES from "coral-stream/classes";
 import CancelAccountDeletionMutation from "coral-stream/mutations/CancelAccountDeletionMutation";
@@ -18,16 +18,6 @@ interface Props {
   viewer: StreamDeletionRequestCalloutContainer_viewer;
 }
 
-const formatter = (locales: string[], date: Date) =>
-  Intl.DateTimeFormat(locales, {
-    year: "numeric",
-    month: "numeric",
-    day: "numeric",
-    hour: "numeric",
-    minute: "numeric",
-    second: "numeric",
-  }).format(date);
-
 const subtractSeconds = (date: Date, seconds: number) => {
   return new Date(date.getTime() - seconds * 1000);
 };
@@ -35,26 +25,40 @@ const subtractSeconds = (date: Date, seconds: number) => {
 const StreamDeletionRequestCalloutContainer: FunctionComponent<Props> = ({
   viewer,
 }) => {
-  const { locales } = useCoralContext();
+  const formatter = useDateTimeFormatter({
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+  });
 
   const cancelAccountDeletion = useMutation(CancelAccountDeletionMutation);
   const cancelDeletion = useCallback(() => {
     void cancelAccountDeletion();
   }, [cancelAccountDeletion]);
 
-  const deletionDate = viewer.scheduledDeletionDate
-    ? formatter(locales, new Date(viewer.scheduledDeletionDate))
-    : null;
+  const deletionDate = useMemo(
+    () =>
+      viewer.scheduledDeletionDate
+        ? formatter(viewer.scheduledDeletionDate)
+        : null,
+    [viewer, formatter]
+  );
 
-  const requestDate = viewer.scheduledDeletionDate
-    ? formatter(
-        locales,
-        subtractSeconds(
-          new Date(viewer.scheduledDeletionDate),
-          SCHEDULED_DELETION_WINDOW_DURATION
-        )
-      )
-    : null;
+  const requestDate = useMemo(
+    () =>
+      viewer.scheduledDeletionDate
+        ? formatter(
+            subtractSeconds(
+              new Date(viewer.scheduledDeletionDate),
+              SCHEDULED_DELETION_WINDOW_DURATION
+            )
+          )
+        : null,
+    [viewer, formatter]
+  );
 
   return (
     <>
diff --git a/src/core/client/stream/tabs/Comments/Stream/SuspendedInfo/SuspendedInfo.tsx b/src/core/client/stream/tabs/Comments/Stream/SuspendedInfo/SuspendedInfo.tsx
index 3cd6cecf1..946f01d28 100644
--- a/src/core/client/stream/tabs/Comments/Stream/SuspendedInfo/SuspendedInfo.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/SuspendedInfo/SuspendedInfo.tsx
@@ -1,7 +1,7 @@
 import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useMemo } from "react";
 
-import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { useDateTimeFormatter } from "coral-framework/hooks";
 import { Icon } from "coral-ui/components/v2";
 import { CallOut } from "coral-ui/components/v3";
 
@@ -13,17 +13,15 @@ interface Props {
 }
 
 const SuspendedInfo: FunctionComponent<Props> = ({ until, organization }) => {
-  const { locales } = useCoralContext();
-  const untilDate = useMemo(() => {
-    const formatter = new Intl.DateTimeFormat(locales, {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-      hour: "numeric",
-      minute: "2-digit",
-    });
-    return formatter.format(new Date(until));
-  }, [locales, until]);
+  const formatter = useDateTimeFormatter({
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+  const untilDate = useMemo(() => formatter(until), [formatter, until]);
+
   return (
     <CallOut
       color="negative"
diff --git a/src/core/client/stream/tabs/Profile/DeletionRequest/DeletionRequestCalloutContainer.tsx b/src/core/client/stream/tabs/Profile/DeletionRequest/DeletionRequestCalloutContainer.tsx
index 3e69491d0..73e3a8723 100644
--- a/src/core/client/stream/tabs/Profile/DeletionRequest/DeletionRequestCalloutContainer.tsx
+++ b/src/core/client/stream/tabs/Profile/DeletionRequest/DeletionRequestCalloutContainer.tsx
@@ -1,9 +1,9 @@
 import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
-import React, { FunctionComponent, useCallback } from "react";
+import React, { FunctionComponent, useCallback, useMemo } from "react";
 import { graphql } from "react-relay";
 
-import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { useDateTimeFormatter } from "coral-framework/hooks";
 import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
 import CLASSES from "coral-stream/classes";
 import CancelAccountDeletionMutation from "coral-stream/mutations/CancelAccountDeletionMutation";
@@ -21,27 +21,31 @@ interface Props {
 const DeletionRequestCalloutContainer: FunctionComponent<Props> = ({
   viewer,
 }) => {
-  if (!viewer.scheduledDeletionDate) {
-    return null;
-  }
-
   const cancelDeletionMutation = useMutation(CancelAccountDeletionMutation);
   const cancelDeletion = useCallback(() => {
     void cancelDeletionMutation();
   }, [cancelDeletionMutation]);
 
-  const { locales } = useCoralContext();
+  const formatter = useDateTimeFormatter({
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+  });
 
-  const deletionDate = viewer.scheduledDeletionDate
-    ? Intl.DateTimeFormat(locales, {
-        year: "numeric",
-        month: "numeric",
-        day: "numeric",
-        hour: "numeric",
-        minute: "numeric",
-        second: "numeric",
-      }).format(new Date(viewer.scheduledDeletionDate))
-    : null;
+  const deletionDate = useMemo(
+    () =>
+      viewer.scheduledDeletionDate
+        ? formatter(viewer.scheduledDeletionDate)
+        : null,
+    [viewer, formatter]
+  );
+
+  if (!viewer.scheduledDeletionDate) {
+    return null;
+  }
 
   return (
     <div
diff --git a/src/core/client/stream/tabs/Profile/MyComments/DownloadCommentsContainer.tsx b/src/core/client/stream/tabs/Profile/MyComments/DownloadCommentsContainer.tsx
index f1efd05ca..2cc690f54 100644
--- a/src/core/client/stream/tabs/Profile/MyComments/DownloadCommentsContainer.tsx
+++ b/src/core/client/stream/tabs/Profile/MyComments/DownloadCommentsContainer.tsx
@@ -6,7 +6,7 @@ import { graphql } from "react-relay";
 import { DOWNLOAD_LIMIT_TIMEFRAME_DURATION } from "coral-common/constants";
 import { reduceSeconds } from "coral-common/helpers/i18n";
 import TIME from "coral-common/time";
-import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { useDateTimeFormatter } from "coral-framework/hooks";
 import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
 import CLASSES from "coral-stream/classes";
 import { Flex, Icon } from "coral-ui/components/v2";
@@ -34,8 +34,16 @@ const DownloadCommentsContainer: FunctionComponent<Props> = ({ viewer }) => {
       setShowErrorMessage(true);
     }
   }, [requestComments, setShowSuccessMessage, setShowErrorMessage]);
+  const formatter = useDateTimeFormatter({
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour12: true,
+    hour: "numeric",
+    minute: "2-digit",
+    timeZoneName: "short",
+  });
 
-  const { locales } = useCoralContext();
   const lastDownloadedAt = viewer.lastDownloadedAt
     ? new Date(viewer.lastDownloadedAt)
     : null;
@@ -45,15 +53,7 @@ const DownloadCommentsContainer: FunctionComponent<Props> = ({ viewer }) => {
   const canDownload =
     !lastDownloadedAt || sinceLastDownload >= DOWNLOAD_LIMIT_TIMEFRAME_DURATION;
   const tilCanDownload = DOWNLOAD_LIMIT_TIMEFRAME_DURATION - sinceLastDownload;
-  const formatter = new Intl.DateTimeFormat(locales, {
-    day: "2-digit",
-    month: "2-digit",
-    year: "numeric",
-    hour12: true,
-    hour: "numeric",
-    minute: "2-digit",
-    timeZoneName: "short",
-  });
+
   const { scaled, unit } = reduceSeconds(tilCanDownload, [
     TIME.DAY,
     TIME.HOUR,
@@ -98,7 +98,7 @@ const DownloadCommentsContainer: FunctionComponent<Props> = ({ viewer }) => {
           {lastDownloadedAt && !showSuccessMessage && (
             <Localized
               id="profile-account-download-comments-yourMostRecentRequest"
-              $timeStamp={formatter.format(lastDownloadedAt)}
+              $timeStamp={formatter(lastDownloadedAt)}
             >
               <div
                 className={cn(
@@ -108,7 +108,7 @@ const DownloadCommentsContainer: FunctionComponent<Props> = ({ viewer }) => {
               >
                 Your most recent request was within the last 14 days. You may
                 request to download your comments again on:{" "}
-                {formatter.format(lastDownloadedAt)}.
+                {formatter(lastDownloadedAt)}.
               </div>
             </Localized>
           )}
diff --git a/src/core/client/stream/tabs/Profile/Settings/ChangeUsername/ChangeUsernameContainer.tsx b/src/core/client/stream/tabs/Profile/Settings/ChangeUsername/ChangeUsernameContainer.tsx
index 4cb447b9c..4718ca429 100644
--- a/src/core/client/stream/tabs/Profile/Settings/ChangeUsername/ChangeUsernameContainer.tsx
+++ b/src/core/client/stream/tabs/Profile/Settings/ChangeUsername/ChangeUsernameContainer.tsx
@@ -14,7 +14,7 @@ import { ALLOWED_USERNAME_CHANGE_TIMEFRAME_DURATION } from "coral-common/constan
 import { reduceSeconds } from "coral-common/helpers/i18n";
 import TIME from "coral-common/time";
 import getAuthenticationIntegrations from "coral-framework/helpers/getAuthenticationIntegrations";
-import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { useDateTimeFormatter } from "coral-framework/hooks";
 import { InvalidRequestError } from "coral-framework/lib/errors";
 import { useViewerEvent } from "coral-framework/lib/events";
 import { streamColorFromMeta } from "coral-framework/lib/form";
@@ -150,9 +150,7 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
     [updateUsername]
   );
 
-  const { locales } = useCoralContext();
-
-  const formatter = new Intl.DateTimeFormat(locales, {
+  const formatter = useDateTimeFormatter({
     day: "2-digit",
     month: "2-digit",
     year: "numeric",
@@ -224,18 +222,13 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
             $value={FREQUENCYSCALED.scaled}
             $unit={FREQUENCYSCALED.unit}
             $nextUpdate={
-              canChangeUsernameDate
-                ? formatter.format(canChangeUsernameDate)
-                : null
+              canChangeUsernameDate ? formatter(canChangeUsernameDate) : null
             }
           >
             <div className={cn(styles.tooSoon, CLASSES.myUsername.tooSoon)}>
               You changed your username within the last {FREQUENCYSCALED.scaled}{" "}
               {FREQUENCYSCALED.unit}. You may change your username again on:{" "}
-              {canChangeUsernameDate
-                ? formatter.format(canChangeUsernameDate)
-                : null}
-              .
+              {canChangeUsernameDate ? formatter(canChangeUsernameDate) : null}.
             </div>
           </Localized>
         </div>
diff --git a/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/DeleteAccountContainer.tsx b/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/DeleteAccountContainer.tsx
index 4a0b3fd2b..c374c5b50 100644
--- a/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/DeleteAccountContainer.tsx
+++ b/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/DeleteAccountContainer.tsx
@@ -3,7 +3,7 @@ import cn from "classnames";
 import React, { FunctionComponent, useCallback, useState } from "react";
 import { graphql } from "react-relay";
 
-import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { useDateTimeFormatter } from "coral-framework/hooks";
 import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
 import CLASSES from "coral-stream/classes";
 import CancelAccountDeletionMutation from "coral-stream/mutations/CancelAccountDeletionMutation";
@@ -41,17 +41,17 @@ const DeleteAccountContainer: FunctionComponent<Props> = ({
     void cancelAccountDeletion();
   }, [cancelAccountDeletion]);
 
-  const { locales } = useCoralContext();
+  const formatter = useDateTimeFormatter({
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+  });
 
   const deletionDate = viewer.scheduledDeletionDate
-    ? Intl.DateTimeFormat(locales, {
-        year: "numeric",
-        month: "numeric",
-        day: "numeric",
-        hour: "numeric",
-        minute: "numeric",
-        second: "numeric",
-      }).format(new Date(viewer.scheduledDeletionDate))
+    ? formatter(viewer.scheduledDeletionDate)
     : null;
 
   return (
diff --git a/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/CompletionPage.tsx b/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/CompletionPage.tsx
index 82dd8ea51..d4adf6803 100644
--- a/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/CompletionPage.tsx
+++ b/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/CompletionPage.tsx
@@ -2,7 +2,7 @@ import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
 import React, { FunctionComponent, useCallback } from "react";
 
-import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { useDateTimeFormatter } from "coral-framework/hooks";
 import CLASSES from "coral-stream/classes";
 import { Flex } from "coral-ui/components/v2";
 import { Button } from "coral-ui/components/v3";
@@ -28,17 +28,17 @@ const CompletionPage: FunctionComponent<Props> = ({
     onClose();
   }, [onClose]);
 
-  const { locales } = useCoralContext();
+  const formatter = useDateTimeFormatter({
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+  });
 
   const formattedDate = scheduledDeletionDate
-    ? Intl.DateTimeFormat(locales, {
-        year: "numeric",
-        month: "numeric",
-        day: "numeric",
-        hour: "numeric",
-        minute: "numeric",
-        second: "numeric",
-      }).format(new Date(scheduledDeletionDate))
+    ? formatter(scheduledDeletionDate)
     : "";
 
   return (
diff --git a/src/core/client/stream/test/fixtures.ts b/src/core/client/stream/test/fixtures.ts
index b7db940ec..a6e1f174d 100644
--- a/src/core/client/stream/test/fixtures.ts
+++ b/src/core/client/stream/test/fixtures.ts
@@ -122,6 +122,7 @@ export const site = createFixture<GQLSite>({
   id: "site-id",
   createdAt: "2018-05-06T18:24:00.000Z",
   allowedOrigins: ["http://test-site.com"],
+  canModerate: true,
 });
 
 export const settingsWithoutLocalAuth = createFixture<GQLSettings>(
@@ -297,6 +298,7 @@ export const baseStory = createFixture<GQLStory>({
     mode: GQLSTORY_MODE.COMMENTS,
     experts: [],
   },
+  canModerate: true,
   site,
 });
 
diff --git a/src/core/client/stream/test/helpers/fixture.ts b/src/core/client/stream/test/helpers/fixture.ts
index 16054ca25..203a8f9d9 100644
--- a/src/core/client/stream/test/helpers/fixture.ts
+++ b/src/core/client/stream/test/helpers/fixture.ts
@@ -120,6 +120,7 @@ export function createStory(createComments = true) {
       metadata: {
         title: uuid(),
       },
+      canModerate: true,
       isClosed: false,
       commentCounts: {
         totalPublished: 0,
diff --git a/src/core/client/ui/components/AbsoluteTime/AbsoluteTime.tsx b/src/core/client/ui/components/AbsoluteTime/AbsoluteTime.tsx
index 0fd61dae8..1bbdff803 100644
--- a/src/core/client/ui/components/AbsoluteTime/AbsoluteTime.tsx
+++ b/src/core/client/ui/components/AbsoluteTime/AbsoluteTime.tsx
@@ -1,31 +1,24 @@
 import React, { FunctionComponent, useMemo } from "react";
 
-import { Typography, useUIContext } from "coral-ui/components";
+import { Typography } from "coral-ui/components";
+import { useDateTimeFormatter } from "coral-ui/hooks";
 import { PropTypesOf } from "coral-ui/types";
 
 interface Props {
   date: string;
   className?: string;
-  locales?: string[];
 }
 
-const AbsoluteTime: FunctionComponent<Props> = ({
-  date,
-  className,
-  locales: localesFromProps,
-}) => {
-  const { locales: localesFromContext } = useUIContext();
-  const locales = localesFromProps || localesFromContext || ["en-US"];
-  const formatted = useMemo(() => {
-    const formatter = new Intl.DateTimeFormat(locales, {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-      hour: "numeric",
-      minute: "2-digit",
-    });
-    return formatter.format(new Date(date));
-  }, [locales, date]);
+const AbsoluteTime: FunctionComponent<Props> = ({ date, className }) => {
+  const formatter = useDateTimeFormatter({
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+  const formatted = useMemo(() => formatter(date), [formatter, date]);
+
   return (
     <Typography className={className} variant="timestamp">
       {formatted}
diff --git a/src/core/client/ui/components/v2/AbsoluteTime/AbsoluteTime.tsx b/src/core/client/ui/components/v2/AbsoluteTime/AbsoluteTime.tsx
index 007b9909b..9dd0d535c 100644
--- a/src/core/client/ui/components/v2/AbsoluteTime/AbsoluteTime.tsx
+++ b/src/core/client/ui/components/v2/AbsoluteTime/AbsoluteTime.tsx
@@ -1,31 +1,24 @@
 import React, { FunctionComponent, useMemo } from "react";
 
-import { useUIContext } from "coral-ui/components/v2";
+import { useDateTimeFormatter } from "coral-ui/hooks";
 import { PropTypesOf } from "coral-ui/types";
 
 interface Props {
   date: string;
   className?: string;
-  locales?: string[];
 }
 
-const AbsoluteTime: FunctionComponent<Props> = ({
-  date,
-  className,
-  locales: localesFromProps,
-}) => {
-  const { locales: localesFromContext } = useUIContext();
-  const locales = localesFromProps || localesFromContext || ["en-US"];
-  const formatted = useMemo(() => {
-    const formatter = new Intl.DateTimeFormat(locales, {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-      hour: "numeric",
-      minute: "2-digit",
-    });
-    return formatter.format(new Date(date));
-  }, [locales, date]);
+const AbsoluteTime: FunctionComponent<Props> = ({ date, className }) => {
+  const formatter = useDateTimeFormatter({
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+
+  const formatted = useMemo(() => formatter(date), [formatter, date]);
+
   return <span className={className}>{formatted}</span>;
 };
 
diff --git a/src/core/client/ui/components/v2/Popover/Popover.tsx b/src/core/client/ui/components/v2/Popover/Popover.tsx
index 3f3fd42d1..6f3c014a8 100644
--- a/src/core/client/ui/components/v2/Popover/Popover.tsx
+++ b/src/core/client/ui/components/v2/Popover/Popover.tsx
@@ -40,7 +40,13 @@ interface ChildrenRenderProps {
 }
 
 interface PopoverProps {
-  body: (props: BodyRenderProps) => React.ReactNode | React.ReactElement<any>;
+  /**
+   * body supports render props from the body or a react node itself.
+   */
+  body:
+    | ((props: BodyRenderProps) => React.ReactNode | React.ReactElement<any>)
+    | React.ReactNode
+    | React.ReactElement<any>;
   children: (props: ChildrenRenderProps) => React.ReactNode;
   description?: string;
   id: string;
diff --git a/src/core/client/ui/hooks/index.ts b/src/core/client/ui/hooks/index.ts
index 32101d597..3950c37d2 100644
--- a/src/core/client/ui/hooks/index.ts
+++ b/src/core/client/ui/hooks/index.ts
@@ -2,4 +2,6 @@ export { default as useFocus } from "./useFocus";
 export { default as usePreventFocusLoss } from "./usePreventFocusLoss";
 export { default as useBlurOnEsc } from "./useBlurOnEsc";
 export { default as useComboBox } from "./useComboBox";
+export { default as useDateTimeFormat } from "./useDateTimeFormat";
+export { default as useDateTimeFormatter } from "./useDateTimeFormatter";
 export { default as useHotkey } from "./useHotkey";
diff --git a/src/core/client/ui/hooks/useDateTimeFormat.ts b/src/core/client/ui/hooks/useDateTimeFormat.ts
new file mode 100644
index 000000000..473f9fd13
--- /dev/null
+++ b/src/core/client/ui/hooks/useDateTimeFormat.ts
@@ -0,0 +1,11 @@
+import { useMemo } from "react";
+
+import { useUIContext } from "coral-ui/components";
+
+export default function useDateTimeFormat(options: Intl.DateTimeFormatOptions) {
+  const { locales } = useUIContext();
+  return useMemo(() => new Intl.DateTimeFormat(locales, options), [
+    locales,
+    options,
+  ]);
+}
diff --git a/src/core/client/ui/hooks/useDateTimeFormatter.ts b/src/core/client/ui/hooks/useDateTimeFormatter.ts
new file mode 100644
index 000000000..c58e8c2ea
--- /dev/null
+++ b/src/core/client/ui/hooks/useDateTimeFormatter.ts
@@ -0,0 +1,21 @@
+import { useCallback } from "react";
+
+import useDateTimeFormat from "./useDateTimeFormat";
+
+export default function useDateTimeFormatter(
+  options: Intl.DateTimeFormatOptions
+) {
+  const formatter = useDateTimeFormat(options);
+  const format = useCallback(
+    (date: string | number | Date) => {
+      if (typeof date === "string" || typeof date === "number") {
+        return formatter.format(new Date(date));
+      }
+
+      return formatter.format(date);
+    },
+    [formatter]
+  );
+
+  return format;
+}
diff --git a/src/core/server/app/handlers/api/story/count.ts b/src/core/server/app/handlers/api/story/count.ts
index 1f0a60cc2..b38cb7bee 100644
--- a/src/core/server/app/handlers/api/story/count.ts
+++ b/src/core/server/app/handlers/api/story/count.ts
@@ -1,14 +1,11 @@
-// import createDOMPurify from "dompurify";
-// import { JSDOM } from "jsdom";
-
 import { AppOptions } from "coral-server/app";
 import { calculateTotalPublishedCommentCount } from "coral-server/models/comment";
 import { translate } from "coral-server/services/i18n";
 import { find } from "coral-server/services/stories";
 import { RequestHandler } from "coral-server/types/express";
 
-const NUMBER_CLASSNAME = "coral-count-number";
-const TEXT_CLASSNAME = "coral-count-text";
+const NUMBER_CLASS_NAME = "coral-count-number";
+const TEXT_CLASS_NAME = "coral-count-text";
 
 export type CountOptions = Pick<AppOptions, "mongo" | "tenantCache" | "i18n">;
 
@@ -36,18 +33,18 @@ export const countHandler = ({
     let html = "";
     if (req.query.notext === "true") {
       // We only need the count without the text.
-      html = `<span class="${NUMBER_CLASSNAME}">${count}</span>`;
+      html = `<span class="${NUMBER_CLASS_NAME}">${count}</span>`;
     } else {
       // Use translated string.
       const bundle = i18n.getBundle(tenant.locale);
       html = translate(
         bundle,
-        `<span class="${NUMBER_CLASSNAME}">${count}</span> <span class="${TEXT_CLASSNAME}">Comments</span>`,
+        `<span class="${NUMBER_CLASS_NAME}">${count}</span> <span class="${TEXT_CLASS_NAME}">Comments</span>`,
         "comment-count",
         {
           number: count,
-          numberClass: NUMBER_CLASSNAME,
-          textClass: TEXT_CLASSNAME,
+          numberClass: NUMBER_CLASS_NAME,
+          textClass: TEXT_CLASS_NAME,
         }
       );
     }
diff --git a/src/core/server/errors/index.ts b/src/core/server/errors/index.ts
index eb4dd9fd6..3f931a2f6 100644
--- a/src/core/server/errors/index.ts
+++ b/src/core/server/errors/index.ts
@@ -414,12 +414,21 @@ export class UserForbiddenError extends CoralError {
     operation: string,
     userID?: string,
     permit?: GQLUSER_AUTH_CONDITIONS[],
-    conditions?: GQLUSER_AUTH_CONDITIONS[]
+    conditions?: GQLUSER_AUTH_CONDITIONS[],
+    unscoped?: boolean
   ) {
     super({
       code: ERROR_CODES.USER_NOT_ENTITLED,
       context: {
-        pvt: { reason, userID, resource, operation, conditions, permit },
+        pvt: {
+          reason,
+          userID,
+          resource,
+          operation,
+          conditions,
+          permit,
+          unscoped,
+        },
       },
       status: 403,
     });
diff --git a/src/core/server/graph/directives/auth.ts b/src/core/server/graph/directives/auth.ts
index 162bb96cb..de85abf1a 100644
--- a/src/core/server/graph/directives/auth.ts
+++ b/src/core/server/graph/directives/auth.ts
@@ -12,6 +12,7 @@ import {
   consolidateUserSuspensionStatus,
   User,
 } from "coral-server/models/user";
+import { canModerateUnscoped } from "coral-server/models/user/helpers";
 
 import {
   GQLUSER_AUTH_CONDITIONS,
@@ -27,6 +28,7 @@ export interface AuthDirectiveArgs {
   roles?: GQLUSER_ROLE[];
   userIDField?: string;
   permit?: GQLUSER_AUTH_CONDITIONS[];
+  unscoped?: boolean;
 }
 
 function calculateAuthConditions(
@@ -68,7 +70,7 @@ const auth: DirectiveResolverFn<
 > = (
   next,
   src,
-  { roles, userIDField, permit }: AuthDirectiveArgs,
+  { roles, userIDField, permit, unscoped = false }: AuthDirectiveArgs,
   { user, now },
   info
 ) => {
@@ -115,7 +117,22 @@ const auth: DirectiveResolverFn<
         info.operation.operation,
         user.id,
         permit,
-        conditions
+        conditions,
+        unscoped
+      );
+    }
+
+    // If the unscoped check is enabled, then ensure that the user can moderate
+    // unscoped.
+    if (unscoped && !canModerateUnscoped(user)) {
+      throw new UserForbiddenError(
+        "user cannot access unscoped resource as they are scoped",
+        calculateLocationKey(info),
+        info.operation.operation,
+        user.id,
+        permit,
+        conditions,
+        unscoped
       );
     }
 
@@ -141,7 +158,10 @@ const auth: DirectiveResolverFn<
     "user does not have permission to access the resource",
     calculateLocationKey(info),
     info.operation.operation,
-    user ? user.id : undefined
+    user ? user.id : undefined,
+    permit,
+    undefined,
+    unscoped
   );
 };
 
diff --git a/src/core/server/graph/mutators/Actions.ts b/src/core/server/graph/mutators/Actions.ts
index cf0d05040..e99d8a767 100644
--- a/src/core/server/graph/mutators/Actions.ts
+++ b/src/core/server/graph/mutators/Actions.ts
@@ -1,14 +1,24 @@
 import GraphContext from "coral-server/graph/context";
+import { hasFeatureFlag } from "coral-server/models/tenant";
 import { approveComment, rejectComment } from "coral-server/stacks";
 
 import {
   GQLApproveCommentInput,
+  GQLFEATURE_FLAG,
   GQLRejectCommentInput,
 } from "../schema/__generated__/types";
 
+import { validateUserModerationScopes } from "./helpers";
+
 export const Actions = (ctx: GraphContext) => ({
-  approveComment: (input: GQLApproveCommentInput) =>
-    approveComment(
+  approveComment: async (input: GQLApproveCommentInput) => {
+    // Validate that this user is allowed to moderate this comment if the
+    // feature flag is enabled.
+    if (hasFeatureFlag(ctx.tenant, GQLFEATURE_FLAG.SITE_MODERATOR)) {
+      await validateUserModerationScopes(ctx, ctx.user!, input);
+    }
+
+    return approveComment(
       ctx.mongo,
       ctx.redis,
       ctx.broker,
@@ -17,9 +27,16 @@ export const Actions = (ctx: GraphContext) => ({
       input.commentRevisionID,
       ctx.user!.id,
       ctx.now
-    ),
-  rejectComment: (input: GQLRejectCommentInput) =>
-    rejectComment(
+    );
+  },
+  rejectComment: async (input: GQLRejectCommentInput) => {
+    // Validate that this user is allowed to moderate this comment if the
+    // feature flag is enabled.
+    if (hasFeatureFlag(ctx.tenant, GQLFEATURE_FLAG.SITE_MODERATOR)) {
+      await validateUserModerationScopes(ctx, ctx.user!, input);
+    }
+
+    return rejectComment(
       ctx.mongo,
       ctx.redis,
       ctx.broker,
@@ -28,5 +45,6 @@ export const Actions = (ctx: GraphContext) => ({
       input.commentRevisionID,
       ctx.user!.id,
       ctx.now
-    ),
+    );
+  },
 });
diff --git a/src/core/server/graph/mutators/Comments.ts b/src/core/server/graph/mutators/Comments.ts
index 1f79e2e29..212a23e9d 100644
--- a/src/core/server/graph/mutators/Comments.ts
+++ b/src/core/server/graph/mutators/Comments.ts
@@ -2,6 +2,7 @@ import { ERROR_CODES } from "coral-common/errors";
 import { ADDITIONAL_DETAILS_MAX_LENGTH } from "coral-common/helpers/validate";
 import GraphContext from "coral-server/graph/context";
 import { mapFieldsetToErrorCodes } from "coral-server/graph/errors";
+import { hasFeatureFlag } from "coral-server/models/tenant";
 import { addTag, removeTag } from "coral-server/services/comments";
 import {
   createDontAgree,
@@ -25,6 +26,7 @@ import {
   GQLCreateCommentReactionInput,
   GQLCreateCommentReplyInput,
   GQLEditCommentInput,
+  GQLFEATURE_FLAG,
   GQLFeatureCommentInput,
   GQLRemoveCommentDontAgreeInput,
   GQLRemoveCommentReactionInput,
@@ -32,6 +34,7 @@ import {
   GQLUnfeatureCommentInput,
 } from "coral-server/graph/schema/__generated__/types";
 
+import { validateUserModerationScopes } from "./helpers";
 import { validateMaximumLength, WithoutMutationID } from "./util";
 
 export const Comments = (ctx: GraphContext) => ({
@@ -155,11 +158,17 @@ export const Comments = (ctx: GraphContext) => ({
       },
       ctx.now
     ),
-  feature: ({
+  feature: async ({
     commentID,
     commentRevisionID,
-  }: WithoutMutationID<GQLFeatureCommentInput>) =>
-    addTag(
+  }: WithoutMutationID<GQLFeatureCommentInput>) => {
+    // Validate that this user is allowed to moderate this comment if the
+    // feature flag is enabled.
+    if (hasFeatureFlag(ctx.tenant, GQLFEATURE_FLAG.SITE_MODERATOR)) {
+      await validateUserModerationScopes(ctx, ctx.user!, { commentID });
+    }
+
+    const comment = await addTag(
       ctx.mongo,
       ctx.tenant,
       commentID,
@@ -167,28 +176,36 @@ export const Comments = (ctx: GraphContext) => ({
       ctx.user!,
       GQLTAG.FEATURED,
       ctx.now
-    )
-      .then((comment) =>
-        comment.status !== GQLCOMMENT_STATUS.APPROVED
-          ? approveComment(
-              ctx.mongo,
-              ctx.redis,
-              ctx.broker,
-              ctx.tenant,
-              commentID,
-              commentRevisionID,
-              ctx.user!.id,
-              ctx.now
-            )
-          : comment
-      )
-      .then((comment) => {
-        // Publish that the comment was featured.
-        void publishCommentFeatured(ctx.broker, comment);
+    );
 
-        // Return it to the next step.
-        return comment;
-      }),
-  unfeature: ({ commentID }: WithoutMutationID<GQLUnfeatureCommentInput>) =>
-    removeTag(ctx.mongo, ctx.tenant, commentID, GQLTAG.FEATURED),
+    if (comment.status !== GQLCOMMENT_STATUS.APPROVED) {
+      await approveComment(
+        ctx.mongo,
+        ctx.redis,
+        ctx.broker,
+        ctx.tenant,
+        commentID,
+        commentRevisionID,
+        ctx.user!.id,
+        ctx.now
+      );
+    }
+
+    // Publish that the comment was featured.
+    await publishCommentFeatured(ctx.broker, comment);
+
+    // Return it to the next step.
+    return comment;
+  },
+  unfeature: async ({
+    commentID,
+  }: WithoutMutationID<GQLUnfeatureCommentInput>) => {
+    // Validate that this user is allowed to moderate this comment if the
+    // feature flag is enabled.
+    if (hasFeatureFlag(ctx.tenant, GQLFEATURE_FLAG.SITE_MODERATOR)) {
+      await validateUserModerationScopes(ctx, ctx.user!, { commentID });
+    }
+
+    return removeTag(ctx.mongo, ctx.tenant, commentID, GQLTAG.FEATURED);
+  },
 });
diff --git a/src/core/server/graph/mutators/Settings.ts b/src/core/server/graph/mutators/Settings.ts
index 6b14d6949..370effc1b 100644
--- a/src/core/server/graph/mutators/Settings.ts
+++ b/src/core/server/graph/mutators/Settings.ts
@@ -15,7 +15,6 @@ import {
   enableExternalModerationPhase,
   enableFeatureFlag,
   enableWebhookEndpoint,
-  regenerateSSOKey,
   rotateExternalModerationPhaseSigningSecret,
   rotateSSOSigningSecret,
   rotateWebhookEndpointSigningSecret,
@@ -62,9 +61,6 @@ export const Settings = ({
     input: WithoutMutationID<GQLUpdateSettingsInput>
   ): Promise<Tenant | null> =>
     update(mongo, redis, tenantCache, config, tenant, input.settings),
-  // DEPRECATED: deprecated in favour of `rotateSSOSigningSecret`, remove in 6.2.0.
-  regenerateSSOKey: (): Promise<Tenant | null> =>
-    regenerateSSOKey(mongo, redis, tenantCache, tenant, now),
   rotateSSOSigningSecret: ({ inactiveIn }: GQLRotateSSOSigningSecretInput) =>
     rotateSSOSigningSecret(mongo, redis, tenantCache, tenant, inactiveIn, now),
   deleteSSOSigningSecret: ({ kid }: GQLDeleteSSOSigningSecretInput) =>
diff --git a/src/core/server/graph/mutators/Stories.ts b/src/core/server/graph/mutators/Stories.ts
index 2a2e67c7c..a739bda70 100644
--- a/src/core/server/graph/mutators/Stories.ts
+++ b/src/core/server/graph/mutators/Stories.ts
@@ -4,6 +4,7 @@ import { ERROR_CODES } from "coral-common/errors";
 import GraphContext from "coral-server/graph/context";
 import { mapFieldsetToErrorCodes } from "coral-server/graph/errors";
 import { Story } from "coral-server/models/story";
+import { hasFeatureFlag } from "coral-server/models/tenant";
 import {
   addStoryExpert,
   close,
@@ -22,6 +23,7 @@ import {
   GQLAddStoryExpertInput,
   GQLCloseStoryInput,
   GQLCreateStoryInput,
+  GQLFEATURE_FLAG,
   GQLMergeStoriesInput,
   GQLOpenStoryInput,
   GQLRemoveStoryExpertInput,
@@ -32,6 +34,8 @@ import {
   GQLUpdateStorySettingsInput,
 } from "coral-server/graph/schema/__generated__/types";
 
+import { validateUserModerationScopes } from "./helpers";
+
 export const Stories = (ctx: GraphContext) => ({
   create: async (input: GQLCreateStoryInput): Promise<Readonly<Story> | null> =>
     mapFieldsetToErrorCodes(
@@ -64,22 +68,81 @@ export const Stories = (ctx: GraphContext) => ({
     ),
   updateSettings: async (
     input: GQLUpdateStorySettingsInput
-  ): Promise<Readonly<Story> | null> =>
-    updateSettings(ctx.mongo, ctx.tenant, input.id, input.settings, ctx.now),
-  close: (input: GQLCloseStoryInput): Promise<Readonly<Story> | null> =>
-    close(ctx.mongo, ctx.tenant, input.id, ctx.now),
-  open: (input: GQLOpenStoryInput): Promise<Readonly<Story> | null> =>
-    open(ctx.mongo, ctx.tenant, input.id, ctx.now),
+  ): Promise<Readonly<Story> | null> => {
+    // Validate that this user is allowed to edit this story if the feature
+    // flag is enabled.
+    if (hasFeatureFlag(ctx.tenant, GQLFEATURE_FLAG.SITE_MODERATOR)) {
+      await validateUserModerationScopes(ctx, ctx.user!, { storyID: input.id });
+    }
+
+    return updateSettings(
+      ctx.mongo,
+      ctx.tenant,
+      input.id,
+      input.settings,
+      ctx.now
+    );
+  },
+  close: async (input: GQLCloseStoryInput): Promise<Readonly<Story> | null> => {
+    // Validate that this user is allowed to close this story if the feature
+    // flag is enabled.
+    if (hasFeatureFlag(ctx.tenant, GQLFEATURE_FLAG.SITE_MODERATOR)) {
+      await validateUserModerationScopes(ctx, ctx.user!, { storyID: input.id });
+    }
+
+    return close(ctx.mongo, ctx.tenant, input.id, ctx.now);
+  },
+  open: async (input: GQLOpenStoryInput): Promise<Readonly<Story> | null> => {
+    // Validate that this user is allowed to open this story if the feature
+    // flag is enabled.
+    if (hasFeatureFlag(ctx.tenant, GQLFEATURE_FLAG.SITE_MODERATOR)) {
+      await validateUserModerationScopes(ctx, ctx.user!, { storyID: input.id });
+    }
+
+    return open(ctx.mongo, ctx.tenant, input.id, ctx.now);
+  },
   merge: async (input: GQLMergeStoriesInput): Promise<Readonly<Story> | null> =>
     merge(ctx.mongo, ctx.tenant, input.destinationID, input.sourceIDs),
   remove: async (input: GQLRemoveStoryInput): Promise<Readonly<Story> | null> =>
     remove(ctx.mongo, ctx.tenant, input.id, input.includeComments),
   scrape: async (input: GQLScrapeStoryInput): Promise<Readonly<Story> | null> =>
     scrape(ctx.mongo, ctx.config, ctx.tenant.id, input.id),
-  updateStoryMode: async (input: GQLUpdateStoryModeInput) =>
-    updateStoryMode(ctx.mongo, ctx.tenant, input.storyID, input.mode),
-  addStoryExpert: async (input: GQLAddStoryExpertInput) =>
-    addStoryExpert(ctx.mongo, ctx.tenant, input.storyID, input.userID),
-  removeStoryExpert: async (input: GQLRemoveStoryExpertInput) =>
-    removeStoryExpert(ctx.mongo, ctx.tenant, input.storyID, input.userID),
+  updateStoryMode: async (input: GQLUpdateStoryModeInput) => {
+    // Validate that this user is allowed to update the story mode if the
+    // feature flag is enabled.
+    if (hasFeatureFlag(ctx.tenant, GQLFEATURE_FLAG.SITE_MODERATOR)) {
+      await validateUserModerationScopes(ctx, ctx.user!, {
+        storyID: input.storyID,
+      });
+    }
+
+    return updateStoryMode(ctx.mongo, ctx.tenant, input.storyID, input.mode);
+  },
+  addStoryExpert: async (input: GQLAddStoryExpertInput) => {
+    // Validate that this user is allowed to add a story expert if the
+    // feature flag is enabled.
+    if (hasFeatureFlag(ctx.tenant, GQLFEATURE_FLAG.SITE_MODERATOR)) {
+      await validateUserModerationScopes(ctx, ctx.user!, {
+        storyID: input.storyID,
+      });
+    }
+
+    return addStoryExpert(ctx.mongo, ctx.tenant, input.storyID, input.userID);
+  },
+  removeStoryExpert: async (input: GQLRemoveStoryExpertInput) => {
+    // Validate that this user is allowed to remove a story expert if the
+    // feature flag is enabled.
+    if (hasFeatureFlag(ctx.tenant, GQLFEATURE_FLAG.SITE_MODERATOR)) {
+      await validateUserModerationScopes(ctx, ctx.user!, {
+        storyID: input.storyID,
+      });
+    }
+
+    return removeStoryExpert(
+      ctx.mongo,
+      ctx.tenant,
+      input.storyID,
+      input.userID
+    );
+  },
 });
diff --git a/src/core/server/graph/mutators/Users.ts b/src/core/server/graph/mutators/Users.ts
index b7231871f..b71f59932 100644
--- a/src/core/server/graph/mutators/Users.ts
+++ b/src/core/server/graph/mutators/Users.ts
@@ -25,6 +25,7 @@ import {
   updateAvatar,
   updateEmail,
   updateEmailByID,
+  updateModerationScopes,
   updateNotificationSettings,
   updatePassword,
   updateRole,
@@ -61,10 +62,11 @@ import {
   GQLUpdatePasswordInput,
   GQLUpdateUserAvatarInput,
   GQLUpdateUserEmailInput,
+  GQLUpdateUserModerationScopesInput,
   GQLUpdateUsernameInput,
   GQLUpdateUserRoleInput,
   GQLUpdateUserUsernameInput,
-} from "../schema/__generated__/types";
+} from "coral-server/graph/schema/__generated__/types";
 
 import { WithoutMutationID } from "./util";
 
@@ -208,6 +210,16 @@ export const Users = (ctx: GraphContext) => ({
     updateAvatar(ctx.mongo, ctx.tenant, input.userID, input.avatar),
   updateUserRole: async (input: GQLUpdateUserRoleInput) =>
     updateRole(ctx.mongo, ctx.tenant, ctx.user!, input.userID, input.role),
+  updateUserModerationScopes: async (
+    input: GQLUpdateUserModerationScopesInput
+  ) =>
+    updateModerationScopes(
+      ctx.mongo,
+      ctx.tenant,
+      ctx.user!,
+      input.userID,
+      input.moderationScopes
+    ),
   createModeratorNote: async (input: GQLCreateModeratorNoteInput) =>
     addModeratorNote(
       ctx.mongo,
@@ -225,16 +237,20 @@ export const Users = (ctx: GraphContext) => ({
       input.id,
       ctx.user!
     ),
-  ban: async (input: GQLBanUserInput) =>
+  ban: async ({
+    userID,
+    message,
+    rejectExistingComments = false,
+  }: GQLBanUserInput) =>
     ban(
       ctx.mongo,
       ctx.mailerQueue,
       ctx.rejectorQueue,
       ctx.tenant,
       ctx.user!,
-      input.userID,
-      input.message,
-      input.rejectExistingComments || false,
+      userID,
+      message,
+      rejectExistingComments,
       ctx.now
     ),
   premodUser: async (input: GQLPremodUserInput) =>
diff --git a/src/core/server/graph/mutators/helpers.ts b/src/core/server/graph/mutators/helpers.ts
new file mode 100644
index 000000000..c36300478
--- /dev/null
+++ b/src/core/server/graph/mutators/helpers.ts
@@ -0,0 +1,107 @@
+import {
+  CommentNotFoundError,
+  StoryNotFoundError,
+  UserForbiddenError,
+} from "coral-server/errors";
+import { User } from "coral-server/models/user";
+import {
+  canModerate,
+  canModerateUnscoped,
+  ModerationScopeResource,
+} from "coral-server/models/user/helpers";
+
+import GraphContext from "../context";
+
+interface CommentResourceModerationScope {
+  commentID: string;
+}
+
+function isCommentResourceModerationScope(
+  scope: ResourceModerationScopes
+): scope is CommentResourceModerationScope {
+  if ((scope as CommentResourceModerationScope).commentID) {
+    return true;
+  }
+
+  return false;
+}
+
+interface StoryResourceModerationScope {
+  storyID: string;
+}
+
+function isStoryResourceModerationScope(
+  scope: ResourceModerationScopes
+): scope is StoryResourceModerationScope {
+  if ((scope as StoryResourceModerationScope).storyID) {
+    return true;
+  }
+
+  return false;
+}
+
+interface SiteResourceModerationScope {
+  siteID: string;
+}
+
+type ResourceModerationScopes =
+  | StoryResourceModerationScope
+  | CommentResourceModerationScope
+  | SiteResourceModerationScope;
+
+/**
+ * validateUserModerationScopes will validate if the user has access to
+ * moderating the resource indicated by the resource scopes.
+ *
+ * @param ctx the graph context for this request
+ * @param user the user being evaluated
+ * @param scope scope keys for the documents referencing moderation scopes
+ */
+export async function validateUserModerationScopes(
+  ctx: GraphContext,
+  user: Pick<User, "id" | "role" | "moderationScopes">,
+  scope: ResourceModerationScopes
+) {
+  // If the user has no restrictions on them, exit now.
+  if (canModerateUnscoped(user)) {
+    return;
+  }
+
+  let resource: ModerationScopeResource;
+
+  if (isCommentResourceModerationScope(scope)) {
+    // Because the user has siteID restrictions on their moderator capabilities,
+    // we have to check the siteID of the comment before we make a decision.
+    const comment = await ctx.loaders.Comments.comment.load(scope.commentID);
+    if (!comment) {
+      throw new CommentNotFoundError(scope.commentID);
+    }
+
+    resource = comment;
+  } else if (isStoryResourceModerationScope(scope)) {
+    // Because the user has siteID restrictions on their moderator capabilities,
+    // we have to check the siteID of the story before we make a decision.
+    const story = await ctx.loaders.Stories.story.load(scope.storyID);
+    if (!story) {
+      throw new StoryNotFoundError(scope.storyID);
+    }
+
+    resource = story;
+  } else {
+    resource = { siteID: scope.siteID };
+  }
+
+  // Check to see if this user is allowed to moderate this comment.
+  if (canModerate(user, resource)) {
+    return;
+  }
+
+  // The user had the right role, but had a siteID restriction that prevented
+  // them from moderating this comment.
+  throw new UserForbiddenError(
+    "user does not have permission to moderate this comment",
+    "comment",
+    "mutation",
+    user.id
+  );
+}
diff --git a/src/core/server/graph/resolvers/Comment.ts b/src/core/server/graph/resolvers/Comment.ts
index 2aa7f3cde..e3ac1016c 100644
--- a/src/core/server/graph/resolvers/Comment.ts
+++ b/src/core/server/graph/resolvers/Comment.ts
@@ -16,11 +16,17 @@ import {
 } from "coral-server/models/comment/helpers";
 import { createConnection } from "coral-server/models/helpers";
 import { getURLWithCommentID } from "coral-server/models/story";
+import { hasFeatureFlag } from "coral-server/models/tenant";
+import {
+  canModerate,
+  hasModeratorRole,
+} from "coral-server/models/user/helpers";
 import { getCommentEditableUntilDate } from "coral-server/services/comments";
 
 import {
   GQLComment,
   GQLCommentTypeResolver,
+  GQLFEATURE_FLAG,
 } from "coral-server/graph/schema/__generated__/types";
 
 import GraphContext from "../context";
@@ -53,6 +59,19 @@ export const Comment: GQLCommentTypeResolver<comment.Comment> = {
     c.revisions.length > 0
       ? { revision: getLatestRevision(c), comment: c }
       : null,
+  canModerate: (c, input, ctx) => {
+    if (!ctx.user) {
+      return false;
+    }
+
+    // If the feature flag for site moderators is not turned on return based on
+    // the users role.
+    if (!hasFeatureFlag(ctx.tenant, GQLFEATURE_FLAG.SITE_MODERATOR)) {
+      return hasModeratorRole(ctx.user);
+    }
+
+    return canModerate(ctx.user, { siteID: c.siteID });
+  },
   deleted: ({ deletedAt }) => !!deletedAt,
   revisionHistory: (c) =>
     c.revisions.map((revision) => ({ revision, comment: c })),
diff --git a/src/core/server/graph/resolvers/Mutation.ts b/src/core/server/graph/resolvers/Mutation.ts
index 59ff09cd4..16a400d2e 100644
--- a/src/core/server/graph/resolvers/Mutation.ts
+++ b/src/core/server/graph/resolvers/Mutation.ts
@@ -75,11 +75,6 @@ export const Mutation: Required<GQLMutationTypeResolver<void>> = {
     comment: await ctx.mutators.Comments.unfeature(input),
     clientMutationId,
   }),
-  // DEPRECATED: deprecated in favour of `rotateSSOSigningSecret`, remove in 6.2.0.
-  regenerateSSOKey: async (source, { input }, ctx) => ({
-    settings: await ctx.mutators.Settings.regenerateSSOKey(),
-    clientMutationId: input.clientMutationId,
-  }),
   rotateSSOSigningSecret: async (source, { input }, ctx) => ({
     settings: await ctx.mutators.Settings.rotateSSOSigningSecret(input),
     clientMutationId: input.clientMutationId,
@@ -184,6 +179,10 @@ export const Mutation: Required<GQLMutationTypeResolver<void>> = {
     user: await ctx.mutators.Users.updateUserRole(input),
     clientMutationId: input.clientMutationId,
   }),
+  updateUserModerationScopes: async (source, { input }, ctx) => ({
+    user: await ctx.mutators.Users.updateUserModerationScopes(input),
+    clientMutationId: input.clientMutationId,
+  }),
   banUser: async (source, { input }, ctx) => ({
     user: await ctx.mutators.Users.ban(input),
     clientMutationId: input.clientMutationId,
diff --git a/src/core/server/graph/resolvers/Site.ts b/src/core/server/graph/resolvers/Site.ts
new file mode 100644
index 000000000..0f6860b7b
--- /dev/null
+++ b/src/core/server/graph/resolvers/Site.ts
@@ -0,0 +1,27 @@
+import * as site from "coral-server/models/site";
+import { hasFeatureFlag } from "coral-server/models/tenant";
+import {
+  canModerate,
+  hasModeratorRole,
+} from "coral-server/models/user/helpers";
+
+import {
+  GQLFEATURE_FLAG,
+  GQLSiteTypeResolver,
+} from "coral-server/graph/schema/__generated__/types";
+
+export const Site: GQLSiteTypeResolver<site.Site> = {
+  canModerate: ({ id }, args, ctx) => {
+    if (!ctx.user) {
+      return false;
+    }
+
+    // If the feature flag for site moderators is not turned on return based on
+    // the users role.
+    if (!hasFeatureFlag(ctx.tenant, GQLFEATURE_FLAG.SITE_MODERATOR)) {
+      return hasModeratorRole(ctx.user);
+    }
+
+    return canModerate(ctx.user, { siteID: id });
+  },
+};
diff --git a/src/core/server/graph/resolvers/Story.ts b/src/core/server/graph/resolvers/Story.ts
index 8e8309194..9a9d52bc2 100644
--- a/src/core/server/graph/resolvers/Story.ts
+++ b/src/core/server/graph/resolvers/Story.ts
@@ -2,8 +2,14 @@ import { defaultsDeep } from "lodash";
 
 import { decodeActionCounts } from "coral-server/models/action/comment";
 import * as story from "coral-server/models/story";
+import { hasFeatureFlag } from "coral-server/models/tenant";
+import {
+  canModerate,
+  hasModeratorRole,
+} from "coral-server/models/user/helpers";
 
 import {
+  GQLFEATURE_FLAG,
   GQLSTORY_STATUS,
   GQLStoryTypeResolver,
   GQLTAG,
@@ -21,6 +27,20 @@ export const Story: GQLStoryTypeResolver<story.Story> = {
     story.isStoryClosed(ctx.tenant, s, ctx.now)
       ? GQLSTORY_STATUS.CLOSED
       : GQLSTORY_STATUS.OPEN,
+  canModerate: (s, input, ctx) => {
+    if (!ctx.user) {
+      return false;
+    }
+
+    // If the feature flag for site moderators is not turned on return based on
+    // the users role.
+    if (!hasFeatureFlag(ctx.tenant, GQLFEATURE_FLAG.SITE_MODERATOR)) {
+      return hasModeratorRole(ctx.user);
+    }
+
+    // We know the user is provided because this edge is authenticated.
+    return canModerate(ctx.user, { siteID: s.siteID });
+  },
   isClosed: (s, input, ctx) => story.isStoryClosed(ctx.tenant, s, ctx.now),
   closedAt: (s, input, ctx) => story.getStoryClosedAt(ctx.tenant, s) || null,
   commentActionCounts: (s) => decodeActionCounts(s.commentCounts.action),
diff --git a/src/core/server/graph/resolvers/User.ts b/src/core/server/graph/resolvers/User.ts
index ccf878d94..a654645fc 100644
--- a/src/core/server/graph/resolvers/User.ts
+++ b/src/core/server/graph/resolvers/User.ts
@@ -1,13 +1,17 @@
 import { GraphQLResolveInfo } from "graphql";
 
 import GraphContext from "coral-server/graph/context";
-import {
-  GQLUser,
-  GQLUserTypeResolver,
-} from "coral-server/graph/schema/__generated__/types";
+import { hasFeatureFlag } from "coral-server/models/tenant";
 import * as user from "coral-server/models/user";
 import { roleIsStaff } from "coral-server/models/user/helpers";
 
+import {
+  GQLFEATURE_FLAG,
+  GQLUser,
+  GQLUSER_ROLE,
+  GQLUserTypeResolver,
+} from "coral-server/graph/schema/__generated__/types";
+
 import { RecentCommentHistoryInput } from "./RecentCommentHistory";
 import { UserStatusInput } from "./UserStatus";
 import { getRequestedFields } from "./util";
@@ -45,9 +49,24 @@ export const User: GQLUserTypeResolver<user.User> = {
     ...status,
     userID: id,
   }),
+  moderationScopes: ({ role, moderationScopes }, input, ctx) => {
+    // If the feature flag for site moderators is not turned on return null
+    // always.
+    if (!hasFeatureFlag(ctx.tenant, GQLFEATURE_FLAG.SITE_MODERATOR)) {
+      return null;
+    }
+
+    // Moderation scopes only apply to users that have the moderator role.
+    if (role !== GQLUSER_ROLE.MODERATOR) {
+      return null;
+    }
+
+    // For all other users return null for moderation scopes.
+    return moderationScopes;
+  },
   ignoredUsers: ({ ignoredUsers }, input, ctx, info) =>
     maybeLoadOnlyIgnoredUserID(ctx, info, ignoredUsers),
   ignoreable: ({ role }) => !roleIsStaff(role),
   recentCommentHistory: ({ id }): RecentCommentHistoryInput => ({ userID: id }),
-  profiles: ({ profiles }) => (profiles ? profiles : []),
+  profiles: ({ profiles = [] }) => profiles,
 };
diff --git a/src/core/server/graph/resolvers/UserModerationScopes.ts b/src/core/server/graph/resolvers/UserModerationScopes.ts
new file mode 100644
index 000000000..81f8472ee
--- /dev/null
+++ b/src/core/server/graph/resolvers/UserModerationScopes.ts
@@ -0,0 +1,15 @@
+import * as user from "coral-server/models/user";
+
+import { GQLUserModerationScopesTypeResolver } from "coral-server/graph/schema/__generated__/types";
+import { isModerationScoped } from "coral-server/models/user/helpers";
+
+export const UserModerationScopes: GQLUserModerationScopesTypeResolver<user.UserModerationScopes> = {
+  scoped: (moderationScopes) => isModerationScoped(moderationScopes),
+  sites: ({ siteIDs }, args, ctx) => {
+    if (siteIDs) {
+      return ctx.loaders.Sites.site.loadMany(siteIDs);
+    }
+
+    return null;
+  },
+};
diff --git a/src/core/server/graph/resolvers/index.ts b/src/core/server/graph/resolvers/index.ts
index 942f1bd81..ad77f3001 100644
--- a/src/core/server/graph/resolvers/index.ts
+++ b/src/core/server/graph/resolvers/index.ts
@@ -42,6 +42,7 @@ import { RecentCommentHistory } from "./RecentCommentHistory";
 import { RejectCommentPayload } from "./RejectCommentPayload";
 import { Settings } from "./Settings";
 import { SigningSecret } from "./SigningSecret";
+import { Site } from "./Site";
 import { SlackConfiguration } from "./SlackConfiguration";
 import { SSOAuthIntegration } from "./SSOAuthIntegration";
 import { Story } from "./Story";
@@ -51,6 +52,7 @@ import { SuspensionStatus } from "./SuspensionStatus";
 import { SuspensionStatusHistory } from "./SuspensionStatusHistory";
 import { Tag } from "./Tag";
 import { User } from "./User";
+import { UserModerationScopes } from "./UserModerationScopes";
 import { UsernameHistory } from "./UsernameHistory";
 import { UsernameStatus } from "./UsernameStatus";
 import { UserStatus } from "./UserStatus";
@@ -95,6 +97,7 @@ const Resolvers: GQLResolver = {
   RejectCommentPayload,
   SSOAuthIntegration,
   SigningSecret,
+  Site,
   Story,
   StorySettings,
   Subscription,
@@ -103,6 +106,7 @@ const Resolvers: GQLResolver = {
   Tag,
   Time,
   User,
+  UserModerationScopes,
   Queue,
   Queues,
   UsernameHistory,
diff --git a/src/core/server/graph/schema/schema.graphql b/src/core/server/graph/schema/schema.graphql
index 18d7174f0..2479d9c14 100644
--- a/src/core/server/graph/schema/schema.graphql
+++ b/src/core/server/graph/schema/schema.graphql
@@ -46,10 +46,13 @@ is used without options, it simply requires a logged in user. `permit` can be
 used to allow specific `USER_AUTH_CONDITIONS` that normally (if present) would
 deny access to any edge associated with the `@auth` directive. If a User has
 only some of the conditions listed, they will pass, but if they have at least
-one more that isn't in the list, the request will be denied.
+one more that isn't in the list, the request will be denied. If `unscoped` is
+provided and is `true`, it will require that the user does not have any
+moderation scopes applied to their account (such as a site moderator).
 """
 directive @auth(
   roles: [USER_ROLE!]
+  unscoped: Boolean
   userIDField: String
   permit: [USER_AUTH_CONDITIONS!]
 ) on FIELD_DEFINITION
@@ -387,6 +390,12 @@ enum FEATURE_FLAG {
   DEFAULT_QA_STORY_MODE will set the story mode to QA by default.
   """
   DEFAULT_QA_STORY_MODE
+
+  """
+  SITE_MODERATOR will enable the enhanced Site Moderator role by assigning a new
+  modeartion scope to a user.
+  """
+  SITE_MODERATOR
 }
 
 # The moderation mode of the site.
@@ -1510,6 +1519,12 @@ type Site {
   """
   allowedOrigins: [String!]!
 
+  """
+  canModerate when true indicates that the current user can moderate comments
+  left on this Site.
+  """
+  canModerate: Boolean!
+
   """
   createdAt is when the site was created.
   """
@@ -2122,6 +2137,24 @@ type UserNotificationSettings {
   digestFrequency: DIGEST_FREQUENCY!
 }
 
+"""
+UserModerationScopes describes the scopes for moderation. These only apply when
+the user has a MODERATOR role.
+"""
+type UserModerationScopes {
+  """
+  scoped returns true when the moderator has a scoped moderation role, and
+  cannot moderate organization wide.
+  """
+  scoped: Boolean!
+
+  """
+  sites (when not null) list the sites that the user is only allowed to moderate
+  on. When null, it means that the user is allowed to moderate on all sites.
+  """
+  sites: [Site!]
+}
+
 """
 User is someone that leaves Comments, and logs in.
 """
@@ -2318,6 +2351,13 @@ type User {
       permit: [SUSPENDED, BANNED, PENDING_DELETION]
     )
 
+  """
+  moderationScopes describes the scopes for moderation. These only apply when
+  the user has a MODERATOR role.
+  """
+  moderationScopes: UserModerationScopes
+    @auth(userIDField: "id", roles: [ADMIN, MODERATOR])
+
   """
   ssoURL is the url for managing sso account
   """
@@ -2748,6 +2788,11 @@ type Comment {
   """
   deleted: Boolean
 
+  """
+  canModerate returns true if the current user can moderate this Comment.
+  """
+  canModerate: Boolean!
+
   """
   site is the Site referenced by the Story for this Comment.
   """
@@ -3082,6 +3127,12 @@ type Story {
   """
   lastCommentedAt: Time @auth(roles: [ADMIN])
 
+  """
+  canModerate returns true if the current user can moderate comments on this
+  Story.
+  """
+  canModerate: Boolean!
+
   """
   site is the site associated with the story
   """
@@ -4167,7 +4218,6 @@ input NewCommentersConfigurationInput {
   approvedCommentsThreshold: Int
 }
 
-
 """
 RTEConfigurationInput specifies the configuration for the rte.
 """
@@ -4313,7 +4363,6 @@ input SettingsInput {
   rte: RTEConfigurationInput
 }
 
-
 """
 UpdateSettingsInput provides the input for the updateSettings Mutation.
 """
@@ -4521,29 +4570,6 @@ type CreateCommentFlagPayload {
   clientMutationId: String!
 }
 
-##################
-## regenerateSSOKey
-##################
-
-input RegenerateSSOKeyInput {
-  """
-  clientMutationId is required for Relay support.
-  """
-  clientMutationId: String!
-}
-
-type RegenerateSSOKeyPayload {
-  """
-  settings is the Settings that the SSO secret was regenerated on.
-  """
-  settings: Settings
-
-  """
-  clientMutationId is required for Relay support.
-  """
-  clientMutationId: String!
-}
-
 ##################
 ## createStory
 ##################
@@ -6038,13 +6064,59 @@ type UpdateUserAvatarPayload {
   clientMutationId: String!
 }
 
+##################
+# updateUserModerationScopes
+##################
+
+"""
+ModerationScopesInput describes the different scopes that a given moderator
+could be assigned.
+"""
+input ModerationScopesInput {
+  """
+  siteIDs is an array of ID's that should be the list of sites that a moderator
+  is limited to. If none are passed, it will remove the scoping for this User.
+  """
+  siteIDs: [String!]
+}
+
+input UpdateUserModerationScopesInput {
+  """
+  userID is the ID of the User that should have their role updated.
+  """
+  userID: ID!
+
+  """
+  moderationScopes defines the scopes that a given moderator should be limited
+  to when
+  """
+  moderationScopes: ModerationScopesInput!
+
+  """
+  clientMutationId is required for Relay support.
+  """
+  clientMutationId: String!
+}
+
+type UpdateUserModerationScopesPayload {
+  """
+  user is the possibly modified User.
+  """
+  user: User!
+
+  """
+  clientMutationId is required for Relay support.
+  """
+  clientMutationId: String!
+}
+
 ##################
 # updateUserRole
 ##################
 
 input UpdateUserRoleInput {
   """
-  userID is the ID of the User that should have their avatar updated.
+  userID is the ID of the User that should have their role updated.
   """
   userID: ID!
 
@@ -6739,16 +6811,6 @@ type Mutation {
   updateSettings(input: UpdateSettingsInput!): UpdateSettingsPayload!
     @auth(roles: [ADMIN])
 
-  """
-  regenerateSSOKey will regenerate the SSO secret used to sign secrets. This will
-  invalidate any existing user sessions.
-
-  DEPRECATED: deprecated in favour of `rotateSSOSigningSecret`, remove in 6.2.0.
-  """
-  regenerateSSOKey(input: RegenerateSSOKeyInput!): RegenerateSSOKeyPayload!
-    @auth(roles: [ADMIN])
-    @deprecated(reason: "deprecated in favour of `rotateSSOSigningSecret`")
-
   """
   rotateSSOSigningSecret can be used to rotate a given active SigningSecret.
   """
@@ -7010,17 +7072,26 @@ type Mutation {
   updateUserRole(input: UpdateUserRoleInput!): UpdateUserRolePayload!
     @auth(roles: [ADMIN])
 
+  """
+  updateUserModerationScopes will update the moderation scopes for a given user.
+  This is used to limit the scopes for which a given moderator can moderate if
+  they also have the moderator role.
+  """
+  updateUserModerationScopes(
+    input: UpdateUserModerationScopesInput!
+  ): UpdateUserModerationScopesPayload! @auth(roles: [ADMIN])
+
   """
   banUser will ban a specific User from interacting with Comments.
   """
   banUser(input: BanUserInput!): BanUserPayload!
-    @auth(roles: [ADMIN, MODERATOR])
+    @auth(roles: [ADMIN, MODERATOR], unscoped: true)
 
   """
   removeUserBan will remove an active ban from a User if they have one.
   """
   removeUserBan(input: RemoveUserBanInput!): RemoveUserBanPayload!
-    @auth(roles: [ADMIN, MODERATOR])
+    @auth(roles: [ADMIN, MODERATOR], unscoped: true)
 
   """
   suspendUser will suspend a specific User from interacting with Comments.
@@ -7230,8 +7301,7 @@ type Mutation {
   """
   testSMTP sends a test email.
   """
-  testSMTP(input: TestSMTPInput!): TestSMTPPayload!
-    @auth(roles: [ADMIN, MODERATOR])
+  testSMTP(input: TestSMTPInput!): TestSMTPPayload! @auth(roles: [ADMIN])
 }
 
 ##################
diff --git a/src/core/server/models/user/constants.ts b/src/core/server/models/user/constants.ts
index a0717ecae..643fde96c 100644
--- a/src/core/server/models/user/constants.ts
+++ b/src/core/server/models/user/constants.ts
@@ -1,5 +1,7 @@
 import { GQLUSER_ROLE } from "coral-server/graph/schema/__generated__/types";
 
+export const MODERATOR_ROLES = [GQLUSER_ROLE.ADMIN, GQLUSER_ROLE.MODERATOR];
+
 export const STAFF_ROLES = [
   GQLUSER_ROLE.ADMIN,
   GQLUSER_ROLE.MODERATOR,
diff --git a/src/core/server/models/user/helpers.ts b/src/core/server/models/user/helpers.ts
index 52dc35224..e1f3e9365 100644
--- a/src/core/server/models/user/helpers.ts
+++ b/src/core/server/models/user/helpers.ts
@@ -4,8 +4,14 @@ import { SSOUserProfile } from "coral-server/app/middleware/passport/strategies/
 
 import { GQLUSER_ROLE } from "coral-server/graph/schema/__generated__/types";
 
-import { STAFF_ROLES } from "./constants";
-import { LocalProfile, Profile, SSOProfile, User } from "./user";
+import { MODERATOR_ROLES, STAFF_ROLES } from "./constants";
+import {
+  LocalProfile,
+  Profile,
+  SSOProfile,
+  User,
+  UserModerationScopes,
+} from "./user";
 
 export function roleIsStaff(role: GQLUSER_ROLE) {
   if (STAFF_ROLES.includes(role)) {
@@ -19,6 +25,92 @@ export function hasStaffRole(user: Pick<User, "role">) {
   return roleIsStaff(user.role);
 }
 
+function roleIsModerator(role: GQLUSER_ROLE) {
+  if (MODERATOR_ROLES.includes(role)) {
+    return true;
+  }
+
+  return false;
+}
+
+export function hasModeratorRole(user: Pick<User, "role">) {
+  return roleIsModerator(user.role);
+}
+
+export function isModerationScoped(moderationScopes?: UserModerationScopes) {
+  return (
+    !!moderationScopes &&
+    !!moderationScopes.siteIDs &&
+    moderationScopes.siteIDs.length > 0
+  );
+}
+
+/**
+ * canModerateUnscoped will check if a given user is unscoped (without any
+ * restrictions) on their moderation capacity.
+ *
+ * @param user the user being checked for moderation scopes
+ */
+export function canModerateUnscoped(
+  user: Pick<User, "role" | "moderationScopes">
+) {
+  // You can't possibly be a global moderator if you don't at least have a
+  // moderator compatible role.
+  if (!hasModeratorRole(user)) {
+    return false;
+  }
+
+  // If you specifically have a moderator role, then if there is a siteID
+  // restricting which sites you can moderate on, then you are not a global
+  // moderator.
+  if (
+    user.role === GQLUSER_ROLE.MODERATOR &&
+    isModerationScoped(user.moderationScopes)
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
+export interface ModerationScopeResource {
+  siteID?: string;
+}
+
+/**
+ * canModerate checks against the moderation scopes to determine if the current
+ * user can moderate the given scope.
+ *
+ * @param user the user to check moderation scopes on
+ * @param scopes the scopes to check against
+ */
+export function canModerate(
+  user: Pick<User, "role" | "moderationScopes">,
+  { siteID }: ModerationScopeResource
+) {
+  // You can't possibly moderate if you don't at least have a moderator
+  // compatible role.
+  if (!hasModeratorRole(user)) {
+    return false;
+  }
+
+  // If the user is a moderator, then if the user is scoped to only moderate
+  // specific sites, then ensure they can moderate _this_ siteID.
+  if (
+    user.role === GQLUSER_ROLE.MODERATOR &&
+    user.moderationScopes &&
+    siteID &&
+    user.moderationScopes.siteIDs &&
+    !user.moderationScopes.siteIDs.includes(siteID)
+  ) {
+    return false;
+  }
+
+  // The moderator does not have any scopes that prevent them from moderating
+  // this comment.
+  return true;
+}
+
 export function getUserProfile(
   user: Pick<User, "profiles">,
   type: Profile["type"]
diff --git a/src/core/server/models/user/user.ts b/src/core/server/models/user/user.ts
index e48ffaa0e..069737864 100644
--- a/src/core/server/models/user/user.ts
+++ b/src/core/server/models/user/user.ts
@@ -363,6 +363,14 @@ export interface UserCommentCounts {
   status: CommentStatusCounts;
 }
 
+export interface UserModerationScopes {
+  /**
+   * siteIDs is the array of site ID's that this User can moderate. If not
+   * provided the user can moderate all sites.
+   */
+  siteIDs?: string[];
+}
+
 /**
  * User is someone that leaves Comments, and logs in.
  */
@@ -432,6 +440,12 @@ export interface User extends TenantResource {
    */
   role: GQLUSER_ROLE;
 
+  /**
+   * moderationScopes describes the scopes for moderation. These only apply when
+   * the user has a MODERATOR role.
+   */
+  moderationScopes?: UserModerationScopes;
+
   /**
    * notifications stores the notification settings for the given User.
    */
@@ -743,6 +757,28 @@ export async function updateUserRole(
   return result.value;
 }
 
+export async function updateUserModerationScopes(
+  mongo: Db,
+  tenantID: string,
+  id: string,
+  moderationScopes: UserModerationScopes
+) {
+  const result = await collection(mongo).findOneAndUpdate(
+    { id, tenantID },
+    { $set: { moderationScopes } },
+    {
+      // False to return the updated document instead of the original
+      // document.
+      returnOriginal: false,
+    }
+  );
+  if (!result.value) {
+    throw new UserNotFoundError(id);
+  }
+
+  return result.value;
+}
+
 export async function verifyUserPassword(
   user: Pick<User, "profiles">,
   password: string,
diff --git a/src/core/server/services/tenant/sso.ts b/src/core/server/services/tenant/sso.ts
index 3532e13ea..5d6376b80 100644
--- a/src/core/server/services/tenant/sso.ts
+++ b/src/core/server/services/tenant/sso.ts
@@ -12,30 +12,6 @@ import {
 
 import { TenantCache } from "./cache";
 
-/**
- * regenerateSSOKey will regenerate the Single Sign-On key for the specified
- * Tenant and notify all other Tenant's connected that the Tenant was updated.
- *
- * DEPRECATED: deprecated in favour of `rotateSSOSigningSecret`, remove in 6.2.0.
- */
-export async function regenerateSSOKey(
-  mongo: Db,
-  redis: Redis,
-  cache: TenantCache,
-  tenant: Tenant,
-  now: Date
-) {
-  // Regeneration is the same as rotating but with a specific 30 day window.
-  return rotateSSOSigningSecret(
-    mongo,
-    redis,
-    cache,
-    tenant,
-    30 * 24 * 60 * 60,
-    now
-  );
-}
-
 export async function rotateSSOSigningSecret(
   mongo: Db,
   redis: Redis,
diff --git a/src/core/server/services/users/users.ts b/src/core/server/services/users/users.ts
index 85e095459..871d051e1 100644
--- a/src/core/server/services/users/users.ts
+++ b/src/core/server/services/users/users.ts
@@ -14,6 +14,7 @@ import {
   DuplicateUserError,
   EmailAlreadySetError,
   EmailNotSetError,
+  InternalError,
   InvalidCredentialsError,
   LocalProfileAlreadySetError,
   LocalProfileNotSetError,
@@ -29,7 +30,12 @@ import {
 } from "coral-server/errors";
 import logger from "coral-server/logger";
 import { Comment, retrieveComment } from "coral-server/models/comment";
-import { linkUsersAvailable, Tenant } from "coral-server/models/tenant";
+import { retrieveManySites } from "coral-server/models/site";
+import {
+  hasFeatureFlag,
+  linkUsersAvailable,
+  Tenant,
+} from "coral-server/models/tenant";
 import {
   banUser,
   clearDeletionDate,
@@ -61,11 +67,13 @@ import {
   suspendUser,
   updateUserAvatar,
   updateUserEmail,
+  updateUserModerationScopes,
   updateUserNotificationSettings,
   updateUserPassword,
   updateUserRole,
   updateUserUsername,
   User,
+  UserModerationScopes,
   verifyUserPassword,
 } from "coral-server/models/user";
 import {
@@ -80,6 +88,7 @@ import { sendConfirmationEmail } from "coral-server/services/users/auth";
 
 import {
   GQLAuthIntegrations,
+  GQLFEATURE_FLAG,
   GQLUSER_ROLE,
 } from "coral-server/graph/schema/__generated__/types";
 
@@ -656,6 +665,39 @@ export async function updateRole(
   return updateUserRole(mongo, tenant.id, userID, role);
 }
 
+export async function updateModerationScopes(
+  mongo: Db,
+  tenant: Tenant,
+  user: Pick<User, "id">,
+  userID: string,
+  moderationScopes: UserModerationScopes
+) {
+  if (!hasFeatureFlag(tenant, GQLFEATURE_FLAG.SITE_MODERATOR)) {
+    throw new InternalError("feature flag not enabled", {
+      flag: GQLFEATURE_FLAG.SITE_MODERATOR,
+    });
+  }
+
+  if (user.id === userID) {
+    throw new Error("cannot update your own moderation scopes");
+  }
+
+  // Verify that the scopes referenced exist.
+  if (moderationScopes.siteIDs) {
+    const sites = await retrieveManySites(
+      mongo,
+      tenant.id,
+      moderationScopes.siteIDs
+    );
+
+    if (sites.some((site) => site === null)) {
+      throw new Error("site specified does not exist");
+    }
+  }
+
+  return updateUserModerationScopes(mongo, tenant.id, userID, moderationScopes);
+}
+
 /**
  * enabledAuthenticationIntegrations returns enabled auth integrations for a tenant
  *
diff --git a/src/locales/en-US/admin.ftl b/src/locales/en-US/admin.ftl
index f185c0a79..6d353aabd 100644
--- a/src/locales/en-US/admin.ftl
+++ b/src/locales/en-US/admin.ftl
@@ -10,6 +10,8 @@ storyStatus-closed = Closed
 ## Roles
 role-admin = Admin
 role-moderator = Moderator
+role-siteModerator = Site Moderator
+role-organizationModerator = Organization Moderator
 role-staff = Staff
 role-commenter = Commenter
 
@@ -1078,6 +1080,15 @@ community-premodModal-consequence =
 community-premodModal-cancel = Cancel
 community-premodModal-premodUser = Yes, always pre-moderate
 
+community-siteModeratorModal-assignSites =
+  Assign sites for <strong>{ $username }</strong>
+community-siteModeratorModal-assignSitesDescription =
+  Site moderators are permitted to make moderation decisions and issue suspensions on the sites they are assigned.
+community-siteModeratorModal-cancel = Cancel
+community-siteModeratorModal-assign = Assign
+community-siteModeratorModal-selectSites = Select sites to moderate
+community-siteModeratorModal-noSites = No sites
+
 community-invite-inviteMember = Invite members to your organization
 community-invite-emailAddressLabel = Email address:
 community-invite-inviteMore = Invite more