diff --git a/app/app.go b/app/app.go
index 1055971..357ba2d 100644
--- a/app/app.go
+++ b/app/app.go
@@ -8,6 +8,7 @@ import (
 	"os"
 
 	"forge.capytal.company/capytalcode/project-comicverse/pages"
+	devPages "forge.capytal.company/capytalcode/project-comicverse/pages/dev"
 	"forge.capytal.company/capytalcode/project-comicverse/router"
 	"forge.capytal.company/capytalcode/project-comicverse/router/middleware"
 )
@@ -39,10 +40,10 @@ func NewApp(opts ...AppOpts) *App {
 		opts[0].Port = &d
 	}
 
-	if opts[0].Assets == nil {
-		// d := http.Dir("./assets")
-		// opts[0].Assets = d
-	}
+	// if opts[0].Assets == nil {
+	// d := http.Dir("./assets")
+	// opts[0].Assets = d
+	// }
 
 	return &App{
 		dev:    *opts[0].Dev,
@@ -58,6 +59,8 @@ func (a *App) Run() {
 	router.Handle("/assets/", a.assets)
 
 	if a.dev {
+		router.HandleRoutes(devPages.PAGES)
+
 		router.AddMiddleware(middleware.DevMiddleware)
 	}
 
diff --git a/assets/js/pages/devcolors.js b/assets/js/pages/devcolors.js
new file mode 100644
index 0000000..a5e5d4e
--- /dev/null
+++ b/assets/js/pages/devcolors.js
@@ -0,0 +1,7 @@
+document.querySelector('#accent-color-hue').addEventListener('change', (e) => {
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+	const hue = /** @type {number} */ (e.target?.value);
+
+	document.querySelector('body')
+		.setAttribute('style', `--user-theme-accent-hue:${String(hue)};`);
+});
diff --git a/pages/dev/colors.templ b/pages/dev/colors.templ
new file mode 100644
index 0000000..942d8c8
--- /dev/null
+++ b/pages/dev/colors.templ
@@ -0,0 +1,77 @@
+package pages
+
+import (
+	"net/http"
+	"fmt"
+	"strings"
+
+	"forge.capytal.company/capytalcode/project-comicverse/router/rerrors"
+	"forge.capytal.company/capytalcode/project-comicverse/templates/layouts"
+)
+
+type Colors struct{}
+
+func (p *Colors) ServeHTTP(w http.ResponseWriter, r *http.Request) {
+	if err := p.Component().Render(r.Context(), w); err != nil {
+		rerrors.InternalError(err).ServeHTTP(w, r)
+		return
+	}
+}
+
+templ (p *Colors) Heading() {
+	<script type="module" src="/assets/js/pages/devcolors.js" defer></script>
+}
+
+templ (p *Colors) Component() {
+	@layouts.Page(layouts.PageInfo{
+		Heading: p.Heading(),
+	}) {
+		<main class="absolute w-screen h-screen top-0 left-0 bg-#000000">
+			<section>
+				<input id="accent-color-hue" class="w-93% mx-10" type="range" value="260" min="0" max="360"/>
+				@templ.Raw(p.html())
+			</section>
+			<section>
+				<button>Hello world</button>
+			</section>
+		</main>
+	}
+}
+
+func (p *Colors) html() string {
+	cs := []string{}
+	for _, c := range colors {
+		ss := []string{"<ul class=\"flex gap-2 list-none\">"}
+		for _, s := range scales {
+			ss = append(ss, fmt.Sprintf("<li style=\"background-color:var(--theme-%s-%s); width: 5rem; height: 5rem;\"></li>", c, s))
+		}
+		ss = append(ss, "</ul>")
+
+		cs = append(cs, strings.Join(ss, ""))
+	}
+
+	return strings.Join(cs, "")
+}
+
+var colors = []string{
+	"accent",
+	"neutral",
+	"danger",
+	"success",
+	"warn",
+}
+
+var scales = []string{
+	"10",
+	"20",
+	"30",
+	"40",
+	"50",
+	"60",
+	"70",
+	"80",
+	"90",
+	"100",
+	"110",
+	"120",
+}
diff --git a/pages/dev/routes.go b/pages/dev/routes.go
new file mode 100644
index 0000000..544c1f8
--- /dev/null
+++ b/pages/dev/routes.go
@@ -0,0 +1,9 @@
+package pages
+
+import (
+	"forge.capytal.company/capytalcode/project-comicverse/router"
+)
+
+var PAGES = []router.Route{
+	{Pattern: "/_dev/colors", Handler: &Colors{}},
+}