diff --git a/src/components/TabItem/RTabItem.vue b/src/components/TabItem/RTabItem.vue
index 267e26a..8fda458 100644
--- a/src/components/TabItem/RTabItem.vue
+++ b/src/components/TabItem/RTabItem.vue
@@ -84,6 +84,15 @@ export interface IProps {
    * <TabItem block />
    */
   block?: boolean;
+
+  /**
+   * Color of the tab item
+   * @type string
+   * @default ''
+   * @example
+   * <TabItem color="" />
+   */
+  color?: string;
 }
 const props = withDefaults(defineProps<IProps>(), {
   label: '',
@@ -107,6 +116,12 @@ const classes = computed(() => {
   };
 });
 
+const style = computed(() => {
+  return {
+    color: props.color,
+  };
+});
+
 /**
  * @description Fires when the tab is clicked
  * @param {id} id - The id of the tab
@@ -129,6 +144,7 @@ function handleIconClick(): void {
     :aria-disabled="props.disabled"
     :aria-selected="props.modelValue === props.id"
     :class="classes"
+    :style="style"
     :disabled="props.disabled"
     @click.stop="handleTab(props.id)"
   >
diff --git a/src/components/TabItem/tab-item.css b/src/components/TabItem/tab-item.css
index 245ceb1..ccb8e2b 100644
--- a/src/components/TabItem/tab-item.css
+++ b/src/components/TabItem/tab-item.css
@@ -1,7 +1,7 @@
 @import '../../index.css';
 
 .tab-item {
-  @apply transition-all gap-2 min-w-fit py-3 px-6 bg-transparent flex justify-center items-center text-gray-500 text-sm font-medium cursor-pointer;
+  @apply transition-all gap-2 min-w-fit py-3 px-6 bg-transparent flex justify-center items-center text-[var(--neutral-500)] text-sm font-medium cursor-pointer;
 
   &:disabled {
     @apply cursor-not-allowed bg-inherit opacity-50;