diff --git a/src/client/dd-hub-react/src/_mock/_data.ts b/src/client/dd-hub-react/src/_mock/_data.ts
index e8f9e2b..c608e15 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"
   }
-];
\ No newline at end of file
+].map(doc => Object.assign(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 5d9e4be..cf4d7e8 100644
--- a/src/client/dd-hub-react/src/api/document-service.ts
+++ b/src/client/dd-hub-react/src/api/document-service.ts
@@ -8,6 +8,14 @@ export class Doc {
     addedWho!: string;
     changedWhen?: Date;
     changedWho?: string;
+
+    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;
+    }
 }
 
 export type DocQuery = {
diff --git a/src/client/dd-hub-react/src/sections/document/doc-item.tsx b/src/client/dd-hub-react/src/sections/document/doc-item.tsx
index 0229541..069df1c 100644
--- a/src/client/dd-hub-react/src/sections/document/doc-item.tsx
+++ b/src/client/dd-hub-react/src/sections/document/doc-item.tsx
@@ -6,11 +6,8 @@ import { varAlpha } from 'minimal-shared/utils';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import Card from '@mui/material/Card';
-import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 
-import { fDate } from 'src/utils/format-time';
-
 import { Doc } from 'src/api/document-service';
 
 import { Iconify } from 'src/components/iconify';