diff --git a/backend/src/main/resources/static/assets/images/logo.png b/backend/src/main/resources/static/assets/images/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..86b3ab108693a19cca5a05c95faebd8573e23389
Binary files /dev/null and b/backend/src/main/resources/static/assets/images/logo.png differ
diff --git a/backend/src/main/resources/templates/fragments/institute.html b/backend/src/main/resources/templates/fragments/institute.html
index 7e60309571e11a94c9d725e7934817651e918da2..a79ff6cc547696db1bff202ab5ca8bb481602809 100644
--- a/backend/src/main/resources/templates/fragments/institute.html
+++ b/backend/src/main/resources/templates/fragments/institute.html
@@ -11,7 +11,7 @@ Its unique argument (institute) is an InstituteVO
 
 <th:block th:fragment="institute(institute)">
   <div class="text-center py-2" th:if="${institute.logo}">
-    <img th:src="${institute.logo}" th:alt="${institute.instituteName}"/>
+    <img class="img-fluid" th:src="${institute.logo}" th:alt="${institute.instituteName}"/>
   </div>
   <div th:replace="fragments/row::text-row(label='Code', text=${institute.instituteCode})"></div>
   <div th:replace="fragments/row::text-row(label='Acronym', text=${institute.acronym})"></div>
diff --git a/backend/src/main/resources/templates/fragments/map.html b/backend/src/main/resources/templates/fragments/map.html
index 7fce9d1ec4155e167d3faf5572ee1c9968613750..35ebed333c5c5eaf55160f400e5ebde01313cf24 100644
--- a/backend/src/main/resources/templates/fragments/map.html
+++ b/backend/src/main/resources/templates/fragments/map.html
@@ -10,7 +10,7 @@ to display
 -->
 <div th:fragment="map" id="map-container" class="d-none">
   <div id="map" class="border rounded"></div>
-  <div class="map-legend mt-1">
+  <div class="map-legend mt-1 small">
     <img th:src="@{/assets/images/marker-icon-red.png}" id="red"/>
     <label for="red" class="me-2">Origin site</label>
     <img th:src="@{/assets/images/marker-icon-blue.png}" id="blue"/>
diff --git a/backend/src/main/resources/templates/fragments/row.html b/backend/src/main/resources/templates/fragments/row.html
index e5eb9e7f78172597de3e88235ae796c77c9a08e4..8676b5906b77ae97d6e8c2ca826839450ce28842 100644
--- a/backend/src/main/resources/templates/fragments/row.html
+++ b/backend/src/main/resources/templates/fragments/row.html
@@ -19,7 +19,7 @@ into a block with the condition:
   </th:block>
 -->
 
-<div th:fragment="row(label, content)" class="row py-2">
+<div th:fragment="row(label, content)" class="row f-row">
   <div class="col-md-4 label pb-1 pb-md-0" th:text="${label}"></div>
   <div class="col">
     <th:block th:replace="${content}" />
@@ -40,7 +40,7 @@ into a block with the condition:
     <div th:replace="fragments/row::text-row(label='Some label', text=${someTextExpression})"></div>
   </th:block>
 -->
-<div th:fragment="text-row(label, text)" th:unless="${#strings.isEmpty(text)}" class="row py-2">
+<div th:fragment="text-row(label, text)" th:unless="${#strings.isEmpty(text)}" class="row f-row">
   <div class="col-md-4 label pb-1 pb-md-0" th:text="${label}"></div>
   <div class="col" th:text="${text}"></div>
 </div>
diff --git a/backend/src/main/resources/templates/fragments/source.html b/backend/src/main/resources/templates/fragments/source.html
index 795717ca8c2df1445dbf30999e6fbc8dc5b65a1a..b09638810885559be62d0c5448adecd617dbe2fb 100644
--- a/backend/src/main/resources/templates/fragments/source.html
+++ b/backend/src/main/resources/templates/fragments/source.html
@@ -16,7 +16,7 @@ The entityType argument is a string, which is used in the message
   <th:block th:if="${source != null}">
     <div th:replace="fragments/row::row(label='Source', content=~{::.source})">
       <a class="source" target="_blank" th:href="${source.url}">
-        <img style="max-height: 60px;" th:src="${source.image}" th:alt="${source.name} + ' logo'" />
+        <img class="img-fluid" style="max-height: 60px;" th:src="${source.image}" th:alt="${source.name} + ' logo'" />
       </a>
     </div>
   </th:block>
diff --git a/backend/src/main/resources/templates/fragments/xrefs.html b/backend/src/main/resources/templates/fragments/xrefs.html
index 508b8923a8944dbdf0760d4b58e49a80156bca84..c60310b69c5d852b7a636d9ab7392d0a52d2b553 100644
--- a/backend/src/main/resources/templates/fragments/xrefs.html
+++ b/backend/src/main/resources/templates/fragments/xrefs.html
@@ -9,12 +9,11 @@ Reusable fragment displaying a cross references section, with its title.
 The unique argument (crossReferences) is a List<XRefDocumentVO>
 -->
 
-<div th:fragment="xrefs(crossReferences)" th:if="${!#lists.isEmpty(crossReferences)}">
+<div class="f-card" th:fragment="xrefs(crossReferences)" th:if="${!#lists.isEmpty(crossReferences)}">
   <h2>Cross references</h2>
-
-  <div class="table-responsive scroll-big-table table-card-body">
-    <div class="card">
-      <table class="table table-sm table-striped">
+  <div class="f-card-body">
+    <div class="scroll-table-container scroll-table-container-big">
+      <table class="table table-sm table-striped table-sticky table-responsive-sm">
         <thead>
           <tr>
             <th scope="col">Name</th>
@@ -28,13 +27,12 @@ The unique argument (crossReferences) is a List<XRefDocumentVO>
             <td><a th:href="${crossRef.url}" target="_blank" th:text="${crossRef.name}"></a></td>
             <td th:text="${crossRef.databaseName}"></td>
             <td th:text="${crossRef.entryType}"></td>
-            <td th:text="${#strings.abbreviate(crossRef.description, 120)}"></td>
+            <td style="min-width: 30rem;" th:text="${#strings.abbreviate(crossRef.description, 120)}"></td>
           </tr>
         </tbody>
       </table>
     </div>
   </div>
-
 </div>
 
 </body>
diff --git a/backend/src/main/resources/templates/germplasm.html b/backend/src/main/resources/templates/germplasm.html
index 15ccd615a62c962ec5047510bef07a4cdd6a2652..26c1a85bb55893c61dc237858e1f3a1a88f66be9 100644
--- a/backend/src/main/resources/templates/germplasm.html
+++ b/backend/src/main/resources/templates/germplasm.html
@@ -20,7 +20,7 @@
 
   <div th:replace="fragments/map::map"></div>
 
-  <div class="row align-items-center justify-content-center">
+  <div class="row align-items-center justify-content-center mt-4">
     <div class="col-auto field" th:if="${model.germplasm.photo != null && model.germplasm.photo.thumbnailFile != null}">
       <template id="photo-popover">
         <div class="card">
@@ -34,212 +34,227 @@
         </div>
       </template>
 
-      <button class="btn btn-link p-0"
-              data-bs-toggle="popover"
-              th:data-bs-title="${model.germplasm.photo.photoName}"
-              data-bs-element="#photo-popover"
-              data-bs-container="body"
-              data-bs-trigger="focus">
+      <a role="button"
+         class="d-flex flex-column align-items-center"
+         data-bs-toggle="popover"
+         tabindex="0"
+         th:data-bs-title="${model.germplasm.photo.photoName}"
+         data-bs-element="#photo-popover"
+         data-bs-container="body"
+         data-bs-trigger="focus">
         <img th:src="${model.germplasm.photo.thumbnailFile}" class="img-fluid" />
 
         <figcaption class="figure-caption">
           © <span th:text="${model.germplasm.photo.copyright}"></span>
         </figcaption>
-      </button>
+      </a>
     </div>
 
-
     <div class="col-12 col-lg">
