diff --git a/.changeset/swift-lamps-itch.md b/.changeset/swift-lamps-itch.md
new file mode 100644
index 0000000000..2bf1faca00
--- /dev/null
+++ b/.changeset/swift-lamps-itch.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**segment**: new component
diff --git a/docs/stories/components/bal-icon/theming.md b/docs/stories/components/bal-icon/theming.md
index 8a2c36c8ec..76cf09c368 100644
--- a/docs/stories/components/bal-icon/theming.md
+++ b/docs/stories/components/bal-icon/theming.md
@@ -16,6 +16,7 @@ The component can be customization by changing the CSS variables.
 | --------------------------------- |
 | `--bal-icon-color-grey`           |
 | `--bal-icon-color-grey-light`     |
+| `--bal-icon-color-grey-dark`      |
 | `--bal-icon-color-success`        |
 | `--bal-icon-color-success-dark`   |
 | `--bal-icon-color-success-darker` |
diff --git a/docs/stories/components/bal-segment/bal-segment.mdx b/docs/stories/components/bal-segment/bal-segment.mdx
new file mode 100644
index 0000000000..2c1dd3fd7f
--- /dev/null
+++ b/docs/stories/components/bal-segment/bal-segment.mdx
@@ -0,0 +1,62 @@
+import { Canvas, Meta, Markdown } from '@storybook/blocks'
+import { Banner, Lead, PlaygroundBar, StoryHeading, Footer } from '../../../.storybook/blocks'
+import * as SegmentStories from './bal-segment.stories'
+
+<Meta of={SegmentStories} />
+
+<StoryHeading of={SegmentStories.Basic} hidden></StoryHeading>
+
+<Banner of={SegmentStories} />
+
+<Lead>
+  **Segment** offers a list of options. The user can only select one option from a number of choices. It automatically
+  detects if it has enough space and changes to Vertical.
+</Lead>
+
+<Canvas of={SegmentStories.Basic} sourceState="shown" />
+
+<PlaygroundBar of={SegmentStories.Basic}></PlaygroundBar>
+
+{/* STORIES */}
+{/* ------------------------------------------------------ */}
+
+<StoryHeading of={SegmentStories.Vertical}></StoryHeading>
+
+The segment items can be displayed as a list just set `vertical`.
+
+<Canvas of={SegmentStories.Vertical} sourceState="shown" />
+
+{/* ------------------------------------------------------ */}
+
+<StoryHeading of={SegmentStories.Expanded}></StoryHeading>
+
+Set `expanded` to stretch the component over the full width.
+
+<Canvas of={SegmentStories.Expanded} sourceState="shown" />
+
+{/* ------------------------------------------------------ */}
+
+## Component API
+
+import api from './api.md?raw'
+import apiItem from './bal-segment-item/api.md?raw'
+
+<Markdown>{api}</Markdown>
+
+<Markdown>{apiItem}</Markdown>
+
+## Integration
+
+import integration from '../../snippets/integration.md?raw'
+
+<Markdown>{integration}</Markdown>
+
+import theming from './theming.md?raw'
+
+<Markdown>{theming}</Markdown>
+
+import testing from './testing.md?raw'
+
+<Markdown>{testing}</Markdown>
+
+<Footer />
diff --git a/docs/stories/components/bal-segment/bal-segment.stories.ts b/docs/stories/components/bal-segment/bal-segment.stories.ts
new file mode 100644
index 0000000000..5be8bc170c
--- /dev/null
+++ b/docs/stories/components/bal-segment/bal-segment.stories.ts
@@ -0,0 +1,53 @@
+import type { JSX } from '@baloise/ds-core'
+import type { Meta } from '@storybook/html'
+import { props, withRender, withComponentControls, StoryFactory } from '../../utils'
+
+type Args = JSX.BalSegment
+
+const meta: Meta<Args> = {
+  title: 'Components/Form/Segment',
+  args: {
+    value: 'yes',
+  },
+  argTypes: {
+    ...withComponentControls({ tag: 'bal-segment' }),
+  },
+  ...withRender(
+    ({ ...args }) => `<bal-segment ${props(args)}>
+  <bal-segment-item value="yes" label="Yes"></bal-segment-item>
+  <bal-segment-item value="no" label="No"></bal-segment-item>
+</bal-segment>`,
+  ),
+}
+
+export default meta
+
+/**
+ * STORIES
+ * ------------------------------------------------------
+ */
+
+const Story = StoryFactory<Args>(meta)
+
+export const Basic = Story()
+
+export const Vertical = Story({
+  ...withRender(
+    () => `
+<bal-segment vertical value="10000">
+  <bal-segment-item value="7000" label="max. 7’000 km">entspricht rund 186 km pro Woche</bal-segment-item>
+  <bal-segment-item value="10000" label="max. 10’000 km">entspricht rund 186 km pro Woche</bal-segment-item>
+  <bal-segment-item value="15000" label="max. 15’000 km">entspricht rund 186 km pro Woche</bal-segment-item>
+  <bal-segment-item value="20000" label="max. 20’000 km">entspricht rund 186 km pro Woche</bal-segment-item>
+  <bal-segment-item value="21000" label="mehr als 20’000 km"
+    >entspricht rund 186 km pro Woche</bal-segment-item
+  >
+</bal-segment>`,
+  ),
+})
+
+export const Expanded = Story({
+  args: {
+    expanded: true,
+  },
+})
diff --git a/docs/stories/components/bal-segment/testing.md b/docs/stories/components/bal-segment/testing.md
new file mode 100644
index 0000000000..98d460be9e
--- /dev/null
+++ b/docs/stories/components/bal-segment/testing.md
@@ -0,0 +1,12 @@
+## Testing
+
+The Baloise Design System provides a collection of custom cypress commands for the components. Moreover, some basic cypress commands like `should` or `click` have been overridden to work with the components.
+
+<a class="sb-unstyled button is-primary" href="../?path=/docs/development-testing--documentation">Go to testing guide</a>
+
+<!-- START: human documentation -->
+
+
+
+<!-- END: human documentation -->
+
diff --git a/docs/stories/components/bal-segment/theming.md b/docs/stories/components/bal-segment/theming.md
new file mode 100644
index 0000000000..4364169c36
--- /dev/null
+++ b/docs/stories/components/bal-segment/theming.md
@@ -0,0 +1,34 @@
+## Theming
+
+The component can be customization by changing the CSS variables.
+
+<a class="sb-unstyled button is-primary" href="../?path=/docs/development-theming--page">Go to theming guide</a>
+
+<!-- START: human documentation -->
+
+
+
+<!-- END: human documentation -->
+
+### Variables​
+
+| Variable                                           |
+| -------------------------------------------------- |
+| `--bal-badge-background`                           |
+| `--bal-segment-background`                         |
+| `--bal-segment-background-invalid`                 |
+| `--bal-segment-item-focus-border`                  |
+| `--bal-segment-item-text-color`                    |
+| `--bal-segment-item-text-color-checked`            |
+| `--bal-segment-item-text-color-checked-hovered`    |
+| `--bal-segment-item-text-color-checked-pressed`    |
+| `--bal-segment-item-text-color-invalid`            |
+| `--bal-segment-item-text-color-invalid-hovered`    |
+| `--bal-segment-item-text-color-invalid-pressed`    |
+| `--bal-segment-item-text-color-disabled`           |
+| `--bal-segment-item-text-color-disabled-checked`   |
+| `--bal-segment-item-divider-background`            |
+| `--bal-segment-item-divider-background-invalid`    |
+| `--bal-segment-item-indicator-background`          |
+| `--bal-segment-item-indicator-background-invalid`  |
+| `--bal-segment-item-indicator-background-disabled` |
diff --git a/e2e/cypress/component/bal-segment.cy.ts b/e2e/cypress/component/bal-segment.cy.ts
new file mode 100644
index 0000000000..41d8f52e53
--- /dev/null
+++ b/e2e/cypress/component/bal-segment.cy.ts
@@ -0,0 +1,46 @@
+import { Components } from '../support/utils'
+
+describe('bal-segment', () => {
+  it('should fire change event', () => {
+    const onBalChangeSpy = cy.spy().as('balChange')
+
+    cy.mount<Components.BalSegment, HTMLBalSegmentElementEventMap>(
+      `<bal-segment>
+        <bal-segment-item value="yes" label="Yes"></bal-segment-item>
+        <bal-segment-item value="no" label="No"></bal-segment-item>
+      </bal-segment>`,
+      {
+        props: {},
+        events: {
+          balChange: onBalChangeSpy,
+        },
+      },
+    )
+
+    cy.get('bal-segment-item').contains('Yes').closest('bal-segment-item').click()
+    cy.get('@balChange').should('have.been.calledOnce')
+    cy.get('@balChange').shouldHaveEventDetail('yes')
+  })
+
+  it('should not fire change event', () => {
+    const onBalChangeSpy = cy.spy().as('balChange')
+
+    cy.mount<Components.BalSegment, HTMLBalSegmentElementEventMap>(
+      `<bal-segment>
+        <bal-segment-item value="yes" label="Yes"></bal-segment-item>
+        <bal-segment-item value="no" label="No"></bal-segment-item>
+      </bal-segment>`,
+      {
+        props: {
+          value: 'yes',
+        },
+        events: {
+          balChange: onBalChangeSpy,
+        },
+      },
+    )
+
+    cy.get('bal-segment-item').contains('Yes').closest('bal-segment-item').click()
+    cy.get('@balChange').should('not.have.been.called')
+  })
+})
diff --git a/e2e/cypress/e2e/a11y/bal-segment.a11y.cy.ts b/e2e/cypress/e2e/a11y/bal-segment.a11y.cy.ts
new file mode 100644
index 0000000000..8e1714f7a3
--- /dev/null
+++ b/e2e/cypress/e2e/a11y/bal-segment.a11y.cy.ts
@@ -0,0 +1,11 @@
+describe('bal-segment', () => {
+  context('a11y', () => {
+    beforeEach(() => cy.platform('desktop').pageA11y('/components/bal-segment/test/bal-segment.a11y.html'))
+
+    describe('have the AA standard', () => {
+      it('basic', () => {
+        cy.getByTestId('basic').testA11y()
+      })
+    })
+  })
+})
diff --git a/e2e/cypress/e2e/visual/bal-segment.visual.cy.ts b/e2e/cypress/e2e/visual/bal-segment.visual.cy.ts
new file mode 100644
index 0000000000..0df0bc5feb
--- /dev/null
+++ b/e2e/cypress/e2e/visual/bal-segment.visual.cy.ts
@@ -0,0 +1,27 @@
+describe('bal-segment', () => {
+  beforeEach(() => cy.visit('/components/bal-segment/test/bal-segment.visual.html').waitForDesignSystem())
+
+  it('basic component', () => {
+    cy.platform('desktop')
+    cy.getByTestId('basic').testVisual('icon-desktop')
+
+    cy.platform('mobile')
+    cy.getByTestId('basic').testVisual('icon-mobile')
+  })
+
+  it('component horizontal', () => {
+    cy.platform('desktop')
+    cy.getByTestId('horizontal').testVisual('horizontal-desktop')
+
+    cy.platform('mobile')
+    cy.getByTestId('horizontal').testVisual('horizontal-mobile')
+  })
+
+  it('component vertical', () => {
+    cy.platform('desktop')
+    cy.getByTestId('vertical').testVisual('vertical-desktop')
+
+    cy.platform('mobile')
+    cy.getByTestId('vertical').testVisual('vertical-mobile')
+  })
+})
diff --git a/e2e/cypress/snapshots/base/visual/bal-segment.visual.cy.ts/horizontal-desktop.png b/e2e/cypress/snapshots/base/visual/bal-segment.visual.cy.ts/horizontal-desktop.png
new file mode 100644
index 0000000000..21205c4fdf
Binary files /dev/null and b/e2e/cypress/snapshots/base/visual/bal-segment.visual.cy.ts/horizontal-desktop.png differ
diff --git a/e2e/cypress/snapshots/base/visual/bal-segment.visual.cy.ts/horizontal-mobile.png b/e2e/cypress/snapshots/base/visual/bal-segment.visual.cy.ts/horizontal-mobile.png
new file mode 100644
index 0000000000..ca2cc8bba9
Binary files /dev/null and b/e2e/cypress/snapshots/base/visual/bal-segment.visual.cy.ts/horizontal-mobile.png differ
diff --git a/e2e/cypress/snapshots/base/visual/bal-segment.visual.cy.ts/icon-desktop.png b/e2e/cypress/snapshots/base/visual/bal-segment.visual.cy.ts/icon-desktop.png
new file mode 100644
index 0000000000..0a06cb1d83
Binary files /dev/null and b/e2e/cypress/snapshots/base/visual/bal-segment.visual.cy.ts/icon-desktop.png differ
diff --git a/e2e/cypress/snapshots/base/visual/bal-segment.visual.cy.ts/icon-mobile.png b/e2e/cypress/snapshots/base/visual/bal-segment.visual.cy.ts/icon-mobile.png
new file mode 100644
index 0000000000..ac4b2b8372
Binary files /dev/null and b/e2e/cypress/snapshots/base/visual/bal-segment.visual.cy.ts/icon-mobile.png differ
diff --git a/e2e/cypress/snapshots/base/visual/bal-segment.visual.cy.ts/vertical-desktop.png b/e2e/cypress/snapshots/base/visual/bal-segment.visual.cy.ts/vertical-desktop.png
new file mode 100644
index 0000000000..66aa40a836
Binary files /dev/null and b/e2e/cypress/snapshots/base/visual/bal-segment.visual.cy.ts/vertical-desktop.png differ
diff --git a/e2e/cypress/snapshots/base/visual/bal-segment.visual.cy.ts/vertical-mobile.png b/e2e/cypress/snapshots/base/visual/bal-segment.visual.cy.ts/vertical-mobile.png
new file mode 100644
index 0000000000..ebc3e65355
Binary files /dev/null and b/e2e/cypress/snapshots/base/visual/bal-segment.visual.cy.ts/vertical-mobile.png differ
diff --git a/e2e/package.json b/e2e/package.json
index f457594471..795444ca74 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "@baloise/ds-core": "16.4.0",
     "@baloise/ds-testing": "16.4.0",
