diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor
index a71f581101..285148027d 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor
@@ -13,17 +13,15 @@
     }
     else
     {
-        <div style="@Styles?.Content" class="bit-tag-ctn @Classes?.Content">
-            @if (IconName is not null)
-            {
-                <i style="@Styles?.Icon" class="bit-tag-icn bit-icon bit-icon--@IconName @Classes?.Icon" />
-            }
+        @if (IconName is not null)
+        {
+            <i style="@Styles?.Icon" class="bit-tag-icn bit-icon bit-icon--@IconName @Classes?.Icon" />
+        }
 
-            @if (Text is not null)
-            {
-                <span style="@Styles?.Text" class="bit-tag-tex @Classes?.Text">@Text</span>
-            }
-        </div>
+        @if (Text is not null)
+        {
+            <span style="@Styles?.Text" class="bit-tag-tex @Classes?.Text">@Text</span>
+        }
     }
 
     @if (OnDismiss.HasDelegate)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor.cs
index ba71f84024..10c6d4f96a 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor.cs
@@ -12,6 +12,12 @@ public partial class BitTag : BitComponentBase
     /// </summary>
     [Parameter] public BitTagClassStyles? Classes { get; set; }
 
+    /// <summary>
+    /// The general color of the tag.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public BitColor? Color { get; set; }
+
     /// <summary>
     /// The icon to show inside the tag.
     /// </summary>
@@ -27,12 +33,6 @@ public partial class BitTag : BitComponentBase
     /// </summary>
     [Parameter] public EventCallback<MouseEventArgs> OnDismiss { get; set; }
 
-    /// <summary>
-    /// The severity of the tag.
-    /// </summary>
-    [Parameter, ResetClassBuilder]
-    public BitSeverity? Severity { get; set; }
-
     /// <summary>
     /// Custom CSS styles for different parts of the BitTag.
     /// </summary>
@@ -57,6 +57,19 @@ protected override void RegisterCssClasses()
     {
         ClassBuilder.Register(() => Classes?.Root);
 
+        ClassBuilder.Register(() => Color switch
+        {
+            BitColor.Primary => "bit-tag-pri",
+            BitColor.Secondary => "bit-tag-sec",
+            BitColor.Tertiary => "bit-tag-ter",
+            BitColor.Info => "bit-tag-inf",
+            BitColor.Success => "bit-tag-suc",
+            BitColor.Warning => "bit-tag-wrn",
+            BitColor.SevereWarning => "bit-tag-swr",
+            BitColor.Error => "bit-tag-err",
+            _ => "bit-tag-pri"
+        });
+
         ClassBuilder.Register(() => Variant switch
         {
             BitVariant.Fill => "bit-tag-fil",
@@ -64,16 +77,6 @@ protected override void RegisterCssClasses()
             BitVariant.Text => "bit-tag-txt",
             _ => "bit-tag-fil"
         });
-
-        ClassBuilder.Register(() => Severity switch
-        {
-            BitSeverity.Info => "bit-tag-inf",
-            BitSeverity.Success => "bit-tag-suc",
-            BitSeverity.Warning => "bit-tag-wrn",
-            BitSeverity.SevereWarning => "bit-tag-swr",
-            BitSeverity.Error => "bit-tag-err",
-            _ => string.Empty
-        });
     }
 
     protected override void RegisterCssStyles()
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss
index 9b01803d2a..3e14d8a9d3 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss
@@ -5,84 +5,37 @@
     overflow: hidden;
     align-items: center;
     display: inline-flex;
-    min-height: spacing(4);
-    max-width: max-content;
     font-size: spacing(1.75);
+    font-family: $tg-font-family;
+    font-weight: $tg-font-weight;
     border-style: $shp-border-style;
     border-width: $shp-border-width;
     border-radius: $shp-border-radius;
-    font-family: $tg-font-family;
-    font-weight: $tg-font-weight;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
+    padding: spacing(0.75) spacing(1.5);
 
     &.bit-dis {
         cursor: default;
-        pointer-events: none;
+        user-select: none;
         color: $clr-fg-dis;
+        pointer-events: none;
     }
 }
 
-.bit-tag-ctn {
-    gap: spacing(1);
-    align-items: center;
-    display: inline-flex;
-    padding-inline: spacing(1);
-}
-
 .bit-tag-cls {
+    padding: 0;
     border: none;
     display: flex;
     color: inherit;
     cursor: pointer;
-    font-weight: 400;
-    width: spacing(4);
-    height: spacing(4);
-    align-self: normal;
-    text-align: center;
-    align-items: center;
-    text-decoration: none;
     box-sizing: border-box;
-    justify-content: center;
-    font-size: spacing(1.75);
-    margin-inline-start: auto;
-    padding-inline: spacing(0.5);
     background-color: transparent;
-
-    span {
-        height: 100%;
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-        justify-content: center;
-
-        i {
-            margin-inline: spacing(0.5);
-        }
-    }
 }
 
