diff --git a/crates/librqbit/webui/app.js b/crates/librqbit/webui/app.js
index b9757b0..10e5feb 100644
--- a/crates/librqbit/webui/app.js
+++ b/crates/librqbit/webui/app.js
@@ -52,6 +52,28 @@ async function getTorrentDetails(index) {
 async function getTorrentStats(index) {
     return makeRequest('GET', `/torrents/${index}/stats`);
 }
+// Function to render HTML for a torrent row
+function renderTorrentRow(torrentId, detailsResponse, statsResponse) {
+    const totalBytes = statsResponse.snapshot.total_bytes;
+    const downloadedBytes = statsResponse.snapshot.have_bytes;
+    // Calculate download percentage
+    const downloadPercentage = (downloadedBytes / totalBytes) * 100;
+    // Display basic information about the torrent
+    const largestFileName = getLargestFileName(detailsResponse);
+    const downloadSpeed = statsResponse.download_speed.human_readable;
+    const eta = getCompletionETA(statsResponse);
+    const peers = `${statsResponse.snapshot.peer_stats.live} / ${statsResponse.snapshot.peer_stats.seen}`;
+    // Create a detached element for the torrent row
+    const newTorrentRow = document.createElement('div');
+    newTorrentRow.classList.add('torrent-row', 'd-flex', 'flex-row', 'p-3', 'bg-light', 'rounded', 'mb-3');
+    newTorrentRow.appendChild(createColumn('Name', largestFileName, 'name-column'));
+    newTorrentRow.appendChild(createColumn('Size', `${formatBytesToGB(totalBytes)} GB`, 'size-column'));
+    newTorrentRow.appendChild(createColumnWithProgressBar('Progress', downloadPercentage));
+    newTorrentRow.appendChild(createColumn('Download Speed', downloadSpeed, 'download-speed-column'));
+    newTorrentRow.appendChild(createColumn('ETA', eta, 'eta-column'));
+    newTorrentRow.appendChild(createColumn('Peers', peers, 'peers-column'));
+    return newTorrentRow;
+}
 // Display function for listing all torrents with concise information (async/await)
 async function displayTorrents() {
     try {
@@ -64,35 +86,17 @@ async function displayTorrents() {
             const detailsPromise = getTorrentDetails(torrent.id);
             const statsPromise = getTorrentStats(torrent.id);
             const [detailsResponse, statsResponse] = await Promise.all([detailsPromise, statsPromise]);
-            const totalBytes = statsResponse.snapshot.total_bytes;
-            const downloadedBytes = statsResponse.snapshot.have_bytes;
-            // Calculate download percentage
-            const downloadPercentage = (downloadedBytes / totalBytes) * 100;
-            // Display basic information about the torrent
-            const largestFileName = getLargestFileName(detailsResponse);
-            const downloadSpeed = statsResponse.download_speed.human_readable;
-            const eta = getCompletionETA(statsResponse);
-            const peers = `${statsResponse.snapshot.peer_stats.live} / ${statsResponse.snapshot.peer_stats.seen}`;
             // Check if the torrent row already exists
             let torrentRow = document.getElementById(`torrent-${torrent.id}`);
             if (!torrentRow) {
-                console.log("not found!");
                 // If the torrent row doesn't exist, create a new one
                 torrentRow = document.createElement('div');
                 torrentRow.id = `torrent-${torrent.id}`;
-                torrentRow.classList.add('torrent-row', 'd-flex', 'flex-row', 'p-3', 'bg-light', 'rounded', 'mb-3');
                 // Append the new torrent row to the torrentsContainer
                 torrentsContainer.appendChild(torrentRow);
             }
-            // Create a detached element to replace torrentRow.innerHTML atomically
-            const newTorrentRow = document.createElement('div');
-            newTorrentRow.classList.add('torrent-row', 'd-flex', 'flex-row', 'p-3', 'bg-light', 'rounded', 'mb-3');
-            newTorrentRow.appendChild(createColumn('Name', largestFileName, 'name-column'));
-            newTorrentRow.appendChild(createColumn('Size', `${formatBytesToGB(totalBytes)} GB`, 'size-column'));
-            newTorrentRow.appendChild(createColumnWithProgressBar('Progress', downloadPercentage));
-            newTorrentRow.appendChild(createColumn('Download Speed', downloadSpeed, 'download-speed-column'));
-            newTorrentRow.appendChild(createColumn('ETA', eta, 'eta-column'));
-            newTorrentRow.appendChild(createColumn('Peers', peers, 'peers-column'));
+            // Render HTML for the torrent row
+            const newTorrentRow = renderTorrentRow(torrent.id, detailsResponse, statsResponse);
             // Replace torrentRow.innerHTML with the new content
             torrentRow.replaceChildren(newTorrentRow);
         });
diff --git a/crates/librqbit/webui/app.ts b/crates/librqbit/webui/app.ts
index e66fad4..a73d6e1 100644
--- a/crates/librqbit/webui/app.ts
+++ b/crates/librqbit/webui/app.ts
@@ -116,6 +116,33 @@ async function getTorrentStats(index: number): Promise<TorrentStats> {
     return makeRequest('GET', `/torrents/${index}/stats`);
 }
 
+// Function to render HTML for a torrent row
+function renderTorrentRow(torrentId: number, detailsResponse: TorrentDetails, statsResponse: TorrentStats) {
+    const totalBytes = statsResponse.snapshot.total_bytes;
+    const downloadedBytes = statsResponse.snapshot.have_bytes;
+
+    // Calculate download percentage
+    const downloadPercentage = (downloadedBytes / totalBytes) * 100;
+
+    // Display basic information about the torrent
+    const largestFileName = getLargestFileName(detailsResponse);
+    const downloadSpeed = statsResponse.download_speed.human_readable;
+    const eta = getCompletionETA(statsResponse);
+    const peers = `${statsResponse.snapshot.peer_stats.live} / ${statsResponse.snapshot.peer_stats.seen}`;
+
+    // Create a detached element for the torrent row
+    const newTorrentRow = document.createElement('div');
+    newTorrentRow.classList.add('torrent-row', 'd-flex', 'flex-row', 'p-3', 'bg-light', 'rounded', 'mb-3');
+    newTorrentRow.appendChild(createColumn('Name', largestFileName, 'name-column'));
+    newTorrentRow.appendChild(createColumn('Size', `${formatBytesToGB(totalBytes)} GB`, 'size-column'));
+    newTorrentRow.appendChild(createColumnWithProgressBar('Progress', downloadPercentage));
+    newTorrentRow.appendChild(createColumn('Download Speed', downloadSpeed, 'download-speed-column'));
+    newTorrentRow.appendChild(createColumn('ETA', eta, 'eta-column'));
+    newTorrentRow.appendChild(createColumn('Peers', peers, 'peers-column'));
+
+    return newTorrentRow;
+}
+
 // Display function for listing all torrents with concise information (async/await)
 async function displayTorrents() {
     try {
@@ -126,46 +153,25 @@ async function displayTorrents() {
         const torrentsContainer = document.getElementById('output');
 
         // Array to hold promises for torrent details and stats
-        const promises = torrents.map(async (torrent) => {
+        const promises = torrents.map(async (torrent: { id: number; }) => {
             const detailsPromise = getTorrentDetails(torrent.id);
             const statsPromise = getTorrentStats(torrent.id);
             const [detailsResponse, statsResponse] = await Promise.all([detailsPromise, statsPromise]);
 
-            const totalBytes = statsResponse.snapshot.total_bytes;
-            const downloadedBytes = statsResponse.snapshot.have_bytes;
-
-            // Calculate download percentage
-            const downloadPercentage = (downloadedBytes / totalBytes) * 100;
-
-            // Display basic information about the torrent
-            const largestFileName = getLargestFileName(detailsResponse);
-            const downloadSpeed = statsResponse.download_speed.human_readable;
-            const eta = getCompletionETA(statsResponse);
-            const peers = `${statsResponse.snapshot.peer_stats.live} / ${statsResponse.snapshot.peer_stats.seen}`;
-
             // Check if the torrent row already exists
             let torrentRow = document.getElementById(`torrent-${torrent.id}`);
 
             if (!torrentRow) {
-                console.log("not found!");
                 // If the torrent row doesn't exist, create a new one
                 torrentRow = document.createElement('div');
                 torrentRow.id = `torrent-${torrent.id}`;
-                torrentRow.classList.add('torrent-row', 'd-flex', 'flex-row', 'p-3', 'bg-light', 'rounded', 'mb-3');
 
                 // Append the new torrent row to the torrentsContainer
                 torrentsContainer.appendChild(torrentRow);
             }
 
-            // Create a detached element to replace torrentRow.innerHTML atomically
-            const newTorrentRow = document.createElement('div');
-            newTorrentRow.classList.add('torrent-row', 'd-flex', 'flex-row', 'p-3', 'bg-light', 'rounded', 'mb-3');
-            newTorrentRow.appendChild(createColumn('Name', largestFileName, 'name-column'));
-            newTorrentRow.appendChild(createColumn('Size', `${formatBytesToGB(totalBytes)} GB`, 'size-column'));
-            newTorrentRow.appendChild(createColumnWithProgressBar('Progress', downloadPercentage,));
-            newTorrentRow.appendChild(createColumn('Download Speed', downloadSpeed, 'download-speed-column'));
-            newTorrentRow.appendChild(createColumn('ETA', eta, 'eta-column'));
-            newTorrentRow.appendChild(createColumn('Peers', peers, 'peers-column'));
+            // Render HTML for the torrent row
+            const newTorrentRow = renderTorrentRow(torrent.id, detailsResponse, statsResponse);
 
             // Replace torrentRow.innerHTML with the new content
             torrentRow.replaceChildren(newTorrentRow);
@@ -179,6 +185,7 @@ async function displayTorrents() {
     }
 }
 
+
 // Function to create a column div
 function createColumn(label: string, value: string, columnClass: string): HTMLDivElement {
     const columnDiv = document.createElement('div');