-      <h2>Identification</h2>
-
-      <div th:replace="fragments/row::text-row(label='Germplasm name', text=${model.germplasm.germplasmName})"></div>
-      <div th:replace="fragments/row::text-row(label='Accession number', text=${model.germplasm.accessionNumber})"></div>
+      <div class="f-card">
+        <h2>Identification</h2>
 
-      <div th:replace="fragments/source::source(source=${model.source}, url=${model.germplasm.url}, entityType='germplasm')"></div>
+        <div class="f-card-body">
+          <div th:replace="fragments/row::text-row(label='Germplasm name', text=${model.germplasm.germplasmName})"></div>
+          <div th:replace="fragments/row::text-row(label='Accession number', text=${model.germplasm.accessionNumber})"></div>
 
-      <th:block th:unless="${#lists.isEmpty(model.germplasm.synonyms)}">
-        <div th:replace="fragments/row::row(label='Accession synonyms', content=~{::#accession-synonyms})">
-          <div id="accession-synonyms" class="content-overflow" th:text="${#strings.listJoin(model.germplasm.synonyms, ', ')}"></div>
-        </div>
-      </th:block>
+          <div th:replace="fragments/source::source(source=${model.source}, url=${model.germplasm.url}, entityType='germplasm')"></div>
 
-      <th:block th:unless="${#strings.isEmpty(model.taxon)}">
-        <div th:replace="fragments/row::row(label='Taxon', content=~{::#taxon})">
-          <div id="taxon">
-            <template id="taxon-popover">
-              <th:block th:unless="${#strings.isEmpty(model.germplasm.genus)}">
-                <div th:replace="fragments/row::row(label='Genus', content=~{::#taxon-genus})">
-                  <em id="taxon-genus" th:text="${model.germplasm.genus}"></em>
-                </div>
-              </th:block>
-              <th:block th:unless="${#strings.isEmpty(model.germplasm.species)}">
-                <div th:replace="fragments/row::row(label='Species', content=~{::#taxon-species})">
-                  <span id="taxon-species">
-                    <em th:text="${model.germplasm.species}"></em>
-                    <span th:unless="${#strings.isEmpty(model.germplasm.speciesAuthority)}"
-                          th:text="${'(' + model.germplasm.speciesAuthority + ')'}"></span>
-                  </span>
-                </div>
-              </th:block>
-              <th:block th:unless="${#strings.isEmpty(model.germplasm.subtaxa)}">
-                <div th:replace="fragments/row::row(label='Subtaxa', content=~{::#taxon-subtaxa})">
-                  <span id="taxon-subtaxa">
-                    <em th:text="${model.germplasm.subtaxa}"></em>
-                    <span th:unless="${#strings.isEmpty(model.germplasm.subtaxaAuthority)}"
-                          th:text="${'(' + model.germplasm.subtaxaAuthority + ')'}"></span>
-                  </span>
-                </div>
-              </th:block>
-
-              <div th:replace="fragments/row::text-row(label='Authority', text=${model.taxonAuthor})"></div>
+          <th:block th:unless="${#lists.isEmpty(model.germplasm.synonyms)}">
+            <div th:replace="fragments/row::row(label='Accession synonyms', content=~{::#accession-synonyms})">
+              <div id="accession-synonyms" class="content-overflow" th:text="${#strings.listJoin(model.germplasm.synonyms, ', ')}"></div>
+            </div>
+          </th:block>
 
-              <th:block th:unless="${#lists.isEmpty(model.germplasm.taxonIds)}">
-                <div th:replace="fragments/row::row(label='Taxon IDs', content=~{::#taxon-ids})">
-                  <div id="taxon-ids">
-                    <div th:each="taxonId : ${model.germplasm.taxonIds}" class="row">
-                      <div class="col-6 text-nowrap" th:text="${taxonId.sourceName}"></div>
-                      <div class="col-6">
-                        <span class="taxon-id"
-                              th:replace="fragments/link::link(label=${taxonId.taxonId}, url=${#faidare.taxonIdUrl(taxonId)})"></span>
+          <th:block th:unless="${#strings.isEmpty(model.taxon)}">
+            <div th:replace="fragments/row::row(label='Taxon', content=~{::#taxon})">
+              <div id="taxon">
+                <template id="taxon-popover">
+                  <th:block th:unless="${#strings.isEmpty(model.germplasm.genus)}">
+                    <div th:replace="fragments/row::row(label='Genus', content=~{::#taxon-genus})">
+                      <em id="taxon-genus" th:text="${model.germplasm.genus}"></em>
+                    </div>
+                  </th:block>
+                  <th:block th:unless="${#strings.isEmpty(model.germplasm.species)}">
+                    <div th:replace="fragments/row::row(label='Species', content=~{::#taxon-species})">
+                      <span id="taxon-species">
+                        <em th:text="${model.germplasm.species}"></em>
+                        <span th:unless="${#strings.isEmpty(model.germplasm.speciesAuthority)}"
+                              th:text="${'(' + model.germplasm.speciesAuthority + ')'}"></span>
+                      </span>
+                    </div>
+                  </th:block>
+                  <th:block th:unless="${#strings.isEmpty(model.germplasm.subtaxa)}">
+                    <div th:replace="fragments/row::row(label='Subtaxa', content=~{::#taxon-subtaxa})">
+                      <span id="taxon-subtaxa">
+                        <em th:text="${model.germplasm.subtaxa}"></em>
+                        <span th:unless="${#strings.isEmpty(model.germplasm.subtaxaAuthority)}"
+                              th:text="${'(' + model.germplasm.subtaxaAuthority + ')'}"></span>
+                      </span>
+                    </div>
+                  </th:block>
+
+                  <div th:replace="fragments/row::text-row(label='Authority', text=${model.taxonAuthor})"></div>
+
+                  <th:block th:unless="${#lists.isEmpty(model.germplasm.taxonIds)}">
+                    <div th:replace="fragments/row::row(label='Taxon IDs', content=~{::#taxon-ids})">
+                      <div id="taxon-ids">
+                        <div th:each="taxonId : ${model.germplasm.taxonIds}" class="row">
+                          <div class="col-6 text-nowrap" th:text="${taxonId.sourceName}"></div>
+                          <div class="col-6">
+                            <span class="taxon-id"
+                                  th:replace="fragments/link::link(label=${taxonId.taxonId}, url=${#faidare.taxonIdUrl(taxonId)})"></span>
+                          </div>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </div>
-              </th:block>
+                  </th:block>
 
-              <div th:replace="fragments/row::text-row(label='Comment', text=${model.germplasm.taxonComment})"></div>
-              <th:block th:unless="${#lists.isEmpty(model.germplasm.taxonCommonNames)}">
-                <div th:replace="fragments/row::row(label='Taxon common names', content=~{::#taxon-common-names})">
-                  <div id="taxon-common-names" class="content-overflow" th:text="${#strings.listJoin(model.germplasm.taxonCommonNames, ', ')}"></div>
-                </div>
-              </th:block>
-              <th:block th:unless="${#lists.isEmpty(model.germplasm.taxonSynonyms)}">
-                <div th:replace="fragments/row::row(label='Taxon synonyms', content=~{::#taxon-synonyms})">
-                  <div id="taxon-synonyms" class="content-overflow" th:text="${#strings.listJoin(model.germplasm.taxonSynonyms, ', ')}"></div>
-                </div>
-              </th:block>
-            </template>
-            <button class="btn btn-link p-0"
-                    data-bs-toggle="popover"
-                    th:data-bs-title="${model.taxon}"
-                    data-bs-element="#taxon-popover"
-                    data-bs-container="body"
-                    data-bs-trigger="focus">
-              <em th:text="${model.taxon}"></em>
-              <th:block th:unless="${#strings.isEmpty(model.taxonAuthor)}">(<span th:text="${model.taxonAuthor}"></span>)</th:block>
-            </button>
-          </div>
-        </div>
-      </th:block>
+                  <div th:replace="fragments/row::text-row(label='Comment', text=${model.germplasm.taxonComment})"></div>
+                  <th:block th:unless="${#lists.isEmpty(model.germplasm.taxonCommonNames)}">
+                    <div th:replace="fragments/row::row(label='Taxon common names', content=~{::#taxon-common-names})">
+                      <div id="taxon-common-names" class="content-overflow" th:text="${#strings.listJoin(model.germplasm.taxonCommonNames, ', ')}"></div>
+                    </div>
+                  </th:block>
+                  <th:block th:unless="${#lists.isEmpty(model.germplasm.taxonSynonyms)}">
+                    <div th:replace="fragments/row::row(label='Taxon synonyms', content=~{::#taxon-synonyms})">
+                      <div id="taxon-synonyms" class="content-overflow" th:text="${#strings.listJoin(model.germplasm.taxonSynonyms, ', ')}"></div>
+                    </div>
+                  </th:block>
+                </template>
+                <a role="button"
+                   tabindex="0"
+                   data-bs-toggle="popover"
+                   th:data-bs-title="${model.taxon}"
+                   data-bs-element="#taxon-popover"
+                   data-bs-container="body"
+                   data-bs-trigger="focus">
+                  <em th:text="${model.taxon}"></em>
+                  <th:block th:unless="${#strings.isEmpty(model.taxonAuthor)}">(<span th:text="${model.taxonAuthor}"></span>)</th:block>
+                </a>
+              </div>
+            </div>
+          </th:block>
 
