diff --git a/app/Livewire/Project/Shared/GetLogs.php b/app/Livewire/Project/Shared/GetLogs.php
index c0ced26ef..8fda35a4a 100644
--- a/app/Livewire/Project/Shared/GetLogs.php
+++ b/app/Livewire/Project/Shared/GetLogs.php
@@ -67,11 +67,6 @@ public function mount()
         }
     }
 
-    public function doSomethingWithThisChunkOfOutput($output)
-    {
-        $this->outputs .= removeAnsiColors($output);
-    }
-
     public function instantSave()
     {
         if (! is_null($this->resource)) {
@@ -162,20 +157,24 @@ public function getLogs($refresh = false)
                     $sshCommand = SshMultiplexingHelper::generateSshCommand($this->server, $command);
                 }
             }
-            if ($refresh) {
-                $this->outputs = '';
-            }
-            Process::run($sshCommand, function (string $type, string $output) {
-                $this->doSomethingWithThisChunkOfOutput($output);
+            // Collect new logs into temporary variable first to prevent flickering
+            // (avoids clearing output before new data is ready)
+            $newOutputs = '';
+            Process::run($sshCommand, function (string $type, string $output) use (&$newOutputs) {
+                $newOutputs .= removeAnsiColors($output);
             });
+
             if ($this->showTimeStamps) {
-                $this->outputs = str($this->outputs)->split('/\n/')->sort(function ($a, $b) {
+                $newOutputs = str($newOutputs)->split('/\n/')->sort(function ($a, $b) {
                     $a = explode(' ', $a);
                     $b = explode(' ', $b);
 
                     return $a[0] <=> $b[0];
                 })->join("\n");
             }
+
+            // Only update outputs after new data is ready (atomic update prevents flicker)
+            $this->outputs = $newOutputs;
         }
     }
 
diff --git a/resources/css/utilities.css b/resources/css/utilities.css
index abb177835..7978b2d19 100644
--- a/resources/css/utilities.css
+++ b/resources/css/utilities.css
@@ -292,3 +292,31 @@ @utility dz-button {
 @utility xterm {
     @apply p-2;
 }
+
+/* Log line optimization - uses content-visibility for lazy rendering of off-screen log lines */
+@utility log-line {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 1.5em;
+}
+
+/* Search highlight styling for logs */
+@utility log-highlight {
+    @apply bg-warning/40 dark:bg-warning/30;
+}
+
+/* Log level color classes */
+@utility log-error {
+    @apply bg-red-500/10 dark:bg-red-500/15;
+}
+
+@utility log-warning {
+    @apply bg-yellow-500/10 dark:bg-yellow-500/15;
+}
+
+@utility log-debug {
+    @apply bg-purple-500/10 dark:bg-purple-500/15;
+}
+
+@utility log-info {
+    @apply bg-blue-500/10 dark:bg-blue-500/15;
+}
diff --git a/resources/views/livewire/project/application/deployment/show.blade.php b/resources/views/livewire/project/application/deployment/show.blade.php
index 7379dbbe8..6aaf3e257 100644
--- a/resources/views/livewire/project/application/deployment/show.blade.php
+++ b/resources/views/livewire/project/application/deployment/show.blade.php
@@ -8,26 +8,44 @@
         <div x-data="{
         fullscreen: @entangle('fullscreen'),
         alwaysScroll: {{ $isKeepAliveOn ? 'true' : 'false' }},
-        intervalId: null,
+        rafId: null,
         showTimestamps: true,
         searchQuery: '',
         renderTrigger: 0,
         deploymentId: '{{ $application_deployment_queue->deployment_uuid ?? 'deployment' }}',
+        // Cache for decoded HTML to avoid repeated DOMParser calls
+        decodeCache: new Map(),
+        // Cache for match count to avoid repeated DOM queries
+        matchCountCache: null,
+        lastSearchQuery: '',
         makeFullscreen() {
             this.fullscreen = !this.fullscreen;
         },
+        scrollToBottom() {
+            const logsContainer = document.getElementById('logsContainer');
+            if (logsContainer) {
+                logsContainer.scrollTop = logsContainer.scrollHeight;
+            }
+        },
+        scheduleScroll() {
+            if (!this.alwaysScroll) return;
+            this.rafId = requestAnimationFrame(() => {
+                this.scrollToBottom();
+                // Schedule next scroll after a reasonable delay (250ms instead of 100ms)
+                if (this.alwaysScroll) {
+                    setTimeout(() => this.scheduleScroll(), 250);
+                }
+            });
+        },
         toggleScroll() {
             this.alwaysScroll = !this.alwaysScroll;
             if (this.alwaysScroll) {
-                this.intervalId = setInterval(() => {
-                    const logsContainer = document.getElementById('logsContainer');
-                    if (logsContainer) {
-                        logsContainer.scrollTop = logsContainer.scrollHeight;
-                    }
-                }, 100);
+                this.scheduleScroll();
             } else {
-                clearInterval(this.intervalId);
-                this.intervalId = null;
+                if (this.rafId) {
+                    cancelAnimationFrame(this.rafId);
+                    this.rafId = null;
+                }
             }
         },
         matchesSearch(text) {
@@ -41,17 +59,19 @@
             }
             const logsContainer = document.getElementById('logs');
             if (!logsContainer) return false;
-
-            // Check if selection is within the logs container
             const range = selection.getRangeAt(0);
             return logsContainer.contains(range.commonAncestorContainer);
         },
         decodeHtml(text) {
-            // Decode HTML entities, handling double-encoding with max iteration limit to prevent DoS
+            // Return cached result if available
+            if (this.decodeCache.has(text)) {
+                return this.decodeCache.get(text);
+            }
+            // Decode HTML entities with max iteration limit
             let decoded = text;
             let prev = '';
             let iterations = 0;
-            const maxIterations = 3; // Prevent DoS from deeply nested HTML entities
+            const maxIterations = 3;
 
             while (decoded !== prev && iterations < maxIterations) {
                 prev = decoded;
@@ -59,11 +79,17 @@
                 decoded = doc.documentElement.textContent;
                 iterations++;
             }
+            // Cache the result (limit cache size to prevent memory bloat)
+            if (this.decodeCache.size > 5000) {
+                // Clear oldest entries when cache gets too large
+                const firstKey = this.decodeCache.keys().next().value;
+                this.decodeCache.delete(firstKey);
+            }
+            this.decodeCache.set(text, decoded);
             return decoded;
         },
         renderHighlightedLog(el, text) {
-            // Skip re-render if user has text selected in logs (preserves copy ability)
-            // But always render if the element is empty (initial render)
+            // Skip re-render if user has text selected in logs
             if (el.textContent && this.hasActiveLogSelection()) {
                 return;
             }
@@ -82,11 +108,9 @@
 
             let index = lowerText.indexOf(query, lastIndex);
             while (index !== -1) {
-                // Add text before match
                 if (index > lastIndex) {
                     el.appendChild(document.createTextNode(decoded.substring(lastIndex, index)));
                 }
-                // Add highlighted match
                 const mark = document.createElement('span');
                 mark.className = 'log-highlight';
                 mark.textContent = decoded.substring(index, index + this.searchQuery.length);
@@ -96,22 +120,28 @@
                 index = lowerText.indexOf(query, lastIndex);
             }
 
-            // Add remaining text
             if (lastIndex < decoded.length) {
                 el.appendChild(document.createTextNode(decoded.substring(lastIndex)));
             }
         },
         getMatchCount() {
             if (!this.searchQuery.trim()) return 0;
+            // Return cached count if search query hasn't changed
+            if (this.lastSearchQuery === this.searchQuery && this.matchCountCache !== null) {
+                return this.matchCountCache;
+            }
             const logs = document.getElementById('logs');
             if (!logs) return 0;
             const lines = logs.querySelectorAll('[data-log-line]');
             let count = 0;
+            const query = this.searchQuery.toLowerCase();
             lines.forEach(line => {
-                if (line.dataset.logContent && line.dataset.logContent.toLowerCase().includes(this.searchQuery.toLowerCase())) {
+                if (line.dataset.logContent && line.dataset.logContent.toLowerCase().includes(query)) {
                     count++;
                 }
             });
+            this.matchCountCache = count;
+            this.lastSearchQuery = this.searchQuery;
             return count;
         },
         downloadLogs() {
@@ -135,15 +165,11 @@
             URL.revokeObjectURL(url);
         },
         stopScroll() {
-            // Scroll to the end one final time before disabling
-            const logsContainer = document.getElementById('logsContainer');
-            if (logsContainer) {
-                logsContainer.scrollTop = logsContainer.scrollHeight;
-            }
+            this.scrollToBottom();
             this.alwaysScroll = false;
-            if (this.intervalId) {
-                clearInterval(this.intervalId);
-                this.intervalId = null;
+            if (this.rafId) {
+                cancelAnimationFrame(this.rafId);
+                this.rafId = null;
             }
         },
         init() {
@@ -153,30 +179,32 @@
                     skip();
                 }
             });
-            // Re-render logs after Livewire updates
+            // Re-render logs after Livewire updates (debounced)
+            let renderTimeout = null;
+            const debouncedRender = () => {
+                clearTimeout(renderTimeout);
+                renderTimeout = setTimeout(() => {
+                    this.matchCountCache = null; // Invalidate match cache on new content
+                    this.renderTrigger++;
+                }, 100);
+            };
             document.addEventListener('livewire:navigated', () => {
-                this.$nextTick(() => { this.renderTrigger++; });
+                this.$nextTick(debouncedRender);
             });
             Livewire.hook('commit', ({ succeed }) => {
                 succeed(() => {
-                    this.$nextTick(() => { this.renderTrigger++; });
+                    this.$nextTick(debouncedRender);
                 });
             });
             // Stop auto-scroll when deployment finishes
             Livewire.on('deploymentFinished', () => {
-                // Wait for DOM to update with final logs before scrolling to end
                 setTimeout(() => {
                     this.stopScroll();
                 }, 500);
             });
             // Start auto-scroll if deployment is in progress
             if (this.alwaysScroll) {
-                this.intervalId = setInterval(() => {
-                    const logsContainer = document.getElementById('logsContainer');
-                    if (logsContainer) {
-                        logsContainer.scrollTop = logsContainer.scrollHeight;
-                    }
-                }, 100);
+                this.scheduleScroll();
             }
         }
     }">
