diff --git a/src/Pure.Blazor.Components.Docs/Pure.Blazor.Components.Docs.csproj b/src/Pure.Blazor.Components.Docs/Pure.Blazor.Components.Docs.csproj
index 21d4b0c..df291cb 100644
--- a/src/Pure.Blazor.Components.Docs/Pure.Blazor.Components.Docs.csproj
+++ b/src/Pure.Blazor.Components.Docs/Pure.Blazor.Components.Docs.csproj
@@ -5,14 +5,14 @@
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.1" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0" PrivateAssets="all" />
-    <PackageReference Include="Serilog.Extensions.Logging" Version="8.0.0" />
-    <PackageReference Include="Serilog.Sinks.Console" Version="5.0.1" />
-    <PackageReference Include="Serilog.Sinks.Debug" Version="2.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.3"/>
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0" PrivateAssets="all"/>
+    <PackageReference Include="Serilog.Extensions.Logging" Version="8.0.0"/>
+    <PackageReference Include="Serilog.Sinks.Console" Version="5.0.1"/>
+    <PackageReference Include="Serilog.Sinks.Debug" Version="2.0.0"/>
   </ItemGroup>
   <ItemGroup>
-    <ProjectReference Include="..\Pure.Blazor.Components\Pure.Blazor.Components.csproj" />
+    <ProjectReference Include="..\Pure.Blazor.Components\Pure.Blazor.Components.csproj"/>
   </ItemGroup>
   <ItemGroup>
     <Content Update="wwwroot\app.css">
diff --git a/src/Pure.Blazor.Components.Docs/Shared/MainLayout.razor b/src/Pure.Blazor.Components.Docs/Shared/MainLayout.razor
index 8a9ae48..4610a21 100644
--- a/src/Pure.Blazor.Components.Docs/Shared/MainLayout.razor
+++ b/src/Pure.Blazor.Components.Docs/Shared/MainLayout.razor
@@ -1,10 +1,9 @@
 @inherits LayoutComponentBase
-@using Pure.Blazor.Components.Common
 @inject NavigationManager Nav
 @inject IElementUtils ElementUtils
 @inject ILogger<MainLayout> Log
 
-<PureHeader Title="pureblazor components">
+<PureHeader Title="pureblazor components" Accent="Accent.Brand" Height="PureSize.ExtraLarge">
     @* <PureDarkModeToggle /> *@
     <a aria-label="GitHub Repository" href="https://github.com/pureblazor/components" target="_blank" class="mr-5 hover:text-white cursor-pointer">
         <img src="GitHub-Mark-Light-64px.png" width="32" alt="GitHub logo"/>
@@ -17,6 +16,7 @@
 </article>
 
 @code {
+
     protected override void OnAfterRender(bool firstRender)
     {
         if (firstRender)
@@ -42,4 +42,4 @@
         }
     }
 
-}
\ No newline at end of file
+}
diff --git a/src/Pure.Blazor.Components/Common/Accent.cs b/src/Pure.Blazor.Components/Common/Accent.cs
index 23b93f7..758298f 100644
--- a/src/Pure.Blazor.Components/Common/Accent.cs
+++ b/src/Pure.Blazor.Components/Common/Accent.cs
@@ -6,5 +6,5 @@ public enum Accent
     Brand,
     Success,
     Danger,
-    Warning
+    Warning,
 }
diff --git a/src/Pure.Blazor.Components/Common/PureComponent.razor b/src/Pure.Blazor.Components/Common/PureComponent.razor
index be3f34a..f763e8b 100644
--- a/src/Pure.Blazor.Components/Common/PureComponent.razor
+++ b/src/Pure.Blazor.Components/Common/PureComponent.razor
@@ -3,11 +3,8 @@
 
     protected override void OnParametersSet()
     {
-        if (prevStyles != Styles)
-        {
-            prevStyles = Styles;
-            BuildCss();
-        }
+        // todo: figure out how to build css less
+        BuildCss();
     }
 
     [CascadingParameter] public ThemeProvider? ThemeProvider { get; set; } = new();
diff --git a/src/Pure.Blazor.Components/Layout/PureHeader.razor b/src/Pure.Blazor.Components/Layout/PureHeader.razor
index 555a3b9..e01dc8a 100644
--- a/src/Pure.Blazor.Components/Layout/PureHeader.razor
+++ b/src/Pure.Blazor.Components/Layout/PureHeader.razor
@@ -1,7 +1,8 @@
-@namespace Pure.Blazor.Components
+@inherits PureComponent
+@namespace Pure.Blazor.Components
 
-<header class="text-gray-400 bg-gray-900 body-font border-b border-slate-600">
-    <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
+<header class="@containerCss">
+    <div class="container mx-auto flex flex-wrap flex-col md:flex-row items-center @innerContainerCss">
         <a class="flex title-font font-medium items-center text-gray-100" href="/">
             <span class="text-xl">@Title</span>
         </a>
@@ -14,9 +15,35 @@
 </header>
 
 @code {
-    [Parameter]
-    public string Title { get; set; }
+    private string containerCss = "";
+    private string innerContainerCss = "";
+
+    [Parameter] public string? Title { get; set; }
+
+    [Parameter] public string ContainerCss { get; set; } = "text-gray-200 bg-brand-900 body-font border-b border-brand-600";
+
+    [Parameter] public Accent Accent { get; set; } = Accent.Brand;
+
+    [Parameter] public PureSize Height { get; set; } = PureSize.Medium;
+
+    protected override void BuildCss()
+    {
+        containerCss = Accent switch
+        {
+            Accent.Default => "text-gray-400 bg-gray-900 body-font border-b border-slate-600",
+            Accent.Brand => "text-gray-200 bg-brand-900 body-font border-b border-brand-600",
+            _ => ""
+        };
+
+        innerContainerCss = Height switch
+        {
+            PureSize.ExtraSmall => "px-5 py-1",
+            PureSize.Small => "px-5 py-2",
+            PureSize.Medium => "px-5 py-3",
+            PureSize.Large => "px-5 py-5",
+            PureSize.ExtraLarge => "px-5 py-6",
+            _ => ""
+        };
+    }
 
-    [Parameter]
-    public RenderFragment? ChildContent { get; set; }
 }