diff --git a/changes/ui-hackathon-change-buttons b/changes/ui-hackathon-change-buttons
new file mode 100644
index 0000000000..e227908fb4
--- /dev/null
+++ b/changes/ui-hackathon-change-buttons
@@ -0,0 +1 @@
+- update buttons to the the new style guide.
diff --git a/frontend/components/DiskSpaceGraph/_styles.scss b/frontend/components/DiskSpaceGraph/_styles.scss
index c07aeba038..734a76dcc4 100644
--- a/frontend/components/DiskSpaceGraph/_styles.scss
+++ b/frontend/components/DiskSpaceGraph/_styles.scss
@@ -7,7 +7,7 @@
     display: inline-block;
     height: 4px;
     width: 50px;
-    background-color: $ui-fleet-blue-15;
+    background-color: $ui-fleet-black-10;
     border-radius: 2px;
     margin-right: $pad-small;
     overflow: hidden;
diff --git a/frontend/components/EnrollSecrets/EnrollSecretModal/_styles.scss b/frontend/components/EnrollSecrets/EnrollSecretModal/_styles.scss
index d94276ffaa..5eb84b181c 100644
--- a/frontend/components/EnrollSecrets/EnrollSecretModal/_styles.scss
+++ b/frontend/components/EnrollSecrets/EnrollSecretModal/_styles.scss
@@ -13,7 +13,7 @@
   code {
     background-color: $ui-off-white;
     color: $core-fleet-blue;
-    border: 1px solid $ui-fleet-blue-15;
+    border: 1px solid $ui-fleet-black-10;
     border-radius: 4px;
     padding: 7px $pad-medium;
     margin: $pad-large 0 0 44px;
diff --git a/frontend/components/EnrollSecrets/SecretEditorModal/_styles.scss b/frontend/components/EnrollSecrets/SecretEditorModal/_styles.scss
index 7e2a04ea17..1dd288204a 100644
--- a/frontend/components/EnrollSecrets/SecretEditorModal/_styles.scss
+++ b/frontend/components/EnrollSecrets/SecretEditorModal/_styles.scss
@@ -13,7 +13,7 @@
   code {
     background-color: $ui-off-white;
     color: $core-fleet-blue;
-    border: 1px solid $ui-fleet-blue-15;
+    border: 1px solid $ui-fleet-black-10;
     border-radius: 4px;
     padding: 7px $pad-medium;
     margin: $pad-large 0 0 44px;
diff --git a/frontend/components/FlashMessage/_styles.scss b/frontend/components/FlashMessage/_styles.scss
index d7b96aa124..75163039a8 100644
--- a/frontend/components/FlashMessage/_styles.scss
+++ b/frontend/components/FlashMessage/_styles.scss
@@ -21,7 +21,7 @@
   z-index: 999;
   background-color: $core-vibrant-blue;
   margin: auto;
-  border: 1px solid $ui-fleet-blue-15;
+  border: 1px solid $ui-fleet-black-10;
   box-sizing: border-box;
   box-shadow: 0px 7px 3px -5px rgba(25, 33, 71, 0.1);
   border-radius: 8px;
diff --git a/frontend/components/Modal/_styles.scss b/frontend/components/Modal/_styles.scss
index 77fb627ee9..101eadd268 100644
--- a/frontend/components/Modal/_styles.scss
+++ b/frontend/components/Modal/_styles.scss
@@ -53,7 +53,7 @@
     font-weight: $regular;
     text-align: left;
     padding-bottom: $pad-xsmall;
-    border-bottom: 1px solid $ui-fleet-blue-15;
+    border-bottom: 1px solid $ui-fleet-black-10;
     display: flex;
     justify-content: space-between;
 
diff --git a/frontend/components/TableContainer/DataTable/DefaultColumnFilter/_styles.scss b/frontend/components/TableContainer/DataTable/DefaultColumnFilter/_styles.scss
index aef79668c5..7a72223a00 100644
--- a/frontend/components/TableContainer/DataTable/DefaultColumnFilter/_styles.scss
+++ b/frontend/components/TableContainer/DataTable/DefaultColumnFilter/_styles.scss
@@ -4,7 +4,7 @@
     width: 100%;
     font-size: $x-small;
     background-color: $ui-off-white;
-    border: 1px solid $ui-fleet-blue-15;
+    border: 1px solid $ui-fleet-black-10;
     border-radius: 4px;
     padding: 4px;
     padding-left: 20px;
diff --git a/frontend/components/TableContainer/DataTable/_styles.scss b/frontend/components/TableContainer/DataTable/_styles.scss
index 3d2da37f70..301031827a 100644
--- a/frontend/components/TableContainer/DataTable/_styles.scss
+++ b/frontend/components/TableContainer/DataTable/_styles.scss
@@ -9,14 +9,14 @@ $shadow-transition-width: 10px;
   .data-table {
     &__wrapper {
       position: relative;
-      border: 1px solid $ui-fleet-blue-15;
+      border: 1px solid $ui-fleet-black-10;
       border-radius: 6px;
       margin-top: $pad-small;
       flex-grow: 1;
       width: 100%;
 
       // Shadow
-      background-image: 
+      background-image:
       /* Shadows */ linear-gradient(
           to right,
           white,
@@ -73,7 +73,7 @@ $shadow-transition-width: 10px;
     }
 
     tr {
-      border-bottom: 1px solid $ui-fleet-blue-15;
+      border-bottom: 1px solid $ui-fleet-black-10;
 
       &:last-child {
         border-bottom: 0;
@@ -95,7 +95,7 @@ $shadow-transition-width: 10px;
       background-color: $ui-off-white-opaque; // opaque needed for horizontal scroll shadow
       color: $core-fleet-black;
       text-align: left;
-      border-bottom: 1px solid $ui-fleet-blue-15;
+      border-bottom: 1px solid $ui-fleet-black-10;
 
       // resize header icons
       img {
@@ -116,7 +116,7 @@ $shadow-transition-width: 10px;
       th {
         padding: $pad-medium $pad-large;
         white-space: nowrap;
-        border-right: 1px solid $ui-fleet-blue-15;
+        border-right: 1px solid $ui-fleet-black-10;
 
         &:first-child {
           border-top-left-radius: 6px;
diff --git a/frontend/components/buttons/Button/_styles.scss b/frontend/components/buttons/Button/_styles.scss
index 099620b4df..d96adcfba1 100644
--- a/frontend/components/buttons/Button/_styles.scss
+++ b/frontend/components/buttons/Button/_styles.scss
@@ -1,27 +1,51 @@
 $base-class: "button";
 
-@mixin button-variant($color, $hover: null, $active: null, $inverse: null) {
+@mixin button-focus-outline($offset: 2px) {
+  outline-color: #d9d9fe;
+  outline-offset: $offset;
+  outline-style: solid;
+  outline-width: 2px;
+}
+
+@mixin button-variant($color, $hover: null, $active: null, $inverse: false) {
   background-color: $color;
 
   @if $inverse {
-    &:hover,
-    &:focus {
-      border: 2px solid $hover;
-      color: $hover;
+    &:hover {
+      background-color: rgba(#192147, .05);
+
+      &:active {
+        background-color: $ui-fleet-black-10;
+      }
     }
 
-    &:active {
-      border: 2px solid $active;
-      color: $active;
+    &:focus-visible {
+      // need a slightly larger focus outline to accomodate the :after content box
+      // that correctly displays the border. We chose this approach as adding a
+      // border to the button caused the button to jump around on the screen
+      // when it was added and removed.
+      @include button-focus-outline($offset: 3px);
+      &::after {
+        content: "";
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        border: 1px solid $core-vibrant-blue;
+        border-radius: 6px;
+      }
     }
+
   } @else {
-    &:hover:not(.button--disabled),
-    &:focus {
+    &:hover:not(.button--disabled) {
       background-color: $hover;
+
+      &:active {
+        background-color: $active;
+      }
     }
 
-    &:active {
-      background-color: $active;
+    &:focus-visible {
+      @include button-focus-outline()
     }
   }
 }
@@ -37,7 +61,7 @@ $base-class: "button";
   justify-content: center;
   align-items: center;
   padding: $pad-small $pad-medium;
-  border-radius: 4px;
+  border-radius: 6px;
   font-size: $x-small;
   font-family: "Nunito Sans", sans-serif;
   font-weight: $bold;
@@ -241,14 +265,8 @@ $base-class: "button";
       $inverse: true
     );
     color: $core-vibrant-blue;
-    border: 0;
     box-sizing: border-box;
-    padding: 0;
-
-    &:hover,
-    &:focus {
-      border: 0;
-    }
+    padding: $pad-small;
   }
 
   &--inverse-alert {
@@ -316,7 +334,7 @@ $base-class: "button";
     display: block;
     width: 100%;
     border-radius: 0px;
-    border-bottom: 1px solid $ui-fleet-blue-15;
+    border-bottom: 1px solid $ui-fleet-black-10;
 
     &:active {
       box-shadow: none;
diff --git a/frontend/components/forms/RegistrationForm/_styles.scss b/frontend/components/forms/RegistrationForm/_styles.scss
index 9da41c1d6e..91388d3574 100644
--- a/frontend/components/forms/RegistrationForm/_styles.scss
+++ b/frontend/components/forms/RegistrationForm/_styles.scss
@@ -23,7 +23,7 @@
       padding: 0 0 $pad-medium;
       margin: 0;
       margin-bottom: $pad-xxlarge;
-      border-bottom: 1px solid $ui-fleet-blue-15;
+      border-bottom: 1px solid $ui-fleet-black-10;
     }
 
     p {
diff --git a/frontend/components/forms/fields/Dropdown/_styles.scss b/frontend/components/forms/fields/Dropdown/_styles.scss
index f25c4caa90..0ca93bfbab 100644
--- a/frontend/components/forms/fields/Dropdown/_styles.scss
+++ b/frontend/components/forms/fields/Dropdown/_styles.scss
@@ -44,7 +44,7 @@
 
 .Select {
   &.dropdown__select {
-    border: 1px solid $ui-fleet-blue-15;
+    border: 1px solid $ui-fleet-black-10;
     border-radius: $border-radius;
     &:hover {
       box-shadow: none;
diff --git a/frontend/components/forms/fields/InputField/_styles.scss b/frontend/components/forms/fields/InputField/_styles.scss
index 697d9e2fcf..f5d6ef3cb7 100644
--- a/frontend/components/forms/fields/InputField/_styles.scss
+++ b/frontend/components/forms/fields/InputField/_styles.scss
@@ -1,7 +1,7 @@
 .input-field {
   line-height: 1.5;
   background-color: $ui-light-grey;
-  border: solid 1px $ui-fleet-blue-15;
+  border: solid 1px $ui-fleet-black-10;
   border-radius: 4px;
   font-size: $small;
   padding: 7px 12px;
diff --git a/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss b/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
index 6f5e299ec4..749087831c 100644
--- a/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
+++ b/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
@@ -22,7 +22,7 @@
   }
 
   &__input {
-    border: 1px solid $ui-fleet-blue-15;
+    border: 1px solid $ui-fleet-black-10;
     background-color: $ui-light-grey;
     border-radius: $border-radius;
     padding: 9px 30px 9px $pad-medium;
diff --git a/frontend/components/forms/fields/Radio/_styles.scss b/frontend/components/forms/fields/Radio/_styles.scss
index a201a2f2e3..e254fb2642 100644
--- a/frontend/components/forms/fields/Radio/_styles.scss
+++ b/frontend/components/forms/fields/Radio/_styles.scss
@@ -45,7 +45,7 @@
     width: 16px;
     height: 16px;
     border-radius: 50%;
-    border: 2px solid $ui-fleet-blue-15;
+    border: 2px solid $ui-fleet-black-10;
     transform: translateY(-0.05em);
   }
 
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss
index 1097f73182..036ac08f43 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss
@@ -7,7 +7,7 @@
     font-weight: $bold;
     font-size: $x-small;
     color: $core-fleet-black;
-    border-bottom: 1px solid $ui-fleet-blue-15;
+    border-bottom: 1px solid $ui-fleet-black-10;
 
     &::first-letter {
       text-transform: uppercase;
@@ -24,7 +24,7 @@
     overflow-y: scroll;
     max-height: 100%;
     padding: 0 $pad-large;
-    border-right: 1px solid $ui-fleet-blue-15;
+    border-right: 1px solid $ui-fleet-black-10;
     background-color: $core-white;
   }
 
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
index 8c322b8d36..fd69e54861 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
@@ -28,7 +28,7 @@
 
   &.Select {
     border-radius: $border-radius;
-    border: 1px solid $ui-fleet-blue-15;
+    border: 1px solid $ui-fleet-black-10;
 
     &.is-focused,
     &:hover {
diff --git a/frontend/components/queries/PackQueriesTable/_styles.scss b/frontend/components/queries/PackQueriesTable/_styles.scss
index 8c79e0ec9b..7a3483d891 100644
--- a/frontend/components/queries/PackQueriesTable/_styles.scss
+++ b/frontend/components/queries/PackQueriesTable/_styles.scss
@@ -34,7 +34,7 @@
         }
         @media (min-width: $break-990) {
           .interval__header {
-            border-right: 1px solid $ui-fleet-blue-15;
+            border-right: 1px solid $ui-fleet-black-10;
           }
           .performance__header {
             display: table-cell;
diff --git a/frontend/components/side_panels/PackInfoSidePanel/_styles.scss b/frontend/components/side_panels/PackInfoSidePanel/_styles.scss
index dfb91a2502..e2c2d016ca 100644
--- a/frontend/components/side_panels/PackInfoSidePanel/_styles.scss
+++ b/frontend/components/side_panels/PackInfoSidePanel/_styles.scss
@@ -3,7 +3,7 @@
     font-size: $medium;
     font-weight: $regular;
     color: $core-fleet-black;
-    border-bottom: 1px solid $ui-fleet-blue-15;
+    border-bottom: 1px solid $ui-fleet-black-10;
     padding-bottom: 8px;
     margin: 0 0 7px;
   }
diff --git a/frontend/components/side_panels/QuerySidePanel/EventedTableTag/_styles.scss b/frontend/components/side_panels/QuerySidePanel/EventedTableTag/_styles.scss
index 8925d9270d..75455117fd 100644
--- a/frontend/components/side_panels/QuerySidePanel/EventedTableTag/_styles.scss
+++ b/frontend/components/side_panels/QuerySidePanel/EventedTableTag/_styles.scss
@@ -2,7 +2,7 @@
   display: inline-flex;
   align-items: center;
   color: $core-fleet-black;
-  background-color: $ui-fleet-blue-15;
+  background-color: $ui-fleet-black-10;
   padding: $pad-xsmall $pad-small;
   border-radius: 6px;
   font-size: $xxx-small;
diff --git a/frontend/components/side_panels/QuerySidePanel/_styles.scss b/frontend/components/side_panels/QuerySidePanel/_styles.scss
index 6cf9484115..7dcebdff19 100644
--- a/frontend/components/side_panels/QuerySidePanel/_styles.scss
+++ b/frontend/components/side_panels/QuerySidePanel/_styles.scss
@@ -45,7 +45,7 @@
   &__table-count {
     line-height: normal;
     margin-left: $pad-small;
-    background-color: $ui-fleet-blue-15;
+    background-color: $ui-fleet-black-10;
     padding: $pad-xsmall $pad-small;
     border-radius: 8px;
     font-size: $x-small;
diff --git a/frontend/components/top_nav/UserMenu/_styles.scss b/frontend/components/top_nav/UserMenu/_styles.scss
index 5c4b8745d4..cc55512774 100644
--- a/frontend/components/top_nav/UserMenu/_styles.scss
+++ b/frontend/components/top_nav/UserMenu/_styles.scss
@@ -27,7 +27,7 @@
 
     .dropdown-button__option:last-child,
     .dropdown-button__option:nth-last-child(2) {
-      border-top: 1px solid $ui-fleet-blue-15;
+      border-top: 1px solid $ui-fleet-black-10;
     }
   }
 }
diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/ActivityItem/_styles.scss b/frontend/pages/DashboardPage/cards/ActivityFeed/ActivityItem/_styles.scss
index 1e17acf0c4..07257f00df 100644
--- a/frontend/pages/DashboardPage/cards/ActivityFeed/ActivityItem/_styles.scss
+++ b/frontend/pages/DashboardPage/cards/ActivityFeed/ActivityItem/_styles.scss
@@ -15,7 +15,7 @@
     z-index: 0;
     top: 35px;
     left: 17px;
-    border-left: 1px dashed $ui-fleet-blue-15;
+    border-left: 1px dashed $ui-fleet-black-10;
     height: 100%;
   }
 
diff --git a/frontend/pages/DashboardPage/components/InfoCard/_styles.scss b/frontend/pages/DashboardPage/components/InfoCard/_styles.scss
index 9202a02a5a..777dcac9ab 100644
--- a/frontend/pages/DashboardPage/components/InfoCard/_styles.scss
+++ b/frontend/pages/DashboardPage/components/InfoCard/_styles.scss
@@ -2,9 +2,9 @@
   padding: 32px;
   width: 100%;
   background-color: $core-white;
-  border: 1px solid $ui-fleet-blue-15;
+  border: 1px solid $ui-fleet-black-10;
   border-radius: 8px;
-  box-shadow: 0 2px 0 0 $ui-fleet-blue-15;
+  box-shadow: 0 2px 0 0 $ui-fleet-black-10;
   box-sizing: border-box;
 
   &__section-title-cta {
diff --git a/frontend/pages/admin/AppSettingsPage/components/OrgSettingsForm/_styles.scss b/frontend/pages/admin/AppSettingsPage/components/OrgSettingsForm/_styles.scss
index 106c0cf905..e040e823a7 100644
--- a/frontend/pages/admin/AppSettingsPage/components/OrgSettingsForm/_styles.scss
+++ b/frontend/pages/admin/AppSettingsPage/components/OrgSettingsForm/_styles.scss
@@ -99,7 +99,7 @@
       font-size: $medium;
       font-weight: $regular;
       color: $core-fleet-black;
-      border-bottom: solid 1px $ui-fleet-blue-15;
+      border-bottom: solid 1px $ui-fleet-black-10;
       margin: 0 0 $pad-xxlarge;
       @media (min-width: $break-990) {
         max-width: 65%;
@@ -219,7 +219,7 @@
       border-radius: 20%;
       height: 120px;
       width: 120px;
-      border: 1px solid $ui-fleet-blue-15;
+      border: 1px solid $ui-fleet-black-10;
       background-color: $ui-light-grey;
       position: relative;
       bottom: -20px;
diff --git a/frontend/pages/admin/IntegrationsPage/cards/Mdm/_styles.scss b/frontend/pages/admin/IntegrationsPage/cards/Mdm/_styles.scss
index ffaba6093c..ca2e86b6d9 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/Mdm/_styles.scss
+++ b/frontend/pages/admin/IntegrationsPage/cards/Mdm/_styles.scss
@@ -13,7 +13,7 @@
       font-size: $medium;
       font-weight: $regular;
       color: $core-fleet-black;
-      border-bottom: solid 1px $ui-fleet-blue-15;
+      border-bottom: solid 1px $ui-fleet-black-10;
       margin: 0 0 $pad-xxlarge;
       @media (min-width: $break-990) {
         max-width: 65%;
diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/_styles.scss b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/_styles.scss
index 806be61f4e..96e77ae4f7 100644
--- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/_styles.scss
+++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/_styles.scss
@@ -24,7 +24,7 @@
 
         @media (min-width: $break-1400) {
           .role__header {
-            border-right: 1px solid $ui-fleet-blue-15;
+            border-right: 1px solid $ui-fleet-black-10;
           }
         }
       }
diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AutocompleteDropdown/_styles.scss b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AutocompleteDropdown/_styles.scss
index 0592741577..762a32ab2e 100644
--- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AutocompleteDropdown/_styles.scss
+++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AutocompleteDropdown/_styles.scss
@@ -1,6 +1,6 @@
 .autocomplete-dropdown {
   .Select {
-    border: solid 1px $ui-fleet-blue-15;
+    border: solid 1px $ui-fleet-black-10;
     border-radius: 4px;
 
     &:hover,
diff --git a/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/_styles.scss b/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/_styles.scss
index 9c99fe8ecf..0ce4d44c04 100644
--- a/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/_styles.scss
+++ b/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/_styles.scss
@@ -1,5 +1,5 @@
 .selected-teams-form {
-  border: 1px solid $ui-fleet-blue-15;
+  border: 1px solid $ui-fleet-black-10;
   border-radius: $border-radius;
   background-color: $ui-off-white;
   padding: $pad-medium;
diff --git a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss
index f39bfe91b3..0fa641a929 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss
@@ -37,7 +37,7 @@
     width: 100%;
     line-height: 1.5;
     background-color: $ui-light-grey;
-    border: solid 1px $ui-fleet-blue-15;
+    border: solid 1px $ui-fleet-black-10;
     border-radius: 4px;
     font-size: $small;
     padding: $pad-xsmall 12px $pad-xsmall 42px;
diff --git a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss
index fbb8a4bdda..16d3de610f 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss
@@ -11,7 +11,7 @@
   }
 
   .label-filter-select__control {
-    border: 1px solid $ui-fleet-blue-15;
+    border: 1px solid $ui-fleet-black-10;
     background-color: $ui-light-grey;
     border-radius: $border-radius;
     height: 40px;
diff --git a/frontend/pages/hosts/details/DeviceUserPage/_styles.scss b/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
index db025dc4e9..9a6c524f49 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
+++ b/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
@@ -30,7 +30,7 @@
     flex-direction: column;
     background-color: $core-white;
     border-radius: 16px;
-    border: 1px solid $ui-fleet-blue-15;
+    border: 1px solid $ui-fleet-black-10;
     padding: $pad-xxlarge;
     box-shadow: 0px 3px 0px rgba(226, 228, 234, 0.4);
 
@@ -335,7 +335,7 @@
   }
 
   &__wrapper {
-    border: solid 1px $ui-fleet-blue-15;
+    border: solid 1px $ui-fleet-black-10;
     border-radius: 6px;
     margin-top: $pad-small;
     overflow: scroll;
diff --git a/frontend/pages/hosts/details/HostDetailsPage/_styles.scss b/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
index d66102c79f..4e1831ecf9 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
+++ b/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
@@ -18,7 +18,7 @@
     flex-direction: column;
     background-color: $core-white;
     border-radius: 16px;
-    border: 1px solid $ui-fleet-blue-15;
+    border: 1px solid $ui-fleet-black-10;
     padding: $pad-xxlarge;
     box-shadow: 0px 3px 0px rgba(226, 228, 234, 0.4);
 
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/ManageAutomationsModal/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/components/ManageAutomationsModal/_styles.scss
index b045cc780e..a557903296 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/ManageAutomationsModal/_styles.scss
+++ b/frontend/pages/policies/ManagePoliciesPage/components/ManageAutomationsModal/_styles.scss
@@ -5,7 +5,7 @@
   code {
     background-color: $ui-off-white;
     color: $core-fleet-blue;
-    border: 1px solid $ui-fleet-blue-15;
+    border: 1px solid $ui-fleet-black-10;
     border-radius: 4px;
     padding: 7px $pad-medium;
     margin: $pad-large 0 0 44px;
diff --git a/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/_styles.scss b/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/_styles.scss
index 1703f16186..4e110ad1dd 100644
--- a/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/_styles.scss
+++ b/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/_styles.scss
@@ -2,7 +2,7 @@
   border-collapse: collapse;
 
   &__wrapper {
-    border: 1px solid $ui-fleet-blue-15;
+    border: 1px solid $ui-fleet-black-10;
     border-radius: 4px;
     overflow: hidden;
     margin-top: $pad-medium;
@@ -14,7 +14,7 @@
 
   thead {
     background-color: $ui-off-white;
-    border-bottom: 1px solid $ui-fleet-blue-15;
+    border-bottom: 1px solid $ui-fleet-black-10;
 
     th {
       font-size: $x-small;
diff --git a/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/_styles.scss b/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/_styles.scss
index 55f3864ac7..d0d5d05d28 100644
--- a/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/_styles.scss
+++ b/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/_styles.scss
@@ -2,7 +2,7 @@
   border-collapse: collapse;
 
   &__wrapper {
-    border: 1px solid $ui-fleet-blue-15;
+    border: 1px solid $ui-fleet-black-10;
     border-radius: 4px;
     overflow: hidden;
     margin-top: $pad-medium;
@@ -18,7 +18,7 @@
 
   thead {
     background-color: $ui-off-white;
-    border-bottom: 1px solid $ui-fleet-blue-15;
+    border-bottom: 1px solid $ui-fleet-black-10;
 
     th {
       font-size: $x-small;
diff --git a/frontend/pages/software/ManageSoftwarePage/components/ManageAutomationsModal/_styles.scss b/frontend/pages/software/ManageSoftwarePage/components/ManageAutomationsModal/_styles.scss
index e3ce395174..b9a1212b06 100644
--- a/frontend/pages/software/ManageSoftwarePage/components/ManageAutomationsModal/_styles.scss
+++ b/frontend/pages/software/ManageSoftwarePage/components/ManageAutomationsModal/_styles.scss
@@ -5,7 +5,7 @@
   code {
     background-color: $ui-off-white;
     color: $core-fleet-blue;
-    border: 1px solid $ui-fleet-blue-15;
+    border: 1px solid $ui-fleet-black-10;
     border-radius: 4px;
     padding: 7px $pad-medium;
     margin: $pad-large 0 0 44px;
diff --git a/frontend/pages/software/SoftwareDetailsPage/_styles.scss b/frontend/pages/software/SoftwareDetailsPage/_styles.scss
index 4bc4d11fbb..3d8a569222 100644
--- a/frontend/pages/software/SoftwareDetailsPage/_styles.scss
+++ b/frontend/pages/software/SoftwareDetailsPage/_styles.scss
@@ -18,7 +18,7 @@
     flex-direction: column;
     background-color: $core-white;
     border-radius: 16px;
-    border: 1px solid $ui-fleet-blue-15;
+    border: 1px solid $ui-fleet-black-10;
     padding: $pad-xxlarge;
     box-shadow: 0px 3px 0px rgba(226, 228, 234, 0.4);
 
diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss
index f7270d2eae..0c900164ac 100644
--- a/frontend/styles/global/_global.scss
+++ b/frontend/styles/global/_global.scss
@@ -116,5 +116,5 @@ hr {
   margin-top: $pad-xlarge;
   margin-bottom: $pad-xlarge;
   border: none;
-  border-bottom: 1px solid $ui-fleet-blue-15;
+  border-bottom: 1px solid $ui-fleet-black-10;
 }
diff --git a/frontend/styles/var/colors.scss b/frontend/styles/var/colors.scss
index 68e5ab694a..18daff24f8 100644
--- a/frontend/styles/var/colors.scss
+++ b/frontend/styles/var/colors.scss
@@ -11,7 +11,7 @@ $core-dark-blue-grey: #506e92;
 $ui-fleet-black-75: #515774;
 $ui-fleet-black-50: #8b8fa2;
 $ui-fleet-black-25: #c5c7d1;
-$ui-fleet-blue-15: #e2e4ea;
+$ui-fleet-black-10: #e2e4ea;
 $ui-fleet-blue-10: #F9FAFC;
 $ui-dark-blue-gray: #afbec1;
 $ui-blue-gray: #dbe3e5;
@@ -48,8 +48,9 @@ $gradients-bright-gradient: linear-gradient(180deg, #ae6ddf 0%, #6a67fe 100%);
 // Colors for over (hover) and down (active) buttons styles
 $core-vibrant-red-over: #e93661;
 $core-vibrant-red-down: #cb3559;
-$core-vibrant-blue-over: #5855eb;
-$core-vibrant-blue-down: #3f3cd4;
+$core-vibrant-blue-over: #5d5ae7;
+$core-vibrant-blue-down: #4b4ab4;
+$core-focused-outline: #d9d9fe;
 $core-fleet-blue-over: #303860;
 $core-fleet-blue-down: $core-fleet-black;
 
diff --git a/frontend/styles/var/colors.ts b/frontend/styles/var/colors.ts
index 19a803e072..32c2281d79 100644
--- a/frontend/styles/var/colors.ts
+++ b/frontend/styles/var/colors.ts
@@ -13,7 +13,7 @@ export const COLORS = {
   "ui-fleet-black-50": "#8B8FA2",
   "ui-fleet-black-33": "#B3B6C1",
   "ui-fleet-black-25": "#C5C7D1",
-  "ui-fleet-black-15": "#E2E4EA",
+  "ui-fleet-black-10": "#E2E4EA",
   "ui-off-white": "#F9FAFC",
   "ui-blue-hover": "#5D5AE7",
   "ui-blue-pressed": "#4B4AB4",