diff --git a/lib/src/common/variables.js b/lib/src/common/variables.js
index cc2388031..3cf148117 100644
--- a/lib/src/common/variables.js
+++ b/lib/src/common/variables.js
@@ -13,6 +13,7 @@ export const globalTokens = {
   hal_black: "#000000",
   color_grey_800: "#4d4d4d",
   color_grey_600: "#808080",
+
   color_grey_50: "#fafafa",
   color_grey_a_100: "#0000000d",
   color_grey_a_200: "#0000001a",
@@ -26,7 +27,7 @@ export const globalTokens = {
   hal_purple_s_38: "#5f249f",
   hal_purple_d_30: "#4b1c7d",
   hal_purple_d_20: "#321353",
-  hal_purple_d_70: "#9a6bb2",
+  hal_purple_d_70: "#9A6bb2",
   color_purple_600: "#7d2fd0",
   color_purple_300: "#cbacec",
 
@@ -37,6 +38,7 @@ export const globalTokens = {
   hal_blue_s_35: "#0067b3",
   hal_blue_d_20: "#003c66",
   color_blue_200: "#cceaff",
+
   color_blue_500: "#33aaff",
   color_blue_50: "#f5fbff",
 
@@ -680,6 +682,25 @@ export const componentTokens = {
     activeUnderlineColor: globalTokens.hal_black,
     focusColor: globalTokens.hal_blue_l_50,
   },
+  navTabs: {
+    selectedBackgroundColor: globalTokens.white,
+    unselectedBackgroundColor: globalTokens.white,
+    hoverBackgroundColor: globalTokens.color_grey_a_100,
+    pressedBackgroundColor: globalTokens.color_grey_a_200,
+    selectedFontColor: globalTokens.hal_grey_s_40,
+    unselectedFontColor: globalTokens.hal_grey_s_40,
+    disabledFontColor: globalTokens.hal_grey_l_60,
+    focusOutline: globalTokens.hal_blue_l_50,
+    selectedUnderlineColor: globalTokens.hal_purple_s_38,
+    dividerColor: globalTokens.hal_grey_l_75,
+    fontFamily: globalTokens.type_sans,
+    fontSize: globalTokens.type_scale_03,
+    fontStyle: globalTokens.type_normal,
+    fontWeight: globalTokens.type_regular,
+    selectedIconColor: globalTokens.hal_grey_s_40,
+    unselectedIconColor: globalTokens.hal_grey_s_40,
+    disabledIconColor: globalTokens.hal_grey_l_60
+  },
   paginator: {
     backgroundColor: globalTokens.hal_grey_l_95,
     fontColor: globalTokens.hal_black,
diff --git a/lib/src/tabs-nav/NavTabs.tsx b/lib/src/tabs-nav/NavTabs.tsx
index 2f40d0270..d751004a9 100644
--- a/lib/src/tabs-nav/NavTabs.tsx
+++ b/lib/src/tabs-nav/NavTabs.tsx
@@ -76,7 +76,7 @@ const DxcNavTabs = ({ iconPosition = "top", tabIndex = 0, children }: NavTabsPro
   };
 
   return (
-    <ThemeProvider theme={colorsTheme.tabs}>
+    <ThemeProvider theme={colorsTheme.navTabs}>
       <NavTabsContainer onKeyDown={handleOnKeyDown} role="tablist" aria-label="Navigation tabs">
         <NavTabsContext.Provider value={contextValue}>{children}</NavTabsContext.Provider>
       </NavTabsContainer>
diff --git a/lib/src/tabs-nav/Tab.tsx b/lib/src/tabs-nav/Tab.tsx
index 7ccfec128..5352bbd5f 100644
--- a/lib/src/tabs-nav/Tab.tsx
+++ b/lib/src/tabs-nav/Tab.tsx
@@ -3,6 +3,8 @@ import styled from "styled-components";
 import DxcBadge from "../badge/Badge";
 import { NavTabsContext } from "./NavTabs";
 import { TabProps } from "./types";
+import DxcTypography from "../typography/Typography";
+import useTheme from '../useTheme';
 
 const DxcTab = forwardRef(
   (
@@ -12,6 +14,7 @@ const DxcTab = forwardRef(
     const tabRef: React.MutableRefObject<HTMLAnchorElement> = createRef();
 
     const { iconPosition, tabIndex, hasIcons, focusedLabel } = useContext(NavTabsContext);
+    const colorsTheme = useTheme();
 
     useLayoutEffect(() => {
       focusedLabel === children.toString() && tabRef?.current?.focus();
@@ -28,7 +31,7 @@ const DxcTab = forwardRef(
     };
 
     return (
-      <TabContainer active={active} role="tab" aria-selected={active}>
+      <TabContainer active={active} role="tab" aria-selected={active} aria-disabled={disabled}>
         <Tab
           href={!disabled && href ? href : undefined}
           disabled={disabled}
@@ -54,8 +57,25 @@ const DxcTab = forwardRef(
             </TabIconContainer>
           )}
           <LabelContainer>
-            {children}
-            {notificationNumber && (
+          <DxcTypography
+            color={
+              disabled
+                ? colorsTheme.navTabs.disabledFontColor
+                : active
+                ? colorsTheme.navTabs.selectedFontColor
+                : colorsTheme.navTabs.unselectedFontColor
+            }
+            fontFamily={colorsTheme.navTabs.fontFamily}
+            fontSize={colorsTheme.navTabs.fontSize}
+            fontStyle={colorsTheme.navTabs.fontStyle}
+            fontWeight={colorsTheme.navTabs.fontWeight}
+            textAlign="center"
+            letterSpacing="0.025em"
+            lineHeight="1.715em"
+          >            {children}
+            
+          </DxcTypography>
+          {notificationNumber && (
               <BadgeContainer>
                 <DxcBadge notificationText={notificationNumber > 99 ? "+99" : notificationNumber} disabled={disabled} />
               </BadgeContainer>
@@ -71,7 +91,22 @@ type TabContainerProps = {
   active?: boolean;
 };
 const TabContainer = styled.div<TabContainerProps>`
-  border-bottom: 2px solid ${(props) => (props.active ? "#6f2c91" : "#0000001a")};
+  border-bottom: 2px solid ${(props) => (props.active ? props.theme.selectedUnderlineColor : props.theme.dividerColor)};
+  svg {
+    color: ${(props) => props.theme.unselectedIconColor};
+  }
+
+  &[aria-selected="true"] {
+    svg {
+      color: ${(props) => props.theme.selectedIconColor};
+    }
+  }
+
+  &[aria-disabled="true"] {
+    svg {
+      color: ${(props) => props.theme.disabledIconColor};
+    }
+  }
 `;
 
 type TabStyleProps = {
@@ -85,13 +120,10 @@ const Tab = styled.a<TabStyleProps>`
   justify-content: center;
   align-items: center;
 
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 1rem;
-  color: ${(props) => (props.disabled ? "#0000004D" : "#333333")};
+  
   text-decoration-color: transparent;
   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  background: ${(props) => (props.theme.selectedBackgroundColor)};
 
   height: ${(props) => (props.hasIcon && props.iconPosition === "top" ? "66px" : "32px")};
   min-width: 164px;
@@ -99,19 +131,20 @@ const Tab = styled.a<TabStyleProps>`
   padding: 0.375rem;
 
   border-radius: 4px;
+  
 
   ${(props) =>
     !props.disabled &&
     `:hover {
-    background: #0000000D;
+    background: ${props.theme.hoverBackgroundColor};
   }
 
   :focus {
-    outline: 2px solid #33aaff};
+    outline: 2px solid ${props.theme.focusOutline};
   }
 
   :active {
-    background: #0000001A;
+    background: ${props.theme.pressedBackgroundColor};
     outline: 2px solid #33aaff};
   }`}
 `;
@@ -129,6 +162,7 @@ const TabIconContainer = styled.div<TabIconContainerProps>`
     height: 24px;
     width: 24px;
   }
+
 `;
 
 const LabelContainer = styled.div`
diff --git a/website/package-lock.json b/website/package-lock.json
index 175dab374..5cd346b78 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -677,7 +677,7 @@
     "@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
-      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
       "dev": true
     },
     "@types/mdast": {
@@ -942,7 +942,7 @@
     "ast-types-flow": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
-      "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==",
+      "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=",
       "dev": true
     },
     "asynckit": {
@@ -992,7 +992,7 @@
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw=="
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
     },
     "bail": {
       "version": "2.0.2",
@@ -1147,7 +1147,7 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
       "dev": true
     },
     "core-js": {
@@ -1182,7 +1182,7 @@
     "css-color-keywords": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
     },
     "css-to-react-native": {
       "version": "3.0.0",
@@ -1382,7 +1382,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "eslint": {
       "version": "8.5.0",
@@ -1809,7 +1809,7 @@
     "fast-levenshtein": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
       "dev": true
     },
     "fastq": {
@@ -1882,7 +1882,7 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
       "dev": true
     },
     "function-bind": {
@@ -1906,7 +1906,7 @@
     "functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
-      "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==",
+      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
     "functions-have-names": {
@@ -2031,7 +2031,7 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
     },
     "has-property-descriptors": {
       "version": "1.0.0",
@@ -2095,13 +2095,13 @@
     "imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
       "dev": true
     },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
       "dev": true,
       "requires": {
         "once": "^1.3.0",
@@ -2209,7 +2209,7 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
       "dev": true
     },
     "is-glob": {
@@ -2309,7 +2309,7 @@
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
     },
     "js-tokens": {
       "version": "4.0.0",
@@ -2338,7 +2338,7 @@
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
       "dev": true
     },
     "json5": {
@@ -2765,7 +2765,7 @@
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
     "next": {
@@ -2794,7 +2794,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-inspect": {
       "version": "1.12.2",
@@ -2866,7 +2866,7 @@
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
       "dev": true,
       "requires": {
         "wrappy": "1"
@@ -2903,7 +2903,7 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
       "dev": true
     },
     "path-key": {
@@ -3422,7 +3422,7 @@
     "strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
       "dev": true
     },
     "strip-json-comments": {
@@ -3478,7 +3478,7 @@
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
       "dev": true
     },
     "tinycolor2": {
@@ -3489,7 +3489,7 @@
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
     },
     "to-regex-range": {
       "version": "5.0.1",
@@ -3822,7 +3822,7 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
       "dev": true
     },
     "yallist": {
diff --git a/website/screens/components/tabs/specs/TabsSpecsPage.tsx b/website/screens/components/tabs/specs/TabsSpecsPage.tsx
index fc6f67290..aaed52cb0 100644
--- a/website/screens/components/tabs/specs/TabsSpecsPage.tsx
+++ b/website/screens/components/tabs/specs/TabsSpecsPage.tsx
@@ -266,6 +266,63 @@ const sections = [
       },
     ],
   },
+  {
+        title: "Typography",
+        content: (
+          <DxcTable>
+            <thead>
+              <tr>
+                <th>Component token</th>
+                <th>Element</th>
+                <th>Core token</th>
+                <th>Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <Code>fontFamily</Code>
+                </td>
+                <td>Title</td>
+                <td>
+                  <Code>font-family-sans</Code>
+                </td>
+                <td>&#39;Open Sans&#39;, sans-serif;</td>
+              </tr>
+              <tr>
+                <td>
+                  <Code>fontSize</Code>
+                </td>
+                <td>Title</td>
+                <td>
+                  <Code>font-scale-03</Code>
+                </td>
+                <td>1rem / 16px</td>
+              </tr>
+              <tr>
+                <td>
+                  <Code>fontStyle</Code>
+                </td>
+                <td>Title</td>
+                <td>
+                  <Code>font-normal</Code>
+                </td>
+                <td>normal</td>
+              </tr>
+              <tr>
+                <td>
+                  <Code>fontWeight</Code>
+                </td>
+                <td>Title</td>
+                <td>
+                  <Code>font-regular</Code>
+                </td>
+                <td>600</td>
+              </tr>
+            </tbody>
+          </DxcTable>
+        ),
+      },
   {
     title: "Accessibility",
     content: (