diff --git a/routes/css.cpp b/routes/css.cpp
index b5dcafc..32248cc 100644
--- a/routes/css.cpp
+++ b/routes/css.cpp
@@ -54,6 +54,19 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
     .center {
         text-align: center;
     }
+    .userillustrations {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em;
+        justify-content: center;
+    }
+    .userillustrations img {
+        width: 15em;
+        height: 15em;
+    }
+    .userillustrations p {
+        width: 15em;
+    }
 
     .error {
         text-align: center;
diff --git a/routes/users/illustrations.cpp b/routes/users/illustrations.cpp
index 5493299..9c19a68 100644
--- a/routes/users/illustrations.cpp
+++ b/routes/users/illustrations.cpp
@@ -7,7 +7,7 @@
 #include "common.h"
 
 static Element generate_pager(const Illusts& illusts, size_t page);
-static inline Element generate_content(const Illusts& illusts);
+static inline Element generate_content(const httplib::Request& req, const Config& config, const Illusts& illusts);
 
 void user_illustrations_route(const httplib::Request& req, httplib::Response& res, const Config& config, PixivClient& pixiv_client) {
     uint64_t user_id = to_ull(req.matches[1].str());
@@ -37,7 +37,7 @@ void user_illustrations_route(const httplib::Request& req, httplib::Response& re
         generate_user_header(std::move(user), config),
         generate_pager(illusts, page),
         Element("br"),
-        generate_content(illusts),
+        generate_content(req, config, illusts),
         generate_pager(illusts, page)
     });
     serve(req, res, config, user.display_name + " illustrations", std::move(body));
@@ -64,16 +64,19 @@ static Element generate_pager(const Illusts& illusts, size_t page) {
     });
 }
 
-static inline Element generate_content(const Illusts& illusts) {
-    // TODO be real
-    Element ul("ul");
+static inline Element generate_content(const httplib::Request& req, const Config& config, const Illusts& illusts) {
+    Element div("div", {{"class", "userillustrations"}}, {});
 
-    ul.nodes.reserve(illusts.illusts.size());
+    div.nodes.reserve(illusts.illusts.size());
     for (const Illust& i : illusts.illusts) {
-        ul.nodes.push_back(Element("li", {
-            std::to_string(i.illust_id)
+        std::string illust_url = get_origin(req, config) + "/artworks/" + std::to_string(i.illust_id);
+        std::string image_url = proxy_image_url(config, i.images[0].thumbnail_or_original());
+
+        div.nodes.push_back(Element("a", {{"href", {std::move(illust_url)}}}, {
+            Element("img", {{"loading", "lazy"}, {"src", std::move(image_url)}}, {}),
+            Element("p", {i.title})
         }));
     }
 
-    return ul;
+    return div;
 }