diff --git a/packages/components/filters/README.md b/packages/components/filters/README.md
index c69b57da46..4ad4aafb61 100644
--- a/packages/components/filters/README.md
+++ b/packages/components/filters/README.md
@@ -42,6 +42,6 @@ export default Example;
 
 ## Properties
 
-| Props   | Type     | Required | Default | Description          |
-| ------- | -------- | :------: | ------- | -------------------- |
-| `label` | `string` |    ✅    |         | This is a stub prop! |
+| Props   | Type     | Required | Default | Description         |
+| ------- | -------- | :------: | ------- | ------------------- |
+| `label` | `string` |          |         | This is a stub prop |
diff --git a/packages/components/filters/package.json b/packages/components/filters/package.json
index 7b456bc258..205988a9b0 100644
--- a/packages/components/filters/package.json
+++ b/packages/components/filters/package.json
@@ -21,7 +21,9 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
+    "@commercetools-uikit/design-system": "workspace:^",
     "@commercetools-uikit/dropdown-menu": "workspace:^",
+    "@commercetools-uikit/utils": "workspace:^",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "prop-types": "15.8.1",
diff --git a/packages/components/filters/src/badge/badge.spec.tsx b/packages/components/filters/src/badge/badge.spec.tsx
index d388a02bb8..a67a52d5d5 100644
--- a/packages/components/filters/src/badge/badge.spec.tsx
+++ b/packages/components/filters/src/badge/badge.spec.tsx
@@ -1,12 +1,14 @@
 import { screen, render } from '../../../../../test/test-utils';
 import Badge from './badge';
 