@@ -212,7 +240,7 @@ class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"></span>
                                     <path stroke-linecap="round" stroke-linejoin="round"
                                         d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                                 </svg>
-                                <input type="text" x-model="searchQuery" placeholder="Find in logs"
+                                <input type="text" x-model.debounce.300ms="searchQuery" placeholder="Find in logs"
                                     class="input input-sm w-48 pl-8 pr-8 dark:bg-coolgray-200" />
                                 <button x-show="searchQuery" x-on:click="searchQuery = ''" type="button"
                                     class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
@@ -308,7 +336,7 @@ class="text-gray-500 dark:text-gray-400 py-2">
                                 <div data-log-line data-log-content="{{ htmlspecialchars($searchableContent) }}"
                                     x-effect="renderTrigger; searchQuery; $el.classList.toggle('hidden', !matchesSearch($el.dataset.logContent))" @class([
                                         'mt-2' => isset($line['command']) && $line['command'],
-                                        'flex gap-2',
+                                        'flex gap-2 log-line',
                                     ])>
                                     <span x-show="showTimestamps"
                                         class="shrink-0 text-gray-500">{{ $line['timestamp'] }}</span>
diff --git a/resources/views/livewire/project/shared/get-logs.blade.php b/resources/views/livewire/project/shared/get-logs.blade.php
index 1b0493265..d4a4208f5 100644
--- a/resources/views/livewire/project/shared/get-logs.blade.php
+++ b/resources/views/livewire/project/shared/get-logs.blade.php
@@ -5,17 +5,20 @@
         logsLoaded: false,
         fullscreen: false,
         alwaysScroll: false,
