diff --git a/src/components/ui/Tabs/shards/TabContent.tsx b/src/components/ui/Tabs/shards/TabContent.tsx
index 14ae04eb..98d95a44 100644
--- a/src/components/ui/Tabs/shards/TabContent.tsx
+++ b/src/components/ui/Tabs/shards/TabContent.tsx
@@ -13,7 +13,7 @@ export type TabContentProps ={
     customRootClass?: string;
 }
 
-const TabContent = ({ className, customRootClass}: TabContentProps) => {
+const TabContent = ({className, customRootClass}: TabContentProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
     const {tabs, activeTab, setActiveTab} = useContext(TabsRootContext);
diff --git a/src/components/ui/Tabs/shards/TabRoot.tsx b/src/components/ui/Tabs/shards/TabRoot.tsx
index 22c72b1a..f9128a29 100644
--- a/src/components/ui/Tabs/shards/TabRoot.tsx
+++ b/src/components/ui/Tabs/shards/TabRoot.tsx
@@ -15,31 +15,32 @@ const TabRoot = ({children, defaultTab='', customRootClass, tabs=[], className,
 
     const [activeTab, setActiveTab] = useState(defaultTab || tabs[0].value || '');
 
-    const nextTab = ()=>{
-        const currentIndex = tabs.findIndex(tab => tab.value === activeTab);
+    const nextTab = () => {
+        const currentIndex = tabs.findIndex((tab) => tab.value === activeTab);
         const nextIndex = currentIndex + 1;
         if (nextIndex < tabs.length) {
             setActiveTab(tabs[nextIndex].value);
         }
-    }
+    };
 
-    const previousTab = ()=>{
-        const currentIndex = tabs.findIndex(tab => tab.value === activeTab);
+    const previousTab = () => {
+        const currentIndex = tabs.findIndex((tab) => tab.value === activeTab);
         const previousIndex = currentIndex - 1;
         if (previousIndex >= 0) {
             setActiveTab(tabs[previousIndex].value);
         }
-    }
+    };
 
 
     return (
-        <TabsRootContext.Provider value={{
-            activeTab,
-            setActiveTab,
-            nextTab,
-            previousTab,
-            tabs
-        }}>
+        <TabsRootContext.Provider
+            value={{
+                activeTab,
+                setActiveTab,
+                nextTab,
+                previousTab,
+                tabs,
+            }}>
             <div className={`${rootClass} ${className}`} data-accent-color={color} {...props} >
                 {children}
             </div>
diff --git a/src/components/ui/Tabs/shards/TabTrigger.tsx b/src/components/ui/Tabs/shards/TabTrigger.tsx
index a65756a9..e76cbfdc 100644
--- a/src/components/ui/Tabs/shards/TabTrigger.tsx
+++ b/src/components/ui/Tabs/shards/TabTrigger.tsx
@@ -19,7 +19,6 @@ export type TabTriggerProps = {
 }
 
 const TabTrigger = ({tab, setActiveTab, activeTab, className, customRootClass, index, ...props}: TabTriggerProps) => {
-
     // use context
     const {tabs, previousTab, nextTab} = useContext(TabsRootContext);
     console.log(tabs);
@@ -35,22 +34,22 @@ const TabTrigger = ({tab, setActiveTab, activeTab, className, customRootClass, i
 
     const handleKeyDownEvent = (e: React.KeyboardEvent) => {
         console.log(e.key);
-        if(e.key=="ArrowLeft"){
+        if (e.key=='ArrowLeft') {
             previousTab();
         }
-        if(e.key=="ArrowRight"){
+        if (e.key=='ArrowRight') {
             nextTab();
         }
-    }
+    };
 
     return (
-            <button
-                    role="tab" key={index} className={`${rootClass} ${isActive?'active':''} ${className}`} {...props} onKeyDown={handleKeyDownEvent} 
-                    onClick={() => handleClick(tab)}>
-                    <span className={`${rootClass}-inner`}>
-                        {tab.label}
-                    </span>
-                </button>
+        <button
+            role="tab" key={index} className={`${rootClass} ${isActive?'active':''} ${className}`} {...props} onKeyDown={handleKeyDownEvent}
+            onClick={() => handleClick(tab)}>
+            <span className={`${rootClass}-inner`}>
+                {tab.label}
+            </span>
+        </button>
     );
 };