diff --git a/ui/components/DataTable/DataTable.tsx b/ui/components/DataTable/DataTable.tsx
index d8017a1667..b9eeb9f395 100644
--- a/ui/components/DataTable/DataTable.tsx
+++ b/ui/components/DataTable/DataTable.tsx
@@ -383,6 +383,13 @@ export const DataTable = styled(UnstyledDataTable)`
         : props.theme.colors.neutral10};
     transition: background 0.5s ease-in-out;
   }
+
+  .MuiTableCell-root {
+    border-color: ${(props) =>
+      props.theme.mode === ThemeTypes.Dark
+        ? props.theme.colors.primary30
+        : props.theme.colors.neutral20};
+  }
   table {
     margin-top: ${(props) => props.theme.spacing.small};
   }
diff --git a/ui/components/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap b/ui/components/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
index c2e8ac9712..211f22532f 100644
--- a/ui/components/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
+++ b/ui/components/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
@@ -291,6 +291,10 @@ exports[`DataTable snapshots renders 1`] = `
   transition: background 0.5s ease-in-out;
 }
 
+.c1 .MuiTableCell-root {
+  border-color: #d8d8d8;
+}
+
 .c1 table {
   margin-top: 12px;
 }
diff --git a/ui/lib/theme.ts b/ui/lib/theme.ts
index e7da3277c5..39b4fb9b86 100644
--- a/ui/lib/theme.ts
+++ b/ui/lib/theme.ts
@@ -64,6 +64,7 @@ export const theme = (mode: ThemeTypes = ThemeTypes.Light): DefaultTheme => {
         primaryLight10: "#98E0F7",
         primary10: "#00b3ec",
         primary20: "#006B8E",
+        primary30: "#556991",
         successLight: "#156034",
         successMedium: "#78CC9C",
         successOriginal: "#27AE60",
@@ -106,6 +107,7 @@ export const theme = (mode: ThemeTypes = ThemeTypes.Light): DefaultTheme => {
         primaryLight10: "#98E0F7",
         primary10: "#009CCC",
         primary20: "#006B8E",
+        primary30: "#556991",
         successLight: "#C9EBD7",
         successMedium: "#78CC9C",
         successOriginal: "#27AE60",
@@ -282,7 +284,7 @@ export const muiTheme = (colors, mode) =>
         root: {
           "&$disabled": {
             color:
-              mode === ThemeTypes.Dark ? colors.primary20 : colors.neutral20,
+              mode === ThemeTypes.Dark ? colors.primary30 : colors.neutral20,
           },
         },
         outlined: {
@@ -292,6 +294,12 @@ export const muiTheme = (colors, mode) =>
                 ? `1px solid ${colors.primary20}`
                 : `1px solid ${colors.neutral20}`,
           },
+          "&$outlinedPrimary": {
+            border:
+              mode === ThemeTypes.Dark
+                ? `1px solid ${colors.primary30}`
+                : `1px solid ${colors.neutral20}`,
+          },
         },
       },
       //disabled checkboxes in dark mode
diff --git a/ui/typedefs/styled.d.ts b/ui/typedefs/styled.d.ts
index cb64f925f6..012cc05a4c 100644
--- a/ui/typedefs/styled.d.ts
+++ b/ui/typedefs/styled.d.ts
@@ -9,6 +9,7 @@ export namespace colors {
   const primaryLight10: string;
   const primary10: string;
   const primary20: string;
+  const primary30: string;
   const alertLight: string;
   const alertOriginal: string;
   const alertMedium: string;