diff --git a/srd/classes/druid.json b/srd/classes/druid.json
index a584cac..0ff1784 100644
--- a/srd/classes/druid.json
+++ b/srd/classes/druid.json
@@ -26,7 +26,7 @@
       "description": "TODO"
     }
   ],
-  "subclasses": ["wardern-of-the-elements", "warden-or-renewal"],
+  "subclasses": ["wardern-of-the-elements", "warden-of-renewal"],
   "background_questions": [
     "Why was the community you grew up in so reliant on nature and its creatures?",
     "Who was the first wild animal you bonded with? Why did your bond end?",
diff --git a/web/src/web/pages/classes.gleam b/web/src/web/pages/classes.gleam
index d75c091..f1ff5f6 100644
--- a/web/src/web/pages/classes.gleam
+++ b/web/src/web/pages/classes.gleam
@@ -1,4 +1,6 @@
+import gleam/int
 import gleam/list
+import gleam/string
 import lustre/attribute as attr
 import lustre/element/html
 import shared/data
@@ -29,8 +31,114 @@ pub fn single(id: String, data: data.Data) {
     Error(_) -> not_found.not_found(data)
     Ok(class) ->
       html.div([], [
-        html.h1([], [html.text(class.name)]),
+        html.h1([attr.id(class.id)], [html.text(class.name)]),
         html.p([], [html.text(class.description)]),
+        html.h2([attr.id("starting-evasion")], [html.text("Starting Evasion")]),
+        html.p([], [html.text(int.to_string(class.starting_evasion))]),
+        html.h2([attr.id("starting-hp")], [html.text("Starting HP")]),
+        html.p([], [html.text(int.to_string(class.starting_hp))]),
+        html.h2([attr.id("class-items")], [html.text("Class Items")]),
+        html.p([], [
+          html.text(
+            list.fold(class.class_items, "", fn(acc, item) {
+              acc <> " or " <> item
+            })
+            |> string.drop_start(4)
+            |> string.capitalise(),
+          ),
+        ]),
+        html.h2([attr.id("domains")], [html.text("Domains")]),
+        html.ul(
+          [],
+          list.map(class.domains, fn(domain) {
+            html.li([], [
+              html.a([attr.href("/domains/" <> domain)], [html.text(domain)]),
+            ])
+          }),
+        ),
+        html.h2([attr.id("subclasses")], [html.text("Subclasses")]),
+        html.ul(
+          [],
+          list.map(class.subclasses, fn(subclass) {
+            html.li([], [
+              html.a([attr.href("/sublasses/" <> subclass)], [
+                html.text(subclass),
+              ]),
+            ])
+          }),
+        ),
+        html.h2([attr.id("hope-features")], [html.text("Hope Features")]),
+        html.div(
+          [],
+          list.map(class.hope_features, fn(feature) {
+            [
+              html.h3(
+                [
+                  attr.id(
+                    feature.name
+                    |> string.lowercase()
+                    |> string.replace(" ", "-")
+                    |> string.replace("’", "")
+                    |> string.replace("'", ""),
+                  ),
+                ],
+                [html.text(feature.name)],
+              ),
+              html.p([], [html.text(feature.description)]),
+            ]
+          })
+            |> list.flatten(),
+        ),
+        html.h2([attr.id("class-features")], [html.text("Class Features")]),
+        html.div(
+          [],
+          list.map(class.class_features, fn(feature) {
+            [
+              html.h3(
+                [
+                  attr.id(
+                    feature.name
+                    |> string.lowercase()
+                    |> string.replace(" ", "-")
+                    |> string.replace("’", "")
+                    |> string.replace("'", ""),
+                  ),
+                ],
+                [html.text(feature.name)],
+              ),
+              html.p([], [html.text(feature.description)]),
+            ]
+          })
+            |> list.flatten(),
+        ),
+        html.h2([attr.id("background-questions")], [
+          html.text("Background Questions"),
+        ]),
+        html.p([], [
+          html.text(
+            "Answer any of the following background questions. You can
+        also create your own questions.",
+          ),
+        ]),
+        html.ul(
+          [],
+          list.map(class.background_questions, fn(question) {
+            html.li([], [html.text(question)])
+          }),
+        ),
+        html.h2([attr.id("connections")], [html.text("Connections")]),
+        html.p([], [
+          html.text(
+            "Ask your fellow players one of the following questions for
+            their character to answer, or create your own questions.",
+          ),
+        ]),
+        html.ul(
+          [],
+          list.map(class.connections, fn(connection) {
+            html.li([], [html.text(connection)])
+          }),
+        ),
       ])
   }
 }