diff --git a/projects/laji/src/app/+trait-db/shared/trait-db-my-datasets/trait-db-my-datasets.component.html b/projects/laji/src/app/+trait-db/shared/trait-db-my-datasets/trait-db-my-datasets.component.html
index ffc565790..bcf2a54d9 100644
--- a/projects/laji/src/app/+trait-db/shared/trait-db-my-datasets/trait-db-my-datasets.component.html
+++ b/projects/laji/src/app/+trait-db/shared/trait-db-my-datasets/trait-db-my-datasets.component.html
@@ -15,9 +15,31 @@ <h5>Your Datasets</h5>
 <ng-template #loggedInDatasets>
   <ng-container *ngIf="datasets$ | async as datasets; else loading">
     <div *ngIf="datasets.length > 0; else noDatasets">
-      <ul *ngFor="let dataset of datasets">
-        <li><a [routerLink]="['/trait-db/datasets/', dataset.id]">{{ dataset.name }}</a></li>
-      </ul>
+      <table>
+        <tr>
+          <th>Name</th>
+          <th>Published</th>
+          <th>Shared to FinBIF</th>
+          <th>Shared to GBIF</th>
+          <th>Edit</th>
+        </tr>
+        <tr *ngFor="let dataset of datasets">
+          <td><a [routerLink]="['/trait-db/datasets/', dataset.id]">{{ dataset.name }}</a></td>
+          <td *ngIf="dataset.published; else notPublished">
+            <i class="glyphicon glyphicon-ok"></i>
+            Published</td>
+          <td *ngIf="dataset.shareToFinBIF; else notFinBIF">
+            <i class="glyphicon glyphicon-ok"></i>
+            On FinBIF</td>
+          <td *ngIf="dataset.shareToGBIF; else notGBIF">
+            <i class="glyphicon glyphicon-ok"></i>
+            On GBIF</td>
+          <td><a [routerLink]="['/trait-db/datasets/', dataset.id, 'edit']">Edit dataset</a></td>
+        </tr>
+      </table>
+      <ng-template #notPublished><td>Not published</td></ng-template>
+      <ng-template #notFinBIF><td>Not on FinBIF</td></ng-template>
+      <ng-template #notGBIF><td>Not on GBIF</td></ng-template>
     </div>
   </ng-container>
   <a routerLink="/trait-db/datasets/new" class="btn btn-default">Create dataset</a>
@@ -26,4 +48,3 @@ <h5>Your Datasets</h5>
 <ng-template #noDatasets>
   <p>You have not created any datasets yet. Click below to start sharing trait data.</p>
 </ng-template>
-
diff --git a/projects/laji/src/app/+trait-db/shared/trait-db-my-datasets/trait-db-my-datasets.component.scss b/projects/laji/src/app/+trait-db/shared/trait-db-my-datasets/trait-db-my-datasets.component.scss
index cd6dd4372..bbce93674 100644
--- a/projects/laji/src/app/+trait-db/shared/trait-db-my-datasets/trait-db-my-datasets.component.scss
+++ b/projects/laji/src/app/+trait-db/shared/trait-db-my-datasets/trait-db-my-datasets.component.scss
@@ -2,9 +2,15 @@
 
 .your-datasets {
   padding: $sp-4 $sp-5;
-  background-color: $neutral-4;
+  background-color: $neutral-3;
+  border: 1px solid $primary-3;
+  border-left: 4px solid $primary-5;
+  color: $primary-8;
+  overflow: auto;
+  border-radius: 4px;
 
   h5 {
+    margin-top: $sp-4;
     color: $neutral-8;
   }
 
@@ -12,3 +18,7 @@
   }
 }
 
+.glyphicon-ok {
+  color: $success-5;
+  text-shadow: 1px 1px 3px $neutral-6;
+}
diff --git a/projects/laji/src/app/+trait-db/shared/trait-search/trait-search-filters/rank-filter/rank-filter.component.scss b/projects/laji/src/app/+trait-db/shared/trait-search/trait-search-filters/rank-filter/rank-filter.component.scss
index 95588767b..fdf0c838b 100644
--- a/projects/laji/src/app/+trait-db/shared/trait-search/trait-search-filters/rank-filter/rank-filter.component.scss
+++ b/projects/laji/src/app/+trait-db/shared/trait-search/trait-search-filters/rank-filter/rank-filter.component.scss
@@ -1,4 +1,5 @@
 select, input {
+  width: auto;
   max-width: 300px;
 }
 