-.bit-tag-fil {
-    color: var(--bit-tag-pri-clr);
-    background-color: var(--bit-tag-bg-clr);
-    border-color: var(--bit-tag-pri-brd-clr);
-    --bit-tag-bg-clr: #{$clr-pri};
-    --bit-tag-pri-clr: #{$clr-pri-text};
-    --bit-tag-pri-brd-clr: #{$clr-pri};
-    --bit-tag-pri-hover-bg-clr: #{$clr-pri-hover};
-    --bit-tag-pri-active-bg-clr: #{$clr-pri-active};
-    --bit-tag-ldg-brd-top-clr: #{$clr-pri-dark};
-
-    @media (hover: hover) {
-        .bit-tag-cls:hover {
-            background-color: var(--bit-tag-pri-hover-bg-clr);
-        }
-    }
 
-    .bit-tag-cls:active {
-        background-color: var(--bit-tag-pri-active-bg-clr);
-    }
+.bit-tag-fil {
+    color: var(--bit-tag-clr-txt);
+    border-color: var(--bit-tag-clr);
+    background-color: var(--bit-tag-clr);
 
     &.bit-dis {
         border-color: $clr-brd-dis;
@@ -91,111 +44,63 @@
 }
 
 .bit-tag-otl {
-    color: var(--bit-tag-sec-clr);
-    background-color: $clr-sec;
-    border-color: var(--bit-tag-sec-brd-clr);
-    --bit-tag-sec-clr: #{$clr-sec-text};
-    --bit-tag-sec-brd-clr: #{$clr-sec-text};
-    --bit-tag-sec-hover-bg-clr: #{$clr-sec-hover};
-    --bit-tag-sec-active-bg-clr: #{$clr-sec-active};
-    --bit-tag-ldg-brd-top-clr: #{$clr-pri-dark};
-
-    @media (hover: hover) {
-        .bit-tag-cls:hover {
-            background-color: var(--bit-tag-sec-hover-bg-clr);
-        }
-    }
-
-    .bit-tag-cls:active {
-        background-color: var(--bit-tag-sec-active-bg-clr);
-    }
+    color: var(--bit-tag-clr);
+    border-color: var(--bit-tag-clr);
+    background-color: transparent;
 
     &.bit-dis {
         border-color: $clr-brd-dis;
+        background-color: transparent;
     }
 }
 
 .bit-tag-txt {
+    color: var(--bit-tag-clr);
     border-color: transparent;
-    color: var(--bit-tag-sec-clr);
     background-color: transparent;
-    --bit-tag-sec-clr: #{$clr-sec-text};
-    --bit-tag-sec-hover-bg-clr: #{$clr-sec-hover};
-    --bit-tag-sec-active-bg-clr: #{$clr-sec-active};
-    --bit-tag-ldg-brd-top-clr: #{$clr-pri-dark};
-
-    @media (hover: hover) {
-        .bit-tag-cls:hover {
-            background-color: var(--bit-tag-sec-hover-bg-clr);
-        }
-    }
 
-    .bit-tag-cls:active {
-        background-color: var(--bit-tag-sec-active-bg-clr);
+    &.bit-dis {
+        border-color: transparent;
+        background-color: transparent;
     }
 }
 
+.bit-tag-pri {
+    --bit-tag-clr: #{$clr-pri};
+    --bit-tag-clr-txt: #{$clr-pri-text};
+}
+
+.bit-tag-sec {
+    --bit-tag-clr: #{$clr-sec};
+    --bit-tag-clr-txt: #{$clr-sec-text};
+}
+
+.bit-tag-ter {
+    --bit-tag-clr: #{$clr-ter};
+    --bit-tag-clr-txt: #{$clr-ter-text};
+}
+
 .bit-tag-inf {
-    --bit-tag-bg-clr: #{$clr-inf};
-    --bit-tag-ldg-brd-top-clr: #{$clr-inf};
-    --bit-tag-pri-clr: #{$clr-fg-pri};
-    --bit-tag-pri-brd-clr: #{$clr-inf};
-    --bit-tag-pri-hover-bg-clr: #{$clr-inf-hover};
-    --bit-tag-pri-active-bg-clr: #{$clr-inf-active};
-    --bit-tag-sec-clr: #{$clr-inf};
-    --bit-tag-sec-brd-clr: #{$clr-inf};
-    --bit-tag-sec-hover-bg-clr: #{$clr-inf-hover};
-    --bit-tag-sec-active-bg-clr: #{$clr-inf-active};
+    --bit-tag-clr: #{$clr-inf};
+    --bit-tag-clr-txt: #{$clr-inf-text};
 }
 
 .bit-tag-suc {
-    --bit-tag-bg-clr: #{$clr-suc};
-    --bit-tag-ldg-brd-top-clr: #{$clr-suc};
-    --bit-tag-pri-clr: #{$clr-fg-pri};
-    --bit-tag-pri-brd-clr: #{$clr-suc};
-    --bit-tag-pri-hover-bg-clr: #{$clr-suc-hover};
-    --bit-tag-pri-active-bg-clr: #{$clr-suc-active};
-    --bit-tag-sec-clr: #{$clr-suc};
-    --bit-tag-sec-brd-clr: #{$clr-suc};
-    --bit-tag-sec-hover-bg-clr: #{$clr-suc-hover};
-    --bit-tag-sec-active-bg-clr: #{$clr-suc-active};
+    --bit-tag-clr: #{$clr-suc};
+    --bit-tag-clr-txt: #{$clr-suc-text};
 }
 
 .bit-tag-wrn {
-    --bit-tag-bg-clr: #{$clr-wrn};
-    --bit-tag-ldg-brd-top-clr: #{$clr-wrn};
-    --bit-tag-pri-clr: #{$clr-fg-pri};
-    --bit-tag-pri-brd-clr: #{$clr-wrn};
-    --bit-tag-pri-hover-bg-clr: #{$clr-wrn-hover};
-    --bit-tag-pri-active-bg-clr: #{$clr-wrn-active};
-    --bit-tag-sec-clr: #{$clr-wrn};
-    --bit-tag-sec-brd-clr: #{$clr-wrn};
-    --bit-tag-sec-hover-bg-clr: #{$clr-wrn-hover};
-    --bit-tag-sec-active-bg-clr: #{$clr-wrn-active};
+    --bit-tag-clr: #{$clr-wrn};
+    --bit-tag-clr-txt: #{$clr-wrn-text};
 }
 
 .bit-tag-swr {
-    --bit-tag-bg-clr: #{$clr-swr};
-    --bit-tag-ldg-brd-top-clr: #{$clr-swr};
-    --bit-tag-pri-clr: #{$clr-fg-pri};
-    --bit-tag-pri-brd-clr: #{$clr-swr};
-    --bit-tag-pri-hover-bg-clr: #{$clr-swr-hover};
-    --bit-tag-pri-active-bg-clr: #{$clr-swr-active};
-    --bit-tag-sec-clr: #{$clr-swr};
-    --bit-tag-sec-brd-clr: #{$clr-swr};
-    --bit-tag-sec-hover-bg-clr: #{$clr-swr-hover};
-    --bit-tag-sec-active-bg-clr: #{$clr-swr-active};
+    --bit-tag-clr: #{$clr-swr};
+    --bit-tag-clr-txt: #{$clr-swr-text};
 }
 
 .bit-tag-err {
-    --bit-tag-bg-clr: #{$clr-err};
-    --bit-tag-ldg-brd-top-clr: #{$clr-err};
-    --bit-tag-pri-clr: #{$clr-fg-pri};
-    --bit-tag-pri-brd-clr: #{$clr-err};
-    --bit-tag-pri-hover-bg-clr: #{$clr-err-hover};
-    --bit-tag-pri-active-bg-clr: #{$clr-err-active};
-    --bit-tag-sec-clr: #{$clr-err};
-    --bit-tag-sec-brd-clr: #{$clr-err};
-    --bit-tag-sec-hover-bg-clr: #{$clr-err-hover};
-    --bit-tag-sec-active-bg-clr: #{$clr-err-active};
+    --bit-tag-clr: #{$clr-err};
+    --bit-tag-clr-txt: #{$clr-err-text};
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTagClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTagClassStyles.cs
index b97b15e151..4a64e7e65b 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTagClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTagClassStyles.cs
@@ -7,11 +7,6 @@ public class BitTagClassStyles
     /// </summary>
     public string? Root { get; set; }
 
-    /// <summary>
-    /// Custom CSS classes/styles for the content of the BitTag.
-    /// </summary>
-    public string? Content { get; set; }
-
     /// <summary>
     /// Custom CSS classes/styles for the text of the BitTag.
     /// </summary>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor
index 0ea41ebd20..c3099d1121 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor
@@ -11,9 +11,7 @@
                ComponentSubClasses="componentSubClasses">
     <ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" Id="example1">
         <ExamplePreview>
-            <div class="tags-container">
-                <BitTag Text="Text" />
-            </div>
+            <BitTag Text="Basic tag" />
         </ExamplePreview>
     </ComponentExampleBox>
 
@@ -21,65 +19,19 @@
         <ExamplePreview>
             <div>The tag offers three variants: Fill (default), Outline, and Text.</div>
             <br />
-            <div class="tags-container">
-                <BitTag Text="Fill" Variant="BitVariant.Fill" />
-                <br />
-                <br />
-                <BitTag Text="Outline" Variant="BitVariant.Outline" />
-                <br />
-                <br />
-                <BitTag Text="Text" Variant="BitVariant.Text" />
-            </div>
+            <BitTag Text="Fill" Variant="BitVariant.Fill" />&nbsp;
+            <BitTag Text="Outline" Variant="BitVariant.Outline" />&nbsp;
+            <BitTag Text="Text" Variant="BitVariant.Text" />
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Fill tag" RazorCode="@example3RazorCode" Id="example3">
+    <ComponentExampleBox Title="Icon" RazorCode="@example3RazorCode" Id="example3">
         <ExamplePreview>
-            <div>
-                Fill tags are attention-grabbing, featuring a filled appearance. They're designed for essential actions at the core of your application.
-            </div>
-            <br />
-            <div class="tags-container">
-                <BitTag Text="Enabled" />
-                <BitTag Text="Disabled" IsEnabled="false" />
-            </div>
+            <BitTag Text="Calendar icon" IconName="@BitIconName.Calendar" />
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Outline tag" RazorCode="@example4RazorCode" Id="example4">
-        <ExamplePreview>
-            <div>
-                Outline tags offer a moderate level of emphasis, suitable for important actions that aren't central to the application. 
-                They serve as a middle ground between Text tags and the more prominent Fill tags, providing flexibility in emphasis.
-            </div>
-            <br />
-            <div class="tags-container">
-                <BitTag Text="Enabled" Variant="BitVariant.Outline" />
-                <BitTag Text="Disabled" Variant="BitVariant.Outline" IsEnabled="false" />
-            </div>
-        </ExamplePreview>
-    </ComponentExampleBox>
-
-    <ComponentExampleBox Title="Text tag" RazorCode="@example5RazorCode" Id="example5">
-        <ExamplePreview>
-            <div>
-                Text tags are best suited for understated actions, serving as a less prominent choice in various interface elements.
-            </div>
-            <br />
-            <div class="tags-container">
-                <BitTag Text="Enabled" Variant="BitVariant.Text" />
-                <BitTag Text="Disabled" Variant="BitVariant.Text" IsEnabled="false" />
-            </div>
-        </ExamplePreview>
-    </ComponentExampleBox>
-
-    <ComponentExampleBox Title="Icon" RazorCode="@example6RazorCode" Id="example6">
-        <ExamplePreview>
-            <BitTag Text="Text" IconName="@BitIconName.Calendar" />
-        </ExamplePreview>
-    </ComponentExampleBox>
-
-    <ComponentExampleBox Title="Dismiss" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
+    <ComponentExampleBox Title="Dismiss" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
         <ExamplePreview>
             @if (isDismissed is false)
             {
@@ -93,47 +45,45 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Severity" RazorCode="@example8RazorCode" Id="example8">
+    <ComponentExampleBox Title="Color" RazorCode="@example5RazorCode" Id="example5">
         <ExamplePreview>
-            <div>
-                Offering a range of specialized color variants, providing visual cues for specific actions or states within your application.
-            </div>
+            <div>Offering a range of specialized color variants, providing visual cues for specific actions or states within your application.</div>
             <br />
-            <div class="tags-container-grid">
-                <div>
-                    <BitTag Text="Info" IconName="@BitIconName.Calendar" Severity="BitSeverity.Info" />
-                    <BitTag Text="Info" IconName="@BitIconName.Calendar" Severity="BitSeverity.Info" Variant="BitVariant.Outline" />
-                    <BitTag Text="Info" IconName="@BitIconName.Calendar" Severity="BitSeverity.Info" Variant="BitVariant.Text" />
-                </div>
-                <br />
-                <div>
-                    <BitTag Text="Success" IconName="@BitIconName.Calendar" Severity="BitSeverity.Success" />
-                    <BitTag Text="Success" IconName="@BitIconName.Calendar" Severity="BitSeverity.Success" Variant="BitVariant.Outline" />
-                    <BitTag Text="Success" IconName="@BitIconName.Calendar" Severity="BitSeverity.Success" Variant="BitVariant.Text" />
-                </div>
-                <br />
-                <div>
-                    <BitTag Text="Warning" IconName="@BitIconName.Calendar" Severity="BitSeverity.Warning" />
-                    <BitTag Text="Warning" IconName="@BitIconName.Calendar" Severity="BitSeverity.Warning" Variant="BitVariant.Outline" />
-                    <BitTag Text="Warning" IconName="@BitIconName.Calendar" Severity="BitSeverity.Warning" Variant="BitVariant.Text" />
-                </div>
-                <br />
-                <div>
-                    <BitTag Text="SevereWarning" IconName="@BitIconName.Calendar" Severity="BitSeverity.SevereWarning" />
-                    <BitTag Text="SevereWarning" IconName="@BitIconName.Calendar" Severity="BitSeverity.SevereWarning" Variant="BitVariant.Outline" />
-                    <BitTag Text="SevereWarning" IconName="@BitIconName.Calendar" Severity="BitSeverity.SevereWarning" Variant="BitVariant.Text" />
-                </div>
-                <br />
-                <div>
-                    <BitTag Text="Error" IconName="@BitIconName.Calendar" Severity="BitSeverity.Error" />
-                    <BitTag Text="Error" IconName="@BitIconName.Calendar" Severity="BitSeverity.Error" Variant="BitVariant.Outline" />
-                    <BitTag Text="Error" IconName="@BitIconName.Calendar" Severity="BitSeverity.Error" Variant="BitVariant.Text" />
-                </div>
-            </div>
+            <BitTag Text="Primary" IconName="@BitIconName.Calendar" Color="BitColor.Primary" Variant="BitVariant.Fill" />&nbsp;
+            <BitTag Text="Primary" IconName="@BitIconName.Calendar" Color="BitColor.Primary" Variant="BitVariant.Outline" />&nbsp;
+            <BitTag Text="Primary" IconName="@BitIconName.Calendar" Color="BitColor.Primary" Variant="BitVariant.Text" />
+            <br /><br />
+            <BitTag Text="Secondary" IconName="@BitIconName.Calendar" Color="BitColor.Secondary" Variant="BitVariant.Fill" />&nbsp;
+            <BitTag Text="Secondary" IconName="@BitIconName.Calendar" Color="BitColor.Secondary" Variant="BitVariant.Outline" />&nbsp;
+            <BitTag Text="Secondary" IconName="@BitIconName.Calendar" Color="BitColor.Secondary" Variant="BitVariant.Text" />
+            <br /><br />
+            <BitTag Text="Tertiary" IconName="@BitIconName.Calendar" Color="BitColor.Tertiary" Variant="BitVariant.Fill" />&nbsp;
+            <BitTag Text="Tertiary" IconName="@BitIconName.Calendar" Color="BitColor.Tertiary" Variant="BitVariant.Outline" />&nbsp;
+            <BitTag Text="Tertiary" IconName="@BitIconName.Calendar" Color="BitColor.Tertiary" Variant="BitVariant.Text" />
+            <br /><br />
+            <BitTag Text="Info" IconName="@BitIconName.Calendar" Color="BitColor.Info" Variant="BitVariant.Fill" />&nbsp;
+            <BitTag Text="Info" IconName="@BitIconName.Calendar" Color="BitColor.Info" Variant="BitVariant.Outline" />&nbsp;
+            <BitTag Text="Info" IconName="@BitIconName.Calendar" Color="BitColor.Info" Variant="BitVariant.Text" />
+            <br /><br />
+            <BitTag Text="Success" IconName="@BitIconName.Calendar" Color="BitColor.Success" Variant="BitVariant.Fill" />&nbsp;
+            <BitTag Text="Success" IconName="@BitIconName.Calendar" Color="BitColor.Success" Variant="BitVariant.Outline" />&nbsp;
+            <BitTag Text="Success" IconName="@BitIconName.Calendar" Color="BitColor.Success" Variant="BitVariant.Text" />
+            <br /><br />
+            <BitTag Text="Warning" IconName="@BitIconName.Calendar" Color="BitColor.Warning" Variant="BitVariant.Fill" />&nbsp;
+            <BitTag Text="Warning" IconName="@BitIconName.Calendar" Color="BitColor.Warning" Variant="BitVariant.Outline" />&nbsp;
+            <BitTag Text="Warning" IconName="@BitIconName.Calendar" Color="BitColor.Warning" Variant="BitVariant.Text" />
+            <br /><br />
+            <BitTag Text="SevereWarning" IconName="@BitIconName.Calendar" Color="BitColor.SevereWarning" Variant="BitVariant.Fill" />&nbsp;
+            <BitTag Text="SevereWarning" IconName="@BitIconName.Calendar" Color="BitColor.SevereWarning" Variant="BitVariant.Outline" />&nbsp;
+            <BitTag Text="SevereWarning" IconName="@BitIconName.Calendar" Color="BitColor.SevereWarning" Variant="BitVariant.Text" />
+            <br /><br />
+            <BitTag Text="Error" IconName="@BitIconName.Calendar" Color="BitColor.Error" Variant="BitVariant.Fill" />&nbsp;
+            <BitTag Text="Error" IconName="@BitIconName.Calendar" Color="BitColor.Error" Variant="BitVariant.Outline" />&nbsp;
+            <BitTag Text="Error" IconName="@BitIconName.Calendar" Color="BitColor.Error" Variant="BitVariant.Text" />
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Template" RazorCode="@example9RazorCode" Id="example9">
+    <ComponentExampleBox Title="Template" RazorCode="@example6RazorCode" Id="example6">
         <ExamplePreview>
             <BitTag>
                 <BitStack Horizontal Gap="0.5rem" Style="padding-inline: 0.5rem;">
@@ -144,51 +94,32 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Style & Class" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+    <ComponentExampleBox Title="Style & Class" RazorCode="@example7RazorCode" Id="example7">
         <ExamplePreview>
-            <div>
-                Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
-            </div>
+            <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
             <br />
             <div>Component's Style & Class:</div>
             <br />
-            <div class="tags-container">
+            <div>
                 <BitTag Text="Styled Tag"
                         IconName="@BitIconName.People"
-                        Style="border-radius: 1rem; font-weight:bold" />
+                        Style="border-radius: 1rem; font-weight:bold" />&nbsp;
                 <BitTag Text="Classed Tag"
                         IconName="@BitIconName.People"
                         Class="custom-class" Variant="BitVariant.Outline" />
+                <br /><br /><br />
+                <div><b>Styles</b> & <b>Classes</b>:</div>
+                <br />
+                <BitTag Text="Styles"
+                        IconName="@BitIconName.People"
+                        Styles="@(new() { Root = "border-color: darkblue; border-width: 0.25rem;",
+                                          Text = "color: darkblue; font-weight: 600;" })" />
+                &nbsp;
+                <BitTag Text="Classes"
+                        IconName="@BitIconName.People"
+                        Classes="@(new() { Root = "custom-root",
+                                           Icon = "custom-icon" })" />
             </div>
-            <br /><br /><br />
-            <div><b>Styles</b> & <b>Classes</b>:</div>
-            <br />
-            <div class="tags-container">
-                @if (isDismissed2 is false)
-                {
-                    <BitTag Text="Fill"
-                            IconName="@BitIconName.People"
-                            OnDismiss="() => isDismissed2 = true"
-                            Styles="@(new() { Root = "border-color: darkblue; border-width: 0.25rem;",
-                                              Text = "color: darkblue; font-weight: 600;",
-                                              DismissIcon = "color: darkblue; font-weight: 600;" })" />
-                }
-
-                @if (isDismissed3 is false)
-                {
-                    <BitTag Text="Outline"
-                            IconName="@BitIconName.People"
-                            OnDismiss="() => isDismissed3 = true"
-                            Variant="BitVariant.Outline"
-                            Classes="@(new() { Root = "custom-root",
-                                               Icon = "custom-icon",
-                                               DismissButton = "custom-dismiss" })" />
-                }
-            </div>
-            <br />
-            <BitButton IsEnabled="@(isDismissed3 && isDismissed2)" Variant="BitVariant.Outline" OnClick="() => isDismissed2 = isDismissed3 = false">
-                Dismissed, click to reset
-            </BitButton>
         </ExamplePreview>
     </ComponentExampleBox>
 </ComponentDemo>
