diff --git a/crossword.module b/crossword.module
index 5bc35c4..aee129f 100644
--- a/crossword.module
+++ b/crossword.module
@@ -101,6 +101,11 @@ function crossword_theme($existing, $type, $theme, $path) {
     'crossword_instructions' => [
       'variables' => [],
     ],
+    'crossword_active_clues' => [
+      'variables' => [
+        'pseudofield' => FALSE,
+      ],
+    ],
   ];
 }
 
@@ -192,3 +197,12 @@ function crossword_theme_suggestions_crossword_grid_row_alter(array &$suggestion
     $suggestions[] = 'crossword_grid_row__pseudofield';
   }
 }
+
+/**
+ * Implements hook_theme_suggestions_HOOK_alter() for crossword active clues.
+ */
+function crossword_theme_suggestions_crossword_active_clues_alter(array &$suggestions, array $variables) {
+  if ($variables['pseudofield']) {
+    $suggestions[] = 'crossword_active_clues__pseudofield';
+  }
+}
diff --git a/modules/crossword_pseudofields/src/Plugin/Field/FieldFormatter/CrosswordPseudofieldsFormatter.php b/modules/crossword_pseudofields/src/Plugin/Field/FieldFormatter/CrosswordPseudofieldsFormatter.php
index 44265b7..f56cd5e 100644
--- a/modules/crossword_pseudofields/src/Plugin/Field/FieldFormatter/CrosswordPseudofieldsFormatter.php
+++ b/modules/crossword_pseudofields/src/Plugin/Field/FieldFormatter/CrosswordPseudofieldsFormatter.php
@@ -67,7 +67,8 @@ class CrosswordPseudofieldsFormatter extends CrosswordFormatter {
       'notepad' => $this->getNotepad($data),
       'controls' => $this->getControls($file),
       'active_clue' => [
-        '#markup' => '<div id="active-clues" class="active-clues"></div>',
+        '#theme' => 'crossword_active_clues',
+        '#pseudofield' => TRUE,
       ],
       'grid' => $this->getGrid($data),
       'across' => $this->getAcross($data),
diff --git a/src/Plugin/Field/FieldFormatter/CrosswordFormatter.php b/src/Plugin/Field/FieldFormatter/CrosswordFormatter.php
index e900dc4..1de3aad 100644
--- a/src/Plugin/Field/FieldFormatter/CrosswordFormatter.php
+++ b/src/Plugin/Field/FieldFormatter/CrosswordFormatter.php
@@ -310,6 +310,10 @@ class CrosswordFormatter extends FileFormatterBase {
           'down' => $this->getDown($data),
           'grid' => $this->getGrid($data),
           'controls' => $this->getControls($file),
+          'active_clue' => [
+            '#theme' => 'crossword_active_clues',
+            '#pseudofield' => $this->getPluginId() == 'crossword_pseudofields',
+          ],
         ],
         '#attached' => [
           'library' => [
diff --git a/templates/crossword-active-clues.html.twig b/templates/crossword-active-clues.html.twig
new file mode 100644
index 0000000..01fef98
--- /dev/null
+++ b/templates/crossword-active-clues.html.twig
@@ -0,0 +1,4 @@
+<div id="active-clues" class="active-clues">
+  <div class="active-clues-text">{# This gets populated by js #}</div>
+  <button class="next-clue-express" id="next-clue-express" title="{% trans %}Next unsolved clue{% endtrans %}"></button>
+</div>
diff --git a/templates/crossword.html.twig b/templates/crossword.html.twig
index 21f59fa..d2cbf17 100644
--- a/templates/crossword.html.twig
+++ b/templates/crossword.html.twig
@@ -9,6 +9,7 @@
  *   - author : The author of the crossword as contained in the parsed file.
  *   - notepad : Notes contained in the parsed file.
  *   - controls : Buttons and checkboxes used to interact with the puzzle.
+ *   - active_clue: Container for active clue.
  *   - grid : The crossword grid as contained in the parsed file.
  *   - across : The across clues contained in the parsed file.
  *   - down : The down clues contained in the parsed file.
@@ -28,10 +29,7 @@
     {{ content.controls }}
   </div>
 
-  <div id="active-clues" class="active-clues">
-    <div class="active-clues-text">{# This gets populated by js #}</div>
-    <button class="next-clue-express" id="next-clue-express" title="{% trans %}Next unsolved clue{% endtrans %}"></button>
-  </div>
+  {{ content.active_clue }}
 
   <div class="crossword-puzzle clearfix">
     {{ content.grid }}