diff --git a/docs/navigation/tabs.mdx b/docs/navigation/tabs.mdx
index 9e2c21e..30957b6 100644
--- a/docs/navigation/tabs.mdx
+++ b/docs/navigation/tabs.mdx
@@ -115,7 +115,7 @@ With the prop <TagDocs text='fontSize' /> you can customize the font size of the
 
 <br />
 
-#### <span>TextColor</span>
+#### <span name="floating-nav">TextColor</span>
 
 With the prop <TagDocs text='textColor' /> you can customize the color of the first tab
 
@@ -143,7 +143,7 @@ With the prop <TagDocs text='textColor' /> you can customize the color of the fi
 
 <br />
 
-#### <span>Witdh</span>
+#### <span name="floating-nav">Witdh</span>
 
 With the prop <TagDocs text='width' /> you can customize the size of the TabGroup
 
@@ -171,7 +171,7 @@ With the prop <TagDocs text='width' /> you can customize the size of the TabGrou
 
 <br />
 
-#### <span>IndicatorColor</span>
+#### <span name="floating-nav">IndicatorColor</span>
 
 With the prop <TagDocs text='indicatorColor' /> you can customize the color of the line below the active tab
 
@@ -199,7 +199,7 @@ With the prop <TagDocs text='indicatorColor' /> you can customize the color of t
 
 <br />
 
-#### <span>WideLine</span>
+#### <span name="floating-nav">WideLine</span>
 
 With the prop <TagDocs text='wideLine' /> you can customize the width of the line under the active tab
 
@@ -227,7 +227,7 @@ With the prop <TagDocs text='wideLine' /> you can customize the width of the lin
 
 <br />
 
-#### <span>DisabledText</span>
+#### <span name="floating-nav">DisabledText</span>
 
 With the prop <TagDocs text='disabledText' /> you can customize a message for disabled tabs
 