-        intervalId: null,
+        rafId: null,
         scrollDebounce: null,
         colorLogs: localStorage.getItem('coolify-color-logs') === 'true',
         searchQuery: '',
-        renderTrigger: 0,
+        matchCount: 0,
         containerName: '{{ $container ?? "logs" }}',
         makeFullscreen() {
             this.fullscreen = !this.fullscreen;
             if (this.fullscreen === false) {
                 this.alwaysScroll = false;
-                clearInterval(this.intervalId);
+                if (this.rafId) {
+                    cancelAnimationFrame(this.rafId);
+                    this.rafId = null;
+                }
             }
         },
         handleKeyDown(event) {
@@ -24,67 +27,72 @@
             }
         },
         isScrolling: false,
+        scrollToBottom() {
+            const logsContainer = document.getElementById('logsContainer');
+            if (logsContainer) {
+                this.isScrolling = true;
+                logsContainer.scrollTop = logsContainer.scrollHeight;
+                setTimeout(() => { this.isScrolling = false; }, 50);
+            }
+        },
+        scheduleScroll() {
+            if (!this.alwaysScroll) return;
+            this.rafId = requestAnimationFrame(() => {
+                this.scrollToBottom();
+                if (this.alwaysScroll) {
+                    setTimeout(() => this.scheduleScroll(), 250);
+                }
+            });
+        },
         toggleScroll() {
             this.alwaysScroll = !this.alwaysScroll;
             if (this.alwaysScroll) {
-                this.intervalId = setInterval(() => {
-                    const logsContainer = document.getElementById('logsContainer');
-                    if (logsContainer) {
-                        this.isScrolling = true;
-                        logsContainer.scrollTop = logsContainer.scrollHeight;
-                        setTimeout(() => { this.isScrolling = false; }, 50);
-                    }
-                }, 100);
+                this.scheduleScroll();
             } else {
-                clearInterval(this.intervalId);
-                this.intervalId = null;
+                if (this.rafId) {
+                    cancelAnimationFrame(this.rafId);
+                    this.rafId = null;
+                }
             }
         },
         handleScroll(event) {
-            // Skip if follow logs is disabled or this is a programmatic scroll
             if (!this.alwaysScroll || this.isScrolling) return;
-
-            // Debounce scroll handling to avoid false positives from DOM mutations
-            // when Livewire re-renders and adds new log lines
             clearTimeout(this.scrollDebounce);
             this.scrollDebounce = setTimeout(() => {
                 const el = event.target;
                 const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
-                // Use larger threshold (100px) to avoid accidental disables
                 if (distanceFromBottom > 100) {
                     this.alwaysScroll = false;
-                    clearInterval(this.intervalId);
-                    this.intervalId = null;
+                    if (this.rafId) {
+                        cancelAnimationFrame(this.rafId);
+                        this.rafId = null;
+                    }
                 }
             }, 150);
         },
         toggleColorLogs() {
             this.colorLogs = !this.colorLogs;
             localStorage.setItem('coolify-color-logs', this.colorLogs);
+            this.applyColorLogs();
         },
