diff --git a/erpnext/templates/includes/cart.js b/erpnext/templates/includes/cart.js
index d56721d..cbb9390 100644
--- a/erpnext/templates/includes/cart.js
+++ b/erpnext/templates/includes/cart.js
@@ -70,6 +70,38 @@
 				},
 			});
 		});
+		
+		$(".cart-items").on('click', '.number-spinner button', function () {  
+			var btn = $(this),
+				oldValue = btn.closest('.number-spinner').find('input').val().trim(),
+				newVal = 0;
+	
+			if (btn.attr('data-dir') == 'up') {
+				console.log(oldValue);
+				newVal = parseInt(oldValue) + 1;
+			} else {
+				if (oldValue > 1) {
+					newVal = parseInt(oldValue) - 1;
+				}
+			}
+			btn.closest('.number-spinner').find('input').val(newVal);
+			var item_code = btn.closest('.number-spinner').find('input').attr("data-item-code"); 
+			frappe.freeze();
+			shopping_cart.update_cart({
+				item_code: item_code,
+				qty: newVal,
+				with_items: 1,
+				btn: this,
+				callback: function(r) {
+					frappe.unfreeze();
+					if(!r.exc) {
+						$(".cart-items").html(r.message.items);
+						$(".cart-tax-items").html(r.message.taxes);
+						$(".cart-icon").hide();
+					}
+				},
+			});
+		});
 	},
 	
 	render_tax_row: function($cart_taxes, doc, shipping_rules) {
diff --git a/erpnext/templates/includes/cart/cart_dropdown.html b/erpnext/templates/includes/cart/cart_dropdown.html
index 18148ad..071b281 100644
--- a/erpnext/templates/includes/cart/cart_dropdown.html
+++ b/erpnext/templates/includes/cart/cart_dropdown.html
@@ -11,8 +11,8 @@
 	</div>
 	
 	{% if doc.items %}
-	<div class="cart-items">
-		{% include "templates/includes/cart/cart_items.html" %}
+	<div class="cart-items-dropdown">
+		{% include "templates/includes/cart/cart_items_dropdown.html" %}
 	</div>
 	<div class="checkout-btn">
 	<a href="/cart" class="btn btn-block btn-primary">{{ _("Checkout") }}</a>
diff --git a/erpnext/templates/includes/cart/cart_items.html b/erpnext/templates/includes/cart/cart_items.html
index 976467d..b2e6858 100644
--- a/erpnext/templates/includes/cart/cart_items.html
+++ b/erpnext/templates/includes/cart/cart_items.html
@@ -1,4 +1,5 @@
 {% from "erpnext/templates/includes/order/order_macros.html" import item_name_and_description %}
+{% from "erpnext/templates/includes/order/order_macros.html" import item_name_and_description_cart %}
 
 {% for d in doc.items %}
 <div class="row checkout">
@@ -6,10 +7,21 @@
         {{ item_name_and_description(d) }}
     </div>
     <div class="col-sm-2 col-xs-3 text-right col-qty">
-        <span style="max-width: 50px; display: inline-block">
+        <span style="display: inline-block">
+			<div class="input-group number-spinner">
+                <span class="input-group-btn">
+                    <button class="btn btn-default cart-btn" data-dir="dwn">
+                        –</button>
+                </span>
             <input class="form-control text-right cart-qty"
             value = "{{ d.get_formatted('qty') }}"
-            data-item-code="{{ d.item_code }}"></span>    	
+            data-item-code="{{ d.item_code }}">
+                <span class="input-group-btn">
+                    <button class="btn btn-default cart-btn" data-dir="up" style="margin-left:-2px;">
+                        +</button>
+                </span>
+			</div>
+		</span>    	
 	</div>
     <div class="col-sm-2 col-xs-3 text-right col-amount">
         {{ d.get_formatted("amount") }}
@@ -17,14 +29,4 @@
             _("Rate: {0}").format(d.get_formatted("rate")) }}</p>
     </div>
 </div>
-
-<div class="row cart-dropdown">
-    <div class="col-sm-8 col-xs-8 col-name-description">
-        {{ item_name_and_description(d) }}
-    </div>
-    <div class="col-sm-4 col-xs-4 text-right col-amount">
-        {{ d.get_formatted("amount") }}
-
-    </div>
-</div>
 {% endfor %}
