diff --git a/lnbits/extensions/TwitchAlerts/templates/TwitchAlerts/index.html b/lnbits/extensions/TwitchAlerts/templates/TwitchAlerts/index.html
new file mode 100644
index 000000000..e78e07bc8
--- /dev/null
+++ b/lnbits/extensions/TwitchAlerts/templates/TwitchAlerts/index.html
@@ -0,0 +1,57 @@
+{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
+%} {% block page %}
+<q-card>
+  <q-card-section>
+    <h5 class="text-subtitle1 q-mt-none q-mb-md">Frameworks used by LNbits</h5>
+    <q-list>
+      <q-item
+        v-for="tool in tools"
+        :key="tool.name"
+        tag="a"
+        :href="tool.url"
+        target="_blank"
+      >
+        {% raw %}
+        <!-- with raw Flask won't try to interpret the Vue moustaches -->
+        <q-item-section>
+          <q-item-label>{{ tool.name }}</q-item-label>
+          <q-item-label caption>{{ tool.language }}</q-item-label>
+        </q-item-section>
+        {% endraw %}
+      </q-item>
+    </q-list>
+    <q-separator class="q-my-lg"></q-separator>
+    <p>
+      A magical "g" is always available, with info about the user, wallets and
+      extensions:
+    </p>
+    <code class="text-caption">{% raw %}{{ g }}{% endraw %}</code>
+  </q-card-section>
+</q-card>
+{% endblock %} {% block scripts %} {{ window_vars(user) }}
+<script>
+  new Vue({
+    el: '#vue',
+    mixins: [windowMixin],
+    data: function () {
+      return {
+        tools: []
+      }
+    },
+    created: function () {
+      var self = this
+
+      // axios is available for making requests
+      axios({
+        method: 'GET',
+        url: '/TwitchAlerts/api/v1/tools',
+        headers: {
+          'X-TwitchAlerts-header': 'not-used'
+        }
+      }).then(function (response) {
+        self.tools = response.data
+      })
+    }
+  })
+</script>
+{% endblock %}