diff --git a/events.py b/events.py
index b0be630..9226b8b 100644
--- a/events.py
+++ b/events.py
@@ -46,6 +46,25 @@ def get(self, key=None):
             'templates/event.html', locals()))
 
 
+class Agenda(webapp.RequestHandler):
+    """Handler for displaying the agenda for a single event."""
+
+    def get (self, key=None):
+        if not key:
+            key = self.request.get('id')
+
+        key = long(key)
+        event = models.Event.get_by_id(key)
+        agenda = event.agenda
+
+        template_values = {}
+        template_values['agenda'] = agenda
+        template_values['self'] = self
+
+        self.response.headers['Content-Type'] = 'text/html'
+        self.response.out.write(r(
+            'templates/countdown.html', template_values))
+
 class Events(webapp.RequestHandler):
     """Handler for display a table of events."""
 
diff --git a/handler.py b/handler.py
index 7e5fb85..7628e46 100644
--- a/handler.py
+++ b/handler.py
@@ -31,6 +31,7 @@
    ('/rss', rss.RSSHandler),
    ('/\d*/.*feed.*', rss.RSSHandler),
    ('/full/.*feed.*', rss.RSSHandler),
+   ('/agenda/(.*)', events.Agenda),
    ('/event/.*feed.*', rss.RSSHandler),
    ('/event/(.*)/response/show',    response.ShowResponsePage),
    ('/event/(.*)/response/update',  response.UpdateResponsePage),
diff --git a/static/css/countdown.css b/static/css/countdown.css
index ec1b339..990a341 100644
--- a/static/css/countdown.css
+++ b/static/css/countdown.css
@@ -1,3 +1,7 @@
+#body {
+    width: 100%;
+}
+
 body .neutral {
   background-color: white;
 }
@@ -13,3 +17,29 @@ body .close {
 body .overtime {
   background-color: red;
 }
+
+#talkdetails {
+    display: none;
+}
+
+div {
+    text-align: center;
+    width: 100%;
+}
+
+#currentspeaker {
+    font-size: 30;
+}
+
+#currenttitle {
+    font-size: 60;
+}
+
+#currentseconds {
+    font-size: 120;
+}
+
+#talkselect {
+    position: absolute;
+    bottom: 0;
+}
diff --git a/templates/base.html b/templates/base.html
index 7359ba8..457d726 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -127,7 +127,6 @@
       });
     };
     $(ajaxifyforms);
