diff --git a/examples/react-template/screens/Form.tsx b/examples/react-template/screens/Form.tsx
deleted file mode 100644
index c3a83f06..00000000
--- a/examples/react-template/screens/Form.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-import {
-  AutoLayout,
-  IconName,
-  Input,
-  Section,
-  TitleLevels,
-} from "@trilogy-ds/react/components";
-import React, { useEffect } from "react";
-import {
-  Divider,
-  InputStatus,
-  InputType,
-  Link,
-  Title,
-} from "@trilogy-ds/react";
-
-export const FormScreen = (): JSX.Element => {
-  const [valueTextInput, setValueTextInput] = React.useState<
-    string | undefined
-  >();
-  const [leavingDate, setLeavingDate] = React.useState("");
-
-  useEffect(() => {
-    setLeavingDate(leavingDate);
-    console.log("leavingDate : ", leavingDate);
-  }, [leavingDate]);
-
-  function formatMontant(value: string) {
-    const tmpValue = value.replace(",", ".").replace(/[^0-9.]/g, "");
-    const digits = tmpValue.split(".").filter((_, i) => i <= 1);
-    let rightDigits = digits[1] || "";
-    if (rightDigits.length > 2) rightDigits = rightDigits.substring(0, 2);
-    return digits.join(".");
-  }
-
-  return (
-    <Section>
-      <Input
-        type={InputType.TEXT}
-        placeholder="Placeholder dynamic value"
-        name="text"
-        onChange={(e) => console.log(e)}
-        accessibilityLabel={"input base"}
-      />
-      <Input
-        type={InputType.DATE}
-        placeholder="Date of departure"
-        name="leavingDate"
-        value={leavingDate}
-        onChange={(e) => setLeavingDate(e.inputValue)}
-        accessibilityLabel={"input base"}
-      />
-
-      <Input
-        minLength={10}
-        maxLength={12}
-        onKeyPress={() => console.log("key")}
-        hovered
-        hasIcon
-        defaultValue="Input, without placeholder (and without padding at the top)"
-        help="Don't show top padding when there is no placeholder"
-        type={InputType.TEXT}
-        onIconClick={() => {
-          window.alert("wow ! How did you do ?");
-        }}
-      />
-
-      <Input
-        hovered
-        hasIcon
-        defaultValue="Input, without placeholder and search"
-        help="Input, without placeholder (and without padding at the top)"
-        type={InputType.TEXT}
-        onIconClick={() => {
-          window.alert("lol");
-        }}
-        search
-      />
-
-      <Input
-        hovered
-        hasIcon
-        defaultValue="Input, with placeholder, and with search"
-        help="this is my help message"
-        type={InputType.TEXT}
-        onIconClick={() => {
-          window.alert("lol");
-        }}
-        search
-        customIcon={IconName.EYE}
-        placeholder="Placeholder with active search"
-      />
-
-      <Input
-        hovered
-        hasIcon
-        defaultValue="Input, with search AND customIcon"
-        help="The customIcon takes precedence over the search display so as not to display 2 icons one above the other"
-        type={InputType.TEXT}
-        onIconClick={() => {
-          window.alert("lol");
-        }}
-        search
-        customIcon={IconName.EYE}
-        placeholder="Placeholder with active search"
-      />
-
-      <Input
-        hovered
-        hasIcon
-        defaultValue="My default input value"
-        help="this is my help message"
-        type={InputType.TEXT}
-        status={InputStatus.SUCCESS}
-        customIcon={IconName.EYE}
-        onIconClick={() => {
-          window.alert("lol");
-        }}
-        placeholder="This is my placeholder"
-      />
-
-      <Input
-        hovered
-        hasIcon
-        defaultValue="My default input value"
-        help="this is my help message"
-        type={InputType.TEXT}
-        patternValidator={new RegExp(/^hello/, "i")}
-        customIcon={IconName.EYE}
-        onIconClick={() => {
-          window.alert("lol");
-        }}
-        placeholder="Pattern start by hello"
-      />
-
-      <Input
-        hovered
-        hasIcon
-        defaultValue="My default input value"
-        help="this is my help message"
-        type={InputType.TEXT}
-        customValidator={(value) =>
-          value === "machin" ? InputStatus.SUCCESS : InputStatus.WARNING
-        }
-        customIcon={IconName.EYE}
-        onIconClick={() => {
-          window.alert("lol");
-        }}
-        placeholder='Custom validator value="machin"'
-      />
-
-      <Input
-        hovered
-        hasIcon
-        forceControl
-        defaultValue="12"
-        value={valueTextInput}
-        status={InputStatus.SUCCESS}
-        customIcon={IconName.EYE}
-        onIconClick={() => {
-          window.alert("lol");
-        }}
-        placeholder="Forced control formatted normal input"
-        onChange={(e) => {
-          setValueTextInput(formatMontant(e.inputValue));
-        }}
-      />
-
-      <AutoLayout>
-        <Title level={TitleLevels.THREE}>Champs</Title>
-        <Divider />
-
-        <Input
-          hovered
-          hasIcon
-          forceControl
-          defaultValue="Input Success"
-          value={valueTextInput}
-          status={InputStatus.SUCCESS}
-          customIcon={IconName.CHECK_CIRCLE}
-          onIconClick={() => {
-            window.alert("lol");
-          }}
-          placeholder="Placeholder in success input type"
-          onChange={(e) => {
-            setValueTextInput(formatMontant(e.inputValue));
-          }}
-        />
-
-        <Input type={InputType.TEXT} placeholder="Input type texte" />
-        <Input type={InputType.NUMBER} placeholder="Input type number" />
-        <Input type={InputType.SEARCH} placeholder="Input type search" />
-        <Input type={InputType.PASSWORD} placeholder="Input type password" />
-        <Input type={InputType.DATE} placeholder="Input type date" />
-        <Input type={InputType.EMAIL} placeholder="Input type mail" />
-
-        <Input
-          hasIcon
-          help="Ce mot de passe ne respecte pas les règles de sécurité"
-          type={InputType.TEXT}
-          status={InputStatus.ERROR}
-          placeholder="This is an error message"
-        />
-
-        <Input
-          hasIcon
-          search
-          help="this is my help message"
-          type={InputType.TEXT}
-          placeholder="This is my placeholder"
-        />
-
-        <Input
-          hasIcon
-          help="this is my help message"
-          type={InputType.TEXT}
-          placeholder="This is my placeholder"
-          customIconLeft={IconName.INFOS_CIRCLE}
-          customIconRight={IconName.SEARCH}
-        />
-
-        <Input
-          type="password"
-          hasIcon
-          customIconLeft={IconName.INFOS_CIRCLE}
-          securityGauge
-          help={<Link>1ère connexion / Mot de passe oublié ?</Link>}
-          placeholder="this is my placeholder"
-          minLength={8}
-          maxLength={15}
-          validationRules={{
-            lowercase: true,
-            uppercase: true,
-            number: true,
-            specialChars: true,
-            length: { max: 4, min: 2 },
-          }}
-        />
-
-        <Input
-          type="password"
-          help="test"
-          placeholder="this is my placeholder"
-        />
-        <Input
-          defaultValue="My 2nd default input value"
-          help="this is my help message"
-          type={InputType.TEXT}
-          status={InputStatus.WARNING}
-          customIcon={IconName.EYE}
-          placeholder="This is my placeholder"
-        />
-      </AutoLayout>
-    </Section>
-  );
-};
diff --git a/examples/react-template/screens/Tab.tsx b/examples/react-template/screens/Tab.tsx
index 8bd56dd5..2756b5ee 100644
--- a/examples/react-template/screens/Tab.tsx
+++ b/examples/react-template/screens/Tab.tsx
@@ -42,9 +42,34 @@ export const TabScreen = (): JSX.Element => {
         </TabsItem>
       </Tabs>
 
-      <Tabs activeIndex={activeIndexEventTab} inverted>
+      <Tabs activeIndex={activeIndexEventTab} centered>
         <TabsItem
           disabled
+          iconName={IconName.BELL}
+          active={activeIndexEventTab === 0}
+          onClick={() => setActivateIndexEventTab(0)}
+        >
+          Centered
+        </TabsItem>
+        <TabsItem
+          iconName={IconName.BELL}
+          active={activeIndexEventTab === 1}
+          onClick={() => setActivateIndexEventTab(1)}
+        >
+          Two
+        </TabsItem>
+        <TabsItem
+          iconName={IconName.BELL}
+          active={activeIndexEventTab === 2}
+          onClick={() => setActivateIndexEventTab(2)}
+        >
+          Three
+        </TabsItem>
+      </Tabs>
+
+      <Tabs activeIndex={activeIndexEventTab} inverted>
+        <TabsItem
+
           iconName={IconName.BELL}
           active={activeIndexEventTab === 0}
           onClick={() => setActivateIndexEventTab(0)}
@@ -52,6 +77,7 @@ export const TabScreen = (): JSX.Element => {
           One
         </TabsItem>
         <TabsItem
+          disabled
           iconName={IconName.EYE_SLASH}
           active={activeIndexEventTab === 1}
           onClick={() => setActivateIndexEventTab(1)}
diff --git a/examples/react-template/screens/index.ts b/examples/react-template/screens/index.ts
index 3aa5fe0d..f06c8b51 100644
--- a/examples/react-template/screens/index.ts
+++ b/examples/react-template/screens/index.ts
@@ -15,7 +15,6 @@ export * from "./CountDown";
 export * from "./Divider";
 export * from "./Dropdown";
 export * from "./Fab";
-export * from "./Form";
 export * from "./Hero";
 export * from "./Image";
 export * from "./Icon";
diff --git a/package-lock.json b/package-lock.json
index fe4729d8..fbf7533f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42600,7 +42600,7 @@
     },
     "packages/assets": {
       "name": "@trilogy-ds/assets",
-      "version": "0.0.1-beta.12",
+      "version": "0.0.1-beta.13",
       "license": "ISC",
       "devDependencies": {
         "@types/node": "^20.11.26",
@@ -42757,7 +42757,7 @@
     },
     "packages/react": {
       "name": "@trilogy-ds/react",
-      "version": "0.0.1-beta.12",
+      "version": "0.0.1-beta.13",
       "license": "UNLICENSED",
       "dependencies": {
         "@ptomasroos/react-native-multi-slider": "^2.2.2",
@@ -42776,12 +42776,12 @@
     },
     "packages/styles": {
       "name": "@trilogy-ds/styles",
-      "version": "0.0.1-beta.12",
+      "version": "0.0.1-beta.13",
       "license": "UNLICENSED"
     },
     "packages/vanilla": {
       "name": "@trilogy-ds/vanilla",
-      "version": "0.0.1-beta.12",
+      "version": "0.0.1-beta.13",
       "license": "ISC",
       "dependencies": {
         "eslint": "4.19.1",
diff --git a/packages/assets/package.json b/packages/assets/package.json
index 13ef4f5d..93f093e5 100644
--- a/packages/assets/package.json
+++ b/packages/assets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/assets",
-  "version": "0.0.1-beta.12",
+  "version": "0.0.1-beta.13",
   "description": "Trilogy assets include all Open Source Fonts & Icons",
   "author": "Bouygues Telecom",
   "type": "module",
diff --git a/packages/react/components/range/Range.tsx b/packages/react/components/range/Range.tsx
index 5da8978f..b633654e 100644
--- a/packages/react/components/range/Range.tsx
+++ b/packages/react/components/range/Range.tsx
@@ -53,7 +53,7 @@ const Range = ({
     if (refTrack.current) {
       const track = refTrack.current as HTMLElement
       track.style.background = `linear-gradient(to right, ${getColorStyle(
-        TrilogyColor.NEUTRAL_DARK,
+        TrilogyColor.NEUTRAL_LIGHT,
         1
       )} ${(cursorMin / max) * 100}% , ${getColorStyle(TrilogyColor.MAIN, 1)} ${
         (cursorMin / max) * 100
diff --git a/packages/react/components/tabs/Tabs.native.tsx b/packages/react/components/tabs/Tabs.native.tsx
index 5979fe6d..939e1c87 100644
--- a/packages/react/components/tabs/Tabs.native.tsx
+++ b/packages/react/components/tabs/Tabs.native.tsx
@@ -13,8 +13,9 @@ import { ComponentName } from '../enumsComponentsName'
  * @param activeIndex {number} default active tab index
  * @param disabled {boolean} Disabled tabs
  * @param inverted {boolean} dark mode
+ * @param centered {boolean} Is centered
  */
-const Tabs = ({ children, onClick, activeIndex, disabled, inverted, ...others }: TabsProps): JSX.Element => {
+const Tabs = ({ children, onClick, activeIndex, disabled, centered, inverted, ...others }: TabsProps): JSX.Element => {
   const [activateIndex, setActivateIndex] = useState(activeIndex)
   const [isIcons, setIsIcons] = React.useState(false)
 
@@ -41,13 +42,13 @@ const Tabs = ({ children, onClick, activeIndex, disabled, inverted, ...others }:
     tabs: {
       height: isIcons ? 64 : 48,
       flexDirection: 'row',
-      backgroundColor: inverted ? getColorStyle(TrilogyColor.MAIN) : getColorStyle(TrilogyColor.WHITE),
-      overflow: 'visible',
+      backgroundColor: inverted ? getColorStyle(TrilogyColor.MAIN) : getColorStyle(TrilogyColor.WHITE)
     },
   })
 
   return (
-    <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.tabs} {...others}>
+    <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.tabs} {...others}
+    contentContainerStyle={centered && { justifyContent: "center", flexGrow: 1 }}>
       {children &&
         Array.isArray(children) &&
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/react/components/tabs/item/TabsItem.native.tsx b/packages/react/components/tabs/item/TabsItem.native.tsx
index ea414cb4..f11145cc 100644
--- a/packages/react/components/tabs/item/TabsItem.native.tsx
+++ b/packages/react/components/tabs/item/TabsItem.native.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import { StyleSheet, TouchableOpacity, View } from "react-native"
+import { StyleSheet, TouchableOpacity, View, Dimensions } from "react-native"
 import { TabsItemProps } from "./TabsItemProps"
 import { getColorStyle, TrilogyColor } from "../../../objects/facets/Color"
 import { TypographyBold } from "../../../objects"
@@ -28,42 +28,43 @@ const TabsItem = ({
   const [activeItem, setActiveItem] = useState<boolean>(active || false)
   const [isPressIn, setInPressIn] = useState<boolean>(false)
 
+
   const getIconColor = React.useMemo(() => {
     if (inverted) {
-      if (disabled) return TrilogyColor.DISABLED
+      if (disabled) return TrilogyColor.NEUTRAL_LIGHT
       return TrilogyColor.WHITE
     }
     if (disabled) return TrilogyColor.DISABLED
     if (active) return TrilogyColor.MAIN
-    return TrilogyColor.MAIN
+  return TrilogyColor.MAIN
+}, [inverted, disabled, active])
+
+  const getBorderColor = React.useMemo(() => {
+    if (disabled)
+      return 'transparent'
+    if (inverted) {
+      if (active) return getColorStyle(TrilogyColor.WHITE)
+      return getColorStyle(TrilogyColor.FONT, 1)
+    }
+    if (active) return getColorStyle(TrilogyColor.MAIN)
+    return getColorStyle(TrilogyColor.FONT, 1)
   }, [inverted, disabled, active])
 
   const styles = StyleSheet.create({
     tabsItem: {
-      marginRight: 8,
       alignItems: "center",
       justifyContent: "center",
-      ...(tabIndex === 0 && { marginLeft: 24 }),
-      padding: 8,
+      paddingVertical: 6,
+      paddingHorizontal: 14,
       position: "relative",
+      borderBottomWidth: 2,
+      height: iconName ? 60 : 44,
+      borderBottomColor: getBorderColor,
     },
     text: {
-      color:
-        isPressIn && !inverted && !disabled
-          ? getColorStyle(TrilogyColor.MAIN)
-          : getColorStyle(getIconColor),
+      color: getColorStyle(getIconColor),
       textAlign: "center",
     },
-    activeBar: {
-      height: 2,
-      backgroundColor: inverted
-        ? getColorStyle(TrilogyColor.WHITE)
-        : getColorStyle(TrilogyColor.MAIN),
-      width: "100%",
-      position: "absolute",
-      bottom: 4,
-      borderRadius: 2,
-    },
   })
 
   useEffect(() => {
@@ -87,7 +88,7 @@ const TabsItem = ({
       {...others}
     >
       {iconName && (
-        <View>
+        <View >
           <Icon color={getIconColor} size='small' name={iconName} />
         </View>
       )}
@@ -108,7 +109,6 @@ const TabsItem = ({
         ) : (
           children
         ))}
-      {active && !disabled && <View style={styles.activeBar}></View>}
     </TouchableOpacity>
   )
 }
diff --git a/packages/react/package.json b/packages/react/package.json
index ab11e1b5..9fde5d3c 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/react",
-  "version": "0.0.1-beta.12",
+  "version": "0.0.1-beta.13",
   "type": "module",
   "author": "Bouygues Telecom",
   "files": [
diff --git a/packages/react/version.ts b/packages/react/version.ts
index 327b6a5e..f53bdd70 100644
--- a/packages/react/version.ts
+++ b/packages/react/version.ts
@@ -1 +1 @@
-export const version = "0.0.1-beta.12"
+export const version = "0.0.1-beta.13"
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 2a9c0e65..0ad03b87 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "0.0.1-beta.12",
+  "version": "0.0.1-beta.13",
   "author": "Bouygues Telecom",
   "license": "UNLICENSED",
   "files": [
diff --git a/packages/vanilla/package.json b/packages/vanilla/package.json
index 8526bfb5..1a81a886 100644
--- a/packages/vanilla/package.json
+++ b/packages/vanilla/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/vanilla",
-  "version": "0.0.1-beta.12",
+  "version": "0.0.1-beta.13",
   "author": "Bouygues Telecom",
   "main": "lib/trilogy-ds-vanilla.js",
   "scripts": {