From 56caefde5e2a63be198852dc637515ae3dc8456f Mon Sep 17 00:00:00 2001
From: Yanick Minder <79108296+kcinay055679@users.noreply.github.com>
Date: Wed, 6 Nov 2024 11:51:55 +0100
Subject: [PATCH] refactor styles of dialogs (#1072)

* add jar debug dev tools only on profile

* change log levels

* try to fix autorestart of spring

* rename intelij config and change log level of spring to debug in staging config

* rename folder

* use external profile to disable formatter

* remove backend/pom.xml from branch

* refactor styles of dialogs

* remove useless tabindex

* refactor styling of dialog-content and dialog-actions

* refactor dialog header

* clean up

* fix invite members test

* change default width of dialog

* set cypress viewport

* remove it.only from cy tests

* use diffrent classes for default and small dialogs

* remove useless config

* clean up styling

* remove scroll-shaddow

* change height sizing strategie

* refactor styling of keyresult edit component

* introduce dialog-template-core-component

* create base template for dialogs

* align close button

* comment in dialog component

* fix scrolling of dialog

* refactor kr-type-form

* finish styling of kr-type select

* fix scrolling by setting height of action buttons

* clean up dialog content size

* clean up styles.scss

* refactor styles

* refactor styles of generic component

* move core component to shared module

* fix design because of scrollbar

* change keyresult type tabs to butotns

* delete cancel dialog and refactor related files

* refactor confirm dialog component to use template dialog core

* refactor styling

* refactor style of okr-label

* refactor example dialog

* refactor objective form component to use template dialog core

* refactor objective form dialog

* refactor dialog width

* refactor keyresult component

* fix responsive dialog

* refactor objective complete dialog

* clean up

* refactor objective form component

* minder out

* fix objective form component

* use priority to fetch logos

* refactor dialog history compoennt

* add spinner to dialog core

* refactor dialog history component

* refactor check-in componentn

* refactor metric check in component

* clean up keyresult dialog

* clean up

* fix kr type component

* finish dialog refactoring

* remove header component

* refactor css classes

* refactor styling

* insert okr-form-label-input-container

* fix dialog service tests

* fix jest of objective form compoennt

* fix tests of keyresult form

* fix pom

* fix tests of add-edit team dialog

* fix tests keyresult-dialog tests

* fix tests of complete dialog

* fix jest tests

* readd cancel button for check-in create

* fix check-in e2e tests

* fix e2e tests

* remove only from cypress tests

* fix teammanagement e2e test

* fix duplicate scorring

* clean up check-in tests

* fix objective duplicate tests

* clean up

* clean up styles

* create a dialog-data-show class

* fix check in metric

* fix keyresult type

* clean up

* implement todo

---------

Co-authored-by: peggimann <peggimann@puzzle.com>
---
 .../resources/application-staging.properties  |   4 +-
 frontend/cypress/e2e/checkIn.cy.ts            |  18 +-
 frontend/cypress/e2e/duplicated-scoring.cy.ts |   5 +-
 frontend/cypress/e2e/keyresult.cy.ts          |   2 +-
 frontend/cypress/e2e/objective.cy.ts          |   2 +-
 frontend/cypress/e2e/tab.cy.ts                |   2 +-
 frontend/cypress/e2e/teammanagement.cy.ts     |  33 ++-
 frontend/cypress/support/commands.ts          |   1 +
 frontend/src/app/app.component.scss           |   9 -
 frontend/src/app/app.module.ts                |   2 +-
 .../src/app/callback/callback.component.html  |   1 -
 .../src/app/callback/callback.component.ts    |   8 -
 .../action-plan/action-plan.component.html    |  10 +-
 .../application-top-bar.component.html        |   2 +-
 .../check-in-history-dialog.component.html    |  86 +++---
 .../check-in-history-dialog.component.scss    |  87 +-----
 .../check-in-history-dialog.component.spec.ts |  14 +-
 .../check-in-form-metric.component.html       |  48 ++--
 .../check-in-form-metric.component.scss       |  51 ----
 .../check-in-form-ordinal.component.html      |   6 +-
 .../check-in-form-ordinal.component.scss      |   2 +-
 .../check-in-form.component.html              | 151 ++++++-----
 .../check-in-form.component.scss              |  15 --
 .../check-in-form.component.spec.ts           |  15 +-
 .../check-in-form/check-in-form.component.ts  |   8 +-
 .../confidence/confidence.component.html      |   9 +-
 .../confidence/confidence.component.scss      |   2 +-
 .../key-result-form.component.html            |  39 +--
 .../key-result-form.component.scss            |   4 -
 .../key-result-form.component.spec.ts         |  18 +-
 .../keyresult-detail.component.scss           |   2 +-
 .../keyresult-dialog.component.html           |  35 +--
 .../keyresult-dialog.component.scss           |  10 -
 .../keyresult-dialog.component.spec.ts        |  28 +-
 .../keyresult-dialog.component.ts             |   6 +-
 .../keyresult-type.component.html             | 250 +++++++++---------
 .../keyresult-type.component.scss             |  63 +----
 .../keyresult/keyresult.component.html        |   2 +-
 .../objective-filter.component.scss           |  12 -
 .../src/app/services/dialog.service.spec.ts   |  61 ++++-
 frontend/src/app/services/dialog.service.ts   |  17 +-
 .../dialog-header.component.html              |  15 --
 .../dialog-header.component.scss              |  15 --
 .../dialog-header.component.spec.ts           |  21 --
 .../dialog-header/dialog-header.component.ts  |  11 -
 .../dialog-template-core.component.cy.ts}     |   0
 .../dialog-template-core.component.html       |  35 +++
 .../dialog-template-core.component.scss       |  24 ++
 .../dialog-template-core.component.ts         |  22 ++
 .../okr-tangram/okr-tangram.component.html    |   2 +-
 .../cancel-dialog.component.html              |  18 --
 .../cancel-dialog.component.scss              |   0
 .../cancel-dialog/cancel-dialog.component.ts  |  23 --
 .../complete-dialog.component.html            |  74 +++---
 .../complete-dialog.component.scss            |   4 -
 .../complete-dialog.component.spec.ts         |  19 +-
 .../confirm-dialog.component.html             |  35 ++-
 .../confirm-dialog.component.spec.ts          |   6 +-
 .../example-dialog.component.html             |  79 +++---
 .../objective-form.component.html             | 115 ++++----
 .../objective-form.component.scss             |  42 ---
 .../objective-form.component.spec.ts          |  27 +-
 .../objective-form.component.ts               |  20 ++
 frontend/src/app/shared/shared.module.ts      |  10 +-
 .../add-edit-team-dialog.component.html       |  35 +--
 .../add-edit-team-dialog.component.scss       |   4 -
 .../add-edit-team-dialog.component.spec.ts    |  16 +-
 .../add-edit-team-dialog.component.ts         |   4 +
 .../add-member-to-team-dialog.component.html  |  79 +++---
 .../invite-user-dialog.component.html         |  61 ++---
 .../member-detail.component.spec.ts           |  25 +-
 .../member-detail/member-detail.component.ts  |  11 +-
 .../member-list-table.component.spec.ts       |   5 +-
 .../member-list-table.component.ts            |  14 +-
 .../member-list/member-list.component.spec.ts |  15 +-
 .../member-list/member-list.component.ts      |  12 +-
 frontend/src/assets/i18n/de.json              |   8 +-
 frontend/src/style/_variables.scss            |   9 +-
 .../src/style/custom_angular.components.scss  |  14 +-
 frontend/src/style/custom_bootstrap.scss      |   3 +-
 frontend/src/style/styles.scss                | 132 ++++-----
 81 files changed, 1015 insertions(+), 1189 deletions(-)
 delete mode 100644 frontend/src/app/callback/callback.component.html
 delete mode 100644 frontend/src/app/callback/callback.component.ts
 delete mode 100644 frontend/src/app/objective-filter/objective-filter.component.scss
 delete mode 100644 frontend/src/app/shared/custom/dialog-header/dialog-header.component.html
 delete mode 100644 frontend/src/app/shared/custom/dialog-header/dialog-header.component.scss
 delete mode 100644 frontend/src/app/shared/custom/dialog-header/dialog-header.component.spec.ts
 delete mode 100644 frontend/src/app/shared/custom/dialog-header/dialog-header.component.ts
 rename frontend/src/app/{callback/callback.component.css => shared/custom/dialog-template-core/dialog-template-core.component.cy.ts} (100%)
 create mode 100644 frontend/src/app/shared/custom/dialog-template-core/dialog-template-core.component.html
 create mode 100644 frontend/src/app/shared/custom/dialog-template-core/dialog-template-core.component.scss
 create mode 100644 frontend/src/app/shared/custom/dialog-template-core/dialog-template-core.component.ts
 delete mode 100644 frontend/src/app/shared/dialog/cancel-dialog/cancel-dialog.component.html
 delete mode 100644 frontend/src/app/shared/dialog/cancel-dialog/cancel-dialog.component.scss
 delete mode 100644 frontend/src/app/shared/dialog/cancel-dialog/cancel-dialog.component.ts

diff --git a/backend/src/main/resources/application-staging.properties b/backend/src/main/resources/application-staging.properties
index effd67d65a..38e4a47571 100644
--- a/backend/src/main/resources/application-staging.properties
+++ b/backend/src/main/resources/application-staging.properties
@@ -1,5 +1,7 @@
 # logging level for staging
-logging.level.org.springframework=debug
+logging.level.ch.puzzle.okr=DEBUG
+#logging.level.org.flywaydb.core=DEBUG
+
 
 connect.src=http://localhost:8544 http://localhost:8545
 
diff --git a/frontend/cypress/e2e/checkIn.cy.ts b/frontend/cypress/e2e/checkIn.cy.ts
index 45728dedc0..70c2c17a38 100644
--- a/frontend/cypress/e2e/checkIn.cy.ts
+++ b/frontend/cypress/e2e/checkIn.cy.ts
@@ -163,12 +163,12 @@ describe('OKR Check-in e2e tests', () => {
       cy.contains(getCurrentDate());
       cy.contains('Wert: 30%');
       cy.contains('Wert: 50%');
-      cy.contains('Confidence: 5 / 10');
-      cy.contains('Confidence: 6 / 10');
-      cy.contains('Veränderungen: We bought a new house');
-      cy.contains('Veränderungen: This was a good idea');
-      cy.contains('Massnahmen: We have to buy more PCs');
-      cy.contains('Massnahmen: Will be difficult');
+      checkForAttribute('Confidence:', '5 / 10');
+      checkForAttribute('Confidence:', '6 / 10');
+      checkForAttribute('Veränderungen:', 'We bought a new house');
+      checkForAttribute('Veränderungen:', 'This was a good idea');
+      checkForAttribute('Massnahmen:', 'We have to buy more PCs');
+      checkForAttribute('Massnahmen:', 'Will be difficult');
       cy.contains('Schliessen');
     });
 
@@ -312,7 +312,7 @@ describe('OKR Check-in e2e tests', () => {
       cy.wait('@getKeyResultsAfterSave');
 
       cy.getByTestId('add-check-in').first().click();
-      cy.get('#old-value label + div').contains('10 %');
+      cy.contains('Letzter Wert').siblings('div').contains('10 %');
     });
   });
 });
@@ -359,3 +359,7 @@ function getCurrentDate() {
 
   return dd_str + '.' + mm_str + '.' + yyyy;
 }
