diff --git a/.changeset/old-weeks-pump.md b/.changeset/old-weeks-pump.md
new file mode 100644
index 000000000..7d329594e
--- /dev/null
+++ b/.changeset/old-weeks-pump.md
@@ -0,0 +1,21 @@
+---
+"@igloo-ui/form-group": major
+"@igloo-ui/icon-button": major
+"@igloo-ui/input": major
+"@igloo-ui/modal": major
+"@igloo-ui/pager": major
+"@igloo-ui/progress-bar": major
+"@igloo-ui/ellipsis": minor
+"@igloo-ui/filter": minor
+"@igloo-ui/helper-text": minor
+"@igloo-ui/hyperlink": minor
+"@igloo-ui/list": minor
+"@igloo-ui/metric": minor
+"@igloo-ui/option-button": minor
+"@igloo-ui/pie-chart": minor
+"@igloo-ui/popover": minor
+"@igloo-ui/provider": minor
+---
+
+Clean up non-Workleap rebranded styles for components E-P.
+All consumers should now be using the Workleap branded versions of the components. This will happen automatically, and consumers can stop setting `data-brand="workleap"` for these components.
diff --git a/packages/Ellipsis/src/Ellipsis.stories.tsx b/packages/Ellipsis/src/Ellipsis.stories.tsx
index 2cacad118..9bdea977e 100644
--- a/packages/Ellipsis/src/Ellipsis.stories.tsx
+++ b/packages/Ellipsis/src/Ellipsis.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import readme from '../README.md';
 
@@ -17,7 +17,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
   decorators: [
     (Story) => <span style={{ fontSize: '1.6rem' }}>{Story()}</span>,
diff --git a/packages/Filter/src/Filter.stories.tsx b/packages/Filter/src/Filter.stories.tsx
index b5e6d07c6..2f6706ca9 100644
--- a/packages/Filter/src/Filter.stories.tsx
+++ b/packages/Filter/src/Filter.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import Section from '@components/section';
 import readme from '../README.md';
@@ -15,7 +15,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
 } as Meta<typeof Filter>;
 
diff --git a/packages/Filter/src/filter.scss b/packages/Filter/src/filter.scss
index a50231c2b..860fc6322 100644
--- a/packages/Filter/src/filter.scss
+++ b/packages/Filter/src/filter.scss
@@ -6,49 +6,7 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-filter-background: #{tokens.$grey-200};
-        --ids-filter-border-color: transparent;
-        --ids-filter-border-radius: calc(#{tokens.$border-radius-md} * 4);
-        --ids-filter-color: #{tokens.$grey-600};
-        --ids-filter-font-family: #{tokens.$primary-font-family};
-        --ids-filter-font-size: #{tokens.$font-size-3};
-        --ids-filter-line-height: #{tokens.$line-height-xxl};
-        --ids-filter-padding: #{tokens.$space-2} #{tokens.$space-3};
-
-        /* Hover */
-        --ids-filter-background-hover: #{tokens.$grey-300};
-        --ids-filter-border-color-hover: transparent;
-        --ids-filter-color-hover:  #{tokens.$grey-600};
-
-        /* Pressed */
-        --ids-filter-background-pressed: #{tokens.$grey-300};
-        --ids-filter-border-color-pressed: transparent;
-        --ids-filter-color-pressed:  #{tokens.$grey-600};
-
-        /* Selected */
-        --ids-filter-background-selected: #{tokens.$grey-500};
-        --ids-filter-border-color-selected: transparent;
-        --ids-filter-color-selected: #{tokens.$samoyed};
-
-        /* Selected Hover */
-        --ids-filter-background-selected-hover: #{tokens.$grey-800};
-        --ids-filter-border-color-selected-hover: #{tokens.$grey-800};
-
-        /* Disabled */
-        --ids-filter-background-disabled: #{tokens.$grey-200};
-        --ids-filter-border-color-disabled: transparent;
-        --ids-filter-color-disabled: #{tokens.$grey-400};
-
-        /* Focus */
-
-        /* Needed to add a 0.1px blur to fix a bug where
-    chrome would have a lingering blue line when focusing in and out */
-        --ids-filter-focus: 0 0 0 .2rem #ffffff, 0 0 .01rem .35rem #0c46d0;
-    }
-
-    [data-brand="workleap"] {
-        /* Default */
+      /* Default */
         --ids-filter-background: var(--hop-neutral-surface-weak);
         --ids-filter-border-color: var(--hop-neutral-border);
         --ids-filter-border-radius: var(--hop-shape-pill);
diff --git a/packages/FormGroup/src/FormGroup.stories.tsx b/packages/FormGroup/src/FormGroup.stories.tsx
index b536bacd1..a7604c23b 100644
--- a/packages/FormGroup/src/FormGroup.stories.tsx
+++ b/packages/FormGroup/src/FormGroup.stories.tsx
@@ -5,7 +5,7 @@ import Textarea from '@igloo-ui/textarea';
 import React from 'react';
 
 import Section from '@components/section';
-import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 
 import readme from '../README.md';
 import FormGroup from './FormGroup';
@@ -18,7 +18,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
 } as Meta<typeof FormGroup>;
 
@@ -93,69 +94,63 @@ export const info = () => {
   );
 };
 
-export const OtherFormElements: StoryObj<typeof FormGroup> = {
-    parameters: {
-        brand: "workleap",
-        chromatic: { delay: 500 }
-    },
-    render: () => {
-        const smallOptionList = [
-            {
-            label: 'Text option',
-            value: 'text',
-            },
-            {
-            label: 'Disabled option',
-            value: 'disabled',
-            disabled: true,
-            },
-            {
-            label: 'Text option 3',
-            value: 'icon',
-            },
-        ];
-
-        const [hasSelectError, setHasSelectError] = React.useState(true);
-        const [hasTextareaError, setHasTextareaError] = React.useState(true);
-
-        const handleSelectOnChange = (option: OptionType | undefined): void => {
-            setHasSelectError(!option?.value);
-        };
-
-        const handleTextareaOnChange = (
-            event: React.ChangeEvent<HTMLTextAreaElement>
-        ): void => {
-            setHasTextareaError(!event?.target?.value);
-        };
-
-        return (
-            <Section column>
-            <FormGroup
-                label="Error Select"
-                message="You must select an option"
-                showMessage={hasSelectError}
+export const OtherFormElements = () => {
+    const smallOptionList = [
+        {
+        label: 'Text option',
+        value: 'text',
+        },
+        {
+        label: 'Disabled option',
+        value: 'disabled',
+        disabled: true,
+        },
+        {
+        label: 'Text option 3',
+        value: 'icon',
+        },
+    ];
+
+    const [hasSelectError, setHasSelectError] = React.useState(true);
+    const [hasTextareaError, setHasTextareaError] = React.useState(true);
+
+    const handleSelectOnChange = (option: OptionType | undefined): void => {
+        setHasSelectError(!option?.value);
+    };
+
+    const handleTextareaOnChange = (
+        event: React.ChangeEvent<HTMLTextAreaElement>
+    ): void => {
+        setHasTextareaError(!event?.target?.value);
+    };
+
+    return (
+        <Section column>
+        <FormGroup
+            label="Error Select"
+            message="You must select an option"
+            showMessage={hasSelectError}
+        >
+            <Select
+            options={smallOptionList}
+            error={hasSelectError}
+            onChange={handleSelectOnChange}
             >
-                <Select
-                options={smallOptionList}
-                error={hasSelectError}
-                onChange={handleSelectOnChange}
-                >
-                Error
-                </Select>
-            </FormGroup>
-
-            <FormGroup
-                label="Error Textarea"
-                message="You must enter text"
-                showMessage={hasTextareaError}
-            >
-                <Textarea
-                placeholder="Enter text here"
-                error={hasTextareaError}
-                onChange={handleTextareaOnChange}
-                />
-            </FormGroup>
-            </Section>
-        );
-    }
-}
+            Error
+            </Select>
+        </FormGroup>
+
+        <FormGroup
+            label="Error Textarea"
+            message="You must enter text"
+            showMessage={hasTextareaError}
+        >
+            <Textarea
+            placeholder="Enter text here"
+            error={hasTextareaError}
+            onChange={handleTextareaOnChange}
+            />
+        </FormGroup>
+        </Section>
+    );
+};
diff --git a/packages/FormGroup/src/form-group.scss b/packages/FormGroup/src/form-group.scss
index e34ddf296..9a1758748 100644
--- a/packages/FormGroup/src/form-group.scss
+++ b/packages/FormGroup/src/form-group.scss
@@ -3,20 +3,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-form-group-font-family: #{tokens.$primary-font-family};
-        --ids-form-group-font-size: #{tokens.$font-size-3};
-        --ids-form-group-line-height: #{tokens.$line-height-xxl};
-
-        /* Label */
-        --ids-form-group-label-color: #{tokens.$grey-600};
-        --ids-form-group-label-margin-bottom: #{tokens.$space-1};
-
-        /* Message */
-        --ids-form-group-message-margin-top: #{tokens.$space-1};
-    }
-
-    [data-brand="workleap"] {
         /* Default */
         --ids-form-group-font-family: var(--hop-heading-xs-font-family);
         --ids-form-group-font-size: var(--hop-heading-xs-font-size);
diff --git a/packages/HelperText/src/HelperText.stories.tsx b/packages/HelperText/src/HelperText.stories.tsx
index b8aaddefb..9965e0965 100644
--- a/packages/HelperText/src/HelperText.stories.tsx
+++ b/packages/HelperText/src/HelperText.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import readme from '../README.md';
 
@@ -14,7 +14,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
 } as Meta<typeof HelperText>;
 
