diff --git a/index.html b/index.html
index 5c6cdd6..ac340a0 100644
--- a/index.html
+++ b/index.html
@@ -6,37 +6,54 @@
 
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
-    <script type="text/javascript" src="js/xml2json.js"></script>
     <script type="text/javascript" src="js/Schedule.js"></script>
 
-    <title>Datenspuren Wegweiser</title>
+    <title>Konferenz Wegweiser</title>
   </head>
   <body class="bg-dark text-info">
-    <h1>Datenspuren Wegweiser</h1>
-    <div class="talks">
-      <div class="talk">nächste talk</div>
+    <h1>Konferenz Wegweiser</h1>
+    <h2>
+      <span class="conf_title">loading schedule..</span>
+      <small>(<span class="conf_start"></span> - <span class="conf_end"></span>)</small>
+    </h2>
+
+    <h3>demnächst stattfindende Talks</h3>
+    <div class="talks card-deck">
+        </div>
     </div>
 
-    <h2>Plan: <span id="scheduleName"></span></h2>
+    <h2>Plan:</h2>
 
     <script>
       $.when( $.ready ).then(function() {
         let path = "./src/schedule.xml";
         $.get( path, function( data ) {
-            this.xml        = new XMLSerializer().serializeToString(data);
-
+            this.xml = new XMLSerializer().serializeToString(data);
             //console.log(xml2json(this.xml));
 
-            var scheduleXml = $( $.parseXML( this.xml ) );
+            // load your schedule
+            var scheduleXml = $( $.parseXML(this.xml) );
             var s = new Schedule(scheduleXml);
 
-            $('#scheduleName').html( s.getScheduleTitle() );
+            // for testing purposes
+            // Example: ?faketime=2018-09-22T19:29:00
+            let faketime = new URL(window.location.href).searchParams.get("faketime");
+            if (faketime != null){
+              s.setTimeTo(new Date(faketime));
+            }
 
-            var talks = s.getTalks(s);
-            //console.log(talks[0].childNodes[0].nodeValue.text());
-            for ( var i = 0; i < talks.length; i++) {
-              item = "<li>" + talks[i] + "<li>";
-              $('.talk').append(item);
+            // output part of the schedule
+            $('.conf_title').html( s.getScheduleTitle() );
+            $('.conf_start').html( s.getScheduleStart());
+            $('.conf_end').html( s.getScheduleEnd());
+
+            var events = s.getNextEvents();
+            for ( var i = 0; i < events.length; i++ ) {
+              item = '<div class="card"><div class="card-title">' + events[i].title + "<div>" +events[i].date+ "</div>";
+              $('.talks').append(item);
+              if (i >= 2){
+                break;
+              }
             }
 
         });
diff --git a/js/Schedule.js b/js/Schedule.js
index 0a62652..2d5ad0b 100644
--- a/js/Schedule.js
+++ b/js/Schedule.js
@@ -9,7 +9,7 @@ var Schedule = class {
     schedule = false;
 
     /**
-     * Array of talks
+     * Array of Events
      *
      * [{
      *  id: 2132,
@@ -17,13 +17,22 @@ var Schedule = class {
      *  date:2018-09-22T10:30:00+02:00
      *   }]
      */
-    talks = [];
+    events = [];
 
-
-    query = {
-        time : { 'from' : new Date, 'to' : new Date }
+    /**
+     *  object with Information of the conference
+     *  {'title', 'start', 'end', ..}
+     */
+    conf = {
+        title:  'defaultConf',
+        start:  '1984-09-23',
+        end:    '1984-09-24'
     }
 
+    /**
+     * indepent time
+     */
+    now = new Date();
 
     /**
      *
@@ -50,46 +59,90 @@ var Schedule = class {
      * class constructor
      */
     constructor(scheduleXml){
-        this.schedule = scheduleXml;
-        this.talks  = this.getTalks();
+        this.schedule = scheduleXml.children("schedule");
+
+        this.conf.title = this.schedule.children("conference").children("title").text();
+        this.conf.start = this.schedule.children("conference").children("start").text();
+        this.conf.end   = this.schedule.children("conference").children("end").text();
+        this.events  = this.getEvents();
+    }
+
+    /**
+     * set orientation time
+     */
+    setTimeTo(time){
+        this.now = time;
     }
 
     /**
      * @return String the schedule title
      */
     getScheduleTitle(){
-        return this.schedule.find("title")[0]
+        return this.conf.title;
     }
-
     /**
-     * return array of all talks
+     * @return day of conf start
      */
-    getTalks(){
-        this.schedule.find('event');
-
-        return [];
+    getScheduleStart(){
+        return this.conf.start;
+    }
+    /**this.events
+     * @return day of conf end
+     */
+    getScheduleEnd(){
+        return this.conf.end;
     }
 
     /**
-     * get next talks by time and room
+     * return array of all Events
+     */
+    getEvents(){
+        let allEvents = [];
+        if (this.events.length == 0 ){
+            //this.schedule.find('event').toArray();
+            this.schedule.find('event').each( function(){
+                allEvents.push({
+                    title:  $(this).children('title').text(),
+                    date:   $(this).children('date').text(),
+                });
+            });
+        }
+        // console.log( 888, allEvents );
+        return allEvents;
+    }
+
+    /**
+     * get next Events by time and room
      *
      * @param {Timestamp} minimum time to start
      * @param {*} room
      */
     getTalk(time, room){
-
         return talk;
     }
 
     /**
-     * get the next talks, based on time
-     * @param {Date} time
+     * get the next Events, based on time
+     *
      */
-    getNextTalks(time){
-        let startTime = new Date(Date.now())
+    getNextEvents(){
+        if (this.events.length == 0){
+            return this.events;
+        }
 
-        this.query.time.from = time.toISOString();
-        console.log(this.query);
+        let talks = [];
+
+        let now = this.now;
+        //let now = new Date('September 22, 2018 19:30:00').getTime();
+
+        this.events.forEach( talk => {
+            let talkStart = new Date(talk.date).getTime();
+            if ( talkStart >= now ){
+                talks.push(talk);
+            }
+        });
+
+        return talks;
     }
 
 }