-/**
- * THIS IS A PLACEHOLDER, PLEASE UPDATE IT
- */
-describe('FilterMenu Badge', () => {
+const defaultProps = {
+  label: '+1',
+  id: 'test-badge',
+};
+describe('Filters Badge', () => {
   it('should render the badge', async () => {
-    await render(<Badge />);
-    await screen.findByText('badge');
+    await render(<Badge {...defaultProps} />);
+    const badge = await screen.findByRole('status');
+    expect(badge.textContent).toEqual('+1');
   });
 });
diff --git a/packages/components/filters/src/badge/badge.tsx b/packages/components/filters/src/badge/badge.tsx
index 8001f5f052..032875edd4 100644
--- a/packages/components/filters/src/badge/badge.tsx
+++ b/packages/components/filters/src/badge/badge.tsx
@@ -1,5 +1,57 @@
-function Badge() {
-  return <div>badge</div>;
+import { css } from '@emotion/react';
+import { designTokens } from '@commercetools-uikit/design-system';
+
+export type TBadgeProps = {
+  /**
+   * CSS ID for badge, used to specify relationship with parent in parent's `aria-controls` property
+   * see https://www.w3.org/TR/wai-aria-1.1/#status
+   */
+  id: string;
+  /**
+   * If `true`, indicates that the element is in a disabled state.
+   */
+  isDisabled?: boolean;
+  /**
+   * String to be displayed in badge, generally a count of some kind
+   */
+  label: string;
+
+  /**
+   * Optional descriptive explanation of label (e.g. "+4 additional filters applied")
+   */
+  ['aria-label']?: string;
+};
+
+const badgeStyles = css`
+  font-size: ${designTokens.fontSize20};
+  font-weight: ${designTokens.fontWeight500};
+  line-height: ${designTokens.lineHeight20};
+  color: ${designTokens.colorSurface};
+  background-color: ${designTokens.colorInfo};
+  padding: 0 calc(${designTokens.spacing05} + ${designTokens.spacing10});
+  border-radius: ${designTokens.borderRadius20};
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: ${designTokens.spacing40};
+`;
+
+const disabledBageStyles = css`
+  background-color: ${designTokens.colorNeutral};
+`;
+
+function Badge(props: TBadgeProps) {
+  return (
+    <span
+      aria-label={props['aria-label']}
+      css={[badgeStyles, props.isDisabled && disabledBageStyles]}
+      id={props.id}
+      role="status"
+    >
+      {props.label}
+    </span>
+  );
 }
 
 export default Badge;
diff --git a/packages/components/filters/src/filter-menu/trigger-button/trigger-button.tsx b/packages/components/filters/src/filter-menu/trigger-button/trigger-button.tsx
index 12edde01e4..4e992dfc28 100644
--- a/packages/components/filters/src/filter-menu/trigger-button/trigger-button.tsx
+++ b/packages/components/filters/src/filter-menu/trigger-button/trigger-button.tsx
@@ -1,4 +1,3 @@
-import { Badge } from '../../badge';
 import { Chip } from '../chip';
 
 export type TFilterMenuTriggerButtonProps = {
@@ -9,7 +8,6 @@ const TriggerButton = (props: TFilterMenuTriggerButtonProps) => {
   return (
     <button>
       <div>{props.label}</div>
-      <Badge />
       <Chip />
     </button>
   );
diff --git a/packages/components/filters/src/filters.stories.tsx b/packages/components/filters/src/filters.stories.tsx
index 6ecb3decb3..ef8e0121f1 100644
--- a/packages/components/filters/src/filters.stories.tsx
+++ b/packages/components/filters/src/filters.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import Filters from './filters';
 
 const meta: Meta<typeof Filters> = {
@@ -13,10 +13,8 @@ const meta: Meta<typeof Filters> = {
 };
 export default meta;
 
-type Story = StoryObj<typeof Filters>;
+type Story = StoryFn<typeof Filters>;
 
-export const BasicExample: Story = {
-  args: {
-    label: 'A component for applying multiple filter controls',
-  },
+export const BasicExample: Story = () => {
+  return <Filters label={'test'} />;
 };
diff --git a/packages/components/filters/src/filters.tsx b/packages/components/filters/src/filters.tsx
index ae3fe8fdea..c3a5baeac3 100644
--- a/packages/components/filters/src/filters.tsx
+++ b/packages/components/filters/src/filters.tsx
@@ -1,3 +1,5 @@
+import { designTokens } from '@commercetools-uikit/design-system';
+
 export type TFiltersProps = {
   /**
    * This is a stub prop
@@ -6,6 +8,10 @@ export type TFiltersProps = {
 };
 
 function Filters(props: TFiltersProps) {
-  return <div>{props.label}</div>;
+  return (
+    <div style={{ display: 'flex', gap: designTokens.spacing20 }}>
+      <div>{props.label}</div>
+    </div>
+  );
 }
 export default Filters;
diff --git a/yarn.lock b/yarn.lock
index 55a22f636b..ea691bbfe5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3089,7 +3089,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@commercetools-uikit/design-system@19.12.0, @commercetools-uikit/design-system@workspace:design-system":
+"@commercetools-uikit/design-system@19.12.0, @commercetools-uikit/design-system@workspace:^, @commercetools-uikit/design-system@workspace:design-system":
   version: 0.0.0-use.local
   resolution: "@commercetools-uikit/design-system@workspace:design-system"
   dependencies:
@@ -3229,7 +3229,9 @@ __metadata:
   dependencies:
     "@babel/runtime": ^7.20.13
     "@babel/runtime-corejs3": ^7.20.13
+    "@commercetools-uikit/design-system": "workspace:^"
     "@commercetools-uikit/dropdown-menu": "workspace:^"
+    "@commercetools-uikit/utils": "workspace:^"
     "@emotion/react": ^11.10.5
     "@emotion/styled": ^11.10.5
     prop-types: 15.8.1
@@ -4668,7 +4670,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@commercetools-uikit/utils@19.12.0, @commercetools-uikit/utils@workspace:packages/utils":
+"@commercetools-uikit/utils@19.12.0, @commercetools-uikit/utils@workspace:^, @commercetools-uikit/utils@workspace:packages/utils":
   version: 0.0.0-use.local
   resolution: "@commercetools-uikit/utils@workspace:packages/utils"
   dependencies: