diff --git a/ColourMeOKGame/Assets/Scenes/GameScene.unity b/ColourMeOKGame/Assets/Scenes/GameScene.unity
index 1298f4d..87fe1f5 100644
--- a/ColourMeOKGame/Assets/Scenes/GameScene.unity
+++ b/ColourMeOKGame/Assets/Scenes/GameScene.unity
@@ -133,6 +133,7 @@ GameObject:
   - component: {fileID: 133964672}
   - component: {fileID: 133964671}
   - component: {fileID: 133964676}
+  - component: {fileID: 133964677}
   - component: {fileID: 133964673}
   - component: {fileID: 133964674}
   - component: {fileID: 133964675}
@@ -227,6 +228,21 @@ MonoBehaviour:
   m_Name: 
   m_EditorClassIdentifier: 
   state: 0
+--- !u!114 &133964677
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 133964670}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: f52665dbd9934a3cabe2e8a0d89059bd, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  lightness: 0
+  chroma: 0
+  hue: 0
 --- !u!1 &447905425
 GameObject:
   m_ObjectHideFlags: 0
diff --git a/ColourMeOKGame/Assets/Scripts/Backend.cs b/ColourMeOKGame/Assets/Scripts/Backend.cs
index 31e4e42..7995ff5 100644
--- a/ColourMeOKGame/Assets/Scripts/Backend.cs
+++ b/ColourMeOKGame/Assets/Scripts/Backend.cs
@@ -341,6 +341,7 @@ public void RegisterOnSignOutCallback(Action callback)
             return;
         }
 