-      <div th:replace="fragments/row::text-row(label='Biological status', text=${model.germplasm.biologicalStatusOfAccessionCode})"></div>
-      <div th:replace="fragments/row::text-row(label='Genetic nature', text=${model.germplasm.geneticNature})"></div>
-      <div th:replace="fragments/row::text-row(label='Seed source', text=${model.germplasm.seedSource})"></div>
-      <div th:replace="fragments/row::text-row(label='Pedigree', text=${model.germplasm.pedigree})"></div>
-      <div th:replace="fragments/row::text-row(label='Comments', text=${model.germplasm.comment})"></div>
+          <div th:replace="fragments/row::text-row(label='Biological status', text=${model.germplasm.biologicalStatusOfAccessionCode})"></div>
+          <div th:replace="fragments/row::text-row(label='Genetic nature', text=${model.germplasm.geneticNature})"></div>
+          <div th:replace="fragments/row::text-row(label='Seed source', text=${model.germplasm.seedSource})"></div>
+          <div th:replace="fragments/row::text-row(label='Pedigree', text=${model.germplasm.pedigree})"></div>
+          <div th:replace="fragments/row::text-row(label='Comments', text=${model.germplasm.comment})"></div>
 
-      <th:block th:if="${model.germplasm.originSite != null && !#strings.isEmpty(model.germplasm.originSite.siteName)}">
-        <div th:replace="fragments/row::row(label='Origin site', content=~{::#origin-site})">
-          <a id="origin-site" th:href="@{/sites/{siteId}(siteId=${#faidare.toSiteParam(model.germplasm.originSite.siteId)})}" th:text="${model.germplasm.originSite.siteName}"></a>
+          <th:block th:if="${model.germplasm.originSite != null && !#strings.isEmpty(model.germplasm.originSite.siteName)}">
+            <div th:replace="fragments/row::row(label='Origin site', content=~{::#origin-site})">
+              <a id="origin-site" th:href="@{/sites/{siteId}(siteId=${#faidare.toSiteParam(model.germplasm.originSite.siteId)})}" th:text="${model.germplasm.originSite.siteName}"></a>
+            </div>
+          </th:block>
         </div>
-      </th:block>
+      </div>
     </div>
   </div>
 
-  <th:block th:if="${model.germplasm.holdingInstitute}">
+  <div class="f-card" th:if="${model.germplasm.holdingInstitute}">
     <h2>Depositary</h2>
-    <template id="holding-institute-popover">
-      <div th:replace="fragments/institute::institute(institute=${model.germplasm.holdingInstitute})"></div>
-    </template>
-    <div th:replace="fragments/row::row(label='Institution', content=~{::#institution})">
-      <button id="institution"
-              data-bs-toggle="popover"
-              th:data-bs-title="${model.germplasm.holdingInstitute.instituteName}"
-              data-bs-element="#holding-institute-popover"
-              data-bs-container="body"
-              data-bs-trigger="focus"
-              class="btn btn-link p-0"
-              th:text="${model.germplasm.holdingInstitute.instituteName}"></button>
-    </div>
-
-    <th:block th:if="${model.germplasm.holdingGenbank != null && !#strings.isEmpty(model.germplasm.holdingGenbank.instituteName) && !#strings.isEmpty(model.germplasm.holdingGenbank.webSite)}">
-      <div th:replace="fragments/row::row(label='Stock center name', content=~{::#stock-center-name})">
-        <a id="stock-center-name"
-           target="_blank"
-           th:href="${model.germplasm.holdingGenbank.webSite}"
-           th:text="${model.germplasm.holdingGenbank.instituteName}"></a>
+    <div class="f-card-body">
+      <template id="holding-institute-popover">
+        <div th:replace="fragments/institute::institute(institute=${model.germplasm.holdingInstitute})"></div>
+      </template>
+      <div th:replace="fragments/row::row(label='Institution', content=~{::#institution})">
+        <a id="institution"
+           role="button"
+           tabindex="0"
+           data-bs-toggle="popover"
+           th:data-bs-title="${model.germplasm.holdingInstitute.instituteName}"
+           data-bs-element="#holding-institute-popover"
+           data-bs-container="body"
+           data-bs-trigger="focus"
+           th:text="${model.germplasm.holdingInstitute.instituteName}"></a>
       </div>
-    </th:block>
 
-    <div th:replace="fragments/row::text-row(label='Presence status', text=${model.germplasm.presenceStatus})"></div>
-  </th:block>
+      <th:block th:if="${model.germplasm.holdingGenbank != null && !#strings.isEmpty(model.germplasm.holdingGenbank.instituteName) && !#strings.isEmpty(model.germplasm.holdingGenbank.webSite)}">
+        <div th:replace="fragments/row::row(label='Stock center name', content=~{::#stock-center-name})">
+          <a id="stock-center-name"
+             target="_blank"
+             th:href="${model.germplasm.holdingGenbank.webSite}"
+             th:text="${model.germplasm.holdingGenbank.instituteName}"></a>
+        </div>
+      </th:block>
+
+      <div th:replace="fragments/row::text-row(label='Presence status', text=${model.germplasm.presenceStatus})"></div>
+    </div>
+  </div>
 
-  <th:block th:if="${model.collecting}">
+  <div class="f-card" th:if="${model.collecting}">
     <h2>Collector</h2>
-    <th:block th:if="${model.germplasm.collectingSite != null && !#strings.isEmpty(model.germplasm.collectingSite.siteName)}">
-      <div th:replace="fragments/row::row(label='Collecting site', content=~{::#collecting-site})">
-        <a id="collecting-site"
-           th:href="@{/sites/{siteId}(siteId=${#faidare.toSiteParam(model.germplasm.collectingSite.siteId)})}"
-           th:text="${model.germplasm.collectingSite.siteName}"
-        ></a>
-      </div>
-    </th:block>
+    <div class="f-card-body">
+      <th:block th:if="${model.germplasm.collectingSite != null && !#strings.isEmpty(model.germplasm.collectingSite.siteName)}">
+        <div th:replace="fragments/row::row(label='Collecting site', content=~{::#collecting-site})">
+          <a id="collecting-site"
+             th:href="@{/sites/{siteId}(siteId=${#faidare.toSiteParam(model.germplasm.collectingSite.siteId)})}"
+             th:text="${model.germplasm.collectingSite.siteName}"
+          ></a>
+        </div>
+      </th:block>
 
-    <div th:replace="fragments/row::text-row(label='Material type', text=${model.germplasm.collector.materialType})"></div>
-    <div th:replace="fragments/row::text-row(label='Collectors', text=${model.germplasm.collector.collectors})"></div>
+      <div th:replace="fragments/row::text-row(label='Material type', text=${model.germplasm.collector.materialType})"></div>
+      <div th:replace="fragments/row::text-row(label='Collectors', text=${model.germplasm.collector.collectors})"></div>
 
