diff --git a/apps/frontend/gleam.toml b/apps/frontend/gleam.toml
index 8658ad4..35dc8f6 100644
--- a/apps/frontend/gleam.toml
+++ b/apps/frontend/gleam.toml
@@ -10,15 +10,15 @@ typescript_declarations = true
 
 [dependencies]
 gleam_javascript = "~> 0.8"
+gleam_json = ">= 1.0.1 and < 2.0.0"
 gleam_stdlib = "~> 0.34 or ~> 1.0"
 grille_pain = {path = "../../packages/grille_pain"}
 lustre = ">= 4.2.0 and < 5.0.0"
 lustre_http = "~> 0.5"
+modem = ">= 1.1.0 and < 2.0.0"
 plinth = ">= 0.2.0 and < 1.0.0"
-sketch = ">= 2.2.0 and < 3.0.0"
+sketch = ">= 2.2.2 and < 3.0.0"
 tardis = ">= 0.1.0 and < 1.0.0"
-gleam_json = ">= 1.0.1 and < 2.0.0"
-modem = ">= 1.1.0 and < 2.0.0"
 
 [dev-dependencies]
 gleeunit = "~> 1.0"
diff --git a/apps/frontend/manifest.toml b/apps/frontend/manifest.toml
index 7e2b752..a766edb 100644
--- a/apps/frontend/manifest.toml
+++ b/apps/frontend/manifest.toml
@@ -12,15 +12,15 @@ packages = [
   { name = "gleam_stdlib", version = "0.37.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "5398BD6C2ABA17338F676F42F404B9B7BABE1C8DC7380031ACB05BBE1BCF3742" },
   { name = "gleeunit", version = "1.1.2", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "72CDC3D3F719478F26C4E2C5FED3E657AC81EC14A47D2D2DEBB8693CA3220C3B" },
   { name = "grille_pain", version = "1.0.0", build_tools = ["gleam"], requirements = ["birl", "gleam_stdlib", "lustre", "scheduler", "sketch", "tardis"], source = "local", path = "../../packages/grille_pain" },
-  { name = "lustre", version = "4.2.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib"], otp_app = "lustre", source = "hex", outer_checksum = "258F876CD7AB12C2C773F1A30F76DFC0A0ED989B720070DF32FC0717A6A0E60C" },
+  { name = "lustre", version = "4.2.2", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib"], otp_app = "lustre", source = "hex", outer_checksum = "927683F0F45D32A3C10449A8E85F0DAE383AADDB31AD7499670C998E73DA8D49" },
   { name = "lustre_http", version = "0.5.2", build_tools = ["gleam"], requirements = ["gleam_fetch", "gleam_http", "gleam_javascript", "gleam_json", "gleam_stdlib", "lustre"], otp_app = "lustre_http", source = "hex", outer_checksum = "FB0478CBFA6B16DBE8ECA326DAE2EC15645E04900595EF2C4F039ABFA0512ABA" },
   { name = "modem", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "lustre"], otp_app = "modem", source = "hex", outer_checksum = "4C6E448089B09A57C179455D44526A717E4E217D4000B91201617FD2D9F18E68" },
   { name = "plinth", version = "0.2.0", build_tools = ["gleam"], requirements = ["gleam_javascript", "gleam_json", "gleam_stdlib"], otp_app = "plinth", source = "hex", outer_checksum = "83211E672D83F3CE14681D0ECD3AD883EE7588E423E7C9DDDB460014AD60AC24" },
   { name = "ranger", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "ranger", source = "hex", outer_checksum = "1566C272B1D141B3BBA38B25CB761EF56E312E79EC0E2DFD4D3C19FB0CC1F98C" },
   { name = "scheduler", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], source = "local", path = "../../packages/scheduler" },
