diff --git a/clients/admin-ui/src/features/common/Icon/NextArrow.tsx b/clients/admin-ui/src/features/common/Icon/NextArrow.tsx
new file mode 100644
index 0000000000..3a1093de7b
--- /dev/null
+++ b/clients/admin-ui/src/features/common/Icon/NextArrow.tsx
@@ -0,0 +1,7 @@
+import { createIcon } from "@fidesui/react";
+
+export default createIcon({
+  displayName: "NextArrow",
+  viewBox: "0 0 12 12",
+  d: "M6.58584 5.99999L4.11084 3.52499L4.81784 2.81799L7.99984 5.99999L4.81784 9.18199L4.11084 8.47499L6.58584 5.99999Z",
+});
diff --git a/clients/admin-ui/src/features/common/Icon/PrevArrow.tsx b/clients/admin-ui/src/features/common/Icon/PrevArrow.tsx
new file mode 100644
index 0000000000..9953af8d48
--- /dev/null
+++ b/clients/admin-ui/src/features/common/Icon/PrevArrow.tsx
@@ -0,0 +1,7 @@
+import { createIcon } from "@fidesui/react";
+
+export default createIcon({
+  displayName: "PrevArrow",
+  viewBox: "0 0 12 12",
+  d: "M5.414 5.99999L7.889 8.47499L7.182 9.18199L4 5.99999L7.182 2.81799L7.889 3.52499L5.414 5.99999Z",
+});
diff --git a/clients/admin-ui/src/features/plus/plus.slice.ts b/clients/admin-ui/src/features/plus/plus.slice.ts
index 87ac7c9b58..fe0a7c9251 100644
--- a/clients/admin-ui/src/features/plus/plus.slice.ts
+++ b/clients/admin-ui/src/features/plus/plus.slice.ts
@@ -264,9 +264,15 @@ const plusApi = baseApi.injectEndpoints({
     }),
     getSystemHistory: build.query<
       SystemHistoryResponse,
-      { system_key: string }
+      { system_key: string; page?: number; size?: number }
     >({
-      query: (params) => ({ url: `plus/system/${params.system_key}/history` }),
+      query: (params) => ({
+        url: `plus/system/${params.system_key}/history`,
+        params: {
+          page: params.page,
+          size: params.size,
+        },
+      }),
       providesTags: () => ["System History"],
     }),
   }),
