diff --git a/light9/ascoltami/Light9AscoltamiUi.ts b/light9/ascoltami/Light9AscoltamiUi.ts
--- a/light9/ascoltami/Light9AscoltamiUi.ts
+++ b/light9/ascoltami/Light9AscoltamiUi.ts
@@ -1,5 +1,5 @@
 import debug from "debug";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { NamedNode } from "n3";
 import { getTopGraph } from "../web/RdfdbSyncedGraph";
@@ -8,6 +8,7 @@ export { RdfdbSyncedGraph } from "../web
 export { Light9TimelineAudio } from "../web/light9-timeline-audio";
 import { classMap } from "lit/directives/class-map.js";
 import { TimingUpdate } from "./main";
+import { Zoom } from "../web/light9-timeline-audio";
 
 debug.enable("*");
 const log = debug("asco");
@@ -28,9 +29,22 @@ export class Light9AscoltamiUi extends L
   times!: { intro: number; post: number };
   @property() nextText: string = "";
   @property() isPlaying: boolean = false;
+  @property() show: NamedNode | null = null;
   @property() song: NamedNode | null = null;
   @property() t: number = 0;
   @property() currentDuration: number = 0;
+  @property() zoom: Zoom;
+  @property() overviewZoom: Zoom;
+  static styles = [
+    css`
+      .timeRow {
+        margin: 14px;
+      }
+      light9-timeline-audio {
+        height: 80px;
+      }
+    `,
+  ];
   render() {
     return html`<rdfdb-synced-graph></rdfdb-synced-graph>
 
@@ -38,6 +52,12 @@ export class Light9AscoltamiUi extends L
 
       <h1>ascoltami <a href="metrics">[metrics]</a></h1>
 
+      <div class="timeRow">
+        <div id="timeSlider"></div>
+        <light9-timeline-audio .show=${this.show} .song=${this.song} .zoom=${this.overviewZoom}></light9-timeline-audio>
+        <light9-timeline-audio .show=${this.show} .song=${this.song} .zoom=${this.zoom}></light9-timeline-audio>
+      </div>
+
       <div class="commands">
         <button id="cmd-stop" @click=${this.onCmdStop} class="playMode ${classMap({ active: !this.isPlaying })}">
           <strong>Stop</strong>
@@ -106,13 +126,10 @@ export class Light9AscoltamiUi extends L
     });
   }
 
-  currentDurationChanged(newDuration: number): void {
-    this.currentDuration = newDuration;
-  }
-
   async musicSetup() {
     // shoveled over from the vanillajs version
     const config = await (await fetch("api/config")).json();
+    this.show = new NamedNode(config.show);
     this.times = config.times;
     document.title = document.title.replace("{{host}}", config.host);
     const h1 = document.querySelector("h1")!;
@@ -130,14 +147,16 @@ export class Light9AscoltamiUi extends L
       this.nextText = data.next;
       this.isPlaying = data.playing;
       this.currentDuration = data.duration;
+      this.song = new NamedNode(data.song);
+      this.overviewZoom = { duration: data.duration, t1: 0, t2: data.duration };
+      this.zoom = { duration: data.duration, t1: data.t - 2, t2: data.t + 20 };
     });
   }
 
   constructor() {
     super();
     this.bindKeys();
-    //   byId("cmd-stop").addEventListener("click", (ev: Event) =>
-    // );
+    this.zoom = this.overviewZoom = { duration: null, t1: 0, t2: 1 };
 
     getTopGraph().then((g) => {
       this.graph = g;