diff --git a/demos/src/demo.gleam b/demos/src/demo.gleam
index 7815c44..f384ccc 100644
--- a/demos/src/demo.gleam
+++ b/demos/src/demo.gleam
@@ -2,11 +2,45 @@ import gleam/list
 import justin
 import lustre
 import lustre/attribute
+import lustre/effect.{type Effect}
 import lustre/element.{type Element}
 import lustre/element/html
+import off_topic.{type Subscription}
+import off_topic/component
+
+const stylesheet = "https://off-topic-204b42.gitlab.io/component.css"
 
 const base_url = "https://gitlab.com/arkandos/off_topic/-/blob/main/demos/src/demos/"
 
+pub fn application(
+  init init: fn(Nil) -> #(a, Effect(b)),
+  update update: fn(a, b) -> #(a, Effect(b)),
+  subscriptions subscriptions: fn(a) -> Subscription(b),
+  view view: fn(a) -> Element(b),
+) -> lustre.App(Nil, off_topic.Model(a, b), off_topic.Message(b)) {
+  off_topic.component(init:, update:, subscriptions:, view:, options: [
+    component.adopt_styles(False),
+  ])
+}
+
+pub fn component(
+  init init: fn(Nil) -> #(a, Effect(b)),
+  update update: fn(a, b) -> #(a, Effect(b)),
+  subscriptions subscriptions: fn(a) -> Subscription(b),
+  view view: fn(a) -> Element(b),
+  options options: List(component.Option(b)),
+) -> lustre.App(Nil, off_topic.Model(a, b), off_topic.Message(b)) {
+  off_topic.component(init:, update:, subscriptions:, view:, options: [
+    component.adopt_styles(False),
+    ..options
+  ])
+}
+
+pub fn register(app: lustre.App(Nil, model, msg), names: List(String)) -> Nil {
+  use name <- list.each(names)
+  let assert Ok(_) = lustre.register(app, "ot-demo-" <> justin.kebab_case(name))
+}
+
 pub fn card(module: String, content: Element(msg)) -> Element(msg) {
   html.div(
     [
@@ -15,6 +49,7 @@ pub fn card(module: String, content: Element(msg)) -> Element(msg) {
       ),
     ],
     [
+      html.link([attribute.rel("stylesheet"), attribute.href(stylesheet)]),
       html.div(
         [
           attribute.class(
@@ -51,8 +86,3 @@ pub fn card(module: String, content: Element(msg)) -> Element(msg) {
     ],
   )
 }
-
-pub fn register(app: lustre.App(Nil, model, msg), names: List(String)) -> Nil {
-  use name <- list.each(names)
-  let assert Ok(_) = lustre.register(app, "ot-demo-" <> justin.kebab_case(name))
-}
diff --git a/demos/src/demos/after.gleam b/demos/src/demos/after.gleam
index 1487558..2743b0f 100644
--- a/demos/src/demos/after.gleam
+++ b/demos/src/demos/after.gleam
@@ -12,7 +12,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/breakpoints.gleam b/demos/src/demos/breakpoints.gleam
index 8cb7238..6c68c00 100644
--- a/demos/src/demos/breakpoints.gleam
+++ b/demos/src/demos/breakpoints.gleam
@@ -12,7 +12,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/colour_scheme.gleam b/demos/src/demos/colour_scheme.gleam
index 8c24e6b..04fa2fc 100644
--- a/demos/src/demos/colour_scheme.gleam
+++ b/demos/src/demos/colour_scheme.gleam
@@ -10,7 +10,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/contrast.gleam b/demos/src/demos/contrast.gleam
index 3d4833c..6b444fe 100644
--- a/demos/src/demos/contrast.gleam
+++ b/demos/src/demos/contrast.gleam
@@ -13,7 +13,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/element_scroll.gleam b/demos/src/demos/element_scroll.gleam
index 599a3db..c104889 100644
--- a/demos/src/demos/element_scroll.gleam
+++ b/demos/src/demos/element_scroll.gleam
@@ -13,7 +13,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 const container = "#scroll-box"
diff --git a/demos/src/demos/element_size.gleam b/demos/src/demos/element_size.gleam
index 6d26bc9..230bcc9 100644
--- a/demos/src/demos/element_size.gleam
+++ b/demos/src/demos/element_size.gleam
@@ -11,7 +11,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/element_visible.gleam b/demos/src/demos/element_visible.gleam
index 68a0ea1..73efe54 100644
--- a/demos/src/demos/element_visible.gleam
+++ b/demos/src/demos/element_visible.gleam
@@ -11,7 +11,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [
+  demo.component(init:, update:, subscriptions:, view:, options: [
     component.on_connect(ComponentConnected),
   ])
 }
diff --git a/demos/src/demos/every.gleam b/demos/src/demos/every.gleam
index 87cd2f4..4242700 100644
--- a/demos/src/demos/every.gleam
+++ b/demos/src/demos/every.gleam
@@ -15,7 +15,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/focus_blur.gleam b/demos/src/demos/focus_blur.gleam
index 18f4df8..99d8ec3 100644
--- a/demos/src/demos/focus_blur.gleam
+++ b/demos/src/demos/focus_blur.gleam
@@ -11,7 +11,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/here.gleam b/demos/src/demos/here.gleam
index 721ed5f..7fa969d 100644
--- a/demos/src/demos/here.gleam
+++ b/demos/src/demos/here.gleam
@@ -13,7 +13,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/keyboard.gleam b/demos/src/demos/keyboard.gleam
index ca96c08..abb51c4 100644
--- a/demos/src/demos/keyboard.gleam
+++ b/demos/src/demos/keyboard.gleam
@@ -12,7 +12,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type LastKey {
diff --git a/demos/src/demos/language.gleam b/demos/src/demos/language.gleam
index 0bce87e..90760b9 100644
--- a/demos/src/demos/language.gleam
+++ b/demos/src/demos/language.gleam
@@ -10,7 +10,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/local_storage.gleam b/demos/src/demos/local_storage.gleam
index 413763a..0f4601f 100644
--- a/demos/src/demos/local_storage.gleam
+++ b/demos/src/demos/local_storage.gleam
@@ -14,7 +14,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 const key = "ot-demo-ls-count"
diff --git a/demos/src/demos/now.gleam b/demos/src/demos/now.gleam
index e9bd4fa..83c44ea 100644
--- a/demos/src/demos/now.gleam
+++ b/demos/src/demos/now.gleam
@@ -15,7 +15,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/on.gleam b/demos/src/demos/on.gleam
index 95cd132..7c78b24 100644
--- a/demos/src/demos/on.gleam
+++ b/demos/src/demos/on.gleam
@@ -12,7 +12,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/on_idle.gleam b/demos/src/demos/on_idle.gleam
index 58ab488..a733ba2 100644
--- a/demos/src/demos/on_idle.gleam
+++ b/demos/src/demos/on_idle.gleam
@@ -11,7 +11,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/online.gleam b/demos/src/demos/online.gleam
index c9b4adf..84bddb9 100644
--- a/demos/src/demos/online.gleam
+++ b/demos/src/demos/online.gleam
@@ -10,7 +10,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/page_state.gleam b/demos/src/demos/page_state.gleam
index 6df3dca..379ef3b 100644
--- a/demos/src/demos/page_state.gleam
+++ b/demos/src/demos/page_state.gleam
@@ -12,7 +12,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/pointer.gleam b/demos/src/demos/pointer.gleam
index 43195c3..6edd780 100644
--- a/demos/src/demos/pointer.gleam
+++ b/demos/src/demos/pointer.gleam
@@ -22,7 +22,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type LastEvent {
diff --git a/demos/src/demos/prevent_unload.gleam b/demos/src/demos/prevent_unload.gleam
index 07e3e2b..cdd0601 100644
--- a/demos/src/demos/prevent_unload.gleam
+++ b/demos/src/demos/prevent_unload.gleam
@@ -11,7 +11,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/reduced_motion.gleam b/demos/src/demos/reduced_motion.gleam
index 21a406a..27a634f 100644
--- a/demos/src/demos/reduced_motion.gleam
+++ b/demos/src/demos/reduced_motion.gleam
@@ -12,7 +12,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/screen_orientation.gleam b/demos/src/demos/screen_orientation.gleam
index 194c12b..aa4212b 100644
--- a/demos/src/demos/screen_orientation.gleam
+++ b/demos/src/demos/screen_orientation.gleam
@@ -13,7 +13,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/scroll_into_view.gleam b/demos/src/demos/scroll_into_view.gleam
index bf476a3..3e1625c 100644
--- a/demos/src/demos/scroll_into_view.gleam
+++ b/demos/src/demos/scroll_into_view.gleam
@@ -13,7 +13,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/session_storage.gleam b/demos/src/demos/session_storage.gleam
index 379f75b..e4ec7d2 100644
--- a/demos/src/demos/session_storage.gleam
+++ b/demos/src/demos/session_storage.gleam
@@ -14,7 +14,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 const key = "ot-demo-ss-count"
diff --git a/demos/src/demos/window_hover.gleam b/demos/src/demos/window_hover.gleam
index d867157..4e18df4 100644
--- a/demos/src/demos/window_hover.gleam
+++ b/demos/src/demos/window_hover.gleam
@@ -10,7 +10,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/window_scroll.gleam b/demos/src/demos/window_scroll.gleam
index b9c7171..e3ed194 100644
--- a/demos/src/demos/window_scroll.gleam
+++ b/demos/src/demos/window_scroll.gleam
@@ -12,7 +12,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/demos/src/demos/window_size.gleam b/demos/src/demos/window_size.gleam
index 75c31e3..791d80e 100644
--- a/demos/src/demos/window_size.gleam
+++ b/demos/src/demos/window_size.gleam
@@ -11,7 +11,7 @@ pub fn register() -> Nil {
 }
 
 fn component() {
-  off_topic.component(init:, update:, subscriptions:, view:, options: [])
+  demo.application(init:, update:, subscriptions:, view:)
 }
 
 type Model {
diff --git a/src/off_topic.gleam b/src/off_topic.gleam
index 049cfa3..1aa9dd1 100644
--- a/src/off_topic.gleam
+++ b/src/off_topic.gleam
@@ -1,4 +1,3 @@
-//// <link rel="stylesheet" href="https://off-topic-204b42.gitlab.io/component.css"></link>
 //// <style>
 ////   small {
 ////     font-size: 0.7em;