diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css
index 064003b4..74671e1a 100755
--- a/datacenterlight/static/datacenterlight/css/landing-page.css
+++ b/datacenterlight/static/datacenterlight/css/landing-page.css
@@ -544,6 +544,7 @@ h6 {
     font-size: 20px;
     text-align: right;
 }
+
 .price-calc-section .text .section-heading::before{
     content: "";
     position: absolute;
@@ -592,10 +593,15 @@ h6 {
     justify-content: center;
     align-items: center;
 }
+
 .price-calc-section .card .description span{
     font-size: 20px;
     margin-left: 4px;
 }
+.price-calc-section .card .description input{
+   font-size: 20px;
+    text-align: center;
+}
 .price-calc-section .card .description i{
     color: #29427A;
     cursor: pointer;
diff --git a/datacenterlight/static/datacenterlight/js/main.js b/datacenterlight/static/datacenterlight/js/main.js
index 37068fcf..7761b248 100644
--- a/datacenterlight/static/datacenterlight/js/main.js
+++ b/datacenterlight/static/datacenterlight/js/main.js
@@ -94,21 +94,27 @@
             var data = $(this).data('minus');
             
             if(cardPricing[data].value > cardPricing[data].min){
-                cardPricing[data].value --;
+                cardPricing[data].value = Number(cardPricing[data].value) - cardPricing[data].interval;
             }
             _fetchPricing();
         });
         $('.fa-plus-circle.right').click(function(event){
             var data = $(this).data('plus');
             if(cardPricing[data].value < cardPricing[data].max){
-                cardPricing[data].value = cardPricing[data].value + cardPricing[data].interval;
+                cardPricing[data].value = Number(cardPricing[data].value) + cardPricing[data].interval;
             }
             _fetchPricing();
         });
+
+        $('.input-price').change(function(){
+            var data = $(this).attr("name");
+            cardPricing[data].value = $('input[name='+data+']').val();
+            _fetchPricing();
+        });
     }
     function _fetchPricing(){
         Object.keys(cardPricing).map(function(element){
-            $('#'+cardPricing[element].id).text(cardPricing[element].value);
+            //$('#'+cardPricing[element].id).val(cardPricing[element].value);
             $('input[name='+element+']').val(cardPricing[element].value);
         });
         _calcPricing();
@@ -116,6 +122,7 @@
 
     function _calcPricing(){
         var total = (cardPricing['cpu'].value * 5) + (2* cardPricing['ram'].value) + (0.6* cardPricing['storage'].value) 
+        console.log(total);
         total = parseFloat(total.toFixed(2));
 
         $("#total").text(total);
diff --git a/datacenterlight/templates/datacenterlight/pricing.html b/datacenterlight/templates/datacenterlight/pricing.html
index bd4945e7..1674f82e 100644
--- a/datacenterlight/templates/datacenterlight/pricing.html
+++ b/datacenterlight/templates/datacenterlight/pricing.html
@@ -123,17 +123,20 @@
                   </div>
                   <div class="description">
                      <i class="fa fa-minus-circle left" data-minus="cpu" aria-hidden="true"></i>
-                     <span id="coreValue">1</span><span> Core</span> 
+                     <input class="input-price" type="number"  min="1" max="42" id="coreValue" name="cpu">
+                     <span> Core</span> 
                      <i class="fa fa-plus-circle right" data-plus="cpu"  aria-hidden="true"></i>
                   </div>
                   <div class="description">
                    <i class="fa fa-minus-circle left" data-minus="ram" aria-hidden="true"></i>
-                    <span id="ramValue">2</span><span> GB RAM</span>
+                    <input id="ramValue" class="input-price" type="number"  min="2" max="200"  name="ram">
+                    <span> GB RAM</span>
                     <i class="fa fa-plus-circle right" data-plus="ram"  aria-hidden="true"></i>
                   </div>
                   <div class="description">
                   	<i class="fa fa-minus-circle left" data-minus="storage" aria-hidden="true"></i>
-                    <span id="storageValue">15</span><span>{% trans "GB Storage (SSD)" %}</span>
+                    <input id="storageValue" class="input-price" type="number"  min="10" max="500" step="10" name="storage">
+                    <span>{% trans "GB Storage (SSD)" %}</span>
                      <i class="fa fa-plus-circle right" data-plus="storage"  aria-hidden="true"></i>
                   </div>
                  
@@ -145,9 +148,6 @@
                         {% endfor %}
                   	</select>
                   </div>
-                  <input type="hidden" name="cpu">
-                  <input type="hidden" name="ram">
-                  <input type="hidden" name="storage">
                   <input type="hidden" name="total">
                    <!--<div class="description check-ip">
                   	<input type="checkbox" name="ipv6"> Ipv6 Only<br>