diff --git a/changelog/8133-system-data-flow-antd-migration.yaml b/changelog/8133-system-data-flow-antd-migration.yaml
new file mode 100644
index 00000000000..f26b11b558b
--- /dev/null
+++ b/changelog/8133-system-data-flow-antd-migration.yaml
@@ -0,0 +1,4 @@
+type: Changed
+description: Migrated system data flow components from Chakra/Formik to Ant Design
+pr: 8133
+labels: []
diff --git a/clients/admin-ui/src/features/common/system-data-flow/DataFlowAccordion.tsx b/clients/admin-ui/src/features/common/system-data-flow/DataFlowAccordion.tsx
index 49736a11a52..7250a819da3 100644
--- a/clients/admin-ui/src/features/common/system-data-flow/DataFlowAccordion.tsx
+++ b/clients/admin-ui/src/features/common/system-data-flow/DataFlowAccordion.tsx
@@ -1,4 +1,4 @@
-import { ChakraAccordion as Accordion } from "fidesui";
+import { Flex } from "fidesui";
 import React from "react";
 
 import { System } from "~/types/api";
@@ -14,12 +14,12 @@ export const DataFlowAccordion = ({
   system,
   isSystemTab,
 }: DataFlowFormProps) => (
-  <Accordion allowToggle data-testid="data-flow-accordion">
+  <Flex vertical data-testid="data-flow-accordion">
     <DataFlowAccordionForm
       system={system}
       isIngress
       isSystemTab={isSystemTab}
     />
     <DataFlowAccordionForm system={system} isSystemTab={isSystemTab} />
-  </Accordion>
+  </Flex>
 );
diff --git a/clients/admin-ui/src/features/common/system-data-flow/DataFlowAccordionForm.tsx b/clients/admin-ui/src/features/common/system-data-flow/DataFlowAccordionForm.tsx
index b74cdc4b4f4..e6540ad3de1 100644
--- a/clients/admin-ui/src/features/common/system-data-flow/DataFlowAccordionForm.tsx
+++ b/clients/admin-ui/src/features/common/system-data-flow/DataFlowAccordionForm.tsx
@@ -1,40 +1,31 @@
-// External libraries
 import {
   Button,
-  ChakraAccordionButton as AccordionButton,
-  ChakraAccordionIcon as AccordionIcon,
-  ChakraAccordionItem as AccordionItem,
-  ChakraAccordionPanel as AccordionPanel,
-  ChakraFlex as Flex,
-  ChakraSpacer as Spacer,
-  ChakraStack as Stack,
-  ChakraTag as Tag,
-  ChakraText as Text,
+  Collapse,
+  CollapseProps,
+  Flex,
   Icons,
-  useChakraDisclosure as useDisclosure,
+  Space,
+  Tag,
+  Text,
   useMessage,
 } from "fidesui";
-import { Form, Formik, FormikHelpers } from "formik";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
-// Internal features
+import { useAppDispatch } from "~/app/hooks";
 import { isErrorResult } from "~/features/common/helpers";
-import { FormGuard } from "~/features/common/hooks/useIsAnyFormDirty";
+import {
+  registerForm,
+  unregisterForm,
+  updateDirtyFormState,
+} from "~/features/common/hooks/dirty-forms.slice";
 import { DataFlowSystemsDeleteTable } from "~/features/common/system-data-flow/DataFlowSystemsDeleteTable";
 import DataFlowSystemsModal from "~/features/common/system-data-flow/DataFlowSystemsModal";
-// API types and hooks
 import {
   useGetAllSystemsQuery,
   useUpdateSystemMutation,
 } from "~/features/system";
 import { DataFlow, System } from "~/types/api";
 
