diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index bcb3bf199445c1977b0fed1ddf5d1b8695183638..a1915f29f4babb35d9f4bdbfd6781ae21c087ccc 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -27,6 +27,7 @@ window.$ = $
 window.bootstrap = bootstrap
 window.Panzoom = require('@panzoom/panzoom')
 import "./application.scss"
+import "./stylesheets/catalog.scss";
 const images = require.context('../images', true)
 import Chart from 'chart.js/auto'
 
diff --git a/app/javascript/packs/application.scss b/app/javascript/packs/application.scss
index 9a4a0e936edbfceb45e5e432c04a7eb0596f8ce2..dc64c74d6656d40118629a765d1049d1a5598300 100644
--- a/app/javascript/packs/application.scss
+++ b/app/javascript/packs/application.scss
@@ -1,3 +1,19 @@
+$labs-green: hsl(180, 15%, 30%);
+$dark-labs-green: hsl(180, 5%, 35%);
+$theme-colors: ( // Overwrite bootstrap colors
+  'primary': $labs-green,
+  'secondary': #747474,
+  'success': $dark-labs-green,
+  'danger': lighten($labs-green, 20%),
+  'warning': lighten($labs-green, 25%),
+  'info': lighten($labs-green, 30%),
+  'light': white,
+  'dark': #525e69);
+$link-color: $labs-green;
+$link-hover-color: darken($labs-green, 10%) !default;
+$component-active-bg: $labs-green;
+$card-color: black;
+
 $fa-font-path: '../../../node_modules/@fortawesome/fontawesome-free/webfonts';
 
 @import '~@fortawesome/fontawesome-free/scss/fontawesome';
@@ -9,5 +25,3 @@ $fa-font-path: '../../../node_modules/@fortawesome/fontawesome-free/webfonts';
 @import '~bootstrap/scss/bootstrap';
 
 @import "~treeflex/dist/css/treeflex";
-
-@import "./stylesheets/catalog.scss";
\ No newline at end of file
diff --git a/app/javascript/packs/stylesheets/catalog.scss b/app/javascript/packs/stylesheets/catalog.scss
index 8a0f9ef1af3518390a1396ba037b5f645b0eb62c..3097b0217cac8107c3664c04ad2b7375dc98d182 100644
--- a/app/javascript/packs/stylesheets/catalog.scss
+++ b/app/javascript/packs/stylesheets/catalog.scss
@@ -1,16 +1,16 @@
 ////////////////// General //////////////////
-html, body {
-  height: 100%;
-}
-body .container-fluid {
-  height:100%;
-}
-#navigation {
-  height: 8%;
-}
-#main-content {
-  height: 92%;
-}
+// html, body {
+//   height: 100%;
+// }
+// body .container-fluid {
+//   height:100%;
+// }
+// #navigation {
+//   height: 8%;
+// }
+// #main-content {
+//   height: 92%;
+// }
 /////////////////////////////////////////////
 
 ////////////////// Catalog index //////////////////
@@ -21,7 +21,7 @@ body .container-fluid {
   background-color: #EEE;
 }
 .search_result.selected {
-  border: 2px solid #32a1ce;
+  border: 2px solid darken(hsl(180, 15%, 30%), 10%);
   padding: calc(0.5em - 2px);
 }
 #canvas_wide_dates_histogram {
@@ -31,11 +31,15 @@ body .container-fluid {
 
 ////////////////// Facets //////////////////
 #facets .constrained {
-  background: lightgreen;
+  background: lighten(hsl(180, 15%, 30%), 45%);
+}
+
+.accordion-button:not(.collapsed) {
+  color: hsl(180, 15%, 30%);
 }
 
 li.selected_constraint {
-  color: green;
+  color: darken(hsl(180, 15%, 30%), 10%);
 }
 ////////////////////////////////////////////
 
@@ -43,8 +47,10 @@ li.selected_constraint {
 #openseadragon_view {
   width: auto;
   height: 85vh;
+  border-color: hsl(180, 15%, 30%);
   border-style: solid;
-  border-width: 2px;
+  border-width: 1px;
+  border-radius: 6px;
   background-color: #b3c3c7;
 }
 #viewer_container {
