diff --git a/INDEXES.md b/INDEXES.md
index 564e05c52b..77f282603a 100644
--- a/INDEXES.md
+++ b/INDEXES.md
@@ -6,6 +6,20 @@ The goal of this document is to date-mark the indexes you add to support the cha
 
 If you are releasing, you can use this readme to check all the indexes prior to the release you are deploying and have a good idea of what indexes you might need to deploy to Mongo along with your release of a new Coral Docker image to kubernetes.
 
+## 2023-10-18
+
+```
+db.notifications.createIndex({ tenantID: 1, id: 1 }, { unique: true });
+```
+
+- This index creates the uniqueness constraint for the `tenantID` and `id` fields on the notifications collection
+
+```
+db.notifications.createIndex({ tenantID: 1, ownerID: 1, createdAt: 1 });
+```
+
+- This index speeds up the retrieval of notifications by `tenantID`, `ownerID`, and `createdAt` which is the most common way of retrieving notifications for pagination in the notifications tab on the stream.
+
 ## 2023-03-28
 
 ```
diff --git a/client/scripts/precommitLint.js b/client/scripts/precommitLint.js
index ebb883f587..140103e604 100644
--- a/client/scripts/precommitLint.js
+++ b/client/scripts/precommitLint.js
@@ -26,12 +26,12 @@ sgf((err, results) => {
 
   const eslintFiles = [];
   for (const item of results) {
-    const { filename } = item;
+    const { filename, status } = item;
 
     // only include valid, filtered extensions
     // this is primarily to keep eslint rampaging
     // over non-source files
-    if (!matchesExtension(extensions, filename)) {
+    if (!matchesExtension(extensions, filename) || status === "Deleted") {
       continue;
     }
 
diff --git a/client/src/core/client/admin/App/Navigation/Navigation.tsx b/client/src/core/client/admin/App/Navigation/Navigation.tsx
index 4e2c54cbf8..ae36ac3928 100644
--- a/client/src/core/client/admin/App/Navigation/Navigation.tsx
+++ b/client/src/core/client/admin/App/Navigation/Navigation.tsx
@@ -8,6 +8,7 @@ import NavigationLink from "./NavigationLink";
 interface Props {
   showConfigure: boolean;
   showDashboard: boolean;
+  showReports: boolean;
 }
 
 const Navigation: FunctionComponent<Props> = (props) => (
@@ -31,6 +32,12 @@ const Navigation: FunctionComponent<Props> = (props) => (
         <NavigationLink to="/admin/dashboard">Dashboard</NavigationLink>
       </Localized>
     )}
+    {/* TODO: Any other permissions needed? */}
+    {props.showReports && (
+      <Localized id="navigation-reports">
+        <NavigationLink to="/admin/reports">DSA Reports</NavigationLink>
+      </Localized>
+    )}
   </AppBarNavigation>
 );
 
diff --git a/client/src/core/client/admin/App/Navigation/NavigationContainer.tsx b/client/src/core/client/admin/App/Navigation/NavigationContainer.tsx
index 08f9b1b42a..3efcdd26c8 100644
--- a/client/src/core/client/admin/App/Navigation/NavigationContainer.tsx
+++ b/client/src/core/client/admin/App/Navigation/NavigationContainer.tsx
@@ -1,14 +1,15 @@
-import React from "react";
+import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
 
 import { Ability, can } from "coral-admin/permissions/tenant";
-import { withFragmentContainer } from "coral-framework/lib/relay";
+import { useLocal, withFragmentContainer } from "coral-framework/lib/relay";
 import {
   SignOutMutation,
   withSignOutMutation,
 } from "coral-framework/mutations";
 
 import { NavigationContainer_viewer as ViewerData } from "coral-admin/__generated__/NavigationContainer_viewer.graphql";
+import { NavigationContainerLocal } from "coral-admin/__generated__/NavigationContainerLocal.graphql";
 
 import Navigation from "./Navigation";
 
@@ -17,21 +18,22 @@ interface Props {
   viewer: ViewerData | null;
 }
 
-class NavigationContainer extends React.Component<Props> {
-  public render() {
-    return (
-      <Navigation
-        showDashboard={
-          !!this.props.viewer && can(this.props.viewer, Ability.VIEW_STATISTICS)
-        }
-        showConfigure={
-          !!this.props.viewer &&
-          can(this.props.viewer, Ability.CHANGE_CONFIGURATION)
-        }
-      />
-    );
-  }
-}
+const NavigationContainer: FunctionComponent<Props> = ({ viewer }) => {
+  const [{ dsaFeaturesEnabled }] = useLocal<NavigationContainerLocal>(
+    graphql`
+      fragment NavigationContainerLocal on Local {
+        dsaFeaturesEnabled
+      }
+    `
+  );
+  return (
+    <Navigation
+      showDashboard={!!viewer && can(viewer, Ability.VIEW_STATISTICS)}
+      showConfigure={!!viewer && can(viewer, Ability.CHANGE_CONFIGURATION)}
+      showReports={!!dsaFeaturesEnabled}
+    />
+  );
+};
 
 const enhanced = withSignOutMutation(
   withFragmentContainer<Props>({
diff --git a/client/src/core/client/admin/components/Comment/InReplyTo.tsx b/client/src/core/client/admin/components/Comment/InReplyTo.tsx
index 4d0d4fe44a..26840c6818 100644
--- a/client/src/core/client/admin/components/Comment/InReplyTo.tsx
+++ b/client/src/core/client/admin/components/Comment/InReplyTo.tsx
@@ -1,4 +1,5 @@
 import { Localized } from "@fluent/react/compat";
+import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
 import { EmailActionReplyIcon, SvgIcon } from "coral-ui/components/icons";
@@ -7,11 +8,16 @@ import { BaseButton, Flex } from "coral-ui/components/v2";
 import styles from "./InReplyTo.css";
 
 interface Props {
+  className?: string;
   children: string;
   onUsernameClick: () => void;
 }
 
-const InReplyTo: FunctionComponent<Props> = ({ children, onUsernameClick }) => {
+const InReplyTo: FunctionComponent<Props> = ({
+  className,
+  children,
+  onUsernameClick,
+}) => {
   const Username = () => (
     <Localized
       id="common-username"
@@ -19,7 +25,7 @@ const InReplyTo: FunctionComponent<Props> = ({ children, onUsernameClick }) => {
       vars={{ username: children }}
     >
       <BaseButton onClick={onUsernameClick} className={styles.usernameButton}>
-        <span className={styles.username}>{children}</span>
+        <span className={cn(styles.username, className)}>{children}</span>
       </BaseButton>
     </Localized>
   );
diff --git a/client/src/core/client/admin/routeConfig.tsx b/client/src/core/client/admin/routeConfig.tsx
index 192b3794b5..875f6790c6 100644
--- a/client/src/core/client/admin/routeConfig.tsx
+++ b/client/src/core/client/admin/routeConfig.tsx
@@ -47,6 +47,8 @@ import {
   UnmoderatedQueueRoute,
 } from "./routes/Moderate/Queue";
 import SingleModerateRoute from "./routes/Moderate/SingleModerate";
+import ReportsRoute from "./routes/Reports";
+import SingleReportRoute from "./routes/Reports/SingleReportRoute";
 import StoriesRoute from "./routes/Stories";
 
 interface CoralContainerProps {
@@ -123,6 +125,11 @@ export default makeRouteConfig(
         <Route path="dashboard" {...DashboardRoute.routeConfig} />
         <Route path="dashboard/:siteID" {...SiteDashboardRoute.routeConfig} />
         <Route path="community" {...CommunityRoute.routeConfig} />
+        <Route path="reports" {...ReportsRoute.routeConfig} />
+        <Route
+          path="reports/report/:reportID"
+          {...SingleReportRoute.routeConfig}
+        />
         <Route
           {...createAuthCheckRoute({
             ability: Ability.CHANGE_CONFIGURATION,
diff --git a/client/src/core/client/admin/routes/Reports/AddReportNoteMutation.tsx b/client/src/core/client/admin/routes/Reports/AddReportNoteMutation.tsx
new file mode 100644
index 0000000000..cc3bed3f40
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/AddReportNoteMutation.tsx
@@ -0,0 +1,51 @@
+import { graphql } from "react-relay";
+import { Environment } from "relay-runtime";
+
+import {
+  commitMutationPromiseNormalized,
+  createMutation,
+  MutationInput,
+} from "coral-framework/lib/relay";
+
+import { AddReportNoteMutation as MutationTypes } from "coral-admin/__generated__/AddReportNoteMutation.graphql";
+
+let clientMutationId = 0;
+
+const AddReportNoteMutation = createMutation(
+  "addReportNote",
+  (environment: Environment, input: MutationInput<MutationTypes>) => {
+    const result = commitMutationPromiseNormalized<MutationTypes>(environment, {
+      mutation: graphql`
+        mutation AddReportNoteMutation($input: AddDSAReportNoteInput!) {
+          addDSAReportNote(input: $input) {
+            dsaReport {
+              id
+              history {
+                id
+                createdBy {
+                  username
+                }
+                createdAt
+                body
+                type
+                status
+              }
+            }
+            clientMutationId
+          }
+        }
+      `,
+      variables: {
+        input: {
+          userID: input.userID,
+          body: input.body,
+          reportID: input.reportID,
+          clientMutationId: (clientMutationId++).toString(),
+        },
+      },
+    });
+    return result;
+  }
+);
+
+export default AddReportNoteMutation;
diff --git a/client/src/core/client/admin/routes/Reports/AddReportShareMutation.tsx b/client/src/core/client/admin/routes/Reports/AddReportShareMutation.tsx
new file mode 100644
index 0000000000..c9c16d82c5
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/AddReportShareMutation.tsx
@@ -0,0 +1,50 @@
+import { graphql } from "react-relay";
+import { Environment } from "relay-runtime";
+
+import {
+  commitMutationPromiseNormalized,
+  createMutation,
+  MutationInput,
+} from "coral-framework/lib/relay";
+
+import { AddReportShareMutation as MutationTypes } from "coral-admin/__generated__/AddReportShareMutation.graphql";
+
+let clientMutationId = 0;
+
+const AddReportShareMutation = createMutation(
+  "addReportShare",
+  (environment: Environment, input: MutationInput<MutationTypes>) => {
+    const result = commitMutationPromiseNormalized<MutationTypes>(environment, {
+      mutation: graphql`
+        mutation AddReportShareMutation($input: AddDSAReportShareInput!) {
+          addDSAReportShare(input: $input) {
+            dsaReport {
+              id
+              history {
+                id
+                createdBy {
+                  username
+                }
+                createdAt
+                body
+                type
+                status
+              }
+            }
+            clientMutationId
+          }
+        }
+      `,
+      variables: {
+        input: {
+          userID: input.userID,
+          reportID: input.reportID,
+          clientMutationId: (clientMutationId++).toString(),
+        },
+      },
+    });
+    return result;
+  }
+);
+
+export default AddReportShareMutation;
diff --git a/client/src/core/client/admin/routes/Reports/ChangeReportStatusMutation.tsx b/client/src/core/client/admin/routes/Reports/ChangeReportStatusMutation.tsx
new file mode 100644
index 0000000000..34fc784907
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ChangeReportStatusMutation.tsx
@@ -0,0 +1,54 @@
+import { graphql } from "react-relay";
+import { Environment } from "relay-runtime";
+
+import {
+  commitMutationPromiseNormalized,
+  createMutation,
+  MutationInput,
+} from "coral-framework/lib/relay";
+
+import { ChangeReportStatusMutation as MutationTypes } from "coral-admin/__generated__/ChangeReportStatusMutation.graphql";
+
+let clientMutationId = 0;
+
+const ChangeReportStatusMutation = createMutation(
+  "changeReportStatus",
+  (environment: Environment, input: MutationInput<MutationTypes>) => {
+    const result = commitMutationPromiseNormalized<MutationTypes>(environment, {
+      mutation: graphql`
+        mutation ChangeReportStatusMutation(
+          $input: ChangeDSAReportStatusInput!
+        ) {
+          changeDSAReportStatus(input: $input) {
+            dsaReport {
+              id
+              status
+              history {
+                id
+                createdBy {
+                  username
+                }
+                createdAt
+                body
+                type
+                status
+              }
+            }
+            clientMutationId
+          }
+        }
+      `,
+      variables: {
+        input: {
+          userID: input.userID,
+          reportID: input.reportID,
+          status: input.status,
+          clientMutationId: (clientMutationId++).toString(),
+        },
+      },
+    });
+    return result;
+  }
+);
+
+export default ChangeReportStatusMutation;
diff --git a/client/src/core/client/admin/routes/Reports/ChangeStatusModal.tsx b/client/src/core/client/admin/routes/Reports/ChangeStatusModal.tsx
new file mode 100644
index 0000000000..618fdf49f7
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ChangeStatusModal.tsx
@@ -0,0 +1,137 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent, useCallback, useMemo } from "react";
+import { Form } from "react-final-form";
+
+import ModalHeader from "coral-admin/components/ModalHeader";
+import { useMutation } from "coral-framework/lib/relay";
+import {
+  GQLDSAReportHistoryType,
+  GQLDSAReportStatus,
+} from "coral-framework/schema";
+import {
+  Button,
+  Card,
+  CardCloseButton,
+  Flex,
+  HorizontalGutter,
+  Modal,
+} from "coral-ui/components/v2";
+
+import ChangeReportStatusMutation from "./ChangeReportStatusMutation";
+
+interface Props {
+  reportID: string;
+  userID?: string;
+  showChangeStatusModal: Exclude<
+    GQLDSAReportHistoryType,
+    | GQLDSAReportHistoryType.STATUS_CHANGED
+    | GQLDSAReportHistoryType.DECISION_MADE
+  > | null;
+  setShowChangeStatusModal: (
+    changeType: Exclude<
+      GQLDSAReportHistoryType,
+      | GQLDSAReportHistoryType.STATUS_CHANGED
+      | GQLDSAReportHistoryType.DECISION_MADE
+    > | null
+  ) => void;
+}
+
+const ChangeStatusModal: FunctionComponent<Props> = ({
+  reportID,
+  userID,
+  showChangeStatusModal,
+  setShowChangeStatusModal,
+}) => {
+  const changeReportStatus = useMutation(ChangeReportStatusMutation);
+
+  const onCloseChangeStatusModal = useCallback(() => {
+    setShowChangeStatusModal(null);
+  }, [setShowChangeStatusModal]);
+
+  const onSubmitStatusUpdate = useCallback(async () => {
+    if (userID) {
+      await changeReportStatus({
+        userID,
+        reportID,
+        status: GQLDSAReportStatus.UNDER_REVIEW,
+      });
+      setShowChangeStatusModal(null);
+    }
+  }, [userID, reportID, setShowChangeStatusModal, changeReportStatus]);
+
+  const actionText = useMemo(() => {
+    if (!showChangeStatusModal) {
+      return null;
+    }
+    const mapping = {
+      NOTE: {
+        text: "You have added a note. Would you like to update your status to In review.",
+        id: "reports-changeStatusModal-prompt-addNote",
+      },
+      SHARE: {
+        text: "You have downloaded the report. Would you like to update your status to In review.",
+        id: "reports-changeStatusModal-prompt-downloadReport",
+      },
+    };
+    return mapping[showChangeStatusModal];
+  }, [showChangeStatusModal]);
+
+  return (
+    <Modal open={!!showChangeStatusModal}>
+      {({ firstFocusableRef }) => (
+        <Card>
+          <Flex justifyContent="flex-end">
+            <CardCloseButton
+              onClick={onCloseChangeStatusModal}
+              ref={firstFocusableRef}
+            />
+          </Flex>
+          <Localized id="reports-changeStatusModal-header">
+            <ModalHeader>Update status?</ModalHeader>
+          </Localized>
+          <Form onSubmit={onSubmitStatusUpdate}>
+            {({ handleSubmit, hasValidationErrors }) => (
+              <form onSubmit={handleSubmit}>
+                <Flex direction="column" paddingTop={2} paddingBottom={2}>
+                  <HorizontalGutter>
+                    {actionText && (
+                      <Localized id={actionText.id}>
+                        <div>{actionText.text}</div>
+                      </Localized>
+                    )}
+                    <Flex justifyContent="flex-end">
+                      <Flex>
+                        <Localized id="reports-changeStatusModal-dontUpdateButton">
+                          <Button
+                            color="mono"
+                            variant="outlined"
+                            onClick={onCloseChangeStatusModal}
+                          >
+                            No
+                          </Button>
+                        </Localized>
+                      </Flex>
+                      <Flex marginLeft={2}>
+                        <Localized id="reports-changeStatusModal-updateButton">
+                          <Button
+                            type="submit"
+                            iconLeft
+                            disabled={hasValidationErrors}
+                          >
+                            Yes, update
+                          </Button>
+                        </Localized>
+                      </Flex>
+                    </Flex>
+                  </HorizontalGutter>
+                </Flex>
+              </form>
+            )}
+          </Form>
+        </Card>
+      )}
+    </Modal>
+  );
+};
+
+export default ChangeStatusModal;
diff --git a/client/src/core/client/admin/routes/Reports/DeleteReportNoteMutation.tsx b/client/src/core/client/admin/routes/Reports/DeleteReportNoteMutation.tsx
new file mode 100644
index 0000000000..37e73b2eb0
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/DeleteReportNoteMutation.tsx
@@ -0,0 +1,50 @@
+import { graphql } from "react-relay";
+import { Environment } from "relay-runtime";
+
+import {
+  commitMutationPromiseNormalized,
+  createMutation,
+  MutationInput,
+} from "coral-framework/lib/relay";
+
+import { DeleteReportNoteMutation as MutationTypes } from "coral-admin/__generated__/DeleteReportNoteMutation.graphql";
+
+let clientMutationId = 0;
+
+const DeleteReportNoteMutation = createMutation(
+  "deleteReportNote",
+  (environment: Environment, input: MutationInput<MutationTypes>) => {
+    const result = commitMutationPromiseNormalized<MutationTypes>(environment, {
+      mutation: graphql`
+        mutation DeleteReportNoteMutation($input: DeleteDSAReportNoteInput!) {
+          deleteDSAReportNote(input: $input) {
+            dsaReport {
+              id
+              history {
+                id
+                createdBy {
+                  username
+                }
+                createdAt
+                body
+                type
+                status
+              }
+            }
+            clientMutationId
+          }
+        }
+      `,
+      variables: {
+        input: {
+          id: input.id,
+          reportID: input.reportID,
+          clientMutationId: (clientMutationId++).toString(),
+        },
+      },
+    });
+    return result;
+  }
+);
+
+export default DeleteReportNoteMutation;
diff --git a/client/src/core/client/admin/routes/Reports/MakeReportDecisionMutation.tsx b/client/src/core/client/admin/routes/Reports/MakeReportDecisionMutation.tsx
new file mode 100644
index 0000000000..acbaa3d675
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/MakeReportDecisionMutation.tsx
@@ -0,0 +1,68 @@
+import { graphql } from "react-relay";
+import { Environment } from "relay-runtime";
+
+import {
+  commitMutationPromiseNormalized,
+  createMutation,
+  MutationInput,
+} from "coral-framework/lib/relay";
+
+import { MakeReportDecisionMutation as MutationTypes } from "coral-admin/__generated__/MakeReportDecisionMutation.graphql";
+
+let clientMutationId = 0;
+
+const MakeReportDecisionMutation = createMutation(
+  "makeReportDecision",
+  (environment: Environment, input: MutationInput<MutationTypes>) => {
+    const result = commitMutationPromiseNormalized<MutationTypes>(environment, {
+      mutation: graphql`
+        mutation MakeReportDecisionMutation(
+          $input: MakeDSAReportDecisionInput!
+        ) {
+          makeDSAReportDecision(input: $input) {
+            dsaReport {
+              id
+              status
+              decision {
+                legality
+                legalGrounds
+                detailedExplanation
+              }
+              history {
+                id
+                createdBy {
+                  username
+                }
+                createdAt
+                body
+                type
+                status
+                decision {
+                  legality
+                  legalGrounds
+                  detailedExplanation
+                }
+              }
+            }
+            clientMutationId
+          }
+        }
+      `,
+      variables: {
+        input: {
+          userID: input.userID,
+          reportID: input.reportID,
+          legality: input.legality,
+          legalGrounds: input.legalGrounds,
+          detailedExplanation: input.detailedExplanation,
+          commentID: input.commentID,
+          commentRevisionID: input.commentRevisionID,
+          clientMutationId: (clientMutationId++).toString(),
+        },
+      },
+    });
+    return result;
+  }
+);
+
+export default MakeReportDecisionMutation;
diff --git a/client/src/core/client/admin/routes/Reports/ReportHistory.css b/client/src/core/client/admin/routes/Reports/ReportHistory.css
new file mode 100644
index 0000000000..e20101c981
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportHistory.css
@@ -0,0 +1,74 @@
+.reportHistoryWrapper {
+  width: 30%;
+}
+
+.reportHistory {
+  padding: var(--spacing-6) var(--spacing-4) 0 var(--spacing-4);
+  max-height: 550px;
+  overflow: scroll;
+  margin-bottom: var(--spacing-2);
+  white-space: pre-wrap;
+}
+
+.fadeBottom:after {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background: linear-gradient(
+    to top,
+    rgba(255, 255, 255, 0.75) 0%,
+    rgba(255, 255, 255, 0) 200px
+  );
+  pointer-events: none;
+}
+
+.reportHistoryHeader {
+  text-transform: uppercase;
+  font-size: var(--font-size-3);
+  font-weight: var(--font-weight-secondary-bold);
+  font-family: var(--font-family-secondary);
+  padding-bottom: var(--spacing-3);
+}
+
+.reportHistoryText {
+  font-size: var(--font-size-2);
+}
+
+.reportHistoryCreatedAt {
+  clear: both;
+  font-size: var(--font-size-1);
+  color: var(--palette-grey-500);
+}
+
+.reportHistoryNoteBody {
+  padding: var(--spacing-1);
+  background-color: var(--palette-grey-100);
+  margin-top: var(--spacing-1);
+  font-size: var(--font-size-2);
+}
+
+.deleteReportNoteButton {
+  float: right;
+  margin-top: var(--spacing-1);
+}
+
+.addNoteTextarea {
+  height: 80px;
+  width: 100%;
+}
+
+.addNoteForm {
+  padding: var(--spacing-2) var(--spacing-4) var(--spacing-4) var(--spacing-4);
+  width: 100%;
+}
+
+.addNoteFormWrapper {
+  position: relative;
+}
+
+.addNoteTextarea::placeholder {
+  color: var(--palette-grey-300);
+  font-size: var(--font-size-2);
+}
diff --git a/client/src/core/client/admin/routes/Reports/ReportHistory.tsx b/client/src/core/client/admin/routes/Reports/ReportHistory.tsx
new file mode 100644
index 0000000000..548066e70f
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportHistory.tsx
@@ -0,0 +1,374 @@
+import { Localized } from "@fluent/react/compat";
+import cn from "classnames";
+import { FormApi } from "final-form";
+import React, {
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import { Field, Form } from "react-final-form";
+import { graphql } from "react-relay";
+
+import { useDateTimeFormatter } from "coral-framework/hooks";
+import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { getMessage } from "coral-framework/lib/i18n";
+import { useInView } from "coral-framework/lib/intersection";
+import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
+import { required } from "coral-framework/lib/validation";
+import {
+  GQLDSAReportDecisionLegality,
+  GQLDSAReportHistoryType,
+  GQLDSAReportStatus,
+} from "coral-framework/schema";
+import { AddIcon, BinIcon, ButtonSvgIcon } from "coral-ui/components/icons";
+import {
+  Button,
+  Flex,
+  HorizontalGutter,
+  Textarea,
+} from "coral-ui/components/v2";
+import { useShadowRootOrDocument } from "coral-ui/encapsulation";
+
+import {
+  DSAReportStatus,
+  ReportHistory_dsaReport,
+} from "coral-admin/__generated__/ReportHistory_dsaReport.graphql";
+
+import styles from "./ReportHistory.css";
+
+import AddReportNoteMutation from "./AddReportNoteMutation";
+import DeleteReportNoteMutation from "./DeleteReportNoteMutation";
+
+interface Props {
+  dsaReport: ReportHistory_dsaReport;
+  setShowChangeStatusModal: (
+    changeType: Exclude<
+      GQLDSAReportHistoryType,
+      | GQLDSAReportHistoryType.STATUS_CHANGED
+      | GQLDSAReportHistoryType.DECISION_MADE
+    > | null
+  ) => void;
+  userID?: string;
+}
+
+const ReportHistory: FunctionComponent<Props> = ({
+  dsaReport,
+  userID,
+  setShowChangeStatusModal,
+}) => {
+  const root = useShadowRootOrDocument();
+  const { localeBundles } = useCoralContext();
+  const [reportHistoryStyles, setReportHistoryStyles] = useState(
+    cn(styles.reportHistory, styles.fadeBottom)
+  );
+  const { inView, intersectionRef: bottomOfReportHistoryInViewRef } =
+    useInView();
+
+  const statusMappings = {
+    AWAITING_REVIEW: getMessage(
+      localeBundles,
+      "reports-status-awaitingReview",
+      "Awaiting review"
+    ),
+    UNDER_REVIEW: getMessage(
+      localeBundles,
+      "reports-status-inReview",
+      "In review"
+    ),
+    COMPLETED: getMessage(
+      localeBundles,
+      "reports-status-completed",
+      "Completed"
+    ),
+    VOID: getMessage(localeBundles, "reports-status-void", "Void"),
+    "%future added value": getMessage(
+      localeBundles,
+      "reports-status-unknown",
+      "Unknown status"
+    ),
+  };
+
+  useEffect(() => {
+    if (inView) {
+      setReportHistoryStyles(styles.reportHistory);
+    } else {
+      setReportHistoryStyles(cn(styles.reportHistory, styles.fadeBottom));
+    }
+  }, [inView]);
+
+  const addReportNote = useMutation(AddReportNoteMutation);
+  const deleteReportNote = useMutation(DeleteReportNoteMutation);
+
+  const reportHistoryFormatter = useDateTimeFormatter({
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+
+  const statusMapping = useCallback(
+    (status: DSAReportStatus | null) => {
+      if (!status) {
+        return "Unknown status";
+      }
+      return statusMappings[status];
+    },
+    [statusMappings]
+  );
+
+  const onDeleteReportNoteButton = useCallback(
+    async (id: string) => {
+      await deleteReportNote({ id, reportID: dsaReport.id });
+    },
+    [deleteReportNote, dsaReport.id]
+  );
+
+  const onSubmitAddNote = useCallback(
+    async (input: any, form: FormApi) => {
+      if (userID) {
+        await addReportNote({
+          body: input.note,
+          reportID: dsaReport.id,
+          userID,
+        });
+        form.change("note", undefined);
+        // Wait for new note to appear then scroll down to it
+        setTimeout(() => {
+          const element = root.getElementById("reportHistory");
+          if (element && element.scroll) {
+            element.scroll({ top: element.scrollHeight, behavior: "smooth" });
+          }
+        }, 0);
+        if (dsaReport.status === GQLDSAReportStatus.AWAITING_REVIEW) {
+          setShowChangeStatusModal(GQLDSAReportHistoryType.NOTE);
+        }
+      }
+    },
+    [addReportNote, dsaReport, userID, setShowChangeStatusModal, root]
+  );
+
+  if (!dsaReport) {
+    return null;
+  }
+
+  return (
+    <Flex direction="column" className={styles.reportHistoryWrapper}>
+      <Flex
+        className={reportHistoryStyles}
+        direction="column"
+        id="reportHistory"
+      >
+        <Localized id="reports-singleReport-history">
+          <div className={styles.reportHistoryHeader}>History</div>
+        </Localized>
+        <HorizontalGutter spacing={3} paddingBottom={4}>
+          <div>
+            <Localized id="reports-singleReport-history-reportSubmitted">
+              <div className={styles.reportHistoryText}>
+                Illegal content report submitted
+              </div>
+            </Localized>
+            <div className={styles.reportHistoryCreatedAt}>
+              {reportHistoryFormatter(dsaReport.createdAt)}
+            </div>
+          </div>
+          <>
+            {dsaReport.history?.map((h) => {
+              if (h) {
+                return (
+                  <div key={h.id}>
+                    {h?.type === GQLDSAReportHistoryType.NOTE && (
+                      <>
+                        <Localized
+                          id="reports-singleReport-history-addedNote"
+                          vars={{ username: h.createdBy?.username }}
+                        >
+                          <div
+                            className={styles.reportHistoryText}
+                          >{`${h.createdBy?.username} added a note`}</div>
+                        </Localized>
+                        <div className={styles.reportHistoryNoteBody}>
+                          {h.body}
+                        </div>
+                        <div>
+                          <Localized
+                            id="reports-singleReport-history-deleteNoteButton"
+                            elems={{ icon: <ButtonSvgIcon Icon={BinIcon} /> }}
+                          >
+                            <Button
+                              className={styles.deleteReportNoteButton}
+                              iconLeft
+                              variant="text"
+                              color="mono"
+                              uppercase={false}
+                              onClick={() => onDeleteReportNoteButton(h.id)}
+                            >
+                              <ButtonSvgIcon Icon={BinIcon} /> Delete
+                            </Button>
+                          </Localized>
+                        </div>
+                      </>
+                    )}
+
+                    {h?.type === GQLDSAReportHistoryType.STATUS_CHANGED && (
+                      <>
+                        {h.status === GQLDSAReportStatus.VOID ? (
+                          <Localized id="reports-singleReport-reportVoid">
+                            <div className={styles.reportHistoryText}>
+                              User deleted their account. Report is void.
+                            </div>
+                          </Localized>
+                        ) : (
+                          <Localized
+                            id="reports-singleReport-history-changedStatus"
+                            vars={{
+                              status: statusMapping(h.status),
+                              username: h.createdBy?.username,
+                            }}
+                          >
+                            <div className={styles.reportHistoryText}>{`${
+                              h.createdBy?.username
+                            } changed status to "${statusMapping(
+                              h.status
+                            )}"`}</div>
+                          </Localized>
+                        )}
+                      </>
+                    )}
+
+                    {h?.type === GQLDSAReportHistoryType.SHARE && (
+                      <Localized
+                        id="reports-singleReport-history-sharedReport"
+                        vars={{ username: h.createdBy?.username }}
+                      >
+                        <div
+                          className={styles.reportHistoryText}
+                        >{`${h.createdBy?.username} shared this report`}</div>
+                      </Localized>
+                    )}
+
+                    {h?.type === GQLDSAReportHistoryType.DECISION_MADE && (
+                      <>
+                        {h.decision?.legality ===
+                        GQLDSAReportDecisionLegality.ILLEGAL ? (
+                          <Localized
+                            id="reports-singleReport-history-madeDecision-illegal"
+                            vars={{
+                              username: h.createdBy?.username,
+                            }}
+                          >
+                            <div
+                              className={styles.reportHistoryText}
+                            >{`${h.createdBy?.username} made a decision that this report contains illegal content`}</div>
+                          </Localized>
+                        ) : (
+                          <Localized
+                            id="reports-singleReport-history-madeDecision-legal"
+                            vars={{
+                              username: h.createdBy?.username,
+                            }}
+                          >
+                            <div
+                              className={styles.reportHistoryText}
+                            >{`${h.createdBy?.username} made a decision that this report does not contain illegal content`}</div>
+                          </Localized>
+                        )}
+                        {h.decision?.legality === "ILLEGAL" && (
+                          <>
+                            <Localized
+                              id="reports-singleReport-history-legalGrounds"
+                              vars={{ legalGrounds: h.decision?.legalGrounds }}
+                            >
+                              <div className={styles.reportHistoryText}>
+                                Legal grounds: {`${h.decision?.legalGrounds}`}
+                              </div>
+                            </Localized>
+                            <Localized
+                              id="reports-singleReport-history-explanation"
+                              vars={{
+                                explanation: h.decision?.detailedExplanation,
+                              }}
+                            >
+                              <div className={styles.reportHistoryText}>
+                                Explanation:{" "}
+                                {`${h.decision?.detailedExplanation}`}
+                              </div>
+                            </Localized>
+                          </>
+                        )}
+                      </>
+                    )}
+
+                    <div className={styles.reportHistoryCreatedAt}>
+                      {reportHistoryFormatter(h.createdAt)}
+                    </div>
+                  </div>
+                );
+              } else {
+                return null;
+              }
+            })}
+          </>
+        </HorizontalGutter>
+        <div ref={bottomOfReportHistoryInViewRef}></div>
+      </Flex>
+      <Flex className={styles.addNoteFormWrapper}>
+        <Form onSubmit={onSubmitAddNote}>
+          {({ handleSubmit }) => (
+            <form onSubmit={handleSubmit} className={styles.addNoteForm}>
+              <Localized id="reports-singleReport-note-field">
+                <Field id="reportHistory-note" name="note" validate={required}>
+                  {({ input }) => (
+                    <Textarea
+                      className={styles.addNoteTextarea}
+                      placeholder="Add your note..."
+                      {...input}
+                    />
+                  )}
+                </Field>
+              </Localized>
+              <Flex justifyContent="flex-end">
+                <Localized
+                  id="reports-singleReport-addUpdateButton"
+                  elems={{ icon: <ButtonSvgIcon size="xs" Icon={AddIcon} /> }}
+                >
+                  <Button type="submit" iconLeft>
+                    <ButtonSvgIcon size="xs" Icon={AddIcon} />
+                    Add update
+                  </Button>
+                </Localized>
+              </Flex>
+            </form>
+          )}
+        </Form>
+      </Flex>
+    </Flex>
+  );
+};
+
+const enhanced = withFragmentContainer<Props>({
+  dsaReport: graphql`
+    fragment ReportHistory_dsaReport on DSAReport {
+      id
+      status
+      createdAt
+      history {
+        id
+        createdBy {
+          username
+        }
+        createdAt
+        body
+        type
+        status
+        decision {
+          legality
+          legalGrounds
+          detailedExplanation
+        }
+      }
+    }
+  `,
+})(ReportHistory);
+
+export default enhanced;
diff --git a/client/src/core/client/admin/routes/Reports/ReportMakeDecisionModal.css b/client/src/core/client/admin/routes/Reports/ReportMakeDecisionModal.css
new file mode 100644
index 0000000000..33c48638a2
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportMakeDecisionModal.css
@@ -0,0 +1,11 @@
+.decisionModalThisComment {
+  margin-right: var(--spacing-2);
+}
+
+.decisionModalTextArea {
+  flex-grow: 1;
+}
+
+.yesButton {
+  margin-right: var(--spacing-2);
+}
diff --git a/client/src/core/client/admin/routes/Reports/ReportMakeDecisionModal.tsx b/client/src/core/client/admin/routes/Reports/ReportMakeDecisionModal.tsx
new file mode 100644
index 0000000000..6a769a498c
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportMakeDecisionModal.tsx
@@ -0,0 +1,215 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent, useCallback, useState } from "react";
+import { Field, Form } from "react-final-form";
+import { graphql } from "react-relay";
+
+import ModalHeader from "coral-admin/components/ModalHeader";
+import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
+import { required } from "coral-framework/lib/validation";
+import { GQLDSAReportDecisionLegality } from "coral-framework/schema";
+import {
+  Button,
+  Card,
+  CardCloseButton,
+  Flex,
+  HorizontalGutter,
+  Modal,
+  Textarea,
+} from "coral-ui/components/v2";
+
+import MakeReportDecisionMutation from "./MakeReportDecisionMutation";
+
+import { ReportMakeDecisionModal_dsaReport } from "coral-admin/__generated__/ReportMakeDecisionModal_dsaReport.graphql";
+
+import styles from "./ReportMakeDecisionModal.css";
+
+interface Props {
+  dsaReport: ReportMakeDecisionModal_dsaReport;
+  showDecisionModal: boolean;
+  setShowDecisionModal: (show: boolean) => void;
+  userID?: string;
+}
+
+const ReportMakeDecisionModal: FunctionComponent<Props> = ({
+  dsaReport,
+  showDecisionModal,
+  setShowDecisionModal,
+  userID,
+}) => {
+  const makeReportDecision = useMutation(MakeReportDecisionMutation);
+  const [makeDecisionSelection, setMakeDecisionSelection] =
+    useState<null | GQLDSAReportDecisionLegality>(null);
+  const onClickMakeDecisionContainsIllegal = useCallback(() => {
+    setMakeDecisionSelection(GQLDSAReportDecisionLegality.ILLEGAL);
+  }, [setMakeDecisionSelection]);
+
+  const onClickMakeDecisionDoesNotContainIllegal = useCallback(() => {
+    setMakeDecisionSelection(GQLDSAReportDecisionLegality.LEGAL);
+  }, [setMakeDecisionSelection]);
+
+  const onSubmitDecision = useCallback(
+    async (input: { legalGrounds?: string; explanation?: string }) => {
+      if (
+        dsaReport &&
+        userID &&
+        dsaReport.comment?.revision &&
+        makeDecisionSelection
+      ) {
+        try {
+          await makeReportDecision({
+            userID,
+            reportID: dsaReport.id,
+            legality: makeDecisionSelection,
+            legalGrounds:
+              makeDecisionSelection === GQLDSAReportDecisionLegality.ILLEGAL
+                ? input.legalGrounds
+                : undefined,
+            detailedExplanation:
+              makeDecisionSelection === GQLDSAReportDecisionLegality.ILLEGAL
+                ? input.explanation
+                : undefined,
+            commentID: dsaReport.comment?.id,
+            commentRevisionID: dsaReport.comment.revision.id,
+          });
+          setShowDecisionModal(false);
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error(e);
+        }
+      }
+    },
+    [
+      makeReportDecision,
+      userID,
+      dsaReport,
+      makeDecisionSelection,
+      setShowDecisionModal,
+    ]
+  );
+  const onCloseDecisionModal = useCallback(() => {
+    setShowDecisionModal(false);
+  }, [setShowDecisionModal]);
+  return (
+    <Modal open={showDecisionModal} data-testid="report-makeDecisionModal">
+      {({ firstFocusableRef }) => (
+        <Card>
+          <Flex justifyContent="flex-end">
+            <CardCloseButton
+              onClick={onCloseDecisionModal}
+              ref={firstFocusableRef}
+            />
+          </Flex>
+          <Localized id="reports-decisionModal-header">
+            <ModalHeader>Decision</ModalHeader>
+          </Localized>
+          <Form onSubmit={onSubmitDecision}>
+            {({ handleSubmit, hasValidationErrors }) => (
+              <form onSubmit={handleSubmit}>
+                <Flex direction="column" padding={2}>
+                  <HorizontalGutter>
+                    <Flex alignItems="center" direction="column">
+                      <Localized id="reports-decisionModal-prompt">
+                        <div className={styles.decisionModalThisComment}>
+                          Does this comment appear to contain illegal content?
+                        </div>
+                      </Localized>
+                      <Flex margin={2}>
+                        <Localized id="reports-decisionModal-yes">
+                          <Button
+                            onClick={onClickMakeDecisionContainsIllegal}
+                            active={
+                              makeDecisionSelection ===
+                              GQLDSAReportDecisionLegality.ILLEGAL
+                            }
+                            className={styles.yesButton}
+                          >
+                            Yes
+                          </Button>
+                        </Localized>
+                        <Localized id="reports-decisionModal-no">
+                          <Button
+                            onClick={onClickMakeDecisionDoesNotContainIllegal}
+                            active={
+                              makeDecisionSelection ===
+                              GQLDSAReportDecisionLegality.LEGAL
+                            }
+                          >
+                            No
+                          </Button>
+                        </Localized>
+                      </Flex>
+                    </Flex>
+                    {makeDecisionSelection ===
+                      GQLDSAReportDecisionLegality.ILLEGAL && (
+                      <>
+                        <Flex>
+                          <Field
+                            id="reportLegalGrounds"
+                            name="legalGrounds"
+                            validate={required}
+                          >
+                            {({ input }) => (
+                              <Textarea
+                                className={styles.decisionModalTextArea}
+                                placeholder="Legal grounds"
+                                {...input}
+                              />
+                            )}
+                          </Field>
+                        </Flex>
+                        <Flex>
+                          <Field
+                            id="reportExplanation"
+                            name="explanation"
+                            validate={required}
+                          >
+                            {({ input }) => (
+                              <Textarea
+                                className={styles.decisionModalTextArea}
+                                placeholder="Explanation"
+                                {...input}
+                              />
+                            )}
+                          </Field>
+                        </Flex>
+                      </>
+                    )}
+                    {makeDecisionSelection && (
+                      <Flex justifyContent="flex-end">
+                        <Localized id="reports-decisionModal-submit">
+                          <Button
+                            type="submit"
+                            iconLeft
+                            disabled={hasValidationErrors}
+                          >
+                            Submit
+                          </Button>
+                        </Localized>
+                      </Flex>
+                    )}
+                  </HorizontalGutter>
+                </Flex>
+              </form>
+            )}
+          </Form>
+        </Card>
+      )}
+    </Modal>
+  );
+};
+
+const enhanced = withFragmentContainer<Props>({
+  dsaReport: graphql`
+    fragment ReportMakeDecisionModal_dsaReport on DSAReport {
+      id
+      comment {
+        id
+        revision {
+          id
+        }
+      }
+    }
+  `,
+})(ReportMakeDecisionModal);
+
+export default enhanced;
diff --git a/client/src/core/client/admin/routes/Reports/ReportRowContainer.tsx b/client/src/core/client/admin/routes/Reports/ReportRowContainer.tsx
new file mode 100644
index 0000000000..18f75b2ee8
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportRowContainer.tsx
@@ -0,0 +1,100 @@
+import { useRouter } from "found";
+import React, { useCallback } from "react";
+import { graphql } from "react-relay";
+
+import { useDateTimeFormatter } from "coral-framework/hooks";
+import { withFragmentContainer } from "coral-framework/lib/relay";
+import { GQLDSAReportStatus } from "coral-framework/schema";
+import {
+  NightMoonHalfIcon,
+  SignBadgeCircleIcon,
+  SvgIcon,
+} from "coral-ui/components/icons";
+import { RelativeTime, TableCell, TableRow } from "coral-ui/components/v2";
+
+import {
+  DSAReportStatus,
+  ReportRowContainer_dsaReport as DSAReportData,
+} from "coral-admin/__generated__/ReportRowContainer_dsaReport.graphql";
+
+interface Props {
+  dsaReport: DSAReportData;
+}
+
+const ReportRowContainer: React.FunctionComponent<Props> = ({ dsaReport }) => {
+  const formatter = useDateTimeFormatter({
+    day: "2-digit",
+    month: "2-digit",
+    year: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+  const { router } = useRouter();
+
+  const statusIconMapping = useCallback((status: DSAReportStatus | null) => {
+    if (!status) {
+      return null;
+    }
+    switch (status) {
+      case GQLDSAReportStatus.AWAITING_REVIEW:
+        return <SvgIcon Icon={SignBadgeCircleIcon} />;
+      case GQLDSAReportStatus.UNDER_REVIEW:
+        return <SvgIcon Icon={NightMoonHalfIcon} />;
+      case GQLDSAReportStatus.COMPLETED:
+        return <SvgIcon Icon={SignBadgeCircleIcon} filled />;
+      default:
+        return <SvgIcon Icon={SignBadgeCircleIcon} />;
+    }
+  }, []);
+
+  const onReportRowClick = useCallback(
+    (reportID: string) => {
+      router.replace(`/admin/reports/report/${reportID}`);
+    },
+    [router]
+  );
+
+  return (
+    <TableRow
+      key={dsaReport.referenceID}
+      onClick={() => onReportRowClick(dsaReport.id)}
+    >
+      <TableCell>{formatter(dsaReport.createdAt)}</TableCell>
+      <TableCell>
+        {dsaReport.lastUpdated ? (
+          <RelativeTime date={dsaReport.lastUpdated} />
+        ) : (
+          <div>-</div>
+        )}
+      </TableCell>
+      <TableCell>{dsaReport.reporter?.username}</TableCell>
+      <TableCell>{dsaReport.referenceID}</TableCell>
+      <TableCell>{dsaReport.lawBrokenDescription}</TableCell>
+      <TableCell>{dsaReport.comment?.author?.username}</TableCell>
+      <TableCell>{statusIconMapping(dsaReport.status)}</TableCell>
+    </TableRow>
+  );
+};
+
+const enhanced = withFragmentContainer<Props>({
+  dsaReport: graphql`
+    fragment ReportRowContainer_dsaReport on DSAReport {
+      id
+      createdAt
+      referenceID
+      status
+      reporter {
+        username
+      }
+      comment {
+        author {
+          username
+        }
+      }
+      lawBrokenDescription
+      lastUpdated
+    }
+  `,
+})(ReportRowContainer);
+
+export default enhanced;
diff --git a/client/src/core/client/admin/routes/Reports/ReportShareButton.css b/client/src/core/client/admin/routes/Reports/ReportShareButton.css
new file mode 100644
index 0000000000..60c97cb048
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportShareButton.css
@@ -0,0 +1,4 @@
+.shareButton {
+  margin-left: var(--spacing-2);
+  background-color: var(--palette-background-body);
+}
diff --git a/client/src/core/client/admin/routes/Reports/ReportShareButton.tsx b/client/src/core/client/admin/routes/Reports/ReportShareButton.tsx
new file mode 100644
index 0000000000..ea209cf9b4
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportShareButton.tsx
@@ -0,0 +1,128 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent, useCallback } from "react";
+import { Environment, graphql } from "react-relay";
+
+import { useCoralContext } from "coral-framework/lib/bootstrap";
+import {
+  createFetch,
+  useFetch,
+  useMutation,
+  withFragmentContainer,
+} from "coral-framework/lib/relay";
+import {
+  GQLDSAReportHistoryType,
+  GQLDSAReportStatus,
+} from "coral-framework/schema";
+import { DrawerDownloadIcon, SvgIcon } from "coral-ui/components/icons";
+import { Button } from "coral-ui/components/v2";
+
+import { ReportShareButton_dsaReport } from "coral-admin/__generated__/ReportShareButton_dsaReport.graphql";
+
+import styles from "./ReportShareButton.css";
+
+import AddReportShareMutation from "./AddReportShareMutation";
+
+interface Props {
+  dsaReport: ReportShareButton_dsaReport;
+  setShowChangeStatusModal: (
+    changeType: Exclude<
+      GQLDSAReportHistoryType,
+      | GQLDSAReportHistoryType.STATUS_CHANGED
+      | GQLDSAReportHistoryType.DECISION_MADE
+    > | null
+  ) => void;
+  userID?: string;
+}
+
+const ReportShareButton: FunctionComponent<Props> = ({
+  dsaReport,
+  userID,
+  setShowChangeStatusModal,
+}) => {
+  const { window } = useCoralContext();
+
+  const addReportShare = useMutation(AddReportShareMutation);
+
+  const ReportDownloadFetch = createFetch(
+    "dsaReportDownload",
+    async (
+      environment: Environment,
+      variables: { reportID: string },
+      { rest }
+    ) => {
+      const result = rest.fetch<any>(
+        `/dsaReport/reportDownload?reportID=${variables.reportID}`,
+        {
+          method: "GET",
+        }
+      );
+      return result;
+    }
+  );
+
+  const fetchDownload = useFetch(ReportDownloadFetch);
+
+  const onShareButtonClick = useCallback(async () => {
+    try {
+      const response = await fetchDownload({ reportID: dsaReport.id });
+      const element = window.document.createElement("a");
+      const file = new Blob([response], { type: "application/zip" });
+      element.href = URL.createObjectURL(file);
+      element.download = `dsaReport-${dsaReport.referenceID}`;
+      window.document.body.appendChild(element);
+      element.click();
+
+      // If still awaiting review, prompt user to update status to In review on download
+      if (dsaReport.status === GQLDSAReportStatus.AWAITING_REVIEW) {
+        setShowChangeStatusModal(GQLDSAReportHistoryType.SHARE);
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+
+    if (userID) {
+      await addReportShare({ reportID: dsaReport.id, userID });
+    }
+  }, [
+    dsaReport,
+    window,
+    addReportShare,
+    userID,
+    fetchDownload,
+    setShowChangeStatusModal,
+  ]);
+
+  return (
+    <Localized
+      id="reports-singleReport-shareButton"
+      elems={{ icon: <SvgIcon Icon={DrawerDownloadIcon} /> }}
+    >
+      <Button
+        className={styles.shareButton}
+        variant="outlined"
+        color="regular"
+        uppercase
+        target="_blank"
+        rel="noreferrer"
+        onClick={onShareButtonClick}
+        iconLeft
+      >
+        <SvgIcon Icon={DrawerDownloadIcon} />
+        CSV
+      </Button>
+    </Localized>
+  );
+};
+
+const enhanced = withFragmentContainer<Props>({
+  dsaReport: graphql`
+    fragment ReportShareButton_dsaReport on DSAReport {
+      id
+      referenceID
+      status
+    }
+  `,
+})(ReportShareButton);
+
+export default enhanced;
diff --git a/client/src/core/client/admin/routes/Reports/ReportStatusMenu.css b/client/src/core/client/admin/routes/Reports/ReportStatusMenu.css
new file mode 100644
index 0000000000..a19d6f6593
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportStatusMenu.css
@@ -0,0 +1,7 @@
+.statusLabel {
+  color: var(--palette-text-000);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-2);
+  font-weight: var(--font-weight-primary-semi-bold);
+  padding-right: var(--spacing-2);
+}
diff --git a/client/src/core/client/admin/routes/Reports/ReportStatusMenu.tsx b/client/src/core/client/admin/routes/Reports/ReportStatusMenu.tsx
new file mode 100644
index 0000000000..6079c302e2
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportStatusMenu.tsx
@@ -0,0 +1,77 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent, useCallback } from "react";
+
+import { useMutation } from "coral-framework/lib/relay";
+import { Option, SelectField } from "coral-ui/components/v2";
+
+import { DSAReportStatus } from "coral-admin/__generated__/SingleReportRouteQuery.graphql";
+
+import styles from "./ReportStatusMenu.css";
+
+import ChangeReportStatusMutation from "./ChangeReportStatusMutation";
+
+interface Props {
+  value: DSAReportStatus | null;
+  reportID: string;
+  userID?: string;
+  onChangeReportStatusCompleted: () => void;
+}
+
+const ReportStatusMenu: FunctionComponent<Props> = ({
+  value,
+  reportID,
+  userID,
+  onChangeReportStatusCompleted,
+}) => {
+  const changeReportStatus = useMutation(ChangeReportStatusMutation);
+
+  const onChangeStatus = useCallback(
+    async (status: DSAReportStatus) => {
+      if (status === "COMPLETED") {
+        onChangeReportStatusCompleted();
+      } else {
+        if (userID) {
+          await changeReportStatus({
+            reportID,
+            userID,
+            status,
+          });
+        }
+      }
+    },
+    [reportID, userID, changeReportStatus, onChangeReportStatusCompleted]
+  );
+  return (
+    <>
+      <label
+        className={styles.statusLabel}
+        htmlFor="coral-reports-report-statusMenu"
+      >
+        Status
+      </label>
+      <SelectField
+        id="coral-reports-report-statusMenu"
+        onChange={(e) => onChangeStatus(e.target.value as DSAReportStatus)}
+        value={value ?? "AWAITING_REVIEW"}
+        disabled={value === "COMPLETED" || value === "VOID"}
+      >
+        <Localized id="reports-status-awaitingReview">
+          <Option value="AWAITING_REVIEW">Awaiting review</Option>
+        </Localized>
+        <Localized id="reports-status-inReview">
+          <Option value="UNDER_REVIEW">In review</Option>
+        </Localized>
+        <Localized id="reports-status-completed">
+          <Option value="COMPLETED">Completed</Option>
+        </Localized>
+        <Localized id="reports-status-void">
+          <Option hidden value="VOID">
+            Void
+          </Option>
+        </Localized>
+      </SelectField>
+    </>
+  );
+};
+
+export default ReportStatusMenu;
diff --git a/client/src/core/client/admin/routes/Reports/ReportedComment.css b/client/src/core/client/admin/routes/Reports/ReportedComment.css
new file mode 100644
index 0000000000..f15a0a420b
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportedComment.css
@@ -0,0 +1,49 @@
+.commentMain {
+  flex-grow: 1;
+}
+
+.commentBox {
+  border: 1px solid var(--palette-grey-300);
+  padding: var(--spacing-3);
+  margin-top: var(--spacing-1);
+}
+
+.commentContent {
+  margin: var(--spacing-2) 0;
+}
+
+.commentUsernameButton {
+  padding: 0 0 0 var(--spacing-1);
+
+  span {
+    font-size: var(--font-size-3);
+    font-weight: var(--font-weight-primary-semi-bold);
+    font-family: var(--font-family-primary);
+  }
+}
+
+.edited {
+  margin-left: var(--spacing-2);
+}
+
+.reportUsername {
+  font-size: var(--font-size-3);
+  font-weight: var(--font-weight-primary-regular);
+  font-family: var(--font-family-primary);
+}
+
+.label {
+  font-size: var(--font-size-1);
+  text-transform: uppercase;
+}
+
+.storyTitle {
+  font-size: var(--font-size-2);
+}
+
+.data {
+  color: var(--palette-grey-500);
+  font-size: var(--font-size-2);
+  font-weight: var(--font-weight-primary-regular);
+  white-space: pre-wrap;
+}
diff --git a/client/src/core/client/admin/routes/Reports/ReportedComment.tsx b/client/src/core/client/admin/routes/Reports/ReportedComment.tsx
new file mode 100644
index 0000000000..b89abac05c
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportedComment.tsx
@@ -0,0 +1,197 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+import { graphql } from "react-relay";
+
+import {
+  CommentContent,
+  InReplyTo,
+  UsernameButton,
+} from "coral-admin/components/Comment";
+import { MediaContainer } from "coral-admin/components/MediaContainer";
+import CommentAuthorContainer from "coral-admin/components/ModerateCard/CommentAuthorContainer";
+import NotAvailable from "coral-admin/components/NotAvailable";
+import {
+  getModerationLink,
+  getURLWithCommentID,
+} from "coral-framework/helpers";
+import { withFragmentContainer } from "coral-framework/lib/relay";
+import {
+  Button,
+  Flex,
+  HorizontalGutter,
+  Timestamp,
+} from "coral-ui/components/v2";
+import { StarRating } from "coral-ui/components/v3";
+
+import { ReportedComment_dsaReport } from "coral-admin/__generated__/ReportedComment_dsaReport.graphql";
+
+import styles from "./ReportedComment.css";
+
+interface Props {
+  dsaReport: ReportedComment_dsaReport;
+  onShowUserDrawer: (userID?: string) => void;
+}
+
+const ReportedComment: FunctionComponent<Props> = ({
+  dsaReport,
+  onShowUserDrawer,
+}) => {
+  const { comment } = dsaReport;
+  const inReplyTo = comment && comment.parent && comment.parent.author;
+
+  // TODO: Maybe show something like Comment not available in this case
+  if (!comment) {
+    return null;
+  }
+
+  return (
+    <Flex direction="column">
+      <Flex direction="column" className={styles.commentMain}>
+        <Localized id="reports-singleReport-comment">
+          <div className={styles.label}>Comment</div>
+        </Localized>
+        <>
+          {comment.deleted ? (
+            <Localized id="comments-tombstone-deleted">
+              <div className={styles.data}>
+                This comment is no longer available. The commenter has deleted
+                their account.
+              </div>
+            </Localized>
+          ) : (
+            <>
+              <Flex className={styles.commentBox}>
+                <div>
+                  <div>
+                    <Flex alignItems="center">
+                      {comment.author?.username && (
+                        <>
+                          <UsernameButton
+                            className={styles.commentUsernameButton}
+                            username={comment.author.username}
+                            onClick={() => onShowUserDrawer(comment.author?.id)}
+                          />
+                          <CommentAuthorContainer comment={comment} />
+                        </>
+                      )}
+                      <Timestamp>{comment.createdAt}</Timestamp>
+                      {comment.editing.edited && (
+                        <Localized id="reports-singleReport-comment-edited">
+                          <span className={styles.edited}>(edited)</span>
+                        </Localized>
+                      )}
+                    </Flex>
+                    {inReplyTo && inReplyTo.username && (
+                      <InReplyTo
+                        className={styles.reportUsername}
+                        onUsernameClick={() => onShowUserDrawer(inReplyTo.id)}
+                      >
+                        {inReplyTo.username}
+                      </InReplyTo>
+                    )}
+                  </div>
+                  {comment.rating && (
+                    <div>
+                      <StarRating rating={comment.rating} />
+                    </div>
+                  )}
+                  <div>
+                    <div>
+                      <CommentContent className={styles.commentContent}>
+                        {comment.body || ""}
+                      </CommentContent>
+                      <MediaContainer comment={comment} />
+                    </div>
+                  </div>
+                  <div>
+                    <HorizontalGutter spacing={3}>
+                      <div>
+                        <div>
+                          <Localized id="reports-singleReport-commentOn">
+                            <span className={styles.label}>Comment on</span>
+                          </Localized>
+                          <span>:</span>
+                        </div>
+                        <div>
+                          <span className={styles.storyTitle}>
+                            {comment.story?.metadata?.title ?? <NotAvailable />}
+                          </span>
+                        </div>
+                      </div>
+                    </HorizontalGutter>
+                  </div>
+                </div>
+              </Flex>
+              <Flex marginTop={2}>
+                <Localized id="reports-singleReport-comment-viewCommentStream">
+                  <Button
+                    variant="text"
+                    uppercase={false}
+                    color="mono"
+                    to={getURLWithCommentID(comment.story.url, comment.id)}
+                    target="_blank"
+                  >
+                    View comment in stream
+                  </Button>
+                </Localized>
+              </Flex>
+              <Flex marginTop={2}>
+                <Localized id="reports-singleReport-comment-viewCommentModeration">
+                  <Button
+                    variant="text"
+                    uppercase={false}
+                    color="mono"
+                    target="_blank"
+                    to={getModerationLink({
+                      commentID: comment.id,
+                    })}
+                  >
+                    View comment in moderation
+                  </Button>
+                </Localized>
+              </Flex>
+            </>
+          )}
+        </>
+      </Flex>
+    </Flex>
+  );
+};
+
+const enhanced = withFragmentContainer<Props>({
+  dsaReport: graphql`
+    fragment ReportedComment_dsaReport on DSAReport {
+      id
+      comment {
+        id
+        deleted
+        parent {
+          author {
+            id
+            username
+          }
+        }
+        author {
+          id
+          username
+        }
+        createdAt
+        editing {
+          edited
+        }
+        rating
+        body
+        story {
+          url
+          metadata {
+            title
+          }
+        }
+        ...CommentAuthorContainer_comment
+        ...MediaContainer_comment
+      }
+    }
+  `,
+})(ReportedComment);
+
+export default enhanced;
diff --git a/client/src/core/client/admin/routes/Reports/ReportsRoute.tsx b/client/src/core/client/admin/routes/Reports/ReportsRoute.tsx
new file mode 100644
index 0000000000..946fb1fef1
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportsRoute.tsx
@@ -0,0 +1,31 @@
+import { RouteProps } from "found";
+import React, { FunctionComponent } from "react";
+import { graphql } from "react-relay";
+
+import { createRouteConfig } from "coral-framework/lib/router";
+
+import { ReportsRouteQueryResponse } from "coral-admin/__generated__/ReportsRouteQuery.graphql";
+
+import ReportsTableContainer from "./ReportsTableContainer";
+
+interface Props {
+  data: ReportsRouteQueryResponse | null;
+}
+
+const ReportsRoute: FunctionComponent<Props> & {
+  routeConfig: RouteProps;
+} = (props) => {
+  return <ReportsTableContainer query={props.data} />;
+};
+
+ReportsRoute.routeConfig = createRouteConfig({
+  query: graphql`
+    query ReportsRouteQuery {
+      ...ReportsTableContainer_query
+    }
+  `,
+  cacheConfig: { force: true },
+  Component: ReportsRoute,
+});
+
+export default ReportsRoute;
diff --git a/client/src/core/client/admin/routes/Reports/ReportsSortMenu.css b/client/src/core/client/admin/routes/Reports/ReportsSortMenu.css
new file mode 100644
index 0000000000..fce0e854fa
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportsSortMenu.css
@@ -0,0 +1,9 @@
+.wrapper {
+  margin-left: auto;
+}
+
+.sortLabel {
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-2);
+  font-weight: var(--font-weight-primary-semi-bold);
+}
diff --git a/client/src/core/client/admin/routes/Reports/ReportsSortMenu.tsx b/client/src/core/client/admin/routes/Reports/ReportsSortMenu.tsx
new file mode 100644
index 0000000000..f7e8c7aa60
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportsSortMenu.tsx
@@ -0,0 +1,44 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+
+import { Flex, Option, SelectField } from "coral-ui/components/v2";
+
+import styles from "./ReportsSortMenu.css";
+
+interface Props {
+  onChange: (value: string) => void;
+}
+
+const ReportsSortMenu: FunctionComponent<Props> = ({ onChange }) => {
+  const label = (
+    <Localized id="reports-sortMenu-sortBy">
+      <label className={styles.sortLabel} htmlFor="coral-reports-sortMenu">
+        Sort by
+      </label>
+    </Localized>
+  );
+  return (
+    <Flex
+      paddingBottom={2}
+      justifyContent="flex-end"
+      alignItems="center"
+      itemGutter
+      className={styles.wrapper}
+    >
+      {label}
+      <SelectField
+        id="coral-reports-sortMenu"
+        onChange={(e) => onChange(e.target.value)}
+      >
+        <Localized id="reports-sortMenu-newest">
+          <Option value="CREATED_AT_DESC">Newest</Option>
+        </Localized>
+        <Localized id="reports-sortMenu-oldest">
+          <Option value="CREATED_AT_ASC">Oldest</Option>
+        </Localized>
+      </SelectField>
+    </Flex>
+  );
+};
+
+export default ReportsSortMenu;
diff --git a/client/src/core/client/admin/routes/Reports/ReportsTable.css b/client/src/core/client/admin/routes/Reports/ReportsTable.css
new file mode 100644
index 0000000000..870a3f27b2
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportsTable.css
@@ -0,0 +1,6 @@
+.emptyReports {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-primary-regular);
+  font-size: var(--font-size-3);
+  line-height: 1.3;
+}
diff --git a/client/src/core/client/admin/routes/Reports/ReportsTable.tsx b/client/src/core/client/admin/routes/Reports/ReportsTable.tsx
new file mode 100644
index 0000000000..f18b61eff4
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportsTable.tsx
@@ -0,0 +1,97 @@
+import { Localized } from "@fluent/react/compat";
+import React from "react";
+
+import AutoLoadMore from "coral-admin/components/AutoLoadMore";
+import {
+  Flex,
+  Spinner,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "coral-ui/components/v2";
+import { PropTypesOf } from "coral-ui/types";
+
+import styles from "./ReportsTable.css";
+
+import ReportRowContainer from "./ReportRowContainer";
+
+interface Props {
+  dsaReports: Array<
+    { id: string } & PropTypesOf<typeof ReportRowContainer>["dsaReport"]
+  >;
+  hasMore: boolean;
+  disableLoadMore: boolean;
+  onLoadMore: () => void;
+  loading: boolean;
+}
+
+const ReportsTable: React.FunctionComponent<Props> = ({
+  dsaReports,
+  hasMore,
+  disableLoadMore,
+  onLoadMore,
+  loading,
+}) => {
+  return (
+    <>
+      <Table fullWidth>
+        <TableHead>
+          <TableRow>
+            <Localized id="reportsTable-column-created">
+              <TableCell>Created</TableCell>
+            </Localized>
+            <Localized id="reportsTable-column-lastUpdated">
+              <TableCell>Last updated</TableCell>
+            </Localized>
+            <Localized id="reportsTable-column-reportedBy">
+              <TableCell>Reported by</TableCell>
+            </Localized>
+            <Localized id="reportsTable-column-reference">
+              <TableCell>Reference</TableCell>
+            </Localized>
+            <Localized id="reportsTable-column-lawBroken">
+              <TableCell>Law broken</TableCell>
+            </Localized>
+            <Localized id="reportsTable-column-commentAuthor">
+              <TableCell>Comment author</TableCell>
+            </Localized>
+            <Localized id="reportsTable-column-status">
+              <TableCell>Status</TableCell>
+            </Localized>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {dsaReports.map((report) => {
+            return <ReportRowContainer key={report.id} dsaReport={report} />;
+          })}
+        </TableBody>
+      </Table>
+      {!loading && dsaReports.length === 0 && (
+        <Flex justifyContent="center" padding={3}>
+          <Localized id="reportsTable-emptyReports">
+            <div className={styles.emptyReports}>
+              There are no DSA reports to display.
+            </div>
+          </Localized>
+        </Flex>
+      )}
+      {loading && (
+        <Flex justifyContent="center">
+          <Spinner />
+        </Flex>
+      )}
+      {hasMore && (
+        <Flex justifyContent="center">
+          <AutoLoadMore
+            disableLoadMore={disableLoadMore}
+            onLoadMore={onLoadMore}
+          />
+        </Flex>
+      )}
+    </>
+  );
+};
+
+export default ReportsTable;
diff --git a/client/src/core/client/admin/routes/Reports/ReportsTableContainer.css b/client/src/core/client/admin/routes/Reports/ReportsTableContainer.css
new file mode 100644
index 0000000000..8a5370f00f
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportsTableContainer.css
@@ -0,0 +1,9 @@
+.root {
+  max-width: 950px;
+  margin-top: calc(3 * var(--mini-unit));
+  margin-bottom: calc(3 * var(--mini-unit));
+}
+
+.filterButton {
+  font-size: var(--font-size-2);
+}
diff --git a/client/src/core/client/admin/routes/Reports/ReportsTableContainer.tsx b/client/src/core/client/admin/routes/Reports/ReportsTableContainer.tsx
new file mode 100644
index 0000000000..a901c120fa
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportsTableContainer.tsx
@@ -0,0 +1,188 @@
+import { Localized } from "@fluent/react/compat";
+import React, { useCallback, useMemo, useState } from "react";
+import { graphql, RelayPaginationProp } from "react-relay";
+
+import MainLayout from "coral-admin/components/MainLayout";
+import { IntersectionProvider } from "coral-framework/lib/intersection";
+import {
+  useLoadMore,
+  useRefetch,
+  withPaginationContainer,
+} from "coral-framework/lib/relay";
+import {
+  GQLDSAREPORT_STATUS_FILTER,
+  GQLREPORT_SORT,
+} from "coral-framework/schema";
+import { Button, Flex } from "coral-ui/components/v2";
+
+import { ReportsTableContainer_query as QueryData } from "coral-admin/__generated__/ReportsTableContainer_query.graphql";
+import { ReportsTableContainerPaginationQueryVariables } from "coral-admin/__generated__/ReportsTableContainerPaginationQuery.graphql";
+
+import styles from "./ReportsTableContainer.css";
+
+import ReportsSortMenu from "./ReportsSortMenu";
+import ReportsTable from "./ReportsTable";
+
+interface Props {
+  query: QueryData | null;
+  relay: RelayPaginationProp;
+}
+
+const ReportsTableContainer: React.FunctionComponent<Props> = (props) => {
+  const [orderBy, setOrderBy] = useState<GQLREPORT_SORT>(
+    GQLREPORT_SORT.CREATED_AT_DESC
+  );
+  const [statusFilter, setStatusFilter] = useState<
+    GQLDSAREPORT_STATUS_FILTER[]
+  >([
+    GQLDSAREPORT_STATUS_FILTER.AWAITING_REVIEW,
+    GQLDSAREPORT_STATUS_FILTER.UNDER_REVIEW,
+  ]);
+  const [filterButton, setFilterButton] = useState("completed");
+
+  const onSortChange = useCallback(
+    (value: GQLREPORT_SORT) => {
+      setOrderBy(value);
+    },
+    [setOrderBy]
+  );
+
+  const onShowCompleted = useCallback(() => {
+    setStatusFilter([
+      GQLDSAREPORT_STATUS_FILTER.COMPLETED,
+      GQLDSAREPORT_STATUS_FILTER.VOID,
+    ]);
+    setFilterButton("open");
+  }, []);
+
+  const onShowOpen = useCallback(() => {
+    setStatusFilter([
+      GQLDSAREPORT_STATUS_FILTER.AWAITING_REVIEW,
+      GQLDSAREPORT_STATUS_FILTER.UNDER_REVIEW,
+    ]);
+    setFilterButton("completed");
+  }, []);
+
+  const [loadMore, isLoadingMore] = useLoadMore(props.relay, 10);
+  const [, isRefetching] = useRefetch(props.relay, 10, {
+    orderBy,
+    statusFilter,
+  });
+
+  const dsaReports = useMemo(() => {
+    return props.query
+      ? props.query.dsaReports.edges.map((edge) => edge.node)
+      : [];
+  }, [props]);
+
+  return (
+    <MainLayout className={styles.root} data-testid="dsaReports-container">
+      <IntersectionProvider>
+        <Flex>
+          {filterButton === "completed" ? (
+            <Localized id="reports-table-showClosedReports">
+              <Button
+                className={styles.filterButton}
+                onClick={onShowCompleted}
+                variant="text"
+                color="dark"
+                uppercase={false}
+              >
+                Show closed reports
+              </Button>
+            </Localized>
+          ) : (
+            <Localized id="reports-table-showOpenReports">
+              <Button
+                className={styles.filterButton}
+                onClick={onShowOpen}
+                variant="text"
+                color="dark"
+                uppercase={false}
+              >
+                Show open reports
+              </Button>
+            </Localized>
+          )}
+          <ReportsSortMenu onChange={onSortChange} />
+        </Flex>
+        <ReportsTable
+          dsaReports={dsaReports}
+          hasMore={!isRefetching && props.relay.hasMore()}
+          disableLoadMore={isLoadingMore}
+          onLoadMore={loadMore}
+          loading={!props.query || isRefetching}
+        />
+      </IntersectionProvider>
+    </MainLayout>
+  );
+};
+
+type FragmentVariables = ReportsTableContainerPaginationQueryVariables;
+
+const enhanced = withPaginationContainer<
+  Props,
+  ReportsTableContainerPaginationQueryVariables,
+  FragmentVariables
+>(
+  {
+    query: graphql`
+      fragment ReportsTableContainer_query on Query
+      @argumentDefinitions(
+        count: { type: "Int", defaultValue: 20 }
+        cursor: { type: "Cursor" }
+        orderBy: { type: "REPORT_SORT", defaultValue: CREATED_AT_DESC }
+        statusFilter: {
+          type: "[DSAREPORT_STATUS_FILTER!]"
+          defaultValue: [AWAITING_REVIEW, UNDER_REVIEW]
+        }
+      ) {
+        dsaReports(
+          first: $count
+          after: $cursor
+          orderBy: $orderBy
+          status: $statusFilter
+        ) @connection(key: "ReportsTable_dsaReports") {
+          edges {
+            node {
+              id
+              ...ReportRowContainer_dsaReport
+            }
+          }
+        }
+      }
+    `,
+  },
+  {
+    getConnectionFromProps(props) {
+      return props.query && props.query.dsaReports;
+    },
+    getVariables(props, { count, cursor }, fragmentVariables) {
+      return {
+        count,
+        orderBy: fragmentVariables.orderBy,
+        cursor,
+        statusFilter: fragmentVariables.statusFilter,
+      };
+    },
+    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 ReportsTableContainerPaginationQuery(
+        $count: Int!
+        $cursor: Cursor
+        $orderBy: REPORT_SORT
+        $statusFilter: [DSAREPORT_STATUS_FILTER!]
+      ) {
+        ...ReportsTableContainer_query
+          @arguments(
+            count: $count
+            cursor: $cursor
+            orderBy: $orderBy
+            statusFilter: $statusFilter
+          )
+      }
+    `,
+  }
+)(ReportsTableContainer);
+export default enhanced;
diff --git a/client/src/core/client/admin/routes/Reports/SingleReportRoute.css b/client/src/core/client/admin/routes/Reports/SingleReportRoute.css
new file mode 100644
index 0000000000..b8063109db
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/SingleReportRoute.css
@@ -0,0 +1,67 @@
+.root {
+  font-family: var(--font-family-primary);
+}
+
+.reportsLink {
+  padding: var(--spacing-3) var(--spacing-7);
+  background-color: var(--palette-grey-200);
+}
+
+.header {
+  background-color: var(--palette-primary-900);
+  padding: var(--spacing-3) var(--spacing-7);
+  font-family: var(--font-family-secondary);
+
+  .label {
+    color: var(--palette-text-000);
+    font-weight: var(--font-weight-secondary-bold);
+  }
+}
+
+.label {
+  font-size: var(--font-size-1);
+  text-transform: uppercase;
+}
+
+.refID {
+  color: var(--palette-text-000);
+}
+
+.reportMain {
+  background-color: var(--palette-grey-100);
+  padding: var(--spacing-5) var(--spacing-7);
+  width: 70%;
+
+  .label {
+    color: var(--palette-grey-500);
+    font-weight: var(--font-weight-primary-semi-bold);
+  }
+}
+
+.innerMain {
+  background-color: var(--palette-background-body);
+  padding: var(--spacing-6);
+  flex-grow: 1;
+}
+
+.decisionButton {
+  margin-left: var(--spacing-2);
+}
+
+.autoMarginLeft {
+  margin-left: auto;
+}
+
+.reporterUsernameButton {
+  justify-content: left;
+  padding: 0;
+  font-size: var(--font-size-2);
+  font-weight: var(--font-weight-primary-regular);
+}
+
+.data {
+  color: var(--palette-grey-500);
+  font-size: var(--font-size-2);
+  font-weight: var(--font-weight-primary-regular);
+  white-space: pre-wrap;
+}
diff --git a/client/src/core/client/admin/routes/Reports/SingleReportRoute.tsx b/client/src/core/client/admin/routes/Reports/SingleReportRoute.tsx
new file mode 100644
index 0000000000..708b7a79e9
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/SingleReportRoute.tsx
@@ -0,0 +1,341 @@
+import { Localized } from "@fluent/react/compat";
+import { RouteProps } from "found";
+import React, { FunctionComponent, useCallback, useState } from "react";
+import { graphql } from "react-relay";
+
+import UserHistoryDrawer from "coral-admin/components/UserHistoryDrawer";
+import { useDateTimeFormatter } from "coral-framework/hooks";
+import { IntersectionProvider } from "coral-framework/lib/intersection";
+import { createRouteConfig } from "coral-framework/lib/router";
+import { GQLDSAReportHistoryType } from "coral-framework/schema";
+import {
+  ArrowsLeftIcon,
+  ButtonSvgIcon,
+  LegalHammerIcon,
+  SvgIcon,
+} from "coral-ui/components/icons";
+import {
+  Button,
+  Flex,
+  HorizontalGutter,
+  Spinner,
+} from "coral-ui/components/v2";
+
+import { SingleReportRouteQueryResponse } from "coral-admin/__generated__/SingleReportRouteQuery.graphql";
+
+import styles from "./SingleReportRoute.css";
+
+import NotFound from "../NotFound";
+import ChangeStatusModal from "./ChangeStatusModal";
+import ReportedComment from "./ReportedComment";
+import ReportHistory from "./ReportHistory";
+import ReportMakeDecisionModal from "./ReportMakeDecisionModal";
+import ReportShareButton from "./ReportShareButton";
+import ReportStatusMenu from "./ReportStatusMenu";
+
+type Props = SingleReportRouteQueryResponse;
+
+const SingleReportRoute: FunctionComponent<Props> & {
+  routeConfig: RouteProps;
+} = ({ dsaReport, viewer }) => {
+  const [showChangeStatusModal, setShowChangeStatusModal] = useState<Exclude<
+    GQLDSAReportHistoryType,
+    | GQLDSAReportHistoryType.STATUS_CHANGED
+    | GQLDSAReportHistoryType.DECISION_MADE
+  > | null>(null);
+
+  const formatter = useDateTimeFormatter({
+    day: "2-digit",
+    month: "2-digit",
+    year: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+
+  const [userDrawerUserID, setUserDrawerUserID] = useState<string | undefined>(
+    undefined
+  );
+  const [userDrawerVisible, setUserDrawerVisible] = useState(false);
+
+  const onShowUserDrawer = useCallback(
+    (userID: string | null | undefined) => {
+      if (userID) {
+        setUserDrawerUserID(userID);
+        setUserDrawerVisible(true);
+      }
+    },
+    [setUserDrawerUserID, setUserDrawerVisible]
+  );
+
+  const onHideUserDrawer = useCallback(() => {
+    setUserDrawerVisible(false);
+    setUserDrawerUserID(undefined);
+  }, [setUserDrawerUserID, setUserDrawerVisible]);
+
+  const onSetUserID = useCallback(
+    (userID: string) => {
+      setUserDrawerUserID(userID);
+    },
+    [setUserDrawerUserID]
+  );
+
+  const [showDecisionModal, setShowDecisionModal] = useState(false);
+
+  const onChangeReportStatusCompleted = useCallback(() => {
+    setShowDecisionModal(true);
+  }, [setShowDecisionModal]);
+
+  const onClickMakeDecisionButton = useCallback(() => {
+    setShowDecisionModal(true);
+  }, [setShowDecisionModal]);
+
+  if (!dsaReport) {
+    return <NotFound />;
+  }
+
+  return (
+    <div className={styles.root} data-testid="single-report-route">
+      <Flex className={styles.reportsLink}>
+        <Localized
+          id="reports-singleReport-reportsLinkButton"
+          elems={{ icon: <ButtonSvgIcon Icon={ArrowsLeftIcon} /> }}
+        >
+          <Button
+            variant="text"
+            to="/admin/reports"
+            uppercase={false}
+            iconLeft
+            color="mono"
+          >
+            <ButtonSvgIcon Icon={ArrowsLeftIcon} />
+            All DSA Reports
+          </Button>
+        </Localized>
+      </Flex>
+      <Flex className={styles.header}>
+        <Flex direction="column">
+          <Localized id="reports-singleReport-reportID">
+            <div className={styles.label}>Report ID</div>
+          </Localized>
+          <div className={styles.refID}>{dsaReport.referenceID}</div>
+        </Flex>
+        <Flex alignItems="center" className={styles.autoMarginLeft}>
+          <ReportStatusMenu
+            value={dsaReport.status}
+            reportID={dsaReport.id}
+            userID={viewer?.id}
+            onChangeReportStatusCompleted={onChangeReportStatusCompleted}
+          />
+          <Localized
+            id="reports-singleReport-makeDecisionButton"
+            elems={{ icon: <SvgIcon Icon={LegalHammerIcon} /> }}
+          >
+            <Button
+              className={styles.decisionButton}
+              iconLeft
+              onClick={onClickMakeDecisionButton}
+              disabled={
+                dsaReport.status === "COMPLETED" || dsaReport.status === "VOID"
+              }
+            >
+              <SvgIcon Icon={LegalHammerIcon} />
+              Make Decision
+            </Button>
+          </Localized>
+        </Flex>
+        <Flex
+          className={styles.autoMarginLeft}
+          justifyContent="flex-end"
+          alignItems="center"
+        >
+          <ReportShareButton
+            dsaReport={dsaReport}
+            userID={viewer?.id}
+            setShowChangeStatusModal={setShowChangeStatusModal}
+          />
+        </Flex>
+      </Flex>
+      <Flex>
+        <Flex className={styles.reportMain}>
+          <Flex className={styles.innerMain} direction="column">
+            <HorizontalGutter spacing={5}>
+              <Flex>
+                <Flex direction="column">
+                  <Localized id="reports-singleReport-reporter">
+                    <div className={styles.label}>Reporter</div>
+                  </Localized>
+                  {dsaReport.reporter ? (
+                    <Button
+                      className={styles.reporterUsernameButton}
+                      variant="text"
+                      color="mono"
+                      uppercase={false}
+                      onClick={() => onShowUserDrawer(dsaReport.reporter?.id)}
+                    >
+                      <div>{dsaReport.reporter.username}</div>
+                    </Button>
+                  ) : (
+                    <Localized id="reports-singleReport-reporterNameNotAvailable">
+                      <div className={styles.data}>
+                        Reporter name not available
+                      </div>
+                    </Localized>
+                  )}
+                </Flex>
+                <Flex className={styles.autoMarginLeft} direction="column">
+                  <Localized id="reports-singleReport-reportDate">
+                    <div className={styles.label}>Report Date</div>
+                  </Localized>
+                  <div className={styles.data}>
+                    {formatter(dsaReport.createdAt)}
+                  </div>
+                </Flex>
+              </Flex>
+              <Flex>
+                <Flex direction="column">
+                  <Localized id="reports-singleReport-lawBroken">
+                    <div className={styles.label}>What law was broken?</div>
+                  </Localized>
+                  <div className={styles.data}>
+                    {dsaReport.lawBrokenDescription}
+                  </div>
+                </Flex>
+              </Flex>
+              <Flex>
+                <Flex direction="column">
+                  <Localized id="reports-singleReport-explanation">
+                    <div className={styles.label}>Explanation</div>
+                  </Localized>
+                  <div className={styles.data}>
+                    {dsaReport.additionalInformation}
+                  </div>
+                </Flex>
+              </Flex>
+              <ReportedComment
+                dsaReport={dsaReport}
+                onShowUserDrawer={onShowUserDrawer}
+              />
+              {dsaReport.decision && (
+                <Flex direction="column">
+                  <HorizontalGutter spacing={2}>
+                    <Localized id="reports-singleReport-decisionLabel">
+                      <div className={styles.label}>Decision</div>
+                    </Localized>
+                    {dsaReport.decision.legality === "ILLEGAL" ? (
+                      <>
+                        <Flex direction="column">
+                          <Localized id="reports-singleReport-decision-illegalContent">
+                            <div className={styles.data}>
+                              This report appears to contain illegal content
+                            </div>
+                          </Localized>
+                        </Flex>
+                        <Flex direction="column">
+                          <Localized id="reports-singleReport-decision-legalGrounds">
+                            <div className={styles.label}>Legal grounds</div>
+                          </Localized>
+                          <div className={styles.data}>
+                            {`${dsaReport.decision.legalGrounds}`}
+                          </div>
+                        </Flex>
+                        <Flex direction="column">
+                          <Localized id="reports-singleReport-decision-explanation">
+                            <div className={styles.label}>
+                              Detailed explanation
+                            </div>
+                          </Localized>
+                          <div className={styles.data}>
+                            {`${dsaReport.decision.detailedExplanation}`}
+                          </div>
+                        </Flex>
+                      </>
+                    ) : (
+                      <Localized id="reports-singleReport-decision-legal">
+                        <div className={styles.data}>
+                          This report does not appear to contain illegal content
+                        </div>
+                      </Localized>
+                    )}
+                  </HorizontalGutter>
+                </Flex>
+              )}
+            </HorizontalGutter>
+          </Flex>
+        </Flex>
+        <IntersectionProvider threshold={[0, 1]}>
+          <ReportHistory
+            dsaReport={dsaReport}
+            userID={viewer?.id}
+            setShowChangeStatusModal={setShowChangeStatusModal}
+          />
+        </IntersectionProvider>
+      </Flex>
+      <UserHistoryDrawer
+        userID={userDrawerUserID}
+        open={userDrawerVisible}
+        onClose={onHideUserDrawer}
+        setUserID={onSetUserID}
+      />
+      <ReportMakeDecisionModal
+        userID={viewer?.id}
+        dsaReport={dsaReport}
+        setShowDecisionModal={setShowDecisionModal}
+        showDecisionModal={showDecisionModal}
+      />
+      <ChangeStatusModal
+        showChangeStatusModal={showChangeStatusModal}
+        setShowChangeStatusModal={setShowChangeStatusModal}
+        reportID={dsaReport.id}
+        userID={viewer?.id}
+      />
+    </div>
+  );
+};
+
+SingleReportRoute.routeConfig = createRouteConfig<
+  Props,
+  SingleReportRouteQueryResponse
+>({
+  query: graphql`
+    query SingleReportRouteQuery($reportID: ID!) {
+      viewer {
+        id
+      }
+      dsaReport(id: $reportID) {
+        id
+        referenceID
+        lawBrokenDescription
+        additionalInformation
+        createdAt
+        status
+        reporter {
+          id
+          username
+        }
+        decision {
+          legality
+          legalGrounds
+          detailedExplanation
+        }
+        comment {
+          ...CommentAuthorContainer_comment
+          ...MediaContainer_comment
+        }
+        ...ReportHistory_dsaReport
+        ...ReportShareButton_dsaReport
+        ...ReportMakeDecisionModal_dsaReport
+        ...ReportedComment_dsaReport
+      }
+    }
+  `,
+  Component: SingleReportRoute,
+  cacheConfig: { force: true },
+  render: function SingleReportRouteRender({ Component, data }) {
+    if (Component && data) {
+      return <Component {...data} />;
+    }
+    return <Spinner />;
+  },
+});
+
+export default SingleReportRoute;
diff --git a/client/src/core/client/admin/routes/Reports/index.ts b/client/src/core/client/admin/routes/Reports/index.ts
new file mode 100644
index 0000000000..3f0eeacae8
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/index.ts
@@ -0,0 +1 @@
+export { default, default as ReportsRoute } from "./ReportsRoute";
diff --git a/client/src/core/client/admin/test/dsaReports/dsaReportsSingle.spec.tsx b/client/src/core/client/admin/test/dsaReports/dsaReportsSingle.spec.tsx
new file mode 100644
index 0000000000..40bb90505d
--- /dev/null
+++ b/client/src/core/client/admin/test/dsaReports/dsaReportsSingle.spec.tsx
@@ -0,0 +1,248 @@
+import { screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { pureMerge } from "coral-common/common/lib/utils";
+import {
+  GQLDSAReportDecisionLegality,
+  GQLDSAReportHistoryType,
+  GQLDSAReportStatus,
+  GQLResolver,
+} from "coral-framework/schema";
+import {
+  createResolversStub,
+  CreateTestRendererParams,
+  replaceHistoryLocation,
+} from "coral-framework/testHelpers";
+
+import { createContext } from "../create";
+import customRenderAppWithContext from "../customRenderAppWithContext";
+import { dsaReports, settings, users } from "../fixtures";
+
+const adminViewer = users.admins[0];
+
+beforeEach(async () => {
+  replaceHistoryLocation("http://localhost/admin/reports/report/dsa-report-1");
+});
+
+const createTestRenderer = async (
+  params: CreateTestRendererParams<GQLResolver> = {}
+) => {
+  const { context } = createContext({
+    ...params,
+    resolvers: pureMerge(
+      createResolversStub<GQLResolver>({
+        Query: {
+          settings: () => settings,
+          viewer: () => adminViewer,
+          dsaReport: () => dsaReports[0],
+        },
+        Mutation: {
+          addDSAReportNote: ({ variables }) => {
+            expectAndFail(variables).toMatchObject({
+              body: "This is an initial update that I am looking into this report",
+              reportID: "dsa-report-1",
+              userID: "user-admin-0",
+            });
+            const dsaReportUpdated = pureMerge(dsaReports[0], {
+              history: [
+                {
+                  id: "history-1",
+                  type: GQLDSAReportHistoryType.NOTE,
+                  createdAt: "2023-07-07T18:24:00.000Z",
+                  body: "This is an initial update that I am looking into this report",
+                  createdBy: users.admins[0],
+                },
+              ],
+            });
+            return {
+              dsaReport: dsaReportUpdated,
+            };
+          },
+          changeDSAReportStatus: ({ variables }) => {
+            expectAndFail(variables).toMatchObject({
+              status: GQLDSAReportStatus.UNDER_REVIEW,
+              reportID: "dsa-report-1",
+              userID: "user-admin-0",
+            });
+            const dsaReportUpdated = pureMerge(dsaReports[0], {
+              status: "UNDER_REVIEW",
+              history: [
+                {
+                  id: "history-2",
+                  type: GQLDSAReportHistoryType.STATUS_CHANGED,
+                  createdAt: "2023-07-07T18:24:00.000Z",
+                  status: GQLDSAReportStatus.UNDER_REVIEW,
+                  createdBy: users.admins[0],
+                },
+              ],
+            });
+            return {
+              dsaReport: dsaReportUpdated,
+            };
+          },
+          makeDSAReportDecision: ({ variables }) => {
+            expectAndFail(variables).toMatchObject({
+              reportID: "dsa-report-1",
+              userID: "user-admin-0",
+              legality: GQLDSAReportDecisionLegality.ILLEGAL,
+              legalGrounds: "Legal grounds for illegal content",
+              detailedExplanation: "Explanation of why is illegal content",
+              commentID: dsaReports[0].comment?.id,
+              commentRevisionID: dsaReports[0].comment?.revision?.id,
+            });
+            const dsaReportUpdated = pureMerge(dsaReports[0], {
+              status: GQLDSAReportStatus.COMPLETED,
+              decision: {
+                legality: GQLDSAReportDecisionLegality.ILLEGAL,
+                legalGrounds: "Legal grounds for illegal content",
+                detailedExplanation: "Explanation of why is illegal content",
+              },
+              history: [
+                {
+                  id: "history-3",
+                  type: GQLDSAReportHistoryType.DECISION_MADE,
+                  createdAt: "2023-07-07T18:24:00.000Z",
+                  createdBy: users.admins[0],
+                  decision: {
+                    legality: GQLDSAReportDecisionLegality.ILLEGAL,
+                    legalGrounds: "Legal grounds for illegal content",
+                    detailedExplanation:
+                      "Explanation of why is illegal content",
+                  },
+                },
+              ],
+            });
+            return {
+              dsaReport: dsaReportUpdated,
+            };
+          },
+        },
+      }),
+      params.resolvers
+    ),
+    initLocalState: (localRecord, source, environment) => {
+      if (params.initLocalState) {
+        params.initLocalState(localRecord, source, environment);
+      }
+    },
+  });
+  customRenderAppWithContext(context);
+
+  const container = await screen.findByTestId("single-report-route");
+  return { container };
+};
+
+it("includes expected information about dsa report", async () => {
+  const { container } = await createTestRenderer();
+
+  const allDSAReportsButton = within(container).getByRole("link", {
+    name: "All DSA Reports",
+  });
+  expect(allDSAReportsButton).toHaveProperty(
+    "href",
+    "http://localhost/admin/reports"
+  );
+
+  expect(
+    within(container).getByRole("combobox", { name: "Status" })
+  ).toBeVisible();
+
+  expect(within(container).getByText("What law was broken?")).toBeVisible();
+  expect(
+    within(container).getByText("The law that is alleged to be broken")
+  ).toBeVisible();
+
+  expect(within(container).getByText("Explanation")).toBeVisible();
+  expect(
+    within(container).getByText(
+      "The additional information supporting why that law is alleged to have been broken"
+    )
+  ).toBeVisible();
+
+  expect(
+    within(container).getByRole("link", { name: "View comment in stream" })
+  ).toHaveProperty(
+    "href",
+    "http://localhost/admin/reports/report/dsa-report-1?commentID=comment-regular-0"
+  );
+
+  expect(
+    within(container).getByRole("link", { name: "View comment in moderation" })
+  ).toHaveProperty(
+    "href",
+    "http://localhost/admin/moderate/comment/comment-regular-0"
+  );
+
+  expect(
+    within(container).getByText("Illegal content report submitted")
+  ).toBeVisible();
+});
+
+it("can add notes to a report", async () => {
+  const { container } = await createTestRenderer();
+
+  // Add a note and see that it is then displayed in the report history
+  const addNoteTextbox =
+    within(container).getByPlaceholderText("Add your note...");
+  userEvent.type(
+    addNoteTextbox,
+    "This is an initial update that I am looking into this report"
+  );
+  const addUpdateButton = within(container).getByRole("button", {
+    name: "Add update",
+  });
+  userEvent.click(addUpdateButton);
+  expect(
+    await within(container).findByText("Markus added a note")
+  ).toBeVisible();
+});
+
+it("change status of a report", async () => {
+  const { container } = await createTestRenderer();
+
+  // change status
+  const changeStatus = within(container).getByRole("combobox", {
+    name: "Status",
+  });
+  expect(changeStatus).toHaveValue("AWAITING_REVIEW");
+  userEvent.selectOptions(changeStatus, "In review");
+  expect(
+    await within(container).findByText("Markus changed status to In review")
+  ).toBeVisible();
+  expect(changeStatus).toHaveValue("UNDER_REVIEW");
+});
+
+it("can make a legality decision on a report", async () => {
+  const { container } = await createTestRenderer();
+
+  // make report decision
+  const makeDecisionButton = within(container).getByRole("button", {
+    name: "Make decision",
+  });
+  userEvent.click(makeDecisionButton);
+  const makeDecisionModal = await screen.findByTestId(
+    "report-makeDecisionModal"
+  );
+  const yesButton = within(makeDecisionModal).getByRole("button", {
+    name: "Yes",
+  });
+  userEvent.click(yesButton);
+  const submitButton = within(makeDecisionModal).getByRole("button", {
+    name: "Submit",
+  });
+  expect(submitButton).toBeDisabled();
+  const legalGroundsTextbox =
+    within(makeDecisionModal).getByPlaceholderText("Legal grounds");
+  userEvent.type(legalGroundsTextbox, "Legal grounds for illegal content");
+  expect(submitButton).toBeDisabled();
+  const explanationTextbox =
+    within(makeDecisionModal).getByPlaceholderText("Explanation");
+  userEvent.type(explanationTextbox, "Explanation of why is illegal content");
+  expect(submitButton).toBeEnabled();
+  userEvent.click(submitButton);
+  expect(
+    await within(container).findByText(
+      "Markus made a decision that this report contains illegal content"
+    )
+  );
+});
diff --git a/client/src/core/client/admin/test/dsaReports/dsaReportsTable.spec.tsx b/client/src/core/client/admin/test/dsaReports/dsaReportsTable.spec.tsx
new file mode 100644
index 0000000000..e64b5d4c32
--- /dev/null
+++ b/client/src/core/client/admin/test/dsaReports/dsaReportsTable.spec.tsx
@@ -0,0 +1,65 @@
+import { screen } from "@testing-library/react";
+
+import { pureMerge } from "coral-common/common/lib/utils";
+import { GQLResolver } from "coral-framework/schema";
+import {
+  createResolversStub,
+  CreateTestRendererParams,
+  replaceHistoryLocation,
+} from "coral-framework/testHelpers";
+
+import { createContext } from "../create";
+import customRenderAppWithContext from "../customRenderAppWithContext";
+import { dsaReportConnection, settings, users } from "../fixtures";
+
+const adminViewer = users.admins[0];
+
+beforeEach(async () => {
+  replaceHistoryLocation("http://localhost/admin/reports");
+});
+
+const createTestRenderer = async (
+  params: CreateTestRendererParams<GQLResolver> = {}
+) => {
+  const { context } = createContext({
+    ...params,
+    resolvers: pureMerge(
+      createResolversStub<GQLResolver>({
+        Query: {
+          settings: () => settings,
+          viewer: () => adminViewer,
+          dsaReports: () => dsaReportConnection,
+        },
+      }),
+      params.resolvers
+    ),
+    initLocalState: (localRecord, source, environment) => {
+      if (params.initLocalState) {
+        params.initLocalState(localRecord, source, environment);
+      }
+    },
+  });
+  customRenderAppWithContext(context);
+
+  const container = await screen.findByTestId("dsaReports-container");
+  return { container };
+};
+
+it("has expected columns and sort functionality", async () => {
+  await createTestRenderer();
+
+  const sortBy = screen.getByRole("combobox", { name: "Sort by" });
+  expect(sortBy).toBeVisible();
+
+  screen.getByRole("row", {
+    name: "Created Last updated Reported by Reference Law broken Comment author Status",
+  });
+  screen.getByRole("row", {
+    name: "07/06/23, 06:24 PM - Isabelle dsa-report-1-referenceID The law that is alleged to be broken Isabelle",
+  });
+
+  const showClosedReports = screen.getByRole("button", {
+    name: "Show closed reports",
+  });
+  expect(showClosedReports).toBeVisible();
+});
diff --git a/client/src/core/client/admin/test/fixtures.ts b/client/src/core/client/admin/test/fixtures.ts
index 159c588229..a5e6892a16 100644
--- a/client/src/core/client/admin/test/fixtures.ts
+++ b/client/src/core/client/admin/test/fixtures.ts
@@ -10,6 +10,9 @@ import {
   GQLCOMMENT_STATUS,
   GQLCommentModerationAction,
   GQLCommentsConnection,
+  GQLDSAReport,
+  GQLDSAReportDecisionLegality,
+  GQLDSAReportStatus,
   GQLFlag,
   GQLFlagsConnection,
   GQLMODERATION_MODE,
@@ -829,6 +832,49 @@ export const comments = createFixtures<GQLComment>(
   baseComment
 );
 
+export const dsaReports = createFixtures<GQLDSAReport>([
+  {
+    id: "dsa-report-1",
+    reporter: users.commenters[0],
+    referenceID: "dsa-report-1-referenceID",
+    createdAt: "2023-07-06T18:24:00.000Z",
+    comment: comments[0],
+    status: GQLDSAReportStatus.AWAITING_REVIEW,
+    lawBrokenDescription: "The law that is alleged to be broken",
+    additionalInformation:
+      "The additional information supporting why that law is alleged to have been broken",
+    history: [],
+  },
+  {
+    id: "dsa-report-2",
+    reporter: users.commenters[1],
+    referenceID: "dsa-report-2-referenceID",
+    createdAt: "2023-07-06T18:24:00.000Z",
+    comment: comments[0],
+    status: GQLDSAReportStatus.COMPLETED,
+    lawBrokenDescription: "Law number 2 that is alleged to be broken",
+    additionalInformation:
+      "The additional information supporting why Law number 2 is alleged to have been broken",
+    decision: {
+      legality: GQLDSAReportDecisionLegality.ILLEGAL,
+      legalGrounds: "Violation of Law number 2",
+      detailedExplanation:
+        "A detailed explanation of why it is a violation of Law number 2",
+    },
+    history: [],
+  },
+]);
+
+export const dsaReportConnection = {
+  edges: [
+    { node: dsaReports[0], cursor: dsaReports[0].createdAt },
+    { node: dsaReports[1], cursor: dsaReports[1].createdAt },
+  ],
+  pageInfo: {
+    hasNextPage: false,
+  },
+};
+
 export const unmoderatedComments = createFixtures<GQLComment>(
   [
     {
diff --git a/client/src/core/client/framework/lib/rest.ts b/client/src/core/client/framework/lib/rest.ts
index 883bf9cf2f..8b5708b7d0 100644
--- a/client/src/core/client/framework/lib/rest.ts
+++ b/client/src/core/client/framework/lib/rest.ts
@@ -29,9 +29,8 @@ const handleResp = async (res: Response) => {
     const response = await res.text();
     throw new Error(response);
   }
-
+  const type = res.headers.get("content-type");
   if (!res.ok) {
-    const type = res.headers.get("content-type");
     if (type && type.includes("application/json")) {
       const response = await res.json();
       throw extractTraceableError(response.error);
@@ -45,6 +44,10 @@ const handleResp = async (res: Response) => {
     return res.text();
   }
 
+  if (type && type.includes("application/octet-stream")) {
+    return res.arrayBuffer();
+  }
+
   return res.json();
 };
 
diff --git a/client/src/core/client/stream/App/App.tsx b/client/src/core/client/stream/App/App.tsx
index 915d7c2db9..eaace3541a 100644
--- a/client/src/core/client/stream/App/App.tsx
+++ b/client/src/core/client/stream/App/App.tsx
@@ -4,6 +4,7 @@ import React, { FunctionComponent } from "react";
 
 import { useCoralContext } from "coral-framework/lib/bootstrap/CoralContext";
 import CLASSES from "coral-stream/classes";
+import NotificationsQuery from "coral-stream/tabs/Notifications/NotificationsQuery";
 import { HorizontalGutter, TabContent, TabPane } from "coral-ui/components/v2";
 
 import Comments from "../tabs/Comments";
@@ -18,10 +19,12 @@ type TabValue = "COMMENTS" | "PROFILE" | "DISCUSSIONS" | "%future added value";
 
 export interface AppProps {
   activeTab: TabValue;
+  dsaFeaturesEnabled: boolean;
 }
 
 const App: FunctionComponent<AppProps> = (props) => {
   const { browserInfo } = useCoralContext();
+
   return (
     <Localized id="general-commentsEmbedSection" attrs={{ "aria-label": true }}>
       <HorizontalGutter
@@ -68,6 +71,15 @@ const App: FunctionComponent<AppProps> = (props) => {
             >
               <Configure />
             </TabPane>
+            {props.dsaFeaturesEnabled && (
+              <TabPane
+                className={CLASSES.notificationsTabPane.$root}
+                tabID="NOTIFICATIONS"
+                data-testid="current-tab-pane"
+              >
+                <NotificationsQuery />
+              </TabPane>
+            )}
           </TabContent>
         </div>
       </HorizontalGutter>
diff --git a/client/src/core/client/stream/App/AppContainer.tsx b/client/src/core/client/stream/App/AppContainer.tsx
index 4852e1b921..1d8ae524ae 100644
--- a/client/src/core/client/stream/App/AppContainer.tsx
+++ b/client/src/core/client/stream/App/AppContainer.tsx
@@ -30,16 +30,18 @@ interface Props {
 }
 
 const AppContainer: FunctionComponent<Props> = ({ disableListeners }) => {
-  const [{ activeTab }] = useLocal<AppContainerLocal>(graphql`
-    fragment AppContainerLocal on Local {
-      activeTab
-    }
-  `);
+  const [{ activeTab, dsaFeaturesEnabled }] =
+    useLocal<AppContainerLocal>(graphql`
+      fragment AppContainerLocal on Local {
+        activeTab
+        dsaFeaturesEnabled
+      }
+    `);
   return (
     <>
       {disableListeners ? null : listeners}
       <RefreshTokenHandler />
-      <App activeTab={activeTab} />
+      <App activeTab={activeTab} dsaFeaturesEnabled={!!dsaFeaturesEnabled} />
     </>
   );
 };
diff --git a/client/src/core/client/stream/App/TabBar.css b/client/src/core/client/stream/App/TabBar.css
index 28793e4b81..8b63940722 100644
--- a/client/src/core/client/stream/App/TabBar.css
+++ b/client/src/core/client/stream/App/TabBar.css
@@ -1,8 +1,9 @@
 .smallTab {
-  padding-top: var(--spacing-3);
-  padding-bottom: var(--spacing-3);
-  padding-left: var(--spacing-3);
-  padding-right: var(--spacing-3);
+  padding: var(--spacing-3);
+}
+
+.condensedTab {
+  padding: var(--spacing-2);
 }
 
 .configureTab {
diff --git a/client/src/core/client/stream/App/TabBar.tsx b/client/src/core/client/stream/App/TabBar.tsx
index d9b5614b9b..3deba8cc90 100644
--- a/client/src/core/client/stream/App/TabBar.tsx
+++ b/client/src/core/client/stream/App/TabBar.tsx
@@ -5,10 +5,12 @@ import useGetMessage from "coral-framework/lib/i18n/useGetMessage";
 import { GQLSTORY_MODE } from "coral-framework/schema";
 import CLASSES from "coral-stream/classes";
 import {
+  ActiveNotificationBellIcon,
   CogIcon,
   ConversationChatIcon,
   ConversationQuestionWarningIcon,
   MessagesBubbleSquareIcon,
+  NotificationBellIcon,
   RatingStarIcon,
   SingleNeutralCircleIcon,
   SvgIcon,
@@ -17,7 +19,12 @@ import { MatchMedia, Tab, TabBar } from "coral-ui/components/v2";
 
 import styles from "./TabBar.css";
 
-type TabValue = "COMMENTS" | "PROFILE" | "DISCUSSIONS" | "%future added value";
+type TabValue =
+  | "COMMENTS"
+  | "PROFILE"
+  | "DISCUSSIONS"
+  | "NOTIFICATIONS"
+  | "%future added value";
 
 export interface Props {
   activeTab: TabValue;
@@ -25,6 +32,8 @@ export interface Props {
   showProfileTab: boolean;
   showDiscussionsTab: boolean;
   showConfigureTab: boolean;
+  showNotificationsTab: boolean;
+  hasNewNotifications: boolean;
   mode:
     | "COMMENTS"
     | "QA"
@@ -155,6 +164,29 @@ const AppTabBar: FunctionComponent<Props> = (props) => {
               )}
             </Tab>
           )}
+
+          {props.showNotificationsTab && (
+            <Tab
+              className={cn(CLASSES.tabBar.notifications, {
+                [CLASSES.tabBar.activeTab]: props.activeTab === "NOTIFICATIONS",
+                [styles.condensedTab]: matches,
+                [styles.smallTab]: !matches,
+              })}
+              tabID="NOTIFICATIONS"
+              variant="streamPrimary"
+            >
+              <div>
+                <SvgIcon
+                  size="md"
+                  Icon={
+                    props.hasNewNotifications
+                      ? ActiveNotificationBellIcon
+                      : NotificationBellIcon
+                  }
+                ></SvgIcon>
+              </div>
+            </Tab>
+          )}
         </TabBar>
       )}
     </MatchMedia>
diff --git a/client/src/core/client/stream/App/TabBarContainer.tsx b/client/src/core/client/stream/App/TabBarContainer.tsx
index 294bcdf957..0373c7d74e 100644
--- a/client/src/core/client/stream/App/TabBarContainer.tsx
+++ b/client/src/core/client/stream/App/TabBarContainer.tsx
@@ -30,11 +30,14 @@ export const TabBarContainer: FunctionComponent<Props> = ({
   settings,
   setActiveTab,
 }) => {
-  const [{ activeTab }] = useLocal<TabBarContainerLocal>(graphql`
-    fragment TabBarContainerLocal on Local {
-      activeTab
-    }
-  `);
+  const [{ activeTab, dsaFeaturesEnabled, hasNewNotifications }] =
+    useLocal<TabBarContainerLocal>(graphql`
+      fragment TabBarContainerLocal on Local {
+        activeTab
+        dsaFeaturesEnabled
+        hasNewNotifications
+      }
+    `);
   const handleSetActiveTab = useCallback(
     (tab: SetActiveTabInput["tab"]) => {
       void setActiveTab({ tab });
@@ -59,6 +62,11 @@ export const TabBarContainer: FunctionComponent<Props> = ({
     [viewer, story]
   );
 
+  const showNotificationsTab = useMemo(
+    () => !!viewer && !!dsaFeaturesEnabled,
+    [viewer, dsaFeaturesEnabled]
+  );
+
   return (
     <TabBar
       mode={story ? story.settings.mode : GQLSTORY_MODE.COMMENTS}
@@ -66,6 +74,8 @@ export const TabBarContainer: FunctionComponent<Props> = ({
       showProfileTab={!!viewer}
       showDiscussionsTab={showDiscussionsTab}
       showConfigureTab={showConfigureTab}
+      showNotificationsTab={showNotificationsTab}
+      hasNewNotifications={!!hasNewNotifications}
       onTabClick={handleSetActiveTab}
     />
   );
diff --git a/client/src/core/client/stream/App/TabBarQuery.tsx b/client/src/core/client/stream/App/TabBarQuery.tsx
index 1b5d488e88..26b470da79 100644
--- a/client/src/core/client/stream/App/TabBarQuery.tsx
+++ b/client/src/core/client/stream/App/TabBarQuery.tsx
@@ -11,12 +11,15 @@ import ErrorReporterSetUserContainer from "./ErrorReporterSetUserContainer";
 import TabBarContainer from "./TabBarContainer";
 
 const TabBarQuery: FunctionComponent = () => {
-  const [{ storyID, storyURL }] = useLocal<TabBarQueryLocal>(graphql`
-    fragment TabBarQueryLocal on Local {
-      storyID
-      storyURL
-    }
-  `);
+  const [{ storyID, storyURL, hasNewNotifications }, setLocal] =
+    useLocal<TabBarQueryLocal>(graphql`
+      fragment TabBarQueryLocal on Local {
+        storyID
+        storyURL
+        hasNewNotifications
+      }
+    `);
+
   return (
     <QueryRenderer<QueryTypes>
       query={graphql`
@@ -24,6 +27,7 @@ const TabBarQuery: FunctionComponent = () => {
           viewer {
             ...TabBarContainer_viewer
             ...ErrorReporterSetUserContainer_viewer
+            hasNewNotifications
           }
           story(id: $storyID, url: $storyURL) {
             ...TabBarContainer_story
@@ -46,6 +50,13 @@ const TabBarQuery: FunctionComponent = () => {
           <ErrorReporterSetUserContainer viewer={props.viewer} />
         ) : null;
 
+        if (hasNewNotifications === null) {
+          setLocal({
+            hasNewNotifications:
+              props && props.viewer ? props.viewer.hasNewNotifications : false,
+          });
+        }
+
         return (
           <>
             {ErrorReporterSetUser}
diff --git a/client/src/core/client/stream/classes.ts b/client/src/core/client/stream/classes.ts
index 239fd069fd..b4de3f6efc 100644
--- a/client/src/core/client/stream/classes.ts
+++ b/client/src/core/client/stream/classes.ts
@@ -77,6 +77,8 @@ const CLASSES = {
     configure: "coral coral-tabBar-tab coral-tabBar-configure",
 
     activeTab: "coral-tabBar-tab-active",
+
+    notifications: "coral coral-tabBar-tab coral-tabBar-notifications",
   },
 
   /**
@@ -142,6 +144,10 @@ const CLASSES = {
     settings: "coral coral-tabBarSecondary-tab coral-tabBarMyProfile-settings",
   },
 
+  tabBarNotifications: {
+    loadMore: "coral coral-tabBarNotifications-loadMore",
+  },
+
   /**
    * createComment is the comment creation box where a user can write a comment.
    */
diff --git a/client/src/core/client/stream/local/initLocalState.ts b/client/src/core/client/stream/local/initLocalState.ts
index 2549ad3d29..2be1a5da29 100644
--- a/client/src/core/client/stream/local/initLocalState.ts
+++ b/client/src/core/client/stream/local/initLocalState.ts
@@ -179,5 +179,7 @@ export const createInitLocalState: (options: Options) => InitLocalState =
 
       const dsaFeaturesEnabled = staticConfig?.dsaFeaturesEnabled ?? false;
       localRecord.setValue(dsaFeaturesEnabled, "dsaFeaturesEnabled");
+
+      localRecord.setValue(null, "hasNewNotifications");
     });
   };
diff --git a/client/src/core/client/stream/local/local.graphql b/client/src/core/client/stream/local/local.graphql
index 131585783f..d5e573a3dc 100644
--- a/client/src/core/client/stream/local/local.graphql
+++ b/client/src/core/client/stream/local/local.graphql
@@ -129,4 +129,6 @@ extend type Local {
   refreshStream: Boolean
 
   dsaFeaturesEnabled: Boolean
+
+  hasNewNotifications: Boolean
 }
diff --git a/client/src/core/client/stream/tabs/Comments/IllegalContentReportView/IllegalContentReportViewContainer.tsx b/client/src/core/client/stream/tabs/Comments/IllegalContentReportView/IllegalContentReportViewContainer.tsx
index cf69e35c26..c422028e68 100644
--- a/client/src/core/client/stream/tabs/Comments/IllegalContentReportView/IllegalContentReportViewContainer.tsx
+++ b/client/src/core/client/stream/tabs/Comments/IllegalContentReportView/IllegalContentReportViewContainer.tsx
@@ -3,9 +3,7 @@ import cn from "classnames";
 import { FormApi } from "final-form";
 import React, {
   FunctionComponent,
-  MouseEvent,
   useCallback,
-  useMemo,
   useState,
 } from "react";
 import { Field, Form } from "react-final-form";
@@ -13,7 +11,6 @@ import { graphql } from "react-relay";
 
 import { getURLWithCommentID } from "coral-framework/helpers";
 import { useUUID } from "coral-framework/hooks";
-import { useCoralContext } from "coral-framework/lib/bootstrap";
 import { parseBool } from "coral-framework/lib/form";
 import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
 import { required } from "coral-framework/lib/validation";
@@ -64,9 +61,7 @@ interface FormProps {
 
 const IllegalContentReportViewContainer: FunctionComponent<Props> = (props) => {
   const { comment, story, viewer, settings } = props;
-  const setCommentID = useMutation(SetCommentIDMutation);
   const createDSAReport = useMutation(CreateDSAReportMutation);
-  const { eventEmitter, window } = useCoralContext();
   const [additionalComments, setAdditionalComments] = useState<
     null | { id: string; url: string }[]
   >(null);
@@ -76,23 +71,6 @@ const IllegalContentReportViewContainer: FunctionComponent<Props> = (props) => {
   const [isSubmitted, setIsSubmitted] = useState(false);
   const submissionID = useUUID();
 
-  const onShowAllComments = useCallback(
-    (e: MouseEvent<any>) => {
-      ViewFullDiscussionEvent.emit(eventEmitter, {
-        commentID: comment && comment.id,
-      });
-      void setCommentID({ id: null });
-      // TODO: remove view param too
-      e.preventDefault();
-    },
-    [comment, eventEmitter, setCommentID]
-  );
-
-  const showAllCommentsHref = useMemo(() => {
-    const url = window.location.href;
-    return getURLWithCommentID(url, undefined);
-  }, [window.location.href]);
-
   const commentVisible = comment && isPublished(comment.status);
 
   const onSubmit = useCallback(
@@ -186,40 +164,6 @@ const IllegalContentReportViewContainer: FunctionComponent<Props> = (props) => {
       })}
     >
       <UserBoxContainer viewer={viewer} settings={settings} />
-      {showAllCommentsHref && (
-        <Localized
-          id="comments-permalinkView-reportIllegalContent-backToComments"
-          elems={{
-            Button: (
-              <ButtonSvgIcon
-                className={styles.leftIcon}
-                Icon={ArrowLeftIcon}
-                size="xs"
-              />
-            ),
-          }}
-        >
-          <Button
-            variant="flat"
-            color="primary"
-            fontSize="medium"
-            fontWeight="semiBold"
-            onClick={onShowAllComments}
-            href={showAllCommentsHref}
-            paddingSize="none"
-            target="_parent"
-            anchor
-            underline
-          >
-            <ButtonSvgIcon
-              className={styles.leftIcon}
-              Icon={ArrowLeftIcon}
-              size="xs"
-            />
-            Back to comments
-          </Button>
-        </Localized>
-      )}
       <Localized id="comments-permalinkView-reportIllegalContent-title">
         <div className={styles.title}>Report illegal content</div>
       </Localized>
diff --git a/client/src/core/client/stream/tabs/Notifications/NotificationCommentContainer.css b/client/src/core/client/stream/tabs/Notifications/NotificationCommentContainer.css
new file mode 100644
index 0000000000..3452ea87fd
--- /dev/null
+++ b/client/src/core/client/stream/tabs/Notifications/NotificationCommentContainer.css
@@ -0,0 +1,47 @@
+.toggle {
+  padding: 0;
+  margin-bottom: var(--spacing-1);
+
+  border-style: none;
+
+  background-color: transparent;
+
+  color: var(--palette-primary-300);
+  font-family: var(--font-family-primary);
+  font-style: normal;
+  font-weight: var(--font-weight-primary-bold);
+  font-size: var(--font-size-2);
+
+  &:hover,
+  &.mouseHover {
+    color: var(--palette-primary-200);
+  }
+  &:active,
+  &.active {
+    color: var(--palette-primary-400);
+  }
+}
+
+.content {
+  border-left-style: solid;
+  border-left-width: 2px;
+  border-left-color: var(--palette-grey-400);
+
+  padding-left: var(--spacing-3);
+}
+
+.timestamp {
+  font-family: var(--font-family-primary);
+  font-style: normal;
+  font-weight: var(--font-weight-primary-semi-bold);
+  font-size: var(--font-size-2);
+  color: var(--palette-grey-500);
+}
+
+.storyTitle {
+  font-family: var(--font-family-primary);
+  font-style: normal;
+  font-weight: var(--font-weight-primary-semi-bold);
+  font-size: var(--font-size-2);
+  color: var(--palette-text-900);
+}
diff --git a/client/src/core/client/stream/tabs/Notifications/NotificationCommentContainer.tsx b/client/src/core/client/stream/tabs/Notifications/NotificationCommentContainer.tsx
new file mode 100644
index 0000000000..701d8636fa
--- /dev/null
+++ b/client/src/core/client/stream/tabs/Notifications/NotificationCommentContainer.tsx
@@ -0,0 +1,95 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent, useCallback, useState } from "react";
+import { graphql } from "react-relay";
+
+import { withFragmentContainer } from "coral-framework/lib/relay";
+import { GQLCOMMENT_STATUS } from "coral-framework/schema";
+import HTMLContent from "coral-stream/common/HTMLContent";
+import { Timestamp } from "coral-ui/components/v2";
+
+import {
+  COMMENT_STATUS,
+  NotificationCommentContainer_comment,
+} from "coral-stream/__generated__/NotificationCommentContainer_comment.graphql";
+
+import styles from "./NotificationCommentContainer.css";
+
+interface Props {
+  comment: NotificationCommentContainer_comment;
+  status: COMMENT_STATUS;
+}
+
+const NotificationCommentContainer: FunctionComponent<Props> = ({
+  comment,
+  status,
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const onToggleOpenClosed = useCallback(() => {
+    setIsOpen(!isOpen);
+  }, [setIsOpen, isOpen]);
+
+  return (
+    <>
+      {status === GQLCOMMENT_STATUS.APPROVED && isOpen && (
+        <button className={styles.toggle} onClick={onToggleOpenClosed}>
+          <Localized id="notification-comment-toggle-approved-open">
+            Approved comment
+          </Localized>
+        </button>
+      )}
+      {status === GQLCOMMENT_STATUS.APPROVED && !isOpen && (
+        <button className={styles.toggle} onClick={onToggleOpenClosed}>
+          <Localized id="notification-comment-toggle-approved-closed">
+            + Approved comment
+          </Localized>
+        </button>
+      )}
+      {status === GQLCOMMENT_STATUS.REJECTED && isOpen && (
+        <button className={styles.toggle} onClick={onToggleOpenClosed}>
+          <Localized id="notification-comment-toggle-rejected-open">
+            Rejected comment
+          </Localized>
+        </button>
+      )}
+      {status === GQLCOMMENT_STATUS.REJECTED && !isOpen && (
+        <button className={styles.toggle} onClick={onToggleOpenClosed}>
+          <Localized id="notification-comment-toggle-rejected-closed">
+            + Rejected comment
+          </Localized>
+        </button>
+      )}
+
+      {isOpen && (
+        <div className={styles.content}>
+          <Timestamp className={styles.timestamp}>
+            {comment.createdAt}
+          </Timestamp>
+          <HTMLContent>{comment.body || ""}</HTMLContent>
+          {comment.story.metadata?.title && (
+            <div className={styles.storyTitle}>
+              {comment.story.metadata.title}
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+const enhanced = withFragmentContainer<Props>({
+  comment: graphql`
+    fragment NotificationCommentContainer_comment on Comment {
+      createdAt
+      body
+      status
+      story {
+        metadata {
+          title
+        }
+      }
+    }
+  `,
+})(NotificationCommentContainer);
+
+export default enhanced;
diff --git a/client/src/core/client/stream/tabs/Notifications/NotificationContainer.css b/client/src/core/client/stream/tabs/Notifications/NotificationContainer.css
new file mode 100644
index 0000000000..6a59574db4
--- /dev/null
+++ b/client/src/core/client/stream/tabs/Notifications/NotificationContainer.css
@@ -0,0 +1,85 @@
+.root {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-primary-regular);
+  font-size: var(--font-size-2);
+
+  box-sizing: border-box;
+
+  border-left-style: solid;
+  border-left-width: 4px;
+
+  margin: var(--spacing-2);
+  padding: var(--spacing-2);
+}
+
+.seen {
+  border-left-color: var(--palette-background-body);
+}
+
+.notSeen {
+  border-left-color: var(--palette-primary-500);
+}
+
+.title {
+  width: 100%;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+
+  margin-bottom: var(--spacing-2);
+}
+
+.titleText {
+  margin-left: var(--spacing-2);
+
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-primary-bold);
+  font-size: var(--font-size-3);
+
+  word-break: break-word;
+}
+
+.body {
+  margin-left: var(--spacing-5);
+  margin-bottom: var(--spacing-2);
+
+  width: calc(100% - var(--spacing-4));
+
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-primary-regular);
+  font-size: var(--font-size-2);
+}
+
+.contextItem {
+  margin-left: var(--spacing-5);
+  margin-bottom: var(--spacing-2);
+}
+
+.footer {
+  margin-left: var(--spacing-5);
+}
+
+.timestamp {
+  font-family: var(--font-family-primary);
+  font-style: normal;
+  font-weight: var(--font-weight-primary-semi-bold);
+  font-size: var(--font-size-2);
+  color: var(--palette-text-500);
+}
+
+.divider {
+  margin-left: var(--spacing-4);
+
+  width: calc(100% - var(--spacing-4) * 2);
+  height: 1px;
+
+  background-color: var(--palette-grey-200);
+}
+
+.commentData {
+  padding: var(--spacing-4);
+
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-primary-regular);
+  font-size: var(--font-size-2);
+}
diff --git a/client/src/core/client/stream/tabs/Notifications/NotificationContainer.tsx b/client/src/core/client/stream/tabs/Notifications/NotificationContainer.tsx
new file mode 100644
index 0000000000..54f128dedf
--- /dev/null
+++ b/client/src/core/client/stream/tabs/Notifications/NotificationContainer.tsx
@@ -0,0 +1,91 @@
+import cn from "classnames";
+import React, { FunctionComponent, useMemo } from "react";
+import { graphql } from "react-relay";
+
+import { withFragmentContainer } from "coral-framework/lib/relay";
+import { CheckCircleIcon, SvgIcon } from "coral-ui/components/icons";
+import { Timestamp } from "coral-ui/components/v2";
+
+import { NotificationContainer_notification } from "coral-stream/__generated__/NotificationContainer_notification.graphql";
+import { NotificationContainer_viewer } from "coral-stream/__generated__/NotificationContainer_viewer.graphql";
+
+import NotificationCommentContainer from "./NotificationCommentContainer";
+
+import styles from "./NotificationContainer.css";
+
+interface Props {
+  viewer: NotificationContainer_viewer | null;
+  notification: NotificationContainer_notification;
+}
+
+const NotificationContainer: FunctionComponent<Props> = ({
+  notification: { title, body, comment, createdAt, commentStatus },
+  viewer,
+}) => {
+  const seen = useMemo(() => {
+    if (!viewer) {
+      return false;
+    }
+
+    const createdAtDate = new Date(createdAt);
+    const lastSeenDate = viewer.lastSeenNotificationDate
+      ? new Date(viewer.lastSeenNotificationDate)
+      : new Date(0);
+
+    return createdAtDate.getTime() <= lastSeenDate.getTime();
+  }, [createdAt, viewer]);
+
+  return (
+    <>
+      <div
+        className={cn(styles.root, {
+          [styles.seen]: seen,
+          [styles.notSeen]: !seen,
+        })}
+      >
+        {title && (
+          <div className={styles.title}>
+            <SvgIcon size="sm" Icon={CheckCircleIcon} />
+            <div className={styles.titleText}>{title}</div>
+          </div>
+        )}
+        {body && <div className={cn(styles.body)}>{body}</div>}
+        {comment && (
+          <div className={styles.contextItem}>
+            <NotificationCommentContainer
+              comment={comment}
+              status={commentStatus ? commentStatus : comment.status}
+            />
+          </div>
+        )}
+        <div className={styles.footer}>
+          <Timestamp className={styles.timestamp}>{createdAt}</Timestamp>
+        </div>
+      </div>
+      <div className={styles.divider}></div>
+    </>
+  );
+};
+
+const enhanced = withFragmentContainer<Props>({
+  viewer: graphql`
+    fragment NotificationContainer_viewer on User {
+      lastSeenNotificationDate
+    }
+  `,
+  notification: graphql`
+    fragment NotificationContainer_notification on Notification {
+      id
+      createdAt
+      title
+      body
+      comment {
+        ...NotificationCommentContainer_comment
+        status
+      }
+      commentStatus
+    }
+  `,
+})(NotificationContainer);
+
+export default enhanced;
diff --git a/client/src/core/client/stream/tabs/Notifications/NotificationsContainer.css b/client/src/core/client/stream/tabs/Notifications/NotificationsContainer.css
new file mode 100644
index 0000000000..fc49a10ff4
--- /dev/null
+++ b/client/src/core/client/stream/tabs/Notifications/NotificationsContainer.css
@@ -0,0 +1,11 @@
+.userBox {
+  padding-bottom: var(--spacing-2);
+}
+
+.title {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-primary-semi-bold);
+  font-size: var(--font-size-3);
+
+  word-break: break-word;
+}
diff --git a/client/src/core/client/stream/tabs/Notifications/NotificationsContainer.tsx b/client/src/core/client/stream/tabs/Notifications/NotificationsContainer.tsx
new file mode 100644
index 0000000000..bafb554fd6
--- /dev/null
+++ b/client/src/core/client/stream/tabs/Notifications/NotificationsContainer.tsx
@@ -0,0 +1,66 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent, useCallback, useEffect } from "react";
+import { graphql } from "react-relay";
+
+import { useLocal, withFragmentContainer } from "coral-framework/lib/relay";
+import { UserBoxContainer } from "coral-stream/common/UserBox";
+
+import { NotificationsContainer_settings } from "coral-stream/__generated__/NotificationsContainer_settings.graphql";
+import { NotificationsContainer_viewer } from "coral-stream/__generated__/NotificationsContainer_viewer.graphql";
+import { NotificationsContainerLocal } from "coral-stream/__generated__/NotificationsContainerLocal.graphql";
+
+import NotificationsListQuery from "./NotificationsListQuery";
+
+import styles from "./NotificationsContainer.css";
+
+interface Props {
+  viewer: NotificationsContainer_viewer;
+  settings: NotificationsContainer_settings;
+}
+
+const NotificationsContainer: FunctionComponent<Props> = ({
+  viewer,
+  settings,
+}) => {
+  const [, setLocal] = useLocal<NotificationsContainerLocal>(graphql`
+    fragment NotificationsContainerLocal on Local {
+      hasNewNotifications
+    }
+  `);
+
+  const setViewed = useCallback(() => {
+    setLocal({ hasNewNotifications: false });
+  }, [setLocal]);
+
+  useEffect(() => {
+    setTimeout(setViewed, 300);
+  }, [setViewed]);
+
+  return (
+    <>
+      <div className={styles.userBox}>
+        <UserBoxContainer viewer={viewer} settings={settings} />
+      </div>
+      <div className={styles.title}>
+        <Localized id="notifications-title">Notifications</Localized>
+      </div>
+      <NotificationsListQuery viewerID={viewer.id} />
+    </>
+  );
+};
+
+const enhanced = withFragmentContainer<Props>({
+  viewer: graphql`
+    fragment NotificationsContainer_viewer on User {
+      id
+      ...UserBoxContainer_viewer
+    }
+  `,
+  settings: graphql`
+    fragment NotificationsContainer_settings on Settings {
+      ...UserBoxContainer_settings
+    }
+  `,
+})(NotificationsContainer);
+
+export default enhanced;
diff --git a/client/src/core/client/stream/tabs/Notifications/NotificationsListQuery.tsx b/client/src/core/client/stream/tabs/Notifications/NotificationsListQuery.tsx
new file mode 100644
index 0000000000..1b53319661
--- /dev/null
+++ b/client/src/core/client/stream/tabs/Notifications/NotificationsListQuery.tsx
@@ -0,0 +1,41 @@
+import React, { FunctionComponent } from "react";
+import { graphql } from "react-relay";
+
+import { QueryRenderer } from "coral-framework/lib/relay";
+import { Spinner } from "coral-ui/components/v2";
+import { QueryError } from "coral-ui/components/v3";
+
+import { NotificationsListQuery as QueryTypes } from "coral-stream/__generated__/NotificationsListQuery.graphql";
+import NotificationsPaginator from "./NotificationsPaginator";
+
+interface Props {
+  viewerID: string;
+}
+
+const NotificationsListQuery: FunctionComponent<Props> = ({ viewerID }) => {
+  return (
+    <QueryRenderer<QueryTypes>
+      query={graphql`
+        query NotificationsListQuery($viewerID: ID!) {
+          ...NotificationsPaginator_query @arguments(viewerID: $viewerID)
+        }
+      `}
+      variables={{
+        viewerID,
+      }}
+      render={({ error, props }) => {
+        if (error) {
+          return <QueryError error={error} />;
+        }
+
+        if (!props) {
+          return <Spinner />;
+        }
+
+        return <NotificationsPaginator query={props} viewerID={viewerID} />;
+      }}
+    />
+  );
+};
+
+export default NotificationsListQuery;
diff --git a/client/src/core/client/stream/tabs/Notifications/NotificationsPaginator.tsx b/client/src/core/client/stream/tabs/Notifications/NotificationsPaginator.tsx
new file mode 100644
index 0000000000..32c9c714c7
--- /dev/null
+++ b/client/src/core/client/stream/tabs/Notifications/NotificationsPaginator.tsx
@@ -0,0 +1,144 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent, useCallback, useState } from "react";
+import { graphql, RelayPaginationProp } from "react-relay";
+
+import { useRefetch, withPaginationContainer } from "coral-framework/lib/relay";
+import CLASSES from "coral-stream/classes";
+import Spinner from "coral-stream/common/Spinner";
+import { Button } from "coral-ui/components/v3";
+
+import { NotificationsPaginator_query } from "coral-stream/__generated__/NotificationsPaginator_query.graphql";
+import { NotificationsPaginatorPaginationQueryVariables } from "coral-stream/__generated__/NotificationsPaginatorPaginationQuery.graphql";
+
+import NotificationContainer from "./NotificationContainer";
+
+interface Props {
+  query: NotificationsPaginator_query;
+  relay: RelayPaginationProp;
+  viewerID: string;
+}
+
+const NotificationsPaginator: FunctionComponent<Props> = (props) => {
+  const [disableLoadMore, setDisableLoadMore] = useState(false);
+
+  const [, isRefetching] =
+    useRefetch<NotificationsPaginatorPaginationQueryVariables>(
+      props.relay,
+      10,
+      { viewerID: props.viewerID }
+    );
+
+  const loadMore = useCallback(() => {
+    if (!props.relay.hasMore() || props.relay.isLoading()) {
+      return;
+    }
+
+    setDisableLoadMore(true);
+
+    props.relay.loadMore(
+      10, // Fetch the next 10 feed items
+      (error: any) => {
+        setDisableLoadMore(false);
+
+        if (error) {
+          // eslint-disable-next-line no-console
+          console.error(error);
+        }
+      }
+    );
+  }, [props.relay]);
+
+  if (!props.query || !props.query.viewer) {
+    return null;
+  }
+
+  return (
+    <div>
+      {props.query.notifications.edges.map(({ node }) => {
+        return (
+          <NotificationContainer
+            key={node.id}
+            notification={node}
+            viewer={props.query.viewer}
+          />
+        );
+      })}
+      {isRefetching && <Spinner />}
+      {!isRefetching && !disableLoadMore && props.relay.hasMore() && (
+        <Localized id="notifications-loadMore">
+          <Button
+            key={props.query.notifications.edges.length}
+            onClick={loadMore}
+            variant="outlined"
+            color="secondary"
+            fullWidth
+            disabled={disableLoadMore}
+            aria-controls="notifications-loadMore"
+            className={CLASSES.tabBarNotifications.loadMore}
+          >
+            Load More
+          </Button>
+        </Localized>
+      )}
+    </div>
+  );
+};
+
+type FragmentVariables = NotificationsPaginatorPaginationQueryVariables;
+
+const enhanced = withPaginationContainer<
+  Props,
+  NotificationsPaginatorPaginationQueryVariables,
+  FragmentVariables
+>(
+  {
+    query: graphql`
+      fragment NotificationsPaginator_query on Query
+      @argumentDefinitions(
+        count: { type: "Int", defaultValue: 10 }
+        cursor: { type: "Cursor" }
+        viewerID: { type: "ID!" }
+      ) {
+        viewer {
+          ...NotificationContainer_viewer
+        }
+        notifications(ownerID: $viewerID, after: $cursor, first: $count)
+          @connection(key: "NotificationsPaginator_notifications") {
+          edges {
+            node {
+              id
+              ...NotificationContainer_notification
+            }
+          }
+        }
+      }
+    `,
+  },
+  {
+    getConnectionFromProps(props) {
+      return props.query && props.query.notifications;
+    },
+    getVariables(props, { count, cursor }, fragmentVariables) {
+      return {
+        ...fragmentVariables,
+        count,
+        cursor,
+        viewerID: props.viewerID,
+      };
+    },
+    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 NotificationsPaginatorPaginationQuery(
+        $viewerID: ID!
+        $cursor: Cursor
+        $count: Int!
+      ) {
+        ...NotificationsPaginator_query
+          @arguments(viewerID: $viewerID, count: $count, cursor: $cursor)
+      }
+    `,
+  }
+)(NotificationsPaginator);
+
+export default enhanced;
diff --git a/client/src/core/client/stream/tabs/Notifications/NotificationsQuery.tsx b/client/src/core/client/stream/tabs/Notifications/NotificationsQuery.tsx
new file mode 100644
index 0000000000..20f1adbb65
--- /dev/null
+++ b/client/src/core/client/stream/tabs/Notifications/NotificationsQuery.tsx
@@ -0,0 +1,75 @@
+import { Localized } from "@fluent/react/compat";
+import { once } from "lodash";
+import React, { FunctionComponent, Suspense } from "react";
+import { graphql } from "react-relay";
+
+import { QueryRenderData, QueryRenderer } from "coral-framework/lib/relay";
+import { Delay, Spinner } from "coral-ui/components/v2";
+import { QueryError } from "coral-ui/components/v3";
+
+import { NotificationsQuery as QueryTypes } from "coral-stream/__generated__/NotificationsQuery.graphql";
+
+const loadNotificationsContainer = () =>
+  import("./NotificationsContainer" /* webpackChunkName: "notifications" */);
+
+// (cvle) For some reason without `setTimeout` this request will block other requests.
+const preload = once(() =>
+  setTimeout(() => {
+    void loadNotificationsContainer();
+  }, 0)
+);
+
+const LazyLoadContainer = React.lazy(loadNotificationsContainer);
+
+export const render = ({ error, props }: QueryRenderData<QueryTypes>) => {
+  if (error) {
+    return <QueryError error={error} />;
+  }
+
+  preload();
+
+  if (!props) {
+    return (
+      <Delay>
+        <Spinner />
+      </Delay>
+    );
+  }
+
+  if (!props.viewer) {
+    return (
+      <Localized id="notificationsQuery-errorLoading">
+        <div>Error loading notifications</div>
+      </Localized>
+    );
+  }
+
+  return (
+    <Suspense fallback={<Spinner />}>
+      <LazyLoadContainer viewer={props.viewer} settings={props.settings} />
+    </Suspense>
+  );
+};
+
+const NotificationsQuery: FunctionComponent = () => {
+  return (
+    <QueryRenderer<QueryTypes>
+      query={graphql`
+        query NotificationsQuery {
+          viewer {
+            ...NotificationsContainer_viewer
+          }
+          settings {
+            ...NotificationsContainer_settings
+          }
+        }
+      `}
+      variables={{}}
+      render={(data) => {
+        return render(data);
+      }}
+    />
+  );
+};
+
+export default NotificationsQuery;
diff --git a/client/src/core/client/stream/test/comments/permalink/reportIllegalContentView.spec.tsx b/client/src/core/client/stream/test/comments/permalink/reportIllegalContentView.spec.tsx
index bbf6a00518..8ec5f373e5 100644
--- a/client/src/core/client/stream/test/comments/permalink/reportIllegalContentView.spec.tsx
+++ b/client/src/core/client/stream/test/comments/permalink/reportIllegalContentView.spec.tsx
@@ -114,10 +114,6 @@ it("includes and submits report illegal content form", async () => {
   await screen.findByText("Report illegal content");
   const currentTab = screen.getByTestId("current-tab-pane");
 
-  expect(
-    within(currentTab).getByRole("link", { name: "Back to comments" })
-  ).toBeVisible();
-
   const lawBrokenTextbox = within(currentTab).getByRole("textbox", {
     name: "What law do you believe has been broken? (required)",
   });
diff --git a/client/src/core/client/stream/test/comments/stream/reportComment.spec.tsx b/client/src/core/client/stream/test/comments/stream/reportComment.spec.tsx
index c78f55b523..d169e6cbd6 100644
--- a/client/src/core/client/stream/test/comments/stream/reportComment.spec.tsx
+++ b/client/src/core/client/stream/test/comments/stream/reportComment.spec.tsx
@@ -24,7 +24,7 @@ async function createTestRenderer(
         return stories[0];
       }),
       viewer: sinon.stub().returns(commenters[0]),
-      settings: sinon.stub().returns(settings),
+      settings: sinon.stub().returns({ ...settings, dsa: { enabled: true } }),
       ...resolver.Query,
     },
     Mutation: {
diff --git a/client/src/core/client/stream/test/create.tsx b/client/src/core/client/stream/test/create.tsx
index 7eb6c6827d..26ad0a9e76 100644
--- a/client/src/core/client/stream/test/create.tsx
+++ b/client/src/core/client/stream/test/create.tsx
@@ -40,6 +40,7 @@ const initLocalState = (
   if (params.initLocalState) {
     params.initLocalState(localRecord, source, environment);
   }
+  localRecord.setValue(false, "hasNewNotifications");
 };
 
 export default function create(params: CreateTestRendererParams) {
diff --git a/client/src/core/client/stream/test/fixtures.ts b/client/src/core/client/stream/test/fixtures.ts
index ba7a63e661..b4b2d19d7b 100644
--- a/client/src/core/client/stream/test/fixtures.ts
+++ b/client/src/core/client/stream/test/fixtures.ts
@@ -240,6 +240,7 @@ export const baseUser = createFixture<GQLUser>({
     },
   ],
   avatar: NULL_VALUE,
+  hasNewNotifications: false,
 });
 
 export const userWithModMessageHistory = createFixture<GQLUser>(
diff --git a/client/src/core/client/ui/components/icons/ActiveNotificationBellIcon.tsx b/client/src/core/client/ui/components/icons/ActiveNotificationBellIcon.tsx
new file mode 100644
index 0000000000..749cf8bc26
--- /dev/null
+++ b/client/src/core/client/ui/components/icons/ActiveNotificationBellIcon.tsx
@@ -0,0 +1,32 @@
+import React, { FunctionComponent } from "react";
+
+const ActiveNotificationBellIcon: FunctionComponent = () => {
+  return (
+    <svg viewBox="-1.25 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M13.2291 4.85596C13.2291 5.519 13.4925 6.15488 13.9614 6.62372C14.4302 7.09257 15.0661 7.35596 15.7291 7.35596C16.3922 7.35596 17.0281 7.09257 17.4969 6.62372C17.9657 6.15488 18.2291 5.519 18.2291 4.85596C18.2291 4.19292 17.9657 3.55703 17.4969 3.08819C17.0281 2.61935 16.3922 2.35596 15.7291 2.35596C15.0661 2.35596 14.4302 2.61935 13.9614 3.08819C13.4925 3.55703 13.2291 4.19292 13.2291 4.85596Z"
+        fill="#EB5757"
+      />
+      <path
+        d="M7.60413 18.125C7.70997 18.4856 7.92976 18.8022 8.23059 19.0274C8.53141 19.2526 8.89709 19.3743 9.27288 19.3743C9.64866 19.3743 10.0143 19.2526 10.3152 19.0274C10.616 18.8022 10.8358 18.4856 10.9416 18.125"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.27087 2.5V0.625"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.54 9.96736C15.6975 14.764 16.7709 15.6249 16.7709 15.6249H1.77087C1.77087 15.6249 3.02087 14.0282 3.02087 8.74986C3.02181 7.77073 3.25256 6.80548 3.69457 5.93178C4.13658 5.05809 4.7775 4.30035 5.56577 3.71953C6.35403 3.1387 7.26763 2.75102 8.23304 2.58767C9.19846 2.42432 10.1887 2.48987 11.1242 2.77903"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ActiveNotificationBellIcon;
diff --git a/client/src/core/client/ui/components/icons/ArrowsLeftIcon.tsx b/client/src/core/client/ui/components/icons/ArrowsLeftIcon.tsx
new file mode 100644
index 0000000000..54033084dd
--- /dev/null
+++ b/client/src/core/client/ui/components/icons/ArrowsLeftIcon.tsx
@@ -0,0 +1,18 @@
+import React, { FunctionComponent } from "react";
+
+const ArrowsLeftIcon: FunctionComponent = () => {
+  // https://www.streamlinehq.com/icons/streamline-regular/arrows-diagrams/arrows/arrow-left-1
+  return (
+    <svg viewBox="-0.75 -0.75 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M15.234375 21.796875 5.184375 11.746875a0.7021875 0.7021875 0 0 1 0 -0.99375L15.234375 0.703125"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      ></path>
+    </svg>
+  );
+};
+
+export default ArrowsLeftIcon;
diff --git a/client/src/core/client/ui/components/icons/DrawerDownloadIcon.tsx b/client/src/core/client/ui/components/icons/DrawerDownloadIcon.tsx
new file mode 100644
index 0000000000..db3a68ccce
--- /dev/null
+++ b/client/src/core/client/ui/components/icons/DrawerDownloadIcon.tsx
@@ -0,0 +1,32 @@
+import React, { FunctionComponent } from "react";
+
+const DrawerDownloadIcon: FunctionComponent = () => {
+  // https://www.streamlinehq.com/icons/streamline-regular/emails/drawers/drawer-download
+  return (
+    <svg viewBox="-0.75 -0.75 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M16.095 14.0625a5.5790625 5.5790625 0 0 1 -9.69 0H2.8125a1.40625 1.40625 0 0 0 -1.40625 1.40625V19.6875A1.40625 1.40625 0 0 0 2.8125 21.09375h16.875a1.40625 1.40625 0 0 0 1.40625 -1.40625v-4.21875A1.40625 1.40625 0 0 0 19.6875 14.0625Z"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      ></path>
+      <path
+        d="m11.25 11.25 0 -9.84375"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      ></path>
+      <path
+        d="M7.734375 8.4375 11.25 11.25l3.515625 -2.8125"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      ></path>
+    </svg>
+  );
+};
+
+export default DrawerDownloadIcon;
diff --git a/client/src/core/client/ui/components/icons/LegalHammerIcon.tsx b/client/src/core/client/ui/components/icons/LegalHammerIcon.tsx
new file mode 100644
index 0000000000..22c51c0853
--- /dev/null
+++ b/client/src/core/client/ui/components/icons/LegalHammerIcon.tsx
@@ -0,0 +1,37 @@
+import React, { FunctionComponent } from "react";
+
+const LegalHammer: FunctionComponent = () => {
+  // https://www.streamlinehq.com/icons/streamline-regular/work-office-companies/legal/legal-hammer
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.75 -0.75 24 24">
+      <g>
+        <path
+          d="m12.69375 8.04375 8.746875 8.240625a1.2281250000000001 1.2281250000000001 0 0 1 0 1.734375l-0.8718750000000001 0.8718750000000001a1.2281250000000001 1.2281250000000001 0 0 1 -1.734375 0l-8.240625 -8.746875"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        ></path>
+        <path
+          d="M3.609375 8.00625a17.86875 17.86875 0 0 0 6.946875 -6.946875 1.2281250000000001 1.2281250000000001 0 0 1 1.734375 0l3.290625 3.290625a1.2375 1.2375 0 0 1 0 1.7437500000000001 16.959375 16.959375 0 0 0 -6.946875 6.9375 1.2281250000000001 1.2281250000000001 0 0 1 -1.734375 0l-3.290625 -3.290625a1.2281250000000001 1.2281250000000001 0 0 1 0 -1.734375Z"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        ></path>
+        <path
+          d="M11.953125 19.453125h0a1.40625 1.40625 0 0 0 -1.40625 -1.40625h-7.03125a1.40625 1.40625 0 0 0 -1.40625 1.40625h0v2.34375h9.84375Z"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        ></path>
+        <path
+          d="m0.703125 21.796875 12.65625 0"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        ></path>
+      </g>
+    </svg>
+  );
+};
+
+export default LegalHammer;
diff --git a/client/src/core/client/ui/components/icons/NightMoonHalfIcon.tsx b/client/src/core/client/ui/components/icons/NightMoonHalfIcon.tsx
new file mode 100644
index 0000000000..55c3be0ccf
--- /dev/null
+++ b/client/src/core/client/ui/components/icons/NightMoonHalfIcon.tsx
@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from "react";
+
+const NightMoonHalfIcon: FunctionComponent = () => {
+  // https://www.streamlinehq.com/icons/streamline-regular/weather/day-night/night-moon-half
+  return (
+    <svg viewBox="-0.75 -0.75 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M15.232500000000002 21.9928125a10.546875 10.546875 0 0 1 0 -21.09375Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      ></path>
+    </svg>
+  );
+};
+
+export default NightMoonHalfIcon;
diff --git a/client/src/core/client/ui/components/icons/NotificationBellIcon.tsx b/client/src/core/client/ui/components/icons/NotificationBellIcon.tsx
new file mode 100644
index 0000000000..7ebbefb703
--- /dev/null
+++ b/client/src/core/client/ui/components/icons/NotificationBellIcon.tsx
@@ -0,0 +1,28 @@
+import React, { FunctionComponent } from "react";
+
+const NotificationBellIcon: FunctionComponent = () => {
+  return (
+    <svg viewBox="-0.75 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8.33337 18.125C8.43922 18.4856 8.65901 18.8022 8.95983 19.0274C9.26066 19.2526 9.62634 19.3743 10.0021 19.3743C10.3779 19.3743 10.7436 19.2526 11.0444 19.0274C11.3452 18.8022 11.565 18.4856 11.6709 18.125"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 2.5V0.625"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 2.5C11.6576 2.5 13.2473 3.15848 14.4194 4.33058C15.5915 5.50268 16.25 7.0924 16.25 8.75C16.25 14.6217 17.5 15.625 17.5 15.625H2.5C2.5 15.625 3.75 14.0283 3.75 8.75C3.75 7.0924 4.40848 5.50268 5.58058 4.33058C6.75268 3.15848 8.3424 2.5 10 2.5Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default NotificationBellIcon;
diff --git a/client/src/core/client/ui/components/icons/SignBadgeCircleIcon.tsx b/client/src/core/client/ui/components/icons/SignBadgeCircleIcon.tsx
new file mode 100644
index 0000000000..f4b5aaf743
--- /dev/null
+++ b/client/src/core/client/ui/components/icons/SignBadgeCircleIcon.tsx
@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from "react";
+
+const SignBadgeCircleIcon: FunctionComponent = () => {
+  // https://www.streamlinehq.com/icons/streamline-regular/maps-navigation/sign-shapes/sign-badge-circle
+  return (
+    <svg viewBox="-0.75 -0.75 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M0.703125 11.25a10.546875 10.546875 0 1 0 21.09375 0 10.546875 10.546875 0 1 0 -21.09375 0Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      ></path>
+    </svg>
+  );
+};
+
+export default SignBadgeCircleIcon;
diff --git a/client/src/core/client/ui/components/icons/index.ts b/client/src/core/client/ui/components/icons/index.ts
index e6987c823b..e45bd7f175 100644
--- a/client/src/core/client/ui/components/icons/index.ts
+++ b/client/src/core/client/ui/components/icons/index.ts
@@ -1,3 +1,4 @@
+export { default as ActiveNotificationBellIcon } from "./ActiveNotificationBellIcon";
 export { default as AddIcon } from "./AddIcon";
 export { default as AlarmBellIcon } from "./AlarmBellIcon";
 export { default as AlarmClockIcon } from "./AlarmClockIcon";
@@ -10,6 +11,7 @@ export { default as ArchiveIcon } from "./ArchiveIcon";
 export { default as ArrowsDownIcon } from "./ArrowsDownIcon";
 export { default as ArrowLeftIcon } from "./ArrowLeftIcon";
 export { default as ArrowRightIcon } from "./ArrowRightIcon";
+export { default as ArrowsLeftIcon } from "./ArrowsLeftIcon";
 export { default as ArrowsUpIcon } from "./ArrowsUpIcon";
 export { default as ArrowUpWithTailIcon } from "./ArrowUpWithTailIcon";
 export { default as BinIcon } from "./BinIcon";
@@ -31,6 +33,7 @@ export { default as ConversationChatTextIcon } from "./ConversationChatTextIcon"
 export { default as ConversationQuestionWarningIcon } from "./ConversationQuestionWarningIcon";
 export { default as CoralMarkIcon } from "./CoralMarkIcon";
 export { default as DeleteIcon } from "./DeleteIcon";
+export { default as DrawerDownloadIcon } from "./DrawerDownloadIcon";
 export { default as DuplicateIcon } from "./DuplicateIcon";
 export { default as EmailActionReplyIcon } from "./EmailActionReplyIcon";
 export { default as EmailActionUnreadIcon } from "./EmailActionUnreadIcon";
@@ -42,6 +45,7 @@ export { default as ImageFileLandscapeIcon } from "./ImageFileLandscapeIcon";
 export { default as ImageFileWarningIcon } from "./ImageFileWarningIcon";
 export { default as InformationCircleIcon } from "./InformationCircleIcon";
 export { default as LabFlaskExperimentIcon } from "./LabFlaskExperimentIcon";
+export { default as LegalHammerIcon } from "./LegalHammerIcon";
 export { default as LikeIcon } from "./LikeIcon";
 export { default as ListBulletsIcon } from "./ListBulletsIcon";
 export { default as LockIcon } from "./LockIcon";
@@ -51,6 +55,8 @@ export { default as MultipleActionsChatIcon } from "./MultipleActionsChatIcon";
 export { default as MultipleNeutralIcon } from "./MultipleNeutralIcon";
 export { default as NavigationMenuHorizontalIcon } from "./NavigationMenuHorizontalIcon";
 export { default as NavigationMenuVerticalIcon } from "./NavigationMenuVerticalIcon";
+export { default as NightMoonHalfIcon } from "./NightMoonHalfIcon";
+export { default as NotificationBellIcon } from "./NotificationBellIcon";
 export { default as PaperWriteIcon } from "./PaperWriteIcon";
 export { default as PencilIcon } from "./PencilIcon";
 export { default as QuestionCircleIcon } from "./QuestionCircleIcon";
@@ -63,6 +69,7 @@ export { default as SubtractIcon } from "./SubtractIcon";
 export { default as SearchIcon } from "./SearchIcon";
 export { default as ShareExternalLinkIcon } from "./ShareExternalLinkIcon";
 export { default as ShareIcon } from "./ShareIcon";
+export { default as SignBadgeCircleIcon } from "./SignBadgeCircleIcon";
 export { default as SingleNeutralActionsAddIcon } from "./SingleNeutralActionsAddIcon";
 export { default as SingleNeutralActionsBlockIcon } from "./SingleNeutralActionsBlockIcon";
 export { default as SingleNeutralCircleIcon } from "./SingleNeutralCircleIcon";
diff --git a/locales/en-US/admin.ftl b/locales/en-US/admin.ftl
index 62325e69f6..8326de8225 100644
--- a/locales/en-US/admin.ftl
+++ b/locales/en-US/admin.ftl
@@ -60,6 +60,7 @@ navigation-community = Community
 navigation-stories = Stories
 navigation-configure = Configure
 navigation-dashboard = Dashboard
+navigation-reports = DSA Reports
 
 ## User Menu
 userMenu-signOut = Sign Out
@@ -1806,6 +1807,77 @@ conversation-modal-rejectButton = <icon></icon>Reject
 conversation-modal-rejectButton-rejected = <icon></icon>Rejected
   .aria-label = Rejected
 
+# DSA Reports tab
+reportsTable-column-created = Created
+reportsTable-column-lastUpdated = Last updated
+reportsTable-column-reportedBy = Reported by
+reportsTable-column-reference = Reference
+reportsTable-column-lawBroken = Law broken
+reportsTable-column-commentAuthor = Comment author
+reportsTable-column-status = Status
+reportsTable-emptyReports = There are no DSA reports to display.
+
+reports-sortMenu-newest = Newest
+reports-sortMenu-oldest = Oldest
+reports-sortMenu-sortBy = Sort by
+
+reports-table-showClosedReports = Show closed reports
+reports-table-showOpenReports = Show open reports
+
+reports-singleReport-reportsLinkButton = <icon></icon> All DSA Reports
+reports-singleReport-reportID = Report ID
+reports-singleReport-shareButton = <icon></icon> CSV
+reports-singleReport-reporter = Reporter
+reports-singleReport-reporterNameNotAvailable = Reporter name not available
+reports-singleReport-reportDate = Report date
+reports-singleReport-lawBroken = What law was broken?
+reports-singleReport-explanation = Explanation
+reports-singleReport-comment = Comment
+reports-singleReport-comment-deleted = This comment is no longer available. The commenter has deleted their account.
+reports-singleReport-comment-edited = (edited)
+reports-singleReport-comment-viewCommentStream = View comment in stream
+reports-singleReport-comment-viewCommentModeration = View comment in moderation
+reports-singleReport-commentOn = Comment on
+reports-singleReport-history = History
+reports-singleReport-history-reportSubmitted = Illegal content report submitted
+reports-singleReport-history-addedNote = { $username } added a note
+reports-singleReport-history-deleteNoteButton = <icon></icon> Delete
+reports-singleReport-history-madeDecision-illegal = { $username } made a decision that this report contains illegal content
+reports-singleReport-history-madeDecision-legal = { $username } made a decision that this report does not contain illegal content
+reports-singleReport-history-legalGrounds = Legal grounds: { $legalGrounds }
+reports-singleReport-history-explanation = Explanation: { $explanation }
+reports-singleReport-history-changedStatus = { $username } changed status to { $status }
+reports-singleReport-reportVoid = User deleted their account. Report is void.
+reports-singleReport-history-sharedReport = { $username } shared this report
+reports-singleReport-note-field =
+  .placeholder = Add your note...
+reports-singleReport-addUpdateButton = <icon></icon> Add update
+reports-singleReport-decisionLabel = Decision
+reports-singleReport-decision-illegalContent = This report appears to contain illegal content
+reports-singleReport-decision-legal = This report does not appear to contain illegal content
+reports-singleReport-decision-legalGrounds = Legal grounds
+reports-singleReport-decision-explanation = Detailed explanation
+reports-singleReport-makeDecisionButton = <icon></icon>Make decision
+
+reports-status-awaitingReview = Awaiting review
+reports-status-inReview = In review
+reports-status-completed = Completed
+reports-status-void = Void
+reports-status-unknown = Unknown status
+
+reports-changeStatusModal-prompt-addNote = You have added a note. Would you like to update your status to In review.
+reports-changeStatusModal-prompt-downloadReport = You have downloaded the report. Would you like to update your status to In review.
+reports-changeStatusModal-prompt-madeDecision = You have made a decision. Would you like to update your status to Completed.
+reports-changeStatusModal-updateButton = Yes, update
+reports-changeStatusModal-dontUpdateButton = No
+reports-changeStatusModal-header = Update status?
+
+reports-decisionModal-header = Decision
+reports-decisionModal-prompt = Does this comment appear to contain illegal content?
+reports-decisionModal-yes = Yes
+reports-decisionModal-no = No
+reports-decisionModal-submit = Submit
+
 # Control panel
 
 controlPanel-redis-redis = Redis
diff --git a/locales/en-US/stream.ftl b/locales/en-US/stream.ftl
index f7f30570e2..60c3b15cb4 100644
--- a/locales/en-US/stream.ftl
+++ b/locales/en-US/stream.ftl
@@ -28,6 +28,8 @@ general-tabBar-myProfileTab = My Profile
 general-tabBar-discussionsTab = Discussions
 general-tabBar-reviewsTab = Reviews
 general-tabBar-configure = Configure
+general-tabBar-notifications = Notifications
+general-tabBar-notifications-hasNew = Notifications (has new)
 
 general-mainTablist =
   .aria-label = Main Tablist
@@ -151,7 +153,6 @@ comments-permalinkView-section =
 comments-permalinkView-viewFullDiscussion = View full discussion
 comments-permalinkView-commentRemovedOrDoesNotExist = This comment has been removed or does not exist.
 
-comments-permalinkView-reportIllegalContent-backToComments = <Button></Button>Back to comments
 comments-permalinkView-reportIllegalContent-title = Report illegal content
 comments-permalinkView-reportIllegalContent-description = Under the Digital Services Act (DSA) you can 
   now report illegal content that you see in the comments. Please fill this form out to the best of 
@@ -1029,3 +1030,14 @@ stream-footer-links-discussions = More discussions
   .title = Go to more discussions
 stream-footer-navigation =
   .aria-label = Comments Footer
+
+## Notifications
+
+notifications-title = Notifications
+notifications-loadMore = Load More
+notification-comment-toggle-approved-open = Approved comment
+notification-comment-toggle-approved-closed = + Approved comment
+notification-comment-toggle-rejected-open = Rejected comment
+notification-comment-toggle-rejected-closed = + Rejected comment
+notification-comment-toggle-default-open = Comment
+notification-comment-toggle-default-closed = + Comment
\ No newline at end of file
diff --git a/server/scripts/precommitLint.js b/server/scripts/precommitLint.js
index 955acfb200..dd178222ef 100644
--- a/server/scripts/precommitLint.js
+++ b/server/scripts/precommitLint.js
@@ -26,12 +26,12 @@ sgf((err, results) => {
 
   const eslintFiles = [];
   for (const item of results) {
-    const { filename } = item;
+    const { filename, status } = item;
 
     // only include valid, filtered extensions
     // this is primarily to keep eslint rampaging
     // over non-source files
-    if (!matchesExtension(extensions, filename)) {
+    if (!matchesExtension(extensions, filename) || status === "Deleted") {
       continue;
     }
 
diff --git a/server/src/core/server/app/handlers/api/account/notifications.ts b/server/src/core/server/app/handlers/api/account/notifications.ts
index ff7daccabb..dbec9512c3 100644
--- a/server/src/core/server/app/handlers/api/account/notifications.ts
+++ b/server/src/core/server/app/handlers/api/account/notifications.ts
@@ -2,7 +2,7 @@ import { AppOptions } from "coral-server/app";
 import { RequestLimiter } from "coral-server/app/request/limiter";
 import { updateUserNotificationSettings } from "coral-server/models/user";
 import { decodeJWT, extractTokenFromRequest } from "coral-server/services/jwt";
-import { verifyUnsubscribeTokenString } from "coral-server/services/notifications/categories/unsubscribe";
+import { verifyUnsubscribeTokenString } from "coral-server/services/notifications/email/categories/unsubscribe";
 import { RequestHandler, TenantCoralRequest } from "coral-server/types/express";
 
 export type UnsubscribeCheckOptions = Pick<
diff --git a/server/src/core/server/app/handlers/api/dsaReport.ts b/server/src/core/server/app/handlers/api/dsaReport.ts
new file mode 100644
index 0000000000..aeadc9ea66
--- /dev/null
+++ b/server/src/core/server/app/handlers/api/dsaReport.ts
@@ -0,0 +1,44 @@
+import { AppOptions } from "coral-server/app";
+import { RequestLimiter } from "coral-server/app/request/limiter";
+import { retrieveDSAReport } from "coral-server/models/dsaReport";
+import { sendReportDownload } from "coral-server/services/dsaReports";
+import { RequestHandler, TenantCoralRequest } from "coral-server/types/express";
+
+type AdminDownloadOptions = Pick<
+  AppOptions,
+  "mongo" | "i18n" | "redis" | "config"
+>;
+
+export const reportDownloadHandler = ({
+  mongo,
+  i18n,
+  redis,
+  config,
+}: AdminDownloadOptions): RequestHandler<TenantCoralRequest> => {
+  const ipLimiter = new RequestLimiter({
+    redis,
+    ttl: "10m",
+    max: 10,
+    prefix: "ip",
+    config,
+  });
+  return async (req, res, next) => {
+    try {
+      // Rate limit based on the IP address and user agent.
+      await ipLimiter.test(req, req.ip);
+
+      const { tenant, now } = req.coral;
+      const { reportID } = req.query;
+
+      const report = await retrieveDSAReport(mongo, tenant.id, reportID);
+
+      if (!report) {
+        return res.sendStatus(400);
+      }
+
+      await sendReportDownload(res, mongo, i18n, tenant, report, now);
+    } catch (err) {
+      return next(err);
+    }
+  };
+};
diff --git a/server/src/core/server/app/handlers/api/index.ts b/server/src/core/server/app/handlers/api/index.ts
index 5629b498b8..52f9af2326 100644
--- a/server/src/core/server/app/handlers/api/index.ts
+++ b/server/src/core/server/app/handlers/api/index.ts
@@ -1,6 +1,7 @@
 export * from "./account";
 export * from "./auth";
 export * from "./dashboard";
+export * from "./dsaReport";
 export * from "./externalMedia";
 export * from "./health";
 export * from "./install";
diff --git a/server/src/core/server/app/router/api/dsaReport.ts b/server/src/core/server/app/router/api/dsaReport.ts
new file mode 100644
index 0000000000..06c8211353
--- /dev/null
+++ b/server/src/core/server/app/router/api/dsaReport.ts
@@ -0,0 +1,15 @@
+import { AppOptions } from "coral-server/app";
+import { reportDownloadHandler } from "coral-server/app/handlers";
+import { userLimiterMiddleware } from "coral-server/app/middleware/userLimiter";
+
+import { createAPIRouter } from "./helpers";
+
+export function createDSAReportRouter(app: AppOptions) {
+  const router = createAPIRouter({ cacheDuration: "30s" });
+
+  router.use(userLimiterMiddleware(app));
+
+  router.get("/reportDownload", reportDownloadHandler(app));
+
+  return router;
+}
diff --git a/server/src/core/server/app/router/api/index.ts b/server/src/core/server/app/router/api/index.ts
index afe215a9eb..ededd2e276 100644
--- a/server/src/core/server/app/router/api/index.ts
+++ b/server/src/core/server/app/router/api/index.ts
@@ -23,12 +23,16 @@ import {
   roleMiddleware,
   tenantMiddleware,
 } from "coral-server/app/middleware";
-import { STAFF_ROLES } from "coral-server/models/user/constants";
+import {
+  MODERATOR_ROLES,
+  STAFF_ROLES,
+} from "coral-server/models/user/constants";
 
 import { createNewAccountRouter } from "./account";
 import { createNewAuthRouter } from "./auth";
 import { createCommentRouter } from "./comment";
 import { createDashboardRouter } from "./dashboard";
+import { createDSAReportRouter } from "./dsaReport";
 import { createNewInstallRouter } from "./install";
 import { createRemoteMediaRouter } from "./remoteMedia";
 import { createStoryRouter } from "./story";
@@ -81,6 +85,14 @@ export function createAPIRouter(app: AppOptions, options: RouterOptions) {
   // Attach the GraphQL router (which will be mounted on the same path).
   router.use(apolloGraphQLMiddleware(app));
 
+  router.use(
+    "/dsaReport",
+    authenticate(options.passport),
+    loggedInMiddleware,
+    roleMiddleware(MODERATOR_ROLES),
+    createDSAReportRouter(app)
+  );
+
   router.use(
     "/dashboard",
     authenticate(options.passport),
diff --git a/server/src/core/server/cron/accountDeletion.ts b/server/src/core/server/cron/accountDeletion.ts
index 362fa92114..42f013d341 100644
--- a/server/src/core/server/cron/accountDeletion.ts
+++ b/server/src/core/server/cron/accountDeletion.ts
@@ -67,7 +67,16 @@ const deleteScheduledAccounts: ScheduledJobCommand<Options> = async ({
 
       log.info({ userID: user.id }, "deleting user");
 
-      await deleteUser(mongo, redis, config, i18n, user.id, tenant.id, now);
+      await deleteUser(
+        mongo,
+        redis,
+        config,
+        i18n,
+        user.id,
+        tenant.id,
+        now,
+        tenant.dsa.enabled
+      );
 
       // If the user has an email, then send them a confirmation that their account
       // was deleted.
diff --git a/server/src/core/server/cron/notificationDigesting.ts b/server/src/core/server/cron/notificationDigesting.ts
index 993dd1e8b3..a6f5c6a317 100644
--- a/server/src/core/server/cron/notificationDigesting.ts
+++ b/server/src/core/server/cron/notificationDigesting.ts
@@ -5,7 +5,7 @@ import { MongoContext } from "coral-server/data/context";
 import { MailerQueue } from "coral-server/queue/tasks/mailer";
 import { DigestibleTemplate } from "coral-server/queue/tasks/mailer/templates";
 import { JWTSigningConfig } from "coral-server/services/jwt";
-import NotificationContext from "coral-server/services/notifications/context";
+import NotificationContext from "coral-server/services/notifications/email/context";
 import { TenantCache } from "coral-server/services/tenant/cache";
 
 import { GQLDIGEST_FREQUENCY } from "coral-server/graph/schema/__generated__/types";
diff --git a/server/src/core/server/data/context.ts b/server/src/core/server/data/context.ts
index 375a4b37be..6811b77065 100644
--- a/server/src/core/server/data/context.ts
+++ b/server/src/core/server/data/context.ts
@@ -4,10 +4,11 @@ import { Config } from "coral-server/config";
 import { CommentAction } from "coral-server/models/action/comment";
 import { CommentModerationAction } from "coral-server/models/action/moderation/comment";
 import { Comment } from "coral-server/models/comment";
-import { DSAReport } from "coral-server/models/dsaReport/report";
+import { DSAReport } from "coral-server/models/dsaReport";
 import { createCollection } from "coral-server/models/helpers";
 import { Invite } from "coral-server/models/invite";
 import { MigrationRecord } from "coral-server/models/migration";
+import { Notification } from "coral-server/models/notifications/notification";
 import { PersistedQuery } from "coral-server/models/queries";
 import { SeenComments } from "coral-server/models/seenComments/seenComments";
 import { Site } from "coral-server/models/site";
@@ -37,6 +38,7 @@ export interface MongoContext {
   >;
   seenComments(): Collection<Readonly<SeenComments>>;
   dsaReports(): Collection<Readonly<DSAReport>>;
+  notifications(): Collection<Readonly<Notification>>;
 }
 
 export class MongoContextImpl implements MongoContext {
@@ -88,6 +90,9 @@ export class MongoContextImpl implements MongoContext {
   public dsaReports(): Collection<Readonly<DSAReport>> {
     return createCollection<DSAReport>("dsaReports")(this.live);
   }
+  public notifications(): Collection<Readonly<Notification>> {
+    return createCollection<Notification>("notifications")(this.live);
+  }
   public archivedComments(): Collection<Readonly<Comment>> {
     if (!this.archive) {
       throw new Error(
diff --git a/server/src/core/server/events/listeners/notifier.ts b/server/src/core/server/events/listeners/notifier.ts
index 6ecd044140..a8dfb80142 100644
--- a/server/src/core/server/events/listeners/notifier.ts
+++ b/server/src/core/server/events/listeners/notifier.ts
@@ -1,5 +1,5 @@
 import { NotifierQueue } from "coral-server/queue/tasks/notifier";
-import { categories } from "coral-server/services/notifications/categories";
+import { categories } from "coral-server/services/notifications/email/categories";
 
 import {
   CommentFeaturedCoralEventPayload,
diff --git a/server/src/core/server/graph/context.ts b/server/src/core/server/graph/context.ts
index d68c3feca5..4a27d6e557 100644
--- a/server/src/core/server/graph/context.ts
+++ b/server/src/core/server/graph/context.ts
@@ -24,6 +24,7 @@ import { WordListService } from "coral-server/services/comments/pipeline/phases/
 import { ErrorReporter } from "coral-server/services/errors";
 import { I18n } from "coral-server/services/i18n";
 import { JWTSigningConfig } from "coral-server/services/jwt";
+import { InternalNotificationContext } from "coral-server/services/notifications/internal/context";
 import { AugmentedRedis } from "coral-server/services/redis";
 import { TenantCache } from "coral-server/services/tenant/cache";
 import { Request } from "coral-server/types/express";
@@ -103,6 +104,8 @@ export default class GraphContext {
 
   public readonly wordList: WordListService;
 
+  public readonly notifications: InternalNotificationContext;
+
   constructor(options: GraphContextOptions) {
     this.id = options.id || uuid();
     this.now = options.now || new Date();
@@ -151,5 +154,11 @@ export default class GraphContext {
       this.disableCaching,
       this.config.get("redis_cache_expiry") / 1000
     );
+
+    this.notifications = new InternalNotificationContext(
+      this.mongo,
+      this.i18n,
+      this.logger
+    );
   }
 }
diff --git a/server/src/core/server/graph/loaders/DSAReports.ts b/server/src/core/server/graph/loaders/DSAReports.ts
new file mode 100644
index 0000000000..b84b932206
--- /dev/null
+++ b/server/src/core/server/graph/loaders/DSAReports.ts
@@ -0,0 +1,56 @@
+import DataLoader from "dataloader";
+import { defaultTo } from "lodash";
+
+import {
+  DSAReportConnectionInput,
+  find,
+  retrieveDSAReportConnection,
+} from "coral-server/models/dsaReport";
+
+import GraphContext from "../context";
+import { createManyBatchLoadFn } from "./util";
+
+import {
+  GQLDSAREPORT_STATUS_FILTER,
+  GQLREPORT_SORT,
+  QueryToDsaReportsArgs,
+} from "coral-server/graph/schema/__generated__/types";
+
+type DSAReportConnectionFilterInput = DSAReportConnectionInput["filter"];
+
+export interface FindDSAReportInput {
+  id: string;
+}
+
+const statusFilter = (
+  status?: GQLDSAREPORT_STATUS_FILTER[]
+): DSAReportConnectionFilterInput => {
+  if (status) {
+    return {
+      status: { $in: status },
+    };
+  }
+  return {};
+};
+
+export default (ctx: GraphContext) => ({
+  connection: ({ first, after, orderBy, status }: QueryToDsaReportsArgs) =>
+    retrieveDSAReportConnection(ctx.mongo, ctx.tenant.id, {
+      first: defaultTo(first, 20),
+      after,
+      orderBy: defaultTo(orderBy, GQLREPORT_SORT.CREATED_AT_DESC),
+      filter: {
+        // Merge the status filters into the query.
+        ...statusFilter(status),
+      },
+    }),
+  dsaReport: new DataLoader(
+    createManyBatchLoadFn((input: FindDSAReportInput) =>
+      find(ctx.mongo, ctx.tenant, input)
+    ),
+    {
+      cacheKeyFn: (input: FindDSAReportInput) => `${input.id}`,
+      cache: !ctx.disableCaching,
+    }
+  ),
+});
diff --git a/server/src/core/server/graph/loaders/Notifications.ts b/server/src/core/server/graph/loaders/Notifications.ts
new file mode 100644
index 0000000000..de5bbbfce5
--- /dev/null
+++ b/server/src/core/server/graph/loaders/Notifications.ts
@@ -0,0 +1,23 @@
+import Context from "coral-server/graph/context";
+import {
+  hasNewNotifications,
+  NotificationsConnectionInput,
+  retrieveNotificationsConnection,
+} from "coral-server/models/notifications/notification";
+
+export default (ctx: Context) => ({
+  connection: async ({
+    ownerID,
+    first,
+    after,
+  }: NotificationsConnectionInput) => {
+    return await retrieveNotificationsConnection(ctx.mongo, ctx.tenant.id, {
+      ownerID,
+      first,
+      after,
+    });
+  },
+  hasNewNotifications: async (ownerID: string, lastSeen: Date) => {
+    return hasNewNotifications(ctx.tenant.id, ctx.mongo, ownerID, lastSeen);
+  },
+});
diff --git a/server/src/core/server/graph/loaders/index.ts b/server/src/core/server/graph/loaders/index.ts
index 1b47829656..906ed2d51a 100644
--- a/server/src/core/server/graph/loaders/index.ts
+++ b/server/src/core/server/graph/loaders/index.ts
@@ -4,6 +4,8 @@ import Auth from "./Auth";
 import CommentActions from "./CommentActions";
 import CommentModerationActions from "./CommentModerationActions";
 import Comments from "./Comments";
+import DSAReports from "./DSAReports";
+import Notifications from "./Notifications";
 import SeenComments from "./SeenComments";
 import Sites from "./Sites";
 import Stories from "./Stories";
@@ -18,4 +20,6 @@ export default (ctx: Context) => ({
   Users: Users(ctx),
   Sites: Sites(ctx),
   SeenComments: SeenComments(ctx),
+  Notifications: Notifications(ctx),
+  DSAReports: DSAReports(ctx),
 });
diff --git a/server/src/core/server/graph/mutators/Actions.ts b/server/src/core/server/graph/mutators/Actions.ts
index b43fc6434f..1df55427a8 100644
--- a/server/src/core/server/graph/mutators/Actions.ts
+++ b/server/src/core/server/graph/mutators/Actions.ts
@@ -22,6 +22,7 @@ export const Actions = (ctx: GraphContext) => ({
       ctx.config,
       ctx.i18n,
       ctx.broker,
+      ctx.notifications,
       ctx.tenant,
       input.commentID,
       input.commentRevisionID,
@@ -40,6 +41,7 @@ export const Actions = (ctx: GraphContext) => ({
       ctx.config,
       ctx.i18n,
       ctx.broker,
+      ctx.notifications,
       ctx.tenant,
       input.commentID,
       input.commentRevisionID,
diff --git a/server/src/core/server/graph/mutators/Comments.ts b/server/src/core/server/graph/mutators/Comments.ts
index 38a151a81c..1cec81a7b5 100644
--- a/server/src/core/server/graph/mutators/Comments.ts
+++ b/server/src/core/server/graph/mutators/Comments.ts
@@ -14,6 +14,7 @@ import {
 } from "coral-server/services/comments/actions";
 import { CreateCommentMediaInput } from "coral-server/services/comments/media";
 import { publishCommentFeatured } from "coral-server/services/events";
+import { NotificationType } from "coral-server/services/notifications/internal/context";
 import { markSeen } from "coral-server/services/seenComments";
 import {
   approveComment,
@@ -58,6 +59,7 @@ export const Comments = (ctx: GraphContext) => ({
         ctx.config,
         ctx.i18n,
         ctx.broker,
+        ctx.notifications,
         ctx.tenant,
         ctx.user!,
         {
@@ -259,6 +261,7 @@ export const Comments = (ctx: GraphContext) => ({
         ctx.config,
         ctx.i18n,
         ctx.broker,
+        ctx.notifications,
         ctx.tenant,
         commentID,
         commentRevisionID,
@@ -283,6 +286,12 @@ export const Comments = (ctx: GraphContext) => ({
     // Publish that the comment was featured.
     await publishCommentFeatured(ctx.broker, comment);
 
+    await ctx.notifications.create(ctx.tenant.id, ctx.tenant.locale, {
+      targetUserID: comment.authorID!,
+      comment,
+      type: NotificationType.COMMENT_FEATURED,
+    });
+
     // Return it to the next step.
     return comment;
   },
diff --git a/server/src/core/server/graph/mutators/DSAReports.ts b/server/src/core/server/graph/mutators/DSAReports.ts
index 4483fb7e23..c8c2474f8e 100644
--- a/server/src/core/server/graph/mutators/DSAReports.ts
+++ b/server/src/core/server/graph/mutators/DSAReports.ts
@@ -1,8 +1,22 @@
 import GraphContext from "coral-server/graph/context";
 import { createIllegalContent } from "coral-server/services/comments";
-import { createDSAReport } from "coral-server/services/dsaReports/reports";
+import {
+  addDSAReportNote,
+  addDSAReportShare,
+  changeDSAReportStatus,
+  createDSAReport,
+  deleteDSAReportNote,
+  makeDSAReportDecision,
+} from "coral-server/services/dsaReports/reports";
 
-import { GQLCreateDSAReportInput } from "coral-server/graph/schema/__generated__/types";
+import {
+  GQLAddDSAReportNoteInput,
+  GQLAddDSAReportShareInput,
+  GQLChangeDSAReportStatusInput,
+  GQLCreateDSAReportInput,
+  GQLDeleteDSAReportNoteInput,
+  GQLMakeDSAReportDecisionInput,
+} from "coral-server/graph/schema/__generated__/types";
 
 export const DSAReports = (ctx: GraphContext) => ({
   createDSAReport: async ({
@@ -36,4 +50,44 @@ export const DSAReports = (ctx: GraphContext) => ({
       );
     }
   },
+  addDSAReportNote: ({ userID, body, reportID }: GQLAddDSAReportNoteInput) =>
+    addDSAReportNote(ctx.mongo, ctx.tenant, { userID, body, reportID }),
+  addDSAReportShare: ({ userID, reportID }: GQLAddDSAReportShareInput) =>
+    addDSAReportShare(ctx.mongo, ctx.tenant, { userID, reportID }),
+  deleteDSAReportNote: ({ id, reportID }: GQLDeleteDSAReportNoteInput) =>
+    deleteDSAReportNote(ctx.mongo, ctx.tenant, { id, reportID }),
+  changeDSAReportStatus: ({
+    userID,
+    status,
+    reportID,
+  }: GQLChangeDSAReportStatusInput) =>
+    changeDSAReportStatus(ctx.mongo, ctx.tenant, { userID, status, reportID }),
+  makeDSAReportDecision: ({
+    userID,
+    legality,
+    legalGrounds,
+    detailedExplanation,
+    reportID,
+    commentID,
+    commentRevisionID,
+  }: GQLMakeDSAReportDecisionInput) =>
+    makeDSAReportDecision(
+      ctx.mongo,
+      ctx.redis,
+      ctx.cache,
+      ctx.config,
+      ctx.i18n,
+      ctx.broker,
+      ctx.notifications,
+      ctx.tenant,
+      {
+        userID,
+        legality,
+        legalGrounds,
+        detailedExplanation,
+        reportID,
+        commentID,
+        commentRevisionID,
+      }
+    ),
 });
diff --git a/server/src/core/server/graph/mutators/Users.ts b/server/src/core/server/graph/mutators/Users.ts
index c107a13e9c..4978528862 100644
--- a/server/src/core/server/graph/mutators/Users.ts
+++ b/server/src/core/server/graph/mutators/Users.ts
@@ -188,7 +188,8 @@ export const Users = (ctx: GraphContext) => ({
       ctx.i18n,
       input.userID,
       ctx.tenant.id,
-      ctx.now
+      ctx.now,
+      ctx.tenant.dsa.enabled
     );
   },
   cancelAccountDeletion: async (
diff --git a/server/src/core/server/graph/resolvers/DSAReport.ts b/server/src/core/server/graph/resolvers/DSAReport.ts
new file mode 100644
index 0000000000..a479aebdfa
--- /dev/null
+++ b/server/src/core/server/graph/resolvers/DSAReport.ts
@@ -0,0 +1,36 @@
+import * as dsaReport from "coral-server/models/dsaReport";
+
+import { GQLDSAReportTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
+export const DSAReport: GQLDSAReportTypeResolver<dsaReport.DSAReport> = {
+  reporter: (report, args, ctx) => {
+    if (report.userID) {
+      return ctx.loaders.Users.user.load(report.userID);
+    }
+
+    return null;
+  },
+  comment: ({ commentID }, args, ctx) => {
+    if (commentID) {
+      return ctx.loaders.Comments.comment.load(commentID);
+    }
+
+    return null;
+  },
+  history: ({ history }, args, ctx) => {
+    const consolidatedHistory = history.map((h) => {
+      const createdUser = h.createdBy
+        ? ctx.loaders.Users.user.load(h.createdBy)
+        : null;
+      return { ...h, createdBy: createdUser };
+    });
+    return consolidatedHistory ?? [];
+  },
+  lastUpdated: ({ history }, args, ctx) => {
+    if (history.length > 0) {
+      return history[history.length - 1].createdAt;
+    } else {
+      return null;
+    }
+  },
+};
diff --git a/server/src/core/server/graph/resolvers/Mutation.ts b/server/src/core/server/graph/resolvers/Mutation.ts
index f73ca1da35..26e23ffb2d 100644
--- a/server/src/core/server/graph/resolvers/Mutation.ts
+++ b/server/src/core/server/graph/resolvers/Mutation.ts
@@ -71,6 +71,26 @@ export const Mutation: Required<GQLMutationTypeResolver<void>> = {
     dsaReport: await ctx.mutators.DSAReports.createDSAReport(input),
     clientMutationId: input.clientMutationId,
   }),
+  addDSAReportNote: async (source, { input }, ctx) => ({
+    dsaReport: await ctx.mutators.DSAReports.addDSAReportNote(input),
+    clientMutationId: input.clientMutationId,
+  }),
+  deleteDSAReportNote: async (source, { input }, ctx) => ({
+    dsaReport: await ctx.mutators.DSAReports.deleteDSAReportNote(input),
+    clientMutationId: input.clientMutationId,
+  }),
+  changeDSAReportStatus: async (source, { input }, ctx) => ({
+    dsaReport: await ctx.mutators.DSAReports.changeDSAReportStatus(input),
+    clientMutationId: input.clientMutationId,
+  }),
+  addDSAReportShare: async (source, { input }, ctx) => ({
+    dsaReport: await ctx.mutators.DSAReports.addDSAReportShare(input),
+    clientMutationId: input.clientMutationId,
+  }),
+  makeDSAReportDecision: async (source, { input }, ctx) => ({
+    dsaReport: await ctx.mutators.DSAReports.makeDSAReportDecision(input),
+    clientMutationId: input.clientMutationId,
+  }),
   featureComment: async (
     source,
     { input: { clientMutationId, ...input } },
diff --git a/server/src/core/server/graph/resolvers/Notification.ts b/server/src/core/server/graph/resolvers/Notification.ts
new file mode 100644
index 0000000000..08131c481f
--- /dev/null
+++ b/server/src/core/server/graph/resolvers/Notification.ts
@@ -0,0 +1,34 @@
+import { CommentNotFoundError } from "coral-server/errors";
+import { Notification } from "coral-server/models/notifications/notification";
+
+import { GQLNotificationTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
+export const NotificationResolver: Required<
+  GQLNotificationTypeResolver<Notification>
+> = {
+  id: ({ id }) => id,
+  ownerID: ({ ownerID }) => ownerID,
+  createdAt: ({ createdAt }) => createdAt,
+  title: ({ title }) => title,
+  body: ({ body }) => body,
+  comment: async ({ commentID }, input, ctx) => {
+    if (!commentID) {
+      return null;
+    }
+
+    const comment = await ctx.loaders.Comments.comment.load(commentID);
+    if (!comment) {
+      throw new CommentNotFoundError(commentID);
+    }
+
+    return comment;
+  },
+  commentStatus: ({ commentStatus }) => commentStatus,
+  dsaReport: async ({ reportID }, input, ctx) => {
+    if (!reportID) {
+      return null;
+    }
+
+    return await ctx.loaders.DSAReports.dsaReport.load({ id: reportID });
+  },
+};
diff --git a/server/src/core/server/graph/resolvers/NotificationDSAReportDetails.ts b/server/src/core/server/graph/resolvers/NotificationDSAReportDetails.ts
new file mode 100644
index 0000000000..2008143672
--- /dev/null
+++ b/server/src/core/server/graph/resolvers/NotificationDSAReportDetails.ts
@@ -0,0 +1,27 @@
+import { DSAReport } from "coral-server/models/dsaReport/report";
+
+import { GQLNotificationDSAReportDetailsTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
+export const NotificationDSAReportDetailsResolver: Required<
+  GQLNotificationDSAReportDetailsTypeResolver<DSAReport>
+> = {
+  id: ({ id }) => id,
+  referenceID: ({ referenceID }) => referenceID,
+  comment: async ({ commentID }, input, ctx) => {
+    if (!commentID) {
+      return null;
+    }
+
+    return await ctx.loaders.Comments.comment.load(commentID);
+  },
+  user: async ({ userID }, input, ctx) => {
+    if (!userID) {
+      return null;
+    }
+
+    return await ctx.loaders.Users.user.load(userID);
+  },
+  lawBrokenDescription: ({ lawBrokenDescription }) => lawBrokenDescription,
+  additionalInformation: ({ additionalInformation }) => additionalInformation,
+  submissionID: ({ submissionID }) => submissionID,
+};
diff --git a/server/src/core/server/graph/resolvers/Query.ts b/server/src/core/server/graph/resolvers/Query.ts
index c8857f7aa7..c8ac767860 100644
--- a/server/src/core/server/graph/resolvers/Query.ts
+++ b/server/src/core/server/graph/resolvers/Query.ts
@@ -1,6 +1,8 @@
 import { defaultTo } from "lodash";
 
+import { UserNotFoundError } from "coral-server/errors";
 import { ACTION_TYPE } from "coral-server/models/action/comment";
+import { markLastSeenNotification } from "coral-server/models/notifications/notification";
 import {
   getEmailDomain,
   getExternalModerationPhase,
@@ -50,6 +52,9 @@ export const Query: Required<GQLQueryTypeResolver<void>> = {
     ctx.tenant.emailDomainModeration
       ? getEmailDomain(ctx.tenant.emailDomainModeration, id)
       : null,
+  dsaReports: (source, args, ctx) => ctx.loaders.DSAReports.connection(args),
+  dsaReport: (source, { id }, ctx) =>
+    id ? ctx.loaders.DSAReports.dsaReport.load({ id }) : null,
   flags: (source, { first, after, orderBy, storyID, siteID, section }, ctx) =>
     ctx.loaders.CommentActions.forFilter({
       first: defaultTo(first, 10),
@@ -71,4 +76,25 @@ export const Query: Required<GQLQueryTypeResolver<void>> = {
         },
       },
     }),
+  notifications: async (source, { ownerID, first, after }, ctx) => {
+    const user = await ctx.loaders.Users.user.load(ownerID);
+    if (!user) {
+      throw new UserNotFoundError(ownerID);
+    }
+
+    const connection = await ctx.loaders.Notifications.connection({
+      ownerID,
+      first: defaultTo(first, 10),
+      after,
+    });
+
+    await markLastSeenNotification(
+      ctx.tenant.id,
+      ctx.mongo,
+      user,
+      connection.nodes.map((n) => n.createdAt)
+    );
+
+    return connection;
+  },
 };
diff --git a/server/src/core/server/graph/resolvers/User.ts b/server/src/core/server/graph/resolvers/User.ts
index f1ec3c7d22..dcf1a1e1fc 100644
--- a/server/src/core/server/graph/resolvers/User.ts
+++ b/server/src/core/server/graph/resolvers/User.ts
@@ -89,4 +89,17 @@ export const User: GQLUserTypeResolver<user.User> = {
     return ctx.loaders.Stories.story.loadMany(results.map(({ _id }) => _id));
   },
   mediaSettings: ({ mediaSettings = {} }) => mediaSettings,
+  hasNewNotifications: ({ lastSeenNotificationDate }, input, ctx) => {
+    if (!ctx.user) {
+      return false;
+    }
+
+    return ctx.loaders.Notifications.hasNewNotifications(
+      ctx.user.id,
+      ctx.user.lastSeenNotificationDate ?? new Date(0)
+    );
+  },
+  lastSeenNotificationDate: ({ lastSeenNotificationDate }) => {
+    return lastSeenNotificationDate ?? new Date(0);
+  },
 };
diff --git a/server/src/core/server/graph/resolvers/index.ts b/server/src/core/server/graph/resolvers/index.ts
index 3d25555cce..3f2927f007 100644
--- a/server/src/core/server/graph/resolvers/index.ts
+++ b/server/src/core/server/graph/resolvers/index.ts
@@ -25,6 +25,7 @@ import { CommentReplyCreatedPayload } from "./CommentReplyCreatedPayload";
 import { CommentRevision } from "./CommentRevision";
 import { CommentStatusUpdatedPayload } from "./CommentStatusUpdatedPayload";
 import { DisableCommenting } from "./DisableCommenting";
+import { DSAReport } from "./DSAReport";
 import { EditInfo } from "./EditInfo";
 import { EmailDomain } from "./EmailDomain";
 import { ExternalMediaConfiguration } from "./ExternalMediaConfiguration";
@@ -45,6 +46,8 @@ import { ModMessageStatus } from "./ModMessageStatus";
 import { ModMessageStatusHistory } from "./ModMessageStatusHistory";
 import { Mutation } from "./Mutation";
 import { NewCommentersConfiguration } from "./NewCommentersConfiguration";
+import { NotificationResolver as Notification } from "./Notification";
+import { NotificationDSAReportDetailsResolver as NotificationDSAReportDetails } from "./NotificationDSAReportDetails";
 import { OIDCAuthIntegration } from "./OIDCAuthIntegration";
 import { PremodStatus } from "./PremodStatus";
 import { PremodStatusHistory } from "./PremodStatusHistory";
@@ -105,6 +108,7 @@ const Resolvers: GQLResolver = {
   CommentStatusUpdatedPayload,
   Cursor,
   DisableCommenting,
+  DSAReport,
   EditInfo,
   EmailDomain,
   ExternalMediaConfiguration,
@@ -165,6 +169,8 @@ const Resolvers: GQLResolver = {
   YouTubeMediaConfiguration,
   LocalAuthIntegration,
   AuthenticationTargetFilter,
+  Notification,
+  NotificationDSAReportDetails,
 };
 
 export default Resolvers;
diff --git a/server/src/core/server/graph/schema/schema.graphql b/server/src/core/server/graph/schema/schema.graphql
index bddf35775d..ccb0938035 100644
--- a/server/src/core/server/graph/schema/schema.graphql
+++ b/server/src/core/server/graph/schema/schema.graphql
@@ -2691,6 +2691,13 @@ type UserStatus {
     )
 }
 
+enum DSAREPORT_STATUS_FILTER {
+  AWAITING_REVIEW
+  UNDER_REVIEW
+  COMPLETED
+  VOID
+}
+
 enum USER_STATUS_FILTER {
   """
   ACTIVE is used when a User is not suspended or banned.
@@ -3174,6 +3181,27 @@ type User {
   bio is a user-defined biography.
   """
   bio: String
+
+  """
+  hasNewNotifications returns true if the user has received new notifications
+  since they last viewed their notifications tab.
+  """
+  hasNewNotifications: Boolean!
+    @auth(
+      userIDField: "id"
+      roles: [ADMIN, MODERATOR]
+      permit: [SUSPENDED, BANNED, PENDING_DELETION, WARNED]
+    )
+
+  """
+  lastSeenNotificationDate is the date of the last notification the user viewed.
+  """
+  lastSeenNotificationDate: Time
+    @auth(
+      userIDField: "id"
+      roles: [ADMIN, MODERATOR]
+      permit: [SUSPENDED, BANNED, PENDING_DELETION, WARNED]
+    )
 }
 
 """
@@ -3246,6 +3274,41 @@ type SitesConnection {
   pageInfo: PageInfo!
 }
 
+"""
+DSAReportEdge represents a unique DSAReport in a DSAReportConnection.
+"""
+type DSAReportEdge {
+  """
+  node is the DSAReport for this edge.
+  """
+  node: DSAReport!
+
+  """
+  cursor is used in pagination.
+  """
+  cursor: Cursor!
+}
+
+"""
+DSAReportsConnection represents a subset of a DSA reports list.
+"""
+type DSAReportsConnection {
+  """
+  edges are a subset of DSAReportEdge's.
+  """
+  edges: [DSAReportEdge!]!
+
+  """
+  nodes is a list of DSAReports.
+  """
+  nodes: [DSAReport!]!
+
+  """
+  pageInfo is information to aid in pagination.
+  """
+  pageInfo: PageInfo!
+}
+
 ################################################################################
 ## Comment
 ################################################################################
@@ -3341,6 +3404,7 @@ type RejectionReason {
   legalGrounds is the specific laws broken as described by the reporter
   """
   legalGrounds: String
+
   """
   detailedExplanation is any additional information the user wishes to provide.
   """
@@ -3418,16 +3482,72 @@ enum DSAReportStatus {
   AWAITING_REVIEW
   UNDER_REVIEW
   COMPLETED
+  """
+  VOID is set for a DSAReport if its reported comment/user are deleted while the report is in review
+  """
+  VOID
 }
 
 """
 DSAReportDecision keeps track of whether a DSAReport was determined illegal or not
 """
-enum DSAReportDecision {
+enum DSAReportDecisionLegality {
   LEGAL
   ILLEGAL
 }
 
+enum DSAReportHistoryType {
+  STATUS_CHANGED
+  NOTE
+  DECISION_MADE
+  SHARE
+}
+
+type DSAReportDecision {
+  legality: DSAReportDecisionLegality!
+  legalGrounds: String
+  detailedExplanation: String
+}
+
+type DSAReportHistoryItem {
+  id: ID!
+
+  """
+  type is the kind of DSA report history item this is
+  """
+  type: DSAReportHistoryType
+
+  """
+  createdAt is when this report history item was created
+  """
+  createdAt: Time!
+
+  """
+  createdBy is the user who added this report history item
+  """
+  createdBy: User
+
+  """
+  decision is included if the report history item is making a decision
+  """
+  decision: DSAReportDecision
+
+  """
+  note is included as an explanation for a report history item decision
+  """
+  note: String
+
+  """
+  status is the new status if the report history item type changes the status
+  """
+  status: DSAReportStatus
+
+  """
+  body is the text added if the report history item decision is a note added
+  """
+  body: String
+}
+
 type DSAReport {
   id: ID!
 
@@ -3444,12 +3564,12 @@ type DSAReport {
   """
   user who submitted the DSAReport
   """
-  createdBy: User!
+  reporter: User
 
   """
-  commentID of the comment reported
+  comment reported as containing illegal content
   """
-  commentID: String!
+  comment: Comment
 
   """
   createdAt is when the DSAReport was created
@@ -3474,9 +3594,23 @@ type DSAReport {
   additionalInformation: String!
 
   """
-  decision is the determination of whether the reported comment is illegal or not
+  decision is the determination of whether the reported comment is illegal or not, as well as
+  the legal grounds for the decision and additional detailed explanation of decision
   """
   decision: DSAReportDecision
+
+  """
+  history includes report history items such as notes added to a report, when a report's
+  status is changed, and if a decision is made regarding whether the related comment contains
+  illegal content or not
+  """
+  history: [DSAReportHistoryItem]
+
+  """
+  lastUpdated is when the DSAReport last had an action created and added to its history,
+  such as a note added, status changed, or decision made
+  """
+  lastUpdated: Time
 }
 
 type CommentRevisionPerspectiveMetadata {
@@ -4156,6 +4290,11 @@ enum COMMENT_SORT {
   REACTION_DESC
 }
 
+enum REPORT_SORT {
+  CREATED_AT_DESC
+  CREATED_AT_ASC
+}
+
 """
 StoryMetadata stores all the metadata that is scraped using the scraping tools
 inside Coral. Coral utilizes [metascraper](https://metascraper.js.org/) which uses
@@ -4538,6 +4677,128 @@ type Queues {
   unarchiver: Queue!
 }
 
+################################################################################
+## Notifications
+################################################################################
+
+type Notification {
+  """
+  id is the uuid identifier for the notification.
+  """
+  id: ID!
+
+  """
+  ownerID is the string identifier for who this notification is directed to.
+  """
+  ownerID: ID!
+
+  """
+  createdAt is when this notification was created, used for sorting.
+  """
+  createdAt: Time!
+
+  """
+  title is the title text of this notification.
+  """
+  title: String
+
+  """
+  body is the text content of this notification.
+  """
+  body: String
+
+  """
+  comment is the optional comment that is linked to this notification.
+  """
+  comment: Comment
+
+  """
+  commentStatus is the optional status of the comment when the notification
+  was created. This allows for the context of the state of the comment to be
+  persisted even if the comment reference undergoes multiple moderation actions
+  since the notification was created.
+  """
+  commentStatus: COMMENT_STATUS
+
+  """
+  dsaReport is the details of the DSA Report related to the notification.
+  This is usually in reference to the comment that is also related to
+  the notification.
+  """
+  dsaReport: NotificationDSAReportDetails
+}
+
+type NotificationEdge {
+  """
+  node is the Flag for this edge.
+  """
+  node: Notification!
+
+  """
+  cursor is used in pagination.
+  """
+  cursor: Cursor!
+}
+
+type NotificationsConnection {
+  """
+  edges are a subset of FlagEdge's.
+  """
+  edges: [NotificationEdge!]!
+
+  """
+  nodes is a list of Flags.
+  """
+  nodes: [Notification!]!
+
+  """
+  pageInfo is information to aid in pagination.
+  """
+  pageInfo: PageInfo!
+}
+
+type NotificationDSAReportDetails {
+  """
+  id is the primary identifier of the DSA report.
+  """
+  id: ID!
+
+  """
+  referenceID is the friendly identifier that is human readable
+  for the DSA report.
+  """
+  referenceID: String!
+
+  """
+  comment is the comment associated with the DSA report.
+  """
+  comment: Comment
+
+  """
+  user is the target user (of the comment) the DSA report pertains to.
+  """
+  user: User
+
+  """
+  lawBrokenDescription describes the law that was allegedly broken in the
+  DSA report.
+  """
+  lawBrokenDescription: String @auth(roles: [ADMIN, MODERATOR])
+
+  """
+  additionalInformation is any further relevant details added by the user
+  who filed the DSA report.
+  """
+  additionalInformation: String @auth(roles: [ADMIN, MODERATOR])
+
+  """
+  submissionID is the linking id that connects this DSA report to other reports
+  that may have been submitted at the same time by the same reporting user as
+  a collection of co-related DSA reports.
+  """
+  submissionID: ID @auth(roles: [ADMIN, MODERATOR])
+}
+
 ################################################################################
 ## Query
 ################################################################################
@@ -4704,6 +4965,31 @@ type Query {
   emailDomain will return a specific emailDomain configuration if it exists.
   """
   emailDomain(id: ID!): EmailDomain @auth(roles: [ADMIN])
+
+  """
+  dsaReports are the list of dsaReports
+  """
+  dsaReports(
+    first: Int = 10 @constraint(max: 50)
+    after: Cursor
+    orderBy: REPORT_SORT = CREATED_AT_DESC
+    status: [DSAREPORT_STATUS_FILTER!]
+    query: String
+  ): DSAReportsConnection! @auth(roles: [ADMIN, MODERATOR])
+
+  """
+  dsaReport returns a specific dsaReport.
+  """
+  dsaReport(id: ID!): DSAReport
+
+  """
+  notifications will return a list of notifications for an ownerID.
+  """
+  notifications(
+    ownerID: ID!
+    first: Int = 10 @constraint(max: 50)
+    after: Cursor
+  ): NotificationsConnection!
 }
 
 ################################################################################
@@ -6225,6 +6511,186 @@ type CreateCommentFlagPayload {
   clientMutationId: String!
 }
 
+input AddDSAReportNoteInput {
+  """
+  id of the user who added the note to the DSAReport
+  """
+  userID: ID!
+
+  """
+  body is the text of the note added to the DSAReport
+  """
+  body: String!
+
+  """
+  reportID is the id of the DSAReport to which the note is being added
+  """
+  reportID: ID!
+
+  """
+  clientMutationId is required for Relay support.
+  """
+  clientMutationId: String!
+}
+
+type AddDSAReportNotePayload {
+  """
+  dsaReport is the DSAReport that the note was added to
+  """
+  dsaReport: DSAReport
+
+  """
+  clientMutationId is required for Relay support.
+  """
+  clientMutationId: String!
+}
+
+input AddDSAReportShareInput {
+  """
+  id of the user who shared the DSAReport
+  """
+  userID: ID!
+
+  """
+  reportID is the id of the DSAReport which was downloaded to share
+  """
+  reportID: ID!
+
+  """
+  clientMutationId is required for Relay support.
+  """
+  clientMutationId: String!
+}
+
+type AddDSAReportSharePayload {
+  """
+  dsaReport is the DSAReport that was downloaded to share
+  """
+  dsaReport: DSAReport
+
+  """
+  clientMutationId is required for Relay support.
+  """
+  clientMutationId: String!
+}
+
+input DeleteDSAReportNoteInput {
+  """
+  id of the note to be deleted from DSAReport history
+  """
+  id: ID!
+
+  """
+  reportID is the id of the DSAReport from which the note is to be deleted
+  """
+  reportID: ID!
+
+  """
+  clientMutationId is required for Relay support.
+  """
+  clientMutationId: String!
+}
+
+type DeleteDSAReportNotePayload {
+  """
+  dsaReport is the DSAReport from which the note was deleted
+  """
+  dsaReport: DSAReport
+
+  """
+  clientMutationId is required for Relay support.
+  """
+  clientMutationId: String!
+}
+
+input MakeDSAReportDecisionInput {
+  """
+  id of the user who made a decision for the DSAReport
+  """
+  userID: ID!
+
+  """
+  legality is the legality decision made for the DSAReport
+  """
+  legality: DSAReportDecisionLegality!
+
+  """
+  legal grounds is an overview of the law broken as part of illegal content decision
+  """
+  legalGrounds: String
+
+  """
+  detailedExplanation provides more information as part of illegal content decision
+  """
+  detailedExplanation: String
+
+  """
+  commentID is the id of the comment about which the DSAReport legality decision is being made
+  """
+  commentID: ID!
+
+  """
+  commentRevisionID is the revision id of the comment about which the DSAReport legality decision is being made
+  """
+  commentRevisionID: ID!
+
+  """
+  reportID is the id of the DSAReport that is being decided on
+  """
+  reportID: ID!
+
+  """
+  clientMutationId is required for Relay support.
+  """
+  clientMutationId: String!
+}
+
+type MakeDSAReportDecisionPayload {
+  """
+  dsaReport is the DSAReport that was decided on
+  """
+  dsaReport: DSAReport
+
+  """
+  clientMutationId is required for Relay support.
+  """
+  clientMutationId: String!
+}
+
+input ChangeDSAReportStatusInput {
+  """
+  id of the user who changed the status of the DSAReport
+  """
+  userID: ID!
+
+  """
+  status is the new status of the DSAReport
+  """
+  status: DSAReportStatus!
+
+  """
+  reportID is the id of the DSAReport that is having its status changed
+  """
+  reportID: ID!
+
+  """
+  clientMutationId is required for Relay support.
+  """
+  clientMutationId: String!
+}
+
+type ChangeDSAReportStatusPayload {
+  """
+  dsaReport is the DSAReport that had its status changed
+  """
+  dsaReport: DSAReport
+
+  """
+  clientMutationId is required for Relay support.
+  """
+  clientMutationId: String!
+}
+
 input CreateDSAReportInput {
   """
   id of the reported comment
@@ -6763,6 +7229,11 @@ input RejectCommentInput {
   clientMutationId is required for Relay support.
   """
   clientMutationId: String!
+
+  """
+  reason is the reason the comment is being rejected if DSA features are enabled.
+  """
+  reason: RejectCommentReasonInput
 }
 
 type RejectCommentPayload {
@@ -10020,6 +10491,37 @@ type Mutation {
   createDSAReport creates a DSAReport for the provided comment
   """
   createDSAReport(input: CreateDSAReportInput!): CreateDSAReportPayload!
+
+  """
+  addDSAReportNote adds a note to the history for a DSAReport
+  """
+  addDSAReportNote(input: AddDSAReportNoteInput!): AddDSAReportNotePayload!
+
+  """
+  addDSAReportShare adds that the report was downloaded and shared to the history for a DSAReport
+  """
+  addDSAReportShare(input: AddDSAReportShareInput!): AddDSAReportSharePayload!
+
+  """
+  deleteDSAReportNote deletes a note from the history for a DSAReport
+  """
+  deleteDSAReportNote(
+    input: DeleteDSAReportNoteInput!
+  ): DeleteDSAReportNotePayload!
+
+  """
+  changeDSAReportStatus changes the status of a DSAReport and adds the status change to the history for a DSAReport
+  """
+  changeDSAReportStatus(
+    input: ChangeDSAReportStatusInput!
+  ): ChangeDSAReportStatusPayload!
+
+  """
+  makeDSAReportDecision makes a legality decision for a DSAReport and adds the decision to the history for a DSAReport
+  """
+  makeDSAReportDecision(
+    input: MakeDSAReportDecisionInput!
+  ): MakeDSAReportDecisionPayload!
 }
 
 ##################
diff --git a/server/src/core/server/index.ts b/server/src/core/server/index.ts
index 5a621d9d3e..f1b99a9f0c 100644
--- a/server/src/core/server/index.ts
+++ b/server/src/core/server/index.ts
@@ -49,6 +49,7 @@ import { retrieveAllTenants, retrieveTenant, Tenant } from "./models/tenant";
 import { WordListCategory } from "./services/comments/pipeline/phases/wordList/message";
 import { WordListService } from "./services/comments/pipeline/phases/wordList/service";
 import { ErrorReporter, SentryErrorReporter } from "./services/errors";
+import { InternalNotificationContext } from "./services/notifications/internal/context";
 import { isInstalled } from "./services/tenant";
 
 export interface ServerOptions {
@@ -263,6 +264,11 @@ class Server {
       tenantCache: this.tenantCache,
       i18n: this.i18n,
       signingConfig: this.signingConfig,
+      notifications: new InternalNotificationContext(
+        this.mongo,
+        this.i18n,
+        logger
+      ),
     });
 
     // Create the pubsub client.
diff --git a/server/src/core/server/locales/en-US/common.ftl b/server/src/core/server/locales/en-US/common.ftl
index 1d5891bd36..bcfd5b097c 100644
--- a/server/src/core/server/locales/en-US/common.ftl
+++ b/server/src/core/server/locales/en-US/common.ftl
@@ -18,3 +18,31 @@ comment-counts-ratings-and-reviews =
   }</span>
 
 staff-label = Staff
+
+dsaReportCSV-timestamp = Timestamp
+dsaReportCSV-user = User
+dsaReportCSV-action = Action
+dsaReportCSV-details = Details
+dsaReportCSV-reportSubmitted = Report submitted
+dsaReportCSV-referenceID = Reference ID
+dsaReportCSV-legalDetail = Legal detail
+dsaReportCSV-additionalInfo = Additional info
+dsaReportCSV-commentAuthor = Comment author
+dsaReportCSV-commentBody = Comment body
+dsaReportCSV-commentID = Comment ID
+dsaReportCSV-changedStatus = Changed status
+dsaReportCSV-addedNote = Added note
+dsaReportCSV-madeDecision = Made decision
+dsaReportCSV-downloadedReport = Downloaded report
+dsaReportCSV-legality-illegal = Legality: Illegal
+dsaReportCSV-legality-legal = Legality: Legal
+dsaReportCSV-legalGrounds = Legal grounds
+dsaReportCSV-explanation = Explanation
+
+
+notifications-commentWasFeatured-title = Comment was featured
+notifications-commentWasFeatured-body = The comment { $commentID } was featured.
+notifications-commentWasApproved-title = Comment was approved
+notifications-commentWasApproved-body = The comment { $commentID } was approved.
+notifications-commentWasRejected-title = Comment was rejected
+notifications-commentWasRejected-body = The comment { $commentID } was rejected.
diff --git a/server/src/core/server/models/dsaReport/index.ts b/server/src/core/server/models/dsaReport/index.ts
new file mode 100644
index 0000000000..b25cb5d36f
--- /dev/null
+++ b/server/src/core/server/models/dsaReport/index.ts
@@ -0,0 +1 @@
+export * from "./report";
diff --git a/server/src/core/server/models/dsaReport/report.ts b/server/src/core/server/models/dsaReport/report.ts
index a18f4baadb..b3103113f9 100644
--- a/server/src/core/server/models/dsaReport/report.ts
+++ b/server/src/core/server/models/dsaReport/report.ts
@@ -1,3 +1,4 @@
+import { isNumber } from "lodash";
 import { v4 as uuid } from "uuid";
 
 import { Sub } from "coral-common/common/lib/types";
@@ -6,10 +7,61 @@ import {
   CommentNotFoundError,
   DuplicateDSAReportError,
 } from "coral-server/errors";
-import { FilterQuery } from "coral-server/models/helpers";
-import { TenantResource } from "coral-server/models/tenant";
+import { FindDSAReportInput } from "coral-server/graph/loaders/DSAReports";
 
-import { GQLDSAReportStatus } from "coral-server/graph/schema/__generated__/types";
+import {
+  Connection,
+  ConnectionInput,
+  FilterQuery,
+  Query,
+  resolveConnection,
+} from "coral-server/models/helpers";
+import { Tenant, TenantResource } from "coral-server/models/tenant";
+
+import {
+  GQLDSAReportDecision,
+  GQLDSAReportDecisionLegality,
+  GQLDSAReportHistoryType,
+  GQLDSAReportStatus,
+  GQLREPORT_SORT,
+} from "coral-server/graph/schema/__generated__/types";
+
+export interface ReportHistoryItem {
+  /**
+   * id identifies this DSA Report history item specifically.
+   */
+  id: string;
+
+  /**
+   * createdAt is when this report history item was created
+   */
+  createdAt: Date;
+
+  /**
+   * createdBy is the id of the user who added the report history item
+   */
+  createdBy: string;
+
+  /**
+   * type is the kind of report history item (note added, status changed, decision made, etc.)
+   */
+  type: GQLDSAReportHistoryType;
+
+  /**
+   * body is the text of the note if the report history item is a note added
+   */
+  body?: string;
+
+  /**
+   * status is the new status if this report history item is a status change
+   */
+  status?: string;
+
+  /**
+   * decision is the legality decision made about the DSAReport
+   */
+  decision?: GQLDSAReportDecision;
+}
 
 export interface DSAReport extends TenantResource {
   /**
@@ -59,11 +111,81 @@ export interface DSAReport extends TenantResource {
    * status keeps track of the current status of the DSA Report
    */
   status: GQLDSAReportStatus;
+ 
+  /**
+   * history keeps track of the history of a DSAReport, including notes added, when status is changed,
+   * and when an illegal content decision is made
+   */
+  history: ReportHistoryItem[];
+
+  /**
+   * decision is the legality decision made about the DSAReport
+   */
+  decision?: GQLDSAReportDecision;
+
+  /**
+   * commentModerationActionID is the id of the comment moderation action associated with this DSAReport
+   */
+  commentModerationActionID?: string;
+}
+
+export type DSAReportConnectionInput = ConnectionInput<DSAReport> & {
+  orderBy: GQLREPORT_SORT;
+};
+
+async function retrieveConnection(
+  input: DSAReportConnectionInput,
+  query: Query<DSAReport>
+): Promise<Readonly<Connection<Readonly<DSAReport>>>> {
+  if (input.orderBy === GQLREPORT_SORT.CREATED_AT_ASC) {
+    query.orderBy({ createdAt: 1 });
+  } else {
+    query.orderBy({ createdAt: -1 });
+  }
+
+  const skip = isNumber(input.after) ? input.after : 0;
+  if (skip) {
+    query.after(skip);
+  }
+
+  if (input.filter) {
+    query.where(input.filter);
+  }
+
+  // Return a connection.
+  return resolveConnection(query, input, (_, index) => index + skip + 1);
+}
+
+export async function retrieveDSAReportConnection(
+  mongo: MongoContext,
+  tenantID: string,
+  input: DSAReportConnectionInput
+): Promise<Readonly<Connection<Readonly<DSAReport>>>> {
+  // Create the query.
+  const query = new Query(mongo.dsaReports()).where({ tenantID });
+
+  return retrieveConnection(input, query);
+}
+
+export async function retrieveDSAReport(
+  mongo: MongoContext,
+  tenantID: string,
+  id: string
+) {
+  return mongo.dsaReports().findOne({ tenantID, id });
 }
 
 export type CreateDSAReportInput = Omit<
   DSAReport,
-  "id" | "tenantID" | "createdAt" | "referenceID" | "status" | "submissionID"
+  | "id"
+  | "tenantID"
+  | "createdAt"
+  | "referenceID"
+  | "status"
+  | "submissionID"
+  | "history"
+  | "decision"
+  | "commentModerationActionID"
 > & { submissionID?: string };
 
 export interface CreateDSAReportResultObject {
@@ -99,6 +221,7 @@ export async function createDSAReport(
     tenantID,
     createdAt: now,
     referenceID,
+    history: [],
     status: GQLDSAReportStatus.AWAITING_REVIEW,
   };
 
@@ -145,3 +268,293 @@ export async function createDSAReport(
     dsaReport: report,
   };
 }
+
+export interface DSAReportNote {
+  id: string;
+  createdBy: string;
+  body: string;
+  createdAt: Date;
+}
+
+export type CreateDSAReportNoteInput = Omit<
+  DSAReportNote,
+  "id" | "createdBy" | "createdAt"
+> & { userID: string; reportID: string };
+
+export interface CreateDSAReportNoteResultObject {
+  /**
+   * dsaReport contains the resultant DSAReport that was created.
+   */
+  dsaReport: DSAReport;
+}
+
+enum DSAReportHistoryType {
+  STATUS_CHANGED = "STATUS_CHANGED",
+  NOTE = "NOTE",
+  DECISION_MADE = "DECISION_MADE",
+  SHARE = "SHARE",
+}
+
+export async function createDSAReportNote(
+  mongo: MongoContext,
+  tenantID: string,
+  input: CreateDSAReportNoteInput,
+  now = new Date()
+): Promise<CreateDSAReportNoteResultObject> {
+  const { userID, body, reportID } = input;
+
+  // Create a new ID for the DSAReportNote.
+  const id = uuid();
+
+  const note = {
+    id,
+    createdBy: userID,
+    createdAt: now,
+    body,
+    type: DSAReportHistoryType.NOTE,
+  };
+
+  const updatedReport = await mongo.dsaReports().findOneAndUpdate(
+    { id: reportID, tenantID },
+    {
+      $push: {
+        history: note,
+      },
+    },
+    { returnOriginal: false }
+  );
+
+  if (!updatedReport.value) {
+    throw new Error();
+  }
+
+  return {
+    dsaReport: updatedReport.value,
+  };
+}
+
+export interface CreateDSAReportShareInput {
+  reportID: string;
+  userID: string;
+}
+
+export interface CreateDSAReportShareResultObject {
+  /**
+   * dsaReport contains the resultant DSAReport that was updated.
+   */
+  dsaReport: DSAReport;
+}
+
+export async function createDSAReportShare(
+  mongo: MongoContext,
+  tenantID: string,
+  input: CreateDSAReportShareInput,
+  now = new Date()
+): Promise<CreateDSAReportShareResultObject> {
+  const { userID, reportID } = input;
+
+  // Create a new ID for the DSAReportShare.
+  const id = uuid();
+
+  const note = {
+    id,
+    createdBy: userID,
+    createdAt: now,
+    type: DSAReportHistoryType.SHARE,
+  };
+
+  const updatedReport = await mongo.dsaReports().findOneAndUpdate(
+    { id: reportID, tenantID },
+    {
+      $push: {
+        history: note,
+      },
+    },
+    { returnOriginal: false }
+  );
+
+  if (!updatedReport.value) {
+    throw new Error();
+  }
+
+  return {
+    dsaReport: updatedReport.value,
+  };
+}
+
+export interface DeleteDSAReportNoteInput {
+  id: string;
+  reportID: string;
+}
+
+export interface DeleteDSAReportNoteResultObject {
+  /**
+   * dsaReport contains the resultant DSAReport from which a note was deleted from its history.
+   */
+  dsaReport: DSAReport;
+}
+
+export async function deleteDSAReportNote(
+  mongo: MongoContext,
+  tenantID: string,
+  input: DeleteDSAReportNoteInput
+): Promise<DeleteDSAReportNoteResultObject> {
+  const { id, reportID } = input;
+
+  const updatedReport = await mongo.dsaReports().findOneAndUpdate(
+    { id: reportID, tenantID },
+    {
+      $pull: {
+        history: { id: { $eq: id } },
+      },
+    },
+    { returnOriginal: false }
+  );
+
+  if (!updatedReport.value) {
+    throw new Error();
+  }
+
+  return {
+    dsaReport: updatedReport.value,
+  };
+}
+
+export interface ChangeDSAReportStatusInput {
+  reportID: string;
+  status: string;
+  userID: string;
+}
+
+export interface ChangeDSAReportStatusResultObject {
+  /**
+   * dsaReport contains the resultant DSAReport that was updated.
+   */
+  dsaReport: DSAReport;
+}
+
+export async function changeDSAReportStatus(
+  mongo: MongoContext,
+  tenantID: string,
+  input: ChangeDSAReportStatusInput,
+  now = new Date()
+): Promise<ChangeDSAReportStatusResultObject> {
+  const { userID, status, reportID } = input;
+
+  // Create a new ID for the DSAReportHistoryItem.
+  const id = uuid();
+
+  const statusChangeHistoryItem = {
+    id,
+    createdBy: userID,
+    createdAt: now,
+    status,
+    type: DSAReportHistoryType.STATUS_CHANGED,
+  };
+
+  const updatedReport = await mongo.dsaReports().findOneAndUpdate(
+    { id: reportID, tenantID },
+    {
+      $push: {
+        history: statusChangeHistoryItem,
+      },
+      $set: { status },
+    },
+    { returnOriginal: false }
+  );
+
+  if (!updatedReport.value) {
+    throw new Error();
+  }
+
+  return {
+    dsaReport: updatedReport.value,
+  };
+}
+
+export interface MakeDSAReportDecisionInput {
+  reportID: string;
+  userID: string;
+  legality: GQLDSAReportDecisionLegality;
+  legalGrounds?: string;
+  detailedExplanation?: string;
+}
+
+export interface MakeDSAReportDecisionResultObject {
+  /**
+   * dsaReport contains the resultant DSAReport that was updated.
+   */
+  dsaReport: DSAReport;
+}
+
+export async function makeDSAReportDecision(
+  mongo: MongoContext,
+  tenantID: string,
+  input: MakeDSAReportDecisionInput,
+  now = new Date()
+): Promise<MakeDSAReportDecisionResultObject> {
+  const { userID, legality, legalGrounds, detailedExplanation, reportID } =
+    input;
+
+  // Create a new ID for the DSAReportHistoryItem.
+  const id = uuid();
+
+  const statusChangeHistoryItem = {
+    id,
+    createdBy: userID,
+    createdAt: now,
+    type: DSAReportHistoryType.DECISION_MADE,
+    decision: {
+      legality,
+      legalGrounds,
+      detailedExplanation,
+    },
+  };
+
+  const updatedReport = await mongo.dsaReports().findOneAndUpdate(
+    { id: reportID, tenantID },
+    {
+      $push: {
+        history: statusChangeHistoryItem,
+      },
+      $set: {
+        decision: {
+          legality,
+          legalGrounds,
+          detailedExplanation,
+        },
+        status: GQLDSAReportStatus.COMPLETED,
+      },
+    },
+    { returnOriginal: false }
+  );
+
+  if (!updatedReport.value) {
+    throw new Error();
+  }
+
+  return {
+    dsaReport: updatedReport.value,
+  };
+}
+
+export async function find(
+  mongo: MongoContext,
+  tenant: Tenant,
+  input: FindDSAReportInput
+) {
+  return findDSAReport(mongo, tenant.id, input.id);
+}
+
+export async function findDSAReport(
+  mongo: MongoContext,
+  tenantID: string,
+  id: string
+): Promise<DSAReport | null> {
+  const result = await mongo.dsaReports().findOne({
+    tenantID,
+    id,
+  });
+
+  return result ?? null;
+}
diff --git a/server/src/core/server/models/notifications/notification.ts b/server/src/core/server/models/notifications/notification.ts
new file mode 100644
index 0000000000..f3e40d4f0f
--- /dev/null
+++ b/server/src/core/server/models/notifications/notification.ts
@@ -0,0 +1,113 @@
+import { MongoContext } from "coral-server/data/context";
+
+import { GQLCOMMENT_STATUS } from "coral-server/graph/schema/__generated__/types";
+
+import { ConnectionInput, Query, resolveConnection } from "../helpers";
+import { TenantResource } from "../tenant";
+import { User } from "../user";
+
+export interface Notification extends TenantResource {
+  readonly id: string;
+
+  readonly tenantID: string;
+
+  createdAt: Date;
+
+  ownerID: string;
+
+  reportID?: string;
+
+  commentID?: string;
+  commentStatus?: GQLCOMMENT_STATUS;
+
+  title?: string;
+  body?: string;
+}
+
+type BaseConnectionInput = ConnectionInput<Notification>;
+
+export interface NotificationsConnectionInput extends BaseConnectionInput {
+  ownerID: string;
+}
+
+export const retrieveNotificationsConnection = async (
+  mongo: MongoContext,
+  tenantID: string,
+  input: NotificationsConnectionInput
+) => {
+  const query = new Query(mongo.notifications()).where({
+    tenantID,
+    ownerID: input.ownerID,
+  });
+
+  query.orderBy({ createdAt: -1 });
+
+  if (input.after) {
+    query.where({ createdAt: { $lt: input.after as Date } });
+  }
+
+  return resolveConnection(query, input, (n) => n.createdAt);
+};
+
+export const createNotification = async (
+  mongo: MongoContext,
+  notification: Notification
+) => {
+  const op = await mongo.notifications().insertOne(notification);
+
+  return op.result.ok ? notification : null;
+};
+
+interface LastSeenNotificationChange {
+  $set: {
+    lastSeenNotificationDate?: Date | null;
+  };
+}
+
+export const markLastSeenNotification = async (
+  tenantID: string,
+  mongo: MongoContext,
+  user: Readonly<User>,
+  notificationDates: Date[]
+) => {
+  if (!notificationDates || notificationDates.length === 0) {
+    return;
+  }
+
+  let max = new Date(0);
+  for (const date of notificationDates) {
+    if (max.getTime() < date.getTime()) {
+      max = date;
+    }
+  }
+
+  const change: LastSeenNotificationChange = {
+    $set: { lastSeenNotificationDate: user.lastSeenNotificationDate },
+  };
+
+  const thereAreNewNotifications =
+    user.lastSeenNotificationDate &&
+    user.lastSeenNotificationDate.getTime() < max.getTime();
+  const userHasNeverSeenNotifications =
+    user.lastSeenNotificationDate === null ||
+    user.lastSeenNotificationDate === undefined;
+
+  if (thereAreNewNotifications || userHasNeverSeenNotifications) {
+    change.$set.lastSeenNotificationDate = max;
+  }
+
+  await mongo.users().findOneAndUpdate({ tenantID, id: user.id }, change);
+};
+
+export const hasNewNotifications = async (
+  tenantID: string,
+  mongo: MongoContext,
+  ownerID: string,
+  lastSeen: Date
+) => {
+  const exists = await mongo
+    .notifications()
+    .findOne({ tenantID, ownerID, createdAt: { $gt: lastSeen } });
+
+  return exists !== null;
+};
diff --git a/server/src/core/server/models/user/user.ts b/server/src/core/server/models/user/user.ts
index aa1b854db6..4488781bee 100644
--- a/server/src/core/server/models/user/user.ts
+++ b/server/src/core/server/models/user/user.ts
@@ -616,6 +616,12 @@ export interface User extends TenantResource {
    * bio is a user deifned biography
    */
   bio?: string;
+
+  /**
+   * lastSeenNotificationDate is the date of the last notification the user loaded (viewed)
+   * in their notification tab.
+   */
+  lastSeenNotificationDate?: Date | null;
 }
 
 function hashPassword(password: string): Promise<string> {
diff --git a/server/src/core/server/queue/index.ts b/server/src/core/server/queue/index.ts
index 00b27bb94f..0c6364a550 100644
--- a/server/src/core/server/queue/index.ts
+++ b/server/src/core/server/queue/index.ts
@@ -8,6 +8,7 @@ import {
 } from "coral-server/queue/tasks/loadCache";
 import { I18n } from "coral-server/services/i18n";
 import { JWTSigningConfig } from "coral-server/services/jwt";
+import { InternalNotificationContext } from "coral-server/services/notifications/internal/context";
 import {
   AugmentedRedis,
   createRedisClient,
@@ -58,6 +59,7 @@ export interface QueueOptions {
   i18n: I18n;
   signingConfig: JWTSigningConfig;
   redis: AugmentedRedis;
+  notifications: InternalNotificationContext;
 }
 
 export interface TaskQueue {
diff --git a/server/src/core/server/queue/tasks/notifier/index.ts b/server/src/core/server/queue/tasks/notifier/index.ts
index f9cdff2eb5..ba2d15dee0 100644
--- a/server/src/core/server/queue/tasks/notifier/index.ts
+++ b/server/src/core/server/queue/tasks/notifier/index.ts
@@ -9,7 +9,7 @@ import { JWTSigningConfig } from "coral-server/services/jwt";
 import {
   categories,
   NotificationCategory,
-} from "coral-server/services/notifications/categories";
+} from "coral-server/services/notifications/email/categories";
 import { TenantCache } from "coral-server/services/tenant/cache";
 
 import { createJobProcessor, JOB_NAME, NotifierData } from "./processor";
diff --git a/server/src/core/server/queue/tasks/notifier/messages.ts b/server/src/core/server/queue/tasks/notifier/messages.ts
index 9ab4de8151..76c1cdcfe1 100644
--- a/server/src/core/server/queue/tasks/notifier/messages.ts
+++ b/server/src/core/server/queue/tasks/notifier/messages.ts
@@ -1,8 +1,8 @@
 import { CoralEventPayload } from "coral-server/events/event";
 import logger from "coral-server/logger";
-import { NotificationCategory } from "coral-server/services/notifications/categories";
-import NotificationContext from "coral-server/services/notifications/context";
-import { Notification } from "coral-server/services/notifications/notification";
+import { NotificationCategory } from "coral-server/services/notifications/email/categories";
+import NotificationContext from "coral-server/services/notifications/email/context";
+import { Notification } from "coral-server/services/notifications/email/notification";
 
 import { GQLDIGEST_FREQUENCY } from "coral-server/graph/schema/__generated__/types";
 
diff --git a/server/src/core/server/queue/tasks/notifier/processor.ts b/server/src/core/server/queue/tasks/notifier/processor.ts
index 07df2d1824..57b1afd647 100644
--- a/server/src/core/server/queue/tasks/notifier/processor.ts
+++ b/server/src/core/server/queue/tasks/notifier/processor.ts
@@ -6,9 +6,9 @@ import logger from "coral-server/logger";
 import { JobProcessor } from "coral-server/queue/Task";
 import { MailerQueue } from "coral-server/queue/tasks/mailer";
 import { JWTSigningConfig } from "coral-server/services/jwt";
-import { NotificationCategory } from "coral-server/services/notifications/categories";
-import NotificationContext from "coral-server/services/notifications/context";
-import { Notification } from "coral-server/services/notifications/notification";
+import { NotificationCategory } from "coral-server/services/notifications/email/categories";
+import NotificationContext from "coral-server/services/notifications/email/context";
+import { Notification } from "coral-server/services/notifications/email/notification";
 import { TenantCache } from "coral-server/services/tenant/cache";
 
 import {
diff --git a/server/src/core/server/queue/tasks/rejector.ts b/server/src/core/server/queue/tasks/rejector.ts
index 995cd8152e..c2bd9fb384 100644
--- a/server/src/core/server/queue/tasks/rejector.ts
+++ b/server/src/core/server/queue/tasks/rejector.ts
@@ -14,6 +14,7 @@ import {
   retrieveAllCommentsUserConnection,
   retrieveCommentsBySitesUserConnection,
 } from "coral-server/services/comments";
+import { InternalNotificationContext } from "coral-server/services/notifications/internal/context";
 import { AugmentedRedis } from "coral-server/services/redis";
 import { TenantCache } from "coral-server/services/tenant/cache";
 import { rejectComment } from "coral-server/stacks";
@@ -31,6 +32,7 @@ export interface RejectorProcessorOptions {
   redis: AugmentedRedis;
   tenantCache: TenantCache;
   config: Config;
+  notifications: InternalNotificationContext;
   i18n: I18n;
 }
 
@@ -153,6 +155,7 @@ const rejectLiveComments = async (
   redis: AugmentedRedis,
   cache: DataCache,
   config: Config,
+  notifications: InternalNotificationContext,
   i18n: I18n,
   tenant: Readonly<Tenant>,
   authorID: string,
@@ -175,6 +178,7 @@ const rejectLiveComments = async (
         config,
         i18n,
         null,
+        notifications,
         tenant,
         comment.id,
         revision.id,
@@ -203,6 +207,7 @@ const createJobProcessor =
     redis,
     tenantCache,
     config,
+    notifications,
     i18n,
   }: RejectorProcessorOptions): JobProcessor<RejectorData> =>
   async (job) => {
@@ -245,6 +250,7 @@ const createJobProcessor =
       redis,
       cache,
       config,
+      notifications,
       i18n,
       tenant,
       authorID,
diff --git a/server/src/core/server/services/comments/actions.ts b/server/src/core/server/services/comments/actions.ts
index a3ff147c25..9245cb55cb 100644
--- a/server/src/core/server/services/comments/actions.ts
+++ b/server/src/core/server/services/comments/actions.ts
@@ -437,7 +437,6 @@ export async function createIllegalContent(
     mongo,
     redis,
     config,
-    // TODO: ADD internationalization
     i18n,
     broker,
     tenant,
diff --git a/server/src/core/server/services/dsaReports/download.ts b/server/src/core/server/services/dsaReports/download.ts
new file mode 100644
index 0000000000..d30563957e
--- /dev/null
+++ b/server/src/core/server/services/dsaReports/download.ts
@@ -0,0 +1,219 @@
+import archiver from "archiver";
+import stringify from "csv-stringify";
+import { Response } from "express";
+
+import { createDateFormatter } from "coral-common/common/lib/date";
+import { MongoContext } from "coral-server/data/context";
+import { retrieveComment } from "coral-server/models/comment";
+import { DSAReport } from "coral-server/models/dsaReport";
+import { Tenant } from "coral-server/models/tenant";
+import { retrieveUser } from "coral-server/models/user";
+
+import { I18n, translate } from "../i18n";
+
+export async function sendReportDownload(
+  res: Response,
+  mongo: MongoContext,
+  i18n: I18n,
+  tenant: Tenant,
+  report: Readonly<DSAReport>,
+  now: Date
+) {
+  const bundle = i18n.getBundle(tenant.locale);
+
+  // Create the date formatter to format the dates for the CSV.
+  const formatter = createDateFormatter(tenant.locale, {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: false,
+  });
+
+  // Generate the filename of the file that the user will download.
+  const filename = `coral-dsaReport-${report.referenceID}-${Math.abs(
+    now.getTime()
+  )}.zip`;
+
+  res.writeHead(200, {
+    "Content-Type": "application/octet-stream",
+    "Content-Disposition": `attachment; filename=${filename}`,
+  });
+
+  // Create the zip archive we'll use to write all the exported files to.
+  const archive = archiver("zip", {
+    zlib: { level: 9 },
+  });
+
+  // Pipe this to the response writer directly.
+  archive.pipe(res);
+
+  // Create all the csv writers that'll write the data to the archive.
+  const csv = stringify();
+
+  // Add all the streams as files to the archive.
+  archive.append(csv, {
+    name: `report-${report.referenceID}-${Math.abs(now.getTime())}.csv`,
+  });
+
+  const reporter = await retrieveUser(mongo, tenant.id, report.userID);
+
+  let reportedComment = await retrieveComment(
+    mongo.comments(),
+    tenant.id,
+    report.commentID
+  );
+  if (!reportedComment && mongo.archive) {
+    reportedComment = await retrieveComment(
+      mongo.archivedComments(),
+      tenant.id,
+      report.commentID
+    );
+  }
+
+  let reportedCommentAuthorUsername = "";
+  if (reportedComment) {
+    if (reportedComment.authorID) {
+      const reportedCommentAuthor = await retrieveUser(
+        mongo,
+        tenant.id,
+        reportedComment.authorID
+      );
+      reportedCommentAuthorUsername =
+        reportedCommentAuthor && reportedCommentAuthor.username
+          ? reportedCommentAuthor.username
+          : "";
+    }
+  }
+
+  csv.write([
+    translate(bundle, "Timestamp", "dsaReportCSV-timestamp"),
+    translate(bundle, "User", "dsaReportCSV-user"),
+    translate(bundle, "Action", "dsaReportCSV-action"),
+    translate(bundle, "Details", "dsaReportCSV-details"),
+  ]);
+  if (reportedComment) {
+    csv.write([
+      formatter.format(report.createdAt),
+      reporter?.username,
+      translate(bundle, "Report submitted", "dsaReportCSV-reportSubmitted"),
+      `${translate(bundle, "Reference ID", "dsaReportCSV-referenceID")}: ${
+        report.referenceID
+      }\n${translate(bundle, "Legal detail", "dsaReportCSV-legalDetail")}: ${
+        report.lawBrokenDescription
+      }\n${translate(
+        bundle,
+        "Additional info",
+        "dsaReportCSV-additionalInfo"
+      )}: ${report.additionalInformation}\n${translate(
+        bundle,
+        "Comment author",
+        "dsaReportCSV-commentAuthor"
+      )}: ${reportedCommentAuthorUsername}\nComment body: ${
+        reportedComment.revisions[0].body
+      }\n${translate(bundle, "Comment ID", "dsaReportCSV-commentID")}: ${
+        reportedComment.id
+      }`,
+    ]);
+  } else {
+    csv.write([
+      formatter.format(report.createdAt),
+      reporter?.username,
+      translate(bundle, "Report submitted", "dsaReportCSV-reportSubmitted"),
+      `${translate(bundle, "Reference ID", "dsaReportCSV-referenceID")}: ${
+        report.referenceID
+      }\n${translate(bundle, "Legal detail", "dsaReportCSV-legalDetail")}: ${
+        report.lawBrokenDescription
+      }\n${translate(
+        bundle,
+        "Additional info",
+        "dsaReportCSV-additionalInfo"
+      )}: ${report.additionalInformation}`,
+    ]);
+  }
+
+  if (report.history) {
+    for (const reportHistoryItem of report.history) {
+      const reportCommentAuthor = await retrieveUser(
+        mongo,
+        tenant.id,
+        reportHistoryItem.createdBy
+      );
+      switch (reportHistoryItem.type) {
+        case "STATUS_CHANGED":
+          csv.write([
+            formatter.format(reportHistoryItem.createdAt),
+            reportCommentAuthor?.username,
+            translate(bundle, "Changed status", "dsaReportCSV-changedStatus"),
+            reportHistoryItem.status,
+          ]);
+          break;
+        case "NOTE":
+          csv.write([
+            formatter.format(reportHistoryItem.createdAt),
+            reportCommentAuthor?.username,
+            translate(bundle, "Added note", "dsaReportCSV-addedNote"),
+            reportHistoryItem.body,
+          ]);
+          break;
+        case "DECISION_MADE":
+          {
+            const details =
+              reportHistoryItem.decision?.legality === "ILLEGAL"
+                ? `${translate(
+                    bundle,
+                    "Legality: Illegal",
+                    "dsaReportCSV-legality-illegal"
+                  )}\n${translate(
+                    bundle,
+                    "Legal grounds",
+                    "dsaReportCSV-legalGrounds"
+                  )}: ${reportHistoryItem.decision.legalGrounds}\n${translate(
+                    bundle,
+                    "Explanation",
+                    "dsaReportCSV-explanation"
+                  )}: ${reportHistoryItem.decision.detailedExplanation}`
+                : `${translate(
+                    bundle,
+                    "Legality: Legal",
+                    "dsaReportCSV-legality-legal"
+                  )}`;
+            csv.write([
+              formatter.format(reportHistoryItem.createdAt),
+              reportCommentAuthor?.username,
+              translate(bundle, "Made decision", "dsaReportCSV-madeDecision"),
+              details,
+            ]);
+          }
+          break;
+        case "SHARE":
+          csv.write([
+            formatter.format(reportHistoryItem.createdAt),
+            reportCommentAuthor?.username,
+            translate(
+              bundle,
+              "Downloaded report",
+              "dsaReportCSV-downloadedReport"
+            ),
+            "",
+          ]);
+          break;
+        default:
+          csv.write([
+            formatter.format(reportHistoryItem.createdAt),
+            reportCommentAuthor?.username,
+            "",
+          ]);
+      }
+    }
+  }
+
+  csv.end();
+
+  // Mark the end of adding files, no more files can be added after this. Once
+  // all the stream readers have finished writing, and have closed, the
+  // archiver will close which will finish the HTTP request.
+  await archive.finalize();
+}
diff --git a/server/src/core/server/services/dsaReports/index.ts b/server/src/core/server/services/dsaReports/index.ts
new file mode 100644
index 0000000000..3bcc5bf220
--- /dev/null
+++ b/server/src/core/server/services/dsaReports/index.ts
@@ -0,0 +1,2 @@
+export * from "./download";
+export * from "./reports";
diff --git a/server/src/core/server/services/dsaReports/reports.ts b/server/src/core/server/services/dsaReports/reports.ts
index b6f5517e6f..ddb711e6ad 100644
--- a/server/src/core/server/services/dsaReports/reports.ts
+++ b/server/src/core/server/services/dsaReports/reports.ts
@@ -1,6 +1,26 @@
+import { Config } from "coral-server/config";
+import { DataCache } from "coral-server/data/cache/dataCache";
 import { MongoContext } from "coral-server/data/context";
-import { createDSAReport as createReport } from "coral-server/models/dsaReport/report";
+import { CoralEventPublisherBroker } from "coral-server/events/publisher";
+import {
+  changeDSAReportStatus as changeReportStatus,
+  createDSAReport as createReport,
+  createDSAReportNote as createReportNote,
+  createDSAReportShare as createReportShare,
+  deleteDSAReportNote as deleteReportNote,
+  makeDSAReportDecision as makeReportDecision,
+} from "coral-server/models/dsaReport/report";
 import { Tenant } from "coral-server/models/tenant";
+import { rejectComment } from "coral-server/stacks";
+
+import {
+  GQLDSAReportDecisionLegality,
+  GQLDSAReportStatus,
+} from "coral-server/graph/schema/__generated__/types";
+
+import { I18n } from "../i18n";
+import { InternalNotificationContext } from "../notifications/internal/context";
+import { AugmentedRedis } from "../redis";
 
 export interface CreateDSAReportInput {
   commentID: string;
@@ -10,6 +30,15 @@ export interface CreateDSAReportInput {
   submissionID?: string;
 }
 
+/**
+ * createDSAReport creates a new DSAReport
+ *
+ * @param mongo is the mongo context.
+ * @param tenant is the filtering tenant for this operation.
+ * @param input is the input used for creating the DSAReport
+ * @param now is the time this DSAReport was created
+ * @returns the newly created DSAReport.
+ */
 export async function createDSAReport(
   mongo: MongoContext,
   tenant: Tenant,
@@ -20,3 +49,168 @@ export async function createDSAReport(
   const { dsaReport } = result;
   return dsaReport;
 }
+
+export interface AddDSAReportNoteInput {
+  userID: string;
+  body: string;
+  reportID: string;
+}
+
+/**
+ * addDSAReportNote adds a note to the history of a DSAReport
+ *
+ * @param mongo is the mongo context.
+ * @param tenant is the filtering tenant for this operation.
+ * @param input is the input used for adding the note
+ * @param now is the time this note was created
+ * @returns the DSAReport with the new note added to its history.
+ */
+export async function addDSAReportNote(
+  mongo: MongoContext,
+  tenant: Tenant,
+  input: AddDSAReportNoteInput,
+  now = new Date()
+) {
+  const result = await createReportNote(mongo, tenant.id, input, now);
+  const { dsaReport } = result;
+  return dsaReport;
+}
+
+export interface AddDSAReportShareInput {
+  userID: string;
+  reportID: string;
+}
+
+/**
+ * addDSAReportNote adds a share item to the history of a DSAReport
+ *
+ * @param mongo is the mongo context.
+ * @param tenant is the filtering tenant for this operation.
+ * @param input is the input used for adding the share item
+ * @param now is the time this DSAReport was shared
+ * @returns the DSAReport with the new share added to its history.
+ */
+export async function addDSAReportShare(
+  mongo: MongoContext,
+  tenant: Tenant,
+  input: AddDSAReportShareInput,
+  now = new Date()
+) {
+  const result = await createReportShare(mongo, tenant.id, input, now);
+  const { dsaReport } = result;
+  return dsaReport;
+}
+
+export interface DeleteDSAReportNoteInput {
+  id: string;
+  reportID: string;
+}
+
+/**
+ * deleteDSAReportNote deletes a note from the history of a DSAReport
+ *
+ * @param mongo is the mongo context.
+ * @param tenant is the filtering tenant for this operation.
+ * @param input is the input used for deleting the note
+ * @returns the DSAReport with the note deleted from is history.
+ */
+export async function deleteDSAReportNote(
+  mongo: MongoContext,
+  tenant: Tenant,
+  input: DeleteDSAReportNoteInput,
+  now = new Date()
+) {
+  const result = await deleteReportNote(mongo, tenant.id, input);
+  const { dsaReport } = result;
+  return dsaReport;
+}
+
+export interface ChangeDSAReportStatusInput {
+  userID: string;
+  status: GQLDSAReportStatus;
+  reportID: string;
+}
+
+/**
+ * changeDSAReportStatus changes the status of a DSAReport
+ * and also adds the status change to its history
+ *
+ * @param mongo is the mongo context.
+ * @param tenant is the filtering tenant for this operation.
+ * @param input is the input used for changing the status
+ * @returns the DSAReport with its new status
+ */
+export async function changeDSAReportStatus(
+  mongo: MongoContext,
+  tenant: Tenant,
+  input: ChangeDSAReportStatusInput,
+  now = new Date()
+) {
+  const result = await changeReportStatus(mongo, tenant.id, input, now);
+  const { dsaReport } = result;
+  return dsaReport;
+}
+
+export interface MakeDSAReportDecisionInput {
+  commentID: string;
+  commentRevisionID: string;
+  userID: string;
+  reportID: string;
+  legality: GQLDSAReportDecisionLegality;
+  legalGrounds?: string;
+  detailedExplanation?: string;
+}
+
+/**
+ * makeDSAReportDecison makes an illegal vs legal decision for a DSAReport
+ * and also adds the decision to its history
+ *
+ * @param mongo is the mongo context.
+ * @param tenant is the filtering tenant for this operation.
+ * @param input is the input used for making the decision
+ * @returns the DSAReport with its decision
+ */
+export async function makeDSAReportDecision(
+  mongo: MongoContext,
+  redis: AugmentedRedis,
+  cache: DataCache,
+  config: Config,
+  i18n: I18n,
+  broker: CoralEventPublisherBroker,
+  notifications: InternalNotificationContext,
+  tenant: Tenant,
+  input: MakeDSAReportDecisionInput,
+  now = new Date()
+) {
+  // TODO: Send through rejection legalGrounds and detailedExplanation once backend support is available
+  const {
+    commentID,
+    commentRevisionID,
+    userID,
+    // legalGrounds,
+    // detailedExplanation,
+  } = input;
+
+  // REJECT if ILLEGAL
+  if (input.legality === GQLDSAReportDecisionLegality.ILLEGAL) {
+    await rejectComment(
+      mongo,
+      redis,
+      cache,
+      config,
+      i18n,
+      broker,
+      notifications,
+      tenant,
+      commentID,
+      commentRevisionID,
+      userID,
+      now
+    );
+  }
+
+  const result = await makeReportDecision(mongo, tenant.id, input, now);
+
+  const { dsaReport } = result;
+  return dsaReport;
+}
diff --git a/server/src/core/server/services/notifications/categories/categories.ts b/server/src/core/server/services/notifications/email/categories/categories.ts
similarity index 100%
rename from server/src/core/server/services/notifications/categories/categories.ts
rename to server/src/core/server/services/notifications/email/categories/categories.ts
diff --git a/server/src/core/server/services/notifications/categories/category.ts b/server/src/core/server/services/notifications/email/categories/category.ts
similarity index 100%
rename from server/src/core/server/services/notifications/categories/category.ts
rename to server/src/core/server/services/notifications/email/categories/category.ts
diff --git a/server/src/core/server/services/notifications/categories/featured.ts b/server/src/core/server/services/notifications/email/categories/featured.ts
similarity index 100%
rename from server/src/core/server/services/notifications/categories/featured.ts
rename to server/src/core/server/services/notifications/email/categories/featured.ts
diff --git a/server/src/core/server/services/notifications/categories/index.ts b/server/src/core/server/services/notifications/email/categories/index.ts
similarity index 100%
rename from server/src/core/server/services/notifications/categories/index.ts
rename to server/src/core/server/services/notifications/email/categories/index.ts
diff --git a/server/src/core/server/services/notifications/categories/moderation.ts b/server/src/core/server/services/notifications/email/categories/moderation.ts
similarity index 100%
rename from server/src/core/server/services/notifications/categories/moderation.ts
rename to server/src/core/server/services/notifications/email/categories/moderation.ts
diff --git a/server/src/core/server/services/notifications/categories/reply.ts b/server/src/core/server/services/notifications/email/categories/reply.ts
similarity index 100%
rename from server/src/core/server/services/notifications/categories/reply.ts
rename to server/src/core/server/services/notifications/email/categories/reply.ts
diff --git a/server/src/core/server/services/notifications/categories/staffReply.ts b/server/src/core/server/services/notifications/email/categories/staffReply.ts
similarity index 100%
rename from server/src/core/server/services/notifications/categories/staffReply.ts
rename to server/src/core/server/services/notifications/email/categories/staffReply.ts
diff --git a/server/src/core/server/services/notifications/categories/unsubscribe.ts b/server/src/core/server/services/notifications/email/categories/unsubscribe.ts
similarity index 100%
rename from server/src/core/server/services/notifications/categories/unsubscribe.ts
rename to server/src/core/server/services/notifications/email/categories/unsubscribe.ts
diff --git a/server/src/core/server/services/notifications/context.ts b/server/src/core/server/services/notifications/email/context.ts
similarity index 100%
rename from server/src/core/server/services/notifications/context.ts
rename to server/src/core/server/services/notifications/email/context.ts
diff --git a/server/src/core/server/services/notifications/notification.ts b/server/src/core/server/services/notifications/email/notification.ts
similarity index 100%
rename from server/src/core/server/services/notifications/notification.ts
rename to server/src/core/server/services/notifications/email/notification.ts
diff --git a/server/src/core/server/services/notifications/internal/context.ts b/server/src/core/server/services/notifications/internal/context.ts
new file mode 100644
index 0000000000..94dd66ec04
--- /dev/null
+++ b/server/src/core/server/services/notifications/internal/context.ts
@@ -0,0 +1,175 @@
+import { v4 as uuid } from "uuid";
+
+import { LanguageCode } from "coral-common/common/lib/helpers";
+import { MongoContext } from "coral-server/data/context";
+import { Logger } from "coral-server/logger";
+import { Comment } from "coral-server/models/comment";
+import { DSAReport } from "coral-server/models/dsaReport/report";
+import {
+  createNotification,
+  Notification,
+} from "coral-server/models/notifications/notification";
+import { retrieveUser } from "coral-server/models/user";
+import { I18n, translate } from "coral-server/services/i18n";
+
+export enum NotificationType {
+  COMMENT_FEATURED = "COMMENT_FEATURED",
+  COMMENT_APPROVED = "COMMENT_APPROVED",
+  COMMENT_REJECTED = "COMMENT_REJECTED",
+}
+
+export interface CreateNotificationInput {
+  targetUserID: string;
+  type: NotificationType;
+
+  comment?: Readonly<Comment>;
+  report?: Readonly<DSAReport>;
+}
+
+interface CreationResult {
+  notification: Notification | null;
+  attempted: boolean;
+}
+
+export class InternalNotificationContext {
+  private mongo: MongoContext;
+  private log: Logger;
+  private i18n: I18n;
+
+  constructor(mongo: MongoContext, i18n: I18n, log: Logger) {
+    this.mongo = mongo;
+    this.i18n = i18n;
+    this.log = log;
+  }
+
+  public async create(
+    tenantID: string,
+    lang: LanguageCode,
+    input: CreateNotificationInput
+  ) {
+    const { type, targetUserID, comment } = input;
+
+    const existingUser = retrieveUser(this.mongo, tenantID, targetUserID);
+    if (!existingUser) {
+      this.log.warn(
+        { userID: targetUserID },
+        "attempted to create notification for user that does not exist, ignoring"
+      );
+      return;
+    }
+
+    const now = new Date();
+
+    const result: CreationResult = {
+      notification: null,
+      attempted: false,
+    };
+
+    if (type === NotificationType.COMMENT_FEATURED && comment) {
+      result.notification = await createNotification(this.mongo, {
+        id: uuid(),
+        tenantID,
+        createdAt: now,
+        ownerID: targetUserID,
+        title: this.translatePhrase(
+          lang,
+          "notifications-commentWasFeatured-title",
+          "Comment was featured"
+        ),
+        body: this.translatePhrase(
+          lang,
+          "notifications-commentWasFeatured-body",
+          `The comment ${comment.id} was featured.`,
+          {
+            commentID: comment.id,
+          }
+        ),
+        commentID: comment.id,
+        commentStatus: comment.status,
+      });
+      result.attempted = true;
+    } else if (type === NotificationType.COMMENT_APPROVED && comment) {
+      result.notification = await createNotification(this.mongo, {
+        id: uuid(),
+        tenantID,
+        createdAt: now,
+        ownerID: targetUserID,
+        title: this.translatePhrase(
+          lang,
+          "notifications-commentWasApproved-title",
+          "Comment was approved"
+        ),
+        body: this.translatePhrase(
+          lang,
+          "notifications-commentWasApproved-body",
+          `The comment ${comment.id} was approved.`,
+          {
+            commentID: comment.id,
+          }
+        ),
+        commentID: comment.id,
+        commentStatus: comment.status,
+      });
+      result.attempted = true;
+    } else if (type === NotificationType.COMMENT_REJECTED && comment) {
+      result.notification = await createNotification(this.mongo, {
+        id: uuid(),
+        tenantID,
+        createdAt: now,
+        ownerID: targetUserID,
+        title: this.translatePhrase(
+          lang,
+          "notifications-commentWasRejected-title",
+          "Comment was rejected"
+        ),
+        body: this.translatePhrase(
+          lang,
+          "notifications-commentWasRejected-body",
+          `The comment ${comment.id} was rejected.`,
+          {
+            commentID: comment.id,
+          }
+        ),
+        commentID: comment.id,
+        commentStatus: comment.status,
+      });
+      result.attempted = true;
+    }
+
+    if (!result.notification && result.attempted) {
+      this.logCreateNotificationError(tenantID, input);
+    }
+  }
+
+  private translatePhrase(
+    lang: LanguageCode,
+    key: string,
+    text: string,
+    args?: object | undefined
+  ) {
+    const bundle = this.i18n.getBundle(lang);
+
+    const result = translate(bundle, text, key, args);
+
+    // eslint-disable-next-line no-console
+    console.log(result, args);
+
+    return result;
+  }
+
+  private logCreateNotificationError(
+    tenantID: string,
+    input: CreateNotificationInput
+  ) {
+    this.log.error(
+      {
+        tenantID,
+        userID: input.targetUserID,
+        commentID: input.comment ? input.comment.id : null,
+        reportID: input.report ? input.report.id : null,
+        type: input.type,
+      },
+      "failed to create internal notification"
+    );
+  }
+}
diff --git a/server/src/core/server/services/users/delete.ts b/server/src/core/server/services/users/delete.ts
index 4e5461bceb..8f84a5a13e 100644
--- a/server/src/core/server/services/users/delete.ts
+++ b/server/src/core/server/services/users/delete.ts
@@ -4,10 +4,14 @@ import { Config } from "coral-server/config";
 import { MongoContext } from "coral-server/data/context";
 import { ACTION_TYPE } from "coral-server/models/action/comment";
 import { Comment, getLatestRevision } from "coral-server/models/comment";
+import { DSAReport } from "coral-server/models/dsaReport";
 import { Story } from "coral-server/models/story";
 import { retrieveTenant } from "coral-server/models/tenant";
 
-import { GQLCOMMENT_STATUS } from "coral-server/graph/schema/__generated__/types";
+import {
+  GQLCOMMENT_STATUS,
+  GQLDSAReportStatus,
+} from "coral-server/graph/schema/__generated__/types";
 
 import { moderate } from "../comments/moderation";
 import { I18n } from "../i18n";
@@ -34,6 +38,10 @@ interface Batch {
   stories: any[];
 }
 
+interface DSAReportBatch {
+  dsaReports: any[];
+}
+
 async function deleteUserActionCounts(
   mongo: MongoContext,
   userID: string,
@@ -173,6 +181,81 @@ async function moderateComments(
   }
 }
 
+async function updateUserDSAReports(
+  mongo: MongoContext,
+  tenantID: string,
+  authorID: string,
+  isArchived?: boolean
+) {
+  const batch: DSAReportBatch = {
+    dsaReports: [],
+  };
+
+  async function processBatch() {
+    const dsaReports = mongo.dsaReports();
+
+    await executeBulkOperations<DSAReport>(dsaReports, batch.dsaReports);
+    batch.dsaReports = [];
+  }
+
+  const collection =
+    isArchived && mongo.archive ? mongo.archivedComments() : mongo.comments();
+
+  const cursor = collection.find({
+    tenantID,
+    authorID,
+  });
+  while (await cursor.hasNext()) {
+    const comment = await cursor.next();
+    if (!comment) {
+      continue;
+    }
+
+    const match = mongo.dsaReports().find({
+      tenantID,
+      commentID: comment.id,
+      status: {
+        $in: [
+          GQLDSAReportStatus.AWAITING_REVIEW,
+          GQLDSAReportStatus.UNDER_REVIEW,
+        ],
+      },
+    });
+
+    if (!match) {
+      continue;
+    }
+
+    batch.dsaReports.push({
+      updateMany: {
+        filter: {
+          tenantID,
+          commentID: comment.id,
+          status: {
+            $in: [
+              GQLDSAReportStatus.AWAITING_REVIEW,
+              GQLDSAReportStatus.UNDER_REVIEW,
+            ],
+          },
+        },
+        update: {
+          $set: {
+            status: "VOID",
+          },
+        },
+      },
+    });
+
+    if (batch.dsaReports.length >= BATCH_SIZE) {
+      await processBatch();
+    }
+  }
+
+  if (batch.dsaReports.length > 0) {
+    await processBatch();
+  }
+}
+
 async function deleteUserComments(
   mongo: MongoContext,
   redis: AugmentedRedis,
@@ -252,7 +335,8 @@ export async function deleteUser(
   i18n: I18n,
   userID: string,
   tenantID: string,
-  now: Date
+  now: Date,
+  dsaEnabled: boolean
 ) {
   const user = await mongo.users().findOne({ id: userID, tenantID });
   if (!user) {
@@ -275,6 +359,15 @@ export async function deleteUser(
     await deleteUserActionCounts(mongo, userID, tenantID, true);
   }
 
+  // If DSA is enabled,
+  // Update the user's comment's associated DSAReports; set their status to VOID
+  if (dsaEnabled) {
+    await updateUserDSAReports(mongo, tenantID, userID);
+    if (mongo.archive) {
+      await updateUserDSAReports(mongo, tenantID, userID, true);
+    }
+  }
+
   // Delete the user's comments.
   await deleteUserComments(mongo, redis, config, i18n, userID, tenantID, now);
   if (mongo.archive) {
diff --git a/server/src/core/server/stacks/approveComment.ts b/server/src/core/server/stacks/approveComment.ts
index e98c894c82..f67f78f987 100644
--- a/server/src/core/server/stacks/approveComment.ts
+++ b/server/src/core/server/stacks/approveComment.ts
@@ -6,6 +6,10 @@ import { getLatestRevision } from "coral-server/models/comment";
 import { Tenant } from "coral-server/models/tenant";
 import { moderate } from "coral-server/services/comments/moderation";
 import { I18n } from "coral-server/services/i18n";
+import {
+  InternalNotificationContext,
+  NotificationType,
+} from "coral-server/services/notifications/internal/context";
 import { AugmentedRedis } from "coral-server/services/redis";
 import { submitCommentAsNotSpam } from "coral-server/services/spam";
 import { Request } from "coral-server/types/express";
@@ -21,6 +25,7 @@ const approveComment = async (
   config: Config,
   i18n: I18n,
   broker: CoralEventPublisherBroker,
+  notifications: InternalNotificationContext,
   tenant: Tenant,
   commentID: string,
   commentRevisionID: string,
@@ -81,6 +86,12 @@ const approveComment = async (
     }
   }
 
+  await notifications.create(tenant.id, tenant.locale, {
+    targetUserID: result.after.authorID!,
+    comment: result.after,
+    type: NotificationType.COMMENT_APPROVED,
+  });
+
   // Return the resulting comment.
   return result.after;
 };
diff --git a/server/src/core/server/stacks/createComment.ts b/server/src/core/server/stacks/createComment.ts
index 5c15b08366..671374865e 100644
--- a/server/src/core/server/stacks/createComment.ts
+++ b/server/src/core/server/stacks/createComment.ts
@@ -58,6 +58,7 @@ import {
 } from "coral-server/services/comments/pipeline";
 import { WordListService } from "coral-server/services/comments/pipeline/phases/wordList/service";
 import { I18n } from "coral-server/services/i18n";
+import { InternalNotificationContext } from "coral-server/services/notifications/internal/context";
 import { AugmentedRedis } from "coral-server/services/redis";
 import { updateUserLastCommentID } from "coral-server/services/users";
 import { Request } from "coral-server/types/express";
@@ -98,6 +99,7 @@ const markCommentAsAnswered = async (
   config: Config,
   i18n: I18n,
   broker: CoralEventPublisherBroker,
+  notifications: InternalNotificationContext,
   tenant: Tenant,
   comment: Readonly<Comment>,
   story: Story,
@@ -148,6 +150,7 @@ const markCommentAsAnswered = async (
       config,
       i18n,
       broker,
+      notifications,
       tenant,
       comment.parentID,
       comment.parentRevisionID,
@@ -206,6 +209,7 @@ export default async function create(
   config: Config,
   i18n: I18n,
   broker: CoralEventPublisherBroker,
+  notifications: InternalNotificationContext,
   tenant: Tenant,
   author: User,
   input: CreateComment,
@@ -392,6 +396,7 @@ export default async function create(
       config,
       i18n,
       broker,
+      notifications,
       tenant,
       comment,
       story,
diff --git a/server/src/core/server/stacks/rejectComment.ts b/server/src/core/server/stacks/rejectComment.ts
index e43fa4639c..db8f58faed 100644
--- a/server/src/core/server/stacks/rejectComment.ts
+++ b/server/src/core/server/stacks/rejectComment.ts
@@ -12,6 +12,10 @@ import { Tenant } from "coral-server/models/tenant";
 import { removeTag } from "coral-server/services/comments";
 import { moderate } from "coral-server/services/comments/moderation";
 import { I18n } from "coral-server/services/i18n";
+import {
+  InternalNotificationContext,
+  NotificationType,
+} from "coral-server/services/notifications/internal/context";
 import { AugmentedRedis } from "coral-server/services/redis";
 import { submitCommentAsSpam } from "coral-server/services/spam";
 import { Request } from "coral-server/types/express";
@@ -72,6 +76,7 @@ const rejectComment = async (
   config: Config,
   i18n: I18n,
   broker: CoralEventPublisherBroker | null,
+  notifications: InternalNotificationContext,
   tenant: Tenant,
   commentID: string,
   commentRevisionID: string,
@@ -159,6 +164,12 @@ const rejectComment = async (
     });
   }
 
+  await notifications.create(tenant.id, tenant.locale, {
+    targetUserID: result.after.authorID!,
+    comment: result.after,
+    type: NotificationType.COMMENT_REJECTED,
+  });
+
   // Return the resulting comment.
   return rollingResult;
 };