diff --git a/prophet/view.py b/prophet/view.py
index cfb63b2..d8e5e2d 100644
--- a/prophet/view.py
+++ b/prophet/view.py
@@ -14,43 +14,19 @@ templates = Jinja2Templates(directory="templates")
 
 def define_routes(app: FastAPI):
     @app.get("/improvements", response_class=HTMLResponse)
-    def list_improvements():
+    def list_improvements(request: Request):
         improved = repo.get_all()
-        return (
-            """<button hx-get="/originals" hx-target="#content">Originals</button> """
-            + "\n".join(
-                f"""
-    <div class="card">
-        <div class="card-img">
-            <img src="{item.original.image_link if item.original.image_link else "https://placehold.co/300x200"}" width="600">
-        </div>
-    <div class="card-title">{item.title}</div>
-    <div class="card-summary">{item.summary}</div>
-    </div>"""
-                for item in sorted(
-                    improved, key=lambda i: i.original.date, reverse=True
-                )
-            )
+        return templates.TemplateResponse(
+            request=request,
+            name="list_improvements.html",
+            context={"articles": improved},
         )
 
     @app.get("/originals", response_class=HTMLResponse)
-    def list_originals():
+    def list_originals(request: Request):
         improved = repo.get_all()
-        return (
-            """<button hx-get="/improvements" hx-target="#content">Improvements</button> """
-            + "\n".join(
-                f"""
-    <div class="card">
-        <div class="card-img">
-            <img src="{item.original.image_link if item.original.image_link else "https://placehold.co/300x200"}" width="600">
-        </div>
-        <div class="card-title">{item.original.title}</div>
-        <div class="card-summary">{item.original.summary}</div>
-    </div>"""
-                for item in sorted(
-                    improved, key=lambda i: i.original.date, reverse=True
-                )
-            )
+        return templates.TemplateResponse(
+            request=request, name="list_originals.html", context={"articles": improved}
         )
 
     @app.get("/", response_class=HTMLResponse)
diff --git a/templates/list_improvements.html b/templates/list_improvements.html
new file mode 100644
index 0000000..95dc896
--- /dev/null
+++ b/templates/list_improvements.html
@@ -0,0 +1,11 @@
+<button hx-get="/originals" hx-target="#content">Originals</button>
+
+{% for article in articles %}
+<div class="card">
+  <div class="card-title">{{article.title}}</div>
+  <div class="card-img">
+    <img src="{{ article.original.image_link }}" width="600" />
+  </div>
+  <div class="card-summary">{{article.summary}}</div>
+</div>
+{% endfor %}
diff --git a/templates/list_originals.html b/templates/list_originals.html
new file mode 100644
index 0000000..36ab5d2
--- /dev/null
+++ b/templates/list_originals.html
@@ -0,0 +1,11 @@
+<button hx-get="/improvements" hx-target="#content">Improvements</button>
+
+{% for article in articles %}
+<div class="card">
+  <div class="card-title">{{article.original.title}}</div>
+  <div class="card-img">
+    <img src="{{ article.original.image_link }}" width="600" />
+  </div>
+  <div class="card-summary">{{article.original.summary}}</div>
+</div>
+{% endfor %}