diff --git a/src/transliteration/ui/annotation-line-tokens.tsx b/src/transliteration/ui/annotation-line-tokens.tsx
new file mode 100644
index 000000000..f0bc37bce
--- /dev/null
+++ b/src/transliteration/ui/annotation-line-tokens.tsx
@@ -0,0 +1,73 @@
+import React from 'react'
+import {
+  annotationLineAccFromColumns,
+  TextLineColumn,
+} from 'transliteration/domain/columns'
+import { TextLine } from 'transliteration/domain/text-line'
+import { LineNumber } from './line-number'
+
+export function AnnotationLineColumns({
+  line,
+  lineIndex,
+  columns,
+  maxColumns,
+}: {
+  line: TextLine
+  lineIndex: number
+  columns: readonly TextLineColumn[]
+  maxColumns: number
+}): JSX.Element {
+  const lineAccumulator = annotationLineAccFromColumns(columns)
+
+  const sourceTextLine = (
+    <tr className={'annotation-line__source'}>
+      <td>
+        <LineNumber line={line} />
+      </td>
+      {lineAccumulator.flatResult.map((token, index) => {
+        return (
+          <td key={index}>
+            <span
+              onClick={() =>
+                console.log(
+                  `clicked on token ${token.token.cleanValue} at line=${lineIndex}, index=${index}`,
+                  token.token
+                )
+              }
+            >
+              {token.display()}
+            </span>
+          </td>
+        )
+      })}
+    </tr>
+  )
+  const lemmaAnnotationLayer = (
+    <tr className={'annotation-line__lemmatization'}>
+      <td></td>
+      {lineAccumulator.flatResult.map((token, index) => {
+        return (
+          <td key={index}>
+            <span
+              onClick={() =>
+                console.log(
+                  `clicked on lemma of token ${token.token.cleanValue} at line=${lineIndex}, index=${index}`,
+                  token.token
+                )
+              }
+            >
+              {token.token.uniqueLemma}
+            </span>
+          </td>
+        )
+      })}
+    </tr>
+  )
+
+  return (
+    <>
+      {sourceTextLine}
+      {lemmaAnnotationLayer}
+    </>
+  )
+}
diff --git a/src/transliteration/ui/line-tokens.tsx b/src/transliteration/ui/line-tokens.tsx
index 9ac7ce567..9a5e37f18 100644
--- a/src/transliteration/ui/line-tokens.tsx
+++ b/src/transliteration/ui/line-tokens.tsx
@@ -9,13 +9,10 @@ import {
 } from './LineLemmasContext'
 import { LineAccumulator } from './LineAccumulator'
 import {
-  annotationLineAccFromColumns,
   lineAccFromColumns,
   TextLineColumn,
 } from 'transliteration/domain/columns'
 import { PhoneticProps } from 'akkadian/application/phonetics/segments'
-import { TextLine } from 'transliteration/domain/text-line'
-import { LineNumber } from './line-number'
 
 export function LineTokens({
   content,
@@ -83,72 +80,6 @@ export function LineColumns({
   )
 }
 
-export function AnnotationLineColumns({
-  line,
-  lineIndex,
-  columns,
-  maxColumns,
-}: {
-  line: TextLine
-  lineIndex: number
-  columns: readonly TextLineColumn[]
-  maxColumns: number
-}): JSX.Element {
-  const lineAccumulator = annotationLineAccFromColumns(columns)
-
-  const sourceTextLine = (
-    <tr className={'annotation-line__source'}>
-      <td>
-        <LineNumber line={line} />
-      </td>
-      {lineAccumulator.flatResult.map((token, index) => {
-        return (
-          <td key={index}>
-            <span
-              onClick={() =>
-                console.log(
-                  `clicked on token ${token.token.cleanValue} at line=${lineIndex}, index=${index}`,
-                  token.token
-                )
-              }
-            >
-              {token.display()}
-            </span>
-          </td>
-        )
-      })}
-    </tr>
-  )
-  const lemmaAnnotationLayer = (
-    <tr className={'annotation-line__lemmatization'}>
-      <td></td>
-      {lineAccumulator.flatResult.map((token, index) => {
-        return (
-          <td key={index}>
-            <span
-              onClick={() =>
-                console.log(
-                  `clicked on lemma of token ${token.token.cleanValue} at line=${lineIndex}, index=${index}`,
-                  token.token
-                )
-              }
-            >
-              {token.token.uniqueLemma}
-            </span>
-          </td>
-        )
-      })}
-    </tr>
-  )
-
-  return (
-    <>
-      {sourceTextLine}
-      {lemmaAnnotationLayer}
-    </>
-  )
-}
-
 export class LineToken {
   token: LemmatizableToken
   lemma: DictionaryWord[] | null = null