\ No newline at end of file
diff --git a/erpnext/templates/includes/cart/cart_items_dropdown.html b/erpnext/templates/includes/cart/cart_items_dropdown.html
new file mode 100644
index 0000000..9a3dbf8
--- /dev/null
+++ b/erpnext/templates/includes/cart/cart_items_dropdown.html
@@ -0,0 +1,13 @@
+{% from "erpnext/templates/includes/order/order_macros.html" import item_name_and_description_cart %}
+
+{% for d in doc.items %}
+<div class="row cart-dropdown">
+    <div class="col-sm-8 col-xs-8 col-name-description">
+        {{ item_name_and_description_cart(d) }}
+    </div>
+    <div class="col-sm-4 col-xs-4 text-right col-amount">
+        {{ d.get_formatted("amount") }}
+
+    </div>
+</div>
+{% endfor %}
\ No newline at end of file
diff --git a/erpnext/templates/includes/navbar/navbar_items.html b/erpnext/templates/includes/navbar/navbar_items.html
index 9cdbd98..c7af2fd 100644
--- a/erpnext/templates/includes/navbar/navbar_items.html
+++ b/erpnext/templates/includes/navbar/navbar_items.html
@@ -1,12 +1,12 @@
 {% extends 'frappe/templates/includes/navbar/navbar_items.html' %}
 
 {% block navbar_right_extension %}
-	<li class="dropdown shopping-cart">
+	<li class="shopping-cart">
 		<div class="cart-icon small">
 			<a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin">
 				Cart <span class="badge-wrapper" id="cart-count"></span>
 			</a>
-			<div class="dropdown-menu shopping-cart-menu"></div>
+			<div id="cart-overlay" class="dropdown-menu shopping-cart-menu"></div>
 		</div>
 	 </li>
 {% endblock %}
\ No newline at end of file
diff --git a/erpnext/templates/includes/order/order_macros.html b/erpnext/templates/includes/order/order_macros.html
index 3f8affe..e56f88b 100644
--- a/erpnext/templates/includes/order/order_macros.html
+++ b/erpnext/templates/includes/order/order_macros.html
@@ -12,15 +12,50 @@
             <div class="text-muted small item-description">{{ d.description }}</div>
         </div>
     </div>
-
+{% endmacro %}
+{% macro item_name_and_description_cart(d) %}
     <div class="row item_name_dropdown">
         <div class="col-xs-4 col-sm-4 order-image-col">
             <div class="order-image">
-              <span class="cart-count-badge pull-right small"> {{ d.get_formatted('qty') }} </span>{{ product_image_square(d.image) }}
+             {{ product_image_square(d.image) }}
             </div>
         </div>
         <div class="col-xs-8 col-sm-8">
-            {{ d.item_code }}
+           {{ d.item_code|truncate(25) }}			
+			<div class="input-group number-spinner">
+                <span class="input-group-btn">
+                    <button class="btn btn-default cart-btn" data-dir="dwn">
+                        –</button>
+                </span>
+            <input class="form-control text-right cart-qty"
+            value = "{{ d.get_formatted('qty') }}"
+            data-item-code="{{ d.item_code }}">
+                <span class="input-group-btn">
+                    <button class="btn btn-default cart-btn" data-dir="up">
+                        +</button>
+                </span>
+			</div>
         </div>
     </div>
-{% endmacro %}
\ No newline at end of file
+{% endmacro %}
+
+<script>
+frappe.ready(function() {
+	$(".cart-items-dropdown").on('click', '.number-spinner button', function () {    
+	var btn = $(this),
+		oldValue = btn.closest('.number-spinner').find('input').val().trim(),
+		newVal = 0;
+	
+	if (btn.attr('data-dir') == 'up') {
+		newVal = parseInt(oldValue) + 1;
+	} else {
+		if (oldValue > 1) {
+			newVal = parseInt(oldValue) - 1;
+		} else {
+			newVal = 1;
+		}
+	}
+	btn.closest('.number-spinner').find('input').val(newVal);
+});
+}
+</script>
\ No newline at end of file
diff --git a/erpnext/templates/pages/cart.html b/erpnext/templates/pages/cart.html
index 35e4989..7f6bf01 100644
--- a/erpnext/templates/pages/cart.html
+++ b/erpnext/templates/pages/cart.html
@@ -30,7 +30,7 @@
 				<div class="col-sm-8 col-xs-6 h6 text-uppercase">
 				{{ _("Item") }}
 				</div>
-				<div class="col-sm-2 col-xs-3 text-right h6 text-uppercase">
+				<div class="col-sm-2 col-xs-3 text-center h6 text-uppercase">
 				{{ _("Qty") }}
 				</div>
 				<div class="col-sm-2 col-xs-3 text-right h6 text-uppercase">