diff --git a/css/styles.css b/css/styles.css
index 2752f5f5b4c7de053ed799fef5708d3c5b9fb04a..98732054ec56c525650dc7415421aad882f154db 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -4415,21 +4415,19 @@ fieldset,
   display: flex; }
 
 .uw-tablinks {
-  border-left: 0.5px solid #fff;
-  border-right: 0.5px solid #fff;
-  margin: 0;
+  border-bottom: 0.4rem solid #fff;
+  margin: 0 0 0 0.15rem;
   max-width: inherit; }
-  .uw-tablinks:first-child {
-    border-left: 0.5px solid #eee; }
-  .uw-tablinks:hover, .uw-tablinks:focus {
-    border-left: 0.5px solid #fff;
-    border-right: 0.5px solid #fff; }
   .uw-tablinks[aria-selected="true"] {
     background: #eee;
+    border-bottom: 0.4rem solid #4e4e4e;
     color: #4e4e4e; }
+    .uw-tablinks[aria-selected="true"]:hover {
+      border-bottom: 0.4rem solid #ddd; }
+  .uw-tablinks:hover {
+    border-bottom: 0.4rem solid #fff; }
 
 .uw-tabcontent[role="tabpanel"] {
-  background: #eee;
   display: flex;
   flex-flow: row wrap;
   padding-top: 1rem; }
diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js
index 224dfb3e73344d9a1b1018297544c91743439a41..ed77c3a64573d68632b3c42d0304c82592def060 100644
--- a/js/component_scripts.min.js
+++ b/js/component_scripts.min.js
@@ -115,6 +115,7 @@
 (function ($, Drupal) {
   Drupal.behaviors.multitypelist = {
     attach: function (context, settings) {
+
       window.addEventListener("DOMContentLoaded", () => {
         const tabs = document.querySelectorAll('[role="tab"]');
         const tabList = document.querySelector('[role="tablist"]');
diff --git a/source/_patterns/04-components/multi-type-list/_multi-type-list.scss b/source/_patterns/04-components/multi-type-list/_multi-type-list.scss
index 1bc2ca541e4c09f3f109ed03ed1c45a921e582eb..f696db5107a209baaac67a322b122825357682a7 100644
--- a/source/_patterns/04-components/multi-type-list/_multi-type-list.scss
+++ b/source/_patterns/04-components/multi-type-list/_multi-type-list.scss
@@ -9,25 +9,23 @@
 }
 //button
 .uw-tablinks {
-  border-left: 0.5px solid #fff;
-  border-right: 0.5px solid #fff;
-  margin:0;
+  border-bottom: 0.4rem solid #fff;
+  margin:0 0 0 0.15rem;
   max-width: inherit;
-  &:first-child{
-    border-left: 0.5px solid $button-background-color-hover;
-  }
-  &:hover,
-  &:focus{
-    border-left: 0.5px solid #fff;
-    border-right: 0.5px solid #fff;
-  }
   &[aria-selected="true"] {
     background: $button-background-color-hover;
+    border-bottom: 0.4rem solid $button-text-color-hover;
     color: $button-text-color-hover;
+    &:hover{
+      border-bottom: 0.4rem solid #ddd;
+    }
+  }
+  &:hover{
+    border-bottom: 0.4rem solid #fff;
   }
 }
+
 .uw-tabcontent[role="tabpanel"] {
-  background: $button-background-color-hover;
   display:flex;
   flex-flow: row wrap;
   padding-top:1rem;