-    <th:block th:if="${!#strings.isEmpty(model.germplasm.acquisitionDate) && model.germplasm.collector.accessionCreationDate == null}">
-      <div th:replace="fragments/row::text-row(label='Acquisition / Creation date', text=${model.germplasm.acquisitionDate})"></div>
-    </th:block>
+      <th:block th:if="${!#strings.isEmpty(model.germplasm.acquisitionDate) && model.germplasm.collector.accessionCreationDate == null}">
+        <div th:replace="fragments/row::text-row(label='Acquisition / Creation date', text=${model.germplasm.acquisitionDate})"></div>
+      </th:block>
 
-    <th:block th:if="${model.germplasm.collector.institute != null && !#strings.isEmpty(model.germplasm.collector.institute.instituteName)}">
-      <template id="collector-institute-popover">
-        <div th:replace="fragments/institute::institute(institute=${model.germplasm.collector.institute})"></div>
-      </template>
-      <div th:replace="fragments/row::row(label='Institution', content=~{::#collecting-institution})">
-        <button id="collecting-institution"
-                data-bs-toggle="popover"
-                th:data-bs-title="${model.germplasm.collector.institute.instituteName}"
-                data-bs-element="#collector-institute-popover"
-                data-bs-container="body"
-                data-bs-trigger="focus"
-                class="btn btn-link p-0"
-                th:text="${model.germplasm.collector.institute.instituteName}"></button>
-      </div>
-    </th:block>
+      <th:block th:if="${model.germplasm.collector.institute != null && !#strings.isEmpty(model.germplasm.collector.institute.instituteName)}">
+        <template id="collector-institute-popover">
+          <div th:replace="fragments/institute::institute(institute=${model.germplasm.collector.institute})"></div>
+        </template>
+        <div th:replace="fragments/row::row(label='Institution', content=~{::#collecting-institution})">
+          <a id="collecting-institution"
+             role="button"
+             tabindex="0"
+             data-bs-toggle="popover"
+             th:data-bs-title="${model.germplasm.collector.institute.instituteName}"
+             data-bs-element="#collector-institute-popover"
+             data-bs-container="body"
+             data-bs-trigger="focus"
+             th:text="${model.germplasm.collector.institute.instituteName}"></a>
+        </div>
+      </th:block>
 
-    <div th:replace="fragments/row::text-row(label='Accession number', text=${model.germplasm.collector.accessionNumber})"></div>
-  </th:block>
+      <div th:replace="fragments/row::text-row(label='Accession number', text=${model.germplasm.collector.accessionNumber})"></div>
+    </div>
+  </div>
 
-  <th:block th:if="${model.breeding}">
+  <div class="f-card" th:if="${model.breeding}">
     <h2>Breeder</h2>
-    <th:block th:if="${model.germplasm.breeder.institute != null && !#strings.isEmpty(model.germplasm.breeder.institute.instituteName)}">
-      <template id="breeder-institute-popover">
-        <div th:replace="fragments/institute::institute(institute=${model.germplasm.breeder.institute})"></div>
-      </template>
-      <div th:replace="fragments/row::row(label='Institute', content=~{::#breeding-institution})">
-        <button id="breeding-institution"
-                data-bs-toggle="popover"
-                th:data-bs-title="${model.germplasm.breeder.institute.instituteName}"
-                data-bs-element="#breeder-institute-popover"
-                data-bs-container="body"
-                data-bs-trigger="focus"
-                class="btn btn-link p-0"
-                th:text="${model.germplasm.breeder.institute.instituteName}"></button>
-      </div>
-    </th:block>
+    <div class="f-card-body">
+      <th:block th:if="${model.germplasm.breeder.institute != null && !#strings.isEmpty(model.germplasm.breeder.institute.instituteName)}">
+        <template id="breeder-institute-popover">
+          <div th:replace="fragments/institute::institute(institute=${model.germplasm.breeder.institute})"></div>
+        </template>
+        <div th:replace="fragments/row::row(label='Institute', content=~{::#breeding-institution})">
+          <a id="breeding-institution"
+             role="button"
+             tabindex="0"
+             data-bs-toggle="popover"
+             th:data-bs-title="${model.germplasm.breeder.institute.instituteName}"
+             data-bs-element="#breeder-institute-popover"
+             data-bs-container="body"
+             data-bs-trigger="focus"
+             th:text="${model.germplasm.breeder.institute.instituteName}"></a>
+        </div>
+      </th:block>
 
-    <div th:replace="fragments/row::text-row(label='Accession creation year', text=${model.germplasm.breeder.accessionCreationDate})"></div>
-    <div th:replace="fragments/row::text-row(label='Accession number', text=${model.germplasm.breeder.accessionNumber})"></div>
-    <div th:replace="fragments/row::text-row(label='Catalog registration year', text=${model.germplasm.breeder.registrationYear})"></div>
-    <div th:replace="fragments/row::text-row(label='Catalog deregistration year', text=${model.germplasm.breeder.deregistrationYear})"></div>
-  </th:block>
+      <div th:replace="fragments/row::text-row(label='Accession creation year', text=${model.germplasm.breeder.accessionCreationDate})"></div>
+      <div th:replace="fragments/row::text-row(label='Accession number', text=${model.germplasm.breeder.accessionNumber})"></div>
+      <div th:replace="fragments/row::text-row(label='Catalog registration year', text=${model.germplasm.breeder.registrationYear})"></div>
+      <div th:replace="fragments/row::text-row(label='Catalog deregistration year', text=${model.germplasm.breeder.deregistrationYear})"></div>
+    </div>
+  </div>
 
-  <th:block th:unless="${#lists.isEmpty(model.germplasm.donors)}">
+  <div class="f-card" th:unless="${#lists.isEmpty(model.germplasm.donors)}">
     <h2>Donors</h2>
-    <div class="table-responsive scroll-table table-card-body">
-      <div class="card">
-        <table class="table table-sm table-striped">
+    <div class="f-card-body">
+      <div class="scroll-table-container">
+        <table class="table table-sm table-striped table-sticky table-responsive-sm">
           <thead>
             <tr>
               <th scope="col">Institute name</th>
@@ -255,13 +270,14 @@
                 <template th:id="${'donor-institute-popover-' + donorIterStat.index}">
                   <div th:replace="fragments/institute::institute(institute=${row.donorInstitute})"></div>
                 </template>
-                <button data-bs-toggle="popover"
-                        th:data-bs-title="${row.donorInstitute.instituteName}"
-                        th:data-bs-element="${'#donor-institute-popover-' + donorIterStat.index}"
-                        data-bs-container="body"
-                        data-bs-trigger="focus"
-                        class="btn btn-link p-0"
-                        th:text="${row.donorInstitute.instituteName}"></button>
+                <a role="button"
+                   tabindex="0"
+                   data-bs-toggle="popover"
+                   th:data-bs-title="${row.donorInstitute.instituteName}"
+                   th:data-bs-element="${'#donor-institute-popover-' + donorIterStat.index}"
+                   data-bs-container="body"
+                   data-bs-trigger="focus"
+                   th:text="${row.donorInstitute.instituteName}"></a>
               </td>
               <td th:text="${row.donorInstituteCode}"></td>
               <td th:text="${row.donationDate}"></td>
@@ -272,13 +288,13 @@
         </table>
       </div>
     </div>
-  </th:block>
+  </div>
 
-  <th:block th:unless="${#lists.isEmpty(model.germplasm.distributors)}">
-    <h2>Donors</h2>
-    <div class="table-responsive scroll-table table-card-body">
-      <div class="card">
-        <table class="table table-sm table-striped">
+  <div class="f-card" th:unless="${#lists.isEmpty(model.germplasm.distributors)}">
+    <h2>Distributors</h2>
+    <div class="f-card-body">
+      <div class="scroll-table-container">
+        <table class="table table-sm table-striped table-sticky table-responsive-sm">
           <thead>
             <tr>
               <th scope="col">Institute</th>
