diff --git a/src/client/dd-hub-react/src/_mock/_data.ts b/src/client/dd-hub-react/src/_mock/_data.ts
index c608e15..6fe4abb 100644
--- a/src/client/dd-hub-react/src/_mock/_data.ts
+++ b/src/client/dd-hub-react/src/_mock/_data.ts
@@ -301,4 +301,4 @@ export const _documents: Doc[] = [
     addedWhen: new Date("2024-04-17T11:25:00Z"),
     addedWho: "SchreiberM"
   }
-].map(doc => Object.assign(doc));
\ No newline at end of file
+].map(doc => Doc.map(doc));
\ No newline at end of file
diff --git a/src/client/dd-hub-react/src/api/document-service.ts b/src/client/dd-hub-react/src/api/document-service.ts
index cf4d7e8..342039b 100644
--- a/src/client/dd-hub-react/src/api/document-service.ts
+++ b/src/client/dd-hub-react/src/api/document-service.ts
@@ -1,6 +1,13 @@
 import { _documents } from "src/_mock"
 
 export class Doc {
+
+    static map(source?: Partial<Doc>): Doc {
+        const doc = new Doc();
+        Object.assign(doc, source);
+        return doc;
+    }
+
     id!: number;
     name!: string;
     data!: Uint8Array;
@@ -9,13 +16,17 @@ export class Doc {
     changedWhen?: Date;
     changedWho?: string;
 
-    get Extension(): string | undefined {
+    get extension(): string | undefined {
         const parts = this.name.split('.');
         if (parts.length > 1 && parts[parts.length - 1].trim() !== '') {
             return parts[parts.length - 1].toLowerCase();
         }
         return undefined;
     }
+
+    get iconSrc(): string {
+        return `assets/icons/file/${this.extension ?? 'unknown'}.svg`;
+    }
 }
 
 export type DocQuery = {