diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.html b/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.html
index cad528436a4b29db5fb77dbfaff6b394e71181aa..d0df352c878900a6b82fc1b1391615be36de6156 100644
--- a/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.html
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.html
@@ -1,5 +1,10 @@
 <div class="tabs is-boxed">
   <ul>
+    <li class="title-dgl is-size-4 has-text-weight-bold"> 
+     {{ metadata?.title }}
+    </li>
+  </ul>
+  <ul class="navigation-tabs">
     <li [routerLink]="['info']" [routerLinkActive]="'is-active'">
       <a>
         <span class="icon is-small">
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.scss b/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..cddf377cc137f84bcf279ec4e1b26ec7ff32d6f4 100644
--- a/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.scss
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.scss
@@ -0,0 +1,12 @@
+.tabs {
+  &:not(:last-child) {
+    margin-bottom: 0;
+  }
+}
+
+.navigation-tabs {
+  justify-content: flex-end;
+  li.is-active a {
+    border-width: 1px;
+  }
+}
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.ts b/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.ts
index 99f3a4e6d9f3359d3d38d3c1ad68681278a35af5..cfb2be30db3d2fd100f8a21ebb12cb6cad4c82cc 100644
--- a/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.ts
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.ts
@@ -14,7 +14,16 @@ export class DatasetDetailComponent implements OnInit {
 
   metadata: Metadata;
 
-  constructor() {}
+  constructor(
+    private _route: ActivatedRoute,
+    private _datasetService: DatasetService,
+  ) {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this._route.paramMap
+    .switchMap((params: ParamMap) => this._datasetService.getMetadataById(params.get('id')))
+    .subscribe((metadata: Metadata) => {
+      this.metadata = metadata;
+    });
+  }
 }
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.html b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..845b8bdefefc639ff2a996c23af0449970aacc39
--- /dev/null
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.html
@@ -0,0 +1,15 @@
+<div class="description">
+  <div class="columns">
+    <div class="column">
+      <p class="has-text-weight-semibold is-size-7 is-uppercase">{{ description.title }}</p>
+    </div>
+  </div>
+  <div class="columns data" *ngFor="let data of description.data; let index=index; let odd=odd; let even=even;">
+    <div class="column is-2 has-text-weight-bold is-size-7" [ngClass]="{ odd: odd, even: even }">
+      {{ data.title }}
+    </div>
+    <div class="column is-10 is-size-7" [ngClass]="{ odd: odd, even: even }">
+      {{ data.value }}
+    </div>
+  </div>
+</div>
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.scss b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..db716c7f251d0c1aafa4fcdba26b83486aa78429
--- /dev/null
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.scss
@@ -0,0 +1,27 @@
+@import "../../../../../../scss/variables";
+
+.description {
+  margin-bottom: 1rem;
+  margin-top: 1.5rem;
+  .columns {
+    margin-left: 0.75rem;
+    margin-right: 0.75rem;
+  }
+  .columns.data {
+    border-bottom: 1px solid $border;
+    border-right: none;
+    border-left: none;
+    border-top: 1px solid $border;
+  }
+  .columns.data~.columns.data {
+    border-top: none;
+  }
+  .column {
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+}
+
+.even {
+  background-color: #F3F5F7;
+}
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.spec.ts b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1c543d1b96e813e70818c52b36a92e4b5ee98e9b
--- /dev/null
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatasetDescriptionComponent } from './dataset-description.component';
+
+describe('DatasetDescriptionComponent', () => {
+  let component: DatasetDescriptionComponent;
+  let fixture: ComponentFixture<DatasetDescriptionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DatasetDescriptionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatasetDescriptionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.ts b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..54a3768abd47e6e35391daa281491860cebcb65e
--- /dev/null
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-dataset-description',
+  templateUrl: './dataset-description.component.html',
+  styleUrls: ['./dataset-description.component.scss']
+})
+export class DatasetDescriptionComponent implements OnInit {
+  @Input() description: any;
+
+  constructor() { }
+
+  ngOnInit() {
+    console.log(this.description);
+  }
+
+}
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.html b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..2735ae91716a8ea1df960fa4787849f2841d51e4
--- /dev/null
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.html
@@ -0,0 +1,35 @@
+<ng-container *ngIf="metadata">
+
+  <div class="columns abstract">
+    <div class="column">
+      <p>
+        <strong class="has-text-warning is-size-7" *ngFor="let topic of metadata.topic_category">
+          {{ topic }}
+        </strong>
+      </p>
+      <p>{{ metadata.abstract }}</p>
+    </div>
+
+  </div>
+
+  <div>
+    <p class="title-dgl is-size-5 has-text-weight-bold">Description du jeu de données</p>
+    <div class="columns dataset-description">
+      <div class="column is-3 time-data">
+        <p class="has-text-weight-semibold is-size-7">Données temporelles</p>
+        <p>Date de création</p>
+        <p> {{ metadata.date_publication[0] | date: 'dd LLL yyyy'}}</p>
+        <p>Fréquence de mise à jour</p>
+        <p>XXX</p>
+        <p class="has-text-weight-semibold is-size-7">Dans ce jeu de données</p>
+        <p>Nombre d'enregistrements</p>
+        <p>{{ metadata.total_documents}}</p>
+      </div>
+      <div class="column is-9 ">
+        <ng-container *ngFor="let description of descriptions">
+          <app-dataset-description [description]="description"></app-dataset-description>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+</ng-container>
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.scss b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..bd23d0e75e28d4f9ebc48bd401eaa5a52438c888
--- /dev/null
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.scss
@@ -0,0 +1,30 @@
+@import "../../../../../scss/variables";
+
+.abstract {
+  .column {
+    background-color: white;
+  }
+  margin-top: 0;
+}
+
+.dataset-description {
+  & > .column {
+    background-color: white;
+    border: 1px solid $border;
+    &:first-child {
+      border-right: none;
+    }
+  }
+}
+
+.title-dgl {
+  margin-bottom: 1rem;
+}
+
+.file-state {
+  background-color: green;
+}
+.url-download {
+  color: darkred;
+}
+
diff --git a/webapp/src/app/geosource/components/dataset-info/dataset-info.component.spec.ts b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.spec.ts
similarity index 100%
rename from webapp/src/app/geosource/components/dataset-info/dataset-info.component.spec.ts
rename to webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.spec.ts
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.ts b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..45b11372385589852e48484fa3c3c9731c84bc85
--- /dev/null
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.ts
@@ -0,0 +1,78 @@
+import { Component, OnInit } from '@angular/core';
+import { Metadata, IMetadataUri } from '../../../models';
+import { Observable } from 'rxjs/Observable';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+import { DatasetService } from '../../../services';
+import 'rxjs/add/operator/switchMap';
+
+@Component({
+  selector: 'app-dataset-info',
+  templateUrl: './dataset-info.component.html',
+  styleUrls: ['./dataset-info.component.scss']
+})
+export class DatasetInfoComponent implements OnInit {
+
+  metadata: Metadata;
+  descriptions: Object[];
+
+  constructor(
+    private _route: ActivatedRoute,
+    private _datasetService: DatasetService,
+  ) {}
+
+  ngOnInit() {
+    this._route.parent.paramMap
+    .switchMap((params: ParamMap) => this._datasetService.getMetadataById(params.get('id')))
+    .subscribe((metadata: Metadata) => {
+      this.metadata = metadata;
+      this.constructDescriptions();
+    });
+  }
+
+  constructDescriptions() {
+    this.descriptions = [];
+    this.descriptions.push({
+      title: 'Informations générales',
+      data: [
+        {'title': 'Source', 'value': this.metadata.contact[0].organization},
+        {'title': 'Formats', 'value': this.formatProtocols(this.metadata.uri)}
+      ]
+    });
+    this.descriptions.push({
+      title: 'Catégorisation',
+      data: [
+        {'title': 'Catégories', 'value': this.metadata.topic_category.join(', ')},
+        {'title': 'Mots clés', 'value': this.metadata.keyword.join(', ')}
+      ]
+    });
+    this.descriptions.push({
+      title: 'Provenance',
+      data: [
+        {'title': 'Généalogie', 'value': this.metadata.lineage}
+      ]
+    });
+    this.descriptions.push({
+      title: 'Contraintes légales',
+      data: [
+        {'title': 'Licence', 'value': this.metadata.use_limitation[0]},
+        {'title': 'Restriction', 'value': this.metadata.rights[1]}
+      ]
+    });
+    this.descriptions.push({
+      title: 'Informations géographiques',
+      data: [
+        {'title': 'Type de représentation', 'value': this.metadata.spatial_type},
+        {'title': 'Echelle', 'value': '1:' + this.metadata.denominators},
+        {'title': 'Résolution', 'value': this.metadata.resolution[0].distance + ' ' + this.metadata.resolution[0].uom},
+        {'title': 'Etendue géographique', 'value': ''},
+        {'title': 'Système de coordonnées', 'value': ''}
+      ]
+    });
+  }
+
+  formatProtocols(uriList: Array<IMetadataUri>): string {
+    return uriList.map(uri => {
+      return uri.protocol;
+    }).join(', ');
+  }
+}
diff --git a/webapp/src/app/geosource/components/dataset-map/dataset-map.component.html b/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.html
similarity index 100%
rename from webapp/src/app/geosource/components/dataset-map/dataset-map.component.html
rename to webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.html
diff --git a/webapp/src/app/geosource/components/dataset-map/dataset-map.component.scss b/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.scss
similarity index 100%
rename from webapp/src/app/geosource/components/dataset-map/dataset-map.component.scss
rename to webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.scss
diff --git a/webapp/src/app/geosource/components/dataset-map/dataset-map.component.spec.ts b/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.spec.ts
similarity index 100%
rename from webapp/src/app/geosource/components/dataset-map/dataset-map.component.spec.ts
rename to webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.spec.ts
diff --git a/webapp/src/app/geosource/components/dataset-map/dataset-map.component.ts b/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.ts
similarity index 100%
rename from webapp/src/app/geosource/components/dataset-map/dataset-map.component.ts
rename to webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.ts
diff --git a/webapp/src/app/geosource/components/dataset-info/dataset-info.component.html b/webapp/src/app/geosource/components/dataset-info/dataset-info.component.html
deleted file mode 100644
index 78a6fe9c27d21ed22ff59f78d0738efd386bcbe8..0000000000000000000000000000000000000000
--- a/webapp/src/app/geosource/components/dataset-info/dataset-info.component.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<ng-container *ngIf="metadata">
-    <div class="columns">
-        <div class="column is-8">
-            <div class="card">
-                <div class="card-content">
-                    <h2> {{ metadata.title }} </h2>
-                    <p>{{ metadata.abstract }}</p>
-                    <h5 i18n="@@global.keywords">Keywords</h5>
-                    <span *ngIf="metadata.keyword"> {{metadata.keyword.join(", ")}} </span>
-                </div>
-            </div>
-        </div>
-        <div class="column is-4">
-            <div class="card">
-                <div class="card-content">
-                    <strong i18n="@@global.information">Information</strong>
-                    <p *ngIf="metadata.contact">
-                        <span class="icon">
-                            <i class="far fa-user"></i>
-                        </span>
-                        {{ metadata.contact[0].organization }}</p>
-                    <p *ngIf="metadata.uri">
-                        <span class="icon">
-                            <i class="far fa-copyright"></i>
-                        </span>
-                        {{ metadata.use_limitation[0] }}</p>
-                    <p *ngIf="metadata.date_publication">
-                        <span class="icon">
-                            <i class="far fa-clock"></i>
-                        </span>
-                        {{ metadata.date_publication[0] | date: 'dd LLL yyyy'}} </p>
-                    <p *ngFor="let topic of metadata.getCategories()">
-                        <!-- <span class="icon">
-                            <i class="fa fa-arrow-up"></i>
-                        </span> -->
-                        <span class="category">{{ topic}} </span>
-                    </p>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="columns">
-        <div class="column is-8">
-            <div class="card">
-                <div class="card-content">
-                    <strong> Télécharger les ressources </strong>
-                    <!-- <mat-expansion-panel *ngFor="let uri of metadata.uri" [hideToggle]=true>
-                        <mat-expansion-panel-header>
-                            <mat-panel-title>
-                                {{ uri.description }}
-                            </mat-panel-title>
-                        </mat-expansion-panel-header>
-                        <div>
-                            <strong>URL</strong>
-                            <p class="url-download">{{ uri.url }}</p>
-                        </div>
-                    </mat-expansion-panel> -->
-                </div>
-            </div>
-        </div>
-
-    </div>
-</ng-container>
\ No newline at end of file
diff --git a/webapp/src/app/geosource/components/dataset-info/dataset-info.component.scss b/webapp/src/app/geosource/components/dataset-info/dataset-info.component.scss
deleted file mode 100644
index d487e2a7b7f1456910cb3ed143b417f8288eeacc..0000000000000000000000000000000000000000
--- a/webapp/src/app/geosource/components/dataset-info/dataset-info.component.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.row {
-  margin: 5px 0;
-}
-
-.category {
-  background-color: black;
-  color: white;
-  padding: 2px;
-}
-
-.file-state {
-  background-color: green;
-}
-.url-download {
-  color: darkred;
-}
-
-button {
-  min-width: 33px;
-  background-color: yellowgreen;
-}
\ No newline at end of file
diff --git a/webapp/src/app/geosource/components/dataset-info/dataset-info.component.ts b/webapp/src/app/geosource/components/dataset-info/dataset-info.component.ts
deleted file mode 100644
index fb7e6d1491227a8b4ad4e50cbc8f4cb2dbd6b930..0000000000000000000000000000000000000000
--- a/webapp/src/app/geosource/components/dataset-info/dataset-info.component.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Metadata } from '../../models';
-import { Observable } from 'rxjs/Observable';
-import { Router, ActivatedRoute, ParamMap } from '@angular/router';
-import { DatasetService } from '../../services';
-import 'rxjs/add/operator/switchMap';
-
-@Component({
-  selector: 'app-dataset-info',
-  templateUrl: './dataset-info.component.html',
-  styleUrls: ['./dataset-info.component.scss']
-})
-export class DatasetInfoComponent implements OnInit {
-
-  metadata: Metadata;
-
-  constructor(
-    private _route: ActivatedRoute,
-    private _datasetService: DatasetService,
-  ) {}
-
-  ngOnInit() {
-    this._route.parent.paramMap
-    .switchMap((params: ParamMap) => this._datasetService.getMetadataById(params.get('id')))
-    .subscribe((metadata: Metadata) => {
-      this.metadata = metadata;
-    });
-  }
-}
diff --git a/webapp/src/app/geosource/components/index.ts b/webapp/src/app/geosource/components/index.ts
index 0fa3a113fd7e3b3fa93b79a1ec7a62697f0d75ea..6c601ec146dbc6181378cb1e54e6fc7efad860c2 100644
--- a/webapp/src/app/geosource/components/index.ts
+++ b/webapp/src/app/geosource/components/index.ts
@@ -1,7 +1,8 @@
 import { DatasetListComponent } from './dataset-list/dataset-list.component';
 import { DatasetDetailComponent } from './dataset-detail/dataset-detail.component';