-        getLogLevel(text) {
-            const lowerText = text.toLowerCase();
-            // Error detection (highest priority)
-            if (/\b(error|err|failed|failure|exception|fatal|panic|critical)\b/.test(lowerText)) {
-                return 'error';
-            }
-            // Warning detection
-            if (/\b(warn|warning|wrn|caution)\b/.test(lowerText)) {
-                return 'warning';
-            }
-            // Debug detection
-            if (/\b(debug|dbg|trace|verbose)\b/.test(lowerText)) {
-                return 'debug';
-            }
-            // Info detection
-            if (/\b(info|inf|notice)\b/.test(lowerText)) {
-                return 'info';
-            }
-            return null;
-        },
-        matchesSearch(line) {
-            if (!this.searchQuery.trim()) return true;
-            return line.toLowerCase().includes(this.searchQuery.toLowerCase());
+        applyColorLogs() {
+            const logs = document.getElementById('logs');
+            if (!logs) return;
+            const lines = logs.querySelectorAll('[data-log-line]');
+            lines.forEach(line => {
+                const content = (line.dataset.logContent || '').toLowerCase();
+                line.classList.remove('log-error', 'log-warning', 'log-debug', 'log-info');
+                if (!this.colorLogs) return;
+                if (/\b(error|err|failed|failure|exception|fatal|panic|critical)\b/.test(content)) {
+                    line.classList.add('log-error');
+                } else if (/\b(warn|warning|wrn|caution)\b/.test(content)) {
+                    line.classList.add('log-warning');
+                } else if (/\b(debug|dbg|trace|verbose)\b/.test(content)) {
+                    line.classList.add('log-debug');
+                } else if (/\b(info|inf|notice)\b/.test(content)) {
+                    line.classList.add('log-info');
+                }
+            });
         },
         hasActiveLogSelection() {
             const selection = window.getSelection();
@@ -93,79 +101,62 @@
             }
             const logsContainer = document.getElementById('logs');
             if (!logsContainer) return false;
-
-            // Check if selection is within the logs container
             const range = selection.getRangeAt(0);
             return logsContainer.contains(range.commonAncestorContainer);
         },
