diff --git a/lib/components/Tab/container/container.test.tsx b/lib/components/Tab/container/__tests__/container.test.tsx
similarity index 91%
rename from lib/components/Tab/container/container.test.tsx
rename to lib/components/Tab/container/__tests__/container.test.tsx
index a83ba2df..48d5942c 100644
--- a/lib/components/Tab/container/container.test.tsx
+++ b/lib/components/Tab/container/__tests__/container.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import Tab from "..";
+import Tab from "../../index";
 
 describe("<Tab.Container/>", () => {
     it("should render correctly", () => {
diff --git a/lib/components/Tab/content/content.test.tsx b/lib/components/Tab/content/__tests__/content.test.tsx
similarity index 92%
rename from lib/components/Tab/content/content.test.tsx
rename to lib/components/Tab/content/__tests__/content.test.tsx
index 6100bb1d..c7ec8ffc 100644
--- a/lib/components/Tab/content/content.test.tsx
+++ b/lib/components/Tab/content/__tests__/content.test.tsx
@@ -4,8 +4,8 @@ import {
     render as rtlRender,
     screen,
 } from "@testing-library/react";
-import Tab from "..";
-import { TabContextType } from "../container";
+import Tab from "../../index";
+import { TabContextType } from "../../container";
 
 const render = (
     ui: React.ReactElement,
diff --git a/lib/components/Tab/list/list.test.tsx b/lib/components/Tab/list/__tests__/list.test.tsx
similarity index 89%
rename from lib/components/Tab/list/list.test.tsx
rename to lib/components/Tab/list/__tests__/list.test.tsx
index 0d5cd16a..b0619f56 100644
--- a/lib/components/Tab/list/list.test.tsx
+++ b/lib/components/Tab/list/__tests__/list.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import Tab from "..";
+import Tab from "../../index";
 
 describe("<Tab.List/>", () => {
     it("should render correctly", () => {
diff --git a/lib/components/Tab/panel/panel.test.tsx b/lib/components/Tab/panel/__tests__/panel.test.tsx
similarity index 94%
rename from lib/components/Tab/panel/panel.test.tsx
rename to lib/components/Tab/panel/__tests__/panel.test.tsx
index cb264657..28c5aeb0 100644
--- a/lib/components/Tab/panel/panel.test.tsx
+++ b/lib/components/Tab/panel/__tests__/panel.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import Tab from "..";
+import Tab from "../../index";
 
 describe("<Tab.Panel/>", () => {
     it("should render correctly", () => {
diff --git a/lib/components/Tab/tab.scss b/lib/components/Tab/tab.scss
index 711bf670..d792bc83 100644
--- a/lib/components/Tab/tab.scss
+++ b/lib/components/Tab/tab.scss
@@ -1,10 +1,9 @@
 @import '@quill/spacing.scss/';
-@import '@quill/color.semantic.scss';
+@import "@quill-bundle/color.scss";
 @import '@quill/border.scss';
 @import '@quill/spacing.scss';
 @import '@quill/size.scss';
 @import '@quill/opacity.scss';
-@import '@quill/color.opacity.scss';
 
 .tab-menu {
     border-bottom: var(--core-borderRadius-100) solid var(--core-color-opacity-black-200);
@@ -27,17 +26,35 @@
     }
 
     &__variants {
-        &--size {
-            &-sm {
-                font-size: var(--core-font-size-75);
-                padding: var(--core-spacing-400) var(--core-spacing-200);
-                gap: var(--core-spacing-200);
+        &__size {
+            &__fill {
+                &-sm {
+                    padding: var(--core-spacing-200) var(--core-spacing-400);
+                    min-width: 106px;
+                    justify-content: center;
+                    gap: var(--core-spacing-200);
+                }
+
+                &-md {
+                    min-width: 106px;
+                    padding: var(--core-spacing-400) var(--core-spacing-800);
+                    justify-content: center;
+                    gap: var(--core-spacing-400);
+                }
             }
 
-            &-md {
-                font-size: var(--core-font-size-100);
-                padding: var(--core-spacing-800) var(--core-spacing-600);
-                gap: var(--core-spacing-400);
+            &__hug {
+                &-sm {
+                    padding: var(--core-spacing-200) var(--core-spacing-800) var(--core-spacing-200) var(--core-spacing-400);
+                    justify-content: center;
+                    gap: var(--core-spacing-200);
+                }
+
+                &-md {
+                    padding: var(--core-spacing-400) var(--core-spacing-1200) var(--core-spacing-400) var(--core-spacing-800);
+                    justify-content: center;
+                    gap: var(--core-spacing-400);
+                }
             }
 
         }
diff --git a/lib/components/Tab/tab.stories.tsx b/lib/components/Tab/tab.stories.tsx
index d0182583..bad40867 100644
--- a/lib/components/Tab/tab.stories.tsx
+++ b/lib/components/Tab/tab.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta } from "@storybook/react";
-import {} from "@deriv/quill-icons/LabelPaired";
 import MockTab from "./mocks/index";
 import { StandalonePlaceholderRegularIcon } from "@deriv/quill-icons";
 import { ComponentProps } from "react";
@@ -30,17 +29,25 @@ const placeholder = {
     sm: <StandalonePlaceholderRegularIcon iconSize="sm" />,
     md: <StandalonePlaceholderRegularIcon iconSize="md" />,
 };
-export const TabWithIconsOnLeft = (args: ComponentProps<typeof MockTab>) => (
+export const TabWithIconsOnLeftFill = (
+    args: ComponentProps<typeof MockTab>,
+) => (
     <MockTab
         {...args}
         iconPosition="left"
         icon={placeholder[args?.size as keyof typeof placeholder]}
     />
 );
-export const TabWithIconsOnTop = (args: ComponentProps<typeof MockTab>) => (
+export const TabWithIconsOnTopFill = (args: ComponentProps<typeof MockTab>) => (
     <MockTab
         {...args}
         iconPosition="top"
         icon={placeholder[args?.size as keyof typeof placeholder]}
     />
 );
+export const TabWithoutIconsFill = (args: ComponentProps<typeof MockTab>) => (
+    <MockTab {...args} />
+);
+export const TabWithIconsOnLeftHug = (args: ComponentProps<typeof MockTab>) => (
+    <MockTab {...args} tabContent="hug" />
+);
diff --git a/lib/components/Tab/trigger/trigger.test.tsx b/lib/components/Tab/trigger/__tests__/trigger.test.tsx
similarity index 96%
rename from lib/components/Tab/trigger/trigger.test.tsx
rename to lib/components/Tab/trigger/__tests__/trigger.test.tsx
index b741c88b..3e4e2e94 100644
--- a/lib/components/Tab/trigger/trigger.test.tsx
+++ b/lib/components/Tab/trigger/__tests__/trigger.test.tsx
@@ -5,8 +5,8 @@ import {
     screen,
 } from "@testing-library/react";
 import { LabelPairedPlaceholderMdRegularIcon } from "@deriv/quill-icons/LabelPaired";
-import Tab from "..";
-import { TabContextType } from "../container";
+import Tab from "../../index";
+import { TabContextType } from "../../container";
 import userEvent from "@testing-library/user-event";
 
 const render = (
diff --git a/lib/components/Tab/trigger/trigger.scss b/lib/components/Tab/trigger/trigger.scss
index d0b982e6..412ca863 100644
--- a/lib/components/Tab/trigger/trigger.scss
+++ b/lib/components/Tab/trigger/trigger.scss
@@ -21,4 +21,7 @@
     svg {
         fill: var(--semantic-color-typography-prominent);
     }
-}
\ No newline at end of file
+}
+.label-class {
+    text-align: center;
+}
diff --git a/lib/components/Tab/types.ts b/lib/components/Tab/types.ts
index d71916ce..945b6f3a 100644
--- a/lib/components/Tab/types.ts
+++ b/lib/components/Tab/types.ts
@@ -2,6 +2,7 @@ import React, { ComponentProps } from "react";
 
 export type QuillIconComponent = React.ForwardRefExoticComponent<"ref">;
 export type TTabSize = "sm" | "md";
+export type TTabContent = "hug" | "fill";
 
 export interface TabProps extends ComponentProps<"button"> {
     size?: TTabSize;
@@ -9,4 +10,5 @@ export interface TabProps extends ComponentProps<"button"> {
     iconPosition?: "left" | "top";
     className?: string;
     children?: React.ReactNode;
+    tabContent?: TTabContent;
 }