diff --git a/web/src/app/administration/components/classification-details/classification-details.component.html b/web/src/app/administration/components/classification-details/classification-details.component.html
index a482ce89a..0328e58cd 100644
--- a/web/src/app/administration/components/classification-details/classification-details.component.html
+++ b/web/src/app/administration/components/classification-details/classification-details.component.html
@@ -4,8 +4,16 @@
 
     <!-- TITLE + ACTION BUTTONS -->
     <mat-toolbar class="action-toolbar">
-      <h4 class="action-toolbar__headline">{{classification.name}}&nbsp; [{{classification.type}}]
-        <span *ngIf="isCreatingNewClassification" class="action-toolbar__badge-message"> {{badgeMessage$ | async}}</span>
+      <h4 class="action-toolbar__headline">
+        <span
+          class="{{isCreatingNewClassification? 'action-toolbar__title-badge' : 'action-toolbar__title'}}"
+          matTooltip="{{classification.name}}&nbsp; [{{classification.type}}]">
+          {{classification.name}}&nbsp; [{{classification.type}}]
+        </span>
+        <span
+          *ngIf="isCreatingNewClassification" class="action-toolbar__badge-message" matTooltip="{{badgeMessage$ | async}}">
+          {{badgeMessage$ | async}}
+        </span>
       </h4>
 
       <div>
diff --git a/web/src/app/administration/components/classification-details/classification-details.component.scss b/web/src/app/administration/components/classification-details/classification-details.component.scss
index fae6f9958..8fc1e696e 100644
--- a/web/src/app/administration/components/classification-details/classification-details.component.scss
+++ b/web/src/app/administration/components/classification-details/classification-details.component.scss
@@ -21,15 +21,36 @@
 
   &__headline {
     font-size: 1.5rem;
-    padding: 0.5rem;
-    max-width: calc(100% - 350px);
+    padding: 0 0.5rem 0.5rem 0.5rem;
+    max-width: calc(100% - 350px) !important;
+  }
+
+  &__title {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    position: relative;
+    top: 8px;
+  }
+
+  &__title-badge {
+    display: block;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   &__badge-message {
-    font-size: 13px;
+    display: block;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 20px;
+    font-size: 1rem;
     background-color: $transparent-grey;
+    border-radius: 4px;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &__button {
diff --git a/web/src/app/administration/components/classification-details/classification-details.component.spec.ts b/web/src/app/administration/components/classification-details/classification-details.component.spec.ts
index 9e9277d42..440728252 100644
--- a/web/src/app/administration/components/classification-details/classification-details.component.spec.ts
+++ b/web/src/app/administration/components/classification-details/classification-details.component.spec.ts
@@ -32,6 +32,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { By } from '@angular/platform-browser';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({ selector: 'taskana-shared-field-error-display', template: '' })
 class FieldErrorDisplayStub {
@@ -129,6 +130,7 @@ describe('ClassificationDetailsComponent', () => {
         MatSelectModule,
         MatProgressBarModule,
         MatMenuModule,
+        MatTooltipModule,
         BrowserAnimationsModule
       ],
       declarations: [ClassificationDetailsComponent, InputStub, FieldErrorDisplayStub, SvgIconStub, TextareaStub],
@@ -274,7 +276,7 @@ describe('ClassificationDetailsComponent', () => {
     expect(headline).toBeTruthy();
     expect(headline.textContent).toContain('Recommendation');
     expect(headline.textContent).toContain('DOCUMENT');
-    const badgeMessage = headline.children[0];
+    const badgeMessage = headline.children[1];
     expect(badgeMessage).toBeTruthy();
     expect(badgeMessage.textContent.trim()).toBe('Creating new classification');
   });
diff --git a/web/src/app/administration/components/workbasket-details/workbasket-details.component.html b/web/src/app/administration/components/workbasket-details/workbasket-details.component.html
index 6adff586f..aa84109d5 100644
--- a/web/src/app/administration/components/workbasket-details/workbasket-details.component.html
+++ b/web/src/app/administration/components/workbasket-details/workbasket-details.component.html
@@ -1,8 +1,8 @@
 <div class="workbasket-details">
   <mat-toolbar class="workbasket-details__toolbar">
     <h4 class="workbasket-details__title">
-      <span class="workbasket-details__title-name">{{workbasket.name}}</span>
-      <span class="workbasket-details__title-badge"> {{ badgeMessage$ | async }}</span>
+      <span class="workbasket-details__title-name" matTooltip="{{workbasket.name}}">{{workbasket.name}}</span>
+      <span class="workbasket-details__title-badge" matTooltip="{{ badgeMessage$ | async }}"> {{ badgeMessage$ | async }}</span>
     </h4>
     <span class="workbasket-details__spacer"></span>
     <button mat-button class="workbasket-details__button workbasket-details__save-button"
diff --git a/web/src/app/administration/components/workbasket-details/workbasket-details.component.scss b/web/src/app/administration/components/workbasket-details/workbasket-details.component.scss
index 29c32cb7e..12f2a4ef5 100644
--- a/web/src/app/administration/components/workbasket-details/workbasket-details.component.scss
+++ b/web/src/app/administration/components/workbasket-details/workbasket-details.component.scss
@@ -9,18 +9,24 @@
   &__title {
     font-size: 1.5rem;
     padding: 4px;
+    max-width: 392px;
   }
 
   &__title-name {
     display: block;
-    max-width: 392px;
+
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   &__title-badge {
-    background-color: $brown;
+    font-size: 1.1rem;
+    background-color: $transparent-grey;
     border-radius: 4px;
+
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &__spacer {
diff --git a/web/src/app/administration/components/workbasket-details/workbasket-details.component.spec.ts b/web/src/app/administration/components/workbasket-details/workbasket-details.component.spec.ts
index 18b9df38e..8e6a53def 100644
--- a/web/src/app/administration/components/workbasket-details/workbasket-details.component.spec.ts
+++ b/web/src/app/administration/components/workbasket-details/workbasket-details.component.spec.ts
@@ -27,6 +27,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CopyWorkbasket, CreateWorkbasket } from '../../../shared/store/workbasket-store/workbasket.actions';
 import { take } from 'rxjs/operators';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({ selector: 'taskana-administration-workbasket-information', template: '<div>i</div>' })
 class WorkbasketInformationStub {
@@ -91,6 +92,7 @@ describe('WorkbasketDetailsComponent', () => {
         MatTabsModule,
         MatMenuModule,
         MatToolbarModule,
+        MatTooltipModule,
         BrowserAnimationsModule
       ],
       declarations: [