diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
index f1b578125..d3cb19a08 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<GroupFooter /> matches snapshot 1`] = `
 "
-<div class=\\"card-footer px-2 py-1\\">
+<div class=\\"card-footer bg-card-footer-default px-2 py-1\\">
   <div class=\\"mb-1\\">
     <div class
          style=\\"display: inline;\\"
@@ -145,7 +145,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
 
 exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
 "
-<div class=\\"card-footer px-2 py-1\\">
+<div class=\\"card-footer bg-card-footer-default px-2 py-1\\">
   <div class=\\"mb-1\\">
     <div class
          style=\\"display: inline;\\"
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.css b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.css
index a2dca88f6..d37986c21 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.css
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.css
@@ -6,3 +6,8 @@
 .components-grid-alertgrid-alertgroup-shared-silence > .card {
   background-color: inherit;
 }
+
+/* this is default card background color, can't access it as scss variable */
+.card-footer.bg-card-footer-default {
+  background-color: rgb(247, 247, 247);
+}
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.js
index c24feb89a..f9e6e82d3 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.js
@@ -30,7 +30,7 @@ const GroupFooter = observer(
       } = this.props;
 
       return (
-        <div className="card-footer px-2 py-1">
+        <div className="card-footer bg-card-footer-default px-2 py-1">
           <div className="mb-1">
             {group.shared.annotations
               .filter(a => a.isLink === false)
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
index 578f647a7..61c33bfc8 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
@@ -23,7 +23,6 @@ const GroupHeader = observer(
       }).isRequired,
       group: APIGroup.isRequired,
       silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired,
-      headerBackgroundClass: PropTypes.string.isRequired,
       themedCounters: PropTypes.bool.isRequired
     };
 
