diff --git a/examples/Demo/Shared/Pages/Tabs/Examples/TabsDefault.razor b/examples/Demo/Shared/Pages/Tabs/Examples/TabsDefault.razor
index 455c6597e2..ce13748717 100644
--- a/examples/Demo/Shared/Pages/Tabs/Examples/TabsDefault.razor
+++ b/examples/Demo/Shared/Pages/Tabs/Examples/TabsDefault.razor
@@ -1,9 +1,15 @@
-<FluentSwitch @bind-Value="@DeferredLoading">Use deferred loading</FluentSwitch>
+<FluentSelect Label="Size"
+              Items="@(Enum.GetValues<TabSize>())"
+              @bind-SelectedOption="@size" />
+
+<FluentSwitch @bind-Value="@DeferredLoading">Use deferred loading</FluentSwitch>
 <p>
 If checked, the contents of Tab two and three will be loaded after 1 second of processing (to simulate a long running process). <br />
 </p>
 
-<FluentTabs @bind-ActiveTabId="@activeid" OnTabChange="HandleOnTabChange" >
+<FluentDivider />
+
+<FluentTabs @bind-ActiveTabId="@activeid" OnTabChange="HandleOnTabChange" Size="@size" >
     <FluentTab Label="Tab one" Icon="@(new Icons.Regular.Size24.LeafOne())" Id="tab-1">
         Tab one content. This is for testing.
     </FluentTab>
@@ -36,7 +42,7 @@ If checked, the contents of Tab two and three will be loaded after 1 second of p
 <p>Active tab changed to: @changedto?.Label</p>
 
 <h4>Vertical</h4>
-<FluentTabs Orientation="Orientation.Vertical" ActiveTabId="tab-v1" Style="height: 200px;">
+<FluentTabs Orientation="Orientation.Vertical" Style="height: 200px;" Size="@size">
     <FluentTab Label="Tab one" Id="tab-v1">
         Tab one content. This is for testing.
     </FluentTab>
@@ -51,6 +57,8 @@ If checked, the contents of Tab two and three will be loaded after 1 second of p
 @code {
     bool DeferredLoading = false;
 
+    TabSize size;
+
     string? activeid = "tab-3";
     FluentTab? changedto;
 
diff --git a/src/Core/Components/Tabs/FluentTab.razor.css b/src/Core/Components/Tabs/FluentTab.razor.css
index 0a6885c839..ba81c78e17 100644
--- a/src/Core/Components/Tabs/FluentTab.razor.css
+++ b/src/Core/Components/Tabs/FluentTab.razor.css
@@ -39,3 +39,18 @@ fluent-tab {
 ::deep fluent-tab[aria-selected="true"] {
     font-variation-settings: normal;
 }
+
+fluent-tabs fluent-tab-panel {
+    --density: 0;
+}
+
+
+fluent-tabs.medium fluent-tab {
+    font-size: var(--type-ramp-base-font-size);
+    padding: 0 10px;
+}
+
+fluent-tabs.large fluent-tab {
+    font-size: var(--type-ramp-plus-1-font-size);
+    padding: 0 16px;
+}
diff --git a/src/Core/Components/Tabs/FluentTabs.razor.cs b/src/Core/Components/Tabs/FluentTabs.razor.cs
index 9dd440648c..db1592aee2 100644
--- a/src/Core/Components/Tabs/FluentTabs.razor.cs
+++ b/src/Core/Components/Tabs/FluentTabs.razor.cs
@@ -23,13 +23,14 @@ public partial class FluentTabs : FluentComponentBase
 
     /// <summary />
     protected string? ClassValue => new CssBuilder(Class)
+        .AddClass(Size.ToAttributeValue(), Size != TabSize.Small)
+        .AddClass(Orientation.ToAttributeValue(), Orientation == Orientation.Vertical)
         .Build();
 
     /// <summary />
     protected string? StyleValue => new StyleBuilder(Style)
-        .AddStyle("padding", "6px", () => Size == TabSize.Small)
-        .AddStyle("padding", "12px 10px", () => Size == TabSize.Medium)
-        .AddStyle("padding", "16px 10px", () => Size == TabSize.Large)
+        .AddStyle("--density", "2", () => Size == TabSize.Medium)
+        .AddStyle("--density", "4", () => Size == TabSize.Large)
         .AddStyle("width", Width, () => !string.IsNullOrEmpty(Width))
         .AddStyle("height", Height, () => !string.IsNullOrEmpty(Height))
         .Build();
@@ -79,7 +80,7 @@ public partial class FluentTabs : FluentComponentBase
     /// Gets or sets the width of the tab items.
     /// </summary>
     [Parameter]
-    public TabSize? Size { get; set; } = TabSize.Medium;
+    public TabSize? Size { get; set; } = TabSize.Small;
 
     /// <summary>
     /// Gets or sets the width of the tabs component.