diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html
index 91e8c3f79a3f60c18d7bcbfe94f1d1bf4faaeb9e..d4a2682bda35f9bcf3deae0b5d798fb95654f1c7 100644
--- a/alfa-client/apps/demo/src/app/app.component.html
+++ b/alfa-client/apps/demo/src/app/app.component.html
@@ -14,6 +14,37 @@
       <nav>NAV</nav>
     </div>
     <main class="flex-auto bg-background-50 p-6">
+      <div class="w-96">
+        <ods-attachment-container>
+          <ods-attachment
+            documentName="Mein_2Bescheid.pdf"
+            description="234 kB"
+            fileType="pdf"
+            isLoading="true"
+          >
+          </ods-attachment>
+          <ods-attachment documentName="Mein_Bescheid.xml" description="234 kB" fileType="xml">
+          </ods-attachment>
+          <ods-attachment documentName="Mein_Bescheid.xml" description="234 kB" fileType="image">
+          </ods-attachment>
+          <ods-attachment documentName="Mein_Bescheid.doc" description="234 kB" fileType="doc">
+          </ods-attachment>
+          <ods-attachment documentName="Mein_Bescheid.doc" description="234 kB" fileType="doc">
+          </ods-attachment>
+          <ods-attachment
+            documentName="Mein_Bescheid.doc"
+            description="234 kB"
+            fileType="exclamation"
+          >
+          </ods-attachment>
+          <ods-attachment
+            documentName="Katzenanmeldung_1231231_eingsdfsdsdfdsfdsfsdfang.pdf"
+            description="234 kB"
+          >
+          </ods-attachment>
+        </ods-attachment-container>
+      </div>
+
       <form id="antrag_bescheiden_form" [formGroup]="exampleForm">
         <div class="my-10 flex gap-8">
           <ods-radio-button-card
