diff --git a/css/src/components/tabs.css b/css/src/components/tabs.css
index 681d8b5..b41db7b 100644
--- a/css/src/components/tabs.css
+++ b/css/src/components/tabs.css
@@ -14,12 +14,15 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   margin: 0 0 1.5rem 0;
   width: 100%;
+  border: 1px solid var(--color-lightgray);
+}
+.tabs--primary {
+  margin-top: 1.5rem;
 }
 
 .tabs__tab {
   white-space: nowrap;
   text-overflow: ellipsis;
-  border-top: 1px solid var(--color-lightgray);
   border-bottom: 1px solid var(--color-lightgray);
   background-color: var(--color-whitesmoke-o-40);
   font-size: 1rem;
@@ -33,36 +36,65 @@
 }
 .tabs__tab:last-child {
   border-radius: 0 0 2px 2px;
+  border-bottom: 0;
 }
 .tabs__tab.is-active {
   background-color: var(--color-white);
   display: flex;
   order: -1;
   justify-content: space-between;
-  border-color: var(--color-lightgray-o-80);
-  border-left: 3px solid var(--color-absolutezero); /* LTR */
-  border-radius: 2px
-}
-[dir="rtl"] .tabs__tab.is-active {
-  border-right: 3px solid var(--color-absolutezero);
-  border-left: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .tabs__link {
   flex-grow: 1;
-  padding: 0.5rem 1.5rem;
-  color: var(--color-davysgrey);
+  position: relative;
   display: block;
+  padding: 0.5rem 1.5rem;
   line-height: 2rem;
+  color: var(--color-davysgrey);
 }
 .tabs__link:hover {
-  color: black;
+  color: var(--color-text);
   text-decoration: none;
 }
 .tabs__link.is-active {
   color: var(--color-absolutezero);
   flex-grow: 1;
 }
+.tabs__link.is-active:hover {
+  color: var(--color-text);
+}
+/* Active and hover indicator. */
+.tabs__link::before {
+  content: '';
+  display: block;
+  position: absolute;
+}
+.tabs__link.is-active::before {
+  width: 3px;
+  height: 3.063rem;
+  background-color: var(--color-absolutezero);
+  left: -1px; /* LTR */
+  top: -1px;
+}
+[dir="rtl"] .tabs__link.is-active::before {
+  left: auto;
+  right: -1px;
+}
+.tabs__tab:first-child .tabs__link.is-active::before {
+  border-top-left-radius: 2px; /* LTR */
+}
+[dir="rtl"] .tabs__tab:first-child .tabs__link.is-active::before {
+  border-top-right-radius: 2px; /* LTR */
+}
+.tabs__tab:last-child .tabs__link.is-active::before {
+  border-bottom-left-radius: 2px; /* LTR */
+}
+[dir="rtl"] .tabs__tab:last-child .tabs__link.is-active::before {
+  border-bottom-right-radius: 2px; /* LTR */
+}
+
 .tabs__tab:not(.is-active) {
   display: none;
 }
@@ -82,24 +114,18 @@
   border-left: none;
 }
 
-
-.tabs__link.is-active:hover {
-  color: black;
-}
-
-.tabs--primary {
-  margin-top: 1.5rem;
-}
-
 @media screen and (min-width: 48em) {
   .tabs {
     flex-direction: row;
     box-shadow: none;
     margin: 0;
+    border: 0;
   }
   .tabs--secondary {
+    margin-bottom: 1rem;
     border-bottom: 1px solid var(--color-lightgray);
   }
+
   .tabs__tab {
     border-top: none;
     border-bottom: none;
@@ -109,6 +135,11 @@
   .tabs__tab.is-active {
     background: none;
     order: unset;
+    box-shadow: none;
+  }
+  .tabs__tab:first-child .tabs__link.is-active::before,
+  .tabs__tab:last-child .tabs__link.is-active::before {
+    border-radius: 0;
   }
   .tabs__tab.is-active > .tabs__trigger {
     display: none;
@@ -118,13 +149,25 @@
   }
   .tabs__tab.is-active {
     border: none;
-    border-bottom: 3px solid var(--color-absolutezero);
-  }
-  .tabs__tab:hover {
-    border-bottom: 2px solid black;
-    padding-bottom: 1px;
   }
+
   .tabs__link {
     padding: 0.5rem 2rem;
   }
+  .tabs__link:hover::before{
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    width: 100%;
+    background-color: var(--color-text);
+  }
+  .tabs__link.is-active::before {
+    top: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    width: 100%;
+  }
 }
diff --git a/templates/navigation/menu-local-task.html.twig b/templates/navigation/menu-local-task.html.twig
index 4e5920f..aaff20e 100644
--- a/templates/navigation/menu-local-task.html.twig
+++ b/templates/navigation/menu-local-task.html.twig
@@ -19,7 +19,7 @@
   {{ link }}
   {% if is_active and level == 'primary' %}
     <button class="reset-appearance tabs__trigger" aria-label="{{ 'Tabs display toggle'|t }}" data-drupal-nav-tabs-trigger>
-      {{ source('/themes/claro/images/src/hamburger-menu.svg') }}
+      {% include "@claro/../images/src/hamburger-menu.svg" %}
     </button>
   {% endif %}
 </li>