@@ -292,13 +308,13 @@
                 <template th:id="${'distributor-institute-popover-' + distributorIterStat.index}">
                   <div th:replace="fragments/institute::institute(institute=${row.institute})"></div>
                 </template>
-                <button data-bs-toggle="popover"
-                        th:data-bs-title="${row.institute.instituteName}"
-                        th:data-bs-element="${'#distributor-institute-popover-' + distributorIterStat.index}"
-                        data-bs-container="body"
-                        data-bs-trigger="focus"
-                        class="btn btn-link p-0"
-                        th:text="${row.institute.instituteName}"></button>
+                <a role="button"
+                   tabindex="0"
+                   th:data-bs-title="${row.institute.instituteName}"
+                   th:data-bs-element="${'#distributor-institute-popover-' + distributorIterStat.index}"
+                   data-bs-container="body"
+                   data-bs-trigger="focus"
+                   th:text="${row.institute.instituteName}"></a>
               </td>
               <td th:text="${row.accessionNumber}"></td>
               <td th:text="${row.distributionStatus}"></td>
@@ -307,112 +323,120 @@
         </table>
       </div>
     </div>
-  </th:block>
+  </div>
 
-  <th:block th:unless="${#lists.isEmpty(model.attributes)}">
+  <div class="f-card" th:unless="${#lists.isEmpty(model.attributes)}">
     <h2>Evaluation Data</h2>
-    <th:block th:each="descriptor : ${model.attributes}">
-      <div th:replace="fragments/row::text-row(label=${descriptor.attributeName}, text=${descriptor.value})"></div>
-    </th:block>
-  </th:block>
+    <div class="f-card-body">
+      <th:block th:each="descriptor : ${model.attributes}">
+        <div th:replace="fragments/row::text-row(label=${descriptor.attributeName}, text=${descriptor.value})"></div>
+      </th:block>
+    </div>
+  </div>
 
-  <th:block th:if="${model.genealogyPresent}">
+  <div class="f-card" th:if="${model.genealogyPresent}">
     <h2>Genealogy</h2>
+    <div class="f-card-body">
+      <th:block th:if="${model.pedigree != null}">
+        <div th:replace="fragments/row::text-row(label='Crossing plan', text=${model.pedigree.crossingPlan})"></div>
+        <div th:replace="fragments/row::text-row(label='Crossing year', text=${model.pedigree.crossingYear})"></div>
+        <div th:replace="fragments/row::text-row(label='Family code', text=${model.pedigree.familyCode})"></div>
+        <th:block th:unless="${#strings.isEmpty(model.pedigree.parent1Name)}">
+          <div th:replace="fragments/row::row(label='Parent accessions', content=~{::#parent-accessions})">
+            <div id="parent-accessions">
+              <th:block th:if="${model.pedigree.parent1DbId}">
+                <div th:replace="fragments/row::row(label=${model.pedigree.parent1Type}, content=~{::#parent1-link})">
+                  <a id="parent1-link" th:href="@{/germplasms/{germplasmId}(germplasmId=${model.pedigree.parent1DbId})}" th:text="${model.pedigree.parent1Name}"></a>
+                </div>
+              </th:block>
 
-    <th:block th:if="${model.pedigree != null}">
-      <div th:replace="fragments/row::text-row(label='Crossing plan', text=${model.pedigree.crossingPlan})"></div>
-      <div th:replace="fragments/row::text-row(label='Crossing year', text=${model.pedigree.crossingYear})"></div>
-      <div th:replace="fragments/row::text-row(label='Family code', text=${model.pedigree.familyCode})"></div>
-      <th:block th:unless="${#strings.isEmpty(model.pedigree.parent1Name)}">
-        <div th:replace="fragments/row::row(label='Parent accessions', content=~{::#parent-accessions})">
-          <div id="parent-accessions">
-            <th:block th:if="${model.pedigree.parent1DbId}">
-              <div th:replace="fragments/row::row(label=${model.pedigree.parent1Type}, content=~{::#parent1-link})">
-                <a id="parent1-link" th:href="@{/germplasms/{germplasmId}(germplasmId=${model.pedigree.parent1DbId})}" th:text="${model.pedigree.parent1Name}"></a>
-              </div>
-            </th:block>
+              <th:block th:if="${model.pedigree.parent2DbId}">
+                <div th:replace="fragments/row::row(label=${model.pedigree.parent2Type}, content=~{::#parent2-link})">
+                  <a id="parent2-link" th:href="@{/germplasms/{germplasmId}(germplasmId=${model.pedigree.parent2DbId})}" th:text="${model.pedigree.parent2Name}"></a>
+                </div>
+              </th:block>
+            </div>
+          </div>
+        </th:block>
 
-            <th:block th:if="${model.pedigree.parent2DbId}">
-              <div th:replace="fragments/row::row(label=${model.pedigree.parent2Type}, content=~{::#parent2-link})">
-                <a id="parent2-link" th:href="@{/germplasms/{germplasmId}(germplasmId=${model.pedigree.parent2DbId})}" th:text="${model.pedigree.parent2Name}"></a>
-              </div>
-            </th:block>
+        <th:block th:unless="${#lists.isEmpty(model.pedigree.siblings)}">
+          <div th:replace="fragments/row::row(label='Sibling accessions', content=~{::#sibling-accessions})">
+            <div id="sibling-accessions" class="content-overflow">
+              <a th:each="sibling : ${model.pedigree.siblings}"
+                 th:href="@{/germplasms/{germplasmId}(germplasmId=${sibling.germplasmDbId})}"
+                 th:text="${sibling.defaultDisplayName}"></a>
+            </div>
           </div>
-        </div>
+        </th:block>
       </th:block>
 
-      <th:block th:unless="${#lists.isEmpty(model.pedigree.siblings)}">
-        <div th:replace="fragments/row::row(label='Sibling accessions', content=~{::#sibling-accessions})">
-          <div id="sibling-accessions" class="content-overflow">
-            <a th:each="sibling : ${model.pedigree.siblings}"
-               th:href="@{/germplasms/{germplasmId}(germplasmId=${sibling.germplasmDbId})}"
-               th:text="${sibling.defaultDisplayName}"></a>
+      <th:block th:unless="${#lists.isEmpty(model.germplasm.children)}">
+        <div th:replace="fragments/row::row(label='Descendants', content=~{::#descendants})">
+          <div id="descendants" class="content-overflow content-overflow-big">
+            <th:block th:each="child : ${model.germplasm.children}">
+              <div th:replace="fragments/row::row(label=${#strings.isEmpty(child.secondParentName) ? ('children of ' + child.firstParentName) : ('children of ' + child.firstParentName + ' x ' + child.secondParentName) }, content=~{::.descendant-child})">
+                <div class="descendant-child">
+                  <th:block th:each="sibling, siblingIterStat : ${child.sibblings}">
+                    <a th:href="@{/germplasms(pui=${sibling.pui})}"
+                       th:text="${sibling.name}"></a><th:block th:unless="${siblingIterStat.last}">, </th:block>
+                  </th:block>
+                </div>
+              </div>
+            </th:block>
           </div>
         </div>
       </th:block>
-    </th:block>
-
-    <th:block th:unless="${#lists.isEmpty(model.germplasm.children)}">
-      <div th:replace="fragments/row::row(label='Descendants', content=~{::#descendants})">
-        <div id="descendants" class="content-overflow-big">
-          <th:block th:each="child : ${model.germplasm.children}">
-            <div th:replace="fragments/row::row(label=${#strings.isEmpty(child.secondParentName) ? ('children of ' + child.firstParentName) : ('children of ' + child.firstParentName + ' x ' + child.secondParentName) }, content=~{::.descendant-child})">
-              <div class="descendant-child">
-                <th:block th:each="sibling, siblingIterStat : ${child.sibblings}">
-                  <a th:href="@{/germplasms(pui=${sibling.pui})}"
-                     th:text="${sibling.name}"></a><th:block th:unless="${siblingIterStat.last}">, </th:block>
-                </th:block>
+    </div>
+  </div>
+
+  <div class="f-card" th:unless="${#lists.isEmpty(model.germplasm.population)}">
+    <h2>Population</h2>
+    <div class="f-card-body">
+      <th:block th:each="population : ${model.germplasm.population}">
+
+        <th:block th:if="${population.germplasmRef != null}">
+          <th:block th:unless="${#strings.isEmpty(population.germplasmRef.pui)}">
+            <div th:replace="fragments/row::row(label=${#faidare.collPopTitle(population)}, content=~{::.population-1})">
+              <div class="population-1">
+                <a th:if="${population.germplasmRef.pui != model.germplasm.germplasmPUI}"
+                   th:href="@{/germplasms(pui=${population.germplasmRef.pui})}"
+                   th:text="${population.germplasmRef.name}"></a>
+                <span th:if="${population.germplasmRef.pui == model.germplasm.germplasmPUI}"
+                      th:text="${population.germplasmRef.name}"></span>
+                is composed by <span th:text="${population.germplasmCount}"></span> accession(s)
+                <!-- TODO there was a link pointing at a search here -->
               </div>
             </div>
           </th:block>