+
+function checkForAttribute(title: string, value: string) {
+  cy.get('mat-dialog-container').contains(value).parent().should('contain', title);
+}
diff --git a/frontend/cypress/e2e/duplicated-scoring.cy.ts b/frontend/cypress/e2e/duplicated-scoring.cy.ts
index d1152ced59..6a87dbd243 100644
--- a/frontend/cypress/e2e/duplicated-scoring.cy.ts
+++ b/frontend/cypress/e2e/duplicated-scoring.cy.ts
@@ -9,7 +9,10 @@ describe('e2e test for scoring adjustment on objective duplicate', () => {
   });
 
   it('Create ordinal checkin and validate value of scoring component', () => {
+    cy.intercept('POST', '**/keyresults').as('createKeyresult');
     cy.createOrdinalKeyresult('stretch keyresult for testing', null);
+    cy.wait('@createKeyresult');
+    cy.contains('stretch keyresult for testing');
     cy.getByTestId('keyresult').get(':contains("stretch keyresult for testing")').last().click();
     cy.getByTestId('add-check-in').click();
     cy.getByTestId(`stretch-radio`).click();
@@ -26,7 +29,7 @@ describe('e2e test for scoring adjustment on objective duplicate', () => {
     cy.visit('/?quarter=3');
 
     let scoringBlock1 = cy
-      .getByTestId('objective')
+      .get('.objective:contains("A duplicated Objective for this tool")')
       .first()
       .getByTestId('key-result')
       .first()
diff --git a/frontend/cypress/e2e/keyresult.cy.ts b/frontend/cypress/e2e/keyresult.cy.ts
index f7f9ef7b67..aaa5d3b709 100644
--- a/frontend/cypress/e2e/keyresult.cy.ts
+++ b/frontend/cypress/e2e/keyresult.cy.ts
@@ -294,7 +294,7 @@ describe('OKR Overview', () => {
     cy.getByTestId('edit-keyResult').click();
 
     cy.getByTestId('delete-keyResult').click();
-    cy.getByTestId('confirmYes').click();
+    cy.getByTestId('confirm-yes').click();
 
     cy.contains('Puzzle ITC');
     cy.get('A keyresult to delete').should('not.exist');
diff --git a/frontend/cypress/e2e/objective.cy.ts b/frontend/cypress/e2e/objective.cy.ts
index 758d7687a3..83eb98496e 100644
--- a/frontend/cypress/e2e/objective.cy.ts
+++ b/frontend/cypress/e2e/objective.cy.ts
@@ -30,7 +30,7 @@ describe('OKR Objective e2e tests', () => {
           .click();
         cy.contains('Objective veröffentlichen');
         cy.contains('Soll dieses Objective veröffentlicht werden?');
-        cy.getByTestId('confirmYes').click();
+        cy.getByTestId('confirm-yes').click();
         cy.getByTestId('objective')
           .filter(':contains(A objective in state draft)')
           .last()
diff --git a/frontend/cypress/e2e/tab.cy.ts b/frontend/cypress/e2e/tab.cy.ts
index 4d1cdd714b..ee8143f4eb 100644
--- a/frontend/cypress/e2e/tab.cy.ts
+++ b/frontend/cypress/e2e/tab.cy.ts
@@ -416,7 +416,7 @@ describe('Tab workflow tests', () => {
         cy.tabForwardUntil('[data-testId="add-action-plan-line"]');
         cy.tabBackward();
         cy.realPress('Enter');
-        cy.tabForwardUntil('[data-testId="confirmYes"]');
+        cy.tabForwardUntil('[data-testId="confirm-yes"]');
         cy.realPress('Enter');
         cy.tabForward();
         cy.tabForwardUntil('[data-testId="submit"]');
diff --git a/frontend/cypress/e2e/teammanagement.cy.ts b/frontend/cypress/e2e/teammanagement.cy.ts
index d89d8b06e1..6edf0db28e 100644
--- a/frontend/cypress/e2e/teammanagement.cy.ts
+++ b/frontend/cypress/e2e/teammanagement.cy.ts
@@ -44,8 +44,8 @@ describe('Team management tests', () => {
       cy.getByTestId('remove-from-member-list').click();
 
       // dialog
-      cy.contains(`Jaya Norris wirklich aus Team ${teamName} entfernen?`);
-      cy.getByTestId('cancelDialog-confirm').click();
+      cy.contains(`Möchtest du Jaya Norris wirklich aus dem Team '${teamName}' entfernen?`);
+      cy.getByTestId('confirm-yes').click();
 
       cy.wait('@removeUser');
 
@@ -60,8 +60,8 @@ describe('Team management tests', () => {
       cy.getByTestId('remove-from-member-list').click();
 
       // cancel dialog
-      cy.contains(`Jaya Norris wirklich aus Team ${teamName} entfernen?`);
-      cy.getByTestId('cancelDialog-cancel').click();
+      cy.contains(`Möchtest du Jaya Norris wirklich aus dem Team '${teamName}' entfernen?`);
+      cy.getByTestId('confirm-no').click();
 
       cy.get('@removeUser.all').then((interceptions) => {
         expect(interceptions).to.have.length(0);
@@ -96,14 +96,18 @@ describe('Team management tests', () => {
       cy.getByTestId('teamDeleteButton').click();
 
       // cancel dialog => cancel
-      cy.contains(`${teamName} wirklich löschen?`);
-      cy.getByTestId('cancelDialog-cancel').click();
+      cy.contains(
+        `Möchtest du das Team '${teamName}' wirklich löschen? Zugehörige Objectives werden dadurch in allen Quartalen ebenfalls gelöscht!`,
+      );
+      cy.getByTestId('confirm-no').click();
 
       // try again and confirm dialog
       cy.getByTestId('teamMoreButton').click();
       cy.getByTestId('teamDeleteButton').click();
-      cy.contains(`${teamName} wirklich löschen?`);
-      cy.getByTestId('cancelDialog-confirm').click();
+      cy.contains(
+        `Möchtest du das Team '${teamName}' wirklich löschen? Zugehörige Objectives werden dadurch in allen Quartalen ebenfalls gelöscht!`,
+      );
+      cy.getByTestId('confirm-yes').click();
 
       cy.wait(['@saveTeam', '@getUsers']);
 
@@ -149,6 +153,10 @@ describe('Team management tests', () => {
         const firstNameStefan = uniqueSuffix('Stefan');
 
         cy.getByTestId('invite-member').click();
+        cy.wait(1000); // wait for dialog to open
+        cy.tabForward();
+        cy.contains('Members registrieren');
+
         fillOutNewUser(firstNameClaudia, 'Meier', mailUserClaudia);
         cy.tabForward();
         cy.tabForward();
@@ -305,7 +313,7 @@ describe('Team management tests', () => {
 
       // add findus peterson
       cy.getByTestId('search-member-to-add').click().type('Find', { delay: 1 });
-      cy.get(matOption).contains('Findus Peterson').click();
+      cy.contains(matOption, 'Findus Peterson').click();
 
       // add robin papierer
       cy.getByTestId('search-member-to-add').click();
@@ -336,6 +344,7 @@ describe('Team management tests', () => {
             return;
           }
           $row.find(`[data-testId='edit-role']`).click();
+          cy.wait(500); // wait for dialog to open
         })
         .then(() => {
           cy.getByTestId('select-team-role').click();
@@ -356,7 +365,7 @@ describe('Team management tests', () => {
     it('should remove BBT membership of findus', () => {
       navigateToUser('Findus Peterson');
       cy.getByTestId('delete-team-member').click();
-      cy.getByTestId('cancelDialog-confirm').click();
+      cy.getByTestId('confirm-yes').click();
       cy.get('app-member-detail').contains('/BBT').should('not.exist');
     });
 
@@ -365,12 +374,12 @@ describe('Team management tests', () => {
 
       navigateToUser(nameEsha);
       cy.getByTestId('delete-team-member').eq(0).click();
-      cy.getByTestId('cancelDialog-confirm').click();
+      cy.getByTestId('confirm-yes').click();
 
       cy.wait('@removeUser');
 
       cy.getByTestId('delete-team-member').eq(0).click();
-      cy.getByTestId('cancelDialog-confirm').click();
+      cy.getByTestId('confirm-yes').click();
       cy.get('app-member-detail').should('not.contain', '/BBT').and('not.contain', 'LoremIpsum');
     });
 
diff --git a/frontend/cypress/support/commands.ts b/frontend/cypress/support/commands.ts
index 1fa1df2314..30e6b962c6 100644
--- a/frontend/cypress/support/commands.ts
+++ b/frontend/cypress/support/commands.ts
@@ -1,6 +1,7 @@
 import { validateScoring } from './scoringSupport';
 
 Cypress.Commands.add('loginAsUser', (user: any) => {
+  cy.viewport(1920, 1080);
   loginWithCredentials(user.username, user.password);
   overviewIsLoaded();
 });
diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
index 97a874648e..8ba091ef8b 100644
--- a/frontend/src/app/app.component.scss
+++ b/frontend/src/app/app.component.scss
@@ -1,12 +1,3 @@
-.okr-label {
-  margin-left: 35px;
-}
-
-.overview-item {
-  margin-right: 20px;
-  margin-left: 50px;
-}
-
 app-application-top-bar {
   z-index: 1001;
   position: relative;
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 58fa564e59..6e3150d3c1 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -166,9 +166,9 @@ export const MY_FORMATS = {
     MatChipsModule,
     CdkDropList,
     CdkDrag,
-    SharedModule,
     A11yModule,
     CdkDragHandle,
+    SharedModule,
   ],
   providers: [
     {
diff --git a/frontend/src/app/callback/callback.component.html b/frontend/src/app/callback/callback.component.html
deleted file mode 100644
index 9a5f2cf345..0000000000
--- a/frontend/src/app/callback/callback.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>You are getting forwarded!</p>
diff --git a/frontend/src/app/callback/callback.component.ts b/frontend/src/app/callback/callback.component.ts
deleted file mode 100644
index ac042fdc53..0000000000
--- a/frontend/src/app/callback/callback.component.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-callback',
-  templateUrl: './callback.component.html',
-  styleUrl: './callback.component.css',
-})
-export class CallbackComponent {}
diff --git a/frontend/src/app/components/action-plan/action-plan.component.html b/frontend/src/app/components/action-plan/action-plan.component.html
index b056643283..4d7b642f9e 100644
--- a/frontend/src/app/components/action-plan/action-plan.component.html
+++ b/frontend/src/app/components/action-plan/action-plan.component.html
@@ -1,11 +1,11 @@
-<div class="d-flex flex-column gap-2 col-12">
-  <label for="actionlist" class="text-black">Action Plan (optional)</label>
+<div class="okr-form-row okr-form-label-input-container">
+  <label for="actionlist" class="okr-form-label">Action Plan (optional)</label>
   <div
     cdkDropList
     *ngIf="control?.getValue()"
     [cdkDropListData]="control | async"
     (keydown.enter)="preventAddingNewItems($event)"
-    class="d-flex flex-column gap-2"
+    class="okr-form-col d-flex flex-column gap-2"
     (cdkDropListDropped)="drop($event)"
     id="actionlist"
   >
@@ -42,11 +42,11 @@
     </div>
   </div>
 
-  <section class="add-action-button">
+  <section class="okr-form-row mx-0">
     <button
       mat-button
       color="primary"
-      class="fw-bold"
+      class="fw-bold col-auto"
       [attr.data-testId]="'add-action-plan-line'"
       (click)="addNewAction()"
     >
diff --git a/frontend/src/app/components/application-top-bar/application-top-bar.component.html b/frontend/src/app/components/application-top-bar/application-top-bar.component.html
index 0577a3193a..a22bd57d7b 100644
--- a/frontend/src/app/components/application-top-bar/application-top-bar.component.html
+++ b/frontend/src/app/components/application-top-bar/application-top-bar.component.html
@@ -1,7 +1,7 @@
 <div id="topBarHeight">
   <div id="okrTopbar">
     <span class="d-flex h-100 align-items-center ps-4">
-      <img alt="okr-logo" height="32" ngSrc="{{ this.logoSrc$ | async }}" width="140" />
+      <img alt="okr-logo" height="32" ngSrc="{{ this.logoSrc$ | async }}" width="140" priority />
     </span>
     <div class="d-flex align-items-center me-md-5 me-1">
       <button
diff --git a/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.html b/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.html
index 45f8a39c78..56a6727b9b 100644
--- a/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.html
+++ b/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.html
@@ -1,57 +1,55 @@
-<div class="ps-4 pt-3 pe-4">
-  <app-dialog-header [dialogTitle]="'Check-in History'"></app-dialog-header>
-  <div
-    class="d-flex justify-content-start flex-column gap-4 text-black dialog-content overflow-y-scroll text-break mt-3"
-    tabindex="-1"
-  >
-    <ng-container
-      *ngIf="(checkInHistory$ | async)?.length! > 0 && (checkInHistory$ | async) as checkInHistory; else spinner"
-    >
-      <div
-        *ngFor="let checkIn of checkInHistory; index as i"
-        class="d-flex flex-column dialog-form-fields p-2 check-in-box"
-      >
-        <div class="d-flex flex-row">
-          <span class="w-50 d-flex align-items-center me-1 fw-bold mt-2 mb-2">{{
-            checkIn.createdOn | date: DATE_FORMAT
-          }}</span>
-          <div class="w-50 d-flex justify-content-end align-items-center">
+<app-dialog-template-core [observable]="checkInHistory$" [title]="'Check-in History'">
+  <ng-container content>
+    <ng-container *ngIf="(checkInHistory$ | async)?.length! > 0 && (checkInHistory$ | async) as checkInHistory">
+      <div *ngFor="let checkIn of checkInHistory; index as i" class="bg-display-element p-1 okr-form-row">
+        <div class="col okr-form-label">
+          <div class="okr-form-row justify-content-between">
+            <span class="fw-bold col-auto">
+              {{ checkIn.createdOn | date: DATE_FORMAT }}
+            </span>
+
             <button
-              class="d-flex align-items-center justify-content-center edit-check-in-button"
+              class="col-auto"
               mat-icon-button
               (click)="openCheckInDialogForm(checkIn)"
               *ngIf="!isComplete && checkIn.writeable"
               [attr.data-testId]="'edit-check-in'"
             >
-              <img class="edit-check-in cursor-pointer m-1" src="../../assets/icons/edit.svg" alt="edit check-in" />
+              <img ngSrc="assets/icons/edit.svg" alt="edit check-in" width="24" height="24" />
             </button>
           </div>
-        </div>
-        <div class="d-flex flex-row mb-1">
-          <div class="w-50 d-flex justify-content-start">
-            <span *ngIf="keyResult.keyResultType === 'metric'"
-              ><i>Wert: </i>{{ getMetricKeyResult().unit | unitLabelTransformation }}
-              {{ +checkIn.value! | unitValueTransformation: getMetricKeyResult().unit }}</span
-            >
-            <span *ngIf="keyResult.keyResultType === 'ordinal'"><i>Wert: </i>{{ checkIn.value }}</span>
+          <div class="okr-form-row row-cols-4">
+            <h4 class="col-auto">Wert:</h4>
+            <div class="col">
+              <ng-container *ngIf="keyResult.keyResultType === 'metric'">
+                {{ getMetricKeyResult().unit | unitLabelTransformation }}
+                {{ +checkIn.value! | unitValueTransformation: getMetricKeyResult().unit }}
+              </ng-container>
+              <ng-container *ngIf="keyResult.keyResultType === 'ordinal'">
+                {{ checkIn.value }}
+              </ng-container>
+            </div>
+            <h4 class="col-auto">Confidence:</h4>
+            <div class="col">{{ checkIn.confidence }} / 10</div>
           </div>
-          <div class="w-50 d-flex justify-content-start">
-            <span><i>Confidence: </i>{{ checkIn.confidence }} / 10</span>
+
+          <div class="okr-form-row justify-content-between" *ngIf="checkIn.changeInfo !== ''">
+            <h4 class="col-3">Veränderungen:</h4>
+            <span class="col linebreak">{{ checkIn.changeInfo }}</span>
+          </div>
+
+          <div class="okr-form-row justify-content-between row-cols-2" *ngIf="checkIn.initiatives !== ''">
+            <h4 class="col-3">Massnahmen:</h4>
+            <span class="col flex-fill linebreak">{{ checkIn.initiatives }}</span>
           </div>
-        </div>
-        <div class="d-flex flex-row w-100 text-wrap mb-1" *ngIf="checkIn.changeInfo !== ''">
-          <span class="label-width"><i>Veränderungen: </i></span>
-          <span class="value-width linebreak">{{ checkIn.changeInfo }}</span>
-        </div>
-        <div class="d-flex flex-row w-100 text-wrap" *ngIf="checkIn.initiatives !== ''">
-          <span class="label-width"><i>Massnahmen: </i></span>
-          <span class="value-width linebreak">{{ checkIn.initiatives }}</span>
         </div>
       </div>
     </ng-container>
-  </div>
-  <button class="close-button" mat-flat-button color="primary" mat-dialog-close>Schliessen</button>
-  <ng-template #spinner>
-    <app-spinner text="Check-in history wird geladen..."></app-spinner>
-  </ng-template>
-</div>
+  </ng-container>
+
+  <ng-container actions>
+    <div class="col-auto">
+      <button mat-flat-button color="primary" mat-dialog-close>Schliessen</button>
+    </div>
+  </ng-container>
+</app-dialog-template-core>
diff --git a/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.scss b/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.scss
index 2d5a6334b6..c2c8998c4f 100644
--- a/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.scss
+++ b/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.scss
@@ -1,85 +1,4 @@
-@import "../style/variables";
-
-.cancel-button {
-  background-color: $pz-dark-blue;
-  border-radius: 8px;
-  width: min-content;
-}
-
-.edit-check-in {
-  width: 20px;
-  height: 20px;
-}
-
-.edit-check-in-button {
-  @extend .edit-check-in;
-  margin-right: 5px;
-}
-
-.check-in-box {
-  background-color: #f5f5f5;
-}
-
-.label-width {
-  width: 19%;
-}
-
-.value-width {
-  width: 81%;
-}
-
-.dialog-content {
-  max-height: 28.5vh;
-}
-
-.close-button {
-  margin-top: 32px;
-}
-
-@media only screen and (max-width: 690px) {
-  .label-width {
-    width: 60%;
-  }
-}
-
-@media only screen and (min-height: 600px) and (max-width: 450px) {
-  .dialog-content {
-    max-height: 500px;
-  }
-}
-
-@media only screen and (min-height: 700px) and (max-width: 450px) {
-  .dialog-content {
-    max-height: 590px;
-  }
-}
-
-@media only screen and (min-height: 800px) and (max-width: 450px) {
-  .dialog-content {
-    max-height: 625px;
-  }
-}
-
-@media only screen and (min-height: 850px) and (max-width: 450px) {
-  .dialog-content {
-    max-height: 685px;
-  }
-}
-
-@media only screen and (min-height: 875px) and (max-width: 450px) {
-  .dialog-content {
-    max-height: 715px;
-  }
-}
-
-@media only screen and (min-height: 900px) and (max-width: 450px) {
-  .dialog-content {
-    max-height: 750px;
-  }
-}
-
-@media only screen and (min-height: 1000px) and (max-width: 450px) {
-  .dialog-content {
-    max-height: 550px;
-  }
+//TODO: Just Temporarily so the application look decent
+h4 {
+  font-size: 1rem;
 }
diff --git a/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.spec.ts b/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.spec.ts
index cd4b5a7262..ee75865c64 100644
--- a/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.spec.ts
+++ b/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.spec.ts
@@ -2,15 +2,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CheckInHistoryDialogComponent } from './check-in-history-dialog.component';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { checkInMetric, checkInMetricWriteableFalse, keyResult } from '../../shared/testData';
 import { By } from '@angular/platform-browser';
 import { DialogService } from '../../services/dialog.service';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { DialogHeaderComponent } from '../../shared/custom/dialog-header/dialog-header.component';
 import { MatIconModule } from '@angular/material/icon';
 import { SpinnerComponent } from '../../shared/custom/spinner/spinner.component';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { DialogTemplateCoreComponent } from '../../shared/custom/dialog-template-core/dialog-template-core.component';
+import { MatDividerModule } from '@angular/material/divider';
 
 const checkInService = {
   getAllCheckInOfKeyResult: jest.fn(),
@@ -22,10 +25,13 @@ describe('CheckInHistoryDialogComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [CheckInHistoryDialogComponent, DialogHeaderComponent, SpinnerComponent],
+      declarations: [CheckInHistoryDialogComponent, DialogTemplateCoreComponent, SpinnerComponent],
 
-      imports: [HttpClientTestingModule, TranslateModule.forRoot(), MatIconModule, MatProgressSpinner],
+      imports: [TranslateModule.forRoot(), MatIconModule, MatProgressSpinner, MatDividerModule, MatDialogModule],
       providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideHttpClientTesting(),
         TranslateService,
         DialogService,
         { provide: MAT_DIALOG_DATA, useValue: { keyResult: keyResult } },
diff --git a/frontend/src/app/components/checkin/check-in-form-metric/check-in-form-metric.component.html b/frontend/src/app/components/checkin/check-in-form-metric/check-in-form-metric.component.html
index 45d9ce03ec..3c796f384f 100644
--- a/frontend/src/app/components/checkin/check-in-form-metric/check-in-form-metric.component.html
+++ b/frontend/src/app/components/checkin/check-in-form-metric/check-in-form-metric.component.html
@@ -1,28 +1,34 @@
-<div class="input-style gap-2 col-12">
-  <div class="d-flex flex-row flex-wrap gap-between">
-    <div class="d-flex flex-column gap-2" id="new-value">
-      <label class="text-black" for="value">Neuer Wert</label>
-      <div class="d-flex flex-row align-items-center">
-        <form [formGroup]="dialogForm">
-          <input
-            class="value-field"
-            [attr.data-testId]="'check-in-metric-value'"
-            [ngClass]="formInputCheck(dialogForm, 'value')"
-            formControlName="value"
-            id="value"
-          />
+<div class="okr-form-row row-cols-2">
+  <div class="col">
+    <div class="okr-form-row okr-form-label-input-container">
+      <label class="okr-form-label okr-form-col" for="value">Neuer Wert</label>
+      <div class="col">
+        <form [formGroup]="dialogForm" class="okr-form-row align-items-center">
+          <div class="col">
+            <input
+              class="dialog-form-field pe-0"
+              [attr.data-testId]="'check-in-metric-value'"
+              [ngClass]="formInputCheck(dialogForm, 'value')"
+              formControlName="value"
+              id="value"
+            />
+          </div>
+
+          <span class="okr-form-label col-auto h-fit ps-0">{{ generateUnitLabel() }}</span>
         </form>
-        <span class="text-black unit-label">{{ generateUnitLabel() }}</span>
       </div>
+      <mat-error *ngIf="hasFormFieldErrors(dialogForm, 'value')">
+        <span>{{ getErrorMessage("MUST_BE_NUMBER", "Neuer Wert") }}</span>
+      </mat-error>
     </div>
-    <div *ngIf="checkIn.value" class="d-flex flex-column gap-2" id="old-value">
-      <label class="text-black">Letzter Wert</label>
-      <div class="value-field disabled-field d-flex justify-content-start text-black">
-        {{ checkIn.value }} {{ generateUnitLabel() }}
+  </div>
+
+  <div class="col">
+    <div *ngIf="checkIn.value" class="okr-form-row okr-form-label-input-container">
+      <p class="okr-form-label okr-form-col">Letzter Wert</p>
+      <div class="okr-form-col text-black">
+        <div class="dialog-data-show dialog-form-field py-2">{{ checkIn.value }} {{ generateUnitLabel() }}</div>
       </div>
     </div>
   </div>
-  <mat-error *ngIf="hasFormFieldErrors(dialogForm, 'value')">
-    <span>{{ getErrorMessage("MUST_BE_NUMBER", "Neuer Wert") }}</span>
-  </mat-error>
 </div>
diff --git a/frontend/src/app/components/checkin/check-in-form-metric/check-in-form-metric.component.scss b/frontend/src/app/components/checkin/check-in-form-metric/check-in-form-metric.component.scss
index 46bd29b25b..e69de29bb2 100644
--- a/frontend/src/app/components/checkin/check-in-form-metric/check-in-form-metric.component.scss
+++ b/frontend/src/app/components/checkin/check-in-form-metric/check-in-form-metric.component.scss
@@ -1,51 +0,0 @@
-.custom-input {
-  margin-top: 3px;
-}
-
-mat-label {
-  color: black;
-}
-
-.value-field {
-  height: 2rem;
-  padding: 0.437rem 0.625rem 0.375rem 0.625rem !important;
-}
-
-.unit-label {
-  margin-left: 10px;
-}
-
-.disabled-field {
-  background-color: #f5f5f5;
-  width: 218px;
-}
-
-@media only screen and (min-width: 601px) {
-  .gap-between {
-    gap: 5rem;
-  }
-}
-
-@media only screen and (min-width: 575px) and (max-width: 600px) {
-  #new-value {
-    order: 0;
-  }
-  #old-value {
-    order: 1;
-  }
-  .gap-between {
-    gap: 3rem;
-  }
-}
-
-@media only screen and (max-width: 574px) {
-  #new-value {
-    order: 1;
-  }
-  #old-value {
-    order: 0;
-  }
-  .gap-between {
-    gap: 1rem;
-  }
-}
diff --git a/frontend/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html b/frontend/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html
index 511f0222b1..8a5af56f89 100644
--- a/frontend/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html
+++ b/frontend/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html
@@ -1,7 +1,7 @@
 <form [formGroup]="dialogForm">
-  <div class="input-style gap-2 col-12">
-    <label class="text-black">Erreichte Zone wählen:</label>
-    <mat-radio-group formControlName="value" class="d-flex flex-column gap-2">
+  <div class="okr-form-row okr-form-label-input-container">
+    <label class="okr-form-label okr-form-col" for="ordinal-radio-group">Erreichte Zone wählen:</label>
+    <mat-radio-group formControlName="value" class="d-flex flex-column gap-2" id="ordinal-radio-group">
       <mat-radio-button [attr.data-testId]="'fail-radio'" value="{{ Zone.FAIL }}" class="ordinal-zone">
         <div class="radio-text-container d-flex align-items-center p-3 text-black">
           <b>Fail:&nbsp;&nbsp; </b>Commit / Target / Stretch noch nicht erreicht
diff --git a/frontend/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.scss b/frontend/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.scss
index 55e3fe921d..62b280fbef 100644
--- a/frontend/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.scss
+++ b/frontend/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.scss
@@ -17,6 +17,6 @@ mat-label {
   color: black;
 }
 .radio-text-container {
-  background: $show-element;
+  background: $display-element;
   height: auto;
 }
diff --git a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html
index c821f83b3e..5a2ee63747 100644
--- a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html
+++ b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html
@@ -1,42 +1,45 @@
-<section mat-dialog-title>
-  <app-dialog-header *ngIf="!this.checkIn.id" [dialogTitle]="'Check-in erfassen'"></app-dialog-header>
-  <app-dialog-header *ngIf="this.checkIn.id" [dialogTitle]="'Check-in bearbeiten'"></app-dialog-header>
-</section>
-
-<mat-dialog-content>
-  <div
-    class="d-flex flex-column scroll-shadows overflow-x-hidden p-2 ps-0 justify-content-between align-items-center dialog-content"
-    tabindex="-1"
-  >
-    <form [formGroup]="dialogForm" class="d-flex flex-column flex-wrap container p-0">
-      <div class="d-flex mb-3 gap-2 col-12 flex-column">
-        <p class="fs-6 text-black">Key Result</p>
-        <p class="linebreak bg-display-element py-2 ps-2 fw-normal text-black">{{ keyResult.title }}</p>
+<app-dialog-template-core [title]="getDialogTitle()">
+  <ng-container content>
+    <form [formGroup]="dialogForm">
+      <div class="okr-form-row okr-form-label-input-container">
+        <h4 class="okr-form-label okr-form-col">Key Result</h4>
+        <span class="okr-form-col">
+          <p class="dialog-data-show">{{ keyResult.title }}</p>
+        </span>
       </div>
-      <div *ngIf="getActions()?.length != 0" class="input-style gap-1">
-        <label class="text-black mb-1">Action Plan:</label>
-        <span *ngFor="let action of getActions(); let i = index" class="d-flex flex-row">
-          <mat-checkbox #checkbox (change)="changeIsChecked($event, i)" [checked]="action.isChecked"></mat-checkbox>
-          <span
-            class="action-list-item w-100 break-word"
-            [ngStyle]="{ 'text-decoration': checkbox.checked ? 'line-through' : 'none' }"
-          >
-            {{ action.action }}
+
+      <div *ngIf="getActions().length > 0" class="okr-form-row okr-form-label-input-container">
+        <p class="okr-form-label okr-form-col">Action Plan:</p>
+        <div class="col">
+          <span *ngFor="let action of getActions(); let i = index" class="okr-form-row">
+            <mat-checkbox #checkbox (change)="changeIsChecked($event, i)" [checked]="action.isChecked" class="col-auto">
+            </mat-checkbox>
+            <div
+              class="col bg-display-element break-word okr-form-label d-flex align-items-center"
+              [ngClass]="{ 'text-decoration-line-through': checkbox.checked }"
+            >
+              {{ action.action }}
+            </div>
           </span>
-        </span>
+        </div>
       </div>
 
-      <div class="input-style gap-2 col-12">
-        <label class="text-black">Kommentar/ Veränderung seit letztem Check-in (optional):</label>
-        <textarea
-          [attr.data-testId]="'changeInfo'"
-          [ngClass]="formInputCheck(dialogForm, 'changeInfo')"
-          class="big-dialog-form-field"
-          formControlName="changeInfo"
-        ></textarea>
-        <mat-error *ngIf="hasFormFieldErrors(dialogForm, 'changeInfo')">
-          <span>{{ getErrorMessage("MAX_VALUE", "Kommentar / Veränderung", 4096) }}</span>
-        </mat-error>
+      <div class="okr-form-row okr-form-label-input-container">
+        <label class="okr-form-label okr-form-col" for="changeInfo"
+          >Kommentar/ Veränderung seit letztem Check-in (optional):</label
+        >
+        <div class="okr-form-input">
+          <textarea
+            [attr.data-testId]="'changeInfo'"
+            [ngClass]="formInputCheck(dialogForm, 'changeInfo')"
+            class="big-dialog-form-field"
+            id="changeInfo"
+            formControlName="changeInfo"
+          ></textarea>
+          <mat-error *ngIf="hasFormFieldErrors(dialogForm, 'changeInfo')">
+            <span>{{ getErrorMessage("MAX_VALUE", "Kommentar / Veränderung", 4096) }}</span>
+          </mat-error>
+        </div>
       </div>
 
       <app-check-in-form-metric
@@ -52,53 +55,49 @@
         [keyResult]="getKeyResultOrdinal()"
       ></app-check-in-form-ordinal>
 
-      <div class="input-style gap-2 col-12">
-        <label class="text-black">Massnahmen (optional):</label>
-        <textarea
-          [attr.data-testId]="'initiatives'"
-          [ngClass]="formInputCheck(dialogForm, 'initiatives')"
-          class="w-100 big-dialog-form-field"
-          formControlName="initiatives"
-        ></textarea>
-        <mat-error *ngIf="hasFormFieldErrors(dialogForm, 'initiatives')">
-          <span>{{ getErrorMessage("MAX_VALUE", "Massnahmen", 4096) }}</span>
-        </mat-error>
+      <div class="okr-form-row okr-form-label-input-container">
+        <label class="okr-form-label okr-form-col" for="initiatives">Massnahmen (optional):</label>
+        <div class="okr-form-input">
+          <textarea
+            [attr.data-testId]="'initiatives'"
+            [ngClass]="formInputCheck(dialogForm, 'initiatives')"
+            class="big-dialog-form-field"
+            formControlName="initiatives"
+            id="initiatives"
+          ></textarea>
+          <mat-error *ngIf="hasFormFieldErrors(dialogForm, 'initiatives')">
+            <span>{{ getErrorMessage("MAX_VALUE", "Massnahmen", 4096) }}</span>
+          </mat-error>
+        </div>
       </div>
 
-      <div class="d-flex flex-column justify-content-start gap-2 col-12">
-        <label class="text-black confidence-label"
-          >Confidence um Target Zone
+      <div class="okr-form-row okr-form-label-input-container">
+        <p class="okr-form-label okr-form-col confidence-label">
+          Confidence um Target Zone
           <span *ngIf="keyResult.keyResultType === 'metric' && getKeyResultMetric() as kr">
             ({{ calculateTarget(kr) | unitValueTransformation: kr.unit }})
           </span>
           zu erreichen:
-        </label>
-        <app-confidence [checkIn]="checkIn" [edit]="true" class="w-100"></app-confidence>
+        </p>
+        <app-confidence [checkIn]="checkIn" [edit]="true"></app-confidence>
       </div>
     </form>
-  </div>
-</mat-dialog-content>
+  </ng-container>
 
-<mat-dialog-actions class="mt-3">
-  <button
-    (click)="saveCheckIn()"
-    [attr.data-testId]="'submit-check-in'"
-    [disabled]="!this.dialogForm.valid"
-    color="primary"
-    mat-flat-button
-    type="submit"
-  >
-    <span *ngIf="checkIn.id">Speichern</span>
-    <span *ngIf="!checkIn.id">Check-in speichern</span>
-  </button>
-  <button
-    *ngIf="!continued"
-    [attr.data-testId]="'cancel-checkin'"
-    class="ms-2"
-    color="primary"
-    mat-button
-    mat-dialog-close
-  >
-    Abbrechen
-  </button>
-</mat-dialog-actions>
+  <ng-container actions>
+    <div class="col-auto">
+      <button
+        (click)="saveCheckIn()"
+        [attr.data-testId]="'submit-check-in'"
+        [disabled]="!this.dialogForm.valid"
+        color="primary"
+        mat-flat-button
+        type="submit"
+      >
+        <span *ngIf="checkIn.id">Speichern</span>
+        <span *ngIf="!checkIn.id">Check-in speichern</span>
+      </button>
+      <button [attr.data-testId]="'cancel'" color="primary" mat-button mat-dialog-close>Abbrechen</button>
+    </div>
+  </ng-container>
+</app-dialog-template-core>
diff --git a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.scss b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.scss
index 669c394785..010e8abc58 100644
--- a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.scss
+++ b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.scss
@@ -1,14 +1,3 @@
-@import "../style/variables";
-
-.action-list-item {
-  background-color: $show-element;
-  height: auto;
-  min-height: 40px;
-  padding: 10px;
-  margin: auto;
-  color: black;
-}
-
 .confidence-label {
   margin-bottom: -7px;
 }
@@ -16,7 +5,3 @@
 app-check-in-form-ordinal {
   padding-top: 0.1rem;
 }
-
-.dialog-content {
-  max-height: 45vh;
-}
diff --git a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.spec.ts b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.spec.ts
index 65f71b851e..55819aace2 100644
--- a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.spec.ts
+++ b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.spec.ts
@@ -11,7 +11,6 @@ import {
   keyResultMetric,
   keyResultOrdinal,
 } from '../../../shared/testData';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { MatIconModule } from '@angular/material/icon';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
@@ -23,11 +22,16 @@ import { ParseUnitValuePipe } from '../../../shared/pipes/parse-unit-value/parse
 import { CheckInService } from '../../../services/check-in.service';
 import { of } from 'rxjs';
 import { ActionService } from '../../../services/action.service';
+// @ts-ignore
 import * as de from '../../../../assets/i18n/de.json';
 import { TranslateTestingModule } from 'ngx-translate-testing';
-import { DialogHeaderComponent } from '../../../shared/custom/dialog-header/dialog-header.component';
 import { ConfidenceComponent } from '../../confidence/confidence.component';
 import { MatSliderModule } from '@angular/material/slider';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { DialogTemplateCoreComponent } from '../../../shared/custom/dialog-template-core/dialog-template-core.component';
+import { MatDividerModule } from '@angular/material/divider';
 
 const dialogMock = {
   close: jest.fn(),
@@ -48,7 +52,6 @@ describe('CheckInFormComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        HttpClientTestingModule,
         MatDialogModule,
         MatIconModule,
         MatFormFieldModule,
@@ -63,15 +66,19 @@ describe('CheckInFormComponent', () => {
         TranslateTestingModule.withTranslations({
           de: de,
         }),
+        MatDividerModule,
       ],
       providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideHttpClientTesting(),
         { provide: MAT_DIALOG_DATA, useValue: { keyResult: {} } },
         { provide: MatDialogRef, useValue: dialogMock },
         { provide: CheckInService, useValue: checkInServiceMock },
         { provide: ActionService, useValue: actionServiceMock },
         ParseUnitValuePipe,
       ],
-      declarations: [CheckInFormComponent, DialogHeaderComponent, ConfidenceComponent],
+      declarations: [CheckInFormComponent, DialogTemplateCoreComponent, ConfidenceComponent],
     });
     fixture = TestBed.createComponent(CheckInFormComponent);
     component = fixture.componentInstance;
diff --git a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.ts b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.ts
index baa3b8b1a0..a47c0b1da7 100644
--- a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.ts
+++ b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.ts
@@ -111,8 +111,8 @@ export class CheckInFormComponent implements OnInit {
     return this.keyResult as KeyResultOrdinal;
   }
 
-  getActions(): Action[] | null {
-    return this.dialogForm.controls['actionList'].value;
+  getActions(): Action[] {
+    return this.dialogForm.controls['actionList'].value || [];
   }
 
   changeIsChecked(event: any, index: number) {
@@ -120,4 +120,8 @@ export class CheckInFormComponent implements OnInit {
     actions[index] = { ...actions[index], isChecked: event.checked };
     this.dialogForm.patchValue({ actionList: actions });
   }
+
+  getDialogTitle(): string {
+    return this.checkIn.id ? 'Check-in bearbeiten' : 'Check-in erfassen';
+  }
 }
diff --git a/frontend/src/app/components/confidence/confidence.component.html b/frontend/src/app/components/confidence/confidence.component.html
index aa8b974de0..286d8e3cf4 100644
--- a/frontend/src/app/components/confidence/confidence.component.html
+++ b/frontend/src/app/components/confidence/confidence.component.html
@@ -1,13 +1,14 @@
 <div
-  class="d-flex align-items-center justify-content-start bg-inherit w-100"
-  id="confidence"
+  class="okr-form-row bg-inherit flex-nowrap align-items-center mx-0"
   *ngIf="checkIn.confidence || checkIn.confidence === 0"
 >
   <div
-    class="bg-inherit d-flex justify-content-center align-items-center"
+    class="bg-inherit d-flex justify-content-center align-items-center w-auto"
     [ngClass]="[edit ? 'keyResult-attribute-edit' : 'keyResult-attribute-show', isDetail ? 'height' : '']"
   >
-    <p class="fw-normal text-black sub-title-keyresult" data-testid="confidence">{{ checkIn.confidence }}/{{ max }}</p>
+    <p class="fw-normal text-black sub-title-keyresult p-0" data-testid="confidence">
+      {{ checkIn.confidence }}/{{ max }}
+    </p>
   </div>
 
   <mat-slider
diff --git a/frontend/src/app/components/confidence/confidence.component.scss b/frontend/src/app/components/confidence/confidence.component.scss
index e16f415ca5..dae966717a 100644
--- a/frontend/src/app/components/confidence/confidence.component.scss
+++ b/frontend/src/app/components/confidence/confidence.component.scss
@@ -37,5 +37,5 @@ mat-slider {
 }
 
 .height {
-  height: 21px;
+  height: fit-content;
 }
diff --git a/frontend/src/app/components/key-result-form/key-result-form.component.html b/frontend/src/app/components/key-result-form/key-result-form.component.html
index 9816b6710d..1697565fe0 100644
--- a/frontend/src/app/components/key-result-form/key-result-form.component.html
+++ b/frontend/src/app/components/key-result-form/key-result-form.component.html
@@ -1,7 +1,7 @@
-<div class="d-flex justify-content-between align-items-center p-2 ps-0">
-  <form [formGroup]="keyResultForm" class="d-flex flex-column flex-wrap container p-0">
-    <div class="input-style gap-2 col-12">
-      <label class="text-black" for="title">Titel</label>
+<form [formGroup]="keyResultForm">
+  <div class="okr-form-row okr-form-label-input-container">
+    <label class="okr-form-label okr-form-col" for="title">Titel</label>
+    <div class="okr-form-input">
       <textarea
         [attr.data-testId]="'titleInput'"
         class="big-dialog-form-field"
@@ -13,17 +13,17 @@
         <span>{{ getErrorMessage("SIZE_BETWEEN", "Titel", 2, 250) }}</span>
       </mat-error>
     </div>
+  </div>
 
-    <div class="mb-3">
-      <app-keyresult-type
-        (formValidityEmitter)="updateFormValidity()"
-        [keyresult]="keyResult"
-        [keyResultForm]="keyResultForm"
-      ></app-keyresult-type>
-    </div>
+  <app-keyresult-type
+    (formValidityEmitter)="updateFormValidity()"
+    [keyresult]="keyResult"
+    [keyResultForm]="keyResultForm"
+  ></app-keyresult-type>
 
-    <div class="input-style gap-2 col-12">
-      <label class="text-black" for="owner">Owner</label>
+  <div class="okr-form-row okr-form-label-input-container">
+    <label class="okr-form-label okr-form-col" for="owner">Owner</label>
+    <div class="okr-form-input">
       <input
         (keydown.enter)="$event.preventDefault()"
         [ngClass]="invalidOwner() ? 'dialog-form-field-error' : 'dialog-form-field'"
@@ -42,9 +42,11 @@
         <span>{{ getErrorMessage("MUST_SELECT", "Owner", null, null) }}</span>
       </mat-error>
     </div>
+  </div>
 
-    <div class="input-style gap-2 col-12">
-      <label for="description" class="text-black">Beschreibung (optional)</label>
+  <div class="okr-form-row okr-form-label-input-container">
+    <label class="okr-form-label okr-form-col" for="description">Beschreibung (optional)</label>
+    <div class="okr-form-input">
       <textarea
         [attr.data-testId]="'descriptionInput'"
         class="big-dialog-form-field"
@@ -56,6 +58,7 @@
         <span>{{ getErrorMessage("MAX_VALUE", "Beschreibung", 4096, null) }}</span>
       </mat-error>
     </div>
-    <app-action-plan [control]="actionList$" [keyResultId]="getKeyResultId()"></app-action-plan>
-  </form>
-</div>
+  </div>
+
+  <app-action-plan [control]="actionList$" [keyResultId]="getKeyResultId()"></app-action-plan>
+</form>
diff --git a/frontend/src/app/components/key-result-form/key-result-form.component.scss b/frontend/src/app/components/key-result-form/key-result-form.component.scss
index ffa4d4211f..e69de29bb2 100644
--- a/frontend/src/app/components/key-result-form/key-result-form.component.scss
+++ b/frontend/src/app/components/key-result-form/key-result-form.component.scss
@@ -1,4 +0,0 @@
-.owner-input {
-  height: 2rem;
-  padding: 0.437rem 0.625rem 0.375rem 0.625rem !important;
-}
diff --git a/frontend/src/app/components/key-result-form/key-result-form.component.spec.ts b/frontend/src/app/components/key-result-form/key-result-form.component.spec.ts
index d0d2479b8a..3e29d0ee5a 100644
--- a/frontend/src/app/components/key-result-form/key-result-form.component.spec.ts
+++ b/frontend/src/app/components/key-result-form/key-result-form.component.spec.ts
@@ -4,7 +4,7 @@ import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { MatInputModule } from '@angular/material/input';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { MatIconModule } from '@angular/material/icon';
 import { keyResultOrdinal, testUser, users } from '../../shared/testData';
 import { State } from '../../shared/types/enums/State';
@@ -14,7 +14,6 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatRadioModule } from '@angular/material/radio';
 import { KeyResultObjective } from '../../shared/types/model/KeyResultObjective';
 import { User } from '../../shared/types/model/User';
-import { DialogHeaderComponent } from '../../shared/custom/dialog-header/dialog-header.component';
 import { OAuthService } from 'angular-oauth2-oidc';
 import { KeyresultTypeComponent } from '../keyresult-type/keyresult-type.component';
 import { ActionPlanComponent } from '../action-plan/action-plan.component';
@@ -26,7 +25,11 @@ import { Action } from '../../shared/types/model/Action';
 import { KeyResultMetric } from '../../shared/types/model/KeyResultMetric';
 import { KeyResultOrdinal } from '../../shared/types/model/KeyResultOrdinal';
 import { TranslateTestingModule } from 'ngx-translate-testing';
+// @ts-ignore
 import * as de from '../../../assets/i18n/de.json';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { DialogTemplateCoreComponent } from '../../shared/custom/dialog-template-core/dialog-template-core.component';
 import { Quarter } from '../../shared/types/model/Quarter';
 
 describe('KeyResultFormComponent', () => {
@@ -93,7 +96,6 @@ describe('KeyResultFormComponent', () => {
       mockUserService.getUsers.mockReturnValue(users);
       TestBed.configureTestingModule({
         imports: [
-          HttpClientTestingModule,
           MatDialogModule,
           NoopAnimationsModule,
           MatSelectModule,
@@ -120,8 +122,16 @@ describe('KeyResultFormComponent', () => {
             provide: OAuthService,
             useValue: oauthMockService,
           },
+          provideRouter([]),
+          provideHttpClient(),
+          provideHttpClientTesting(),
+        ],
+        declarations: [
+          KeyResultFormComponent,
+          DialogTemplateCoreComponent,
+          KeyresultTypeComponent,
+          ActionPlanComponent,
         ],
-        declarations: [KeyResultFormComponent, DialogHeaderComponent, KeyresultTypeComponent, ActionPlanComponent],
       }).compileComponents();
 
       fixture = TestBed.createComponent(KeyResultFormComponent);
diff --git a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.scss b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.scss
index 52a762ce8e..b0c3a256fd 100644
--- a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.scss
+++ b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.scss
@@ -5,7 +5,7 @@
 }
 
 .keyResult-detail-attribute-show {
-  background-color: $show-element;
+  background-color: $display-element;
   height: 100%;
   font-size: 0.85rem;
 }
diff --git a/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.html b/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.html
index 4395773e0c..3928683745 100644
--- a/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.html
+++ b/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.html
@@ -1,22 +1,9 @@
-<section mat-dialog-title>
-  <app-dialog-header
-    [dialogTitle]="data.keyResult ? 'Key Result bearbeiten' : 'Key Result erfassen'"
-  ></app-dialog-header>
-</section>
-
-<mat-dialog-content>
-  <div class="d-flex flex-column scroll-shadows" tabindex="-1">
-    <app-key-result-form
-      class="keyresult-form"
-      [keyResultForm]="keyResultForm"
-      [keyResult]="data.keyResult"
-    ></app-key-result-form>
-  </div>
-</mat-dialog-content>
-
-<mat-dialog-actions class="mt-3">
-  <div class="d-flex w-100 flex-row justify-content-between">
-    <div class="d-flex flex-row">
+<app-dialog-template-core [title]="getDialogTitle()">
+  <ng-container content>
+    <app-key-result-form [keyResultForm]="keyResultForm" [keyResult]="data.keyResult"></app-key-result-form>
+  </ng-container>
+  <ng-container actions>
+    <div class="col-auto">
       <button
         [attr.data-testId]="'submit'"
         type="submit"
@@ -32,17 +19,17 @@
         [attr.data-testId]="'saveAndNew'"
         (click)="openNew()"
         mat-stroked-button
-        [disabled]="keyResultForm.invalid"
+        [disabled]="keyResultForm.invalid || invalidOwner()"
         color="primary"
       >
         Speichern & Neu
       </button>
-      <button mat-button mat-dialog-close color="primary" class="ms-2" [attr.data-testId]="'cancel'">Abbrechen</button>
+      <button mat-button mat-dialog-close color="primary" [attr.data-testId]="'cancel'">Abbrechen</button>
     </div>
-    <div *ngIf="this.data.keyResult">
+    <div class="col-auto" *ngIf="this.data.keyResult">
       <button color="primary" mat-button (click)="deleteKeyResult()" [attr.data-testId]="'delete-keyResult'">
         Key Result löschen
       </button>
     </div>
-  </div>
-</mat-dialog-actions>
+  </ng-container>
+</app-dialog-template-core>
diff --git a/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.scss b/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.scss
index a207c89a45..e69de29bb2 100644
--- a/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.scss
+++ b/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.scss
@@ -1,10 +0,0 @@
-@media only screen and (max-width: 400px) {
-  .mat-mdc-dialog-actions .mat-button-base + .mat-button-base,
-  .mat-mdc-dialog-actions .mat-mdc-button-base + .mat-mdc-button-base {
-    margin-left: 0;
-  }
-}
-
-.keyresult-form {
-  max-height: 60vh;
-}
diff --git a/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.spec.ts b/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.spec.ts
index bf74d658ce..e13b93a55d 100644
--- a/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.spec.ts
+++ b/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.spec.ts
@@ -5,7 +5,6 @@ import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/materia
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { MatInputModule } from '@angular/material/input';
 import { ReactiveFormsModule } from '@angular/forms';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { MatIconModule } from '@angular/material/icon';
 import { By } from '@angular/platform-browser';
 import { testUser, users } from '../../shared/testData';
@@ -16,7 +15,6 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatSelectModule } from '@angular/material/select';
 import { MatRadioModule } from '@angular/material/radio';
 import { KeyResultObjective } from '../../shared/types/model/KeyResultObjective';
-import { DialogHeaderComponent } from '../../shared/custom/dialog-header/dialog-header.component';
 import { OAuthService } from 'angular-oauth2-oidc';
 import { KeyresultTypeComponent } from '../keyresult-type/keyresult-type.component';
 import { ActionPlanComponent } from '../action-plan/action-plan.component';
@@ -24,6 +22,11 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { UserService } from '../../services/user.service';
 import { KeyResultFormComponent } from '../key-result-form/key-result-form.component';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { MatDividerModule } from '@angular/material/divider';
+import { DialogTemplateCoreComponent } from '../../shared/custom/dialog-template-core/dialog-template-core.component';
 import { Quarter } from '../../shared/types/model/Quarter';
 
 describe('KeyresultDialogComponent', () => {
@@ -254,7 +257,6 @@ describe('KeyresultDialogComponent', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({
         imports: [
-          HttpClientTestingModule,
           MatDialogModule,
           NoopAnimationsModule,
           MatSelectModule,
@@ -265,8 +267,12 @@ describe('KeyresultDialogComponent', () => {
           MatIconModule,
           TranslateModule.forRoot(),
           DragDropModule,
+          MatDividerModule,
         ],
         providers: [
+          provideRouter([]),
+          provideHttpClient(),
+          provideHttpClientTesting(),
           KeyresultService,
           TranslateService,
           { provide: UserService, useValue: userService },
@@ -286,9 +292,9 @@ describe('KeyresultDialogComponent', () => {
         declarations: [
           KeyresultDialogComponent,
           KeyResultFormComponent,
-          DialogHeaderComponent,
           KeyresultTypeComponent,
           ActionPlanComponent,
+          DialogTemplateCoreComponent,
         ],
       }).compileComponents();
 
@@ -409,13 +415,16 @@ describe('KeyresultDialogComponent', () => {
           NoopAnimationsModule,
           MatInputModule,
           ReactiveFormsModule,
-          HttpClientTestingModule,
           MatIconModule,
           MatAutocompleteModule,
           DragDropModule,
           TranslateModule.forRoot(),
+          MatDividerModule,
         ],
         providers: [
+          provideRouter([]),
+          provideHttpClient(),
+          provideHttpClientTesting(),
           KeyresultService,
           {
             provide: MatDialogRef,
@@ -435,7 +444,7 @@ describe('KeyresultDialogComponent', () => {
         declarations: [
           KeyresultDialogComponent,
           KeyResultFormComponent,
-          DialogHeaderComponent,
+          DialogTemplateCoreComponent,
           ActionPlanComponent,
           KeyresultTypeComponent,
         ],
@@ -554,13 +563,16 @@ describe('KeyresultDialogComponent', () => {
           NoopAnimationsModule,
           MatInputModule,
           ReactiveFormsModule,
-          HttpClientTestingModule,
           MatIconModule,
           MatAutocompleteModule,
           DragDropModule,
           TranslateModule.forRoot(),
+          MatDividerModule,
         ],
         providers: [
+          provideRouter([]),
+          provideHttpClient(),
+          provideHttpClientTesting(),
           KeyresultService,
           {
             provide: MatDialogRef,
@@ -578,7 +590,7 @@ describe('KeyresultDialogComponent', () => {
         declarations: [
           KeyresultDialogComponent,
           KeyResultFormComponent,
-          DialogHeaderComponent,
+          DialogTemplateCoreComponent,
           ActionPlanComponent,
           KeyresultTypeComponent,
         ],
diff --git a/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.ts b/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.ts
index deaaa0ccd4..9526b25676 100644
--- a/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.ts
+++ b/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.ts
@@ -62,7 +62,7 @@ export class KeyresultDialogComponent {
 
   deleteKeyResult() {
     this.dialogService
-      .openConfirmDialog('CONFIRMATION.DELETE.KEY_RESULT')
+      .openConfirmDialog('CONFIRMATION.DELETE.KEYRESULT')
       .afterClosed()
       .subscribe((result) => {
         if (result) {
@@ -87,4 +87,8 @@ export class KeyresultDialogComponent {
       (typeof this.keyResultForm.value.owner === 'string' || !this.keyResultForm.value.owner)
     );
   }
+
+  getDialogTitle(): string {
+    return this.data.keyResult ? 'Key Result bearbeiten' : 'Key Result erfassen';
+  }
 }
diff --git a/frontend/src/app/components/keyresult-type/keyresult-type.component.html b/frontend/src/app/components/keyresult-type/keyresult-type.component.html
index d13367c42a..bdfad5d30e 100644
--- a/frontend/src/app/components/keyresult-type/keyresult-type.component.html
+++ b/frontend/src/app/components/keyresult-type/keyresult-type.component.html
@@ -1,137 +1,143 @@
-<div>
-  <div class="d-flex">
-    <div
-      [style.cursor]="typeChangeAllowed ? 'pointer' : 'default'"
-      [ngClass]="{ active: isMetric, 'non-active': !isMetric }"
-      [attr.data-testId]="'metricTab'"
-      class="metric tab-title tabfocus"
-      (click)="switchKeyResultType('metric')"
-      (keydown.enter)="switchKeyResultType('metric')"
-      tabindex="0"
-    >
-      Metrisch
-    </div>
-    <div
-      [style.cursor]="typeChangeAllowed ? 'pointer' : 'default'"
-      [ngClass]="{ active: !isMetric, 'non-active': isMetric }"
-      [attr.data-testId]="'ordinalTab'"
-      class="ordinal tab-title tabfocus"
-      (click)="switchKeyResultType('ordinal')"
-      (keydown.enter)="switchKeyResultType('ordinal')"
-      tabindex="0"
-    >
-      Ordinal
-    </div>
-    <div class="buffer tab-title flex-fill"></div>
-  </div>
+<div class="okr-form-row row-cols-auto mx-0 my-1">
+  <button
+    [style.cursor]="typeChangeAllowed ? 'pointer' : 'default'"
+    [ngClass]="{ active: isMetric, 'non-active': !isMetric }"
+    [attr.data-testId]="'metricTab'"
+    class="tab-title"
+    (click)="switchKeyResultType('metric')"
+    (keydown.enter)="switchKeyResultType('metric')"
+    tabindex="0"
+  >
+    Metrisch
+  </button>
+  <button
+    [style.cursor]="typeChangeAllowed ? 'pointer' : 'default'"
+    [ngClass]="{ active: !isMetric, 'non-active': isMetric }"
+    [attr.data-testId]="'ordinalTab'"
+    class="tab-title"
+    (click)="switchKeyResultType('ordinal')"
+    (keydown.enter)="switchKeyResultType('ordinal')"
+    tabindex="0"
+  >
+    Ordinal
+  </button>
+  <div class="buffer col flex-fill tab-title"></div>
 </div>
 
-<div *ngIf="isMetric; else ordinalBlock">
-  <form [formGroup]="keyResultForm" class="gap-1">
-    <div class="d-flex flex-column flex-wrap container p-0">
-      <div class="d-flex flex-row">
-        <div class="flex-fill">
-          <div class="input-alignments">
-            <div class="input-style gap-2">
-              <label class="text-black" for="unit">Einheit</label>
-              <select
-                class="unit-dropdown bg-white menu-option"
-                [ngClass]="formInputCheck(keyResultForm, 'unit')"
-                formControlName="unit"
-                id="unit"
-                [attr.data-testId]="'unit'"
-              >
-                <option *ngFor="let unit of Unit | keyvalue" value="{{ unit.value }}">
-                  {{ "UNIT." + unit.value | translate }}
-                </option>
-              </select>
-              <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'unit')">
-                <span>{{ getErrorMessage("MUST_SELECT", "Einheit", null, null) }}</span>
-              </mat-error>
-            </div>
+<ng-container *ngIf="isMetric; else ordinalBlock">
+  <form [formGroup]="keyResultForm" class="okr-form-row row-cols-1 row-cols-md-3">
+    <div class="col">
+      <div class="okr-form-row">
+        <label class="okr-form-label okr-form-col" for="unit">Einheit</label>
+        <div class="col">
+          <select
+            class="dialog-form-field unit-dropdown bg-white"
+            [ngClass]="formInputCheck(keyResultForm, 'unit')"
+            formControlName="unit"
+            id="unit"
+            [attr.data-testId]="'unit'"
+          >
+            <option *ngFor="let unit of Unit | keyvalue" value="{{ unit.value }}">
+              {{ "UNIT." + unit.value | translate }}
+            </option>
+          </select>
+          <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'unit')">
+            <span>{{ getErrorMessage("MUST_SELECT", "Einheit", null, null) }}</span>
+          </mat-error>
+        </div>
+      </div>
+    </div>
 
-            <div class="input-style gap-2">
-              <label class="text-black" for="baseline">Baseline</label>
-              <input
-                [attr.data-testId]="'baseline'"
-                class="metric-fields"
-                [ngClass]="formInputCheck(keyResultForm, 'baseline')"
-                formControlName="baseline"
-                id="baseline"
-              />
-              <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'baseline')">
-                <span>{{ getErrorMessage("MUST_BE_NUMBER", "Baseline", null, null) }}</span>
-              </mat-error>
-            </div>
+    <div class="col">
+      <div class="okr-form-row">
+        <label class="okr-form-label okr-form-col" for="baseline">Baseline</label>
+        <div class="col">
+          <input
+            [attr.data-testId]="'baseline'"
+            class="dialog-form-field"
+            [ngClass]="formInputCheck(keyResultForm, 'baseline')"
+            formControlName="baseline"
+            id="baseline"
+          />
+          <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'baseline')">
+            <span>{{ getErrorMessage("MUST_BE_NUMBER", "Baseline", null, null) }}</span>
+          </mat-error>
+        </div>
+      </div>
+    </div>
 
-            <div class="input-style gap-2">
-              <label class="text-black" for="stretchGoal">Stretch Goal</label>
-              <input
-                [attr.data-testId]="'stretchGoal'"
-                class="metric-fields"
-                [ngClass]="formInputCheck(keyResultForm, 'stretchGoal')"
-                formControlName="stretchGoal"
-                id="stretchGoal"
-              />
-              <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'stretchGoal')">
-                <span>{{ getErrorMessage("MUST_BE_NUMBER", "Stretch Goal", null, null) }}</span>
-              </mat-error>
-            </div>
-          </div>
+    <div class="col">
+      <div class="okr-form-row">
+        <label class="okr-form-label okr-form-col" for="stretchGoal">Stretch Goal</label>
+        <div class="col">
+          <input
+            [attr.data-testId]="'stretchGoal'"
+            class="dialog-form-field"
+            [ngClass]="formInputCheck(keyResultForm, 'stretchGoal')"
+            formControlName="stretchGoal"
+            id="stretchGoal"
+          />
+          <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'stretchGoal')">
+            <span>{{ getErrorMessage("MUST_BE_NUMBER", "Stretch Goal", null, null) }}</span>
+          </mat-error>
         </div>
       </div>
     </div>
   </form>
-</div>
+</ng-container>
 
 <ng-template #ordinalBlock>
-  <form [formGroup]="keyResultForm" class="gap-1">
-    <div class="d-flex flex-column flex-wrap container p-0">
-      <div class="d-flex flex-row">
-        <div class="flex-fill">
-          <div class="input-alignments">
-            <div class="input-style gap-2">
-              <label class="text-black" for="commitZone">Commit Zone</label>
-              <textarea
-                class="ordinal-input-fields"
-                [ngClass]="formInputCheck(keyResultForm, 'commitZone')"
-                formControlName="commitZone"
-                id="commitZone"
-                [attr.data-testId]="'commitZone'"
-              ></textarea>
-              <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'commitZone')">
-                <span>{{ getErrorMessage("SIZE_BETWEEN", "Commit Zone", 1, 400) }}</span>
-              </mat-error>
-            </div>
+  <form [formGroup]="keyResultForm" class="okr-form-row row-cols-1 row-cols-md-3">
+    <div class="col">
+      <div class="okr-form-row">
+        <label class="okr-form-label okr-form-col" for="commitZone">Commit Zone</label>
+        <div class="col">
+          <textarea
+            class="big-dialog-form-field"
+            [ngClass]="formInputCheck(keyResultForm, 'commitZone')"
+            formControlName="commitZone"
+            id="commitZone"
+            [attr.data-testId]="'commitZone'"
+          ></textarea>
+          <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'commitZone')">
+            <span>{{ getErrorMessage("SIZE_BETWEEN", "Commit Zone", 1, 400) }}</span>
+          </mat-error>
+        </div>
+      </div>
+    </div>
 
-            <div class="input-style gap-2">
-              <label class="text-black" for="targetZone">Target Zone</label>
-              <textarea
-                [attr.data-testId]="'targetZone'"
-                class="ordinal-input-fields"
-                [ngClass]="formInputCheck(keyResultForm, 'targetZone')"
-                formControlName="targetZone"
-                id="targetZone"
-              ></textarea>
-              <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'targetZone')">
-                <span>{{ getErrorMessage("SIZE_BETWEEN", "Target Zone", 1, 400) }}</span>
-              </mat-error>
-            </div>
+    <div class="col">
+      <div class="okr-form-row">
+        <label class="okr-form-label okr-form-col" for="targetZone">Target Zone</label>
+        <div class="col">
+          <textarea
+            [attr.data-testId]="'targetZone'"
+            class="big-dialog-form-field"
+            [ngClass]="formInputCheck(keyResultForm, 'targetZone')"
+            formControlName="targetZone"
+            id="targetZone"
+          ></textarea>
+          <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'targetZone')">
+            <span>{{ getErrorMessage("SIZE_BETWEEN", "Target Zone", 1, 400) }}</span>
+          </mat-error>
+        </div>
+      </div>
+    </div>
 
-            <div class="input-style gap-2">
-              <label class="text-black" for="stretchZone">Stretch Goal</label>
-              <textarea
-                [attr.data-testId]="'stretchZone'"
-                class="ordinal-input-fields"
-                [ngClass]="formInputCheck(keyResultForm, 'stretchZone')"
-                formControlName="stretchZone"
-                id="stretchZone"
-              ></textarea>
-              <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'stretchZone')">
-                <span>{{ getErrorMessage("SIZE_BETWEEN", "Stretch Zone", 1, 400) }}</span>
-              </mat-error>
-            </div>
-          </div>
+    <div class="col">
+      <div class="okr-form-row">
+        <label class="okr-form-label okr-form-col" for="stretchZone">Stretch Goal</label>
+        <div class="col">
+          <textarea
+            [attr.data-testId]="'stretchZone'"
+            class="big-dialog-form-field"
+            [ngClass]="formInputCheck(keyResultForm, 'stretchZone')"
+            formControlName="stretchZone"
+            id="stretchZone"
+          ></textarea>
+          <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'stretchZone')">
+            <span>{{ getErrorMessage("SIZE_BETWEEN", "Stretch Zone", 1, 400) }}</span>
+          </mat-error>
         </div>
       </div>
     </div>
diff --git a/frontend/src/app/components/keyresult-type/keyresult-type.component.scss b/frontend/src/app/components/keyresult-type/keyresult-type.component.scss
index 9b3e87d79e..0edb31b8a7 100644
--- a/frontend/src/app/components/keyresult-type/keyresult-type.component.scss
+++ b/frontend/src/app/components/keyresult-type/keyresult-type.component.scss
@@ -1,7 +1,11 @@
+@import "custom_bootstrap";
+
 .active {
   border-left: #909090 1px solid;
   border-top: #909090 1px solid;
   border-right: #909090 1px solid;
+  border-bottom: #909090 0 solid;
+
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   background: white;
@@ -10,22 +14,21 @@
 
 .non-active {
   color: #9c9c9c;
+  background: white;
+  border: #909090 0 solid;
   border-bottom: #909090 1px solid;
 }
 
 .tab-title {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 39px;
-  margin-bottom: 16px;
+  @extend .p-2;
+  @extend .tab-focus;
 }
 
 .buffer {
   border-bottom: #909090 1px solid;
 }
 
-.tabfocus {
+.tab-focus {
   outline: none;
   &:focus-visible {
     border-radius: 5px;
@@ -33,55 +36,7 @@
   }
 }
 
-.metric {
-  width: 87px;
-}
-
-.ordinal {
-  width: 75px;
-}
-
-.ordinal-input-fields {
-  height: 4.3rem;
-  padding: 0.437rem 0.625rem 0.375rem 0.625rem !important;
-}
-
-.metric-fields {
-  height: 2rem;
-  padding: 0.437rem 0.625rem 0.375rem 0.625rem !important;
-}
-
-.input-style {
-  width: 31%;
-}
-
 .unit-dropdown {
-  @extend .metric-fields;
   border: solid 1px #909090;
   cursor: pointer;
 }
-
-@media only screen and (min-width: 820px) {
-  .input-alignments {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .input-style {
-    margin-bottom: 0;
-  }
-}
-
-@media only screen and (max-width: 820px) {
-  .metric-fields {
-    width: 100%;
-  }
-
-  .ordinal-input-fields {
-    width: 100%;
-  }
-
-  .input-style {
-    width: auto;
-  }
-}
diff --git a/frontend/src/app/components/keyresult/keyresult.component.html b/frontend/src/app/components/keyresult/keyresult.component.html
index 926322cd1c..3abe4ac6e6 100644
--- a/frontend/src/app/components/keyresult/keyresult.component.html
+++ b/frontend/src/app/components/keyresult/keyresult.component.html
@@ -24,7 +24,7 @@ <h3 class="keyresult-title linebreak mb-2">{{ keyResult.title }}</h3>
         [edit]="false"
         [isDetail]="false"
         [checkIn]="keyResult.lastCheckIn!"
-        class="ms-2 bg-keyResult-attribute"
+        class="bg-keyResult-attribute"
       ></app-confidence>
     </div>
   </div>
diff --git a/frontend/src/app/objective-filter/objective-filter.component.scss b/frontend/src/app/objective-filter/objective-filter.component.scss
deleted file mode 100644
index 0f3d371327..0000000000
--- a/frontend/src/app/objective-filter/objective-filter.component.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.search-button {
-  border-radius: 0 4px 4px 0;
-  padding-left: 15px;
-}
-
-#objective-form-field {
-  width: 300px;
-}
-
-.search-scale {
-  transform: scale(1.2);
-}
diff --git a/frontend/src/app/services/dialog.service.spec.ts b/frontend/src/app/services/dialog.service.spec.ts
index 16b4888d16..b9f540874f 100644
--- a/frontend/src/app/services/dialog.service.spec.ts
+++ b/frontend/src/app/services/dialog.service.spec.ts
@@ -2,16 +2,26 @@ import { TestBed } from '@angular/core/testing';
 
 import { DialogService } from './dialog.service';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { MatDialogRef } from '@angular/material/dialog';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { ConfirmDialogComponent } from '../shared/dialog/confirm-dialog/confirm-dialog.component';
-import { TeamComponent } from '../components/team/team.component';
+import { AddEditTeamDialog } from '../team-management/add-edit-team-dialog/add-edit-team-dialog.component';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
 
 describe('DialogService', () => {
   let service: DialogService;
+  let matDialogSpy: MatDialog;
+  let translateServiceSpy: TranslateService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({ imports: [TranslateModule.forRoot()], providers: [TranslateService] });
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      providers: [provideHttpClient(), provideHttpClientTesting(), TranslateService],
+    });
+    matDialogSpy = TestBed.inject(MatDialog);
     service = TestBed.inject(DialogService);
+    translateServiceSpy = TestBed.inject(TranslateService);
+    jest.spyOn(matDialogSpy, 'open');
   });
 
   it('should be created', () => {
@@ -19,20 +29,51 @@ describe('DialogService', () => {
   });
 
   it('should open dialog', () => {
-    const dialog = service.open(TeamComponent);
+    const dialog = service.open(AddEditTeamDialog, {
+      data: {
+        aProperty: 'aValue',
+      },
+    });
     expect(dialog).toBeInstanceOf(MatDialogRef);
-    expect(dialog._containerInstance._config.panelClass).toEqual(service.DIALOG_CONFIG.panelClass);
-    expect(dialog._containerInstance._config.maxWidth).toEqual(service.DIALOG_CONFIG.maxWidth);
-    expect(dialog.componentInstance).toBeInstanceOf(TeamComponent);
+    expect(dialog.componentInstance).toBeInstanceOf(AddEditTeamDialog);
+
+    expect(matDialogSpy.open).toHaveBeenCalledWith(AddEditTeamDialog, {
+      panelClass: service.DIALOG_PANEL_CLASS_DEFAULT,
+      ...service.DIALOG_CONFIG,
+      data: {
+        aProperty: 'aValue',
+      },
+    });
   });
 
   it('should open confirm dialog', () => {
+    const i18nData = {
+      team: 'the a-team',
+    };
     jest.spyOn(service, 'open');
-    const dialog = service.openConfirmDialog('DELETE.ACTION');
+    jest.spyOn(translateServiceSpy, 'instant');
+    const dialog = service.openConfirmDialog('DELETE.TEAM', i18nData);
+
+    //Call function of own service
     expect(service.open).toHaveBeenCalledTimes(1);
     expect(dialog).toBeInstanceOf(MatDialogRef);
+    expect(translateServiceSpy.instant).toHaveBeenCalledTimes(2);
+    expect(translateServiceSpy.instant).toHaveBeenCalledWith('DELETE.TEAM.TITLE', i18nData);
+    expect(translateServiceSpy.instant).toHaveBeenCalledWith('DELETE.TEAM.TEXT', i18nData);
+
+    //Call function of angular material dialog
+    expect(matDialogSpy.open).toHaveBeenCalledTimes(1);
     expect(dialog.componentInstance).toBeInstanceOf(ConfirmDialogComponent);
-    expect(dialog.componentInstance.data.title).toBe('DELETE.ACTION.TITLE');
-    expect(dialog.componentInstance.data.text).toBe('DELETE.ACTION.TEXT');
+    expect(dialog.componentInstance.data.title).toBe('DELETE.TEAM.TITLE');
+    expect(dialog.componentInstance.data.text).toBe('DELETE.TEAM.TEXT');
+
+    expect(matDialogSpy.open).toHaveBeenCalledWith(ConfirmDialogComponent, {
+      panelClass: service.DIALOG_PANEL_CLASS_SMALL,
+      ...service.DIALOG_CONFIG,
+      data: {
+        title: 'DELETE.TEAM.TITLE',
+        text: 'DELETE.TEAM.TEXT',
+      },
+    });
   });
 });
diff --git a/frontend/src/app/services/dialog.service.ts b/frontend/src/app/services/dialog.service.ts
index 5bfa310482..a1236133ea 100644
--- a/frontend/src/app/services/dialog.service.ts
+++ b/frontend/src/app/services/dialog.service.ts
@@ -13,9 +13,12 @@ export interface ConfirmDialogData {
   providedIn: 'root',
 })
 export class DialogService {
-  DIALOG_CONFIG = {
-    panelClass: 'okr-dialog-panel',
-    maxWidth: '100vw',
+  DIALOG_PANEL_CLASS_DEFAULT = 'okr-dialog-panel-default';
+  DIALOG_PANEL_CLASS_SMALL = 'okr-dialog-panel-small';
+
+  DIALOG_CONFIG: MatDialogConfig = {
+    maxWidth: '100vw', // Used to override the default maxWidth of angular material dialog
+    autoFocus: 'first-tabbable',
   };
 
   constructor(
@@ -25,15 +28,17 @@ export class DialogService {
 
   open<T, D = any, R = any>(component: ComponentType<T>, config?: MatDialogConfig<D>): MatDialogRef<T, R> {
     return this.dialog.open(component, {
+      panelClass: this.DIALOG_PANEL_CLASS_DEFAULT,
       ...this.DIALOG_CONFIG,
       ...config,
     });
   }
 
-  openConfirmDialog(translationKey: string) {
-    const title = this.translationService.instant(`${translationKey}.TITLE`);
-    const text = this.translationService.instant(`${translationKey}.TEXT`);
+  openConfirmDialog(translationKey: string, i18nData?: Object): MatDialogRef<ConfirmDialogComponent> {
+    const title = this.translationService.instant(`${translationKey}.TITLE`, i18nData);
+    const text = this.translationService.instant(`${translationKey}.TEXT`, i18nData);
     return this.open(ConfirmDialogComponent, {
+      panelClass: this.DIALOG_PANEL_CLASS_SMALL,
       data: {
         title: title,
         text: text,
diff --git a/frontend/src/app/shared/custom/dialog-header/dialog-header.component.html b/frontend/src/app/shared/custom/dialog-header/dialog-header.component.html
deleted file mode 100644
index 80a7f62d05..0000000000
--- a/frontend/src/app/shared/custom/dialog-header/dialog-header.component.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="d-flex justify-content-between align-items-center position-relative dialog-header mt-1">
-  <span class="title w-75">
-    <span>{{ dialogTitle }}</span>
-  </span>
-  <div class="d-flex align-items-center w-25 p-0 m-0">
-    <button
-      class="d-flex justify-content-center align-items-center position-absolute closing-button"
-      mat-dialog-close
-      mat-icon-button
-      cdkFocusInitial
-    >
-      <mat-icon class="text-secondary">close</mat-icon>
-    </button>
-  </div>
-</div>
diff --git a/frontend/src/app/shared/custom/dialog-header/dialog-header.component.scss b/frontend/src/app/shared/custom/dialog-header/dialog-header.component.scss
deleted file mode 100644
index 40bb4dbcda..0000000000
--- a/frontend/src/app/shared/custom/dialog-header/dialog-header.component.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.closing-button {
-  right: 0;
-}
-
-@media only screen and (min-width: 800px) {
-  .dialog-header {
-    margin-bottom: 1rem;
-  }
-}
-
-mat-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
diff --git a/frontend/src/app/shared/custom/dialog-header/dialog-header.component.spec.ts b/frontend/src/app/shared/custom/dialog-header/dialog-header.component.spec.ts
deleted file mode 100644
index 2065d3916a..0000000000
--- a/frontend/src/app/shared/custom/dialog-header/dialog-header.component.spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DialogHeaderComponent } from './dialog-header.component';
-
-describe('DialogHeaderComponent', () => {
-  let component: DialogHeaderComponent;
-  let fixture: ComponentFixture<DialogHeaderComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [DialogHeaderComponent],
-    });
-    fixture = TestBed.createComponent(DialogHeaderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/src/app/shared/custom/dialog-header/dialog-header.component.ts b/frontend/src/app/shared/custom/dialog-header/dialog-header.component.ts
deleted file mode 100644
index 3808dc9bb7..0000000000
--- a/frontend/src/app/shared/custom/dialog-header/dialog-header.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'app-dialog-header',
-  templateUrl: './dialog-header.component.html',
-  styleUrls: ['./dialog-header.component.scss'],
-})
-export class DialogHeaderComponent {
-  @Input()
-  dialogTitle!: string;
-}
diff --git a/frontend/src/app/callback/callback.component.css b/frontend/src/app/shared/custom/dialog-template-core/dialog-template-core.component.cy.ts
similarity index 100%
rename from frontend/src/app/callback/callback.component.css
rename to frontend/src/app/shared/custom/dialog-template-core/dialog-template-core.component.cy.ts
diff --git a/frontend/src/app/shared/custom/dialog-template-core/dialog-template-core.component.html b/frontend/src/app/shared/custom/dialog-template-core/dialog-template-core.component.html
new file mode 100644
index 0000000000..c74e127ca2
--- /dev/null
+++ b/frontend/src/app/shared/custom/dialog-template-core/dialog-template-core.component.html
@@ -0,0 +1,35 @@
+<div mat-dialog-title>
+  <div class="container-fluid">
+    <div class="row">
+      <h2 class="col d-flex justify-content-between align-items-center my-2">
+        {{ title }}
+        <button mat-dialog-close mat-icon-button>
+          <mat-icon class="text-secondary">close</mat-icon>
+        </button>
+      </h2>
+    </div>
+  </div>
+</div>
+
+<mat-divider class="mx-4"></mat-divider>
+
+<mat-dialog-content>
+  <ng-container *ngIf="isValueReady(observable | async); else spinner">
+    <div class="container-fluid">
+      <ng-content select="[content]"></ng-content>
+    </div>
+  </ng-container>
+  <ng-template #spinner>
+    <app-spinner [text]="title + ' wird geladen...'"></app-spinner>
+  </ng-template>
+</mat-dialog-content>
+
+<mat-divider></mat-divider>
+
+<mat-dialog-actions>
+  <div class="container-fluid">
+    <div class="row justify-content-between">
+      <ng-content select="[actions]"></ng-content>
+    </div>
+  </div>
+</mat-dialog-actions>
diff --git a/frontend/src/app/shared/custom/dialog-template-core/dialog-template-core.component.scss b/frontend/src/app/shared/custom/dialog-template-core/dialog-template-core.component.scss
new file mode 100644
index 0000000000..769a21b288
--- /dev/null
+++ b/frontend/src/app/shared/custom/dialog-template-core/dialog-template-core.component.scss
@@ -0,0 +1,24 @@
+@import "custom_bootstrap";
+
+mat-dialog-content {
+  //scrollbar-gutter: stable both-edges;
+  $dialog-header-height: 48px;
+  $full-dialog-content-height: calc(
+    100vh - $top-bar-height - $dialog-header-height - $dialog-content-padding-y - $dialog-action-buttons-div-height
+  );
+  @extend .d-flex;
+  @extend .flex-column;
+  @extend .flex-wrap;
+  @extend .container-fluid;
+  max-height: $full-dialog-content-height !important;
+
+  @include media-breakpoint-down(sm) {
+    height: $full-dialog-content-height !important;
+  }
+}
+
+mat-dialog-actions {
+  @extend .d-flex;
+  @extend .justify-content-between;
+  height: $dialog-action-buttons-div-height !important;
+}
diff --git a/frontend/src/app/shared/custom/dialog-template-core/dialog-template-core.component.ts b/frontend/src/app/shared/custom/dialog-template-core/dialog-template-core.component.ts
new file mode 100644
index 0000000000..95f651d3dd
--- /dev/null
+++ b/frontend/src/app/shared/custom/dialog-template-core/dialog-template-core.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+@Component({
+  selector: 'app-dialog-template-core',
+  templateUrl: './dialog-template-core.component.html',
+  styleUrl: './dialog-template-core.component.scss',
+})
+export class DialogTemplateCoreComponent {
+  @Input() observable: Observable<any> = of({});
+  @Input() title: string = '';
+
+  isValueReady(obj: any): boolean {
+    if (obj == null) {
+      return false;
+    }
+    if (Array.isArray(obj)) {
+      return obj.length > 0;
+    }
+    return true;
+  }
+}
diff --git a/frontend/src/app/shared/custom/okr-tangram/okr-tangram.component.html b/frontend/src/app/shared/custom/okr-tangram/okr-tangram.component.html
index abd7776d79..92bb32f252 100644
--- a/frontend/src/app/shared/custom/okr-tangram/okr-tangram.component.html
+++ b/frontend/src/app/shared/custom/okr-tangram/okr-tangram.component.html
@@ -1 +1 @@
-<img alt="okr-logo" ngSrc="{{ this.trianglesSrc$ | async }}" width="274" height="140" />
+<img alt="okr-logo" ngSrc="{{ this.trianglesSrc$ | async }}" width="274" height="140" priority />
diff --git a/frontend/src/app/shared/dialog/cancel-dialog/cancel-dialog.component.html b/frontend/src/app/shared/dialog/cancel-dialog/cancel-dialog.component.html
deleted file mode 100644
index b3d5fd8848..0000000000
--- a/frontend/src/app/shared/dialog/cancel-dialog/cancel-dialog.component.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<section mat-dialog-title>
-  <app-dialog-header [dialogTitle]="this.data.dialogTitle"></app-dialog-header>
-</section>
-
-<mat-dialog-content>
-  @if (data.dialogText) {
-    <div class="mb-3">
-      <span class="dialog-text">{{ this.data.dialogText }}</span>
-    </div>
-  }
-</mat-dialog-content>
-
-<mat-dialog-actions class="m-0">
-  <button color="primary" [attr.data-testId]="'cancelDialog-confirm'" (click)="closeAndConfirm()" mat-flat-button>
-    Ja
-  </button>
-  <button mat-button mat-dialog-close [attr.data-testId]="'cancelDialog-cancel'">Abbrechen</button>
-</mat-dialog-actions>
diff --git a/frontend/src/app/shared/dialog/cancel-dialog/cancel-dialog.component.scss b/frontend/src/app/shared/dialog/cancel-dialog/cancel-dialog.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/frontend/src/app/shared/dialog/cancel-dialog/cancel-dialog.component.ts b/frontend/src/app/shared/dialog/cancel-dialog/cancel-dialog.component.ts
deleted file mode 100644
index c2a33fc611..0000000000
--- a/frontend/src/app/shared/dialog/cancel-dialog/cancel-dialog.component.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-
-export type CancelDialogData = {
-  dialogTitle: string;
-  dialogText?: string;
-};
-
-@Component({
-  selector: 'app-cancel-dialog',
-  templateUrl: './cancel-dialog.component.html',
-  styleUrl: './cancel-dialog.component.scss',
-})
-export class CancelDialogComponent {
-  constructor(
-    @Inject(MAT_DIALOG_DATA) public data: CancelDialogData,
-    private dialogRef: MatDialogRef<CancelDialogComponent>,
-  ) {}
-
-  closeAndConfirm() {
-    this.dialogRef.close(true);
-  }
-}
diff --git a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html
index 5a0cb5d688..e4eae92721 100644
--- a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html
+++ b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html
@@ -1,20 +1,18 @@
-<section mat-dialog-title>
-  <app-dialog-header [dialogTitle]="'Objective abschliessen'"></app-dialog-header>
-</section>
-
-<mat-dialog-content>
-  <div class="dialog-content">
-    <div class="input-style gap-2 col-12">
-      <p class="fs-6 text-black">Objective</p>
-      <p class="linebreak bg-display-element py-2 ps-2 fs-6 fw-normal text-black">{{ data.objectiveTitle }}</p>
+<app-dialog-template-core [title]="'Objective abschliessen'">
+  <ng-container content>
+    <div class="okr-form-row">
+      <h4 class="okr-form-label okr-form-col">Objective</h4>
+      <span class="okr-form-col">
+        <p class="dialog-data-show">{{ data.objectiveTitle }}</p>
+      </span>
     </div>
 
     <form [formGroup]="completeForm">
-      <div class="input-style gap-2 col-12">
-        <label class="text-black">Bewertung</label>
-        <div class="d-flex gap-3">
-          <div
-            class="successful w-50 valuation-card card-hover-successful"
+      <div class="okr-form-row okr-form-label-input-container">
+        <p class="okr-form-label okr-form-col">Bewertung</p>
+        <div class="okr-form-row mx-0">
+          <button
+            class="col successful valuation-card card-hover-successful"
             [ngClass]="{
               'active-successful': completeForm.value.isSuccessful == true,
               'non-active-successful': completeForm.value.isSuccessful === false,
@@ -25,9 +23,9 @@
             tabindex="0"
           >
             Objective erreicht
-          </div>
-          <div
-            class="not-successful w-50 valuation-card card-hover-not-successful"
+          </button>
+          <button
+            class="col not-successful valuation-card card-hover-not-successful"
             [ngClass]="{
               'active-not-successful': completeForm.value.isSuccessful === false,
               'non-active-not-successful': completeForm.value.isSuccessful == true,
@@ -38,30 +36,30 @@
             tabindex="0"
           >
             Objective nicht erreicht
-          </div>
+          </button>
         </div>
       </div>
 
-      <div class="input-style gap-2 col-12">
-        <label for="comment" class="text-black">Kommentar (optional)</label>
-        <textarea
-          class="big-dialog-form-field"
-          formControlName="comment"
-          [attr.data-testId]="'completeComment'"
-          [ngClass]="formInputCheck(completeForm, 'comment')"
-          id="comment"
-        ></textarea>
-        <mat-error *ngIf="hasFormFieldErrors(completeForm, 'comment')">
-          <span>{{ getErrorMessage("MAX_VALUE", "Kommentar", 4096) }}</span>
-        </mat-error>
+      <div class="okr-form-row okr-form-label-input-container">
+        <label class="okr-form-label okr-form-col" for="comment">Kommentar (optional)</label>
+        <div class="okr-form-input">
+          <textarea
+            class="big-dialog-form-field"
+            formControlName="comment"
+            [attr.data-testId]="'completeComment'"
+            [ngClass]="formInputCheck(completeForm, 'comment')"
+            id="comment"
+          ></textarea>
+          <mat-error *ngIf="hasFormFieldErrors(completeForm, 'comment')">
+            <span>{{ getErrorMessage("MAX_VALUE", "Kommentar", 4096) }}</span>
+          </mat-error>
+        </div>
       </div>
     </form>
-  </div>
-</mat-dialog-content>
+  </ng-container>
 
-<mat-dialog-actions>
-  <div class="mt-3">
-    <div class="d-flex justify-content-between">
+  <ng-container actions>
+    <div class="col-auto">
       <button
         [attr.data-testId]="'submit'"
         type="submit"
@@ -72,7 +70,7 @@
       >
         Objective abschliessen
       </button>
-      <button color="primary" mat-button mat-dialog-close class="ms-2">Abbrechen</button>
+      <button color="primary" mat-button mat-dialog-close>Abbrechen</button>
     </div>
-  </div>
-</mat-dialog-actions>
+  </ng-container>
+</app-dialog-template-core>
diff --git a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.scss b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.scss
index 2244ba1bf0..f757130a0f 100644
--- a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.scss
+++ b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.scss
@@ -73,7 +73,3 @@ div:hover {
   @extend .card-shadow;
   background-color: #ba3838;
 }
-
-.dialog-content {
-  max-height: 30vh;
-}
diff --git a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.spec.ts b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.spec.ts
index e949a38b9a..72ce7381c6 100644
--- a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.spec.ts
+++ b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.spec.ts
@@ -2,10 +2,14 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CompleteDialogComponent } from './complete-dialog.component';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
-import { DialogHeaderComponent } from '../../custom/dialog-header/dialog-header.component';
 import { TranslateService } from '@ngx-translate/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
+import { DialogTemplateCoreComponent } from '../../custom/dialog-template-core/dialog-template-core.component';
+import { MatDividerModule } from '@angular/material/divider';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 
 const dialogMock = {
   close: jest.fn(),
@@ -21,12 +25,16 @@ let matDataMock: { objective: { objectiveId: number | undefined; teamId: number
 describe('CompleteDialogComponent', () => {
   let component: CompleteDialogComponent;
   let fixture: ComponentFixture<CompleteDialogComponent>;
+  let debugElement: any;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [FormsModule, ReactiveFormsModule, MatDialogModule, MatIconModule],
-      declarations: [CompleteDialogComponent, DialogHeaderComponent],
+      imports: [FormsModule, ReactiveFormsModule, MatDialogModule, MatIconModule, MatDividerModule],
+      declarations: [CompleteDialogComponent, DialogTemplateCoreComponent],
       providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideHttpClientTesting(),
         { provide: MatDialogRef, useValue: dialogMock },
         { provide: MAT_DIALOG_DATA, useValue: matDataMock },
         { provide: TranslateService, useValue: {} },
@@ -35,6 +43,7 @@ describe('CompleteDialogComponent', () => {
     fixture = TestBed.createComponent(CompleteDialogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    debugElement = fixture.debugElement.nativeElement;
   });
 
   it('should create', () => {
@@ -45,7 +54,7 @@ describe('CompleteDialogComponent', () => {
     let elements = document.querySelectorAll('.valuation-card');
     let successful = document.querySelectorAll('.card-hover-successful');
     let notSuccessful = document.querySelectorAll('.card-hover-not-successful');
-    let submitButton = document.querySelectorAll('button')[1];
+    let submitButton = debugElement.querySelector('[data-testid="submit"]');
 
     expect(elements.length).toEqual(2);
     expect(successful.length).toEqual(1);
@@ -59,7 +68,7 @@ describe('CompleteDialogComponent', () => {
   it('should change isSuccessful value on card click and remove class card-hover', () => {
     component.switchSuccessState('successful');
     let elements = document.querySelectorAll('.card-hover');
-    let submitButton = document.querySelectorAll('button')[1];
+    let submitButton = debugElement.querySelector('[data-testid="submit"]');
 
     expect(component.completeForm.value.isSuccessful).toBeTruthy();
     expect(component.completeForm.invalid).toBeFalsy();
diff --git a/frontend/src/app/shared/dialog/confirm-dialog/confirm-dialog.component.html b/frontend/src/app/shared/dialog/confirm-dialog/confirm-dialog.component.html
index 60f6120ae7..c34a464c2b 100644
--- a/frontend/src/app/shared/dialog/confirm-dialog/confirm-dialog.component.html
+++ b/frontend/src/app/shared/dialog/confirm-dialog/confirm-dialog.component.html
@@ -1,16 +1,23 @@
-<section mat-dialog-title>
-  <app-dialog-header [dialogTitle]="this.dialogTitle"></app-dialog-header>
-</section>
+<app-dialog-template-core [title]="dialogTitle">
+  <ng-container content>
+    <div class="linebreak bg-display-element p-2 fw-normal mb-3">
+      <span class="information">{{ this.dialogText.trim() }}</span>
+    </div>
+  </ng-container>
 
-<mat-dialog-content>
-  <div class="linebreak bg-display-element p-2 fw-normal mb-3">
-    <span class="information">{{ this.dialogText.trim() }}</span>
-  </div>
-</mat-dialog-content>
+  <ng-container actions>
+    <div class="col-auto">
+      <button
+        [attr.data-testId]="'confirm-yes'"
+        type="submit"
+        (click)="closeAndDelete()"
+        color="primary"
+        mat-flat-button
+      >
+        Ja
+      </button>
 
-<mat-dialog-actions class="m-0">
-  <button [attr.data-testId]="'confirmYes'" type="submit" (click)="closeAndDelete()" color="primary" mat-flat-button>
-    Ja
-  </button>
-  <button mat-button mat-dialog-close color="primary">Nein</button>
-</mat-dialog-actions>
+      <button mat-button mat-dialog-close color="primary" [attr.data-testId]="'confirm-no'">Nein</button>
+    </div>
+  </ng-container>
+</app-dialog-template-core>
diff --git a/frontend/src/app/shared/dialog/confirm-dialog/confirm-dialog.component.spec.ts b/frontend/src/app/shared/dialog/confirm-dialog/confirm-dialog.component.spec.ts
index 7ed74ba54e..22c02998c8 100644
--- a/frontend/src/app/shared/dialog/confirm-dialog/confirm-dialog.component.spec.ts
+++ b/frontend/src/app/shared/dialog/confirm-dialog/confirm-dialog.component.spec.ts
@@ -11,9 +11,10 @@ import { MatInputModule } from '@angular/material/input';
 import { MatRadioModule } from '@angular/material/radio';
 import { ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { DialogHeaderComponent } from '../../custom/dialog-header/dialog-header.component';
 import { MatIconModule } from '@angular/material/icon';
 import { ConfirmDialogData } from '../../../services/dialog.service';
+import { DialogTemplateCoreComponent } from '../../custom/dialog-template-core/dialog-template-core.component';
+import { MatDividerModule } from '@angular/material/divider';
 
 const dialogRefMock = {
   close: jest.fn(),
@@ -35,8 +36,9 @@ describe('ConfirmDialogComponent', () => {
         ReactiveFormsModule,
         TranslateModule.forRoot(),
         MatIconModule,
+        MatDividerModule,
       ],
-      declarations: [ConfirmDialogComponent, DialogHeaderComponent],
+      declarations: [ConfirmDialogComponent, DialogTemplateCoreComponent],
       providers: [
         TranslateService,
         { provide: MAT_DIALOG_DATA, useValue: { title: '', text: '' } as ConfirmDialogData },
diff --git a/frontend/src/app/shared/dialog/example-dialog/example-dialog.component.html b/frontend/src/app/shared/dialog/example-dialog/example-dialog.component.html
index 83957d9873..37a8bc048e 100644
--- a/frontend/src/app/shared/dialog/example-dialog/example-dialog.component.html
+++ b/frontend/src/app/shared/dialog/example-dialog/example-dialog.component.html
@@ -1,50 +1,55 @@
-<h1 mat-dialog-title class="d-flex justify-content-center">This is an example dialog</h1>
-<mat-dialog-content class="d-flex justify-content-center flex-column">
-  <form [formGroup]="dialogForm" (ngSubmit)="save()" class="d-flex flex-column justify-content-center">
-    <mat-form-field>
-      <mat-label>Name</mat-label>
-      <input matInput formControlName="name" placeholder="Ex. Tom" />
-      <div *ngIf="isTouchedOrDirty('name')">
-        <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('name')">
+<app-dialog-template-core>
+  <ng-container title> This is an example dialog </ng-container>
+
+  <ng-container content>
+    <form [formGroup]="dialogForm" (ngSubmit)="save()">
+      <mat-form-field>
+        <mat-label>Name</mat-label>
+        <input matInput formControlName="name" placeholder="Ex. Tom" />
+        <div *ngIf="isTouchedOrDirty('name')">
+          <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('name')">
+            <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
+          </mat-error>
+        </div>
+      </mat-form-field>
+
+      <mat-radio-group formControlName="gender">
+        <mat-radio-button value="male">Male</mat-radio-button>
+        <mat-radio-button value="female">Female</mat-radio-button>
+        <mat-radio-button value="other">Other</mat-radio-button>
+      </mat-radio-group>
+      <div *ngIf="isTouchedOrDirty('gender')">
+        <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('gender')">
           <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
         </mat-error>
       </div>
-    </mat-form-field>
-
-    <mat-radio-group formControlName="gender">
-      <mat-radio-button value="male">Male</mat-radio-button>
-      <mat-radio-button value="female">Female</mat-radio-button>
-      <mat-radio-button value="other">Other</mat-radio-button>
-    </mat-radio-group>
-    <div *ngIf="isTouchedOrDirty('gender')">
-      <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('gender')">
-        <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
-      </mat-error>
-    </div>
 
-    <mat-form-field>
-      <mat-label>Please select a hobby</mat-label>
-      <mat-select name="hobbies" formControlName="hobby">
-        <mat-option [value]="hobby" *ngFor="let hobby of hobbies">{{ hobby }}</mat-option>
-      </mat-select>
-    </mat-form-field>
-    <div *ngIf="isTouchedOrDirty('hobby')">
-      <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('hobby')">
-        <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
-      </mat-error>
-    </div>
+      <mat-form-field>
+        <mat-label>Please select a hobby</mat-label>
+        <mat-select name="hobbies" formControlName="hobby">
+          <mat-option [value]="hobby" *ngFor="let hobby of hobbies">{{ hobby }}</mat-option>
+        </mat-select>
+      </mat-form-field>
+      <div *ngIf="isTouchedOrDirty('hobby')">
+        <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('hobby')">
+          <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
+        </mat-error>
+      </div>
+    </form>
+  </ng-container>
 
-    <mat-dialog-actions>
-      <button mat-button mat-dialog-close>Cancel</button>
+  <ng-container actions>
+    <div class="col-auto">
       <button
         [attr.data-testId]="'submit'"
-        mat-button
+        mat-flat-button
         type="submit"
         [mat-dialog-close]="true"
         [disabled]="!dialogForm.valid"
       >
         Save
       </button>
-    </mat-dialog-actions>
-  </form>
-</mat-dialog-content>
+      <button mat-button mat-dialog-close>Cancel</button>
+    </div>
+  </ng-container>
+</app-dialog-template-core>
diff --git a/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html b/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html
index 742809d8f3..8479d497d8 100644
--- a/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html
+++ b/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html
@@ -1,30 +1,9 @@
-<section mat-dialog-title>
-  <div *ngIf="this.data.action == 'duplicate'">
-    <app-dialog-header
-      [dialogTitle]="'Objective von ' + (this.currentTeam | async)?.name + ' duplizieren'"
-    ></app-dialog-header>
-  </div>
-  <div *ngIf="this.data.action == 'releaseBacklog'">
-    <app-dialog-header [dialogTitle]="'Objective veröffentlichen'"></app-dialog-header>
-  </div>
-  <div *ngIf="this.data.action != 'duplicate'">
-    <app-dialog-header
-      *ngIf="!data.objective.objectiveId"
-      [dialogTitle]="'Objective für ' + (this.currentTeam | async)?.name + ' erfassen'"
-    ></app-dialog-header>
-    <app-dialog-header
-      *ngIf="data.objective.objectiveId && this.data.action != 'releaseBacklog'"
-      [dialogTitle]="'Objective von ' + (this.currentTeam | async)?.name + ' bearbeiten'"
-    ></app-dialog-header>
-  </div>
-</section>
-
-<mat-dialog-content>
-  <div class="dialog-content" tabindex="-1">
-    <div class="d-flex justify-content-between align-items-center pt-2 ps-0">
-      <form [formGroup]="objectiveForm" class="d-flex flex-column flex-wrap container p-0">
-        <div class="input-style gap-2 col-12">
-          <label class="text-black" for="title">Titel</label>
+<app-dialog-template-core [title]="getDialogTitle((this.currentTeam | async)?.name || '')">
+  <ng-container content>
+    <form [formGroup]="objectiveForm">
+      <div class="okr-form-row okr-form-label-input-container">
+        <label class="okr-form-label okr-form-col" for="title">Titel</label>
+        <div class="okr-form-input">
           <textarea
             [attr.data-testId]="'title'"
             class="big-dialog-form-field"
@@ -36,8 +15,11 @@
             <span>{{ getErrorMessage("SIZE_BETWEEN", "Titel", 2, 250) }}</span>
           </mat-error>
         </div>
-        <div class="input-style gap-2 col-12">
-          <label class="text-black" for="title">Beschreibung (optional)</label>
+      </div>
+
+      <div class="okr-form-row okr-form-label-input-container">
+        <label class="okr-form-label okr-form-col" for="title">Beschreibung (optional)</label>
+        <div class="okr-form-input">
           <textarea
             [attr.data-testId]="'description'"
             formControlName="description"
@@ -48,46 +30,51 @@
             <span>{{ getErrorMessage("MAX_VALUE", "Beschreibung", 4096, null) }}</span>
           </mat-error>
         </div>
+      </div>
 
-        <div class="d-flex row mb-1">
-          <div class="d-flex flex-column gap-2 col-6">
-            <label class="text-black" for="quarter">Quartal</label>
-            <select
-              class="custom-select bg-white w-100"
-              formControlName="quarter"
-              id="quarter"
-              [attr.data-testId]="'quarterSelect'"
+      <div class="okr-form-row row-cols-1 row-cols-md-2 gx-2">
+        <div class="col">
+          <div class="okr-form-row okr-form-label-input-container">
+            <label class="okr-form-label okr-form-col" for="quarter">Quartal</label>
+            <div class="okr-form-input pe-5">
+              <select
+                class="custom-select bg-white"
+                formControlName="quarter"
+                id="quarter"
+                [attr.data-testId]="'quarterSelect'"
+              >
+                <ng-container *ngFor="let quarter of quarters$ | async; let i = index">
+                  <option *ngIf="allowedOption(quarter)" [value]="quarter.id">
+                    {{ quarter.fullLabel() }}
+                  </option>
+                </ng-container>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div class="col align-self-end">
+          <div class="okr-form-row">
+            <mat-checkbox
+              [attr.data-testId]="'keyResult-checkbox'"
+              class="col-auto mx-n2"
+              color="primary"
+              formControlName="createKeyResults"
+              *ngIf="!data.objective.objectiveId"
             >
-              <ng-container *ngFor="let quarter of quarters$ | async; let i = index">
-                <option *ngIf="allowedOption(quarter)" [value]="quarter.id">
-                  {{ quarter.fullLabel() }}
-                </option>
-              </ng-container>
-            </select>
+              <p class="col d-flex">Key Results im Anschluss erfassen</p>
+            </mat-checkbox>
           </div>
-          <mat-checkbox
-            [attr.data-testId]="'keyResult-checkbox'"
-            class="d-flex align-items-center custom-text-wrap col-5 col-6 text-black add-keyresult"
-            color="primary"
-            formControlName="createKeyResults"
-            *ngIf="!data.objective.objectiveId"
-          >
-            <p class="add-keyresult-text">Key Results im Anschluss erfassen</p>
-          </mat-checkbox>
         </div>
-      </form>
-    </div>
-  </div>
-</mat-dialog-content>
+      </div>
+    </form>
+  </ng-container>
 
-<mat-dialog-actions class="mt-3">
-  <div class="d-flex w-100 flex-row justify-content-between">
-    <div class="d-flex flex-row gap-2">
+  <ng-container actions>
+    <div class="col-auto">
       <button
         *ngIf="!data.objective.objectiveId"
         [disabled]="objectiveForm.invalid"
         color="primary"
-        class="me-1"
         mat-flat-button
         (click)="onSubmit('DRAFT')"
         type="submit"
@@ -100,7 +87,6 @@
         [disabled]="objectiveForm.invalid || !allowedToSaveBacklog()"
         color="primary"
         mat-stroked-button
-        class="ms-0"
         type="submit"
         (click)="onSubmit('ONGOING')"
         [attr.data-testId]="'safe'"
@@ -109,10 +95,11 @@
       </button>
       <button color="primary" mat-button mat-dialog-close [attr.data-testId]="'cancel'">Abbrechen</button>
     </div>
-    <div *ngIf="data.objective.objectiveId && data.action != 'duplicate'">
+
+    <div class="col-auto" *ngIf="data.objective.objectiveId && data.action != 'duplicate'">
       <button color="primary" type="button" mat-button (click)="deleteObjective()" [attr.data-testId]="'delete'">
         Objective Löschen
       </button>
     </div>
-  </div>
-</mat-dialog-actions>
+  </ng-container>
+</app-dialog-template-core>
diff --git a/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.scss b/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.scss
index 28e560f6d2..e69de29bb2 100644
--- a/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.scss
+++ b/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.scss
@@ -1,42 +0,0 @@
-.team-container {
-  background-color: rgb(245, 245, 245);
-  height: 56px;
-  border-bottom: 1px gray solid;
-}
-
-.custom-text-wrap {
-  width: max-content;
-}
-
-.add-keyresult {
-  // Select is aligned with label and it's not easy to align checkbox to select
-  margin-top: -6px;
-  margin-left: 1.2rem;
-}
-
-@media only screen and (min-width: 820px) {
-  .quarter-keyresult {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: flex-end;
-  }
-}
-
-@media only screen and (max-width: 770px) {
-  .add-keyresult {
-    margin-left: -10px;
-    margin-top: 1rem;
-  }
-
-  .add-keyresult-text {
-    margin: 0;
-  }
-}
-
-.add-keyresult-text {
-  margin-left: -10px;
-}
-
-.dialog-content {
-  max-height: 35vh;
-}
diff --git a/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.spec.ts b/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.spec.ts
index 4e667435bc..8e683e9a4e 100644
--- a/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.spec.ts
+++ b/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.spec.ts
@@ -1,7 +1,6 @@
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 
 import { ObjectiveFormComponent } from './objective-form.component';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatInputModule } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
@@ -22,11 +21,15 @@ import { TeamService } from '../../../services/team.service';
 import { State } from '../../types/enums/State';
 import { By } from '@angular/platform-browser';
 import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
-import { RouterTestingHarness, RouterTestingModule } from '@angular/router/testing';
-import { DialogHeaderComponent } from '../../custom/dialog-header/dialog-header.component';
+import { RouterTestingHarness } from '@angular/router/testing';
 import { TranslateTestingModule } from 'ngx-translate-testing';
+// @ts-ignore
 import * as de from '../../../../assets/i18n/de.json';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { DialogTemplateCoreComponent } from '../../custom/dialog-template-core/dialog-template-core.component';
+import { MatDividerModule } from '@angular/material/divider';
 
 let objectiveService = {
   getFullObjective: jest.fn(),
@@ -89,7 +92,6 @@ describe('ObjectiveDialogComponent', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({
         imports: [
-          HttpClientTestingModule,
           MatDialogModule,
           MatIconModule,
           MatFormFieldModule,
@@ -98,13 +100,16 @@ describe('ObjectiveDialogComponent', () => {
           MatInputModule,
           NoopAnimationsModule,
           MatCheckboxModule,
-          RouterTestingModule,
           TranslateTestingModule.withTranslations({
             de: de,
           }),
+          MatDividerModule,
         ],
-        declarations: [ObjectiveFormComponent, DialogHeaderComponent],
+        declarations: [ObjectiveFormComponent, DialogTemplateCoreComponent],
         providers: [
+          provideRouter([]),
+          provideHttpClient(),
+          provideHttpClientTesting(),
           { provide: MatDialogRef, useValue: dialogMock },
           { provide: MAT_DIALOG_DATA, useValue: matDataMock },
           { provide: ObjectiveService, useValue: objectiveService },
@@ -345,7 +350,6 @@ describe('ObjectiveDialogComponent', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({
         imports: [
-          HttpClientTestingModule,
           MatDialogModule,
           MatIconModule,
           MatFormFieldModule,
@@ -354,13 +358,16 @@ describe('ObjectiveDialogComponent', () => {
           MatInputModule,
           NoopAnimationsModule,
           MatCheckboxModule,
-          RouterTestingModule,
           TranslateTestingModule.withTranslations({
             de: de,
           }),
+          MatDividerModule,
         ],
-        declarations: [ObjectiveFormComponent, DialogHeaderComponent],
+        declarations: [ObjectiveFormComponent, DialogTemplateCoreComponent],
         providers: [
+          provideRouter([]),
+          provideHttpClient(),
+          provideHttpClientTesting(),
           { provide: MatDialogRef, useValue: dialogMock },
           { provide: MAT_DIALOG_DATA, useValue: matDataMock },
           { provide: ObjectiveService, useValue: objectiveService },
diff --git a/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.ts b/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.ts
index 9875795967..8bb93a22bd 100644
--- a/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.ts
+++ b/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.ts
@@ -217,4 +217,24 @@ export class ObjectiveFormComponent implements OnInit, OnDestroy {
   isBacklogQuarter(label: string) {
     return GJ_REGEX_PATTERN.test(label);
   }
+
+  getDialogTitle(teamName: string): string {
+    if (this.data.action === 'duplicate') {
+      return `Objective von ${teamName} duplizieren`;
+    }
+
+    if (this.data.action === 'releaseBacklog') {
+      return 'Objective veröffentlichen';
+    }
+
+    if (!this.data.objective.objectiveId) {
+      return `Objective für ${teamName} erfassen`;
+    }
+
+    if (this.data.objective.objectiveId && this.data.action !== 'releaseBacklog') {
+      return `Objective von ${teamName} bearbeiten`;
+    }
+
+    return '';
+  }
 }
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index 44a1110da3..94941adb44 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -8,7 +8,6 @@ import { UnitLabelTransformationPipe } from './pipes/unit-label-transformation/u
 import { ParseUnitValuePipe } from './pipes/parse-unit-value/parse-unit-value.pipe';
 import { ScoringComponent } from './custom/scoring/scoring.component';
 import { CompleteDialogComponent } from './dialog/complete-dialog/complete-dialog.component';
-import { DialogHeaderComponent } from './custom/dialog-header/dialog-header.component';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -25,7 +24,8 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { RouterOutlet } from '@angular/router';
 import { SpinnerComponent } from './custom/spinner/spinner.component';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { CancelDialogComponent } from './dialog/cancel-dialog/cancel-dialog.component';
+import { DialogTemplateCoreComponent } from './custom/dialog-template-core/dialog-template-core.component';
+import { MatDividerModule } from '@angular/material/divider';
 
 @NgModule({
   declarations: [
@@ -37,11 +37,10 @@ import { CancelDialogComponent } from './dialog/cancel-dialog/cancel-dialog.comp
     ParseUnitValuePipe,
     ScoringComponent,
     CompleteDialogComponent,
-    DialogHeaderComponent,
     OkrTangramComponent,
     SidepanelComponent,
     SpinnerComponent,
-    CancelDialogComponent,
+    DialogTemplateCoreComponent,
   ],
   imports: [
     CommonModule,
@@ -62,6 +61,7 @@ import { CancelDialogComponent } from './dialog/cancel-dialog/cancel-dialog.comp
     A11yModule,
     RouterOutlet,
     MatProgressSpinnerModule,
+    MatDividerModule,
   ],
   exports: [
     ExampleDialogComponent,
@@ -72,10 +72,10 @@ import { CancelDialogComponent } from './dialog/cancel-dialog/cancel-dialog.comp
     ParseUnitValuePipe,
     ScoringComponent,
     CompleteDialogComponent,
-    DialogHeaderComponent,
     OkrTangramComponent,
     SidepanelComponent,
     SpinnerComponent,
+    DialogTemplateCoreComponent,
   ],
 })
 export class SharedModule {}
diff --git a/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.html b/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.html
index a181fae4cd..a74ff3dbd5 100644
--- a/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.html
+++ b/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.html
@@ -1,13 +1,9 @@
-<section mat-dialog-title>
-  <app-dialog-header [dialogTitle]="data ? 'Team bearbeiten' : 'Team erfassen'"></app-dialog-header>
-</section>
-
-<mat-dialog-content>
-  <div class="dialog-content" tabindex="-1">
-    <div class="w-100 d-flex justify-content-between align-items-center">
-      <form [formGroup]="teamForm" class="d-flex flex-column flex-wrap container p-0">
-        <div class="input-style gap-2 col-12">
-          <label class="text-black" for="name">Teamname</label>
+<app-dialog-template-core [title]="getDialogTitle()">
+  <ng-container content>
+    <form [formGroup]="teamForm">
+      <div class="okr-form-row okr-form-label-input-container">
+        <label class="okr-form-label okr-form-col" for="name">Teamname</label>
+        <div class="okr-form-input">
           <input
             matInput
             [attr.data-testId]="'add-team-name'"
@@ -20,14 +16,11 @@
             <span>{{ getErrorMessage("SIZE_BETWEEN", "Teamname", 2, 250) }}</span>
           </mat-error>
         </div>
-      </form>
-    </div>
-  </div>
-</mat-dialog-content>
-
-<mat-dialog-actions>
-  <div class="d-flex justify-content-between p-0 mt-2" mat-dialog-actions>
-    <div class="d-flex p-0">
+      </div>
+    </form>
+  </ng-container>
+  <ng-container actions>
+    <div class="col-auto">
       <button
         [attr.data-testId]="'add-team-save'"
         [disabled]="teamForm.invalid"
@@ -38,7 +31,7 @@
       >
         Speichern
       </button>
-      <button color="primary" mat-button mat-dialog-close class="ms-2">Abbrechen</button>
+      <button color="primary" mat-button mat-dialog-close>Abbrechen</button>
     </div>
-  </div>
-</mat-dialog-actions>
+  </ng-container>
+</app-dialog-template-core>
diff --git a/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.scss b/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.scss
index 229b3c04e6..004d42b7c7 100644
--- a/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.scss
+++ b/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.scss
@@ -13,7 +13,3 @@ mat-select:hover {
   outline: 1px solid #5d6974;
   overflow-y: visible;
 }
-
-.dialog-content {
-  max-height: 30vh;
-}
diff --git a/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.spec.ts b/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.spec.ts
index 84dc098d78..767eb28010 100644
--- a/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.spec.ts
+++ b/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.spec.ts
@@ -1,7 +1,7 @@
 import { AddEditTeamDialog } from './add-edit-team-dialog.component';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HarnessLoader } from '@angular/cdk/testing';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -10,8 +10,6 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { RouterTestingModule } from '@angular/router/testing';
-import { DialogHeaderComponent } from '../../shared/custom/dialog-header/dialog-header.component';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { TeamService } from '../../services/team.service';
 import { of } from 'rxjs';
@@ -19,6 +17,10 @@ import { marketingTeamWriteable, teamFormObject } from '../../shared/testData';
 import { Team } from '../../shared/types/model/Team';
 import { TranslateService } from '@ngx-translate/core';
 import { DialogService } from '../../services/dialog.service';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { DialogTemplateCoreComponent } from '../../shared/custom/dialog-template-core/dialog-template-core.component';
+import { MatDividerModule } from '@angular/material/divider';
 
 const dialogRefMock = {
   close: jest.fn(),
@@ -42,7 +44,6 @@ describe('TeamManagementComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        HttpClientTestingModule,
         MatDialogModule,
         MatIconModule,
         MatFormFieldModule,
@@ -51,10 +52,13 @@ describe('TeamManagementComponent', () => {
         MatInputModule,
         NoopAnimationsModule,
         MatCheckboxModule,
-        RouterTestingModule,
+        MatDividerModule,
       ],
-      declarations: [AddEditTeamDialog, DialogHeaderComponent],
+      declarations: [AddEditTeamDialog, DialogTemplateCoreComponent],
       providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideHttpClientTesting(),
         {
           provide: DialogService,
           useValue: dialogServiceMock,
diff --git a/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.ts b/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.ts
index 35462fa02c..98aa5de9f0 100644
--- a/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.ts
+++ b/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.ts
@@ -74,4 +74,8 @@ export class AddEditTeamDialog implements OnInit {
   getErrorMessage(error: string, field: string, firstNumber: number | null, secondNumber: number | null): string {
     return field + this.translate.instant('DIALOG_ERRORS.' + error).format(firstNumber, secondNumber);
   }
+
+  getDialogTitle(): string {
+    return this.data ? 'Team bearbeiten' : 'Team erfassen';
+  }
 }
diff --git a/frontend/src/app/team-management/add-member-to-team-dialog/add-member-to-team-dialog.component.html b/frontend/src/app/team-management/add-member-to-team-dialog/add-member-to-team-dialog.component.html
index e64903624d..0d7e524aae 100644
--- a/frontend/src/app/team-management/add-member-to-team-dialog/add-member-to-team-dialog.component.html
+++ b/frontend/src/app/team-management/add-member-to-team-dialog/add-member-to-team-dialog.component.html
@@ -1,39 +1,33 @@
-<section mat-dialog-title>
-  <app-dialog-header [dialogTitle]="getDialogTitle()"></app-dialog-header>
-</section>
-
-<mat-dialog-content>
-  <div class="dialog-content" tabindex="-1">
-    <div class="w-100 d-flex justify-content-between align-items-center">
-      <form class="example-form w-100">
-        <mat-form-field
-          class="w-100 bg-white header-form-field"
-          ngDefaultControl
-          subscriptSizing="dynamic"
-          appearance="outline"
+<app-dialog-template-core [title]="getDialogTitle()">
+  <ng-container content>
+    <form>
+      <mat-form-field
+        class="w-100 bg-white header-form-field"
+        ngDefaultControl
+        subscriptSizing="dynamic"
+        appearance="outline"
+      >
+        <input
+          type="text"
+          placeholder="Nach Name oder E-Mail suchen"
+          aria-label="Nach Name oder E-Mail suchen"
+          matInput
+          [formControl]="search"
+          [matAutocomplete]="auto"
+          [attr.data-testId]="'search-member-to-add'"
+        />
+        <mat-autocomplete
+          #auto="matAutocomplete"
+          (optionSelected)="selectUser($event.option.value)"
+          [displayWith]="getDisplayValue"
         >
-          <input
-            type="text"
-            placeholder="Nach Name oder E-Mail suchen"
-            aria-label="Nach Name oder E-Mail suchen"
-            matInput
-            [formControl]="search"
-            [matAutocomplete]="auto"
-            [attr.data-testId]="'search-member-to-add'"
-          />
-          <mat-autocomplete
-            #auto="matAutocomplete"
-            (optionSelected)="selectUser($event.option.value)"
-            [displayWith]="getDisplayValue"
-          >
-            <mat-option *ngFor="let user of usersForSelection$ | async" [value]="user">
-              {{ getDisplayValue(user) }}
-            </mat-option>
-          </mat-autocomplete>
-        </mat-form-field>
-      </form>
-    </div>
-    <div class="w-100" *ngIf="dataSource">
+          <mat-option *ngFor="let user of usersForSelection$ | async" [value]="user">
+            {{ getDisplayValue(user) }}
+          </mat-option>
+        </mat-autocomplete>
+      </mat-form-field>
+    </form>
+    <div *ngIf="dataSource">
       <table mat-table [dataSource]="dataSource" class="okr-table" id="all-member-table">
         <ng-container matColumnDef="name">
           <td mat-cell *matCellDef="let element">{{ getDisplayValue(element) }}</td>
@@ -52,12 +46,9 @@
         <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       </table>
     </div>
-  </div>
-</mat-dialog-content>
-
-<mat-dialog-actions>
-  <div class="d-flex justify-content-between p-0 mt-2" mat-dialog-actions>
-    <div class="d-flex p-0">
+  </ng-container>
+  <ng-container actions>
+    <div class="col-auto">
       <button
         [attr.data-testId]="'save'"
         [disabled]="!(selectedUsers$ | async)?.length"
@@ -68,7 +59,7 @@
       >
         Hinzufügen
       </button>
-      <button color="primary" mat-button mat-dialog-close class="ms-2">Abbrechen</button>
+      <button color="primary" mat-button mat-dialog-close>Abbrechen</button>
     </div>
-  </div>
-</mat-dialog-actions>
+  </ng-container>
+</app-dialog-template-core>
diff --git a/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.html b/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.html
index 0ebeead56d..74ffc40975 100644
--- a/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.html
+++ b/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.html
@@ -1,41 +1,30 @@
-<section mat-dialog-title>
-  <div class="d-flex justify-content-between align-items-center position-relative dialog-header mt-1">
-    <span class="title w-100 mb-2">
-      <span>Members registrieren</span>
-    </span>
-  </div>
-</section>
-<mat-dialog-content>
-  <div class="dialog-content" tabindex="-1">
-    <form>
-      @for (userFormGroup of form.controls; track $index) {
-        <div class="w-100 d-flex justify-content-between align-items-center pe-4">
-          <app-new-user
-            (removeUser)="removeUser($index)"
-            [index]="$index"
-            [userFormGroup]="userFormGroup"
-            [triedToSubmit]="triedToSubmit"
-          ></app-new-user>
-        </div>
-      }
-      <div class="w-100 d-flex justify-content-start">
-        <button (click)="addUser()" class="px-0 mb-3 pe-2 align-new-icon" color="primary" mat-button>
-          <span class="d-flex align-items-center fw-bold add-text">
-            <img alt="Add User button" class="add-cross-button" src="/assets/icons/new-icon.svg" />
-            Weiterer Member hinzufügen
-          </span>
-        </button>
+<app-dialog-template-core [title]="'Members registrieren'">
+  <ng-container content>
+    @for (userFormGroup of form.controls; track $index) {
+      <div class="okr-form-row align-items-center pe-4">
+        <app-new-user
+          (removeUser)="removeUser($index)"
+          [index]="$index"
+          [userFormGroup]="userFormGroup"
+          [triedToSubmit]="triedToSubmit"
+        ></app-new-user>
       </div>
-    </form>
-  </div>
-</mat-dialog-content>
-<mat-dialog-actions>
-  <div class="d-flex justify-content-between p-0 mt-2" mat-dialog-actions>
-    <div class="d-flex p-0">
+    }
+    <div class="okr-form-row">
+      <button (click)="addUser()" class="col-auto" color="primary" mat-button>
+        <span class="d-flex align-items-center fw-bold">
+          <img alt="Add User button" class="add-cross-button" src="/assets/icons/new-icon.svg" />
+          Weiterer Member hinzufügen
+        </span>
+      </button>
+    </div>
+  </ng-container>
+  <ng-container actions>
+    <div class="col-auto">
       <button color="primary" [attr.data-testId]="'invite'" mat-flat-button type="submit" (click)="registerUsers()">
         Einladen
       </button>
-      <button color="primary" mat-button mat-dialog-close class="ms-2">Abbrechen</button>
+      <button color="primary" mat-button mat-dialog-close>Abbrechen</button>
     </div>
-  </div>
-</mat-dialog-actions>
+  </ng-container>
+</app-dialog-template-core>
diff --git a/frontend/src/app/team-management/member-detail/member-detail.component.spec.ts b/frontend/src/app/team-management/member-detail/member-detail.component.spec.ts
index d7d7dc1fca..3ba5c57493 100644
--- a/frontend/src/app/team-management/member-detail/member-detail.component.spec.ts
+++ b/frontend/src/app/team-management/member-detail/member-detail.component.spec.ts
@@ -1,7 +1,6 @@
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { MemberDetailComponent } from './member-detail.component';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, provideRouter } from '@angular/router';
 import { delay, of } from 'rxjs';
 import { TranslateModule } from '@ngx-translate/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -18,6 +17,9 @@ import { PuzzleIconComponent } from '../../shared/custom/puzzle-icon/puzzle-icon
 import { CommonModule } from '@angular/common';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { DialogService } from '../../services/dialog.service';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { DialogTemplateCoreComponent } from '../../shared/custom/dialog-template-core/dialog-template-core.component';
 
 describe('MemberDetailComponent', () => {
   let component: MemberDetailComponent;
@@ -44,6 +46,7 @@ describe('MemberDetailComponent', () => {
 
   const dialogServiceMock = {
     open: jest.fn(),
+    openConfirmDialog: jest.fn(),
   };
 
   beforeEach(async () => {
@@ -54,17 +57,13 @@ describe('MemberDetailComponent', () => {
         ShowEditRoleComponent,
         PuzzleIconButtonComponent,
         PuzzleIconComponent,
+        DialogTemplateCoreComponent,
       ],
-      imports: [
-        HttpClientTestingModule,
-        TranslateModule.forRoot(),
-        BrowserModule,
-        SharedModule,
-        MatTableModule,
-        MatIconModule,
-        CommonModule,
-      ],
+      imports: [TranslateModule.forRoot(), BrowserModule, SharedModule, MatTableModule, MatIconModule, CommonModule],
       providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideHttpClientTesting(),
         { provide: ActivatedRoute, useValue: activatedRouteMock },
         { provide: UserService, useValue: userServiceMock },
         { provide: TeamService, useValue: teamServiceMock },
@@ -112,7 +111,7 @@ describe('MemberDetailComponent', () => {
     const userTeam = testUser.userTeamList[0];
     teamServiceMock.removeUserFromTeam.mockReturnValue(of());
     userServiceMock.getUserById.mockReturnValue(of(user));
-    dialogServiceMock.open.mockReturnValue({
+    dialogServiceMock.openConfirmDialog.mockReturnValue({
       afterClosed: () => of(true),
     });
 
@@ -129,7 +128,7 @@ describe('MemberDetailComponent', () => {
     const userTeam = testUser.userTeamList[0];
     teamServiceMock.removeUserFromTeam.mockReturnValue(of());
     userServiceMock.getUserById.mockReturnValue(of(user));
-    dialogServiceMock.open.mockReturnValue({
+    dialogServiceMock.openConfirmDialog.mockReturnValue({
       afterClosed: () => of(false),
     });
 
diff --git a/frontend/src/app/team-management/member-detail/member-detail.component.ts b/frontend/src/app/team-management/member-detail/member-detail.component.ts
index e407144f63..63b79efbf7 100644
--- a/frontend/src/app/team-management/member-detail/member-detail.component.ts
+++ b/frontend/src/app/team-management/member-detail/member-detail.component.ts
@@ -8,7 +8,6 @@ import { UserTeam } from '../../shared/types/model/UserTeam';
 import { TranslateService } from '@ngx-translate/core';
 import { MatTable } from '@angular/material/table';
 import { TeamService } from '../../services/team.service';
-import { CancelDialogComponent } from '../../shared/dialog/cancel-dialog/cancel-dialog.component';
 import { DialogService } from '../../services/dialog.service';
 
 @Component({
@@ -79,12 +78,12 @@ export class MemberDetailComponent implements OnInit, OnDestroy {
   }
 
   removeUserFromTeam(userTeam: UserTeam, user: User) {
+    const i18nData = {
+      user: getFullNameFromUser(user),
+      team: userTeam.team.name,
+    };
     this.dialogService
-      .open(CancelDialogComponent, {
-        data: {
-          dialogTitle: getFullNameFromUser(user) + ` wirklich aus Team ${userTeam.team.name} entfernen?`,
-        },
-      })
+      .openConfirmDialog('CONFIRMATION.DELETE.USER_FROM_TEAM', i18nData)
       .afterClosed()
       .pipe(
         filter((confirm) => confirm),
diff --git a/frontend/src/app/team-management/member-list/member-list-table/member-list-table.component.spec.ts b/frontend/src/app/team-management/member-list/member-list-table/member-list-table.component.spec.ts
index c28ce3d90d..aec9651433 100644
--- a/frontend/src/app/team-management/member-list/member-list-table/member-list-table.component.spec.ts
+++ b/frontend/src/app/team-management/member-list/member-list-table/member-list-table.component.spec.ts
@@ -29,6 +29,7 @@ describe('MemberListTableComponent', () => {
 
   const dialogService = {
     open: jest.fn(),
+    openConfirmDialog: jest.fn(),
   };
 
   beforeEach(async () => {
@@ -94,7 +95,7 @@ describe('MemberListTableComponent', () => {
     teamServiceMock.removeUserFromTeam.mockReturnValue(of(null));
     userServiceMock.reloadUsers.mockReturnValue(of());
     userServiceMock.reloadCurrentUser.mockReturnValue(of());
-    dialogService.open.mockReturnValue({
+    dialogService.openConfirmDialog.mockReturnValue({
       afterClosed: () => of(true),
     });
 
@@ -115,7 +116,7 @@ describe('MemberListTableComponent', () => {
     teamServiceMock.removeUserFromTeam.mockReturnValue(of(null));
     userServiceMock.reloadUsers.mockReturnValue(of());
     userServiceMock.reloadCurrentUser.mockReturnValue(of());
-    dialogService.open.mockReturnValue({
+    dialogService.openConfirmDialog.mockReturnValue({
       afterClosed: () => of(false),
     });
 
diff --git a/frontend/src/app/team-management/member-list/member-list-table/member-list-table.component.ts b/frontend/src/app/team-management/member-list/member-list-table/member-list-table.component.ts
index db9f7cb95d..1c1f587343 100644
--- a/frontend/src/app/team-management/member-list/member-list-table/member-list-table.component.ts
+++ b/frontend/src/app/team-management/member-list/member-list-table/member-list-table.component.ts
@@ -1,14 +1,13 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { UserTableEntry } from '../../../shared/types/model/UserTableEntry';
-import { User } from '../../../shared/types/model/User';
+import { getFullNameFromUser, User } from '../../../shared/types/model/User';
 import { Team } from '../../../shared/types/model/Team';
 import { TeamService } from '../../../services/team.service';
 import { UserService } from '../../../services/user.service';
 import { getRouteToUserDetails } from '../../../shared/routeUtils';
 import { BehaviorSubject, filter, mergeMap, Subject, takeUntil } from 'rxjs';
 import { UserTeam } from '../../../shared/types/model/UserTeam';
-import { CancelDialogComponent } from '../../../shared/dialog/cancel-dialog/cancel-dialog.component';
 import { DialogService } from '../../../services/dialog.service';
 
 @Component({
@@ -57,13 +56,12 @@ export class MemberListTableComponent implements OnInit, OnDestroy {
   removeMemberFromTeam(entry: UserTableEntry, event: MouseEvent) {
     event.stopPropagation();
     event.preventDefault();
-
+    const i18nData = {
+      user: `${entry.firstname} ${entry.lastname}`,
+      team: this.selectedTeam$.value?.name,
+    };
     this.dialogService
-      .open(CancelDialogComponent, {
-        data: {
-          dialogTitle: `${entry.firstname} ${entry.lastname} wirklich aus Team ${this.selectedTeam$.value?.name} entfernen?`,
-        },
-      })
+      .openConfirmDialog('CONFIRMATION.DELETE.USER_FROM_TEAM', i18nData)
       .afterClosed()
       .pipe(
         filter((confirm) => confirm),
diff --git a/frontend/src/app/team-management/member-list/member-list.component.spec.ts b/frontend/src/app/team-management/member-list/member-list.component.spec.ts
index 2d5d822c51..b54e9ee180 100644
--- a/frontend/src/app/team-management/member-list/member-list.component.spec.ts
+++ b/frontend/src/app/team-management/member-list/member-list.component.spec.ts
@@ -1,10 +1,10 @@
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, provideRouter, Router } from '@angular/router';
 import { ChangeDetectorRef } from '@angular/core';
 import { of } from 'rxjs';
 import { MemberListComponent } from './member-list.component';
 import { UserService } from '../../services/user.service';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { User } from '../../shared/types/model/User';
 import { team1, team2, team3, testUser, users } from '../../shared/testData';
 import { convertFromUser, convertFromUsers, UserTableEntry } from '../../shared/types/model/UserTableEntry';
@@ -18,6 +18,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MemberListTableComponent } from './member-list-table/member-list-table.component';
 import { MemberListMobileComponent } from './member-list-mobile/member-list-mobile.component';
 import { DialogService } from '../../services/dialog.service';
+import { provideHttpClient } from '@angular/common/http';
 
 const userServiceMock = {
   getUsers: jest.fn(),
@@ -42,6 +43,7 @@ const routerMock = {
 
 const dialogService = {
   open: jest.fn(),
+  openConfirmDialog: jest.fn(),
 };
 
 describe('MemberListComponent', () => {
@@ -51,8 +53,11 @@ describe('MemberListComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [MemberListComponent, MemberListTableComponent, MemberListMobileComponent],
-      imports: [HttpClientTestingModule, TranslateTestingModule, BrowserAnimationsModule],
+      imports: [TranslateTestingModule, BrowserAnimationsModule],
       providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideHttpClientTesting(),
         { provide: UserService, useValue: userServiceMock },
         { provide: ActivatedRoute, useValue: activatedRouteMock },
         { provide: TeamService, useValue: teamServiceMock },
@@ -180,7 +185,7 @@ describe('MemberListComponent', () => {
   it('deleteTeam should trigger teamService.deleteTeam and navigate', fakeAsync(() => {
     routerMock.navigateByUrl.mockReturnValue(of(null));
     teamServiceMock.deleteTeam.mockReturnValue(of(null));
-    dialogService.open.mockReturnValue({
+    dialogService.openConfirmDialog.mockReturnValue({
       afterClosed: () => of(true),
     });
 
@@ -200,7 +205,7 @@ describe('MemberListComponent', () => {
   it('deleteTeam should not trigger teamService.deleteTeam if dialog is canceled', fakeAsync(() => {
     routerMock.navigateByUrl.mockReturnValue(of(null));
     teamServiceMock.deleteTeam.mockReturnValue(of(null));
-    dialogService.open.mockReturnValue({
+    dialogService.openConfirmDialog.mockReturnValue({
       afterClosed: () => of(false),
     });
 
diff --git a/frontend/src/app/team-management/member-list/member-list.component.ts b/frontend/src/app/team-management/member-list/member-list.component.ts
index 4efb6b8cb6..1ae5ba4865 100644
--- a/frontend/src/app/team-management/member-list/member-list.component.ts
+++ b/frontend/src/app/team-management/member-list/member-list.component.ts
@@ -9,7 +9,6 @@ import { Team } from '../../shared/types/model/Team';
 import { AddMemberToTeamDialogComponent } from '../add-member-to-team-dialog/add-member-to-team-dialog.component';
 import { AddEditTeamDialog } from '../add-edit-team-dialog/add-edit-team-dialog.component';
 import { MatTableDataSource } from '@angular/material/table';
-import { CancelDialogComponent, CancelDialogData } from '../../shared/dialog/cancel-dialog/cancel-dialog.component';
 import { InviteUserDialogComponent } from '../invite-user-dialog/invite-user-dialog.component';
 import { DialogService } from '../../services/dialog.service';
 
@@ -85,13 +84,12 @@ export class MemberListComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   deleteTeam(selectedTeam: Team) {
+    const data = {
+      team: selectedTeam.name,
+    };
+
     this.dialogService
-      .open(CancelDialogComponent, {
-        data: {
-          dialogTitle: selectedTeam.name + ' wirklich löschen?',
-          dialogText: 'Soll das Team und dessen OKRs wirklich gelöscht werden?',
-        },
-      })
+      .openConfirmDialog('CONFIRMATION.DELETE.TEAM', data)
       .afterClosed()
       .pipe(
         filter((confirm) => confirm),
diff --git a/frontend/src/assets/i18n/de.json b/frontend/src/assets/i18n/de.json
index 386e2a596d..f723866d85 100644
--- a/frontend/src/assets/i18n/de.json
+++ b/frontend/src/assets/i18n/de.json
@@ -47,8 +47,8 @@
         "TEXT": "Möchtest du die Action wirklich löschen?"
       },
       "TEAM":{
-        "TITLE": "Löschen bestätigen",
-        "TEXT": "Möchtest du dieses Team wirklich löschen? Zugehörige Objectives werden dadurch in allen Quartalen ebenfalls gelöscht!"
+        "TITLE": "Team löschen",
+        "TEXT": "Möchtest du das Team '{{team}}' wirklich löschen? Zugehörige Objectives werden dadurch in allen Quartalen ebenfalls gelöscht!"
       },
       "OBJECTIVE":{
         "TITLE": "Objective löschen",
@@ -57,6 +57,10 @@
       "KEYRESULT":{
         "TITLE": "Key Result löschen",
         "TEXT": "Möchtest du dieses Key Result wirklich löschen? Zugehörige Check-ins werden dadurch ebenfalls gelöscht!"
+      },
+      "USER_FROM_TEAM":{
+        "TITLE": "Mitglied entfernen",
+        "TEXT": "Möchtest du {{user}} wirklich aus dem Team '{{team}}' entfernen?"
       }
     }
   },
diff --git a/frontend/src/style/_variables.scss b/frontend/src/style/_variables.scss
index ddf5eb6b58..58c52163cb 100644
--- a/frontend/src/style/_variables.scss
+++ b/frontend/src/style/_variables.scss
@@ -16,7 +16,10 @@ $keyResult-attribute-bg: #ffffff;
 $keyResult-attribute-edit-border: #ddddddff;
 
 $error-color: #b3261b;
-$show-element: #f5f5f5;
+$display-element: #f5f5f5;
+
+$dialog-action-buttons-div-height: 52px;
+$dialog-content-padding-y: 20px;
 
 $pz-dark-blue-palette: (
   50: lighten($pz-dark-blue, 50%),
@@ -48,7 +51,9 @@ $pz-dark-blue-palette: (
   --mdc-text-button-label-text-tracking: normal;
   --mdc-filled-button-label-text-tracking: normal;
   --mdc-outlined-button-label-text-tracking: normal;
-
+  --mat-dialog-headline-padding: 0 0 0 12px;
+  --mat-dialog-actions-padding: 0 12px 0 12px;
+  --mat-dialog-with-actions-content-padding: #{$dialog-content-padding-y} 12px;
   --okr-topbar-background-color: #1e5a96;
   --okr-banner-background-color: #dcedf9;
 }
diff --git a/frontend/src/style/custom_angular.components.scss b/frontend/src/style/custom_angular.components.scss
index 6ba0c63562..46e8b82be5 100644
--- a/frontend/src/style/custom_angular.components.scss
+++ b/frontend/src/style/custom_angular.components.scss
@@ -21,7 +21,6 @@
 
 .mdc-button--outlined {
   padding: 0 16px 0 16px !important;
-  margin-left: 8px !important;
 }
 
 .ordinal-zone .mdc-form-field,
@@ -49,15 +48,6 @@
   display: none !important;
 }
 
-.mat-mdc-dialog-surface {
-  padding: 1rem 0 1rem 0;
-}
-
-mat-dialog-content,
-mat-dialog-actions {
-  padding: 0 1.62rem 0 1.62rem !important;
-}
-
 //Offset for top bar
 .cdk-overlay-backdrop.cdk-overlay-dark-backdrop.cdk-overlay-backdrop-showing {
   margin-top: $top-bar-height;
@@ -101,3 +91,7 @@ $scale-gap: 0.1;
 #toast-container {
   position: fixed;
 }
+
+.mat-mdc-dialog-surface {
+  overflow: unset !important;
+}
diff --git a/frontend/src/style/custom_bootstrap.scss b/frontend/src/style/custom_bootstrap.scss
index b19d25c264..d85da68297 100644
--- a/frontend/src/style/custom_bootstrap.scss
+++ b/frontend/src/style/custom_bootstrap.scss
@@ -2,8 +2,9 @@
 $theme-colors: (
   "pz-dark-blue": $pz-dark-blue,
   "eggshell": $eggshell,
-  "display-element": $show-element,
+  "display-element": $display-element,
   "keyResult-attribute": $keyResult-attribute-bg,
   "error": $error,
 );
+$enable-negative-margins: true;
 @import "bootstrap";
diff --git a/frontend/src/style/styles.scss b/frontend/src/style/styles.scss
index 2db46bbbae..c7fabb933a 100644
--- a/frontend/src/style/styles.scss
+++ b/frontend/src/style/styles.scss
@@ -25,7 +25,6 @@ body.okr {
 
   p {
     margin: 0;
-    padding: 0;
   }
 
   a {
@@ -75,6 +74,16 @@ body.okr {
   border: solid $keyResult-attribute-edit-border 1px;
 }
 
+.dialog-data-show {
+  @extend .okr-form-label;
+  @extend .linebreak;
+  @extend .bg-display-element;
+  @extend .fs-6;
+  @extend .fw-normal;
+  @extend .px-2;
+  @extend .py-1;
+}
+
 .bg-grey {
   background-color: $overview-bg;
 }
@@ -93,25 +102,10 @@ body pzsh-backdrop {
   }
 }
 
-.dialog {
-  max-width: 769px;
-  box-shadow:
-    0 0 0 0 rgba(0, 0, 0, 0.06),
-    1px 1px 2px 0 rgba(0, 0, 0, 0.06),
-    3px 3px 4px 0 rgba(0, 0, 0, 0.05),
-    8px 6px 6px 0 rgba(0, 0, 0, 0.03),
-    14px 11px 7px 0 rgba(0, 0, 0, 0.01),
-    21px 18px 8px 0 rgba(0, 0, 0, 0);
-}
-
 .disable-scrolling {
   overflow-y: hidden;
 }
 
-input textarea {
-  outline-color: #909090;
-}
-
 .panel {
   max-width: 800px;
   @extend .col-md-12;
@@ -121,6 +115,10 @@ input textarea {
   margin-top: $top-bar-height;
 }
 
+input textarea {
+  outline-color: #909090;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -141,13 +139,14 @@ input[type="text"] {
   @extend .ps-1;
 }
 
-.big-dialog-form-field {
-  height: 4.375rem !important;
+.dialog-form-field {
+  width: 100%;
   padding: 0.437rem 0.625rem 0.375rem 0.625rem !important;
 }
 
-.dialog-form-field {
-  padding: 0.437rem 0.625rem 0.375rem 0.625rem !important;
+.big-dialog-form-field {
+  @extend .dialog-form-field;
+  height: 4.375rem !important;
 }
 
 .mat-mdc-checkbox .mdc-form-field {
@@ -162,9 +161,8 @@ input[type="text"] {
 
 .custom-select {
   border: solid 1px #909090;
-  padding: 0.44rem 0.625rem 0.375rem 0.625rem;
+  @extend .dialog-form-field;
   cursor: pointer;
-  width: 9.625rem;
   height: 1.18rem;
   box-sizing: content-box;
 }
@@ -224,47 +222,6 @@ mat-form-field.quarter-filter .mat-mdc-text-field-wrapper {
   margin-bottom: 1rem;
 }
 
-.scroll-shadows {
-  max-height: 80vh;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  overflow-scrolling: touch;
-
-  background:
-    /* Shadow Cover TOP */
-    linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top,
-    /* Shadow Cover BOTTOM */ linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom,
-    /* Shadow TOP */ radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top,
-    /* Shadow BOTTOM */ radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;
-
-  background-repeat: no-repeat;
-  background-size:
-    100% 40px,
-    100% 40px,
-    100% 14px,
-    100% 14px;
-  background-attachment: local, local, scroll, scroll;
-}
-
-.scroll-shadows {
-  --scrollbarBG: transparent;
-  --thumbBG: #90a4ae;
-
-  scrollbar-width: thin;
-  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
-}
-.scroll-shadows::-webkit-scrollbar {
-  width: 6px;
-}
-.scroll-shadows::-webkit-scrollbar-track {
-  background: var(--scrollbarBG);
-}
-.scroll-shadows::-webkit-scrollbar-thumb {
-  background-color: var(--thumbBG);
-  border-radius: 6px;
-  border: 3px solid var(--scrollbarBG);
-}
-
 .sub-title-keyresult {
   font-size: 0.9rem !important;
 }
@@ -297,6 +254,10 @@ img.add-cross-button {
   height: 0;
 }
 
+.h-fit {
+  height: fit-content;
+}
+
 .break-word {
   word-break: break-all;
 }
@@ -372,7 +333,52 @@ table.okr-table {
 }
 
 .okr-dialog-panel {
+  margin-top: $top-bar-height;
+  max-height: calc(100vh - $top-bar-height);
   @extend .col-12;
+}
 
+.okr-dialog-panel-default {
+  @extend .okr-dialog-panel;
+  @extend .col-sm-8;
   @extend .col-md-6;
+  @extend .col-lg-5;
+  @extend .col-xxl-4;
+  @include media-breakpoint-down(sm) {
+    height: 100%;
+  }
+}
+
+.okr-dialog-panel-small {
+  @extend .okr-dialog-panel;
+  @extend .col-sm-8;
+  @extend .col-md-6;
+  @extend .col-lg-5;
+  @extend .col-xl-4;
+  @extend .col-xxl-3;
+}
+
+.okr-form-container {
+  @extend .container-fluid;
+}
+
+.okr-form-row {
+  @extend .row;
+}
+
+.okr-form-col {
+  @extend .col-12;
+}
+
+.okr-form-label {
+  color: black;
+  @extend .py-1;
+}
+
+// Is used to style the input fields in the OKR form globally
+.okr-form-input {
+  @extend .okr-form-col;
+}
+
+.okr-form-label-input-container {
 }