diff --git a/web/app/assets/javascripts/checkout_payment.js b/web/app/assets/javascripts/checkout_payment.js
index e69de29bb..e8085c018 100644
--- a/web/app/assets/javascripts/checkout_payment.js
+++ b/web/app/assets/javascripts/checkout_payment.js
@@ -0,0 +1,499 @@
+(function(context,$) {
+
+  "use strict";
+  context.JK = context.JK || {};
+  context.JK.CheckoutPaymentScreen = function(app) {
+
+    var EVENTS = context.JK.EVENTS;
+    var logger = context.JK.logger;
+
+    var $screen = null;
+    var $navigation = null;
+    var $billingInfo = null;
+    var $shippingInfo = null;
+    var $paymentMethod = null;
+    var $shippingAddress = null;
+    var $shippingAsBilling = null;
+    var $paymentInfoPanel = null;
+    var $orderPanel = null;
+    var $orderContent = null;
+    var userDetail = null;
+    var step = null;
+    var billing_info = null;
+    var shipping_info = null;
+    var shipping_as_billing = null;
+
+    function beforeShow() {
+      beforeShowPaymentInfo();
+    }
+
+    function beforeShowPaymentInfo() {
+      step = 2;
+      renderNavigation();
+      renderAccountInfo();
+    }
+
+
+    function renderAccountInfo() {
+      rest.getUserDetail()
+        .done(populateAccountInfo)
+        .error(app.ajaxError);
+    }
+
+    function populateAccountInfo(user) {
+      userDetail = user;
+
+      if (userDetail.has_recurly_account) {
+        rest.getBillingInfo()
+          .done(function(response) {
+            $billingInfo.find("#billing-first-name").val(response.first_name);
+            $billingInfo.find("#billing-last-name").val(response.last_name);
+            $billingInfo.find("#billing-address1").val(response.address1);
+            $billingInfo.find("#billing-address2").val(response.address2);
+            $billingInfo.find("#billing-city").val(response.city);
+            $billingInfo.find("#billing-state").val(response.state);
+            $billingInfo.find("#billing-zip").val(response.zip);
+            $billingInfo.find("#billing-country").val(response.country);
+
+            $shippingAddress.find("#shipping-first-name").val(response.first_name);
+            $shippingAddress.find("#shipping-last-name").val(response.last_name);
+            $shippingAddress.find("#shipping-address1").val(response.address1);
+            $shippingAddress.find("#shipping-address2").val(response.address2);
+            $shippingAddress.find("#shipping-city").val(response.city);
+            $shippingAddress.find("#shipping-state").val(response.state);
+            $shippingAddress.find("#shipping-zip").val(response.zip);
+            $shippingAddress.find("#shipping-country").val(response.country);
+          })
+          .error(app.ajaxError);
+      }
+      else {
+        $billingInfo.find("#billing-first-name").val(userDetail.first_name);
+        $billingInfo.find("#billing-last-name").val(userDetail.last_name);
+        $billingInfo.find("#billing-city").val(userDetail.city);
+        $billingInfo.find("#billing-state").val(userDetail.state);
+        $billingInfo.find("#billing-country").val(userDetail.country);
+
+        $shippingAddress.find("#shipping-first-name").val(userDetail.first_name);
+        $shippingAddress.find("#shipping-last-name").val(userDetail.last_name);
+        $shippingAddress.find("#shipping-city").val(userDetail.city);
+        $shippingAddress.find("#shipping-state").val(userDetail.state);
+        $shippingAddress.find("#shipping-country").val(userDetail.country);
+      }
+    }
+
+    function afterShow(data) {
+      // XXX : style-test code
+      // moveToThanks({jam_tracks: [{id: 14, jam_track_right_id: 11, name: 'Back in Black'}, {id: 15, jam_track_right_id: 11, name: 'In Bloom'}, {id: 16, jam_track_right_id: 11, name: 'Love Bird Supreme'}]});
+    }
+
+    function beforeHide() {
+
+    }
+
+    function beforeHide() {
+
+    }
+
+    // TODO: Refactor: this function is long and fraught with many return points.
+    function next(e) {
+      e.preventDefault();
+      $("#order_error").addClass("hidden")
+
+      // validation
+      var billing_first_name = $billingInfo.find("#billing-first-name").val();
+      var billing_last_name = $billingInfo.find("#billing-last-name").val();
+      var billing_address1 = $billingInfo.find("#billing-address1").val();
+      var billing_address2 = $billingInfo.find("#billing-address2").val();
+      var billing_city = $billingInfo.find("#billing-city").val();
+      var billing_state = $billingInfo.find("#billing-state").val();
+      var billing_zip = $billingInfo.find("#billing-zip").val();
+      var billing_country = $billingInfo.find("#billing-country").val();
+
+      if (!billing_first_name) {
+        $billingInfo.find('#divBillingFirstName .error-text').remove();
+        $billingInfo.find('#divBillingFirstName').addClass("error");
+        $billingInfo.find('#billing-first-name').after("<ul class='error-text'><li>First Name is required</li></ul>");
+
+        return false;
+      }
+      else {
+        $billingInfo.find('#divBillingFirstName').removeClass("error");
+      }
+
+      if (!billing_last_name) {
+        $billingInfo.find('#divBillingLastName .error-text').remove();
+        $billingInfo.find('#divBillingLastName').addClass("error");
+        $billingInfo.find('#billing-last-name').after("<ul class='error-text'><li>Last Name is required</li></ul>");
+
+        return false;
+      }
+      else {
+        $billingInfo.find('#divBillingLastName').removeClass("error");
+      }
+
+      if (!billing_address1) {
+        $billingInfo.find('#divBillingAddress1 .error-text').remove();
+        $billingInfo.find('#divBillingAddress1').addClass("error");
+        $billingInfo.find('#billing-address1').after("<ul class='error-text'><li>Address is required</li></ul>");
+
+        return false;
+      }
+      else {
+        $billingInfo.find('#divBillingAddress1').removeClass("error");
+      }
+
+      if (!billing_zip) {
+        $billingInfo.find('#divBillingZip .error-text').remove();
+        $billingInfo.find('#divBillingZip').addClass("error");
+        $billingInfo.find('#billing-zip').after("<ul class='error-text'><li>Zip code is required</li></ul>");
+
+        return false;
+      }
+      else {
+        $billingInfo.find('#divBillingZip').removeClass("error");
+      }
+
+      if (!billing_state) {
+        $billingInfo.find('#divBillingState .error-text').remove();
+        $billingInfo.find('#divBillingState').addClass("error");
+        $billingInfo.find('#billing-zip').after("<ul class='error-text'><li>State is required</li></ul>");
+
+        return false;
+      }
+      else {
+        $billingInfo.find('#divBillingState').removeClass("error");
+      }
+
+      if (!billing_city) {
+        $billingInfo.find('#divBillingCity .error-text').remove();
+        $billingInfo.find('#divBillingCity').addClass("error");
+        $billingInfo.find('#billing-city').after("<ul class='error-text'><li>City is required</li></ul>");
+
+        return false;
+      }
+      else {
+        $billingInfo.find('#divBillingCity').removeClass("error");
+      }
+
+      if (!billing_country) {
+        $billingInfo.find('#divBillingCountry .error-text').remove();
+        $billingInfo.find('#divBillingCountry').addClass("error");
+        $billingInfo.find('#billing-country').after("<ul class='error-text'><li>Country is required</li></ul>");
+
+        return false;
+      }
+      else {
+        $billingInfo.find('#divBillingCountry').removeClass("error");
+      }
+
+      shipping_as_billing = $shippingAsBilling.is(":checked");
+      var shipping_first_name, shipping_last_name, shipping_address1, shipping_address2;
+      var shipping_city, shipping_state, shipping_zip, shipping_country;
+
+      if (!shipping_as_billing) {
+        shipping_first_name = $shippingAddress.find("#shipping-first-name").val();
+        shipping_last_name = $shippingAddress.find("#shipping-last-name").val();
+        shipping_address1 = $shippingAddress.find("#shipping-address1").val();
+        shipping_address2 = $shippingAddress.find("#shipping-address2").val();
+        shipping_city = $shippingAddress.find("#shipping-city").val();
+        shipping_state = $shippingAddress.find("#shipping-state").val();
+        shipping_zip = $shippingAddress.find("#shipping-zip").val();
+        shipping_country = $shippingAddress.find("#shipping-country").val();
+
+        if (!shipping_first_name) {
+          $shippingAddress.find('#divShippingFirstName .error-text').remove();
+          $shippingAddress.find('#divShippingFirstName').addClass("error");
+          $shippingAddress.find('#shipping-first-name').after("<ul class='error-text'><li>First Name is required</li></ul>");
+
+          return false;
+        }
+        else {
+          $shippingInfo.find('#divShippingFirstName').removeClass("error");
+        }
+
+        if (!shipping_last_name) {
+          $shippingAddress.find('#divShippingLastName .error-text').remove();
+          $shippingAddress.find('#divShippingLastName').addClass("error");
+          $shippingAddress.find('#shipping-last-name').after("<ul class='error-text'><li>Last Name is required</li></ul>");
+
+          return false;
+        }
+        else {
+          $shippingInfo.find('#divShippingLastName').removeClass("error");
+        }
+
+        if (!shipping_address1) {
+          $shippingAddress.find('#divShippingAddress1 .error-text').remove();
+          $shippingAddress.find('#divShippingAddress1').addClass("error");
+          $shippingAddress.find('#shipping-address1').after("<ul class='error-text'><li>Address is required</li></ul>");
+
+          return false;
+        }
+        else {
+          $shippingInfo.find('#divShippingAddress1').removeClass("error");
+        }
+
+        if (!shipping_zip) {
+          $shippingAddress.find('#divShippingZip .error-text').remove();
+          $shippingAddress.find('#divShippingZip').addClass("error");
+          $shippingAddress.find('#shipping-zip').after("<ul class='error-text'><li>Zip code is required</li></ul>");
+
+          return false;
+        }
+        else {
+          $shippingInfo.find('#divShippingZip').removeClass("error");
+        }
+
+        if (!shipping_state) {
+          $shippingAddress.find('#divShippingState .error-text').remove();
+          $shippingAddress.find('#divShippingState').addClass("error");
+          $shippingAddress.find('#shipping-zip').after("<ul class='error-text'><li>State is required</li></ul>");
+
+          return false;
+        }
+        else {
+          $shippingInfo.find('#divShippingState').removeClass("error");
+        }
+
+        if (!shipping_city) {
+          $shippingAddress.find('#divShippingCity .error-text').remove();
+          $shippingAddress.find('#divShippingCity').addClass("error");
+          $shippingAddress.find('#shipping-city').after("<ul class='error-text'><li>City is required</li></ul>");
+
+          return false;
+        }
+        else {
+          $shippingInfo.find('#divShippingCity').removeClass("error");
+        }
+
+        if (!shipping_country) {
+          $shippingAddress.find('#divShippingCountry .error-text').remove();
+          $shippingAddress.find('#divShippingCountry').addClass("error");
+          $shippingAddress.find('#shipping-country').after("<ul class='error-text'><li>Country is required</li></ul>");
+
+          return false;
+        }
+        else {
+          $shippingAddress.find('#divShippingCountry').removeClass("error");
+        }
+      }
+
+      var card_name = $paymentMethod.find("#card-name").val();
+      var card_number = $paymentMethod.find("#card-number").val();
+      var card_year = $paymentMethod.find("#card_expire-date_1i").val();
+      var card_month = $paymentMethod.find("#card_expire-date_2i").val();
+      var card_verify = $paymentMethod.find("#card-verify").val();
+
+      if (!card_name) {
+        $paymentMethod.find('#divCardName .error-text').remove();
+        $paymentMethod.find('#divCardName').addClass("error");
+        $paymentMethod.find('#card-name').after("<ul class='error-text'><li>Card Name is required</li></ul>");
+        return false;
+      } else {
+        $paymentMethod.find('#divCardName').removeClass("error");
+      }
+
+      if (!card_number) {
+        $paymentMethod.find('#divCardNumber .error-text').remove();
+        $paymentMethod.find('#divCardNumber').addClass("error");
+        $paymentMethod.find('#card-number').after("<ul class='error-text'><li>Card Number is required</li></ul>");
+        return false;
+      } else if (!$.payment.validateCardNumber(card_number)) {
+        $paymentMethod.find('#divCardNumber .error-text').remove();
+        $paymentMethod.find('#divCardNumber').addClass("error");
+        $paymentMethod.find('#card-number').after("<ul class='error-text'><li>Card Number is not valid</li></ul>");
+        return false;
+      } else {
+        $paymentMethod.find('#divCardNumber').removeClass("error");
+      }
+
+      if (!$.payment.validateCardExpiry(card_month, card_year)) {
+        $paymentMethod.find('#divCardExpiry .error-text').remove();
+        $paymentMethod.find('#divCardExpiry').addClass("error");
+        $paymentMethod.find('#card-expiry').after("<ul class='error-text'><li>Card Number is not valid</li></ul>");
+      } else {
+        $paymentMethod.find('#divCardExpiry').removeClass("error");
+      }
+
+      if (!card_verify) {
+        $paymentMethod.find('#divCardVerify .error-text').remove();
+        $paymentMethod.find('#divCardVerify').addClass("error");
+        $paymentMethod.find('#card-verify').after("<ul class='error-text'><li>Card Verification Value is required</li></ul>");
+
+        return false;
+      } else if(!$.payment.validateCardCVC(card_verify)) {
+        $paymentMethod.find('#divCardVerify .error-text').remove();
+        $paymentMethod.find('#divCardVerify').addClass("error");
+        $paymentMethod.find('#card-verify').after("<ul class='error-text'><li>Card Verification Value is not valid.</li></ul>");
+
+        return false;
+      } else {
+        $paymentMethod.find('#divCardVerify').removeClass("error");
+      }
+
+      billing_info = {};
+      shipping_info = {};
+      billing_info.first_name = billing_first_name;
+      billing_info.last_name = billing_last_name;
+      billing_info.address1 = billing_address1;
+      billing_info.address2 = billing_address2;
+      billing_info.city = billing_city;
+      billing_info.state = billing_state;
+      billing_info.country = billing_country;
+      billing_info.zip = billing_zip;
+      billing_info.number = card_number;
+      billing_info.month = card_month;
+      billing_info.year = card_year;
+      billing_info.verification_value = card_verify;
+
+      if (shipping_as_billing) {
+        shipping_info = $.extend({},billing_info);
+        delete shipping_info.number;
+        delete shipping_info.month;
+        delete shipping_info.year;
+        delete shipping_info.verification_value;
+      } else {
+        shipping_info.first_name = shipping_first_name;
+        shipping_info.last_name = shipping_last_name;
+        shipping_info.address1 = shipping_address1;
+        shipping_info.address2 = shipping_address2;
+        shipping_info.city = shipping_city;
+        shipping_info.state = shipping_state;
+        shipping_info.country = shipping_country;
+        shipping_info.zip = shipping_zip;
+      }
+
+      $paymentInfoPanel.find("#payment-info-next").addClass("disabled");
+      $paymentInfoPanel.find("#payment-info-next").off("click");
+
+      rest.createRecurlyAccount({billing_info: billing_info})
+        .done(function() {
+          moveToOrder();
+          $paymentInfoPanel.find("#payment-info-next").removeClass("disabled");
+          $paymentInfoPanel.find("#payment-info-next").on("click", next);
+        })
+        .fail(errorHandling);
+    }
+
+    function errorHandling(xhr, ajaxOptions, thrownError) {
+      $.each(xhr.responseJSON.errors, function(key, error) {
+        if (key == 'number') {
+          $paymentMethod.find('#divCardNumber .error-text').remove();
+          $paymentMethod.find('#divCardNumber').addClass("error");
+          $paymentMethod.find('#card-number').after("<ul class='error-text'><li>" + error + "</li></ul>");
+        }
+        else if (key == 'verification_value') {
+          $paymentMethod.find('#divCardVerify .error-text').remove();
+          $paymentMethod.find('#divCardVerify').addClass("error");
+          $paymentMethod.find('#card-verify').after("<ul class='error-text'><li>" + error + "</li></ul>");
+        }
+      });
+
+      $paymentInfoPanel.find("#payment-info-next").addClass("disabled");
+      $paymentInfoPanel.find("#payment-info-next").on('click', next);
+    }
+
+    function beforeShowOrder() {
+      step = 3;
+      renderNavigation();
+      populateOrderPage();
+    }
+
+    function clearOrderPage() {
+      $orderContent.empty();
+    }
+
+    function populateOrderPage() {
+      clearOrderPage();
+
+      rest.getShoppingCarts()
+        .done(renderOrderPage)
+        .fail(app.ajaxError);
+    }
+
+    function moveToOrder() {
+      window.location = '/client#/checkout_order';
+    }
+
+
+
+
+    function toggleShippingAsBilling(e) {
+      e.preventDefault();
+
+      var shipping_as_billing = $(e.target).is(':checked');
+
+      if (!shipping_as_billing) {
+        $shippingAddress.removeClass("hidden");
+      }
+      else {
+        $shippingAddress.addClass("hidden");
+      }
+    }
+
+    function events() {
+      $paymentInfoPanel.find("#payment-info-next").on('click', next);
+      $shippingAsBilling.on('ifChanged', toggleShippingAsBilling);
+    }
+
+    function reset() {
+
+    }
+
+    function renderNavigation() {
+      $navigation.html("");
+      var navigationHtml = $(
+        context._.template(
+          $('#template-checkout-navigation').html(),
+          {current: step},
+          {variable: 'data'}
+        )
+      );
+
+      $navigation.append(navigationHtml);
+    }
+
+    function initializeControls() {
+      $("form.payment-info").iCheck({
+        checkboxClass: 'icheckbox_minimal',
+        radioClass: 'iradio_minimal',
+        inheritClass: true
+      });
+
+      // Use jquery.payment to limit characters and length:
+      $paymentMethod.find("#card-number").payment('formatCardNumber');
+      $paymentMethod.find("#card-verify").payment('formatCardCVC');
+    }
+
+    function initialize() {
+      var screenBindings = {
+        'beforeShow': beforeShow,
+        'afterShow': afterShow,
+        'beforeHide' : beforeHide
+      };
+      app.bindScreen('checkout_payment', screenBindings);
+
+      $screen             = $("#checkoutPaymentScreen");
+      $paymentInfoPanel   = $screen.find(".checkout-payment-info");
+      $orderPanel         = $screen.find(".order-panel");
+      $navigation         = $screen.find(".checkout-navigation-bar");
+      $billingInfo        = $paymentInfoPanel.find(".billing-address");
+      $shippingInfo       = $paymentInfoPanel.find(".shipping-address");
+      $paymentMethod      = $paymentInfoPanel.find(".payment-method");
+      $shippingAddress    = $paymentInfoPanel.find(".shipping-address-detail");
+      $shippingAsBilling  = $paymentInfoPanel.find("#shipping-as-billing");
+      $orderContent       = $orderPanel.find(".order-content");
+
+      if($screen.length == 0) throw "$screen must be specified";
+      if($navigation.length == 0) throw "$navigation must be specified";
+
+      initializeControls();
+
+      events();
+    }
+
+    this.initialize = initialize;
+
+    return this;
+  }
+})(window,jQuery);
\ No newline at end of file
diff --git a/web/app/assets/stylesheets/client/checkout.css.scss b/web/app/assets/stylesheets/client/checkout.css.scss
index df6c71c1e..5e3128cf1 100644
--- a/web/app/assets/stylesheets/client/checkout.css.scss
+++ b/web/app/assets/stylesheets/client/checkout.css.scss
@@ -8,7 +8,7 @@
   }
 
   .nav-signin {
-    margin-left: 5%;
+    margin-left: 30px;
   }
 
   .nav-text {
@@ -27,105 +27,6 @@
   }
 }
 
