diff --git a/app/assets/javascripts/experiments/table.js b/app/assets/javascripts/experiments/table.js
index 2e5dd8931..92f65971c 100644
--- a/app/assets/javascripts/experiments/table.js
+++ b/app/assets/javascripts/experiments/table.js
@@ -102,7 +102,7 @@ var ExperimnetTable = {
       $.each(data.columns, (_i, cell) => {
         let hidden = '';
 
-        if ($(`.table-display-modal .fa-eye-slash[data-column="${cell.column_type}"]`).length === 1) {
+        if ($(`.table-display-modal .sn-icon-visibility-hide[data-column="${cell.column_type}"]`).length === 1) {
           hidden = 'hidden';
         }
 
@@ -509,30 +509,30 @@ var ExperimnetTable = {
     return null;
   },
   initManageColumnsModal: function() {
-    $.each($('.table-display-modal .fa-eye-slash'), (_i, column) => {
+    $.each($('.table-display-modal .sn-icon-visibility-hide'), (_i, column) => {
       $(column).parent().removeClass('visible');
     });
     $('.experiment-table')[0].style
-      .setProperty('--columns-count', $('.table-display-modal .fa-eye:not(.disabled)').length + 1);
+      .setProperty('--columns-count', $('.table-display-modal .sn-icon-visibility-show:not(.disabled)').length + 1);
 
-    $('.table-display-modal').on('click', '.column-container .fas', (e) => {
+    $('.table-display-modal').on('click', '.column-container .sn-icon', (e) => {
       let icon = $(e.target);
-      if (icon.hasClass('fa-eye')) {
+      if (icon.hasClass('sn-icon-visibility-show')) {
         $(`.experiment-table .${icon.data('column')}-column`).addClass('hidden');
-        icon.removeClass('fa-eye').addClass('fa-eye-slash');
+        icon.removeClass('sn-icon-visibility-show').addClass('sn-icon-visibility-hide');
         icon.parent().removeClass('visible');
       } else {
         $(`.experiment-table .${icon.data('column')}-column`).removeClass('hidden');
-        icon.addClass('fa-eye').removeClass('fa-eye-slash');
+        icon.addClass('sn-icon-visibility-show').removeClass('sn-icon-visibility-hide');
         icon.parent().addClass('visible');
       }
 
-      let visibleColumns = $('.table-display-modal .fa-eye').map((_i, col) => col.dataset.column).toArray();
+      let visibleColumns = $('.table-display-modal .sn-icon-visibility-show').map((_i, col) => col.dataset.column).toArray();
       // Update columns on backend - $.post('', { columns: visibleColumns }, () => {});
       $.post($('.table-display-modal').data('column-state-url'), { columns: visibleColumns }, () => {});
 
       $('.experiment-table')[0].style
-        .setProperty('--columns-count', $('.table-display-modal .fa-eye:not(.disabled)').length + 1);
+        .setProperty('--columns-count', $('.table-display-modal .sn-icon-visibility-show:not(.disabled)').length + 1);
     });
   },
   clearRowTaskSelection: function() {
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index d152d2db6..b2b895668 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -12,7 +12,56 @@
 @import "constants";
 
 @import "bootstrap-sprockets";
-@import "bootstrap";
+// Core variables and mixins
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+// Reset and dependencies
+@import "bootstrap/normalize";
+@import "bootstrap/print";
+@import "bootstrap/glyphicons";
+
+// Core CSS
+@import "bootstrap/scaffolding";
+@import "bootstrap/type";
+@import "bootstrap/code";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+
+// Components
+@import "bootstrap/component-animations";
+@import "bootstrap/dropdowns";
+@import "bootstrap/button-groups";
+@import "bootstrap/input-groups";
+@import "bootstrap/navs";
+@import "bootstrap/navbar";
+@import "bootstrap/breadcrumbs";
+@import "bootstrap/pagination";
+@import "bootstrap/pager";
+@import "bootstrap/labels";
+@import "bootstrap/badges";
+@import "bootstrap/jumbotron";
+@import "bootstrap/thumbnails";
+@import "bootstrap/alerts";
+@import "bootstrap/progress-bars";
+@import "bootstrap/media";
+@import "bootstrap/list-group";
+@import "bootstrap/panels";
+@import "bootstrap/responsive-embed";
+@import "bootstrap/wells";
+@import "bootstrap/close";
+
+// Components w/ JavaScript
+@import "bootstrap/modals";
+@import "bootstrap/tooltip";
+@import "bootstrap/popovers";
+@import "bootstrap/carousel";
+
+// Utility classes
+@import "bootstrap/utilities";
+@import "bootstrap/responsive-utilities";
+
 @import "bootstrap-datetimepicker";
 @import "bootstrap-colorselector";
 @import "bootstrap-tagsinput";
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index 5f5f2dd9e..bfd0577b9 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -1,4 +1,5 @@
 @import "tailwind/inputs";
+@import "tailwind/buttons";
 
 @tailwind base;
 @tailwind components;
diff --git a/app/assets/stylesheets/dashboard/show.scss b/app/assets/stylesheets/dashboard/show.scss
index 5e2666680..5e2a5823d 100644
--- a/app/assets/stylesheets/dashboard/show.scss
+++ b/app/assets/stylesheets/dashboard/show.scss
@@ -86,6 +86,7 @@
 
 .quick-start-buttons {
   display: flex;
+  position: relative;
 
   .btn {
     margin-right: .25em;
diff --git a/app/assets/stylesheets/projects.scss b/app/assets/stylesheets/projects.scss
index 5d4c9fc0a..e4f8ee403 100644
--- a/app/assets/stylesheets/projects.scss
+++ b/app/assets/stylesheets/projects.scss
@@ -661,6 +661,7 @@ li.module-hover {
 
       .right {
         align-self: flex-end;
+        display: flex;
       }
 
     }
diff --git a/app/assets/stylesheets/shared/content_pane.scss b/app/assets/stylesheets/shared/content_pane.scss
index 134a7ba4c..03d285ff5 100644
--- a/app/assets/stylesheets/shared/content_pane.scss
+++ b/app/assets/stylesheets/shared/content_pane.scss
@@ -135,19 +135,6 @@
     .sort-menu {
       display: inline-block;
 
-      #sortMenu {
-        background: $color-white;
-
-        &:focus,
-        &:active {
-          box-shadow: none;
-        }
-
-        &:hover {
-          background: $color-concrete;
-        }
-      }
-
       .dropdown-menu {
         @include font-button;
         min-width: 200px;
diff --git a/app/assets/stylesheets/shared/datatable.scss b/app/assets/stylesheets/shared/datatable.scss
index a41b59731..6c992ae3c 100644
--- a/app/assets/stylesheets/shared/datatable.scss
+++ b/app/assets/stylesheets/shared/datatable.scss
@@ -40,7 +40,7 @@
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    min-height: var(--datatable-pagination-row);
+    height: var(--datatable-pagination-row);
     position: relative;
     width: 100%;
     z-index: 101;
diff --git a/app/assets/stylesheets/shared_styles/constants/colors.scss b/app/assets/stylesheets/shared_styles/constants/colors.scss
index 529d828b2..e32a518a4 100644
--- a/app/assets/stylesheets/shared_styles/constants/colors.scss
+++ b/app/assets/stylesheets/shared_styles/constants/colors.scss
@@ -8,7 +8,7 @@ $colors:  ("sn-white": "#FFFFFF",
           "sn-blue": "#104DA9",
           "sn-science-blue": "#3B99FD",
           "sn-super-light-blue": "#F0F8FF",
-          "sn-blue-hover": "#2D5FAA",
+          "sn-blue-hover": "#254981",
           "sn-science-blue-hover": "#79B4F3",
           "sn-alert-green": "#5EC66F",
           "sn-alert-violet": "#6F2DC1",
@@ -25,6 +25,7 @@ $colors:  ("sn-white": "#FFFFFF",
           "sn-alert-science-blue-disabled": "#9DCCFE",
           "sn-delete-red": "#CE0C24",
           "sn-delete-red-hover": "#AD0015",
+          "sn-delete-red-disabled": "#F5D7DB",
           "sn-coral": "#FB565B",
           "sn-background-blue": "#DBE4F2",
           "sn-background-green": "#E7F7E9",
diff --git a/app/assets/stylesheets/shared_styles/elements/buttons.scss b/app/assets/stylesheets/shared_styles/elements/buttons.scss
deleted file mode 100644
index 0dc07ee2f..000000000
--- a/app/assets/stylesheets/shared_styles/elements/buttons.scss
+++ /dev/null
@@ -1,237 +0,0 @@
-// scss-lint:disable NestingDepth
-
-.btn{
-  @include font-button;
-  animation-timing-function: $timing-function-sharp;
-  align-items: center;
-  border-radius: $border-radius-default;
-  cursor: pointer;
-  display: inline-flex;
-  justify-content: center;
-  gap: .25em;
-  height: 36px;
-  line-height: 20px;
-  outline: 0;
-  padding: .5rem;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  transition: .3s;
-  user-select: none;
-
-  &:hover {
-    text-decoration: none;
-  }
-
-  &:active,
-  &.active {
-    box-shadow: none;
-    text-decoration: none;
-  }
-
-  &:focus {
-    outline: 0;
-    text-decoration: none;
-  }
-
-  &.btn-primary {
-    background: $brand-primary;
-    border: 1px solid $brand-primary;
-    color: $color-white;
-
-    &:hover {
-      background: $brand-primary-hover;
-      color: $color-white;
-    }
-
-    &:active,
-    &.active {
-      background: $brand-primary-press;
-      color: $color-white;
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 1px $brand-complementary;
-      color: $color-white;
-    }
-  }
-
-  &.btn-secondary {
-    background: $color-white;
-    border: $border-default;
-    color: $color-volcano;
-
-    &:hover {
-      background: $color-concrete;
-      border: $border-secondary;
-      color: $color-volcano;
-    }
-
-    &:active,
-    &.active {
-      background: $color-alto;
-      border: $border-secondary;
-      color: $color-volcano;
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 1px $brand-focus;
-      color: $color-volcano;
-    }
-  }
-
-  &.btn-light {
-    background: transparent;
-    border: $border-transparent;
-    color: $color-volcano;
-
-    &:hover {
-      background: $color-concrete;
-      border: $border-transparent;
-      color: $color-volcano;
-    }
-
-    &:active,
-    &.active {
-      background: $color-alto;
-      border: $border-transparent;
-      color: $color-volcano;
-    }
-
-    &:focus {
-      border-color: $brand-focus;
-      color: $color-volcano;
-    }
-  }
-
-  &.btn-light-link {
-    background: transparent;
-    border: $border-transparent;
-    color: $brand-primary;
-
-    &:hover {
-      background: $color-concrete;
-      border: $border-transparent;
-      color: $brand-primary;
-    }
-
-    &:active,
-    &.active {
-      background: $color-alto;
-      border: $border-transparent;
-      color: $brand-primary;
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 1px $brand-focus;
-      color: $brand-primary;
-    }
-  }
-
-  &.btn-danger {
-    background: $brand-danger;
-    border: $border-danger;
-    color: $color-white;
-
-    &:hover {
-      background: $brand-danger-hover;
-      color: $color-white;
-    }
-
-    &:active,
-    &.active {
-      background: $brand-danger-press;
-      color: $color-white;
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 1px $brand-focus;
-      color: $color-white;
-    }
-  }
-
-  &.btn-dark-background {
-    background: $color-white;
-    border: $border-default;
-    color: $brand-primary;
-
-    &:hover {
-      background: $color-concrete;
-      color: $brand-primary-hover;
-    }
-
-    &:active,
-    &.active {
-      background: $color-alto;
-      color: $brand-primary-press;
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 1px $brand-focus;
-      color: $brand-primary;
-    }
-  }
-
-  &.icon-btn {
-    padding: 0;
-    width: 36px;
-
-    img {
-      margin: 0;
-    }
-  }
-
-  &.btn-large {
-    font-size: $font-size-h2;
-    height: 3.1em;
-    padding: 1em 3em;
-  }
-
-  &.disabled,
-  &:disabled {
-    color: $color-silver-chalice;
-    cursor: auto;
-    opacity: .5;
-    pointer-events: none;
-
-    &.btn-primary,
-    &.btn-danger {
-      background: $color-alto;
-      border: $border-tertiary;
-
-      &:hover {
-        border: $border-tertiary;
-        color: $color-silver-chalice;
-      }
-    }
-
-    &.btn-secondary,
-    &.btn-light,
-    &.btn-light-link,
-    &.btn-dark-background {
-      background: $color-white;
-
-      &:hover {
-        color: $color-silver-chalice;
-      }
-    }
-  }
-}
-
-.sci-btn-group {
-  display: inline-block;
-  position: relative;
-
-  .btn {
-    float: left;
-    margin: 2px 4px 2px 0;
-
-    .fas {
-      margin-right: 8px;
-    }
-
-    &:nth-last-child(1) {
-      margin-right: 0;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/tailwind/buttons.css b/app/assets/stylesheets/tailwind/buttons.css
new file mode 100644
index 000000000..ba44d13e0
--- /dev/null
+++ b/app/assets/stylesheets/tailwind/buttons.css
@@ -0,0 +1,118 @@
+@layer components {
+  .sci-btn-group {
+    @apply flex items-center gap-2;
+  }
+
+  .btn {
+    @apply 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;
+  }
+
+  .btn.icon-btn {
+    @apply px-2 ;
+  }
+
+  .btn.btn-lg {
+    @apply py-2.5 px-[1.125rem] text-base leading-5;
+  }
+
+  .btn.btn-lg.icon-btn {
+    @apply px-2.5;
+  }
+
+  .btn.btn-sm {
+    @apply py-1.5 px-2.5 text-xs leading-5;
+  }
+
+  .btn.btn-sm.icon-btn {
+    @apply px-1.5;
+  }
+
+  .btn.btn-xs {
+    @apply py-0.5 px-2.5 text-xs leading-5;
+  }
+
+  .btn.btn-xs.icon-btn {
+    @apply px-0.5;
+  }
+
+  .btn:hover {
+    @apply no-underline;
+  }
+
+  .btn:focus {
+    @apply no-underline outline-none;
+    box-shadow: 0px 0px 0px 4px var(--sn-science-blue-hover);
+    color: var(--sn-white);
+
+  }
+
+  .btn:disabled,
+  .btn.disabled {
+    @apply cursor-not-allowed pointer-events-none;
+  }
+
+  .btn.btn-primary {
+    background-color: var(--sn-blue);
+    color: var(--sn-white);
+  }
+
+  .btn.btn-primary:hover {
+    background-color: var(--sn-blue-hover);
+    color: var(--sn-white);
+  }
+
+  .btn.btn-primary:disabled,
+  .btn.btn-primary.disabled {
+    background-color: var(--sn-light-grey);
+    border: 1px solid var(--sn-light-grey);
+    color: var(--sn-sleepy-grey);
+  }
+
+  .btn.btn-secondary {
+    background-color: var(--sn-white);
+    border: 1px solid var(--sn-light-grey);
+    color: var(--sn-blue);
+  }
+
+  .btn.btn-secondary:hover {
+    border: 1px solid var(--sn-blue-hover);
+  }
+
+  .btn.btn-secondary:disabled,
+  .btn.btn-secondary.disabled {
+    background-color: var(--sn-white);
+    color: var(--sn-sleepy-grey);
+  }
+
+  .btn.btn-light {
+    background-color: transparent;
+    color: var(--sn-blue);
+  }
+
+  .btn.btn-light.btn-black {
+    color: var(--sb-black);
+  }
+
+  .btn.btn-light:hover {
+    background-color: var(--sn-super-light-grey);
+  }
+
+  .btn.btn-light:disabled,
+  .btn.btn-light.disabled {
+    color: var(--sn-sleepy-grey);
+  }
+
+  .btn.btn-danger {
+    background-color: var(--sn-delete-red);
+    color: var(--sn-white);
+  }
+
+  .btn.btn-danger:hover {
+    background-color: var(--sn-delete-red-hover);
+  }
+
+  .btn.btn-danger:disabled,
+  .btn.btn-danger.disabled {
+    background-color: var(--sn-delete-red-disabled);
+  }
+}
diff --git a/app/javascript/vue/navigation/top_menu.vue b/app/javascript/vue/navigation/top_menu.vue
index 855670c9b..fd3977d8d 100644
--- a/app/javascript/vue/navigation/top_menu.vue
+++ b/app/javascript/vue/navigation/top_menu.vue
@@ -15,7 +15,7 @@
       ></Select>
     </div>
     <div v-if="user" class="dropdown">
-      <button class="btn btn-light icon-btn" data-toggle="dropdown">
+      <button class="btn btn-light icon-btn btn-black" data-toggle="dropdown">
         <i class="sn-icon sn-icon-help"></i>
       </button>
       <ul v-if="user" class="dropdown-menu dropdown-menu-right">
@@ -27,7 +27,7 @@
       </ul>
     </div>
     <div v-if="user" class="dropdown">
-      <button class="btn btn-light icon-btn" data-toggle="dropdown">
+      <button class="btn btn-light icon-btn btn-black" data-toggle="dropdown">
         <i class="sn-icon sn-icon-settings"></i>
       </button>
       <ul class="dropdown-menu dropdown-menu-right">
@@ -44,7 +44,7 @@
       </ul>
     </div>
     <div v-if="user" class="sci--navigation--notificaitons-flyout-container">
-      <button class="btn btn-light icon-btn"
+      <button class="btn btn-light icon-btn btn-black"
               :class="{ 'has-unseen': unseenNotificationsCount > 0 }"
               :data-unseen="unseenNotificationsCount"
               data-toggle="dropdown"
@@ -60,7 +60,7 @@
         @close="notificationsOpened = false" />
     </div>
     <div v-if="user" class="dropdown">
-      <div class="sci--navigation--top-menu-user btn btn-light icon-btn" data-toggle="dropdown">
+      <div class="sci--navigation--top-menu-user btn btn-light icon-btn btn-black" data-toggle="dropdown">
         <img class="avatar w-6 h-6" :src="user.avatar_url">
       </div>
       <div class="dropdown-menu dropdown-menu-right top-menu-user-dropdown">
diff --git a/app/views/projects/index/_toolbar.html.erb b/app/views/projects/index/_toolbar.html.erb
index ca980d2b6..d6d8c6124 100644
--- a/app/views/projects/index/_toolbar.html.erb
+++ b/app/views/projects/index/_toolbar.html.erb
@@ -84,24 +84,24 @@
               </div>
             </div>
           <% end %>
-          <div class="dropdown sort-menu">
-            <button class="btn btn-light icon-btn dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-              <span><i class="sn-icon sn-icon-sort-down"></i></span>
-            </button>
-            <ul id="sortMenuDropdown" class="dropdown-menu sort-projects-menu dropdown-menu-right" aria-labelledby="sortMenu">
-              <% %w(archived_new archived_old new old atoz ztoa id_asc id_desc).each_with_index do |sort, i| %>
-                <% if i.even? && i.positive? %>
-                  <li class="divider" <%= i == 2 ? 'data-view-mode=archived' : '' %>></li>
-                <% end %>
-                <li <%= %w(archived_new archived_old).include?(sort) ? 'data-view-mode=archived' : '' %>>
-                  <a class="<%= 'selected' if @current_sort == sort %>"
-                    data-sort="<%= sort %>" >
-                    <%= t("general.sort.#{sort}_html") %>
-                  </a>
-                </li>
+        </div>
+        <div class="dropdown sort-menu">
+          <button class="btn btn-light icon-btn dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+            <span><i class="sn-icon sn-icon-sort-down"></i></span>
+          </button>
+          <ul id="sortMenuDropdown" class="dropdown-menu sort-projects-menu dropdown-menu-right" aria-labelledby="sortMenu">
+            <% %w(archived_new archived_old new old atoz ztoa id_asc id_desc).each_with_index do |sort, i| %>
+              <% if i.even? && i.positive? %>
+                <li class="divider" <%= i == 2 ? 'data-view-mode=archived' : '' %>></li>
               <% end %>
-            </ul>
-          </div>
+              <li <%= %w(archived_new archived_old).include?(sort) ? 'data-view-mode=archived' : '' %>>
+                <a class="<%= 'selected' if @current_sort == sort %>"
+                  data-sort="<%= sort %>" >
+                  <%= t("general.sort.#{sort}_html") %>
+                </a>
+              </li>
+            <% end %>
+          </ul>
         </div>
       </span>
     </div>