-const defaultInitialValues = {
-  dataFlowSystems: [] as DataFlow[],
-};
-
-export type FormValues = typeof defaultInitialValues;
-
 type DataFlowAccordionItemProps = {
   isIngress?: boolean;
   system: System;
@@ -47,9 +38,11 @@ export const DataFlowAccordionForm = ({
   isSystemTab,
 }: DataFlowAccordionItemProps) => {
   const message = useMessage();
+  const dispatch = useAppDispatch();
   const flowType = isIngress ? "Source" : "Destination";
   const pluralFlowType = `${flowType}s`;
-  const dataFlowSystemsModal = useDisclosure();
+  const [modalOpen, setModalOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [updateSystemMutationTrigger] = useUpdateSystemMutation();
 
   const { data: systems = [] } = useGetAllSystemsQuery();
@@ -64,21 +57,34 @@ export const DataFlowAccordionForm = ({
     return dataFlows.filter((df) => systemFidesKeys.includes(df.fides_key));
   }, [isIngress, system, systems]);
 
-  const [assignedDataFlow, setAssignedDataFlows] =
+  const [assignedDataFlows, setAssignedDataFlows] =
     useState<DataFlow[]>(initialDataFlows);
 
   useEffect(() => {
     setAssignedDataFlows(initialDataFlows);
   }, [initialDataFlows]);
 
-  const handleSubmit = async (
-    { dataFlowSystems }: FormValues,
-    { resetForm }: FormikHelpers<FormValues>,
-  ) => {
+  const isDirty = assignedDataFlows !== initialDataFlows;
+
+  // FormGuard: register/unregister form and track dirty state via Redux
+  const formId = `${system.fides_key}:${flowType}`;
+  useEffect(() => {
+    dispatch(registerForm({ id: formId, name: `${flowType} Data Flow` }));
+    return () => {
+      dispatch(unregisterForm({ id: formId }));
+    };
+  }, [dispatch, formId, flowType]);
+
+  useEffect(() => {
+    dispatch(updateDirtyFormState({ id: formId, isDirty }));
+  }, [isDirty, dispatch, formId]);
+
+  const handleSubmit = useCallback(async () => {
+    setIsSubmitting(true);
     const updatedSystem = {
       ...system,
-      ingress: isIngress ? dataFlowSystems : system.ingress,
-      egress: !isIngress ? dataFlowSystems : system.egress,
+      ingress: isIngress ? assignedDataFlows : system.ingress,
+      egress: !isIngress ? assignedDataFlows : system.egress,
     };
     const result = await updateSystemMutationTrigger(updatedSystem);
 
@@ -87,118 +93,122 @@ export const DataFlowAccordionForm = ({
     } else {
       message.success(`${pluralFlowType} updated`);
     }
+    setIsSubmitting(false);
+  }, [
+    system,
+    isIngress,
+    assignedDataFlows,
+    updateSystemMutationTrigger,
+    message,
+    pluralFlowType,
+  ]);
+
+  const handleCancel = useCallback(() => {
+    setAssignedDataFlows(initialDataFlows);
+  }, [initialDataFlows]);
 
-    resetForm({ values: { dataFlowSystems } });
-  };
+  const handleDelete = useCallback((systemToDelete: System) => {
+    setAssignedDataFlows((prev) =>
+      prev.filter((df) => df.fides_key !== systemToDelete.fides_key),
+    );
+  }, []);
+
+  const collapseItems: CollapseProps["items"] = useMemo(
+    () => [
+      {
+        key: flowType,
+        label: (
+          <Flex
+            align="center"
+            gap="small"
+            className={isSystemTab ? "pl-4" : undefined}
+            data-testid={`data-flow-button-${flowType}`}
+          >
+            <Text strong size="sm">
+              {pluralFlowType}
+            </Text>
+            <Tag color="info">{assignedDataFlows.length}</Tag>
+          </Flex>
+        ),
+        children: (
+          <Space
+            direction="vertical"
+            size="middle"
+            className="w-full"
+            data-testid={`data-flow-panel-${flowType}`}
+          >
+            <Button
+              onClick={() => setModalOpen(true)}
+              type="primary"
+              size="small"
+              icon={<Icons.Settings />}
+              iconPlacement="end"
+              className="mb-4"
+              data-testid="assign-systems-btn"
+            >
+              {`Configure ${pluralFlowType.toLocaleLowerCase()}`}
+            </Button>
+            <DataFlowSystemsDeleteTable
+              systems={systems}
+              dataFlows={assignedDataFlows}
+              onDelete={handleDelete}
+            />
+
+            <Flex gap={2} className="mt-6">
+              <Button
+                disabled={!isDirty}
+                onClick={handleCancel}
+                data-testid="cancel-btn"
+              >
+                Cancel
+              </Button>
+              <Button
+                type="primary"
+                onClick={handleSubmit}
+                loading={isSubmitting}
+                disabled={!isDirty}
+                data-testid="save-btn"
+              >
+                Save
+              </Button>
+            </Flex>
+            {/* By conditionally rendering the modal, we force it to reset its state
+            whenever it opens */}
+            {modalOpen ? (
+              <DataFlowSystemsModal
+                currentSystem={system}
+                systems={systems}
+                isOpen={modalOpen}
+                onClose={() => setModalOpen(false)}
+                dataFlowSystems={assignedDataFlows}
+                onDataFlowSystemChange={setAssignedDataFlows}
+                flowType={flowType}
+              />
+            ) : null}
+          </Space>
+        ),
+      },
+    ],
+    [
+      flowType,
+      isSystemTab,
+      pluralFlowType,
+      assignedDataFlows,
+      systems,
+      handleDelete,
+      isDirty,
+      handleCancel,
+      handleSubmit,
+      isSubmitting,
+      modalOpen,
+      system,
+    ],
+  );
 
   return (
-    <AccordionItem>
-      <AccordionButton
-        height="68px"
-        paddingLeft={isSystemTab ? 6 : 2}
-        data-testid={`data-flow-button-${flowType}`}
-      >
-        <Flex
-          alignItems="center"
-          justifyContent="start"
-          flex={1}
-          textAlign="left"
-        >
-          <Text fontSize="sm" lineHeight={5} fontWeight="semibold" mr={2}>
-            {pluralFlowType}
-          </Text>
-          {/* Commented out until we get copy for the tooltips */}
-          {/* <QuestionTooltip label="helpful tip" /> */}
-
-          <Tag
-            ml={2}
-            backgroundColor="primary.400"
-            borderRadius="6px"
-            color="white"
-          >
-            {assignedDataFlow.length}
-          </Tag>
-          <Spacer />
-          <AccordionIcon />
-        </Flex>
-      </AccordionButton>
-      <AccordionPanel
-        backgroundColor="gray.50"
-        padding={6}
-        data-testid={`data-flow-panel-${flowType}`}
-      >
-        <Stack
-          borderRadius="md"
-          backgroundColor="gray.50"
-          aria-selected="true"
-          spacing={4}
-          data-testid="selected"
-        >
-          <Formik initialValues={defaultInitialValues} onSubmit={handleSubmit}>
-            {({ isSubmitting, dirty, resetForm }) => (
-              <Form>
-                <FormGuard
-                  id={`${system.fides_key}:${flowType}`}
-                  name={`${flowType} Data Flow`}
-                />
-                <Button
-                  onClick={dataFlowSystemsModal.onOpen}
-                  type="primary"
-                  size="small"
-                  icon={<Icons.Settings />}
-                  iconPlacement="end"
-                  className="mb-4"
-                  data-testid="assign-systems-btn"
-                >
-                  {`Configure ${pluralFlowType.toLocaleLowerCase()}`}
-                </Button>
-                <DataFlowSystemsDeleteTable
-                  systems={systems}
-                  dataFlows={assignedDataFlow}
-                  onDataFlowSystemChange={setAssignedDataFlows}
-                />
-
-                <div className="mt-6 flex gap-2">
-                  <Button
-                    disabled={!dirty && assignedDataFlow === initialDataFlows}
-                    onClick={() => {
-                      setAssignedDataFlows(initialDataFlows);
-                      resetForm({
-                        values: { dataFlowSystems: initialDataFlows },
-                      });
-                    }}
-                    data-testid="cancel-btn"
-                  >
-                    Cancel
-                  </Button>
-                  <Button
-                    type="primary"
-                    htmlType="submit"
-                    loading={isSubmitting}
-                    disabled={!dirty && assignedDataFlow === initialDataFlows}
-                    data-testid="save-btn"
-                  >
-                    Save
-                  </Button>
-                </div>
-                {/* By conditionally rendering the modal, we force it to reset its state
-                whenever it opens */}
-                {dataFlowSystemsModal.isOpen ? (
-                  <DataFlowSystemsModal
-                    currentSystem={system}
-                    systems={systems}
-                    isOpen={dataFlowSystemsModal.isOpen}
-                    onClose={dataFlowSystemsModal.onClose}
-                    dataFlowSystems={assignedDataFlow}
-                    onDataFlowSystemChange={setAssignedDataFlows}
-                    flowType={flowType}
-                  />
-                ) : null}
-              </Form>
-            )}
-          </Formik>
-        </Stack>
-      </AccordionPanel>
-    </AccordionItem>
+    <Collapse
+      items={collapseItems}
+      data-testid={`data-flow-collapse-${flowType}`}
+    />
   );
 };
diff --git a/clients/admin-ui/src/features/common/system-data-flow/DataFlowSystemsDeleteTable.tsx b/clients/admin-ui/src/features/common/system-data-flow/DataFlowSystemsDeleteTable.tsx
index 669d092be42..704e7d65ad7 100644
--- a/clients/admin-ui/src/features/common/system-data-flow/DataFlowSystemsDeleteTable.tsx
+++ b/clients/admin-ui/src/features/common/system-data-flow/DataFlowSystemsDeleteTable.tsx
@@ -1,15 +1,4 @@
-import {
-  Button,
-  ChakraTable as Table,
-  ChakraTbody as Tbody,
-  ChakraTd as Td,
-  ChakraText as Text,
-  ChakraTh as Th,
-  ChakraThead as Thead,
-  ChakraTr as Tr,
-  Icons,
-} from "fidesui";
-import { useFormikContext } from "formik";
+import { Button, Icons, Table, Text } from "fidesui";
 import React from "react";
 
 import { DataFlow, System } from "~/types/api";
@@ -17,59 +6,48 @@ import { DataFlow, System } from "~/types/api";
 type Props = {
   systems: System[];
   dataFlows: DataFlow[];
-  onDataFlowSystemChange: (systems: DataFlow[]) => void;
+  onDelete: (system: System) => void;
 };
 
 export const DataFlowSystemsDeleteTable = ({
   systems,
   dataFlows,
-  onDataFlowSystemChange,
+  onDelete,
 }: Props) => {
-  const { setFieldValue } = useFormikContext();
-
   const dataFlowKeys = dataFlows.map((f) => f.fides_key);
-
-  const onDelete = (dataFlow: System) => {
-    const updatedDataFlows = dataFlows.filter(
-      (dataFlowSystem) => dataFlowSystem.fides_key !== dataFlow.fides_key,
-    );
-    setFieldValue("dataFlowSystems", updatedDataFlows);
-    onDataFlowSystemChange(updatedDataFlows);
-  };
+  const dataSource = systems.filter((system) =>
+    dataFlowKeys.includes(system.fides_key),
+  );
 
   return (
-    <Table size="sm" data-testid="assign-systems-delete-table">
-      <Thead>
-        <Tr>
-          <Th>System</Th>
-          <Th />
-        </Tr>
-      </Thead>
-      <Tbody>
-        {systems
-          .filter((system) => dataFlowKeys.includes(system.fides_key))
-          .map((system) => (
-            <Tr
-              key={system.fides_key}
-              _hover={{ bg: "gray.50" }}
-              data-testid={`row-${system.fides_key}`}
-            >
-              <Td>
-                <Text fontSize="xs" lineHeight={4} fontWeight="medium">
-                  {system.name}
-                </Text>
-              </Td>
-              <Td textAlign="end">
-                <Button
-                  aria-label="Unassign data flow from system"
-                  icon={<Icons.TrashCan />}
-                  onClick={() => onDelete(system)}
-                  data-testid="unassign-btn"
-                />
-              </Td>
-            </Tr>
-          ))}
-      </Tbody>
-    </Table>
+    <Table
+      size="small"
+      dataSource={dataSource}
+      rowKey="fides_key"
+      pagination={false}
+      data-testid="assign-systems-delete-table"
+      columns={[
+        {
+          title: "System",
+          dataIndex: "name",
+          render: (name: string) => (
+            <Text className="text-xs font-medium leading-4">{name}</Text>
+          ),
+        },
+        {
+          title: "",
+          key: "actions",
+          align: "right" as const,
+          render: (_: unknown, system: System) => (
+            <Button
+              aria-label="Unassign data flow from system"
+              icon={<Icons.TrashCan />}
+              onClick={() => onDelete(system)}
+              data-testid="unassign-btn"
+            />
+          ),
+        },
+      ]}
+    />
   );
 };
diff --git a/clients/admin-ui/src/features/common/system-data-flow/DataFlowSystemsModal.tsx b/clients/admin-ui/src/features/common/system-data-flow/DataFlowSystemsModal.tsx
index 33a8bd9ab64..72f15de93eb 100644
--- a/clients/admin-ui/src/features/common/system-data-flow/DataFlowSystemsModal.tsx
+++ b/clients/admin-ui/src/features/common/system-data-flow/DataFlowSystemsModal.tsx
@@ -1,16 +1,4 @@
-import {
-  Button,
-  ChakraBox as Box,
-  ChakraFlex as Flex,
-  ChakraFormControl as FormControl,
-  ChakraFormLabel as FormLabel,
-  ChakraStack as Stack,
-  ChakraText as Text,
-  Modal,
-  Switch,
-  Tag,
-} from "fidesui";
-import { useFormikContext } from "formik";
+import { Button, Flex, Form, Modal, Switch, Tag, Text } from "fidesui";
 import { useMemo, useState } from "react";
 
 import { MODAL_SIZE } from "~/features/common/modals/modal-sizes";
@@ -40,7 +28,6 @@ const DataFlowSystemsModal = ({
   onDataFlowSystemChange,
   flowType,
 }: { isOpen: boolean; onClose: () => void } & Props) => {
-  const { setFieldValue } = useFormikContext();
   const [searchFilter, setSearchFilter] = useState("");
   const [selectedDataFlows, setSelectedDataFlows] =
     useState<DataFlow[]>(dataFlowSystems);
@@ -68,8 +55,6 @@ const DataFlowSystemsModal = ({
         fides_key: fs.fides_key,
         type: "system",
       }));
-
-      setFieldValue("dataFlowSystems", updatedDataFlows);
       setSelectedDataFlows(updatedDataFlows);
     } else {
       setSelectedDataFlows([]);
@@ -118,25 +103,19 @@ const DataFlowSystemsModal = ({
         {emptySystems ? (
           <Text>No systems found</Text>
         ) : (
-          <Stack spacing={4}>
-            <Flex justifyContent="space-between">
-              <Text fontSize="sm" flexGrow={1} fontWeight="medium">
+          <Flex vertical gap="large">
+            <Flex justify="space-between" align="center">
+              <Text className="flex-1 text-sm font-medium">
                 Add or remove destination systems from your data map
               </Text>
-              <Box>
-                <FormControl display="flex" alignItems="center">
-                  <FormLabel fontSize="sm" htmlFor="assign-all-systems" mb="0">
-                    Assign all systems
-                  </FormLabel>
-                  <Switch
-                    size="small"
-                    id="assign-all-systems"
-                    checked={allSystemsAssigned}
-                    onChange={handleToggleAllSystems}
-                    data-testid="assign-all-systems-toggle"
-                  />
-                </FormControl>
-              </Box>
+              <Form.Item label="Assign all systems" className="mb-0">
+                <Switch
+                  size="small"
+                  checked={allSystemsAssigned}
+                  onChange={handleToggleAllSystems}
+                  data-testid="assign-all-systems-toggle"
+                />
+              </Form.Item>
             </Flex>
             <SearchInput
               value={searchFilter}
@@ -150,7 +129,7 @@ const DataFlowSystemsModal = ({
               dataFlowSystems={selectedDataFlows}
               onChange={setSelectedDataFlows}
             />
-          </Stack>
+          </Flex>
         )}
       </div>
     </Modal>
diff --git a/clients/admin-ui/src/features/common/system-data-flow/DataFlowSystemsTable.tsx b/clients/admin-ui/src/features/common/system-data-flow/DataFlowSystemsTable.tsx
index a53f4abc00b..ce2b767c700 100644
--- a/clients/admin-ui/src/features/common/system-data-flow/DataFlowSystemsTable.tsx
+++ b/clients/admin-ui/src/features/common/system-data-flow/DataFlowSystemsTable.tsx
@@ -1,15 +1,4 @@
-import {
-  ChakraBox as Box,
-  ChakraTable as Table,
-  ChakraTbody as Tbody,
-  ChakraTd as Td,
-  ChakraText as Text,
-  ChakraTh as Th,
-  ChakraThead as Thead,
-  ChakraTr as Tr,
-  Switch,
-} from "fidesui";
-import { useFormikContext } from "formik";
+import { Switch, Table, Text } from "fidesui";
 import React from "react";
 
 import { DataFlow, System } from "~/types/api";
@@ -27,71 +16,60 @@ const DataFlowSystemsTable = ({
   onChange,
   flowType,
 }: Props) => {
-  const { setFieldValue } = useFormikContext();
   const handleToggle = (system: System) => {
     const isAssigned = !!dataFlowSystems.find(
       (assigned) => assigned.fides_key === system.fides_key,
     );
     if (isAssigned) {
-      const updatedDataFlows = dataFlowSystems.filter(
-        (assignedSystem) => assignedSystem.fides_key !== system.fides_key,
+      onChange(
+        dataFlowSystems.filter(
+          (assignedSystem) => assignedSystem.fides_key !== system.fides_key,
+        ),
       );
-      setFieldValue("dataFlowSystems", updatedDataFlows);
-      onChange(updatedDataFlows);
     } else {
-      const updatedDataFlows = [
+      onChange([
         ...dataFlowSystems,
         { fides_key: system.fides_key, type: "system" },
-      ];
-
-      setFieldValue("dataFlowSystems", updatedDataFlows);
-      onChange(updatedDataFlows);
+      ]);
     }
   };
 
   return (
-    <Box overflowY="auto" maxHeight="300px">
+    <div className="max-h-[300px] overflow-y-auto">
       <Table
-        size="sm"
+        size="small"
+        dataSource={allSystems}
+        rowKey="fides_key"
+        pagination={false}
         data-testid="assign-systems-table"
-        maxHeight="50vh"
-        overflowY="scroll"
-      >
-        <Thead position="sticky" top={0} background="white" zIndex={1}>
-          <Tr>
-            <Th>System</Th>
-            <Th textAlign="right">Set as {flowType}</Th>
-          </Tr>
-        </Thead>
-        <Tbody>
-          {allSystems.map((system) => {
-            const isAssigned = !!dataFlowSystems.find(
-              (assigned) => assigned.fides_key === system.fides_key,
-            );
-            return (
-              <Tr
-                key={system.fides_key}
-                _hover={{ bg: "gray.50" }}
-                data-testid={`row-${system.fides_key}`}
-              >
-                <Td>
-                  <Text fontSize="xs" lineHeight={4} fontWeight="medium">
-                    {system.name}
-                  </Text>
-                </Td>
-                <Td textAlign="right">
-                  <Switch
-                    checked={isAssigned}
-                    onChange={() => handleToggle(system)}
-                    data-testid="assign-switch"
-                  />
-                </Td>
-              </Tr>
-            );
-          })}
-        </Tbody>
-      </Table>
-    </Box>
+        columns={[
+          {
+            title: "System",
+            dataIndex: "name",
+            render: (name: string) => (
+              <Text className="text-xs font-medium leading-4">{name}</Text>
+            ),
+          },
+          {
+            title: `Set as ${flowType}`,
+            key: "toggle",
+            align: "right" as const,
+            render: (_: unknown, system: System) => {
+              const isAssigned = !!dataFlowSystems.find(
+                (assigned) => assigned.fides_key === system.fides_key,
+              );
+              return (
+                <Switch
+                  checked={isAssigned}
+                  onChange={() => handleToggle(system)}
+                  data-testid="assign-switch"
+                />
+              );
+            },
+          },
+        ]}
+      />
+    </div>
   );
 };