diff --git a/assets/javascripts/discourse/components/hledger-account-cell.gjs b/assets/javascripts/discourse/components/hledger-account-cell.gjs
new file mode 100644
index 0000000..ef4b4c9
--- /dev/null
+++ b/assets/javascripts/discourse/components/hledger-account-cell.gjs
@@ -0,0 +1,17 @@
+import dConcatClass from "discourse/ui-kit/helpers/d-concat-class";
+import { depthClass } from "../lib/hledger-report";
+
+const HledgerAccountCell = <template>
+  <td
+    class={{dConcatClass
+      "hledger-dashboard__account"
+      (depthClass @row.depth)
+      (if @boldRoot "--root")
+    }}
+    title={{@row.account}}
+  >
+    {{@row.label}}
+  </td>
+</template>;
+
+export default HledgerAccountCell;
diff --git a/assets/javascripts/discourse/components/hledger-dashboard.gjs b/assets/javascripts/discourse/components/hledger-dashboard.gjs
index c0c48d0..93ec24c 100644
--- a/assets/javascripts/discourse/components/hledger-dashboard.gjs
+++ b/assets/javascripts/discourse/components/hledger-dashboard.gjs
@@ -7,8 +7,9 @@ import { eq } from "discourse/truth-helpers";
 import DButton from "discourse/ui-kit/d-button";
 import DConditionalLoadingSpinner from "discourse/ui-kit/d-conditional-loading-spinner";
 import DDatePicker from "discourse/ui-kit/d-date-picker";
-import dConcatClass from "discourse/ui-kit/helpers/d-concat-class";
 import { i18n } from "discourse-i18n";
+import { amountText } from "../lib/hledger-report";
+import HledgerAccountCell from "./hledger-account-cell";
 
 const REPORT_IDS = ["accounts", "balance_sheet", "income_statement", "equity"];
 
@@ -114,14 +115,6 @@ export default class HledgerDashboard extends Component {
     }
   }
 
-  amountText(amounts) {
-    return (amounts || []).map((amount) => amount.display).join(", ");
-  }
-
-  depthClass(depth) {
-    return `--depth-${Math.min(depth || 0, 3)}`;
-  }
-
   <template>
     <div class="hledger-dashboard__inner">
       <div class="hledger-dashboard__toolbar">
@@ -176,16 +169,8 @@ export default class HledgerDashboard extends Component {
                   <tbody>
                     {{#each group.rows as |row|}}
                       <tr>
-                        <td
-                          class={{dConcatClass
-                            "hledger-dashboard__account"
-                            (this.depthClass row.depth)
-                          }}
-                          title={{row.account}}
-                        >
-                          {{row.label}}
-                        </td>
-                        <td class="hledger-dashboard__amount">{{this.amountText
+                        <HledgerAccountCell @row={{row}} />
+                        <td class="hledger-dashboard__amount">{{amountText
                             row.amounts
                           }}</td>
                         <td
@@ -217,17 +202,11 @@ export default class HledgerDashboard extends Component {
                   <tbody>
                     {{#each section.rows as |row|}}
                       <tr>
-                        <td
-                          class={{dConcatClass
-                            "hledger-dashboard__account"
-                            (this.depthClass row.depth)
-                            (if row.root "--root")
-                          }}
-                          title={{row.account}}
-                        >
-                          {{row.label}}
-                        </td>
-                        <td class="hledger-dashboard__amount">{{this.amountText
+                        <HledgerAccountCell
+                          @row={{row}}
+                          @boldRoot={{row.root}}
+                        />
+                        <td class="hledger-dashboard__amount">{{amountText
                             row.amounts
                           }}</td>
                       </tr>
@@ -235,7 +214,7 @@ export default class HledgerDashboard extends Component {
                     {{#if section.total}}
                       <tr class="hledger-dashboard__total">
                         <td>{{this.labels.total}}</td>
-                        <td class="hledger-dashboard__amount">{{this.amountText
+                        <td class="hledger-dashboard__amount">{{amountText
                             section.total
                           }}</td>
                       </tr>
@@ -247,7 +226,7 @@ export default class HledgerDashboard extends Component {
             {{#if this.report.net}}
               <div class="hledger-dashboard__net">
                 <span>{{this.labels.net}}</span>
-                <span class="hledger-dashboard__amount">{{this.amountText
+                <span class="hledger-dashboard__amount">{{amountText
                     this.report.net
                   }}</span>
               </div>
diff --git a/assets/javascripts/discourse/lib/hledger-report.js b/assets/javascripts/discourse/lib/hledger-report.js
new file mode 100644
index 0000000..ab725c4
--- /dev/null
+++ b/assets/javascripts/discourse/lib/hledger-report.js
@@ -0,0 +1,7 @@
+export function amountText(amounts) {
+  return (amounts || []).map((amount) => amount.display).join(", ");
+}
+
+export function depthClass(depth) {
+  return `--depth-${Math.min(depth || 0, 3)}`;
+}