diff --git a/app/assets/stylesheets/tailwind/buttons.css b/app/assets/stylesheets/tailwind/buttons.css
index 1dd96b8c8..4b115eb66 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 text-sm shrink-0 gap-2 justify-center px-4 rounded border border-solid appearance-none whitespace-nowrap cursor-pointer h-[40px] focus:outline-none;
+    @apply relative inline-flex items-center text-sm shrink-0 gap-2 justify-center px-4 rounded border border-solid appearance-none whitespace-nowrap cursor-pointer h-[40px];
     border-color: transparent;
   }
 
@@ -41,7 +41,7 @@
   }
 
   .btn:focus {
-    @apply no-underline outline-none text-sn-white;
+    @apply no-underline outline outline-4 outline-sn-science-blue-hover text-sn-white;
   }
 
   .btn:active {
@@ -58,6 +58,11 @@
     @apply bg-sn-blue text-sn-white;
   }
 
+  .btn.btn-primary:active,
+  .btn.btn-primary.active {
+    @apply bg-sn-blue-click;
+  }
+
   .btn.btn-primary:hover,
   .btn.btn-success:hover{
     @apply bg-sn-blue-hover text-sn-white;
@@ -79,6 +84,11 @@
     @apply bg-sn-science-blue text-sn-white border-sn-white;
   }
 
+  .btn.btn-secondary:active,
+  .btn.btn-secondary.active {
+    @apply bg-sn-super-light-blue;
+  }
+
   .btn.btn-secondary:hover,
   .btn.btn-default:hover {
     @apply  border-sn-blue-hover;
@@ -120,6 +130,11 @@
     @apply bg-sn-super-light-grey;
   }
 
+  .btn.btn-light:active,
+  .btn.btn-light.active {
+    @apply bg-sn-grey-100;
+  }
+
   .btn.btn-light:disabled,
   .btn.btn-light.disabled {
     @apply text-sn-sleepy-grey;
@@ -133,6 +148,11 @@
     @apply bg-sn-delete-red-hover;
   }
 
+  .btn.btn-danger:active,
+  .btn.btn-danger.active {
+    @apply bg-sn-delete-red-click;
+  }
+
   .btn.btn-danger:disabled,
   .btn.btn-danger.disabled {
     @apply bg-sn-delete-red-disabled;
diff --git a/app/views/design_elements/_button.html.erb b/app/views/design_elements/_button.html.erb
index 53f654145..7ae942be7 100644
--- a/app/views/design_elements/_button.html.erb
+++ b/app/views/design_elements/_button.html.erb
@@ -40,6 +40,9 @@
             <button class="btn <%= type_class %> <%= size_class %>" disabled="true">
               Button
             </button>
+            <button class="btn active <%= type_class %> <%= size_class %>">
+              Active
+            </button>
             <button class="btn <%= type_class %> <%= size_class %> icon-btn">
               <i class="sn-icon sn-icon-<%= icons_list.sample %>"></i>
             </button>
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
index 4c7d00be5..422718409 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -27,11 +27,16 @@ module.exports = {
         'sn-sleepy-grey': '#D0D5DD',
         'sn-grey': '#98A2B3',
         'sn-dark-grey': '#475467',
+        'sn-grey-100': '#F0F2F4',
+        'sn-grey-300': '#DDE0E6',
+        'sn-grey-500': '#BCC3CF',
+        'sn-grey-700': '#647081',
         'sn-black': '#1D2939',
         'sn-blue': '#104DA9',
         'sn-science-blue': '#3B99FD',
         'sn-super-light-blue': '#F0F8FF',
         'sn-blue-hover': '#2D5FAA',
+        'sn-blue-click': '#056AD7',
         'sn-science-blue-hover': '#79B4F3',
         'sn-alert-green': '#5EC66F',
         'sn-alert-violet': '#6F2DC1',
@@ -49,6 +54,7 @@ module.exports = {
         'sn-delete-red': '#CE0C24',
         'sn-delete-red-hover': '#AD0015',
         'sn-delete-red-disabled': '#F5D7DB',
+        'sn-delete-red-click': '#E9001D',
         'sn-coral': '#FB565B',
         'sn-background-blue': '#DBE4F2',
         'sn-background-green': '#E7F7E9',