@@ -32,13 +31,12 @@ const GroupHeader = observer(
         collapseStore,
         group,
         silenceFormStore,
-        headerBackgroundClass,
         themedCounters
       } = this.props;
 
       return (
         <h5
-          className={`card-header ${headerBackgroundClass} mb-0 d-flex flex-row px-2 py-1 ${
+          className={`card-header mb-0 d-flex flex-row px-2 py-1 ${
             collapseStore.value ? "border-bottom-0" : ""
           }`}
         >
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
index dd27f11d7..581ad2621 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
@@ -14,7 +14,7 @@ import { APIGroup } from "Models/API";
 import { Settings } from "Stores/Settings";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { IsMobile } from "Common/Device";
-import { BackgroundClassMap, BorderClassMap } from "Common/Colors";
+import { BackgroundClassMap } from "Common/Colors";
 import { MountFade } from "Components/Animations/MountFade";
 import { TooltipWrapper } from "Components/TooltipWrapper";
 import { GroupHeader } from "./GroupHeader";
@@ -179,19 +179,14 @@ const AlertGroup = observer(
       }
 
       let themedCounters = true;
-      const groupClassesMap = {
-        background: "bg-light",
-        border: "border-light"
-      };
-
+      let cardBackgroundClass = "bg-light";
       if (settingsStore.alertGroupConfig.config.colorTitleBar) {
         const stateList = Object.entries(group.stateCount)
           .filter(([k, v]) => v !== 0)
           .map(([k, _]) => k);
         if (stateList.length === 1) {
           const state = stateList.pop();
-          groupClassesMap.background = BackgroundClassMap[state];
-          groupClassesMap.border = BorderClassMap[state];
+          cardBackgroundClass = BackgroundClassMap[state];
           themedCounters = false;
         }
       }
@@ -199,16 +194,15 @@ const AlertGroup = observer(
       return (
         <div className="components-grid-alertgrid-alertgroup p-1" style={style}>
           <MountFade in={true}>
-            <div className={`card ${groupClassesMap.border}`}>
+            <div className={`card ${cardBackgroundClass}`}>
               <GroupHeader
                 collapseStore={this.collapse}
                 group={group}
                 silenceFormStore={silenceFormStore}
-                headerBackgroundClass={groupClassesMap.background}
                 themedCounters={themedCounters}
               />
               {this.collapse.value ? null : (
-                <div className="card-body px-2 py-1">
+                <div className="card-body bg-white px-2 py-1">
                   <ul className="list-group">
                     {group.alerts
                       .slice(0, this.renderConfig.alertsToRender)
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
index b4cc83977..16ea8fb2c 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
@@ -275,15 +275,15 @@ describe("<AlertGroup /> renderConfig", () => {
   });
 });
 
-describe("<AlertGroup /> theme", () => {
-  it("renders bg-light border when colorTitleBar=false", () => {
+describe("<AlertGroup /> card theme", () => {
+  it("renders bg-light background when colorTitleBar=false", () => {
     settingsStore.alertGroupConfig.config.colorTitleBar = false;
     group.stateCount = { active: 5, suppressed: 0, unprocessed: 0 };
     const tree = MountedAlertGroup(jest.fn(), false);
-    expect(tree.find(".card").hasClass("border-light")).toBe(true);
-    expect(tree.find(".card").hasClass("border-danger")).toBe(false);
-    expect(tree.find(".card").hasClass("border-success")).toBe(false);
-    expect(tree.find(".card").hasClass("border-secondary")).toBe(false);
+    expect(tree.find(".card").hasClass("bg-light")).toBe(true);
+    expect(tree.find(".card").hasClass("bg-danger")).toBe(false);
+    expect(tree.find(".card").hasClass("bg-success")).toBe(false);
+    expect(tree.find(".card").hasClass("bg-secondary")).toBe(false);
   });
 
   it("renders themed titlebar when colorTitleBar=false", () => {
@@ -291,20 +291,16 @@ describe("<AlertGroup /> theme", () => {
     group.stateCount = { active: 5, suppressed: 0, unprocessed: 0 };
     const tree = MountedAlertGroup(jest.fn(), false);
     expect(tree.find("GroupHeader").props().themedCounters).toBe(true);
-    expect(tree.find(".card-header").hasClass("bg-light")).toBe(true);
-    expect(tree.find(".card-header").hasClass("bg-danger")).toBe(false);
-    expect(tree.find(".card-header").hasClass("bg-success")).toBe(false);
-    expect(tree.find(".card-header").hasClass("bg-secondary")).toBe(false);
   });
 
   it("renders bg-light border when colorTitleBar=true and there are multiple alert states", () => {
     settingsStore.alertGroupConfig.config.colorTitleBar = false;
     group.stateCount = { active: 5, suppressed: 0, unprocessed: 0 };
     const tree = MountedAlertGroup(jest.fn(), false);
-    expect(tree.find(".card").hasClass("border-light")).toBe(true);
-    expect(tree.find(".card").hasClass("border-danger")).toBe(false);
-    expect(tree.find(".card").hasClass("border-success")).toBe(false);
-    expect(tree.find(".card").hasClass("border-secondary")).toBe(false);
+    expect(tree.find(".card").hasClass("bg-light")).toBe(true);
+    expect(tree.find(".card").hasClass("bg-danger")).toBe(false);
+    expect(tree.find(".card").hasClass("bg-success")).toBe(false);
+    expect(tree.find(".card").hasClass("bg-secondary")).toBe(false);
   });
 
   it("renders themed titlebar when colorTitleBar=true and there are multiple alert states", () => {
@@ -312,20 +308,16 @@ describe("<AlertGroup /> theme", () => {
     group.stateCount = { active: 5, suppressed: 6, unprocessed: 7 };
     const tree = MountedAlertGroup(jest.fn(), false);
     expect(tree.find("GroupHeader").props().themedCounters).toBe(true);
-    expect(tree.find(".card-header").hasClass("bg-light")).toBe(true);
-    expect(tree.find(".card-header").hasClass("bg-danger")).toBe(false);
-    expect(tree.find(".card-header").hasClass("bg-success")).toBe(false);
-    expect(tree.find(".card-header").hasClass("bg-secondary")).toBe(false);
   });
 
-  it("renders state based border when colorTitleBar=true and there's only one alert state", () => {
+  it("renders state based background when colorTitleBar=true and there's only one alert state", () => {
     settingsStore.alertGroupConfig.config.colorTitleBar = true;
     group.stateCount = { active: 0, suppressed: 5, unprocessed: 0 };
     const tree = MountedAlertGroup(jest.fn(), false);
-    expect(tree.find(".card").hasClass("border-light")).toBe(false);
-    expect(tree.find(".card").hasClass("border-danger")).toBe(false);
-    expect(tree.find(".card").hasClass("border-success")).toBe(true);
-    expect(tree.find(".card").hasClass("border-secondary")).toBe(false);
+    expect(tree.find(".card").hasClass("bg-light")).toBe(false);
+    expect(tree.find(".card").hasClass("bg-danger")).toBe(false);
+    expect(tree.find(".card").hasClass("bg-success")).toBe(true);
+    expect(tree.find(".card").hasClass("bg-secondary")).toBe(false);
   });
 
   it("renders unthemed titlebar when colorTitleBar=true and there's only one alert state", () => {
@@ -333,9 +325,5 @@ describe("<AlertGroup /> theme", () => {
     group.stateCount = { active: 5, suppressed: 0, unprocessed: 0 };
     const tree = MountedAlertGroup(jest.fn(), false);
     expect(tree.find("GroupHeader").props().themedCounters).toBe(false);
-    expect(tree.find(".card-header").hasClass("bg-light")).toBe(false);
-    expect(tree.find(".card-header").hasClass("bg-danger")).toBe(true);
-    expect(tree.find(".card-header").hasClass("bg-success")).toBe(false);
-    expect(tree.find(".card-header").hasClass("bg-secondary")).toBe(false);
   });
 });