diff --git a/projects/laji/src/app/+trait-db/shared/trait-search/trait-search-filters/trait-search-filters.component.html b/projects/laji/src/app/+trait-db/shared/trait-search/trait-search-filters/trait-search-filters.component.html
index 50e01d266..92efb0eaf 100644
--- a/projects/laji/src/app/+trait-db/shared/trait-search/trait-search-filters/trait-search-filters.component.html
+++ b/projects/laji/src/app/+trait-db/shared/trait-search/trait-search-filters/trait-search-filters.component.html
@@ -1,6 +1,4 @@
-<details [formGroup]="form" class="lu-details my-6" open>
-  <summary>Filters</summary>
-
+<div [formGroup]="form">
   <div class="mb-5 d-flex flex-gap-4">
     <div class="dataset-filter flex-grow">
       <label for="trait-search-filters-dataset">Dataset</label>
@@ -27,4 +25,4 @@
     <button (click)="onSearch()" class="btn btn-primary">Search</button>
     <button (click)="onClear()" class="btn btn-default">Clear</button>
   </div>
-</details>
+</div>
diff --git a/projects/laji/src/app/+trait-db/shared/trait-search/trait-search-filters/trait-search-filters.component.scss b/projects/laji/src/app/+trait-db/shared/trait-search/trait-search-filters/trait-search-filters.component.scss
index 5cbd9897f..98195ac9c 100644
--- a/projects/laji/src/app/+trait-db/shared/trait-search/trait-search-filters/trait-search-filters.component.scss
+++ b/projects/laji/src/app/+trait-db/shared/trait-search/trait-search-filters/trait-search-filters.component.scss
@@ -2,4 +2,4 @@
 
 .dataset-filter, .trait-filter {
   max-width: 300px;
-}
\ No newline at end of file
+}
diff --git a/projects/laji/src/app/+trait-db/shared/trait-search/trait-search-filters/trait-search-filters.component.ts b/projects/laji/src/app/+trait-db/shared/trait-search/trait-search-filters/trait-search-filters.component.ts
index 2186eda8f..27f56b6be 100644
--- a/projects/laji/src/app/+trait-db/shared/trait-search/trait-search-filters/trait-search-filters.component.ts
+++ b/projects/laji/src/app/+trait-db/shared/trait-search/trait-search-filters/trait-search-filters.component.ts
@@ -78,6 +78,15 @@ export class TraitSearchFiltersComponent implements OnChanges {
   }
 
   onClear() {
-    this.form.setValue(formDefaultValues);
+    this.form.setValue(
+      Object.entries(this.form.getRawValue()).reduce(
+        (prev, curr: [any, any]) => {
+          const [k, v] = curr;
+          prev[k] = this.disabled?.has(k) ? v : formDefaultValues[<keyof typeof formDefaultValues>k];
+          return prev;
+        },
+        {} as any
+      )
+    );
   }
 }
diff --git a/projects/laji/src/app/+trait-db/shared/trait-search/trait-search.component.html b/projects/laji/src/app/+trait-db/shared/trait-search/trait-search.component.html
index 63b5413bf..b469d6fae 100644
--- a/projects/laji/src/app/+trait-db/shared/trait-search/trait-search.component.html
+++ b/projects/laji/src/app/+trait-db/shared/trait-search/trait-search.component.html
@@ -1,11 +1,19 @@
-<laji-trait-search-filters
-  [initialValue]="initialFilters"
-  [disabled]="getDisabledFilters()"
-  (filterChange)="onFilterChange($event)"
-  (searchClicked)="onFilterSearchClicked()"
-></laji-trait-search-filters>
-
-<a class="btn btn-default" [href]="getDownloadUrl()" download="traits.zip">Download</a>
+<div class="d-flex flex-gap-3">
+  <button
+    class="btn btn-default"
+    [luPopover]="searchFilters"
+    [rootElement]="'body'"
+    [mode]="'click'"
+    placement="bottom"
+  >
+    <i class="glyphicon glyphicon-wrench"></i>
+    Filters
+  </button>
+  <a class="btn btn-default" [href]="getDownloadUrl()" download="traits.zip">
+    <i class="glyphicon glyphicon-download"></i>
+    Download
+  </a>
+</div>
 
 <lu-datatable
   [rows]="$any(searchResult?.res?.results) ?? []"
