diff --git a/src/WhisperTranscript.js b/src/WhisperTranscript.js
index 9cd9514..4082371 100644
--- a/src/WhisperTranscript.js
+++ b/src/WhisperTranscript.js
@@ -11,10 +11,15 @@ export class WhisperTranscript extends LitElement {
     ul {
       list-style: none;
       padding-left: 0;
+      overflow-y: auto;
+      max-height: 400px;
     }
 
     .media {
       text-align: center;
+      position: sticky;
+      top: 0;
+      z-index: 10;
     }
 
     .whisper-transcript {
@@ -40,8 +45,7 @@ export class WhisperTranscript extends LitElement {
     super.connectedCallback();
     this.getTranscript();
 
-    const that = this;
-    window.addEventListener('update-time', e => that.time = e.detail.time);
+    window.addEventListener('update-time', (e) => this.updateTime(e.detail.time));
   }
 
   async getTranscript() {
@@ -49,26 +53,38 @@ export class WhisperTranscript extends LitElement {
     this.transcript = await resp.json();
   }
 
+  updateTime(currentTime) {
+    this.time = currentTime;
+    this.requestUpdate();
+    this.scrollToActiveSegment();
+  }
+
+  scrollToActiveSegment() {
+    const activeSegment = this.shadowRoot.querySelector('.active');
+    if (activeSegment) {
+      activeSegment.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }
+
   render() {
     if (! this.transcript) {
       return html`Loading...`;
     }
 
-    let media = null;
-    if (this.audio) {
-      media = html`<whisper-media audio="${this.audio}"></whisper-media>`;
-    } else {
-      media = html`<whisper-media video="${this.video}"></whisper-media>`;
-    }
+    const media = this.audio
+      ? html`<whisper-media audio="${this.audio}"></whisper-media>`
+      : html`<whisper-media video="${this.video}"></whisper-media>`;
 
     return html`
       <div class="whisper-transcript">
-        <div class="media">
-          ${media}
-        </div>
+        <div class="media">${media}</div>
         <ul>
-          ${this.transcript.segments.map(s =>
-            html`<whisper-segment .words="${s.words}" start="${s.start}" end="${s.end}" text="${s.text}" />`
+          ${this.transcript.segments.map(
+            (s) => html`
+              <whisper-segment class="${this.time >= s.start && this.time <= s.end ? 'active' : ''}" .words="${s.words}"
+                               start="${s.start}" end="${s.end}" text="${s.text}" 
+              />
+            `
           )}
         </ul>
       </div>