diff --git a/openlp/core/display/html/display.css b/openlp/core/display/html/display.css
index 9dc28cb02..111eaaadc 100644
--- a/openlp/core/display/html/display.css
+++ b/openlp/core/display/html/display.css
@@ -1,7 +1,7 @@
 @keyframes alert-scrolling-text {
   0% { transform: translateX(100%); opacity: 1; }
   99% { opacity: 1; }
-  100% { transform: translateX(-105%); opacity: 0;}
+  100% { transform: translateX(-101%); opacity: 0;}
 }
 
 /* ALERT BACKGROUND STYLING */
@@ -26,7 +26,7 @@
 
 .bg-default span {
   display: inline-block;
-  padding-left: 100%;
+  padding-left: 120%;
 }
 
 .show-bg {
diff --git a/openlp/core/display/html/display.js b/openlp/core/display/html/display.js
index 1ccbe00f1..83c666ee0 100644
--- a/openlp/core/display/html/display.js
+++ b/openlp/core/display/html/display.js
@@ -436,8 +436,8 @@ var Display = {
     }
     var settings = JSON.parse(alert_settings);
     this._alertSettings = settings;    
-    Display.setAlertText(text);
-    Display.setAlertLocation(settings.location, settings.font_color, settings.font_face, settings.font_size);    
+    Display.setAlertText(text, settings.font_color, settings.font_face, settings.font_size);
+    Display.setAlertLocation(settings.location);    
     /* Check if the alert is a queued alert */
     if (Display._alertState !== AlertState.DisplayingFromQueue) {
       Display._alertState = AlertState.Displaying;
@@ -524,8 +524,7 @@ var Display = {
       default:
         alertContainer.classList.add("bottom");                       
         break;
-    }
-    console.debug("The classname set location is: " + alertContainer.className);
+    }    
   },
   /**
    * Remove the location class set after displaying the alert
@@ -546,8 +545,7 @@ var Display = {
       default:
         alertContainer.classList.remove("bottom");                       
         break;
-    }
-    console.debug("The classname after removal is: " + alertContainer.className);
+    }    
   },
   /**
    * Hide the alert background after the alert has been shown
@@ -567,7 +565,7 @@ var Display = {
             
     if (settings.scroll) {      
       var animationSettings = "alert-scrolling-text " + settings.timeout +
-                              "s linear 0s " + settings.repeat + " normal";       
+                              "s linear 0.6s " + settings.repeat + " normal";       
       alertText.style.animation = animationSettings;
       Display._animationState = AnimationState.ScrollingText;
     }
@@ -589,8 +587,7 @@ var Display = {
     var alertText = $('#alert')[0];            
     Display._animationState = AnimationState.NoAnimation;
     alertText.style.animation = "";    
-    Display.hideAlertBackground();
-    Display.resetAlertKeyframes();                                         
+    Display.hideAlertBackground();                                            
   },
   /** 
   * Display the next alert in the queue
diff --git a/tests/js/test_display.js b/tests/js/test_display.js
index 4d919249f..aebfd8d28 100644
--- a/tests/js/test_display.js
+++ b/tests/js/test_display.js
@@ -158,10 +158,13 @@ describe("Display.alert", function () {
 
   beforeEach(function () {
     document.body.innerHTML = "";
+    alertContainer = document.createElement("div");
+    alertContainer.setAttribute("class", "alert-container");
+    document.body.appendChild(alertContainer);
     alertBackground = document.createElement("div");
     alertBackground.setAttribute("id", "alert-background");
-    document.body.appendChild(alertBackground);
-    alertText = document.createElement("p");
+    alertContainer.appendChild(alertBackground);
+    alertText = document.createElement("span");
     alertText.setAttribute("id","alert");
     alertBackground.appendChild(alertText);
     settings = '{ \
@@ -175,16 +178,17 @@ describe("Display.alert", function () {
     expect(Display.alert("",settings)).toBeNull();
   });
 
-  it("should set the correct alert text", function () { 
-    spyOn(Display, "setAlertKeyframes");    
+  it("should set the correct alert text", function () {
+    spyOn(Display, "setAlertText");
+    spyOn(Display, "setAlertLocation");     
     Display.alert("OPEN-LP-3.0 Alert Test", settings);
-    
-    expect(alertText.innerHTML).toEqual("OPEN-LP-3.0 Alert Test");
+        
+    expect(Display.setAlertText).toHaveBeenCalled();
+    expect(Display.setAlertLocation).toHaveBeenCalled();
   });
 
   it("should call the addAlertToQueue method if an alert is displaying", function () {
-    spyOn(Display, "addAlertToQueue");
-    spyOn(Display, "setAlertKeyframes");
+    spyOn(Display, "addAlertToQueue");    
     Display._alerts = [];
     Display._alertState = AlertState.Displaying;
     var text = "Testing alert queue";
@@ -194,8 +198,7 @@ describe("Display.alert", function () {
     expect(Display.addAlertToQueue).toHaveBeenCalledWith(text, settings);
   });
 
-  it("should set the alert settings correctly", function() {
-    spyOn(Display, "setAlertKeyframes");
+  it("should set the alert settings correctly", function() {    
     Display.alert("Testing settings", settings);
         
     expect(Display._alertSettings).toEqual(JSON.parse(settings));
@@ -223,7 +226,7 @@ describe("Display.showAlertBackground", function () {
     Display.showAlertBackground(bg_color);    
          
     expect(alertBackground.style.backgroundColor).toEqual(bg_color);      
-    expect(alertBackground.className).toEqual("bg-default show");                     
+    expect(alertBackground.className).toEqual("bg-default show-bg");                     
   });  
 });
 
@@ -233,7 +236,7 @@ describe("Display.hideAlertBackground", function () {
     document.body.innerHTML = "";
     alertBackground = document.createElement("div");
     alertBackground.setAttribute("id", "alert-background"); 
-    alertBackground.setAttribute("class", "bg-default show");     
+    alertBackground.setAttribute("class", "bg-default show-bg");     
     document.body.appendChild(alertBackground);    
   });
   
@@ -250,71 +253,72 @@ describe("Display.setAlertText", function() {
   var alertText;
   beforeEach( function() {
     document.body.innerHTML = "";
-    alertText = document.createElement("p");
+    alertText = document.createElement("span");
     alertText.setAttribute("id", "alert");      
-    document.body.appendChild(alertText);    
+    document.body.appendChild(alertText);      
   });
   it("should set the alert text correctly", function () {    
-    Display.setAlertText("OpenLP Alert Text");
-
+    Display.setAlertText("OpenLP Alert Text", "#ffffff", "Tahoma", 40);
+    
     expect(alertText.textContent).toEqual("OpenLP Alert Text");
+    expect(alertText.style.color).toEqual("rgb(255, 255, 255)");
+    expect(alertText.style.fontFamily).toEqual("Tahoma");
+    expect(alertText.style.fontSize).toEqual("40pt");
   });
 });
 
 describe("Display.setAlertLocation", function() {
   beforeEach(function() {
     document.body.innerHTML = "";    
-    alertBackground = document.createElement("p");
-    alertBackground.setAttribute("id","alert-background");
-    alertBackground.setAttribute("class","bg-default");
-    document.body.appendChild(alertBackground);
+    alertContainer = document.createElement("div");
+    alertContainer.setAttribute("class", "alert-container");
+    document.body.appendChild(alertContainer);    
   });
   it("should set the correct class when location is top of the page", function () {    
     Display.setAlertLocation(0);
 
-    expect(alertBackground.className).toEqual("bg-default top");
+    expect(alertContainer.className).toEqual("alert-container top");
   });
 
   it("should set the correct class when location is middle of the page", function () {    
     Display.setAlertLocation(1);
     
-    expect(alertBackground.className).toEqual("bg-default middle");       
+    expect(alertContainer.className).toEqual("alert-container middle");       
   });
 
   it("should set the correct class when location is bottom of the page", function () {
     Display.setAlertLocation(2);
 
-    expect(alertBackground.className).toEqual("bg-default bottom");
+    expect(alertContainer.className).toEqual("alert-container bottom");
   });
 });
 
 describe("Display.removeAlertLocation", function () {
   beforeEach(function() {
     document.body.innerHTML = "";    
-    alertBackground = document.createElement("p");
-    alertBackground.setAttribute("id", "alert-background");
-    alertBackground.setAttribute("class", "bg-default");
-    document.body.appendChild(alertBackground);
+    alertContainer = document.createElement("div");
+    alertContainer.setAttribute("class", "alert-container");
+    document.body.appendChild(alertContainer);
   });
   it("should remove the correct class when location is top of the page", function () {
-    alertBackground.classList.add("top");
+    alertContainer.classList.add("top");
     Display.removeAlertLocation(0);
 
-    expect(alertBackground.className).toEqual("bg-default");
+    expect(alertContainer.className).toEqual("alert-container");
   });
 
   it("should remove the correct class when location is middle of the page", function () {
-    alertBackground.classList.add("middle");
+    alertContainer.classList.add("middle");
     Display.removeAlertLocation(1);
     
-    expect(alertBackground.className).toEqual("bg-default");       
+    expect(alertContainer.className).toEqual("alert-container");       
   });
 
   it("should remove the correct class when location is bottom of the page", function () {
-    alertBackground.classList.add("bottom");
+    alertContainer.classList.add("bottom");
     Display.removeAlertLocation(2);
 
-    expect(alertBackground.className).toEqual("bg-default");
+    expect(alertContainer.className).toEqual("alert-container");
   });
 });
 
@@ -322,8 +326,8 @@ describe("Display.showAlertText", function () {
   var alertText, settings;
   beforeEach(function () {
     document.body.innerHTML = "";    
-    alertText = document.createElement("p");
-    alertText.setAttribute("id","alert");
+    alertText = document.createElement("span");
+    alertText.setAttribute("id", "alert");
     document.body.appendChild(alertText);
     settings = {
       "location": 2, "font_face": "Tahoma", "font_size": 40, 
@@ -331,21 +335,12 @@ describe("Display.showAlertText", function () {
       "timeout": 0.01, "repeat": 1, "scroll": true
     };
     Display._transitionState = TransitionState.EntranceTransition;
-  });
-
-  it("should set the correct styles on the text", function() {    
-    Display.showAlertText(settings);    
-
-    expect(alertText.style.opacity).toEqual('1');
-    expect(alertText.style.color).toEqual("rgb(255, 255, 255)");
-    expect(alertText.style.fontFamily).toEqual("Tahoma");
-    expect(alertText.style.fontSize).toEqual("40pt");    
-  });
+  });  
 
   it("should set the correct animation when text is set to scroll)", function () {              
     Display.showAlertText(settings);
 
-    expect(alertText.style.animation).toEqual("alert-scrolling-text " + settings.timeout + "s linear 0s 1 normal");
+    expect(alertText.style.animation).toEqual("alert-scrolling-text " + settings.timeout + "s linear 0.6s 1 normal");
     expect(Display._animationState).toEqual(AnimationState.ScrollingText);    
   });
 
@@ -354,12 +349,11 @@ describe("Display.showAlertText", function () {
     Display._transitionState = TransitionState.EntranceTransition;   
     spyOn(Display, "hideAlertText");    
     Display.showAlertText(settings);
-
-    expect(alertText.style.opacity).toEqual('1');
-    expect(alertText.style.animation).toEqual("");
-    expect(Display._animationState).toEqual(AnimationState.NonScrollingText);    
-    setTimeout (function () {
-      expect(alertText.className).toEqual("no-scroll");
+   
+    // expect(alertText.style.animation).toEqual("");
+    expect(Display._animationState).toEqual(AnimationState.NonScrollingText);
+    expect(alertText.classList.contains('show-text')).toBe(true);
+    setTimeout (function () {      
       expect(Display._animationState).toEqual(AnimationState.NoAnimation);
       expect(Display.hideAlertText).toHaveBeenCalled();      
       done();
@@ -371,39 +365,32 @@ describe("Display.hideAlertText", function() {
   var alertBackground, alertText, keyframeStyle;
   beforeEach(function () {
     document.body.innerHTML = "";
-    // keyframeStyle = document.createElement("style");
-    // keyframeStyle.setAttribute("id", "keyframeStyles");    
-    // document.head.appendChild(keyframeStyle);
-    // alertBackground = document.createElement("div");
-    // alertBackground.setAttribute("id", "alert-background");
-    // document.body.appendChild(alertBackground);
-    alertText = document.createElement("p");
+    alertBackground = document.createElement("div");
+    alertBackground.setAttribute("id", "alert-background"); 
+    alertBackground.setAttribute("class", "bg-default show-bg");     
+    document.body.appendChild(alertBackground);    
+    alertText = document.createElement("span");
     alertText.setAttribute("id", "alert");
     alertText.style.opacity = 1;
     alertText.style.animation = "alert-scrolling-text 5s linear 0s 1 bg-default";
-    document.body.appendChild(alertText);    
+    alertBackground.appendChild(alertText);        
     Display._animationState = AnimationState.ScrollingText;
   });
 
-  it("should reset the text styles and animation state after the text has scrolled", function() {
-    spyOn(Display, "resetAlertKeyframes");
+  it("should reset the text styles and animation state after the text has scrolled", function() {    
     spyOn(Display, "hideAlertBackground");    
     Display.hideAlertText();
 
-    expect(alertText.style.animation).toEqual("");
-    expect(alertText.style.opacity).toEqual('0');
-    expect(alertText.style.color).toEqual("rgb(255, 255, 255)");
-    expect(alertText.style.fontSize).toEqual("40pt");    
+    expect(alertText.style.animation).toEqual("");        
     expect(Display._animationState).toEqual(AnimationState.NoAnimation);
   });
 
-  it("should call the hideAlertBackground and resetAlertKeyframes methods", function() {
+  it("should call the hideAlertBackground method", function() {          
     spyOn(Display, "hideAlertBackground");
-    spyOn(Display, "resetAlertKeyframes");    
     Display.hideAlertText();
 
-    expect(Display.hideAlertBackground).toHaveBeenCalled();
-    expect(Display.resetAlertKeyframes).toHaveBeenCalled();
+
+    expect(Display.hideAlertBackground).toHaveBeenCalled();    
   });  
 });
 
@@ -453,8 +440,13 @@ describe("Display.showNextAlert", function () {
 });
 
 describe("Display.alertTransitionEndEvent", function() {
+  beforeEach( function() {
+    
+  });
+
   it("should set the correct state and call showAlertText after the alert entrance transition", function() {    
-    var fake_settings = {test: "fake_settings"};  
+    var fake_settings = {test: "fake_settings"};
+    var e = jasmine.createSpyObj('e', ['stopPropagation']);  
     Display._alertSettings = fake_settings;
     spyOn(Display, "showAlertText");    
     Display._transitionState = TransitionState.EntranceTransition;    
@@ -483,45 +475,6 @@ describe("Display.alertAnimationEndEvent", function () {
   });
 });
 
-describe("Display.setAlertKeyframes", function () {
-  var keyframeStyle;
-  beforeEach( function () {
-    document.head.innerHTML = "";
-    keyframeStyle = document.createElement("style");
-    keyframeStyle.setAttribute("id", "keyframeStyles");
-    document.head.appendChild(keyframeStyle);    
-  });
-
-  it("should set the correct keyframes", function () {
-    var scrollWidth = 3200;
-    var scrollWidthPercentage = (Math.ceil((((scrollWidth / screen.width) * 100) + 1) / 10) * 10) + 110;
-    var keyframeHtml = "@keyframes alert-scrolling-text {" +
-      "from { transform: translateX(110%); } " +
-      "to { transform: translateX(-" + scrollWidthPercentage +"%);}";        
-        
-    expect(Display.setAlertKeyframes(scrollWidth)).toEqual(keyframeHtml);
-    expect(keyframeStyle.innerHTML).toEqual(keyframeHtml);
-  });
-});
-
-describe("Display.resetAlertKeyframes", function () {
-  var keyframeStyle;
-  beforeEach( function () {
-    document.head.innerHTML = "";  
-    keyframeStyle = document.createElement("style");
-    keyframeStyle.setAttribute("id", "keyframeStyles");
-    document.head.appendChild(keyframeStyle);
-    keyframeStyle.innerHTML = "@keyframes alert-scrolling-text {" + 
-                                "from { margin-left: 110%; } to { margin-left: -220;}";    
-  });
-
-  it("shoud reset the key frames after scrolling the text", function () {        
-    Display.resetAlertKeyframes();
-
-    expect(keyframeStyle.innerHTML).toEqual("");
-  });
-});
-
 describe("Display.clearAlertSettings", function () {  
   it("should clear the alert settings once an alert has been displayed", function () {
     var fake_settings = {test: "fake_settings"};