diff --git a/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.html b/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.html
index d1a2d88d2e2748bee8f28b7b1d2e6b2da75ab68c..654a4790214702818bc615b1dbbfac0704e4e7c7 100644
--- a/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.html
+++ b/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.html
@@ -5,7 +5,11 @@
   [attr.aria-label]="'Anhang: Dateiname: ' + file.name"
 >
   <ods-spinner-icon spinner *ngIf="isLoading" class="mr-3 size-10" />
-  <ods-icon icon name="file-pdf" class="mr-3 size-10 fill-primary"></ods-icon>
+  <ods-icon
+    icon
+    [name]="'file-' + getIconType(file.contentType)"
+    class="mr-3 size-10 fill-primary"
+  ></ods-icon>
   <button
     close
     *ngIf="deletable"
diff --git a/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.ts b/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.ts
index 6f1998b2664b55bc1719190dd6d6b4a1c39e95cb..753c84cb67efd653d9794937dc835a9d7bf5aeed 100644
--- a/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.ts
+++ b/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.ts
@@ -34,6 +34,11 @@ export class BinaryFile2Component {
     return isNil(this.stateResource) ? createEmptyStateResource<Resource>() : this.stateResource;
   }
 
+  getIconType(type: string): string {
+    if (type.startsWith('image')) return 'image';
+    return type.split('/')[1];
+  }
+
   downloadFile(): void {
     this.startDownload.emit(this.file);
   }
diff --git a/alfa-client/libs/design-system/src/lib/attachment/attachment.component.html b/alfa-client/libs/design-system/src/lib/attachment/attachment.component.html
index c19e0ec5a9a06d5c44c397b5814fbfb673ace87d..e966b625ceeaec2407538bc0e8c12bc8871ff8bb 100644
--- a/alfa-client/libs/design-system/src/lib/attachment/attachment.component.html
+++ b/alfa-client/libs/design-system/src/lib/attachment/attachment.component.html
@@ -4,7 +4,7 @@
   <ng-content select="[spinner]"></ng-content>
   <ng-content select="[icon]"></ng-content>
   <div class="flex w-full flex-col items-start">
-    <p class="text-sm">{{ documentName }}</p>
+    <p class="text-sm text-start">{{ documentName }}</p>
     <p class="text-xs text-ozggray-600">{{ description }}</p>
   </div>
   <ng-content select="[close]"></ng-content>
diff --git a/alfa-client/libs/design-system/src/lib/icon/icon.component.html b/alfa-client/libs/design-system/src/lib/icon/icon.component.html
index 11003f7f8dd043a604771721507429303bf4059d..620b50bea95bedfc130be7fd80ca453c0866309b 100644
--- a/alfa-client/libs/design-system/src/lib/icon/icon.component.html
+++ b/alfa-client/libs/design-system/src/lib/icon/icon.component.html
@@ -91,7 +91,7 @@
     viewBox="0 0 32 40"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    class="fill-pdf"
+    [ngClass]="getFileIconFill(name)"
   >
     <path
       d="M32 12L20 0H4C1.8 0 0.0200005 1.8 0.0200005 4L0 36C0 38.2 1.78 40 3.98 40H28C30.2 40 32 38.2 32 36V12ZM28 36H4V4H18V14H28V36Z"
diff --git a/alfa-client/libs/design-system/src/lib/icon/icon.component.ts b/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
index 769f8b82fcbd74ac1b1a8d77fe067708c0a1d992..e0dbf17fed7b12129a4755b599723e8168d06feb 100644
--- a/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
+++ b/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
@@ -11,4 +11,20 @@ export class IconComponent {
   @Input() name!: string;
   @Input() fillColor: string = 'black';
   @Input() size: string = '100%';
+
+  getFileIconFill(type: string): string {
+    switch (type.split('-')[1]) {
+      case 'pdf':
+      case 'exclamation':
+      case 'generate':
+      case 'upload':
+        return 'fill-pdf';
+      case 'doc':
+      case 'docx':
+        return 'fill-doc';
+      case 'image':
+        return 'fill-ozggray-800';
+    }
+    return 'fill-ozggray-300';
+  }
 }
diff --git a/alfa-client/libs/design-system/src/lib/tailwind-preset/root.css b/alfa-client/libs/design-system/src/lib/tailwind-preset/root.css
index 3954976c5bf8c792419d978d5a08ac789ad71e95..62ac309ea6b9d91a53348391c4b61a236771b4c0 100644
--- a/alfa-client/libs/design-system/src/lib/tailwind-preset/root.css
+++ b/alfa-client/libs/design-system/src/lib/tailwind-preset/root.css
@@ -24,6 +24,7 @@
   --color-abgelehnt-500: 0 100% 60%;
 
   --color-pdf: 4 62% 63%;
+  --color-doc: 219 63% 54%;
 }
 
 .dark {
diff --git a/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js b/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
index 12d6bbb46180572a187eed87845d44aacd166810..52c2c0698caedde5a831a2dae2d7aaa1e015fa99 100644
--- a/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
+++ b/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
@@ -51,8 +51,10 @@ module.exports = {
         ozggray: {
           100: 'hsl(0, 0%, 92%)',
           200: 'hsla(0, 0%, 94%)',
+          300: 'hsla(0, 0%, 77%)',
           600: 'hsla(0, 0%, 0%, 0.4)',
           700: 'hsl(213, 27%, 84%)',
+          800: 'hsl(0, 0%, 43%)',
           DEFAULT: 'hsl(0, 0%, 98%)',
         },
         background: {
@@ -74,6 +76,9 @@ module.exports = {
         pdf: {
           DEFAULT: 'hsl(var(--color-pdf) / <alpha-value>)',
         },
+        doc: {
+          DEFAULT: 'hsl(var(--color-doc) / <alpha-value>)',
+        },
         mainbg: 'hsl(var(--color-mainbg) / <alpha-value>)',
         primary: {
           600: 'hsl(var(--color-primary-600) / <alpha-value>)',