-        </div>
-      </div>
-    </th:block>
-
-  </th:block>
+        </th:block>
 
-  <th:block th:unless="${#lists.isEmpty(model.germplasm.population)}">
-    <h2>Population</h2>
-    <th:block th:each="population : ${model.germplasm.population}">
-
-      <th:block th:if="${population.germplasmRef != null}">
-        <th:block th:unless="${#strings.isEmpty(population.germplasmRef.pui)}">
-          <div th:replace="fragments/row::row(label=${#faidare.collPopTitle(population)}, content=~{::.population-1})">
-            <div class="population-1">
-              <a th:if="${population.germplasmRef.pui != model.germplasm.germplasmPUI}"
-                 th:href="@{/germplasms(pui=${population.germplasmRef.pui})}"
-                 th:text="${population.germplasmRef.name}"></a>
-              <span th:if="${population.germplasmRef.pui == model.germplasm.germplasmPUI}"
-                    th:text="${population.germplasmRef.name}"></span>
-              is composed by <span th:text="${population.germplasmCount}"></span> accession(s)
-              <!-- TODO there was a link pointing at a search here -->
-            </div>
-          </div>
+        <th:block th:if="${population.germplasmRef == null}">
+          <div th:replace="fragments/row::text-row(label=${#faidare.collPopTitle(population)}, text=${population.germplasmCount + ' accession(s)'})"></div>
+          <!-- TODO there was a link pointing at a search here -->
         </th:block>
       </th:block>
+    </div>
+  </div>
 
-      <th:block th:if="${population.germplasmRef == null}">
-        <div th:replace="fragments/row::text-row(label=${#faidare.collPopTitle(population)}, text=${population.germplasmCount + ' accession(s)'})"></div>
+  <div class="f-card" th:unless="${#lists.isEmpty(model.germplasm.collection)}">
+    <h2>Collection</h2>
+    <div class="f-card-body">
+      <th:block th:each="collection : ${model.germplasm.collection}">
+        <div th:replace="fragments/row::text-row(label=${#faidare.collPopTitle(collection)}, text=${collection.germplasmCount + ' accession(s)'})"></div>
         <!-- TODO there was a link pointing at a search here -->
       </th:block>
-    </th:block>
-  </th:block>
-
-  <th:block th:unless="${#lists.isEmpty(model.germplasm.collection)}">
-    <h2>Collection</h2>
-    <th:block th:each="collection : ${model.germplasm.collection}">
-      <div th:replace="fragments/row::text-row(label=${#faidare.collPopTitle(collection)}, text=${collection.germplasmCount + ' accession(s)'})"></div>
-      <!-- TODO there was a link pointing at a search here -->
-    </th:block>
-  </th:block>
+    </div>
+  </div>
 
-  <th:block th:unless="${#lists.isEmpty(model.germplasm.panel)}">
+  <div class="f-card" th:unless="${#lists.isEmpty(model.germplasm.panel)}">
     <h2>Panel</h2>
-    <th:block th:each="panel : ${model.germplasm.panel}">
-      <div th:replace="fragments/row::text-row(label=${#faidare.collPopTitleWithoutUnderscores(panel)}, text=${panel.germplasmCount + ' accession(s)'})"></div>
-      <!-- TODO there was a link pointing at a search here -->
-    </th:block>
-  </th:block>
+    <div class="f-card-body">
+      <th:block th:each="panel : ${model.germplasm.panel}">
+        <div th:replace="fragments/row::text-row(label=${#faidare.collPopTitleWithoutUnderscores(panel)}, text=${panel.germplasmCount + ' accession(s)'})"></div>
+        <!-- TODO there was a link pointing at a search here -->
+      </th:block>
+    </div>
+  </div>
 
   <div th:replace="fragments/xrefs::xrefs(crossReferences=${model.crossReferences})"></div>
 </main>
diff --git a/backend/src/main/resources/templates/layout/main.html b/backend/src/main/resources/templates/layout/main.html
index 47bfcf0df3d82f2896d30a56c84c428c8d976ce0..22c36a5efb6dfe860a20b41f520ba826d160e96b 100644
--- a/backend/src/main/resources/templates/layout/main.html
+++ b/backend/src/main/resources/templates/layout/main.html
@@ -12,18 +12,17 @@
   </head>
 
   <body>
-    <div class="container">
-      <header>
-        Common header
-      </header>
-
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+      <div class="container">
+        <span class="navbar-brand py-0">
+          <img th:src="@{/assets/images/logo.png}" style="height: 40px"/>
+        </span>
+      </div>
+    </nav>
+    <div class="container mt-3">
       <div th:replace="${content}">
         <p>Layout content</p>
       </div>
-
-      <footer>
-        common footer
-      </footer>
     </div>
     <script type="text/javascript" th:src="@{/assets/script.js}"></script>
     <script type="text/javascript" th:replace="${script}"></script>
diff --git a/backend/src/main/resources/templates/site.html b/backend/src/main/resources/templates/site.html
index d859f4f29e5d6ec3a2f0803235d2922a286ee2bd..c3bd01b26333e960cd766f7ad3418605e2057483 100644
--- a/backend/src/main/resources/templates/site.html
+++ b/backend/src/main/resources/templates/site.html
@@ -15,48 +15,55 @@
 
   <div th:replace="fragments/map::map"></div>
 
-  <th:block th:if="${model.site.uri != null && !model.site.uri.startsWith('urn:')}">
-    <div th:replace="fragments/row::text-row(label='Permanent unique identifier', text=${model.site.uri})"></div>
-  </th:block>
+  <div class="f-card mt-4">
+    <h2>Details</h2>
+    <div class="f-card-body">
+      <th:block th:if="${model.site.uri != null && !model.site.uri.startsWith('urn:')}">
+        <div th:replace="fragments/row::text-row(label='Permanent unique identifier', text=${model.site.uri})"></div>
+      </th:block>
 
-  <div th:replace="fragments/source::source(source=${model.source}, url=${model.site.url}, entityType='site')"></div>
+      <div th:replace="fragments/source::source(source=${model.source}, url=${model.site.url}, entityType='site')"></div>
 
