diff --git a/src/routes/test2/+page.svelte b/src/routes/test2/+page.svelte
index a0aa04d..ee4d6ad 100644
--- a/src/routes/test2/+page.svelte
+++ b/src/routes/test2/+page.svelte
@@ -1,7 +1,11 @@
-<script>
+<script lang="ts">
+  import ColorPicker from "$lib/components/ColorPicker.svelte";
   import { addSuccessToast } from "$lib/components/store";
   import Toasts from "$lib/components/Toasts.svelte";
+  import { selectedDate } from "$lib/stores/dateStore";
+
   let { data } = $props();
+  let selectedColor = $state("#ff0000");
 
   function testNotification() {
     console.log("Tested!");
@@ -20,6 +24,10 @@
   async function test3() {
     console.log(data);
   }
+
+  function handleColorChange(event: CustomEvent) {
+    selectedColor = event.detail;
+  }
 </script>
 
 <Toasts />
@@ -43,4 +51,8 @@
   >
     Click Me3!
   </button>
+  <ColorPicker on:change={handleColorChange} borderRadius="50%" />
+  <p>Selected color: {selectedColor}</p>
+  <h1>Selected Date</h1>
+  <p>The date you selected in the navbar is: {$selectedDate}</p>
 </div>