diff --git a/src/renderer/src/editor.tsx b/src/renderer/src/editor.tsx
index f1e1245..e726417 100644
--- a/src/renderer/src/editor.tsx
+++ b/src/renderer/src/editor.tsx
@@ -368,7 +368,7 @@ export function SplitView({ path, onClose, onContext }: {
           <div className="split-label">Original <span>before</span></div>
           <div className="editor" ref={leftRef} onScroll={() => sync(leftRef.current, rightRef.current)} onContextMenu={ctx}>
             {diff.split.map((row, i) => (
-              <div key={i} data-line={row.l ? row.l.no : undefined} className={'ln-row' + (row.l && row.l.mark === 'del' ? ' bar-del' : '') + (!row.l ? ' empty' : '')}>
+              <div key={i} data-line={row.l ? row.l.no : undefined} className={'ln-row' + (row.l && row.l.mark === 'del' ? ' del bar-del' : '') + (!row.l ? ' empty' : '')}>
                 <span className="ln-gutter">{row.l ? row.l.no : ''}</span>
                 <span className="ln-code" dangerouslySetInnerHTML={{ __html: row.l ? leftHtml[i] : '' }} />
               </div>
@@ -379,7 +379,7 @@ export function SplitView({ path, onClose, onContext }: {
           <div className="split-label">Updated <span>after</span></div>
           <div className="editor" ref={rightRef} onScroll={() => sync(rightRef.current, leftRef.current)} onContextMenu={ctx}>
             {diff.split.map((row, i) => (
-              <div key={i} data-line={row.r ? row.r.no : undefined} className={'ln-row' + (row.r && row.r.mark === 'add' ? ' bar-add' : '') + (!row.r ? ' empty' : '')}>
+              <div key={i} data-line={row.r ? row.r.no : undefined} className={'ln-row' + (row.r && row.r.mark === 'add' ? ' add bar-add' : '') + (!row.r ? ' empty' : '')}>
                 <span className="ln-gutter">{row.r ? row.r.no : ''}</span>
                 <span className="ln-code" dangerouslySetInnerHTML={{ __html: row.r ? rightHtml[i] : '' }} />
               </div>