-  <div th:replace="fragments/row::text-row(label='Abbreviation', text=${model.site.abbreviation})"></div>
-  <div th:replace="fragments/row::text-row(label='Type', text=${model.site.locationType})"></div>
-  <div th:replace="fragments/row::text-row(label='Status', text=${model.siteStatus})"></div>
-  <div th:replace="fragments/row::text-row(label='Institution/Landowner', text=${model.site.instituteName})"></div>
-  <div th:replace="fragments/row::text-row(label='Institution address', text=${model.site.instituteAddress})"></div>
-  <div th:replace="fragments/row::text-row(label='Coordinates precision', text=${model.coordinatesPrecision})"></div>
-  <th:block th:if="${model.site.latitude}">
-    <div th:replace="fragments/row::text-row(label='Latitude', text=${#coordinates.formatLatitude(model.site.latitude)})"></div>
-  </th:block>
-  <th:block th:if="${model.site.longitude}">
-    <div th:replace="fragments/row::text-row(label='Longitude', text=${#coordinates.formatLongitude(model.site.longitude)})"></div>
-  </th:block>
-  <div th:replace="fragments/row::text-row(label='Geographical location', text=${model.geographicalLocation})"></div>
-  <th:block th:if="${model.site.countryName != null && model.geographicalLocation == null}">
-    <div th:replace="fragments/row::text-row(label='Country name', text=${model.site.countryName})"></div>
-  </th:block>
+      <div th:replace="fragments/row::text-row(label='Abbreviation', text=${model.site.abbreviation})"></div>
+      <div th:replace="fragments/row::text-row(label='Type', text=${model.site.locationType})"></div>
+      <div th:replace="fragments/row::text-row(label='Status', text=${model.siteStatus})"></div>
+      <div th:replace="fragments/row::text-row(label='Institution/Landowner', text=${model.site.instituteName})"></div>
+      <div th:replace="fragments/row::text-row(label='Institution address', text=${model.site.instituteAddress})"></div>
+      <div th:replace="fragments/row::text-row(label='Coordinates precision', text=${model.coordinatesPrecision})"></div>
+      <th:block th:if="${model.site.latitude}">
+        <div th:replace="fragments/row::text-row(label='Latitude', text=${#coordinates.formatLatitude(model.site.latitude)})"></div>
+      </th:block>
+      <th:block th:if="${model.site.longitude}">
+        <div th:replace="fragments/row::text-row(label='Longitude', text=${#coordinates.formatLongitude(model.site.longitude)})"></div>
+      </th:block>
+      <div th:replace="fragments/row::text-row(label='Geographical location', text=${model.geographicalLocation})"></div>
+      <th:block th:if="${model.site.countryName != null && model.geographicalLocation == null}">
+        <div th:replace="fragments/row::text-row(label='Country name', text=${model.site.countryName})"></div>
+      </th:block>
 
-  <th:block th:if="${model.site.countryCode != null && model.geographicalLocation == null}">
-    <div th:replace="fragments/row::text-row(label='Country code', text=${model.site.countryName})"></div>
-  </th:block>
+      <th:block th:if="${model.site.countryCode != null && model.geographicalLocation == null}">
+        <div th:replace="fragments/row::text-row(label='Country code', text=${model.site.countryName})"></div>
+      </th:block>
 
-  <div th:replace="fragments/row::text-row(label='Altitude', text=${model.site.altitude})"></div>
-  <div th:replace="fragments/row::text-row(label='Slope', text=${model.slope})"></div>
-  <div th:replace="fragments/row::text-row(label='Exposure', text=${model.exposure})"></div>
-  <div th:replace="fragments/row::text-row(label='Topography', text=${model.topography})"></div>
-  <div th:replace="fragments/row::text-row(label='Environment type', text=${model.environmentType})"></div>
-  <div th:replace="fragments/row::text-row(label='Distance to city', text=${model.distanceToCity})"></div>
-  <div th:replace="fragments/row::text-row(label='Direction from city', text=${model.directionFromCity})"></div>
-  <div th:replace="fragments/row::text-row(label='Comment', text=${model.comment})"></div>
+      <div th:replace="fragments/row::text-row(label='Altitude', text=${model.site.altitude})"></div>
+      <div th:replace="fragments/row::text-row(label='Slope', text=${model.slope})"></div>
+      <div th:replace="fragments/row::text-row(label='Exposure', text=${model.exposure})"></div>
+      <div th:replace="fragments/row::text-row(label='Topography', text=${model.topography})"></div>
+      <div th:replace="fragments/row::text-row(label='Environment type', text=${model.environmentType})"></div>
+      <div th:replace="fragments/row::text-row(label='Distance to city', text=${model.distanceToCity})"></div>
+      <div th:replace="fragments/row::text-row(label='Direction from city', text=${model.directionFromCity})"></div>
+      <div th:replace="fragments/row::text-row(label='Comment', text=${model.comment})"></div>
+    </div>
+  </div>
 
-  <th:block th:unless="${#lists.isEmpty(model.additionalInfoProperties)}">
+  <div class="f-card" th:unless="${#lists.isEmpty(model.additionalInfoProperties)}">
     <h2>Additional info</h2>
-    <th:block th:each="prop : ${model.additionalInfoProperties}">
-      <div th:replace="fragments/row::text-row(label=${prop.key}, text=${prop.value})"></div>
-    </th:block>
-  </th:block>
+    <div class="f-card-body">
+      <th:block th:each="prop : ${model.additionalInfoProperties}">
+        <div th:replace="fragments/row::text-row(label=${prop.key}, text=${prop.value})"></div>
+      </th:block>
+    </div>
+  </div>
 
   <div th:replace="fragments/xrefs::xrefs(crossReferences=${model.crossReferences})"></div>
 </main>
diff --git a/backend/src/main/resources/templates/study.html b/backend/src/main/resources/templates/study.html
index c2ee9a3ba0ec73b15de54a5861f15a288b4b174a..225b6cc8a6911b3c934157e91aab55b462e7a756 100644
--- a/backend/src/main/resources/templates/study.html
+++ b/backend/src/main/resources/templates/study.html
@@ -15,51 +15,53 @@
 
   <div th:replace="fragments/map::map"></div>
 
-  <h2>Identification</h2>
-
-  <div th:replace="fragments/row::text-row(label='Name', text=${model.study.studyName})"></div>
-  <div th:replace="fragments/row::text-row(label='Identifier', text=${model.study.studyDbId})"></div>
-
-  <div th:replace="fragments/source::source(source=${model.source}, url=${model.study.url}, entityType='study')"></div>
-
-  <div th:replace="fragments/row::text-row(label='Project name', text=${model.study.programName})"></div>
-  <div th:replace="fragments/row::text-row(label='Description', text=${model.study.studyDescription})"></div>
-  <th:block th:if="${model.study.active != null}">
-    <div th:replace="fragments/row::text-row(label='Active', text=${model.study.active ? 'Yes' : 'No'})"></div>
-  </th:block>
-
-  <th:block th:unless="${#lists.isEmpty(model.study.seasons)}">
-    <div th:replace="fragments/row::text-row(label='Seasons', text=${#strings.listJoin(model.study.seasons, ',')})"></div>
-  </th:block>
-  <th:block th:if="${model.study.startDate != null && model.study.endDate != null}">
-    <div th:replace="fragments/row::text-row(label='Date', text=${'From ' + #dates.format(model.study.startDate, 'yyyy-MM-dd') + ' to ' + #dates.format(model.study.endDate, 'yyyy-MM-dd') })"></div>
-  </th:block>
-  <th:block th:if="${model.study.startDate != null && model.study.endDate == null}">
-    <div th:replace="fragments/row::text-row(label='Date', text=${'Started on ' + #dates.format(model.study.startDate, 'yyyy-MM-dd')})"></div>
-  </th:block>
-
-  <th:block th:if="${model.study.locationDbId}">
-    <div th:replace="fragments/row::row(label='Location name', content=~{::#location})">
-      <a id="location" th:href="@{/sites/{siteId}(siteId=${model.study.locationDbId})}" th:text="${model.study.locationName}"></a>
+  <div class="f-card mt-4">
+    <h2>Identification</h2>
+    <div class="f-card-body">
+      <div th:replace="fragments/row::text-row(label='Name', text=${model.study.studyName})"></div>
+      <div th:replace="fragments/row::text-row(label='Identifier', text=${model.study.studyDbId})"></div>
+
+      <div th:replace="fragments/source::source(source=${model.source}, url=${model.study.url}, entityType='study')"></div>
+
+      <div th:replace="fragments/row::text-row(label='Project name', text=${model.study.programName})"></div>
+      <div th:replace="fragments/row::text-row(label='Description', text=${model.study.studyDescription})"></div>
+      <th:block th:if="${model.study.active != null}">
+        <div th:replace="fragments/row::text-row(label='Active', text=${model.study.active ? 'Yes' : 'No'})"></div>
+      </th:block>
+
+      <th:block th:unless="${#lists.isEmpty(model.study.seasons)}">
+        <div th:replace="fragments/row::text-row(label='Seasons', text=${#strings.listJoin(model.study.seasons, ',')})"></div>
+      </th:block>
+      <th:block th:if="${model.study.startDate != null && model.study.endDate != null}">
+        <div th:replace="fragments/row::text-row(label='Date', text=${'From ' + #dates.format(model.study.startDate, 'yyyy-MM-dd') + ' to ' + #dates.format(model.study.endDate, 'yyyy-MM-dd') })"></div>
+      </th:block>
+      <th:block th:if="${model.study.startDate != null && model.study.endDate == null}">
+        <div th:replace="fragments/row::text-row(label='Date', text=${'Started on ' + #dates.format(model.study.startDate, 'yyyy-MM-dd')})"></div>
+      </th:block>
+
+      <th:block th:if="${model.study.locationDbId}">
+        <div th:replace="fragments/row::row(label='Location name', content=~{::#location})">
+          <a id="location" th:href="@{/sites/{siteId}(siteId=${model.study.locationDbId})}" th:text="${model.study.locationName}"></a>
+        </div>
+      </th:block>
+
+      <th:block th:unless="${#lists.isEmpty(model.study.dataLinks)}">
+        <div th:replace="fragments/row::row(label='Data files', content=~{::#data-files})">
+          <ul id="data-files" class="list-unstyled">
+            <li th:each="dataLink : ${model.study.dataLinks}">
+              <a target="_blank" th:href="${dataLink.url}" th:text="${dataLink.name}"></a>
+            </li>
+          </ul>
+        </div>
+      </th:block>
     </div>