@@ -19,3 +27,13 @@
   (pageChange)="onChangePageIdx($event)"
   (sortChange)="onSort($event)"
 ></lu-datatable>
+
+<ng-template #searchFilters>
+  <laji-trait-search-filters
+    class="laji-page"
+    [initialValue]="initialFilters"
+    [disabled]="getDisabledFilters()"
+    (filterChange)="onFilterChange($event)"
+    (searchClicked)="onFilterSearchClicked()"
+  ></laji-trait-search-filters>
+</ng-template>
diff --git a/projects/laji/src/app/+trait-db/trait-db-datasets/trait-db-dataset/trait-db-dataset.component.html b/projects/laji/src/app/+trait-db/trait-db-datasets/trait-db-dataset/trait-db-dataset.component.html
index ef19915b8..4767f49c9 100644
--- a/projects/laji/src/app/+trait-db/trait-db-datasets/trait-db-dataset/trait-db-dataset.component.html
+++ b/projects/laji/src/app/+trait-db/trait-db-datasets/trait-db-dataset/trait-db-dataset.component.html
@@ -1,32 +1,77 @@
 <ng-container *ngIf="data$ | async; let data; else loading">
   <ng-container *ngIf="data.dataset !== null; else datasetNotFound">
-    <div>{{ data.dataset?.name }}</div>
-    <div>{{ data.dataset?.description }}</div>
-
-    <ng-container *ngIf="data.perms !== undefined; else loading">
-      <button *ngIf="data.perms !== null" [routerLink]="['edit']" class="btn btn-default">edit</button>
-    </ng-container>
+    <div class="d-flex justify-between mb-4">
+      <h2 class="mb-0">{{ data.dataset?.name }}</h2>
+      <ng-container *ngIf="data.perms !== undefined; else loading">
+        <button *ngIf="data.perms !== null" [routerLink]="['edit']" class="btn btn-default">
+          <i class="glyphicon glyphicon-wrench"></i>
+          Edit dataset
+        </button>
+      </ng-container>
+    </div>
+    <p>{{ data.dataset?.description }}</p>
 
-    <div>citation: {{ data.dataset?.citation }}</div>
-    <div>intellectual owner: {{ data.dataset?.intellectualOwner}}</div>
-    <div>person responsible: {{ data.dataset?.personResponsible }}</div>
-    <div>contact email: {{ data.dataset?.contactEmail }}</div>
-    <div *ngIf="data.dataset?.institutionCode">institution code: {{ data.dataset?.institutionCode }}</div>
-    <div>methods: {{ data.dataset?.methods }}</div>
-    <div>taxonomic coverage: {{ data.dataset?.taxonomicCoverage}}</div>
-    <div>temporal coverage: {{ data.dataset?.temporalCoverage }}</div>
-    <div>geographic coverage: {{ data.dataset?.geographicCoverage }}</div>
-    <div>coverage basis: {{ data.dataset?.coverageBasis }}</div>
-    <div *ngIf="data.dataset?.doi">FinBIF DOI: {{ data.dataset?.doi }}</div>
-    <div *ngIf="data.dataset?.gbifDoi">GBIF DOI: {{ data.dataset?.gbifDoi }}</div>
-    <div>additional identifiers: {{ data.dataset?.additionalIdentifier }}</div>
-    <div>published: {{ data.dataset?.published }}</div>
+    <table class="props-table">
+      <tr>
+        <th scope="row">Citation:</th>
+        <td>{{ data.dataset?.citation }}</td>
+      </tr>
+      <tr>
+        <th scope="row">Intellectual owner:</th>
+        <td>{{ data.dataset?.intellectualOwner }}</td>
+      </tr>
+      <tr>
+        <th scope="row">Person responsible:</th>
+        <td>{{ data.dataset?.personResponsible }}</td>
+      </tr>
+      <tr>
+        <th scope="row">Contact email:</th>
+        <td>{{ data.dataset?.contactEmail }}</td>
+      </tr>
+      <tr *ngIf="data.dataset?.institutionCode">
+        <th scope="row">Institution code:</th>
+        <td>{{ data.dataset?.institutionCode }}</td>
+      </tr>
+      <tr>
+        <th scope="row">Methods:</th>
+        <td>{{ data.dataset?.methods }}</td>
+      </tr>
+      <tr>
+        <th scope="row">Taxonomic coverage:</th>
+        <td>{{ data.dataset?.taxonomicCoverage }}</td>
+      </tr>
+      <tr>
+        <th scope="row">Temporal coverage:</th>
+        <td>{{ data.dataset?.temporalCoverage }}</td>
+      </tr>
+      <tr>
+        <th scope="row">Geographic coverage:</th>
+        <td>{{ data.dataset?.geographicCoverage }}</td>
+      </tr>
+      <tr>
+        <th scope="row">Coverage basis:</th>
+        <td>{{ data.dataset?.coverageBasis }}</td>
+      </tr>
+      <tr *ngIf="data.dataset?.doi">
+        <th scope="row">FinBIF DOI:</th>
+        <td>{{ data.dataset?.doi }}</td>
+      </tr>
+      <tr *ngIf="data.dataset?.gbifDoi">
+        <th scope="row">GBIF DOI:</th>
+        <td>{{ data.dataset?.gbifDoi }}</td>
+      </tr>
+      <tr>
+        <th scope="row">Additional identifiers:</th>
+        <td>{{ data.dataset?.additionalIdentifier }}</td>
+      </tr>
+      <tr>
+        <th scope="row">Published:</th>
+        <td>{{ data.dataset?.published }}</td>
+      </tr>
+    </table>
 
     <ng-container *ngIf="data.perms !== undefined; else loading">
       <ng-container *ngIf="data.perms !== null">
