diff --git a/src/App.vue b/src/App.vue
index 82183e7..e218835 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -201,7 +201,7 @@ footer .card {
 }
 
 footer .card-title {
-    font-family: Verdana;
+    // font-family: Verdana;
     color: #fff;
     text-transform: uppercase;
     font-weight: bold;
diff --git a/src/assets/scss/main-styles.scss b/src/assets/scss/main-styles.scss
index b6ef541..a355013 100644
--- a/src/assets/scss/main-styles.scss
+++ b/src/assets/scss/main-styles.scss
@@ -1,8 +1,61 @@
 @charset "utf-8";
-@import "~bulma";
+// @import "~bulma";
 // @import "@fontsource/open-sans"; // Defaults to weight 400.
 @import "~@openfonts/open-sans_all/index.css";
 
+// 1. Import the initial variables
+@import "~bulma/sass/utilities/_all.sass";
+
+
+// 2. Set your own initial (brand) variables
+// Update the blue shade, used for links
+$blue: #06bcef;
+// Add pink and its invert
+$pink: #FA7C91;
+$pink-invert: #fff;
+$purple: #8A4D76;
+$brown: #757763;
+$beige-light: #D0D1CD;
+$beige-lighter: #EFF0EB;
+$mouse-grey: #6c6e6b;
+$select-green: #03a678;
+
+// 3. Set the derived variables
+$grey-dark: $brown;
+$is-dark: $mouse-grey;
+// $grey-light: $beige-light;
+// $primary: $purple;
+// $link: $mouse-grey;
+$widescreen-enabled: false;
+$fullhd-enabled: false;
+// $tabs-link-active-border-bottom-color: $select-green;
+// $tabs-link-active-color: $select-green;
+$table-striped-row-even-background-color: #ecf2fa;
+$table-striped-row-even-hover-background-color: #ecf2fa;
+
+// 4. Import the rest of bulma, only what you need from Bulma
+// @import "../../node_modules/bulma/sass/utilities/_all.sass";
+@import "~bulma/sass/grid/_all.sass";
+@import "~bulma/sass/base/_all.sass";
+@import "~bulma/sass/elements/box.sass";
+@import "~bulma/sass/elements/button.sass";
+@import "~bulma/sass/elements/container.sass";
+@import "~bulma/sass/elements/content.sass";
+@import "~bulma/sass/elements/title.sass";
+@import "~bulma/sass/elements/icon.sass";
+@import "~bulma/sass/elements/table.sass";
+@import "~bulma/sass/form/_all.sass";
+@import "~bulma/sass/helpers/_all.sass";
+@import "~bulma/sass/components/navbar.sass";
+// @import "~bulma/sass/components/tabs.sass";
+@import "~bulma/sass/components/media.sass";
+@import "~bulma/sass/components/modal.sass";
+@import "~bulma/sass/components/card.sass";
+
+@import "~bulma/sass/components/panel.sass";
+
+@import "~bulma/sass/layout/_all.sass";
+
 .button {
     text-decoration: none;
     // border: 1px solid #fff;
@@ -19,24 +72,24 @@
     }
     &.custom-button {
         // display: block;
-      
+
         width: 125px;
         color: #fff;
         font-weight: bold;
-        font-size: 0.9em;       
+        font-size: 0.9em;
         text-decoration: none;
         border: 1px solid transparent;
         // .fas {
         //     margin-right: 0.6em;
         //     // border-right: 1px solid #fff;
         //    width: 2em;
-          
+
         // };
         .fas {
             margin-right: 0.6em;
             border-right: 1px solid #fff;
             padding: 0.6em;
-        };
+        }
         // strong {
         //     border-left: 1px solid #fff;
         //     padding-left: 0.6em;
@@ -44,8 +97,6 @@
     }
 }
 