-.checkout-payment-info, .checkout-place-order {
-
-  form.payment-info {
-    width: 100%;
-
-    input[type="text"] {
-      width: 90%;
-    }
-
-    .billing-address {
-      float: left;
-      width: 50%;
-
-      h2.billing-caption {
-        margin: 20px 5px;
-        font-size: 16px;
-      }
-
-      .billing-label {
-        padding-top: 8px;
-        width: 30%;
-        float: left;
-        text-align: right;
-        margin-right: 5px;
-      }
-
-      .billing-value {
-        width: 65%;
-        text-align: left;
-        float: left;
-      }
-    }
-
-    .payment-method {
-      float: left;
-      width: 50%;
-
-      h2.payment-method-caption {
-        margin: 20px 5px;
-        font-size: 16px;
-      }
-
-      .card-label {
-        padding-top: 8px;
-        width: 35%;
-        float: left;
-        text-align: right;
-        margin-right: 5px;
-      }
-
-      .card-value {
-        width: 60%;
-        text-align: left;
-        float: left;
-      }
-
-      .save-card-checkbox {
-        float:left;
-        display:block;
-        margin-right:5px;
-      }
-    }
-
-    .shipping-address {
-      float: left;
-      width: 50%;
-
-      h2.shipping-address-label {
-        margin: 20px 5px;
-        font-size: 16px;
-      }
-
-      .shipping-as-billing {
-        float:left;
-        display:block;
-        margin-right:5px;
-      }
-
-      .divBillingHelper {
-        padding-top: 2px;
-      }
-
-      .shipping-label {
-        padding-top: 8px;
-        width: 30%;
-        float: left;
-        text-align: right;
-        margin-right: 5px;
-      }
-
-      .shipping-value {
-        width: 65%;
-        text-align: left;
-        float: left;
-      }
-    }
-  }
-}
-
 .thanks-panel {
   padding: 30px;
 
diff --git a/web/app/assets/stylesheets/client/checkout_payment.css.scss b/web/app/assets/stylesheets/client/checkout_payment.css.scss
index e69de29bb..70c735815 100644
--- a/web/app/assets/stylesheets/client/checkout_payment.css.scss
+++ b/web/app/assets/stylesheets/client/checkout_payment.css.scss
@@ -0,0 +1,156 @@
+@import "client/common.css.scss";
+#checkoutPaymentScreen {
+
+  .payment-wrapper {
+    padding:10px 30px;
+  }
+
+  p {
+    font-size:12px;
+    margin:0;
+  }
+
+  .payment-prompt {
+    color:white;
+    line-height:125%;
+  }
+
+  h2 {
+    color:white;
+    background-color:#4d4d4d;
+    font-weight:normal;
+    margin: 0 0 30px 0;
+    font-size:14px;
+    padding-left:10px;
+
+    &.shipping-address-label {
+      //margin-top:10px;
+    }
+  }
+
+  .field {
+    margin-bottom:5px;
+  }
+
+  form.payment-info {
+    width: 100%;
+    display:block;
+    background-color:#262626;
+
+    input[type="text"] {
+      width: 90%;
+    }
+
+    .row {
+
+      margin-top:20px;
+      width:100%;
+      clear:both;
+    }
+    .left-side, .right-side {
+      float: left;
+      width: 50%;
+      @include border_box_sizing;
+    }
+
+    .left-side {
+      border-width:0 1px 0 0;
+      border-style:solid;
+      border-color:#333;
+    }
+
+    .jamkazam-account-signup {
+      .account-label {
+        padding-top: 4px;
+        width: 30%;
+        float: left;
+        text-align: left;
+        padding-left: 5px;
+        @include border_box_sizing;
+      }
+
+      .account-value {
+        width: 70%;
+        text-align: left;
+        float: left;
+        @include border_box_sizing;
+      }
+    }
+
+    .hint {
+      font-size:12px;
+    }
+    .billing-address {
+
+      .billing-label {
+        padding-top: 4px;
+        width: 35%;
+        float: left;
+        text-align: left;
+        padding-left: 5px;
+        @include border_box_sizing;
+      }
+
+      .billing-value {
+        width: 65%;
+        text-align: left;
+        float: left;
+        @include border_box_sizing;
+      }
+    }
+
+    .payment-method {
+
+
+      .card-label {
+        padding-top: 4px;
+        width: 35%;
+        float: left;
+        text-align: left;
+        padding-left: 5px;
+        @include border_box_sizing;
+        position:relative;
+      }
+
+      .card-value {
+        width: 65%;
+        text-align: left;
+        float: left;
+        @include border_box_sizing;
+      }
+
+      .save-card-checkbox {
+        float:left;
+        display:block;
+        margin-right:5px;
+      }
+    }
+
+    .shipping-address {
+
+      .shipping-as-billing {
+        float:left;
+        display:block;
+        margin-right:5px;
+      }
+
+      .divBillingHelper {
+        padding-top: 2px;
+      }
+
+      .shipping-label {
+        padding-top: 8px;
+        width: 30%;
+        float: left;
+        text-align: right;
+        margin-right: 5px;
+      }
+
+      .shipping-value {
+        width: 65%;
+        text-align: left;
+        float: left;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/web/app/assets/stylesheets/client/client.css b/web/app/assets/stylesheets/client/client.css
index b43f7454f..73fbaf592 100644
--- a/web/app/assets/stylesheets/client/client.css
+++ b/web/app/assets/stylesheets/client/client.css
@@ -54,6 +54,7 @@
  *= require ./shoppingCart
  *= require ./checkout
  *= require ./checkout_signin
+ *= require ./checkout_payment
  *= require ./genreSelector
  *= require ./sessionList
  *= require ./searchResults
diff --git a/web/app/views/clients/_checkout_payment.html.slim b/web/app/views/clients/_checkout_payment.html.slim
index 9490df73c..6554a1564 100644
--- a/web/app/views/clients/_checkout_payment.html.slim
+++ b/web/app/views/clients/_checkout_payment.html.slim
@@ -5,88 +5,185 @@ div layout="screen" layout-id="checkout_payment" id="checkoutPaymentScreen" clas
       h1 check out
       = render "screen_navigation"
     .content-body
+      #order_error.error.hidden
       .content-body-scroller
-        .checkout-signin
+        .content-wrapper
           .checkout-navigation-bar
+          .payment-wrapper
+            p.payment-prompt
+              | Please enter you billing address and payment information below. You will not be billed for your first JamTrack, which is 100% free.&nbsp;
+              | But we need this data to prevent fraud/abuse of those who would create multiple accounts to collect multiple free JamTracks.&nbsp;
+              | You will not be billed for any charges of any kind without your explicit authorization.&nbsp;
+              | There are no "hidden" charges or fees, thank you!
 
-          .content-holder
-            .already-signed-in
-              h3 YOU ARE ALREADY LOGGED IN
-              p.carry-on-prompt
-                | You can move on to the next step of checkout.
-              .actions
-                a.btnNext.button-orange NEXT
-
-            .left-side
-              h3 ALREADY A MEMBER OF THE JAMKAZAM COMMUNITY?
-              .left-side-content
-                .signin-form
-                  .signin-prompt Sign in using your email address:
-                  .clearall
-                  form.signin-form
-                    .input-elements
-                      .out
-                        label.inline Email:
-                        .email.field
-                          input name='email' autofocus="true" type="text"
-                      .out
-                        label.inline Password:
-                        .password.field
-                          input name='password' autofocus="true" type="password"
-                      .login-error-msg Invalid login
+            form class="payment-info" id="checkout-payment-info"
+              .row
+                .left-side
+                  .billing-address
+                    h2.billing-caption BILLING ADDRESS
+                    #divBillingFirstName.field
+                      .billing-label
+                        label for="billing-first-name" First Name:
+                      .billing-value
+                        input type="text" id="billing-first-name"
+                      .clearall
+                    #divBillingLastName.field
+                      .billing-label
+                        label for="billing-last-name" Last Name:
+                      .billing-value
+                        input type="text" id="billing-last-name"
+                      .clearall
+                    #divBillingAddress1.field
+                      .billing-label
+                        label for="billing-address1" Address 1:
+                      .billing-value
+                        input type="text" id="billing-address1"
+                      .clearall
+                    #divBillingAddress2.field
+                      .billing-label
+                        label for="billing-address2" Address 2:
+                      .billing-value
+                        input type="text" id="billing-address2"
+                      .clearall
+                    #divBillingCity.field
+                      .billing-label
+                        label for="billing-city" City:
+                      .billing-value
+                        input type="text" id="billing-city"
+                      .clearall
+                    #divBillingState.field
+                      .billing-label
+                        label for="billing-state" State/Region:
+                      .billing-value
+                        input type="text" id="billing-state"
+                      .clearall
+                    #divBillingZip.field
+                      .billing-label
+                        label for="billing-zip" Zip:
+                      .billing-value
+                        input type="text" id="billing-zip"
+                      .clearall
+                    #divBillingCountry.field
+                      .billing-label
+                        label for="billing-country" Country:
+                      .billing-value
+                        input type="text" id="billing-country"
+                      .clearall
+                .right-side
+                  .payment-method
+                    h2.payment-method-caption PAYMENT METHOD
+                    #divCardName.field
+                      .card-label
+                        label for="card-name" Name of Card:
+                      .card-value
+                        input type="text" id="card-name"
+                      .clearall
+                    #divCardNumber.field
+                      .card-label
+                        label for="card-number" Card Number:
+                      .card-value
+                        input type="text" id="card-number"
+                      .clearall
+                    #divCardExpiry.field
+                      .card-label Expiration Date:
+                      .card-value
+                        =date_select("card", "expire-date", use_two_digit_numbers: true, discard_day: true, :start_year => Time.now.year, :end_year => Time.now.year + 18, :order => [:month, :day, :year], :default => -25.years.from_now, :html => {:class => "account-profile-birthdate", :id => "card-expiry"})
+                      .clearall
+                    #divCardVerify.field
+                      .card-label
+                        label for="card-verify"
+                          | CVV Code:
+                          .hint.cvv
+                            | (back-of-card)
+                      .card-value
+                        input type="text" id="card-verify"
+                      .clearall
+                    .card-label
+                    .card-value
+                      .save-card-checkbox.ichecbuttons
+                        input type="checkbox" id="save-card" name="save-card" checked="checked"
+                      .divSaveCardHelper
+                        label for="save-card" Save card for future use
+                      .clearall
+                    .clearall
+                .clearall
+              .row
+                .left-side
+                  .shipping-address
+                    h2.shipping-address-label SHIPPING ADDRESS
+                    .shipping-as-billing.ichecbuttons
+                      input type="checkbox" id="shipping-as-billing" name="shipping-as-billing" checked="checked"
+                    .divBillingHelper
+                      label for="shipping-as-billing" Same as billing address
+                    .clearall
+                    .shipping-address-detail.hidden
+                      #divShippingFirstName
+                        .shipping-label
+                          label for="shipping-first-name" First Name:
+                        .shipping-value
+                          input type="text" id="shipping-first-name"
+                        .clearall
+                      #divShippingLastName
+                        .shipping-label
+                          label for="shipping-last-name" Last Name:
+                        .shipping-value
+                          input type="text" id="shipping-last-name"
+                        .clearall
+                      #divShippingAddress1
+                        .shipping-label
+                          label for="shipping-address1" Address 1:
+                        .shipping-value
+                          input type="text" id="shipping-address1"
+                        .clearall
+                      .shipping-label
+                        label for="shipping-address2" Address 2:
+                      .shipping-value
+                        input type="text" id="shipping-address2"
+                      .clearall
+                      #divShippingCity
+                        .shipping-label
+                          label for="shipping-city" City:
+                        .shipping-value
+                          input type="text" id="shipping-city"
+                        .clearall
+                      #divShippingState
+                        .shipping-label
+                          label for="shipping-state" State/Region:
+                        .shipping-value
+                          input type="text" id="shipping-state"
+                        .clearall
+                      #divShippingZip
+                        .shipping-label
+                          label for="shipping-zip" Zip:
+                        .shipping-value
+                          input type="text" id="shipping-zip"
+                        .clearall
+                      #divShippingCountry
+                        .shipping-label
+                          label for="shipping-country" Country:
+                        .shipping-value
+                          input type="text" id="shipping-country"
+                        .clearall
+                .right-side
+                  .jamkazam-account-signup
+                    h2.jamkazam-account-caption JAMKAZAM ACCOUNT
+                    #divJamKazamEmail.field
+                      .account-label
+                        label.account-label for="email" Email:
+                      .account-value
+                        input name="email" type="text"
+                    #divJamKazamPassword.field
+                      .account-label
+                        label for="email" Password:
+                      .account-value
+                        input name="password" type="password"
+                .clearall
 
 
-                    br clear='all'
+            .clearall
+              .action-bar
 
-                    .actions
-                      small
-                        a.forgot-password href='/request_reset_password' Forgot Password?
-                      = link_to "SIGN IN", '#', class: 'button-orange signin-submit'
-
-
-                p.facebook-prompt Or sign in using Facebook:
-                = link_to image_tag("content/button_facebook_signin.png", {:width => 249, :height => 46}), '/auth/facebook', class: "signin-facebook"
-            .right-side
-              h3 NOT A MEMBER YET?
-
-              p.signup-later-prompt
-                | Thousands of musicians are now registered members of JamKazam.  Click the NEXT button below to join us, and welcome!
-
-              .actions
-                a.btnNext.button-orange NEXT
-
-script type='text/template' id='template-checkout-navigation'
-  .checkout-navigation
-    .nav-signin
-      = "{% if (data.current == 1) { %}"
-      .nav-text.selected
-        .badge-number 1
-        | Sign In
-      = "{% } else { %}"
-      .nav-text
-        .badge-number.disabled 1
-        | Sign In
-      = "{% } %}"
-      .clearall
-    .nav-payment-info
-      = "{% if (data.current == 2) { %}"
-      .nav-text.selected
-        .badge-number 2
-        | Address & Payment
-      = "{% } else { %}"
-      .nav-text
-        .badge-number.disabled 2
-        | Address & Payment
-      = "{% } %}"
-      .clearall
-    .nav-place-order
-      = "{% if (data.current == 3) { %}"
-      .nav-text.selected
-        .badge-number 3
-        | Place Order
-      = "{% } else { %}"
-      .nav-text
-        .badge-number.disabled 3
-        | Place Order
-      = "{% } %}"
-    .clearall
+                .right
+                  a href="#" id="payment-info-help" class="button-grey" HELP
+                  a href="#" id="payment-info-next" class="button-orange" NEXT
+                .clearall
diff --git a/web/app/views/clients/index.html.erb b/web/app/views/clients/index.html.erb
index 7306acd61..82e1d18ba 100644
--- a/web/app/views/clients/index.html.erb
+++ b/web/app/views/clients/index.html.erb
@@ -40,6 +40,7 @@
 <%= render "jamtrack" %>
 <%= render "shopping_cart" %>
 <%= render "checkout_signin" %>
+<%= render "checkout_payment" %>
 <%= render "order" %>
 <%= render "feed" %>
 <%= render "bands" %>
@@ -239,8 +240,11 @@
             var checkoutSignInScreen = new JK.CheckoutSignInScreen(JK.app);
             checkoutSignInScreen.initialize();
 
-            var OrderScreen = new JK.OrderScreen(JK.app);
-            OrderScreen.initialize();
+            var checkoutPaymentScreen = new JK.CheckoutPaymentScreen(JK.app);
+          checkoutPaymentScreen.initialize();
+
+           // var OrderScreen = new JK.OrderScreen(JK.app);
+          //  OrderScreen.initialize();
 
             var findMusicianScreen = new JK.FindMusicianScreen(JK.app);
             findMusicianScreen.initialize(JK.TextMessageDialogInstance);