-        <a [routerLink]="['data-entry']" class="btn btn-default">upload trait data</a>
-        <a [routerLink]="['data-editor']" class="btn btn-default">modify existing trait data</a>
-
         <h3>Permissions</h3>
         <ul>
           <li *ngFor="let userId of data.perms.userIds">{{ userId }}</li>
@@ -36,7 +81,21 @@ <h3>Permissions</h3>
     </ng-container>
 
     <ng-container *ngIf="data.dataset?.published">
-      <h3>Browse traits</h3>
+      <div class="d-flex justify-between mt-8 mb-4">
+        <h3 class="mb-0">Trait data</h3>
+        <div *ngIf="data.perms !== undefined; else loading">
+          <ng-container *ngIf="data.perms !== null">
+            <a [routerLink]="['data-entry']" class="btn btn-default mr-3">
+              <i class="glyphicon glyphicon-upload"></i>
+              Upload trait data
+            </a>
+            <a [routerLink]="['data-editor']" class="btn btn-default">
+              <i class="glyphicon glyphicon-edit"></i>
+              Modify existing trait data
+            </a>
+          </ng-container>
+        </div>
+      </div>
       <laji-trait-search [datasetId]="data.dataset?.id"></laji-trait-search>
     </ng-container>
   </ng-container>
diff --git a/projects/laji/src/app/+trait-db/trait-db-datasets/trait-db-dataset/trait-db-dataset.component.scss b/projects/laji/src/app/+trait-db/trait-db-datasets/trait-db-dataset/trait-db-dataset.component.scss
index e69de29bb..134c781d7 100644
--- a/projects/laji/src/app/+trait-db/trait-db-datasets/trait-db-dataset/trait-db-dataset.component.scss
+++ b/projects/laji/src/app/+trait-db/trait-db-datasets/trait-db-dataset/trait-db-dataset.component.scss
@@ -0,0 +1,3 @@
+.props-table th {
+  border-bottom: none;
+}
diff --git a/projects/laji/src/app/+trait-db/trait-db-main/trait-db-main.component.html b/projects/laji/src/app/+trait-db/trait-db-main/trait-db-main.component.html
index 46c81d952..aa33a0620 100644
--- a/projects/laji/src/app/+trait-db/trait-db-main/trait-db-main.component.html
+++ b/projects/laji/src/app/+trait-db/trait-db-main/trait-db-main.component.html
@@ -1,6 +1,6 @@
 <div class="laji-page">
