diff --git a/docs/images/progress/demo.png b/docs/images/progress/demo.png
index 8257b78..bb17ac7 100644
Binary files a/docs/images/progress/demo.png and b/docs/images/progress/demo.png differ
diff --git a/docs/images/progress/demo_old.png b/docs/images/progress/demo_old.png
new file mode 100644
index 0000000..8257b78
Binary files /dev/null and b/docs/images/progress/demo_old.png differ
diff --git a/src/Blashing.Client/Blashing.Client.csproj b/src/Blashing.Client/Blashing.Client.csproj
index efcc8a9..668c248 100644
--- a/src/Blashing.Client/Blashing.Client.csproj
+++ b/src/Blashing.Client/Blashing.Client.csproj
@@ -15,6 +15,7 @@
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.8" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.8" PrivateAssets="all" />
+    <PackageReference Include="Excubo.Blazor.Grids" Version="3.1.14" />
   </ItemGroup>
 
   <ItemGroup>
@@ -22,4 +23,8 @@
       <GlobalPropertiesToRemove></GlobalPropertiesToRemove>
     </ProjectReference>
   </ItemGroup>
+
+  <!--<ItemGroup>
+    <None Update="Pages/*.razor.css" CssScope="inherit-scope" />
+  </ItemGroup>-->
 </Project>
diff --git a/src/Blashing.Client/Pages/Demo.razor b/src/Blashing.Client/Pages/Demo.razor
index 9fb126a..0fb4d9c 100644
--- a/src/Blashing.Client/Pages/Demo.razor
+++ b/src/Blashing.Client/Pages/Demo.razor
@@ -1,33 +1,47 @@
+@using Excubo.Blazor.Grids
+
 @page "/demo"
+
 <PageTitle>Demo</PageTitle>
 
 <h3>Demo</h3>
 
-<div class="container">
+@*<div class="container">
     <div class="row">
-        <div class="col-md-9">
-            <div class="row">
-                    <div class="col-md-9">
-                        <TextWidget Title="Hello" Text="This is your shiny new dashboard" MoreInfo="Protio: You can drag the widgets around!" UpdatedAtMessage=""/>
-                    </div>
-                    <div class="col-md-3">
-                        <MeterWidget Title="Synergy" MoreInfo="" UpdatedAtMessage="Last updated at 0:00" />
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col-md-3">
-                        <NumberWidget Title="Current Valuation" Current="$27" Difference="⬇️ 46%" MoreInfo="in billions" UpdatedAtMessage="Last updated at 0:00"/>
-                    </div>
-                    <div class="col-md-9">
-                        <GraphWidget Title="Convergence" MoreInfo=""/>
-                    </div>
-                </div>
-        </div>
-        <div class="col-md-3">
-            <ListWidget Title="Buzzwords" MoreInfo="# of times said around the office" UpdatedAtMessage="Last updated at 0:00" Items="@Items" />
-        </div>
+        <div class="col">*@
+
+            <Dashboard AspectRatio="1.5" style="height: 750px" ColumnCount="4">
+
+                <Element Row="0" Column="0" ColumnSpan="2" style="border: none; box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0,0,0,.12)">
+                    @*<div style="height: 100%; width: 100%; background-color: #ec663c"></div>*@
+                    <TextWidget Title="Hello" Text="This is your shiny new dashboard" MoreInfo="Protip: You can drag the widgets around!" UpdatedAtMessage="" />
+                </Element>
+
+                <Element Row="0" Column="2" style="border: none; box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0,0,0,.12)">
+                    @*<div style="height: 100%; width: 100%; background-color: #9c4274"></div>*@
+                    <MeterWidget Title="Synergy" MoreInfo="" UpdatedAtMessage="Last updated at 0:00" />
+                </Element>
+
+                <Element Row="0" Column="3" RowSpan="2" style="border: none; box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0,0,0,.12)">
+                    @*<div style="height: 100%; width: 100%; background-color: #12b0c5"></div>*@
+                    <ListWidget Title="Buzzwords" MoreInfo="# of times said around the office" UpdatedAtMessage="Last updated at 0:00" Items="@Items" />
+                </Element>
+
+                <Element Row="1" Column="0" style="border: none; box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0,0,0,.12)">
+                    @*<div style="height: 100%; width: 100%; background-color: #47bbb3"></div>*@
+                    <NumberWidget Title="Current Valuation" Current="$27" Difference="⬇️ 46%" MoreInfo="in billions" UpdatedAtMessage="Last updated at 0:00" />
+                </Element>
+
+                <Element Row="1" Column="1" ColumnSpan="2" style="border: none; box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0,0,0,.12)">
+                    @*<div style="height: 100%; width: 100%; background-color: #dc5945"></div>*@
+                    <GraphWidget Title="Convergence" MoreInfo="" />
+                </Element>
+
+            </Dashboard>
+
+        @*</div>
     </div>
-</div>
+</div>*@
 
 @code {
     List<(string label, string value)>? Items = new() { ("Turn-key", "0"), ("Synergy", "4"), ("Exit strategy", "11"), ("Paridigm shift", "3"), ("Enterprise", "20"), ("Pivoting", "7"), ("Web 2.0", "16"), ("Leverage", "25"), ("Streamlininess", "9") };