diff --git a/src/components/toast/Toast.module.css b/src/assets/css/toast/Toast.module.css
similarity index 100%
rename from src/components/toast/Toast.module.css
rename to src/assets/css/toast/Toast.module.css
diff --git a/src/components/toast/Toast.tsx b/src/components/toast/Toast.tsx
index fab0cd5..48890a0 100644
--- a/src/components/toast/Toast.tsx
+++ b/src/components/toast/Toast.tsx
@@ -1,5 +1,5 @@
 // import React from "react";
-import styles from "./Toast.module.css";
+import styles from "css/toast/Toast.module.css";
 import {
   SuccessIcon,
   ErrorIcon,
diff --git a/src/routes/demo/ToastDemoPage.tsx b/src/routes/demo/ToastDemoPage.tsx
new file mode 100644
index 0000000..5eb2ec2
--- /dev/null
+++ b/src/routes/demo/ToastDemoPage.tsx
@@ -0,0 +1,75 @@
+import { useState } from "react";
+import Toast, { ToastProps, ToastType } from "../../components/toast/Toast";
+
+function ToastDemoPage() {
+  const [toasts, setToasts] = useState<ToastProps[]>([]);
+
+  const showToast = (heading: string, message: string, type: ToastType) => {
+    const key = Date.now();
+    const toast = {
+      key,
+      heading,
+      message,
+      type,
+      onClose: () => removeToast(key),
+    };
+
+    setToasts([toast]);
+
+    setTimeout(() => {
+      removeToast(toast.key);
+    }, 5000);
+  };
+
+  const removeToast = (key: number) => {
+    setToasts((prevToasts) => prevToasts.filter((toast) => toast.key !== key));
+  };
+
+  return (
+    <>
+      <h1>Hello World!</h1>
+      <div>
+        {/* TOAST DEMO */}
+        <button
+          onClick={() => {
+            showToast("Success Heading", "This is a success text!", "success");
+          }}
+        >
+          Click to Show Success Toast
+        </button>
+        <br />
+        <button
+          onClick={() =>
+            showToast("Error Heading", "This is a failure text!", "error")
+          }
+        >
+          Click to Show Error Toast
+        </button>
+        <br />
+        <button
+          onClick={() =>
+            showToast("Information Heading", "This is an info text!", "info")
+          }
+        >
+          Click to Show Info Toast
+        </button>
+        <br />
+        <button
+          onClick={() =>
+            showToast("Warning Heading", "This is a warning text!", "warning")
+          }
+        >
+          Click to Show Warning Toast
+        </button>
+      </div>
+      {/* END TOAST DEMO */}
+
+      {/* TOASTS */}
+      {toasts.map((x) => (
+        <Toast {...x} key={x.key} />
+      ))}
+    </>
+  );
+}
+
+export default ToastDemoPage
\ No newline at end of file
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index 0b6325e..3f11504 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -2,6 +2,7 @@ import { createBrowserRouter } from "react-router-dom";
 import TestPage from "./shared/TestPage.tsx";
 import App from "./App.tsx"
 import EventPage from "./events/EventPage.tsx";
+import ToastDemoPage from "./demo/ToastDemoPage.tsx";
 
 
 const router = createBrowserRouter([
@@ -16,6 +17,10 @@ const router = createBrowserRouter([
   {
     path: "/events",
     Component: EventPage,
+  },
+  {
+    path: "/toast-demo",
+    Component: ToastDemoPage,
   }
 ])
 
diff --git a/src/routes/shared/TestPage.tsx b/src/routes/shared/TestPage.tsx
index f9e2ac7..37fdf92 100644
--- a/src/routes/shared/TestPage.tsx
+++ b/src/routes/shared/TestPage.tsx
@@ -1,73 +1,43 @@
 import { useState } from "react";
-import "./assets/css/App.css";
-import Toast, { ToastProps, ToastType } from "../../components/toast/Toast";
+import { useQuery } from "@tanstack/react-query";
 
-function TestPage() {
-  const [toasts, setToasts] = useState<ToastProps[]>([]);
+import viteLogo from "/vite.svg";
+import reactLogo from "/react.svg";
+import resolveURL from "@/api/fetch.ts";
 
-  const showToast = (heading: string, message: string, type: ToastType) => {
-    const key = Date.now();
-    const toast = {
-      key,
-      heading,
-      message,
-      type,
-      onClose: () => removeToast(key),
-    };
 
-    setToasts([toast]);
+const getResourceOptions = {
+  queryKey: ['resourceData'],
+  queryFn: () => fetch(resolveURL('/resource')).then((res) => res.json())
+}
 
-    setTimeout(() => {
-      removeToast(toast.key);
-    }, 5000);
-  };
 
-  const removeToast = (key: number) => {
-    setToasts((prevToasts) => prevToasts.filter((toast) => toast.key !== key));
-  };
+function TestPage() {
+  const [count, setCount] = useState(0)
+
+  const { isPending, data } = useQuery(getResourceOptions)
 
   return (
     <>
-      <h1>Hello World!</h1>
-      <div className="app-row app-row--group">
-        {/* TOAST DEMO */}
-        <button
-          onClick={() => {
-            showToast("Success Heading", "This is a success text!", "success");
-          }}
-        >
-          Show Success Toast
-        </button>
-        <button
-          onClick={() =>
-            showToast("Error Heading", "This is a failure text!", "error")
-          }
-        >
-          Show Error Toast
-        </button>
-        <button
-          onClick={() =>
-            showToast("Information Heading", "This is an info text!", "info")
-          }
-        >
-          Show Info Toast
-        </button>
-        <button
-          onClick={() =>
-            showToast("Warning Heading", "This is a warning text!", "warning")
-          }
-        >
-          Show Warning Toast
+      <div>
+        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank" rel="noreferrer">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>{isPending ? "Loading..." : data.result}</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
         </button>
       </div>
-      {/* END TOAST DEMO */}
-
-      {/* TOASTS */}
-      {toasts.map((x) => (
-        <Toast {...x} key={x.key} />
-      ))}
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
     </>
-  );
+  )
 }
 
-export default TestPage
+export default TestPage
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 4c5e991..763e532 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -825,7 +825,7 @@
 
 "@uidotdev/usehooks@^2.4.1":
   version "2.4.1"
-  resolved "https://registry.npmjs.org/@uidotdev/usehooks/-/usehooks-2.4.1.tgz"
+  resolved "https://registry.yarnpkg.com/@uidotdev/usehooks/-/usehooks-2.4.1.tgz#4b733eaeae09a7be143c6c9ca158b56cc1ea75bf"
   integrity sha512-1I+RwWyS+kdv3Mv0Vmc+p0dPYH0DTRAo04HLyXReYBL9AeseDWUJyi4THuksBJcu9F0Pih69Ak150VDnqbVnXg==
 
 "@ungap/structured-clone@^1.2.0":
@@ -2420,7 +2420,7 @@ iterator.prototype@^1.1.2:
 
 js-cookie@^3.0.5:
   version "3.0.5"
-  resolved "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
   integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
 
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
@@ -3085,7 +3085,7 @@ react-refresh@^0.14.0:
 
 react-router-dom@^6.22.3:
   version "6.22.3"
-  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.22.3.tgz#9781415667fd1361a475146c5826d9f16752a691"
   integrity sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==
   dependencies:
     "@remix-run/router" "1.15.3"