+        // logging in
         _auth.SignInWithEmailAndPasswordAsync(email, password)
             .ContinueWithOnMainThread(signInTask =>
             {
diff --git a/ColourMeOKGame/Assets/Scripts/Colorimetry.cs b/ColourMeOKGame/Assets/Scripts/Colorimetry.cs
index bf5ce52..8b19f80 100644
--- a/ColourMeOKGame/Assets/Scripts/Colorimetry.cs
+++ b/ColourMeOKGame/Assets/Scripts/Colorimetry.cs
@@ -1,7 +1,33 @@
 using System;
+using UnityEngine;
 
 public static class Colorimetry
 {
+    /// <summary>
+    ///     convert the oklch colour to a unity rgba colour object
+    /// </summary>
+    /// <returns>a unity rgba color object</returns>
+    public static Color RawLchToColor(double lightness, double chroma, double hue)
+    {
+        // clamp values
+        var cL = Math.Clamp(lightness / 100.0d, 0d, 1d);
+        var cC = Math.Clamp(chroma, 0d, 0.5d);
+        var cH = Math.Clamp(hue, 0d, 360d);
+
+        // convert [OKL]Ch to [OKL]ab
+        var hueRadians = cH * Math.PI / 180.0d;
+        var a = cC * Math.Cos(hueRadians);
+        var b = cC * Math.Sin(hueRadians);
+
+        // bring it to linear sRGB, clip it, then bring it back to non-linear sRGB
+        var lsrgb = oklab_to_linear_srgb(new Lab((float)cL, (float)a, (float)b));
+        var clippedLsrgb = gamut_clip_preserve_chroma(lsrgb);
+        return new Color(
+            Math.Clamp((float)srgb_nonlinear_transform_f(clippedLsrgb.r), 0.0f, 1.0f),
+            Math.Clamp((float)srgb_nonlinear_transform_f(clippedLsrgb.g), 0.0f, 1.0f),
+            Math.Clamp((float)srgb_nonlinear_transform_f(clippedLsrgb.b), 0.0f, 1.0f));
+    }
+
     /// <summary>
     ///     transform a linear srgb value to a non-linear srgb value
     /// </summary>
diff --git a/ColourMeOKGame/Assets/Scripts/DemoOklchColourPicker.cs b/ColourMeOKGame/Assets/Scripts/DemoOklchColourPicker.cs
new file mode 100644
index 0000000..186f336
--- /dev/null
+++ b/ColourMeOKGame/Assets/Scripts/DemoOklchColourPicker.cs
@@ -0,0 +1,23 @@
+using UnityEngine.UIElements;
+
+public class DemoOklchColourPicker : OklchColourPickerUI
+{
+    /// <summary>
+    ///     initialise the ui elements and register change event callbacks functions
+    /// </summary>
+    public new void OnEnable()
+    {
+        var ui = GetComponent<UIDocument>().rootVisualElement;
+
+        LightnessSlider = ui.Q<Slider>("DemoResponseLightnessSlider");
+        LightnessSlider.RegisterCallback<ChangeEvent<float>>(OnLightnessChange);
+
+        ChromaSlider = ui.Q<Slider>("DemoResponseChromaSlider");
+        ChromaSlider.RegisterCallback<ChangeEvent<float>>(OnChromaChange);
+
+        HueSlider = ui.Q<Slider>("DemoResponseHueSlider");
+        HueSlider.RegisterCallback<ChangeEvent<float>>(OnHueChange);
+
+        ResponseColour = ui.Q<VisualElement>("DemoResponseColour");
+    }
+}
\ No newline at end of file
diff --git a/ColourMeOKGame/Assets/Scripts/DemoOklchColourPicker.cs.meta b/ColourMeOKGame/Assets/Scripts/DemoOklchColourPicker.cs.meta
new file mode 100644
index 0000000..a24de25
--- /dev/null
+++ b/ColourMeOKGame/Assets/Scripts/DemoOklchColourPicker.cs.meta
@@ -0,0 +1,3 @@
+fileFormatVersion: 2
+guid: f52665dbd9934a3cabe2e8a0d89059bd
+timeCreated: 1731870685
\ No newline at end of file
diff --git a/ColourMeOKGame/Assets/Scripts/OklchColourPickerUI.cs b/ColourMeOKGame/Assets/Scripts/OklchColourPickerUI.cs
index 9cbf454..aa02eb4 100644
--- a/ColourMeOKGame/Assets/Scripts/OklchColourPickerUI.cs
+++ b/ColourMeOKGame/Assets/Scripts/OklchColourPickerUI.cs
@@ -25,31 +25,31 @@ public class OklchColourPickerUI : MonoBehaviour
     /// <summary>
     ///     slider for the chroma value
     /// </summary>
-    private Slider _chromaSlider;
+    protected Slider ChromaSlider;
 
     /// <summary>
     ///     slider for the hue value
     /// </summary>
-    private Slider _hueSlider;
+    protected Slider HueSlider;
 
     /// <summary>
     ///     slider for the lightness value
     /// </summary>
-    private Slider _lightnessSlider;
+    protected Slider LightnessSlider;
 
     /// <summary>
     ///     visual element for the response colour preview
     /// </summary>
-    private VisualElement _responseColour;
+    protected VisualElement ResponseColour;
 
     /// <summary>
     ///     modify state of initialised variables
     /// </summary>
     private void Start()
     {
-        _lightnessSlider.value = 74.61f;
-        _chromaSlider.value = 0.0868f;
-        _hueSlider.value = 335.72f;
+        LightnessSlider.value = 74.61f;
+        ChromaSlider.value = 0.0868f;
+        HueSlider.value = 335.72f;
     }
 
     /// <summary>
@@ -59,72 +59,45 @@ public void OnEnable()
     {
         var ui = GetComponent<UIDocument>().rootVisualElement;
 
-        _lightnessSlider = ui.Q<Slider>("ResponseLightnessSlider");
-        _lightnessSlider.RegisterCallback<ChangeEvent<float>>(OnLightnessChange);
+        LightnessSlider = ui.Q<Slider>("ResponseLightnessSlider");
+        LightnessSlider.RegisterCallback<ChangeEvent<float>>(OnLightnessChange);
 
-        _chromaSlider = ui.Q<Slider>("ResponseChromaSlider");
-        _chromaSlider.RegisterCallback<ChangeEvent<float>>(OnChromaChange);
+        ChromaSlider = ui.Q<Slider>("ResponseChromaSlider");
+        ChromaSlider.RegisterCallback<ChangeEvent<float>>(OnChromaChange);
 
-        _hueSlider = ui.Q<Slider>("ResponseHueSlider");
-        _hueSlider.RegisterCallback<ChangeEvent<float>>(OnHueChange);
+        HueSlider = ui.Q<Slider>("ResponseHueSlider");
+        HueSlider.RegisterCallback<ChangeEvent<float>>(OnHueChange);
 
-        _responseColour = ui.Q<VisualElement>("ResponseColour");
+        ResponseColour = ui.Q<VisualElement>("ResponseColour");
     }
 
     /// <summary>
     ///     handle lightness slider change
     /// </summary>
     /// <param name="evt">change event</param>
-    private void OnLightnessChange(ChangeEvent<float> evt)
+    protected void OnLightnessChange(ChangeEvent<float> evt)
     {
         lightness = Math.Clamp(evt.newValue, 0d, 100d);
-        _responseColour.style.backgroundColor = ToColor();
+        ResponseColour.style.backgroundColor = Colorimetry.RawLchToColor(lightness, chroma, hue);
     }
 
     /// <summary>
     ///     handle chroma slider change
     /// </summary>
     /// <param name="evt">change event</param>
-    private void OnChromaChange(ChangeEvent<float> evt)
+    protected void OnChromaChange(ChangeEvent<float> evt)
     {
         chroma = Math.Clamp(evt.newValue, 0d, 0.5d);
-        _responseColour.style.backgroundColor = ToColor();
+        ResponseColour.style.backgroundColor = Colorimetry.RawLchToColor(lightness, chroma, hue);
     }
 
     /// <summary>
     ///     handle hue slider change
     /// </summary>
     /// <param name="evt">change event</param>
-    private void OnHueChange(ChangeEvent<float> evt)
+    protected void OnHueChange(ChangeEvent<float> evt)
     {
         hue = Math.Clamp(evt.newValue, 0d, 360d);
-        _responseColour.style.backgroundColor = ToColor();
-    }
-
-    /// <summary>
-    ///     convert the oklch colour to a unity rgba colour object
-    /// </summary>
-    /// <returns>a unity rgba color object</returns>
-    private Color ToColor()
-    {
-        // clamp values
-        var cL = Math.Clamp(lightness / 100.0d, 0d, 1d);
-        var cC = Math.Clamp(chroma, 0d, 0.5d);
-        var cH = Math.Clamp(hue, 0d, 360d);
-
-        // convert [OKL]Ch to [OKL]ab
-        var hueRadians = cH * Math.PI / 180.0d;
-        var a = cC * Math.Cos(hueRadians);
-        var b = cC * Math.Sin(hueRadians);
-
-        // bring it to linear sRGB, clip it, then bring it back to non-linear sRGB
-        var lsrgb = Colorimetry.oklab_to_linear_srgb(new Colorimetry.Lab((float)cL, (float)a, (float)b));
-        var clippedLsrgb = Colorimetry.gamut_clip_preserve_chroma(lsrgb);
-        var srgb = new Color(
-            Math.Clamp((float)Colorimetry.srgb_nonlinear_transform_f(clippedLsrgb.r), 0.0f, 1.0f),
-            Math.Clamp((float)Colorimetry.srgb_nonlinear_transform_f(clippedLsrgb.g), 0.0f, 1.0f),
-            Math.Clamp((float)Colorimetry.srgb_nonlinear_transform_f(clippedLsrgb.b), 0.0f, 1.0f));
-
-        return srgb;
+        ResponseColour.style.backgroundColor = Colorimetry.RawLchToColor(lightness, chroma, hue);
     }
 }
\ No newline at end of file
diff --git a/ColourMeOKGame/Assets/Scripts/SideViewUI.cs b/ColourMeOKGame/Assets/Scripts/SideViewUI.cs
index 7aa2c88..b6813d5 100644
--- a/ColourMeOKGame/Assets/Scripts/SideViewUI.cs
+++ b/ColourMeOKGame/Assets/Scripts/SideViewUI.cs
@@ -88,7 +88,7 @@ private void OnEnable()
     /// </summary>
     private static void OnPlayButtonClicked()
     {
-        GameManager.Instance.ui.SetDisplayState(UIManager.DisplayState.PlayView);
+        GameManager.Instance.ui.SetDisplayState(UIManager.DisplayState.GameView);
     }
 
     /// <summary>
diff --git a/ColourMeOKGame/Assets/Scripts/UIManager.cs b/ColourMeOKGame/Assets/Scripts/UIManager.cs
index a7ed4ea..af59413 100644
--- a/ColourMeOKGame/Assets/Scripts/UIManager.cs
+++ b/ColourMeOKGame/Assets/Scripts/UIManager.cs
@@ -1,5 +1,4 @@
-using System;
-using UnityEngine;
+using UnityEngine;
 using UnityEngine.UIElements;
 
 public class UIManager : MonoBehaviour
@@ -10,8 +9,9 @@ public class UIManager : MonoBehaviour
     public enum DisplayState
     {
         UnassociatedState,
-        Nothing,
-        PlayView,
+        DefaultView,
+        GameView,
+        ResultsView,
         LeaderboardView,
         AccountView
     }
@@ -56,7 +56,7 @@ private void Awake()
     /// </summary>
     private void Start()
     {
-        SetDisplayState(DisplayState.Nothing);
+        SetDisplayState(DisplayState.DefaultView);
     }
 
     /// <summary>
@@ -85,39 +85,40 @@ public void SetDisplayState(DisplayState newDisplayState)
 
         Debug.Log($"switching from {currentDisplayState} to {newDisplayState}");
 
+        var defaultView = UI.Q<VisualElement>("DefaultView");
         var gameView = UI.Q<VisualElement>("GameView");
+        var resultsView = UI.Q<VisualElement>("ResultsView");
         var leaderboardView = UI.Q<VisualElement>("LeaderboardView");
         var accountView = UI.Q<VisualElement>("AccountView");
 
-        switch (newDisplayState)
+        defaultView.style.display = newDisplayState switch
         {
-            case DisplayState.Nothing:
-                gameView.style.display = DisplayStyle.None;
-                leaderboardView.style.display = DisplayStyle.None;
-                accountView.style.display = DisplayStyle.None;
-                break;
+            DisplayState.DefaultView => DisplayStyle.Flex,
+            _ => DisplayStyle.None
+        };
 
-            case DisplayState.PlayView:
-                gameView.style.display = DisplayStyle.Flex;
-                leaderboardView.style.display = DisplayStyle.None;
-                accountView.style.display = DisplayStyle.None;
-                break;
+        gameView.style.display = newDisplayState switch
+        {
+            DisplayState.GameView => DisplayStyle.Flex,
+            _ => DisplayStyle.None
+        };
 
-            case DisplayState.LeaderboardView:
-                gameView.style.display = DisplayStyle.None;
-                leaderboardView.style.display = DisplayStyle.Flex;
-                accountView.style.display = DisplayStyle.None;
-                break;
+        resultsView.style.display = newDisplayState switch
+        {
+            DisplayState.ResultsView => DisplayStyle.Flex,
+            _ => DisplayStyle.None
+        };
 
-            case DisplayState.AccountView:
-                gameView.style.display = DisplayStyle.None;
-                leaderboardView.style.display = DisplayStyle.None;
-                accountView.style.display = DisplayStyle.Flex;
-                break;
+        leaderboardView.style.display = newDisplayState switch
+        {
+            DisplayState.LeaderboardView => DisplayStyle.Flex,
+            _ => DisplayStyle.None
+        };
 
-            case DisplayState.UnassociatedState:
-            default:
-                throw new ArgumentOutOfRangeException(nameof(newDisplayState), newDisplayState, null);
-        }
+        accountView.style.display = newDisplayState switch
+        {
+            DisplayState.AccountView => DisplayStyle.Flex,
+            _ => DisplayStyle.None
+        };
     }
 }
