diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap b/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap
index 6670002c8..2cd715480 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap
@@ -8,7 +8,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
       <span class=\\"mr-1\\">
         Starts
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge badge-primary\\">
         now
       </span>
     </span>
@@ -18,7 +18,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
       <span class=\\"mr-1\\">
         Ends
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge badge-primary\\">
         in 366d
       </span>
     </span>
@@ -28,7 +28,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
       <span class=\\"mr-1\\">
         Duration
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge badge-primary\\">
         366d
       </span>
     </span>
@@ -235,7 +235,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
       <span class=\\"mr-1\\">
         Starts
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge badge-primary\\">
         now
       </span>
     </span>
@@ -245,7 +245,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
       <span class=\\"mr-1\\">
         Ends
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge badge-primary\\">
         in 366d
       </span>
     </span>
@@ -255,7 +255,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
       <span class=\\"mr-1\\">
         Duration
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge badge-primary\\">
         366d
       </span>
     </span>
@@ -688,7 +688,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
       <span class=\\"mr-1\\">
         Starts
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge badge-primary\\">
         now
       </span>
     </span>
@@ -698,7 +698,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
       <span class=\\"mr-1\\">
         Ends
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge badge-primary\\">
         in 366d
       </span>
     </span>
@@ -708,7 +708,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
       <span class=\\"mr-1\\">
         Duration
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge badge-primary\\">
         366d
       </span>
     </span>
diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.js b/ui/src/Components/SilenceModal/DateTimeSelect/index.js
index a09a381c9..2049f0671 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/index.js
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/index.js
@@ -18,7 +18,7 @@ const OffsetBadge = ({ startDate, endDate, prefixLabel }) => {
   const minutes = endDate.diff(startDate, "minutes") % 60;
 
   return (
-    <span className="badge badge-light">
+    <span className="badge badge-primary">
       {days <= 0 && hours <= 0 && minutes <= 0 ? "now" : prefixLabel}
       {days > 0 ? `${days}d ` : null}
       {hours > 0 ? `${hours}h ` : null}