-  { name = "sketch", version = "2.2.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib", "lustre", "plinth"], otp_app = "sketch", source = "hex", outer_checksum = "8860E68627E33E4B63379050C1699546828CBF02364F26E191B95EA080AE483A" },
+  { name = "sketch", version = "2.2.2", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib", "lustre", "plinth"], otp_app = "sketch", source = "hex", outer_checksum = "AE2FE447AB1C993CE4884D9EFE915D1971AEDED335904B77BE875B5BE3D7378B" },
   { name = "tardis", version = "0.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "lustre", "plinth", "sketch"], otp_app = "tardis", source = "hex", outer_checksum = "C8E7BAB95C59EF50332905A06B82BB35526B7BE2F191580F3CD8790903AA49F7" },
-  { name = "thoas", version = "1.2.0", build_tools = ["rebar3"], requirements = [], otp_app = "thoas", source = "hex", outer_checksum = "540C8CB7D9257F2AD0A14145DC23560F91ACDCA995F0CCBA779EB33AF5D859D1" },
+  { name = "thoas", version = "1.2.1", build_tools = ["rebar3"], requirements = [], otp_app = "thoas", source = "hex", outer_checksum = "E38697EDFFD6E91BD12CEA41B155115282630075C2A727E7A6B2947F5408B86A" },
 ]
 
 [requirements]
@@ -31,7 +31,7 @@ gleeunit = { version = "~> 1.0" }
 grille_pain = { path = "../../packages/grille_pain" }
 lustre = { version = ">= 4.2.0 and < 5.0.0" }
 lustre_http = { version = "~> 0.5" }
-modem = { version = ">= 1.1.0 and < 2.0.0"}
+modem = { version = ">= 1.1.0 and < 2.0.0" }
 plinth = { version = ">= 0.2.0 and < 1.0.0" }
-sketch = { version = ">= 2.2.0 and < 3.0.0" }
+sketch = { version = ">= 2.2.2 and < 3.0.0" }
 tardis = { version = ">= 0.1.0 and < 1.0.0" }
diff --git a/apps/frontend/src/data/model.gleam b/apps/frontend/src/data/model.gleam
index ca1fbf8..a74c90e 100644
--- a/apps/frontend/src/data/model.gleam
+++ b/apps/frontend/src/data/model.gleam
@@ -1,6 +1,5 @@
 import data/model/mock
 import data/search_result.{type SearchResult, type SearchResults}
-import gleam/io
 import gleam/list
 import gleam/pair
 import gleam/result
@@ -52,6 +51,5 @@ fn insert_module_names(index: Index, search_results: List(SearchResult)) {
   list.key_find(acc, key)
   |> result.unwrap([])
   |> fn(i) { list.prepend(i, #(val.module_name, val.name)) }
-  |> io.debug()
   |> fn(i) { list.key_set(acc, key, i) }
 }
diff --git a/apps/frontend/src/frontend/view.gleam b/apps/frontend/src/frontend/view.gleam
index 1182f4b..417842d 100644
--- a/apps/frontend/src/frontend/view.gleam
+++ b/apps/frontend/src/frontend/view.gleam
@@ -3,14 +3,12 @@ import frontend/colors/palette
 import frontend/view/body/body
 import frontend/view/footer/footer
 import frontend/view/navbar/navbar
-import gleam/list
-import lustre/attribute.{type Attribute}
-import lustre/element.{type Element}
 import sketch
+import sketch/lustre/extra as l
 import sketch/size
 
-fn layout(attributes: List(Attribute(msg)), children: List(Element(msg))) {
-  sketch.class([
+fn layout(attributes, children) {
+  l.memo("div", attributes, children, [
     sketch.display("grid"),
     sketch.grid_template_areas(
       "\"navbar\"
@@ -23,10 +21,6 @@ fn layout(attributes: List(Attribute(msg)), children: List(Element(msg))) {
     sketch.background(palette.dark.underwater_blue),
     sketch.color(palette.dark.white),
   ])
-  |> sketch.memo()
-  |> sketch.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn view(model: Model) {
diff --git a/apps/frontend/src/frontend/view/body/styles.gleam b/apps/frontend/src/frontend/view/body/styles.gleam
index b0dec20..795aee3 100644
--- a/apps/frontend/src/frontend/view/body/styles.gleam
+++ b/apps/frontend/src/frontend/view/body/styles.gleam
@@ -1,118 +1,93 @@
 import frontend/colors/palette
-import gleam/list
-import lustre/element
 import sketch as s
+import sketch/lustre/extra as l
 import sketch/size.{px}
 
-pub fn implementations_pill(
-  background: String,
-  color: String,
-  attributes,
-  children,
-) {
+pub fn implementations_pill(background, color, attributes, children) {
   let id = "implementations-pill-" <> background
-  s.dynamic(id, [
+  l.dynamic("div", attributes, children, id, [
     s.background(background),
     s.color(color),
     s.padding_("4px 9px"),
     s.border_radius(px(6)),
     s.font_size(px(10)),
   ])
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn implementations_pill_wrapper(attributes, children) {
-  s.class([s.display("flex"), s.align_items("center"), s.gap(px(6))])
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
+  l.element("div", attributes, children, [
+    s.display("flex"),
+    s.align_items("center"),
+    s.gap(px(6)),
+  ])
 }
 
 pub fn search_result(attributes, children) {
-  s.class([
+  l.memo("div", attributes, children, [
     s.background(palette.dark.unexpected_aubergine),
     s.border_radius(px(14)),
     s.overflow("hidden"),
     s.padding(px(12)),
     s.box_shadow("0 0 3px 2px " <> palette.dark.black <> "4d"),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn search_results_wrapper(attributes, children) {
-  s.class([
+  l.element("div", attributes, children, [
     s.display("grid"),
     s.padding_("0 48px"),
     s.gap(px(24)),
     s.grid_template_columns("min-content minmax(auto, 1fr)"),
     s.justify_items("center"),
   ])
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn search_details(attributes, children) {
-  s.class([
+  l.memo("div", attributes, children, [
     s.background(palette.dark.unexpected_aubergine),
     s.display("flex"),
     s.gap(px(12)),
     s.justify_content("space-between"),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn search_details_title(attributes, children) {
-  s.class([s.display("flex"), s.align_items("center"), s.gap(px(12))])
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
+  l.element("div", attributes, children, [
+    s.display("flex"),
+    s.align_items("center"),
+    s.gap(px(12)),
+  ])
 }
 
 pub fn qualified_name(attributes, children) {
-  s.class([
+  l.element("a", attributes, children, [
     s.overflow("hidden"),
     s.text_overflow("ellipsis"),
     s.direction("rtl"),
     s.text_decoration("none"),
   ])
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("a", _, children)
 }
 
 pub fn search_body(attributes, children) {
-  s.class([
+  l.memo("div", attributes, children, [
     s.background(palette.dark.black),
     s.border_radius(px(12)),
     s.margin(px(-12)),
     s.margin_top(px(12)),
     s.padding(px(12)),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn signature(attributes, children) {
-  s.class([s.white_space("pre-wrap"), s.display("block"), s.line_height("1.6")])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("code", _, children)
+  l.memo("code", attributes, children, [
+    s.white_space("pre-wrap"),
+    s.display("block"),
+    s.line_height("1.6"),
+  ])
 }
 
 pub fn documentation(attributes, children) {
-  s.class([
+  l.memo("div", attributes, children, [
     s.background(palette.dark.charcoal),
     s.padding(px(12)),
     s.border_radius(px(10)),
@@ -122,22 +97,14 @@ pub fn documentation(attributes, children) {
     s.flex_direction("column"),
     s.gap(px(12)),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn documentation_title(attributes, children) {
-  s.class([s.color(palette.dark.dark_white)])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
+  l.memo("div", attributes, children, [s.color(palette.dark.dark_white)])
 }
 
 pub fn search_wrapper(attributes, children) {
-  s.class([
+  l.memo("form", attributes, children, [
     s.display("grid"),
     s.grid_template_rows("auto auto auto"),
     s.grid_template_columns("auto auto auto"),
@@ -152,10 +119,6 @@ pub fn search_wrapper(attributes, children) {
     s.width(size.percent(100)),
     s.margin_("auto"),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("form", _, children)
 }
 
 pub fn search_title_() {
@@ -169,15 +132,14 @@ pub fn search_title_() {
 }
 
 pub fn search_title(attributes, children) {
-  s.class([s.compose(search_title_()), s.font_size(size.rem_(2.5))])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
+  l.memo("div", attributes, children, [
+    s.compose(search_title_()),
+    s.font_size(size.rem_(2.5)),
+  ])
 }
 
 pub fn search_title_wrapper(attributes, children) {
-  s.class([
+  l.memo("div", attributes, children, [
     s.grid_area("title"),
     s.display("flex"),
     s.flex_direction("column"),
@@ -186,22 +148,14 @@ pub fn search_title_wrapper(attributes, children) {
     s.color(palette.dark.dark_white),
     s.line_height("1.3"),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn search_lucy(attributes) {
-  s.class([s.width(px(40))])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("img", _, [])
+  l.memo("img", attributes, [], [s.width(px(40))])
 }
 
 pub fn search_input(attributes) {
-  s.class([
+  l.memo("input", attributes, [], [
     s.grid_area("input"),
     s.appearance("none"),
     s.background(palette.dark.white),
@@ -215,14 +169,10 @@ pub fn search_input(attributes) {
     s.focus([s.outline("2px solid " <> palette.dark.faff_pink)]),
     s.width(size.percent(100)),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("input", _, [])
 }
 
 pub fn search_submit(attributes) {
-  s.class([
+  l.memo("input", attributes, [], [
     s.grid_area("submit"),
     s.appearance("none"),
     s.border("none"),
@@ -239,14 +189,10 @@ pub fn search_submit(attributes) {
     s.active([s.background(palette.dark.dark_faff_pink)]),
     s.focus([s.background(palette.dark.dark_faff_pink)]),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("input", _, [])
 }
 
 pub fn matches_titles(attributes, children) {
-  s.class([
+  l.memo("div", attributes, children, [
     s.line_height("1.3"),
     s.color(palette.dark.dark_white),
     s.display("flex"),
@@ -254,22 +200,17 @@ pub fn matches_titles(attributes, children) {
     s.gap(px(6)),
     s.font_size(px(12)),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn matches_title(attributes, children) {
-  s.class([s.color(palette.dark.white), s.font_size(px(18))])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
+  l.memo("div", attributes, children, [
+    s.color(palette.dark.white),
+    s.font_size(px(18)),
+  ])
 }
 
 pub fn empty_state(attributes, children) {
-  s.class([
+  l.memo("div", attributes, children, [
     s.display("flex"),
     s.align_items("center"),
     s.gap(px(24)),
@@ -278,22 +219,14 @@ pub fn empty_state(attributes, children) {
     s.width(size.percent(100)),
     s.margin_("auto"),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn empty_state_lucy(attributes) {
-  s.class([s.width(px(100))])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("img", _, [])
+  l.memo("img", attributes, [], [s.width(px(100))])
 }
 
 pub fn empty_state_titles(attributes, children) {
-  s.class([
+  l.memo("div", attributes, children, [
     s.font_size(px(20)),
     s.display("flex"),
     s.flex_direction("column"),
@@ -301,22 +234,17 @@ pub fn empty_state_titles(attributes, children) {
     s.line_height("1.3"),
     s.max_width(px(400)),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn empty_state_subtitle(attributes, children) {
-  s.class([s.font_size(px(16)), s.color(palette.dark.dark_white)])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
+  l.memo("div", attributes, children, [
+    s.font_size(px(16)),
+    s.color(palette.dark.dark_white),
+  ])
 }
 
 pub fn sidebar_wrapper(attributes, children) {
-  s.class([
+  l.element("div", attributes, children, [
     s.position("sticky"),
     s.top(px(130)),
     s.display("flex"),
@@ -325,31 +253,29 @@ pub fn sidebar_wrapper(attributes, children) {
     s.height_("calc(100vh - 130px)"),
     s.overflow("auto"),
     s.padding_("12px 0"),
-    s.property(
-      "mask",
-      "linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(255,255,255,1) 1% 99%, rgba(255, 255, 255, 0))",
-    ),
+    s.property("mask", {
+      "linear-gradient(
+        180deg,
+        rgba(255,255,255, 0) 0%,
+        rgba(255,255,255,1) 0.5% 99.5%,
+        rgba(255, 255, 255, 0)
+      )"
+    }),
   ])
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn sidebar_package_name(attributes, children) {
-  s.class([
+  l.element("div", attributes, children, [
     s.background(palette.dark.unexpected_aubergine),
     s.padding(px(6)),
     s.border_radius(px(6)),
     s.overflow("hidden"),
     s.text_overflow("ellipsis"),
   ])
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn sidebar_module_name(attributes, children) {
-  s.class([
+  l.element("button", attributes, children, [
     s.text_overflow("ellipsis"),
     s.overflow("hidden"),
     s.direction("rtl"),
@@ -367,55 +293,40 @@ pub fn sidebar_module_name(attributes, children) {
     s.property("padding-inline", "0"),
     s.padding_left(px(12)),
   ])
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("button", _, children)
 }
 
 pub fn sidebar_package_wrapper(attributes, children) {
-  s.class([
+  l.element("div", attributes, children, [
     s.display("flex"),
     s.flex_direction("column"),
     s.gap(px(9)),
     s.font_size(px(14)),
     s.max_width(px(250)),
   ])
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn main(attributes, children) {
-  s.class([
+  l.memo("main", attributes, children, [
     s.grid_area("main"),
     s.display("flex"),
     s.flex_direction("column"),
     s.gap(px(24)),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("main", _, children)
 }
 
 pub fn items_wrapper(attributes, children) {
-  s.class([
+  l.memo("div", attributes, children, [
     s.display("flex"),
     s.flex_direction("column"),
     s.gap(px(24)),
     s.padding_top(px(12)),
     s.max_width(px(700)),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn named_type_button(attributes, children) {
-  s.class([s.text_decoration("none")])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("a", _, children)
+  l.memo("a", attributes, children, [
+    s.text_decoration("none"),
+    s.hover([s.text_decoration("underline")]),
+  ])
 }
diff --git a/apps/frontend/src/frontend/view/footer/styles.gleam b/apps/frontend/src/frontend/view/footer/styles.gleam
index 7eee7bf..34d9e3c 100644
--- a/apps/frontend/src/frontend/view/footer/styles.gleam
+++ b/apps/frontend/src/frontend/view/footer/styles.gleam
@@ -1,11 +1,10 @@
 import frontend/colors/palette
-import gleam/list
-import lustre/element
 import sketch as s
+import sketch/lustre/extra as l
 import sketch/size.{px}
 
 pub fn footer(attributes, children) {
-  s.class([
+  l.memo("div", attributes, children, [
     s.background(palette.dark.charcoal),
     s.display("flex"),
     s.flex_direction("column"),
@@ -14,14 +13,10 @@ pub fn footer(attributes, children) {
     s.gap(px(48)),
     s.margin_top(px(48)),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn footer_built(attributes, children) {
-  s.class([
+  l.memo("div", attributes, children, [
     s.display("flex"),
     s.flex_direction("column"),
     s.align_items("center"),
@@ -29,14 +24,10 @@ pub fn footer_built(attributes, children) {
     s.font_size(size.rem_(0.8)),
     s.line_height("1.3"),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn footer_links(attributes, children) {
-  s.class([
+  l.memo("div", attributes, children, [
     s.display("grid"),
     s.grid_template_columns("repeat(3, 1fr)"),
     s.grid_template_rows("repeat(6, auto)"),
@@ -44,44 +35,29 @@ pub fn footer_links(attributes, children) {
     s.max_width(px(700)),
     s.width(size.percent(100)),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn footer_section(attributes, children) {
-  s.class([
+  l.memo("div", attributes, children, [
     s.display("grid"),
     s.grid_template_columns("1fr"),
     s.grid_template_rows("subgrid"),
     s.grid_row("1 / 7"),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn foot_title(attributes, children) {
-  s.class([
+  l.memo("div", attributes, children, [
     s.color(palette.dark.dark_white),
     s.font_weight("500"),
     s.padding_("6px 0px"),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn foot_lk(attributes, children) {
-  s.class([
+  l.memo("a", attributes, children, [
     s.font_size(size.rem_(0.9)),
     s.color(palette.dark.white),
     s.text_decoration("none"),
   ])
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("a", _, children)
 }
diff --git a/apps/frontend/src/frontend/view/navbar/styles.gleam b/apps/frontend/src/frontend/view/navbar/styles.gleam
index 334d2ee..68e7c0f 100644
--- a/apps/frontend/src/frontend/view/navbar/styles.gleam
+++ b/apps/frontend/src/frontend/view/navbar/styles.gleam
@@ -1,8 +1,7 @@
 import frontend/colors/palette
 import frontend/view/body/styles as body_styles
-import gleam/list
-import lustre/element
 import sketch as s
+import sketch/lustre/extra as l
 import sketch/size.{px}
 
 pub const search_lucy = body_styles.search_lucy
@@ -10,49 +9,33 @@ pub const search_lucy = body_styles.search_lucy
 pub const search_input = body_styles.search_input
 
 pub fn search_input_wrapper(attributes, children) {
-  s.class([s.width_("100%")])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("form", _, children)
+  l.memo("form", attributes, children, [s.width_("100%")])
 }
 
 pub fn navbar_search_title(attributes, children) {
-  s.class([
+  l.memo("a", attributes, children, [
     s.font_size(size.rem_(1.2)),
     s.compose(body_styles.search_title_()),
     s.text_decoration("none"),
     s.cursor("pointer"),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("a", _, children)
 }
 
 pub fn nav_links(attributes, children) {
-  s.class([
+  l.memo("div", attributes, children, [
     s.display("flex"),
     s.align_items("baseline"),
     s.gap(px(48)),
     s.padding(px(48)),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn coming_soon(attributes, children) {
-  s.class([s.font_size(size.rem_(0.7))])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("span", _, children)
+  l.memo("span", attributes, children, [s.font_size(size.rem_(0.7))])
 }
 
 pub fn trending(attributes, children) {
-  s.class([
+  l.memo("div", attributes, children, [
     s.display("flex"),
     s.flex_direction("column"),
     s.gap(px(3)),
@@ -60,14 +43,10 @@ pub fn trending(attributes, children) {
     s.color(palette.dark.dark_white),
     s.white_space("nowrap"),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn navbar(attributes, children) {
-  s.class([
+  l.memo("div", attributes, children, [
     s.position("sticky"),
     s.top(px(0)),
     s.display("flex"),
@@ -80,21 +59,13 @@ pub fn navbar(attributes, children) {
     s.height(px(130)),
     s.z_index(1000),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
 
 pub fn navbar_search(attributes, children) {
-  s.class([
+  l.memo("div", attributes, children, [
     s.display("flex"),
     s.gap(px(48)),
     s.align_items("center"),
     s.flex("1"),
   ])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend(attributes, _)
-  |> element.element("div", _, children)
 }
diff --git a/apps/frontend/src/frontend/view/types.gleam b/apps/frontend/src/frontend/view/types.gleam
index fa3f4ed..5584607 100644
--- a/apps/frontend/src/frontend/view/types.gleam
+++ b/apps/frontend/src/frontend/view/types.gleam
@@ -1,52 +1,32 @@
 import frontend/colors/palette
-import gleam/list
 import lustre/element/html as h
 import sketch as s
+import sketch/lustre/extra as l
+
+fn span(text: String, color: String) {
+  l.memo("span", [], [h.text(text)], [s.color(color)])
+}
 
 pub fn keyword(text: String) {
-  s.class([s.color("#c678dd")])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend([], _)
-  |> h.span([h.text(text)])
+  span(text, "#c678dd")
 }
 
 pub fn fun(text: String) {
-  s.class([s.color("#61afef")])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend([], _)
-  |> h.span([h.text(text)])
+  span(text, "#61afef")
 }
 
 pub fn label(text: String) {
-  s.class([s.color("#e06c75")])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend([], _)
-  |> h.span([h.text(text)])
+  span(text, "#e06c75")
 }
 
 pub fn type_(text: String) {
-  s.class([s.color("#e5c07b")])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend([], _)
-  |> h.span([h.text(text)])
+  span(text, "#e5c07b")
 }
 
 pub fn variable(text: String) {
-  s.class([s.color("#98c379")])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend([], _)
-  |> h.span([h.text(text)])
+  span(text, "#98c379")
 }
 
 pub fn dark_white(text: String) {
-  s.class([s.color(palette.dark.dark_white)])
-  |> s.memo()
-  |> s.to_lustre()
-  |> list.prepend([], _)
-  |> h.span([h.text(text)])
+  span(text, palette.dark.dark_white)
 }
diff --git a/apps/frontend/src/sketch/lustre/extra.gleam b/apps/frontend/src/sketch/lustre/extra.gleam
new file mode 100644
index 0000000..731f6e2
--- /dev/null
+++ b/apps/frontend/src/sketch/lustre/extra.gleam
@@ -0,0 +1,42 @@
+import gleam/list
+import lustre/attribute.{type Attribute}
+import lustre/element.{type Element}
+import sketch as s
+
+pub fn element(
+  tag: String,
+  attributes: List(Attribute(msg)),
+  children: List(Element(msg)),
+  styles: List(s.Style(media, pseudo_selector)),
+) {
+  s.class(styles)
+  |> s.to_lustre()
+  |> list.prepend(attributes, _)
+  |> element.element(tag, _, children)
+}
+
+pub fn memo(
+  tag: String,
+  attributes: List(Attribute(msg)),
+  children: List(Element(msg)),
+  styles: List(s.Style(media, pseudo_selector)),
+) {
+  s.class(styles)
+  |> s.memo()
+  |> s.to_lustre()
+  |> list.prepend(attributes, _)
+  |> element.element(tag, _, children)
+}
+
+pub fn dynamic(
+  tag: String,
+  attributes: List(Attribute(msg)),
+  children: List(Element(msg)),
+  id: String,
+  styles: List(s.Style(media, pseudo_selector)),
+) {
+  s.dynamic(id, styles)
+  |> s.to_lustre()
+  |> list.prepend(attributes, _)
+  |> element.element(tag, _, children)
+}