\ No newline at end of file
diff --git a/ColourMeOKGame/Assets/UI/GameUI.uxml b/ColourMeOKGame/Assets/UI/GameUI.uxml
index 2ca73b7..c3b7455 100644
--- a/ColourMeOKGame/Assets/UI/GameUI.uxml
+++ b/ColourMeOKGame/Assets/UI/GameUI.uxml
@@ -19,13 +19,13 @@
             <ui:VisualElement name="Content"
                               style="flex-grow: 0; padding-right: 10%; padding-bottom: 10%; padding-left: 10%;">
                 <ui:Button text="Play ↗" parse-escape-sequences="true" display-tooltip-when-elided="true"
-                           name="PlayButton"/>
+                           name="PlayButton" style="display: flex;"/>
                 <ui:Button text="Leaderboard ↗" parse-escape-sequences="true" display-tooltip-when-elided="true"
-                           name="LeaderboardButton"/>
+                           name="LeaderboardButton" style="display: flex;"/>
                 <ui:Button text="Account ↗" parse-escape-sequences="true" display-tooltip-when-elided="true"
-                           name="AccountButton"/>
+                           name="AccountButton" style="display: flex;"/>
                 <ui:VisualElement name="AccountSection"
-                                  style="flex-grow: 0; border-top-color: rgb(208, 152, 194); margin-top: 0; border-top-width: 1px; margin-right: 0; margin-bottom: 0; margin-left: 0; border-bottom-color: rgb(208, 152, 194); padding-bottom: 12px;">
+                                  style="flex-grow: 0; border-top-color: rgb(208, 152, 194); margin-top: 0; border-top-width: 1px; margin-right: 0; margin-bottom: 0; margin-left: 0; border-bottom-color: rgb(208, 152, 194); padding-bottom: 12px; border-bottom-width: 1px; display: flex;">
                     <ui:VisualElement name="PlayerDetails"
                                       style="flex-grow: 1; flex-direction: row; align-items: stretch; justify-content: space-between; font-size: 10px; align-self: stretch;">
                         <ui:VisualElement name="PlayerNameDetail" style="flex-grow: 1;">