-        decodeHtml(text) {
-            // Decode HTML entities, handling double-encoding with max iteration limit to prevent DoS
-            let decoded = text;
-            let prev = '';
-            let iterations = 0;
-            const maxIterations = 3; // Prevent DoS from deeply nested HTML entities
+        applySearch() {
+            const logs = document.getElementById('logs');
+            if (!logs) return;
+            const lines = logs.querySelectorAll('[data-log-line]');
+            const query = this.searchQuery.trim().toLowerCase();
+            let count = 0;
 
-            while (decoded !== prev && iterations < maxIterations) {
-                prev = decoded;
-                const doc = new DOMParser().parseFromString(decoded, 'text/html');
-                decoded = doc.documentElement.textContent;
-                iterations++;
-            }
-            return decoded;
-        },
-        renderHighlightedLog(el, text) {
-            // Skip re-render if user has text selected in logs (preserves copy ability)
-            // But always render if the element is empty (initial render)
-            if (el.textContent && this.hasActiveLogSelection()) {
-                return;
-            }
+            lines.forEach(line => {
+                const content = (line.dataset.logContent || '').toLowerCase();
+                const textSpan = line.querySelector('[data-line-text]');
+                const matches = !query || content.includes(query);
 
-            const decoded = this.decodeHtml(text);
-            el.textContent = '';
+                line.classList.toggle('hidden', !matches);
+                if (matches && query) count++;
 
-            if (!this.searchQuery.trim()) {
-                el.textContent = decoded;
-                return;
-            }
-
-            const query = this.searchQuery.toLowerCase();
-            const lowerText = decoded.toLowerCase();
-            let lastIndex = 0;
-
-            let index = lowerText.indexOf(query, lastIndex);
-            while (index !== -1) {
-                // Add text before match
-                if (index > lastIndex) {
-                    el.appendChild(document.createTextNode(decoded.substring(lastIndex, index)));
+                // Update highlighting
+                if (textSpan) {
+                    const originalText = textSpan.dataset.lineText || '';
+                    if (!query) {
+                        textSpan.textContent = originalText;
+                    } else if (matches) {
+                        this.highlightText(textSpan, originalText, query);
+                    }
+                }
+            });
+
+            this.matchCount = query ? count : 0;
+        },
+        highlightText(el, text, query) {
+            // Skip if user has selection
+            if (this.hasActiveLogSelection()) return;
+
+            el.textContent = '';
+            const lowerText = text.toLowerCase();
+            let lastIndex = 0;
+            let index = lowerText.indexOf(query, lastIndex);
+
+            while (index !== -1) {
+                if (index > lastIndex) {
+                    el.appendChild(document.createTextNode(text.substring(lastIndex, index)));
                 }
-                // Add highlighted match
                 const mark = document.createElement('span');
                 mark.className = 'log-highlight';
-                mark.textContent = decoded.substring(index, index + this.searchQuery.length);
+                mark.textContent = text.substring(index, index + query.length);
                 el.appendChild(mark);
-
-                lastIndex = index + this.searchQuery.length;
+                lastIndex = index + query.length;
                 index = lowerText.indexOf(query, lastIndex);
             }
 
-            // Add remaining text
-            if (lastIndex < decoded.length) {
-                el.appendChild(document.createTextNode(decoded.substring(lastIndex)));
+            if (lastIndex < text.length) {
+                el.appendChild(document.createTextNode(text.substring(lastIndex)));
             }
         },
-        getMatchCount() {
-            if (!this.searchQuery.trim()) return 0;
-            const logs = document.getElementById('logs');
-            if (!logs) return 0;
-            const lines = logs.querySelectorAll('[data-log-line]');
-            let count = 0;
-            lines.forEach(line => {
-                if (line.textContent.toLowerCase().includes(this.searchQuery.toLowerCase())) {
-                    count++;
-                }
-            });
-            return count;
-        },
         downloadLogs() {
             const logs = document.getElementById('logs');
             if (!logs) return;
@@ -191,17 +182,23 @@
                 this.$wire.getLogs(true);
                 this.logsLoaded = true;
             }
-            // Prevent Livewire from morphing logs container when text is selected
-            Livewire.hook('morph.updating', ({ el, component, toEl, skip }) => {
-                if (el.id === 'logs' && this.hasActiveLogSelection()) {
-                    skip();
-                }
+
+            // Watch search query changes
+            this.$watch('searchQuery', () => {
+                this.applySearch();
             });
-            // Re-render logs after Livewire updates
-            Livewire.hook('commit', ({ succeed }) => {
-                succeed(() => {
-                    this.$nextTick(() => { this.renderTrigger++; });
-                });
+
+            // Apply colors after Livewire updates
+            Livewire.hook('morph.updated', ({ el }) => {
+                if (el.id === 'logs') {
+                    this.$nextTick(() => {
+                        this.applyColorLogs();
+                        this.applySearch();
+                        if (this.alwaysScroll) {
+                            this.scrollToBottom();
+                        }
+                    });
+                }
             });
         }
     }" @keydown.window="handleKeyDown($event)">
@@ -242,7 +239,7 @@ class="absolute left-2 top-1/2 -translate-y-1/2 text-xs text-gray-400 pointer-ev
                                 title="Number of Lines" {{ $streamLogs ? 'readonly' : '' }}
                                 class="input input-sm w-32 pl-11 text-center dark:bg-coolgray-300" />
                         </form>
-                        <span x-show="searchQuery.trim()" x-text="getMatchCount() + ' matches'"
+                        <span x-show="searchQuery.trim()" x-text="matchCount + ' matches'"
                             class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"></span>
                     </div>
                     <div class="flex items-center gap-2">
@@ -374,7 +371,7 @@ class="flex overflow-y-auto overflow-x-hidden flex-col px-4 py-2 w-full min-w-0
                                     Showing last {{ number_format($maxDisplayLines) }} of {{ number_format($totalLines) }} lines
                                 </div>
                             @endif
-                            <div x-show="searchQuery.trim() && getMatchCount() === 0"
+                            <div x-show="searchQuery.trim() && matchCount === 0"
                                 class="text-gray-500 dark:text-gray-400 py-2">
                                 No matches found.
                             </div>
@@ -398,23 +395,12 @@ class="text-gray-500 dark:text-gray-400 py-2">
                                         // Format: 2025-Dec-04 09:44:58.198879
                                         $timestamp = "{$year}-{$monthName}-{$day} {$time}.{$microseconds}";
                                     }
-
                                 @endphp
-                                <div data-log-line data-log-content="{{ $line }}"
-                                    x-effect="renderTrigger; searchQuery; $el.classList.toggle('hidden', !matchesSearch($el.dataset.logContent))"
-                                    x-bind:class="{
-                                        'bg-red-500/10 dark:bg-red-500/15': colorLogs && getLogLevel($el.dataset.logContent) === 'error',
-                                        'bg-yellow-500/10 dark:bg-yellow-500/15': colorLogs && getLogLevel($el.dataset.logContent) === 'warning',
-                                        'bg-purple-500/10 dark:bg-purple-500/15': colorLogs && getLogLevel($el.dataset.logContent) === 'debug',
-                                        'bg-blue-500/10 dark:bg-blue-500/15': colorLogs && getLogLevel($el.dataset.logContent) === 'info',
-                                    }"
-                                    class="flex gap-2">
+                                <div data-log-line data-log-content="{{ $line }}" class="flex gap-2 log-line">
                                     @if ($timestamp && $showTimeStamps)
                                         <span class="shrink-0 text-gray-500">{{ $timestamp }}</span>
                                     @endif
-                                    <span data-line-text="{{ $logContent }}"
-                                        x-effect="renderTrigger; searchQuery; renderHighlightedLog($el, $el.dataset.lineText)"
-                                        class="whitespace-pre-wrap break-all"></span>
+                                    <span data-line-text="{{ $logContent }}" class="whitespace-pre-wrap break-all">{{ $logContent }}</span>
                                 </div>
                             @endforeach
                         </div>