diff --git a/lib/DDG/Goodie/Countdown.pm b/lib/DDG/Goodie/Countdown.pm
index 5ce2c476c..1633c2e10 100644
--- a/lib/DDG/Goodie/Countdown.pm
+++ b/lib/DDG/Goodie/Countdown.pm
@@ -13,10 +13,12 @@ zci answer_type => 'countdown';
 
 zci is_cached => 1;
 
+my $goodieVersion = $DDG::GoodieBundle::OpenSourceDuckDuckGo::VERSION // 999;
+
 triggers startend => 'countdown to','time until','how long until';
 
 # Handle statement
-handle remainder => sub {    
+handle remainder => sub {
 
     my $remainder = $_;
 
@@ -30,12 +32,16 @@ handle remainder => sub {
     return $diff,
         structured_answer => {
             data => {
-                remainder => $_,
-                difference => $diff,
-                countdown_to => date_output_string($date,1)
+                remainder      => $_,
+                countdown_to   => $date->strftime("%B %d, %Y, %r"),  #remove after the Dates Role is updated
+                goodie_version => $goodieVersion,
+                input_date     => $date->datetime()
             },
             templates => {
                 group => "text",
+                options => {
+                    title_content => 'DDH.countdown.countdown'
+                }
             }
         };
 };
diff --git a/share/goodie/countdown/Clock1.png b/share/goodie/countdown/Clock1.png
deleted file mode 100644
index 50b1cf60a..000000000
Binary files a/share/goodie/countdown/Clock1.png and /dev/null differ
diff --git a/share/goodie/countdown/countdown.css b/share/goodie/countdown/countdown.css
index fd2d7c855..960cfbb73 100644
--- a/share/goodie/countdown/countdown.css
+++ b/share/goodie/countdown/countdown.css
@@ -1,19 +1,9 @@
-.zci--countdown .time-unit,
-.zci--countdown .separator {
-    text-align: center;
-    display: inline-block;
-}
-
 .zci--countdown .time-unit {
+    display: inline-block;
     min-width: 3em;
+    padding: 0px 3.2em 0.5em 0px;
 }
 
-.zci--countdown .separator {
-    padding: 0 0.4em 0;
-    vertical-align: top;
-}
-
-.zci--countdown .number,
-.zci--countdown .separator {
-    font-size: 2.5em;
+.zci--countdown .number {
+    font-size: 2.5rem;  /*for 36px*/
 }
\ No newline at end of file
diff --git a/share/goodie/countdown/countdown.handlebars b/share/goodie/countdown/countdown.handlebars
index babbc7320..0706a1e1f 100644
--- a/share/goodie/countdown/countdown.handlebars
+++ b/share/goodie/countdown/countdown.handlebars
@@ -1,31 +1,30 @@
-<div class="countdown_container seventy--screen-m whole--screen-s">
-    <span class="time-unit year is-hidden">
-        <div class="tx-clr--slate number years">00</div>
+<div class="countdown_container ninety--screen-m whole--screen-s">
+    {{#if year}}
+    <span class="time-unit">
         <div class="tx-clr--grey unit">Years</div>
+        <div class="tx--36 tx-clr--slate number years">{{year}}</div>
     </span>
-    <span class="tx-clr--slate separator year is-hidden">:</span>
-    <span class="time-unit month is-hidden">
-        <div class="tx-clr--slate number months">00</div>
+    {{/if}}
+    {{#if month}}
+    <span class="time-unit">
         <div class="tx-clr--grey unit">Months</div>
+        <div class="tx-clr--slate number months">{{month}}</div>
     </span>
-    <span class="tx-clr--slate separator month is-hidden">:</span>
+    {{/if}}
     <span class="time-unit">
-        <div class="tx-clr--slate number days">00</div>
         <div class="tx-clr--grey unit">Days</div>
+        <div class="tx-clr--slate number days">{{day}}</div>
     </span>
-    <span class="tx-clr--slate separator">:</span>
     <span class="time-unit">
-        <div class="tx-clr--slate number hours">00</div>
         <div class="tx-clr--grey unit">Hours</div>
+        <div class="tx-clr--slate number hours">{{hour}}</div>
     </span>
-    <span class="tx-clr--slate separator">:</span>
     <span class="time-unit">
-        <div class="tx-clr--slate number minutes">00</div>
         <div class="tx-clr--grey unit">Minutes</div>
+        <div class="tx-clr--slate number minutes">{{minute}}</div>
     </span>
-    <span class="tx-clr--slate separator">:</span>
     <span class="time-unit">
-        <div class="tx-clr--slate number seconds">00</div>
         <div class="tx-clr--grey unit">Seconds</div>
+        <div class="tx-clr--slate number seconds">{{second}}</div>
     </span>
 </div>
\ No newline at end of file
diff --git a/share/goodie/countdown/countdown.js b/share/goodie/countdown/countdown.js
index e5fc6fdde..6ba5937c8 100644
--- a/share/goodie/countdown/countdown.js
+++ b/share/goodie/countdown/countdown.js
@@ -5,46 +5,13 @@ DDH.countdown = DDH.countdown || {};
     var hasShown = false,
         countdown = "",
         initialDifference,
-        $countdownContainer,
-        $time_display,
-        $displayYears, $displayMonths, $displayDays,
-        $displayHrs, $displayMins, $displaySecs,
-        $year,$month,$display,
+        $display,
         stopped = false,
         cachedPlayer, soundIsPlaying = false,
         SOUND_NAME = "alarm-sound",
-        soundUrl = 'share/goodie/countdown/alarm.mp3',
+        soundUrl,
         isVisible = true;
 
-    function padZeroes(s, len) {
-        while (s.length < len) {
-            s = '0' + s;
-        }
-        return s;
-    }
-
-    function displayCountdown() {
-        var parts = countdown.split(":");
-        if(parts.length > 1) {
-            if(parts[0] > 0) {
-                $year.removeClass("is-hidden");
-                $month.removeClass("is-hidden");
-                $displayYears.html(padZeroes(parts[0],2));
-                $displayMonths.html(padZeroes(parts[1],2));
-                $displayDays.html(padZeroes(parts[2],2));
-            } else if(parts[1] > 0) {
-                $month.removeClass("is-hidden");
-                $displayMonths.html(padZeroes(parts[1],2));
-                $displayDays.html(padZeroes(parts[2],2));
-            } else {
-                $displayDays.html(padZeroes(parts[2],2));
-            }
-            $displayHrs.html(padZeroes(parts[3],2));
-            $displayMins.html(padZeroes(parts[4],2));
-            $displaySecs.html(padZeroes(parts[5],2));
-        }
-    }
-
     function loop() {
         cachedPlayer.play(SOUND_NAME, soundUrl, {
             autoPlay: true,
@@ -63,6 +30,7 @@ DDH.countdown = DDH.countdown || {};
                 cachedPlayer = player;
                 endCountdown();
             });
+            $display = $(".zci--countdown").find(".countdown_container").find('.number');
             return;
         }
         // if a sound is already playing, stop for a moment
@@ -75,18 +43,12 @@ DDH.countdown = DDH.countdown || {};
         // start looping sound - single click anywhere on the screen will
         // stop looping
         loop();
+
         soundIsPlaying = true;
         $(document).one("click", stopLoop);
+
         setInterval(function() {
-             if(isVisible) {
-                 isVisible = false;
-                 $display.removeClass("tx-clr--slate");
-                 $display.addClass("tx-clr--silver");
-             } else {
-                isVisible = true;
-                $display.addClass("tx-clr--slate");
-                $display.removeClass("tx-clr--silver");
-             }
+            $display.toggleClass("tx-clr--silver");
         }, 500);
     }
     
@@ -94,10 +56,7 @@ DDH.countdown = DDH.countdown || {};
         if(stopped) {
             return;
         }
-        var s = difference.years() + ":" + difference.months() + ":" + difference.days() + ":" + difference.hours() + ":" + difference.minutes() + ":" + difference.seconds();
-        countdown = s;
-        if(difference >= 0) {
-            displayCountdown();
+        if(difference > 0) {
             difference = difference.subtract(1, 's');
         } else {
             stopped = true;
@@ -106,48 +65,64 @@ DDH.countdown = DDH.countdown || {};
         return difference;
     }
     
-    function getReferences() {
-        $countdownContainer = $(".zci--countdown").find(".countdown_container");
-        $display            = $countdownContainer.find('.number');
-        $displayYears       = $countdownContainer.find('.years');
-        $displayMonths      = $countdownContainer.find('.months');
-        $displayDays        = $countdownContainer.find('.days');
-        $displayHrs         = $countdownContainer.find('.hours');
-        $displayMins        = $countdownContainer.find('.minutes');
-        $displaySecs        = $countdownContainer.find('.seconds');
-        $year               = $countdownContainer.find(".year");
-        $month              = $countdownContainer.find(".month");
-    }
-    
-    DDH.countdown.build = function(ops) {
+    DDH.countdown.build_async = function(ops, DDH_async_add) {
         var remainder    = ops.data.remainder,
             countdown_to = ops.data.countdown_to,
+            soundUrl     = 'share/goodie/countdown/' + ops.data.goodie_version + '/alarm.mp3',
+            input_date   = ops.data.input_date,
             duration;
-        initialDifference = ops.data.difference;
-        return {
-            data: {
-                title: "Counting down to " + countdown_to + ","
-            },
-            templates: {
-                group: 'text',
-                options: {
-                    content: DDH.countdown.countdown
+
+        DDG.require('moment.js', function() {
+            var now  = moment();
+            var then = moment(input_date);
+
+            initialDifference = then.diff(now,'seconds');
+            if(initialDifference <= 0)
+                return;
+
+            duration = moment.duration(initialDifference,'seconds');
+
+            DDH_async_add({
+                id: 'countdown',   //class name of enclosing div is inferred as .zci--answer, without this
+                meta: {
+                    rerender: [
+                        'year','month','day','hour','minute','second'
+                    ]
                 },
-            },
-            onShow: function() {
-                if(hasShown) {
-                    return;
-                }
-                hasShown = true;
-                getReferences();
-                DDG.require('moment.js', function() {
-                    var initialDifferenceDuration = moment.duration(initialDifference,'seconds');
-                    duration = getCountdown(initialDifferenceDuration);
+                data: {
+                    year    : duration.years(),
+                    month   : duration.months(),
+                    day     : duration.days(),
+                    hour    : duration.hours(),
+                    minute  : duration.minutes(),
+                    second  : duration.seconds(),
+                    subtitle: "Countdown to " + countdown_to,
+                },
+                templates: {
+                    group: 'text',
+                    options: {
+                        title_content: DDH.countdown.countdown
+                    },
+                },
+                onItemShown: function(item) {
+                    if(hasShown) {
+                        return;
+                    }
+                    hasShown = true;
+
                     setInterval(function() {
                         duration = getCountdown(duration);
+                        if(duration)
+                            item.set({ year: duration.years(),
+                                      month: duration.months(),
+                                      day: duration.days(),
+                                      hour: duration.hours(),
+                                      minute: duration.minutes(),
+                                      second: duration.seconds()
+                                     });
                     }, 1000);
-                });
-            }
-        };
+                }
+            });
+        });
     };
 })(DDH);
\ No newline at end of file
diff --git a/t/Countdown.t b/t/Countdown.t
index 80c25a5e3..fdf0855ab 100644
--- a/t/Countdown.t
+++ b/t/Countdown.t
@@ -7,22 +7,29 @@ use Test::More;
 use Test::MockTime qw( :all );
 use DDG::Test::Goodie;
 use DDG::Test::Location;
+use DateTime;
 
 zci answer_type => "countdown";
 zci is_cached   => 1;
 
+my $goodieVersion = $DDG::GoodieBundle::OpenSourceDuckDuckGo::VERSION // 999;
+
 sub build_structured_answer {
-    my ($remainder, $initialDifference, $output_string) = @_;
+    my ($remainder, $initialDifference, $date_string, $output_string) = @_;
     
     return $initialDifference,
         structured_answer => {
             data => {
-                remainder => $remainder,
-                difference => $initialDifference,
-                countdown_to => $output_string
+                remainder      => $remainder,
+                countdown_to   => $output_string,
+                goodie_version => $goodieVersion,
+                input_date     => $date_string
             },
             templates => {
                 group => "text",
+                options => {
+                    title_content => 'DDH.countdown.countdown'
+                }
             }
         };
 }
@@ -34,16 +41,16 @@ set_fixed_time("2016-04-15T15:31:02Z");
 ddg_goodie_test(
     [qw( DDG::Goodie::Countdown )],
     
-    'time until 1st June 2016'            => build_test("1st June 2016", 4019338 , "01 Jun 2016 00:00:00 EDT"),
-    'how long until 31st December 2016'   => build_test("31st December 2016", 22426138, "31 Dec 2016 00:00:00 EST"),
-    'countdown to tomorrow'               => build_test("tomorrow", 86400, "16 Apr 2016 11:31:02 EDT"),
+    'time until 2016-06-01'     => build_test("2016-06-01", 4019338, "2016-06-01T00:00:00", "June 01, 2016, 12:00:00 AM"),
+    'how long until 2016-12-31' => build_test("2016-12-31", 22426138, "2016-12-31T00:00:00", "December 31, 2016, 12:00:00 AM"),
+    'countdown to tomorrow'     => build_test("tomorrow", 86400, "2016-04-16T11:31:02", "April 16, 2016, 11:31:02 AM"),
     
     ## Currently these do not trigger, uncomment after PR #2810 is merged 
-    #'countdown to 10:00:00 am 26th July'  => build_test("10:00:00 am 26th July", 8807338000000000, "26 Jul 2016 10:00:00 EDT"),
-    #'countdown to 10:00:00 am'            => build_test("10:00:00 am", 80938000000000 , "16 Apr 2016 10:00:00 EDT"),
-    #'time until 1st May 12:00:00 pm'      => build_test("1st May 12:00:00 pm",1384138000000000 , "01 May 2016 12:00:00 EDT"),
-    #'how long until 01:00:00 pm tomorrow' => build_test("01:00:00 pm tomorrow", 91738000000000, "16 Apr 2016 13:00:00 EDT"),
-    #'how long until 01:00:00 am today'    => build_test("01:00:00 am today", 48538000000000, "16 Apr 2016 01:00:00 EDT"),
+    #'countdown to 10:00:00 am 26th July'  => build_test("10:00:00 am 26th July", 8807338000000000, "2016-07-26T10:00:00", "26 Jul 2016 10:00:00 AM"),
+    #'countdown to 10:00:00 am'            => build_test("10:00:00 am", 80938000000000 , "2016-04-16T10:00:00", "16 Apr 2016 10:00:00 AM"),
+    #'time until 1st May 12:00:00 pm'      => build_test("1st May 12:00:00 pm",1384138000000000 , "2016-05-01T12:00:00", "01 May 2016 12:00:00 PM"),
+    #'how long until 01:00:00 pm tomorrow' => build_test("01:00:00 pm tomorrow", 91738000000000, "2016-04-16T13:00:00", "16 Apr 2016 01:00:00 PM"),
+    #'how long until 01:00:00 am today'    => build_test("01:00:00 am today", 48538000000000, "2016-04-16T01:00:00", "16 Apr 2016 01:00:00 AM"),
     
     #invalid
     'how long until 01:00:00 am yesterday' => undef,