-  <img src="https://placehold.co/800x300"/>
-  <h1>FinBIF Trait Database</h1>
+  <!-- <img src="https://placehold.co/800x300"/> -->
+  <h1 class="mb-7"><strong>FinBIF</strong> Trait Database</h1>
   <div class="d-flex flex-gap-5 mb-6" *ngIf="counts$ | async; else loading; let counts">
     <div class="counts-item"><strong>{{ counts.entries }}</strong> trait entries</div>
     <div class="counts-item"><strong>{{ counts.traits }}</strong> traits</div>
@@ -47,4 +47,3 @@ <h3>About</h3>
 <ng-template #loading>
   <laji-spinner class="d-block m-6"></laji-spinner>
 </ng-template>
-
diff --git a/projects/laji/src/app/+trait-db/trait-db-main/trait-db-main.component.scss b/projects/laji/src/app/+trait-db/trait-db-main/trait-db-main.component.scss
index 5885e0917..20f749056 100644
--- a/projects/laji/src/app/+trait-db/trait-db-main/trait-db-main.component.scss
+++ b/projects/laji/src/app/+trait-db/trait-db-main/trait-db-main.component.scss
@@ -8,12 +8,19 @@ p {
   max-width: 600px;
 }
 
+h1 strong {
+  color: $primary-5;
+}
+
 .counts-item {
   padding: $sp-4 $sp-5;
-  background-color: $neutral-4;
+  background-color: $neutral-1;
+  border-radius: 4px;
+  border: 1px solid $info-3;
+  color: $info-8;
 
   strong {
     font-size: $fs-5;
+    color: $info-7;
   }
 }
-
diff --git a/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait-editor/trait-db-trait-editor.component.html b/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait-editor/trait-db-trait-editor.component.html
index 769817d0c..fe93747db 100644
--- a/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait-editor/trait-db-trait-editor.component.html
+++ b/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait-editor/trait-db-trait-editor.component.html
@@ -39,38 +39,7 @@
     <label for="base-unit">Base unit:</label>
     <select id="base-unit" class="form-control" formControlName="baseUnit">
       <option [value]="undefined" [attr.selected]="!form.get('baseUnit')?.value ? '' : null">None</option>
-      <option value="TDF.umNM">{{ 'TDF.umNM' | label }}</option>
-      <option value="TDF.umUM">{{ 'TDF.umUM' | label }}</option>
-      <option value="TDF.umMM">{{ 'TDF.umMM' | label }}</option>
-      <option value="TDF.umCM">{{ 'TDF.umCM' | label }}</option>
-      <option value="TDF.umM">{{ 'TDF.umM' | label }}</option>
-      <option value="TDF.umKM">{{ 'TDF.umKM' | label }}</option>
-      <option value="TDF.umG">{{ 'TDF.umG' | label }}</option>
-      <option value="TDF.umKG">{{ 'TDF.umKG' | label }}</option>
-      <option value="TDF.umA">{{ 'TDF.umA' | label }}</option>
-      <option value="TDF.umS">{{ 'TDF.umS' | label }}</option>
-      <option value="TDF.umML">{{ 'TDF.umML' | label }}</option>
-      <option value="TDF.umL">{{ 'TDF.umL' | label }}</option>
-      <option value="TDF.umMOL">{{ 'TDF.umMOL' | label }}</option>
-      <option value="TDF.umMMOL">{{ 'TDF.umMMOL' | label }}</option>
-      <option value="TDF.umUMOL">{{ 'TDF.umUMOL' | label }}</option>
-      <option value="TDF.umHZ">{{ 'TDF.umHZ' | label }}</option>
-      <option value="TDF.umP">{{ 'TDF.umP' | label }}</option>
-      <option value="TDF.umPPT">{{ 'TDF.umPPT' | label }}</option>
-      <option value="TDF.umPPM">{{ 'TDF.umPPM' | label }}</option>
-      <option value="TDF.umC">{{ 'TDF.umC' | label }}</option>
-      <option value="TDF.umMM2">{{ 'TDF.umMM2' | label }}</option>
-      <option value="TDF.umCM2">{{ 'TDF.umCM2' | label }}</option>
-      <option value="TDF.umM2">{{ 'TDF.umM2' | label }}</option>
-      <option value="TDF.umARE">{{ 'TDF.umARE' | label }}</option>
-      <option value="TDF.umHA">{{ 'TDF.umHA' | label }}</option>
-      <option value="TDF.umKM2">{{ 'TDF.umKM2' | label }}</option>
-      <option value="TDF.umMM3">{{ 'TDF.umMM3' | label }}</option>
-      <option value="TDF.umCM3">{{ 'TDF.umCM3' | label }}</option>
-      <option value="TDF.umM3">{{ 'TDF.umM3' | label }}</option>
-      <option value="TDF.umGMOL">{{ 'TDF.umGMOL' | label }}</option>
-      <option value="TDF.umGMOLL">{{ 'TDF.umGMOLL' | label }}</option>
-      <option value="TDF.umCM2H">{{ 'TDF.umCM2H' | label }}</option>
+      <option *ngFor="let u of (unitOfMeasurements$ | async)" [value]="u.id">{{ u.label }}</option>
     </select>
     <ng-container *ngTemplateOutlet="errorsTmp; context: { $implicit: 'baseUnit' }"></ng-container>
   </div>