-  </th:block>
-
-  <th:block th:unless="${#lists.isEmpty(model.study.dataLinks)}">
-    <div th:replace="fragments/row::row(label='Data files', content=~{::#data-files})">
-      <ul id="data-files" class="list-unstyled">
-        <li th:each="dataLink : ${model.study.dataLinks}">
-          <a target="_blank" th:href="${dataLink.url}" th:text="${dataLink.name}"></a>
-        </li>
-      </ul>
-    </div>
-  </th:block>
+  </div>
 
-  <th:block th:unles="${#lists.isEmpty(model.germplasms)}">
+  <div class="f-card" th:unles="${#lists.isEmpty(model.germplasms)}">
     <h2>Genotype</h2>
-
-    <div class="table-responsive scroll-table table-card-body">
-      <div class="card">
-        <table class="table table-sm table-striped">
+    <div class="f-card-body">
+      <div class="scroll-table-container scroll-table-container-big">
+        <table class="table table-sm table-striped table-sticky table-responsive-sm">
           <thead>
             <tr>
               <th scope="col">Accession number</th>
@@ -79,13 +81,13 @@
         </table>
       </div>
     </div>
-  </th:block>
+  </div>
 
-  <th:block th:unless="${#lists.isEmpty(model.variables)}">
+  <div class="f-card" th:unless="${#lists.isEmpty(model.variables)}">
     <h2>Variables</h2>
-    <div class="table-responsive scroll-table table-card-body">
-      <div class="card">
-        <table class="table table-sm table-striped">
+    <div class="f-card-body">
+      <div class="scroll-table-container">
+        <table class="table table-sm table-striped table-sticky table-responsive-sm">
           <thead>
             <tr>
               <th scope="col">Variable ID</th>
@@ -110,13 +112,13 @@
         </table>
       </div>
     </div>
-  </th:block>
+  </div>
 
-  <th:block th:unless="${#lists.isEmpty(model.trials)}">
+  <div class="f-card" th:unless="${#lists.isEmpty(model.trials)}">
     <h2>Data Set</h2>
-    <div class="table-responsive scroll-big-table table-card-body">
-      <div class="card">
-        <table class="table table-sm table-striped">
+    <div class="f-card-body">
+      <div class="scroll-table-container scroll-table-container-big">
+        <table class="table table-sm table-striped table-sticky table-responsive-sm">
           <thead>
             <tr>
               <th scope="col">Name</th>
@@ -144,13 +146,13 @@
         </table>
       </div>
     </div>
-  </th:block>
+  </div>
 
-  <th:block th:unless="${#lists.isEmpty(model.study.contacts)}">
+  <div class="f-card" th:unless="${#lists.isEmpty(model.study.contacts)}">
     <h2>Contact</h2>
-    <div class="table-responsive scroll-table table-card-body">
-      <div class="card">
-        <table class="table table-sm table-striped">
+    <div class="f-card-body">
+      <div class="scroll-table-container">
+        <table class="table table-sm table-striped table-sticky table-responsive-sm">
           <thead>
             <tr>
               <th scope="col">Role</th>
@@ -170,23 +172,23 @@
         </table>
       </div>
     </div>
-  </th:block>
+  </div>
 
-  <th:block th:unless="${#lists.isEmpty(model.additionalInfoProperties)}">
+  <div class="f-card" th:unless="${#lists.isEmpty(model.additionalInfoProperties)}">
     <h2>Additional information</h2>
-    <div class="table-responsive scroll-table table-card-body">
-      <div class="card">
-        <table class="table table-sm table-striped">
+    <div class="f-card-body">
+      <div class="scroll-table-container">
+        <table class="table table-sm">
           <tbody>
             <tr th:each="row : ${model.additionalInfoProperties}">
-              <td style="width: 50%;" th:text="${row.key}"></td>
+              <th class="label" style="width: 33.33%" th:text="${row.key}" scope="row"></th>
               <td th:text="${row.value}"></td>
             </tr>
           </tbody>
         </table>
       </div>
     </div>
-  </th:block>
+  </div>
 
   <div th:replace="fragments/xrefs::xrefs(crossReferences=${model.crossReferences})"></div>
 </main>
diff --git a/web/src/style/style.scss b/web/src/style/style.scss
index 4dd56d61bdc40bf1e309350b277e193b1380a115..42aa2bb3a883a5991772d6b9cbe4eddb0eb7d267 100644
--- a/web/src/style/style.scss
+++ b/web/src/style/style.scss
@@ -1,14 +1,53 @@
+$headings-color: #0f6191;
+$border-color: #0f6e9f;
+$link-color: #0f6fa1;
+$link-decoration: none;
+$link-hover-decoration: underline;
+$enable-shadows: true;
+$table-border-color: #dee2e6;
+$table-group-separator-color: $table-border-color;
+
 @import 'custom-bootstrap';
 @import '~leaflet/dist/leaflet.css';
 @import '~leaflet.markercluster/dist/MarkerCluster.css';
 @import '~leaflet.markercluster/dist/MarkerCluster.Default.css';
 
-.label {
-  font-weight: 500;
+a[role=button] {
+  color: $link-color !important;
+}
+
+.f-row {
+  border-top: 1px solid $gray-300;
+  padding: 0.5rem 0;
+  .label {
+    font-weight: 700;
+  }
+}
+
+.f-card {
+  border: 1px solid $border-color;
+  border-radius: 0.25rem;
+  margin: 0.5rem 0;
+  h2 {
+    font-size: $h4-font-size;
+    padding: 0.5rem 1rem;
+    background-image: repeating-linear-gradient(#0f96cd, #0f6191, #0f76a5);
+    color: $white;
+  }
+  .f-card-body {
+    padding: 0.25rem 1rem;
+    .f-row:first-of-type {
+      border-top: 0;
+    }
+  }
 }
 
 .popover {
-  max-width: min(80vw, 600px);
+  max-width: min(80vw, 500px);
+}
+
+.popover-header {
+  font-weight: 700;
 }
 
 #map {
@@ -19,3 +58,34 @@
   height: 1.5rem;
 }
 
+.content-overflow {
+  max-height: 200px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  &.content-overflow-big {
+    max-height: 275px;
+  }
+}
+
+.scroll-table-container {
+  max-height: 200px;
+  overflow-y: auto;
+  padding-top: 0;
+  &.scroll-table-container-big {
+    max-height: 500px;
+  }
+}
+
+.table-sticky {
+  width: 100%;
+  thead th {
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    background-color: white;
+    border-top-width: 0;
+    th {
+      padding-top: 0;
+    }
+  }
+}