-
-
 .header-image {
     background-image: url("./../site/img/Main-banner-homepage-xl.jpg");
     background-size: cover;
@@ -76,7 +127,6 @@
 //     margin-top: 25px;
 // }
 // /*
-  
 
 .help:before {
     background: url("./../site/img/Main-banner-homepage-xl.jpg");
@@ -113,7 +163,6 @@
     box-sizing: border-box;
 }
 
-
 .text-center {
     text-align: center !important;
 }
@@ -152,12 +201,9 @@ body H1 {
     margin-top: 1.5rem !important;
 }
 .text-left {
-    text-align: left!important;
+    text-align: left !important;
 }
 
-
-
-
 html,
 body {
     font-family: "Open Sans", sans-serif;
@@ -198,7 +244,6 @@ body {
     color: rgb(74, 74, 74);
 }
 
-
 .hide {
     display: none;
 }
@@ -245,8 +290,6 @@ body {
     overflow: hidden;
 }
 
-
-
 #home_padding {
     margin-top: 7%;
 }
@@ -318,12 +361,9 @@ body {
     max-height: 6rem;
 }
 
-
-
-
 .card {
-    position: relative;  
-    display: flex;  
+    position: relative;
+    display: flex;
     flex-direction: column;
     min-width: 0;
     word-wrap: break-word;
@@ -392,4 +432,4 @@ body {
 }
 .work-items div:hover .work-front {
     display: none;
-}
\ No newline at end of file
+}
diff --git a/src/models/dataset.ts b/src/models/dataset.ts
index 1bee033..cfc87e7 100644
--- a/src/models/dataset.ts
+++ b/src/models/dataset.ts
@@ -156,6 +156,10 @@ export class DbDataset {
         // return ($embargoDate->lessThan($now));
     }
 
+    public get MainTitle(): Nullable<Title> {
+        return this.titles.find((e) => e.type === TitleType.Main);
+    }
+
     public get MainAbstract(): Nullable<Abstract> {
         return this.abstracts.find((e) => e.type === AbstractType.Abstract);
     }
@@ -198,6 +202,10 @@ export enum AbstractType {
     Other = " Other",
 }
 
+export enum TitleType {
+    Main = "Main",
+    Translated = "Translated",
+}
 export interface Title {
     id: number;
     type: string;
@@ -220,6 +228,7 @@ export interface Author {
     first_name: string;
     last_name: string;
     name_type: string;
+    full_name: string;
 }
 
 export interface Person {
diff --git a/src/services/dataset.service.ts b/src/services/dataset.service.ts
index 0bacaf2..b1a10e4 100644
--- a/src/services/dataset.service.ts
+++ b/src/services/dataset.service.ts
@@ -165,14 +165,14 @@ class DatasetService {
         const host = "https:" + VUE_APP_PORTAL;
         const path = "/api/dataset/" + id;
         const apiUrl = host + path;
-
         const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res, apiUrl)));
+        // const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res, apiUrl)));
 
         // this.messageService.add('HeroService: fetched heroes');
         return dataset;
     }
 