-    "@baloise/web-app-utils": "~3.11.2",
+    "@baloise/web-app-utils": "3.15.0",
     "@cypress/mount-utils": "^4.1.0",
     "axe-core": "~4.8.4",
     "compression": "~1.7.4",
diff --git a/package-lock.json b/package-lock.json
index d975ea42e5..7bc8091d34 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -177,7 +177,7 @@
       "dependencies": {
         "@baloise/ds-core": "16.4.0",
         "@baloise/ds-testing": "16.4.0",
-        "@baloise/web-app-utils": "~3.11.2",
+        "@baloise/web-app-utils": "3.15.0",
         "@cypress/mount-utils": "^4.1.0",
         "axe-core": "~4.8.4",
         "compression": "~1.7.4",
@@ -4108,9 +4108,9 @@
       "link": true
     },
     "node_modules/@baloise/web-app-utils": {
-      "version": "3.11.2",
-      "resolved": "https://registry.npmjs.org/@baloise/web-app-utils/-/web-app-utils-3.11.2.tgz",
-      "integrity": "sha512-fgHv6p3EPbuYYanIvwTHAhx3Rj8mNYsIMKH5KRvbziYPauVrv+gbd9SWyXsxKO9Po13lMRcwExAh7rs+fNH2nA==",
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/@baloise/web-app-utils/-/web-app-utils-3.15.0.tgz",
+      "integrity": "sha512-MjXNy3HC0y2PLer3t/OPt6KBetevIXhWgjYUvpUd9TBwZSaFv3rW75qqSOfPjRUBXUtBVpILj52l3llcivzYcw==",
       "dependencies": {
         "date-fns": "^2.28.0",
         "lodash.camelcase": "^4.3.0",
@@ -48704,7 +48704,7 @@
       "dependencies": {
         "@baloise/ds-icons": "16.4.0",
         "@baloise/ds-styles": "16.4.0",
-        "@baloise/web-app-utils": "3.11.2",
+        "@baloise/web-app-utils": "3.15.0",
         "@floating-ui/dom": "~1.6.3",
         "@popperjs/core": "~2.11.4",
         "@stencil/core": "4.11.0",
diff --git a/package.json b/package.json
index 3656add626..6b7de729fb 100644
--- a/package.json
+++ b/package.json
@@ -140,5 +140,6 @@
     "vue": "~3.4.15",
     "vue-tsc": "~1.8.8",
     "zone.js": "~0.11.4"
-  }
+  },
+  "packageManager": "pnpm@8.5.0+sha1.83c41fe4ebdb61e08446f8bb68a75fb48756b330"
 }