@@ -253,7 +253,7 @@ With the prop <TagDocs text='disabledText' /> you can customize a message for di
 
 `} />
 
-#### <span>Hidden</span>
+#### <span name="floating-nav">Hidden</span>
 
 With the prop <TagDocs text='hidden' /> you can hide the tab
 
@@ -281,6 +281,57 @@ With the prop <TagDocs text='hidden' /> you can hide the tab
 
 <br />
 
+##### <span name="floating-nav">Tab Custom</span>
+
+With the <TagDocs text='tertiary' /> variant you can customize the appearance of the tabs. you can do so using the props: child ClassName, className, tabWidth textDisabledColor and others.
+
+<Playground className="flex items-center">
+    <Flex className="bg-gray-900 py-2">
+        <TabGroup
+            fontSize="xs"
+            indicatorColor="#3b82f6"
+            className="border-b border-gray-500"
+            childClassName="text-gray-400 py-2 hover:bg-gray-800"
+            tabWidth={106}
+            textColor="#ffffff"
+            textDisabledColor="#4b5563"
+            variant="tertiary"
+            wideLine={3}
+            >
+            <Tab label="Element First" />
+            <Tab label="Element Second" />
+            <Tab label="Element Third" />
+            <Tab label="Element Fourth" disabled />
+        </TabGroup>
+    </Flex>
+</Playground>
+
+<WindowEditor
+    codeString={`import { Flex, TabGroup, Tabs } from 'dd360-ds'
+
+<Flex className="bg-gray-800 py-2">
+    <TabGroup
+        fontSize="xs"
+        indicatorColor="#3b82f6"
+        className="border-b border-gray-500"
+        childClassName="text-gray-400 py-2 hover:bg-gray-800"
+        tabWidth={106}
+        textColor="#ffffff"
+        textDisabledColor="#4b5563"
+        variant="tertiary"
+        wideLine={3}
+        >
+        <Tab label="Element First" />
+        <Tab label="Element Second" />
+        <Tab label="Element Third" />
+        <Tab label="Element Fourth" disabled />
+    </TabGroup>
+</Flex>
+
+`} />
+
+<br />
+
 <br />
 
 <br />
@@ -291,12 +342,15 @@ With the prop <TagDocs text='hidden' /> you can hide the tab
     dataTable={[
         { title: 'orientation', default: 'horizontal', types: ['vertical', 'horizontal'] },
         { title: 'wideLine', default: 3.2, types: ['number'] },
-        { title: 'variant', default: 'primary', types: ['primary', 'secondary'] },
+        { title: 'variant', default: 'primary', types: ['primary', 'secondary', 'tertiary'] },
         { title: 'value', default: 0, types: ['number'] },
         { title: 'disabledText', default: null, types: ['string'] },
         { title: 'fontSize', default: null, types: ['base', 'xs', 'sm', 'lg', 'xl'] },
         { title: 'width', default: null, types: ['number'] },
+        { title: 'tabWidth', default: null, types: ['number'] },
+        { title: 'tabMinWidth', default: null, types: ['number'] },
         { title: 'textColor', default: null, types: ['string'] },
+        { title: 'textDisabledColor', default: '#D1D5DB', types: ['string'] },
         { title: 'indicatorColor', default: null, types: ['string'] },
         { title: 'className', default: null, types: ['string'] },
         { title: 'childClassName', default: null, types: ['string'] },
diff --git a/package-lock.json b/package-lock.json
index 9e6eade..cf0fed2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@algolia/autocomplete-core": "^1.8.3",
         "@docsearch/react": "^3.5.1",
         "@vercel/analytics": "^1.0.1",
-        "dd360-ds": "6.20.1",
+        "dd360-ds": "https://pkg.csb.dev/dd3tech/bui/commit/519a144f/dd360-ds",
         "dd360-utils": "18.1.0",
         "gray-matter": "^4.0.3",
         "i18next": "^22.4.9",
@@ -1525,9 +1525,10 @@
       "dev": true
     },
     "node_modules/dd360-ds": {
-      "version": "6.20.1",
-      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.20.1.tgz",
-      "integrity": "sha512-1UUu9wKHao7KZhPEc275+A80PVZ7g9Cgcm8+SGDMtSYMyY96L2fjnZGRZou/5Q3P+ODsksXnQf2TEAG1ZFh1XQ==",
+      "version": "6.22.1",
+      "resolved": "https://pkg.csb.dev/dd3tech/bui/commit/519a144f/dd360-ds",
+      "integrity": "sha512-ZtCM5qOhY4A4LoZ1TV2sGbFp1XEzlOT9xPv9ffbE3DUM6WhkfZpipResY4L3/ViHiKyBZjxZ4Ci/6SAb9hs4dA==",
+      "license": "MIT",
       "dependencies": {
         "@heroicons/react": "^1.0.5",
         "@popperjs/core": "2.11.7",
@@ -8005,9 +8006,8 @@
       "dev": true
     },
     "dd360-ds": {
-      "version": "6.20.1",
-      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.20.1.tgz",
-      "integrity": "sha512-1UUu9wKHao7KZhPEc275+A80PVZ7g9Cgcm8+SGDMtSYMyY96L2fjnZGRZou/5Q3P+ODsksXnQf2TEAG1ZFh1XQ==",
+      "version": "https://pkg.csb.dev/dd3tech/bui/commit/519a144f/dd360-ds",
+      "integrity": "sha512-ZtCM5qOhY4A4LoZ1TV2sGbFp1XEzlOT9xPv9ffbE3DUM6WhkfZpipResY4L3/ViHiKyBZjxZ4Ci/6SAb9hs4dA==",
       "requires": {
         "@heroicons/react": "^1.0.5",
         "@popperjs/core": "2.11.7",
diff --git a/package.json b/package.json
index c6cb680..292dc76 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "@algolia/autocomplete-core": "^1.8.3",
     "@docsearch/react": "^3.5.1",
     "@vercel/analytics": "^1.0.1",
-    "dd360-ds": "6.20.1",
+    "dd360-ds": "https://pkg.csb.dev/dd3tech/bui/commit/519a144f/dd360-ds",
     "dd360-utils": "18.1.0",
     "gray-matter": "^4.0.3",
     "i18next": "^22.4.9",
diff --git a/src/modules/docs/navigation/TabsCustom.tsx b/src/modules/docs/navigation/TabsCustom.tsx
index 7bc96f7..054e464 100644
--- a/src/modules/docs/navigation/TabsCustom.tsx
+++ b/src/modules/docs/navigation/TabsCustom.tsx
@@ -2,7 +2,9 @@ import { Tab, TabGroup } from 'dd360-ds'
 import { useState } from 'react'
 
 const TabsCustom = ({ option }: { option: string }) => {
-  const [variant, setVariant] = useState<'primary' | 'secondary'>('primary')
+  const [variant, setVariant] = useState<'primary' | 'secondary' | 'tertiary'>(
+    'primary'
+  )
   const [orientation, setOrientation] = useState<'vertical' | 'horizontal'>(
     'horizontal'
   )
@@ -31,7 +33,7 @@ const TabsCustom = ({ option }: { option: string }) => {
               checked={variant === 'primary'}
               className="cursor-pointer"
               name="variant"
-              onClick={() => setVariant('primary')}
+              onChange={() => setVariant('primary')}
               type="radio"
             />
             <label>Primary</label>
@@ -39,10 +41,18 @@ const TabsCustom = ({ option }: { option: string }) => {
               checked={variant === 'secondary'}
               className="cursor-pointer"
               name="variant"
-              onClick={() => setVariant('secondary')}
+              onChange={() => setVariant('secondary')}
               type="radio"
             />
             <label>Secondary</label>
+            <input
+              checked={variant === 'tertiary'}
+              className="cursor-pointer"
+              name="variant"
+              onChange={() => setVariant('tertiary')}
+              type="radio"
+            />
+            <label>Tertiary</label>
           </>
         )}
 
@@ -52,7 +62,7 @@ const TabsCustom = ({ option }: { option: string }) => {
               checked={orientation === 'horizontal'}
               className="cursor-pointer"
               name="orientation"
-              onClick={() => setOrientation('horizontal')}
+              onChange={() => setOrientation('horizontal')}
               type="radio"
             />
             <label>Horizontal</label>
@@ -60,7 +70,7 @@ const TabsCustom = ({ option }: { option: string }) => {
               checked={orientation === 'vertical'}
               className="cursor-pointer"
               name="orientation"
-              onClick={() => setOrientation('vertical')}
+              onChange={() => setOrientation('vertical')}
               type="radio"
             />
             <label>Vertical</label>
@@ -73,7 +83,7 @@ const TabsCustom = ({ option }: { option: string }) => {
               checked={fontSize === 'xs'}
               className="cursor-pointer"
               name="size"
-              onClick={() => setFontSize('xs')}
+              onChange={() => setFontSize('xs')}
               type="radio"
             />
             <label>xs</label>
@@ -81,7 +91,7 @@ const TabsCustom = ({ option }: { option: string }) => {
               checked={fontSize === 'sm'}
               className="cursor-pointer"
               name="size"
-              onClick={() => setFontSize('sm')}
+              onChange={() => setFontSize('sm')}
               type="radio"
             />
             <label>sm</label>
@@ -89,7 +99,7 @@ const TabsCustom = ({ option }: { option: string }) => {
               checked={fontSize === 'base'}
               className="cursor-pointer"
               name="size"
-              onClick={() => setFontSize('base')}
+              onChange={() => setFontSize('base')}
               type="radio"
             />
             <label>base</label>
@@ -97,7 +107,7 @@ const TabsCustom = ({ option }: { option: string }) => {
               checked={fontSize === 'lg'}
               className="cursor-pointer"
               name="size"
-              onClick={() => setFontSize('lg')}
+              onChange={() => setFontSize('lg')}
               type="radio"
             />
             <label>lg</label>
@@ -105,7 +115,7 @@ const TabsCustom = ({ option }: { option: string }) => {
               checked={fontSize === 'xl'}
               className="cursor-pointer"
               name="size"
-              onClick={() => setFontSize('xl')}
+              onChange={() => setFontSize('xl')}
               type="radio"
             />
             <label>xl</label>