@@ -74,15 +74,28 @@
                     </ui:VisualElement>
                 </ui:VisualElement>
                 <ui:VisualElement name="ConnectionStatusText"
-                                  style="flex-grow: 0; border-top-color: rgb(208, 152, 194); margin-top: 0; border-top-width: 1px; margin-right: 0; margin-bottom: 0; margin-left: 0; border-bottom-color: rgb(208, 152, 194); border-bottom-width: 1px; padding-bottom: 12px;">
+                                  style="flex-grow: 0; border-top-color: rgb(208, 152, 194); margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; border-bottom-color: rgb(208, 152, 194); padding-bottom: 12px; display: flex; border-bottom-width: 1px;">
                     <ui:Label tabindex="-1" text="Status: Unknown" parse-escape-sequences="true"
                               display-tooltip-when-elided="true" name="ConnectionStatusText"
-                              style="-unity-font-style: normal; font-size: 14px; padding-bottom: 0; -unity-text-align: lower-left;"/>
+                              style="-unity-font-style: normal; font-size: 14px; padding-bottom: 0; -unity-text-align: lower-left; display: flex;"/>
                 </ui:VisualElement>
             </ui:VisualElement>
         </ui:VisualElement>
         <ui:VisualElement name="MainView"
                           style="flex-grow: 0; flex-shrink: 0; width: 75%; justify-content: space-between;">
