diff --git a/lib/components/Tabs/TabTitle.tsx b/lib/components/Tabs/TabTitle.tsx
index f630590d..34e62772 100644
--- a/lib/components/Tabs/TabTitle.tsx
+++ b/lib/components/Tabs/TabTitle.tsx
@@ -10,13 +10,13 @@ export type TabTitleProps = {
     title: string;
     className?: string;
     variant: 'primary' | 'secondary';
-    onClickHandler?: () => void;
+    onChange?: () => void;
 };
 
-const TabTitle = ({ icon, activeTab, isActive, setSelectedTab, title,className,variant, onClickHandler }: TabTitleProps) => {
+const TabTitle = ({ icon, activeTab, isActive, setSelectedTab, title,className,variant, onChange }: TabTitleProps) => {
     const handleOnClick = useCallback((title: string) => {
         setSelectedTab(title);
-        onClickHandler?.();
+        onChange?.();
     }, [setSelectedTab, activeTab]);
 
     const classNameVariants: Record<TabTitleProps['variant'], string> = {
diff --git a/lib/components/Tabs/Tabs.tsx b/lib/components/Tabs/Tabs.tsx
index 2d677e18..34d1c7fc 100644
--- a/lib/components/Tabs/Tabs.tsx
+++ b/lib/components/Tabs/Tabs.tsx
@@ -9,16 +9,16 @@ type TabsProps = {
     wrapperClassName?: string;
     className?: string;
     variant?: 'primary' | 'secondary';
-    onClickHandler?: () => void;
+    onChange?: (index: number) => void;
 };
 
-const Tabs = ({ children, activeTab, wrapperClassName, className, variant = 'primary', onClickHandler }: TabsProps): JSX.Element => {
+const Tabs = ({ children, activeTab, wrapperClassName, className, variant = 'primary', onChange }: TabsProps): JSX.Element => {
     const [selectedTab, setSelectedTab] = useState(activeTab || children[0].props.title);
 
     return (
         <div className={wrapperClassName}>
             <div className={clsx(`derivs-${variant + '-'}tabs`, className)}>
-                {children.map((item) => {
+                {children.map((item, index) => {
                     return (
                         <TabTitle
                             icon={item.props.icon}
@@ -28,8 +28,9 @@ const Tabs = ({ children, activeTab, wrapperClassName, className, variant = 'pri
                             setSelectedTab={setSelectedTab}
                             title={item.props.title}
                             variant={variant}
-                            onClickHandler={onClickHandler}
+                            onChange={()=>onChange?.(index)}
                             className={item.props.className}
+
                         />
                     )
                 })}
diff --git a/src/main.tsx b/src/main.tsx
index 0dd2403a..cecebace 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -14,7 +14,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
       <Button> button </Button>
       <Text color='blue' size='lg'>this is a Text</Text>
 
-      <Tabs variant='primary' activeTab='primary tab 2' >
+      <Tabs variant='primary' activeTab='primary tab 2' onChange={(index)=>console.log(index)}  >
         <Tab title='primary tab 1'>
           test data for tab 1
         </Tab>