diff --git a/.gitignore b/.gitignore
index 403adbc..179d68a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+/.env
\ No newline at end of file
diff --git a/src/models/dataset.ts b/src/models/dataset.ts
index 1f03ed9..4d8d5d3 100644
--- a/src/models/dataset.ts
+++ b/src/models/dataset.ts
@@ -1,3 +1,5 @@
+import moment from "moment";
+
 export interface Dataset {
     abstract_additional: Array<string>;
     abstract_output: string;
@@ -32,34 +34,71 @@ export enum SearchType {
 }
 
 export class DbDataset {
-    public id!: number;
-    public url!: string;
-    public contributing_corporation!: string;
-    public creating_corporation!: string;
-    public publisher_name!: string;
-    public embargo_date!: string;
-    public publish_id!: number;
-    public project_id!: number;
-    public type!: string;
-    public language!: string;
-    public server_state!: string;
-    public belongs_to_bibliography!: boolean;
-    public created_at!: string;
-    public server_date_modified!: string;
-    public server_date_published!: string;
-    public account_id!: number;
-    public editor_id!: number;
-    public reviewer_id!: number;
-    public preferred_reviewer!: number;
-    public preferred_reviewer_email!: string;
-    public reject_editor_note!: string;
-    public reject_reviewer_note!: string;
-    public reviewer_note_visible!: string;
-    public titles!: Array<Title>;
-    public abstracts!: Array<Abstract>;
-    public authors!: Array<Author>;
-    public contributors!: Array<Author>;
-    public user!: Person;
+    // public id!: number;
+    // public url!: string;
+    // public contributing_corporation!: string;
+    // public creating_corporation!: string;
+    // public publisher_name!: string;
+    // public embargo_date!: string;
+    // public publish_id!: number;
+    // public project_id!: number;
+    // public type!: string;
+    // public language!: string;
+    // public server_state!: string;
+    // public belongs_to_bibliography!: boolean;
+    // public created_at!: string;
+    // public server_date_modified!: string;
+    // public server_date_published!: string;
+    // public account_id!: number;
+    // public editor_id!: number;
+    // public reviewer_id!: number;
+    // public preferred_reviewer!: number;
+    // public preferred_reviewer_email!: string;
+    // public reject_editor_note!: string;
+    // public reject_reviewer_note!: string;
+    // public reviewer_note_visible!: string;
+    // public titles!: Array<Title>;
+    // public abstracts!: Array<Abstract>;
+    // public authors!: Array<Author>;
+    // public contributors!: Array<Author>;
+    // public user!: Person;
+    // public subjects!: Array<Subject>;
+
+    constructor(
+        public id: string,
+        public url: string,
+        public contributing_corporation: string,
+        public creating_corporation: string,
+        public publisher_name: string,
+        public embargo_date: string,
+        public publish_id: number,
+        public project_id: number,
+        public type: string,
+        public language: string,
+        public server_state: string,
+        public belongs_to_bibliography: boolean,
+        public created_at: string,
+        public server_date_modified: string,
+        public server_date_published: string,
+        public account_id: number,
+        public editor_id: number,
+        public reviewer_id: number,
+        public preferred_reviewer: number,
+        public preferred_reviewer_email: string,
+        public reject_editor_note: string,
+        public reject_reviewer_note: string,
+        public reviewer_note_visible: string,
+        public titles: Array<Title>,
+        public abstracts: Array<Abstract>,
+        public authors: Array<Author>,
+        public contributors: Array<Author>,
+        public user: Person,
+        public subjects: Array<Subject>,
+        public licenses: Array<License>,
+        public files: Array<DbFile>,
+        private coverage?: Coverage,
+        public project?: Project,
+    ) {}
 
     public hasTranslatedAbstract(): boolean {
         if (this.abstracts.some((e) => e.type === "Translated")) {
@@ -85,6 +124,38 @@ export class DbDataset {
         }
     }
 
+    public hasContributors(): boolean {
+        if (this.contributors.length > 0) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    public hasLicenses(): boolean {
+        if (this.licenses.length > 0) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    public hasEmbargoPassed(): boolean {
+        const embargoDate = moment(this.embargo_date);
+        if (embargoDate == null) {
+            return true;
+        }
+        const todayDate = moment.now();
+        // Embargo has passed on the day after the specified date
+
+        if (embargoDate.isBefore(todayDate)) {
+            return true;
+        } else {
+            return false;
+        }
+        // return ($embargoDate->lessThan($now));
+    }
+
     public get MainAbstract(): Nullable<Abstract> {
         return this.abstracts.find((e) => e.type === AbstractType.Abstract);
     }
@@ -100,6 +171,21 @@ export class DbDataset {
     public get MethodsAbtract(): Nullable<Abstract> {
         return this.abstracts.find((e) => e.type === AbstractType.Methods);
     }
+
+    public get Coverage(): string {
+        if (this.coverage != undefined) {
+            const xMin = this.coverage.x_min;
+            const xMax = this.coverage.x_max;
+            const yMin = this.coverage.y_min;
+            const yMax = this.coverage.y_max;
+            return `SOUTH-BOUND LATITUDE:  ${xMin},
+            * WEST-BOUND LONGITUDE: ${yMin},
+            * NORTH-BOUND LATITUDE: ${xMax},
+            * EAST-BOUND LONGITUDE: ${yMax}`;
+        } else {
+            return "";
+        }
+    }
 }
 type Nullable<T> = T | undefined;
 
@@ -144,3 +230,62 @@ export interface Person {
     last_name: string;
     created_at: string;
 }
+
+export interface Subject {
+    id: number;
+    language: string;
+    type: string;
+    value: string;
+    external_key: string;
+    created_at: string;
+    updated_at: string;
+}
+
+export interface Coverage {
+    x_min: string;
+    x_max: string;
+    y_min: string;
+    y_max: string;
+}
+
+export interface License {
+    id: number;
+    active: boolean;
+    comment_internal?: string;
+    desc_markup?: string;
+    desc_text?: string;
+    language: string;
+    link_licence: string;
+    link_logo?: string;
+    link_sign?: string;
+    mime_type: string;
+    name_long: string; // "Creative Commons Attribution 4.0 International (CC BY 4.0)"
+    name: string; // "CC-BY-4.0"
+    pod_allowed: boolean;
+    sort_order: number;
+}
+
+export interface Project {
+    id: number;
+    label: string; // "ALLG_FACHLICH"
+    name: string; //	"Allgemein fachliche Arbeiten"
+    description: string; //	"Allgemein fachlich interdisziplinäre Arbeiten"
+    created_at: string;
+    updated_at: string;
+}
+
+export interface DbFile {
+    id: number;
+    document_id: number;
+    path_name: string;
+    label: string;
+    comment?: string;
+    mime_type: string;
+    language?: string;
+    file_size: bigint;
+    visible_in_frontdoor: boolean;
+    visible_in_oai: boolean;
+    sort_order: Int16Array;
+    created_at: string;
+    updated_at: string;
+}
diff --git a/src/views/dataset-detail.component.ts/dataset-detail.component.ts b/src/views/dataset-detail.component.ts/dataset-detail.component.ts
index 335b057..e56f0a3 100644
--- a/src/views/dataset-detail.component.ts/dataset-detail.component.ts
+++ b/src/views/dataset-detail.component.ts/dataset-detail.component.ts
@@ -14,10 +14,12 @@ export default class DatasetDetailComponent extends Vue {
     datasetId!: number;
 
     private subscriptions: Array<Subscription> = [];
-    private dataset = {} as DbDataset;
+    public dataset = {} as DbDataset;
     private error = "";
+    public loaded = false;
+    public openAccessLicences: Array<string> = ["CC-BY-4.0", "CC-BY-SA-4.0"];
 
-    beforeMount(): void {
+    created(): void {
         this.getDataset(this.datasetId);
     }
 
@@ -33,6 +35,7 @@ export default class DatasetDetailComponent extends Vue {
         const newSub = DatasetService.getDataset(id).subscribe(
             (res: DbDataset) => {
                 this.dataset = res;
+                this.loaded = true;
             },
             (error: string) => this.errorHandler(error),
         );
@@ -54,4 +57,8 @@ export default class DatasetDetailComponent extends Vue {
         return moment(date).format("DD.MM.YYYY HH:mm");
         // return moment(date).format("MMM Do YYYY");
     }
+
+    public getYear(date: string) {
+        return moment(date).format("YYYY");
+    }
 }
diff --git a/src/views/dataset-detail.component.ts/dataset-detail.component.vue b/src/views/dataset-detail.component.ts/dataset-detail.component.vue
index 5a2e864..df18bea 100644
--- a/src/views/dataset-detail.component.ts/dataset-detail.component.vue
+++ b/src/views/dataset-detail.component.ts/dataset-detail.component.vue
@@ -8,7 +8,7 @@
             <button v-on:click="goBack">Back</button>
         </section>
     </div> -->
-    <section class="section" v-if="dataset">
+    <section class="section" v-if="loaded">
         <div class="container">
             <!-- <span class="is-size-5"> Basic Table </span>
             <br /> -->
@@ -51,6 +51,42 @@
                             </div>
                             <div class="column is-9-desktop is-8-tablet" v-else>-</div>
                         </div>
+
+                        <div class="columns">
+                            <div class="column is-3-desktop is-4-tablet">Downloads/<br />downloads:</div>
+                            <div class="column is-9-desktop is-8-tablet" v-if="dataset.files.length > 0">
+                                <table id="items" v-if="dataset.hasEmbargoPassed()" class="pure-table pure-table-horizontal">
+                                    <thead>
+                                        <tr>
+                                            <th>Path Name</th>
+                                            <th>File Extension</th>
+                                            <th>File Size</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr v-for="file in dataset.files" :key="file.id">
+                                            <td>
+                                                {{ file.path_name }}
+                                                <!-- @if($file->exists() === true)
+                            <a target="_blank" href="{{ route('file.download', ['id' => $file->id]) }}"> {{ $file->label }} </a>
+                            @else
+                            <span class="alert">missing file: {{ $file->path_name }}</span>
+                            @endif -->
+                                            </td>
+                                            <td>
+                                                <!-- <span>{{  pathinfo($file->path_name, PATHINFO_EXTENSION) }}</span> -->
+                                            </td>
+                                            <td>
+                                                <!-- <span>{{ $file->formatSize(2) }}</span> -->
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+
+                                <span v-else>Datensatz hat noch ein gültiges Embargo-Datum.</span>
+                            </div>
+                        </div>
+
                         <div class="columns">
                             <div class="column is-3-desktop is-4-tablet">Technische Metadaten/<br />technical metadata:</div>
                             <div class="column is-9-desktop is-8-tablet">
@@ -64,7 +100,7 @@
                     </div>
                 </div>
 
-                <div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 1.2rem; padding-right: 1.5rem; padding-left: 1.5rem">
+                <div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 1.2rem; padding-right: 1rem; padding-left: 1rem">
                     <div class="card">
                         <div class="column">
                             <h2>Details</h2>
@@ -72,7 +108,83 @@
                     </div>
                     <div class="card">
                         <div class="column">
-                            <h2 v-if="dataset.hasOwnProperty('contributors')">{{ dataset.contributors.map((u) => u.full_name).join(", ") }}</h2>
+                            <h3>Beitragende/Contributor</h3>
+                            <p v-if="dataset.hasContributors()">
+                                {{ dataset.contributors.map((u) => u.full_name).join(", ") }}
+                            </p>
+                            <p v-else>-</p>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <div class="column">
+                            <h3>Schlüsselwörter/Keywords</h3>
+                            <p v-if="dataset.hasOwnProperty('subjects')">
+                                {{ dataset.subjects.map((u) => u.value).join(", ") }}
+                            </p>
+                            <p v-else>-</p>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <div class="column">
+                            <h3>Erstellungsjahr/Year</h3>
+                            <p>
+                                {{ getYear(dataset.server_date_published) }}
+                            </p>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <div class="column">
+                            <h3>Abdeckung/Coverage</h3>
+                            <p>
+                                {{ dataset.Coverage }}
+                            </p>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <div class="column">
+                            <h3>Sprache/Language</h3>
+                            <p>
+                                {{ dataset.language }}
+                            </p>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <div class="column">
+                            <h3>Objekttyp/Object Type</h3>
+                            <p>
+                                <span><i class="fas fa-file"></i> {{ dataset.type }}</span>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <div class="column">
+                            <h3>Lizenz/License</h3>
+                            <p v-if="dataset.hasLicenses()">
+                                <label v-for="license in dataset.licenses" :key="license.id">
+                                    <span class="label">
+                                        {{ license.name }}
+                                    </span>
+                                    <span v-if="openAccessLicences.includes(license.name)" class="label titlecase"><i class="fas fa-lock-open"></i> Open Access</span>
+                                </label>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <div class="column">
+                            <h3>Projekt/Project</h3>
+                            <p v-if="dataset.project != null">
+                                <span>{{ dataset.project.name }}</span>
+                            </p>
+                            <p v-else>-</p>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <div class="column">
+                            <h3>Embargo</h3>
+                            <p v-if="dataset.embargo_date">
+                                <span>{{ getHumanDate(dataset.embargo_date) }}</span>
+                            </p>
+                            <p v-else>-</p>
                         </div>
                     </div>
                 </div>
@@ -127,7 +239,7 @@ export default DatasetDetailComponent;
 }
 label {
     display: inline-block;
-    width: 3em;
+    // width: 3em;
     margin: 0.5em 0;
     color: #607d8b;
     font-weight: bold;