diff --git a/alfa-client/apps/admin-e2e/src/e2e/main-tests/navigation/safira.cy.ts b/alfa-client/apps/admin-e2e/src/e2e/main-tests/navigation/safira.cy.ts
index 33494cdfcfe6df101b2d97510b3739c9c3c57583..6f76dafdfc3161646383b34465056c2e751fa33c 100644
--- a/alfa-client/apps/admin-e2e/src/e2e/main-tests/navigation/safira.cy.ts
+++ b/alfa-client/apps/admin-e2e/src/e2e/main-tests/navigation/safira.cy.ts
@@ -34,7 +34,7 @@ describe('Navigation', () => {
 
       describe('on selection', () => {
         before(() => {
-          mainPage.openStatistik();
+          mainPage.clickStatistikNavigationItem();
         });
 
         it('should show page on selection', () => {
diff --git a/alfa-client/apps/alfa-e2e/src/components/vorgang/vorgang-formular-buttons.e2e.components.ts b/alfa-client/apps/alfa-e2e/src/components/vorgang/vorgang-formular-buttons.e2e.components.ts
index 76cc3eafbe00d3a6f7cd3f249a1e38ecf0a60d4a..b91293c81d9c0bc662f2ba91cbc1a14a03b9b548 100644
--- a/alfa-client/apps/alfa-e2e/src/components/vorgang/vorgang-formular-buttons.e2e.components.ts
+++ b/alfa-client/apps/alfa-e2e/src/components/vorgang/vorgang-formular-buttons.e2e.components.ts
@@ -25,10 +25,10 @@ export class VorgangFormularButtonsE2EComponent {
   private readonly abschliessenButton: string = 'abschliessen-button';
   private readonly annehmenButton: string = 'annehmen-button';
   private readonly bearbeitenButton: string = 'bearbeiten-button';
+  private readonly forwardButton: string = 'forward-by-ozgcloud-button';
   private readonly bescheidenButton: string = 'bescheiden-button';
   private readonly endgueltigLoeschenButton: string = 'endgueltig-loeschen-button';
-  private readonly loeschAnforderungZuruecknehmenButton: string =
-    'loesch-anforderung-zuruecknehmen-button';
+  private readonly loeschAnforderungZuruecknehmenButton: string = 'loesch-anforderung-zuruecknehmen-button';
   private readonly loeschenAnfordernButton: string = 'loeschen-anfordern-button';
   private readonly verwerfenButton: string = 'verwerfen-button';
   private readonly wiedereroeffnenButton: string = 'wiedereroeffnen-button';
@@ -47,6 +47,10 @@ export class VorgangFormularButtonsE2EComponent {
     return cy.getTestElement(this.bearbeitenButton);
   }
 
+  public getForwardButton() {
+    return cy.getTestElement(this.forwardButton);
+  }
+
   public getBescheidenButton() {
     return cy.getTestElement(this.bescheidenButton);
   }
diff --git a/alfa-client/apps/alfa-e2e/src/e2e/einheitlicher-ansprechpartner/vorgang-detail/vorgang-forward-by-ozgcloud.cy.ts b/alfa-client/apps/alfa-e2e/src/e2e/einheitlicher-ansprechpartner/vorgang-detail/vorgang-forward-by-ozgcloud.cy.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8b346e0d75ba810435adc064d63adf36e2ef0991
--- /dev/null
+++ b/alfa-client/apps/alfa-e2e/src/e2e/einheitlicher-ansprechpartner/vorgang-detail/vorgang-forward-by-ozgcloud.cy.ts
@@ -0,0 +1,46 @@
+import { registerLocaleData } from '@angular/common';
+import localeDe from '@angular/common/locales/de';
+import localeDeExtra from '@angular/common/locales/extra/de';
+import { VorgangFormularButtonsE2EComponent } from 'apps/alfa-e2e/src/components/vorgang/vorgang-formular-buttons.e2e.components';
+import { VorgangListE2EComponent } from '../../../components/vorgang/vorgang-list.e2e.component';
+import { VorgangE2E } from '../../../model/vorgang';
+import { MainPage, waitForSpinnerToDisappear } from '../../../page-objects/main.po';
+import { VorgangPage } from '../../../page-objects/vorgang.po';
+import { dropCollections } from '../../../support/cypress-helper';
+import { exist, notExist } from '../../../support/cypress.util';
+import { loginAsEmil } from '../../../support/user-util';
+import { createVorgang, initVorgaenge } from '../../../support/vorgang-util';
+
+registerLocaleData(localeDe, 'de', localeDeExtra);
+
+describe('Vorgang weiterleiten innerhalb der OzgCloud', () => {
+  const mainPage: MainPage = new MainPage();
+  const vorgangList: VorgangListE2EComponent = mainPage.getVorgangList();
+
+  const vorgangPage: VorgangPage = new VorgangPage();
+  const vorgangFormularButtons: VorgangFormularButtonsE2EComponent = vorgangPage.getFormularButtons();
+
+  const vorgangWeiterleiten: VorgangE2E = { ...createVorgang(), name: 'Weiterleitung' };
+
+  before(() => {
+    initVorgaenge([vorgangWeiterleiten]);
+
+    loginAsEmil();
+
+    waitForSpinnerToDisappear();
+    exist(vorgangList.getRoot());
+  });
+
+  after(() => {
+    dropCollections();
+  });
+
+  describe('Weiterleiten', () => {
+    it('should display Weiterleiten button in Status Neu', () => {
+      vorgangList.getListItem(vorgangWeiterleiten.name).getRoot().click();
+      waitForSpinnerToDisappear();
+
+      notExist(vorgangFormularButtons.getForwardButton());
+    });
+  });
+});
diff --git a/alfa-client/apps/alfa-e2e/src/e2e/main-tests/vorgang-detailansicht/vorgang-forward-by-ozgcloud.cy.ts b/alfa-client/apps/alfa-e2e/src/e2e/main-tests/vorgang-detailansicht/vorgang-forward-by-ozgcloud.cy.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d4661c6d5f536cda3e4286f4064b157cd5e56cf0
--- /dev/null
+++ b/alfa-client/apps/alfa-e2e/src/e2e/main-tests/vorgang-detailansicht/vorgang-forward-by-ozgcloud.cy.ts
@@ -0,0 +1,78 @@
+import { registerLocaleData } from '@angular/common';
+import localeDe from '@angular/common/locales/de';
+import localeDeExtra from '@angular/common/locales/extra/de';
+import { VorgangFormularButtonsE2EComponent } from 'apps/alfa-e2e/src/components/vorgang/vorgang-formular-buttons.e2e.components';
+import { VorgangListE2EComponent } from '../../../components/vorgang/vorgang-list.e2e.component';
+import { VorgangE2E } from '../../../model/vorgang';
+import { MainPage, waitForSpinnerToDisappear } from '../../../page-objects/main.po';
+import { VorgangPage } from '../../../page-objects/vorgang.po';
+import { dropCollections } from '../../../support/cypress-helper';
+import { exist, notExist } from '../../../support/cypress.util';
+import { loginAsPeter, loginAsSabine } from '../../../support/user-util';
+import { createVorgang, initVorgaenge } from '../../../support/vorgang-util';
+
+registerLocaleData(localeDe, 'de', localeDeExtra);
+
+describe('Vorgang weiterleiten innerhalb der OzgCloud', () => {
+  const mainPage: MainPage = new MainPage();
+  const vorgangList: VorgangListE2EComponent = mainPage.getVorgangList();
+
+  const vorgangPage: VorgangPage = new VorgangPage();
+  const vorgangFormularButtons: VorgangFormularButtonsE2EComponent = vorgangPage.getFormularButtons();
+
+  const vorgangWeiterleiten: VorgangE2E = { ...createVorgang(), name: 'Weiterleitung' };
+
+  after(() => {
+    dropCollections();
+  });
+
+  describe('For Sabine', () => {
+    before(() => {
+      initVorgaenge([vorgangWeiterleiten]);
+
+      loginAsSabine();
+
+      waitForSpinnerToDisappear();
+      exist(vorgangList.getRoot());
+    });
+
+    it('should display Weiterleiten button in Status Neu', () => {
+      vorgangList.getListItem(vorgangWeiterleiten.name).getRoot().click();
+      waitForSpinnerToDisappear();
+
+      exist(vorgangFormularButtons.getForwardButton());
+    });
+
+    it('should not display Weiterleiten button in Status Angenommen', () => {
+      vorgangFormularButtons.getAnnehmenButton().click();
+      waitForSpinnerToDisappear();
+
+      notExist(vorgangFormularButtons.getForwardButton());
+    });
+
+    it('should not display Weiterleiten button in Status In Bearbeitung', () => {
+      vorgangFormularButtons.getBearbeitenButton().click();
+      waitForSpinnerToDisappear();
+
+      notExist(vorgangFormularButtons.getForwardButton());
+    });
+  });
+
+  describe('For Peter', () => {
+    before(() => {
+      initVorgaenge([vorgangWeiterleiten]);
+
+      loginAsPeter();
+
+      waitForSpinnerToDisappear();
+      exist(vorgangList.getRoot());
+    });
+
+    it('should not display Weiterleiten button in Status In Neu', () => {
+      vorgangList.getListItem(vorgangWeiterleiten.name).getRoot().click();
+      waitForSpinnerToDisappear();
+
+      notExist(vorgangFormularButtons.getForwardButton());
+    });
+  });
+});
diff --git a/alfa-client/libs/design-component/src/lib/routing-button/routing-button.component.spec.ts b/alfa-client/libs/design-component/src/lib/routing-button/routing-button.component.spec.ts
index 5c3843507fcb932309858d95eb8b43eea2adf3fb..fb79d2714b85698c69bb8405f36470da96abe579 100644
--- a/alfa-client/libs/design-component/src/lib/routing-button/routing-button.component.spec.ts
+++ b/alfa-client/libs/design-component/src/lib/routing-button/routing-button.component.spec.ts
@@ -1,25 +1,14 @@
-import { Mock, mock } from '@alfa-client/test-utils';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { RouterModule } from '@angular/router';
 import { RoutingButtonComponent } from './routing-button.component';
 
 describe('RoutingButtonComponent', () => {
   let component: RoutingButtonComponent;
   let fixture: ComponentFixture<RoutingButtonComponent>;
 
-  let activatedRoute: Mock<ActivatedRoute>;
-
   beforeEach(async () => {
-    activatedRoute = mock(ActivatedRoute);
-
     await TestBed.configureTestingModule({
-      imports: [RoutingButtonComponent, RouterLink],
-      providers: [
-        {
-          provide: ActivatedRoute,
-          useValue: activatedRoute,
-        },
-      ],
+      imports: [RoutingButtonComponent, RouterModule.forRoot([])],
     }).compileComponents();
 
     fixture = TestBed.createComponent(RoutingButtonComponent);
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index 1f46fdee2bf9ba94f5af17a5ee742be0afe2aa85..467032047c06e4ae9c4a6e3948cc13a704b8761d 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -30,6 +30,7 @@ export * from './lib/button-card/button-card.component';
 export * from './lib/button/button.component';
 export * from './lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component';
 export * from './lib/dropdown-menu/dropdown-menu-item/dropdown-menu-item.component';
+export * from './lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component';
 export * from './lib/dropdown-menu/dropdown-menu-text-item/dropdown-menu-text-item.component';
 export * from './lib/dropdown-menu/dropdown-menu/dropdown-menu.component';
 export * from './lib/form/button-toggle/button-toggle.component';
@@ -41,18 +42,24 @@ export * from './lib/form/radio-button-card/radio-button-card.component';
 export * from './lib/form/text-input/text-input.component';
 export * from './lib/form/textarea/textarea.component';
 export * from './lib/icons/accessibility-icon/accessibility-icon.component';
+export * from './lib/icons/account-circle-icon/account-circle-icon.component';
 export * from './lib/icons/admin-logo-icon/admin-logo-icon.component';
 export * from './lib/icons/archive-icon/archive-icon.component';
+export * from './lib/icons/arrow-back-icon/arrow-back-icon.component';
 export * from './lib/icons/attachment-icon/attachment-icon.component';
 export * from './lib/icons/bescheid-generate-icon/bescheid-generate-icon.component';
 export * from './lib/icons/bescheid-upload-icon/bescheid-upload-icon.component';
+export * from './lib/icons/check-circle-icon/check-circle-icon.component';
 export * from './lib/icons/check-icon/check-icon.component';
 export * from './lib/icons/close-icon/close-icon.component';
+export * from './lib/icons/delete-vorgang-finally-icon/delete-vorgang-finally-icon.component';
+export * from './lib/icons/discard-vorgang-icon/discard-vorgang-icon.component';
 export * from './lib/icons/edit-icon/edit-icon.component';
 export * from './lib/icons/error-icon/error-icon.component';
 export * from './lib/icons/exclamation-icon/exclamation-icon.component';
 export * from './lib/icons/external-unit-icon/external-unit-icon.component';
 export * from './lib/icons/file-icon/file-icon.component';
+export * from './lib/icons/forward-vorgang-icon/forward-vorgang-icon.component';
 export * from './lib/icons/help-icon/help-icon.component';
 export * from './lib/icons/iconVariants';
 export * from './lib/icons/logout-icon/logout-icon.component';
@@ -64,12 +71,17 @@ export * from './lib/icons/ozg-logo-icon/ozg-logo-icon.component';
 export * from './lib/icons/person-icon/person-icon.component';
 export * from './lib/icons/plus-icon/plus-icon.component';
 export * from './lib/icons/public-administration-icon/public-administration-icon.component';
+export * from './lib/icons/request-vorgang-deletion-icon/request-vorgang-deletion-icon.component';
 export * from './lib/icons/save-icon/save-icon.component';
 export * from './lib/icons/search-icon/search-icon.component';
 export * from './lib/icons/send-icon/send-icon.component';
+export * from './lib/icons/settings-icon/settings-icon.component';
 export * from './lib/icons/spinner-icon/spinner-icon.component';
 export * from './lib/icons/stamp-icon/stamp-icon.component';
 export * from './lib/icons/statistic-icon/statistic-icon.component';
+export * from './lib/icons/undo-icon/undo-icon.component';
+export * from './lib/icons/undo-request-vorgang-deletion-icon/undo-request-vorgang-deletion-icon.component';
+export * from './lib/icons/update-icon/update-icon.component';
 export * from './lib/icons/user-icon/user-icon.component';
 export * from './lib/icons/users-icon/users-icon.component';
 export * from './lib/instant-search/instant-search/instant-search.component';
diff --git a/alfa-client/libs/design-system/src/lib/button/button.component.ts b/alfa-client/libs/design-system/src/lib/button/button.component.ts
index 3db69acbf385896d0efdc5a0c5b4b8c40e1c286b..46b0308c205dff5a889142e76693dd27cffc30bb 100644
--- a/alfa-client/libs/design-system/src/lib/button/button.component.ts
+++ b/alfa-client/libs/design-system/src/lib/button/button.component.ts
@@ -36,11 +36,11 @@ export const buttonVariants = cva(
   {
     variants: {
       variant: {
-        primary: 'bg-primary text-white shadow-md hover:enabled:bg-primary-hover',
+        primary: 'bg-primary text-whitetext shadow-md hover:enabled:bg-primary-hover focus-visible:bg-primary-hover',
         outline:
-          'border border-primary bg-background-50 text-primary shadow-md hover:enabled:bg-ghost-hover focus-visible:border-background-200',
+          'border border-primary bg-background-50 text-primary shadow-md hover:enabled:bg-ghost-hover focus-visible:bg-ghost-hover focus-visible:border-background-200',
         ghost:
-          'border-2 border-transparent hover:enabled:bg-ghost-hover text-primary focus-visible:border-background-200 font-semibold',
+          'border border-transparent hover:enabled:bg-ghost-hover text-primary focus-visible:border-background-200 focus-visible:bg-ghost-hover font-semibold [&]:focus-visible:outline-offset-1',
       },
       size: {
         medium: 'h-9 py-2 px-4 min-w-32',
diff --git a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component.ts
index 5c5d0d9a190e36e3f56830630b58b339681a90eb..52b3e46d6ac1e69ce02472bec600580c6e7663af 100644
--- a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component.ts
+++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
-import { LinkComponent } from '@ods/system';
 import { OpenLinkIconComponent } from '../../icons/open-link-icon/open-link-icon.component';
+import { LinkComponent } from '../../link/link.component';
 
 @Component({
   selector: 'ods-dropdown-menu-link-item',
diff --git a/alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e50bb31c690ce54140e686a5a50d38d22ee42e22
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AccountCircleIconComponent } from './account-circle-icon.component';
+
+describe('AccountCircleIconComponent', () => {
+  let component: AccountCircleIconComponent;
+  let fixture: ComponentFixture<AccountCircleIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AccountCircleIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AccountCircleIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b762c6cbe32f662f51bb5cb52effd1a267fa3602
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.component.ts
@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { iconVariants, IconVariants } from '../iconVariants';
+
+@Component({
+  selector: 'ods-account-circle-icon',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    [ngClass]="[twMerge(iconVariants({ size }), 'fill-primary', class)]"
+    aria-hidden="true"
+  >
+    <path
+      d="M12.75 2C7.23 2 2.75 6.48 2.75 12C2.75 17.52 7.23 22 12.75 22C18.27 22 22.75 17.52 22.75 12C22.75 6.48 18.27 2 12.75 2ZM7.82 18.28C8.25 17.38 10.87 16.5 12.75 16.5C14.63 16.5 17.26 17.38 17.68 18.28C16.32 19.36 14.61 20 12.75 20C10.89 20 9.18 19.36 7.82 18.28ZM19.11 16.83C17.68 15.09 14.21 14.5 12.75 14.5C11.29 14.5 7.82 15.09 6.39 16.83C5.37 15.49 4.75 13.82 4.75 12C4.75 7.59 8.34 4 12.75 4C17.16 4 20.75 7.59 20.75 12C20.75 13.82 20.13 15.49 19.11 16.83ZM12.75 6C10.81 6 9.25 7.56 9.25 9.5C9.25 11.44 10.81 13 12.75 13C14.69 13 16.25 11.44 16.25 9.5C16.25 7.56 14.69 6 12.75 6ZM12.75 11C11.92 11 11.25 10.33 11.25 9.5C11.25 8.67 11.92 8 12.75 8C13.58 8 14.25 8.67 14.25 9.5C14.25 10.33 13.58 11 12.75 11Z"
+    />
+  </svg>`,
+})
+export class AccountCircleIconComponent {
+  @Input() size: IconVariants['size'] = 'medium';
+  @Input() class: string = '';
+
+  readonly iconVariants = iconVariants;
+  readonly twMerge = twMerge;
+}
diff --git a/alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..46eae30d492ba7cee189fb67b1f5c63e6f69ba51
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { AccountCircleIconComponent } from './account-circle-icon.component';
+
+const meta: Meta<AccountCircleIconComponent> = {
+  title: 'Icons/Account circle icon',
+  component: AccountCircleIconComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<AccountCircleIconComponent>;
+
+export const Default: Story = {
+  args: { size: 'large' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'medium' },
+      },
+    },
+  },
+};
diff --git a/alfa-client/libs/design-system/src/lib/icons/arrow-back-icon/arrow-back-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/arrow-back-icon/arrow-back-icon.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..744a885c402d72290467b3efb341a2b7adeccf54
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/arrow-back-icon/arrow-back-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ArrowBackIconComponent } from './arrow-back-icon.component';
+
+describe('ArrowBackIconComponent', () => {
+  let component: ArrowBackIconComponent;
+  let fixture: ComponentFixture<ArrowBackIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ArrowBackIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ArrowBackIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/arrow-back-icon/arrow-back-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/arrow-back-icon/arrow-back-icon.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d0ab0a9d8e61e9e6041df639992347326e0085b7
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/arrow-back-icon/arrow-back-icon.component.ts
@@ -0,0 +1,25 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { iconVariants, IconVariants } from '../iconVariants';
+
+@Component({
+  selector: 'ods-arrow-back-icon',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    [ngClass]="[twMerge(iconVariants({ size }), 'fill-primary', class)]"
+    aria-hidden="true"
+  >
+    <path d="M20.75 11H8.58L14.17 5.41L12.75 4L4.75 12L12.75 20L14.16 18.59L8.58 13H20.75V11Z" />
+  </svg>`,
+})
+export class ArrowBackIconComponent {
+  @Input() size: IconVariants['size'] = 'medium';
+  @Input() class: string = '';
+
+  readonly iconVariants = iconVariants;
+  readonly twMerge = twMerge;
+}
diff --git a/alfa-client/libs/design-system/src/lib/icons/arrow-back-icon/arrow-back-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/arrow-back-icon/arrow-back-icon.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1305d80008efc57e965ebd61690fd6b8e3b2b21f
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/arrow-back-icon/arrow-back-icon.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { ArrowBackIconComponent } from './arrow-back-icon.component';
+
+const meta: Meta<ArrowBackIconComponent> = {
+  title: 'Icons/Arrow back icon',
+  component: ArrowBackIconComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<ArrowBackIconComponent>;
+
+export const Default: Story = {
+  args: { size: 'large' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'medium' },
+      },
+    },
+  },
+};
diff --git a/alfa-client/libs/design-system/src/lib/icons/check-circle-icon/check-circle-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/check-circle-icon/check-circle-icon.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eda5ec6e8368a70b8e46d9ccea7d18367e87b884
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/check-circle-icon/check-circle-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CheckCircleIconComponent } from './check-circle-icon.component';
+
+describe('CheckCircleIconComponent', () => {
+  let component: CheckCircleIconComponent;
+  let fixture: ComponentFixture<CheckCircleIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CheckCircleIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CheckCircleIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/check-circle-icon/check-circle-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/check-circle-icon/check-circle-icon.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..86aa983a93efa1daf33aaab65d7490b25c2b1a03
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/check-circle-icon/check-circle-icon.component.ts
@@ -0,0 +1,27 @@
+import { NgClass } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { iconVariants, IconVariants } from '../iconVariants';
+
+@Component({
+  selector: 'ods-check-circle-icon',
+  standalone: true,
+  imports: [NgClass],
+  template: `<svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    [ngClass]="[twMerge(iconVariants({ size }), 'fill-primary', class)]"
+    aria-hidden="true"
+  >
+    <path
+      d="M22 5.18L10.59 16.6L6.35 12.36L7.76 10.95L10.59 13.78L20.59 3.78L22 5.18ZM19.79 10.22C19.92 10.79 20 11.39 20 12C20 16.42 16.42 20 12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C13.58 4 15.04 4.46 16.28 5.25L17.72 3.81C16.1 2.67 14.13 2 12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 10.81 21.78 9.67 21.4 8.61L19.79 10.22Z"
+    />
+  </svg>`,
+})
+export class CheckCircleIconComponent {
+  @Input() size: IconVariants['size'] = 'medium';
+  @Input() class: string = undefined;
+
+  readonly iconVariants = iconVariants;
+  readonly twMerge = twMerge;
+}
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-buttons/vorgang-detail-formular-buttons.component.scss b/alfa-client/libs/design-system/src/lib/icons/check-circle-icon/check-circle-icon.stories.ts
similarity index 53%
rename from alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-buttons/vorgang-detail-formular-buttons.component.scss
rename to alfa-client/libs/design-system/src/lib/icons/check-circle-icon/check-circle-icon.stories.ts
index 9cd0cfd7b7d386af1ba5be1db18e12c240c9aa6d..21d0c5a0c4547882c131eb3e209c4d5fa2fa3d79 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-buttons/vorgang-detail-formular-buttons.component.scss
+++ b/alfa-client/libs/design-system/src/lib/icons/check-circle-icon/check-circle-icon.stories.ts
@@ -1,5 +1,5 @@
-/**
- * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
+/*
+ * Copyright (C) 2024 Das Land Schleswig-Holstein vertreten durch den
  * Ministerpräsidenten des Landes Schleswig-Holstein
  * Staatskanzlei
  * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
@@ -21,12 +21,30 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-:host {
-  margin-left: 48px;
+import type { Meta, StoryObj } from '@storybook/angular';
 
-  ::ng-deep {
-    ozgcloud-stroked-button-with-spinner {
-      margin: 0 8px;
-    }
-  }
-}
+import { CheckCircleIconComponent } from './check-circle-icon.component';
+
+const meta: Meta<CheckCircleIconComponent> = {
+  title: 'Icons/Check circle icon',
+  component: CheckCircleIconComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<CheckCircleIconComponent>;
+
+export const Default: Story = {
+  args: { size: 'medium' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'medium' },
+      },
+    },
+  },
+};
diff --git a/alfa-client/libs/design-system/src/lib/icons/delete-vorgang-finally-icon/delete-vorgang-finally-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/delete-vorgang-finally-icon/delete-vorgang-finally-icon.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..badea86a5eec00f55d092e4af752922e9931d6bb
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/delete-vorgang-finally-icon/delete-vorgang-finally-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DeleteVorgangFinallyIconComponent } from './delete-vorgang-finally-icon.component';
+
+describe('DeleteVorgangFinallyIconComponent', () => {
+  let component: DeleteVorgangFinallyIconComponent;
+  let fixture: ComponentFixture<DeleteVorgangFinallyIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DeleteVorgangFinallyIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DeleteVorgangFinallyIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/delete-vorgang-finally-icon/delete-vorgang-finally-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/delete-vorgang-finally-icon/delete-vorgang-finally-icon.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4d99ed334f3142a16b1e91ff8b4d5664a8c7c4de
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/delete-vorgang-finally-icon/delete-vorgang-finally-icon.component.ts
@@ -0,0 +1,65 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { IconVariants, iconVariants } from '../iconVariants';
+
+@Component({
+  selector: 'ods-delete-vorgang-finally-icon',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    [ngClass]="[twMerge(iconVariants({ size }), 'fill-primary', class)]"
+    aria-hidden="true"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M17.7366 13V3.11101H12.4405L7.74777 8.05811L7.74777 13H5.75V8.05811C5.75 7.49738 5.96112 6.95968 6.3368 6.56365L11.0296 1.61654C11.4041 1.22173 11.9115 1 12.4405 1H17.7366C18.8399 1 19.7344 1.94513 19.7344 3.11101V13H17.7366Z"
+    />
+    <path
+      d="M7.75 20C7.75 19.4477 8.19772 19 8.75 19C9.30228 19 9.75 19.4477 9.75 20C9.75 20.5523 9.30228 21 8.75 21C8.19772 21 7.75 20.5523 7.75 20Z"
+    />
+    <path
+      d="M7.75 20C7.75 19.4477 8.19772 19 8.75 19C9.30228 19 9.75 19.4477 9.75 20C9.75 20.5523 9.30228 21 8.75 21C8.19772 21 7.75 20.5523 7.75 20Z"
+    />
+    <path
+      d="M11.75 21C11.75 20.4477 12.1977 20 12.75 20C13.3023 20 13.75 20.4477 13.75 21V22C13.75 22.5523 13.3023 23 12.75 23C12.1977 23 11.75 22.5523 11.75 22V21Z"
+    />
+    <path
+      d="M11.75 21C11.75 20.4477 12.1977 20 12.75 20C13.3023 20 13.75 20.4477 13.75 21V22C13.75 22.5523 13.3023 23 12.75 23C12.1977 23 11.75 22.5523 11.75 22V21Z"
+    />
+    <path
+      d="M11.75 13C11.75 12.4477 12.1977 12 12.75 12C13.3023 12 13.75 12.4477 13.75 13V17C13.75 17.5523 13.3023 18 12.75 18C12.1977 18 11.75 17.5523 11.75 17V13Z"
+    />
+    <path
+      d="M11.75 13C11.75 12.4477 12.1977 12 12.75 12C13.3023 12 13.75 12.4477 13.75 13V17C13.75 17.5523 13.3023 18 12.75 18C12.1977 18 11.75 17.5523 11.75 17V13Z"
+    />
+    <path
+      d="M7.75 15C7.75 14.4477 8.19772 14 8.75 14C9.30228 14 9.75 14.4477 9.75 15V16C9.75 16.5523 9.30228 17 8.75 17C8.19772 17 7.75 16.5523 7.75 16V15Z"
+    />
+    <path
+      d="M7.75 15C7.75 14.4477 8.19772 14 8.75 14C9.30228 14 9.75 14.4477 9.75 15V16C9.75 16.5523 9.30228 17 8.75 17C8.19772 17 7.75 16.5523 7.75 16V15Z"
+    />
+    <path
+      d="M15.75 20C15.75 19.4477 16.1977 19 16.75 19C17.3023 19 17.75 19.4477 17.75 20V21C17.75 21.5523 17.3023 22 16.75 22C16.1977 22 15.75 21.5523 15.75 21V20Z"
+    />
+    <path
+      d="M15.75 20C15.75 19.4477 16.1977 19 16.75 19C17.3023 19 17.75 19.4477 17.75 20V21C17.75 21.5523 17.3023 22 16.75 22C16.1977 22 15.75 21.5523 15.75 21V20Z"
+    />
+    <path
+      d="M15.75 15C15.75 14.4477 16.1977 14 16.75 14C17.3023 14 17.75 14.4477 17.75 15V16C17.75 16.5523 17.3023 17 16.75 17C16.1977 17 15.75 16.5523 15.75 16V15Z"
+    />
+    <path
+      d="M15.75 15C15.75 14.4477 16.1977 14 16.75 14C17.3023 14 17.75 14.4477 17.75 15V16C17.75 16.5523 17.3023 17 16.75 17C16.1977 17 15.75 16.5523 15.75 16V15Z"
+    />
+  </svg> `,
+})
+export class DeleteVorgangFinallyIconComponent {
+  @Input() size: IconVariants['size'] = 'medium';
+  @Input() class: string = '';
+
+  readonly iconVariants = iconVariants;
+  readonly twMerge = twMerge;
+}
diff --git a/alfa-client/libs/design-system/src/lib/icons/delete-vorgang-finally-icon/delete-vorgang-finally-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/delete-vorgang-finally-icon/delete-vorgang-finally-icon.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ddb92e8a002c686a14e3d1cdbfe8f39adc154995
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/delete-vorgang-finally-icon/delete-vorgang-finally-icon.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { DeleteVorgangFinallyIconComponent } from './delete-vorgang-finally-icon.component';
+
+const meta: Meta<DeleteVorgangFinallyIconComponent> = {
+  title: 'Icons/Delete Vorgang finally icon',
+  component: DeleteVorgangFinallyIconComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<DeleteVorgangFinallyIconComponent>;
+
+export const Default: Story = {
+  args: { size: 'large' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'medium' },
+      },
+    },
+  },
+};
diff --git a/alfa-client/libs/design-system/src/lib/icons/discard-vorgang-icon/discard-vorgang-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/discard-vorgang-icon/discard-vorgang-icon.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42eed91241f8ca01ee0cb93f12f30a1d95ae608d
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/discard-vorgang-icon/discard-vorgang-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DiscardVorgangIconComponent } from './discard-vorgang-icon.component';
+
+describe('DiscardVorgangIconComponent', () => {
+  let component: DiscardVorgangIconComponent;
+  let fixture: ComponentFixture<DiscardVorgangIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DiscardVorgangIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DiscardVorgangIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/discard-vorgang-icon/discard-vorgang-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/discard-vorgang-icon/discard-vorgang-icon.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1cee910facd1e58b08ca945a39ff1267189b5f1e
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/discard-vorgang-icon/discard-vorgang-icon.component.ts
@@ -0,0 +1,32 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { IconVariants, iconVariants } from '../iconVariants';
+
+@Component({
+  selector: 'ods-discard-vorgang-icon',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    [ngClass]="[twMerge(iconVariants({ size }), 'fill-primary', class)]"
+    aria-hidden="true"
+  >
+    <path
+      d="M12.75 19.4L14.35 21L16.75 18.6286L19.15 21L20.75 19.4L18.3786 17L20.75 14.6L19.15 13L16.75 15.4L14.35 13L12.75 14.6L15.15 17L12.75 19.4Z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M17 11V3.77384H12.0294L7.625 7.93078L7.625 18.408H10.75V20.1818H7.625C6.58947 20.1818 5.75 19.3876 5.75 18.408V7.93078C5.75 7.4596 5.94815 7.00779 6.30074 6.67501L10.7051 2.51807C11.0566 2.18631 11.5329 2 12.0294 2H17C18.0355 2 18.875 2.79417 18.875 3.77384V11H17Z"
+    />
+  </svg>`,
+})
+export class DiscardVorgangIconComponent {
+  @Input() size: IconVariants['size'] = 'medium';
+  @Input() class: string = '';
+
+  readonly iconVariants = iconVariants;
+  readonly twMerge = twMerge;
+}
diff --git a/alfa-client/libs/design-system/src/lib/icons/discard-vorgang-icon/discard-vorgang-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/discard-vorgang-icon/discard-vorgang-icon.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6c73a8fd5973fc24ee0e1464275b9858e004709e
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/discard-vorgang-icon/discard-vorgang-icon.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { DiscardVorgangIconComponent } from './discard-vorgang-icon.component';
+
+const meta: Meta<DiscardVorgangIconComponent> = {
+  title: 'Icons/Discard Vorgang icon',
+  component: DiscardVorgangIconComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<DiscardVorgangIconComponent>;
+
+export const Default: Story = {
+  args: { size: 'large' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'medium' },
+      },
+    },
+  },
+};
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-action-buttons/vorgang-detail-action-buttons.component.scss b/alfa-client/libs/design-system/src/lib/icons/forward-vorgang-icon/forward-vorgang-icon.component.spec.ts
similarity index 58%
rename from alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-action-buttons/vorgang-detail-action-buttons.component.scss
rename to alfa-client/libs/design-system/src/lib/icons/forward-vorgang-icon/forward-vorgang-icon.component.spec.ts
index 073c7c4392d2b1dd921d4ac949942297033a68c4..dcbe4c3e63807d7e41086d40633d1b6de143a088 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-action-buttons/vorgang-detail-action-buttons.component.scss
+++ b/alfa-client/libs/design-system/src/lib/icons/forward-vorgang-icon/forward-vorgang-icon.component.spec.ts
@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright (C) 2025 Das Land Schleswig-Holstein vertreten durch den
  * Ministerpräsidenten des Landes Schleswig-Holstein
  * Staatskanzlei
@@ -21,14 +21,24 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-:host {
-  display: flex;
-  flex-grow: 1;
-  z-index: 1;
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ForwardVorgangIconComponent } from './forward-vorgang-icon.component';
 
-  ::ng-deep {
-    a {
-      color: inherit;
-    }
-  }
-}
+describe('ForwardVorgangIconComponent', () => {
+  let component: ForwardVorgangIconComponent;
+  let fixture: ComponentFixture<ForwardVorgangIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ForwardVorgangIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ForwardVorgangIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/forward-vorgang-icon/forward-vorgang-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/forward-vorgang-icon/forward-vorgang-icon.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..983f66161939b2ff51a7133707e323c35543f396
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/forward-vorgang-icon/forward-vorgang-icon.component.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2025 Das Land Schleswig-Holstein vertreten durch den
+ * Ministerpräsidenten des Landes Schleswig-Holstein
+ * Staatskanzlei
+ * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
+ *
+ * Lizenziert unter der EUPL, Version 1.2 oder - sobald
+ * diese von der Europäischen Kommission genehmigt wurden -
+ * Folgeversionen der EUPL ("Lizenz");
+ * Sie dürfen dieses Werk ausschließlich gemäß
+ * dieser Lizenz nutzen.
+ * Eine Kopie der Lizenz finden Sie hier:
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Sofern nicht durch anwendbare Rechtsvorschriften
+ * gefordert oder in schriftlicher Form vereinbart, wird
+ * die unter der Lizenz verbreitete Software "so wie sie
+ * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
+ * ausdrücklich oder stillschweigend - verbreitet.
+ * Die sprachspezifischen Genehmigungen und Beschränkungen
+ * unter der Lizenz sind dem Lizenztext zu entnehmen.
+ */
+import { NgClass } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { iconVariants, IconVariants } from '../iconVariants';
+
+@Component({
+  selector: 'ods-forward-vorgang-icon',
+  standalone: true,
+  imports: [NgClass],
+  template: `<svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    [ngClass]="twMerge(iconVariants({ size }), 'fill-primary', class)"
+    aria-hidden="true"
+  >
+    <path d="M17.7222 16.4V14L22 18.2L17.7222 22.4V19.94C14.6667 19.94 12.5278 20.9 11 23C11.6111 20 13.4444 17 17.7222 16.4Z" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16.25 11V3.77384H11.2794L6.875 7.93078L6.875 18.408H9V20.1818H6.875C5.83947 20.1818 5 19.3876 5 18.408V7.93078C5 7.4596 5.19815 7.00779 5.55074 6.67501L9.95513 2.51807C10.3066 2.18631 10.7829 2 11.2794 2H16.25C17.2855 2 18.125 2.79417 18.125 3.77384V11H16.25Z"
+    />
+  </svg>`,
+})
+export class ForwardVorgangIconComponent {
+  @Input() size: IconVariants['size'] = 'medium';
+  @Input() class: string = undefined;
+
+  readonly iconVariants = iconVariants;
+  readonly twMerge = twMerge;
+}
diff --git a/alfa-client/libs/user-profile/src/lib/assign-user-profile-button-container/assign-user-profile-button-container.component.scss b/alfa-client/libs/design-system/src/lib/icons/forward-vorgang-icon/forward-vorgang-icon.stories.ts
similarity index 53%
rename from alfa-client/libs/user-profile/src/lib/assign-user-profile-button-container/assign-user-profile-button-container.component.scss
rename to alfa-client/libs/design-system/src/lib/icons/forward-vorgang-icon/forward-vorgang-icon.stories.ts
index 54c4f3eb8c92af93694c03cdf577fed23cf9f86b..2fd3fa932eddb7319eb468c0a3e4d2e8c4dbdf4a 100644
--- a/alfa-client/libs/user-profile/src/lib/assign-user-profile-button-container/assign-user-profile-button-container.component.scss
+++ b/alfa-client/libs/design-system/src/lib/icons/forward-vorgang-icon/forward-vorgang-icon.stories.ts
@@ -1,5 +1,5 @@
-/**
- * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
+/*
+ * Copyright (C) 2025 Das Land Schleswig-Holstein vertreten durch den
  * Ministerpräsidenten des Landes Schleswig-Holstein
  * Staatskanzlei
  * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
@@ -21,3 +21,30 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { ForwardVorgangIconComponent } from './forward-vorgang-icon.component';
+
+const meta: Meta<ForwardVorgangIconComponent> = {
+  title: 'Icons/Forward Vorgang icon',
+  component: ForwardVorgangIconComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<ForwardVorgangIconComponent>;
+
+export const Default: Story = {
+  args: { size: 'large' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'medium' },
+      },
+    },
+  },
+};
diff --git a/alfa-client/libs/design-system/src/lib/icons/request-vorgang-deletion-icon/request-vorgang-deletion-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/request-vorgang-deletion-icon/request-vorgang-deletion-icon.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e8655275d9a25c7cc96ad3823668079bf2518bf0
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/request-vorgang-deletion-icon/request-vorgang-deletion-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RequestVorgangDeletionIconComponent } from './request-vorgang-deletion-icon.component';
+
+describe('RequestVorgangDeletionIconComponent', () => {
+  let component: RequestVorgangDeletionIconComponent;
+  let fixture: ComponentFixture<RequestVorgangDeletionIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RequestVorgangDeletionIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RequestVorgangDeletionIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/request-vorgang-deletion-icon/request-vorgang-deletion-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/request-vorgang-deletion-icon/request-vorgang-deletion-icon.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ca9dd83e0e886b1c28dd535951326e4880db7928
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/request-vorgang-deletion-icon/request-vorgang-deletion-icon.component.ts
@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { iconVariants, IconVariants } from '../iconVariants';
+
+@Component({
+  selector: 'ods-request-vorgang-deletion-icon',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    [ngClass]="[twMerge(iconVariants({ size }), 'fill-primary', class)]"
+    aria-hidden="true"
+  >
+    <path d="M11.75 8H13.75V12.15L15.35 10.6L16.75 12L12.75 16L8.75 12L10.15 10.6L11.75 12.15V8Z" />
+    <path
+      d="M7.75 21C7.2 21 6.72917 20.8042 6.3375 20.4125C5.94583 20.0208 5.75 19.55 5.75 19V6H4.75V4H9.75V3H15.75V4H20.75V6H19.75V19C19.75 19.55 19.5542 20.0208 19.1625 20.4125C18.7708 20.8042 18.3 21 17.75 21H7.75ZM17.75 6H7.75V19H17.75V6Z"
+    />
+  </svg>`,
+})
+export class RequestVorgangDeletionIconComponent {
+  @Input() size: IconVariants['size'] = 'medium';
+  @Input() class: string = '';
+
+  readonly iconVariants = iconVariants;
+  readonly twMerge = twMerge;
+}
diff --git a/alfa-client/libs/design-system/src/lib/icons/request-vorgang-deletion-icon/request-vorgang-deletion-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/request-vorgang-deletion-icon/request-vorgang-deletion-icon.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eed9f6bc607a9bf3483a158f6e89e850ab475181
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/request-vorgang-deletion-icon/request-vorgang-deletion-icon.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { RequestVorgangDeletionIconComponent } from './request-vorgang-deletion-icon.component';
+
+const meta: Meta<RequestVorgangDeletionIconComponent> = {
+  title: 'Icons/Request Vorgang deletion icon',
+  component: RequestVorgangDeletionIconComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<RequestVorgangDeletionIconComponent>;
+
+export const Default: Story = {
+  args: { size: 'large' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'medium' },
+      },
+    },
+  },
+};
diff --git a/alfa-client/libs/design-system/src/lib/icons/undo-icon/undo-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/undo-icon/undo-icon.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fda1f7e237ce8667e4f4194fc58f85384d3bb985
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/undo-icon/undo-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { UndoIconComponent } from './undo-icon.component';
+
+describe('UndoIconComponent', () => {
+  let component: UndoIconComponent;
+  let fixture: ComponentFixture<UndoIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UndoIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UndoIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/undo-icon/undo-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/undo-icon/undo-icon.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7b36f81af4fbc7989233efacfd1c4df124af94dc
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/undo-icon/undo-icon.component.ts
@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { iconVariants, IconVariants } from '../iconVariants';
+
+@Component({
+  selector: 'ods-undo-icon',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    [ngClass]="[twMerge(iconVariants({ size }), 'fill-primary', class)]"
+    aria-hidden="true"
+  >
+    <path
+      d="M13.25 8C10.6 8 8.2 8.99 6.35 10.6L2.75 7V16H11.75L8.13 12.38C9.52 11.22 11.29 10.5 13.25 10.5C16.79 10.5 19.8 12.81 20.85 16L23.22 15.22C21.83 11.03 17.9 8 13.25 8Z"
+    />
+  </svg>`,
+})
+export class UndoIconComponent {
+  @Input() size: IconVariants['size'] = 'medium';
+  @Input() class: string = '';
+
+  readonly iconVariants = iconVariants;
+  readonly twMerge = twMerge;
+}
diff --git a/alfa-client/libs/design-system/src/lib/icons/undo-icon/undo-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/undo-icon/undo-icon.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0d2d78f8148e451628802851ce122c012e99c9b2
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/undo-icon/undo-icon.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { UndoIconComponent } from './undo-icon.component';
+
+const meta: Meta<UndoIconComponent> = {
+  title: 'Icons/Undo icon',
+  component: UndoIconComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<UndoIconComponent>;
+
+export const Default: Story = {
+  args: { size: 'large' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'medium' },
+      },
+    },
+  },
+};
diff --git a/alfa-client/libs/design-system/src/lib/icons/undo-request-vorgang-deletion-icon/undo-request-vorgang-deletion-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/undo-request-vorgang-deletion-icon/undo-request-vorgang-deletion-icon.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8ac05bee99d59932ae4bbddf8bebe1612085d2f0
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/undo-request-vorgang-deletion-icon/undo-request-vorgang-deletion-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { UndoRequestVorgangDeletionIconComponent } from './undo-request-vorgang-deletion-icon.component';
+
+describe('UndoRequestVorgangDeletionIconComponent', () => {
+  let component: UndoRequestVorgangDeletionIconComponent;
+  let fixture: ComponentFixture<UndoRequestVorgangDeletionIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UndoRequestVorgangDeletionIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UndoRequestVorgangDeletionIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/undo-request-vorgang-deletion-icon/undo-request-vorgang-deletion-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/undo-request-vorgang-deletion-icon/undo-request-vorgang-deletion-icon.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0140ae651fb6c5dd42cbc1370509fae3226bdc7c
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/undo-request-vorgang-deletion-icon/undo-request-vorgang-deletion-icon.component.ts
@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { iconVariants, IconVariants } from '../iconVariants';
+
+@Component({
+  selector: 'ods-undo-request-vorgang-deletion-icon',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    [ngClass]="[twMerge(iconVariants({ size }), 'fill-primary', class)]"
+    aria-hidden="true"
+  >
+    <path
+      d="M11.75 16H13.75V11.85L15.35 13.4L16.75 12L12.75 8L8.75 12L10.15 13.4L11.75 11.85V16ZM7.75 21C7.2 21 6.72917 20.8042 6.3375 20.4125C5.94583 20.0208 5.75 19.55 5.75 19V6H4.75V4H9.75V3H15.75V4H20.75V6H19.75V19C19.75 19.55 19.5542 20.0208 19.1625 20.4125C18.7708 20.8042 18.3 21 17.75 21H7.75ZM17.75 6H7.75V19H17.75V6Z"
+    />
+  </svg>`,
+})
+export class UndoRequestVorgangDeletionIconComponent {
+  @Input() size: IconVariants['size'] = 'medium';
+  @Input() class: string = '';
+
+  readonly iconVariants = iconVariants;
+  readonly twMerge = twMerge;
+}
diff --git a/alfa-client/libs/design-system/src/lib/icons/undo-request-vorgang-deletion-icon/undo-request-vorgang-deletion-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/undo-request-vorgang-deletion-icon/undo-request-vorgang-deletion-icon.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c5f0bd31fa92c4e11ef9286d9d13f2d41663ef26
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/undo-request-vorgang-deletion-icon/undo-request-vorgang-deletion-icon.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { UndoRequestVorgangDeletionIconComponent } from './undo-request-vorgang-deletion-icon.component';
+
+const meta: Meta<UndoRequestVorgangDeletionIconComponent> = {
+  title: 'Icons/Undo request vorgang deletion icon',
+  component: UndoRequestVorgangDeletionIconComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<UndoRequestVorgangDeletionIconComponent>;
+
+export const Default: Story = {
+  args: { size: 'large' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'medium' },
+      },
+    },
+  },
+};
diff --git a/alfa-client/libs/design-system/src/lib/icons/update-icon/update-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/update-icon/update-icon.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d2e3620badccfec4c031b9d6bf8f700cb1e571c0
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/update-icon/update-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { UpdateIconComponent } from './update-icon.component';
+
+describe('UpdateIconComponent', () => {
+  let component: UpdateIconComponent;
+  let fixture: ComponentFixture<UpdateIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UpdateIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UpdateIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/update-icon/update-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/update-icon/update-icon.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..34e40d8150deb19ab77923d576b6567e87cf2911
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/update-icon/update-icon.component.ts
@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { iconVariants, IconVariants } from '../iconVariants';
+
+@Component({
+  selector: 'ods-update-icon',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    [ngClass]="[twMerge(iconVariants({ size }), 'fill-primary', class)]"
+    aria-hidden="true"
+  >
+    <path
+      d="M21.75 10.12H14.97L17.71 7.3C14.98 4.6 10.56 4.5 7.83 7.2C5.1 9.91 5.1 14.28 7.83 16.99C10.56 19.7 14.98 19.7 17.71 16.99C19.07 15.65 19.75 14.08 19.75 12.1H21.75C21.75 14.08 20.87 16.65 19.11 18.39C15.6 21.87 9.9 21.87 6.39 18.39C2.89 14.92 2.86 9.28 6.37 5.81C9.88 2.34 15.51 2.34 19.02 5.81L21.75 3V10.12ZM13.25 8V12.25L16.75 14.33L16.03 15.54L11.75 13V8H13.25Z"
+    />
+  </svg>`,
+})
+export class UpdateIconComponent {
+  @Input() size: IconVariants['size'] = 'medium';
+  @Input() class: string = '';
+
+  readonly iconVariants = iconVariants;
+  readonly twMerge = twMerge;
+}
diff --git a/alfa-client/libs/design-system/src/lib/icons/update-icon/update-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/update-icon/update-icon.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7814dc21f79f972ad09ff1aa1c1a93fc3d59ac98
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/update-icon/update-icon.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { UpdateIconComponent } from './update-icon.component';
+
+const meta: Meta<UpdateIconComponent> = {
+  title: 'Icons/Update icon',
+  component: UpdateIconComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<UpdateIconComponent>;
+
+export const Default: Story = {
+  args: { size: 'large' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'medium' },
+      },
+    },
+  },
+};
diff --git a/alfa-client/libs/design-system/src/lib/link/link.component.ts b/alfa-client/libs/design-system/src/lib/link/link.component.ts
index 29d63dfea04d76fe8464bc335821c420e36ebdf5..64830deee7cf6873156013281ec33d7e2a56199e 100644
--- a/alfa-client/libs/design-system/src/lib/link/link.component.ts
+++ b/alfa-client/libs/design-system/src/lib/link/link.component.ts
@@ -11,7 +11,7 @@ import { twMerge } from 'tailwind-merge';
     [href]="url"
     [class]="
       twMerge(
-        'hover:bg-ghost-hover block rounded border-2 border-transparent text-text focus:border-focus focus:outline-none dark:hover:bg-neutral-700',
+        'block rounded-lg border-2 border-transparent text-text hover:bg-ghost-hover focus-visible:border-focus focus-visible:bg-ghost-hover focus-visible:outline-none dark:hover:bg-neutral-700',
         class
       )
     "
diff --git a/alfa-client/libs/forwarding-shared/src/lib/forwarding.repository.spec.ts b/alfa-client/libs/forwarding-shared/src/lib/forwarding.repository.spec.ts
index f675f96336086e4fdc7edd5937b502494662830d..34a7bd065f0c85b3ddc80a39d2fbe195e9c33655 100644
--- a/alfa-client/libs/forwarding-shared/src/lib/forwarding.repository.spec.ts
+++ b/alfa-client/libs/forwarding-shared/src/lib/forwarding.repository.spec.ts
@@ -43,9 +43,7 @@ describe('ForwardingRepository', () => {
   });
 
   describe('getForwardings', () => {
-    const vorgang: VorgangWithEingangResource = createVorgangWithEingangResource([
-      VorgangWithEingangLinkRel.FORWARDING,
-    ]);
+    const vorgang: VorgangWithEingangResource = createVorgangWithEingangResource([VorgangWithEingangLinkRel.FORWARD_BY_EMAIL]);
     const commandList: ForwardingListResource = createForwardingListResource();
 
     beforeEach(() => {
@@ -61,7 +59,7 @@ describe('ForwardingRepository', () => {
     it('should call resourceWrapper', () => {
       repository.getForwardings(vorgang);
 
-      expect(resourceWrapper.get).toHaveBeenCalledWith(VorgangWithEingangLinkRel.FORWARDING);
+      expect(resourceWrapper.get).toHaveBeenCalledWith(VorgangWithEingangLinkRel.FORWARD_BY_EMAIL);
     });
 
     it('should return result', () => {
diff --git a/alfa-client/libs/forwarding-shared/src/lib/forwarding.repository.ts b/alfa-client/libs/forwarding-shared/src/lib/forwarding.repository.ts
index 33d6a4d7a96721d3ef65c8ee39b018e9bd9a2389..a83ca3536dabe921ff4dc10719dbbdd1f5c74943 100644
--- a/alfa-client/libs/forwarding-shared/src/lib/forwarding.repository.ts
+++ b/alfa-client/libs/forwarding-shared/src/lib/forwarding.repository.ts
@@ -21,8 +21,8 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Injectable } from '@angular/core';
 import { VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Injectable } from '@angular/core';
 import { ResourceFactory } from '@ngxp/rest';
 import { Observable } from 'rxjs';
 import { ForwardingListResource } from './forwarding.model';
@@ -32,6 +32,6 @@ export class ForwardingRepository {
   constructor(private resourceFactory: ResourceFactory) {}
 
   public getForwardings(vorgang: VorgangWithEingangResource): Observable<ForwardingListResource> {
-    return this.resourceFactory.from(vorgang).get(VorgangWithEingangLinkRel.FORWARDING);
+    return this.resourceFactory.from(vorgang).get(VorgangWithEingangLinkRel.FORWARD_BY_EMAIL);
   }
 }
diff --git a/alfa-client/libs/forwarding/src/index.ts b/alfa-client/libs/forwarding/src/index.ts
index 504fbb0e7ec702fb29520609ef67645757c8e52b..24d937c3408da87eef49107297ff05faf4ffd709 100644
--- a/alfa-client/libs/forwarding/src/index.ts
+++ b/alfa-client/libs/forwarding/src/index.ts
@@ -21,5 +21,6 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
+export * from './lib/forward-by-ozgcloud-button-container/forward-by-ozgcloud-button-container.component';
 export * from './lib/forwarding.module';
 export * from './lib/vorgang-forwarding-container/vorgang-forwarding-container.component';
diff --git a/alfa-client/libs/forwarding/src/lib/forward-by-ozgcloud-button-container/forward-by-ozgcloud-button-container.component.html b/alfa-client/libs/forwarding/src/lib/forward-by-ozgcloud-button-container/forward-by-ozgcloud-button-container.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..c3a536b79edb8516518911255a4e1d40eeb2448b
--- /dev/null
+++ b/alfa-client/libs/forwarding/src/lib/forward-by-ozgcloud-button-container/forward-by-ozgcloud-button-container.component.html
@@ -0,0 +1,16 @@
+@if (vorgangWithEingang | hasLink: vorgangWithEingangLinkRel.FORWARD_BY_OZGCLOUD) {
+  @if (showAsIconButton) {
+    <ods-button-with-spinner
+      tooltip="Vorgang weiterleiten"
+      variant="ghost"
+      size="fit"
+      dataTestId="forward-by-ozgcloud-icon-button"
+    >
+      <ods-forward-vorgang-icon icon class="fill-text" />
+    </ods-button-with-spinner>
+  } @else {
+    <ods-button-with-spinner text="Weiterleiten" variant="outline" dataTestId="forward-by-ozgcloud-button">
+      <ods-forward-vorgang-icon icon />
+    </ods-button-with-spinner>
+  }
+}
diff --git a/alfa-client/libs/forwarding/src/lib/forward-by-ozgcloud-button-container/forward-by-ozgcloud-button-container.component.spec.ts b/alfa-client/libs/forwarding/src/lib/forward-by-ozgcloud-button-container/forward-by-ozgcloud-button-container.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0bdb21fd38ad815027918f1b3e13b7a1818f57d4
--- /dev/null
+++ b/alfa-client/libs/forwarding/src/lib/forward-by-ozgcloud-button-container/forward-by-ozgcloud-button-container.component.spec.ts
@@ -0,0 +1,90 @@
+import { existsAsHtmlElement, notExistsAsHtmlElement } from '@alfa-client/test-utils';
+import { VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { ForwardVorgangIconComponent, TooltipDirective } from '@ods/system';
+import { getDataTestIdAttributeOf } from 'libs/tech-shared/test/data-test';
+import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
+import { MockComponent, MockDirective } from 'ng-mocks';
+import { ForwardByOzgcloudButtonContainerComponent } from './forward-by-ozgcloud-button-container.component';
+
+describe('ForwardByOzgcloudButtonContainerComponent', () => {
+  let component: ForwardByOzgcloudButtonContainerComponent;
+  let fixture: ComponentFixture<ForwardByOzgcloudButtonContainerComponent>;
+
+  const iconButton: string = getDataTestIdAttributeOf('forward-by-ozgcloud-icon-button');
+  const button: string = getDataTestIdAttributeOf('forward-by-ozgcloud-button');
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ForwardByOzgcloudButtonContainerComponent],
+      declarations: [
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(ForwardVorgangIconComponent),
+        MockDirective(TooltipDirective),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ForwardByOzgcloudButtonContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('on existing link', () => {
+    beforeEach(() => {
+      component.vorgangWithEingang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.FORWARD_BY_OZGCLOUD]);
+    });
+
+    describe('show as icon button', () => {
+      beforeEach(() => {
+        component.showAsIconButton = true;
+        fixture.detectChanges();
+      });
+
+      it('should hide button', () => {
+        notExistsAsHtmlElement(fixture, button);
+      });
+
+      it('should show iconButton', () => {
+        existsAsHtmlElement(fixture, iconButton);
+      });
+    });
+
+    describe('show as button', () => {
+      beforeEach(() => {
+        component.showAsIconButton = false;
+        fixture.detectChanges();
+      });
+
+      it('should hide iconButton', () => {
+        notExistsAsHtmlElement(fixture, iconButton);
+      });
+
+      it('should show button', () => {
+        existsAsHtmlElement(fixture, button);
+      });
+    });
+  });
+
+  describe('on missing link', () => {
+    it('should hide button', () => {
+      component.vorgangWithEingang = createVorgangWithEingangResource();
+
+      fixture.detectChanges();
+
+      notExistsAsHtmlElement(fixture, button);
+    });
+
+    it('should hide icon button', () => {
+      component.vorgangWithEingang = createVorgangWithEingangResource();
+
+      fixture.detectChanges();
+
+      notExistsAsHtmlElement(fixture, iconButton);
+    });
+  });
+});
diff --git a/alfa-client/libs/forwarding/src/lib/forward-by-ozgcloud-button-container/forward-by-ozgcloud-button-container.component.ts b/alfa-client/libs/forwarding/src/lib/forward-by-ozgcloud-button-container/forward-by-ozgcloud-button-container.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b00da7ddb3c481ac14502f9091ec29c4b9af2748
--- /dev/null
+++ b/alfa-client/libs/forwarding/src/lib/forward-by-ozgcloud-button-container/forward-by-ozgcloud-button-container.component.ts
@@ -0,0 +1,20 @@
+import { TechSharedModule } from '@alfa-client/tech-shared';
+import { VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { ForwardVorgangIconComponent, TooltipDirective } from '@ods/system';
+
+@Component({
+  selector: 'alfa-forward-by-ozgcloud-button-container',
+  standalone: true,
+  imports: [CommonModule, TechSharedModule, ButtonWithSpinnerComponent, ForwardVorgangIconComponent, TooltipDirective],
+  templateUrl: './forward-by-ozgcloud-button-container.component.html',
+  styles: [':host {@apply empty:hidden}'],
+})
+export class ForwardByOzgcloudButtonContainerComponent {
+  @Input() vorgangWithEingang: VorgangWithEingangResource;
+  @Input() showAsIconButton: boolean = false;
+
+  public readonly vorgangWithEingangLinkRel = VorgangWithEingangLinkRel;
+}
diff --git a/alfa-client/libs/forwarding/src/lib/vorgang-forwarding-container/vorgang-forwarding-container.component.html b/alfa-client/libs/forwarding/src/lib/vorgang-forwarding-container/vorgang-forwarding-container.component.html
index 435e66f60107cd9951b54af1ef059b04d7aef2fb..2698ddc7e78cbb2a6b8c6d0a4a6bbd67806ecc85 100644
--- a/alfa-client/libs/forwarding/src/lib/vorgang-forwarding-container/vorgang-forwarding-container.component.html
+++ b/alfa-client/libs/forwarding/src/lib/vorgang-forwarding-container/vorgang-forwarding-container.component.html
@@ -23,20 +23,14 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ng-container
-  *ngIf="
-    (vorgang | hasLink: vorgangLinkRel.FORWARD) || (vorgang | hasLink: vorgangLinkRel.FORWARDING)
-  "
->
+<ng-container *ngIf="(vorgang | hasLink: vorgangLinkRel.FORWARD) || (vorgang | hasLink: vorgangLinkRel.FORWARD_BY_EMAIL)">
   <ozgcloud-expansion-panel
     headline="Vorgang weiterleiten"
     data-test-id="forwarding"
     *ngIf="forwardingStateResources$ | async as forwardingStateResources"
   >
     <ozgcloud-spinner [stateResource]="forwardingStateResources">
-      <alfa-vorgang-forwarding-info-list
-        [forwardingList]="forwardingStateResources"
-      ></alfa-vorgang-forwarding-info-list>
+      <alfa-vorgang-forwarding-info-list [forwardingList]="forwardingStateResources"></alfa-vorgang-forwarding-info-list>
     </ozgcloud-spinner>
 
     <alfa-vorgang-forward-formular
diff --git a/alfa-client/libs/forwarding/src/lib/vorgang-forwarding-container/vorgang-forwarding-container.component.spec.ts b/alfa-client/libs/forwarding/src/lib/vorgang-forwarding-container/vorgang-forwarding-container.component.spec.ts
index 33d4a94562258a2c0a84d905a09ddb7cccfad35d..25691e2e369a3024d426d9a1e7a4e8976b37d228 100644
--- a/alfa-client/libs/forwarding/src/lib/vorgang-forwarding-container/vorgang-forwarding-container.component.spec.ts
+++ b/alfa-client/libs/forwarding/src/lib/vorgang-forwarding-container/vorgang-forwarding-container.component.spec.ts
@@ -21,18 +21,15 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { UntypedFormBuilder } from '@angular/forms';
 import { ForwardingService } from '@alfa-client/forwarding-shared';
 import { createStateResource, HasLinkPipe } from '@alfa-client/tech-shared';
 import { mock } from '@alfa-client/test-utils';
 import { ExpansionPanelComponent, SpinnerComponent } from '@alfa-client/ui';
 import { VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { UntypedFormBuilder } from '@angular/forms';
 import { createCommandResource } from 'libs/command-shared/test/command';
-import {
-  createVorgangForwardRequest,
-  createVorgangWithEingangResource,
-} from 'libs/vorgang-shared/test/vorgang';
+import { createVorgangForwardRequest, createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
 import { MockComponent } from 'ng-mocks';
 import { of } from 'rxjs';
 import { VorgangForwardFormService } from './vorgang-forward-formular/vorgang-forward-form/vorgang-forward.formservice';
@@ -127,7 +124,7 @@ describe('VorgangForwardingContainerComponent', () => {
     });
 
     it('should call service get forward commands', () => {
-      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.FORWARDING]);
+      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.FORWARD_BY_EMAIL]);
       fixture.detectChanges();
 
       component.getForwardings();
@@ -150,9 +147,7 @@ describe('VorgangForwardingContainerComponent', () => {
   describe('forwarding', () => {
     describe('on forwarding link', () => {
       it('should show if exists', () => {
-        component.vorgang = createVorgangWithEingangResource([
-          VorgangWithEingangLinkRel.FORWARDING,
-        ]);
+        component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.FORWARD_BY_EMAIL]);
         fixture.detectChanges();
 
         const element = fixture.nativeElement.querySelector(forwarding);
diff --git a/alfa-client/libs/forwarding/src/lib/vorgang-forwarding-container/vorgang-forwarding-container.component.ts b/alfa-client/libs/forwarding/src/lib/vorgang-forwarding-container/vorgang-forwarding-container.component.ts
index e9aedf34419e9afc0aaf65709857c364ee9caee2..9613957552ae86a387c108ecfa05f71463c8218b 100644
--- a/alfa-client/libs/forwarding/src/lib/vorgang-forwarding-container/vorgang-forwarding-container.component.ts
+++ b/alfa-client/libs/forwarding/src/lib/vorgang-forwarding-container/vorgang-forwarding-container.component.ts
@@ -21,11 +21,11 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input, OnChanges } from '@angular/core';
 import { CommandResource } from '@alfa-client/command-shared';
 import { ForwardingListResource, ForwardingService } from '@alfa-client/forwarding-shared';
 import { createEmptyStateResource, StateResource } from '@alfa-client/tech-shared';
 import { VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input, OnChanges } from '@angular/core';
 import { hasLink } from '@ngxp/rest';
 import { CommandLinkRel } from 'libs/command-shared/src/lib/command.linkrel';
 import { Observable, of } from 'rxjs';
@@ -40,12 +40,9 @@ import { VorgangForwardFormService } from './vorgang-forward-formular/vorgang-fo
 export class VorgangForwardingContainerComponent implements OnChanges {
   @Input() public vorgang: VorgangWithEingangResource;
 
-  forwardingStateResources$: Observable<StateResource<ForwardingListResource>> = of(
-    createEmptyStateResource<ForwardingListResource>(),
-  );
-  pendingForwardStateResource$: Observable<StateResource<CommandResource>> = of(
-    createEmptyStateResource<CommandResource>(),
-  );
+  forwardingStateResources$: Observable<StateResource<ForwardingListResource>> =
+    of(createEmptyStateResource<ForwardingListResource>());
+  pendingForwardStateResource$: Observable<StateResource<CommandResource>> = of(createEmptyStateResource<CommandResource>());
 
   readonly linkRel = CommandLinkRel;
   readonly vorgangLinkRel = VorgangWithEingangLinkRel;
@@ -67,7 +64,7 @@ export class VorgangForwardingContainerComponent implements OnChanges {
   }
 
   getForwardings(): void {
-    if (hasLink(this.vorgang, VorgangWithEingangLinkRel.FORWARDING)) {
+    if (hasLink(this.vorgang, VorgangWithEingangLinkRel.FORWARD_BY_EMAIL)) {
       this.forwardingStateResources$ = this.forwardingService.getForwardings(this.vorgang);
     }
   }
@@ -77,8 +74,6 @@ export class VorgangForwardingContainerComponent implements OnChanges {
   }
 
   submit(): void {
-    this.pendingForwardStateResource$ = <Observable<StateResource<CommandResource>>>(
-      this.formService.submit()
-    );
+    this.pendingForwardStateResource$ = <Observable<StateResource<CommandResource>>>this.formService.submit();
   }
 }
diff --git a/alfa-client/libs/loesch-anforderung/src/lib/endgueltig-loeschen-button-container/endgueltig-loeschen-button-container.component.scss b/alfa-client/libs/loesch-anforderung/src/lib/endgueltig-loeschen-button-container/endgueltig-loeschen-button-container.component.scss
deleted file mode 100644
index 54c4f3eb8c92af93694c03cdf577fed23cf9f86b..0000000000000000000000000000000000000000
--- a/alfa-client/libs/loesch-anforderung/src/lib/endgueltig-loeschen-button-container/endgueltig-loeschen-button-container.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
diff --git a/alfa-client/libs/loesch-anforderung/src/lib/endgueltig-loeschen-button-container/endgueltig-loeschen-button-container.component.ts b/alfa-client/libs/loesch-anforderung/src/lib/endgueltig-loeschen-button-container/endgueltig-loeschen-button-container.component.ts
index 1b0cade59c61d1431bba83e8967f5eaf0e9c84b3..bb94290b756c5a9f47aa07135a50ba2247313d68 100644
--- a/alfa-client/libs/loesch-anforderung/src/lib/endgueltig-loeschen-button-container/endgueltig-loeschen-button-container.component.ts
+++ b/alfa-client/libs/loesch-anforderung/src/lib/endgueltig-loeschen-button-container/endgueltig-loeschen-button-container.component.ts
@@ -21,34 +21,25 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
 import { CommandResource } from '@alfa-client/command-shared';
-import {
-  LoeschAnforderungResource,
-  LoeschAnforderungService,
-} from '@alfa-client/loesch-anforderung-shared';
+import { LoeschAnforderungResource, LoeschAnforderungService } from '@alfa-client/loesch-anforderung-shared';
 import { StateResource, createEmptyStateResource } from '@alfa-client/tech-shared';
 import { BasicDialogComponent, BasicDialogData, DialogService } from '@alfa-client/ui';
-import {
-  LoeschAnforderungLinkRel,
-  VorgangWithEingangLinkRel,
-  VorgangWithEingangResource,
-} from '@alfa-client/vorgang-shared';
+import { LoeschAnforderungLinkRel, VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
 import { Observable, filter, first, of } from 'rxjs';
 
 @Component({
   selector: 'alfa-endgueltig-loeschen-button-container',
   templateUrl: './endgueltig-loeschen-button-container.component.html',
-  styleUrls: ['./endgueltig-loeschen-button-container.component.scss'],
+  styles: [':host {@apply empty:hidden}'],
 })
 export class EndgueltigLoeschenButtonContainerComponent {
   @Input() vorgang: VorgangWithEingangResource;
   @Input() showAsIconButton: boolean = false;
 
-  commandStateResource$: Observable<StateResource<CommandResource>> = of(
-    createEmptyStateResource<CommandResource>(),
-  );
+  commandStateResource$: Observable<StateResource<CommandResource>> = of(createEmptyStateResource<CommandResource>());
   loeschAnforderungResource$: Observable<StateResource<LoeschAnforderungResource>>;
 
   readonly vorgangWithEingangLinkRel = VorgangWithEingangLinkRel;
@@ -66,12 +57,8 @@ export class EndgueltigLoeschenButtonContainerComponent {
     this.loeschAnforderungResource$ = this.loeschAnforderungService.getLoeschAnforderung();
   }
 
-  public openEndgueltigLoeschenDialog(
-    loeschAnforderungResource: StateResource<LoeschAnforderungResource>,
-  ): void {
-    const dialogRef: MatDialogRef<BasicDialogComponent> = this.dialogService.openBasic(
-      this.createBasicDialogConfig(),
-    );
+  public openEndgueltigLoeschenDialog(loeschAnforderungResource: StateResource<LoeschAnforderungResource>): void {
+    const dialogRef: MatDialogRef<BasicDialogComponent> = this.dialogService.openBasic(this.createBasicDialogConfig());
 
     dialogRef
       .afterClosed()
diff --git a/alfa-client/libs/loesch-anforderung/src/lib/endgueltig-loeschen-button-container/endgueltig-loeschen-button/endgueltig-loeschen-button.component.html b/alfa-client/libs/loesch-anforderung/src/lib/endgueltig-loeschen-button-container/endgueltig-loeschen-button/endgueltig-loeschen-button.component.html
index d02765b7ba2a514cbe791390a0a8fe753a0c47b2..bf476f537b1107285627ef7d450f2a6ad8b3a57f 100644
--- a/alfa-client/libs/loesch-anforderung/src/lib/endgueltig-loeschen-button-container/endgueltig-loeschen-button/endgueltig-loeschen-button.component.html
+++ b/alfa-client/libs/loesch-anforderung/src/lib/endgueltig-loeschen-button-container/endgueltig-loeschen-button/endgueltig-loeschen-button.component.html
@@ -23,20 +23,23 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ozgcloud-stroked-button-with-spinner
-  *ngIf="!showAsIconButton"
-  data-test-id="endgueltig-loeschen-button"
-  text="Endgültig löschen"
-  svgIcon="delete_finally"
-  (clickEmitter)="endgueltigLoeschen.emit()"
->
-</ozgcloud-stroked-button-with-spinner>
-
-<ozgcloud-icon-button-with-spinner
-  *ngIf="showAsIconButton"
-  data-test-id="endgueltig-loeschen-icon-button"
-  toolTip="Endgültig löschen"
-  svgIcon="delete_finally"
-  (clickEmitter)="endgueltigLoeschen.emit()"
->
-</ozgcloud-icon-button-with-spinner>
+@if (showAsIconButton) {
+  <ods-button-with-spinner
+    data-test-id="endgueltig-loeschen-icon-button"
+    tooltip="Endgültig löschen"
+    variant="ghost"
+    size="fit"
+    (clickEmitter)="endgueltigLoeschen.emit()"
+  >
+    <ods-delete-vorgang-finally-icon icon class="fill-text" />
+  </ods-button-with-spinner>
+} @else {
+  <ods-button-with-spinner
+    data-test-id="endgueltig-loeschen-button"
+    text="Endgültig löschen"
+    variant="outline"
+    (clickEmitter)="endgueltigLoeschen.emit()"
+  >
+    <ods-delete-vorgang-finally-icon icon />
+  </ods-button-with-spinner>
+}
diff --git a/alfa-client/libs/loesch-anforderung/src/lib/endgueltig-loeschen-button-container/endgueltig-loeschen-button/endgueltig-loeschen-button.component.spec.ts b/alfa-client/libs/loesch-anforderung/src/lib/endgueltig-loeschen-button-container/endgueltig-loeschen-button/endgueltig-loeschen-button.component.spec.ts
index 783c0b0f700f25abc8cc525763425d877476d5f1..66d46e2f07886affa2ff4603762c800b9f04798c 100644
--- a/alfa-client/libs/loesch-anforderung/src/lib/endgueltig-loeschen-button-container/endgueltig-loeschen-button/endgueltig-loeschen-button.component.spec.ts
+++ b/alfa-client/libs/loesch-anforderung/src/lib/endgueltig-loeschen-button-container/endgueltig-loeschen-button/endgueltig-loeschen-button.component.spec.ts
@@ -21,12 +21,10 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { existsAsHtmlElement, notExistsAsHtmlElement } from '@alfa-client/test-utils';
-import {
-  IconButtonWithSpinnerComponent,
-  OzgcloudStrokedButtonWithSpinnerComponent,
-} from '@alfa-client/ui';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { DeleteVorgangFinallyIconComponent } from '@ods/system';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { MockComponent } from 'ng-mocks';
 import { EndgueltigLoeschenButtonComponent } from './endgueltig-loeschen-button.component';
@@ -42,8 +40,8 @@ describe('EndgueltigLoeschenButtonComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [
         EndgueltigLoeschenButtonComponent,
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
-        MockComponent(IconButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(DeleteVorgangFinallyIconComponent),
       ],
     }).compileComponents();
 
diff --git a/alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button-container.component.scss b/alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button-container.component.scss
deleted file mode 100644
index 54c4f3eb8c92af93694c03cdf577fed23cf9f86b..0000000000000000000000000000000000000000
--- a/alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button-container.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
diff --git a/alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button-container.component.ts b/alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button-container.component.ts
index 8d60d118a2611ca1588d07e4574ffe2429fcfb85..104b574f16e4f3efc873dcc3fd37633a2139a193 100644
--- a/alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button-container.component.ts
+++ b/alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button-container.component.ts
@@ -21,7 +21,6 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input } from '@angular/core';
 import { CommandResource } from '@alfa-client/command-shared';
 import {
   LoeschAnforderungLinkRel,
@@ -29,34 +28,31 @@ import {
   LoeschAnforderungService,
 } from '@alfa-client/loesch-anforderung-shared';
 import { StateResource, createEmptyStateResource } from '@alfa-client/tech-shared';
+import { Component, Input } from '@angular/core';
 import { Observable, of } from 'rxjs';
 
 @Component({
   selector: 'alfa-loesch-anforderung-zuruecknehmen-button-container',
   templateUrl: './loesch-anforderung-zuruecknehmen-button-container.component.html',
-  styleUrls: ['./loesch-anforderung-zuruecknehmen-button-container.component.scss'],
+  styles: [':host {@apply empty:hidden}'],
 })
 export class LoeschAnforderungZuruecknehmenButtonContainerComponent {
   @Input() showAsIconButton: boolean = false;
 
   loeschAnforderungStateResource$: Observable<StateResource<LoeschAnforderungResource>>;
-  loeschAnforderungZuruecknehmenCommand$: Observable<StateResource<CommandResource>> = of(
-    createEmptyStateResource<CommandResource>(),
-  );
+  loeschAnforderungZuruecknehmenCommand$: Observable<StateResource<CommandResource>> =
+    of(createEmptyStateResource<CommandResource>());
 
   readonly loeschAnforderungLinkRel = LoeschAnforderungLinkRel;
 
   constructor(private loeschAnforderungService: LoeschAnforderungService) {}
 
   ngOnInit(): void {
-    this.loeschAnforderungZuruecknehmenCommand$ =
-      this.loeschAnforderungService.getLoschAnforderungZuruecknehmenCommand();
+    this.loeschAnforderungZuruecknehmenCommand$ = this.loeschAnforderungService.getLoschAnforderungZuruecknehmenCommand();
     this.loeschAnforderungStateResource$ = this.loeschAnforderungService.getLoeschAnforderung();
   }
 
-  public loeschAnforderungZuruecknehmen(
-    loeschAnforderungResource: StateResource<LoeschAnforderungResource>,
-  ): void {
+  public loeschAnforderungZuruecknehmen(loeschAnforderungResource: StateResource<LoeschAnforderungResource>): void {
     this.loeschAnforderungService.zuruecknehmen(loeschAnforderungResource.resource);
   }
 }
diff --git a/alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button/loesch-anforderung-zuruecknehmen-button.component.html b/alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button/loesch-anforderung-zuruecknehmen-button.component.html
index 9b9a716c4e326aa7b844ea2b8cb4abfa68e832cd..3aee95356bb52e42320e94e2dab3b1ec1c5d9aec 100644
--- a/alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button/loesch-anforderung-zuruecknehmen-button.component.html
+++ b/alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button/loesch-anforderung-zuruecknehmen-button.component.html
@@ -23,22 +23,25 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ozgcloud-stroked-button-with-spinner
-  *ngIf="!showAsIconButton"
-  data-test-id="loesch-anforderung-zuruecknehmen-button"
-  text="Löschanforderung zurücknehmen"
-  svgIcon="undo_request_deletion"
-  [stateResource]="loeschAnforderungZuruecknehmenCommand"
-  (clickEmitter)="loeschAnforderungZuruecknehmen.emit()"
->
-</ozgcloud-stroked-button-with-spinner>
-
-<ozgcloud-icon-button-with-spinner
-  *ngIf="showAsIconButton"
-  data-test-id="loesch-anforderung-zuruecknehmen-icon-button"
-  svgIcon="undo_request_deletion"
-  toolTip="Löschanforderung zurücknehmen"
-  [stateResource]="loeschAnforderungZuruecknehmenCommand"
-  (clickEmitter)="loeschAnforderungZuruecknehmen.emit()"
->
-</ozgcloud-icon-button-with-spinner>
+@if (showAsIconButton) {
+  <ods-button-with-spinner
+    [stateResource]="loeschAnforderungZuruecknehmenCommand"
+    data-test-id="loesch-anforderung-zuruecknehmen-icon-button"
+    tooltip="Löschanforderung zurücknehmen"
+    variant="ghost"
+    size="fit"
+    (clickEmitter)="loeschAnforderungZuruecknehmen.emit()"
+  >
+    <ods-undo-request-vorgang-deletion-icon icon class="fill-text" />
+  </ods-button-with-spinner>
+} @else {
+  <ods-button-with-spinner
+    [stateResource]="loeschAnforderungZuruecknehmenCommand"
+    data-test-id="loesch-anforderung-zuruecknehmen-button"
+    text="Löschanforderung zurücknehmen"
+    variant="outline"
+    (clickEmitter)="loeschAnforderungZuruecknehmen.emit()"
+  >
+    <ods-undo-request-vorgang-deletion-icon icon />
+  </ods-button-with-spinner>
+}
diff --git a/alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button/loesch-anforderung-zuruecknehmen-button.component.spec.ts b/alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button/loesch-anforderung-zuruecknehmen-button.component.spec.ts
index 5d009efa5c227b3c43e297f4064ba7bb74066773..f51d85f10159a0572566a4fd917ebc45f36d66f1 100644
--- a/alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button/loesch-anforderung-zuruecknehmen-button.component.spec.ts
+++ b/alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button/loesch-anforderung-zuruecknehmen-button.component.spec.ts
@@ -21,12 +21,10 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { existsAsHtmlElement, notExistsAsHtmlElement } from '@alfa-client/test-utils';
-import {
-  IconButtonWithSpinnerComponent,
-  OzgcloudStrokedButtonWithSpinnerComponent,
-} from '@alfa-client/ui';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { UndoRequestVorgangDeletionIconComponent } from '@ods/system';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { MockComponent } from 'ng-mocks';
 import { LoeschAnforderungZuruecknehmenButtonComponent } from './loesch-anforderung-zuruecknehmen-button.component';
@@ -35,19 +33,15 @@ describe('LoeschAnforderungZuruecknehmenButtonComponent', () => {
   let component: LoeschAnforderungZuruecknehmenButtonComponent;
   let fixture: ComponentFixture<LoeschAnforderungZuruecknehmenButtonComponent>;
 
-  const loeschenAnfordernZuruecknehmenButton: string = getDataTestIdOf(
-    'loesch-anforderung-zuruecknehmen-button',
-  );
-  const loeschenAnfordernZuruecknehmenIconButton: string = getDataTestIdOf(
-    'loesch-anforderung-zuruecknehmen-icon-button',
-  );
+  const loeschenAnfordernZuruecknehmenButton: string = getDataTestIdOf('loesch-anforderung-zuruecknehmen-button');
+  const loeschenAnfordernZuruecknehmenIconButton: string = getDataTestIdOf('loesch-anforderung-zuruecknehmen-icon-button');
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [
         LoeschAnforderungZuruecknehmenButtonComponent,
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
-        MockComponent(IconButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(UndoRequestVorgangDeletionIconComponent),
       ],
     }).compileComponents();
 
diff --git a/alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung.module.ts b/alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung.module.ts
index ee7952fbf39cd37ebd04b22d60660cb53b769aad..7c4b75ff775819c23d3e73e5c25d80a18f2eb15a 100644
--- a/alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung.module.ts
+++ b/alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung.module.ts
@@ -21,18 +21,24 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
 import { LoeschAnforderungSharedModule } from '@alfa-client/loesch-anforderung-shared';
 import { TechSharedModule } from '@alfa-client/tech-shared';
 import { UiModule } from '@alfa-client/ui';
 import { VorgangSharedModule } from '@alfa-client/vorgang-shared';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import {
+  DeleteVorgangFinallyIconComponent,
+  RequestVorgangDeletionIconComponent,
+  UndoRequestVorgangDeletionIconComponent,
+} from '@ods/system';
 import { EndgueltigLoeschenButtonContainerComponent } from './endgueltig-loeschen-button-container/endgueltig-loeschen-button-container.component';
 import { EndgueltigLoeschenButtonComponent } from './endgueltig-loeschen-button-container/endgueltig-loeschen-button/endgueltig-loeschen-button.component';
+import { LoeschAnforderungZuruecknehmenButtonContainerComponent } from './loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button-container.component';
+import { LoeschAnforderungZuruecknehmenButtonComponent } from './loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button/loesch-anforderung-zuruecknehmen-button.component';
 import { LoeschenAnfordernButtonContainerComponent } from './loeschen-anfordern-button-container/loeschen-anfordern-button-container.component';
 import { LoeschenAnfordernButtonComponent } from './loeschen-anfordern-button-container/loeschen-anfordern-button/loeschen-anfordern-button.component';
-import { LoeschAnforderungZuruecknehmenButtonComponent } from './loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button/loesch-anforderung-zuruecknehmen-button.component';
-import { LoeschAnforderungZuruecknehmenButtonContainerComponent } from './loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button-container.component';
 
 @NgModule({
   imports: [
@@ -41,6 +47,10 @@ import { LoeschAnforderungZuruecknehmenButtonContainerComponent } from './loesch
     TechSharedModule,
     UiModule,
     VorgangSharedModule,
+    RequestVorgangDeletionIconComponent,
+    ButtonWithSpinnerComponent,
+    DeleteVorgangFinallyIconComponent,
+    UndoRequestVorgangDeletionIconComponent,
   ],
   declarations: [
     LoeschenAnfordernButtonContainerComponent,
diff --git a/alfa-client/libs/loesch-anforderung/src/lib/loeschen-anfordern-button-container/loeschen-anfordern-button/loeschen-anfordern-button.component.html b/alfa-client/libs/loesch-anforderung/src/lib/loeschen-anfordern-button-container/loeschen-anfordern-button/loeschen-anfordern-button.component.html
index 81b61300a526e2b76858b8a20151a16f75bbc7d3..4a7cc9cb40b1f9ed650cb7c5e27723ccb30edbef 100644
--- a/alfa-client/libs/loesch-anforderung/src/lib/loeschen-anfordern-button-container/loeschen-anfordern-button/loeschen-anfordern-button.component.html
+++ b/alfa-client/libs/loesch-anforderung/src/lib/loeschen-anfordern-button-container/loeschen-anfordern-button/loeschen-anfordern-button.component.html
@@ -23,22 +23,25 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ozgcloud-stroked-button-with-spinner
-  *ngIf="!showAsIconButton"
-  data-test-id="loeschen-anfordern-button"
-  text="Löschen anfordern"
-  svgIcon="request_deletion"
-  [stateResource]="loeschenAnfordernCommand"
-  (clickEmitter)="loeschenAnfordern.emit()"
->
-</ozgcloud-stroked-button-with-spinner>
-
-<ozgcloud-icon-button-with-spinner
-  *ngIf="showAsIconButton"
-  data-test-id="loeschen-anfordern-icon-button"
-  svgIcon="request_deletion"
-  toolTip="Löschen anfordern"
-  [stateResource]="loeschenAnfordernCommand"
-  (clickEmitter)="loeschenAnfordern.emit()"
->
-</ozgcloud-icon-button-with-spinner>
+@if (showAsIconButton) {
+  <ods-button-with-spinner
+    [stateResource]="loeschenAnfordernCommand"
+    data-test-id="loeschen-anfordern-icon-button"
+    tooltip="Löschen anfordern"
+    variant="ghost"
+    size="fit"
+    (clickEmitter)="loeschenAnfordern.emit()"
+  >
+    <ods-request-vorgang-deletion-icon icon class="fill-text" />
+  </ods-button-with-spinner>
+} @else {
+  <ods-button-with-spinner
+    [stateResource]="loeschenAnfordernCommand"
+    data-test-id="loeschen-anfordern-button"
+    text="Löschen anfordern"
+    variant="outline"
+    (clickEmitter)="loeschenAnfordern.emit()"
+  >
+    <ods-request-vorgang-deletion-icon icon />
+  </ods-button-with-spinner>
+}
diff --git a/alfa-client/libs/loesch-anforderung/src/lib/loeschen-anfordern-button-container/loeschen-anfordern-button/loeschen-anfordern-button.component.spec.ts b/alfa-client/libs/loesch-anforderung/src/lib/loeschen-anfordern-button-container/loeschen-anfordern-button/loeschen-anfordern-button.component.spec.ts
index dbf4ba9cad23c72918d3cf040e38054f3c81d2a2..f859031bafc62e2db38e95d53cbfd3c6b2a3634a 100644
--- a/alfa-client/libs/loesch-anforderung/src/lib/loeschen-anfordern-button-container/loeschen-anfordern-button/loeschen-anfordern-button.component.spec.ts
+++ b/alfa-client/libs/loesch-anforderung/src/lib/loeschen-anfordern-button-container/loeschen-anfordern-button/loeschen-anfordern-button.component.spec.ts
@@ -21,12 +21,10 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { existsAsHtmlElement, notExistsAsHtmlElement } from '@alfa-client/test-utils';
-import {
-  IconButtonWithSpinnerComponent,
-  OzgcloudStrokedButtonWithSpinnerComponent,
-} from '@alfa-client/ui';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { RequestVorgangDeletionIconComponent } from '@ods/system';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { MockComponent } from 'ng-mocks';
 import { LoeschenAnfordernButtonComponent } from './loeschen-anfordern-button.component';
@@ -42,8 +40,8 @@ describe('LoeschenAnfordernButtonComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [
         LoeschenAnfordernButtonComponent,
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
-        MockComponent(IconButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(RequestVorgangDeletionIconComponent),
       ],
     }).compileComponents();
 
diff --git a/alfa-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.html b/alfa-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.html
index 22b79691af9cafb120a6d127f2255a8a168402a7..8a29c815b66b75b1258b10cfd57173dac007f755 100644
--- a/alfa-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.html
+++ b/alfa-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.html
@@ -23,41 +23,39 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ng-container
-  *ngIf="
-    postfachMailListStateResource.resource | hasLink: postfachMailListLinkRel.SEND_POSTFACH_MAIL
-  "
->
+@if (postfachMailListStateResource.resource | hasLink: postfachMailListLinkRel.SEND_POSTFACH_MAIL) {
   <!-- TODO Aufteilen in 3 einzelne Komponenten -->
-  <ozgcloud-stroked-button-with-spinner
-    *ngIf="!showAsIconButton && text && !toolTip"
-    data-test-id="create-mail-button-with-text"
-    [showSpinner]="pendingSendPostfachMailCommand.resource | hasLink: commandLinkRel.UPDATE"
-    class="create-button"
-    [text]="text"
-    icon="add"
-    (clickEmitter)="openPostfachNachrichtenDialog.emit()"
-  >
-  </ozgcloud-stroked-button-with-spinner>
-
-  <ozgcloud-stroked-button-with-spinner
-    *ngIf="!showAsIconButton && !text && toolTip"
-    data-test-id="create-mail-button-without-text"
-    [showSpinner]="pendingSendPostfachMailCommand.resource | hasLink: commandLinkRel.UPDATE"
-    class="create-button"
-    [toolTip]="toolTip"
-    icon="add"
-    (clickEmitter)="openPostfachNachrichtenDialog.emit()"
-  >
-  </ozgcloud-stroked-button-with-spinner>
-
-  <ozgcloud-icon-button-with-spinner
-    *ngIf="showAsIconButton"
-    data-test-id="send-mail-icon-button"
-    [showSpinner]="pendingSendPostfachMailCommand.resource | hasLink: commandLinkRel.UPDATE"
-    icon="mail_outline"
-    toolTip="Neue Nachricht erstellen"
-    (clickEmitter)="openPostfachNachrichtenDialog.emit()"
-  >
-  </ozgcloud-icon-button-with-spinner>
-</ng-container>
+  @if (showAsIconButton) {
+    <ods-button
+      data-test-id="send-mail-icon-button"
+      [isLoading]="pendingSendPostfachMailCommand.resource | hasLink: commandLinkRel.UPDATE"
+      tooltip="Neue Nachricht erstellen"
+      variant="ghost"
+      size="fit"
+      (clickEmitter)="openPostfachNachrichtenDialog.emit()"
+    >
+      <ods-mailbox-icon icon />
+    </ods-button>
+  } @else if (text && !toolTip) {
+    <ods-button
+      data-test-id="create-mail-button-with-text"
+      [isLoading]="pendingSendPostfachMailCommand.resource | hasLink: commandLinkRel.UPDATE"
+      [text]="text"
+      variant="outline"
+      (clickEmitter)="openPostfachNachrichtenDialog.emit()"
+    >
+      <ods-plus-icon icon />
+    </ods-button>
+  } @else if (!text && toolTip) {
+    <ods-button
+      data-test-id="create-mail-button-without-text"
+      [isLoading]="pendingSendPostfachMailCommand.resource | hasLink: commandLinkRel.UPDATE"
+      [tooltip]="toolTip"
+      variant="ghost"
+      size="fit"
+      (clickEmitter)="openPostfachNachrichtenDialog.emit()"
+    >
+      <ods-plus-icon icon />
+    </ods-button>
+  }
+}
diff --git a/alfa-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.spec.ts b/alfa-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.spec.ts
index 3fbf0c1e1144fd48acf31fa8f56e1c3846ff1d64..d02565a847b264cca81be05fdd3bb9eda376656b 100644
--- a/alfa-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.spec.ts
+++ b/alfa-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.spec.ts
@@ -21,18 +21,15 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { faker } from '@faker-js/faker';
 import { PostfachMailListLinkRel } from '@alfa-client/postfach-shared';
 import { EMPTY_STRING, HasLinkPipe, createStateResource } from '@alfa-client/tech-shared';
-import {
-  IconButtonWithSpinnerComponent,
-  OzgcloudStrokedButtonWithSpinnerComponent,
-} from '@alfa-client/ui';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { faker } from '@faker-js/faker';
+import { ButtonComponent, MailboxIconComponent, PlusIconComponent, TooltipDirective } from '@ods/system';
 import { createCommandResource } from 'libs/command-shared/test/command';
 import { createPostfachMailListResource } from 'libs/postfach-shared/test/postfach';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
-import { MockComponent } from 'ng-mocks';
+import { MockComponent, MockDirective } from 'ng-mocks';
 import { PostfachMailButtonComponent } from './postfach-mail-button.component';
 
 describe('PostfachMailButtonComponent', () => {
@@ -48,8 +45,10 @@ describe('PostfachMailButtonComponent', () => {
       declarations: [
         PostfachMailButtonComponent,
         HasLinkPipe,
-        MockComponent(IconButtonWithSpinnerComponent),
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
+        MockComponent(ButtonComponent),
+        MockComponent(PlusIconComponent),
+        MockComponent(MailboxIconComponent),
+        MockDirective(TooltipDirective),
       ],
     }).compileComponents();
   });
@@ -77,9 +76,7 @@ describe('PostfachMailButtonComponent', () => {
       });
 
       it('should be hidden', () => {
-        component.postfachMailListStateResource = createStateResource(
-          createPostfachMailListResource(),
-        );
+        component.postfachMailListStateResource = createStateResource(createPostfachMailListResource());
 
         fixture.detectChanges();
         const buttonElement = fixture.nativeElement.querySelector(sendMailButtonWithText);
@@ -108,9 +105,7 @@ describe('PostfachMailButtonComponent', () => {
       });
 
       it('should be hidden', () => {
-        component.postfachMailListStateResource = createStateResource(
-          createPostfachMailListResource(),
-        );
+        component.postfachMailListStateResource = createStateResource(createPostfachMailListResource());
 
         fixture.detectChanges();
         const buttonElement = fixture.nativeElement.querySelector(sendMailButtonWithoutText);
@@ -139,9 +134,7 @@ describe('PostfachMailButtonComponent', () => {
     });
 
     it('should be hidden', () => {
-      component.postfachMailListStateResource = createStateResource(
-        createPostfachMailListResource(),
-      );
+      component.postfachMailListStateResource = createStateResource(createPostfachMailListResource());
 
       fixture.detectChanges();
       const buttonElement = fixture.nativeElement.querySelector(sendMailIconButton);
diff --git a/alfa-client/libs/postfach/src/lib/postfach.module.ts b/alfa-client/libs/postfach/src/lib/postfach.module.ts
index 59217f49b5e1d331267a8e1b785381298c65ed8c..e6030c3cc32e0e6ffc0b3f8ef4890cdd04fe02d5 100644
--- a/alfa-client/libs/postfach/src/lib/postfach.module.ts
+++ b/alfa-client/libs/postfach/src/lib/postfach.module.ts
@@ -29,6 +29,7 @@ import { VorgangSharedUiModule } from '@alfa-client/vorgang-shared-ui';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { ButtonComponent, MailboxIconComponent, PlusIconComponent } from '@ods/system';
 import { PostfachMailButtonContainerComponent } from './postfach-mail-button-container/postfach-mail-button-container.component';
 import { PostfachMailButtonComponent } from './postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component';
 import { PostfachMailFormComponent } from './postfach-mail-form/postfach-mail-form.component';
@@ -67,6 +68,9 @@ const routes: Routes = [
     UserProfileModule,
     VorgangSharedUiModule,
     BinaryFileModule,
+    ButtonComponent,
+    PlusIconComponent,
+    MailboxIconComponent,
   ],
   declarations: [
     PostfachMailListContainerComponent,
@@ -90,11 +94,7 @@ const routes: Routes = [
     PostfachNachrichtAttachmentContainerComponent,
     PostfachNachrichtReplyEditorContainerComponent,
   ],
-  exports: [
-    PostfachMailListContainerComponent,
-    PostfachMailButtonContainerComponent,
-    PostfachMailFormComponent,
-  ],
+  exports: [PostfachMailListContainerComponent, PostfachMailButtonContainerComponent, PostfachMailFormComponent],
   providers: [
     {
       provide: ON_PAGE,
diff --git a/alfa-client/libs/test-utils/src/lib/jest.helper.ts b/alfa-client/libs/test-utils/src/lib/jest.helper.ts
index 1f05a4791cef9e691a60f6fa2287212357e3d909..60df8592afa840fd2f06b5f967e8f5cb295a9a2c 100644
--- a/alfa-client/libs/test-utils/src/lib/jest.helper.ts
+++ b/alfa-client/libs/test-utils/src/lib/jest.helper.ts
@@ -23,7 +23,8 @@
  */
 import { ComponentFixture } from '@angular/core/testing';
 import { expect } from '@jest/globals';
-import { getElementFromFixture } from './helper';
+import { TooltipDirective } from '@ods/system';
+import { getDebugElementFromFixtureByCss, getElementFromFixture } from './helper';
 
 export function notExistsAsHtmlElement(fixture: ComponentFixture<any>, domElement: string): void {
   expect(getElementFromFixture(fixture, domElement)).not.toBeInstanceOf(HTMLElement);
@@ -32,3 +33,8 @@ export function notExistsAsHtmlElement(fixture: ComponentFixture<any>, domElemen
 export function existsAsHtmlElement(fixture: ComponentFixture<any>, domElement: string): void {
   expect(getElementFromFixture(fixture, domElement)).toBeInstanceOf(HTMLElement);
 }
+
+export function tooltipExistsWithText(fixture: ComponentFixture<any>, domElement: string, tooltipText: string) {
+  const tooltipInstance = getDebugElementFromFixtureByCss(fixture, domElement).injector.get(TooltipDirective);
+  expect(tooltipInstance.componentRef.instance.text).toBe(tooltipText);
+}
diff --git a/alfa-client/libs/ui/src/lib/ui/back-button/back-button.component.html b/alfa-client/libs/ui/src/lib/ui/back-button/back-button.component.html
index 29c6b91fcdefa4629cae62422ee8b56fe62346b2..24868baff476b7d90f3eb7e44a5133ac4faf59d2 100644
--- a/alfa-client/libs/ui/src/lib/ui/back-button/back-button.component.html
+++ b/alfa-client/libs/ui/src/lib/ui/back-button/back-button.component.html
@@ -23,13 +23,8 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<a
-  [routerLink]="linkTo"
-  mat-icon-button
-  data-test-id="back-button"
-  class="back-button"
-  [tooltip]="label"
-  tooltipAriaType="aria-labelledby"
->
-  <mat-icon>arrow_back</mat-icon>
+<a [routerLink]="linkTo" data-test-id="back-button" [tooltip]="label" tooltipAriaType="aria-labelledby" tabindex="-1">
+  <ods-button variant="ghost" size="fit">
+    <ods-arrow-back-icon icon class="fill-text" />
+  </ods-button>
 </a>
diff --git a/alfa-client/libs/ui/src/lib/ui/back-button/back-button.component.spec.ts b/alfa-client/libs/ui/src/lib/ui/back-button/back-button.component.spec.ts
index 9ca87b6fea4263137d68e5451ad05639cff3666d..1e440ea225b27baa66c63d3d62642d543001068b 100644
--- a/alfa-client/libs/ui/src/lib/ui/back-button/back-button.component.spec.ts
+++ b/alfa-client/libs/ui/src/lib/ui/back-button/back-button.component.spec.ts
@@ -23,12 +23,11 @@
  */
 import { getElementFromFixture } from '@alfa-client/test-utils';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatIcon } from '@angular/material/icon';
 import { RouterTestingModule } from '@angular/router/testing';
 import { faker } from '@faker-js/faker';
-import { TooltipDirective } from '@ods/system';
+import { ArrowBackIconComponent, ButtonComponent, TooltipDirective } from '@ods/system';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
-import { MockDirective } from 'ng-mocks';
+import { MockComponent, MockDirective } from 'ng-mocks';
 import { BackButtonComponent } from './back-button.component';
 
 describe('BackButtonComponent', () => {
@@ -41,8 +40,13 @@ describe('BackButtonComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [BackButtonComponent, MockDirective(TooltipDirective)],
-      imports: [MatIcon, RouterTestingModule],
+      declarations: [
+        BackButtonComponent,
+        MockComponent(ButtonComponent),
+        MockComponent(ArrowBackIconComponent),
+        MockDirective(TooltipDirective),
+      ],
+      imports: [RouterTestingModule],
     }).compileComponents();
 
     fixture = TestBed.createComponent(BackButtonComponent);
diff --git a/alfa-client/libs/ui/src/lib/ui/subnavigation/subnavigation.component.scss b/alfa-client/libs/ui/src/lib/ui/subnavigation/subnavigation.component.scss
index 8b0ddf04c2f9ea722d7eb1bedaa6bd8e7adfb87e..142aa51807244ffac6a9de41d169fd69fc77daa7 100644
--- a/alfa-client/libs/ui/src/lib/ui/subnavigation/subnavigation.component.scss
+++ b/alfa-client/libs/ui/src/lib/ui/subnavigation/subnavigation.component.scss
@@ -24,7 +24,7 @@
 @import 'variables';
 
 :host {
-  @apply flex h-12 w-full items-center justify-start pb-1 pl-4 pr-3 pt-1 sm:sticky;
+  @apply flex h-12 w-full items-center justify-start pb-1 pl-3 pr-3 pt-1 sm:sticky;
   top: $header-height;
   z-index: 2;
   box-shadow: $shadow-bottom;
diff --git a/alfa-client/libs/ui/src/lib/ui/ui.module.ts b/alfa-client/libs/ui/src/lib/ui/ui.module.ts
index eeff7417056ee49e49cbe8c4206a2e72aa5dd9a5..e7c19b188d8e38ab7c45f080f52b4b3536550cc4 100644
--- a/alfa-client/libs/ui/src/lib/ui/ui.module.ts
+++ b/alfa-client/libs/ui/src/lib/ui/ui.module.ts
@@ -47,7 +47,13 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
-import { FileUploadButtonComponent, SpinnerIconComponent, TooltipDirective } from '@ods/system';
+import {
+  ArrowBackIconComponent,
+  ButtonComponent,
+  FileUploadButtonComponent,
+  SpinnerIconComponent,
+  TooltipDirective,
+} from '@ods/system';
 import { de } from 'date-fns/locale';
 import { AppIconComponent } from '../icon/app-icon/app-icon.component';
 import { PostfachIconComponent } from '../icon/postfach-icon/postfach-icon.component';
@@ -162,6 +168,8 @@ import { ValidationErrorComponent } from './validation-error/validation-error.co
     FileUploadButtonComponent,
     SpinnerIconComponent,
     TooltipDirective,
+    ButtonComponent,
+    ArrowBackIconComponent,
   ],
   exports: [
     MatButtonModule,
diff --git a/alfa-client/libs/user-assistance/src/lib/help-menu/help-menu.component.spec.ts b/alfa-client/libs/user-assistance/src/lib/help-menu/help-menu.component.spec.ts
index 80c975b0d3a74e0221754a65ab6f127823b20e03..ba0e572d4edad3c8e610cd869d31b40b186d8d5d 100644
--- a/alfa-client/libs/user-assistance/src/lib/help-menu/help-menu.component.spec.ts
+++ b/alfa-client/libs/user-assistance/src/lib/help-menu/help-menu.component.spec.ts
@@ -27,11 +27,16 @@ import { getElementFromDomRoot } from '@alfa-client/test-utils';
 import { UiModule } from '@alfa-client/ui';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { DropdownMenuComponent, DropdownMenuTextItemComponent, FileIconComponent, HelpIconComponent } from '@ods/system';
+import {
+  DropdownMenuComponent,
+  DropdownMenuLinkItemComponent,
+  DropdownMenuTextItemComponent,
+  FileIconComponent,
+  HelpIconComponent,
+} from '@ods/system';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { MockComponent } from 'ng-mocks';
 import { createApiRootResource } from '../../../../../libs/api-root-shared/test/api-root';
-import { DropdownMenuLinkItemComponent } from '../../../../design-system/src/lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component';
 import { DocumentationComponent } from './documentation/documentation.component';
 import { HelpButtonComponent } from './help-button/help-button.component';
 import { HelpMenuComponent } from './help-menu.component';
diff --git a/alfa-client/libs/user-assistance/src/lib/user-assistance.module.ts b/alfa-client/libs/user-assistance/src/lib/user-assistance.module.ts
index e75061efe20c27262b6bb4f59b389fc4ecedfee7..1eda492b4fe8af82af049e37d1548a419912e98f 100644
--- a/alfa-client/libs/user-assistance/src/lib/user-assistance.module.ts
+++ b/alfa-client/libs/user-assistance/src/lib/user-assistance.module.ts
@@ -25,8 +25,13 @@ import { TechSharedModule } from '@alfa-client/tech-shared';
 import { UiModule } from '@alfa-client/ui';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { DropdownMenuComponent, DropdownMenuTextItemComponent, FileIconComponent, HelpIconComponent } from '@ods/system';
-import { DropdownMenuLinkItemComponent } from '../../../design-system/src/lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component';
+import {
+  DropdownMenuComponent,
+  DropdownMenuLinkItemComponent,
+  DropdownMenuTextItemComponent,
+  FileIconComponent,
+  HelpIconComponent,
+} from '@ods/system';
 import { DocumentationComponent } from './help-menu/documentation/documentation.component';
 import { OpenDocumentationButtonComponent } from './help-menu/documentation/open-documentation-button/open-documentation-button.component';
 import { HelpButtonComponent } from './help-menu/help-button/help-button.component';
diff --git a/alfa-client/libs/user-profile/src/lib/assign-user-profile-button-container/assign-user-profile-button-container.component.html b/alfa-client/libs/user-profile/src/lib/assign-user-profile-button-container/assign-user-profile-button-container.component.html
index ac709eb5dc988c92b1eb4172e07b5b6928286842..f0e6aa37b1b8932034832aa3beeed0f92b4c4ff4 100644
--- a/alfa-client/libs/user-profile/src/lib/assign-user-profile-button-container/assign-user-profile-button-container.component.html
+++ b/alfa-client/libs/user-profile/src/lib/assign-user-profile-button-container/assign-user-profile-button-container.component.html
@@ -23,11 +23,15 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ozgcloud-icon-button-with-spinner
-  *ngIf="vorgang | hasLink: linkRel.ASSIGN"
-  svgIcon="account_outline"
-  toolTip="Bearbeiter zuordnen"
-  (clickEmitter)="showUserProfileSearch()"
-  data-test-id="assign-user-profile-icon-button"
->
-</ozgcloud-icon-button-with-spinner>
+@if (vorgang | hasLink: linkRel.ASSIGN) {
+  <ods-button-with-spinner
+    svgIcon="account_outline"
+    tooltip="Bearbeiter zuordnen"
+    data-test-id="assign-user-profile-icon-button"
+    variant="ghost"
+    size="fit"
+    (clickEmitter)="showUserProfileSearch()"
+  >
+    <ods-account-circle-icon icon class="fill-text" />
+  </ods-button-with-spinner>
+}
diff --git a/alfa-client/libs/user-profile/src/lib/assign-user-profile-button-container/assign-user-profile-button-container.component.spec.ts b/alfa-client/libs/user-profile/src/lib/assign-user-profile-button-container/assign-user-profile-button-container.component.spec.ts
index 5f82315849d7119b780f8ad9f6da480c1ec8bd08..531805961b6eef4f0453f69ca5ebb481c096b1aa 100644
--- a/alfa-client/libs/user-profile/src/lib/assign-user-profile-button-container/assign-user-profile-button-container.component.spec.ts
+++ b/alfa-client/libs/user-profile/src/lib/assign-user-profile-button-container/assign-user-profile-button-container.component.spec.ts
@@ -21,12 +21,13 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HasLinkPipe } from '@alfa-client/tech-shared';
 import { mock } from '@alfa-client/test-utils';
-import { IconButtonWithSpinnerComponent } from '@alfa-client/ui';
 import { UserProfileService } from '@alfa-client/user-profile-shared';
 import { VorgangHeaderLinkRel } from '@alfa-client/vorgang-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { AccountCircleIconComponent } from '@ods/system';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
 import { MockComponent } from 'ng-mocks';
 import { AssignUserProfileButtonContainerComponent } from './assign-user-profile-button-container.component';
@@ -44,7 +45,8 @@ describe('AssignUserProfileButtonContainerComponent', () => {
       declarations: [
         AssignUserProfileButtonContainerComponent,
         HasLinkPipe,
-        MockComponent(IconButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(AccountCircleIconComponent),
       ],
       providers: [
         {
diff --git a/alfa-client/libs/user-profile/src/lib/assign-user-profile-button-container/assign-user-profile-button-container.component.ts b/alfa-client/libs/user-profile/src/lib/assign-user-profile-button-container/assign-user-profile-button-container.component.ts
index 1ab24948af637d75dd273801cc4f960f29d81234..41b1d332d55c5802986a544f01dacebc8721633e 100644
--- a/alfa-client/libs/user-profile/src/lib/assign-user-profile-button-container/assign-user-profile-button-container.component.ts
+++ b/alfa-client/libs/user-profile/src/lib/assign-user-profile-button-container/assign-user-profile-button-container.component.ts
@@ -21,14 +21,14 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input } from '@angular/core';
 import { UserProfileService } from '@alfa-client/user-profile-shared';
 import { VorgangHeaderLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'alfa-assign-user-profile-button-container',
   templateUrl: './assign-user-profile-button-container.component.html',
-  styleUrls: ['./assign-user-profile-button-container.component.scss'],
+  styles: [':host {@apply empty:hidden}'],
 })
 export class AssignUserProfileButtonContainerComponent {
   @Input() vorgang: VorgangWithEingangResource;
diff --git a/alfa-client/libs/user-profile/src/lib/user-profile.module.ts b/alfa-client/libs/user-profile/src/lib/user-profile.module.ts
index 11ab2e9213281a32febbbd4664fa79d59d4969f4..408ace4cfbf611228fe69933743b717961982f55 100644
--- a/alfa-client/libs/user-profile/src/lib/user-profile.module.ts
+++ b/alfa-client/libs/user-profile/src/lib/user-profile.module.ts
@@ -27,7 +27,9 @@ import { UserProfileSharedModule } from '@alfa-client/user-profile-shared';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { ButtonWithSpinnerComponent } from '@ods/component';
 import {
+  AccountCircleIconComponent,
   DropdownMenuButtonItemComponent,
   DropdownMenuComponent,
   DropdownMenuItemComponent,
@@ -69,6 +71,8 @@ import { UserProfileComponent } from './user-profile/user-profile.component';
     DropdownMenuComponent,
     DropdownMenuItemComponent,
     DropdownMenuButtonItemComponent,
+    ButtonWithSpinnerComponent,
+    AccountCircleIconComponent,
     TooltipDirective,
   ],
   declarations: [
diff --git a/alfa-client/libs/user-settings/src/lib/user-settings.module.ts b/alfa-client/libs/user-settings/src/lib/user-settings.module.ts
index 6dbf5e4ecc89f1ebef3f57dc78b3726a6d642c5b..bafeb748dc5a3c6c145397e031924740372c07be 100644
--- a/alfa-client/libs/user-settings/src/lib/user-settings.module.ts
+++ b/alfa-client/libs/user-settings/src/lib/user-settings.module.ts
@@ -25,8 +25,7 @@ import { UiModule } from '@alfa-client/ui';
 import { UserSettingsSharedModule } from '@alfa-client/user-settings-shared';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { CloseIconComponent, DropdownMenuComponent } from '@ods/system';
-import { SettingsIconComponent } from '../../../design-system/src/lib/icons/settings-icon/settings-icon.component';
+import { CloseIconComponent, DropdownMenuComponent, SettingsIconComponent } from '@ods/system';
 import { UserSettingsContainerComponent } from './user-settings-container/user-settings-container.component';
 import { UserSettingsDarkmodeContainerComponent } from './user-settings-container/user-settings/user-settings-dropdown/user-settings-darkmode-container/user-settings-darkmode-container.component';
 import { UserSettingsDarkmodeComponent } from './user-settings-container/user-settings/user-settings-dropdown/user-settings-darkmode-container/user-settings-darkmode/user-settings-darkmode.component';
@@ -36,14 +35,7 @@ import { UserSettingsEmailBenachrichtigungComponent } from './user-settings-cont
 import { UserSettingsComponent } from './user-settings-container/user-settings/user-settings.component';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    UiModule,
-    UserSettingsSharedModule,
-    DropdownMenuComponent,
-    CloseIconComponent,
-    SettingsIconComponent,
-  ],
+  imports: [CommonModule, UiModule, UserSettingsSharedModule, DropdownMenuComponent, CloseIconComponent, SettingsIconComponent],
   declarations: [
     UserSettingsContainerComponent,
     UserSettingsEmailBenachrichtigungComponent,
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/abschliessen-button/abschliessen-button.component.html b/alfa-client/libs/vorgang-detail/src/lib/buttons/abschliessen-button/abschliessen-button.component.html
index c57d7a4c19bb47c890da21d0d099f28f87267e98..6d9599fdd1a6ac07b215a0b53195566c458f7fe2 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/abschliessen-button/abschliessen-button.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/abschliessen-button/abschliessen-button.component.html
@@ -23,24 +23,28 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ng-container *ngIf="isVisible">
-  <ozgcloud-stroked-button-with-spinner
-    *ngIf="!showAsIconButton"
-    data-test-id="abschliessen-button"
-    text="Abschließen"
-    icon="done"
-    [stateResource]="commandStateResource$ | async"
-    (clickEmitter)="abschliessen()"
-  >
-  </ozgcloud-stroked-button-with-spinner>
 
-  <ozgcloud-icon-button-with-spinner
-    *ngIf="showAsIconButton"
-    data-test-id="abschliessen-icon-button"
-    icon="done"
-    toolTip="Vorgang abschließen"
-    [stateResource]="commandStateResource$ | async"
-    (clickEmitter)="abschliessen()"
-  >
-  </ozgcloud-icon-button-with-spinner>
-</ng-container>
+@if (isVisible) {
+  @if (showAsIconButton) {
+    <ods-button-with-spinner
+      [stateResource]="commandStateResource$ | async"
+      data-test-id="abschliessen-icon-button"
+      tooltip="Vorgang abschließen"
+      variant="ghost"
+      size="fit"
+      (clickEmitter)="abschliessen()"
+    >
+      <ods-check-icon icon class="fill-text" />
+    </ods-button-with-spinner>
+  } @else {
+    <ods-button-with-spinner
+      [stateResource]="commandStateResource$ | async"
+      data-test-id="abschliessen-button"
+      text="Abschließen"
+      variant="outline"
+      (clickEmitter)="abschliessen()"
+    >
+      <ods-check-icon icon class="fill-whitetext" />
+    </ods-button-with-spinner>
+  }
+}
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/abschliessen-button/abschliessen-button.component.scss b/alfa-client/libs/vorgang-detail/src/lib/buttons/abschliessen-button/abschliessen-button.component.scss
deleted file mode 100644
index 54c4f3eb8c92af93694c03cdf577fed23cf9f86b..0000000000000000000000000000000000000000
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/abschliessen-button/abschliessen-button.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/abschliessen-button/abschliessen-button.component.spec.ts b/alfa-client/libs/vorgang-detail/src/lib/buttons/abschliessen-button/abschliessen-button.component.spec.ts
index 195bee49faa4e3b85bc3d7ed09a73964507d4c33..964474db2566e4fa0a80d8af012a266e86c2af78 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/abschliessen-button/abschliessen-button.component.spec.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/abschliessen-button/abschliessen-button.component.spec.ts
@@ -22,11 +22,12 @@
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
 import { CommandResource } from '@alfa-client/command-shared';
-import { createEmptyStateResource, createStateResource, HasLinkPipe, StateResource, } from '@alfa-client/tech-shared';
+import { createEmptyStateResource, createStateResource, HasLinkPipe, StateResource } from '@alfa-client/tech-shared';
 import { mock } from '@alfa-client/test-utils';
-import { IconButtonWithSpinnerComponent, OzgcloudStrokedButtonWithSpinnerComponent, } from '@alfa-client/ui';
-import { VorgangCommandService, VorgangWithEingangLinkRel, VorgangWithEingangResource, } from '@alfa-client/vorgang-shared';
+import { VorgangCommandService, VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { CheckIconComponent } from '@ods/system';
 import { createCommandResource } from 'libs/command-shared/test/command';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
@@ -50,8 +51,8 @@ describe('AbschliessenButtonComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [
         AbschliessenButtonComponent,
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
-        MockComponent(IconButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(CheckIconComponent),
         HasLinkPipe,
       ],
       providers: [
@@ -84,9 +85,7 @@ describe('AbschliessenButtonComponent', () => {
 
   describe('abschliessen', () => {
     const command: CommandResource = createCommandResource();
-    const comandStateResource$: Observable<StateResource<CommandResource>> = of(
-      createStateResource(command),
-    );
+    const comandStateResource$: Observable<StateResource<CommandResource>> = of(createStateResource(command));
 
     beforeEach(() => {
       vorgangCommandService.abschliessen.mockReturnValue(comandStateResource$);
@@ -167,9 +166,7 @@ describe('AbschliessenButtonComponent', () => {
     });
 
     it('should set visible to true', () => {
-      const vorgang: VorgangWithEingangResource = createVorgangWithEingangResource([
-        VorgangWithEingangLinkRel.ABSCHLIESSEN,
-      ]);
+      const vorgang: VorgangWithEingangResource = createVorgangWithEingangResource([VorgangWithEingangLinkRel.ABSCHLIESSEN]);
       component.vorgang = vorgang;
 
       const isVisible: boolean = component.isVisible;
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/abschliessen-button/abschliessen-button.component.ts b/alfa-client/libs/vorgang-detail/src/lib/buttons/abschliessen-button/abschliessen-button.component.ts
index 578482c2b8afc80ee4a20e83063eaca2ea28af06..94f843b044b8ab413981972ecdda058a1aedb1cd 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/abschliessen-button/abschliessen-button.component.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/abschliessen-button/abschliessen-button.component.ts
@@ -23,7 +23,7 @@
  */
 import { CommandResource } from '@alfa-client/command-shared';
 import { createEmptyStateResource, notHasLink, StateResource } from '@alfa-client/tech-shared';
-import { VorgangCommandService, VorgangWithEingangLinkRel, VorgangWithEingangResource, } from '@alfa-client/vorgang-shared';
+import { VorgangCommandService, VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
 import { Component, Input, OnInit } from '@angular/core';
 import { hasLink } from '@ngxp/rest';
 import { Observable, of } from 'rxjs';
@@ -31,7 +31,7 @@ import { Observable, of } from 'rxjs';
 @Component({
   selector: 'alfa-abschliessen-button',
   templateUrl: './abschliessen-button.component.html',
-  styleUrls: ['./abschliessen-button.component.scss'],
+  styles: [':host {@apply empty:hidden}'],
 })
 export class AbschliessenButtonComponent implements OnInit {
   @Input() set vorgang(vorgang: VorgangWithEingangResource) {
@@ -47,9 +47,7 @@ export class AbschliessenButtonComponent implements OnInit {
   public isVisible: boolean = false;
   vorgangWithEingangResource: VorgangWithEingangResource;
 
-  commandStateResource$: Observable<StateResource<CommandResource>> = of(
-    createEmptyStateResource<CommandResource>(),
-  );
+  commandStateResource$: Observable<StateResource<CommandResource>> = of(createEmptyStateResource<CommandResource>());
 
   readonly linkRel = VorgangWithEingangLinkRel;
 
@@ -60,8 +58,6 @@ export class AbschliessenButtonComponent implements OnInit {
   }
 
   public abschliessen(): void {
-    this.commandStateResource$ = this.vorgangCommandService.abschliessen(
-      this.vorgangWithEingangResource,
-    );
+    this.commandStateResource$ = this.vorgangCommandService.abschliessen(this.vorgangWithEingangResource);
   }
 }
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.html b/alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.html
index 97c685caf75a1115aa2be2c61844b11c1c212c58..e3113ba3b2f94d1fe599f091b61acd7ad143cda1 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.html
@@ -23,24 +23,27 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ng-container *ngIf="vorgang | hasLink: linkRel.ANNEHMEN">
-  <ozgcloud-stroked-button-with-spinner
-    *ngIf="!showAsIconButton"
-    data-test-id="annehmen-button"
-    text="Annehmen"
-    icon="check_circle_outline"
-    [stateResource]="commandStateResource$ | async"
-    (clickEmitter)="annehmen()"
-  >
-  </ozgcloud-stroked-button-with-spinner>
-
-  <ozgcloud-icon-button-with-spinner
-    *ngIf="showAsIconButton"
-    data-test-id="annehmen-icon-button"
-    icon="check_circle_outline"
-    toolTip="Vorgang annehmen"
-    [stateResource]="commandStateResource$ | async"
-    (clickEmitter)="annehmen()"
-  >
-  </ozgcloud-icon-button-with-spinner>
-</ng-container>
+@if (vorgang | hasLink: linkRel.ANNEHMEN) {
+  @if (showAsIconButton) {
+    <ods-button-with-spinner
+      [stateResource]="commandStateResource$ | async"
+      (clickEmitter)="annehmen()"
+      tooltip="Vorgang annehmen"
+      variant="ghost"
+      size="fit"
+      data-test-id="annehmen-icon-button"
+    >
+      <ods-check-circle-icon icon class="fill-text" />
+    </ods-button-with-spinner>
+  } @else {
+    <ods-button-with-spinner
+      [stateResource]="commandStateResource$ | async"
+      (clickEmitter)="annehmen()"
+      text="Annehmen"
+      variant="outline"
+      data-test-id="annehmen-button"
+    >
+      <ods-check-circle-icon icon />
+    </ods-button-with-spinner>
+  }
+}
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.scss b/alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.scss
deleted file mode 100644
index 54c4f3eb8c92af93694c03cdf577fed23cf9f86b..0000000000000000000000000000000000000000
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.spec.ts b/alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.spec.ts
index 43b5fa53e79d33357af2d71527b5a99310363c0a..8e531074e2822d3f1c27b670df59b032035a1595 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.spec.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.spec.ts
@@ -21,14 +21,13 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { HasLinkPipe, createStateResource } from '@alfa-client/tech-shared';
-import { mock } from '@alfa-client/test-utils';
-import {
-  IconButtonWithSpinnerComponent,
-  OzgcloudStrokedButtonWithSpinnerComponent,
-} from '@alfa-client/ui';
+import { CommandResource } from '@alfa-client/command-shared';
+import { createStateResource, HasLinkPipe, StateResource } from '@alfa-client/tech-shared';
+import { getElementComponentFromFixtureByCss, mock, notExistsAsHtmlElement, triggerEvent } from '@alfa-client/test-utils';
 import { VorgangCommandService, VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { CheckCircleIconComponent, TooltipDirective } from '@ods/system';
 import { createCommandResource } from 'libs/command-shared/test/command';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
@@ -52,9 +51,10 @@ describe('AnnehmenButtonComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [
         AnnehmenButtonComponent,
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
-        MockComponent(IconButtonWithSpinnerComponent),
         HasLinkPipe,
+        TooltipDirective,
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(CheckCircleIconComponent),
       ],
       providers: [
         {
@@ -75,69 +75,93 @@ describe('AnnehmenButtonComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  describe('ngOnInit', () => {
-    it('should call service', () => {
-      component.ngOnInit();
+  describe('component', () => {
+    describe('ngOnInit', () => {
+      it('should call service', () => {
+        component.ngOnInit();
 
-      expect(vorgangCommandService.getAnnehmenCommand).toHaveBeenCalled();
+        expect(vorgangCommandService.getAnnehmenCommand).toHaveBeenCalled();
+      });
     });
-  });
 
-  describe('annehmen', () => {
-    it('should call vorgang service', () => {
-      component.annehmen();
+    describe('annehmen', () => {
+      it('should call vorgang service', () => {
+        component.annehmen();
 
-      expect(vorgangCommandService.annehmen).toHaveBeenCalled();
+        expect(vorgangCommandService.annehmen).toHaveBeenCalled();
+      });
     });
   });
 
-  describe('annehmen button', () => {
+  describe('template', () => {
+    const state: StateResource<CommandResource> = createStateResource(createCommandResource());
+
     beforeEach(() => {
-      component.showAsIconButton = false;
+      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.ANNEHMEN]);
+      component.commandStateResource$ = of(state);
       fixture.detectChanges();
     });
 
-    it('should be hidden', () => {
-      component.vorgang = createVorgangWithEingangResource();
+    describe('annehmen button', () => {
+      beforeEach(() => {
+        component.showAsIconButton = false;
+        fixture.detectChanges();
+      });
 
-      fixture.detectChanges();
-      const buttonElement = fixture.nativeElement.querySelector(annehmenButton);
+      it('should not exist', () => {
+        component.vorgang = createVorgangWithEingangResource();
 
-      expect(buttonElement).not.toBeInstanceOf(HTMLElement);
-    });
+        fixture.detectChanges();
 
-    it('should be visible', () => {
-      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.ANNEHMEN]);
+        notExistsAsHtmlElement(fixture, annehmenButton);
+      });
 
-      fixture.detectChanges();
-      const buttonElement = fixture.nativeElement.querySelector(annehmenButton);
+      it('should exist with input', () => {
+        fixture.detectChanges();
 
-      expect(buttonElement).toBeInstanceOf(HTMLElement);
-    });
-  });
+        const button: ButtonWithSpinnerComponent = getElementComponentFromFixtureByCss(fixture, annehmenButton);
 
-  describe('annehmen icon button', () => {
-    beforeEach(() => {
-      component.showAsIconButton = true;
-      fixture.detectChanges();
-    });
+        expect(button.stateResource).toBe(state);
+      });
 
-    it('should be hidden', () => {
-      component.vorgang = createVorgangWithEingangResource();
+      it('should call annehmen on click', () => {
+        component.annehmen = jest.fn();
 
-      fixture.detectChanges();
-      const buttonElement = fixture.nativeElement.querySelector(annehmenIconButton);
+        triggerEvent({ fixture, name: 'clickEmitter', elementSelector: annehmenButton });
 
-      expect(buttonElement).not.toBeInstanceOf(HTMLElement);
+        expect(component.annehmen).toHaveBeenCalled();
+      });
     });
 
-    it('should be visible', () => {
-      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.ANNEHMEN]);
+    describe('annehmen icon button', () => {
+      beforeEach(() => {
+        component.showAsIconButton = true;
+        fixture.detectChanges();
+      });
 
-      fixture.detectChanges();
-      const buttonElement = fixture.nativeElement.querySelector(annehmenIconButton);
+      it('should not exist', () => {
+        component.vorgang = createVorgangWithEingangResource();
+
+        fixture.detectChanges();
+
+        notExistsAsHtmlElement(fixture, annehmenIconButton);
+      });
+
+      it('should exist with input', () => {
+        fixture.detectChanges();
+
+        const button: ButtonWithSpinnerComponent = getElementComponentFromFixtureByCss(fixture, annehmenIconButton);
+
+        expect(button.stateResource).toBe(state);
+      });
+
+      it('should call annehmen on click', () => {
+        component.annehmen = jest.fn();
+
+        triggerEvent({ fixture, name: 'clickEmitter', elementSelector: annehmenIconButton });
 
-      expect(buttonElement).toBeInstanceOf(HTMLElement);
+        expect(component.annehmen).toHaveBeenCalled();
+      });
     });
   });
 });
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.ts b/alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.ts
index 84fd1c5d4ff087c5f50a64075b2ee1f5c02397d9..cdbf5447b68d608d658675cf4e71de6dc4837a60 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.ts
@@ -21,28 +21,22 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input, OnInit } from '@angular/core';
 import { CommandResource } from '@alfa-client/command-shared';
 import { StateResource, createEmptyStateResource } from '@alfa-client/tech-shared';
-import {
-  VorgangCommandService,
-  VorgangWithEingangLinkRel,
-  VorgangWithEingangResource,
-} from '@alfa-client/vorgang-shared';
+import { VorgangCommandService, VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input, OnInit } from '@angular/core';
 import { Observable, of } from 'rxjs';
 
 @Component({
   selector: 'alfa-annehmen-button',
   templateUrl: './annehmen-button.component.html',
-  styleUrls: ['./annehmen-button.component.scss'],
+  styles: [':host {@apply empty:hidden}'],
 })
 export class AnnehmenButtonComponent implements OnInit {
   @Input() vorgang: VorgangWithEingangResource;
   @Input() showAsIconButton: boolean = false;
 
-  commandStateResource$: Observable<StateResource<CommandResource>> = of(
-    createEmptyStateResource<CommandResource>(),
-  );
+  commandStateResource$: Observable<StateResource<CommandResource>> = of(createEmptyStateResource<CommandResource>());
 
   readonly linkRel = VorgangWithEingangLinkRel;
 
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/bearbeiten-button/bearbeiten-button.component.html b/alfa-client/libs/vorgang-detail/src/lib/buttons/bearbeiten-button/bearbeiten-button.component.html
index 9f2900e1d1adee7a82dac65f4bfc058f839129e9..d1de12ab8c6736dc07dd9d96d8490451e297467f 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/bearbeiten-button/bearbeiten-button.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/bearbeiten-button/bearbeiten-button.component.html
@@ -23,24 +23,28 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ng-container *ngIf="vorgang | hasLink: linkRel.BEARBEITEN">
-  <ozgcloud-stroked-button-with-spinner
-    *ngIf="!showAsIconButton"
-    data-test-id="bearbeiten-button"
-    text="Bearbeiten"
-    icon="edit_icon"
-    [stateResource]="commandStateResource$ | async"
-    (clickEmitter)="bearbeiten()"
-  >
-  </ozgcloud-stroked-button-with-spinner>
 
-  <ozgcloud-icon-button-with-spinner
-    *ngIf="showAsIconButton"
-    data-test-id="bearbeiten-icon-button"
-    svgIcon="edit"
-    toolTip="Vorgang bearbeiten"
-    [stateResource]="commandStateResource$ | async"
-    (clickEmitter)="bearbeiten()"
-  >
-  </ozgcloud-icon-button-with-spinner>
-</ng-container>
+@if (vorgang | hasLink: linkRel.BEARBEITEN) {
+  @if (showAsIconButton) {
+    <ods-button-with-spinner
+      [stateResource]="commandStateResource$ | async"
+      data-test-id="bearbeiten-icon-button"
+      tooltip="Vorgang bearbeiten"
+      variant="ghost"
+      size="fit"
+      (clickEmitter)="bearbeiten()"
+    >
+      <ods-edit-icon icon class="fill-text" />
+    </ods-button-with-spinner>
+  } @else {
+    <ods-button-with-spinner
+      [stateResource]="commandStateResource$ | async"
+      data-test-id="bearbeiten-button"
+      text="Bearbeiten"
+      variant="outline"
+      (clickEmitter)="bearbeiten()"
+    >
+      <ods-edit-icon icon />
+    </ods-button-with-spinner>
+  }
+}
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/bearbeiten-button/bearbeiten-button.component.scss b/alfa-client/libs/vorgang-detail/src/lib/buttons/bearbeiten-button/bearbeiten-button.component.scss
deleted file mode 100644
index 54c4f3eb8c92af93694c03cdf577fed23cf9f86b..0000000000000000000000000000000000000000
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/bearbeiten-button/bearbeiten-button.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/bearbeiten-button/bearbeiten-button.component.spec.ts b/alfa-client/libs/vorgang-detail/src/lib/buttons/bearbeiten-button/bearbeiten-button.component.spec.ts
index ea8f97fa1ec56067731a5c8f9c543907774fe66b..627aa0b0592a3366c8b55e3bfc4df07c0b9dad58 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/bearbeiten-button/bearbeiten-button.component.spec.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/bearbeiten-button/bearbeiten-button.component.spec.ts
@@ -21,14 +21,12 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HasLinkPipe, createStateResource } from '@alfa-client/tech-shared';
 import { mock } from '@alfa-client/test-utils';
-import {
-  IconButtonWithSpinnerComponent,
-  OzgcloudStrokedButtonWithSpinnerComponent,
-} from '@alfa-client/ui';
 import { VorgangCommandService, VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { EditIconComponent } from '@ods/system';
 import { createCommandResource } from 'libs/command-shared/test/command';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
 import { MockComponent } from 'ng-mocks';
@@ -51,8 +49,8 @@ describe('BearbeitenButtonComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [
         BearbeitenButtonComponent,
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
-        MockComponent(IconButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(EditIconComponent),
         HasLinkPipe,
       ],
       providers: [
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/bearbeiten-button/bearbeiten-button.component.ts b/alfa-client/libs/vorgang-detail/src/lib/buttons/bearbeiten-button/bearbeiten-button.component.ts
index 9b6b581a8bb342d430f675da314b169854cfdf6c..b1371472ec3e01fa15686ef2e7da9d5e4f5d808c 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/bearbeiten-button/bearbeiten-button.component.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/bearbeiten-button/bearbeiten-button.component.ts
@@ -21,28 +21,22 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input, OnInit } from '@angular/core';
 import { CommandResource } from '@alfa-client/command-shared';
 import { StateResource, createEmptyStateResource } from '@alfa-client/tech-shared';
-import {
-  VorgangCommandService,
-  VorgangWithEingangLinkRel,
-  VorgangWithEingangResource,
-} from '@alfa-client/vorgang-shared';
+import { VorgangCommandService, VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input, OnInit } from '@angular/core';
 import { Observable, of } from 'rxjs';
 
 @Component({
   selector: 'alfa-bearbeiten-button',
   templateUrl: './bearbeiten-button.component.html',
-  styleUrls: ['./bearbeiten-button.component.scss'],
+  styles: [':host {@apply empty:hidden}'],
 })
 export class BearbeitenButtonComponent implements OnInit {
   @Input() vorgang: VorgangWithEingangResource;
   @Input() showAsIconButton: boolean = false;
 
-  commandStateResource$: Observable<StateResource<CommandResource>> = of(
-    createEmptyStateResource<CommandResource>(),
-  );
+  commandStateResource$: Observable<StateResource<CommandResource>> = of(createEmptyStateResource<CommandResource>());
 
   readonly linkRel = VorgangWithEingangLinkRel;
 
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.html b/alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.html
index fa3f6f038d674b8d2d721b91bf3fbd64f5a47ca9..32924b770f3d204f1476521b4fe36050298bdb9f 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.html
@@ -23,24 +23,27 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ng-container *ngIf="vorgang | hasLink: linkRel.BESCHEIDEN">
-  <ozgcloud-stroked-button-with-spinner
-    *ngIf="!showAsIconButton"
-    data-test-id="bescheiden-button"
-    [text]="buttonText"
-    svgIcon="stamp"
-    [stateResource]="commandStateResource$ | async"
-    (clickEmitter)="bescheiden()"
-  >
-  </ozgcloud-stroked-button-with-spinner>
-
-  <ozgcloud-icon-button-with-spinner
-    *ngIf="showAsIconButton"
-    data-test-id="bescheiden-icon-button"
-    svgIcon="stamp"
-    [toolTip]="toolTipText"
-    [stateResource]="commandStateResource$ | async"
-    (clickEmitter)="bescheiden()"
-  >
-  </ozgcloud-icon-button-with-spinner>
-</ng-container>
+@if (vorgang | hasLink: linkRel.BESCHEIDEN) {
+  @if (showAsIconButton) {
+    <ods-button-with-spinner
+      [stateResource]="commandStateResource$ | async"
+      (clickEmitter)="bescheiden()"
+      [tooltip]="toolTipText"
+      variant="ghost"
+      size="fit"
+      data-test-id="bescheiden-icon-button"
+    >
+      <ods-stamp-icon icon class="fill-text" size="medium" />
+    </ods-button-with-spinner>
+  } @else {
+    <ods-button-with-spinner
+      [stateResource]="commandStateResource$ | async"
+      (clickEmitter)="bescheiden()"
+      [text]="buttonText"
+      variant="outline"
+      data-test-id="bescheiden-button"
+    >
+      <ods-stamp-icon icon size="medium" class="fill-primary" />
+    </ods-button-with-spinner>
+  }
+}
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.scss b/alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.scss
deleted file mode 100644
index 54c4f3eb8c92af93694c03cdf577fed23cf9f86b..0000000000000000000000000000000000000000
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.spec.ts b/alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.spec.ts
index a962d9573f1c8b6b07fd790492d0189a35816f20..1cd92c64d9b07060f04273c6007ac1c8920ca8d4 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.spec.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.spec.ts
@@ -24,12 +24,16 @@
 import { BescheidResource, BescheidService, BescheidWizardDialogResult } from '@alfa-client/bescheid-shared';
 import { CommandResource } from '@alfa-client/command-shared';
 import { createEmptyStateResource, createStateResource, HasLinkPipe, StateResource } from '@alfa-client/tech-shared';
-import { Mock, mock } from '@alfa-client/test-utils';
 import {
-  IconButtonWithSpinnerComponent,
-  OzgcloudDialogService,
-  OzgcloudStrokedButtonWithSpinnerComponent,
-} from '@alfa-client/ui';
+  getElementComponentFromFixtureByCss,
+  getMockComponent,
+  Mock,
+  mock,
+  notExistsAsHtmlElement,
+  tooltipExistsWithText,
+  triggerEvent,
+} from '@alfa-client/test-utils';
+import { OzgcloudDialogService } from '@alfa-client/ui';
 import { BescheidenDialogData } from '@alfa-client/vorgang-detail';
 import {
   VorgangCommandService,
@@ -39,6 +43,8 @@ import {
 } from '@alfa-client/vorgang-shared';
 import { DialogRef } from '@angular/cdk/dialog';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { StampIconComponent, TooltipDirective } from '@ods/system';
 import { createCommandResource } from 'libs/command-shared/test/command';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
@@ -74,8 +80,9 @@ describe('BescheidenButtonComponent', () => {
       declarations: [
         BescheidenButtonComponent,
         HasLinkPipe,
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
-        MockComponent(IconButtonWithSpinnerComponent),
+        TooltipDirective,
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(StampIconComponent),
       ],
       providers: [
         {
@@ -107,300 +114,316 @@ describe('BescheidenButtonComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  describe('ngOnInit', () => {
-    it('should call service', () => {
-      component.ngOnInit();
+  describe('component', () => {
+    describe('ngOnInit', () => {
+      it('should call service', () => {
+        component.ngOnInit();
 
-      expect(vorgangCommandService.getBeschiedenCommand).toHaveBeenCalled();
+        expect(vorgangCommandService.getBeschiedenCommand).toHaveBeenCalled();
+      });
     });
-  });
 
-  describe('bescheiden button', () => {
-    beforeEach(() => {
-      component.showAsIconButton = false;
-      fixture.detectChanges();
-    });
+    describe('bescheiden', () => {
+      describe('should open bescheid wizard', () => {
+        beforeEach(() => {
+          component.openBescheidenWizard = jest.fn();
+          component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.CREATE_BESCHEID_DRAFT]);
+        });
 
-    it('should be hidden', () => {
-      component.vorgang = createVorgangWithEingangResource();
+        it('should open bescheid wizard when create bescheid draft link exists', () => {
+          component.bescheiden();
 
-      fixture.detectChanges();
-      const buttonElement = fixture.nativeElement.querySelector(bescheidenButton);
+          expect(component.openBescheidenWizard).toHaveBeenCalled();
+        });
 
-      expect(buttonElement).not.toBeInstanceOf(HTMLElement);
-    });
+        it('should open bescheid wizard when bescheid draft exists', () => {
+          component.bescheiden();
 
-    it('should be visible', () => {
-      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.BESCHEIDEN]);
+          expect(component.openBescheidenWizard).toHaveBeenCalled();
+        });
+      });
 
-      fixture.detectChanges();
-      const buttonElement = fixture.nativeElement.querySelector(bescheidenButton);
+      describe('should do bescheiden', () => {
+        const command: CommandResource = createCommandResource();
+        const comandStateResource$: Observable<StateResource<CommandResource>> = of(createStateResource(command));
 
-      expect(buttonElement).toBeInstanceOf(HTMLElement);
-    });
+        beforeEach(() => {
+          vorgangCommandService.bescheiden.mockReturnValue(comandStateResource$);
+        });
 
-    it('should get "Bescheid" text', () => {
-      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.BESCHEIDEN]);
+        it('should call vorgangCommandService.bescheiden', () => {
+          component.bescheiden();
+
+          expect(vorgangCommandService.bescheiden).toHaveBeenCalled();
+        });
+
+        it('should assign response', () => {
+          component.commandStateResource$ = of(createEmptyStateResource<CommandResource>());
 
-      const buttonText: string = component.buttonText;
+          component.bescheiden();
 
-      expect(buttonText).toBe('Bescheiden');
+          expect(component.commandStateResource$).toBe(comandStateResource$);
+        });
+      });
     });
 
-    it('should get "Bescheiden fortsetzen" text', () => {
-      component.vorgang = createVorgangWithEingangResource([
-        VorgangWithEingangLinkRel.BESCHEIDEN,
-        VorgangWithEingangLinkRel.BESCHEID_DRAFT,
-      ]);
+    // TODO: Use this version after completed Bescheid refactoring and delete the other version below.
+    // describe('openBescheidenWizard', () => {
+    //   let dialogRefMock: DialogRefMock<BescheidWizardDialogResult>;
+    //
+    //   beforeEach(() => {
+    //     dialogRefMock = createDialogRefMock<BescheidWizardDialogResult>();
+    //     ozgcloudDialogService.openWizard.mockReturnValue(dialogRefMock);
+    //   });
+    //
+    //   it('should open wizard dialog', () => {
+    //     const vorgang = createVorgangWithEingangResource();
+    //     component.vorgang = vorgang;
+    //
+    //     component.openBescheidenWizard();
+    //
+    //     expect(ozgcloudDialogService.openWizard).toHaveBeenCalledWith(BescheidWizardContainerComponent, {
+    //       vorgangWithEingangResource: vorgang,
+    //     });
+    //   });
+    //
+    //   it('should handleBescheidWizardClosed', () => {
+    //     component.handleBescheidWizardClosed = jest.fn();
+    //     const dialogResult: BescheidWizardDialogResult = { reloadVorgang: true };
+    //     dialogRefMock.closed = of(dialogResult);
+    //
+    //     component.openBescheidenWizard();
+    //
+    //     expect(component.handleBescheidWizardClosed).toHaveBeenCalledWith(dialogResult);
+    //   });
+    // });
+
+    describe('openBescheidenWizard', () => {
+      it('should init', () => {
+        component.openBescheidenWizard();
+
+        expect(bescheidService.init).toHaveBeenCalled();
+      });
 
-      const buttonText: string = component.buttonText;
+      it('should open bescheiden dialog with existing draft', () => {
+        component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.BESCHEID_DRAFT]);
+        component.openBescheidenDialogWithExistingDraft = jest.fn();
 
-      expect(buttonText).toBe('Bescheiden fortsetzen');
-    });
-  });
+        component.openBescheidenWizard();
 
-  describe('tool tip', () => {
-    it('should get "Vorgang bescheiden" text', () => {
-      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.BESCHEIDEN]);
+        expect(component.openBescheidenDialogWithExistingDraft).toHaveBeenCalled();
+      });
 
-      const toolTipText: string = component.toolTipText;
+      it('should open bescheiden dialog with new draft', () => {
+        component.vorgang = createVorgangWithEingangResource();
+        component.openBescheidDialogWithNewDraft = jest.fn();
 
-      expect(toolTipText).toBe('Vorgang bescheiden');
+        component.openBescheidenWizard();
+
+        expect(component.openBescheidDialogWithNewDraft).toHaveBeenCalled();
+      });
     });
 
-    it('should get "Vorgang bescheiden fortsetzen" text', () => {
-      component.vorgang = createVorgangWithEingangResource([
-        VorgangWithEingangLinkRel.BESCHEIDEN,
-        VorgangWithEingangLinkRel.BESCHEID_DRAFT,
-      ]);
+    describe('openBescheidDialogWithNewDraft', () => {
+      it('should open wizard', () => {
+        component.vorgang = createVorgangWithEingangResource();
+        component.openDialog = jest.fn();
 
-      const toolTipText: string = component.toolTipText;
+        component.openBescheidDialogWithNewDraft();
 
-      expect(toolTipText).toBe('Vorgang bescheiden fortsetzen');
+        expect(component.openDialog).toHaveBeenCalledWith({
+          vorgangWithEingangResource: component.vorgang,
+          bescheidDraftResource: null,
+        });
+      });
     });
-  });
 
-  describe('bescheiden', () => {
-    describe('should open bescheid wizard', () => {
+    describe('openBescheidenDialogWithExistingDraft', () => {
+      const bescheidDraftResource: BescheidResource = createBescheidResource();
+      const bescheidDraftStateResource: StateResource<BescheidResource> = createStateResource(bescheidDraftResource);
+      const vorgangWithEingangResource: VorgangWithEingangResource = createVorgangWithEingangResource([
+        VorgangWithEingangLinkRel.BESCHEID_DRAFT,
+      ]);
+
       beforeEach(() => {
-        component.openBescheidenWizard = jest.fn();
-        component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.CREATE_BESCHEID_DRAFT]);
+        component.vorgang = vorgangWithEingangResource;
+        bescheidService.getBescheidDraftIfExists.mockReturnValue(of(bescheidDraftStateResource));
       });
 
-      it('should open bescheid wizard when create bescheid draft link exists', () => {
-        component.bescheiden();
+      it('should open wizard if bescheid draft loaded', () => {
+        component.openBescheidenDialogWithExistingDraft();
 
-        expect(component.openBescheidenWizard).toHaveBeenCalled();
+        expect(ozgcloudDialogService.openWizard).toHaveBeenCalledWith(VorgangDetailBescheidenComponent, {
+          bescheidDraftResource,
+          vorgangWithEingangResource,
+        });
       });
 
-      it('should open bescheid wizard when bescheid draft exists', () => {
-        component.bescheiden();
-
-        expect(component.openBescheidenWizard).toHaveBeenCalled();
-      });
-    });
+      it('should not open wizard if bescheid draft not loaded', () => {
+        bescheidService.getBescheidDraftIfExists.mockReturnValue(of(createEmptyStateResource()));
 
-    describe('should do bescheiden', () => {
-      const command: CommandResource = createCommandResource();
-      const comandStateResource$: Observable<StateResource<CommandResource>> = of(createStateResource(command));
+        component.openBescheidenDialogWithExistingDraft();
 
-      beforeEach(() => {
-        vorgangCommandService.bescheiden.mockReturnValue(comandStateResource$);
+        expect(ozgcloudDialogService.openWizard).not.toHaveBeenCalled();
       });
 
-      it('should call vorgangCommandService.bescheiden', () => {
-        component.bescheiden();
+      it('should not open wizard on loading bescheid draft', () => {
+        bescheidService.getBescheidDraftIfExists.mockReturnValue(
+          of({ ...createStateResource(createBescheidResource()), loading: true }),
+        );
+
+        component.openBescheidenDialogWithExistingDraft();
 
-        expect(vorgangCommandService.bescheiden).toHaveBeenCalled();
+        expect(ozgcloudDialogService.openWizard).not.toHaveBeenCalled();
       });
+    });
 
-      it('should assign response', () => {
-        component.commandStateResource$ = of(createEmptyStateResource<CommandResource>());
+    describe('openDialog', () => {
+      const bescheidDraftResource: BescheidResource = createBescheidResource();
+      const bescheidDraftStateResource: StateResource<BescheidResource> = createStateResource(bescheidDraftResource);
+      const vorgangWithEingangResource: VorgangWithEingangResource = createVorgangWithEingangResource([
+        VorgangWithEingangLinkRel.BESCHEID_DRAFT,
+      ]);
 
-        component.bescheiden();
+      const dialogData: BescheidenDialogData = {
+        bescheidDraftResource: bescheidDraftResource,
+        vorgangWithEingangResource: vorgangWithEingangResource,
+      };
 
-        expect(component.commandStateResource$).toBe(comandStateResource$);
+      beforeEach(() => {
+        component.vorgang = vorgangWithEingangResource;
+        bescheidService.getBescheidDraftIfExists.mockReturnValue(of(bescheidDraftStateResource));
       });
-    });
-  });
 
-  describe('bescheiden icon button', () => {
-    beforeEach(() => {
-      component.showAsIconButton = true;
-      fixture.detectChanges();
+      it('should call ozgcloudDialogService.openWizard', () => {
+        component.openDialog(dialogData);
+
+        expect(ozgcloudDialogService.openWizard).toHaveBeenCalledWith(VorgangDetailBescheidenComponent, dialogData);
+      });
     });
 
-    it('should be hidden', () => {
-      component.vorgang = createVorgangWithEingangResource();
+    describe('handleBescheidWizardClosed', () => {
+      it('should reload current vorgang', () => {
+        component.handleBescheidWizardClosed({ reloadVorgang: true });
 
-      fixture.detectChanges();
-      const buttonElement = fixture.nativeElement.querySelector(bescheidenIconButton);
+        expect(vorgangService.reloadCurrentVorgang).toHaveBeenCalled();
+      });
 
-      expect(buttonElement).not.toBeInstanceOf(HTMLElement);
-    });
+      it('should not reload current vorgang', () => {
+        component.handleBescheidWizardClosed({ reloadVorgang: false });
 
-    it('should be visible', () => {
-      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.BESCHEIDEN]);
+        expect(vorgangService.reloadCurrentVorgang).not.toHaveBeenCalled();
+      });
 
-      fixture.detectChanges();
-      const buttonElement = fixture.nativeElement.querySelector(bescheidenIconButton);
+      it.each([null, undefined])(
+        'should not reload current vorgang if result nil',
+        (dialogResult: BescheidWizardDialogResult) => {
+          component.handleBescheidWizardClosed(dialogResult);
 
-      expect(buttonElement).toBeInstanceOf(HTMLElement);
+          expect(vorgangService.reloadCurrentVorgang).not.toHaveBeenCalled();
+        },
+      );
     });
   });
 
-  // TODO: Use this version after completed Bescheid refactoring and delete the other version below.
-  // describe('openBescheidenWizard', () => {
-  //   let dialogRefMock: DialogRefMock<BescheidWizardDialogResult>;
-  //
-  //   beforeEach(() => {
-  //     dialogRefMock = createDialogRefMock<BescheidWizardDialogResult>();
-  //     ozgcloudDialogService.openWizard.mockReturnValue(dialogRefMock);
-  //   });
-  //
-  //   it('should open wizard dialog', () => {
-  //     const vorgang = createVorgangWithEingangResource();
-  //     component.vorgang = vorgang;
-  //
-  //     component.openBescheidenWizard();
-  //
-  //     expect(ozgcloudDialogService.openWizard).toHaveBeenCalledWith(BescheidWizardContainerComponent, {
-  //       vorgangWithEingangResource: vorgang,
-  //     });
-  //   });
-  //
-  //   it('should handleBescheidWizardClosed', () => {
-  //     component.handleBescheidWizardClosed = jest.fn();
-  //     const dialogResult: BescheidWizardDialogResult = { reloadVorgang: true };
-  //     dialogRefMock.closed = of(dialogResult);
-  //
-  //     component.openBescheidenWizard();
-  //
-  //     expect(component.handleBescheidWizardClosed).toHaveBeenCalledWith(dialogResult);
-  //   });
-  // });
-
-  describe('openBescheidenWizard', () => {
-    it('should init', () => {
-      component.openBescheidenWizard();
-
-      expect(bescheidService.init).toHaveBeenCalled();
-    });
-
-    it('should open bescheiden dialog with existing draft', () => {
-      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.BESCHEID_DRAFT]);
-      component.openBescheidenDialogWithExistingDraft = jest.fn();
+  describe('template', () => {
+    const state: StateResource<CommandResource> = createStateResource(createCommandResource());
 
-      component.openBescheidenWizard();
+    beforeEach(() => {
+      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.BESCHEIDEN]);
+      component.commandStateResource$ = of(state);
 
-      expect(component.openBescheidenDialogWithExistingDraft).toHaveBeenCalled();
+      fixture.detectChanges();
     });
 
-    it('should open bescheiden dialog with new draft', () => {
-      component.vorgang = createVorgangWithEingangResource();
-      component.openBescheidDialogWithNewDraft = jest.fn();
+    describe('bescheiden button', () => {
+      beforeEach(() => {
+        component.showAsIconButton = false;
+        fixture.detectChanges();
+      });
 
-      component.openBescheidenWizard();
+      it('should not exits', () => {
+        component.vorgang = createVorgangWithEingangResource();
 
-      expect(component.openBescheidDialogWithNewDraft).toHaveBeenCalled();
-    });
-  });
+        fixture.detectChanges();
 
-  describe('openBescheidDialogWithNewDraft', () => {
-    it('should open wizard', () => {
-      component.vorgang = createVorgangWithEingangResource();
-      component.openDialog = jest.fn();
+        notExistsAsHtmlElement(fixture, bescheidenButton);
+      });
 
-      component.openBescheidDialogWithNewDraft();
+      it('should exist with input', () => {
+        const button: ButtonWithSpinnerComponent = getElementComponentFromFixtureByCss(fixture, bescheidenButton);
 
-      expect(component.openDialog).toHaveBeenCalledWith({
-        vorgangWithEingangResource: component.vorgang,
-        bescheidDraftResource: null,
+        expect(button.stateResource).toBe(state);
       });
-    });
-  });
 
-  describe('openBescheidenDialogWithExistingDraft', () => {
-    const bescheidDraftResource: BescheidResource = createBescheidResource();
-    const bescheidDraftStateResource: StateResource<BescheidResource> = createStateResource(bescheidDraftResource);
-    const vorgangWithEingangResource: VorgangWithEingangResource = createVorgangWithEingangResource([
-      VorgangWithEingangLinkRel.BESCHEID_DRAFT,
-    ]);
+      it('should get "Bescheid" text', () => {
+        const button: ButtonWithSpinnerComponent = getMockComponent(fixture, ButtonWithSpinnerComponent);
+        expect(button.text).toBe('Bescheiden');
+      });
 
-    beforeEach(() => {
-      component.vorgang = vorgangWithEingangResource;
-      bescheidService.getBescheidDraftIfExists.mockReturnValue(of(bescheidDraftStateResource));
-    });
+      it('should get "Bescheiden fortsetzen" text', () => {
+        component.vorgang = createVorgangWithEingangResource([
+          VorgangWithEingangLinkRel.BESCHEIDEN,
+          VorgangWithEingangLinkRel.BESCHEID_DRAFT,
+        ]);
 
-    it('should open wizard if bescheid draft loaded', () => {
-      component.openBescheidenDialogWithExistingDraft();
+        fixture.detectChanges();
 
-      expect(ozgcloudDialogService.openWizard).toHaveBeenCalledWith(VorgangDetailBescheidenComponent, {
-        bescheidDraftResource,
-        vorgangWithEingangResource,
+        const button: ButtonWithSpinnerComponent = getMockComponent(fixture, ButtonWithSpinnerComponent);
+        expect(button.text).toBe('Bescheiden fortsetzen');
       });
-    });
 
-    it('should not open wizard if bescheid draft not loaded', () => {
-      bescheidService.getBescheidDraftIfExists.mockReturnValue(of(createEmptyStateResource()));
+      it('should call bescheiden on click', () => {
+        component.bescheiden = jest.fn();
 
-      component.openBescheidenDialogWithExistingDraft();
+        triggerEvent({ fixture, name: 'clickEmitter', elementSelector: bescheidenButton });
 
-      expect(ozgcloudDialogService.openWizard).not.toHaveBeenCalled();
+        expect(component.bescheiden).toHaveBeenCalled();
+      });
     });
 
-    it('should not open wizard on loading bescheid draft', () => {
-      bescheidService.getBescheidDraftIfExists.mockReturnValue(
-        of({ ...createStateResource(createBescheidResource()), loading: true }),
-      );
-
-      component.openBescheidenDialogWithExistingDraft();
+    describe('bescheiden icon button', () => {
+      beforeEach(() => {
+        component.showAsIconButton = true;
+        fixture.detectChanges();
+      });
 
-      expect(ozgcloudDialogService.openWizard).not.toHaveBeenCalled();
-    });
-  });
+      it('should not exist', () => {
+        component.vorgang = createVorgangWithEingangResource();
 
-  describe('openDialog', () => {
-    const bescheidDraftResource: BescheidResource = createBescheidResource();
-    const bescheidDraftStateResource: StateResource<BescheidResource> = createStateResource(bescheidDraftResource);
-    const vorgangWithEingangResource: VorgangWithEingangResource = createVorgangWithEingangResource([
-      VorgangWithEingangLinkRel.BESCHEID_DRAFT,
-    ]);
+        fixture.detectChanges();
 
-    const dialogData: BescheidenDialogData = {
-      bescheidDraftResource: bescheidDraftResource,
-      vorgangWithEingangResource: vorgangWithEingangResource,
-    };
+        notExistsAsHtmlElement(fixture, bescheidenIconButton);
+      });
 
-    beforeEach(() => {
-      component.vorgang = vorgangWithEingangResource;
-      bescheidService.getBescheidDraftIfExists.mockReturnValue(of(bescheidDraftStateResource));
-    });
+      it('should exist with input', () => {
+        const button: ButtonWithSpinnerComponent = getElementComponentFromFixtureByCss(fixture, bescheidenIconButton);
 
-    it('should call ozgcloudDialogService.openWizard', () => {
-      component.openDialog(dialogData);
+        expect(button.stateResource).toBe(state);
+      });
 
-      expect(ozgcloudDialogService.openWizard).toHaveBeenCalledWith(VorgangDetailBescheidenComponent, dialogData);
-    });
-  });
+      it('should have "Vorgang bescheiden" tooltip', () => {
+        tooltipExistsWithText(fixture, bescheidenIconButton, 'Vorgang bescheiden');
+      });
 
-  describe('handleBescheidWizardClosed', () => {
-    it('should reload current vorgang', () => {
-      component.handleBescheidWizardClosed({ reloadVorgang: true });
+      it('should have "Vorgang bescheiden fortsetzen" tooltip', () => {
+        component.vorgang = createVorgangWithEingangResource([
+          VorgangWithEingangLinkRel.BESCHEIDEN,
+          VorgangWithEingangLinkRel.BESCHEID_DRAFT,
+        ]);
 
-      expect(vorgangService.reloadCurrentVorgang).toHaveBeenCalled();
-    });
+        fixture.detectChanges();
 
-    it('should not reload current vorgang', () => {
-      component.handleBescheidWizardClosed({ reloadVorgang: false });
+        tooltipExistsWithText(fixture, bescheidenIconButton, 'Vorgang bescheiden fortsetzen');
+      });
 
-      expect(vorgangService.reloadCurrentVorgang).not.toHaveBeenCalled();
-    });
+      it('should call bescheiden on click', () => {
+        component.bescheiden = jest.fn();
 
-    it.each([null, undefined])('should not reload current vorgang if result nil', (dialogResult: BescheidWizardDialogResult) => {
-      component.handleBescheidWizardClosed(dialogResult);
+        triggerEvent({ fixture, name: 'clickEmitter', elementSelector: bescheidenIconButton });
 
-      expect(vorgangService.reloadCurrentVorgang).not.toHaveBeenCalled();
+        expect(component.bescheiden).toHaveBeenCalled();
+      });
     });
   });
 });
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.ts b/alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.ts
index da2e171f7dc750cca571735eb186474249cb8722..de431e7c593b4e719514f917e3325e41fab3c644 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.ts
@@ -40,7 +40,7 @@ import { VorgangDetailBescheidenComponent } from '../../vorgang-detail-page/vorg
 @Component({
   selector: 'alfa-bescheiden-button',
   templateUrl: './bescheiden-button.component.html',
-  styleUrls: ['./bescheiden-button.component.scss'],
+  styles: [':host {@apply empty:hidden}'],
 })
 export class BescheidenButtonComponent implements OnInit {
   @Input() vorgang: VorgangWithEingangResource;
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/verwerfen-button/verwerfen-button.component.html b/alfa-client/libs/vorgang-detail/src/lib/buttons/verwerfen-button/verwerfen-button.component.html
index dc55d5bb092594f4a3b653b9d14844b1f78ff6cc..8d663e5e9b13d5c89b3b774bbcf7f0085f0a2a41 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/verwerfen-button/verwerfen-button.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/verwerfen-button/verwerfen-button.component.html
@@ -23,24 +23,27 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ng-container *ngIf="vorgang | hasLink: linkRel.VERWERFEN">
-  <ozgcloud-stroked-button-with-spinner
-    *ngIf="!showAsIconButton"
-    data-test-id="verwerfen-button"
-    text="Verwerfen"
-    svgIcon="discard_document"
-    [stateResource]="commandStateResource$ | async"
-    (clickEmitter)="verwerfen()"
-  >
-  </ozgcloud-stroked-button-with-spinner>
-
-  <ozgcloud-icon-button-with-spinner
-    *ngIf="showAsIconButton"
-    data-test-id="verwerfen-icon-button"
-    svgIcon="discard_document"
-    toolTip="Vorgang verwerfen"
-    [stateResource]="commandStateResource$ | async"
-    (clickEmitter)="verwerfen()"
-  >
-  </ozgcloud-icon-button-with-spinner>
-</ng-container>
+@if (vorgang | hasLink: linkRel.VERWERFEN) {
+  @if (showAsIconButton) {
+    <ods-button-with-spinner
+      [stateResource]="commandStateResource$ | async"
+      data-test-id="verwerfen-icon-button"
+      tooltip="Vorgang verwerfen"
+      variant="ghost"
+      size="fit"
+      (clickEmitter)="verwerfen()"
+    >
+      <ods-discard-vorgang-icon icon class="fill-text" />
+    </ods-button-with-spinner>
+  } @else {
+    <ods-button-with-spinner
+      [stateResource]="commandStateResource$ | async"
+      data-test-id="verwerfen-button"
+      text="Verwerfen"
+      variant="outline"
+      (clickEmitter)="verwerfen()"
+    >
+      <ods-discard-vorgang-icon icon />
+    </ods-button-with-spinner>
+  }
+}
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/verwerfen-button/verwerfen-button.component.scss b/alfa-client/libs/vorgang-detail/src/lib/buttons/verwerfen-button/verwerfen-button.component.scss
deleted file mode 100644
index 54c4f3eb8c92af93694c03cdf577fed23cf9f86b..0000000000000000000000000000000000000000
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/verwerfen-button/verwerfen-button.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/verwerfen-button/verwerfen-button.component.spec.ts b/alfa-client/libs/vorgang-detail/src/lib/buttons/verwerfen-button/verwerfen-button.component.spec.ts
index 31872b928978aa47af6c9fbdfcb9ee8e6edd916d..ebdb6df88b8db242bf7e54971753c356850c7c28 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/verwerfen-button/verwerfen-button.component.spec.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/verwerfen-button/verwerfen-button.component.spec.ts
@@ -21,14 +21,12 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HasLinkPipe, createStateResource } from '@alfa-client/tech-shared';
 import { mock } from '@alfa-client/test-utils';
-import {
-  IconButtonWithSpinnerComponent,
-  OzgcloudStrokedButtonWithSpinnerComponent,
-} from '@alfa-client/ui';
 import { VorgangCommandService, VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { DiscardVorgangIconComponent } from '@ods/system';
 import { createCommandResource } from 'libs/command-shared/test/command';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
@@ -52,8 +50,8 @@ describe('VerwerfenButtonComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [
         VerwerfenButtonComponent,
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
-        MockComponent(IconButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(DiscardVorgangIconComponent),
         HasLinkPipe,
       ],
       providers: [
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/verwerfen-button/verwerfen-button.component.ts b/alfa-client/libs/vorgang-detail/src/lib/buttons/verwerfen-button/verwerfen-button.component.ts
index ee468e5fb43efc53a703a566b85d67f9240a2150..6ec2487983098833e987522de19fd48f31fe5526 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/verwerfen-button/verwerfen-button.component.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/verwerfen-button/verwerfen-button.component.ts
@@ -21,28 +21,22 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input, OnInit } from '@angular/core';
 import { CommandResource } from '@alfa-client/command-shared';
 import { StateResource, createEmptyStateResource } from '@alfa-client/tech-shared';
-import {
-  VorgangCommandService,
-  VorgangWithEingangLinkRel,
-  VorgangWithEingangResource,
-} from '@alfa-client/vorgang-shared';
+import { VorgangCommandService, VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input, OnInit } from '@angular/core';
 import { Observable, of } from 'rxjs';
 
 @Component({
   selector: 'alfa-verwerfen-button',
   templateUrl: './verwerfen-button.component.html',
-  styleUrls: ['./verwerfen-button.component.scss'],
+  styles: [':host {@apply empty:hidden}'],
 })
 export class VerwerfenButtonComponent implements OnInit {
   @Input() vorgang: VorgangWithEingangResource;
   @Input() showAsIconButton: boolean = false;
 
-  commandStateResource$: Observable<StateResource<CommandResource>> = of(
-    createEmptyStateResource<CommandResource>(),
-  );
+  commandStateResource$: Observable<StateResource<CommandResource>> = of(createEmptyStateResource<CommandResource>());
 
   readonly linkRel = VorgangWithEingangLinkRel;
 
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/wiedereroeffnen-button/wiedereroeffnen-button.component.html b/alfa-client/libs/vorgang-detail/src/lib/buttons/wiedereroeffnen-button/wiedereroeffnen-button.component.html
index eb63ab7bc9a4a8729db650becda2de09be66447c..51b70df609a151c9c33d2c72fe78d508e489453c 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/wiedereroeffnen-button/wiedereroeffnen-button.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/wiedereroeffnen-button/wiedereroeffnen-button.component.html
@@ -23,24 +23,27 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ng-container *ngIf="vorgang | hasLink: linkRel.WIEDEREROEFFNEN">
-  <ozgcloud-stroked-button-with-spinner
-    *ngIf="!showAsIconButton"
-    data-test-id="wiedereroeffnen-button"
-    text="Wiedereröffnen"
-    icon="undo"
-    [stateResource]="commandStateResource$ | async"
-    (clickEmitter)="wiedereroeffnen()"
-  >
-  </ozgcloud-stroked-button-with-spinner>
-
-  <ozgcloud-icon-button-with-spinner
-    *ngIf="showAsIconButton"
-    data-test-id="wiedereroeffnen-icon-button"
-    icon="undo"
-    toolTip="Vorgang wiedereröffnen"
-    [stateResource]="commandStateResource$ | async"
-    (clickEmitter)="wiedereroeffnen()"
-  >
-  </ozgcloud-icon-button-with-spinner>
-</ng-container>
+@if (vorgang | hasLink: linkRel.WIEDEREROEFFNEN) {
+  @if (showAsIconButton) {
+    <ods-button-with-spinner
+      [stateResource]="commandStateResource$ | async"
+      data-test-id="wiedereroeffnen-icon-button"
+      tooltip="Vorgang wiedereröffnen"
+      variant="ghost"
+      size="fit"
+      (clickEmitter)="wiedereroeffnen()"
+    >
+      <ods-undo-icon icon class="fill-text" />
+    </ods-button-with-spinner>
+  } @else {
+    <ods-button-with-spinner
+      [stateResource]="commandStateResource$ | async"
+      data-test-id="wiedereroeffnen-button"
+      text="Wiedereröffnen"
+      variant="outline"
+      (clickEmitter)="wiedereroeffnen()"
+    >
+      <ods-undo-icon icon />
+    </ods-button-with-spinner>
+  }
+}
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/wiedereroeffnen-button/wiedereroeffnen-button.component.scss b/alfa-client/libs/vorgang-detail/src/lib/buttons/wiedereroeffnen-button/wiedereroeffnen-button.component.scss
deleted file mode 100644
index 54c4f3eb8c92af93694c03cdf577fed23cf9f86b..0000000000000000000000000000000000000000
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/wiedereroeffnen-button/wiedereroeffnen-button.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/wiedereroeffnen-button/wiedereroeffnen-button.component.spec.ts b/alfa-client/libs/vorgang-detail/src/lib/buttons/wiedereroeffnen-button/wiedereroeffnen-button.component.spec.ts
index a03ee7234ef005811d682881d886b2db15a5e1e9..3ee20a3ec3163d4e1d1b7a3ba2bccaab5b01ffee 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/wiedereroeffnen-button/wiedereroeffnen-button.component.spec.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/wiedereroeffnen-button/wiedereroeffnen-button.component.spec.ts
@@ -21,14 +21,12 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HasLinkPipe, createStateResource } from '@alfa-client/tech-shared';
 import { mock } from '@alfa-client/test-utils';
-import {
-  IconButtonWithSpinnerComponent,
-  OzgcloudStrokedButtonWithSpinnerComponent,
-} from '@alfa-client/ui';
 import { VorgangCommandService, VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { UndoIconComponent } from '@ods/system';
 import { createCommandResource } from 'libs/command-shared/test/command';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
@@ -52,8 +50,8 @@ describe('WiedereroeffnenButtonComponent', () => {
       declarations: [
         WiedereroeffnenButtonComponent,
         HasLinkPipe,
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
-        MockComponent(IconButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(UndoIconComponent),
       ],
       providers: [
         {
@@ -106,9 +104,7 @@ describe('WiedereroeffnenButtonComponent', () => {
     });
 
     it('should be visible', () => {
-      component.vorgang = createVorgangWithEingangResource([
-        VorgangWithEingangLinkRel.WIEDEREROEFFNEN,
-      ]);
+      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.WIEDEREROEFFNEN]);
 
       fixture.detectChanges();
       const buttonElement = fixture.nativeElement.querySelector(wiedereroeffnenButton);
@@ -133,9 +129,7 @@ describe('WiedereroeffnenButtonComponent', () => {
     });
 
     it('should be visible', () => {
-      component.vorgang = createVorgangWithEingangResource([
-        VorgangWithEingangLinkRel.WIEDEREROEFFNEN,
-      ]);
+      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.WIEDEREROEFFNEN]);
 
       fixture.detectChanges();
       const buttonElement = fixture.nativeElement.querySelector(wiedereroeffnenIconButton);
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/wiedereroeffnen-button/wiedereroeffnen-button.component.ts b/alfa-client/libs/vorgang-detail/src/lib/buttons/wiedereroeffnen-button/wiedereroeffnen-button.component.ts
index 4887a53a3df75179586f7237664567fd567f62fa..4300791a17b4503b988abf4bda1f88839aaaea90 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/wiedereroeffnen-button/wiedereroeffnen-button.component.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/wiedereroeffnen-button/wiedereroeffnen-button.component.ts
@@ -21,28 +21,22 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input, OnInit } from '@angular/core';
 import { CommandResource } from '@alfa-client/command-shared';
 import { StateResource, createEmptyStateResource } from '@alfa-client/tech-shared';
-import {
-  VorgangCommandService,
-  VorgangWithEingangLinkRel,
-  VorgangWithEingangResource,
-} from '@alfa-client/vorgang-shared';
+import { VorgangCommandService, VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input, OnInit } from '@angular/core';
 import { Observable, of } from 'rxjs';
 
 @Component({
   selector: 'alfa-wiedereroeffnen-button',
   templateUrl: './wiedereroeffnen-button.component.html',
-  styleUrls: ['./wiedereroeffnen-button.component.scss'],
+  styles: [':host {@apply empty:hidden}'],
 })
 export class WiedereroeffnenButtonComponent implements OnInit {
   @Input() vorgang: VorgangWithEingangResource;
   @Input() showAsIconButton: boolean = false;
 
-  commandStateResource$: Observable<StateResource<CommandResource>> = of(
-    createEmptyStateResource<CommandResource>(),
-  );
+  commandStateResource$: Observable<StateResource<CommandResource>> = of(createEmptyStateResource<CommandResource>());
 
   readonly linkRel = VorgangWithEingangLinkRel;
 
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckholen-button/zurueckholen-button.component.html b/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckholen-button/zurueckholen-button.component.html
index fde254e2a246f1447dce121a6d832434f5d9f005..3fd57ccdb224a101cd6aae36ec98a2e09291c30c 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckholen-button/zurueckholen-button.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckholen-button/zurueckholen-button.component.html
@@ -23,24 +23,27 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ng-container *ngIf="vorgang | hasLink: linkRel.ZURUECKHOLEN">
-  <ozgcloud-stroked-button-with-spinner
-    *ngIf="!showAsIconButton"
-    data-test-id="zurueckholen-button"
-    text="Zurückholen"
-    icon="undo"
-    [stateResource]="commandStateResource$ | async"
-    (click)="zurueckholen()"
-  >
-  </ozgcloud-stroked-button-with-spinner>
-
-  <ozgcloud-icon-button-with-spinner
-    *ngIf="showAsIconButton"
-    data-test-id="zurueckholen-icon-button"
-    icon="undo"
-    toolTip="Vorgang zurückholen"
-    [stateResource]="commandStateResource$ | async"
-    (clickEmitter)="zurueckholen()"
-  >
-  </ozgcloud-icon-button-with-spinner>
-</ng-container>
+@if (vorgang | hasLink: linkRel.ZURUECKHOLEN) {
+  @if (showAsIconButton) {
+    <ods-button-with-spinner
+      [stateResource]="commandStateResource$ | async"
+      data-test-id="zurueckholen-icon-button"
+      variant="ghost"
+      size="fit"
+      tooltip="Vorgang zurückholen"
+      (clickEmitter)="zurueckholen()"
+    >
+      <ods-undo-icon icon class="fill-text" />
+    </ods-button-with-spinner>
+  } @else {
+    <ods-button-with-spinner
+      [stateResource]="commandStateResource$ | async"
+      data-test-id="zurueckholen-button"
+      text="Vorgang zurückholen"
+      variant="outline"
+      (clickEmitter)="zurueckholen()"
+    >
+      <ods-undo-icon icon />
+    </ods-button-with-spinner>
+  }
+}
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckholen-button/zurueckholen-button.component.scss b/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckholen-button/zurueckholen-button.component.scss
deleted file mode 100644
index 54c4f3eb8c92af93694c03cdf577fed23cf9f86b..0000000000000000000000000000000000000000
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckholen-button/zurueckholen-button.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckholen-button/zurueckholen-button.component.spec.ts b/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckholen-button/zurueckholen-button.component.spec.ts
index 8d11e65b2d0745cfe546bcdef7254a2da3952b1e..3a1cd901153906a95686be588731b8ca6f174b48 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckholen-button/zurueckholen-button.component.spec.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckholen-button/zurueckholen-button.component.spec.ts
@@ -21,14 +21,12 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HasLinkPipe, createStateResource } from '@alfa-client/tech-shared';
 import { mock } from '@alfa-client/test-utils';
-import {
-  IconButtonWithSpinnerComponent,
-  OzgcloudStrokedButtonWithSpinnerComponent,
-} from '@alfa-client/ui';
 import { VorgangCommandService, VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { UndoIconComponent } from '@ods/system';
 import { createCommandResource } from 'libs/command-shared/test/command';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
@@ -53,8 +51,8 @@ describe('ZurueckholenButtonComponent', () => {
       declarations: [
         ZurueckholenButtonComponent,
         HasLinkPipe,
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
-        MockComponent(IconButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(UndoIconComponent),
       ],
       providers: [
         {
@@ -107,9 +105,7 @@ describe('ZurueckholenButtonComponent', () => {
     });
 
     it('should be visible', () => {
-      component.vorgang = createVorgangWithEingangResource([
-        VorgangWithEingangLinkRel.ZURUECKHOLEN,
-      ]);
+      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.ZURUECKHOLEN]);
 
       fixture.detectChanges();
       const buttonElement = fixture.nativeElement.querySelector(zurueckholenButton);
@@ -134,9 +130,7 @@ describe('ZurueckholenButtonComponent', () => {
     });
 
     it('should be visible', () => {
-      component.vorgang = createVorgangWithEingangResource([
-        VorgangWithEingangLinkRel.ZURUECKHOLEN,
-      ]);
+      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.ZURUECKHOLEN]);
 
       fixture.detectChanges();
       const buttonElement = fixture.nativeElement.querySelector(zurueckholenIconButton);
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckholen-button/zurueckholen-button.component.ts b/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckholen-button/zurueckholen-button.component.ts
index e32881b215ed1677c0bf79d5c9a8782f0944f102..37eeb40bb4c221515a712993c0c899f68243a717 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckholen-button/zurueckholen-button.component.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckholen-button/zurueckholen-button.component.ts
@@ -21,28 +21,22 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input, OnInit } from '@angular/core';
 import { CommandResource } from '@alfa-client/command-shared';
 import { StateResource, createEmptyStateResource } from '@alfa-client/tech-shared';
-import {
-  VorgangCommandService,
-  VorgangWithEingangLinkRel,
-  VorgangWithEingangResource,
-} from '@alfa-client/vorgang-shared';
+import { VorgangCommandService, VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input, OnInit } from '@angular/core';
 import { Observable, of } from 'rxjs';
 
 @Component({
   selector: 'alfa-zurueckholen-button',
   templateUrl: './zurueckholen-button.component.html',
-  styleUrls: ['./zurueckholen-button.component.scss'],
+  styles: [':host {@apply empty:hidden}'],
 })
 export class ZurueckholenButtonComponent implements OnInit {
   @Input() vorgang: VorgangWithEingangResource;
   @Input() showAsIconButton: boolean = false;
 
-  commandStateResource$: Observable<StateResource<CommandResource>> = of(
-    createEmptyStateResource<CommandResource>(),
-  );
+  commandStateResource$: Observable<StateResource<CommandResource>> = of(createEmptyStateResource<CommandResource>());
 
   readonly linkRel = VorgangWithEingangLinkRel;
 
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckstellen-button/zurueckstellen-button.component.html b/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckstellen-button/zurueckstellen-button.component.html
index 0461b518cd1c340e61d6a679a771bad43ee9bffa..c595747b9869cb5f3481a7a055267de3dfb56c76 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckstellen-button/zurueckstellen-button.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckstellen-button/zurueckstellen-button.component.html
@@ -23,24 +23,28 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ng-container *ngIf="vorgang | hasLink: linkRel.ZURUECKSTELLEN">
-  <ozgcloud-stroked-button-with-spinner
-    *ngIf="!showAsIconButton"
-    data-test-id="zurueckstellen-button"
-    text="Zurückstellen"
-    icon="undo"
-    [stateResource]="commandStateResource$ | async"
-    (clickEmitter)="zurueckstellen()"
-  >
-  </ozgcloud-stroked-button-with-spinner>
 
-  <ozgcloud-icon-button-with-spinner
-    *ngIf="showAsIconButton"
-    data-test-id="zurueckstellen-icon-button"
-    icon="undo"
-    toolTip="Vorgang zurückstellen"
-    [stateResource]="commandStateResource$ | async"
-    (clickEmitter)="zurueckstellen()"
-  >
-  </ozgcloud-icon-button-with-spinner>
-</ng-container>
+@if (vorgang | hasLink: linkRel.ZURUECKSTELLEN) {
+  @if (showAsIconButton) {
+    <ods-button-with-spinner
+      [stateResource]="commandStateResource$ | async"
+      data-test-id="zurueckstellen-icon-button"
+      tooltip="Vorgang zurückstellen"
+      variant="ghost"
+      size="fit"
+      (clickEmitter)="zurueckstellen()"
+    >
+      <ods-undo-icon icon class="fill-text" />
+    </ods-button-with-spinner>
+  } @else {
+    <ods-button-with-spinner
+      [stateResource]="commandStateResource$ | async"
+      data-test-id="zurueckstellen-button"
+      text="Zurückstellen"
+      variant="outline"
+      (clickEmitter)="zurueckstellen()"
+    >
+      <ods-undo-icon icon />
+    </ods-button-with-spinner>
+  }
+}
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckstellen-button/zurueckstellen-button.component.scss b/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckstellen-button/zurueckstellen-button.component.scss
deleted file mode 100644
index 54c4f3eb8c92af93694c03cdf577fed23cf9f86b..0000000000000000000000000000000000000000
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckstellen-button/zurueckstellen-button.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckstellen-button/zurueckstellen-button.component.spec.ts b/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckstellen-button/zurueckstellen-button.component.spec.ts
index 1b18ad639390f3b10c12c9ed964299a51edaa7cb..b17b7c5a7c9c1651c129adf56fbfea79ff7044f9 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckstellen-button/zurueckstellen-button.component.spec.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckstellen-button/zurueckstellen-button.component.spec.ts
@@ -21,14 +21,12 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HasLinkPipe, createStateResource } from '@alfa-client/tech-shared';
 import { mock } from '@alfa-client/test-utils';
-import {
-  IconButtonWithSpinnerComponent,
-  OzgcloudStrokedButtonWithSpinnerComponent,
-} from '@alfa-client/ui';
 import { VorgangCommandService, VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { UndoIconComponent } from '@ods/system';
 import { createCommandResource } from 'libs/command-shared/test/command';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
@@ -53,8 +51,8 @@ describe('ZurueckstellenButtonComponent', () => {
       declarations: [
         ZurueckstellenButtonComponent,
         HasLinkPipe,
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
-        MockComponent(IconButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(UndoIconComponent),
       ],
       providers: [
         {
@@ -107,9 +105,7 @@ describe('ZurueckstellenButtonComponent', () => {
     });
 
     it('should be visible', () => {
-      component.vorgang = createVorgangWithEingangResource([
-        VorgangWithEingangLinkRel.ZURUECKSTELLEN,
-      ]);
+      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.ZURUECKSTELLEN]);
 
       fixture.detectChanges();
       const buttonElement = fixture.nativeElement.querySelector(zurueckstellenButton);
@@ -134,9 +130,7 @@ describe('ZurueckstellenButtonComponent', () => {
     });
 
     it('should be visible', () => {
-      component.vorgang = createVorgangWithEingangResource([
-        VorgangWithEingangLinkRel.ZURUECKSTELLEN,
-      ]);
+      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.ZURUECKSTELLEN]);
 
       fixture.detectChanges();
       const buttonElement = fixture.nativeElement.querySelector(zurueckstellenIconButton);
diff --git a/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckstellen-button/zurueckstellen-button.component.ts b/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckstellen-button/zurueckstellen-button.component.ts
index 5ee0685b2df000c923589f6550790a82f2ff0739..3c0393503ce0b44a9c83a14b3339a13f2e600671 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckstellen-button/zurueckstellen-button.component.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckstellen-button/zurueckstellen-button.component.ts
@@ -21,28 +21,22 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input, OnInit } from '@angular/core';
 import { CommandResource } from '@alfa-client/command-shared';
 import { StateResource, createEmptyStateResource } from '@alfa-client/tech-shared';
-import {
-  VorgangCommandService,
-  VorgangWithEingangLinkRel,
-  VorgangWithEingangResource,
-} from '@alfa-client/vorgang-shared';
+import { VorgangCommandService, VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input, OnInit } from '@angular/core';
 import { Observable, of } from 'rxjs';
 
 @Component({
   selector: 'alfa-zurueckstellen-button',
   templateUrl: './zurueckstellen-button.component.html',
-  styleUrls: ['./zurueckstellen-button.component.scss'],
+  styles: [':host {@apply empty:hidden}'],
 })
 export class ZurueckstellenButtonComponent implements OnInit {
   @Input() vorgang: VorgangWithEingangResource;
   @Input() showAsIconButton: boolean = false;
 
-  commandStateResource$: Observable<StateResource<CommandResource>> = of(
-    createEmptyStateResource<CommandResource>(),
-  );
+  commandStateResource$: Observable<StateResource<CommandResource>> = of(createEmptyStateResource<CommandResource>());
 
   readonly linkRel = VorgangWithEingangLinkRel;
 
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-action-buttons/vorgang-detail-action-buttons.component.html b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-action-buttons/vorgang-detail-action-buttons.component.html
index 2505c2406ef82222f83d015924f65bc53cdfe922..7170a1ee9d6a52391ff3841614a4dff0a9cb4171 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-action-buttons/vorgang-detail-action-buttons.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-action-buttons/vorgang-detail-action-buttons.component.html
@@ -23,62 +23,26 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<alfa-annehmen-button
-  [showAsIconButton]="showAsIconButton"
-  [vorgang]="vorgangWithEingang"
-></alfa-annehmen-button>
-<alfa-zurueckholen-button
-  [showAsIconButton]="showAsIconButton"
-  [vorgang]="vorgangWithEingang"
-></alfa-zurueckholen-button>
-<alfa-bearbeiten-button
-  [showAsIconButton]="showAsIconButton"
-  [vorgang]="vorgangWithEingang"
-></alfa-bearbeiten-button>
-<alfa-bescheiden-button
-  [showAsIconButton]="showAsIconButton"
-  [vorgang]="vorgangWithEingang"
-></alfa-bescheiden-button>
-<alfa-zurueckstellen-button
-  [showAsIconButton]="showAsIconButton"
-  [vorgang]="vorgangWithEingang"
-></alfa-zurueckstellen-button>
-<alfa-abschliessen-button
-  [showAsIconButton]="showAsIconButton"
-  [vorgang]="vorgangWithEingang"
-></alfa-abschliessen-button>
-<alfa-verwerfen-button
-  [showAsIconButton]="showAsIconButton"
-  [vorgang]="vorgangWithEingang"
-></alfa-verwerfen-button>
-<alfa-wiedereroeffnen-button
-  [showAsIconButton]="showAsIconButton"
-  [vorgang]="vorgangWithEingang"
-></alfa-wiedereroeffnen-button>
+<alfa-annehmen-button [showAsIconButton]="showAsIconButton" [vorgang]="vorgangWithEingang" />
+<alfa-zurueckholen-button [showAsIconButton]="showAsIconButton" [vorgang]="vorgangWithEingang" />
+<alfa-bearbeiten-button [showAsIconButton]="showAsIconButton" [vorgang]="vorgangWithEingang" />
+<alfa-bescheiden-button [showAsIconButton]="showAsIconButton" [vorgang]="vorgangWithEingang" />
+<alfa-zurueckstellen-button [showAsIconButton]="showAsIconButton" [vorgang]="vorgangWithEingang" />
+<alfa-abschliessen-button [showAsIconButton]="showAsIconButton" [vorgang]="vorgangWithEingang" />
+<alfa-verwerfen-button [showAsIconButton]="showAsIconButton" [vorgang]="vorgangWithEingang" />
+<alfa-wiedereroeffnen-button [showAsIconButton]="showAsIconButton" [vorgang]="vorgangWithEingang" />
 <!-- TODO Anhand des Links Library dynamisch laden -->
-<alfa-loeschen-anfordern-button-container
-  *ngIf="vorgangWithEingang | hasLink: vorgangWithEingangLinkRel.LOESCHEN_ANFORDERN"
-  data-test-id="loeschen-anfordern-icon-button-container"
-  [showAsIconButton]="showAsIconButton"
-  [vorgang]="vorgangWithEingang"
->
-</alfa-loeschen-anfordern-button-container>
-<alfa-endgueltig-loeschen-button-container
-  [showAsIconButton]="showAsIconButton"
-  [vorgang]="vorgangWithEingang"
-></alfa-endgueltig-loeschen-button-container>
-<alfa-loesch-anforderung-zuruecknehmen-button-container
-  [showAsIconButton]="showAsIconButton"
-></alfa-loesch-anforderung-zuruecknehmen-button-container>
+@if (vorgangWithEingang | hasLink: vorgangWithEingangLinkRel.LOESCHEN_ANFORDERN) {
+  <alfa-loeschen-anfordern-button-container
+    data-test-id="loeschen-anfordern-icon-button-container"
+    [showAsIconButton]="showAsIconButton"
+    [vorgang]="vorgangWithEingang"
+  />
+}
+<alfa-endgueltig-loeschen-button-container [showAsIconButton]="showAsIconButton" [vorgang]="vorgangWithEingang" />
+<alfa-loesch-anforderung-zuruecknehmen-button-container [showAsIconButton]="showAsIconButton" />
 <!--  -->
-<alfa-create-wiedervorlage-button-container
-  [showAsIconButton]="showAsIconButton"
-  [vorgang]="vorgangWithEingang"
-></alfa-create-wiedervorlage-button-container>
-<alfa-assign-user-profile-button-container
-  [vorgang]="vorgangWithEingang"
-></alfa-assign-user-profile-button-container>
-<alfa-postfach-mail-button-container
-  [showAsIconButton]="showAsIconButton"
-  [vorgang]="vorgangWithEingang"
-></alfa-postfach-mail-button-container>
+<alfa-create-wiedervorlage-button-container [showAsIconButton]="showAsIconButton" [vorgang]="vorgangWithEingang" />
+<alfa-assign-user-profile-button-container [vorgang]="vorgangWithEingang" />
+<alfa-postfach-mail-button-container [showAsIconButton]="showAsIconButton" [vorgang]="vorgangWithEingang" />
+<alfa-forward-by-ozgcloud-button-container [vorgangWithEingang]="vorgangWithEingang" [showAsIconButton]="showAsIconButton" />
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-action-buttons/vorgang-detail-action-buttons.component.spec.ts b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-action-buttons/vorgang-detail-action-buttons.component.spec.ts
index e5e841336b1f6469c1c6014cfe777975dc339bec..b8c3aed662cf6e6034a2a80d3eb99bd13472e235 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-action-buttons/vorgang-detail-action-buttons.component.spec.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-action-buttons/vorgang-detail-action-buttons.component.spec.ts
@@ -21,13 +21,18 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { EndgueltigLoeschenButtonContainerComponent, LoeschAnforderungZuruecknehmenButtonContainerComponent, LoeschenAnfordernButtonContainerComponent } from '@alfa-client/loesch-anforderung';
+import { ForwardByOzgcloudButtonContainerComponent } from '@alfa-client/forwarding';
+import {
+  EndgueltigLoeschenButtonContainerComponent,
+  LoeschAnforderungZuruecknehmenButtonContainerComponent,
+  LoeschenAnfordernButtonContainerComponent,
+} from '@alfa-client/loesch-anforderung';
 import { PostfachMailButtonContainerComponent } from '@alfa-client/postfach';
 import { HasLinkPipe } from '@alfa-client/tech-shared';
-import { existsAsHtmlElement, notExistsAsHtmlElement } from '@alfa-client/test-utils';
+import { existsAsHtmlElement, getMockComponent, notExistsAsHtmlElement } from '@alfa-client/test-utils';
 import { IconButtonWithSpinnerComponent } from '@alfa-client/ui';
 import { AssignUserProfileButtonContainerComponent } from '@alfa-client/user-profile';
-import { VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
+import { VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
 import { CreateWiedervorlageButtonContainerComponent } from '@alfa-client/wiedervorlage';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
@@ -47,11 +52,11 @@ describe('VorgangDetailActionButtonsComponent', () => {
   let component: VorgangDetailActionButtonsComponent;
   let fixture: ComponentFixture<VorgangDetailActionButtonsComponent>;
 
-  const loeschenAnfordernIconButtonContainer: string = getDataTestIdOf(
-    'loeschen-anfordern-icon-button-container',
-  );
+  const loeschenAnfordernIconButtonContainer: string = getDataTestIdOf('loeschen-anfordern-icon-button-container');
   const createBescheidButtonContainer: string = getDataTestIdOf('create-bescheid-button-container');
 
+  const vorgangWithEingang: VorgangWithEingangResource = createVorgangWithEingangResource();
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [
@@ -72,6 +77,7 @@ describe('VorgangDetailActionButtonsComponent', () => {
         MockComponent(LoeschenAnfordernButtonContainerComponent),
         MockComponent(EndgueltigLoeschenButtonContainerComponent),
         MockComponent(LoeschAnforderungZuruecknehmenButtonContainerComponent),
+        MockComponent(ForwardByOzgcloudButtonContainerComponent),
       ],
     });
   });
@@ -88,16 +94,14 @@ describe('VorgangDetailActionButtonsComponent', () => {
 
   describe('loeschenAnfordernIconButtonContainer', () => {
     it('should show if link is present', () => {
-      component.vorgangWithEingang = createVorgangWithEingangResource([
-        VorgangWithEingangLinkRel.LOESCHEN_ANFORDERN,
-      ]);
+      component.vorgangWithEingang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.LOESCHEN_ANFORDERN]);
       fixture.detectChanges();
 
       existsAsHtmlElement(fixture, loeschenAnfordernIconButtonContainer);
     });
 
     it('should hide if link is not present', () => {
-      component.vorgangWithEingang = createVorgangWithEingangResource();
+      component.vorgangWithEingang = vorgangWithEingang;
       fixture.detectChanges();
 
       notExistsAsHtmlElement(fixture, loeschenAnfordernIconButtonContainer);
@@ -106,11 +110,24 @@ describe('VorgangDetailActionButtonsComponent', () => {
 
   describe('create bescheid button', () => {
     it('should hide if link not exists', () => {
-      component.vorgangWithEingang = createVorgangWithEingangResource();
+      component.vorgangWithEingang = vorgangWithEingang;
 
       fixture.detectChanges();
 
       notExistsAsHtmlElement(fixture, createBescheidButtonContainer);
     });
   });
+
+  it('forward button should be called', () => {
+    component.vorgangWithEingang = vorgangWithEingang;
+
+    fixture.detectChanges();
+
+    const button: ForwardByOzgcloudButtonContainerComponent = getMockComponent(
+      fixture,
+      ForwardByOzgcloudButtonContainerComponent,
+    );
+    expect(button.vorgangWithEingang).toBe(vorgangWithEingang);
+    expect(button.showAsIconButton).toBeTruthy();
+  });
 });
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-action-buttons/vorgang-detail-action-buttons.component.ts b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-action-buttons/vorgang-detail-action-buttons.component.ts
index 1d37f1a177fc1f508ef9fdaf3730c6d3173577b0..d6eabde2e9b9ddc75bcea31cdde52062abf8e114 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-action-buttons/vorgang-detail-action-buttons.component.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-action-buttons/vorgang-detail-action-buttons.component.ts
@@ -21,13 +21,13 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input } from '@angular/core';
 import { VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'alfa-vorgang-detail-action-buttons',
   templateUrl: './vorgang-detail-action-buttons.component.html',
-  styleUrls: ['./vorgang-detail-action-buttons.component.scss'],
+  styles: [':host {@apply flex grow gap-0.5}'],
 })
 export class VorgangDetailActionButtonsComponent {
   @Input() vorgangWithEingang: VorgangWithEingangResource;
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.html b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.html
index 9c2c2212dcb045afb9125480829cbcf2615b6418..772fdbd05969b74f6fe626e05d5b74123f595f02 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.html
@@ -35,8 +35,11 @@
         data-test-id="vorgang-detail-header"
       ></alfa-vorgang-detail-header>
 
+
       <div class="section one-column">
-        <alfa-vorgang-detail-formular-daten [vorgangWithEingang]="vorgangResource"></alfa-vorgang-detail-formular-daten>
+        <alfa-vorgang-detail-formular-buttons [vorgangWithEingang]="vorgangResource" />
+
+        <alfa-vorgang-detail-formular-daten [vorgangWithEingang]="vorgangResource" />
 
         <div *ngIf="vorgangResource | hasLink: vorgangWithEingangLinkRel.BESCHEIDE">
           <ozgcloud-expansion-panel headline="Bescheid" data-test-id="bescheid-expansion-panel">
@@ -44,8 +47,6 @@
             </alfa-bescheid-list-in-vorgang-container>
           </ozgcloud-expansion-panel>
         </div>
-
-        <alfa-vorgang-detail-formular-buttons [vorgangWithEingang]="vorgangResource"></alfa-vorgang-detail-formular-buttons>
       </div>
 
       <div class="section one-column" *ngIf="vorgangResource | hasLink: vorgangWithEingangLinkRel.COLLABORATIONS">
@@ -58,7 +59,7 @@
       </div>
 
       <div class="two-column">
-        <div class="section" *ngIf="vorgangResource | hasLink: vorgangWithEingangLinkRel.FORWARDING">
+        <div class="section" *ngIf="vorgangResource | hasLink: vorgangWithEingangLinkRel.FORWARD_BY_EMAIL">
           <alfa-vorgang-forwarding-container
             [vorgang]="vorgangResource"
             data-test-id="forwarding-container-in-vorgang"
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.spec.ts b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.spec.ts
index 523eb42b38c26693b767b3641926bb9e7f214fcd..79d55a0dd7c4b095933d59e78923e8e786ae86a2 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.spec.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.spec.ts
@@ -192,7 +192,7 @@ describe('VorgangDetailAreaComponent', () => {
   describe('forwarding', () => {
     it('should be visible', () => {
       component.vorgangStateResource = createStateResource(
-        createVorgangWithEingangResource([VorgangWithEingangLinkRel.FORWARDING]),
+        createVorgangWithEingangResource([VorgangWithEingangLinkRel.FORWARD_BY_EMAIL]),
       );
       fixture.detectChanges();
 
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-buttons/vorgang-detail-formular-buttons.component.html b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-buttons/vorgang-detail-formular-buttons.component.html
index 5da29c28cff8a38e689d9367ea2600bba70ec1aa..742a81193c28b8f3a3b199604b2ab1f36d8f5785 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-buttons/vorgang-detail-formular-buttons.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-buttons/vorgang-detail-formular-buttons.component.html
@@ -23,23 +23,18 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<alfa-annehmen-button [vorgang]="vorgangWithEingang"></alfa-annehmen-button>
-<alfa-zurueckholen-button [vorgang]="vorgangWithEingang"></alfa-zurueckholen-button>
-<alfa-verwerfen-button [vorgang]="vorgangWithEingang"></alfa-verwerfen-button>
-<alfa-bearbeiten-button [vorgang]="vorgangWithEingang"></alfa-bearbeiten-button>
-<alfa-bescheiden-button [vorgang]="vorgangWithEingang"></alfa-bescheiden-button>
-<alfa-zurueckstellen-button [vorgang]="vorgangWithEingang"></alfa-zurueckstellen-button>
-<alfa-abschliessen-button [vorgang]="vorgangWithEingang"></alfa-abschliessen-button>
-<alfa-wiedereroeffnen-button [vorgang]="vorgangWithEingang"></alfa-wiedereroeffnen-button>
+<alfa-annehmen-button [vorgang]="vorgangWithEingang" />
+<alfa-zurueckholen-button [vorgang]="vorgangWithEingang" />
+<alfa-verwerfen-button [vorgang]="vorgangWithEingang" />
+<alfa-bearbeiten-button [vorgang]="vorgangWithEingang" />
+<alfa-bescheiden-button [vorgang]="vorgangWithEingang" />
+<alfa-zurueckstellen-button [vorgang]="vorgangWithEingang" />
+<alfa-abschliessen-button [vorgang]="vorgangWithEingang" />
+<alfa-wiedereroeffnen-button [vorgang]="vorgangWithEingang" />
 <!-- TODO LoeschAnforderung dynamisch laden, wenn Link vorhanden -->
-<alfa-loeschen-anfordern-button-container
-  *ngIf="vorgangWithEingang | hasLink: vorgangWithEingangLinkRel.LOESCHEN_ANFORDERN"
-  data-test-id="loeschen-anfordern-button-container"
-  [vorgang]="vorgangWithEingang"
->
-</alfa-loeschen-anfordern-button-container>
-<alfa-endgueltig-loeschen-button-container
-  [vorgang]="vorgangWithEingang"
-></alfa-endgueltig-loeschen-button-container>
-<alfa-loesch-anforderung-zuruecknehmen-button-container></alfa-loesch-anforderung-zuruecknehmen-button-container>
-<!--  -->
+@if (vorgangWithEingang | hasLink: vorgangWithEingangLinkRel.LOESCHEN_ANFORDERN) {
+  <alfa-loeschen-anfordern-button-container data-test-id="loeschen-anfordern-button-container" [vorgang]="vorgangWithEingang" />
+}
+<alfa-endgueltig-loeschen-button-container [vorgang]="vorgangWithEingang" />
+<alfa-loesch-anforderung-zuruecknehmen-button-container />
+<alfa-forward-by-ozgcloud-button-container [vorgangWithEingang]="vorgangWithEingang" />
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-buttons/vorgang-detail-formular-buttons.component.spec.ts b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-buttons/vorgang-detail-formular-buttons.component.spec.ts
index b1060931119464b8bd531cee3d0728cb9d79eef1..4b16a16ee53c7fda49274e3002b8e111b8f93d30 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-buttons/vorgang-detail-formular-buttons.component.spec.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-buttons/vorgang-detail-formular-buttons.component.spec.ts
@@ -21,16 +21,17 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ForwardByOzgcloudButtonContainerComponent } from '@alfa-client/forwarding';
 import {
   EndgueltigLoeschenButtonContainerComponent,
   LoeschAnforderungZuruecknehmenButtonContainerComponent,
   LoeschenAnfordernButtonContainerComponent,
 } from '@alfa-client/loesch-anforderung';
 import { HasLinkPipe } from '@alfa-client/tech-shared';
-import { existsAsHtmlElement, notExistsAsHtmlElement } from '@alfa-client/test-utils';
+import { existsAsHtmlElement, getMockComponent, notExistsAsHtmlElement } from '@alfa-client/test-utils';
 import { OzgcloudStrokedButtonWithSpinnerComponent } from '@alfa-client/ui';
-import { VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
+import { VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
 import { MockComponent } from 'ng-mocks';
@@ -48,9 +49,9 @@ describe('VorgangDetailFormularButtonsComponent', () => {
   let component: VorgangDetailFormularButtonsComponent;
   let fixture: ComponentFixture<VorgangDetailFormularButtonsComponent>;
 
-  const loeschenAnfordernButtonContainer: string = getDataTestIdOf(
-    'loeschen-anfordern-button-container',
-  );
+  const loeschenAnfordernButtonContainer: string = getDataTestIdOf('loeschen-anfordern-button-container');
+
+  const vorgangWithEingang: VorgangWithEingangResource = createVorgangWithEingangResource();
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -69,6 +70,7 @@ describe('VorgangDetailFormularButtonsComponent', () => {
         MockComponent(LoeschenAnfordernButtonContainerComponent),
         MockComponent(EndgueltigLoeschenButtonContainerComponent),
         MockComponent(LoeschAnforderungZuruecknehmenButtonContainerComponent),
+        MockComponent(ForwardByOzgcloudButtonContainerComponent),
       ],
     });
   });
@@ -76,6 +78,7 @@ describe('VorgangDetailFormularButtonsComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(VorgangDetailFormularButtonsComponent);
     component = fixture.componentInstance;
+    component.vorgangWithEingang = vorgangWithEingang;
     fixture.detectChanges();
   });
 
@@ -85,19 +88,28 @@ describe('VorgangDetailFormularButtonsComponent', () => {
 
   describe('loeschenAnfordernButtonContainer', () => {
     it('should show if link is present', () => {
-      component.vorgangWithEingang = createVorgangWithEingangResource([
-        VorgangWithEingangLinkRel.LOESCHEN_ANFORDERN,
-      ]);
+      component.vorgangWithEingang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.LOESCHEN_ANFORDERN]);
       fixture.detectChanges();
 
       existsAsHtmlElement(fixture, loeschenAnfordernButtonContainer);
     });
 
     it('should hide if link is not present', () => {
-      component.vorgangWithEingang = createVorgangWithEingangResource();
+      component.vorgangWithEingang = vorgangWithEingang;
       fixture.detectChanges();
 
       notExistsAsHtmlElement(fixture, loeschenAnfordernButtonContainer);
     });
   });
+
+  it('forwarding button should be called', () => {
+    component.vorgangWithEingang = vorgangWithEingang;
+    fixture.detectChanges();
+
+    const button: ForwardByOzgcloudButtonContainerComponent = getMockComponent(
+      fixture,
+      ForwardByOzgcloudButtonContainerComponent,
+    );
+    expect(button.vorgangWithEingang).toBe(vorgangWithEingang);
+  });
 });
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-buttons/vorgang-detail-formular-buttons.component.ts b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-buttons/vorgang-detail-formular-buttons.component.ts
index af2afbb3748fd678239e158e63a672d63a88a63d..462a97addb4bde5e6017eaa58bc7a8b800d832a7 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-buttons/vorgang-detail-formular-buttons.component.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-buttons/vorgang-detail-formular-buttons.component.ts
@@ -21,13 +21,13 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input } from '@angular/core';
 import { VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'alfa-vorgang-detail-formular-buttons',
   templateUrl: './vorgang-detail-formular-buttons.component.html',
-  styleUrls: ['./vorgang-detail-formular-buttons.component.scss'],
+  styles: [':host {@apply mt-4 mb-6 ml-14 flex gap-4}'],
 })
 export class VorgangDetailFormularButtonsComponent {
   @Input() vorgangWithEingang: VorgangWithEingangResource;
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-page.component.html b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-page.component.html
index e85d31cb74a4f5dec0cf658f42112affb3fa9a7a..adc18566dffdcfc1bed5d98bbf703be5b9d4ada9 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-page.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-page.component.html
@@ -25,7 +25,7 @@
 -->
 <main *ngIf="vorgangStateResource$ | async as vorgangStateResource">
   <h1 class="sr-only">Details zum Vorgang</h1>
-  <ozgcloud-subnavigation class="mat-typography mat-app-background" data-test-id="subnavigation">
+  <ozgcloud-subnavigation class="flex gap-0.5 bg-background-100" data-test-id="subnavigation">
     <alfa-vorgang-detail-back-button-container></alfa-vorgang-detail-back-button-container>
     <ng-container *ngIf="vorgangStateResource.resource">
       <alfa-vorgang-detail-action-buttons
@@ -39,9 +39,7 @@
     </ng-container>
   </ozgcloud-subnavigation>
 
-  <div
-    class="l-scroll-area--full flex border-l border-r border-grayborder/30 dark:border-transparent"
-  >
+  <div class="l-scroll-area--full flex border-l border-r border-grayborder/30 dark:border-transparent">
     <alfa-vorgang-detail-area
       *ngIf="vorgangStateResource"
       [vorgangStateResource]="vorgangStateResource"
@@ -50,9 +48,5 @@
   </div>
 </main>
 
-<ozgcloud-progress-bar
-  [stateResource]="revokeCommandStateResource$ | async"
-></ozgcloud-progress-bar>
-<ozgcloud-spinner-transparency
-  [stateResource]="vorgangLoeschenCommandStateResource$ | async"
-></ozgcloud-spinner-transparency>
+<ozgcloud-progress-bar [stateResource]="revokeCommandStateResource$ | async"></ozgcloud-progress-bar>
+<ozgcloud-spinner-transparency [stateResource]="vorgangLoeschenCommandStateResource$ | async"></ozgcloud-spinner-transparency>
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts
index 41a5873acec9c60fa31b8f5bde935aabf49f5573..32aba2314074dfd4c1db59679594e9cd00767f4e 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts
@@ -24,7 +24,7 @@
 import { BescheidModule } from '@alfa-client/bescheid';
 import { BinaryFileModule } from '@alfa-client/binary-file';
 import { CollaborationModule } from '@alfa-client/collaboration';
-import { ForwardingModule } from '@alfa-client/forwarding';
+import { ForwardByOzgcloudButtonContainerComponent, ForwardingModule } from '@alfa-client/forwarding';
 import { HistorieModule } from '@alfa-client/historie';
 import { KommentarModule } from '@alfa-client/kommentar';
 import { LoeschAnforderungModule } from '@alfa-client/loesch-anforderung';
@@ -57,8 +57,10 @@ import {
   BescheidUploadIconComponent,
   ButtonCardComponent,
   ButtonComponent,
+  CheckCircleIconComponent,
   CheckIconComponent,
   CloseIconComponent,
+  DiscardVorgangIconComponent,
   DropdownMenuComponent,
   DropdownMenuTextItemComponent,
   EditIconComponent,
@@ -72,6 +74,7 @@ import {
   SpinnerIconComponent,
   StampIconComponent,
   TooltipDirective,
+  UndoIconComponent,
 } from '@ods/system';
 import { AktenzeichenEditDialogComponent } from './aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component';
 import { AktenzeichenEditableComponent } from './aktenzeichen-editable/aktenzeichen-editable.component';
@@ -156,6 +159,7 @@ const routes: Routes = [
     RadioButtonCardComponent,
     ButtonComponent,
     ButtonCardComponent,
+    UndoIconComponent,
     CloseIconComponent,
     EditIconComponent,
     ExclamationIconComponent,
@@ -176,12 +180,16 @@ const routes: Routes = [
     ErrorMessageComponent,
     CollaborationModule,
     ArchiveIconComponent,
+    CheckCircleIconComponent,
     CheckIconComponent,
     DropdownMenuComponent,
     DropdownMenuTextItemComponent,
     MoreIconComponent,
     FileIconComponent,
+    ForwardByOzgcloudButtonContainerComponent,
     TooltipDirective,
+    EditIconComponent,
+    DiscardVorgangIconComponent,
   ],
   declarations: [
     VorgangDetailPageComponent,
diff --git a/alfa-client/libs/vorgang-shared/src/lib/vorgang.linkrel.ts b/alfa-client/libs/vorgang-shared/src/lib/vorgang.linkrel.ts
index ed59d9c3e4d04166dab03b8d34d12510769f148e..81efa35cbd2e10c10c1b794af84518a289648e86 100644
--- a/alfa-client/libs/vorgang-shared/src/lib/vorgang.linkrel.ts
+++ b/alfa-client/libs/vorgang-shared/src/lib/vorgang.linkrel.ts
@@ -49,7 +49,8 @@ export enum VorgangWithEingangLinkRel {
 
   ATTACHMENTS = 'attachments',
   FORWARD = 'forward',
-  FORWARDING = 'forwarding',
+  FORWARD_BY_EMAIL = 'forwardByEmail',
+  FORWARD_BY_OZGCLOUD = 'forwardByOzgCloud',
   PENDING_COMMANDS = 'pending-commands',
   ASSIGN = 'assign',
   REPRESENTATIONS = 'representations',
diff --git a/alfa-client/libs/wiedervorlage/src/lib/erledigen-button-container/erledigen-button-container.component.html b/alfa-client/libs/wiedervorlage/src/lib/erledigen-button-container/erledigen-button-container.component.html
index 6d922ec39dd485dd0b6a17332bbb9e54bb56e42e..5099a02204f32b3ea50804984be240992535d0fd 100644
--- a/alfa-client/libs/wiedervorlage/src/lib/erledigen-button-container/erledigen-button-container.component.html
+++ b/alfa-client/libs/wiedervorlage/src/lib/erledigen-button-container/erledigen-button-container.component.html
@@ -23,12 +23,15 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ozgcloud-icon-button-with-spinner
-  *ngIf="wiedervorlage | hasLink: linkRel.ERLEDIGEN"
-  data-test-id="erledigen-icon-button"
-  [stateResource]="erledigenCommand$ | async"
-  icon="check_circle_outline"
-  toolTip="Als erledigt markieren"
-  (clickEmitter)="erledigen()"
->
-</ozgcloud-icon-button-with-spinner>
+@if (wiedervorlage | hasLink: linkRel.ERLEDIGEN) {
+  <ods-button-with-spinner
+    data-test-id="erledigen-icon-button"
+    [stateResource]="erledigenCommand$ | async"
+    tooltip="Als erledigt markieren"
+    variant="ghost"
+    size="fit"
+    (clickEmitter)="erledigen()"
+  >
+    <ods-check-circle-icon icon class="fill-text" />
+  </ods-button-with-spinner>
+}
diff --git a/alfa-client/libs/wiedervorlage/src/lib/erledigen-button-container/erledigen-button-container.component.scss b/alfa-client/libs/wiedervorlage/src/lib/erledigen-button-container/erledigen-button-container.component.scss
deleted file mode 100644
index 54c4f3eb8c92af93694c03cdf577fed23cf9f86b..0000000000000000000000000000000000000000
--- a/alfa-client/libs/wiedervorlage/src/lib/erledigen-button-container/erledigen-button-container.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
diff --git a/alfa-client/libs/wiedervorlage/src/lib/erledigen-button-container/erledigen-button-container.component.spec.ts b/alfa-client/libs/wiedervorlage/src/lib/erledigen-button-container/erledigen-button-container.component.spec.ts
index f188bcdca8841e41ceedc80a94e90f486dde12bd..69aaf5f00dfb63c96f37ca4fe53755d24900072d 100644
--- a/alfa-client/libs/wiedervorlage/src/lib/erledigen-button-container/erledigen-button-container.component.spec.ts
+++ b/alfa-client/libs/wiedervorlage/src/lib/erledigen-button-container/erledigen-button-container.component.spec.ts
@@ -21,11 +21,12 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HasLinkPipe } from '@alfa-client/tech-shared';
 import { mock } from '@alfa-client/test-utils';
-import { IconButtonWithSpinnerComponent } from '@alfa-client/ui';
 import { WiedervorlageLinkRel, WiedervorlageService } from '@alfa-client/wiedervorlage-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { CheckCircleIconComponent } from '@ods/system';
 import { createWiedervorlageResource } from 'libs/wiedervorlage-shared/test/wiedervorlage';
 import { MockComponent } from 'ng-mocks';
 import { ErledigenButtonContainerComponent } from './erledigen-button-container.component';
@@ -43,7 +44,8 @@ describe('ErledigenButtonContainerComponent', () => {
       declarations: [
         ErledigenButtonContainerComponent,
         HasLinkPipe,
-        MockComponent(IconButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(CheckCircleIconComponent),
       ],
       providers: [
         {
diff --git a/alfa-client/libs/wiedervorlage/src/lib/erledigen-button-container/erledigen-button-container.component.ts b/alfa-client/libs/wiedervorlage/src/lib/erledigen-button-container/erledigen-button-container.component.ts
index dbdb25d29bbe68859c054f7edb9feba3808094ca..bf8239542fac0e3343d4339104f67362265c94e0 100644
--- a/alfa-client/libs/wiedervorlage/src/lib/erledigen-button-container/erledigen-button-container.component.ts
+++ b/alfa-client/libs/wiedervorlage/src/lib/erledigen-button-container/erledigen-button-container.component.ts
@@ -21,20 +21,15 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input } from '@angular/core';
 import { CommandResource } from '@alfa-client/command-shared';
 import { StateResource } from '@alfa-client/tech-shared';
-import {
-  WiedervorlageLinkRel,
-  WiedervorlageResource,
-  WiedervorlageService,
-} from '@alfa-client/wiedervorlage-shared';
+import { WiedervorlageLinkRel, WiedervorlageResource, WiedervorlageService } from '@alfa-client/wiedervorlage-shared';
+import { Component, Input } from '@angular/core';
 import { Observable } from 'rxjs';
 
 @Component({
   selector: 'alfa-erledigen-button-container',
   templateUrl: './erledigen-button-container.component.html',
-  styleUrls: ['./erledigen-button-container.component.scss'],
 })
 export class ErledigenButtonContainerComponent {
   @Input() wiedervorlage: WiedervorlageResource;
diff --git a/alfa-client/libs/wiedervorlage/src/lib/submit-wiedervorlage-button/submit-wiedervorlage-button.component.html b/alfa-client/libs/wiedervorlage/src/lib/submit-wiedervorlage-button/submit-wiedervorlage-button.component.html
index a7dc7bca94b40caf7fd1b22d2eaa22251f9a491f..317445e1419b7f1f9a856a4b361c17986598cbe7 100644
--- a/alfa-client/libs/wiedervorlage/src/lib/submit-wiedervorlage-button/submit-wiedervorlage-button.component.html
+++ b/alfa-client/libs/wiedervorlage/src/lib/submit-wiedervorlage-button/submit-wiedervorlage-button.component.html
@@ -23,21 +23,24 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ozgcloud-stroked-button-with-spinner
-  *ngIf="!showAsIconButton"
-  text="Speichern"
-  data-test-id="speichern-button"
-  icon="save_alt"
-  [stateResource]="submitInProgress$ | async"
-  (clickEmitter)="submit()"
->
-</ozgcloud-stroked-button-with-spinner>
-
-<ozgcloud-icon-button-with-spinner
-  *ngIf="showAsIconButton"
-  icon="save_alt"
-  toolTip="Wiedervorlage speichern"
-  [stateResource]="submitInProgress$ | async"
-  (clickEmitter)="submit()"
->
-</ozgcloud-icon-button-with-spinner>
+@if (showAsIconButton) {
+  <ods-button-with-spinner
+    [stateResource]="submitInProgress$ | async"
+    tooltip="Wiedervorlage speichern"
+    variant="ghost"
+    size="fit"
+    (clickEmitter)="submit()"
+  >
+    <ods-save-icon icon class="fill-text" />
+  </ods-button-with-spinner>
+} @else {
+  <ods-button-with-spinner
+    data-test-id="speichern-button"
+    [stateResource]="submitInProgress$ | async"
+    text="Speichern"
+    variant="outline"
+    (clickEmitter)="submit()"
+  >
+    <ods-save-icon icon class="fill-whitetext" />
+  </ods-button-with-spinner>
+}
diff --git a/alfa-client/libs/wiedervorlage/src/lib/submit-wiedervorlage-button/submit-wiedervorlage-button.component.scss b/alfa-client/libs/wiedervorlage/src/lib/submit-wiedervorlage-button/submit-wiedervorlage-button.component.scss
deleted file mode 100644
index 54c4f3eb8c92af93694c03cdf577fed23cf9f86b..0000000000000000000000000000000000000000
--- a/alfa-client/libs/wiedervorlage/src/lib/submit-wiedervorlage-button/submit-wiedervorlage-button.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
diff --git a/alfa-client/libs/wiedervorlage/src/lib/submit-wiedervorlage-button/submit-wiedervorlage-button.component.spec.ts b/alfa-client/libs/wiedervorlage/src/lib/submit-wiedervorlage-button/submit-wiedervorlage-button.component.spec.ts
index 7b82b4c1d0ac9be2b4c4f83c6daf73babb28e779..5dfb7fa67a2f94ba32302be9866c2c8c5d0af972 100644
--- a/alfa-client/libs/wiedervorlage/src/lib/submit-wiedervorlage-button/submit-wiedervorlage-button.component.spec.ts
+++ b/alfa-client/libs/wiedervorlage/src/lib/submit-wiedervorlage-button/submit-wiedervorlage-button.component.spec.ts
@@ -21,17 +21,16 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ActivatedRoute } from '@angular/router';
 import { CommandResource } from '@alfa-client/command-shared';
 import { NavigationService } from '@alfa-client/navigation-shared';
 import { StateResource, createStateResource } from '@alfa-client/tech-shared';
 import { mock } from '@alfa-client/test-utils';
-import {
-  IconButtonWithSpinnerComponent,
-  OzgcloudStrokedButtonWithSpinnerComponent,
-} from '@alfa-client/ui';
+import { OzgcloudStrokedButtonWithSpinnerComponent } from '@alfa-client/ui';
 import { WiedervorlageService } from '@alfa-client/wiedervorlage-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { SaveIconComponent } from '@ods/system';
 import { CommandLinkRel } from 'libs/command-shared/src/lib/command.linkrel';
 import { createCommandResource } from 'libs/command-shared/test/command';
 import { MockComponent } from 'ng-mocks';
@@ -56,7 +55,8 @@ describe('SubmitWiedervorlageButtonComponent', () => {
       declarations: [
         SubmitWiedervorlageButtonComponent,
         MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
-        MockComponent(IconButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(SaveIconComponent),
       ],
       providers: [
         {
diff --git a/alfa-client/libs/wiedervorlage/src/lib/submit-wiedervorlage-button/submit-wiedervorlage-button.component.ts b/alfa-client/libs/wiedervorlage/src/lib/submit-wiedervorlage-button/submit-wiedervorlage-button.component.ts
index c52f566030b0a72817104bf6ec2e932b2461b3ae..788e3229c23f99a1fe11f4d0b2c257e0bde00350 100644
--- a/alfa-client/libs/wiedervorlage/src/lib/submit-wiedervorlage-button/submit-wiedervorlage-button.component.ts
+++ b/alfa-client/libs/wiedervorlage/src/lib/submit-wiedervorlage-button/submit-wiedervorlage-button.component.ts
@@ -21,12 +21,12 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
 import { CommandResource, isDone } from '@alfa-client/command-shared';
 import { NavigationService } from '@alfa-client/navigation-shared';
 import { StateResource } from '@alfa-client/tech-shared';
 import { WiedervorlageService } from '@alfa-client/wiedervorlage-shared';
+import { Component, Input } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
 import { filter, tap } from 'rxjs/operators';
 import { WiedervorlageFormService } from '../wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-form/wiedervorlage.formservice';
@@ -34,7 +34,6 @@ import { WiedervorlageFormService } from '../wiedervorlage-page-container/wieder
 @Component({
   selector: 'alfa-submit-wiedervorlage-button',
   templateUrl: './submit-wiedervorlage-button.component.html',
-  styleUrls: ['./submit-wiedervorlage-button.component.scss'],
 })
 export class SubmitWiedervorlageButtonComponent {
   @Input() showAsIconButton: boolean = false;
diff --git a/alfa-client/libs/wiedervorlage/src/lib/wiedereroeffnen-button-container/wiedereroeffnen-button-container.component.html b/alfa-client/libs/wiedervorlage/src/lib/wiedereroeffnen-button-container/wiedereroeffnen-button-container.component.html
index 06193fefe6ff8d95a7cf0963849af308238f29c6..12ccae7d16777c95b80eff8e1d266316f462e35f 100644
--- a/alfa-client/libs/wiedervorlage/src/lib/wiedereroeffnen-button-container/wiedereroeffnen-button-container.component.html
+++ b/alfa-client/libs/wiedervorlage/src/lib/wiedereroeffnen-button-container/wiedereroeffnen-button-container.component.html
@@ -23,12 +23,15 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ozgcloud-icon-button-with-spinner
-  *ngIf="wiedervorlage | hasLink: linkRel.WIEDEREROEFFNEN"
-  data-test-id="wiedereroeffnen-icon-button"
-  [stateResource]="wiedereroeffnenCommand$ | async"
-  icon="check_circle_outline"
-  toolTip="Als offen markieren"
-  (clickEmitter)="wiedereroeffnen()"
->
-</ozgcloud-icon-button-with-spinner>
+@if (wiedervorlage | hasLink: linkRel.WIEDEREROEFFNEN) {
+  <ods-button-with-spinner
+    data-test-id="wiedereroeffnen-icon-button"
+    [stateResource]="wiedereroeffnenCommand$ | async"
+    tooltip="Als offen markieren"
+    variant="ghost"
+    size="fit"
+    (clickEmitter)="wiedereroeffnen()"
+  >
+    <ods-check-circle-icon icon class="fill-text" />
+  </ods-button-with-spinner>
+}
diff --git a/alfa-client/libs/wiedervorlage/src/lib/wiedereroeffnen-button-container/wiedereroeffnen-button-container.component.scss b/alfa-client/libs/wiedervorlage/src/lib/wiedereroeffnen-button-container/wiedereroeffnen-button-container.component.scss
deleted file mode 100644
index 54c4f3eb8c92af93694c03cdf577fed23cf9f86b..0000000000000000000000000000000000000000
--- a/alfa-client/libs/wiedervorlage/src/lib/wiedereroeffnen-button-container/wiedereroeffnen-button-container.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
diff --git a/alfa-client/libs/wiedervorlage/src/lib/wiedereroeffnen-button-container/wiedereroeffnen-button-container.component.spec.ts b/alfa-client/libs/wiedervorlage/src/lib/wiedereroeffnen-button-container/wiedereroeffnen-button-container.component.spec.ts
index efe689d7337ab4246faad52ac2e37a2b120f03d8..af8e1281a01dfdefb228d6011700b5cecd64f35b 100644
--- a/alfa-client/libs/wiedervorlage/src/lib/wiedereroeffnen-button-container/wiedereroeffnen-button-container.component.spec.ts
+++ b/alfa-client/libs/wiedervorlage/src/lib/wiedereroeffnen-button-container/wiedereroeffnen-button-container.component.spec.ts
@@ -21,11 +21,12 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HasLinkPipe } from '@alfa-client/tech-shared';
 import { mock } from '@alfa-client/test-utils';
-import { IconButtonWithSpinnerComponent } from '@alfa-client/ui';
 import { WiedervorlageLinkRel, WiedervorlageService } from '@alfa-client/wiedervorlage-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { CheckCircleIconComponent } from '@ods/system';
 import { createWiedervorlageResource } from 'libs/wiedervorlage-shared/test/wiedervorlage';
 import { MockComponent } from 'ng-mocks';
 import { WiedereroeffnenButtonContainerComponent } from './wiedereroeffnen-button-container.component';
@@ -43,7 +44,8 @@ describe('WiedereroeffnenButtonContainerComponent', () => {
       declarations: [
         WiedereroeffnenButtonContainerComponent,
         HasLinkPipe,
-        MockComponent(IconButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(CheckCircleIconComponent),
       ],
       providers: [
         {
diff --git a/alfa-client/libs/wiedervorlage/src/lib/wiedereroeffnen-button-container/wiedereroeffnen-button-container.component.ts b/alfa-client/libs/wiedervorlage/src/lib/wiedereroeffnen-button-container/wiedereroeffnen-button-container.component.ts
index 0dd4c216a89a623bcf36493a243775c699fcd349..6c125a5636215c3120436e6d0cbabdf2e27aee41 100644
--- a/alfa-client/libs/wiedervorlage/src/lib/wiedereroeffnen-button-container/wiedereroeffnen-button-container.component.ts
+++ b/alfa-client/libs/wiedervorlage/src/lib/wiedereroeffnen-button-container/wiedereroeffnen-button-container.component.ts
@@ -21,20 +21,15 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input } from '@angular/core';
 import { CommandResource } from '@alfa-client/command-shared';
 import { StateResource } from '@alfa-client/tech-shared';
-import {
-  WiedervorlageLinkRel,
-  WiedervorlageResource,
-  WiedervorlageService,
-} from '@alfa-client/wiedervorlage-shared';
+import { WiedervorlageLinkRel, WiedervorlageResource, WiedervorlageService } from '@alfa-client/wiedervorlage-shared';
+import { Component, Input } from '@angular/core';
 import { Observable } from 'rxjs';
 
 @Component({
   selector: 'alfa-wiedereroeffnen-button-container',
   templateUrl: './wiedereroeffnen-button-container.component.html',
-  styleUrls: ['./wiedereroeffnen-button-container.component.scss'],
 })
 export class WiedereroeffnenButtonContainerComponent {
   @Input() wiedervorlage: WiedervorlageResource;
diff --git a/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-list-in-vorgang-container/wiedervorlage-list-in-vorgang/wiedervorlage-create-button/wiedervorlage-create-button.component.html b/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-list-in-vorgang-container/wiedervorlage-list-in-vorgang/wiedervorlage-create-button/wiedervorlage-create-button.component.html
index 0b30324ca0f9f0036d001b9b9fa6ac5cee062172..c37de121c882aeb26bbdb25b36ae69bc0ed11c37 100644
--- a/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-list-in-vorgang-container/wiedervorlage-list-in-vorgang/wiedervorlage-create-button/wiedervorlage-create-button.component.html
+++ b/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-list-in-vorgang-container/wiedervorlage-list-in-vorgang/wiedervorlage-create-button/wiedervorlage-create-button.component.html
@@ -23,28 +23,24 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ng-container *ngIf="wiedervorlageListStateResource?.resource as wiedervorlageListResource">
-  <div
-    class="create-button"
-    *ngIf="wiedervorlageListResource | hasLink: wiedervorlageListLinkRel.CREATE_WIEDERVORLAGE"
-  >
-    <a [routerLink]="'wiedervorlage/' + wiedervorlageRoute.NEW" tabindex="-1">
-      <ozgcloud-stroked-button-with-spinner
-        *ngIf="!showAsIconButton"
-        data-test-id="create-wiedervorlage"
-        class="create-button"
-        text="Wiedervorlage"
-        icon="add"
-      >
-      </ozgcloud-stroked-button-with-spinner>
 
-      <ozgcloud-icon-button-with-spinner
-        *ngIf="showAsIconButton"
-        data-test-id="create-wiedervorlage-icon-button"
-        icon="update"
-        toolTip="Wiedervorlage erstellen"
-      >
-      </ozgcloud-icon-button-with-spinner>
+@if (wiedervorlageListStateResource?.resource; as wiedervorlageListResource) {
+  @if (wiedervorlageListResource | hasLink: wiedervorlageListLinkRel.CREATE_WIEDERVORLAGE) {
+    <a [routerLink]="'wiedervorlage/' + wiedervorlageRoute.NEW" tabindex="-1">
+      @if (showAsIconButton) {
+        <ods-button-with-spinner
+          data-test-id="create-wiedervorlage-icon-button"
+          variant="ghost"
+          size="fit"
+          tooltip="Wiedervorlage erstellen"
+        >
+          <ods-update-icon icon class="fill-text" />
+        </ods-button-with-spinner>
+      } @else {
+        <ods-button-with-spinner data-test-id="create-wiedervorlage" text="Wiedervorlage" variant="outline">
+          <ods-plus-icon icon />
+        </ods-button-with-spinner>
+      }
     </a>
-  </div>
-</ng-container>
+  }
+}
diff --git a/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-list-in-vorgang-container/wiedervorlage-list-in-vorgang/wiedervorlage-create-button/wiedervorlage-create-button.component.spec.ts b/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-list-in-vorgang-container/wiedervorlage-list-in-vorgang/wiedervorlage-create-button/wiedervorlage-create-button.component.spec.ts
index da0fc0842a61f704ba7569edf304fa5857313c0e..5060ed010141168e658dd40bbfde3dd6092bdbda 100644
--- a/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-list-in-vorgang-container/wiedervorlage-list-in-vorgang/wiedervorlage-create-button/wiedervorlage-create-button.component.spec.ts
+++ b/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-list-in-vorgang-container/wiedervorlage-list-in-vorgang/wiedervorlage-create-button/wiedervorlage-create-button.component.spec.ts
@@ -21,14 +21,12 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
 import { HasLinkPipe, createStateResource } from '@alfa-client/tech-shared';
-import {
-  IconButtonWithSpinnerComponent,
-  OzgcloudStrokedButtonWithSpinnerComponent,
-} from '@alfa-client/ui';
 import { WiedervorlageListLinkRel } from '@alfa-client/wiedervorlage-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { PlusIconComponent, UpdateIconComponent } from '@ods/system';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { createWiedervorlageListResource } from 'libs/wiedervorlage-shared/test/wiedervorlage';
 import { MockComponent } from 'ng-mocks';
@@ -45,8 +43,9 @@ describe('WiedervorlageCreateButtonComponent', () => {
       declarations: [
         WiedervorlageCreateButtonComponent,
         HasLinkPipe,
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
-        MockComponent(IconButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(PlusIconComponent),
+        MockComponent(UpdateIconComponent),
       ],
       imports: [RouterTestingModule],
     }).compileComponents();
@@ -55,9 +54,7 @@ describe('WiedervorlageCreateButtonComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(WiedervorlageCreateButtonComponent);
     component = fixture.componentInstance;
-    component.wiedervorlageListStateResource = createStateResource(
-      createWiedervorlageListResource(),
-    );
+    component.wiedervorlageListStateResource = createStateResource(createWiedervorlageListResource());
     fixture.detectChanges();
   });
 
@@ -78,9 +75,7 @@ describe('WiedervorlageCreateButtonComponent', () => {
     });
 
     it('should be hidden', () => {
-      component.wiedervorlageListStateResource = createStateResource(
-        createWiedervorlageListResource(),
-      );
+      component.wiedervorlageListStateResource = createStateResource(createWiedervorlageListResource());
 
       fixture.detectChanges();
       const button = fixture.nativeElement.querySelector(wiedervorlageButton);
diff --git a/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-action-buttons/wiedervorlage-action-buttons.component.html b/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-action-buttons/wiedervorlage-action-buttons.component.html
index fff741c94ebb789f2ef6e87190136fb5bd4cb4d3..4c97aef84295ae40f48c2f2d9b95a72ca7968c7a 100644
--- a/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-action-buttons/wiedervorlage-action-buttons.component.html
+++ b/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-action-buttons/wiedervorlage-action-buttons.component.html
@@ -24,8 +24,6 @@
 
 -->
 <ozgcloud-back-button linkTo="../.." label="zurück zur Detailseite"></ozgcloud-back-button>
-<alfa-erledigen-button-container [wiedervorlage]="wiedervorlage"></alfa-erledigen-button-container>
-<alfa-wiedereroeffnen-button-container
-  [wiedervorlage]="wiedervorlage"
-></alfa-wiedereroeffnen-button-container>
-<alfa-submit-wiedervorlage-button [showAsIconButton]="true"></alfa-submit-wiedervorlage-button>
+<alfa-erledigen-button-container [wiedervorlage]="wiedervorlage" />
+<alfa-wiedereroeffnen-button-container [wiedervorlage]="wiedervorlage" />
+<alfa-submit-wiedervorlage-button [showAsIconButton]="true" />
diff --git a/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-action-buttons/wiedervorlage-action-buttons.component.ts b/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-action-buttons/wiedervorlage-action-buttons.component.ts
index 27a6875dc4d5ef2dc967052ef48a7ab0a531ba16..e00cfcdeadedb3758bbafeede904f5e3a08c82c5 100644
--- a/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-action-buttons/wiedervorlage-action-buttons.component.ts
+++ b/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-action-buttons/wiedervorlage-action-buttons.component.ts
@@ -21,13 +21,14 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input } from '@angular/core';
 import { WiedervorlageResource } from '@alfa-client/wiedervorlage-shared';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'alfa-wiedervorlage-action-buttons',
   templateUrl: './wiedervorlage-action-buttons.component.html',
   styleUrls: ['./wiedervorlage-action-buttons.component.scss'],
+  styles: [':host {@apply flex}'],
 })
 export class WiedervorlageActionButtonsComponent {
   @Input() wiedervorlage: WiedervorlageResource;
diff --git a/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage.module.ts b/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage.module.ts
index fec88f242f4f485bf156ef60e5fe897c210b0f59..7729ab5f2f68770e3b6e2e850fc9279f3a731406 100644
--- a/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage.module.ts
+++ b/alfa-client/libs/wiedervorlage/src/lib/wiedervorlage.module.ts
@@ -30,7 +30,14 @@ import { VorgangSharedUiModule } from '@alfa-client/vorgang-shared-ui';
 import { CommonModule, DatePipe } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { TooltipDirective } from '@ods/system';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import {
+  CheckCircleIconComponent,
+  PlusIconComponent,
+  SaveIconComponent,
+  TooltipDirective,
+  UpdateIconComponent,
+} from '@ods/system';
 import { CreateWiedervorlageButtonContainerComponent } from './create-wiedervorlage-button-container/create-wiedervorlage-button-container.component';
 import { ErledigenButtonContainerComponent } from './erledigen-button-container/erledigen-button-container.component';
 import { SubmitWiedervorlageButtonComponent } from './submit-wiedervorlage-button/submit-wiedervorlage-button.component';
@@ -70,7 +77,12 @@ const routes: Routes = [
     VorgangSharedUiModule,
     BinaryFileModule,
     UserProfileModule,
+    ButtonWithSpinnerComponent,
     TooltipDirective,
+    UpdateIconComponent,
+    PlusIconComponent,
+    CheckCircleIconComponent,
+    SaveIconComponent,
   ],
   declarations: [
     WiedervorlagePageComponent,
diff --git a/alfa-client/libs/zustaendige-stelle/src/lib/zustaendige-stelle.module.ts b/alfa-client/libs/zustaendige-stelle/src/lib/zustaendige-stelle.module.ts
index 098801b4da5d708dd7e7472e74d256a01a32773f..0ca329814a60a3bcc0ef1724dd6e82e3cd93b162 100644
--- a/alfa-client/libs/zustaendige-stelle/src/lib/zustaendige-stelle.module.ts
+++ b/alfa-client/libs/zustaendige-stelle/src/lib/zustaendige-stelle.module.ts
@@ -28,14 +28,14 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {
   ButtonComponent,
   CloseIconComponent,
+  EditIconComponent,
   ExternalUnitIconComponent,
   InstantSearchComponent,
   OfficeIconComponent,
+  PublicAdministrationIconComponent,
   SearchIconComponent,
 } from '@ods/system';
 import { ZustaendigeStelleSharedModule } from 'libs/zustaendige-stelle-shared/src/lib/zustaendige-stelle-shared.module';
-import { EditIconComponent } from '../../../design-system/src/lib/icons/edit-icon/edit-icon.component';
-import { PublicAdministrationIconComponent } from '../../../design-system/src/lib/icons/public-administration-icon/public-administration-icon.component';
 import { EditZustaendigeStelleButtonComponent } from './edit-zustaendige-stelle-button/edit-zustaendige-stelle-button.component';
 import { SearchExterneFachstelleContainerComponent } from './search-externe-fachstelle-container/search-externe-fachstelle-container.component';
 import { OrganisationsEinheitComponent } from './search-organisations-einheit-container/organisations-einheit/organisations-einheit.component';