@@ -57,11 +63,11 @@ li.selected_constraint {
 
 #page_counter {
   position: absolute;
-  background-color: #8AF;
+  background-color: #7397a0;
   border-color: #000;
   border-style: solid;
-  font-weight: bold;
-  border-width: 2px;
+  border-width: 1px;
+  border-radius: 6px;
   top: 1vh;
   right: 3.5vh;
   padding: 0px 2px;
@@ -109,71 +115,71 @@ li.selected_constraint {
 ///////////////////////////////////////////////
 
 ////////////////// Show Experiment /////////////////////
-.tool:hover {
-  cursor: grab;
-}
-.tf-nc.tool-slot {
-  border-style: dashed;
-  width:8vw;
-  height:10vh;
-  padding: 0;
-}
-.tf-nc.possible-tool-slot {
-  border-color: cornflowerblue;
-  border-width: 3px;
-}
-.tf-nc.tool-slot-hover {
-  border: 1em solid blue !important;
-}
+// .tool:hover {
+//   cursor: grab;
+// }
+// .tf-nc.tool-slot {
+//   border-style: dashed;
+//   width:8vw;
+//   height:10vh;
+//   padding: 0;
+// }
+// .tf-nc.possible-tool-slot {
+//   border-color: cornflowerblue;
+//   border-width: 3px;
+// }
+// .tf-nc.tool-slot-hover {
+//   border: 1em solid blue !important;
+// }
 
-.tool-status {
-  height: 1em;
-  width: 1em;
-  border-radius: 50%;
-  border-color: black;
-  border-width: 1px;
-  border-style: solid;
-  display: inline-block;
-}
-.tool-status-created {
-  background-color: gray;
-}
-.tool-status-configured {
-  background-color: white;
-}
-.tool-status-error {
-  background-color: red;
-}
-.tool-status-running {
-  background-color: gold;
-}
-.tool-status-finished {
-  background-color: green;
-}
+// .tool-status {
+//   height: 1em;
+//   width: 1em;
+//   border-radius: 50%;
+//   border-color: black;
+//   border-width: 1px;
+//   border-style: solid;
+//   display: inline-block;
+// }
+// .tool-status-created {
+//   background-color: gray;
+// }
+// .tool-status-configured {
+//   background-color: white;
+// }
+// .tool-status-error {
+//   background-color: red;
+// }
+// .tool-status-running {
+//   background-color: gold;
+// }
+// .tool-status-finished {
+//   background-color: green;
+// }
 
-.tool-slot-occupied {
-  width:15vw;
-  height:15vh;
-  padding: 0;
-}
-#experiment_area {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-#experiment_canvas {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-  overflow: visible;
-}
+// .tool-slot-occupied {
+//   width:15vw;
+//   height:15vh;
+//   padding: 0;
+// }
+// #experiment_area {
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+// }
+// #experiment_canvas {
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   height: 100%;
+//   width: 100%;
+//   overflow: visible;
+// }
 ////////////////////////////////////////////////////////
 
 ////////////////////// Index Datasets ////////////////////
 .dataset-item:hover {
-  background-color: #EEE;
+  background-color: #dfdfdf;
 }
 ////////////////////////////////////////////////////////
 
@@ -182,10 +188,10 @@ li.selected_constraint {
   padding: 0.5em;
 }
 .dataset_document:hover {
-  background-color: #FBFBFB;
+  background-color: #dfdfdf;
 }
 .dataset_document.selected {
-  border: 2px solid #32a1ce;
+  border: 2px solid darken(hsl(180, 15%, 30%), 10%);
   padding: calc(0.5em - 2px);
 }
 ////////////////////////////////////////////////////////
\ No newline at end of file
diff --git a/app/views/catalog/_facet_entry.html.erb b/app/views/catalog/_facet_entry.html.erb
index 011c16670908047502c4637de65561d922a46089..20a12c23a78f5bb4b27d77ed95fbfd3f8195a822 100644
--- a/app/views/catalog/_facet_entry.html.erb
+++ b/app/views/catalog/_facet_entry.html.erb
@@ -51,5 +51,5 @@
     <% else %>
         <%= facet['val'] %>
     <% end %>
-    <span class="badge rounded-pill bg-primary float-end"><%= facet['count'] %></span>
+    <span class="badge rounded-pill bg-info float-end"><%= facet['count'] %></span>
 </li>
\ No newline at end of file
diff --git a/app/views/catalog/_manage_datasets_content.html.erb b/app/views/catalog/_manage_datasets_content.html.erb
index a075178b62d4ca45bf3c3eb602beaf79329d26e6..bc073afad8db3ebcf198ac7ca04a66db1a271eec 100644
--- a/app/views/catalog/_manage_datasets_content.html.erb
+++ b/app/views/catalog/_manage_datasets_content.html.erb
@@ -11,10 +11,10 @@
                     <%= options_for_select(current_user.datasets.map{ |d| ["#{d.title} (#{d.documents.size} docs)", d.id]}, session[:working_dataset]) %>
                 </select>
             </div>
-            <button class="btn btn-sm btn-secondary" data-action="click->search-results#addSelectedDocumentsToWorkingDataset">
+            <button class="btn btn-sm btn-info" data-action="click->search-results#addSelectedDocumentsToWorkingDataset">
                 Add selected documents
             </button>
-            <button class="btn btn-sm btn-secondary"
+            <button class="btn btn-sm btn-info"
                     data-search-params="<%= @solr_params.to_json %>"
                     data-action="click->search-results#addAllDocumentsToWorkingDataset">
                 Add all documents
diff --git a/app/views/catalog/_result.html.erb b/app/views/catalog/_result.html.erb
index 1638db848b24ce10c2d711d3baae4f4f931bd81d..07aad3bc375c36e958b55ce7203ba8d8c1ee512c 100644
--- a/app/views/catalog/_result.html.erb
+++ b/app/views/catalog/_result.html.erb
@@ -27,7 +27,7 @@
             <% end %>
         </div>
         <div class="col-4">
-            <a href="<%= url %>"><img class="h-auto w-100" src="<%= result.get_thumbnail %>"/></a>
+            <a href="<%= url %>"><img class="h-auto w-auto" src="<%= result.get_thumbnail %>"/></a>
         </div>
     </div>
     <div class="in_datasets">
diff --git a/app/views/catalog/_result_datasets.html.erb b/app/views/catalog/_result_datasets.html.erb
index c192c0b550496f9d75cefe2fa41deb2b0c9448bf..7520ee404801bbb6f2c169074943a98dd49acd90 100644
--- a/app/views/catalog/_result_datasets.html.erb
+++ b/app/views/catalog/_result_datasets.html.erb
@@ -4,7 +4,7 @@
         Currently belongs to:
         <% in_datasets.each do |dataset_id, dataset_title| %>
             <%= link_to "/dataset/#{dataset_id}" do %>
-                <span class="dataset-<%= dataset_id %> badge rounded-pill bg-primary"><%= dataset_title %></span>
+                <span class="dataset-<%= dataset_id %> badge rounded-pill bg-info"><%= dataset_title %></span>
             <% end %>
         <% end %>
     </p>
diff --git a/app/views/catalog/_search_form.html.erb b/app/views/catalog/_search_form.html.erb
index 61e5b7a18d36791c7a9d8596209500fb1398abfc..c8f0311760a09e5111d4c86e7d6bbbafcca2125e 100644
--- a/app/views/catalog/_search_form.html.erb
+++ b/app/views/catalog/_search_form.html.erb
@@ -1,16 +1,16 @@
 <div id="search_forms">
     <div id="search_form" class="mb-2">
         <form action="./search" method="get" class="row">
-            <div class="col-3 btn-group" role="group">
+            <div class="col-3 btn-group h-50" role="group">
                 <input type="radio" class="btn-check" name="search_type" value="exact" id="exact_search" autocomplete="off" <%= "checked" if @search_type.nil? || @search_type == "exact" %>>
                 <label class="btn btn-outline-primary" for="exact_search">Exact search</label>
                 <input type="radio" class="btn-check" name="search_type" value="stemmed" id="stemmed_search" autocomplete="off" <%= "checked" if @search_type == "stemmed" %>>
                 <label class="btn btn-outline-primary" for="stemmed_search">Stemmed search</label>
             </div>
-            <div class="col-9 w-50 input-group flex-nowrap">
-                <span class="input-group-text" id="addon-wrapping">Search for:</span>
-                <input name="q" type="text" class="form-control" value="<%= @solr_params[:q] if @solr_params and @solr_params[:q] %>">
-                <input class="btn btn-outline-secondary" type="submit" value="Go"></input>
+            <div class="col w-50 input-group mb-3 flex-nowrap">
+                <span class="input-group-text mb-3" id="addon-wrapping">Search for:</span>
+                <input name="q" type="text" class="form-control mb-3" value="<%= @solr_params[:q] if @solr_params and @solr_params[:q] %>">
+                <input class="btn btn-outline-secondary mb-3" type="submit" value="Go">
             </div>
         </form>
     </div>
diff --git a/app/views/dataset/_datasets_list.html.erb b/app/views/dataset/_datasets_list.html.erb
index af1b6824e45afd63fc385191966fa6eca18ce5d7..885e6da3978e4884855264b6b38ab53f5e857483 100644
--- a/app/views/dataset/_datasets_list.html.erb
+++ b/app/views/dataset/_datasets_list.html.erb
@@ -10,9 +10,9 @@
                         <a href="/dataset/<%= dataset.id %>"><%= dataset.title %></a>
                     </div>
                     <div class="d-flex align-items-center justify-content-center">
-                            <span class="badge bg-primary rounded-pill"><%= dataset.nb_issues %> issues</span>
-                        <span class="badge bg-primary rounded-pill"><%= dataset.nb_articles %> articles</span>
-                        <span class="badge bg-primary rounded-pill"><%= dataset.nb_compound_articles %> compound articles</span>
+                            <span class="badge bg-info rounded-pill"><%= dataset.nb_issues %> issues</span>
+                        <span class="badge bg-info rounded-pill"><%= dataset.nb_articles %> articles</span>
+                        <span class="badge bg-info rounded-pill"><%= dataset.nb_compound_articles %> compound articles</span>
                     </div>
                     <div class="d-inline-flex">
                         <button type="button"
diff --git a/app/views/dataset/_document.html.erb b/app/views/dataset/_document.html.erb
index a16319a08dc79bb9ae469b52885ca5f5bf8c3169..d8a067a0b6b0403784e1b00e0c425be2009261c9 100644
--- a/app/views/dataset/_document.html.erb
+++ b/app/views/dataset/_document.html.erb
@@ -34,7 +34,7 @@
             <% end %>
         </div>
         <div class="col-4">
-            <a href="<%= url %>"><img src="<%= doc.thumbnail_url %>"/></a>
+            <a href="<%= url %>"><img class="h-auto w-auto" src="<%= doc.thumbnail_url %>"/></a>
         </div>
     </div>
 </div>
\ No newline at end of file