diff --git a/alfa-client/apps/demo/src/app/app.component.ts b/alfa-client/apps/demo/src/app/app.component.ts
index 634638e05608dc3ad2c0552701d228bc43bde39f..3a3d5dcdb984c5cdaa9dcd3ab542f892056c8ff6 100644
--- a/alfa-client/apps/demo/src/app/app.component.ts
+++ b/alfa-client/apps/demo/src/app/app.component.ts
@@ -5,8 +5,10 @@ import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import {
   AttachmentComponent,
+  AttachmentContainerComponent,
   ButtonCardComponent,
   ButtonComponent,
+  FileIconComponent,
   FileUploadButtonComponent,
   IconComponent,
   RadioButtonCardComponent,
@@ -23,6 +25,7 @@ import { CustomStepperComponent } from './components/cdk-demo/custom-stepper.com
   imports: [
     CommonModule,
     AttachmentComponent,
+    AttachmentContainerComponent,
     ButtonComponent,
     ButtonCardComponent,
     FileUploadButtonComponent,
@@ -36,6 +39,7 @@ import { CustomStepperComponent } from './components/cdk-demo/custom-stepper.com
     ReactiveFormsModule,
     IconComponent,
     SpinnerIconComponent,
+    FileIconComponent,
   ],
   selector: 'app-root',
   templateUrl: './app.component.html',
diff --git a/alfa-client/libs/binary-file-shared/src/lib/binary-file.util.ts b/alfa-client/libs/binary-file-shared/src/lib/binary-file.util.ts
index dcdd8939eb3c999cde700d20863520a2d0e2ffc6..3d9fcf37461a78f01501f1e1e4cac6f3a7d52946 100644
--- a/alfa-client/libs/binary-file-shared/src/lib/binary-file.util.ts
+++ b/alfa-client/libs/binary-file-shared/src/lib/binary-file.util.ts
@@ -9,15 +9,15 @@ export function getBinaryFiles(
 }
 
 export enum BinaryFileIcon {
-  'application/pdf' = 'file-pdf',
-  'application/json' = 'file-json',
-  'application/msword' = 'file-doc',
-  'application/vnd.openxmlformats-officedocument.wordprocessingml.document' = 'file-doc',
-  'application/xml' = 'file-xml',
-  'text/xml' = 'file-xml',
-  'image/apng' = 'file-image',
-  'image/gif' = 'file-image',
-  'image/jpeg' = 'file-image',
-  'image/png' = 'file-image',
-  'image/svg+xml' = 'file-image',
+  'application/pdf' = 'pdf',
+  'application/json' = 'json',
+  'application/msword' = 'doc',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document' = 'doc',
+  'application/xml' = 'xml',
+  'text/xml' = 'xml',
+  'image/apng' = 'image',
+  'image/gif' = 'image',
+  'image/jpeg' = 'image',
+  'image/png' = 'image',
+  'image/svg+xml' = 'image',
 }
diff --git a/alfa-client/libs/binary-file/src/lib/binary-file.module.ts b/alfa-client/libs/binary-file/src/lib/binary-file.module.ts
index 8d28326a15b9737f9f3b719af7025ec85435a4d9..ae0c8284e34aa019fbd1dc4eac6a0118060fe69e 100644
--- a/alfa-client/libs/binary-file/src/lib/binary-file.module.ts
+++ b/alfa-client/libs/binary-file/src/lib/binary-file.module.ts
@@ -27,6 +27,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import {
   AttachmentComponent,
+  AttachmentContainerComponent,
   CloseIconComponent,
   IconComponent,
   SpinnerIconComponent,
@@ -45,6 +46,7 @@ import { VerticalBinaryFileListComponent } from './vertical-binary-file-list/ver
     UiModule,
     TechSharedModule,
     AttachmentComponent,
+    AttachmentContainerComponent,
     IconComponent,
     SpinnerIconComponent,
     CloseIconComponent,
diff --git a/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2-container.component.html b/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2-container.component.html
index f901ea0826e96e938dab2632af3d9d5c754531bb..900f40e8c731a255b749e5d9a4ad72b0237b7fd0 100644
--- a/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2-container.component.html
+++ b/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2-container.component.html
@@ -1,12 +1,14 @@
-<alfa-binary-file2
-  [attr.data-test-id]="(file.name | convertForDataTest) + '-file-item'"
-  [file]="file"
-  [stateResource]="fileStateResource$ | async"
-  [deletable]="deletable"
-  [isLoading]="isLoading"
-  [downloadToken]="downloadToken$ | async"
-  (startDownload)="startDownload($event)"
-  (startDelete)="startDelete.emit($event)"
-  (getDownloadToken)="getDownloadToken()"
->
-</alfa-binary-file2>
+<ods-attachment-container>
+  <alfa-binary-file2
+    [attr.data-test-id]="(file.name | convertForDataTest) + '-file-item'"
+    [file]="file"
+    [stateResource]="fileStateResource$ | async"
+    [deletable]="deletable"
+    [isLoading]="isLoading"
+    [downloadToken]="downloadToken$ | async"
+    (startDownload)="startDownload($event)"
+    (startDelete)="startDelete.emit($event)"
+    (getDownloadToken)="getDownloadToken()"
+  >
+  </alfa-binary-file2>
+</ods-attachment-container>
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 e429605d0349511b89c1301dbe1fc7c2b39847a8..df18911b6930eeffc8ad9ecb6157623948222cc6 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
@@ -1,15 +1,11 @@
 <ods-attachment
   [documentName]="file.name"
   [description]="file.size | fileSizePlain"
+  [fileType]="getIconType(file.contentType)"
   (click)="downloadFile()"
   [attr.aria-label]="'Anhang: Dateiname: ' + file.name"
+  [isLoading]="isLoading"
 >
-  <ods-spinner-icon spinner *ngIf="isLoading" size="xl" class="mr-3" />
-  <ods-icon
-    icon
-    [name]="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 75d55fdc2f7aae8e112484aea9313b041c7a435b..6118b4d86b30fae7b721cf1f34c44ca190bdc421 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
@@ -13,7 +13,6 @@ import { isEmpty, isNil } from 'lodash-es';
 @Component({
   selector: 'alfa-binary-file2',
   templateUrl: './binary-file2.component.html',
-  styles: [':host {@apply flex flex-grow}'],
 })
 export class BinaryFile2Component {
   @Input() file: BinaryFileResource;
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index 35ac2401caec6de46549607f55eb0d2ef6b503e5..c469330bf3ca0b0b60f7384feb3f6946573ce554 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -1,3 +1,4 @@
+export * from './lib/attachment-container/attachment-container.component';
 export * from './lib/attachment/attachment.component';
 export * from './lib/button-card/button-card.component';
 export * from './lib/button/button.component';
@@ -8,6 +9,7 @@ export * from './lib/icons/attachment-icon/attachment-icon.component';
 export * from './lib/icons/bescheid-generate-icon/bescheid-generate-icon.component';
 export * from './lib/icons/bescheid-upload-icon/bescheid-upload-icon.component';
 export * from './lib/icons/close-icon/close-icon.component';
+export * from './lib/icons/file-icon/file-icon.component';
 export * from './lib/icons/save-icon/save-icon.component';
 export * from './lib/icons/send-icon/send-icon.component';
 export * from './lib/icons/spinner-icon/spinner-icon.component';
diff --git a/alfa-client/libs/design-system/src/lib/attachment-container/attachment-container.component.spec.ts b/alfa-client/libs/design-system/src/lib/attachment-container/attachment-container.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5c799383d81b51dd6df2350ed794ed09c999df1f
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/attachment-container/attachment-container.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AttachmentContainerComponent } from './attachment-container.component';
+
+describe('AttachmentContainerComponent', () => {
+  let component: AttachmentContainerComponent;
+  let fixture: ComponentFixture<AttachmentContainerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AttachmentContainerComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AttachmentContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/alfa-client/libs/design-system/src/lib/attachment-container/attachment-container.component.ts b/alfa-client/libs/design-system/src/lib/attachment-container/attachment-container.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1308ea083b6056b797ff0e80217be7db80fcd3c2
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/attachment-container/attachment-container.component.ts
@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ods-attachment-container',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="mb-6 block rounded-md border border-black/25 shadow">
+    <ng-content></ng-content>
+  </div>`,
+})
+export class AttachmentContainerComponent {}
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
deleted file mode 100644
index e966b625ceeaec2407538bc0e8c12bc8871ff8bb..0000000000000000000000000000000000000000
--- a/alfa-client/libs/design-system/src/lib/attachment/attachment.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<button
-  class="relative mb-2 flex flex-grow items-center rounded-md border border-black/25 bg-background-100 px-3 pb-3 pt-2 hover:bg-ozggray-200"
->
-  <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 text-start">{{ documentName }}</p>
-    <p class="text-xs text-ozggray-600">{{ description }}</p>
-  </div>
-  <ng-content select="[close]"></ng-content>
-</button>
diff --git a/alfa-client/libs/design-system/src/lib/attachment/attachment.component.ts b/alfa-client/libs/design-system/src/lib/attachment/attachment.component.ts
index 054d74f5b3a5c0c1e0410bc039bf59b6d4571103..cf77b13c9c3b7fe7af677c64502698230f843560 100644
--- a/alfa-client/libs/design-system/src/lib/attachment/attachment.component.ts
+++ b/alfa-client/libs/design-system/src/lib/attachment/attachment.component.ts
@@ -1,14 +1,31 @@
 import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
 
+import { FileIconComponent } from '../icons/file-icon/file-icon.component';
+import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.component';
+
 @Component({
   selector: 'ods-attachment',
   standalone: true,
-  imports: [CommonModule],
-  styles: [':host {@apply flex flex-grow}'],
-  templateUrl: './attachment.component.html',
+  imports: [CommonModule, SpinnerIconComponent, FileIconComponent],
+  styles: [':host {@apply flex border-b border-black/25 last:border-b-0}'],
+  template: `<button
+    class="relative flex w-full gap-3 rounded-md border bg-background-100 px-3 py-2 last:border-none hover:bg-ozggray-200"
+  >
+    <div class="flex-shrink">
+      <ods-file-icon *ngIf="!isLoading" [fileType]="fileType" size="large" />
+      <ods-spinner-icon *ngIf="isLoading" size="lg" />
+    </div>
+    <div class="flex grow flex-col items-start break-all text-text">
+      <p class="text-start text-sm">{{ documentName }}</p>
+      <p class="text-xs text-ozggray-600">{{ description }}</p>
+    </div>
+    <ng-content select="[close]"></ng-content>
+  </button>`,
 })
 export class AttachmentComponent {
   @Input() documentName!: string;
   @Input() description = '';
+  @Input() fileType!: string;
+  @Input() isLoading: boolean = false;
 }
diff --git a/alfa-client/libs/design-system/src/lib/icons/IconClasses.ts b/alfa-client/libs/design-system/src/lib/icons/IconClasses.ts
index 83fd0a024a0a6ff2a8fb1d52f8a97fef1cd22320..e37959428d264d82885319a3506709d66c22b397 100644
--- a/alfa-client/libs/design-system/src/lib/icons/IconClasses.ts
+++ b/alfa-client/libs/design-system/src/lib/icons/IconClasses.ts
@@ -18,7 +18,7 @@ export const iconVariants = cva('', {
       pdf: 'fill-pdf',
       primary: 'fill-primary',
       spinner: 'fill-primary text-gray-200 dark:text-gray-600',
-      xml: 'fill-ozggray-300'
+      xml: 'fill-ozggray-300',
     },
   },
 });
diff --git a/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.component.ts
index 3ef9afa4d482eacf0c417bc631e02eee51f63487..a0d0d8b9b8bd978041e187913102ff8cab2d5380 100644
--- a/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.component.ts
+++ b/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.component.ts
@@ -1,15 +1,39 @@
 import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
+import { VariantProps, cva } from 'class-variance-authority';
 
-import { IconVariants, iconVariants } from '../IconClasses';
+import { SpinnerIconComponent } from '../spinner-icon/spinner-icon.component';
+
+const fileiconVariants = cva('', {
+  variants: {
+    fileType: {
+      doc: 'fill-doc',
+      image: 'fill-ozggray-800',
+      json: 'fill-ozggray-300',
+      pdf: 'fill-pdf',
+      xml: 'fill-ozggray-300',
+      exclamation: 'fill-warning',
+      loading: 'fill-warning',
+    },
+    size: {
+      small: 'w-4 h-5',
+      large: 'w-8 h-10',
+    },
+  },
+  defaultVariants: {
+    size: 'large',
+    fileType: 'xml',
+  },
+});
+type FileiconVariants = VariantProps<typeof fileiconVariants>;
 
 @Component({
   selector: 'ods-file-icon',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, SpinnerIconComponent],
   template: `<svg
     xmlns="http://www.w3.org/2000/svg"
-    [ngClass]="iconVariants({ size, color })"
+    [ngClass]="fileiconVariants({ size, fileType })"
     viewBox="0 0 32 40"
     aria-hidden="true"
     fill="none"
@@ -18,7 +42,8 @@ import { IconVariants, iconVariants } from '../IconClasses';
       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"
     />
     <path d="M18.2731 2.85965H2.85642V37.1454H29.285V13.5739H18.2731V2.85965Z" />
-    <g [ngSwitch]="type">
+
+    <g [ngSwitch]="fileType">
       <path
         *ngSwitchCase="'pdf'"
         d="M5.91553 24.634V16.634H9.07178C9.67855 16.634 10.1955 16.7499 10.6226 16.9817C11.0496 17.2109 11.3752 17.5299 11.5991 17.9387C11.8257 18.345 11.939 18.8137 11.939 19.345C11.939 19.8762 11.8244 20.345 11.5952 20.7512C11.366 21.1575 11.034 21.4739 10.5991 21.7004C10.1668 21.927 9.64339 22.0403 9.02881 22.0403H7.01709V20.6848H8.75537C9.08089 20.6848 9.34912 20.6288 9.56006 20.5168C9.7736 20.4023 9.93245 20.2447 10.0366 20.0442C10.1434 19.8411 10.1968 19.608 10.1968 19.345C10.1968 19.0793 10.1434 18.8476 10.0366 18.6497C9.93245 18.4491 9.7736 18.2942 9.56006 18.1848C9.34652 18.0728 9.07568 18.0168 8.74756 18.0168H7.60693V24.634H5.91553ZM15.8735 24.634H13.0376V16.634H15.897C16.7017 16.634 17.3944 16.7942 17.9751 17.1145C18.5558 17.4322 19.0024 17.8892 19.3149 18.4856C19.63 19.0819 19.7876 19.7955 19.7876 20.6262C19.7876 21.4596 19.63 22.1757 19.3149 22.7747C19.0024 23.3736 18.5532 23.8333 17.9673 24.1536C17.384 24.4739 16.686 24.634 15.8735 24.634ZM14.729 23.1848H15.8032C16.3032 23.1848 16.7238 23.0963 17.0649 22.9192C17.4087 22.7395 17.6665 22.4622 17.8384 22.0872C18.0129 21.7096 18.1001 21.2226 18.1001 20.6262C18.1001 20.0351 18.0129 19.552 17.8384 19.177C17.6665 18.802 17.41 18.526 17.0688 18.3489C16.7277 18.1718 16.3071 18.0833 15.8071 18.0833H14.729V23.1848ZM21.0405 24.634V16.634H26.3374V18.0286H22.7319V19.9348H25.9858V21.3293H22.7319V24.634H21.0405Z"
@@ -53,9 +78,10 @@ import { IconVariants, iconVariants } from '../IconClasses';
   </svg>`,
 })
 export class FileIconComponent {
-  @Input() type: 'pdf' | 'doc' | 'image' | 'xml' | 'exclamation' | 'json' = 'pdf';
-  @Input() size: IconVariants['size'] = 'xl';
-  @Input() color: IconVariants['color'] = 'spinner';
+  // @Input() type: 'pdf' | 'doc' | 'image' | 'xml' | 'exclamation' | 'json' = 'pdf';
+  @Input() fileType: FileiconVariants['fileType'];
+  @Input() size: FileiconVariants['size'];
+  @Input() isLoading: boolean = false;
 
-  iconVariants = iconVariants;
+  fileiconVariants = fileiconVariants;
 }
diff --git a/alfa-client/libs/design-system/src/lib/icons/spinner-icon/spinner-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/spinner-icon/spinner-icon.component.ts
index aa556efb6cb8e0884c0eea7cfde18fd7a57eb0ee..5758e59a23b70ccfcfe0c7838bb8240f8a8fecbc 100644
--- a/alfa-client/libs/design-system/src/lib/icons/spinner-icon/spinner-icon.component.ts
+++ b/alfa-client/libs/design-system/src/lib/icons/spinner-icon/spinner-icon.component.ts
@@ -7,6 +7,7 @@ import { IconVariants, iconVariants } from '../IconClasses';
   selector: 'ods-spinner-icon',
   standalone: true,
   imports: [NgClass],
+  styles: [':host {@apply flex}'],
   template: `<svg
       xmlns="http://www.w3.org/2000/svg"
       [ngClass]="iconVariants({ size, color })"