-import { DatasetMapComponent } from './dataset-map/dataset-map.component';
-import { DatasetInfoComponent } from './dataset-info/dataset-info.component';
+import { DatasetMapComponent } from './dataset-detail/dataset-map/dataset-map.component';
+import { DatasetInfoComponent } from './dataset-detail/dataset-info/dataset-info.component';
+import { DatasetDescriptionComponent } from './dataset-detail/dataset-info/dataset-description/dataset-description.component';
 import { SearchBarComponent } from './search-bar/search-bar.component';
 import { ResearchComponent } from './research/research.component';
 import { SortComponent } from './sort/sort.component';
@@ -9,8 +10,9 @@ import { FilterListComponent } from './filter-list/filter-list.component';
 import { FilterDetailComponent } from './filter-list/filter-detail/filter-detail.component';
 
 export * from './dataset-detail/dataset-detail.component';
-export * from './dataset-map/dataset-map.component';
-export * from './dataset-info/dataset-info.component';
+export * from './dataset-detail/dataset-map/dataset-map.component';
+export * from './dataset-detail/dataset-info/dataset-info.component';
+export * from './dataset-detail/dataset-info/dataset-description/dataset-description.component';
 export * from './dataset-list/dataset-list.component';
 export * from './filter-list/filter-list.component';
 export * from './search-bar/search-bar.component';
