diff --git a/src/components/pages/uniformity/UniformityTable.tsx b/src/components/pages/uniformity/UniformityTable.tsx
index 412caeb3..c1cc12c9 100644
--- a/src/components/pages/uniformity/UniformityTable.tsx
+++ b/src/components/pages/uniformity/UniformityTable.tsx
@@ -33,6 +33,108 @@ const isUniformityLocked = (uniformity: Uniformity): boolean => {
   return uniformity.status === 'APPROVED' || uniformity.status === 'REJECTED';
 };
 
+interface UniformityPreviewData {
+  id: string;
+  label: string;
+  value: string;
+}
+
+const UniformityConfirmationPreview = ({
+  tanggal = '28 Desember 2025',
+  lokasiFarm = 'Farm A',
+  projectFlock = 'Flock 2025-01',
+  kandang = 'Kandang 1',
+  fileName = 'uniformity_data.xlsx',
+  status = 'APPROVED',
+}: {
+  tanggal?: string;
+  lokasiFarm?: string;
+  projectFlock?: string;
+  kandang?: string;
+  fileName?: string;
+  status?: string;
+}) => {
+  const data: UniformityPreviewData[] = [
+    {
+      id: 'tanggal',
+      label: 'Tanggal',
+      value: tanggal,
+    },
+    {
+      id: 'lokasi-farm',
+      label: 'Lokasi Farm',
+      value: lokasiFarm,
+    },
+    {
+      id: 'project-flock',
+      label: 'Project Flock',
+      value: projectFlock,
+    },
+    {
+      id: 'kandang',
+      label: 'Kandang',
+      value: kandang,
+    },
+    {
+      id: 'file-uniformity',
+      label: 'File Uniformity',
+      value: fileName,
+    },
+    {
+      id: 'status',
+      label: 'Status',
+      value: status,
+    },
+  ];
+
+  const columns: ColumnDef<UniformityPreviewData>[] = [
+    {
+      accessorKey: 'label',
+      header: 'Label',
+      cell: (props) => props.row.original.label,
+    },
+    {
+      accessorKey: 'value',
+      header: 'Value',
+      cell: (props) => {
+        const id = props.row.original.id;
+        const value = props.row.original.value;
+
+        if (id === 'status') {
+          return (
+            <div className='w-full'>
+              <Badge
+                statusIndicator={true}
+                variant='soft'
+                className={{
+                  badge: `rounded-xl w-full justify-start border border-gray-200 text-black ${getStatusColor(value)}`,
+                  status: getStatusIndicatorColor(value),
+                }}
+              >
+                {getStatusText(value)}
+              </Badge>
+            </div>
+          );
+        }
+
+        return <span>{value}</span>;
+      },
+    },
+  ];
+
+  return (
+    <Table
+      data={data}
+      columns={columns}
+      pageSize={6}
+      className={{
+        containerClassName: 'mb-0',
+        paginationClassName: 'hidden',
+      }}
+    />
+  );
+};
+
 const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -475,57 +577,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           }}
         >
           <div className='flex flex-col gap-4 mt-4'>
-            <Table
-              data={[
-                {
-                  id: 'tanggal',
-                  label: 'Tanggal',
-                  value: '28 Desember 2025',
-                },
-                {
-                  id: 'lokasi-farm',
-                  label: 'Lokasi Farm',
-                  value: 'Farm A',
-                },
-                {
-                  id: 'project-flock',
-                  label: 'Project Flock',
-                  value: 'Flock 2025-01',
-                },
-                {
-                  id: 'kandang',
-                  label: 'Kandang',
-                  value: 'Kandang 1',
-                },
-                {
-                  id: 'file-uniformity',
-                  label: 'File Uniformity',
-                  value: 'uniformity_data.xlsx',
-                },
-                {
-                  id: 'status',
-                  label: 'Status',
-                  value: 'Disetujui',
-                },
-              ]}
-              columns={[
-                {
-                  accessorKey: 'label',
-                  header: 'Label',
-                  cell: (props) => props.row.original.label,
-                },
-                {
-                  accessorKey: 'value',
-                  header: 'Value',
-                  cell: (props) => <span>{props.row.original.value}</span>,
-                },
-              ]}
-              pageSize={6}
-              className={{
-                containerClassName: 'mb-0',
-                paginationClassName: 'hidden',
-              }}
-            />
+            <UniformityConfirmationPreview />
           </div>
         </ConfirmationModal>
 
