diff --git a/playwright/visual.test.ts-snapshots/Badge-Badge-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Badge-Badge-1-chromium-linux.png
index fade9188..74f258ab 100644
Binary files a/playwright/visual.test.ts-snapshots/Badge-Badge-1-chromium-linux.png and b/playwright/visual.test.ts-snapshots/Badge-Badge-1-chromium-linux.png differ
diff --git a/src/components/Badge/Badge.module.css b/src/components/Badge/Badge.module.css
index 73400639..36d4edea 100644
--- a/src/components/Badge/Badge.module.css
+++ b/src/components/Badge/Badge.module.css
@@ -20,16 +20,34 @@ limitations under the License.
   align-items: center;
   border-radius: 9999px; /* pill effect */
   padding: var(--cpd-space-1x) var(--cpd-space-3x);
-  background: var(--cpd-color-gray-400);
-  color: var(--cpd-color-text-secondary);
 }
 
-.badge[data-kind="success"] {
-  background: var(--cpd-color-green-400);
-  color: var(--cpd-color-green-900);
+.badge[data-kind="default"] {
+  border: 1px solid var(--cpd-color-alpha-gray-400);
+  color: var(--cpd-color-gray-1100);
 }
 
-.badge[data-kind="critical"] {
-  background: var(--cpd-color-red-400);
-  color: var(--cpd-color-red-900);
+.badge[data-kind="grey"] {
+  background: var(--cpd-color-alpha-gray-300);
+  color: var(--cpd-color-gray-1100);
+}
+
+.badge[data-kind="on-solid"] {
+  background: var(--cpd-color-alpha-gray-1200);
+  color: var(--cpd-color-text-on-solid-primary);
+}
+
+.badge[data-kind="blue"] {
+  background: var(--cpd-color-alpha-blue-300);
+  color: var(--cpd-color-blue-1100);
+}
+
+.badge[data-kind="green"] {
+  background: var(--cpd-color-alpha-green-300);
+  color: var(--cpd-color-green-1100);
+}
+
+.badge[data-kind="red"] {
+  background: var(--cpd-color-alpha-red-300);
+  color: var(--cpd-color-red-1100);
 }
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
index 77302058..67de8c24 100644
--- a/src/components/Badge/Badge.stories.tsx
+++ b/src/components/Badge/Badge.stories.tsx
@@ -27,13 +27,29 @@ export default {
 } as Meta<typeof BadgeComponent>;
 
 const Template: StoryFn<typeof BadgeComponent> = () => (
-  <>
-    <BadgeComponent kind="success">Trusted</BadgeComponent>
-    &nbsp;
-    <BadgeComponent kind="critical">Not trusted</BadgeComponent>
-    &nbsp;
-    <BadgeComponent kind="default">Public room</BadgeComponent>
-  </>
+  <div>
+    <div>
+      <BadgeComponent kind="green">Trusted</BadgeComponent>
+      &nbsp;
+      <BadgeComponent kind="red">Not trusted</BadgeComponent>
+      &nbsp;
+      <BadgeComponent kind="grey">Public room</BadgeComponent>
+    </div>
+    <br />
+    <div>
+      <BadgeComponent kind="default">Default</BadgeComponent>
+      &nbsp;
+      <BadgeComponent kind="grey">Grey</BadgeComponent>
+      &nbsp;
+      <BadgeComponent kind="on-solid">On Solid</BadgeComponent>
+      &nbsp;
+      <BadgeComponent kind="blue">Blue</BadgeComponent>
+      &nbsp;
+      <BadgeComponent kind="green">Green</BadgeComponent>
+      &nbsp;
+      <BadgeComponent kind="red">Red</BadgeComponent>
+    </div>
+  </div>
 );
 
 export const Badge = Template.bind({});
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index a2e8f5ba..6434a2c5 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -27,7 +27,7 @@ type BadgeProps = {
   /**
    * The type of badge.
    */
-  kind?: "default" | "success" | "critical";
+  kind?: "default" | "grey" | "on-solid" | "blue" | "green" | "red";
 };
 
 /**