diff --git a/packages/HelperText/src/helper-text.scss b/packages/HelperText/src/helper-text.scss
index a5ac74433..57a36f8c0 100644
--- a/packages/HelperText/src/helper-text.scss
+++ b/packages/HelperText/src/helper-text.scss
@@ -6,19 +6,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-helper-font-family: #{tokens.$primary-font-family};
-        --ids-helper-font-size: #{tokens.$font-size-3};
-        --ids-helper-font-weight: #{tokens.$font-weight-regular};
-        --ids-helper-line-height: #{tokens.$line-height-xxl};
-        --ids-helper-text: #{tokens.$grey-600};
-        --ids-helper-text-icon-margin: .1rem #{tokens.$space-1} 0 0;
-
-        /* Error */
-        --ids-helper-text-error: #{tokens.$coral-500};
-    }
-
-    [data-brand="workleap"] {
         --ids-helper-font-family: var(--hop-body-xs-font-family);
         --ids-helper-font-size: var(--hop-body-xs-font-size);
         --ids-helper-font-weight: var(--hop-body-xs-font-weight);
diff --git a/packages/Hyperlink/src/Hyperlink.stories.tsx b/packages/Hyperlink/src/Hyperlink.stories.tsx
index 98451d431..d765220ea 100644
--- a/packages/Hyperlink/src/Hyperlink.stories.tsx
+++ b/packages/Hyperlink/src/Hyperlink.stories.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 
+import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
 
 import readme from '../README.md';
 
-import Hyperlink from './Hyperlink';
 import Plus from '@igloo-ui/icons/dist/Plus';
+import Hyperlink from './Hyperlink';
 
 import Section from '@components/section';
 
@@ -26,6 +26,7 @@ export default {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
     },
+    brand: "workleap"
   },
   argTypes: {
     onClick: {
diff --git a/packages/Hyperlink/src/hyperlink.scss b/packages/Hyperlink/src/hyperlink.scss
index be0c76f8e..02cb6c339 100644
--- a/packages/Hyperlink/src/hyperlink.scss
+++ b/packages/Hyperlink/src/hyperlink.scss
@@ -6,35 +6,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-link-font-family: #{tokens.$primary-font-family};
-        --ids-link-font-size: #{tokens.$font-size-4};
-        --ids-link-font-size-small: #{tokens.$font-size-3};
-        --ids-link-font-size-xsmall: #{tokens.$font-size-2};
-        --ids-link-font-weight: #{tokens.$font-weight-medium};
-        --ids-link-icon-color: currentcolor;
-        --ids-link-icon-margin: #{tokens.$space-1};
-        --ids-link-icon-padding-top: 0.2rem;
-        --ids-link-focus: #{tokens.$focus};
-        --ids-link-border-radius: #{tokens.$border-radius-sm};
-
-        /* Primary */
-        --ids-link-text-primary: #{tokens.$electric-blue-500};
-        --ids-link-text-primary-hover: #{tokens.$electric-blue-600};
-        --ids-link-text-primary-pressed: #{tokens.$electric-blue-600};
-
-        /* Secondary */
-        --ids-link-text-secondary: #{tokens.$grey-600};
-        --ids-link-text-secondary-hover: #{tokens.$grey-700};
-        --ids-link-text-secondary-pressed: #{tokens.$grey-700};
-
-        /* Danger */
-        --ids-link-text-danger: #{tokens.$coral-500};
-        --ids-link-text-danger-hover: #{tokens.$coral-600};
-        --ids-link-text-danger-pressed: #{tokens.$coral-600};
-    }
-
-    [data-brand="workleap"] {
         /* Default */
         --ids-link-font-family: var(--hop-body-sm-medium-font-family);
         --ids-link-font-size: var(--hop-body-md-medium-font-size);
diff --git a/packages/IconButton/src/IconButton.stories.tsx b/packages/IconButton/src/IconButton.stories.tsx
index 23b99d06b..70292e8c3 100644
--- a/packages/IconButton/src/IconButton.stories.tsx
+++ b/packages/IconButton/src/IconButton.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import IconButton from './IconButton';
 
@@ -27,6 +27,7 @@ export default {
         'underline',
       ],
     },
+    brand: "workleap"
   },
   argTypes: {
     size: {
diff --git a/packages/IconButton/src/icon-button.scss b/packages/IconButton/src/icon-button.scss
index 48b0fab83..bbff1b645 100644
--- a/packages/IconButton/src/icon-button.scss
+++ b/packages/IconButton/src/icon-button.scss
@@ -6,51 +6,27 @@
 
 @layer igloo {
     :root {
-      /* Default */
-      --ids-icon-btn-height: #{tokens.$space-5};
-      --ids-icon-btn-width: #{tokens.$space-5};
-
-      /* XSmall */
-      --ids-icon-btn-height-xsmall: #{tokens.$space-3};
-      --ids-icon-btn-width-xsmall: #{tokens.$space-3};
-
-      /* Small */
-      --ids-icon-btn-height-small: #{tokens.$space-4};
-      --ids-icon-btn-width-small: #{tokens.$space-4};
-
-      /* Large */
-      --ids-icon-btn-height-large: #{tokens.$space-6};
-      --ids-icon-btn-width-large: #{tokens.$space-6};
-
-      /* Color */
-      --ids-btn-icon-text-ghost-secondary: #{tokens.$grey-600};
-      --ids-btn-icon-text-ghost-secondary-hover: #{tokens.$grey-800};
-      --ids-btn-icon-text-ghost-secondary-active: #{tokens.$electric-blue-500};
-      --ids-btn-icon-text-ghost-secondary-disabled: #{tokens.$grey-400};
-    }
-
-    [data-brand="workleap"] {
-      /* Default */
-      --ids-icon-btn-height: 2rem;
-      --ids-icon-btn-width: 2rem;
-
-      /* XSmall */
-      --ids-icon-btn-height-xsmall: 1rem;
-      --ids-icon-btn-width-xsmall: 1rem;
-
-      /* Small */
-      --ids-icon-btn-height-small: 1.5rem;
-      --ids-icon-btn-width-small: 1.5rem;
-
-      /* Large */
-      --ids-icon-btn-height-large: 2.5rem;
-      --ids-icon-btn-width-large: 2.5rem;
-
-      /* Color */
-      --ids-btn-icon-text-ghost-secondary: var(--hop-neutral-icon-weak);
-      --ids-btn-icon-text-ghost-secondary-hover: var(--hop-neutral-icon-weak-hover);
-      --ids-btn-icon-text-ghost-secondary-active: var(--hop-neutral-icon);
-      --ids-btn-icon-text-ghost-secondary-disabled: var(--hop-neutral-icon-disabled);
+        /* Default */
+        --ids-icon-btn-height: 2rem;
+        --ids-icon-btn-width: 2rem;
+
+        /* XSmall */
+        --ids-icon-btn-height-xsmall: 1rem;
+        --ids-icon-btn-width-xsmall: 1rem;
+
+        /* Small */
+        --ids-icon-btn-height-small: 1.5rem;
+        --ids-icon-btn-width-small: 1.5rem;
+
+        /* Large */
+        --ids-icon-btn-height-large: 2.5rem;
+        --ids-icon-btn-width-large: 2.5rem;
+
+        /* Color */
+        --ids-btn-icon-text-ghost-secondary: var(--hop-neutral-icon-weak);
+        --ids-btn-icon-text-ghost-secondary-hover: var(--hop-neutral-icon-weak-hover);
+        --ids-btn-icon-text-ghost-secondary-active: var(--hop-neutral-icon);
+        --ids-btn-icon-text-ghost-secondary-disabled: var(--hop-neutral-icon-disabled);
     }
 
     .ids-icon-btn {
diff --git a/packages/Input/src/Input.stories.tsx b/packages/Input/src/Input.stories.tsx
index f9bf9061a..18d741e08 100644
--- a/packages/Input/src/Input.stories.tsx
+++ b/packages/Input/src/Input.stories.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { Meta } from '@storybook/react';
-import Search from '@igloo-ui/icons/dist/Search';
 import Percentage from '@igloo-ui/icons/dist/Percentage';
+import Search from '@igloo-ui/icons/dist/Search';
+import { Meta } from '@storybook/react';
 
 import Input from './Input';
 
@@ -17,7 +17,8 @@ export default {
             description: {
                 component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
             }
-        }
+        },
+        brand: "workleap"
     },
     argTypes: {
         value: {
diff --git a/packages/Input/src/input.scss b/packages/Input/src/input.scss
index 6071f2904..b27cd9e3d 100644
--- a/packages/Input/src/input.scss
+++ b/packages/Input/src/input.scss
@@ -6,69 +6,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-input-height: #{tokens.$space-6};
-        --ids-input-font-family: #{tokens.$primary-font-family};
-        --ids-input-font-weight: #{tokens.$font-weight-regular};
-        --ids-input-padding: #{tokens.$space-3};
-        --ids-input-font-size: #{tokens.$font-size-4};
-        --ids-input-line-height: #{tokens.$space-4};
-        --ids-input-border-radius: #{tokens.$border-radius-sm};
-        --ids-input-border-color: #{tokens.$grey-300};
-        --ids-input-border-size: .1rem;
-        --ids-input-background: #{tokens.$samoyed};
-        --ids-input-margin: #{tokens.$space-0};
-
-        /* Compact */
-        --ids-input-height-compact: #{tokens.$space-5};
-        --ids-input-font-size-compact: #{tokens.$font-size-3};
-        --ids-input-line-height-compact: #{tokens.$line-height-xxl};
-        --ids-input-letter-spacing-compact: #{tokens.$font-weight-regular};
-
-        /* with icon */
-        --ids-input-color-icon: #{tokens.$grey-500};
-
-        /* with prefix icon */
-        --ids-input-width-prefix: #{tokens.$space-7};
-        --ids-input-width-prefix-compact: #{tokens.$space-6};
-        --ids-input-padding-prefix: #{tokens.$space-2} #{tokens.$space-2} #{tokens.$space-2} #{tokens.$space-3};
-
-        /* with suffix icon */
-        --ids-input-width-suffix: #{tokens.$space-7};
-        --ids-input-width-suffix-compact: #{tokens.$space-6};
-        --ids-input-padding-suffix: #{tokens.$space-2} #{tokens.$space-3} #{tokens.$space-2} #{tokens.$space-2};
-
-        /* With character indicator */
-        --ids-input-padding-character-indicator: #{tokens.$space-1} #{tokens.$space-3} #{tokens.$space-1} #{tokens.$space-2};
-        --ids-input-width-character-indicator: #{tokens.$space-6};
-        --ids-input-font-size-character-indicator: #{tokens.$font-size-2};
-        --ids-input-min-width-character-indicator: #{tokens.$space-4};
-        --ids-input-width-character-indicator-suffix: #{tokens.$space-9};
-        --ids-input-width-character-indicator-suffix-compact: #{tokens.$space-8};
-        --ids-input-character-indicator-color: #{tokens.$grey-400};
-
-        /* Placeholder */
-        --ids-input-color-placeholder: #{tokens.$grey-400};
-
-        /* Hover */
-        --ids-input-border-color-hover: #{tokens.$grey-600};
-
-        /* Focus */
-        --ids-input-border-color-focus: #{tokens.$electric-blue-500};
-
-        /* Active */
-        --ids-input-border-color-active: #{tokens.$electric-blue-500};
-
-        /* disabled */
-        --ids-input-color-disabled: #{tokens.$grey-500};
-        --ids-input-background-disabled: #{tokens.$grey-250};
-        --ids-input-border-color-disabled: #{tokens.$grey-250};
-
-        /* Error */
-        --ids-input-border-color-error: #{tokens.$coral-500};
-    }
-
-    [data-brand="workleap"] {
         /* Default */
         --ids-input-height: 2.5rem;
         --ids-input-font-family: var(--hop-body-md-font-family);
diff --git a/packages/List/src/List.stories.tsx b/packages/List/src/List.stories.tsx
index 4cda718cf..3e858b210 100644
--- a/packages/List/src/List.stories.tsx
+++ b/packages/List/src/List.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 
 import Button from '@igloo-ui/button';
 import Reminder from '@igloo-ui/icons/dist/Reminder';
@@ -19,7 +19,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
 } as Meta<typeof List>;
 
@@ -384,34 +385,30 @@ export const TextIconAndHelperText = () => {
   );
 };
 
-export const Action: StoryObj<typeof List> = {
-    parameters: {
-        brand: "workleap"
-    },
-    render: () => {
-        const [selectedOption, setSelectedOption] = React.useState<OptionType | null>();
-        const [focusedOption, setFocusedOption] = React.useState<OptionType | null>();
-
-        function handleOptionSelect(option: OptionType) {
-            setSelectedOption(option);
-        }
-
-        function handleOptionFocus(option: OptionType) {
-            setFocusedOption(option);
-        }
-
-        return (
-            <List options={listWithAction}
-            onOptionChange={handleOptionSelect}
-            onOptionFocus={handleOptionFocus}
-            onOptionBlur={() => setFocusedOption(undefined)}
-            selectedOption={selectedOption}
-            focusedOption={focusedOption}
-            style={{ maxWidth: '40rem' }} />
-        );
+export const Action = () => {
+    const [selectedOption, setSelectedOption] = React.useState<OptionType | null>();
+    const [focusedOption, setFocusedOption] = React.useState<OptionType | null>();
+
+    function handleOptionSelect(option: OptionType) {
+        setSelectedOption(option);
     }
+
+    function handleOptionFocus(option: OptionType) {
+        setFocusedOption(option);
+    }
+
+    return (
+        <List options={listWithAction}
+        onOptionChange={handleOptionSelect}
+        onOptionFocus={handleOptionFocus}
+        onOptionBlur={() => setFocusedOption(undefined)}
+        selectedOption={selectedOption}
+        focusedOption={focusedOption}
+        style={{ maxWidth: '40rem' }} />
+    );
 };
 
+
 export const Loading = () => {
   return (
     <List loading style={{ maxWidth: '40rem' }} isCompact={false} />
diff --git a/packages/List/src/ListItem.tsx b/packages/List/src/ListItem.tsx
index 587691462..bb9ad2c0e 100644
--- a/packages/List/src/ListItem.tsx
+++ b/packages/List/src/ListItem.tsx
@@ -1,11 +1,10 @@
-import * as React from "react";
 import cx from "classnames";
+import * as React from "react";
 
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { VisualIdentifier, type Size } from "@shared/components";
-import UserSolid from "@igloo-ui/icons/dist/UserSolid";
-import Checkmark from "@igloo-ui/icons/dist/Checkmark";
 import { UserIcon } from "@hopper-ui/icons-react16";
+import Checkmark from "@igloo-ui/icons/dist/Checkmark";
+import { VisualIdentifier, type Size } from "@shared/components";
 
 import "./list-item.scss";
 
@@ -78,10 +77,6 @@ export interface ListItemProps extends React.ComponentProps<"li"> {
     useCheckbox?: boolean;
 }
 
-const getBrand = (): string => {
-    return document.documentElement.getAttribute("data-brand") ?? "igloo";
-};
-
 const ListItem: React.FunctionComponent<ListItemProps> = ({
     className,
     disableTabbing = false,
@@ -98,7 +93,6 @@ const ListItem: React.FunctionComponent<ListItemProps> = ({
     useCheckbox,
     ...rest
 }: ListItemProps) => {
-    const isWorkleap = getBrand() === "workleap";
     const noDescription = option?.type === "list" ? !option?.description : !option?.role;
 
     const isOptionDisabled = (): boolean => {
@@ -194,11 +188,7 @@ const ListItem: React.FunctionComponent<ListItemProps> = ({
         <>
             <span className="ids-list-item__text-member">
                 {option?.member}
-                {option?.manager && (
-                    isWorkleap ?
-                        <UserIcon size="sm" className="ids-list-item__manager" /> :
-                        <UserSolid size="small" className="ids-list-item__manager" />
-                )}
+                {option?.manager && (<UserIcon size="sm" className="ids-list-item__manager" />)}
             </span>
             {option?.role && (
                 <span className="ids-list-item__text-role">{option.role}</span>
diff --git a/packages/List/src/list-item.scss b/packages/List/src/list-item.scss
index 636f11a8e..b7d7bb08e 100644
--- a/packages/List/src/list-item.scss
+++ b/packages/List/src/list-item.scss
@@ -6,90 +6,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-list-item-padding: #{tokens.$space-2} #{tokens.$space-3};
-        --ids-list-item-min-height: 5.6rem;
-        --ids-list-item-action-margin: #{tokens.$space-3};
-        --ids-list-item-border-radius: 0;
-
-        /* Compact */
-        --ids-list-item-padding-compact: #{tokens.$space-2} #{tokens.$space-3};
-        --ids-list-item-min-height-compact: #{tokens.$space-5};
-
-        /* Member */
-        --ids-list-item-padding-member: #{tokens.$space-2};
-        --ids-list-item-min-height-member: 5rem;
-
-        /* Focused */
-        --ids-list-item-background-focused: #{tokens.$electric-blue-50};
-        --ids-list-item-color-focused: #{tokens.$grey-800};
-
-        /* Selected */
-        --ids-list-item-background-selected: #{tokens.$electric-blue-50};
-        --ids-list-item-background-selected-multi: none;
-        --ids-list-item-font-weight-selected: #{tokens.$font-weight-regular};
-        --ids-list-item-check-display: none;
-
-        /* Disabled */
-        --ids-list-item-color-disabled: #{tokens.$grey-600};
-        --ids-list-item-icon-color-disabled: #{tokens.$grey-600};
-
-        /* Visual Identifier */
-        --ids-list-item-icon-size: #{tokens.$space-4};
-        --ids-list-item-icon-size-compact: #{tokens.$space-3};
-        --ids-list-item-icon-margin: 0.25rem #{tokens.$space-2} 0.25rem 0;
-        --ids-list-item-svg-margin: 0 #{tokens.$space-2} 0 0;
-        --ids-list-item-svg-color: #{tokens.$grey-600};
-        --ids-list-item-icon-member-size: #{tokens.$space-5};
-
-        /* Manager */
-        --ids-list-item-manager-color: #{tokens.$grey-500};
-        --ids-list-item-manager-margin: 0 0 0 #{tokens.$space-2};
-
-        /* Checkbox */
-        --ids-list-item-checkbox-size: #{tokens.$font-size-3};
-        --ids-list-item-checkbox-radius: #{tokens.$border-radius-sm};
-        --ids-list-item-checkbox-check: #{tokens.$samoyed};
-        --ids-list-item-checkbox-margin: 0.25rem #{tokens.$space-2} 0.25rem 0;
-        --ids-list-item-checkbox-box-sizing: content-box;
-        --ids-list-item-checkbox-background: #{tokens.$samoyed};
-        --ids-list-item-checkbox-background-hover: #{tokens.$samoyed};
-        --ids-list-item-checkbox-background-pressed: #{tokens.$samoyed};
-        --ids-list-item-checkbox-background-disabled: #{tokens.$grey-200};
-        --ids-list-item-checkbox-background-checked: #{tokens.$electric-blue-500};
-        --ids-list-item-checkbox-border-checked-hover: #{tokens.$electric-blue-500};
-        --ids-list-item-checkbox-background-checked-disabled: #{tokens.$grey-400};
-        --ids-list-item-checkbox-border: #{tokens.$grey-400};
-        --ids-list-item-checkbox-border-hover: #{tokens.$grey-800};
-        --ids-list-item-checkbox-border-checked: #{tokens.$electric-blue-500};
-        --ids-list-item-checkbox-border-disabled: #{tokens.$grey-400};
-        --ids-list-item-checkbox-one-px: 0.1rem;
-        --ids-list-item-checkbox-check-color-disabled: #{tokens.$grey-600};
-        --ids-list-item-checkbox-check-size: #{tokens.$font-size-3};
-        --ids-list-item-checkbox-check-color-hover: transparent;
-        --ids-list-item-checkbox-check-color-selected: #{tokens.$samoyed};
-        --ids-list-item-checkbox-check-color-default: transparent;
-
-        /* Description */
-        --ids-list-item-desc-color: #{tokens.$grey-600};
-        --ids-list-item-desc-font-size: #{tokens.$font-size-2};
-        --ids-list-item-desc-line-height: #{tokens.$line-height-xl};
-        --ids-list-item-desc-margin: #{tokens.$space-1} 0 0;
-
-        /* Member Name */
-        --ids-list-item-member-color: #{tokens.$grey-600};
-        --ids-list-item-member-font-weight: #{tokens.$font-weight-semi-bold};
-
-        /* Loading */
-        --ids-list-item-loading-thumbnail-border-radius: #{tokens.$border-radius-sm};
-        --ids-list-item-loading-thumbnail-margin: 0 #{tokens.$space-3} 0 0;
-        --ids-list-item-loading-text-border-radius: 4.5rem;
-        --ids-list-item-loading-text-height: #{tokens.$space-2};
-        --ids-list-item-loading-text-width: 60%;
-        --ids-list-item-loading-color: #{tokens.$grey-200};
-    }
-
-    [data-brand="workleap"] {
         /* Default */
         --ids-list-item-padding: var(--hop-space-inset-squish-md);
         --ids-list-item-min-height: 3.5rem;
diff --git a/packages/List/src/list.scss b/packages/List/src/list.scss
index 7bce6d7ff..c6068cd21 100644
--- a/packages/List/src/list.scss
+++ b/packages/List/src/list.scss
@@ -9,18 +9,7 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-list-font-family: #{tokens.$primary-font-family};
-        --ids-list-font-size: #{tokens.$font-size-3};
-        --ids-list-font-weight: #{tokens.$font-weight-regular};
-        --ids-list-color: #{tokens.$grey-800};
-        --ids-list-line-height: #{tokens.$line-height-xxl};
-        --ids-list-min-width: 20rem;
-        --ids-list-padding: #{tokens.$space-2} 0;
-    }
-
-    [data-brand="workleap"] {
-        /* Default */
+         /* Default */
         --ids-list-font-family: var(--hop-body-sm-font-family);
         --ids-list-font-size: var(--hop-body-sm-font-size);
         --ids-list-font-weight: var(--hop-body-sm-font-weight);
diff --git a/packages/Metric/src/Metric.stories.tsx b/packages/Metric/src/Metric.stories.tsx
index c0006c122..b89d4158d 100644
--- a/packages/Metric/src/Metric.stories.tsx
+++ b/packages/Metric/src/Metric.stories.tsx
@@ -3,10 +3,9 @@ import React from 'react';
   import { Meta, StoryObj } from '@storybook/react';
 
   import Wellness from '@igloo-ui/icons/dist/Wellness';
-  import WellnessSolid from '@igloo-ui/icons/dist/WellnessSolid';
 
   import Section from '@components/section';
-  import readme from '../README.md';
+import readme from '../README.md';
 
   import Metric from './Metric';
 
@@ -16,15 +15,16 @@ import React from 'react';
     parameters: {
       docs: {
         description: {
-          component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
-        }
-      }
+            component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
+            }
+        },
+        brand: "workleap"
     },
-    argTypes: {        
+    argTypes: {
       icon: { control: { type: null } },
     }
   } as Meta<typeof Metric>;
-  
+
   type Story = StoryObj<typeof Metric>;
 
   export const Overview: Story = {
@@ -89,8 +89,7 @@ import React from 'react';
   };
 
   export const Score: Story = {
-    render: (_args, {globals: {brand}}) => {
-      return (
+    render: () => (
         <Section>
           <Metric
             value={20}
@@ -113,12 +112,11 @@ import React from 'react';
             variation={3}
             label="Selected"
             appearance="selected"
-            icon={brand === "workleap" ? <Wellness size="medium" /> : <WellnessSolid size="medium" />}
+            icon={<Wellness size="medium" />}
             type="score"
           />
         </Section>
-      );
-    },
+      )
   };
 
   export const SubMetric: Story = {
diff --git a/packages/Metric/src/Metric.tsx b/packages/Metric/src/Metric.tsx
index 1e981c36a..c5bd8833c 100644
--- a/packages/Metric/src/Metric.tsx
+++ b/packages/Metric/src/Metric.tsx
@@ -1,8 +1,7 @@
-import * as React from "react";
 import cx from "classnames";
-import { useButton, type AriaButtonProps, FocusRing } from "react-aria";
+import * as React from "react";
+import { FocusRing, useButton, type AriaButtonProps } from "react-aria";
 
-import HelpSolid from "@igloo-ui/icons/dist/HelpSolid";
 import Alignment from "@igloo-ui/icons/dist/Alignment";
 import Checkmark from "@igloo-ui/icons/dist/Checkmark";
 
@@ -51,12 +50,6 @@ const Metric: React.FunctionComponent<MetricProps> = ({
 }: MetricProps) => {
     const btnRef = React.useRef<HTMLButtonElement>(null);
 
-    const getBrand = (): string => {
-        return document.documentElement.getAttribute("data-brand") ?? "igloo";
-    };
-
-    const isWorkleap = getBrand() === "workleap";
-
     const { buttonProps } = useButton(rest, btnRef);
 
     const classes = cx("ids-metric", className, {
@@ -109,8 +102,7 @@ const Metric: React.FunctionComponent<MetricProps> = ({
                     >
                         {tooltip && appearance !== "selected" && (
                             <Tooltip content={tooltip}>
-                                {isWorkleap ? (
-                                    <QuestionIcon size="sm" />) : <HelpSolid size="small" />}
+                                <QuestionIcon size="sm" />
                             </Tooltip>
                         )}
                         {type !== "subMetric" && appearance === "selected" && (
diff --git a/packages/Metric/src/Score.tsx b/packages/Metric/src/Score.tsx
index 0455ab20c..43c888523 100644
--- a/packages/Metric/src/Score.tsx
+++ b/packages/Metric/src/Score.tsx
@@ -1,11 +1,9 @@
-import * as React from "react";
 import cx from "classnames";
+import * as React from "react";
 
-import ArrowUp from "@igloo-ui/icons/dist/ArrowUp";
-import ArrowDown from "@igloo-ui/icons/dist/ArrowDown";
-import { ArrowUpIcon, ArrowDownIcon } from "@hopper-ui/icons-react16";
+import { ArrowDownIcon, ArrowUpIcon } from "@hopper-ui/icons-react16";
 
-import { useLocalizedStringFormatter, useLocale } from "@igloo-ui/provider";
+import { useLocale, useLocalizedStringFormatter } from "@igloo-ui/provider";
 import intlMessages from "./intl";
 
 import "./score.scss";
@@ -33,10 +31,6 @@ const sizeMap = {
     large: "lg"
 } as const;
 
-const getBrand = (): string => {
-    return document.documentElement.getAttribute("data-brand") ?? "igloo";
-};
-
 const Score: React.FunctionComponent<ScoreProps> = ({
     arrowSize = "small",
     className,
@@ -49,8 +43,6 @@ const Score: React.FunctionComponent<ScoreProps> = ({
     const stringFormatter = useLocalizedStringFormatter(intlMessages);
     const { locale } = useLocale();
 
-    const isWorkleap = getBrand() === "workleap";
-
     const arrowPositiveClass = cx("ids-score__arrow", "ids-score__arrow--positive", {
         "ids-score__arrow--selected": isSelected
     });
@@ -59,14 +51,6 @@ const Score: React.FunctionComponent<ScoreProps> = ({
         "ids-score__arrow--selected": isSelected
     });
 
-    const ArrowUpIconElement = isWorkleap ?
-        <ArrowUpIcon className={arrowPositiveClass} size={sizeMap[arrowSize]} /> :
-        <ArrowUp className={arrowPositiveClass} size={arrowSize} />;
-
-    const ArrowDownIconElement = isWorkleap ?
-        <ArrowDownIcon className={arrowNegativeClass} size={sizeMap[arrowSize]} /> :
-        <ArrowDown className={arrowNegativeClass} size={arrowSize} />;
-
     if (!isVariation && (value === undefined || value === null)) {
         return <span
             className={cx("ids-score", className, {
@@ -86,9 +70,9 @@ const Score: React.FunctionComponent<ScoreProps> = ({
     }
 
     const arrow = isNegative ? (
-        ArrowDownIconElement
+        <ArrowDownIcon className={arrowNegativeClass} size={sizeMap[arrowSize]} />
     ) : (
-        ArrowUpIconElement
+        <ArrowUpIcon className={arrowPositiveClass} size={sizeMap[arrowSize]} />
     );
 
     let postFix = absoluteValue === 1 ?
diff --git a/packages/Metric/src/__snapshots__/Metric.test.tsx.snap b/packages/Metric/src/__snapshots__/Metric.test.tsx.snap
index 136b0475c..7f82d66a0 100644
--- a/packages/Metric/src/__snapshots__/Metric.test.tsx.snap
+++ b/packages/Metric/src/__snapshots__/Metric.test.tsx.snap
@@ -30,19 +30,17 @@ exports[`Metric should render a snapshot 1`] = `
           class="ids-score ids-metric__score ids-score--variation"
         >
           <svg
-            class="ids-icon ids-score__arrow ids-score__arrow--positive"
-            fill="none"
+            aria-hidden="true"
+            class="Icon-module__hop-Icon___QR-jY ids-score__arrow ids-score__arrow--positive"
+            focusable="false"
             height="16"
+            role="img"
             viewBox="0 0 16 16"
             width="16"
-            xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M8 12V5.333M5 7l2.764-2.764c.13-.13.342-.13.472 0L11 7"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
+              d="M7.468 1.229 2.363 6.333a.75.75 0 0 0 1.061 1.061l3.832-3.832v10.696a.75.75 0 0 0 1.5 0V3.562l3.832 3.832a.75.75 0 0 0 1.06-1.06L8.538 1.22a.75.75 0 0 0-1.069.008"
+              fill-rule="evenodd"
             />
           </svg>
           1
@@ -68,17 +66,16 @@ exports[`Metric should render a snapshot 1`] = `
         tabindex="0"
       >
         <svg
-          class="ids-icon"
-          fill="none"
+          aria-hidden="true"
+          class="Icon-module__hop-Icon___QR-jY"
+          focusable="false"
           height="16"
+          role="img"
           viewBox="0 0 16 16"
           width="16"
-          xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            clip-rule="evenodd"
-            d="M14 8A6 6 0 1 1 2 8a6 6 0 0 1 12 0ZM8 5.5a.75.75 0 0 0-.75.75.75.75 0 0 1-1.5 0 2.25 2.25 0 1 1 3 2.122V9a.75.75 0 0 1-1.5 0v-.75c0-.726.578-1.146.996-1.29A.75.75 0 0 0 8 5.5Zm0 6.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
-            fill="currentColor"
+            d="M8 13.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m.75-3.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0M7.111 6.156a.889.889 0 1 1 1.156.848c-.441.139-1.017.565-1.017 1.29v.866a.75.75 0 1 0 1.5 0v-.736a2.39 2.39 0 1 0-3.139-2.268.75.75 0 1 0 1.5 0"
             fill-rule="evenodd"
           />
         </svg>
diff --git a/packages/Metric/src/metric.scss b/packages/Metric/src/metric.scss
index 176e7c20e..d8847f817 100644
--- a/packages/Metric/src/metric.scss
+++ b/packages/Metric/src/metric.scss
@@ -5,82 +5,6 @@
 @import url('~@hopper-ui/tokens/tokens.css') layer(hopper-design-system);
 
 :root {
-    /* Default */
-    --ids-metric-background: #{tokens.$samoyed};
-    --ids-metric-font-family: #{tokens.$primary-font-family};
-    --ids-metric-font-size: #{tokens.$font-size-3};
-    --ids-metric-font-weight: #{tokens.$font-weight-regular};
-    --ids-metric-padding: #{tokens.$space-2};
-    --ids-metric-border-radius: #{tokens.$border-radius-sm};
-    --ids-metric-line-height: #{tokens.$line-height-xxl};
-    --ids-metric-border-color: transparent;
-    --ids-metric-border-width: 1.5px;
-    --ids-metric-shadow: none;
-
-    /* Visual */
-    --ids-metric-visual-background: #{tokens.$grey-400};
-    --ids-metric-visual-border-radius: 4rem;
-    --ids-metric-visual-color: #{tokens.$grey-600};
-    --ids-metric-visual-size: #{tokens.$space-6};
-    --ids-metric-visual-positive-background: #{tokens.$seaweed-50};
-    --ids-metric-visual-positive-color: #{tokens.$seaweed-500};
-    --ids-metric-visual-negative-background: #{tokens.$coral-100};
-    --ids-metric-visual-negative-color: #{tokens.$coral-500};
-    --ids-metric-visual-selected-background: #{tokens.$electric-blue-100};
-    --ids-metric-visual-selected-color: #{tokens.$electric-blue-500};
-    --ids-metric-visual-margin-right: #{tokens.$space-3};
-
-    /* Hover */
-    --ids-metric-hover-shadow: #{tokens.$shadow-12};
-    --ids-metric-hover-background: var(--ids-metric-background);
-    --ids-metric-hover-border-color: transparent;
-
-    /* Pressed */
-    --ids-metric-pressed-shadow: #{tokens.$shadow-12};
-    --ids-metric-pressed-background: var(--ids-metric-background);
-    --ids-metric-pressed-border-color: transparent;
-
-    /* Focus */
-    --ids-metric-focus-border-color: #{tokens.$electric-blue-600};
-    --ids-metric-focus-shadow: #{tokens.$shadow-12};
-
-    /* Selected */
-    --ids-metric-selected-shadow: none;
-    --ids-metric-selected-border-width: 0.15rem;
-    --ids-metric-selected-border-color: transparent;
-    --ids-metric-selected-hover-background: #{tokens.$electric-blue-50};
-    --ids-metric-selected-hover-shadow: none;
-    --ids-metric-selected-hover-border-color: transparent;
-    --ids-metric-selected-focus-shadow: none;
-
-    /* Score */
-    --ids-metric-score-margin-left: #{tokens.$space-2};
-
-    /* Name */
-    --ids-metric-name-color: #{tokens.$grey-600};
-
-    /* Status */
-    --ids-metric-status-color: #{tokens.$grey-500};
-    --ids-metric-status-selected-color: #{tokens.$electric-blue-500};
-
-    /* Fluctuate */
-    --ids-metric-alignment-icon-margin: #{tokens.$space-2};
-    --ids-metric-fluctuate-name-color: #{tokens.$grey-600};
-
-    /* Sub Metric */
-    --ids-metric-sub-metric-border-color: #{tokens.$grey-300};
-    --ids-metric-sub-metric-padding-left: #{tokens.$space-3};
-    --ids-metric-sub-metric-focus-shadow: #{tokens.$focus};
-    --ids-metric-sub-metric-hover-border-color: #{tokens.$electric-blue-500};
-
-    /* Sub Metric Selected */
-    --ids-metric-sub-metric-selected-border-color: #{tokens.$grey-400};
-    --ids-metric-sub-metric-selected-left-border-color: #{tokens.$electric-blue-500};
-    --ids-metric-sub-metric-selected-left-border-width: #{tokens.$space-1};
-    --ids-metric-sub-metric-selected-hover-border-color: #{tokens.$electric-blue-500};
-}
-
-[data-brand="workleap"] {
     /* Default */
     --ids-metric-background: var(--hop-neutral-surface);
     --ids-metric-font-family: var(--hop-body-sm-font-family);
diff --git a/packages/Metric/src/score.scss b/packages/Metric/src/score.scss
index 4decfeca1..e8153a0f2 100644
--- a/packages/Metric/src/score.scss
+++ b/packages/Metric/src/score.scss
@@ -6,32 +6,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-score-font-family: #{tokens.$secondary-font-family};
-        --ids-score-font-size: #{tokens.$font-size-5};
-        --ids-score-font-weight: #{tokens.$font-weight-medium};
-        --ids-score-color: #{tokens.$grey-800};
-        --ids-score-line-height: #{tokens.$line-height-xl};
-
-        /* Variation */
-        --ids-score-variation-font-family: #{tokens.$primary-font-family};
-        --ids-score-variation-font-size: #{tokens.$font-size-3};
-        --ids-score-variation-font-weight: #{tokens.$font-weight-regular};
-        --ids-score-variation-margin-left: 0;
-        --ids-score-variation-line-height: #{tokens.$line-height-xxl};
-        --ids-score-single-variation-font-size: #{tokens.$font-size-9};
-        --ids-score-single-variation-color: #{tokens.$grey-600};
-        --ids-score-single-variation-line-height: #{tokens.$line-height-xxxs};
-
-        /* Arrows */
-        --ids-score-arrow-color-positive: #{tokens.$seaweed-500};
-        --ids-score-arrow-color-negative: #{tokens.$coral-500};
-        --ids-score-arrow-color-selected-positive: #{tokens.$electric-blue-500};
-        --ids-score-arrow-color-selected-negative: #{tokens.$electric-blue-500};
-        --ids-score-arrow-margin-right: #{tokens.$space-1};
-    }
-
-    [data-brand="workleap"] {
         /* Default */
         --ids-score-font-family: var(--hop-heading-sm-font-family);
         --ids-score-font-size: var(--hop-heading-sm-font-size);
diff --git a/packages/Modal/src/Modal.stories.tsx b/packages/Modal/src/Modal.stories.tsx
index 23687f2b2..e612eae6f 100644
--- a/packages/Modal/src/Modal.stories.tsx
+++ b/packages/Modal/src/Modal.stories.tsx
@@ -3,7 +3,7 @@ import Select from '@igloo-ui/select';
 import isChromatic from 'chromatic/isChromatic';
 import React, { useState } from 'react';
 
-import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 
 import ChromaticWrapper from '@components/chromaticWrapper';
 import Mockup from '@components/mockup';
@@ -21,7 +21,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
 } as Meta<typeof Modal>;
 
@@ -122,43 +123,37 @@ export const removeClose = () => {
   );
 };
 
-export const WithSelect: StoryObj<typeof Modal> = {
-    parameters: {
-        brand: "workleap",
-        chromatic: { delay: 500 }
-    },
-    render: () => {
-        const [show, setShow] = useState(isChromatic());
+export const WithSelect = () => {
+    const [show, setShow] = useState(isChromatic());
 
-        return (
-            <ChromaticWrapper>
-            <Button appearance="secondary" onClick={() => setShow(true)}>
-                open
-            </Button>
-            <Modal
-                title="I'm a modal"
-                isDismissable isOpen={show} onClose={() => setShow(false)}>
-                <Select options={[
-                    {
-                        label: 'Text option',
-                        value: 'text',
-                    },
-                    {
-                        label: 'Disabled option',
-                        value: 'disabled',
-                        disabled: true,
-                    },
-                    {
-                        label: 'Text option with icon',
-                        value: 'icon'
-                    },
-                ]}>
-                    Default
-                </Select>
-            </Modal>
-            </ChromaticWrapper>
-        );
-    }
+    return (
+        <ChromaticWrapper>
+        <Button appearance="secondary" onClick={() => setShow(true)}>
+            open
+        </Button>
+        <Modal
+            title="I'm a modal"
+            isDismissable isOpen={show} onClose={() => setShow(false)}>
+            <Select options={[
+                {
+                    label: 'Text option',
+                    value: 'text',
+                },
+                {
+                    label: 'Disabled option',
+                    value: 'disabled',
+                    disabled: true,
+                },
+                {
+                    label: 'Text option with icon',
+                    value: 'icon'
+                },
+            ]}>
+                Default
+            </Select>
+        </Modal>
+        </ChromaticWrapper>
+    );
 };
 
 export const Example = {
diff --git a/packages/Modal/src/modal.scss b/packages/Modal/src/modal.scss
index 91d7f40aa..83bcbfd4d 100644
--- a/packages/Modal/src/modal.scss
+++ b/packages/Modal/src/modal.scss
@@ -8,48 +8,6 @@
 
 @layer igloo {
     :root {
-        --ids-modal-font-family: #{tokens.$primary-font-family};
-        --ids-modal-font-size: #{tokens.$font-size-4};
-        --ids-modal-background: #{tokens.$samoyed};
-        --ids-modal-text: #{tokens.$black};
-        --ids-modal-padding: #{tokens.$space-3};
-        --ids-modal-padding-with-header: #{tokens.$space-3};
-        --ids-modal-padding-full-content: #{tokens.$space-3};
-        --ids-modal-index: #{tokens.$z-index-100};
-        --ids-modal-shadow: none;
-        --ids-modal-radius: 0;
-        --ids-modal-height: 100%;
-        --ids-modal-width: 100%;
-        --ids-modal-max-width: none;
-        --ids-modal-header-dismissable-close-display: flex;
-        --ids-modal-header-before-display: block;
-
-        .ids-modal__header--with-back-btn,
-        .ids-modal:not(.ids-modal--closable, .ids-modal--dismissable) {
-            --ids-modal-header-before-display: none;
-        }
-
-        --ids-modal-header-border: .1rem solid #{tokens.$grey-200};
-        --ids-modal-header-gap: #{tokens.$space-3};
-        --ids-modal-header-icon-size: #{tokens.$space-5};
-        --ids-modal-header-height: 5.6rem;
-        --ids-modal-header-title-alignment: center;
-        --ids-modal-header-font-family: #{tokens.$secondary-font-family};
-        --ids-modal-header-font-size: #{tokens.$font-size-3};
-        --ids-modal-header-font-weight: #{tokens.$font-weight-medium};
-        --ids-modal-header-line-height: #{tokens.$line-height-lg};
-        --ids-modal-header-padding: #{tokens.$space-0} #{tokens.$space-3};
-        --ids-modal-overlay: rgb(25 34 47 / 50%);
-        --ids-modal-overlay-index: #{tokens.$z-index-100};
-        --ids-modal-full-content-display: block;
-        --ids-modal-full-content-close-spacing-horizontal: #{tokens.$space-1};
-        --ids-modal-full-content-close-spacing-vertical: #{tokens.$space-1};
-        --ids-modal-footer-margin: #{tokens.$space-2} -#{tokens.$space-2} -#{tokens.$space-2};
-        --ids-modal-footer-action-margin: #{tokens.$space-2} #{tokens.$space-2};
-        --ids-modal-footer-action-gap: 0;
-    }
-
-    [data-brand="workleap"] {
         --ids-modal-font-family: var(--hop-body-md-font-family);
         --ids-modal-font-size: var(--hop-body-md-font-size);
         --ids-modal-background: var(--hop-neutral-surface);
@@ -94,42 +52,9 @@
 
     @media (width >= #{tokens.$breakpoints-sm}) {
         :root {
-            --ids-modal-radius: #{tokens.$border-radius-sm};
-            --ids-modal-shadow: #{tokens.$shadow-12};
-            --ids-modal-height: auto;
-            --ids-modal-width: 46rem;
-            --ids-modal-width-medium: 58.4rem;
-            --ids-modal-width-large: 66.4rem;
-            --ids-modal-width-xlarge: 80rem;
-            --ids-modal-max-width: 94%;
-            --ids-modal-bottom: auto;
-            --ids-modal-left: 50%;
-            --ids-modal-right: auto;
-            --ids-modal-top: 50%;
-            --ids-modal-header-dismissable-close-display: none;
-            --ids-modal-header-before-display: block;
-
-            .ids-modal__header--with-back-btn {
-                --ids-modal-header-before-display: block; /* Display block since the back button in the header isn't displayed on desktop */
-            }
-
-            .ids-modal:not(.ids-modal--closable) {
-                --ids-modal-header-before-display: none; // Hide the before element if the modal isn't showing the close button
-            }
-
-            --ids-modal-header-border: none;
-            --ids-modal-header-height: auto;
-            --ids-modal-header-font-size: #{tokens.$font-size-6};
-            --ids-modal-header-padding: #{tokens.$space-4} #{tokens.$space-4} #{tokens.$space-2};
-            --ids-modal-title-display: none;
-            --ids-modal-padding: #{tokens.$space-4};
-            --ids-modal-padding-with-header: #{tokens.$space-4};
-            --ids-modal-full-content-display: none;
-        }
-
-        [data-brand="workleap"] {
             --ids-modal-radius: var(--hop-shape-rounded-md);
             --ids-modal-shadow: var(--hop-elevation-lifted);
+            --ids-modal-height: auto;
             --ids-modal-width: 28.75rem;
             --ids-modal-width-medium: 36.5rem;
             --ids-modal-width-large: 41.5rem;
diff --git a/packages/OptionButton/src/OptionButton.stories.tsx b/packages/OptionButton/src/OptionButton.stories.tsx
index fc7a48d80..2ed1edb08 100644
--- a/packages/OptionButton/src/OptionButton.stories.tsx
+++ b/packages/OptionButton/src/OptionButton.stories.tsx
@@ -5,8 +5,8 @@ import { Meta, StoryFn } from '@storybook/react';
 import Section from '@components/section';
 import readme from '../README.md';
 
-import OptionButton from './OptionButton';
 import Sparkles from '@igloo-ui/icons/dist/Sparkles';
+import OptionButton from './OptionButton';
 
 export default {
   title: 'Components/OptionButton',
@@ -16,7 +16,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
 } as Meta<typeof OptionButton>;
 
diff --git a/packages/OptionButton/src/OptionButton.tsx b/packages/OptionButton/src/OptionButton.tsx
index e26b8113f..3443212fc 100644
--- a/packages/OptionButton/src/OptionButton.tsx
+++ b/packages/OptionButton/src/OptionButton.tsx
@@ -1,15 +1,11 @@
-import * as React from "react";
 import cx from "classnames";
+import * as React from "react";
 
 import {
-    LegacyTextIcon,
-    LegacyOptionScaleIcon,
-    LegacyMultipleChoiceIcon,
-    LegacyLikertIcon,
-    TextIcon,
-    OptionScaleIcon,
+    LikertIcon,
     MultipleChoiceIcon,
-    LikertIcon
+    OptionScaleIcon,
+    TextIcon
 } from "./svgs";
 
 import "./option-button.scss";
@@ -44,10 +40,6 @@ export interface OptionButtonProps extends React.ComponentProps<"input"> {
     unchecked?: boolean;
 }
 
-const getBrand = (): string => {
-    return document.documentElement.getAttribute("data-brand") ?? "igloo";
-};
-
 const OptionButton: React.FunctionComponent<OptionButtonProps> = ({
     buttonType = "text",
     checked,
@@ -67,44 +59,32 @@ const OptionButton: React.FunctionComponent<OptionButtonProps> = ({
             return icon;
         }
 
-        const isWorkleap = getBrand() === "workleap";
-        let OptionScale = LegacyOptionScaleIcon;
-        let MultipleChoice = LegacyMultipleChoiceIcon;
-        let Likert = LegacyLikertIcon;
-        let Text = LegacyTextIcon;
-        if (isWorkleap) {
-            OptionScale = OptionScaleIcon;
-            MultipleChoice = MultipleChoiceIcon;
-            Likert = LikertIcon;
-            Text = TextIcon;
-        }
-
         switch (buttonType) {
             case "optionScale":
                 return (
-                    <OptionScale
-                        className={`ids-option-button__icon 
+                    <OptionScaleIcon
+                        className={`ids-option-button__icon
                         ids-option-button__option-scale-icon`}
                     />
                 );
             case "multipleChoice":
                 return (
-                    <MultipleChoice
-                        className={`ids-option-button__icon 
+                    <MultipleChoiceIcon
+                        className={`ids-option-button__icon
                         ids-option-button__multiple-choice-icon`}
                     />
                 );
             case "likert":
                 return (
-                    <Likert
-                        className={`ids-option-button__icon 
+                    <LikertIcon
+                        className={`ids-option-button__icon
                         ids-option-button__likert-icon`}
                     />
                 );
             default:
                 return (
-                    <Text
-                        className={`ids-option-button__icon 
+                    <TextIcon
+                        className={`ids-option-button__icon
                         ids-option-button__text-icon`}
                     />
                 );
diff --git a/packages/OptionButton/src/__snapshots__/OptionButton.test.tsx.snap b/packages/OptionButton/src/__snapshots__/OptionButton.test.tsx.snap
index a6d23c545..ef2ee7b62 100644
--- a/packages/OptionButton/src/__snapshots__/OptionButton.test.tsx.snap
+++ b/packages/OptionButton/src/__snapshots__/OptionButton.test.tsx.snap
@@ -19,63 +19,28 @@ exports[`OptionButton It should render a snapshot 1`] = `
         class="ids-option-button__icon-container"
       >
         <svg
-          class="ids-option-button__icon 
+          class="ids-option-button__icon
                         ids-option-button__text-icon"
           fill="none"
-          height="32"
-          viewBox="0 0 32 32"
-          width="32"
+          height="40"
+          viewBox="0 0 40 40"
+          width="40"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g
-            clip-path="url(#clip0_5250_851)"
-          >
-            <circle
-              class="ids-option-button__icon-circle"
-              cx="16"
-              cy="16"
-              r="16"
-            />
-            <path
-              d="M23.963 26.0296C25.03 26.0296 24.2124 10.0177 24.0067 6.27549C23.9825 5.83494 23.6247 5.5 23.1834 5.5L8.65899 5.50005C6.65998 5.50007 7.85352 22.788 7.85352 25.3092C7.85352 27.4703 22.7548 26.0296 23.963 26.0296Z"
-              fill="white"
-            />
-            <path
-              clip-rule="evenodd"
-              d="M15.5358 11.2583C13.4703 11.2877 11.5563 11.3885 11.1234 11.4607C10.7148 11.5288 10.3284 11.2527 10.2603 10.8442C10.1922 10.4356 10.4682 10.0492 10.8768 9.98107C11.4439 9.88655 13.48 9.78738 15.5144 9.75844C16.5465 9.74375 17.6038 9.74678 18.5082 9.77915C19.3876 9.81064 20.1947 9.87143 20.682 9.99325C21.0839 10.0937 21.3282 10.5009 21.2277 10.9028C21.1273 11.3046 20.7201 11.5489 20.3182 11.4485C20.0055 11.3703 19.3501 11.3103 18.4545 11.2782C17.584 11.247 16.5537 11.2438 15.5358 11.2583Z"
-              fill="currentColor"
-              fill-rule="evenodd"
-            />
-            <path
-              clip-rule="evenodd"
-              d="M20.3768 16.2398C17.4672 15.7549 15.043 15.7505 11.0931 16.2442C10.6821 16.2956 10.3072 16.004 10.2559 15.593C10.2045 15.182 10.496 14.8071 10.9071 14.7558C14.9571 14.2495 17.533 14.2452 20.6234 14.7602C21.0319 14.8283 21.308 15.2147 21.2399 15.6233C21.1718 16.0319 20.7854 16.3079 20.3768 16.2398Z"
-              fill="currentColor"
-              fill-rule="evenodd"
-            />
-            <path
-              clip-rule="evenodd"
-              d="M14.7057 20.2437C13.0994 20.2798 11.5633 20.3874 11.147 20.4716C10.741 20.5537 10.3453 20.2912 10.2632 19.8852C10.1811 19.4792 10.4436 19.0835 10.8496 19.0014C11.4189 18.8862 13.0906 18.7796 14.672 18.7441C15.4776 18.7259 16.2896 18.7256 16.9636 18.754C17.3 18.7682 17.6116 18.7899 17.8755 18.822C18.1196 18.8516 18.39 18.8972 18.6031 18.9843C18.9865 19.1412 19.1701 19.5791 19.0133 19.9625C18.8565 20.3458 18.4186 20.5295 18.0352 20.3727C18.0356 20.3729 18.0355 20.3728 18.0348 20.3726C18.0305 20.3711 18.0042 20.3623 17.9462 20.3503C17.883 20.3372 17.7996 20.3238 17.6947 20.311C17.4846 20.2855 17.2158 20.266 16.9004 20.2527C16.2708 20.2261 15.494 20.226 14.7057 20.2437Z"
-              fill="currentColor"
-              fill-rule="evenodd"
-            />
-            <path
-              clip-rule="evenodd"
-              d="M8.27614 12.5686C8.29077 13.3727 8.30604 14.2119 8.30606 15.0696C8.30609 17.4809 8.30618 19.7263 8.36854 21.5679C8.42383 23.2007 8.52714 24.4356 8.69522 25.1787C8.81252 25.2193 8.98242 25.2678 9.21711 25.318C9.64611 25.4096 10.2034 25.4893 10.8607 25.5543C12.1731 25.684 13.8294 25.75 15.5429 25.75C17.2552 25.75 19.0097 25.6841 20.517 25.5534C21.8058 25.4417 22.864 25.2863 23.5583 25.1018C23.5865 24.9612 23.6163 24.7685 23.6429 24.515C23.6938 24.029 23.7258 23.402 23.7405 22.6606C23.77 21.1795 23.7297 19.2894 23.6482 17.2528C23.4972 13.4812 23.2061 9.24315 22.9646 6.25H9.06538C8.97554 6.25 8.92757 6.27219 8.88543 6.30522C8.83102 6.34787 8.75019 6.44003 8.66434 6.63052C8.48576 7.02682 8.3659 7.66299 8.30421 8.54296C8.22378 9.69028 8.24885 11.0682 8.27614 12.5686ZM7.96007 5.12467C8.27561 4.87733 8.65213 4.75 9.06538 4.75H23.6555C24.0455 4.75 24.3705 5.04893 24.4029 5.43759C24.6551 8.4571 24.9829 13.0938 25.147 17.1928C25.229 19.241 25.2705 21.1654 25.2402 22.6904C25.2251 23.4519 25.1918 24.1258 25.1347 24.6713C25.0809 25.1847 24.9977 25.6827 24.8366 26.0233C24.751 26.2042 24.5966 26.3434 24.4078 26.4099C23.5554 26.7102 22.1821 26.9147 20.6466 27.0478C19.0881 27.183 17.2895 27.25 15.5429 27.25C13.7975 27.25 12.0893 27.1831 10.7132 27.047C10.0263 26.9791 9.40832 26.8926 8.90382 26.7849C8.43294 26.6843 7.95202 26.5445 7.62722 26.3157C7.49288 26.221 7.39334 26.0849 7.34391 25.9282C7.05634 25.0165 6.93167 23.4577 6.8694 21.6187C6.80613 19.75 6.80609 17.4817 6.80606 15.084L6.80606 15.0696C6.80604 14.285 6.79168 13.4831 6.77757 12.6947C6.74983 11.1454 6.72302 9.64853 6.80788 8.43806C6.87199 7.52372 7.0037 6.66464 7.29679 6.01425C7.44678 5.68141 7.65681 5.36238 7.96007 5.12467Z"
-              fill="currentColor"
-              fill-rule="evenodd"
-            />
-          </g>
-          <defs>
-            <clippath
-              id="clip0_5250_851"
-            >
-              <rect
-                fill="white"
-                height="32"
-                width="32"
-              />
-            </clippath>
-          </defs>
+          <path
+            class="ids-option-button__icon-circle"
+            d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20Z"
+          />
+          <path
+            d="M12.828 7a2 2 0 0 0-1.414.586L9.586 9.414A2 2 0 0 0 9 10.828V31a2 2 0 0 0 2 2h16.172a2 2 0 0 0 1.414-.586l1.828-1.828A2 2 0 0 0 31 29.172V9a2 2 0 0 0-2-2H12.828Z"
+            fill="currentColor"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M13 8.25h16a.75.75 0 0 1 .75.75v20a.75.75 0 0 1-.75.75H13a.75.75 0 0 1-.75-.75V9a.75.75 0 0 1 .75-.75Zm14 4.375H15v-1.25h12v1.25Zm-12 4h12v-1.25H15v1.25Zm12 4H15v-1.25h12v1.25Zm-12 4h7v-1.25h-7v1.25Z"
+            fill="#fff"
+            fill-rule="evenodd"
+          />
         </svg>
       </span>
       <span
diff --git a/packages/OptionButton/src/option-button.scss b/packages/OptionButton/src/option-button.scss
index d833d3037..0ec24aa32 100644
--- a/packages/OptionButton/src/option-button.scss
+++ b/packages/OptionButton/src/option-button.scss
@@ -6,61 +6,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-option-button-border-color: #{tokens.$grey-400};
-        --ids-option-button-border-dimension: 0.1rem;
-        --ids-option-button-border-radius: #{tokens.$border-radius-sm};
-        --ids-option-button-font-family: #{tokens.$primary-font-family};
-        --ids-option-focus: 0 0 0 0.2rem #ffffff, 0 0 0 0.35rem #0C46D0;
-        --ids-option-button-padding: 0;
-
-        /* Hover */
-        --ids-option-button-hover-border-color: #{tokens.$grey-600};
-        --ids-option-button-hover-background-color: transparent;
-
-        /* Pressed */
-        --ids-option-button-pressed-border-color: #{tokens.$grey-600};
-        --ids-option-button-pressed-background-color: transparent;
-
-        /* Checked */
-        --ids-option-button-checked-box-shadow: 0 0 0.6rem #3c7dff;
-        --ids-option-button-checked-border-color: transparent;
-        --ids-option-button-checked-background-color: transparent;
-        --ids-option-button-checked-outline: none;
-        --ids-option-button-checked-outline-offset: 0;
-
-        /* Disabled */
-        --ids-option-button-icon-container-disabled-background: #{tokens.$grey-200};
-        --ids-option-button-border-color-disabled: #{tokens.$grey-400};
-        --ids-option-button-background-color-disabled: transparent;
-        --ids-option-button-text-color-disabled: #{tokens.$grey-600};
-
-        /* Icon */
-        --ids-option-button-icon-container-background: #{tokens.$electric-blue-50};
-        --ids-option-button-icon-container-height: 5.6rem;
-        --ids-option-button-icon-container-width: 6.2rem;
-        --ids-option-button-icon-background: #{tokens.$sky-100};
-        --ids-option-button-icon-background-disabled: #{tokens.$grey-300};
-        --ids-option-button-icon-background-hover: #{tokens.$sky-100};
-        --ids-option-button-icon-color: #{tokens.$grey-800};
-        --ids-option-button-icon-color-disabled: #{tokens.$grey-600};
-        --ids-option-button-icon-width: auto;
-        --ids-option-button-icon-height: auto;
-
-        /* Text */
-        --ids-option-button-text-container-padding: #{tokens.$space-1} #{tokens.$space-3};
-        --ids-option-button-text-color: #{tokens.$grey-800};
-        --ids-option-button-text-font-size: #{tokens.$font-size-5};
-        --ids-option-button-text-font-weight: #{tokens.$font-weight-semi-bold};
-        --ids-option-button-text-line-height: #{tokens.$line-height-xl};
-
-        /* Description */
-        --ids-option-button-desc-color: #{tokens.$grey-600};
-        --ids-option-button-desc-font-size: #{tokens.$font-size-3};
-        --ids-option-button-desc-line-height: #{tokens.$line-height-xxl};
-    }
-
-    [data-brand="workleap"] {
         /* Default */
         --ids-option-button-padding: 0 0 0 var(--hop-space-inline-md);
         --ids-option-button-border-color: var(--hop-neutral-border-weak);
diff --git a/packages/Pager/src/Pager.stories.tsx b/packages/Pager/src/Pager.stories.tsx
index 7570b0ed0..04d584e9f 100644
--- a/packages/Pager/src/Pager.stories.tsx
+++ b/packages/Pager/src/Pager.stories.tsx
@@ -16,7 +16,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
 } as Meta<typeof Pager>;
 
diff --git a/packages/Pager/src/Pager.tsx b/packages/Pager/src/Pager.tsx
index 6383db870..625d483d6 100644
--- a/packages/Pager/src/Pager.tsx
+++ b/packages/Pager/src/Pager.tsx
@@ -1,20 +1,15 @@
-import * as React from "react";
-import cx from "classnames";
 import ChevronLeft from "@igloo-ui/icons/dist/ChevronLeft";
 import ChevronRight from "@igloo-ui/icons/dist/ChevronRight";
+import cx from "classnames";
+import * as React from "react";
 
-import { usePagination, JUMPPREV, JUMPNEXT } from "./usePagination";
-import { EllipsisIcon } from "./svgs";
-import intlMessages from "./intl";
 import { useLocalizedStringFormatter } from "@igloo-ui/provider";
+import intlMessages from "./intl";
+import { EllipsisIcon } from "./svgs";
+import { JUMPNEXT, JUMPPREV, usePagination } from "./usePagination";
 
 import "./pager.scss";
 
-
-const getBrand = (): string => {
-    return document.documentElement.getAttribute("data-brand") ?? "igloo";
-};
-
 export interface PagerProps extends React.ComponentProps<"div"> {
     /** Add a specific class to the pager component */
     className?: string;
@@ -50,7 +45,6 @@ const Pager: React.FunctionComponent<PagerProps> = ({
     ...rest
 }: PagerProps) => {
     const stringFormatter = useLocalizedStringFormatter(intlMessages);
-    const isWorkleap = getBrand() === "workleap";
     const paginationRange = usePagination({
         currentPage,
         pageSize,
@@ -87,13 +81,6 @@ ${stringFormatter.format("of")} ${totalCount}`;
     const renderPrevNext = (type: string): React.ReactNode => {
         const isPrev = type === "prev";
         const isDisabled = isPrev ? currentPage === 1 : currentPage === lastPage;
-        const ChevronLeftIcon = isWorkleap ?
-            <ChevronLeft size="medium" /> :
-            <ChevronLeft size="small" />;
-
-        const ChevronRightIcon = isWorkleap ?
-            <ChevronRight size="medium" /> :
-            <ChevronRight size="small" />;
 
         return (
             <li className="ids-pager__item">
@@ -105,8 +92,8 @@ ${stringFormatter.format("of")} ${totalCount}`;
                         stringFormatter.format("goToPreviousPage") :
                         stringFormatter.format("goToNextPage")}
                 >
-                    {isPrev && ChevronLeftIcon}
-                    {!isPrev && ChevronRightIcon}
+                    {isPrev && <ChevronLeft size="medium" />}
+                    {!isPrev && <ChevronRight size="medium" />}
                 </button>
             </li>
         );
diff --git a/packages/Pager/src/__snapshots__/Pager.test.tsx.snap b/packages/Pager/src/__snapshots__/Pager.test.tsx.snap
index 5b2b9be11..69d448047 100644
--- a/packages/Pager/src/__snapshots__/Pager.test.tsx.snap
+++ b/packages/Pager/src/__snapshots__/Pager.test.tsx.snap
@@ -24,17 +24,16 @@ exports[`Pager It should render without error and a snapshot 1`] = `
             <svg
               class="ids-icon"
               fill="none"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M9.333 4 5.57 7.764a.333.333 0 0 0 0 .472L9.333 12"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1.5"
+                clip-rule="evenodd"
+                d="M14.53 5.47a.75.75 0 0 1 0 1.06L9.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06l-5.647-5.646a1.25 1.25 0 0 1 0-1.768L13.47 5.47a.75.75 0 0 1 1.06 0Z"
+                fill="currentColor"
+                fill-rule="evenodd"
               />
             </svg>
           </button>
@@ -144,17 +143,16 @@ exports[`Pager It should render without error and a snapshot 1`] = `
             <svg
               class="ids-icon"
               fill="none"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="m6 4 3.823 3.823a.25.25 0 0 1 0 .354L6 12"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1.5"
+                clip-rule="evenodd"
+                d="M9.47 5.47a.75.75 0 0 0 0 1.06L14.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06l5.647-5.646a1.25 1.25 0 0 0 0-1.768L10.53 5.47a.75.75 0 0 0-1.06 0Z"
+                fill="currentColor"
+                fill-rule="evenodd"
               />
             </svg>
           </button>
diff --git a/packages/Pager/src/pager.scss b/packages/Pager/src/pager.scss
index 380765564..229ad35e0 100644
--- a/packages/Pager/src/pager.scss
+++ b/packages/Pager/src/pager.scss
@@ -6,64 +6,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-pager-font-family: #{tokens.$primary-font-family};
-        --ids-pager-font-size: #{tokens.$font-size-4};
-        --ids-pager-height: #{tokens.$space-5};
-        --ids-pager-line-height: #{tokens.$line-height-xxxl};
-
-        /* Item */
-        --ids-pager-item-wrapper-border-size: 0;
-        --ids-pager-item-wrapper-padding: 0;
-        --ids-pager-item-wrapper-radius: 0;
-        --ids-pager-item-padding: #{tokens.$space-1};
-        --ids-pager-item-background: #{tokens.$samoyed};
-        --ids-pager-item-border: .1rem solid #{tokens.$grey-300};
-        --ids-pager-item-prev-border-radius: #{tokens.$border-radius-sm} 0 0 #{tokens.$border-radius-sm};
-        --ids-pager-item-next-border-radius: 0 #{tokens.$border-radius-sm} #{tokens.$border-radius-sm} 0;
-        --ids-pager-item-color: #{tokens.$grey-800};
-        --ids-pager-item-radius: 0;
-        --ids-pager-item-min-width: 3.2rem;
-        --ids-pager-item-z-index: #{tokens.$z-index-10};
-        --ids-pager-item-vertical-offset: -.1rem;
-        --ids-pager-item-prev-next-offset: -.1rem;
-
-        /* Selected Item */
-        --ids-pager-item-selected-background: #{tokens.$electric-blue-500};
-        --ids-pager-item-selected-color: #{tokens.$samoyed};
-
-        /* Hover */
-        --ids-pager-item-hover-border: .1rem solid #{tokens.$grey-600};
-        --ids-pager-item-hover-background: transparent;
-
-        /* Pressed */
-        --ids-pager-item-pressed-border: .1rem solid #{tokens.$grey-600};
-        --ids-pager-item-pressed-background: transparent;
-
-        /* Focus */
-        --ids-pager-item-focus-border-width: .1rem;
-        --ids-pager-item-focus-outline-width: 0;
-        --ids-pager-item-focus-color: #{tokens.$electric-blue-600};
-
-        /* Disabled */
-        --ids-pager-item-disabled-background: #{tokens.$grey-300};
-        --ids-pager-item-disabled-border: .1rem solid #{tokens.$grey-300};
-        --ids-pager-item-disabled-color: #{tokens.$grey-600};
-
-        /* Arrows */
-        --ids-pager-arrow-color: #{tokens.$grey-500};
-
-        /* Ellipsis */
-        --ids-pager-ellipsis-border: .1rem solid transparent;
-        --ids-pager-ellipsis-color: #{tokens.$grey-600};
-        --ids-pager-ellipsis-offset: 0;
-
-        /* Results */
-        --ids-pager-results-color: #{tokens.$grey-600};
-        --ids-pager-results-margin: 0 0 0 #{tokens.$space-3};
-    }
-
-    [data-brand="workleap"] {
         /* Default */
         --ids-pager-font-family: var(--hop-body-sm-font-family);
         --ids-pager-font-size: var(--hop-body-sm-font-size);
diff --git a/packages/PieChart/src/PieChart.stories.tsx b/packages/PieChart/src/PieChart.stories.tsx
index 9fa9d1dd0..660bac8ca 100644
--- a/packages/PieChart/src/PieChart.stories.tsx
+++ b/packages/PieChart/src/PieChart.stories.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';
-import tokens from '@igloo-ui/tokens/dist/base10/tokens.json';
 
 import Section from '@components/section';
 import readme from '../README.md';
@@ -16,38 +15,27 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   }
 } as Meta<typeof PieChart>;
 
 type Story = StoryObj<typeof PieChart>;
 
 const mockData = [
-  { id: 'positive', percentage: 25, color: tokens.seaweed400 },
-  { id: 'negative', percentage: 10, color: tokens.coral400 },
-  { id: 'skipped', percentage: 40, color: tokens.creamsicle100 },
-  { id: 'unanswered', percentage: 25, color: tokens.grey300 },
-];
-
-const mockDataWL = [
   { id: 'positive', percentage: 25, color: "var(--hop-status-positive-surface-strong)" },
   { id: 'negative', percentage: 10, color: "var(--hop-status-negative-surface-strong)" },
   { id: 'skipped', percentage: 40, color: "var(--hop-upsell-surface-selected)" },
   { id: 'unanswered', percentage: 25, color: "var(--hop-neutral-surface-disabled)" },
 ];
 
-const getMockData = (brand: string) => {
-  const data = brand === 'workleap' ? mockDataWL : mockData;
-  return data;
-}
-
 export const Overview: Story = {
-  render: (args, { globals: { brand } }) => {
+  render: (args) => {
     return (
       <Section>
         <PieChart
           {...args}
-          data={getMockData(brand)}
+          data={mockData}
         />
       </Section>
     );
@@ -80,17 +68,17 @@ export const Empty: Story = {
 
 
 export const Sizes: Story = {
-  render: (_args, { globals: { brand } }) => {
+  render: () => {
     return (
       <Section>
         <PieChart
-          data={getMockData(brand)}
+          data={mockData}
           label="Poll Completion"
           size="regular"
           rate={35}
         />
         <PieChart
-          data={getMockData(brand)}
+          data={mockData}
           label="Poll Completion"
           size="large"
           rate={35}
diff --git a/packages/PieChart/src/pie-chart.scss b/packages/PieChart/src/pie-chart.scss
index 00a600482..d8b037ee2 100644
--- a/packages/PieChart/src/pie-chart.scss
+++ b/packages/PieChart/src/pie-chart.scss
@@ -6,30 +6,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-pie-chart-font-family: #{tokens.$primary-font-family};
-        --ids-pie-chart-font-size: #{tokens.$font-size-2};
-        --ids-pie-chart-font-weight: #{tokens.$font-weight-regular};
-        --ids-pie-chart-line-height: #{tokens.$line-height-xl};
-        --ids-pie-chart-empty: #{tokens.$grey-300};
-
-        /* Rate */
-        --ids-pie-chart-rate-font-family: #{tokens.$secondary-font-family};
-        --ids-pie-chart-rate-font-size: #{tokens.$font-size-10};
-        --ids-pie-chart-rate-font-weight: #{tokens.$font-weight-medium};
-        --ids-pie-chart-rate-line-height: #{tokens.$line-height-xs};
-        --ids-pie-chart-rate-color: #{tokens.$grey-800};
-
-        /* Symbol */
-        --ids-pie-chart-symbol-font-size: #{tokens.$font-size-5};
-        --ids-pie-chart-symbol-color: #{tokens.$grey-500};
-
-        /* Label */
-        --ids-pie-chart-label-color: #{tokens.$grey-600};
-        --ids-pie-chart-label-padding: #{tokens.$space-4};
-    }
-
-    [data-brand="workleap"] {
         /* Default */
         --ids-pie-chart-font-family: var(--hop-body-xs-font-family);
         --ids-pie-chart-font-size: var(--hop-body-xs-font-size);
diff --git a/packages/Popover/src/Popover.stories.tsx b/packages/Popover/src/Popover.stories.tsx
index adae69bfb..47650c4ad 100644
--- a/packages/Popover/src/Popover.stories.tsx
+++ b/packages/Popover/src/Popover.stories.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
 import { DateTime } from 'luxon';
+import React from 'react';
 
-import { Meta, StoryFn } from '@storybook/react';
 import Hyperlink from '@igloo-ui/hyperlink';
+import { Meta, StoryFn } from '@storybook/react';
 
 import ChromaticWrapper from '@components/chromaticWrapper';
 import Section from '@components/section';
@@ -20,6 +20,7 @@ export default {
       }
     },
     chromatic: { diffThreshold: 0.792 },
+    brand: "workleap"
   },
   argTypes: {
     children: {
diff --git a/packages/Popover/src/Popover.tsx b/packages/Popover/src/Popover.tsx
index 2257296a6..3ca52f6bc 100644
--- a/packages/Popover/src/Popover.tsx
+++ b/packages/Popover/src/Popover.tsx
@@ -83,10 +83,6 @@ const Popover: React.FunctionComponent<PopoverProps> = ({
     const classes = cx("ids-popover__container", className);
     const stringFormatter = useLocalizedStringFormatter(intlMessages);
 
-    const getBrand = (): string => {
-        return document.documentElement.getAttribute("data-brand") ?? "igloo";
-    };
-
     const [show, setShow] = React.useState<boolean>(active);
 
     const showPopover = !disabled && show;
@@ -157,7 +153,7 @@ const Popover: React.FunctionComponent<PopoverProps> = ({
 
     const popoverClasses = cx("ids-popover", popoverClassName);
 
-    const fromPxToRem = (value: number, base = (getBrand() === "workleap" ? 16 : 10)): string =>
+    const fromPxToRem = (value: number, base = 16): string =>
         `${value / base}rem`;
 
     const popoverContent = (
diff --git a/packages/Popover/src/popover.scss b/packages/Popover/src/popover.scss
index a04970c92..c4b839044 100644
--- a/packages/Popover/src/popover.scss
+++ b/packages/Popover/src/popover.scss
@@ -6,26 +6,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-popover-font-family: #{tokens.$primary-font-family};
-        --ids-popover-font-size: #{tokens.$font-size-3};
-        --ids-popover-padding: #{tokens.$space-3};
-        --ids-popover-border: none;
-        --ids-popover-border-radius: #{tokens.$border-radius-sm};
-        --ids-popover-line-height: #{tokens.$line-height-xxl};
-        --ids-popover-z-index: #{tokens.$z-index-max};
-        --ids-popover-spacing: #{tokens.$space-2};
-        --ids-popover-width: 100%;
-        --ids-popover-text: #{tokens.$grey-600};
-        --ids-popover-background: #{tokens.$samoyed};
-        --ids-popover-shadow: #{tokens.$shadow-12};
-        --ids-popover-title-color: #{tokens.$grey-800};
-        --ids-popover-title-font-weight: #{tokens.$font-weight-semi-bold};
-        --ids-popover-title-padding: #{tokens.$space-5};
-        --ids-popover-close-offset: #{tokens.$space-3};
-    }
-
-    [data-brand="workleap"] {
         /* Default */
         --ids-popover-font-family: var(--hop-body-sm-font-family);
         --ids-popover-font-size: var(--hop-body-sm-font-size);
@@ -48,14 +28,10 @@
     /* stylelint-disable-next-line media-query-no-invalid */
     @media (width >= #{tokens.$breakpoints-sm}) {
         :root {
-            --ids-popover-min-width: 3.2rem;
+            --ids-popover-min-width: 2rem;
             --ids-popover-width: 100%;
             --ids-popover-close-display: none;
         }
-
-        [data-brand="workleap"] {
-            --ids-popover-min-width: 2rem;
-        }
     }
 
     .ids-popover {
diff --git a/packages/ProgressBar/src/ProgressBar.stories.tsx b/packages/ProgressBar/src/ProgressBar.stories.tsx
index fd6e41ad1..1cc5a300b 100644
--- a/packages/ProgressBar/src/ProgressBar.stories.tsx
+++ b/packages/ProgressBar/src/ProgressBar.stories.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
 import HelperText from '@igloo-ui/helper-text';
+import React from 'react';
 
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import Section from '@components/section';
 import readme from '../README.md';
@@ -16,7 +16,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
   argTypes: {
     value: {
diff --git a/packages/ProgressBar/src/progress-bar.scss b/packages/ProgressBar/src/progress-bar.scss
index 85218b117..1ebe7f1e4 100644
--- a/packages/ProgressBar/src/progress-bar.scss
+++ b/packages/ProgressBar/src/progress-bar.scss
@@ -6,20 +6,7 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-progress-bar-height: #{tokens.$space-2};
-        --ids-progress-bar-radius: #{tokens.$space-1};
-        --ids-progress-bar-background: #{tokens.$grey-200};
-        --ids-progress-bar-background-progress: #{tokens.$electric-blue-500};
-        --ids-progress-bar-background-completed: #{tokens.$seaweed-500};
-
-        /* Compact */
-        --ids-progress-bar-height-compact: #{tokens.$space-1};
-        --ids-progress-bar-radius-compact: calc(#{tokens.$space-1} / 2);
-    }
-
-    [data-brand="workleap"] {
-        /* Default */
+         /* Default */
         --ids-progress-bar-height: 0.5rem;
         --ids-progress-bar-radius: var(--hop-shape-rounded-sm);
         --ids-progress-bar-background: var(--hop-neutral-surface-weak);
diff --git a/packages/Provider/src/Provider.stories.tsx b/packages/Provider/src/Provider.stories.tsx
index 24d608d0d..99702d3d6 100644
--- a/packages/Provider/src/Provider.stories.tsx
+++ b/packages/Provider/src/Provider.stories.tsx
@@ -14,7 +14,8 @@ const meta: Meta<typeof IglooProvider> = {
             description: {
                 component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
             }
-        }
+        },
+        brand: "workleap"
     },
     argTypes: {
         locale: {