diff --git a/webui2/src/components/code/file-viewer.module.css b/webui2/src/components/code/file-viewer.module.css
index 0df9b0fffcb32c3f4f2428c7518361a4e333807e..d7b6953a15120d056530b72bc762d4ec15e7eb3b 100644
--- a/webui2/src/components/code/file-viewer.module.css
+++ b/webui2/src/components/code/file-viewer.module.css
@@ -1,35 +1,35 @@
-.code_block {
+.code-block {
   overflow-x: auto;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-family: var(--font-mono);
   font-size: 0.75rem;
   line-height: 1.25rem;
 }
 
-.code_content pre {
+.code-content pre {
   margin: 0 !important;
   padding: 0 !important;
 }
 
-.code_content code {
+.code-content code {
   display: block;
 }
 
-.code_content code > .line {
+.code-content code > .line {
   display: block;
   min-width: 100%;
   padding-right: 1rem;
 }
 
-.code_content code > .line:first-child {
+.code-content code > .line:first-child {
   padding-top: 0.5rem;
 }
 
-.code_content code > .line:last-child {
+.code-content code > .line:last-child {
   padding-bottom: 0.5rem;
 }
 
 /* Line numbers via ::before pseudo-element */
-.code_content code > .line::before {
+.code-content code > .line::before {
   content: attr(data-line-number);
   display: inline-block;
   width: 3rem;
@@ -41,10 +41,10 @@
 }
 
 /* Line highlighting */
-.code_content code > .line.highlighted {
+.code-content code > .line.highlighted {
   background-color: rgba(255, 235, 59, 0.3);
 }
 
-:global(.dark) .code_content code > .line.highlighted {
+:global(.dark) .code-content code > .line.highlighted {
   background-color: rgba(255, 235, 59, 0.15);
 }
diff --git a/webui2/src/components/code/file-viewer.tsx b/webui2/src/components/code/file-viewer.tsx
index 9549357ef8b1d75c3d23027a60284c926c7f541d..c63d9cf727d523f257607a2a356ff7cab7e84784 100644
--- a/webui2/src/components/code/file-viewer.tsx
+++ b/webui2/src/components/code/file-viewer.tsx
@@ -289,7 +289,7 @@ function CodeBlock({ selectedRange, onLineClick, children }: CodeBlockProps) {
   // targeting the CSS module's scoped class.
   const highlightStyle = (() => {
     if (!selectedRange) return null;
-    const scope = `.${styles["code_content"]}`;
+    const scope = `.${styles["code-content"]}`;
     const selectors: string[] = [];
     for (let i = selectedRange.start; i <= selectedRange.end; i++) {
       selectors.push(`${scope} code > .line:nth-child(${i})`);
@@ -300,7 +300,7 @@ function CodeBlock({ selectedRange, onLineClick, children }: CodeBlockProps) {
 
   return (
     <div
-      className={styles["code_block"]}
+      className={styles["code-block"]}
       onClick={(e) => {
         const target = e.target as HTMLElement;
         const lineEl = target.closest("[data-line-number]");
@@ -312,7 +312,7 @@ function CodeBlock({ selectedRange, onLineClick, children }: CodeBlockProps) {
       }}
     >
       {highlightStyle}
-      <div className={styles["code_content"]}>
+      <div className={styles["code-content"]}>
         {children}
       </div>
     </div>