-    $(window.console.log('ajaxification'));
   </script>
 <script type="text/javascript">
 function openid_login() {
diff --git a/templates/countdown.html b/templates/countdown.html
index 065b773..e417600 100644
--- a/templates/countdown.html
+++ b/templates/countdown.html
@@ -3,109 +3,113 @@
 -*- coding: utf-8 -*-
 vim: set ts=2 sw=2 et sts=2 ai:
 
-This page is based on the front page, but stripped down to have space to add content.
+This page is based on the front page, but stripped down to have space to add
+content.
 
-A user can enter the speaker's topic and the length of their talk. When they press start the clock starts to countdown. Currently both the topic and length field are cleared when the user presses next speaker
+A user can enter the speaker's topic and the length of their talk. When they
+press start the clock starts to countdown. Currently both the topic and length
+field are cleared when the user presses next speaker
 
-Eventually, when the user presses the "next speaker" button the module sends a request for Talk Title (variable s) and Length (variable c) and sets the title to the title of the talk and the countdown clock to the length. When the user presses the "start" button the clock starts to countdown. All time in seconds. - Marghanita
+Eventually, when the user presses the "next speaker" button the module sends a
+request for Talk Title (variable s) and Length (variable c) and sets the title
+to the title of the talk and the countdown clock to the length. When the user
+presses the "start" button the clock starts to countdown. All time in seconds.
+- Marghanita
 
 
 {% endcomment %}
 {% block head %}
-    <link rel="StyleSheet" href="/third_party/jquery.tweet/jquery.tweet.css" type="text/css" />
-    <link rel="StyleSheet" href="/css/countdown.css" type="text/css" media="screen">
-    <link rel="StyleSheet" href="/css/jquery.tweet.css" type="text/css" />
-    <script src="/third_party/jquery.tweet/jquery.tweet.js" type="text/javascript"></script>
-    <script src="/third_party/jquery.gravatar/md5.js" type="text/javascript"></script>
-    <script src="/third_party/jquery.gravatar/jquery.gravatar.js" type="text/javascript"></script>
+<link rel="StyleSheet" href="/third_party/jquery.tweet/jquery.tweet.css" type="text/css" />
+<link rel="StyleSheet" href="/css/countdown.css" type="text/css" media="screen">
+<link rel="StyleSheet" href="/css/jquery.tweet.css" type="text/css" />
+<script src="/third_party/jquery.tweet/jquery.tweet.js" type="text/javascript"></script>
+<script src="/third_party/jquery.gravatar/md5.js" type="text/javascript"></script>
+<script src="/third_party/jquery.gravatar/jquery.gravatar.js" type="text/javascript"></script>
 
 
 <script type="text/javascript">
-var c=60;
-var t;
-var timer_is_on=0;
-
+  timer_is_on = 0;
 function timedCount()
 {
-document.getElementById('txt').value=c;
-if (c > 30) {
-  $(body .close).removeClass('close');
-  $(body .overtime).removeClass('overtime');
-};
-if (c == 30) {
-  $(body).addClass('close');
-};
-if (c == 0) {
-  $(body).addClass('overtime');
-}
-c=c-1;
-t=setTimeout("timedCount()",1000);
+  c = $('#currentseconds').text();
+  if (c > 30) {
+    $(body .close).removeClass('close');
+    $(body .overtime).removeClass('overtime');
+  };
+  if (c == 30) {
+    $(body).addClass('close');
+  };
+  if (c == 0) {
+    $(body).addClass('overtime');
+  }
+  c=c-1;
+  $('#currentseconds').text(c);
+  t=setTimeout("timedCount()",1000);
 }
 
 function doTimer()
 {
-if (!timer_is_on)
+  if (!timer_is_on)
   {
-  timer_is_on=1;
-  timedCount();
-  $(body).addClass('counting');
+    timer_is_on=1;
+    timedCount();
+    $(body).addClass('counting');
   }
 }
 
 function stopCount()
 {
-clearTimeout(t);
-timer_is_on=0;
-c=300;
-}
-function getSpeaker()
-{
-timer_is_on=0;
-s="";
-c=300;
-document.getElementById('s-txt').value=s;
-document.getElementById('txt').value=c;
-}
-function getSpeaker2()
-{
-timer_is_on=0;
-s="";
-c=600;
-document.getElementById('s-txt').value=s;
-document.getElementById('txt').value=c;
-}
-function getSpeaker3()
-{
-timer_is_on=0;
-s="";
-c=900;
-document.getElementById('s-txt').value=s;
-document.getElementById('txt').value=c;
+  clearTimeout(t);
+  timer_is_on=0;
+  c=300;
 }
+
+
 </script>
+
+
 {% endblock %}
 
 {% block body %}
-<div id="countdown">00</div>
-<p><select>
-  <option>Meet&Greet Topic 30min</option>
-  <option>Committee Welcome 5min</option>
-  <option>Speaker 2 Topic   5min</option>
-  <option>Speaker 3 Topic   5min</option>
-  <option>Speaker 4 Topic   5min</option>
-  <option>Speaker 5 Topic   5min</option>
-  <option>Break       20 minutes</option>
-  <option>Speaker 6 Topic  10min</option>
-  <option>Speaker 7 Topic  10min</option>
-  <option>Speaker 8 Topic  10min</option>
-  <option>Committee Wrap up 5min</option>
-</select></p>
-<p><input  class=timer type="text" id="txt" size=3> (Seconds) 
-<input type=radio onclick="doTimer();" name=status value=Started>Start
-<input type=radio onclick="stopCount();" name=status value=completed>Stop</p>
-<p><input type=button name="speaker1" value="5min" onclick="getSpeaker()"> 
-<input type=button name="speaker2" value="10min" onclick="getSpeaker2()">
-<input type=button name="speaker3" value="15min" onclick="getSpeaker3()"></p>
-
+<div id="talkdetails">
+  {% for talk in agenda %}
+    <ul id={{talk.key}}>
+      <li class="minutes">{{ talk.offer.minutes }}</li>
+      <li class="displayname">{{ talk.offer.displayname }}</li>
+      <li class="title">{{ talk.offer.title }}</title>
+    </ul>
+  {% endfor %}
+</div>
 
+<div id="currentspeaker"></div>
+<div id="currenttitle"></div>
+<div id="currentseconds"></div>
+<div id="talkselect">
+  <select id=agenda>
+    <option value="">Select a talk</option>
+    {% for talk in agenda %}
+      <option value={{ talk.key}}>{{ talk.offer.displayname }} -
+      {{ talk.offer.title }}</option>
+    {% endfor %}
+  </select>
+  <input type=radio onclick="doTimer();" name=status value=Started>Start
+  <input type=radio onclick="stopCount();" name=status value=completed>Stop</input>
+</div>
 {%endblock %}
+
+{% block script %}
+<script type="text/javascript">
+  $('#agenda').change(function() {
+    var value = $(this).val();
+    var seconds = $('ul#'+value+' .minutes').text() * 60;
+    var title = $('ul#'+value+' .title').text();
+    var speaker = $('ul#'+value+' .displayname').text();
+    $('#currentspeaker').text(speaker);
+    $('#currenttitle').text(title);
+    $('#currentseconds').text(seconds);
+  });
+</script>
+{% endblock %}
+
+
+
diff --git a/templates/editevent.html b/templates/editevent.html
index 7b523d0..38a96a0 100644
--- a/templates/editevent.html
+++ b/templates/editevent.html
@@ -49,6 +49,7 @@
           <li><input type="submit"/></li>
         </ul>
       </div>
+      <a href=/agenda/{{event.key.id}}>Countdown View</a>
     </div>
     <div id=agenda class=clearfix>
       <ul id="agenda_items" class="connectedSortable box">