diff --git a/web/app/assets/javascripts/helpBubbleHelper.js b/web/app/assets/javascripts/helpBubbleHelper.js
index c8ccdc4cf..6333e6529 100644
--- a/web/app/assets/javascripts/helpBubbleHelper.js
+++ b/web/app/assets/javascripts/helpBubbleHelper.js
@@ -29,6 +29,7 @@
 
   function bigHelpOptions(options) {
     return {positions: options.positions, offsetParent: options.offsetParent,
+      width:options.width,
       spikeGirth: 15,
       spikeLength: 20,
       fill: 'white',
@@ -68,7 +69,7 @@
         helpBubble.jamtrackLandingPreview($preview, $preview.offsetParent())
 
         setTimeout(function() {
-          helpBubble.jamtrackLandingVideo($video, $video.offsetParent())
+          helpBubble.jamtrackLandingVideo($video, $video.closest('.row'))
 
           setTimeout(function() {
             helpBubble.jamtrackLandingCta($ctaButton, $alternativeCta)
@@ -101,18 +102,19 @@
   }
 
   helpBubble.jamtrackLandingPreview = function($element, $offsetParent) {
-    context.JK.prodBubble($element, 'jamtrack-landing-preview', {}, bigHelpOptions({positions:['right'], offsetParent: $offsetParent}))
+    console.log("SHOWING THE PREVIEW BUBBLE")
+    context.JK.prodBubble($element, 'jamtrack-landing-preview', {}, bigHelpOptions({positions:['right', 'top'], offsetParent: $offsetParent, width:250}))
   }
 
   helpBubble.jamtrackLandingVideo = function($element, $offsetParent) {
-    context.JK.prodBubble($element, 'jamtrack-landing-video', {}, bigHelpOptions({positions:['left'], offsetParent: $offsetParent}))
+    context.JK.prodBubble($element, 'jamtrack-landing-video', {}, bigHelpOptions({positions:['top', 'right'], offsetParent: $offsetParent}))
   }
 
   helpBubble.jamtrackLandingCta = function($element, $alternativeElement) {
-    if ($element.visible()) {
-      context.JK.prodBubble($element, 'jamtrack-landing-cta', {}, bigHelpOptions({positions:['left']}))
+    if (!$alternativeElement || $element.visible()) {
+      context.JK.prodBubble($element, 'jamtrack-landing-cta', {}, bigHelpOptions({positions:['top', 'right'], width:240}))
     }
-    else {
+    else if($alternativeElement) {
       context.JK.prodBubble($alternativeElement, 'jamtrack-landing-cta', {}, bigHelpOptions({positions:['right']}))
     }
   }
diff --git a/web/app/assets/javascripts/react-components.js b/web/app/assets/javascripts/react-components.js
index aa19d1274..14c31af19 100644
--- a/web/app/assets/javascripts/react-components.js
+++ b/web/app/assets/javascripts/react-components.js
@@ -11,4 +11,5 @@
 //= require ./react-components/stores/SessionMediaTracksStore
 //= require_directory ./react-components/stores
 //= require_directory ./react-components/mixins
-//= require_directory ./react-components
\ No newline at end of file
+//= require_directory ./react-components
+//= require_directory ./react-components/landing
\ No newline at end of file
diff --git a/web/app/assets/javascripts/react-components/landing/InvidualJamTrackPage.js.jsx.coffee b/web/app/assets/javascripts/react-components/landing/InvidualJamTrackPage.js.jsx.coffee
new file mode 100644
index 000000000..809a273a6
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/landing/InvidualJamTrackPage.js.jsx.coffee
@@ -0,0 +1,52 @@
+context = window
+
+@IndividualJamTrackPage = React.createClass({
+
+  watchVideo: (e) ->
+    e.preventDefault()
+    window.open("/popups/youtube/player?id=askHvcCoNfw", 'What Are JamTracks?', 'scrollbars=yes,toolbar=no,status=no,height=282,width=500')
+
+  render: () ->
+
+    header = null
+    if @props.band
+      header = "#{@props.jam_track.original_artist} Backing Tracks - Complete Multitracks"
+    else if @props.generic?
+      header = "Backing Tracks + Free Amazing App = Unmatched Experience"
+    else
+      header = "#{@props.jam_track.name} Backing Track by #{@props.jam_track.original_artist}"
+
+
+    `<div className="one_by_two">
+      <div className="row header">
+        <h1>{header}</h1>
+      </div>
+      <div className="row">
+        <div className="column">
+          <h2>Here's Why 20,000 Musicians Love Our Backing Tracks</h2>
+          <p>JamKazam gives you a better backing track experience:</p>
+          <ul>
+            <li>Full multitrack recordings with isolated track for each part</li>
+            <li>Free JamKazam app to:
+              <ul>
+                <li>Hear just the part you want to play to learn it</li>
+                <li>Mute the part you want to play, and play live with other parts</li>
+                <li>Record and mix your live play with unmuted tracks</li>
+              </ul>
+            </li>
+            <li>Free Internet Service to play this track live online with others</li>
+          </ul>
+          <a className="watch-video" onClick={this.watchVideo}>Watch A Video To See How It Works</a>
+        </div>
+        <div className="column">
+          <h2>Preview "{this.props.jam_track.name}" Backing Track by {this.props.jam_track.original_artist}</h2>
+          <p>Click the play buttons below to preview the master mix and fully isolated tracks of the professional backing track recording. All are included in your backing track.</p>
+          <div className="previews"></div>
+        </div>
+        <br className="clearAll" />
+      </div>
+      <div className="row">
+        <JamTrackCta {...this.props} />
+      </div>
+    </div>`
+})
\ No newline at end of file
diff --git a/web/app/assets/javascripts/react-components/landing/JamTrackCta.js.jsx.coffee b/web/app/assets/javascripts/react-components/landing/JamTrackCta.js.jsx.coffee
new file mode 100644
index 000000000..de888990e
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/landing/JamTrackCta.js.jsx.coffee
@@ -0,0 +1,60 @@
+context = window
+rest = context.JK.Rest()
+
+@JamTrackCta = React.createClass({
+
+  redeem: (e) ->
+    e.preventDefault()
+
+    return if @state.processing
+
+    isFree = context.JK.currentUserFreeJamTrack
+
+    rest.addJamtrackToShoppingCart({id: @props.jam_track.id}).done((response) =>
+      if(isFree)
+        if context.JK.currentUserId?
+          context.JK.currentUserFreeJamTrack = true # make sure the user sees no more free notices
+          context.location = '/client#/redeemComplete'
+        else
+          # now make a rest call to buy it
+          context.location = '/client#/redeemSignup'
+
+      else
+        context.location = '/client#/shoppingCart'
+
+    ).fail((jqXHR, textStatus, errorMessage) =>
+      if jqXHR.status == 422
+        errors = JSON.parse(jqXHR.responseText)
+        cart_errors = errors?.errors?.cart_id
+        if cart_errors?.length == 1 && cart_errors[0] == 'has already been taken'
+          context.location = '/client#/shoppingCart'
+        else
+          context.JK.app.ajaxError(jqXHR, textStatus, errorMessage)
+          @setState({processing:false})
+    )
+
+    @setState({processing:true})
+
+  getInitialState:() ->
+    {processing: false}
+
+  render: () ->
+    bandBrowseUrl = "/client?artist=#{this.props.jam_track.original_artist}#/jamtrackBrowse"
+
+    `<div className="cta-holder">
+      <div className="checkout">
+        <a href="/client#/jamtrackBrowse" onClick={this.redeem} className="cta-free-jamtrack" alt="ClICK HERE TO PICK YOUR FIRST JAMTRACK FREE!">
+          <img src="/assets/web/button_cta_jamtrack_free.png" />
+        </a>
+        <span className="value-indicator">$1.99 value</span>
+      </div>
+      <br/>
+      <div className="browse-band">
+        <a href={bandBrowseUrl}>or browse all {this.props.band_track_count} AC/DC backing tracks</a>
+      </div>
+      <br/>
+      <div className="browse-all">
+        <a href="/client#/jamtrackBrowse">or browse all {this.props.all_track_count} backing tracks!</a>
+      </div>
+    </div>`
+})
\ No newline at end of file
diff --git a/web/app/assets/javascripts/react-components/landing/PopupYoutubePlayer.js.jsx.coffee b/web/app/assets/javascripts/react-components/landing/PopupYoutubePlayer.js.jsx.coffee
new file mode 100644
index 000000000..2d7ef7ce1
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/landing/PopupYoutubePlayer.js.jsx.coffee
@@ -0,0 +1,11 @@
+context = window
+
+@PopupYoutubePlayer = React.createClass({
+
+  render: () ->
+    video_url = "//www.youtube.com/embed/#{this.props.video_id}"
+
+    `<div className="video-container">
+      <iframe src={video_url} frameBorder="0" allowFullScreen="allowfullscreen"></iframe>
+    </div>`
+})
\ No newline at end of file
diff --git a/web/app/assets/javascripts/react-components/stores/SessionStore.js.coffee b/web/app/assets/javascripts/react-components/stores/SessionStore.js.coffee
index e8c2422b9..89b9ab5df 100644
--- a/web/app/assets/javascripts/react-components/stores/SessionStore.js.coffee
+++ b/web/app/assets/javascripts/react-components/stores/SessionStore.js.coffee
@@ -43,7 +43,7 @@ NotificationActions = @NotificationActions
       this.listenTo(context.AppStore, this.onAppInit)
       this.listenTo(context.RecordingStore, this.onRecordingChanged)
 
-      if gon.global.video_available && gon.global.video_available!="none"
+      if gon.global.video_available && gon.global.video_available!="none" && context.JK.WebcamViewer?
         @webcamViewer = new context.JK.WebcamViewer()
         @webcamViewer.init()
         @webcamViewer.setVideoOff()
diff --git a/web/app/assets/javascripts/web/individual_jamtrack.js b/web/app/assets/javascripts/web/individual_jamtrack.js
new file mode 100644
index 000000000..6b0b8fd78
--- /dev/null
+++ b/web/app/assets/javascripts/web/individual_jamtrack.js
@@ -0,0 +1,51 @@
+(function (context, $) {
+
+  "use strict";
+
+  context.JK = context.JK || {};
+  context.JK.IndividualJamTrack = function (app) {
+
+    var rest = context.JK.Rest();
+    var logger = context.JK.logger;
+    var $page = null;
+    var $previews = null;
+    var $jamTracksButton = null;
+    var $ctaJamTracksButton = null;
+
+    function fetchJamTrack() {
+      rest.getJamTrackWithArtistInfo({plan_code: gon.jam_track_plan_code})
+        .done(function (jam_track) {
+
+          context._.each(jam_track.tracks, function (track) {
+
+            var $element = $('<div class="jam-track-preview-holder"></div>')
+
+            $previews.append($element);
+
+            new context.JK.JamTrackPreview(app, $element, jam_track, track, {master_shows_duration: true, color:'black', master_adds_line_break: false, preload_master:true})
+
+            if(track.track_type =='Master') {
+              context.JK.HelpBubbleHelper.rotateJamTrackLandingBubbles($element.find('.jam-track-preview'), $page.find('.one_by_two .watch-video'), $page.find('.checkout'));
+            }
+          })
+
+          $previews.append('<br clear = "all" />')
+        })
+        .fail(function () {
+          app.notify({title: 'Unable to fetch JamTrack', text: "Please refresh the page or try again later."})
+        })
+    }
+    function initialize() {
+
+      $page = $('body')
+      $previews = $page.find('.previews')
+      $jamTracksButton = $page.find('.browse-jamtracks')
+      $ctaJamTracksButton = $page.find('.cta-free-jamtrack');
+
+      context.JK.Tracking.adTrack(app)
+      fetchJamTrack();
+    }
+
+    this.initialize = initialize;
+  }
+})(window, jQuery);
\ No newline at end of file
diff --git a/web/app/assets/javascripts/web/individual_jamtrack_v1.js b/web/app/assets/javascripts/web/individual_jamtrack_v1.js
index ebb720f2c..a9fc6ff38 100644
--- a/web/app/assets/javascripts/web/individual_jamtrack_v1.js
+++ b/web/app/assets/javascripts/web/individual_jamtrack_v1.js
@@ -3,7 +3,7 @@
   "use strict";
 
   context.JK = context.JK || {};
-  context.JK.IndividualJamTrack = function (app) {
+  context.JK.IndividualJamTrackv1 = function (app) {
 
     var rest = context.JK.Rest();
     var logger = context.JK.logger;
diff --git a/web/app/assets/javascripts/web/web.js b/web/app/assets/javascripts/web/web.js
index fda0f16c1..561e44bf9 100644
--- a/web/app/assets/javascripts/web/web.js
+++ b/web/app/assets/javascripts/web/web.js
@@ -65,6 +65,7 @@
 //= require web/recordings
 //= require web/home
 //= require web/tracking
+//= require web/individual_jamtrack
 //= require web/individual_jamtrack_v1
 //= require web/individual_jamtrack_band_v1
 //= require web/affiliate_program
@@ -75,3 +76,9 @@
 //= require JamServer
 //= require_directory ../dialog
 //= require everywhere/everywhere
+//= require classnames
+//= require reflux
+//= require react
+//= require react_ujs
+//= require react-init
+//= require react-components
diff --git a/web/app/assets/stylesheets/landings/individual_jamtrack.css.scss b/web/app/assets/stylesheets/landings/individual_jamtrack.css.scss
index 5999b06cb..c663d91e6 100644
--- a/web/app/assets/stylesheets/landings/individual_jamtrack.css.scss
+++ b/web/app/assets/stylesheets/landings/individual_jamtrack.css.scss
@@ -1,4 +1,61 @@
-body.web.landing_jamtrack.individual_jamtrack_v1 {
+body.web.landing_jamtrack.individual_jamtrack {
+
+  .landing-content {
+    .header {
+      text-align:center;
+    }
+    p {
+      width:100%;
+    }
+    h1 {
+      font-size:24px;
+    }
+    h2 {
+      font-size:18px;
+      color:white;
+      text-decoration:underline;
+      margin-bottom:8px;
+    }
+    ul {
+      width: 100%;
+      margin:5px 0 0;
+    }
+    li {
+      margin-bottom:4px;
+    }
+    .row .column {
+      padding:0 30px;
+      position:absolute;
+      float:none;
+    }
+    .row:nth-of-type(2) {
+      margin-top:30px;
+      position:relative;
+    }
+
+    .row .column:nth-of-type(1) {
+      width: 50%;
+      left:0;
+      height:100%;
+    }
+    .row .column:nth-of-type(2) {
+      width: 50%;
+      left:50%;
+      position:relative;
+      border-width:0 0 0 1px;
+      border-color:white;
+      border-style:solid;
+    }
+  }
+  .watch-video {
+    position:absolute;
+    bottom:25px;
+    text-align:center;
+    display:block;
+    width: 50%;
+    left: 20%;
+    font-size:16px;
+  }
 
   .previews {
     margin-top:10px;
@@ -23,13 +80,42 @@ body.web.landing_jamtrack.individual_jamtrack_v1 {
   .jam-track-preview-holder {
 
     margin-bottom: 7px;
-
+    float:left;
     &[data-track-type="Master"] {
       width: 100%;
     }
 
     &[data-track-type="Track"] {
-      width: 100%;
+      width: 50%;
+    }
+  }
+
+  .jam-track-preview {
+    font-size:12px;
+  }
+
+  .cta-holder {
+    margin-top:30px;
+    text-align:center;
+    .checkout {
+      display:inline-block;
+      position:relative;
+    }
+    .browse-band {
+      display:inline-block;
+      position:relative;
+      margin-top:20px;
+    }
+    .browse-all {
+      display:inline-block;
+      position:relative;
+      margin-top:20px;
+    }
+    .value-indicator {
+      position:absolute;
+      left: 301px;
+      top: 19px;
+      width:80px;
     }
   }
 }
\ No newline at end of file
diff --git a/web/app/assets/stylesheets/minimal/minimal.css.scss b/web/app/assets/stylesheets/minimal/minimal.css.scss
index be342382b..6ee69d0f5 100644
--- a/web/app/assets/stylesheets/minimal/minimal.css.scss
+++ b/web/app/assets/stylesheets/minimal/minimal.css.scss
@@ -6,10 +6,7 @@
 *= require client/content
 *= require client/ftue
 *= require icheck/minimal/minimal
-*= require minimal/popup
-*= require minimal/recording_controls
-*= require minimal/media_controls
-*= require minimal/minimal_main
+*= require_directory .
 *= require client/metronomePlaybackModeSelect
 *= require_directory ../client/react-components
 */
\ No newline at end of file
diff --git a/web/app/assets/stylesheets/minimal/youtube_player.css.scss b/web/app/assets/stylesheets/minimal/youtube_player.css.scss
new file mode 100644
index 000000000..1425bbd92
--- /dev/null
+++ b/web/app/assets/stylesheets/minimal/youtube_player.css.scss
@@ -0,0 +1,8 @@
+body.youtube-player {
+  .video-container {
+    position:absolute;
+    width:100%;
+    height:100%;
+  }
+
+}
diff --git a/web/app/assets/stylesheets/web/web.css b/web/app/assets/stylesheets/web/web.css
index 12c614f5c..b5b4707c4 100644
--- a/web/app/assets/stylesheets/web/web.css
+++ b/web/app/assets/stylesheets/web/web.css
@@ -34,4 +34,5 @@
 *= require web/affiliate_links
 *= require_directory ../landings
 *= require icheck/minimal/minimal
+*= require_directory ../client/react-components
 */
\ No newline at end of file
diff --git a/web/app/controllers/landings_controller.rb b/web/app/controllers/landings_controller.rb
index 6a9eba4db..70fc1bb71 100644
--- a/web/app/controllers/landings_controller.rb
+++ b/web/app/controllers/landings_controller.rb
@@ -1,5 +1,7 @@
 class LandingsController < ApplicationController
 
+  include LandingsHelper
+
   respond_to :html
 
   def watch_bands
@@ -68,8 +70,12 @@ class LandingsController < ApplicationController
 
   def individual_jamtrack
     @no_landing_tag = true
-    @show_cta_free_jamtrack = true
     @jam_track = JamTrack.find_by_plan_code("jamtrack-" + params[:plan_code])
+    band_jam_track_count = @jam_track.band_jam_track_count
+    jam_track_count = JamTrack.count
+    @title = individual_jamtrack_title(false, params[:generic], @jam_track)
+    @description = individual_jamtrack_desc(false, params[:generic], @jam_track)
+    @page_data = {jam_track: @jam_track, all_track_count: jam_track_count, band_track_count: band_jam_track_count, band: false, generic: params[:generic]}
     gon.jam_track_plan_code = params[:plan_code] ? "jamtrack-" + params[:plan_code] : nil
     gon.generic = params[:generic]
     render 'individual_jamtrack', layout: 'web'
@@ -77,11 +83,15 @@ class LandingsController < ApplicationController
 
   def individual_jamtrack_band
     @no_landing_tag = true
-    @show_cta_free_jamtrack = true
     @jam_track = JamTrack.find_by_plan_code("jamtrack-" + params[:plan_code])
+    band_jam_track_count = @jam_track.band_jam_track_count
+    jam_track_count = JamTrack.count
+    @title = individual_jamtrack_title(true, params[:generic], @jam_track)
+    @description = individual_jamtrack_desc(true, params[:generic], @jam_track)
+    @page_data = {jam_track: @jam_track, all_track_count: jam_track_count, band_track_count: band_jam_track_count, band: true, generic: params[:generic]}
     gon.jam_track_plan_code = params[:plan_code] ? "jamtrack-" + params[:plan_code] : nil
-
-    render 'individual_jamtrack_band', layout: 'web'
+    gon.generic = params[:generic]
+    render 'individual_jamtrack', layout: 'web'
   end
 
   def individual_jamtrack_v1
diff --git a/web/app/controllers/popups_controller.rb b/web/app/controllers/popups_controller.rb
index 1af9f57de..21c3693b3 100644
--- a/web/app/controllers/popups_controller.rb
+++ b/web/app/controllers/popups_controller.rb
@@ -10,4 +10,8 @@ class PopupsController < ApplicationController
     render :layout => "minimal"
   end
 
+  def youtube_player
+    @video_id = params[:id]
+    render :layout => "minimal"
+  end
 end
\ No newline at end of file
diff --git a/web/app/helpers/landings_helper.rb b/web/app/helpers/landings_helper.rb
new file mode 100644
index 000000000..1c9e6340d
--- /dev/null
+++ b/web/app/helpers/landings_helper.rb
@@ -0,0 +1,28 @@
+module LandingsHelper
+
+  def individual_jamtrack_title(is_band, is_generic, jam_track)
+
+    return 'Free Backing Track - Multitrack' unless jam_track
+
+    if is_band
+      "#{jam_track.original_artist} - Get a Free Backing Track - Multitrack"
+    elsif is_generic
+      "Backing Tracks - Full Multitracks with Unique Features"
+    else
+       "#{jam_track.name} - Free Backing Track - Multitrack"
+    end
+  end
+
+  def individual_jamtrack_desc(is_band, is_generic, jam_track)
+
+    return "" unless jam_track
+
+    if is_band
+      "Full multitrack recordings by #{jam_track.original_artist} deliver flexible backing tracks for any instrument or vocals"
+    elsif is_generic
+      "Full multitrack recordings plus free app deliver flexible backing tracks for any instrument or vocals with unique features"
+    else
+      "Full multitrack recording of \"#{jam_track.name}\" by #{jam_track.original_artist} delivers flexible backing track for any instrument or vocals."
+    end
+  end
+end
diff --git a/web/app/views/landings/individual_jamtrack.html.slim b/web/app/views/landings/individual_jamtrack.html.slim
index 545f20585..278dec3f3 100644
--- a/web/app/views/landings/individual_jamtrack.html.slim
+++ b/web/app/views/landings/individual_jamtrack.html.slim
@@ -1,35 +1,10 @@
 - provide(:page_name, 'landing_page full landing_jamtrack individual_jamtrack')
-- provide(:description, @jam_track.nil? ? nil : "Preview multi-track JamTrack recording: #{@jam_track.name} by #{@jam_track.original_artist}. Way better than a backing track.")
-- provide(:title, @jam_track.nil? ? nil : "Preview JamTrack: #{@jam_track.name} by #{@jam_track.original_artist}")
+- provide(:description, @description)
+- provide(:title, @title)
 
-.one_by_two
-  .row
-    h1
-  .row
-    .column
-      h1.hidden.individualized
-        | Preview&nbsp;
-        strong.jamtrack_name
-        br
-        | JamTrack by&nbsp;
-        span.jamtrack_band
-
-      h1.hidden.generic
-        | Preview One of Our JamTracks
-      p.prompt Click play buttons to preview tracks. Every JamTrack includes fully isolated tracks for each part of the song!
-      .previews
-      a.browse-jamtracks.hidden
-    .column
-      h1 See What You Can Do With JamTracks
-      .video-wrapper
-        .video-container
-          iframe src="//www.youtube.com/embed/askHvcCoNfw" frameborder="0" allowfullscreen="allowfullscreen"
-    br clear="all"
-  br clear="all"
+= react_component 'IndividualJamTrackPage', @page_data.to_json
 
 javascript:
-
-
   $(document).on('JAMKAZAM_READY', function(e, data) {
     var song = new JK.IndividualJamTrack(data.app);
     song.initialize();
diff --git a/web/app/views/landings/individual_jamtrack_v1.html.slim b/web/app/views/landings/individual_jamtrack_v1.html.slim
index 856c69ec6..21f970f39 100644
--- a/web/app/views/landings/individual_jamtrack_v1.html.slim
+++ b/web/app/views/landings/individual_jamtrack_v1.html.slim
@@ -29,6 +29,6 @@ javascript:
 
 
   $(document).on('JAMKAZAM_READY', function(e, data) {
-    var song = new JK.IndividualJamTrack(data.app);
+    var song = new JK.IndividualJamTrackv1(data.app);
     song.initialize();
   })
diff --git a/web/app/views/landings/product_jamtracks.html.slim b/web/app/views/landings/product_jamtracks.html.slim
index acfaeffd1..97196df8e 100644
--- a/web/app/views/landings/product_jamtracks.html.slim
+++ b/web/app/views/landings/product_jamtracks.html.slim
@@ -38,6 +38,6 @@
 
 javascript:
   $(document).on('JAMKAZAM_READY', function (e, data) {
-    var song = new JK.IndividualJamTrack(data.app);
+    var song = new JK.IndividualJamTrackv1(data.app);
     song.initialize();
   })
\ No newline at end of file
diff --git a/web/app/views/layouts/web.html.erb b/web/app/views/layouts/web.html.erb
index 9a8965853..db839da5c 100644
--- a/web/app/views/layouts/web.html.erb
+++ b/web/app/views/layouts/web.html.erb
@@ -51,7 +51,6 @@
         <%= link_to image_tag("web/free-jamtrack-cta.png", :alt => "ClICK HERE TO PICK YOUR FIRST JAMTRACK FREE!"), "/client#/jamtrackBrowse", class: "cta-free-jamtrack" %>
           <span class="value-indicator">$1.99 value</span>
         </div>
-
       <% end %>
     </div>
 
@@ -95,11 +94,13 @@
             JK.currentUserAvatarUrl = JK.resolveAvatarUrl('<%= current_user.photo_url %>');
             JK.currentUserName = '<%= current_user.name %>';
             JK.currentUserMusician = '<%= current_user.musician %>';
+            JK.currentUserFreeJamTrack = <%= APP_CONFIG.one_free_jamtrack_per_user && current_user.has_redeemable_jamtrack %>
             <% else %>
             JK.currentUserId = null;
             JK.currentUserAvatarUrl = null;
             JK.currentUserName = null;
             JK.currentUserMusician = null;
+            JK.currentUserFreeJamTrack = <%= APP_CONFIG.one_free_jamtrack_per_user && anonymous_user.nil? ?  false : anonymous_user.has_redeemable_jamtrack%>
             <% end %>
 
             JK.app = JK.JamKazam();
diff --git a/web/app/views/popups/youtube_player.html.slim b/web/app/views/popups/youtube_player.html.slim
new file mode 100644
index 000000000..0a3ba90b9
--- /dev/null
+++ b/web/app/views/popups/youtube_player.html.slim
@@ -0,0 +1,2 @@
+- provide(:page_name, 'youtube-player popup')
+= react_component 'PopupYoutubePlayer', {video_id: @video_id}
\ No newline at end of file
diff --git a/web/config/routes.rb b/web/config/routes.rb
index 3fec0d1e3..63e0c8ffd 100644
--- a/web/config/routes.rb
+++ b/web/config/routes.rb
@@ -142,6 +142,7 @@ SampleApp::Application.routes.draw do
   scope '/popups' do
     match '/recording-controls',  to: 'popups#recording_controls'
     match '/media-controls',      to: 'popups#media_controls'
+    match '/youtube/player',      to: 'popups#youtube_player'
   end
 
   scope '/corp' do
diff --git a/web/spec/features/individual_jamtrack_band_spec.rb b/web/spec/features/individual_jamtrack_band_spec.rb
deleted file mode 100644
index badfb8583..000000000
--- a/web/spec/features/individual_jamtrack_band_spec.rb
+++ /dev/null
@@ -1,67 +0,0 @@
-require 'spec_helper'
-
-describe "Individual JamTrack Band", :js => true, :type => :feature, :capybara_feature => true do
-
-  subject { page }
-
-  before(:all) do
-    ShoppingCart.delete_all
-    JamTrackRight.delete_all
-    JamTrack.delete_all
-    JamTrackTrack.delete_all
-    JamTrackLicensor.delete_all
-  end
-
-  let(:user) { FactoryGirl.create(:user) }
-  let(:jamtrack_acdc_backinblack) { @jamtrack_acdc_backinblack }
-
-
-
-  before(:all) do
-    @jamtrack_acdc_backinblack = FactoryGirl.create(:jam_track, name: 'Back in Black', original_artist: 'AC/DC', sales_region: 'United States', make_track: true, plan_code: 'jamtrack-acdc-backinblack')
- end
-
-
-  describe "AC/DC Back in Black" do
-
-    it "logged out" do
-      visit "/landing/jamtracks/band/acdc-backinblack"
-
-      find('.jamtrack_band', text: @jamtrack_acdc_backinblack.original_artist)
-      jamtrack_acdc_backinblack.jam_track_tracks.each do |track|
-        if track.master?
-          find('.jam-track-preview-holder[data-id="' + track.id + '"] img.instrument-icon[data-instrument-id="other"]')
-          find('.jam-track-preview-holder[data-id="' + track.id + '"] .instrument-name', text:'Master Mix')
-        else
-          find('.jam-track-preview-holder[data-id="' + track.id + '"] img.instrument-icon[data-instrument-id="' + track.instrument.id + '"]')
-          find('.jam-track-preview-holder[data-id="' + track.id + '"] .instrument-name', text:track.instrument.description)
-        end
-      end
-      find('a.cta-free-jamtrack')['href'].should eq("/client?artist=#{jamtrack_acdc_backinblack.original_artist}#/jamtrackBrowse")
-      find('a.browse-jamtracks')['href'].should eq("/client?artist=#{jamtrack_acdc_backinblack.original_artist}#/jamtrackBrowse")
-
-      find('a.browse-jamtracks').trigger(:click)
-      find('h1', text: 'jamtracks')
-    end
-
-    it "logged in" do
-      fast_signin(user, "/landing/jamtracks/band/acdc-backinblack")
-
-      find('.jamtrack_band', text: @jamtrack_acdc_backinblack.original_artist)
-      jamtrack_acdc_backinblack.jam_track_tracks.each do |track|
-        if track.master?
-          find('.jam-track-preview-holder[data-id="' + track.id + '"] img.instrument-icon[data-instrument-id="other"]')
-          find('.jam-track-preview-holder[data-id="' + track.id + '"] .instrument-name', text:'Master Mix')
-        else
-          find('.jam-track-preview-holder[data-id="' + track.id + '"] img.instrument-icon[data-instrument-id="' + track.instrument.id + '"]')
-          find('.jam-track-preview-holder[data-id="' + track.id + '"] .instrument-name', text:track.instrument.description)
-        end
-      end
-      find('a.cta-free-jamtrack')['href'].should eq("/client?artist=#{jamtrack_acdc_backinblack.original_artist}#/jamtrackBrowse")
-      find('a.browse-jamtracks')['href'].should eq("/client?artist=#{jamtrack_acdc_backinblack.original_artist}#/jamtrackBrowse")
-
-      find('a.browse-jamtracks').trigger(:click)
-      find('h1', text: 'jamtracks')
-    end
-  end
-end
diff --git a/web/spec/features/individual_jamtrack_spec.rb b/web/spec/features/individual_jamtrack_spec.rb
index 1711554b6..b801392a5 100644
--- a/web/spec/features/individual_jamtrack_spec.rb
+++ b/web/spec/features/individual_jamtrack_spec.rb
@@ -42,8 +42,7 @@ describe "Individual JamTrack", :js => true, :type => :feature, :capybara_featur
     it "logged out" do
       visit "/landing/jamtracks/acdc-backinblack"
 
-      find('.jamtrack_name', '"Back in Black"')
-      find('.jamtrack_band', '"AC/DC"')
+      find('h1', "#{jamtrack_acdc_backinblack.name} Backing Track by #{jamtrack_acdc_backinblack.original_artist}")
       jamtrack_acdc_backinblack.jam_track_tracks.each do |track|
         if track.master?
           find('.jam-track-preview-holder[data-id="' + track.id + '"] img.instrument-icon[data-instrument-id="other"]')
@@ -53,18 +52,26 @@ describe "Individual JamTrack", :js => true, :type => :feature, :capybara_featur
           find('.jam-track-preview-holder[data-id="' + track.id + '"] .instrument-name', text:track.instrument.description)
         end
       end
-      find('a.cta-free-jamtrack')['href'].should eq("/client?artist=#{jamtrack_acdc_backinblack.original_artist}#/jamtrackBrowse")
-      find('a.browse-jamtracks')['href'].should eq("/client?artist=#{jamtrack_acdc_backinblack.original_artist}#/jamtrackBrowse")
+      find('.browse-band a')['href'].should eq("/client?artist=#{jamtrack_acdc_backinblack.original_artist}#/jamtrackBrowse")
+      find('.browse-all a')['href'].should eq("/client#/jamtrackBrowse")
+      find('a.cta-free-jamtrack')['href'].should eq("/client#/jamtrackBrowse")
+      find('a.cta-free-jamtrack').trigger(:click)
+      find('h1', text: 'check out')
+      find('h3', text: 'OR SIGN UP USING YOUR EMAIL')
+
+      # now go back, and then try to click checkout again
+      visit "/landing/jamtracks/acdc-backinblack"
+      find('a.cta-free-jamtrack').trigger(:click)
+      find('h1', text: 'check out')
+      find('h3', text: 'OR SIGN UP USING YOUR EMAIL')
+
 
-      find('a.browse-jamtracks').trigger(:click)
-      find('h1', text: 'jamtracks')
     end
 
     it "logged in" do
       fast_signin(user, "/landing/jamtracks/acdc-backinblack")
 
-      find('.jamtrack_name', '"Back in Black"')
-      find('.jamtrack_band', '"AC/DC"')
+      find('h1', "#{jamtrack_acdc_backinblack.name} Backing Track by #{jamtrack_acdc_backinblack.original_artist}")
       jamtrack_acdc_backinblack.jam_track_tracks.each do |track|
         if track.master?
           find('.jam-track-preview-holder[data-id="' + track.id + '"] img.instrument-icon[data-instrument-id="other"]')
@@ -74,17 +81,14 @@ describe "Individual JamTrack", :js => true, :type => :feature, :capybara_featur
           find('.jam-track-preview-holder[data-id="' + track.id + '"] .instrument-name', text:track.instrument.description)
         end
       end
-      find('a.cta-free-jamtrack')['href'].should eq("/client?artist=#{jamtrack_acdc_backinblack.original_artist}#/jamtrackBrowse")
-      find('a.browse-jamtracks')['href'].should eq("/client?artist=#{jamtrack_acdc_backinblack.original_artist}#/jamtrackBrowse")
-
-      find('a.browse-jamtracks').trigger(:click)
-      find('h1', text: 'jamtracks')
+      find('a.cta-free-jamtrack').trigger(:click)
+      find('p', text:'Thank you for joining our community, and congratulations on getting your first JamTrack!')
     end
 
     it "generic version" do
       visit "/landing/jamtracks/acdc-backinblack?generic=true"
 
-      find('h1', text: 'Preview One of Our JamTracks')
+      find('h1', "Backing Tracks + Free Amazing App = Unmatched Experience")
       jamtrack_acdc_backinblack.jam_track_tracks.each do |track|
         if track.master?
           find('.jam-track-preview-holder[data-id="' + track.id + '"] img.instrument-icon[data-instrument-id="other"]')
@@ -94,13 +98,27 @@ describe "Individual JamTrack", :js => true, :type => :feature, :capybara_featur
           find('.jam-track-preview-holder[data-id="' + track.id + '"] .instrument-name', text:track.instrument.description)
         end
       end
-      find('a.cta-free-jamtrack')['href'].should eq("/client#/jamtrackBrowse")
-      find('a.browse-jamtracks')['href'].should eq("/client#/jamtrackBrowse")
-
-      find('a.browse-jamtracks').trigger(:click)
-      find('h1', text: 'jamtracks')
+      find('a.cta-free-jamtrack').trigger(:click)
+      find('h1', text: 'check out')
+      find('h3', text: 'OR SIGN UP USING YOUR EMAIL')
+    end
 
+    it "band version" do
+      visit "/landing/jamtracks/band/acdc-backinblack"
 
+      find('h1', "#{jamtrack_acdc_backinblack.original_artist} Backing Tracks - Complete Multitracks")
+      jamtrack_acdc_backinblack.jam_track_tracks.each do |track|
+        if track.master?
+          find('.jam-track-preview-holder[data-id="' + track.id + '"] img.instrument-icon[data-instrument-id="other"]')
+          find('.jam-track-preview-holder[data-id="' + track.id + '"] .instrument-name', text:'Master Mix')
+        else
+          find('.jam-track-preview-holder[data-id="' + track.id + '"] img.instrument-icon[data-instrument-id="' + track.instrument.id + '"]')
+          find('.jam-track-preview-holder[data-id="' + track.id + '"] .instrument-name', text:track.instrument.description)
+        end
+      end
+      find('a.cta-free-jamtrack').trigger(:click)
+      find('h1', text: 'check out')
+      find('h3', text: 'OR SIGN UP USING YOUR EMAIL')
     end
   end
 end