diff --git a/example/src/pages/TabNavigation.tsx b/example/src/pages/TabNavigation.tsx
index aabd1c69..74c5fe04 100644
--- a/example/src/pages/TabNavigation.tsx
+++ b/example/src/pages/TabNavigation.tsx
@@ -2,18 +2,18 @@
 /* eslint-disable arrow-body-style */
 import * as React from "react";
 
-import { StyleSheet, View } from "react-native";
 import {
-  ContentWrapper,
-  TabNavigation,
-  TabItem,
-  IOColors,
   BodyMonospace,
-  H3,
+  ContentWrapper,
   H2,
+  H3,
   HSpacer,
+  IOColors,
+  TabItem,
+  TabNavigation,
   VSpacer
 } from "@pagopa/io-app-design-system";
+import { StyleSheet, View } from "react-native";
 import { ComponentViewerBox } from "../components/ComponentViewerBox";
 import { NoMarginScreen } from "../components/Screen";
 
@@ -27,7 +27,7 @@ export const TabNavigationScreen = () => {
         <VSpacer size={24} />
         <H3>Light</H3>
         <VSpacer size={16} />
-        <View style={[styles.default, { borderRadius: 16, padding: 16 }]}>
+        <View>
           <ComponentViewerBox name="Light">
             <View style={{ flexDirection: "row" }}>
               <TabItem
@@ -40,7 +40,6 @@ export const TabNavigationScreen = () => {
                 label="Label tab"
                 accessibilityLabel="Label tab"
                 icon={"starEmpty"}
-                iconSelected={"starFilled"}
                 onPress={handlePress}
               />
             </View>
@@ -59,7 +58,6 @@ export const TabNavigationScreen = () => {
                 label="Label tab"
                 accessibilityLabel="Label tab"
                 icon={"starEmpty"}
-                iconSelected={"starFilled"}
                 selected={true}
                 onPress={handlePress}
               />
@@ -80,7 +78,6 @@ export const TabNavigationScreen = () => {
                 accessibilityLabel="Label tab"
                 disabled
                 icon={"starEmpty"}
-                iconSelected={"starFilled"}
                 onPress={handlePress}
               />
             </View>
@@ -103,7 +100,6 @@ export const TabNavigationScreen = () => {
                 label="Label tab"
                 accessibilityLabel="Label tab"
                 icon={"starEmpty"}
-                iconSelected={"starFilled"}
                 color="dark"
                 onPress={handlePress}
               />
@@ -124,7 +120,6 @@ export const TabNavigationScreen = () => {
                 label="Label tab"
                 accessibilityLabel="Label tab"
                 icon={"starEmpty"}
-                iconSelected={"starFilled"}
                 color="dark"
                 selected={true}
                 onPress={handlePress}
@@ -145,7 +140,6 @@ export const TabNavigationScreen = () => {
                 label="Label tab"
                 accessibilityLabel="Label tab"
                 icon={"starEmpty"}
-                iconSelected={"starFilled"}
                 color="dark"
                 disabled={true}
                 onPress={handlePress}
@@ -161,7 +155,7 @@ export const TabNavigationScreen = () => {
         <H3>Light</H3>
         <VSpacer size={16} />
       </ContentWrapper>
-      <View style={[styles.default, { paddingVertical: 24 }]}>
+      <View>
         <TabNavigation>
           <TabItem label="Label tab" accessibilityLabel="Label tab" />
           <TabItem label="Label tab" accessibilityLabel="Label tab" />
@@ -212,7 +206,7 @@ export const TabNavigationScreen = () => {
       </View>
 
       <ContentWrapper>
-        <VSpacer size={24} />
+        <VSpacer size={32} />
         <H3>Dark</H3>
         <VSpacer size={16} />
       </ContentWrapper>
@@ -238,31 +232,26 @@ export const TabNavigationScreen = () => {
             label="Label tab"
             accessibilityLabel="Label tab"
             icon="starEmpty"
-            iconSelected="starFilled"
           />
           <TabItem
             label="Label tab"
             accessibilityLabel="Label tab"
             icon="starEmpty"
-            iconSelected="starFilled"
           />
           <TabItem
             label="Label tab"
             accessibilityLabel="Label tab"
             icon="starEmpty"
-            iconSelected="starFilled"
           />
           <TabItem
             label="Label tab"
             accessibilityLabel="Label tab"
             icon="starEmpty"
-            iconSelected="starFilled"
           />
           <TabItem
             label="Label tab"
             accessibilityLabel="Label tab"
             icon="starEmpty"
-            iconSelected="starFilled"
           />
         </TabNavigation>
       </View>
@@ -273,7 +262,7 @@ export const TabNavigationScreen = () => {
         <VSpacer size={16} />
       </ContentWrapper>
 
-      <View style={[styles.default, { paddingVertical: 24 }]}>
+      <View>
         <ContentWrapper>
           <BodyMonospace>{`center (default)`}</BodyMonospace>
         </ContentWrapper>
@@ -328,14 +317,12 @@ export const TabNavigationScreen = () => {
           <TabItem label="Label" accessibilityLabel="Label" />
         </TabNavigation>
       </View>
+      <VSpacer size={40} />
     </NoMarginScreen>
   );
 };
 
 const styles = StyleSheet.create({
-  default: {
-    backgroundColor: IOColors["blueIO-100"]
-  },
   dark: {
     backgroundColor: IOColors["blueIO-850"]
   }
diff --git a/src/components/tabs/TabItem.tsx b/src/components/tabs/TabItem.tsx
index f1fe5548..d038f4b8 100644
--- a/src/components/tabs/TabItem.tsx
+++ b/src/components/tabs/TabItem.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
 import Animated, {
   Extrapolate,
@@ -9,7 +9,13 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
-import { IOColors, IOScaleValues, IOSpringValues, hexToRgba } from "../../core";
+import {
+  IOColors,
+  IOScaleValues,
+  IOSpringValues,
+  hexToRgba,
+  useIOExperimentalDesign
+} from "../../core";
 import { useSpringPressProgressValue } from "../../utils/hooks/useSpringPressProgressValue";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
@@ -35,6 +41,11 @@ export type TabItem = WithTestID<{
 }>;
 
 type ColorStates = {
+  border: {
+    default: string;
+    selected: string;
+    disabled: string;
+  };
   background: {
     default: string;
     selected: string;
@@ -49,18 +60,68 @@ type ColorStates = {
 
 const mapColorStates: Record<NonNullable<TabItem["color"]>, ColorStates> = {
   light: {
+    border: {
+      default: IOColors["grey-300"],
+      selected: IOColors["blueIO-500"],
+      disabled: IOColors["grey-300"]
+    },
     background: {
-      default: "#ffffff00",
-      selected: IOColors["grey-50"],
-      pressed: IOColors["grey-50"]
+      default: IOColors.white,
+      selected: IOColors["blueIO-50"],
+      pressed: IOColors.white
     },
     foreground: {
       default: "black",
+      selected: "blueIO-500",
+      disabled: "grey-700"
+    }
+  },
+  dark: {
+    border: {
+      default: hexToRgba(IOColors.white, 0),
+      selected: IOColors.white,
+      disabled: hexToRgba(IOColors.white, 0.5)
+    },
+    background: {
+      default: hexToRgba(IOColors.white, 0),
+      selected: IOColors.white,
+      pressed: IOColors.white
+    },
+    foreground: {
+      default: "white",
       selected: "black",
+      disabled: "white"
+    }
+  }
+};
+
+const mapLegacyColorStates: Record<
+  NonNullable<TabItem["color"]>,
+  ColorStates
+> = {
+  light: {
+    border: {
+      default: IOColors["grey-300"],
+      selected: IOColors.blue,
+      disabled: hexToRgba(IOColors.white)
+    },
+    background: {
+      default: IOColors.white,
+      selected: hexToRgba(IOColors.blue, 0.1),
+      pressed: IOColors.white
+    },
+    foreground: {
+      default: "black",
+      selected: "blue",
       disabled: "grey-700"
     }
   },
   dark: {
+    border: {
+      default: hexToRgba(IOColors.white, 0),
+      selected: IOColors.white,
+      disabled: hexToRgba(IOColors.white, 0.5)
+    },
     background: {
       default: "#ffffff00",
       selected: IOColors.white,
@@ -93,12 +154,26 @@ const TabItem = ({
     onPressOut
   } = useSpringPressProgressValue(IOSpringValues.selection);
 
-  const colors = mapColorStates[color];
+  const { isExperimental } = useIOExperimentalDesign();
+  const colors = useMemo(
+    () =>
+      isExperimental ? mapColorStates[color] : mapLegacyColorStates[color],
+    [isExperimental, color]
+  );
+
+  const foregroundColor = useMemo(
+    () =>
+      colors.foreground[
+        selected ? "selected" : disabled ? "disabled" : "default"
+      ],
+    [colors.foreground, selected, disabled]
+  );
 
-  const foregroundColor =
-    colors.foreground[
-      selected ? "selected" : disabled ? "disabled" : "default"
-    ];
+  const borderColor = useMemo(
+    () =>
+      colors.border[selected ? "selected" : disabled ? "disabled" : "default"],
+    [colors.border, selected, disabled]
+  );
 
   const opaquePressedBackgroundColor = hexToRgba(
     colors.background.pressed,
@@ -130,6 +205,12 @@ const TabItem = ({
       [opaquePressedBackgroundColor, colors.background.selected]
     );
 
+    const selectedBorderColor = interpolateColor(
+      progressSelected.value,
+      [0, 1],
+      [colors.border.default, colors.border.selected]
+    );
+
     // Scale down button slightly when pressed
     const scale = interpolate(
       progressPressed.value,
@@ -142,6 +223,7 @@ const TabItem = ({
       backgroundColor: selected
         ? selectedBackgroundColor
         : pressedBackgroundColor,
+      borderColor: selected ? selectedBorderColor : borderColor,
       transform: [{ scale }]
     };
   }, [progressPressed, progressSelected, selected]);
@@ -186,6 +268,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     paddingHorizontal: 16,
     paddingVertical: 8,
+    borderWidth: 1,
     borderRadius: 64,
     borderCurve: "continuous",
     justifyContent: "center",