diff --git a/src/Blashing.Core/Components/List/ListWidget.razor b/src/Blashing.Core/Components/List/ListWidget.razor
index fba1ce5..bd2fad4 100644
--- a/src/Blashing.Core/Components/List/ListWidget.razor
+++ b/src/Blashing.Core/Components/List/ListWidget.razor
@@ -5,7 +5,7 @@
     
     @if (Ordered) {
     <ol>
-    @foreach (var item in Items)
+    @foreach (var item in Items ?? Enumerable.Empty<(string label, string value)>())
     {
       <li>
         <span class="label">@item.label</span>
@@ -15,7 +15,7 @@
     </ol>
     } else {
     <ul class="list-nostyle">
-    @foreach (var item in Items)
+    @foreach (var item in Items ?? Enumerable.Empty<(string label, string value)>())
     {
       <li>
         <span class="label">@item.label</span>
diff --git a/src/Blashing.Shared/Pages/AdditionalWidgets.razor b/src/Blashing.Shared/Pages/AdditionalWidgets.razor
index 519e1ed..90383f9 100644
--- a/src/Blashing.Shared/Pages/AdditionalWidgets.razor
+++ b/src/Blashing.Shared/Pages/AdditionalWidgets.razor
@@ -29,7 +29,7 @@
                 State="SUCCESS"
                 Time="1h 36m ago"
                 UpdatedAtMessage="Last updated at 0:00"
-                BackgroundColor="#8fb347">
+                WidgetClass="@CircleCIWidgetClass.Passed">
             </CircleCIBuildStatusWidget>
             
         </div>
@@ -45,11 +45,11 @@
     </Element>
     
     <Element Row="0" Column="1">
-        <ServerStatusSquareWidget Title="Success" UpdatedAtMessage="Last updated at 0:00" BackgroundColor="#96BF48"></ServerStatusSquareWidget>
+        <ServerStatusSquareWidget Title="Success" UpdatedAtMessage="Last updated at 0:00" Result="true"></ServerStatusSquareWidget>
     </Element>
     
     <Element Row="0" Column="2">
-        <ServerStatusSquareWidget Title="Failed" UpdatedAtMessage="Last updated at 0:00" BackgroundColor="#BF4848"></ServerStatusSquareWidget>
+        <ServerStatusSquareWidget Title="Failed" UpdatedAtMessage="Last updated at 0:00" Result="false"></ServerStatusSquareWidget>
     </Element>
     
     <Element Row="1" Column="0">
@@ -62,7 +62,7 @@
             State="SUCCESS"
             Time="1h 36m ago"
             UpdatedAtMessage="Last updated at 0:00"
-            BackgroundColor="#8fb347">
+            WidgetClass="@CircleCIWidgetClass.Passed">
         </CircleCIBuildStatusWidget>
     </Element>
     
diff --git a/src/Blashing.Stories/Stories/CircleCIBuildStatusWidget.stories.razor b/src/Blashing.Stories/Stories/CircleCIBuildStatusWidget.stories.razor
index 2ba79ff..bc00238 100644
--- a/src/Blashing.Stories/Stories/CircleCIBuildStatusWidget.stories.razor
+++ b/src/Blashing.Stories/Stories/CircleCIBuildStatusWidget.stories.razor
@@ -6,6 +6,7 @@
 
     <ArgType For="_ => _.Title" Control="ControlType.Default" />
     <ArgType For="_ => _.UpdatedAtMessage" Control="ControlType.Default" />
+    <ArgType For="_ => _.WidgetClass" Control="ControlType.Default" />
 
     <Story Name="Default">
 
@@ -39,7 +40,7 @@
             <Arg For="_ => _.State" Value='"FAILED"' />
             <Arg For="_ => _.Time" Value='"2h 4m ago"' />
             <Arg For="_ => _.UpdatedAtMessage" Value='@DateTime.Now.ToLongDateString()' />
-            <Arg For="_ => _.BackgroundColor" Value='"#a31f1f"' />
+            <Arg For="_ => _.WidgetClass" Value='CircleCIWidgetClass.Failed' />
         </Arguments>
         
         <Template>
@@ -60,7 +61,7 @@
             <Arg For="_ => _.State" Value='"PENDING"' />
             <Arg For="_ => _.Time" Value='"22h 22m ago"' />
             <Arg For="_ => _.UpdatedAtMessage" Value='@DateTime.Now.ToLongDateString()' />
-            <Arg For="_ => _.BackgroundColor" Value='"#47bbb3"' />
+            <Arg For="_ => _.WidgetClass" Value='CircleCIWidgetClass.Pending' />
         </Arguments>
     
         <Template>
@@ -81,7 +82,7 @@
             <Arg For="_ => _.State" Value='"SUCCESS"' />
             <Arg For="_ => _.Time" Value='"1h 36m ago"' />
             <Arg For="_ => _.UpdatedAtMessage" Value='@DateTime.Now.ToLongDateString()' />
-            <Arg For="_ => _.BackgroundColor" Value='"#8fb347"' />
+            <Arg For="_ => _.WidgetClass" Value='CircleCIWidgetClass.Passed' />
         </Arguments>
     
         <Template>
diff --git a/src/Blashing.Stories/Stories/ServerStatusSquareWidget.stories.razor b/src/Blashing.Stories/Stories/ServerStatusSquareWidget.stories.razor
index 4adbd27..8c54760 100644
--- a/src/Blashing.Stories/Stories/ServerStatusSquareWidget.stories.razor
+++ b/src/Blashing.Stories/Stories/ServerStatusSquareWidget.stories.razor
@@ -7,6 +7,7 @@
 
     <ArgType For="_ => _.Title" Control="ControlType.Default" />
     <ArgType For="_ => _.UpdatedAtMessage" Control="ControlType.Default" />
+    <ArgType For="_ => _.Result" Control="ControlType.Default" />
 
     <Story Name="Default">
 
@@ -28,7 +29,7 @@
         <Arguments>
             <Arg For="_ => _.Title" Value='"Server Up"' />
             <Arg For="_ => _.UpdatedAtMessage" Value='@DateTime.Now.ToLongDateString()' />
-            <Arg For="_ => _.BackgroundColor" Value='"#96BF48"' />
+            <Arg For="_ => _.Result" Value='true' />
         </Arguments>
 
         <Template>
@@ -43,7 +44,7 @@
         <Arguments>
             <Arg For="_ => _.Title" Value='"Server Down"' />
             <Arg For="_ => _.UpdatedAtMessage" Value='@DateTime.Now.ToLongDateString()' />
-            <Arg For="_ => _.BackgroundColor" Value='"#BF4848"' />
+            <Arg For="_ => _.Result" Value='false' />
         </Arguments>
 
         <Template>
diff --git a/src/Blashing.Widgets.Tests/CircleCIBuildStatusWidgetTest.cs b/src/Blashing.Widgets.Tests/CircleCIBuildStatusWidgetTest.cs
index c89ac48..650527f 100644
--- a/src/Blashing.Widgets.Tests/CircleCIBuildStatusWidgetTest.cs
+++ b/src/Blashing.Widgets.Tests/CircleCIBuildStatusWidgetTest.cs
@@ -117,4 +117,56 @@ public void CircleCIBuildStatusWidgetShouldContainPassedInValues()
         Assert.Equal(circleCIBuildStatusWidget.State, state);
         Assert.Equal(circleCIBuildStatusWidget.Time, time);
     }
+
+    [Fact]
+    public void CircleCIBuildStatusWidgetWidgetClassFailedShouldSetRedBackgroundColor()
+    {
+        var cut = Render<CircleCIBuildStatusWidget>(parameters => parameters
+            .Add(p => p.Title, "Payment Service")
+            .Add(p => p.WidgetClass, CircleCIWidgetClass.Failed)
+        );
+
+        var circleCIBuildStatusWidget = cut.Instance;
+        Assert.Equal(CircleCIWidgetClass.Failed, circleCIBuildStatusWidget.WidgetClass);
+        Assert.Equal("#a31f1f", circleCIBuildStatusWidget.BackgroundColor);
+    }
+
+    [Fact]
+    public void CircleCIBuildStatusWidgetWidgetClassPendingShouldSetPendingBackgroundColor()
+    {
+        var cut = Render<CircleCIBuildStatusWidget>(parameters => parameters
+            .Add(p => p.Title, "Dashboard")
+            .Add(p => p.WidgetClass, CircleCIWidgetClass.Pending)
+        );
+
+        var circleCIBuildStatusWidget = cut.Instance;
+        Assert.Equal(CircleCIWidgetClass.Pending, circleCIBuildStatusWidget.WidgetClass);
+        Assert.Equal("#47bbb3", circleCIBuildStatusWidget.BackgroundColor);
+    }
+
+    [Fact]
+    public void CircleCIBuildStatusWidgetWidgetClassPassedShouldSetGreenBackgroundColor()
+    {
+        var cut = Render<CircleCIBuildStatusWidget>(parameters => parameters
+            .Add(p => p.Title, "GoCardless")
+            .Add(p => p.WidgetClass, CircleCIWidgetClass.Passed)
+        );
+
+        var circleCIBuildStatusWidget = cut.Instance;
+        Assert.Equal(CircleCIWidgetClass.Passed, circleCIBuildStatusWidget.WidgetClass);
+        Assert.Equal("#8fb347", circleCIBuildStatusWidget.BackgroundColor);
+    }
+
+    [Fact]
+    public void CircleCIBuildStatusWidgetExplicitBackgroundColorOverridesWidgetClass()
+    {
+        var cut = Render<CircleCIBuildStatusWidget>(parameters => parameters
+            .Add(p => p.Title, "GoCardless")
+            .Add(p => p.WidgetClass, CircleCIWidgetClass.Failed)
+            .Add(p => p.BackgroundColor, "#123456")
+        );
+
+        var circleCIBuildStatusWidget = cut.Instance;
+        Assert.Equal("#123456", circleCIBuildStatusWidget.BackgroundColor);
+    }
 }
\ No newline at end of file
diff --git a/src/Blashing.Widgets.Tests/ServerStatusSquareWidgetTest.cs b/src/Blashing.Widgets.Tests/ServerStatusSquareWidgetTest.cs
index 6cb05a9..f120e97 100644
--- a/src/Blashing.Widgets.Tests/ServerStatusSquareWidgetTest.cs
+++ b/src/Blashing.Widgets.Tests/ServerStatusSquareWidgetTest.cs
@@ -46,4 +46,43 @@ public void ServerStatusSquareWidgetShouldContainPassedInValues()
         Assert.Equal(serverStatusSquareWidget.Title, title);
         Assert.Equal(serverStatusSquareWidget.UpdatedAtMessage, updatedAtMessage);
     }