@@ -21,6 +23,7 @@ export const GeosourceComponents = [
   DatasetDetailComponent,
   DatasetMapComponent,
   DatasetInfoComponent,
+  DatasetDescriptionComponent,
   DatasetListComponent,
   SearchBarComponent,
   ResearchComponent,
diff --git a/webapp/src/app/geosource/geosource.module.ts b/webapp/src/app/geosource/geosource.module.ts
index c56dc294728f0e4e3a47b526a79a4f98f53c50a5..1c07af9031b89a948cc37ba8bfe05940fbab92cc 100644
--- a/webapp/src/app/geosource/geosource.module.ts
+++ b/webapp/src/app/geosource/geosource.module.ts
@@ -5,6 +5,7 @@ import { GeosourceRoutingModule } from './geosource-routing.module';
 import { GeosourceComponents } from './components';
 import { GeosourceServices } from './services';
 import { SharedModule } from '../shared/shared.module';
+import { DatasetDescriptionComponent } from './components/dataset-detail/dataset-info/dataset-description/dataset-description.component';
 
 @NgModule({
   imports: [
@@ -13,7 +14,7 @@ import { SharedModule } from '../shared/shared.module';
     FormsModule,
     SharedModule
   ],
-  declarations: [...GeosourceComponents],
+  declarations: [...GeosourceComponents, DatasetDescriptionComponent],
   providers: [
     ...GeosourceServices
   ]
diff --git a/webapp/src/app/geosource/models/metadata.model.ts b/webapp/src/app/geosource/models/metadata.model.ts
index e00edc72280c358c69f4802ad66d50eafeee6f08..06cf938e351732b0429ee486cd257fd66747371c 100644
--- a/webapp/src/app/geosource/models/metadata.model.ts
+++ b/webapp/src/app/geosource/models/metadata.model.ts
@@ -9,7 +9,12 @@ export interface IMetadata {
   'topic_category': string[];
   'highlight'?: any;
   'use_limitation': string[];
+  'rights': string[];
   'total_documents': number;
+  'lineage': string;
+  'spatial_type': string;
+  'denominators': number;
+  'resolution': IMetadataResolution[];
 }
 
 interface IContact {
@@ -30,6 +35,11 @@ export interface IMetadataUri {
   'name':  string;
 }
 
+export interface IMetadataResolution {
+  'distance': string;
+  'uom':  string;
+}
+
 export class Metadata implements IMetadata {
   'dataset_id'?: string;
   'title': string;
@@ -41,7 +51,12 @@ export class Metadata implements IMetadata {
   'topic_category': string[];
   'highlight': any;
   'use_limitation': string[];
+  'rights': string[];
   'total_documents': number;
+  'lineage': string;
+  'spatial_type': string;
+  'denominators': number;
+  'resolution': IMetadataResolution[];
 
   constructor(data?: IMetadata) {
     Object.assign(this, data);
diff --git a/webapp/src/scss/variables.scss b/webapp/src/scss/variables.scss
index 040509312661b6e25f13a532e28f2c3befb2d5d3..5b70ea2cfe96a970c0165a19926408d0f1275045 100644
--- a/webapp/src/scss/variables.scss
+++ b/webapp/src/scss/variables.scss
@@ -1,7 +1,6 @@
 // 1. Import the initial variables
 @import "../../node_modules/bulma/sass/utilities/initial-variables";
 @import "../../node_modules/bulma/sass/utilities/functions";
-
 // 2. Set your own initial variables
 // Update blue
 $main: #17252b;
@@ -14,31 +13,34 @@ $family-sans-serif: "Lato";
 $footer-background-color: black;
 $title-font: 'Open Sans';
 
-// Font size setting
+// Tabs
+$tabs-border-bottom-width: 1px;
+$tabs-border-bottom-color: black;
+$tabs-boxed-link-active-border-color: black;
+
+// Font size settings based on 16px (default browser font-size)
 $size-1: 3rem;
 $size-2: 2.5rem;
 $size-3: 2rem;
-$size-4: 1.25rem;
-$size-5: 1rem;
-$size-6: 0.875rem;
-$size-7: 0.75rem ;  
+$size-4: 1.25rem; //20px
+$size-5: 1rem; //16px
+$size-6: 0.875rem; //14px
+$size-7: 0.8185rem; //13px
+$size-8: 0.75rem; //12px
 
 // Section settings
 $section-padding: 1.5rem 1.5rem;
-
 // 3. Set the derived variables
 // Use the new pink as the primary color
 $primary: $main;
 // Use the new serif family
 $family-primary: $family-sans-serif;
-
 $pagination-current-background-color: $yellow;
 $pagination-current-border-color: $yellow;
-
 // 6. Import the rest of Bulma
 @import "../../node_modules/bulma/sass/utilities/_all";
 @import "../../node_modules/bulma/sass/base/_all";
 @import "../../node_modules/bulma/sass/elements/_all";
 @import "../../node_modules/bulma/sass/components/_all";
 @import "../../node_modules/bulma/sass/grid/_all";
-@import "../../node_modules/bulma/sass/layout/_all";
\ No newline at end of file
+@import "../../node_modules/bulma/sass/layout/_all";
diff --git a/webapp/src/styles.scss b/webapp/src/styles.scss
index f00391ca6aae9e55a048b4f0a70c1db436f5379d..289da6c85b41db97b6487b1690a1c4f47b69f7de 100644
--- a/webapp/src/styles.scss
+++ b/webapp/src/styles.scss
@@ -45,4 +45,8 @@ a:hover {
   text-decoration: none;
 }
 
+.title-dgl {
+  font-family: $title-font;
+}
+
 @import "./scss/wordpress-style";
\ No newline at end of file