diff --git a/index.php b/index.php
index 4bf1620..87ade36 100644
--- a/index.php
+++ b/index.php
@@ -660,8 +660,8 @@ $m3u_url    = htmlspecialchars($config["m3u_url"] ?? "");
       <div class="now-line" id="nowLineRuler"></div>
     </div>
     <div class="programs-scroll" id="programsScroll">
+      <div class="now-line" id="nowLineGrid"></div>
       <div class="programs-inner" id="programsInner">
-        <div class="now-line" id="nowLineGrid"></div>
       </div>
     </div>
   </div>
@@ -869,8 +869,6 @@ function renderPrograms(vs, ve) {
   const inner = document.getElementById('programsInner');
   inner.innerHTML = ''; inner.style.width = totalWidthPx+'px'; inner.style.height = (channels.length*ROW_H)+'px';
 
-  const nowLine = document.createElement('div'); nowLine.className='now-line'; nowLine.id='nowLineGrid';
-  inner.appendChild(nowLine);
   const now = new Date();
 
   channels.forEach((ch, i) => {
@@ -909,7 +907,9 @@ function renderPrograms(vs, ve) {
     scrollListenerAdded = true;
     document.getElementById('programsScroll').addEventListener('scroll', function() {
       document.getElementById('timeRulerInner').style.transform = `translateX(-${this.scrollLeft}px)`;
-      document.getElementById('nowLineRuler').style.left = (msToX(Date.now())-this.scrollLeft)+'px';
+      const visibleX = msToX(Date.now()) - this.scrollLeft;
+      document.getElementById('nowLineRuler').style.left = visibleX + 'px';
+      document.getElementById('nowLineGrid').style.left  = visibleX + 'px';
       document.getElementById('channelsList').scrollTop = this.scrollTop;
     });
   }
@@ -917,10 +917,13 @@ function renderPrograms(vs, ve) {
 
 function positionNowLine() {
   const x = msToX(Date.now());
+  const scroll = document.getElementById('programsScroll');
+  const scrollLeft = scroll ? scroll.scrollLeft : 0;
   const ruler = document.getElementById('nowLineRuler');
   const grid  = document.getElementById('nowLineGrid');
-  if (ruler) { ruler.style.left=x+'px'; ruler.style.top='0'; ruler.style.bottom='0'; }
-  if (grid)  { grid.style.left=x+'px';  grid.style.top='0';  grid.style.height=(channels.length*80)+'px'; }
+  const visibleX = x - scrollLeft;
+  if (ruler) { ruler.style.left = visibleX + 'px'; ruler.style.top='0'; ruler.style.bottom='0'; }
+  if (grid)  { grid.style.left  = visibleX + 'px'; grid.style.top='0'; grid.style.height='100%'; }
 }
 
 function centerNow() {