+            <ui:VisualElement name="DefaultView"
+                              style="flex-grow: 0; justify-content: space-around; height: 100%; align-self: stretch; display: flex;">
+                <ui:VisualElement name="DemoResponseColour"
+                                  style="flex-grow: 1; background-color: rgb(0, 0, 0); align-self: stretch; justify-content: center;">
+                    <ui:VisualElement name="DemoResponseSliderContainer"
+                                      style="flex-grow: 0; margin-top: 3.25%; margin-right: 3.25%; margin-bottom: 3.25%; margin-left: 3.25%; padding-top: 2%; padding-right: 2%; padding-bottom: 2%; padding-left: 2%; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; background-color: rgb(208, 152, 194);">
+                        <ui:Slider label="Lightness" high-value="100" name="DemoResponseLightnessSlider"
+                                   class="lch-slider"/>
+                        <ui:Slider label="Chroma" high-value="0.5" name="DemoResponseChromaSlider" class="lch-slider"/>
+                        <ui:Slider label="Hue" high-value="360" name="DemoResponseHueSlider" class="lch-slider"/>
+                    </ui:VisualElement>
+                </ui:VisualElement>
+            </ui:VisualElement>
             <ui:VisualElement name="GameView"
                               style="flex-grow: 0; margin-top: 3.25%; margin-right: 3.25%; margin-bottom: 3.25%; margin-left: 3.25%; justify-content: space-between; height: 100%; align-self: stretch; display: none;">
                 <ui:VisualElement name="GameHeader"
@@ -118,6 +131,7 @@
                     <ui:Slider label="Hue" high-value="360" name="ResponseHueSlider" class="lch-slider"/>
                 </ui:VisualElement>
             </ui:VisualElement>
+            <ui:VisualElement name="ResultsView" style="flex-grow: 1; display: none;"/>
             <ui:VisualElement name="LeaderboardView"
                               style="flex-grow: 1; display: none; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin-top: 3.25%; margin-right: 3.25%; margin-bottom: 3.25%; margin-left: 3.25%; flex-direction: column; justify-content: space-between;">
                 <ui:Label tabindex="-1" text="Leaderboard" parse-escape-sequences="true"
@@ -126,7 +140,7 @@
                 <ui:ListView name="LeaderboardListView"/>
             </ui:VisualElement>
             <ui:VisualElement name="AccountView"
-                              style="flex-grow: 1; display: flex; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin-top: 3.25%; margin-right: 3.25%; margin-bottom: 3.25%; margin-left: 3.25%; flex-direction: column; justify-content: space-between;">
+                              style="flex-grow: 1; display: none; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin-top: 3.25%; margin-right: 3.25%; margin-bottom: 3.25%; margin-left: 3.25%; flex-direction: column; justify-content: space-between;">
                 <ui:Label tabindex="-1" text="You are not signed in." parse-escape-sequences="true"
                           display-tooltip-when-elided="true" name="AccountHeader"
                           style="font-size: 58px; -unity-font-style: normal;"/>