diff --git a/packages/angular/src/bundles.ts b/packages/angular/src/bundles.ts
index 2772da378a..cd4db3b932 100644
--- a/packages/angular/src/bundles.ts
+++ b/packages/angular/src/bundles.ts
@@ -13,6 +13,8 @@ import {
   BalSelect,
   BalTextarea,
   BalTimeInput,
+  BalSegment,
+  BalFileUpload,
 } from './components'
 import { BalNgErrorComponent } from './directives/error.component'
 import {
@@ -72,6 +74,7 @@ import {
   BalNavbarMenuStart,
   BalRadio,
   BalRadioButton,
+  BalSegmentItem,
   BalSelectOption,
   BalShape,
   BalStack,
@@ -160,6 +163,8 @@ export const BalFieldBundle = [
 
 export const BalDropdownBundle = [BalDropdown, BalOptionList, BalOption] as const
 
+export const BalSegmentBundle = [BalSegment, BalSegmentItem] as const
+
 /* Component Sections */
 
 export const BalFormBundle = [
@@ -184,6 +189,8 @@ export const BalFormBundle = [
   BalNumberInput,
   ...BalRadioBundle,
   ...BalSelectBundle,
+  ...BalSegmentBundle,
+  BalFileUpload,
   BalTextarea,
   BalTimeInput,
 ] as const
@@ -263,6 +270,9 @@ export const BalComponentBundle = [
   BalStageImage,
   BalStepItem,
   BalSteps,
+  BalSegment,
+  BalSegmentItem,
+  BalFileUpload,
   BalTabItem,
   BalTabs,
   BalTag,
diff --git a/packages/angular/src/components/bal-segment.ts b/packages/angular/src/components/bal-segment.ts
new file mode 100644
index 0000000000..cc5b6a1099
--- /dev/null
+++ b/packages/angular/src/components/bal-segment.ts
@@ -0,0 +1,67 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Injector,
+  NgZone,
+  forwardRef,
+} from '@angular/core'
+import { NG_VALUE_ACCESSOR } from '@angular/forms'
+
+import type { Components } from '@baloise/ds-core'
+import { defineCustomElement } from '@baloise/ds-core/components/bal-segment'
+
+import { ProxyCmp, proxyOutputs } from '../generated/angular-component-lib/utils'
+import { ValueAccessor } from '../generated/value-accessor'
+import { BalSegmentInputs, BalSegmentMethods, BalSegmentOutputs } from '../generated/meta'
+
+const accessorProvider = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: /*@__PURE__*/ forwardRef(() => BalSegment),
+  multi: true,
+}
+
+@ProxyCmp({
+  defineCustomElementFn: defineCustomElement,
+  inputs: BalSegmentInputs,
+  methods: BalSegmentMethods,
+})
+@Component({
+  selector: 'bal-segment',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  providers: [accessorProvider],
+  standalone: true,
+  inputs: BalSegmentInputs,
+  outputs: BalSegmentOutputs,
+})
+export class BalSegment extends ValueAccessor {
+  protected el: HTMLElement
+
+  constructor(
+    c: ChangeDetectorRef,
+    r: ElementRef,
+    protected z: NgZone,
+    injector: Injector,
+  ) {
+    super(injector, r)
+    c.detach()
+    this.el = r.nativeElement
+    proxyOutputs(this, this.el, BalSegmentOutputs)
+  }
+
+  @HostListener('balChange', ['$event'])
+  handleBalChange(event: CustomEvent<any>): void {
+    this.handleValueChange(event)
+  }
+}
+
+export declare interface BalSegment extends Components.BalSegment {
+  /** Emitted when the checked property has changed. */
+  balChange: EventEmitter<BalEvents.BalSegmentCustomEvent<boolean | number | string>>
+  /** Emitted when the toggle loses focus. */
+  balBlur: EventEmitter<BalEvents.BalSegmentCustomEvent<FocusEvent>>
+}
diff --git a/packages/angular/src/components/index.ts b/packages/angular/src/components/index.ts
index fe1a2a9b97..1be133d4af 100644
--- a/packages/angular/src/components/index.ts
+++ b/packages/angular/src/components/index.ts
@@ -10,6 +10,7 @@ export * from './bal-input'
 export * from './bal-number-input'
 export * from './bal-radio-group'
 export * from './bal-select'
+export * from './bal-segment'
 export * from './bal-dropdown'
 export * from './bal-textarea'
 export * from './bal-time-input'
diff --git a/packages/core/config/stencil.bindings.angular.ts b/packages/core/config/stencil.bindings.angular.ts
index 87979219f6..a36ba32148 100644
--- a/packages/core/config/stencil.bindings.angular.ts
+++ b/packages/core/config/stencil.bindings.angular.ts
@@ -5,6 +5,7 @@ export const angularValueAccessorBindings: ValueAccessorConfig[] = [
   {
     elementSelectors: [
       'bal-radio-group',
+      'bal-segment',
       'bal-checkbox-group',
       'bal-select',
       'bal-dropdown',
@@ -46,6 +47,7 @@ export const AngularGenerator = () =>
     valueAccessorConfigs: angularValueAccessorBindings,
     excludeComponents: [
       ...docComponents,
+      'bal-segment',
       'bal-checkbox-group',
       'bal-checkbox',
       'bal-date',
diff --git a/packages/core/config/stencil.bindings.vue.ts b/packages/core/config/stencil.bindings.vue.ts
index 5419b5d7dc..88e81726a5 100644
--- a/packages/core/config/stencil.bindings.vue.ts
+++ b/packages/core/config/stencil.bindings.vue.ts
@@ -3,6 +3,7 @@ import { vueOutputTarget } from '@baloise/output-target-vue'
 export const vueComponentModels: any[] = [
   {
     elements: [
+      'bal-segment',
       'bal-radio-group',
       'bal-datepicker',
       'bal-select',
diff --git a/packages/core/package.json b/packages/core/package.json
index 02d3830894..9d1c98a4d9 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -30,7 +30,7 @@
   "dependencies": {
     "@baloise/ds-styles": "16.4.0",
     "@baloise/ds-icons": "16.4.0",
-    "@baloise/web-app-utils": "3.11.2",
+    "@baloise/web-app-utils": "3.15.0",
     "@floating-ui/dom": "~1.6.3",
     "@popperjs/core": "~2.11.4",
     "@stencil/core": "4.11.0",
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 9dad3901aa..258b208f71 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -14,6 +14,7 @@ import { BalOption } from "./utils/dropdown";
 import { OverlayEventDetail } from "./components/bal-modal/bal-modal.type";
 import { PopoverPresentOptions } from "./components/bal-popover/bal-popover";
 import { BalRadioOption } from "./components/bal-radio/bal-radio.type";
+import { SegmentValue } from "./components/bal-segment/bal-segment.types";
 import { BalStepOption } from "./components/bal-steps/bal-step.type";
 import { BalTabOption } from "./components/bal-tabs/bal-tab.type";
 export { BalConfigState } from "./utils/config";
@@ -25,6 +26,7 @@ export { BalOption } from "./utils/dropdown";
 export { OverlayEventDetail } from "./components/bal-modal/bal-modal.type";
 export { PopoverPresentOptions } from "./components/bal-popover/bal-popover";
 export { BalRadioOption } from "./components/bal-radio/bal-radio.type";
+export { SegmentValue } from "./components/bal-segment/bal-segment.types";
 export { BalStepOption } from "./components/bal-steps/bal-step.type";
 export { BalTabOption } from "./components/bal-tabs/bal-tab.type";
 export namespace Components {
@@ -1752,6 +1754,10 @@ export namespace Components {
           * The value of the for attribute must be a single id for a labeled form-related element in the same document as the <label> element. So, any given label element can be associated with only one form control.
          */
         "htmlFor"?: string;
+        /**
+          * Define the id of the native label element
+         */
+        "htmlId"?: string;
         /**
           * If `true` the component gets a invalid red style.
          */
@@ -2718,6 +2724,53 @@ export namespace Components {
          */
         "verticalOnMobile": boolean;
     }
+    interface BalSegment {
+        /**
+          * If `true`, the user cannot interact with the segment.
+         */
+        "disabled": boolean;
+        /**
+          * If `true`, the element uses the whole width
+         */
+        "expanded": boolean;
+        /**
+          * If `true`, the segment is shown red.
+         */
+        "invalid": boolean;
+        /**
+          * If `true`, and is vertical then the list height is limited and scrollable.
+         */
+        "scrollable": boolean;
+        /**
+          * the value of the segment.
+         */
+        "value"?: BalProps.BalSegmentValue;
+        /**
+          * If `true`, the segment items are presented vertical as a list.
+         */
+        "vertical": boolean;
+    }
+    interface BalSegmentItem {
+        "checked": boolean;
+        /**
+          * If `true`, the user cannot interact with the segment button.
+         */
+        "disabled": boolean;
+        "focused": boolean;
+        /**
+          * If `true`, the segment is shown in red.
+         */
+        "invalid": boolean;
+        /**
+          * Label of the segment control
+         */
+        "label": string;
+        "setFocus": () => Promise<void>;
+        /**
+          * The value of the segment button.
+         */
+        "value": SegmentValue;
+    }
     interface BalSelect {
         /**
           * If `true`, in Angular reactive forms the control will not be set invalid
@@ -3643,6 +3696,14 @@ export interface BalRadioGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBalRadioGroupElement;
 }
+export interface BalSegmentCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBalSegmentElement;
+}
+export interface BalSegmentItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBalSegmentItemElement;
+}
 export interface BalSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBalSelectElement;
@@ -4663,6 +4724,43 @@ declare global {
         prototype: HTMLBalRadioGroupElement;
         new (): HTMLBalRadioGroupElement;
     };
+    interface HTMLBalSegmentElementEventMap {
+        "balBlur": BalEvents.BalSegmentBlurDetail;
+        "balChange": BalEvents.BalSegmentChangeDetail;
+        "balSelect": BalEvents.BalSegmentChangeDetail;
+        "balVertical": BalEvents.BalSegmentVerticalDetail;
+    }
+    interface HTMLBalSegmentElement extends Components.BalSegment, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBalSegmentElementEventMap>(type: K, listener: (this: HTMLBalSegmentElement, ev: BalSegmentCustomEvent<HTMLBalSegmentElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBalSegmentElementEventMap>(type: K, listener: (this: HTMLBalSegmentElement, ev: BalSegmentCustomEvent<HTMLBalSegmentElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBalSegmentElement: {
+        prototype: HTMLBalSegmentElement;
+        new (): HTMLBalSegmentElement;
+    };
+    interface HTMLBalSegmentItemElementEventMap {
+        "balBlur": BalEvents.BalSegmentBlurDetail;
+    }
+    interface HTMLBalSegmentItemElement extends Components.BalSegmentItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBalSegmentItemElementEventMap>(type: K, listener: (this: HTMLBalSegmentItemElement, ev: BalSegmentItemCustomEvent<HTMLBalSegmentItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBalSegmentItemElementEventMap>(type: K, listener: (this: HTMLBalSegmentItemElement, ev: BalSegmentItemCustomEvent<HTMLBalSegmentItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBalSegmentItemElement: {
+        prototype: HTMLBalSegmentItemElement;
+        new (): HTMLBalSegmentItemElement;
+    };
     interface HTMLBalSelectElementEventMap {
         "balChange": BalEvents.BalSelectChangeDetail;
         "balInputClick": BalEvents.BalSelectInputClickDetail;
@@ -5045,6 +5143,8 @@ declare global {
         "bal-radio": HTMLBalRadioElement;
         "bal-radio-button": HTMLBalRadioButtonElement;
         "bal-radio-group": HTMLBalRadioGroupElement;
+        "bal-segment": HTMLBalSegmentElement;
+        "bal-segment-item": HTMLBalSegmentItemElement;
         "bal-select": HTMLBalSelectElement;
         "bal-select-option": HTMLBalSelectOptionElement;
         "bal-shape": HTMLBalShapeElement;
@@ -6866,6 +6966,10 @@ declare namespace LocalJSX {
           * The value of the for attribute must be a single id for a labeled form-related element in the same document as the <label> element. So, any given label element can be associated with only one form control.
          */
         "htmlFor"?: string;
+        /**
+          * Define the id of the native label element
+         */
+        "htmlId"?: string;
         /**
           * If `true` the component gets a invalid red style.
          */
@@ -7790,6 +7894,72 @@ declare namespace LocalJSX {
          */
         "verticalOnMobile"?: boolean;
     }
+    interface BalSegment {
+        /**
+          * If `true`, the user cannot interact with the segment.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true`, the element uses the whole width
+         */
+        "expanded"?: boolean;
+        /**
+          * If `true`, the segment is shown red.
+         */
+        "invalid"?: boolean;
+        /**
+          * Emitted when the component was touched
+         */
+        "onBalBlur"?: (event: BalSegmentCustomEvent<BalEvents.BalSegmentBlurDetail>) => void;
+        /**
+          * Emitted when the value property has changed and any dragging pointer has been released from `bal-segment`.  This event will not emit when programmatically setting the `value` property.
+         */
+        "onBalChange"?: (event: BalSegmentCustomEvent<BalEvents.BalSegmentChangeDetail>) => void;
+        /**
+          * Emitted when the value of the segment changes from user committed actions or from externally assigning a value.
+         */
+        "onBalSelect"?: (event: BalSegmentCustomEvent<BalEvents.BalSegmentChangeDetail>) => void;
+        /**
+          * Emitted when the vertical style changes
+         */
+        "onBalVertical"?: (event: BalSegmentCustomEvent<BalEvents.BalSegmentVerticalDetail>) => void;
+        /**
+          * If `true`, and is vertical then the list height is limited and scrollable.
+         */
+        "scrollable"?: boolean;
+        /**
+          * the value of the segment.
+         */
+        "value"?: BalProps.BalSegmentValue;
+        /**
+          * If `true`, the segment items are presented vertical as a list.
+         */
+        "vertical"?: boolean;
+    }
+    interface BalSegmentItem {
+        "checked"?: boolean;
+        /**
+          * If `true`, the user cannot interact with the segment button.
+         */
+        "disabled"?: boolean;
+        "focused"?: boolean;
+        /**
+          * If `true`, the segment is shown in red.
+         */
+        "invalid"?: boolean;
+        /**
+          * Label of the segment control
+         */
+        "label"?: string;
+        /**
+          * Emitted when the component was touched
+         */
+        "onBalBlur"?: (event: BalSegmentItemCustomEvent<BalEvents.BalSegmentBlurDetail>) => void;
+        /**
+          * The value of the segment button.
+         */
+        "value"?: SegmentValue;
+    }
     interface BalSelect {
         /**
           * If `true`, in Angular reactive forms the control will not be set invalid
@@ -8688,6 +8858,8 @@ declare namespace LocalJSX {
         "bal-radio": BalRadio;
         "bal-radio-button": BalRadioButton;
         "bal-radio-group": BalRadioGroup;
+        "bal-segment": BalSegment;
+        "bal-segment-item": BalSegmentItem;
         "bal-select": BalSelect;
         "bal-select-option": BalSelectOption;
         "bal-shape": BalShape;
@@ -8810,6 +8982,8 @@ declare module "@stencil/core" {
             "bal-radio": LocalJSX.BalRadio & JSXBase.HTMLAttributes<HTMLBalRadioElement>;
             "bal-radio-button": LocalJSX.BalRadioButton & JSXBase.HTMLAttributes<HTMLBalRadioButtonElement>;
             "bal-radio-group": LocalJSX.BalRadioGroup & JSXBase.HTMLAttributes<HTMLBalRadioGroupElement>;
+            "bal-segment": LocalJSX.BalSegment & JSXBase.HTMLAttributes<HTMLBalSegmentElement>;
+            "bal-segment-item": LocalJSX.BalSegmentItem & JSXBase.HTMLAttributes<HTMLBalSegmentItemElement>;
             "bal-select": LocalJSX.BalSelect & JSXBase.HTMLAttributes<HTMLBalSelectElement>;
             "bal-select-option": LocalJSX.BalSelectOption & JSXBase.HTMLAttributes<HTMLBalSelectOptionElement>;
             "bal-shape": LocalJSX.BalShape & JSXBase.HTMLAttributes<HTMLBalShapeElement>;
diff --git a/packages/core/src/components/bal-content/bal-content.interfaces.ts b/packages/core/src/components/bal-content/bal-content.interfaces.ts
index ba4e6a3275..9b64f63622 100644
--- a/packages/core/src/components/bal-content/bal-content.interfaces.ts
+++ b/packages/core/src/components/bal-content/bal-content.interfaces.ts
@@ -6,6 +6,6 @@
 namespace BalProps {
   export type BalContentLayout = 'horizontal' | 'vertical' | ''
   export type BalContentDirection = 'column' | 'row' | ''
-  export type BalContentSpace = 'xx-small' | 'x-small' | 'small' | 'normal' | ''
+  export type BalContentSpace = 'none' | 'xxx-small' | 'xx-small' | 'x-small' | 'small' | 'normal' | ''
   export type BalContentAlignment = 'start' | 'center' | 'end' | ''
 }
diff --git a/packages/core/src/components/bal-content/bal-content.sass b/packages/core/src/components/bal-content/bal-content.sass
index 647c33fa64..cef56f8c24 100644
--- a/packages/core/src/components/bal-content/bal-content.sass
+++ b/packages/core/src/components/bal-content/bal-content.sass
@@ -23,6 +23,10 @@
     flex-direction: column
   //
   // spaces
+  &--space-none
+    gap: 0rem
+  &--space-xxx-small
+    gap: 0.125rem
   &--space-xx-small
     gap: 0.25rem
   &--space-x-small
diff --git a/packages/core/src/components/bal-icon/bal-icon.interfaces.ts b/packages/core/src/components/bal-icon/bal-icon.interfaces.ts
index 2e0cf7fde5..2bfc76bc7f 100644
--- a/packages/core/src/components/bal-icon/bal-icon.interfaces.ts
+++ b/packages/core/src/components/bal-icon/bal-icon.interfaces.ts
@@ -19,6 +19,7 @@ namespace BalProps {
     | 'white'
     | 'grey'
     | 'grey-light'
+    | 'grey-dark'
     | 'primary'
     | 'primary-light'
     | 'primary-dark'
diff --git a/packages/core/src/components/bal-icon/bal-icon.sass b/packages/core/src/components/bal-icon/bal-icon.sass
index 9461251273..84377d9945 100644
--- a/packages/core/src/components/bal-icon/bal-icon.sass
+++ b/packages/core/src/components/bal-icon/bal-icon.sass
@@ -63,6 +63,8 @@
     +fillSvg(var(--bal-icon-color-grey))
   +modifier(is-grey-light)
     +fillSvg(var(--bal-icon-color-grey-light))
+  +modifier(is-grey-dark)
+    +fillSvg(var(--bal-icon-color-grey-dark))
   +modifier(is-success)
     +fillSvg(var(--bal-icon-color-success))
   +modifier(is-success-dark)
diff --git a/packages/core/src/components/bal-icon/bal-icon.vars.sass b/packages/core/src/components/bal-icon/bal-icon.vars.sass
index 724af90c74..3403e7465f 100644
--- a/packages/core/src/components/bal-icon/bal-icon.vars.sass
+++ b/packages/core/src/components/bal-icon/bal-icon.vars.sass
@@ -1,6 +1,7 @@
 /**
  * @prop --bal-icon-color-grey: Icon with the color grey.
  * @prop --bal-icon-color-grey-light: Icon with the color grey light.
+ * @prop --bal-icon-color-grey-dark: Icon with the color grey dark.
  * @prop --bal-icon-color-success: Icon with the color success.
  * @prop --bal-icon-color-success-dark: Icon with the color success.
  * @prop --bal-icon-color-success-darker: Icon with the color success.
@@ -24,6 +25,7 @@
   // icon colors
   --bal-icon-color-grey: var(--bal-color-grey-5)
   --bal-icon-color-grey-light: var(--bal-color-border-grey-dark)
+  --bal-icon-color-grey-dark: var(--bal-color-grey-dark)
   --bal-icon-color-success: var(--bal-color-success)
   --bal-icon-color-success-dark: var(--bal-color-success-5)
   --bal-icon-color-success-darker: var(--bal-color-success-6)
diff --git a/packages/core/src/components/bal-label/bal-label.tsx b/packages/core/src/components/bal-label/bal-label.tsx
index cda19d4fef..16a39bf603 100644
--- a/packages/core/src/components/bal-label/bal-label.tsx
+++ b/packages/core/src/components/bal-label/bal-label.tsx
@@ -20,8 +20,6 @@ import { BalAriaFormLinking, BalAriaForm, defaultBalAriaForm } from '../../utils
 export class Label implements ComponentInterface, Loggable, BalConfigObserver, BalElementStateInfo, BalAriaFormLinking {
   @Element() el!: HTMLElement
 
-  private inputId = `bal-lbl-${labelIds++}`
-
   @State() language: BalLanguage = defaultConfig.language
   @State() region: BalRegion = defaultConfig.region
   @State() ariaForm: BalAriaForm = defaultBalAriaForm
@@ -45,6 +43,11 @@ export class Label implements ComponentInterface, Loggable, BalConfigObserver, B
    */
   @Prop() htmlFor?: string = undefined
 
+  /**
+   * Define the id of the native label element
+   */
+  @Prop() htmlId?: string = `bal-lbl-${labelIds++}`
+
   /**
    * If `true` the form control needs to be filled. If it is set to
    * `false` an optional label is added to the label..
@@ -150,7 +153,7 @@ export class Label implements ComponentInterface, Loggable, BalConfigObserver, B
     const xxLarge = this.size === 'xx-large'
     const xxxLarge = this.size === 'xxx-large'
 
-    const id = this.ariaForm.labelId || this.inputId
+    const id = this.ariaForm.labelId || this.htmlId
     const htmlFor = this.htmlFor || this.ariaForm.controlId
 
     return (
diff --git a/packages/core/src/components/bal-progress-bar/bal-progress-bar.tsx b/packages/core/src/components/bal-progress-bar/bal-progress-bar.tsx
index 33c9eebfcf..3ead7132dd 100644
--- a/packages/core/src/components/bal-progress-bar/bal-progress-bar.tsx
+++ b/packages/core/src/components/bal-progress-bar/bal-progress-bar.tsx
@@ -2,12 +2,22 @@ import { Component, h, ComponentInterface, Host, Element, Prop, Method } from '@
 import { BEM } from '../../utils/bem'
 import { BalBreakpointObserver, BalBreakpoints, ListenToBreakpoints, balBreakpoints } from '../../utils/breakpoints'
 import type { BalConfigObserver, BalConfigState } from '../../utils/config'
+import {
+  BalResizeInfo,
+  BalResizeObserver,
+  BalWindowResizeObserver,
+  ListenToResize,
+  ListenToWindowResize,
+} from '../../utils/resize'
+import { raf } from '../../utils/helpers'
 
 @Component({
   tag: 'bal-progress-bar',
   styleUrl: 'bal-progress-bar.sass',
 })
-export class ProgressBar implements ComponentInterface, BalConfigObserver, BalBreakpointObserver {
+export class ProgressBar
+  implements ComponentInterface, BalConfigObserver, BalBreakpointObserver, BalWindowResizeObserver
+{
   @Element() el!: HTMLElement
 
   private animated = true
@@ -53,6 +63,11 @@ export class ProgressBar implements ComponentInterface, BalConfigObserver, BalBr
     this.updateProgress()
   }
 
+  @ListenToWindowResize()
+  windowResizeListener() {
+    this.updateProgress()
+  }
+
   @Method()
   async configChanged(state: BalConfigState) {
     this.animated = state.animated
@@ -65,16 +80,18 @@ export class ProgressBar implements ComponentInterface, BalConfigObserver, BalBr
 
   private updateProgress() {
     if (this.lineEl) {
-      const maxWidth = this.el.clientWidth
-      const value = Math.max(0, Math.min(100, this.value))
-      const lineWidth = (maxWidth / 100) * value
-      this.lineEl.style.width = `${lineWidth}px`
-
-      if (value === 100) {
-        this.lineEl.classList.add('bal-progress-bar__line--full')
-      } else {
-        this.lineEl.classList.remove('bal-progress-bar__line--full')
-      }
+      raf(() => {
+        const maxWidth = this.el.clientWidth
+        const value = Math.max(0, Math.min(100, this.value))
+        const lineWidth = (maxWidth / 100) * value
+        this.lineEl.style.width = `${lineWidth}px`
+
+        if (value === 100) {
+          this.lineEl.classList.add('bal-progress-bar__line--full')
+        } else {
+          this.lineEl.classList.remove('bal-progress-bar__line--full')
+        }
+      })
     }
   }
 
diff --git a/packages/core/src/components/bal-segment/bal-segment-item/bal-segment-item.sass b/packages/core/src/components/bal-segment/bal-segment-item/bal-segment-item.sass
new file mode 100644
index 0000000000..39c1751bdb
--- /dev/null
+++ b/packages/core/src/components/bal-segment/bal-segment-item/bal-segment-item.sass
@@ -0,0 +1,238 @@
+@import '@baloise/ds-styles/sass/mixins'
+@import '../bal-segment.vars'
+
+// Segment
+// --------------------------------------------------
+.bal-segment-item
+  display: block
+  position: relative
+  height: auto
+
+  text-decoration: none
+  text-overflow: ellipsis
+  text-decoration: none
+  text-overflow: ellipsis
+
+  white-space: nowrap
+
+  cursor: pointer
+
+  grid-row: 1
+
+  font-kerning: none
+
+  &--disabled
+    cursor: default !important
+    pointer-events: none !important
+
+// Segment Button
+// --------------------------------------------------
+.bal-segment-item__button
+  +unselectable
+
+  min-height: 2.5rem
+  min-width: 3rem
+
+  display: flex
+  align-items: center
+  justify-content: center
+  flex-grow: 1
+
+  padding-top: 0.375rem
+  padding-bottom: 0.375rem
+  padding-left: 20px
+  padding-right: 20px
+
+  outline: none
+  border-color: transparent
+  border-width: var(--bal-border-width-normal)
+  border-style: solid
+  border-radius: var(--bal-radius-normal)
+  background: transparent
+
+  font-size: var(--bal-text-size-normal)
+  font-weight: var(--bal-font-weight-bold)
+  color: var(--bal-segment-item-text-color)
+
+  overflow: hidden
+  position: relative
+
+  contain: content
+  pointer-events: none
+  cursor: pointer
+  z-index: 2
+
+  &--vertical
+    padding-left: 0.75rem
+    padding-right: 0.75rem
+
+  span
+    font-size: var(--bal-text-size-small)
+    font-weight: var(--bal-font-weight-regular)
+
+.bal-segment-item__button
+  will-change: color, padding
+  transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1)
+  transition: padding 160ms cubic-bezier(0.4, 0, 0.2, 1)
+
+// Divider
+// Line between two not checked items
+// --------------------------------------------------
+
+.bal-segment-item:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after
+  content: ''
+  position: absolute
+  background: var(--bal-segment-item-divider-background)
+  border-radius: var(--bal-radius-normal)
+
+.bal-segment-item:not(.bal-segment-item--vertical):not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after
+  top: 2px
+  bottom: 2px
+  right: -1px
+  width: 2px
+
+.bal-segment-item.bal-segment-item--vertical:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after
+  left: 2px
+  right: 2px
+  bottom: -1px
+  height: 2px
+
+.bal-segment-item--invalid:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after
+  background: var(--bal-segment-item-divider-background-invalid)
+
+// Indicator
+// Background of the checked item
+// --------------------------------------------------
+
+.bal-segment-item__indicator
+  transform-origin: left
+  position: absolute
+  opacity: 0
+  box-sizing: border-box
+  pointer-events: none
+  border-radius: var(--bal-radius-normal)
+  background: var(--bal-segment-item-indicator-background)
+  top: 0
+  left: 0
+
+.bal-segment-item__indicator--vertical
+  transform-origin: top
+
+.bal-segment-item__indicator--invalid
+  background: var(--bal-segment-item-indicator-background-invalid)
+
+.bal-segment-item__indicator--background
+  min-width: 100%
+  min-height: 100%
+  transform: none
+  pointer-events: none
+
+.bal-segment-item__indicator--animated
+  will-change: transform, opacity, top, bottom, left, right, min-width, min-heigth
+  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), min-width 100ms ease, min-height 100ms ease, top 100ms ease, left 100ms ease, bottom 100ms ease, right 100ms ease
+
+.bal-segment-item__indicator--checked
+  opacity: 1
+
+.bal-segment-item:active
+  .bal-segment-item__indicator
+    min-width: calc(100% - 4px)
+    min-height: calc(100% - 4px)
+    top: 2px !important
+    bottom: 2px !important
+    left: 2px !important
+    right: 2px !important
+
+// Indicator Icon
+// Check icon of the checked item
+// --------------------------------------------------
+
+.bal-segment-item__button__icon
+  position: absolute !important
+  opacity: 0
+  width: 0 !important
+  transform: translateX(0.1rem)
+  pointer-events: none !important
+  cursor: inherit
+  will-change: transform, opacity
+
+.bal-segment-item__button__icon:not(.bal-segment-item__button__icon--vertical)
+  left: 10px
+
+.bal-segment-item__button__icon--vertical
+  right: 10px
+
+.bal-segment-item__button__icon--animated
+  opacity: 1
+  width: .875rem !important
+  transform: translateX(-4px)
+  transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1), transform 260ms cubic-bezier(0.4, 0, 0.2, 1)
+
+// Checked
+// --------------------------------------------------
+
+.bal-segment-item__button--checked
+  color: var(--bal-segment-item-text-color-checked)
+  padding-right: 40px
+
+.bal-segment-item__button--checked:not(.bal-segment-item__button--vertical)
+  padding-left: 26px
+  padding-right: 12px
+
+// Hover & Pressed
+// --------------------------------------------------
+
+.bal-segment-item:not(.bal-segment-item--disabled)
+  +hover
+    &:hover
+      .bal-segment-item__button:not(.bal-segment-item__button--checked)
+        color: var(--bal-segment-item-text-color-checked-hovered)
+  &:active
+    .bal-segment-item__button:not(.bal-segment-item__button--checked)
+      color: var(--bal-segment-item-text-color-checked-pressed)
+
+// Focused
+// --------------------------------------------------
+
+.bal-segment--keyboard
+  .bal-segment-item__button:not(.bal-segment-item__button--disabled):focus-visible,
+  .bal-segment-item__button--focused:not(.bal-segment-item__button--disabled)
+    border-color: var(--bal-segment-item-focus-border)
+    border-width: var(--bal-border-width-normal)
+    border-style: solid
+    transition: border 300ms ease-in-out
+
+// Invalid
+// --------------------------------------------------
+
+.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled)
+  .bal-segment-item__button:not(.bal-segment-item__button--checked)
+    color: var(--bal-segment-item-text-color-invalid)
+  +hover
+    &:hover
+      .bal-segment-item__button:not(.bal-segment-item__button--checked)
+        color: var(--bal-segment-item-text-color-invalid-hovered)
+  &:active
+    .bal-segment-item__button:not(.bal-segment-item__button--checked)
+      color: var(--bal-segment-item-text-color-invalid-pressed)
+
+.bal-segment-item__button--invalid.bal-segment-item__button--checked
+  color: var(--bal-color-text-white)
+
+// Disabled
+// --------------------------------------------------
+
+.bal-segment-item__button--disabled
+  background: transparent
+  color: var(--bal-segment-item-text-color-disabled)
+
+.bal-segment-item__button--disabled.bal-segment-item__button--checked
+  background: var(--bal-segment-item-indicator-background-disabled)
+  color: var(--bal-segment-item-text-color-disabled-checked)
+
+// Hidden
+// --------------------------------------------------
+
+// .bal-segment-item__button__icon--hidden,
+.bal-segment-item__button__slot--hidden
+  display: none !important
diff --git a/packages/core/src/components/bal-segment/bal-segment-item/bal-segment-item.tsx b/packages/core/src/components/bal-segment/bal-segment-item/bal-segment-item.tsx
new file mode 100644
index 0000000000..30c5cce25e
--- /dev/null
+++ b/packages/core/src/components/bal-segment/bal-segment-item/bal-segment-item.tsx
@@ -0,0 +1,280 @@
+import {
+  Component,
+  h,
+  ComponentInterface,
+  Host,
+  Element,
+  Prop,
+  State,
+  Watch,
+  Method,
+  EventEmitter,
+  Event,
+} from '@stencil/core'
+import { BEM } from '../../../utils/bem'
+import { SegmentValue } from '../bal-segment.types'
+import { Attributes, inheritAttributes } from '../../../utils/attributes'
+import { addEventListener, raf, removeEventListener } from '../../../utils/helpers'
+
+let ids = 0
+
+@Component({
+  tag: 'bal-segment-item',
+  styleUrl: 'bal-segment-item.sass',
+})
+export class SegmentItem implements ComponentInterface {
+  private segmentEl: HTMLBalSegmentElement | null = null
+  private nativeEl: HTMLButtonElement | undefined
+  private inheritedAttributes: Attributes = {}
+  private id = ids++
+
+  @Element() el!: HTMLElement
+
+  @State() hasSlotContent = false
+  @State() isFocusable = false
+  @State() isVertical = false
+
+  /**
+   * If `true`, the user cannot interact with the segment button.
+   */
+  @Prop({ mutable: true }) disabled = false
+
+  /**
+   * If `true`, the segment is shown in red.
+   */
+  @Prop({ mutable: true }) invalid = false
+
+  /**
+   * @internal
+   * Sets focus state for key navigation
+   */
+  @Prop({ mutable: true }) focused = false
+
+  /**
+   * @internal
+   * Sets checked state for key navigation
+   */
+  @Prop({ mutable: true }) checked = false
+
+  /**
+   * Label of the segment control
+   */
+  @Prop() label = ''
+
+  /**
+   * The value of the segment button.
+   */
+  @Prop() value: SegmentValue = 'bal-si-' + this.id
+  @Watch('value')
+  valueChanged() {
+    this.updateState()
+  }
+
+  /**
+   * Emitted when the component was touched
+   */
+  @Event() balBlur!: EventEmitter<BalEvents.BalSegmentBlurDetail>
+
+  connectedCallback() {
+    const segmentEl = (this.segmentEl = this.el.closest('bal-segment'))
+    if (segmentEl) {
+      this.updateState()
+      addEventListener(segmentEl, 'balSelect', this.updateState)
+      addEventListener(segmentEl, 'balVertical', this.updateVertical)
+    }
+  }
+
+  disconnectedCallback() {
+    const segmentEl = this.segmentEl
+    if (segmentEl) {
+      removeEventListener(segmentEl, 'balSelect', this.updateState)
+      removeEventListener(segmentEl, 'balVertical', this.updateVertical)
+      this.segmentEl = null
+    }
+  }
+
+  componentWillLoad() {
+    this.inheritedAttributes = {
+      ...inheritAttributes(this.el, ['aria-label']),
+    }
+  }
+
+  componentDidLoad() {
+    raf(() => this.checkSlotContent())
+  }
+
+  /**
+   * @internal
+   * Focuses the native <button> element
+   * inside of ion-segment-button.
+   */
+  @Method()
+  async setFocus() {
+    const { nativeEl } = this
+
+    if (nativeEl !== undefined) {
+      nativeEl.focus()
+    }
+  }
+
+  private updateVertical = (ev: BalEvents.BalSegmentVertical) => {
+    this.isVertical = ev.detail
+  }
+
+  private updateState = () => {
+    const { segmentEl } = this
+
+    if (segmentEl) {
+      if (segmentEl.value === '' || segmentEl.value === undefined || segmentEl.value === null) {
+        const items = this.items
+        if (items.length > 0) {
+          const first = items[0]
+          this.isFocusable = first === this.el
+        }
+      } else {
+        this.checked = segmentEl.value === this.value
+        this.isFocusable = segmentEl.value === this.value
+      }
+
+      if (segmentEl.disabled) {
+        this.disabled = true
+      }
+    }
+  }
+
+  private get items() {
+    return this.allItems.filter(item => !item.disabled)
+  }
+
+  private get allItems() {
+    const { segmentEl } = this
+    if (segmentEl) {
+      return Array.from(segmentEl.querySelectorAll('bal-segment-item'))
+    }
+    return []
+  }
+
+  private isFirst() {
+    const { segmentEl } = this
+    let items = this.items
+
+    if (segmentEl && segmentEl.disabled) {
+      items = this.allItems
+    }
+
+    if (items.length > 0) {
+      const first = items[0]
+      return first === this.el
+    }
+
+    return false
+  }
+
+  private isLast() {
+    const { segmentEl } = this
+    let items = this.items
+
+    if (segmentEl && segmentEl.disabled) {
+      items = this.allItems
+    }
+
+    if (items.length > 0) {
+      const last = items[items.length - 1]
+      return last === this.el
+    }
+
+    return false
+  }
+
+  private checkSlotContent() {
+    const slot = this.el.querySelector('[part="slot"]') as HTMLSpanElement
+    const children = slot ? slot.innerHTML.trim() : ''
+    this.hasSlotContent = children.length > 0
+  }
+
+  private onSlottedItemsChange = () => {
+    /**
+     * When the slotted segment buttons change we need to
+     * ensure that the new segment buttons are checked if
+     * the value matches the segment button value.
+     */
+    this.checkSlotContent()
+  }
+
+  render() {
+    const { checked, focused, segmentEl, label, isFocusable } = this
+    const block = BEM.block('segment-item')
+    const buttonBem = block.element('button')
+    const indicatorBem = block.element('indicator')
+
+    const invalid = this.invalid || (segmentEl && segmentEl.invalid)
+    const disabled = this.disabled || (segmentEl && segmentEl.disabled)
+    const vertical = this.isVertical
+
+    return (
+      <Host
+        class={{
+          ...block.class(),
+          ...block.modifier('vertical').class(vertical),
+          ...block.modifier('disabled').class(disabled),
+          ...block.modifier('checked').class(checked),
+          ...block.modifier('invalid').class(invalid),
+          ...block.modifier('line').class(!this.isFirst() && !checked),
+          ...block.modifier('last').class(this.isLast() && !checked),
+        }}
+      >
+        <button
+          role="radio"
+          aria-checked={checked ? 'true' : 'false'}
+          class={{
+            ...buttonBem.class(),
+            ...buttonBem.modifier('checked').class(checked),
+            ...buttonBem.modifier('invalid').class(invalid),
+            ...buttonBem.modifier('disabled').class(disabled),
+            ...buttonBem.modifier('focused').class(focused),
+            ...buttonBem.modifier('vertical').class(vertical),
+          }}
+          aria-labelledby={`bal-si-${this.id}-label`}
+          type={'button'}
+          tabIndex={isFocusable ? 0 : -1}
+          part="native"
+          onBlur={ev => this.balBlur.emit(ev)}
+          disabled={disabled}
+          ref={el => (this.nativeEl = el)}
+          {...this.inheritedAttributes}
+        >
+          <bal-icon
+            name="check"
+            size="small"
+            class={{
+              ...buttonBem.element('icon').class(),
+              ...buttonBem.element('icon').modifier('animated').class(checked),
+              ...buttonBem.element('icon').modifier('vertical').class(vertical),
+            }}
+            color={disabled ? 'grey-dark' : invalid ? 'white' : 'primary'}
+          ></bal-icon>
+          <bal-stack space="x-small" layout={'horizontal'}>
+            <bal-content space="none">
+              <bal-label htmlId={`bal-si-${this.id}-label`}>{label}</bal-label>
+              <span part="slot" class={{ ...buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent) }}>
+                {' '}
+                <slot onSlotchange={this.onSlottedItemsChange}></slot>
+              </span>
+            </bal-content>
+          </bal-stack>
+        </button>
+        <div
+          class={{
+            ...indicatorBem.class(),
+            ...indicatorBem.modifier('animated').class(),
+            ...indicatorBem.modifier('background').class(),
+            ...indicatorBem.modifier('disabled').class(disabled),
+            ...indicatorBem.modifier('invalid').class(invalid),
+            ...indicatorBem.modifier('checked').class(checked),
+            ...indicatorBem.modifier('vertical').class(vertical),
+          }}
+        ></div>
+      </Host>
+    )
+  }
+}
diff --git a/packages/core/src/components/bal-segment/bal-segment.interfaces.ts b/packages/core/src/components/bal-segment/bal-segment.interfaces.ts
new file mode 100644
index 0000000000..97927b1688
--- /dev/null
+++ b/packages/core/src/components/bal-segment/bal-segment.interfaces.ts
@@ -0,0 +1,29 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../interfaces.d.ts" />
+
+namespace BalProps {
+  export type BalSegmentValue = string | number
+}
+
+namespace BalEvents {
+  export interface BalSegmentCustomEvent<T> extends CustomEvent<T> {
+    detail: T
+    target: HTMLBalSegmentElement
+  }
+
+  export interface BalSegmentItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T
+    target: HTMLBalSegmentItemElement
+  }
+
+  export type BalSegmentChangeDetail = BalProps.BalSegmentValue
+  export type BalSegmentChange = BalSegmentCustomEvent<BalSegmentChangeDetail>
+
+  export type BalSegmentVerticalDetail = boolean
+  export type BalSegmentVertical = BalSegmentCustomEvent<BalSegmentVerticalDetail>
+
+  export type BalSegmentBlurDetail = FocusEvent
+  export type BalSegmentBlur = BalSegmentCustomEvent<BalSegmentBlurDetail>
+}
diff --git a/packages/core/src/components/bal-segment/bal-segment.sass b/packages/core/src/components/bal-segment/bal-segment.sass
new file mode 100644
index 0000000000..d6449d2fda
--- /dev/null
+++ b/packages/core/src/components/bal-segment/bal-segment.sass
@@ -0,0 +1,41 @@
+@import '@baloise/ds-styles/sass/mixins'
+@import './bal-segment.vars'
+
+// Segment
+// --------------------------------------------------
+.bal-segment
+  display: flex
+  background: var(--bal-segment-background)
+  border-radius: var(--bal-radius-normal)
+  gap: 0.125rem
+  gap: 0.125rem
+  padding: 0.25rem
+  width: fit-content
+
+.bal-segment--invalid
+  background: var(--bal-segment-background-invalid)
+
+.bal-segment--vertical
+  flex-direction: column
+  width: 100%
+  .bal-segment-item__button
+    width: 100%
+    flex: 1
+
+.bal-segment--vertical.bal-segment--scrollable
+  overflow: auto
+  max-height: 240px
+
+.bal-segment--expanded
+  width: 100%
+  min-width: 100%
+  justify-content: flex-start
+  align-items: center
+
+  .bal-segment-item,
+  .bal-segment-item > button
+    flex: 1
+    width: 100%
+    .bal-content
+      justify-content: center
+      align-items: center
diff --git a/packages/core/src/components/bal-segment/bal-segment.tsx b/packages/core/src/components/bal-segment/bal-segment.tsx
new file mode 100644
index 0000000000..42f939dc03
--- /dev/null
+++ b/packages/core/src/components/bal-segment/bal-segment.tsx
@@ -0,0 +1,425 @@
+import {
+  Component,
+  h,
+  ComponentInterface,
+  Host,
+  Element,
+  Prop,
+  Event,
+  EventEmitter,
+  Watch,
+  State,
+  Listen,
+  writeTask,
+} from '@stencil/core'
+import { BEM } from '../../utils/bem'
+import { SegmentValue } from './bal-segment.types'
+import { Logger, LogInstance } from '../../utils/log'
+import {
+  isArrowDownKey,
+  isArrowUpKey,
+  isSpaceKey,
+  isHomeKey,
+  isEndKey,
+  isArrowLeftKey,
+  isArrowRightKey,
+} from '@baloise/web-app-utils'
+import { stopEventBubbling } from '../../utils/form-input'
+import { FOCUS_KEYS } from '../../utils/focus-visible'
+import { ListenToWindowResize, BalWindowResizeObserver } from '../../utils/resize'
+import { raf } from '../../utils/helpers'
+import { BalBreakpointObserver, BalBreakpoints } from '../../interfaces'
+import { ListenToBreakpoints } from '../../utils/breakpoints'
+
+@Component({
+  tag: 'bal-segment',
+  styleUrl: 'bal-segment.sass',
+})
+export class Segment implements ComponentInterface, BalWindowResizeObserver, BalBreakpointObserver {
+  @Element() el!: HTMLElement
+
+  log!: LogInstance
+
+  @Logger('bal-segment')
+  createLogger(log: LogInstance) {
+    this.log = log
+  }
+
+  @State() focusedValue?: SegmentValue
+  @State() keyboardMode = true
+  @State() isVertical = false
+  @State() isMobile = false
+  @State() maxWidth = 0
+
+  /**
+   * PUBLIC PROPERTY API
+   * ------------------------------------------------------
+   */
+
+  /**
+   * If `true`, the segment is shown red.
+   */
+  @Prop() invalid = false
+
+  /**
+   * If `true`, the user cannot interact with the segment.
+   */
+  @Prop() disabled = false
+
+  /**
+   * If `true`, the segment items are presented vertical as a list.
+   */
+  @Prop() vertical = false
+
+  /**
+   * If `true`, and is vertical then the list height is limited and scrollable.
+   */
+  @Prop() scrollable = false
+
+  /**
+   * If `true`, the element uses the whole width
+   */
+  @Prop() expanded = false
+
+  /**
+   * the value of the segment.
+   */
+  @Prop({ mutable: true }) value?: BalProps.BalSegmentValue
+  @Watch('value')
+  protected valueChanged(value: BalProps.BalSegmentValue | undefined) {
+    /**
+     * `balSelect` is emitted every time the value changes (internal or external changes).
+     * Used by `bal-segment-item` to determine if the button should be checked.
+     */
+    this.balSelect.emit(value)
+  }
+
+  /**
+   * Emitted when the component was touched
+   */
+  @Event() balBlur!: EventEmitter<BalEvents.BalSegmentBlurDetail>
+
+  /**
+   * Emitted when the value property has changed and any dragging pointer has been released from `bal-segment`.
+   *
+   * This event will not emit when programmatically setting the `value` property.
+   */
+  @Event() balChange!: EventEmitter<BalEvents.BalSegmentChangeDetail>
+
+  /**
+   * Emitted when the value of the segment changes from user committed actions
+   * or from externally assigning a value.
+   *
+   * @internal
+   */
+  @Event() balSelect!: EventEmitter<BalEvents.BalSegmentChangeDetail>
+
+  /**
+   * Emitted when the vertical style changes
+   *
+   * @internal
+   */
+  @Event() balVertical!: EventEmitter<BalEvents.BalSegmentVerticalDetail>
+
+  /**
+   * LIFECYCLE
+   * ------------------------------------------------------
+   */
+
+  connectedCallback() {
+    this.el.addEventListener('touchstart', this.onPointerDown)
+    this.el.addEventListener('mousedown', this.onPointerDown)
+  }
+
+  disconnectedCallback() {
+    this.el.removeEventListener('touchstart', this.onPointerDown)
+    this.el.removeEventListener('mousedown', this.onPointerDown)
+  }
+
+  async componentDidLoad() {
+    this.setCheckedClasses()
+    this.defineWidth()
+  }
+
+  /**
+   * LISTENERS
+   * ------------------------------------------------------
+   */
+
+  @ListenToBreakpoints()
+  breakpointListener(breakpoints: BalBreakpoints): void {
+    this.isMobile = breakpoints.mobile
+  }
+
+  @ListenToWindowResize()
+  windowResizeListener(): void {
+    if (this.vertical === false && this.maxWidth > 0) {
+      const parent = this.el.parentElement.getBoundingClientRect()
+
+      if (parent.width < this.maxWidth) {
+        //
+        // element in horizontal is to big
+        this.emitVerticalChange(true)
+      } else {
+        //
+        // element has enough space in parent element
+        this.emitVerticalChange(false)
+      }
+    } else {
+      this.emitVerticalChange(true)
+    }
+  }
+
+  @Listen('balBlur')
+  listenOnBalBlur(ev: BalEvents.BalSegmentBlur) {
+    stopEventBubbling(ev)
+    this.balBlur.emit(ev.detail)
+  }
+
+  @Listen('keydown')
+  listenOnKeyDown(ev: KeyboardEvent) {
+    this.keyboardMode = FOCUS_KEYS.includes(ev.key)
+
+    let current: undefined | HTMLBalSegmentItemElement
+
+    if (isSpaceKey(ev)) {
+      stopEventBubbling(ev)
+      current = this.getSegmentItem('current')
+    } else if (isArrowUpKey(ev) || isArrowLeftKey(ev)) {
+      stopEventBubbling(ev)
+      current = this.getSegmentItem('previous')
+    } else if (isArrowDownKey(ev) || isArrowRightKey(ev)) {
+      stopEventBubbling(ev)
+      current = this.getSegmentItem('next')
+    } else if (isHomeKey(ev)) {
+      stopEventBubbling(ev)
+      current = this.getSegmentItem('first')
+    } else if (isEndKey(ev)) {
+      stopEventBubbling(ev)
+      current = this.getSegmentItem('last')
+    }
+
+    if (!current) {
+      return
+    }
+
+    const previous = this.checked
+    if (current !== previous) {
+      this.checkButton(previous, current)
+      this.emitValueChange()
+    }
+
+    if (current) {
+      current.setFocus()
+    }
+  }
+
+  /**
+   * GETTERS
+   * ------------------------------------------------------
+   */
+
+  private get items() {
+    return Array.from(this.el.querySelectorAll('bal-segment-item'))
+  }
+
+  private get checked() {
+    return this.items.find(item => item.value === this.value)
+  }
+
+  private getSegmentItem = (
+    selector: 'first' | 'last' | 'next' | 'previous' | 'current',
+  ): HTMLBalSegmentItemElement | null => {
+    const items = this.items.filter(item => !item.disabled)
+    const currIndex = items.findIndex(item => item === document.activeElement.closest('bal-segment-item'))
+
+    switch (selector) {
+      case 'current':
+        return items[currIndex]
+      case 'first':
+        return items[0]
+
+      case 'last':
+        return items[items.length - 1]
+      case 'next':
+        return items[currIndex + 1] ?? items[0]
+      case 'previous':
+        return items[currIndex - 1] ?? items[items.length - 1]
+      default:
+        return null
+    }
+  }
+
+  /**
+   * PRIVATE METHODS
+   * ------------------------------------------------------
+   */
+
+  private emitValueChange() {
+    this.balChange.emit(this.value)
+  }
+
+  private emitVerticalChange(isVertical: boolean) {
+    if (this.isVertical !== isVertical) {
+      this.isVertical = isVertical
+      this.balVertical.emit(this.isVertical)
+    }
+  }
+
+  private defineWidth() {
+    raf(() => {
+      if (this.isVertical === false) {
+        const childRect = this.el.getBoundingClientRect()
+        this.maxWidth = childRect.width
+      }
+      this.windowResizeListener()
+    })
+  }
+
+  /**
+   * PRIVATE EVENT HANDLERS
+   * ------------------------------------------------------
+   */
+
+  private onPointerDown = () => {
+    this.keyboardMode = false
+  }
+
+  private onSlottedItemsChange = () => {
+    /**
+     * When the slotted segment buttons change we need to
+     * ensure that the new segment buttons are checked if
+     * the value matches the segment button value.
+     */
+    this.valueChanged(this.value)
+    this.defineWidth()
+  }
+
+  private onClick = (ev: Event) => {
+    if (this.disabled) {
+      return
+    }
+
+    const current = ev.target as HTMLBalSegmentItemElement
+    const previous = this.checked
+
+    // If the current element is a segment then that means
+    // the user tried to swipe to a segment button and
+    // click a segment button at the same time so we should
+    // not update the checked segment button
+    if (current.tagName === 'BAL-SEGMENT') {
+      return
+    }
+
+    if (current && current.setFocus) {
+      current.setFocus()
+    }
+
+    if (previous) {
+      this.checkButton(previous, current)
+    } else {
+      this.setCheckedClasses()
+      this.checkButton(current, current)
+    }
+
+    if (current !== previous) {
+      this.emitValueChange()
+    }
+  }
+
+  private getIndicator(item: HTMLBalSegmentItemElement): HTMLDivElement | null {
+    const root = item.shadowRoot || item
+    return root.querySelector('.bal-segment-item__indicator')
+  }
+
+  private checkButton(previous: HTMLBalSegmentItemElement, current: HTMLBalSegmentItemElement) {
+    const previousIndicator = this.getIndicator(previous)
+    const currentIndicator = this.getIndicator(current)
+
+    if (previousIndicator === null || currentIndicator === null) {
+      return
+    }
+
+    const previousClientRect = previousIndicator.getBoundingClientRect()
+    const currentClientRect = currentIndicator.getBoundingClientRect()
+
+    const widthDelta = previousClientRect.width / currentClientRect.width
+    const xPosition = previousClientRect.left - currentClientRect.left
+
+    // Scale the indicator width to match the previous indicator width
+    // and translate it on top of the previous indicator
+    let transform = `translate3d(${xPosition}px, 0, 0) scaleX(${widthDelta})`
+
+    if (this.isVertical) {
+      const heightDelta = previousClientRect.height / currentClientRect.height
+      const yPosition = previousClientRect.top - currentClientRect.top
+
+      // Scale the indicator width to match the previous indicator width
+      // and translate it on top of the previous indicator
+      transform = `translate3d(0, ${yPosition}px, 0) scaleY(${heightDelta})`
+    }
+
+    writeTask(() => {
+      // Remove the transition before positioning on top of the previous indicator
+      currentIndicator.classList.remove('bal-segment-item__indicator--animated')
+      currentIndicator.style.setProperty('transform', transform)
+
+      // Force a repaint to ensure the transform happens
+      currentIndicator.getBoundingClientRect()
+
+      // Add the transition to move the indicator into place
+      currentIndicator.classList.add('bal-segment-item__indicator--animated')
+
+      // Remove the transform to slide the indicator back to the button clicked
+      currentIndicator.style.setProperty('transform', '')
+    })
+
+    this.value = current.value
+    this.setCheckedClasses()
+  }
+
+  private setCheckedClasses() {
+    const items = this.items
+    const index = items.findIndex(item => item.value === this.value)
+    const next = index + 1
+    const previous = index - 1
+
+    for (const item of items) {
+      item.classList.remove('bal-segment-item--after-checked')
+      item.classList.remove('bal-segment-item--before-checked')
+    }
+    if (next < items.length) {
+      items[next].classList.add('bal-segment-item--after-checked')
+    }
+    if (previous < items.length && previous >= 0) {
+      items[previous].classList.add('bal-segment-item--before-checked')
+    }
+  }
+
+  /**
+   * RENDER
+   * ------------------------------------------------------
+   */
+
+  render() {
+    const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile } = this
+    const block = BEM.block('segment')
+
+    return (
+      <Host
+        role="radiogroup"
+        class={{
+          ...block.class(),
+          ...block.modifier('invalid').class(invalid),
+          ...block.modifier('vertical').class(isVertical),
+          ...block.modifier('scrollable').class(scrollable),
+          ...block.modifier('keyboard').class(keyboardMode),
+          ...block.modifier('expanded').class((expanded || isMobile) && !isVertical),
+        }}
+        onClick={this.onClick}
+      >
+        <slot onSlotchange={this.onSlottedItemsChange}></slot>
+      </Host>
+    )
+  }
+}
diff --git a/packages/core/src/components/bal-segment/bal-segment.types.ts b/packages/core/src/components/bal-segment/bal-segment.types.ts
new file mode 100644
index 0000000000..2c90e4b302
--- /dev/null
+++ b/packages/core/src/components/bal-segment/bal-segment.types.ts
@@ -0,0 +1 @@
+export type SegmentValue = string | number
diff --git a/packages/core/src/components/bal-segment/bal-segment.vars.sass b/packages/core/src/components/bal-segment/bal-segment.vars.sass
new file mode 100644
index 0000000000..ab815dfb5d
--- /dev/null
+++ b/packages/core/src/components/bal-segment/bal-segment.vars.sass
@@ -0,0 +1,47 @@
+/**
+ * @prop --bal-badge-background: TBD
+ * @prop --bal-segment-background: TBD
+ * @prop --bal-segment-background-invalid: TBD
+ * @prop --bal-segment-item-focus-border: TBD
+ * @prop --bal-segment-item-text-color: TBD
+ * @prop --bal-segment-item-text-color-checked: TBD
+ * @prop --bal-segment-item-text-color-checked-hovered: TBD
+ * @prop --bal-segment-item-text-color-checked-pressed: TBD
+ * @prop --bal-segment-item-text-color-invalid: TBD
+ * @prop --bal-segment-item-text-color-invalid-hovered: TBD
+ * @prop --bal-segment-item-text-color-invalid-pressed: TBD
+ * @prop --bal-segment-item-text-color-disabled: TBD
+ * @prop --bal-segment-item-text-color-disabled-checked: TBD
+ * @prop --bal-segment-item-divider-background: TBD
+ * @prop --bal-segment-item-divider-background-invalid: TBD
+ * @prop --bal-segment-item-indicator-background: TBD
+ * @prop --bal-segment-item-indicator-background-invalid: TBD
+ * @prop --bal-segment-item-indicator-background-disabled: TBD
+ */
+
+:root
+  //
+  // background colors
+  --bal-segment-background: var(--bal-color-grey-2)
+  --bal-segment-background-invalid: var(--bal-color-danger-1)
+
+  --bal-segment-item-focus-border: var(--bal-color-border-primary)
+
+  --bal-segment-item-text-color: var(--bal-color-text-primary)
+  --bal-segment-item-text-color-checked: var(--bal-color-text-primary)
+  --bal-segment-item-text-color-checked-hovered: var(--bal-color-text-primary-hovered)
+  --bal-segment-item-text-color-checked-pressed: var(--bal-color-text-primary-pressed)
+
+  --bal-segment-item-text-color-invalid: var(--bal-color-text-danger)
+  --bal-segment-item-text-color-invalid-hovered: var(--bal-color-text-danger-hovered)
+  --bal-segment-item-text-color-invalid-pressed: var(--bal-color-text-danger-pressed)
+
+  --bal-segment-item-text-color-disabled: var(--bal-color-text-grey)
+  --bal-segment-item-text-color-disabled-checked: var(--bal-color-text-grey-dark)
+
+  --bal-segment-item-divider-background: var(--bal-color-grey)
+  --bal-segment-item-divider-background-invalid: var(--bal-color-danger-2)
+
+  --bal-segment-item-indicator-background: var(--bal-color-purple-2)
+  --bal-segment-item-indicator-background-invalid: var(--bal-color-danger-4)
+  --bal-segment-item-indicator-background-disabled: var(--bal-color-grey-3)
diff --git a/packages/core/src/components/bal-segment/test/bal-segment.a11y.html b/packages/core/src/components/bal-segment/test/bal-segment.a11y.html
new file mode 100644
index 0000000000..77a32ef047
--- /dev/null
+++ b/packages/core/src/components/bal-segment/test/bal-segment.a11y.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+
+    <script type="module" src="/build/baloise-design-system.esm.js"></script>
+    <script nomodule src="/build/baloise-design-system.js"></script>
+  </head>
+
+  <body>
+    <bal-doc-app>
+      <main class="container py-medium">
+        <section>
+          <bal-segment data-testid="basic" value="Yes">
+            <bal-segment-item value="Yes" label="Yes"></bal-segment-item>
+            <bal-segment-item value="No" label="No"></bal-segment-item>
+          </bal-segment>
+        </section>
+      </main>
+    </bal-doc-app>
+  </body>
+</html>
diff --git a/packages/core/src/components/bal-segment/test/bal-segment.cy.html b/packages/core/src/components/bal-segment/test/bal-segment.cy.html
new file mode 100644
index 0000000000..6ef1f4a4f3
--- /dev/null
+++ b/packages/core/src/components/bal-segment/test/bal-segment.cy.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+
+    <script type="module" src="/build/baloise-design-system.esm.js"></script>
+    <script nomodule src="/build/baloise-design-system.js"></script>
+  </head>
+
+  <body>
+    <bal-doc-app log-components="bal-segment">
+      <main class="container py-medium">
+        <section>
+          <input type="text" />
+          <bal-segment data-testid="basic" vertical>
+            <bal-segment-item value="500" label="500"></bal-segment-item>
+            <bal-segment-item value="1000" label="1'000"></bal-segment-item>
+            <bal-segment-item value="2000" label="2'000"></bal-segment-item>
+            <bal-segment-item value="5000" label="5'000"></bal-segment-item>
+            <bal-segment-item value="10000" label="10'000"></bal-segment-item>
+          </bal-segment>
+          <input type="text" />
+          <bal-segment data-testid="basic" value="2000">
+            <bal-segment-item value="500" label="500"></bal-segment-item>
+            <bal-segment-item value="1000" label="1'000"></bal-segment-item>
+            <bal-segment-item value="2000" label="2'000"></bal-segment-item>
+            <bal-segment-item value="5000" label="5'000"></bal-segment-item>
+            <bal-segment-item value="10000" label="10'000"></bal-segment-item>
+          </bal-segment>
+          <input type="text" />
+          <bal-segment data-testid="invalid" value="2000" invalid>
+            <bal-segment-item value="500" label="500"></bal-segment-item>
+            <bal-segment-item value="1000" label="1'000"></bal-segment-item>
+            <bal-segment-item value="2000" label="2'000"></bal-segment-item>
+            <bal-segment-item value="5000" label="5'000"></bal-segment-item>
+            <bal-segment-item value="10000" label="10'000"></bal-segment-item>
+          </bal-segment>
+          <input type="text" />
+          <bal-segment data-testid="disabled" value="2000" disabled>
+            <bal-segment-item value="500" label="500"></bal-segment-item>
+            <bal-segment-item value="1000" label="1'000"></bal-segment-item>
+            <bal-segment-item value="2000" label="2'000"></bal-segment-item>
+            <bal-segment-item value="5000" label="5'000"></bal-segment-item>
+            <bal-segment-item value="10000" label="10'000"></bal-segment-item>
+          </bal-segment>
+        </section>
+      </main>
+    </bal-doc-app>
+  </body>
+</html>
diff --git a/packages/core/src/components/bal-segment/test/bal-segment.visual.html b/packages/core/src/components/bal-segment/test/bal-segment.visual.html
new file mode 100644
index 0000000000..829e627914
--- /dev/null
+++ b/packages/core/src/components/bal-segment/test/bal-segment.visual.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html dir="ltr" lang="en" class="bg-green-2">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <style>
+      section {
+        margin-bottom: 2rem;
+      }
+    </style>
+    <script type="module" src="/build/baloise-design-system.esm.js"></script>
+    <script nomodule src="/build/baloise-design-system.js"></script>
+  </head>
+
+  <body>
+    <bal-doc-app>
+      <main class="container py-medium">
+        <bal-heading>Basic Yes-No</bal-heading>
+        <section data-testid="basic">
+          <div class="grid">
+            <div class="col">
+              <bal-segment expanded>
+                <bal-segment-item value="yes" label="Yes"></bal-segment-item>
+                <bal-segment-item value="no" label="No"></bal-segment-item>
+              </bal-segment>
+            </div>
+            <div class="col">
+              <bal-segment expanded value="yes">
+                <bal-segment-item value="yes" label="Yes"></bal-segment-item>
+                <bal-segment-item value="no" label="No"></bal-segment-item>
+              </bal-segment>
+            </div>
+          </div>
+          <div class="grid">
+            <div class="col">
+              <bal-segment invalid>
+                <bal-segment-item value="yes" label="Yes"></bal-segment-item>
+                <bal-segment-item value="no" label="No"></bal-segment-item>
+              </bal-segment>
+            </div>
+            <div class="col">
+              <bal-segment invalid value="yes">
+                <bal-segment-item value="yes" label="Yes"></bal-segment-item>
+                <bal-segment-item value="no" label="No"></bal-segment-item>
+              </bal-segment>
+            </div>
+          </div>
+          <div class="grid">
+            <div class="col">
+              <bal-segment disabled>
+                <bal-segment-item value="yes" label="Yes"></bal-segment-item>
+                <bal-segment-item value="no" label="No"></bal-segment-item>
+              </bal-segment>
+            </div>
+            <div class="col">
+              <bal-segment disabled value="yes">
+                <bal-segment-item value="yes" label="Yes"></bal-segment-item>
+                <bal-segment-item value="no" label="No"></bal-segment-item>
+              </bal-segment>
+            </div>
+          </div>
+        </section>
+
+        <bal-heading>Horizontal</bal-heading>
+        <section data-testid="horizontal">
+          <bal-segment value="10000">
+            <bal-segment-item value="7000" label="max. 7’000 km"></bal-segment-item>
+            <bal-segment-item value="10000" label="max. 10’000 km"></bal-segment-item>
+            <bal-segment-item value="15000" label="max. 15’000 km"></bal-segment-item>
+            <bal-segment-item value="20000" label="max. 20’000 km"></bal-segment-item>
+            <bal-segment-item value="21000" label="mehr als 20’000 km"></bal-segment-item>
+          </bal-segment>
+        </section>
+
+        <bal-heading>Vertical</bal-heading>
+        <section data-testid="vertical">
+          <bal-segment vertical value="10000">
+            <bal-segment-item value="7000" label="max. 7’000 km">entspricht rund 186 km pro Woche</bal-segment-item>
+            <bal-segment-item value="10000" label="max. 10’000 km">entspricht rund 186 km pro Woche</bal-segment-item>
+            <bal-segment-item value="15000" label="max. 15’000 km">entspricht rund 186 km pro Woche</bal-segment-item>
+            <bal-segment-item value="20000" label="max. 20’000 km">entspricht rund 186 km pro Woche</bal-segment-item>
+            <bal-segment-item value="21000" label="mehr als 20’000 km"
+              >entspricht rund 186 km pro Woche</bal-segment-item
+            >
+          </bal-segment>
+        </section>
+      </main>
+    </bal-doc-app>
+  </body>
+</html>
diff --git a/packages/core/src/components/bal-stack/bal-stack.sass b/packages/core/src/components/bal-stack/bal-stack.sass
index 72ad76f123..54b5c0b7cd 100644
--- a/packages/core/src/components/bal-stack/bal-stack.sass
+++ b/packages/core/src/components/bal-stack/bal-stack.sass
@@ -27,10 +27,10 @@
     flex-direction: column
     align-items: flex-start
   &--layout-horizontal-reverse
-    flex-direction: row
+    flex-direction: row-reverse
     align-items: center
   &--layout-vertical-reverse
-    flex-direction: column
+    flex-direction: column-reverse
     align-items: flex-start
   //
   // alignment
diff --git a/packages/core/src/interfaces.d.ts b/packages/core/src/interfaces.d.ts
index ca5b29c43b..4f26d018ca 100644
--- a/packages/core/src/interfaces.d.ts
+++ b/packages/core/src/interfaces.d.ts
@@ -65,6 +65,7 @@ import './components/bal-notification/bal-notification.interfaces'
 import './components/bal-sheet/bal-sheet.interfaces'
 import './components/bal-snackbar/bal-snackbar.interfaces'
 import './components/bal-toast/bal-toast.interfaces'
+import './components/bal-segment/bal-segment.interfaces'
 
 export * from './components'
 export * from './index'
diff --git a/packages/core/src/utils/resize/index.ts b/packages/core/src/utils/resize/index.ts
index 6f76646cc4..618c0f6e51 100644
--- a/packages/core/src/utils/resize/index.ts
+++ b/packages/core/src/utils/resize/index.ts
@@ -1,5 +1,8 @@
-export * from './window-resize.listener'
+export * from './window-resize.decorator'
 export * from './window-resize.handler'
+export * from './window-resize.interfaces'
+export * from './window-resize.listener'
+export * from './window-resize.subject'
 
 export * from './resize.interfaces'
 export * from './resize.decorator'
diff --git a/packages/core/src/utils/resize/window-resize.decorator.ts b/packages/core/src/utils/resize/window-resize.decorator.ts
new file mode 100644
index 0000000000..d5e81c6791
--- /dev/null
+++ b/packages/core/src/utils/resize/window-resize.decorator.ts
@@ -0,0 +1,31 @@
+import { ComponentInterface } from '@stencil/core'
+import { BalWindowResizeObserver } from './window-resize.interfaces'
+import { BalWindowResizeSubject } from './window-resize.subject'
+
+export function ListenToWindowResize() {
+  return function (
+    target: ComponentInterface & BalWindowResizeObserver,
+    _propertyKey: string,
+    _descriptor: PropertyDescriptor,
+  ) {
+    const { connectedCallback, disconnectedCallback } = target
+
+    target.connectedCallback = function () {
+      if (!this._balWindowResizeSubject) {
+        this._balWindowResizeSubject = new BalWindowResizeSubject()
+        this._balWindowResizeSubject.attach(this)
+      }
+
+      return connectedCallback && connectedCallback.call(this)
+    }
+
+    target.disconnectedCallback = function () {
+      if (this._balWindowResizeSubject) {
+        this._balWindowResizeSubject.detach()
+        this._balWindowResizeSubject = undefined
+      }
+
+      return disconnectedCallback && disconnectedCallback.call(this)
+    }
+  }
+}
diff --git a/packages/core/src/utils/resize/window-resize.interfaces.ts b/packages/core/src/utils/resize/window-resize.interfaces.ts
new file mode 100644
index 0000000000..7ee9681617
--- /dev/null
+++ b/packages/core/src/utils/resize/window-resize.interfaces.ts
@@ -0,0 +1,8 @@
+// eslint-disable-next-line @typescript-eslint/ban-types
+
+export type BalWindowResizeListenerFn = () => void
+
+export interface BalWindowResizeObserver {
+  el: HTMLElement
+  windowResizeListener(): void
+}
diff --git a/packages/core/src/utils/resize/window-resize.listener.ts b/packages/core/src/utils/resize/window-resize.listener.ts
index cb1857a4e3..715bdfe37e 100644
--- a/packages/core/src/utils/resize/window-resize.listener.ts
+++ b/packages/core/src/utils/resize/window-resize.listener.ts
@@ -4,10 +4,10 @@ import { ListenerAbstract } from '../types/listener'
 
 export class BalWindowResizeListener extends ListenerAbstract {
   private resizeHandler = new BalWindowResizeHandler({ onlyListenToWidthChanges: true })
-  private debouncedNotify = debounce(() => this.notify(), 10)
+  private debouncedNotify = debounce(() => this.notify(), 100)
 
-  connect(): void {
-    super.connect()
+  connect(el?: HTMLElement | Window | Document): void {
+    super.connect(el)
     if (this.el) {
       addEventListener(this.el, 'resize', this.debouncedNotify, { passive: true })
     }
diff --git a/packages/core/src/utils/resize/window-resize.subject.ts b/packages/core/src/utils/resize/window-resize.subject.ts
new file mode 100644
index 0000000000..67e5cb464d
--- /dev/null
+++ b/packages/core/src/utils/resize/window-resize.subject.ts
@@ -0,0 +1,29 @@
+import { BalWindowResizeListener } from './window-resize.listener'
+import { SingleSubject } from '../types/signal'
+import { BalWindowResizeObserver } from './window-resize.interfaces'
+import { balBrowser } from '../browser'
+
+export class BalWindowResizeSubject extends SingleSubject<BalWindowResizeObserver> {
+  private listener = new BalWindowResizeListener()
+
+  constructor() {
+    super((observer, _data) => {
+      observer.windowResizeListener()
+    })
+  }
+
+  attach(observer: BalWindowResizeObserver): void {
+    super.attach(observer)
+    if (balBrowser.hasWindow) {
+      this.listener.connect(window)
+      this.listener.add(() => super.notify())
+    }
+  }
+
+  detach(): void {
+    super.detach()
+    this.listener.disconnect()
+  }
+}
+
+export const balWindowResizeSubject = new BalWindowResizeSubject()
diff --git a/resources/data/tags.json b/resources/data/tags.json
index e6892c4981..9347d413d9 100644
--- a/resources/data/tags.json
+++ b/resources/data/tags.json
@@ -33,6 +33,7 @@
   "bal-popup",
   "bal-progress-bar",
   "bal-radio",
+  "bal-segment",
   "bal-select",
   "bal-shape",
   "bal-sheet",