@@ -104,4 +73,3 @@
 <ng-template #errorsTmp let-prop>
   <div class="alert alert-danger" role="alert" *ngIf="errors?.[prop]">{{ errors?.[prop]}}</div>
 </ng-template>
-
diff --git a/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait-editor/trait-db-trait-editor.component.ts b/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait-editor/trait-db-trait-editor.component.ts
index 6b0ea6f29..56aaa1ba5 100644
--- a/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait-editor/trait-db-trait-editor.component.ts
+++ b/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait-editor/trait-db-trait-editor.component.ts
@@ -5,6 +5,7 @@ import { components } from 'projects/laji-api-client-b/generated/api';
 import { LajiApiClientBService } from 'projects/laji-api-client-b/src/laji-api-client-b.service';
 import { Observable } from 'rxjs';
 import { map, filter, switchMap, tap } from 'rxjs/operators';
+import { MetadataService } from '../../../shared/service/metadata.service';
 import { UserService } from '../../../shared/service/user.service';
 import { filterNullValues } from '../../trait-db-datasets/trait-db-dataset-editor/trait-db-dataset-editor.component';
 
@@ -33,13 +34,15 @@ export class TraitDbTraitEditorComponent implements OnInit {
   errors: ValidationResponse['errors'] | undefined;
 
   groups$!: Observable<components['schemas']['TraitGroup'][]>;
+  unitOfMeasurements$!: Observable<{id: string; label: string }[]>;
 
   constructor(
     private route: ActivatedRoute,
     private api: LajiApiClientBService,
     private fb: FormBuilder,
     private cdr: ChangeDetectorRef,
-    private router: Router
+    private router: Router,
+    private metadataService: MetadataService
   ) {}
 
   ngOnInit(): void {
@@ -53,6 +56,8 @@ export class TraitDbTraitEditorComponent implements OnInit {
       });
     });
 
+    this.unitOfMeasurements$ = this.metadataService.getRange('TDF.unitOfMeasurementEnum');
+
     this.groups$ = this.api.fetch('/trait/trait-groups', 'get', {});
   }
 
@@ -134,4 +139,3 @@ export class TraitDbTraitEditorComponent implements OnInit {
     });
   }
 }
-
diff --git a/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait-editor/trait-enumeration-value-list.component.html b/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait-editor/trait-enumeration-value-list.component.html
index b7d59f5f0..6b9a95271 100644
--- a/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait-editor/trait-enumeration-value-list.component.html
+++ b/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait-editor/trait-enumeration-value-list.component.html
@@ -1,3 +1,4 @@
+<b class="d-block">Trait enumerations:</b>
 <div *ngFor="let traitEnumValueControl of form.controls; let index = index" class="trait-enum-value-control">
   <form [formGroup]="traitEnumValueControl">
     <div class="d-block mb-3">
@@ -22,4 +23,3 @@
   <button class="btn btn-default" (click)="onRemoveElem($event, index)">Remove trait enumeration value</button>
 </div>
 <button class="btn btn-default" (click)="onAddElem($event)">Add trait enumeration value</button>
-
diff --git a/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait/trait-db-trait.component.html b/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait/trait-db-trait.component.html
index 6df2a00f0..722a84760 100644
--- a/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait/trait-db-trait.component.html
+++ b/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait/trait-db-trait.component.html
@@ -1,20 +1,47 @@
 <ng-container *ngIf="trait$ | async; let trait; else loading">
