diff --git a/css/style.css b/css/style.css
index 708adce..a5b7493 100644
--- a/css/style.css
+++ b/css/style.css
@@ -62,7 +62,7 @@ a:hover {
     animation: click 0.5s ease-in-out 2 alternate;
     -webkit-animation: click 0.5s ease-in-out 2 alternate;
 }
-#time-options {
+#time-options, #transition-options {
     display: -webkit-flex;
     display: flex;
     -webkit-flex-direction: row;
@@ -77,7 +77,7 @@ a:hover {
     align-content: stretch;
     padding-bottom: 20px;
 }
-.time-selector-btn {
+.time-selector-btn, .transitions-selector-btn {
     cursor: pointer;
     width: 40px;
     color: #2A6496;
diff --git a/index.html b/index.html
index 2bea958..2b3d265 100644
--- a/index.html
+++ b/index.html
@@ -19,9 +19,12 @@
     <script id="meditationDialog" type="text/html">
       <div id="meditation-dialog" style="display: none;">
         <div class="meditation-timer">
-          <p id="meditation-text">{{duration}} minute meditation</p>
+          <p id="meditation-text">
+          </p>
           <div id="time-options">
           </div>
+          <div id="transition-options">
+          </div>
           <div id="start-button" class="full-btn">Begin</div>
         </div>
         <div id="about-link">
@@ -44,6 +47,22 @@
       <div id="time-button-{{value}}" class="time-selector-btn">{{value}}</div>
       {{/timeIntervals}}
     </script>
+    <script id="transitionOptionButtons" type="text/html">
+      {{#nbOfTransitions}}
+      <div id="nb-of-transitions-button-{{value}}" class="transitions-selector-btn">{{value}}</div>
+      {{/nbOfTransitions}}
+    </script>
+    <script id="meditationText" type="text/html">
+      <span id="meditation-text-duration"></span>
+      <br>
+      <span id="meditation-text-transitions"></span>
+    </script>
+    <script id="meditationTextDuration" type="text/html">
+      {{duration}} minute meditation
+    </script>
+    <script id="meditationTextTransitions" type="text/html">
+      {{nbOfTransitions}} transition{{plural}}
+    </script>
     <script src="js/jquery-2.1.1.min.js"></script>
     <script src="js/ICanHaz.min.js"></script>
     <script src="js/index.js"></script>
diff --git a/js/index.js b/js/index.js
index 9703e32..2c6744b 100644
--- a/js/index.js
+++ b/js/index.js
@@ -9,18 +9,25 @@ $(function() {
     if ($.inArray(selectedTimeInterval, timeIntervals) < 0) {
       selectedTimeInterval = 20;
     }
+    var nbOfTransitions = [0, 1, 2, 3, 4, 5];
+    var selectedNbOfTransitions = parseInt(window.localStorage.defaultNbOfTransitions);
+    if ($.inArray(selectedNbOfTransitions, nbOfTransitions) < 0) {
+      selectedNbOfTransitions = 0;
+    }
     var meditationProgressTimer = null;
     var lock = null;
 
-    $("#content").html(ich.meditationDialog({ 'duration': selectedTimeInterval }));
+    $("#content").html(ich.meditationDialog());
     $("#meditation-dialog").fadeIn('fast');
+    $("#meditation-text").html(ich.meditationText());
 
     $("#time-options").append(ich.timeOptionButtons({'timeIntervals': timeIntervals.map(function v(val) { return { "value": val } }) }));
+    $("#transition-options").append(ich.transitionOptionButtons({'nbOfTransitions': nbOfTransitions.map(function v(val) { return { "value": val } }) }));
 
     function intervalSelected(timeInterval) {
       selectedTimeInterval = timeInterval;
       window.localStorage.defaultTimeInterval = selectedTimeInterval;
-      $("#meditation-text").html(timeInterval + " minute meditation");
+      $("#meditation-text-duration").html(ich.meditationTextDuration({'duration': timeInterval}, true));
       $(".time-selector-btn").removeClass('btn-link-selected');
       $("#time-button-" + timeInterval).addClass('btn-link-selected');
     };
@@ -31,6 +38,20 @@ $(function() {
     });
     intervalSelected(selectedTimeInterval);
 
+    function nbOfTransitionsSelected(nbOfTransitions) {
+      selectedNbOfTransitions = nbOfTransitions;
+      window.localStorage.defaultNbOfTransitions = nbOfTransitions;
+      $("#meditation-text-transitions").html(ich.meditationTextTransitions({'nbOfTransitions': nbOfTransitions, 'plural': (nbOfTransitions>1?'s':'')}, true));
+      $(".transitions-selector-btn").removeClass('btn-link-selected');
+      $("#nb-of-transitions-button-" + selectedNbOfTransitions).addClass('btn-link-selected');
+    };
+    nbOfTransitions.forEach(function(nbOfTransitions) {
+      $("#nb-of-transitions-button-" + nbOfTransitions).click(function() {
+        nbOfTransitionsSelected(nbOfTransitions);
+      });
+    });
+    nbOfTransitionsSelected(selectedNbOfTransitions);
+
     function reset() {
       $("#bell").off();
 
@@ -43,6 +64,7 @@ $(function() {
       intervalSelected(selectedTimeInterval);
       $("#about-link").show();
       $("#start-button").html("Begin");
+      setupTimer();
     }
 
     $("#start-button").click(function() {
@@ -61,6 +83,7 @@ $(function() {
       $("#meditation-text").html("Prepare for meditation " +
                                  "<span class='blink'>...</span>");
       var startTime = null;
+      var currentInterval = 1;
       meditationProgressTimer = window.setTimeout(function() {
         if (!startTime) {
           startTime = Date.now();
@@ -77,10 +100,17 @@ $(function() {
             }
             return num;
           }
-          $("#meditation-text").html(doubleDigits(minutesRemaining) + ":" +
-                                     doubleDigits(secondsRemaining));
           if (timeRemaining > 0) {
+            if ( elapsed > (selectedTimeInterval*60*currentInterval/selectedNbOfTransitions) ) {
+              currentInterval++;
+              $("#bell").get(0).currentTime = 0;
+              $("#bell").get(0).play();
+            }
             meditationProgressTimer = window.setTimeout(timerFired, 1000);
+            $("#meditation-text").html("Time remaining: " +
+                                       doubleDigits(minutesRemaining) + ":" +
+                                       doubleDigits(secondsRemaining) + "<br>" +
+                                       "Current interval: " + currentInterval);
           } else {
             // we're done
             $("#meditation-text").html("<span class='blink'>00:00</span>");