@@ -549,57 +601,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           }}
         >
           <div className='flex flex-col gap-4 mt-4'>
-            <Table
-              data={[
-                {
-                  id: 'tanggal',
-                  label: 'Tanggal',
-                  value: '28 Desember 2025',
-                },
-                {
-                  id: 'lokasi-farm',
-                  label: 'Lokasi Farm',
-                  value: 'Farm A',
-                },
-                {
-                  id: 'project-flock',
-                  label: 'Project Flock',
-                  value: 'Flock 2025-01',
-                },
-                {
-                  id: 'kandang',
-                  label: 'Kandang',
-                  value: 'Kandang 1',
-                },
-                {
-                  id: 'file-uniformity',
-                  label: 'File Uniformity',
-                  value: 'uniformity_data.xlsx',
-                },
-                {
-                  id: 'status',
-                  label: 'Status',
-                  value: 'Disetujui',
-                },
-              ]}
-              columns={[
-                {
-                  accessorKey: 'label',
-                  header: 'Label',
-                  cell: (props) => props.row.original.label,
-                },
-                {
-                  accessorKey: 'value',
-                  header: 'Value',
-                  cell: (props) => <span>{props.row.original.value}</span>,
-                },
-              ]}
-              pageSize={6}
-              className={{
-                containerClassName: 'mb-0',
-                paginationClassName: 'hidden',
-              }}
-            />
+            <UniformityConfirmationPreview />
           </div>
         </ConfirmationModal>
 
@@ -623,57 +625,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           }}
         >
           <div className='flex flex-col gap-4 mt-4'>
-            <Table
-              data={[
-                {
-                  id: 'tanggal',
-                  label: 'Tanggal',
-                  value: '28 Desember 2025',
-                },
-                {
-                  id: 'lokasi-farm',
-                  label: 'Lokasi Farm',
-                  value: 'Farm A',
-                },
-                {
-                  id: 'project-flock',
-                  label: 'Project Flock',
-                  value: 'Flock 2025-01',
-                },
-                {
-                  id: 'kandang',
-                  label: 'Kandang',
-                  value: 'Kandang 1',
-                },
-                {
-                  id: 'file-uniformity',
-                  label: 'File Uniformity',
-                  value: 'uniformity_data.xlsx',
-                },
-                {
-                  id: 'status',
-                  label: 'Status',
-                  value: 'Disetujui',
-                },
-              ]}
-              columns={[
-                {
-                  accessorKey: 'label',
-                  header: 'Label',
-                  cell: (props) => props.row.original.label,
-                },
-                {
-                  accessorKey: 'value',
-                  header: 'Value',
-                  cell: (props) => <span>{props.row.original.value}</span>,
-                },
-              ]}
-              pageSize={6}
-              className={{
-                containerClassName: 'mb-0',
-                paginationClassName: 'hidden',
-              }}
-            />
+            <UniformityConfirmationPreview />
           </div>
         </ConfirmationModal>
 
@@ -697,57 +649,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           }}
         >
           <div className='flex flex-col gap-4 mt-4'>
-            <Table
-              data={[
-                {
-                  id: 'tanggal',
-                  label: 'Tanggal',
-                  value: '28 Desember 2025',
-                },
-                {
-                  id: 'lokasi-farm',
-                  label: 'Lokasi Farm',
-                  value: 'Farm A',
-                },
-                {
-                  id: 'project-flock',
-                  label: 'Project Flock',
-                  value: 'Flock 2025-01',
-                },
-                {
-                  id: 'kandang',
-                  label: 'Kandang',
-                  value: 'Kandang 1',
-                },
-                {
-                  id: 'file-uniformity',
-                  label: 'File Uniformity',
-                  value: 'uniformity_data.xlsx',
-                },
-                {
-                  id: 'status',
-                  label: 'Status',
-                  value: 'Disetujui',
-                },
-              ]}
-              columns={[
-                {
-                  accessorKey: 'label',
-                  header: 'Label',
-                  cell: (props) => props.row.original.label,
-                },
-                {
-                  accessorKey: 'value',
-                  header: 'Value',
-                  cell: (props) => <span>{props.row.original.value}</span>,
-                },
-              ]}
-              pageSize={6}
-              className={{
-                containerClassName: 'mb-0',
-                paginationClassName: 'hidden',
-              }}
-            />
+            <UniformityConfirmationPreview />
           </div>
         </ConfirmationModal>
 
