diff --git a/mediarepo-api/Cargo.toml b/mediarepo-api/Cargo.toml
index 172fe84..2f03658 100644
--- a/mediarepo-api/Cargo.toml
+++ b/mediarepo-api/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "mediarepo-api"
-version = "0.30.0"
+version = "0.31.0"
 edition = "2018"
 license = "gpl-3"
 
diff --git a/mediarepo-api/src/types/files.rs b/mediarepo-api/src/types/files.rs
index ff9153e..d6f5cec 100644
--- a/mediarepo-api/src/types/files.rs
+++ b/mediarepo-api/src/types/files.rs
@@ -58,6 +58,7 @@ pub struct FileMetadataResponse {
     pub creation_time: NaiveDateTime,
     pub change_time: NaiveDateTime,
     pub import_time: NaiveDateTime,
+    pub size: u64,
 }
 
 #[derive(Clone, Debug, Serialize, Deserialize)]
diff --git a/mediarepo-daemon/mediarepo-socket/src/from_model.rs b/mediarepo-daemon/mediarepo-socket/src/from_model.rs
index bf101e9..b241096 100644
--- a/mediarepo-daemon/mediarepo-socket/src/from_model.rs
+++ b/mediarepo-daemon/mediarepo-socket/src/from_model.rs
@@ -23,6 +23,7 @@ impl FromModel<FileMetadataDto> for FileMetadataResponse {
             creation_time: model.creation_time().to_owned(),
             change_time: model.change_time().to_owned(),
             import_time: model.import_time().to_owned(),
+            size: model.size() as u64,
         }
     }
 }
diff --git a/mediarepo-ui/src/api/api-types/files.ts b/mediarepo-ui/src/api/api-types/files.ts
index cf6387d..f40d1bb 100644
--- a/mediarepo-ui/src/api/api-types/files.ts
+++ b/mediarepo-ui/src/api/api-types/files.ts
@@ -68,9 +68,10 @@ export type FileMetadata = {
     file_id: number,
     name?: string,
     comment?: string,
-    creation_time: Date,
-    change_time: Date,
-    import_time: Date,
+    creation_time: string,
+    change_time: string,
+    import_time: string,
+    size: number,
 };
 
 export type FileOsMetadata = {
diff --git a/mediarepo-ui/src/app/components/shared/app-common/app-common.module.ts b/mediarepo-ui/src/app/components/shared/app-common/app-common.module.ts
index 6db5824..a556c14 100644
--- a/mediarepo-ui/src/app/components/shared/app-common/app-common.module.ts
+++ b/mediarepo-ui/src/app/components/shared/app-common/app-common.module.ts
@@ -24,6 +24,7 @@ import {FlexLayoutModule} from "@angular/flex-layout";
 import {MatRippleModule} from "@angular/material/core";
 import {FlapButtonComponent} from "./flap-button/flap-button.component";
 import {MiddleCenteredComponent} from "./middle-centered/middle-centered.component";
+import {FormatBytesPipe} from "./pipes/format-bytes.pipe";
 
 
 @NgModule({
@@ -42,6 +43,7 @@ import {MiddleCenteredComponent} from "./middle-centered/middle-centered.compone
         DrawerPageContentComponent,
         FlapButtonComponent,
         MiddleCenteredComponent,
+        FormatBytesPipe,
     ],
     exports: [
         ConfirmDialogComponent,
@@ -57,6 +59,7 @@ import {MiddleCenteredComponent} from "./middle-centered/middle-centered.compone
         DrawerPageContentComponent,
         FlapButtonComponent,
         MiddleCenteredComponent,
+        FormatBytesPipe,
     ],
     imports: [
         CommonModule,
diff --git a/mediarepo-ui/src/app/components/shared/app-common/pipes/format-bytes.pipe.spec.ts b/mediarepo-ui/src/app/components/shared/app-common/pipes/format-bytes.pipe.spec.ts
new file mode 100644
index 0000000..540c722
--- /dev/null
+++ b/mediarepo-ui/src/app/components/shared/app-common/pipes/format-bytes.pipe.spec.ts
@@ -0,0 +1,8 @@
+import {FormatBytesPipe} from "./format-bytes.pipe";
+
+describe("FormatBytesPipe", () => {
+    it("create an instance", () => {
+        const pipe = new FormatBytesPipe();
+        expect(pipe).toBeTruthy();
+    });
+});
diff --git a/mediarepo-ui/src/app/components/shared/app-common/pipes/format-bytes.pipe.ts b/mediarepo-ui/src/app/components/shared/app-common/pipes/format-bytes.pipe.ts
new file mode 100644
index 0000000..6260cc5
--- /dev/null
+++ b/mediarepo-ui/src/app/components/shared/app-common/pipes/format-bytes.pipe.ts
@@ -0,0 +1,24 @@
+import {Pipe, PipeTransform} from "@angular/core";
+
+@Pipe({
+    name: "formatBytes"
+})
+export class FormatBytesPipe implements PipeTransform {
+
+    static round(number: number, decimals: number) {
+        return Math.round(number * (10 ** decimals)) / (10 ** decimals);
+    }
+
+    transform(value: number): string {
+        const units = ["B", "KiB", "MiB", "GiB"];
+        let formattedValue = value;
+
+        for (const unit of units) {
+            if (formattedValue < 1000) {
+                return `${formattedValue} ${unit}`;
+            }
+            formattedValue = FormatBytesPipe.round(formattedValue / 1024, 2);
+        }
+        return formattedValue + " GiB";
+    }
+}
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html
index ed8b0b1..bfbb01d 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html
@@ -12,12 +12,17 @@
                                              attributeName="Name"></app-editable-metadata-entry>
                 <app-metadata-entry attributeName="Content Descriptor (CD)">{{file.cd}}</app-metadata-entry>
                 <app-metadata-entry attributeName="Mime Type">{{file.mimeType}}</app-metadata-entry>
-                <app-metadata-entry *ngIf="fileMetadata"
-                                    attributeName="Imported at">{{fileMetadata.import_time.toLocaleString()}}</app-metadata-entry>
-                <app-metadata-entry *ngIf="fileMetadata"
-                                    attributeName="Created at">{{fileMetadata.creation_time.toLocaleString()}}</app-metadata-entry>
-                <app-metadata-entry *ngIf="fileMetadata"
-                                    attributeName="Changed at">{{fileMetadata.change_time.toLocaleString()}}</app-metadata-entry>
+                <ng-container *ngIf="fileMetadata">
+                    <app-metadata-entry
+                        attributeName="Size">{{fileMetadata.size | formatBytes}}</app-metadata-entry>
+                    <app-metadata-entry
+                        attributeName="Imported at">{{fileMetadata.import_time | date: 'dd.MM.yy HH:mm:ss' }}</app-metadata-entry>
+                    <app-metadata-entry
+                        attributeName="Created at">{{fileMetadata.creation_time | date: 'dd.MM.yy HH:mm:ss'}}</app-metadata-entry>
+                    <app-metadata-entry
+                        attributeName="Changed at">{{fileMetadata.change_time | date: 'dd.MM.yy HH:mm:ss'}}</app-metadata-entry>
+                </ng-container>
+
             </div>
         </div>
     </app-busy-indicator>