diff --git a/src/web/releases.rs b/src/web/releases.rs
index d8fb5736e..2589f77dc 100644
--- a/src/web/releases.rs
+++ b/src/web/releases.rs
@@ -22,6 +22,7 @@ use postgres::Connection;
 use router::Router;
 use serde::Serialize;
 use serde_json::Value;
+use std::borrow::Cow;
 
 /// Number of release in home page
 const RELEASES_IN_HOME: i64 = 15;
@@ -661,9 +662,19 @@ pub fn search_handler(req: &mut Request) -> IronResult<Response> {
     }
 }
 
+#[derive(Debug, Clone, PartialEq, Serialize)]
+struct ReleaseActivity {
+    description: Cow<'static, str>,
+    activity_data: Value,
+}
+
+impl_webpage! {
+    ReleaseActivity = "releases/activity.html",
+}
+
 pub fn activity_handler(req: &mut Request) -> IronResult<Response> {
     let conn = extension!(req, Pool).get()?;
-    let release_activity_data: Value = ctry!(
+    let activity_data: Value = ctry!(
         req,
         conn.query(
             "SELECT value FROM config WHERE name = 'release_activity'",
@@ -674,13 +685,11 @@ pub fn activity_handler(req: &mut Request) -> IronResult<Response> {
     .next()
     .map_or(Value::Null, |row| row.get("value"));
 
-    Page::new(release_activity_data)
-        .title("Releases")
-        .set("description", "Monthly release activity")
-        .set_true("show_releases_navigation")
-        .set_true("releases_navigation_activity_tab")
-        .set_true("javascript_highchartjs")
-        .to_resp("releases_activity")
+    ReleaseActivity {
+        description: Cow::Borrowed("Monthly release activity"),
+        activity_data,
+    }
+    .into_response(req)
 }
 
 pub fn build_queue_handler(req: &mut Request) -> IronResult<Response> {
diff --git a/templates/releases_activity.hbs b/templates/releases_activity.hbs
deleted file mode 100644
index c82617b1a..000000000
--- a/templates/releases_activity.hbs
+++ /dev/null
@@ -1,41 +0,0 @@
-{{> header}}
-{{#with content}}
-
-<div class="container">
-  <div id="releases-activity-chart"></div>
-</div>
-
-<script type="text/javascript" charset="utf-8">
-new Highcharts.Chart({
-  chart: {
-    renderTo: 'releases-activity-chart',
-    type: 'line'
-  },
-  title: {
-    text: 'Monthly release activity',
-    x: -20 //center
-  },
-  xAxis: {
-    categories: [{{#each dates}}'{{this}}',{{/each}}]
-  },
-  yAxis: {
-    title: {
-      text: 'Crates'
-    },
-    plotLines: [{
-      value: 0,
-      width: 1,
-      color: '#808080'
-    }]
-  },
-  series: [{
-    name: 'Releases',
-    data: [{{#each counts}}{{this}},{{/each}}]
-  },{
-    name: 'Build Failures',
-    data: [{{#each failures}}{{this}},{{/each}}]
-  }]
-});
-</script>
-{{/with}}
-{{> footer}}
diff --git a/tera-templates/releases/activity.html b/tera-templates/releases/activity.html
new file mode 100644
index 000000000..a8e846d2c
--- /dev/null
+++ b/tera-templates/releases/activity.html
@@ -0,0 +1,57 @@
+{%- extends "base.html" -%}
+{%- import "releases/header.html" as release_macros -%}
+
+{%- block title -%}Releases - Docs.rs{%- endblock title -%}
+
+{%- block header -%}
+    {{ release_macros::header(title="Releases", description=description, tab="activity") }}
+{%- endblock header -%}
+
+{%- block body -%}
+    <div class="container">
+        <div id="releases-activity-chart"></div>
+    </div>
+{%- endblock body -%}
+
+{# TODO: Do this with tera alone #}
+{%- block javascript -%}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.2.5/highcharts.js" type="text/javascript"
+        charset="utf-8"></script>
+
+    <script type="text/javascript" charset="utf-8">
+        new Highcharts.Chart({
+            chart: {
+                renderTo: 'releases-activity-chart',
+                type: 'line'
+            },
+            title: {
+                text: 'Monthly release activity',
+                x: -20 //center
+            },
+            xAxis: {
+                categories: [
+                    {% for date in activity_data.dates %}
+                        {{ "'" ~ date ~ "'," }}
+                    {% endfor %}
+                ]
+            },
+            yAxis: {
+                title: {
+                    text: 'Crates'
+                },
+                plotLines: [{
+                    value: 0,
+                    width: 1,
+                    color: '#808080'
+                }]
+            },
+            series: [{
+                name: 'Releases',
+                data: [{{ activity_data.counts | join(sep=", ") }}]
+            }, {
+                name: 'Build Failures',
+                data: [{{ activity_data.failures | join(sep=", ") }}]
+            }]
+        });
+    </script>
+{%- endblock javascript -%}