@@ -771,57 +673,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           }}
         >
           <div className='flex flex-col gap-4 mt-4'>
-            <Table
-              data={[
-                {
-                  id: 'tanggal',
-                  label: 'Tanggal',
-                  value: '28 Desember 2025',
-                },
-                {
-                  id: 'lokasi-farm',
-                  label: 'Lokasi Farm',
-                  value: 'Farm A',
-                },
-                {
-                  id: 'project-flock',
-                  label: 'Project Flock',
-                  value: 'Flock 2025-01',
-                },
-                {
-                  id: 'kandang',
-                  label: 'Kandang',
-                  value: 'Kandang 1',
-                },
-                {
-                  id: 'file-uniformity',
-                  label: 'File Uniformity',
-                  value: 'uniformity_data.xlsx',
-                },
-                {
-                  id: 'status',
-                  label: 'Status',
-                  value: 'Disetujui',
-                },
-              ]}
-              columns={[
-                {
-                  accessorKey: 'label',
-                  header: 'Label',
-                  cell: (props) => props.row.original.label,
-                },
-                {
-                  accessorKey: 'value',
-                  header: 'Value',
-                  cell: (props) => <span>{props.row.original.value}</span>,
-                },
-              ]}
-              pageSize={6}
-              className={{
-                containerClassName: 'mb-0',
-                paginationClassName: 'hidden',
-              }}
-            />
+            <UniformityConfirmationPreview />
           </div>
         </ConfirmationModal>
 
@@ -845,57 +697,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           }}
         >
           <div className='flex flex-col gap-4 mt-4'>
-            <Table
-              data={[
-                {
-                  id: 'tanggal',
-                  label: 'Tanggal',
-                  value: '28 Desember 2025',
-                },
-                {
-                  id: 'lokasi-farm',
-                  label: 'Lokasi Farm',
-                  value: 'Farm A',
-                },
-                {
-                  id: 'project-flock',
-                  label: 'Project Flock',
-                  value: 'Flock 2025-01',
-                },
-                {
-                  id: 'kandang',
-                  label: 'Kandang',
-                  value: 'Kandang 1',
-                },
-                {
-                  id: 'file-uniformity',
-                  label: 'File Uniformity',
-                  value: 'uniformity_data.xlsx',
-                },
-                {
-                  id: 'status',
-                  label: 'Status',
-                  value: 'Disetujui',
-                },
-              ]}
-              columns={[
-                {
-                  accessorKey: 'label',
-                  header: 'Label',
-                  cell: (props) => props.row.original.label,
-                },
-                {
-                  accessorKey: 'value',
-                  header: 'Value',
-                  cell: (props) => <span>{props.row.original.value}</span>,
-                },
-              ]}
-              pageSize={6}
-              className={{
-                containerClassName: 'mb-0',
-                paginationClassName: 'hidden',
-              }}
-            />
+            <UniformityConfirmationPreview />
           </div>
         </ConfirmationModal>
 
@@ -918,57 +720,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           }}
         >
           <div className='flex flex-col gap-4 mt-4'>
-            <Table
-              data={[
-                {
-                  id: 'tanggal',
-                  label: 'Tanggal',
-                  value: '28 Desember 2025',
-                },
-                {
-                  id: 'lokasi-farm',
-                  label: 'Lokasi Farm',
-                  value: 'Farm A',
-                },
-                {
-                  id: 'project-flock',
-                  label: 'Project Flock',
-                  value: 'Flock 2025-01',
-                },
-                {
-                  id: 'kandang',
-                  label: 'Kandang',
-                  value: 'Kandang 1',
-                },
-                {
-                  id: 'file-uniformity',
-                  label: 'File Uniformity',
-                  value: 'uniformity_data.xlsx',
-                },
-                {
-                  id: 'status',
-                  label: 'Status',
-                  value: 'Disetujui',
-                },
-              ]}
-              columns={[
-                {
-                  accessorKey: 'label',
-                  header: 'Label',
-                  cell: (props) => props.row.original.label,
-                },
-                {
-                  accessorKey: 'value',
-                  header: 'Value',
-                  cell: (props) => <span>{props.row.original.value}</span>,
-                },
-              ]}
-              pageSize={6}
-              className={{
-                containerClassName: 'mb-0',
-                paginationClassName: 'hidden',
-              }}
-            />
+            <UniformityConfirmationPreview />
           </div>
         </ConfirmationModal>