diff --git a/clients/admin-ui/src/features/system/SystemFormTabs.tsx b/clients/admin-ui/src/features/system/SystemFormTabs.tsx
index 100f8e1be2..68f1baf2da 100644
--- a/clients/admin-ui/src/features/system/SystemFormTabs.tsx
+++ b/clients/admin-ui/src/features/system/SystemFormTabs.tsx
@@ -255,7 +255,8 @@ const SystemFormTabs = ({
           <Box px={6} paddingBottom={6}>
             <Text fontSize="sm" lineHeight={5} fontWeight="medium">
               All changes to this system are tracked here in this audit table by
-              date and by user.
+              date and by user. You can inspect the changes by selecting any of
+              the events listed.
             </Text>
           </Box>
           <SystemHistoryTable system={activeSystem} />
diff --git a/clients/admin-ui/src/features/system/history/SystemHistoryTable.tsx b/clients/admin-ui/src/features/system/history/SystemHistoryTable.tsx
index de75c6cb9c..4448b64ec0 100644
--- a/clients/admin-ui/src/features/system/history/SystemHistoryTable.tsx
+++ b/clients/admin-ui/src/features/system/history/SystemHistoryTable.tsx
@@ -1,11 +1,25 @@
-import { Table, Tbody, Td, Thead, Tr } from "@fidesui/react";
+import {
+  Button,
+  Flex,
+  Table,
+  Tbody,
+  Td,
+  Text,
+  Thead,
+  Tr,
+} from "@fidesui/react";
 import _ from "lodash";
-import React from "react";
+import React, { useState } from "react";
 
+import NextArrow from "~/features/common/Icon/NextArrow";
+import PrevArrow from "~/features/common/Icon/PrevArrow";
 import { useGetSystemHistoryQuery } from "~/features/plus/plus.slice";
+import { PrivacyDeclaration } from "~/types/api";
 import { SystemHistory } from "~/types/api/models/SystemHistory";
 import { SystemResponse } from "~/types/api/models/SystemResponse";
 
+import SystemHistoryModal from "./modal/SystemHistoryModal";
+
 interface Props {
   system: SystemResponse;
 }
@@ -34,14 +48,81 @@ const formatDateAndTime = (dateString: string) => {
   return { formattedTime, formattedDate };
 };
 
+function alignArrays(
+  before: PrivacyDeclaration[],
+  after: PrivacyDeclaration[]
+) {
+  const allNames = new Set([...before, ...after].map((item) => item.data_use));
+  const alignedBefore: PrivacyDeclaration[] = [];
+  const alignedAfter: PrivacyDeclaration[] = [];
+
+  allNames.forEach((data_use) => {
+    const firstItem = before.find((item) => item.data_use === data_use) || {
+      data_use: "",
+      data_categories: [],
+    };
+    const secondItem = after.find((item) => item.data_use === data_use) || {
+      data_use: "",
+      data_categories: [],
+    };
+    alignedBefore.push(firstItem);
+    alignedAfter.push(secondItem);
+  });
+
+  return [alignedBefore, alignedAfter];
+}
+
+const itemsPerPage = 10;
+
 const SystemHistoryTable = ({ system }: Props) => {
-  // Fetch system history data
+  const [currentPage, setCurrentPage] = useState(1);
   const { data } = useGetSystemHistoryQuery({
     system_key: system.fides_key,
+    page: currentPage,
+    size: itemsPerPage,
   });
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [selectedHistory, setSelectedHistory] = useState<SystemHistory | null>(
+    null
+  );
 
   const systemHistories = data?.items || [];
 
+  const openModal = (history: SystemHistory) => {
+    // Align the privacy_declarations arrays
+    const beforePrivacyDeclarations =
+      history?.before?.privacy_declarations || [];
+    const afterPrivacyDeclarations = history?.after?.privacy_declarations || [];
+    const [alignedBefore, alignedAfter] = alignArrays(
+      beforePrivacyDeclarations,
+      afterPrivacyDeclarations
+    );
+
+    // Create new initialValues objects with the aligned arrays
+    const alignedBeforeInitialValues = {
+      ...history?.before,
+      privacy_declarations: alignedBefore,
+    };
+    const alignedAfterInitialValues = {
+      ...history?.after,
+      privacy_declarations: alignedAfter,
+    };
+
+    setSelectedHistory({
+      before: alignedBeforeInitialValues,
+      after: alignedAfterInitialValues,
+      edited_by: history.edited_by,
+      system_id: history.system_id,
+      created_at: history.created_at,
+    });
+    setModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setModalOpen(false);
+    setSelectedHistory(null);
+  };
+
   const describeSystemChange = (history: SystemHistory) => {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const { edited_by, before, after, created_at } = history;
@@ -146,58 +227,106 @@ const SystemHistoryTable = ({ system }: Props) => {
 
   const { formattedTime, formattedDate } = formatDateAndTime(system.created_at);
 
+  const totalPages = data ? Math.ceil(data.total / itemsPerPage) : 0;
+
+  const handleNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  const handlePrevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
   return (
-    <Table style={{ marginLeft: "24px" }}>
-      <Thead>
-        <Tr>
-          <Td
-            style={{
-              paddingTop: 16,
-              paddingBottom: 16,
-              paddingLeft: 16,
-              fontSize: 12,
-              borderTop: "1px solid #E2E8F0",
-              borderLeft: "1px solid #E2E8F0",
-              borderRight: "1px solid #E2E8F0",
-              background: "#F7FAFC",
-            }}
-          >
-            System created
-            {system.created_by && (
-              <>
-                {" "}
-                by <b>{system.created_by}</b>{" "}
-              </>
-            )}{" "}
-            on {formattedDate} at {formattedTime}
-          </Td>
-        </Tr>
-      </Thead>
-      <Tbody>
-        {systemHistories.map((history: SystemHistory, index: number) => {
-          const description = describeSystemChange(history);
-          return (
-            <Tr
-              // eslint-disable-next-line react/no-array-index-key
-              key={index}
+    <>
+      <Table ml="24px">
+        <Thead>
+          <Tr>
+            <Td
+              p="16px"
+              fontSize="12px"
+              border="1px solid #E2E8F0"
+              background="#F7FAFC"
             >
-              <Td
-                style={{
-                  paddingTop: 10,
-                  paddingBottom: 10,
-                  paddingLeft: 16,
-                  fontSize: 12,
-                  borderLeft: "1px solid #E2E8F0",
-                  borderRight: "1px solid #E2E8F0",
-                }}
+              System created
+              {system.created_by && (
+                <>
+                  {" "}
+                  by <b>{system.created_by}</b>{" "}
+                </>
+              )}{" "}
+              on {formattedDate} at {formattedTime}
+            </Td>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {systemHistories.map((history, index) => {
+            const description = describeSystemChange(history);
+            return (
+              <Tr
+                // eslint-disable-next-line react/no-array-index-key
+                key={index}
+                onClick={() => openModal(history)}
+                style={{ cursor: "pointer" }}
               >
-                {description}
-              </Td>
-            </Tr>
-          );
-        })}
-      </Tbody>
-    </Table>
+                <Td
+                  pt="10px"
+                  pb="10px"
+                  pl="16px"
+                  fontSize="12px"
+                  border="1px solid #E2E8F0"
+                >
+                  {description}
+                </Td>
+              </Tr>
+            );
+          })}
+        </Tbody>
+      </Table>
+      {(data?.total || 0) > 10 && (
+        <Flex
+          alignItems="center"
+          justifyContent="flex-start"
+          marginTop="12px"
+          marginLeft="24px"
+        >
+          <Text fontSize="xs" lineHeight={4} fontWeight="600" paddingX={2}>
+            {(currentPage - 1) * itemsPerPage + 1} -{" "}
+            {Math.min(currentPage * itemsPerPage, data?.total || 0)} of{" "}
+            {data?.total || 0}
+          </Text>
+          <Button
+            size="xs"
+            width="24px"
+            variant="outline"
+            paddingX={0}
+            marginRight={2}
+            onClick={handlePrevPage}
+            disabled={currentPage === 1}
+          >
+            <PrevArrow />
+          </Button>
+          <Button
+            size="xs"
+            variant="outline"
+            paddingX={0}
+            onClick={handleNextPage}
+            disabled={currentPage === totalPages || totalPages === 0}
+          >
+            <NextArrow />
+          </Button>
+        </Flex>
+      )}
+      <SystemHistoryModal
+        selectedHistory={selectedHistory!}
+        isOpen={isModalOpen}
+        onClose={closeModal}
+      />
+    </>
   );
 };
 
diff --git a/clients/admin-ui/src/features/system/history/modal/SelectedHistoryContext.tsx b/clients/admin-ui/src/features/system/history/modal/SelectedHistoryContext.tsx
new file mode 100644
index 0000000000..6aece9a4f2
--- /dev/null
+++ b/clients/admin-ui/src/features/system/history/modal/SelectedHistoryContext.tsx
@@ -0,0 +1,40 @@
+import React, { createContext, ReactNode, useContext, useMemo } from "react";
+
+import { SystemHistory } from "~/types/api/models/SystemHistory";
+
+type FormType = "before" | "after";
+
+interface SelectedHistoryContextProps {
+  selectedHistory: SystemHistory | null;
+  formType: FormType;
+}
+
+const SelectedHistoryContext =
+  createContext<SelectedHistoryContextProps | null>(null);
+
+export const useSelectedHistory = () => useContext(SelectedHistoryContext)!;
+
+interface SelectedHistoryProviderProps {
+  children: ReactNode;
+  selectedHistory: SystemHistory | null;
+  formType: FormType;
+}
+
+const SelectedHistoryProvider: React.FC<SelectedHistoryProviderProps> = ({
+  children,
+  selectedHistory,
+  formType,
+}) => {
+  const value = useMemo(
+    () => ({ selectedHistory, formType }),
+    [selectedHistory, formType]
+  );
+
+  return (
+    <SelectedHistoryContext.Provider value={value}>
+      {children}
+    </SelectedHistoryContext.Provider>
+  );
+};
+
+export default SelectedHistoryProvider;
diff --git a/clients/admin-ui/src/features/system/history/modal/SystemDataForm.tsx b/clients/admin-ui/src/features/system/history/modal/SystemDataForm.tsx
new file mode 100644
index 0000000000..557d0f94c2
--- /dev/null
+++ b/clients/admin-ui/src/features/system/history/modal/SystemDataForm.tsx
@@ -0,0 +1,261 @@
+import { Stack } from "@fidesui/react";
+import { Form, Formik } from "formik";
+import React from "react";
+
+import { useFeatures } from "~/features/common/features/features.slice";
+import { PrivacyDeclaration } from "~/types/api";
+
+import SystemDataSwitch from "./fields/SystemDataSwitch";
+import SystemDataTags from "./fields/SystemDataTags";
+import SystemDataTextField from "./fields/SystemDataTextField";
+import SystemDataGroup from "./SystemDataGroup";
+
+interface SystemDataFormProps {
+  initialValues: Record<string, any>;
+}
+
+const SystemDataForm: React.FC<SystemDataFormProps> = ({ initialValues }) => {
+  const features = useFeatures();
+  return (
+    <Formik
+      enableReinitialize
+      initialValues={initialValues}
+      onSubmit={() => {}}
+    >
+      {() => (
+        <Form>
+          <Stack>
+            {/* System information */}
+            <SystemDataGroup heading="System details">
+              {features.dictionaryService ? (
+                <SystemDataTextField
+                  name="meta.vendor.id"
+                  label="Vendor"
+                  tooltip="Select the vendor that matches the system"
+                />
+              ) : null}
+              <SystemDataTextField
+                name="name"
+                label="System name"
+                tooltip="Give the system a unique, and relevant name for reporting purposes. e.g. “Email Data Warehouse”"
+              />
+              <SystemDataTextField
+                name="fides_key"
+                label="Unique ID"
+                disabled
+                tooltip="An auto-generated unique ID based on the system name"
+              />
+              <SystemDataTextField
+                name="description"
+                label="Description"
+                tooltip="Give the system a unique, and relevant name for reporting purposes. e.g. “Email Data Warehouse”"
+              />
+              <SystemDataTags
+                name="tags"
+                label="System Tags"
+                tooltip="Are there any tags to associate with this system?"
+              />
+            </SystemDataGroup>
+            <SystemDataGroup heading="Dataset reference">
+              <SystemDataTags
+                name="dataset_references"
+                label="Dataset references"
+                tooltip="Is there a dataset configured for this system"
+              />
+            </SystemDataGroup>
+            <SystemDataGroup heading="Data processing properties">
+              <SystemDataSwitch
+                name="processes_personal_data"
+                label="This system processes personal data"
+                tooltip="Does this system process personal data?"
+              />
+              <SystemDataSwitch
+                name="exempt_from_privacy_regulations"
+                label="This system is exempt from privacy regulations"
+                tooltip="Is this system exempt from privacy regulations?"
+              />
+              <SystemDataTextField
+                name="reason_for_exemption"
+                label="Reason for exemption"
+                tooltip="Why is this system exempt from privacy regulation?"
+              />
+              <SystemDataSwitch
+                name="uses_profiling"
+                label="This system performs profiling"
+                tooltip="Does this system perform profiling that could have a legal effect?"
+              />
+              <SystemDataTags
+                name="legal_basis_for_profiling"
+                label="Legal basis for profiling"
+                tooltip="What is the legal basis under which profiling is performed?"
+              />
+              <SystemDataSwitch
+                name="does_international_transfers"
+                label="This system transfers data"
+                tooltip="Does this system transfer data to other countries or international organizations?"
+              />
+              <SystemDataTags
+                name="legal_basis_for_transfers"
+                label="Legal basis for transfer"
+                tooltip="What is the legal basis under which the data is transferred?"
+              />
+              <SystemDataSwitch
+                name="requires_data_protection_assessments"
+                label="This system requires Data Privacy Assessments"
+                tooltip="Does this system require (DPA/DPIA) assessments?"
+              />
+              <SystemDataTextField
+                label="DPIA/DPA location"
+                name="dpa_location"
+                tooltip="Where is the DPA/DPIA stored?"
+              />
+            </SystemDataGroup>
+            <SystemDataGroup heading="Administrative properties">
+              <SystemDataTextField
+                label="Data stewards"
+                name="data_stewards"
+                tooltip="Who are the stewards assigned to the system?"
+              />
+              <SystemDataTextField
+                name="privacy_policy"
+                label="Privacy policy URL"
+                tooltip="Where can the privacy
+                policy be located?"
+              />
+              <SystemDataTextField
+                name="legal_name"
+                label="Legal name"
+                tooltip="What is the legal name of the business?"
+              />
+              <SystemDataTextField
+                name="legal_address"
+                label="Legal address"
+                tooltip="What is the legal address for the business?"
+              />
+              <SystemDataTextField
+                label="Department"
+                name="administrating_department"
+                tooltip="Which department is concerned with this system?"
+              />
+              <SystemDataTags
+                label="Responsibility"
+                name="responsibility"
+                tooltip="What is the role of the business with regard to data processing?"
+              />
+              <SystemDataTextField
+                name="dpo"
+                label="Legal contact (DPO)"
+                tooltip="What is the official privacy contact information?"
+              />
+              <SystemDataTextField
+                label="Joint controller"
+                name="joint_controller_info"
+                tooltip="Who are the party or parties that share responsibility for processing data?"
+              />
+              <SystemDataTextField
+                label="Data security practices"
+                name="data_security_practices"
+                tooltip="Which data security practices are employed to keep the data safe?"
+              />
+            </SystemDataGroup>
+            {/* Data uses */}
+            {initialValues.privacy_declarations &&
+              initialValues.privacy_declarations.map(
+                (_: PrivacyDeclaration, index: number) => (
+                  <>
+                    <SystemDataGroup heading="Data use declaration">
+                      <SystemDataTextField
+                        label="Declaration name (optional)"
+                        name={`privacy_declarations[${index}].name`}
+                        tooltip="Would you like to append anything to the system name?"
+                      />
+                      <SystemDataTextField
+                        name={`privacy_declarations[${index}].data_use`}
+                        label="This system processes personal data"
+                        tooltip="Does this system process personal data?"
+                      />
+                      <SystemDataTags
+                        name={`privacy_declarations[${index}].data_categories`}
+                        label="Data categories"
+                        tooltip="Which categories of personal data are collected for this purpose?"
+                      />
+                      <SystemDataTags
+                        name={`privacy_declarations[${index}].data_subjects`}
+                        label="Data subjects"
+                        tooltip="Who are the subjects for this personal data?"
+                      />
+                      <SystemDataTextField
+                        name={`privacy_declarations[${index}].legal_basis_for_processing`}
+                        label="Legal basis for processing"
+                        tooltip="What is the legal basis under which personal data is processed for this purpose?"
+                      />
+                      <SystemDataTextField
+                        name={`privacy_declarations[${index}].impact_assessment_location`}
+                        label="Impact assessment location"
+                        tooltip="Where is the legitimate interest impact assessment stored?"
+                      />
+                      <SystemDataTextField
+                        name={`privacy_declarations[${index}].retention_period`}
+                        label="Retention period (days)"
+                        tooltip="How long is personal data retained for this purpose?"
+                      />
+                    </SystemDataGroup>
+                    <SystemDataGroup heading="Features">
+                      <SystemDataTags
+                        name={`privacy_declarations[${index}].features`}
+                        label="Features"
+                        tooltip="What are some features of how data is processed?"
+                      />
+                    </SystemDataGroup>
+                    <SystemDataGroup heading="Dataset reference">
+                      <SystemDataTags
+                        name={`privacy_declarations[${index}].dataset_references`}
+                        label="Dataset references"
+                        tooltip="Is there a dataset configured for this system?"
+                      />
+                    </SystemDataGroup>
+                    <SystemDataGroup heading="Special category data">
+                      <SystemDataSwitch
+                        name={`privacy_declarations[${index}].processes_special_category_data`}
+                        label="This system processes special category data"
+                        tooltip="Is this system processing special category data as defined by GDPR Article 9?"
+                      />
+                      <SystemDataTextField
+                        name={`privacy_declarations[${index}].special_category_legal_basis`}
+                        label="Legal basis for processing"
+                        tooltip="What is the legal basis under which the special category data is processed?"
+                      />
+                    </SystemDataGroup>
+                    <SystemDataGroup heading="Third parties">
+                      <SystemDataSwitch
+                        name={`privacy_declarations[${index}].data_shared_with_third_parties`}
+                        label="This system shares data with 3rd parties for this purpose"
+                        tooltip="Does this system disclose, sell, or share personal data collected for this business use with 3rd parties?"
+                      />
+                      <SystemDataTextField
+                        name={`privacy_declarations[${index}].third_parties`}
+                        label="Third parties"
+                        tooltip="Which type of third parties is the data shared with?"
+                      />
+                      <SystemDataTags
+                        name={`privacy_declarations[${index}].shared_categories`}
+                        label="Shared categories"
+                        tooltip="Which categories of personal data does this system share with third parties?"
+                      />
+                    </SystemDataGroup>
+                  </>
+                )
+              )}
+            {/* System flow */}
+            <SystemDataGroup heading="Data flow">
+              <SystemDataTags name="ingress" label="Sources" />
+              <SystemDataTags name="egress" label="Destinations" />
+            </SystemDataGroup>
+          </Stack>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default SystemDataForm;
diff --git a/clients/admin-ui/src/features/system/history/modal/SystemDataGroup.tsx b/clients/admin-ui/src/features/system/history/modal/SystemDataGroup.tsx
new file mode 100644
index 0000000000..e07bc1d007
--- /dev/null
+++ b/clients/admin-ui/src/features/system/history/modal/SystemDataGroup.tsx
@@ -0,0 +1,74 @@
+import { Box, Heading, Stack } from "@fidesui/react";
+import _ from "lodash";
+import React from "react";
+
+import { useSelectedHistory } from "./SelectedHistoryContext";
+
+const SystemDataGroup = ({
+  heading,
+  children,
+}: {
+  heading: string;
+  children?: React.ReactNode;
+}) => {
+  const { selectedHistory } = useSelectedHistory();
+  const childArray = React.Children.toArray(children);
+
+  // Filter children based on whether their name prop exists in before or after of selectedHistory
+  const filteredChildren = childArray.filter((child) => {
+    if (React.isValidElement(child) && child.props.name) {
+      const { name } = child.props;
+      const beforeValue = _.get(selectedHistory?.before, name);
+      const afterValue = _.get(selectedHistory?.after, name);
+      const isBeforeValueEmpty =
+        typeof beforeValue === "boolean" || typeof beforeValue === "number"
+          ? false
+          : _.isEmpty(beforeValue);
+      const isAfterValueEmpty =
+        typeof afterValue === "boolean" || typeof afterValue === "number"
+          ? false
+          : _.isEmpty(afterValue);
+
+      return !isBeforeValueEmpty || !isAfterValueEmpty;
+    }
+    return false;
+  });
+
+  // If no children should be rendered, return null
+  if (filteredChildren.length === 0) {
+    return null;
+  }
+
+  return (
+    <Stack marginTop="0px !important">
+      <Box
+        maxWidth="720px"
+        border="1px"
+        borderColor="gray.200"
+        borderRadius={6}
+        overflow="visible"
+        mt={6}
+      >
+        <Box
+          backgroundColor="gray.50"
+          px={6}
+          py={4}
+          display="flex"
+          flexDirection="row"
+          alignItems="center"
+          borderBottom="1px"
+          borderColor="gray.200"
+          borderTopRadius={6}
+        >
+          <Heading as="h3" size="xs">
+            {heading}
+          </Heading>
+        </Box>
+
+        <Stack>{filteredChildren}</Stack>
+      </Box>
+    </Stack>
+  );
+};
+
+export default SystemDataGroup;
diff --git a/clients/admin-ui/src/features/system/history/modal/SystemHistoryModal.tsx b/clients/admin-ui/src/features/system/history/modal/SystemHistoryModal.tsx
new file mode 100644
index 0000000000..3760c8e3b7
--- /dev/null
+++ b/clients/admin-ui/src/features/system/history/modal/SystemHistoryModal.tsx
@@ -0,0 +1,114 @@
+import {
+  Badge,
+  Flex,
+  Heading,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Spacer,
+} from "@fidesui/react";
+
+import { SystemHistory } from "~/types/api/models/SystemHistory";
+
+import SelectedHistoryProvider from "./SelectedHistoryContext";
+import SystemDataForm from "./SystemDataForm";
+
+const getBadges = (before: Record<string, any>, after: Record<string, any>) => {
+  const badges = [];
+  const specialFields = new Set(["egress", "ingress", "privacy_declarations"]);
+
+  if (before.egress || after.egress || before.ingress || after.ingress) {
+    badges.push("Data Flow");
+  }
+
+  if (
+    (before.privacy_declarations && before.privacy_declarations.length > 0) ||
+    (after.privacy_declarations && after.privacy_declarations.length > 0)
+  ) {
+    badges.push("Data Uses");
+  }
+
+  const hasOtherFields = [...Object.keys(before), ...Object.keys(after)].some(
+    (key) => !specialFields.has(key)
+  );
+  if (hasOtherFields) {
+    badges.unshift("System Information");
+  }
+
+  return badges;
+};
+
+interface Props {
+  selectedHistory: SystemHistory;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const SystemHistoryModal = ({ selectedHistory, isOpen, onClose }: Props) => (
+  <Modal isOpen={isOpen} onClose={onClose} size="3xl">
+    <ModalOverlay />
+    <ModalContent>
+      <ModalHeader
+        backgroundColor="#F7FAFC"
+        borderTopLeftRadius="8px"
+        borderTopRightRadius="8px"
+        borderBottom="1px solid #E2E8F0"
+      >
+        <Heading size="xs">
+          <span style={{ verticalAlign: "middle" }}>Diff review</span>
+          {selectedHistory && (
+            <>
+              {getBadges(selectedHistory.before, selectedHistory.after).map(
+                (badge, index) => (
+                  <Badge
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={index}
+                    marginLeft="8px"
+                    fontSize="10px"
+                    padding="0px 4px"
+                    variant="solid"
+                    lineHeight="18px"
+                    height="18px"
+                    backgroundColor="#718096"
+                    borderRadius="2px"
+                  >
+                    {badge}
+                  </Badge>
+                )
+              )}
+            </>
+          )}
+        </Heading>
+        <>
+          <Spacer />
+          <ModalCloseButton />
+        </>
+      </ModalHeader>
+      <ModalBody paddingTop={0} paddingBottom={6}>
+        <Flex justifyContent="space-between">
+          <div style={{ flex: "0 50%", marginRight: "12px" }}>
+            <SelectedHistoryProvider
+              selectedHistory={selectedHistory}
+              formType="before"
+            >
+              <SystemDataForm initialValues={selectedHistory?.before} />
+            </SelectedHistoryProvider>
+          </div>
+          <div style={{ flex: "0 50%", marginLeft: "12px" }}>
+            <SelectedHistoryProvider
+              selectedHistory={selectedHistory}
+              formType="after"
+            >
+              <SystemDataForm initialValues={selectedHistory?.after} />
+            </SelectedHistoryProvider>
+          </div>
+        </Flex>
+      </ModalBody>
+    </ModalContent>
+  </Modal>
+);
+
+export default SystemHistoryModal;
diff --git a/clients/admin-ui/src/features/system/history/modal/fields/SystemDataSwitch.tsx b/clients/admin-ui/src/features/system/history/modal/fields/SystemDataSwitch.tsx
new file mode 100644
index 0000000000..083b7173dc
--- /dev/null
+++ b/clients/admin-ui/src/features/system/history/modal/fields/SystemDataSwitch.tsx
@@ -0,0 +1,90 @@
+import { Flex, FormControl, Tag, VStack } from "@fidesui/react";
+import { useField } from "formik";
+import _ from "lodash";
+import { useEffect, useState } from "react";
+
+import {
+  CustomInputProps,
+  Label,
+  StringField,
+} from "~/features/common/form/inputs";
+import QuestionTooltip from "~/features/common/QuestionTooltip";
+
+import { useSelectedHistory } from "../SelectedHistoryContext";
+
+const SystemDataSwitch = ({
+  label,
+  tooltip,
+  ...props
+}: CustomInputProps & StringField) => {
+  const { selectedHistory, formType } = useSelectedHistory();
+  const [initialField] = useField(props);
+  const field = { ...initialField, value: initialField.value ?? "" };
+
+  const [shouldHighlight, setShouldHighlight] = useState(false);
+
+  useEffect(() => {
+    const beforeValue = _.get(selectedHistory?.before, props.name) || "";
+    const afterValue = _.get(selectedHistory?.after, props.name) || "";
+
+    // Determine whether to highlight
+    setShouldHighlight(beforeValue !== afterValue);
+  }, [selectedHistory, props.name, field.value]);
+
+  let highlightStyle = {};
+
+  if (shouldHighlight) {
+    if (formType === "before") {
+      highlightStyle = {
+        backgroundColor: "#FFF5F5",
+        borderColor: "#E53E3E",
+        borderTop: "1px dashed #E53E3E",
+        borderBottom: "1px dashed #E53E3E",
+      };
+    } else {
+      highlightStyle = {
+        backgroundColor: "#F0FFF4",
+        borderColor: "#38A169",
+        borderTop: "1px dashed #38A169",
+        borderBottom: "1px dashed #38A169",
+      };
+    }
+  }
+
+  return (
+    <FormControl
+      style={highlightStyle}
+      paddingLeft={4}
+      paddingRight={4}
+      paddingTop={3}
+      paddingBottom={3}
+      marginTop="-1px !important"
+    >
+      <VStack alignItems="start">
+        <Flex alignItems="center">
+          <Label htmlFor={props.id || props.name} fontSize="xs" my={0} mr={1}>
+            {label}
+          </Label>
+          {tooltip ? <QuestionTooltip label={tooltip} /> : null}
+        </Flex>
+        <Tag colorScheme="gray" size="sm" m={1}>
+          {field.value ? "YES" : "NO"}
+        </Tag>
+        {formType === "before" && shouldHighlight && (
+          <div
+            style={{
+              position: "absolute",
+              right: "-22px",
+              top: "50%",
+              transform: "translateY(-50%)",
+            }}
+          >
+            →
+          </div>
+        )}
+      </VStack>
+    </FormControl>
+  );
+};
+
+export default SystemDataSwitch;
diff --git a/clients/admin-ui/src/features/system/history/modal/fields/SystemDataTags.tsx b/clients/admin-ui/src/features/system/history/modal/fields/SystemDataTags.tsx
new file mode 100644
index 0000000000..533c2c6781
--- /dev/null
+++ b/clients/admin-ui/src/features/system/history/modal/fields/SystemDataTags.tsx
@@ -0,0 +1,116 @@
+import { Flex, FormControl, Tag, VStack } from "@fidesui/react";
+import { useField } from "formik";
+import _ from "lodash";
+import React, { useEffect, useRef, useState } from "react";
+
+import { Label } from "~/features/common/form/inputs";
+import QuestionTooltip from "~/features/common/QuestionTooltip";
+
+import { useSelectedHistory } from "../SelectedHistoryContext";
+
+const SystemDataTags = ({
+  label,
+  tooltip,
+  ...props
+}: {
+  label: string;
+  tooltip?: string;
+  name: string;
+}) => {
+  const { selectedHistory, formType } = useSelectedHistory();
+  const [initialField] = useField(props.name);
+  const field = { ...initialField, value: initialField.value ?? [] };
+
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const [height, setHeight] = useState<number | null>(null);
+  const [longestValue, setLongestValue] = useState([]);
+  const [shouldHighlight, setShouldHighlight] = useState(false);
+
+  useEffect(() => {
+    const beforeValue = _.get(selectedHistory?.before, props.name) || [];
+    const afterValue = _.get(selectedHistory?.after, props.name) || [];
+
+    // Determine whether to highlight
+    setShouldHighlight(!_.isEqual(beforeValue, afterValue));
+
+    // Determine the longest value for height calculation
+    setLongestValue(
+      beforeValue.length > afterValue.length ? beforeValue : afterValue
+    );
+  }, [selectedHistory, props.name]);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setHeight(contentRef.current.offsetHeight);
+    }
+  }, [longestValue]);
+
+  let highlightStyle = {};
+
+  if (shouldHighlight) {
+    if (formType === "before") {
+      highlightStyle = {
+        backgroundColor: "#FFF5F5",
+        borderColor: "#E53E3E",
+        borderTop: "1px dashed #E53E3E",
+        borderBottom: "1px dashed #E53E3E",
+      };
+    } else {
+      highlightStyle = {
+        backgroundColor: "#F0FFF4",
+        borderColor: "#38A169",
+        borderTop: "1px dashed #38A169",
+        borderBottom: "1px dashed #38A169",
+      };
+    }
+  }
+
+  return (
+    <FormControl
+      style={highlightStyle}
+      paddingLeft={4}
+      paddingRight={4}
+      paddingTop={3}
+      paddingBottom={3}
+      marginTop="-1px !important"
+    >
+      <VStack alignItems="start">
+        <Flex alignItems="center">
+          <Label htmlFor={props.name} fontSize="xs" my={0} mr={1}>
+            {label}
+          </Label>
+          {tooltip ? <QuestionTooltip label={tooltip} /> : null}
+        </Flex>
+        <Flex
+          wrap="wrap"
+          alignItems="flex-start"
+          ref={contentRef}
+          style={{ minHeight: `${height}px` }}
+        >
+          {(height ? field.value : longestValue).map(
+            (value: any, index: number) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <Tag key={index} colorScheme="gray" size="md" m={1}>
+                {typeof value === "object" ? value.fides_key : value}
+              </Tag>
+            )
+          )}
+        </Flex>
+        {formType === "before" && shouldHighlight && (
+          <div
+            style={{
+              position: "absolute",
+              right: "-22px",
+              top: "50%",
+              transform: "translateY(-50%)",
+            }}
+          >
+            →
+          </div>
+        )}
+      </VStack>
+    </FormControl>
+  );
+};
+
+export default SystemDataTags;
diff --git a/clients/admin-ui/src/features/system/history/modal/fields/SystemDataTextField.tsx b/clients/admin-ui/src/features/system/history/modal/fields/SystemDataTextField.tsx
new file mode 100644
index 0000000000..e6f819240b
--- /dev/null
+++ b/clients/admin-ui/src/features/system/history/modal/fields/SystemDataTextField.tsx
@@ -0,0 +1,110 @@
+import { Flex, FormControl, Text, VStack } from "@fidesui/react";
+import { useField } from "formik";
+import _ from "lodash";
+import { useEffect, useRef, useState } from "react";
+
+import {
+  CustomInputProps,
+  Label,
+  StringField,
+} from "~/features/common/form/inputs";
+import QuestionTooltip from "~/features/common/QuestionTooltip";
+
+import { useSelectedHistory } from "../SelectedHistoryContext";
+
+const SystemDataTextField = ({
+  label,
+  tooltip,
+  ...props
+}: CustomInputProps & StringField) => {
+  const { selectedHistory, formType } = useSelectedHistory();
+  const [initialField] = useField(props);
+  const field = { ...initialField, value: initialField.value ?? "" };
+
+  const contentRef = useRef<HTMLParagraphElement>(null);
+  const [height, setHeight] = useState<number | null>(null);
+  const [shouldHighlight, setShouldHighlight] = useState(false);
+
+  useEffect(() => {
+    const beforeValue = _.get(selectedHistory?.before, props.name) || "";
+    const afterValue = _.get(selectedHistory?.after, props.name) || "";
+
+    // Determine whether to highlight
+    setShouldHighlight(beforeValue !== afterValue);
+
+    const longestValue =
+      beforeValue.length > afterValue.length ? beforeValue : afterValue;
+
+    if (contentRef.current) {
+      // Temporarily set the value to the longest one to measure height
+      contentRef.current.textContent = longestValue;
+
+      // Measure and set the height
+      setHeight(contentRef.current.offsetHeight);
+
+      // Reset the value to the actual one
+      contentRef.current.textContent = field.value;
+    }
+  }, [selectedHistory, props.name, field.value]);
+
+  let highlightStyle = {};
+
+  if (shouldHighlight) {
+    if (formType === "before") {
+      highlightStyle = {
+        backgroundColor: "#FFF5F5",
+        borderColor: "#E53E3E",
+        borderTop: "1px dashed #E53E3E",
+        borderBottom: "1px dashed #E53E3E",
+      };
+    } else {
+      highlightStyle = {
+        backgroundColor: "#F0FFF4",
+        borderColor: "#38A169",
+        borderTop: "1px dashed #38A169",
+        borderBottom: "1px dashed #38A169",
+      };
+    }
+  }
+
+  return (
+    <FormControl
+      style={highlightStyle}
+      paddingLeft={4}
+      paddingRight={4}
+      paddingTop={3}
+      paddingBottom={3}
+      marginTop="-1px !important"
+    >
+      <VStack alignItems="start">
+        <Flex alignItems="center">
+          <Label htmlFor={props.id || props.name} fontSize="xs" my={0} mr={1}>
+            {label}
+          </Label>
+          {tooltip ? <QuestionTooltip label={tooltip} /> : null}
+        </Flex>
+        <Text
+          fontSize="14px"
+          ref={contentRef}
+          style={{ height: `${height}px` }}
+        >
+          {field.value}
+        </Text>
+        {formType === "before" && shouldHighlight && (
+          <div
+            style={{
+              position: "absolute",
+              right: "-22px",
+              top: "50%",
+              transform: "translateY(-50%)",
+            }}
+          >
+            →
+          </div>
+        )}
+      </VStack>
+    </FormControl>
+  );
+};
+
+export default SystemDataTextField;
diff --git a/clients/admin-ui/src/types/api/models/SystemHistory.ts b/clients/admin-ui/src/types/api/models/SystemHistory.ts
index efb79bd3fa..01084444e0 100644
--- a/clients/admin-ui/src/types/api/models/SystemHistory.ts
+++ b/clients/admin-ui/src/types/api/models/SystemHistory.ts
@@ -1,7 +1,7 @@
 export type SystemHistory = {
   edited_by: string;
   system_id: string;
-  before: object;
-  after: object;
+  before: Record<string, any>;
+  after: Record<string, any>;
   created_at: string;
 };