\ No newline at end of file
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs
index b448e19f92..883172f562 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs
@@ -21,6 +21,15 @@ public partial class BitTagDemo
             Href = "#tag-class-styles"
         },
         new()
+        {
+            Name = "Color",
+            Type = "BitColor?",
+            DefaultValue = "null",
+            Description = "The general color of the tag.",
+            LinkType = LinkType.Link,
+            Href = "#color-enum"
+        },
+        new()
         {
             Name = "IconName",
             Type = "string?",
@@ -42,15 +51,6 @@ public partial class BitTagDemo
             Description = "Dismiss button click event, if set the dismiss icon will show up."
         },
         new()
-        {
-            Name = "Severity",
-            Type = "BitSeverity?",
-            DefaultValue = "null",
-            Description = "The severity of the tag.",
-            LinkType = LinkType.Link,
-            Href = "#severity-enum"
-        },
-        new()
         {
             Name = "Styles",
             Type = "BitTagClassStyles?",
@@ -93,13 +93,6 @@ public partial class BitTagDemo
                    Description = "Custom CSS classes/styles for the root element of the BitTag."
                },
                new()
-               {
-                   Name = "Content",
-                   Type = "string?",
-                   DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the content of the BitTag."
-               },
-               new()
                {
                    Name = "Text",
                    Type = "string?",
@@ -135,67 +128,85 @@ public partial class BitTagDemo
     [
         new()
         {
-            Id = "variant-enum",
-            Name = "BitVariant",
-            Description = "Determines the variant of the content that controls the rendered style of the corresponding element(s).",
+            Id = "color-enum",
+            Name = "BitColor",
+            Description = "Defines the general colors available in the bit BlazorUI.",
             Items =
             [
                 new()
                 {
-                    Name= "Fill",
-                    Description="Fill styled variant.",
+                    Name= "Primary",
+                    Description="Info Primary general color.",
                     Value="0",
                 },
                 new()
                 {
-                    Name= "Outline",
-                    Description="Outline styled variant.",
+                    Name= "Secondary",
+                    Description="Secondary general color.",
                     Value="1",
                 },
                 new()
                 {
-                    Name= "Text",
-                    Description="Text styled variant.",
+                    Name= "Tertiary",
+                    Description="Tertiary general color.",
                     Value="2",
-                }
-            ]
-        },
-        new()
-        {
-            Id = "severity-enum",
-            Name = "BitSeverity",
-            Description = "",
-            Items =
-            [
+                },
                 new()
                 {
                     Name= "Info",
-                    Description="Info styled tag.",
-                    Value="0",
+                    Description="Info general color.",
+                    Value="3",
                 },
                 new()
                 {
                     Name= "Success",
-                    Description="Success styled tag.",
-                    Value="1",
+                    Description="Success general color.",
+                    Value="4",
                 },
                 new()
                 {
                     Name= "Warning",
-                    Description="Warning styled tag.",
-                    Value="2",
+                    Description="Warning general color.",
+                    Value="5",
                 },
                 new()
                 {
                     Name= "SevereWarning",
-                    Description="Severe Warning styled tag.",
-                    Value="3",
+                    Description="SevereWarning general color.",
+                    Value="6",
                 },
                 new()
                 {
                     Name= "Error",
-                    Description="Error styled tag.",
-                    Value="4",
+                    Description="Error general color.",
+                    Value="7",
+                }
+            ]
+        },
+        new()
+        {
+            Id = "variant-enum",
+            Name = "BitVariant",
+            Description = "Determines the variant of the content that controls the rendered style of the corresponding element(s).",
+            Items =
+            [
+                new()
+                {
+                    Name= "Fill",
+                    Description="Fill styled variant.",
+                    Value="0",
+                },
+                new()
+                {
+                    Name= "Outline",
+                    Description="Outline styled variant.",
+                    Value="1",
+                },
+                new()
+                {
+                    Name= "Text",
+                    Description="Text styled variant.",
+                    Value="2",
                 }
             ]
         },
@@ -204,35 +215,21 @@ public partial class BitTagDemo
 
 
     private bool isDismissed;
-    private bool isDismissed2;
-    private bool isDismissed3;
 
 
 
     private readonly string example1RazorCode = @"
-<BitTag Text=""Text"" />";
+<BitTag Text=""Basic tag"" />";
 
     private readonly string example2RazorCode = @"
-<BitTag Text=""Text"" Variant=""BitVariant.Fill"" />
-<BitTag Text=""Text"" Variant=""BitVariant.Outline"" />
+<BitTag Text=""Fill"" Variant=""BitVariant.Fill"" />
+<BitTag Text=""Outline"" Variant=""BitVariant.Outline"" />
 <BitTag Text=""Text"" Variant=""BitVariant.Text"" />";
 
     private readonly string example3RazorCode = @"
-<BitTag Text=""Enabled"" />
-<BitTag Text=""Disabled"" IsEnabled=""false"" />";
+<BitTag Text=""Calendar icon"" IconName=""@BitIconName.Calendar"" />";
 
     private readonly string example4RazorCode = @"
-<BitTag Text=""Enabled"" Variant=""BitVariant.Outline"" />
-<BitTag Text=""Disabled"" Variant=""BitVariant.Outline"" IsEnabled=""false"" />";
-
-    private readonly string example5RazorCode = @"
-<BitTag Text=""Enabled"" Variant=""BitVariant.Text"" />
-<BitTag Text=""Disabled"" Variant=""BitVariant.Text"" IsEnabled=""false"" />";
-
-    private readonly string example6RazorCode = @"
-<BitTag Text=""Text"" IconName=""@BitIconName.Calendar"" />";
-
-    private readonly string example7RazorCode = @"
 @if (isDismissed is false)
 {
     <BitTag IconName=""@BitIconName.AlarmClock"" Text=""Dismiss me"" OnDismiss=""() => isDismissed = true"" />
@@ -241,31 +238,43 @@ public partial class BitTagDemo
 <BitButton IsEnabled=""isDismissed"" Variant=""BitVariant.Outline"" OnClick=""() => isDismissed = false"">
     Dismissed, click to reset
 </BitButton>";
-    private readonly string example7CsharpCode = @"
+    private readonly string example4CsharpCode = @"
 private bool isDismissed;";
 
-    private readonly string example8RazorCode = @"
-<BitTag Text=""Info"" IconName=""@BitIconName.Calendar"" Severity=""BitSeverity.Info"" />
-<BitTag Text=""Info"" IconName=""@BitIconName.Calendar"" Severity=""BitSeverity.Info"" Variant=""BitVariant.Outline"" />
-<BitTag Text=""Info"" IconName=""@BitIconName.Calendar"" Severity=""BitSeverity.Info"" Variant=""BitVariant.Text"" />
+    private readonly string example5RazorCode = @"
+<BitTag Text=""Primary"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Primary"" Variant=""BitVariant.Fill"" />
+<BitTag Text=""Primary"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Primary"" Variant=""BitVariant.Outline"" />
+<BitTag Text=""Primary"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Primary"" Variant=""BitVariant.Text"" />
 
-<BitTag Text=""Success"" IconName=""@BitIconName.Calendar"" Severity=""BitSeverity.Success"" />
-<BitTag Text=""Success"" IconName=""@BitIconName.Calendar"" Severity=""BitSeverity.Success"" Variant=""BitVariant.Outline"" />
-<BitTag Text=""Success"" IconName=""@BitIconName.Calendar"" Severity=""BitSeverity.Success"" Variant=""BitVariant.Text"" />
+<BitTag Text=""Secondary"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Secondary"" Variant=""BitVariant.Fill"" />
+<BitTag Text=""Secondary"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Secondary"" Variant=""BitVariant.Outline"" />
+<BitTag Text=""Secondary"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Secondary"" Variant=""BitVariant.Text"" />
 
-<BitTag Text=""Warning"" IconName=""@BitIconName.Calendar"" Severity=""BitSeverity.Warning"" />
-<BitTag Text=""Warning"" IconName=""@BitIconName.Calendar"" Severity=""BitSeverity.Warning"" Variant=""BitVariant.Outline"" />
-<BitTag Text=""Warning"" IconName=""@BitIconName.Calendar"" Severity=""BitSeverity.Warning"" Variant=""BitVariant.Text"" />
+<BitTag Text=""Tertiary"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Tertiary"" Variant=""BitVariant.Fill"" />
+<BitTag Text=""Tertiary"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Tertiary"" Variant=""BitVariant.Outline"" />
+<BitTag Text=""Tertiary"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Tertiary"" Variant=""BitVariant.Text"" />
 
-<BitTag Text=""SevereWarning"" IconName=""@BitIconName.Calendar"" Severity=""BitSeverity.SevereWarning"" />
-<BitTag Text=""SevereWarning"" IconName=""@BitIconName.Calendar"" Severity=""BitSeverity.SevereWarning"" Variant=""BitVariant.Outline"" />
-<BitTag Text=""SevereWarning"" IconName=""@BitIconName.Calendar"" Severity=""BitSeverity.SevereWarning"" Variant=""BitVariant.Text"" />
+<BitTag Text=""Info"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Info"" Variant=""BitVariant.Fill"" />
+<BitTag Text=""Info"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Info"" Variant=""BitVariant.Outline"" />
+<BitTag Text=""Info"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Info"" Variant=""BitVariant.Text"" />
 
-<BitTag Text=""Error"" IconName=""@BitIconName.Calendar"" Severity=""BitSeverity.Error"" />
-<BitTag Text=""Error"" IconName=""@BitIconName.Calendar"" Severity=""BitSeverity.Error"" Variant=""BitVariant.Outline"" />
-<BitTag Text=""Error"" IconName=""@BitIconName.Calendar"" Severity=""BitSeverity.Error"" Variant=""BitVariant.Text"" />";
+<BitTag Text=""Success"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Success"" Variant=""BitVariant.Fill"" />
+<BitTag Text=""Success"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Success"" Variant=""BitVariant.Outline"" />
+<BitTag Text=""Success"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Success"" Variant=""BitVariant.Text"" />
 
-    private readonly string example9RazorCode = @"
+<BitTag Text=""Warning"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Warning"" Variant=""BitVariant.Fill"" />
+<BitTag Text=""Warning"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Warning"" Variant=""BitVariant.Outline"" />
+<BitTag Text=""Warning"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Warning"" Variant=""BitVariant.Text"" />
+
+<BitTag Text=""SevereWarning"" IconName=""@BitIconName.Calendar"" Color=""BitColor.SevereWarning"" Variant=""BitVariant.Fill"" />
+<BitTag Text=""SevereWarning"" IconName=""@BitIconName.Calendar"" Color=""BitColor.SevereWarning"" Variant=""BitVariant.Outline"" />
+<BitTag Text=""SevereWarning"" IconName=""@BitIconName.Calendar"" Color=""BitColor.SevereWarning"" Variant=""BitVariant.Text"" />
+
+<BitTag Text=""Error"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Error"" Variant=""BitVariant.Fill"" />
+<BitTag Text=""Error"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Error"" Variant=""BitVariant.Outline"" />
+<BitTag Text=""Error"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Error"" Variant=""BitVariant.Text"" />";
+
+    private readonly string example6RazorCode = @"
 <BitTag>
     <BitStack Horizontal Gap=""0.5rem"" Style=""padding-inline: 0.5rem;"">
         <BitLabel>Custom content</BitLabel>
@@ -273,7 +282,7 @@ public partial class BitTagDemo
     </BitStack>
 </BitTag>";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example7RazorCode = @"
 <style>
     .custom-class {
         border-radius: 0.25rem;
@@ -291,47 +300,25 @@ public partial class BitTagDemo
         font-size: 1.25rem;
         font-weight: bolder;
     }
-
-    .custom-dismiss {
-        margin: 0.25rem;
-        border-radius: 50%;
-        border: 1px solid mediumpurple;
-    }
 </style>
 
 
 <BitTag Text=""Styled Tag""
         IconName=""@BitIconName.People""
         Style=""border-radius: 1rem; font-weight:bold"" />
+
 <BitTag Text=""Classed Tag""
         IconName=""@BitIconName.People""
         Class=""custom-class"" Variant=""BitVariant.Outline"" />
 
-@if (isDismissed2 is false)
-{
-    <BitTag Text=""Fill""
-            IconName=""@BitIconName.People""
-            OnDismiss=""() => isDismissed2 = true""
-            Styles=""@(new() { Root = ""border-color: darkblue; border-width: 0.25rem;"",
-                              Text = ""color: darkblue; font-weight: 600;"",
-                              DismissIcon = ""color: darkblue; font-weight: 600;"" })"" />
-}
 
-@if (isDismissed3 is false)
-{
-    <BitTag Text=""Outline""
-            IconName=""@BitIconName.People""
-            OnDismiss=""() => isDismissed3 = true""
-            Variant=""BitVariant.Outline""
-            Classes=""@(new() { Root = ""custom-root"",
-                               Icon = ""custom-icon"",
-                               DismissButton = ""custom-dismiss"" })"" />
-}
+<BitTag Text=""Styles""
+        IconName=""@BitIconName.People""
+        Styles=""@(new() { Root = ""border-color: darkblue; border-width: 0.25rem;"",
+                          Text = ""color: darkblue; font-weight: 600;"" })"" />
 
-<BitButton IsEnabled=""@(isDismissed3 && isDismissed2)"" Variant=""BitVariant.Outline"" OnClick=""() => isDismissed2 = isDismissed3 = false"">
-    Dismissed, click to reset
-</BitButton>";
-    private readonly string example10CsharpCode = @"
-private bool isDismissed2;
-private bool isDismissed3;";
+<BitTag Text=""Classes""
+        IconName=""@BitIconName.People""
+        Classes=""@(new() { Root = ""custom-root"",
+                           Icon = ""custom-icon"" })"" />";
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.scss
index c32a69f983..02f448dd03 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.scss
@@ -1,16 +1,4 @@
-.tags-container {
-    gap: 0.5rem;
-    display: flex;
-    flex-flow: row wrap;
-    align-items: flex-start;
-}
-
-.tags-container-grid {
-    gap: 0.5rem;
-    display: grid;
-}
-
-::deep {
+::deep {
     .custom-class {
         border-radius: 0.25rem;
         box-shadow: aqua 0 0 0.5rem;
@@ -27,10 +15,4 @@
         font-size: 1.25rem;
         font-weight: bolder;
     }
-
-    .custom-dismiss {
-        margin: 0.25rem;
-        border-radius: 50%;
-        border: 1px solid mediumpurple;
-    }
 }
\ No newline at end of file