diff --git a/lib/components/VerticalTab/CollapsibleVerticalTabItem.tsx b/lib/components/VerticalTab/CollapsibleVerticalTabItem.tsx
new file mode 100644
index 00000000..8cd8f0fd
--- /dev/null
+++ b/lib/components/VerticalTab/CollapsibleVerticalTabItem.tsx
@@ -0,0 +1,59 @@
+
+import React, { useState } from 'react';
+import { Text } from '../Text';
+import clsx from 'clsx';
+import { VerticalTabItem, TabItem } from './VerticalTabItem';
+
+type CollapsibleVerticalTabItemProps = {
+    item: TabItem;
+    onSelectItemHandler: (title: string) => void;
+    selectedTab: string;
+    className?: string;
+    iconClassName?: string;
+}
+
+
+const ArrowIcon = ({ is_open }: { is_open: boolean }) => <svg className={clsx('vertical-tab__arrow', {
+    'vertical-tab__arrow--open': is_open,
+})} xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
+    <path d="M8.66699 9.58579L13.9599 4.29289C14.3504 3.90237 14.9836 3.90237 15.3741 4.29289C15.7646 4.68342 15.7646 5.31658 15.3741 5.70711L9.3741 11.7071C8.98358 12.0976 8.35041 12.0976 7.95989 11.7071L1.95989 5.70711C1.56936 5.31658 1.56936 4.68342 1.95989 4.29289C2.35041 3.90237 2.98357 3.90237 3.3741 4.29289L8.66699 9.58579Z" fill="#333333" />
+</svg>;
+
+export const CollapsibleVerticalTabItem = ({
+    item,
+    onSelectItemHandler,
+    selectedTab,
+    className,
+    iconClassName,
+}: CollapsibleVerticalTabItemProps) => {
+    const selectedSubItemSelected = item?.subItems?.find((subItem) => subItem.title === selectedTab)
+    const [open, setOpen] = useState(selectedSubItemSelected ? true : false);
+
+    const onClickHandler = () => {
+        const shouldCollapse = !selectedSubItemSelected;
+        if (shouldCollapse)
+            setOpen(!open);
+    }
+    return (
+        <div
+            key={item.title}
+            className={clsx('collapsible-vertical-tab')}>
+            <div className={clsx('collapsible-vertical-tab__header', {
+                'collapsible-vertical-tab__header--open': selectedSubItemSelected,
+            })}
+                onClick={() => onClickHandler()}
+            >
+                <span className={clsx('vertical-tab__icon', iconClassName)}> {item?.icon}</span>
+                <Text className='vertical-tab__label'>{item.title}</Text>
+                <ArrowIcon is_open={open} />
+            </div>
+            {open && <div className='collapsible-vertical-tab__items'>
+                {item?.subItems?.map((subItem) => {
+                    return (
+                        <VerticalTabItem className={className} selectedTab={selectedTab} key={subItem.title} tab={subItem} onClick={() => onSelectItemHandler(subItem.title)} />
+                    )
+                })}
+            </div>}
+        </div>
+    )
+}
diff --git a/lib/components/VerticalTab/VerticalTab.scss b/lib/components/VerticalTab/VerticalTab.scss
new file mode 100644
index 00000000..a4e02012
--- /dev/null
+++ b/lib/components/VerticalTab/VerticalTab.scss
@@ -0,0 +1,94 @@
+.vertical-tab__wrapper {
+    padding: 8px;
+    display: flex;
+    justify-content: center;
+    gap:25px;
+    @include mobile {
+        flex-direction: column;;
+    }
+}
+
+.vertical-tab {
+    &__items-container{
+        background: #f2f3f4;
+        flex: 1;
+        border-radius: 4px;
+        padding: 8px;
+    }
+
+    &__item {
+        display: flex;
+        padding: 10px 16px;
+        align-items: center;
+        cursor: pointer;
+        border-radius: 4px;
+
+        &:hover{
+            background-color: #e6e9e9;
+        }
+
+        &--active {
+            background-color: #fff;
+            border-left: 4px solid #ff444f;
+            padding-left: 12px;
+
+            &:hover{
+                background-color: #fff;
+            }
+        }
+
+        &--disabled {
+            & > span{
+                color: #999999;
+            }
+
+            &:hover{
+                cursor: unset;
+                background-color: inherit;
+            }
+        }
+    }
+
+    &__icon {
+        width: 16px;
+        height: 16px;
+        margin-right: 16px;
+    }
+
+    &__label {
+        flex:1;
+    }
+
+    &__panel {
+        flex: 2;
+    }
+
+    &__arrow--open{
+        transform: rotate(180deg);
+    }
+}
+
+.collapsible-vertical-tab {
+    &__header {
+        display: flex;
+        padding: 10px 16px;
+        align-items: center;
+        cursor: pointer;
+        border-radius: 4px;
+
+        &--open > :nth-child(2) {
+            font-weight: bold;
+        }
+    }
+
+    &__icon {
+        width: 16px;
+        height: 16px;
+        margin-right: 16px;
+    }
+
+    &__label {
+        flex:1;
+    }
+}
+
diff --git a/lib/components/VerticalTab/VerticalTab.tsx b/lib/components/VerticalTab/VerticalTab.tsx
new file mode 100644
index 00000000..0ed2c73b
--- /dev/null
+++ b/lib/components/VerticalTab/VerticalTab.tsx
@@ -0,0 +1,18 @@
+import React, { memo } from 'react';
+import clsx from 'clsx';
+import './VerticalTab.scss';
+
+type VerticalTabProps = {
+    className?: string;
+}
+
+export const VerticalTab = memo(({
+    className,
+    children
+}: React.PropsWithChildren<VerticalTabProps>) => {
+    return (
+        <div className={clsx('vertical-tab__wrapper', className)}>
+            {children}
+        </div>
+    );
+})
diff --git a/lib/components/VerticalTab/VerticalTabItem.tsx b/lib/components/VerticalTab/VerticalTabItem.tsx
new file mode 100644
index 00000000..96e3a74b
--- /dev/null
+++ b/lib/components/VerticalTab/VerticalTabItem.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import clsx from 'clsx';
+
+import { Text } from '../Text';
+
+export type TabItem = {
+    icon?: React.ReactNode;
+    is_disabled?: boolean;
+    panel?: React.ReactNode;
+    subItems?: {
+        is_disabled?: boolean;
+        panel: React.ReactNode;
+        title: string;
+    }[];
+    title: string;
+}
+
+type VerticalTabItemProps = {
+    tab: TabItem;
+    onClick: (title: string) => void;
+    className?: string;
+    selectedTab: string;
+}
+
+export const VerticalTabItem = ({ tab, onClick, className, selectedTab }: VerticalTabItemProps) => {
+    return (
+        <div
+            className={
+                clsx('vertical-tab__item', {
+                    'vertical-tab__item--active': tab.title === selectedTab,
+                    'vertical-tab__item--disabled': tab.is_disabled
+                }, className)
+            }
+            onClick={() => !tab.is_disabled && onClick(tab.title)}
+        >
+            {tab?.icon && (
+                <span className='vertical-tab__icon'> {tab?.icon}</span>
+            )}
+            <Text as='span' className='vertical-tab__label'>{tab.title}</Text>
+        </div>
+    )
+}
diff --git a/lib/components/VerticalTab/VerticalTabItems.tsx b/lib/components/VerticalTab/VerticalTabItems.tsx
new file mode 100644
index 00000000..b2890532
--- /dev/null
+++ b/lib/components/VerticalTab/VerticalTabItems.tsx
@@ -0,0 +1,131 @@
+import React, { memo, useEffect, useState } from 'react';
+import { CollapsibleVerticalTabItem } from './CollapsibleVerticalTabItem';
+import { VerticalTabItem, type TabItem } from './VerticalTabItem'
+import clsx from 'clsx';
+
+type VerticalTabItemsProps = {
+    activeTab: string;
+    onSelectItem?: (title: string) => void;
+    wrapperClassName?: string;
+    panelClassName?: string;
+    itemClassName?: string;
+    items: TabItem[];
+    should_have_panel?: boolean;
+}
+
+/**
+ * Component to display the vertical tab items. iit should be wrapperd inside the VerticalTab component
+ * @param {TabItem} items - tab items
+ * @param {string} panelClassName -it applies the classname to the right panel
+ * @param {string} wrapperClassName - it applies the classname to the left side menu container
+ * @param {string} itemClassName - it applies the classname to the each items whether it's sub-item or single item
+ * @param {string} activeTab - indicates the active tab. you can pass the title of the tab
+ * @param {Function} onSelectItem - callback to handle selecting each tab item
+ * @param {boolean} should_have_panel - indicates whether the panel should be displayed or not
+ * @returns {React.JSX.Element} - returns the vertical tab component
+ *
+ * @example
+ * const items = [
+ *     {
+ *      title: 'Item 1',
+ *      icon: Icon,
+ *      panel: <div>Item 1 pane</div>
+ *     },
+ *     {
+ *      title: 'Item 2',
+ *      icon: Icon,
+ *      panel: <div>Item 2 pane</div>,
+ *      subItems: [
+ *          {
+ *              title: 'Item 2.1',
+ *              panel: <div>Item 2.1 pane</div>
+ *          },
+*           {
+ *              title: 'Item 2.2',
+ *              is_disabled: true,
+ *              panel: <div>Item 2.2 pane</div>
+ *          },
+ *      ]
+ *     },
+ *     {
+ *      title: 'Item 3',
+ *      icon: Icon,
+ *      panel: <div>Item 3 pane</div>
+ *     },
+ * ]
+ *
+ * <VerticalTab className='test-1'>
+ *      <VerticalTabItems
+ *          items={items} activeTab='SubItem 2.1'
+ *          onSelectItem={
+ *              (title) => console.log('clicked on:', title)
+ *          }
+ *      />
+ * </VerticalTab>
+ */
+
+export const VerticalTabItems = memo(({
+    items,
+    panelClassName,
+    wrapperClassName,
+    itemClassName,
+    activeTab,
+    should_have_panel = true,
+    onSelectItem }: VerticalTabItemsProps) => {
+    const [selectedTab, setSelectedTab] = useState<string>(activeTab);
+    useEffect(() => {
+        if (activeTab) {
+            setSelectedTab(activeTab);
+        }
+    }, [activeTab]);
+
+    const findActiveTab = (title: string) => {
+        for (const item of items) {
+            if (item?.subItems) {
+                const foundItem = item?.subItems.find((subItem) => subItem.title === title);
+                if (foundItem) {
+                    return foundItem;
+                }
+            } else {
+                if (item.title === title) {
+                    return item;
+                }
+            }
+        }
+    }
+
+    const onSelectItemHandler = (title: string) => {
+        const new_active_tab = findActiveTab(title)?.title;
+        setSelectedTab(() => new_active_tab ?? activeTab);
+        onSelectItem?.(title);
+    }
+
+
+    return (
+        <>
+            <div className={clsx('vertical-tab__items-container', wrapperClassName)}>
+                {items.map((item) => {
+                    if (!item?.subItems) {
+                        return (
+                            <VerticalTabItem className={itemClassName} key={item.title} selectedTab={selectedTab} tab={item} onClick={() => onSelectItemHandler(item.title)} />
+                        )
+                    } else {
+                        return (
+                            <CollapsibleVerticalTabItem
+                                key={item.title}
+                                item={item}
+                                selectedTab={selectedTab}
+                                onSelectItemHandler={onSelectItemHandler}
+                                className={itemClassName}
+                            />
+                        )
+                    }
+                })}
+            </div>
+            {should_have_panel && <div className={clsx('vertical-tab__panel', panelClassName)}>
+                {findActiveTab(selectedTab)?.panel}
+            </div>}
+        </>
+    );
+})
+
diff --git a/lib/components/VerticalTab/index.ts b/lib/components/VerticalTab/index.ts
new file mode 100644
index 00000000..37fa7427
--- /dev/null
+++ b/lib/components/VerticalTab/index.ts
@@ -0,0 +1,2 @@
+export {VerticalTab} from './VerticalTab'
+export {VerticalTabItems} from './VerticalTabItems'
\ No newline at end of file
diff --git a/lib/main.ts b/lib/main.ts
index e8990c2e..0f5c3f9f 100644
--- a/lib/main.ts
+++ b/lib/main.ts
@@ -13,3 +13,4 @@ export { ToggleSwitch } from "./components/ToggleSwitch";
 export { Tooltip } from "./components/Tooltip";
 export { useDevice } from "./hooks/useDevice";
 export { useOnClickOutside } from "./hooks/useOnClickOutside";
