diff --git a/app/assets/javascripts/global_activities/side_pane.js b/app/assets/javascripts/global_activities/side_pane.js
index cb66afe17..897060c4b 100644
--- a/app/assets/javascripts/global_activities/side_pane.js
+++ b/app/assets/javascripts/global_activities/side_pane.js
@@ -228,18 +228,18 @@ var globalActivities = (function() {
               ${dateContainer[0].dataset.periodLabel}
               ${$('.ga-side .date-selector.filter-block')[0].dataset.periodSelect}
             </div>
-            <i class="sn-icon sn-icon-close"></i>
+            <i class="sn-icon sn-icon-close-small"></i>
           </div>`).appendTo('.ga-top .ga-tags')
-          .find('.fa-times').click(() => {
+          .find('.sn-icon-close-small').click(() => {
             $('.date-selector .date.clear').click();
           });
       }
       $.each($('.ga-side .ds-tags'), function(index, tag) {
         var newTag = $(tag.outerHTML).appendTo('.ga-top .ga-tags');
-        newTag.find('.fa-times')
+        newTag.find('.sn-icon-close-small')
           .click(function() {
             newTag.addClass('closing');
-            $(tag).find('.fa-times').click();
+            $(tag).find('.sn-icon-close-small').click();
           });
       });
     }
diff --git a/app/assets/javascripts/reports/reports_datatable.js b/app/assets/javascripts/reports/reports_datatable.js
index 1ef922ab8..c98743937 100644
--- a/app/assets/javascripts/reports/reports_datatable.js
+++ b/app/assets/javascripts/reports/reports_datatable.js
@@ -25,7 +25,7 @@
     if (data.error) {
       let oldLink = '';
       if (data.preview_url) {
-        oldLink = `<a href="#" class="file-preview-link flex items-center gap-1 docx" data-preview-url="${data.preview_url}">
+        oldLink = `<a href="#" class="file-preview-link flex items-center gap-1 docx hover:no-underline" data-preview-url="${data.preview_url}">
                   (<i class="fas fa-file-docx"></i>
                   ${I18n.t('projects.reports.index.previous_docx')})
                 </a>`;
@@ -43,7 +43,7 @@
     }
 
     if (data.preview_url) {
-      return `<a href="#" class="file-preview-link flex items-center gap-1 docx" data-preview-url="${data.preview_url}">
+      return `<a href="#" class="file-preview-link flex items-center gap-1 docx hover:no-underline" data-preview-url="${data.preview_url}">
                 <i class="sn-icon sn-icon-file-word"></i>
                 ${I18n.t('projects.reports.index.docx')}
               </a>`;
@@ -55,7 +55,7 @@
     if (data.error) {
       let oldLink = '';
       if (data.preview_url) {
-        oldLink = `<a href="#" class="file-preview-link flex items-center gap-1 pdf" data-preview-url="${data.preview_url}">
+        oldLink = `<a href="#" class="file-preview-link flex items-center gap-1 pdf hover:no-underline" data-preview-url="${data.preview_url}">
                   (<i class="fas fa-file-pdf"></i>
                   ${I18n.t('projects.reports.index.previous_pdf')})
                 </a>`;
@@ -73,7 +73,7 @@
     }
 
     if (data.preview_url) {
-      return `<a href="#" class="file-preview-link flex items-center gap-1 pdf" data-preview-url="${data.preview_url}">
+      return `<a href="#" class="file-preview-link flex items-center gap-1 pdf hover:no-underline" data-preview-url="${data.preview_url}">
                 <i class="fas fa-file-pdf"></i>
                 ${I18n.t('projects.reports.index.pdf')}
               </a>`;
diff --git a/app/assets/javascripts/sitewide/dropdown_selector.js b/app/assets/javascripts/sitewide/dropdown_selector.js
index ba32eebf4..e4dda3948 100644
--- a/app/assets/javascripts/sitewide/dropdown_selector.js
+++ b/app/assets/javascripts/sitewide/dropdown_selector.js
@@ -286,7 +286,7 @@ var dropdownSelector = (function() {
           selectedOption.removeClass('highlight').next().next().addClass('highlight');
         }
       } else if (pressedKey === 8 && e.target.value === '') { // backspace
-        deleteTag(selector, container, container.find('.ds-tags .sn-icon-close').last());
+        deleteTag(selector, container, container.find('.ds-tags .sn-icon-close-small').last());
       }
     });
   }
@@ -743,7 +743,7 @@ var dropdownSelector = (function() {
       var tag = $(`<div class="${tagAppearance} ${customClass}" style="${customStyle ? customStyle(data) : ''}" >
                   <div class="tag-label">
                   </div>
-                  <i class="sn-icon sn-icon-close ${selector.data('config').singleSelect ? 'hidden' : ''}"></i>
+                  <i class="sn-icon sn-icon-close-small ${selector.data('config').singleSelect ? 'hidden' : ''}"></i>
                 </div>`).insertBefore(container.find('.input-field .search-field'));
 
 
@@ -758,7 +758,7 @@ var dropdownSelector = (function() {
       }
 
       // Now we need add delete action to tag
-      tag.find('.sn-icon-close').click(function(e) {
+      tag.find('.sn-icon-close-small').click(function(e) {
         e.stopPropagation();
         deleteTag(selector, container, $(this));
       });
diff --git a/app/assets/stylesheets/access_permissions/access_modal.scss b/app/assets/stylesheets/access_permissions/access_modal.scss
index 714a71471..36e62cc72 100644
--- a/app/assets/stylesheets/access_permissions/access_modal.scss
+++ b/app/assets/stylesheets/access_permissions/access_modal.scss
@@ -3,11 +3,6 @@
 #user_assignments_modal {
 
   .btn-role-select {
-    padding: 0 0 0 16px;
-
-    &:hover {
-      background-color: $color-concrete;
-    }
 
     &:focus {
       box-shadow: none;
diff --git a/app/assets/stylesheets/experiment/canvas.scss b/app/assets/stylesheets/experiment/canvas.scss
index 4f305a2ca..7514a926e 100644
--- a/app/assets/stylesheets/experiment/canvas.scss
+++ b/app/assets/stylesheets/experiment/canvas.scss
@@ -40,7 +40,7 @@
 
   .panel-footer {
     .nav > li > a {
-      padding: 6px 15px;
+      padding: 1px 15px;
     }
 
     .btn {
diff --git a/app/assets/stylesheets/global_activities.scss b/app/assets/stylesheets/global_activities.scss
index 43757bf69..b7e645282 100644
--- a/app/assets/stylesheets/global_activities.scss
+++ b/app/assets/stylesheets/global_activities.scss
@@ -192,14 +192,13 @@
         text-decoration: none;
       }
 
-      .fas {
+      .sn-icon {
         display: inline-block;
         margin-right: 3px;
         text-align: center;
-        width: 10px;
       }
 
-      &:not(.collapsed) .fas {
+      &:not(.collapsed) .sn-icon {
         @include rotate(90deg);
       }
     }
@@ -237,7 +236,6 @@
             margin-left: -35px;
 
             .global-avatar-container {
-              margin: 0 5px 0 0;
               position: relative;
               top: 10px;
             }
@@ -363,14 +361,13 @@
         border: 0;
         cursor: pointer;
         float: left;
+        justify-content: start;
         margin: 0;
-        opacity: .7;
         text-align: left;
         width: calc(50% - 25px);
 
         &.selected {
-          background: $color-alto;
-          opacity: 1;
+          background: var(--sn-super-light-grey);
         }
 
         &:nth-child(even) {
diff --git a/app/assets/stylesheets/my_modules/status_flow.scss b/app/assets/stylesheets/my_modules/status_flow.scss
index 6c008de8d..9c64ad70c 100644
--- a/app/assets/stylesheets/my_modules/status_flow.scss
+++ b/app/assets/stylesheets/my_modules/status_flow.scss
@@ -49,7 +49,8 @@
 
       .fa-long-arrow-alt-right {
         color: $color-silver-chalice;
-        padding: .5em 0;
+        padding: 1.5em 0;
+        z-index: 1;
       }
 
       .status-container {
diff --git a/app/assets/stylesheets/navigation/left_menu.scss b/app/assets/stylesheets/navigation/left_menu.scss
index 873dc28c5..4bff1e6fa 100644
--- a/app/assets/stylesheets/navigation/left_menu.scss
+++ b/app/assets/stylesheets/navigation/left_menu.scss
@@ -24,8 +24,16 @@
     text-decoration: none;
     width: 100%;
 
+    .sn-icon-dot-small {
+      color: var(--sn-grey);
+    }
+
     &:not([data-active='true']):hover {
       background-color: var(--sn-super-light-grey);
+
+      .sn-icon-dot-small {
+        color: var(--sn-black);
+      }
     }
 
     .show-submenu {
diff --git a/app/assets/stylesheets/protocols/index.scss b/app/assets/stylesheets/protocols/index.scss
index c0903fd06..fd0f03ffa 100644
--- a/app/assets/stylesheets/protocols/index.scss
+++ b/app/assets/stylesheets/protocols/index.scss
@@ -103,7 +103,7 @@
     .users-access-cell {
       .protocol-users-link {
         align-items: center;
-        color: $color-silver-chalice;
+        color: var(--sn-black);
         display: flex;
 
         &:hover {
@@ -115,11 +115,11 @@
         align-items: center;
         border: 2px solid $color-white;
         display: flex;
-        height: 32px;
+        height: 28px;
         justify-content: center;
         line-height: 28px;
         margin-right: -.5em;
-        width: 32px;
+        width: 28px;
       }
 
       .more-users {
diff --git a/app/assets/stylesheets/protocols/preview_modal.scss b/app/assets/stylesheets/protocols/preview_modal.scss
index 6fa343e03..10ee64e99 100644
--- a/app/assets/stylesheets/protocols/preview_modal.scss
+++ b/app/assets/stylesheets/protocols/preview_modal.scss
@@ -34,6 +34,7 @@
       justify-content: space-between;
 
       .left-section {
+        align-items: center;
         column-gap: 32px;
         display: flex;
         justify-content: space-between;
diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss
index 62fd5fc68..fb32dfef1 100644
--- a/app/assets/stylesheets/repositories.scss
+++ b/app/assets/stylesheets/repositories.scss
@@ -143,7 +143,7 @@
 
       .dataTables_length {
         margin-right: 24px;
-        width: 170px;
+        width: 180px;
 
         .dropdown-selector-container {
           width: inherit;
@@ -350,7 +350,7 @@
   }
 
   .share-repo-container {
-    padding: 15px 30px;
+    padding: 15px 0 0;
 
     // Main structure css
     .header,
@@ -366,6 +366,7 @@
     .all-teams,
     .teams-list {
       display: flex;
+      padding: 0 30px;
       width: 100%;
     }
 
@@ -408,14 +409,14 @@
       align-items: center;
       font-size: 14px;
       font-weight: bold;
-      padding: 5px 0 0;
+      padding: 5px 30px 0;
     }
 
     .all-teams {
       align-items: center;
       border-bottom: 1px solid $color-gainsboro;
       margin-left: -10px;
-      padding: 5px 10px;
+      padding: 5px 40px;
       user-select: none;
       width: calc(100% + 20px);
     }
diff --git a/app/assets/stylesheets/repository/repository_toolbar.scss b/app/assets/stylesheets/repository/repository_toolbar.scss
index 48e6fa238..cc3b500fa 100644
--- a/app/assets/stylesheets/repository/repository_toolbar.scss
+++ b/app/assets/stylesheets/repository/repository_toolbar.scss
@@ -85,7 +85,9 @@
     }
 
     .toolbar-left-block {
+      align-items: center;
       display: flex;
+      gap: .25rem;
 
       >* {
         margin-left: .25em;
diff --git a/app/assets/stylesheets/shared/datatable.scss b/app/assets/stylesheets/shared/datatable.scss
index d00e739a1..e82a1df02 100644
--- a/app/assets/stylesheets/shared/datatable.scss
+++ b/app/assets/stylesheets/shared/datatable.scss
@@ -13,6 +13,7 @@
       align-items: center;
       display: flex;
       flex-grow: 1;
+      gap: .25rem;
     }
   }
 
@@ -113,7 +114,7 @@
       .dataTables_length {
         height: 2.25rem;
         margin-right: 24px;
-        width: 170px;
+        width: 180px;
 
         .dropdown-selector-container {
           width: inherit;
@@ -184,3 +185,8 @@
     }
   }
 }
+
+div.dataTables_wrapper div.dataTables_paginate ul.pagination {
+  align-items: center;
+  display: flex;
+}
diff --git a/app/assets/stylesheets/shared/dropdown_selector.scss b/app/assets/stylesheets/shared/dropdown_selector.scss
index 9615bc281..b951e0073 100644
--- a/app/assets/stylesheets/shared/dropdown_selector.scss
+++ b/app/assets/stylesheets/shared/dropdown_selector.scss
@@ -41,7 +41,7 @@
       position: absolute;
       right: 4px;
       text-align: center;
-      top: 4px;
+      top: -1px;
 
       &.sn-icon-search.simple-dropdown {
         color: $brand-focus;
@@ -327,7 +327,7 @@
           }
         }
 
-        .sn-icon-close {
+        .sn-icon-close-small {
           display: none;
         }
       }
@@ -421,7 +421,7 @@
     .input-field {
       background: $color-white;
 
-      .ds-tags .sn-icon-close {
+      .ds-tags .sn-icon-close-small {
         display: none;
       }
     }
diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss
index 61220b967..08c85477d 100644
--- a/app/assets/stylesheets/steps.scss
+++ b/app/assets/stylesheets/steps.scss
@@ -37,8 +37,9 @@
   .step-panel-collapse-link {
     padding-left: 5px;
 
-    &:not(.collapsed) .fas {
+    &:not(.collapsed) .sn-icon {
       @include rotate(90deg);
+      display: inline-block;
     }
   }
 
diff --git a/app/assets/stylesheets/tailwind/buttons.css b/app/assets/stylesheets/tailwind/buttons.css
index fa4dc716f..0f8f2e857 100644
--- a/app/assets/stylesheets/tailwind/buttons.css
+++ b/app/assets/stylesheets/tailwind/buttons.css
@@ -4,7 +4,7 @@
   }
 
   .btn {
-    @apply relative inline-flex items-center shrink-0 gap-2 justify-center leading-5 py-2 px-4 rounded border-0 appearance-none whitespace-nowrap cursor-pointer;
+    @apply relative inline-flex items-center text-sm shrink-0 gap-2 justify-center leading-5 py-2 px-4 rounded border-0 appearance-none whitespace-nowrap cursor-pointer;
   }
 
   .btn.icon-btn {
@@ -54,18 +54,22 @@
     @apply cursor-not-allowed pointer-events-none;
   }
 
-  .btn.btn-primary {
+  .btn.btn-primary,
+  .btn.btn-success {
     background-color: var(--sn-blue);
     color: var(--sn-white);
   }
 
-  .btn.btn-primary:hover {
+  .btn.btn-primary:hover,
+  .btn.btn-success:hover{
     background-color: var(--sn-blue-hover);
     color: var(--sn-white);
   }
 
   .btn.btn-primary:disabled,
-  .btn.btn-primary.disabled {
+  .btn.btn-primary.disabled,
+  .btn.btn-success:disabled,
+  .btn.btn-success.disabled {
     background-color: var(--sn-light-grey);
     border: 1px solid var(--sn-light-grey);
     color: var(--sn-sleepy-grey);
@@ -97,11 +101,11 @@
   }
 
   .btn.btn-light.btn-black {
-    color: var(--sb-black);
+    color: var(--sn-black);
   }
 
   .btn.btn-light.btn-white {
-    color: var(--sb-white);
+    color: var(--sn-white);
   }
 
   .btn.btn-light.btn-white:hover {
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 37e591073..3dc38b9d6 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -568,6 +568,8 @@ mark,.mark {
     float: right;
 
     .pagination {
+      align-items: center;
+      display: flex;
       margin: 0;
     }
   }
diff --git a/app/javascript/vue/repository_search/container.vue b/app/javascript/vue/repository_search/container.vue
index 443af8190..091d1d291 100644
--- a/app/javascript/vue/repository_search/container.vue
+++ b/app/javascript/vue/repository_search/container.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center mr-3 flex-nowrap">
-    <button v-if="!searchOpened" class="btn btn-light btn-black icon-btn" :title="i18n.t('repositories.show.search_button_tooltip')" @click="openSearch">
+    <button v-if="!searchOpened" class="btn btn-light  icon-btn" :title="i18n.t('repositories.show.search_button_tooltip')" @click="openSearch">
       <i class="sn-icon sn-icon-search"></i>
     </button>
     <div v-if="searchOpened || barcodeSearchOpened" class="w-52 flex">
@@ -27,7 +27,7 @@
         <i class='sn-icon sn-icon-barcode barcode-scanner'></i>
       </div>
     </div>
-    <button v-if="!barcodeSearchOpened" class="btn btn-light btn-black icon-btn ml-2" :title="i18n.t('repositories.show.ean_search_button_tooltip')" @click="openBarcodeSearch">
+    <button v-if="!barcodeSearchOpened" class="btn btn-light icon-btn ml-2" :title="i18n.t('repositories.show.ean_search_button_tooltip')" @click="openBarcodeSearch">
       <i class='sn-icon sn-icon-barcode barcode-scanner'></i>
     </button>
   </div>
diff --git a/app/views/global_activities/_top_pane.html.erb b/app/views/global_activities/_top_pane.html.erb
index 228f5b35a..8a791f275 100644
--- a/app/views/global_activities/_top_pane.html.erb
+++ b/app/views/global_activities/_top_pane.html.erb
@@ -7,7 +7,7 @@
       <i class="sn-icon sn-icon-down"></i><%= t('activities.index.expand_all') %>
     </a>
     <a id="global-activities-colapse-all" class="hide-actions btn btn-light" href="#" data-turbolinks="false">
-      <i class="sn-icon sn-icon-open-show"></i><%= t('activities.index.collapse_all') %>
+      <i class="sn-icon sn-icon-up"></i><%= t('activities.index.collapse_all') %>
     </a>
   </div>
   <div class="ga-search-container">
diff --git a/app/views/my_module_tags/_index_edit.html.erb b/app/views/my_module_tags/_index_edit.html.erb
index 233bede15..835473473 100644
--- a/app/views/my_module_tags/_index_edit.html.erb
+++ b/app/views/my_module_tags/_index_edit.html.erb
@@ -11,17 +11,17 @@
           <div class="col-xs-6 col-lg-8">
             <h4><%= tag.name %></h4>
           </div>
-          <div class="ml-auto flex items-center pr-1.5" data-view-mode="active">
+          <div class="ml-auto flex gap-2 items-center pr-1.5" data-view-mode="active">
             <% if can_manage_my_module?(@my_module) %>
-              <%= link_to "", remote: true, class: 'btn btn-light btn-sm edit-tag-link btn-white', title: t("experiments.canvas.modal_manage_tags.edit_tag") do %>
+              <%= link_to "", remote: true, class: 'btn btn-light btn-sm icon-btn edit-tag-link btn-white', title: t("experiments.canvas.modal_manage_tags.edit_tag") do %>
                 <span class="sn-icon sn-icon-edit"></span>
               <% end %>
-              <%= link_to my_module_my_module_tag_path(@my_module, mmt, format: :json), method: :delete, remote: true, class: 'btn btn-light remove-tag-link btn-sm btn-white', title: t("experiments.canvas.modal_manage_tags.remove_tag", module: @my_module.name), data: {tag_id: tag.id} do %>
+              <%= link_to my_module_my_module_tag_path(@my_module, mmt, format: :json), method: :delete, remote: true, class: 'btn btn-light icon-btn remove-tag-link btn-sm btn-white', title: t("experiments.canvas.modal_manage_tags.remove_tag", module: @my_module.name), data: {tag_id: tag.id} do %>
                 <span class="sn-icon sn-icon-close"></span>
               <% end %>
               <%= bootstrap_form_for tag, remote: true, url: project_tag_path(@my_module.experiment.project, tag, format: :json), data: {tag_id: tag.id}, method: :delete, html: { class: "delete-tag-form"} do |f| %>
                 <%= hidden_field_tag :my_module_id, @my_module.id %>
-                <%= f.button class: 'btn btn-light delete-tag-link btn-sm btn-white', title: t("experiments.canvas.modal_manage_tags.delete_tag"), data: { confirm: t("experiments.canvas.modal_manage_tags.delete_tag_confirmation") } do %>
+                <%= f.button class: 'btn btn-light delete-tag-link icon-btn btn-sm btn-white', title: t("experiments.canvas.modal_manage_tags.delete_tag"), data: { confirm: t("experiments.canvas.modal_manage_tags.delete_tag_confirmation") } do %>
                   <span class="sn-icon sn-icon-delete"></span>
                 <% end %>
               <% end %>
@@ -35,15 +35,15 @@
             <div class="col-xs-7">
               <%= f.text_field :name, hide_label: true %>
             </div>
-            <div class="pull-right">
+            <div class="col-xs-5 flex items-center gap-2 justify-end">
               <%= render partial: 'shared/color_picker_select.erb',
                          locals: { name: :color, colors: Constants::TAG_COLORS,
                                    classes: "edit-tag-color", styles: "",
                                    object_name: :tag} %>
-              <%= f.button class: "btn btn-light save-tag-link", title: t("experiments.canvas.modal_manage_tags.save_tag") do %>
+              <%= f.button class: "btn btn-light btn-sm btn-white icon-btn save-tag-link", title: t("experiments.canvas.modal_manage_tags.save_tag") do %>
                 <span class="sn-icon sn-icon-check"></span>
               <% end %>
-              <%= link_to "", remote: true, class: 'btn btn-light cancel-tag-link', title: t("experiments.canvas.modal_manage_tags.cancel_tag") do %>
+              <%= link_to "", remote: true, class: 'btn btn-light btn-sm icon-btn btn-white cancel-tag-link', title: t("experiments.canvas.modal_manage_tags.cancel_tag") do %>
                 <span class="sn-icon sn-icon-close"></span>
               <% end %>
             </div>
diff --git a/app/views/repositories/_toolbar_buttons.html.erb b/app/views/repositories/_toolbar_buttons.html.erb
index 6d103a4ce..31d2a8bb4 100644
--- a/app/views/repositories/_toolbar_buttons.html.erb
+++ b/app/views/repositories/_toolbar_buttons.html.erb
@@ -26,7 +26,7 @@
         </button>
       <% end %>
 
-      <span id="saveCancel" class="flex items-center gap-3" data-toggle="buttons" style="display:none">
+      <span id="saveCancel" class="flex items-center gap-2" data-toggle="buttons" style="display:none">
         <button type="button" class="btn btn-primary prevent-shrink" id="saveRecord" data-view-mode="active">
           <span class="fas fa-save"></span>
           <%= t("repositories.save_record") %>
@@ -92,7 +92,7 @@
       </div>
     <% end %>
     <div class="repo-datatables-buttons">
-      <button class="btn btn-light btn-black icon-btn manage-repo-column-index" title="<%= t("libraries.manange_modal_column.button_tooltip") %>"
+      <button class="btn btn-light icon-btn manage-repo-column-index" title="<%= t("libraries.manange_modal_column.button_tooltip") %>"
               data-modal-url="<%= repository_repository_columns_path(@repository) %>"
               data-action="new">
         <span class="sn-icon sn-icon sn-icon-reports">
diff --git a/app/views/result_assets/_new.html.erb b/app/views/result_assets/_new.html.erb
index 20b761c09..e02f1448d 100644
--- a/app/views/result_assets/_new.html.erb
+++ b/app/views/result_assets/_new.html.erb
@@ -4,8 +4,8 @@
       <span>
         <label>
         <h2 class="inline-block font-normal"><%= t('assets.drag_n_drop.label_html') %></h2>
-          <span class="btn btn-secondary new-asset-upload-button">
-            <span class="fas fa-file-upload new-asset-upload-icon"></span>
+          <span class="btn btn-light btn-sm new-asset-upload-button">
+            <span class="sn-icon sn-icon-import new-asset-upload-icon"></span>
             <%= t('assets.drag_n_drop.browse_label') %>
           </span>
           <%= f.file_field :file,