diff --git a/packages/web-components/src/components/cbp-button/cbp-button.scss b/packages/web-components/src/components/cbp-button/cbp-button.scss
index fa2e7866..97843e5c 100644
--- a/packages/web-components/src/components/cbp-button/cbp-button.scss
+++ b/packages/web-components/src/components/cbp-button/cbp-button.scss
@@ -261,7 +261,7 @@ cbp-button {
       --cbp-button-color: var(--cbp-color-interactive-primary-dark);
       --cbp-button-color-bg-hover: var(--cbp-color-interactive-primary-dark);
       --cbp-button-color-border: var(--cbp-color-interactive-primary-dark);
-      --cbp-button-color-border-hover: var(--cbp-color-interactive-primary-darker);
+      --cbp-button-color-border-hover: var(--cbp-color-interactive-primary-dark);
 
       --cbp-button-color-dark: var(--cbp-color-interactive-primary-light);
       --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-primary-light);
@@ -278,7 +278,7 @@ cbp-button {
       --cbp-button-color-dark: var(--cbp-color-interactive-secondary-lighter);
       --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-secondary-lighter);
       --cbp-button-color-border-dark: var(--cbp-color-interactive-secondary-lighter);
-      --cbp-button-color-border-hover-dark: var(--cbp-color-interactive-secondary-darker);
+      --cbp-button-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);
     }
 
     &[color=tertiary] {
diff --git a/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.scss b/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.scss
index 1789fde6..50102606 100644
--- a/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.scss
+++ b/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.scss
@@ -54,5 +54,15 @@ cbp-segmented-button-group {
       --cbp-button-color-dark: var(--cbp-color-text-darkest);
       --cbp-button-color-bg-dark: var(--cbp-color-interactive-selected-light);
     }
+
+    
+    // Disabled
+    [disabled]  {
+      --cbp-button-color: var(--cbp-color-interactive-disabled-dark);
+      --cbp-button-color-bg: var(--cbp-color-interactive-disabled-light);
+
+      --cbp-button-color-dark: var(--cbp-color-interactive-disabled-dark);
+      --cbp-button-color-bg-dark: var(--cbp-color-interactive-disabled-light);
+    }
   }
 }
diff --git a/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx b/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx
index 24b58064..ca5f4de1 100644
--- a/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx
+++ b/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx
@@ -23,8 +23,8 @@ export default {
 };
 
 function generateButtons(buttons) {
-  const html = buttons.map(({ label, value, pressed, disabled }) => {
-    return `<cbp-button type="button" value="${value}" ${pressed == true ? 'pressed' : ''} ${disabled == true ? 'disabled' : ''}>${label}</cbp-button>`;
+  const html = buttons.map(({ label, value, pressed, disabled, variant }) => {
+    return `<cbp-button type="button" value="${value}" ${pressed == true ? 'pressed' : ''} ${disabled == true ? 'disabled' : ''} ${variant ? `variant=${variant}` : ''}">${label}</cbp-button>`;
   });
   return html.join('');
 }
@@ -65,3 +65,43 @@ SegmentedButtonGroup.args = {
     },
   ],
 };
+
+const IconTemplate = ({ buttons, multiple, accessibilityText, disabled, sx }) => {
+  return ` 
+        <cbp-segmented-button-group
+          ${multiple ? `multiple=${multiple}` : ''}
+          ${accessibilityText ? `accessibility-text=${accessibilityText}` : ''}
+          ${disabled ? `disabled=${disabled}` : ''}
+          ${sx ? `sx=${JSON.stringify(sx)}` : ''}
+        >
+          ${generateButtons(buttons)}
+        </cbp-segmented-button-group>
+      `;
+};
+
+export const SegmentedButtonGroupIcons = IconTemplate.bind({});
+SegmentedButtonGroupIcons.args = {
+  buttons: [
+    {
+      label: '<cbp-icon name="user"></cbp-icon>',
+      value: '1',
+      pressed: false,
+      disabled: false,
+      variant: "square"
+    },
+    {
+      label: '<cbp-icon name="pen-to-square"></cbp-icon>',
+      value: '2',
+      pressed: false,
+      disabled: false,
+      variant: "square"
+    },
+    {
+      label: '<cbp-icon name="filter"></cbp-icon>',
+      value: '3',
+      pressed: false,
+      disabled: false,
+      variant: "square"
+    },
+  ],
+};