+
+    [Fact]
+    public void ServerStatusSquareWidgetResultUpShouldSetGreenBackgroundColor()
+    {
+        var cut = Render<ServerStatusSquareWidget>(parameters => parameters
+            .Add(p => p.Title, "Server Up")
+            .Add(p => p.Result, true)
+        );
+
+        var serverStatusSquareWidget = cut.Instance;
+        Assert.Equal(true, serverStatusSquareWidget.Result);
+        Assert.Equal("#96BF48", serverStatusSquareWidget.BackgroundColor);
+    }
+
+    [Fact]
+    public void ServerStatusSquareWidgetResultDownShouldSetRedBackgroundColor()
+    {
+        var cut = Render<ServerStatusSquareWidget>(parameters => parameters
+            .Add(p => p.Title, "Server Down")
+            .Add(p => p.Result, false)
+        );
+
+        var serverStatusSquareWidget = cut.Instance;
+        Assert.Equal(false, serverStatusSquareWidget.Result);
+        Assert.Equal("#BF4848", serverStatusSquareWidget.BackgroundColor);
+    }
+
+    [Fact]
+    public void ServerStatusSquareWidgetExplicitBackgroundColorOverridesResult()
+    {
+        var cut = Render<ServerStatusSquareWidget>(parameters => parameters
+            .Add(p => p.Title, "Server Up")
+            .Add(p => p.Result, true)
+            .Add(p => p.BackgroundColor, "#123456")
+        );
+
+        var serverStatusSquareWidget = cut.Instance;
+        Assert.Equal("#123456", serverStatusSquareWidget.BackgroundColor);
+    }
 }