+export { VerticalTab, VerticalTabItems } from "./components/VerticalTab";
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index 6661c4e6..21ea6698 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,31 +1,58 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { Loader } from '../dist/components/Loader';
-import { Button } from '../dist/components/Button';
-import { Text } from '../dist/components/Text';
-import { Tab, Tabs } from '../dist/components/Tabs';
-import {Dropdown} from '../dist/components/Dropdown';
+import {VerticalTab,VerticalTabItems} from '../dist/components/VerticalTab'
+
 import './style.scss'
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <>
-      <Dropdown label='test'  variant='comboBox' list={[
-        {
-          text: 'Option 1',
-          value: 'option1'
-        },
-        {
-          text: 'Option 2',
-          value: 'option2'
-        },
-      ]}
-      dropdownIcon="down"
-      onSelect={(value) => console.log(value)}
-      name='test name'
-      />
-    </>
+const Icon = <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <g clipPath="url(#clip0_27043_25468)">
+        <path d="M4.5 1.09913e-05C5.69429 -0.00262961 6.84043 0.470621 7.68492 1.31511C8.16189 1.79208 8.52043 2.36527 8.74169 2.98902H12.5C13.8807 2.98902 15 4.10831 15 5.48902V8.2676C15.5978 8.61341 16 9.25975 16 10V12C16 12.7467 15.5908 13.3979 14.9844 13.7414C14.8448 14.9947 13.7858 16 12.5 16H2.54C1.15929 16 0.00312805 14.8407 0.00312805 13.46V5.00003H0.0274644C0.00931666 4.83587 0 4.66904 0 4.50003C0 2.01475 2.01472 1.09913e-05 4.5 1.09913e-05ZM12.5 3.98902H8.972C8.99095 4.15786 9.00039 4.32845 9.00001 4.50003C9.00001 6.98531 6.98528 9.00003 4.5 9.00003C3.08815 9.00003 1.82816 8.34985 1.00313 7.33256V13.46C1.00313 14.2885 1.71157 15 2.54 15H12.5C13.1401 15 13.6865 14.5753 13.9019 14H11C9.89543 14 9 13.1046 9 12V10C9 8.89546 9.89543 8.00003 11 8.00003H14V5.48902C14 4.66059 13.3284 3.98902 12.5 3.98902ZM14 9.00003H11C10.4477 9.00003 10 9.44775 10 10V12C10 12.5523 10.4477 13 11 13H14C14.5523 13 15 12.5523 15 12V10C15 9.44775 14.5523 9.00003 14 9.00003ZM12 10C12.5523 10 13 10.4477 13 11C13 11.5523 12.5523 12 12 12C11.4477 12 11 11.5523 11 11C11 10.4477 11.4477 10 12 10ZM4.5 1.00003C2.567 1.00003 1 2.56704 1 4.50003C1 6.43303 2.567 8.00003 4.5 8.00003C6.433 8.00003 8 6.43303 8 4.50003C8 2.56704 6.433 1.00003 4.5 1.00003ZM4.5 2.50003C4.77614 2.50003 5 2.72389 5 3.00003V4L6 4.00003C6.24546 4.00003 6.44961 4.17691 6.49194 4.41016L6.5 4.50003C6.5 4.77618 6.27614 5.00003 6 5.00003L5 5V6.00003C5 6.24549 4.82312 6.44964 4.58988 6.49198L4.5 6.50003C4.22386 6.50003 4 6.27618 4 6.00003V5L3 5.00003C2.75454 5.00003 2.55039 4.82316 2.50806 4.58991L2.5 4.50003C2.5 4.22389 2.72386 4.00003 3 4.00003L4 4V3.00003C4 2.75457 4.17688 2.55042 4.41012 2.50809L4.5 2.50003Z" fill="#333333" />
+    </g>
+    <defs>
+        <clipPath id="clip0_27043_25468">
+            <rect width="16" height="16" fill="white" />
+        </clipPath>
+    </defs>
+</svg>;
 
+const items = [
+  {
+    title: 'Item 1',
+    icon: Icon,
+    subItems: [
+      {
+        title: 'Sub Item 1',
+        icon: Icon,
+        component: <div>Sub Item 1</div>
+      },
+      {
+        title: 'Sub Item 2',
+        icon: Icon,
+      },
+      {
+        title: 'Sub Item 3',
+        icon: Icon,
+      }
+    ],
+    component: <div>Item 1</div>
+  },
+    {
+    title: 'Item 2',
+    icon: Icon,
+  },
+  {
+    title: 'Item 3',
+    icon: Icon,
+  }
+]
 
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <div style={{margin:25, width:500}}>
+      <VerticalTab>
+        <VerticalTabItems items={items} activeTab='Item 3'/>
+      </VerticalTab>
+    </div>
   </React.StrictMode>,
 )