-  <div *ngIf="{ val: loggedIn$ | async } as loggedIn; else loading">
-    <ng-container *ngIf="loggedIn.val">
-      <button class="btn btn-default" [routerLink]="['edit']">Edit</button>
+  <div class="d-flex justify-between mb-4">
+    <h2 class="mb-0">{{ trait.name }}</h2>
+    <ng-container *ngIf="{ val: loggedIn$ | async } as loggedIn; else loading">
+      <button *ngIf="loggedIn.val" [routerLink]="['edit']" class="btn btn-default">
+        <i class="glyphicon glyphicon-wrench"></i>
+        Edit trait
+      </button>
     </ng-container>
   </div>
+  <p>{{ trait.description }}</p>
 
-  <div>Group: {{ trait.group }}</div>
-  <div>Data entry name: {{ trait.dataEntryName }}</div>
-  <div>Example values: {{ trait.exampleValues }}</div>
-  <div>Range: {{ trait.range | label }}</div>
-  <div>Base unit of measurement: {{ trait.baseUnit | label }}</div>
-  <div>Reference: {{ trait.reference }}</div>
-  <div>Identifiers: {{ trait.identifiers | values }}</div>
+  <table class="props-table">
+    <tr>
+      <th scope="row">Group:</th>
+      <td>{{ trait.group }}</td>
+    </tr>
+    <tr>
+      <th scope="row">Data entry name:</th>
+      <td>{{ trait.dataEntryName }}</td>
+    </tr>
+    <tr>
+      <th scope="row">Example values:</th>
+      <td>{{ trait.exampleValues }}</td>
+    </tr>
+    <tr>
+      <th scope="row">Range:</th>
+      <td>{{ trait.range | label }}</td>
+    </tr>
+    <tr>
+      <th scope="row">Base unit of measurement:</th>
+      <td>{{ trait.baseUnit | label }}</td>
+    </tr>
+    <tr>
+      <th scope="row">Reference:</th>
+      <td>{{ trait.reference }}</td>
+    </tr>
+    <tr>
+      <th scope="row">Identifiers:</th>
+      <td>{{ trait.identifiers | values }}</td>
+    </tr>
+  </table>
 </ng-container>
 
 <ng-template #loading>
   <laji-spinner class="d-block m-6"></laji-spinner>
 </ng-template>
-
diff --git a/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait/trait-db-trait.component.scss b/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait/trait-db-trait.component.scss
new file mode 100644
index 000000000..134c781d7
--- /dev/null
+++ b/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait/trait-db-trait.component.scss
@@ -0,0 +1,3 @@
+.props-table th {
+  border-bottom: none;
+}
diff --git a/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait/trait-db-trait.component.ts b/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait/trait-db-trait.component.ts
index 48edc823d..627301be3 100644
--- a/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait/trait-db-trait.component.ts
+++ b/projects/laji/src/app/+trait-db/trait-db-traits/trait-db-trait/trait-db-trait.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { components } from 'projects/laji-api-client-b/generated/api';
 import { LajiApiClientBService } from 'projects/laji-api-client-b/src/laji-api-client-b.service';
@@ -9,7 +9,9 @@ import { UserService } from '../../../shared/service/user.service';
 export type Trait = components['schemas']['Trait'];
 
 @Component({
-  templateUrl: './trait-db-trait.component.html'
+  templateUrl: './trait-db-trait.component.html',
+  styleUrls: ['./trait-db-trait.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TraitDbTraitComponent implements OnInit {
   trait$!: Observable<Trait>;
@@ -31,4 +33,3 @@ export class TraitDbTraitComponent implements OnInit {
     this.loggedIn$ = this.userService.isLoggedIn$;
   }
 }
-
diff --git a/projects/laji/src/app/+trait-db/trait-db.component.scss b/projects/laji/src/app/+trait-db/trait-db.component.scss
index e0ab11144..5b74de20a 100644
--- a/projects/laji/src/app/+trait-db/trait-db.component.scss
+++ b/projects/laji/src/app/+trait-db/trait-db.component.scss
@@ -7,6 +7,7 @@
 
 main {
   padding: $sp-5 $sp-6;
+  padding-top: $sp-7;
 }
 
 ::ng-deep main.trait-db-main > ng-component {