\ No newline at end of file
diff --git a/src/Blashing.Widgets/CircleCIBuildStatus/CircleCIBuildStatusWidget.razor.cs b/src/Blashing.Widgets/CircleCIBuildStatus/CircleCIBuildStatusWidget.razor.cs
index e640549..6a95c2b 100644
--- a/src/Blashing.Widgets/CircleCIBuildStatus/CircleCIBuildStatusWidget.razor.cs
+++ b/src/Blashing.Widgets/CircleCIBuildStatus/CircleCIBuildStatusWidget.razor.cs
@@ -3,6 +3,13 @@
 
 namespace Blashing.Widgets.CircleCIBuildStatus;
 
+public enum CircleCIWidgetClass
+{
+    Failed,
+    Pending,
+    Passed
+}
+
 public partial class CircleCIBuildStatusWidget : BaseWidget
 {
     [Parameter]
@@ -31,9 +38,22 @@ public partial class CircleCIBuildStatusWidget : BaseWidget
     
     [Parameter]
     public string? Time { get; set; }
+
+    [Parameter]
+    public CircleCIWidgetClass? WidgetClass { get; set; }
     
     protected override void OnParametersSet()
     {
+        if (WidgetClass.HasValue && BackgroundColor == null)
+        {
+            BackgroundColor = WidgetClass.Value switch
+            {
+                CircleCIWidgetClass.Failed => "#a31f1f",
+                CircleCIWidgetClass.Pending => "#47bbb3",
+                CircleCIWidgetClass.Passed => "#8fb347",
+                _ => null
+            };
+        }
         BackgroundColor ??= "#8fb347";
     }
 }
\ No newline at end of file
diff --git a/src/Blashing.Widgets/ServerStatusSquares/ServerStatusSquareWidget.razor.cs b/src/Blashing.Widgets/ServerStatusSquares/ServerStatusSquareWidget.razor.cs
index 5171457..4c8793d 100644
--- a/src/Blashing.Widgets/ServerStatusSquares/ServerStatusSquareWidget.razor.cs
+++ b/src/Blashing.Widgets/ServerStatusSquares/ServerStatusSquareWidget.razor.cs
@@ -11,8 +11,15 @@ public partial class ServerStatusSquareWidget : BaseWidget
     [Parameter]
     public string? UpdatedAtMessage { get; set; }
 
+    [Parameter]
+    public bool? Result { get; set; }
+
     protected override void OnParametersSet()
     {
+        if (Result.HasValue && BackgroundColor == null)
+        {
+            BackgroundColor = Result.Value ? "#96BF48" : "#BF4848";
+        }
         BackgroundColor ??= "#12b0c5";
     }
 }
\ No newline at end of file