-    private prepareDataset(datasetObj: DbDataset, apiUrl: string) {
+    private prepareDataset(datasetObj: DbDataset, apiUrl: string): DbDataset {
         const dataset = deserialize<DbDataset>(DbDataset, JSON.stringify(datasetObj));
         dataset.url = document.documentURI;
         // this.internalDatasetId.generateInternalId(dataset);
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 e8dace7..f49a97c 100644
--- a/src/views/dataset-detail.component.ts/dataset-detail.component.ts
+++ b/src/views/dataset-detail.component.ts/dataset-detail.component.ts
@@ -68,6 +68,11 @@ export default class DatasetDetailComponent extends Vue {
         return Math.round((size + Number.EPSILON) * 100) / 100 + " " + unit[i];
     }
 
+    public getPublishedDate(date: string): string {
+        return moment(date).format("ddd, MMMM Do, YYYY h:mm a");
+        // return moment(date).format("MMM Do YYYY");
+    }
+
     public getHumanDate(date: string): string {
         return moment(date).format("DD.MM.YYYY HH:mm");
         // return moment(date).format("MMM Do YYYY");
@@ -76,4 +81,14 @@ export default class DatasetDetailComponent extends Vue {
     public getYear(date: string) {
         return moment(date).format("YYYY");
     }
+
+    public getCitation(): string {
+        let citation = this.dataset.contributors.map((u) => u.last_name + ", " + u.first_name.substring(0, 1).toUpperCase() + ".").join(", ");
+        citation += " " + moment(this.dataset.server_date_published).format("YYYY") + ": ";
+        citation += this.dataset.MainTitle?.value;
+        citation += "." + this.dataset.creating_corporation + ", ";
+        citation += this.dataset.publisher_name;
+        citation += ", Wien";
+        return citation;
+    }
 }
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 ec9a71a..b7d5d36 100644
--- a/src/views/dataset-detail.component.ts/dataset-detail.component.vue
+++ b/src/views/dataset-detail.component.ts/dataset-detail.component.vue
@@ -16,16 +16,26 @@
             <div class="columns">
                 <div class="column is-8 results_column" style="padding-top: 1.2rem; padding-right: 1rem; padding-left: 1rem">
                     <div class="card">
-                        <div class="column dataset__blog-meta">published: {{ getHumanDate(dataset.server_date_published) }}</div>
+                        <div class="column dataset__blog-meta">
+                            <h2 class="label uppercase">published: {{ getPublishedDate(dataset.server_date_published) }}</h2>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <div class="column">
+                            <label class="label">
+                                {{ getCitation() }}
+                                <a class="link-label" v-bind:href="dataset.url">({{ dataset.url }})</a>
+                            </label>
+                        </div>
                     </div>
 
                     <div class="card record-elem">
                         <div class="columns" v-if="dataset.hasOwnProperty('titles')">
-                            <div class="column is-3-desktop is-4-tablet">Title/<br />title:</div>
+                            <div class="column is-3-desktop is-4-tablet label">Title/<br />title:</div>
                             <div class="column is-9-desktop is-8-tablet">{{ dataset.titles[0].value }}</div>
                         </div>
                         <div class="columns" v-if="dataset.hasOwnProperty('abstracts')">
-                            <div class="column is-3-desktop is-4-tablet">
+                            <div class="column is-3-desktop is-4-tablet label">
                                 Zusammenfassung/<br />
                                 abstract:
                             </div>
@@ -38,14 +48,14 @@
                             </div>
                         </div>
                         <div class="columns" v-if="dataset.hasOwnProperty('abstracts')">
-                            <div class="column is-3-desktop is-4-tablet">Serieninformation/<br />series information:</div>
+                            <div class="column is-3-desktop is-4-tablet label">Serieninformation/<br />series information:</div>
                             <div class="column is-9-desktop is-8-tablet" v-if="dataset.hasSeriesInformationAbstract()">
                                 {{ dataset.SeriesInformationAbstract.value }}
                             </div>
                             <div class="column is-9-desktop is-8-tablet" v-else>-</div>
                         </div>
                         <div class="columns" v-if="dataset.hasOwnProperty('abstracts')">
-                            <div class="column is-3-desktop is-4-tablet">Methodik/<br />method:</div>
+                            <div class="column is-3-desktop is-4-tablet label">Methodik/<br />method:</div>
                             <div class="column is-9-desktop is-8-tablet" v-if="dataset.hasMethodsAbtract()">
                                 {{ dataset.MethodsAbtract.value }}
                             </div>
@@ -53,20 +63,20 @@
                         </div>
 
                         <div class="columns">
-                            <div class="column is-3-desktop is-4-tablet">Downloads/<br />downloads:</div>
+                            <div class="column is-3-desktop is-4-tablet label">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="table is-bordered is-striped">
                                     <thead>
                                         <tr>
-                                            <th>Path Name</th>
-                                            <th>File Extension</th>
-                                            <th>File Size</th>
+                                            <th class="table-header">Path Name</th>
+                                            <th class="table-header">File Extension</th>
+                                            <th class="table-header">File Size</th>
                                         </tr>
                                     </thead>
                                     <tbody>
                                         <tr v-for="file in dataset.files" :key="file.id">
                                             <td>
-                                                <a target="_blank" v-bind:href="'portal/file/download/' + file.id"> {{ file.label }} </a>
+                                                <a class="link-label" target="_blank" v-bind:href="'/portal/file/download/' + file.id"> {{ file.label }} </a>
                                             </td>
                                             <td>
                                                 <span>{{ getExtension(file.path_name) }}</span>
@@ -83,7 +93,7 @@
                         </div>
 
                         <div class="columns">
-                            <div class="column is-3-desktop is-4-tablet">Technische Metadaten/<br />technical metadata:</div>
+                            <div class="column is-3-desktop is-4-tablet label">Technische Metadaten/<br />technical metadata:</div>
                             <div class="column is-9-desktop is-8-tablet">
                                 <p>Persistenter Identifikator: {{ dataset.url }}</p>
                                 <p>Status: {{ dataset.server_state }}</p>
@@ -98,12 +108,12 @@
                 <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>
+                            <h2 class="label uppercase">Details</h2>
                         </div>
                     </div>
                     <div class="card">
                         <div class="column">
-                            <h3>Beitragende/Contributor</h3>
+                            <h3 class="label uppercase">Beitragende/Contributor</h3>
                             <p v-if="dataset.hasContributors()">
                                 {{ dataset.contributors.map((u) => u.full_name).join(", ") }}
                             </p>
@@ -112,7 +122,7 @@
                     </div>
                     <div class="card">
                         <div class="column">
-                            <h3>Schlüsselwörter/Keywords</h3>
+                            <h3 class="label uppercase">Schlüsselwörter/Keywords</h3>
                             <p v-if="dataset.hasOwnProperty('subjects')">
                                 {{ dataset.subjects.map((u) => u.value).join(", ") }}
                             </p>
@@ -121,7 +131,7 @@
                     </div>
                     <div class="card">
                         <div class="column">
-                            <h3>Erstellungsjahr/Year</h3>
+                            <h3 class="label uppercase">Erstellungsjahr/Year</h3>
                             <p>
                                 {{ getYear(dataset.server_date_published) }}
                             </p>
@@ -129,7 +139,7 @@
                     </div>
                     <div class="card">
                         <div class="column">
-                            <h3>Abdeckung/Coverage</h3>
+                            <h3 class="label uppercase">Abdeckung/Coverage</h3>
                             <p>
                                 {{ dataset.Coverage }}
                             </p>
@@ -137,7 +147,7 @@
                     </div>
                     <div class="card">
                         <div class="column">
-                            <h3>Sprache/Language</h3>
+                            <h3 class="label uppercase">Sprache/Language</h3>
                             <p>
                                 {{ dataset.language }}
                             </p>
@@ -145,7 +155,7 @@
                     </div>
                     <div class="card">
                         <div class="column">
-                            <h3>Objekttyp/Object Type</h3>
+                            <h3 class="label uppercase">Objekttyp/Object Type</h3>
                             <p>
                                 <span><i class="fas fa-file"></i> {{ dataset.type }}</span>
                             </p>
@@ -153,20 +163,20 @@
                     </div>
                     <div class="card">
                         <div class="column">
-                            <h3>Lizenz/License</h3>
+                            <h3 class="label uppercase">Lizenz/License</h3>
                             <p v-if="dataset.hasLicenses()">
                                 <label v-for="license in dataset.licenses" :key="license.id">
-                                    <span class="label">
+                                    <span class="normal label">
                                         {{ license.name }}
                                     </span>
-                                    <span v-if="openAccessLicences.includes(license.name)" class="label titlecase"><i class="fas fa-lock-open"></i> Open Access</span>
+                                    <span v-if="openAccessLicences.includes(license.name)" class="normal label uppercase"><i class="fas fa-lock-open"></i> Open Access</span>
                                 </label>
                             </p>
                         </div>
                     </div>
                     <div class="card">
                         <div class="column">
-                            <h3>Projekt/Project</h3>
+                            <h3 class="label uppercase">Projekt/Project</h3>
                             <p v-if="dataset.project != null">
                                 <span>{{ dataset.project.name }}</span>
                             </p>
@@ -175,7 +185,7 @@
                     </div>
                     <div class="card">
                         <div class="column">
-                            <h3>Embargo</h3>
+                            <h3 class="label uppercase">Embargo</h3>
                             <p v-if="dataset.embargo_date">
                                 <span>{{ getHumanDate(dataset.embargo_date) }}</span>
                             </p>
@@ -184,27 +194,6 @@
                     </div>
                 </div>
             </div>
-
-            <!-- <table v-if="dataset != undefined" class="table">
-                <thead>
-                    <tr>
-                        <th>Title</th>
-                        <th>Abstract</th>
-                        <th>Country</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <h2 v-if="dataset.hasOwnProperty('titles')">{{ dataset.titles[0].value }} details!</h2>
-                        </td>
-                        <td>
-                            <p v-if="dataset.hasOwnProperty('abstracts')" class="dataset__abstract">{{ dataset.abstracts[0].value }}</p>
-                        </td>
-                        <td>India</td>
-                    </tr>
-                </tbody>
-            </table> -->
         </div>
 
         <div class="container-fluid" style="padding-top: 3.8em">
@@ -232,12 +221,35 @@ export default DatasetDetailComponent;
 .section {
     font-size: 0.8rem;
 }
-label {
-    display: inline-block;
-    // width: 3em;
-    margin: 0.5em 0;
-    color: #607d8b;
-    font-weight: bold;
+.card {
+    border-radius: 0;
+    /* rempve box-shadow */
+    box-shadow: none;
+}
+.link-label {
+    color: #33cccc;
+}
+.label {
+    /* color: #363636; */
+    display: block;
+    font-size: 0.8rem;
+    font-weight: 700;
+}
+.label.uppercase {
+    text-transform: uppercase;
+}
+.normal.label {
+    font-weight: 400;
+}
+.column p span i {
+    color: #336699;
+}
+
+.table-header {
+    /* color: #363636; */
+    font-size: 0.8rem;
+    font-weight: 700;
+    background-color: #ccddf1;
 }
 input {
     height: 2em;