diff --git a/templates/token-tree.html.twig b/templates/token-tree.html.twig
new file mode 100644
index 0000000..6fb86e8
--- /dev/null
+++ b/templates/token-tree.html.twig
@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Default theme implementation to present token tree data.
+ *
+ *
+ * Available variables:
+ * - content: A list of content items. Use 'content' to print all content, or
+ *   print a subset such as 'content.field_example'.
+ * @see template_preprocess_token_tree()
+ *
+ * @ingroup themeable
+ */
+#}
+
+<article{{ attributes }}>
+    {{ content }}
+</article>
diff --git a/templates/tree-table.html.twig b/templates/tree-table.html.twig
new file mode 100644
index 0000000..ec5b4fa
--- /dev/null
+++ b/templates/tree-table.html.twig
@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Default theme implementation to present token table.
+ *
+ *
+ * Available variables:
+ * - content: A list of content items. Use 'content' to print all content, or
+ *   print a subset such as 'content.field_example'.
+ * @see template_preprocess_token_table()
+ *
+ * @ingroup themeable
+ */
+#}
+{{ content }}
diff --git a/token.module b/token.module
index 6bc8ab1..224ebbb 100644
--- a/token.module
+++ b/token.module
@@ -35,12 +35,17 @@ function token_help($route_name, RouteMatchInterface $route_match) {
       // return a TRUE value if this is not actually the help page.
       return TRUE;
     }
-    $output = '<dl>';
-    $output .= '<dt>' . t('List of the currently available tokens on this site') . '</dt>';
-    // ToDo: Use render arrays. See https://drupal.org/node/2195739
-    $output .= '<dd>' . _theme('token_tree', array('token_types' => 'all', 'click_insert' => FALSE, 'show_restricted' => TRUE)) . '</dd>';
-    $output .= '</dl>';
-    return $output;
+    $output = [];
+    $output['#prefix'] = t('List of the currently available tokens on this site');
+
+    $output['content'] = [
+      '#theme' => 'token_tree',
+      '#token_types' => 'all',
+      '#click_insert' => FALSE,
+      '#show_restricted' => TRUE,
+    ];
+
+    return drupal_render($output);
   }
 }
 
diff --git a/token.pages.inc b/token.pages.inc
index 22711c9..2bbb28c 100644
--- a/token.pages.inc
+++ b/token.pages.inc
@@ -56,7 +56,7 @@ function theme_token_tree_link($variables) {
  *
  * @ingroup themeable
  */
-function theme_tree_table($variables) {
+function template_preprocess_tree_table(&$variables) {
   foreach ($variables['rows'] as &$row) {
     $row += array('class' => array());
     if (!empty($row['parent'])) {
@@ -64,24 +64,27 @@ function theme_tree_table($variables) {
       unset($row['parent']);
     }
   }
-  $attached['#attached']['library'][] = 'token/token';
+  $variables['#attached']['library'][] = 'token/token';
   if (!empty($variables['rows'])) {
-    $attached['#attached']['library'][] = 'token/jquery.treeTable';
+    $variables['#attached']['library'][] = 'token/jquery.treeTable';
   }
-  drupal_render($attached);
-  // ToDo: Use render arrays. See https://drupal.org/node/2195739
-  return _theme('table', $variables);
+
+  $variables['content'] = [
+    '#theme' => 'table',
+    '#headers' => $variables['headers'],
+    '#rows' => $variables['rows'],
+  ];
+
 }
 
 /**
  * Provide a 'tree' display of nested tokens.
  *
+ * Default template: token_tree.twig.html
+ *
  * @ingroup themeable
  */
-function theme_token_tree($variables) {
-  if (!empty($variables['dialog'])) {
-    return _theme('token_tree_link', $variables);
-  }
+function template_preprocess_token_tree(&$variables) {
 
   $token_types = $variables['token_types'];
   $info = token_get_info();
@@ -137,7 +140,7 @@ function theme_token_tree($variables) {
   }
 
   $element += array(
-    '#theme' => 'tree_table',
+    '#theme' => 'table',
     '#header' => array(
       t('Name'),
       t('Token'),
@@ -157,9 +160,8 @@ function theme_token_tree($variables) {
     $element['#attributes']['class'][] = 'token-click-insert';
   }
 
-  $output = drupal_render($element);
-  token_render_cache_set($output, $element);
-  return $output;
+  $variables['content'] = $element;
+
 }
 
 /**