diff --git a/erpnext/public/css/erpnext.css b/erpnext/public/css/erpnext.css
index e524a7c..7259580 100644
--- a/erpnext/public/css/erpnext.css
+++ b/erpnext/public/css/erpnext.css
@@ -1,120 +1,97 @@
 .erpnext-footer {
-	margin: 11px auto;
-	text-align: center;
+  margin: 11px auto;
+  text-align: center;
 }
-
 .show-all-reports {
-	margin-top: 5px;
-	font-size: 11px;
+  margin-top: 5px;
+  font-size: 11px;
 }
-
 /* toolbar */
 .toolbar-splash {
-	width: 32px;
-	height: 32px;
-	margin: -10px auto;
+  width: 32px;
+  height: 32px;
+  margin: -10px auto;
 }
-
 /* pos */
-.pos {
-}
-
 .pos-item {
-	display: inline-block;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	cursor: pointer;
-	padding: 5px;
-	height: 0px;
-	padding-bottom: 38%;
-	width: 30%;
-	margin: 1.6%;
-	border: 1px solid #d1d8dd;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  padding: 5px;
+  height: 0px;
+  padding-bottom: 38%;
+  width: 30%;
+  margin: 1.6%;
+  border: 1px solid #d1d8dd;
 }
-
 .pos-item-text {
-	padding: 0px 5px;
+  padding: 0px 5px;
 }
-
 .pos-item .item-code {
-	margin-bottom: 0px;
+  margin-bottom: 0px;
 }
-
 .pos-item .no-image {
-	background-color: #fafbfc;
-	border: 1px dashed #d1d8dd;
+  background-color: #fafbfc;
+  border: 1px dashed #d1d8dd;
 }
-
 .pos-item-image {
-	padding-bottom: 100%;
-	background-size: cover;
-	border: 1px solid transparent;
+  padding-bottom: 100%;
+  background-size: cover;
+  border: 1px solid transparent;
 }
-
 .pos-item-area {
-	border: 1px solid #d1d8dd;
-	border-top: none;
+  border: 1px solid #d1d8dd;
+  border-top: none;
 }
-
 .pos-item-toolbar {
-	padding: 10px 0px;
-	border-bottom: 1px solid #d1d8dd;
+  padding: 10px 0px;
+  border-bottom: 1px solid #d1d8dd;
 }
-
 .item-list-area {
-	padding: 15px 0px;
+  padding: 15px 0px;
 }
-
-.pos-toolbar, .pos-bill-toolbar {
-	padding: 10px 0px;
-	border-bottom: 1px solid #d1d8dd;
-	height: 51px;
+.pos-toolbar,
+.pos-bill-toolbar {
+  padding: 10px 0px;
+  border-bottom: 1px solid #d1d8dd;
+  height: 51px;
 }
-
 .pos-item-toolbar .form-group {
-	margin-bottom: 0px;
+  margin-bottom: 0px;
 }
-
 .pos-bill-wrapper {
-	border: 1px solid #d1d8dd;
-	border-top: none;
-	margin-right: -1px;
+  border: 1px solid #d1d8dd;
+  border-top: none;
+  margin-right: -1px;
 }
-
 .pos-bill {
-	margin-left: -15px;
-	margin-right: -15px;
+  margin-left: -15px;
+  margin-right: -15px;
 }
-
 .pos-bill-row {
-	margin: 0px;
-	padding: 7px 0px;
-	border-top: 1px solid #d1d8dd;
+  margin: 0px;
+  padding: 7px 0px;
+  border-top: 1px solid #d1d8dd;
 }
-
 .pos-bill-header {
-	border: none !important;
-	background-color: #f5f7fa;
+  border: none !important;
+  background-color: #f5f7fa;
 }
-
 .pos-item-qty {
-	display: inline-block;
+  display: inline-block;
 }
-
 .pos-qty-row > div {
-	padding: 5px 0px;
+  padding: 5px 0px;
 }
-
 .pos-qty-btn {
-	margin-top: 3px;
-	cursor: pointer;
-	font-size: 120%;
+  margin-top: 3px;
+  cursor: pointer;
+  font-size: 120%;
 }
-
 .pos .search-area .form-group {
-	max-width: 100% !important;
+  max-width: 100% !important;
 }
-
 .pos .tax-table {
-	margin-bottom: 10px;
+  margin-bottom: 10px;
 }
diff --git a/erpnext/public/css/shopping_cart.css b/erpnext/public/css/shopping_cart.css
deleted file mode 100644
index 5e86972..0000000
--- a/erpnext/public/css/shopping_cart.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.item-main-image {
-	max-width: 100%;
-	margin: auto;
-}
-.web-long-description {
-	font-size: 18px;
-	line-height: 200%;
-}
-.item-stock {
-	margin-bottom: 10px !important;
-}
diff --git a/erpnext/public/css/website.css b/erpnext/public/css/website.css
new file mode 100644
index 0000000..7d02940
--- /dev/null
+++ b/erpnext/public/css/website.css
@@ -0,0 +1,50 @@
+.web-long-description {
+  font-size: 18px;
+  line-height: 200%;
+}
+.item-stock {
+  margin-bottom: 10px !important;
+}
+.product-link {
+  display: block;
+  text-align: center;
+}
+.product-image-wrapper {
+  max-width: 300px;
+  margin: auto;
+  border-radius: 4px;
+}
+@media (max-width: 767px) {
+  .product-image {
+    height: 0px;
+    padding: 0px 0px 100%;
+    overflow: hidden;
+  }
+}
+.product-image-square {
+  width: 100%;
+  height: 0;
+  padding: 50% 0px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center top;
+  border-radius: 0.5em;
+}
+.product-image.missing-image {
+  width: 100%;
+  height: 0;
+  padding: 50% 0px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center top;
+  border-radius: 0.5em;
+  border: 1px dashed #d1d8dd;
+  position: relative;
+}
+.product-image.missing-image .octicon {
+  font-size: 32px;
+  color: #d1d8dd;
+}
+.product-text {
+  padding: 15px 0px;
+}
diff --git a/erpnext/public/js/shopping_cart.js b/erpnext/public/js/shopping_cart.js
index 0c718b0..f3852df 100644
--- a/erpnext/public/js/shopping_cart.js
+++ b/erpnext/public/js/shopping_cart.js
@@ -45,22 +45,16 @@
 
 	set_cart_count: function() {
 		var cart_count = getCookie("cart_count");
-		var $cart = $("#website-post-login").find('[data-label="Cart"]');
+		var $cart = $('.dropdown [data-label="Cart"]');
 		var $badge = $cart.find(".badge");
-		var $cog = $("#website-post-login").find(".dropdown-toggle");
-		var $cog_count = $cog.find(".cart-count");
 		if(cart_count) {
 			if($badge.length === 0) {
-				var $badge = $('<span class="badge pull-right"></span>').prependTo($cart.find("a"));
+				var $badge = $('<span class="badge pull-right"></span>')
+					.prependTo($cart.find("a").addClass("badge-hover"));
 			}
 			$badge.html(cart_count);
-			if($cog_count.length === 0) {
-				var $cog_count = $('<sup class="cart-count"></span>').insertAfter($cog.find(".icon-cog"));
-			}
-			$cog_count.html(cart_count);
 		} else {
 			$badge.remove();
-			$cog_count.remove();
 		}
 	}
 });
diff --git a/erpnext/public/less/erpnext.less b/erpnext/public/less/erpnext.less
new file mode 100644
index 0000000..dde04a4
--- /dev/null
+++ b/erpnext/public/less/erpnext.less
@@ -0,0 +1,121 @@
+.erpnext-footer {
+	margin: 11px auto;
+	text-align: center;
+}
+
+.show-all-reports {
+	margin-top: 5px;
+	font-size: 11px;
+}
+
+/* toolbar */
+.toolbar-splash {
+	width: 32px;
+	height: 32px;
+	margin: -10px auto;
+}
+
+/* pos */
+.pos {
+}
+
+.pos-item {
+	display: inline-block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	cursor: pointer;
+	padding: 5px;
+	height: 0px;
+	padding-bottom: 38%;
+	width: 30%;
+	margin: 1.6%;
+	border: 1px solid #d1d8dd;
+}
+
+.pos-item-text {
+	padding: 0px 5px;
+}
+
+.pos-item .item-code {
+	margin-bottom: 0px;
+}
+
+.pos-item .no-image {
+	background-color: #fafbfc;
+	border: 1px dashed #d1d8dd;
+}
+
+.pos-item-image {
+	padding-bottom: 100%;
+	background-size: cover;
+	border: 1px solid transparent;
+}
+
+.pos-item-area {
+	border: 1px solid #d1d8dd;
+	border-top: none;
+}
+
+.pos-item-toolbar {
+	padding: 10px 0px;
+	border-bottom: 1px solid #d1d8dd;
+}
+
+.item-list-area {
+	padding: 15px 0px;
+}
+
+.pos-toolbar, .pos-bill-toolbar {
+	padding: 10px 0px;
+	border-bottom: 1px solid #d1d8dd;
+	height: 51px;
+}
+
+.pos-item-toolbar .form-group {
+	margin-bottom: 0px;
+}
+
+.pos-bill-wrapper {
+	border: 1px solid #d1d8dd;
+	border-top: none;
+	margin-right: -1px;
+}
+
+.pos-bill {
+	margin-left: -15px;
+	margin-right: -15px;
+}
+
+.pos-bill-row {
+	margin: 0px;
+	padding: 7px 0px;
+	border-top: 1px solid #d1d8dd;
+}
+
+.pos-bill-header {
+	border: none !important;
+	background-color: #f5f7fa;
+}
+
+.pos-item-qty {
+	display: inline-block;
+}
+
+.pos-qty-row > div {
+	padding: 5px 0px;
+}
+
+.pos-qty-btn {
+	margin-top: 3px;
+	cursor: pointer;
+	font-size: 120%;
+}
+
+.pos .search-area .form-group {
+	max-width: 100% !important;
+}
+
+.pos .tax-table {
+	margin-bottom: 10px;
+}
+
diff --git a/erpnext/public/less/website.less b/erpnext/public/less/website.less
new file mode 100644
index 0000000..c42cb4c
--- /dev/null
+++ b/erpnext/public/less/website.less
@@ -0,0 +1,53 @@
+@border-color: #d1d8dd;
+
+.web-long-description {
+	font-size: 18px;
+	line-height: 200%;
+}
+.item-stock {
+	margin-bottom: 10px !important;
+}
+
+.product-link {
+	display: block;
+	text-align: center;
+}
+
+.product-image-wrapper {
+	max-width: 300px;
+	margin: auto;
+	border-radius: 4px;
+}
+
+@media (max-width: 767px) {
+	.product-image {
+		height: 0px;
+		padding: 0px 0px 100%;
+		overflow: hidden;
+	}
+}
+
+.product-image-square {
+	width: 100%;
+	height: 0;
+	padding: 50% 0px;
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center top;
+	border-radius: 0.5em;
+}
+
+.product-image.missing-image {
+	.product-image-square;
+	border: 1px dashed @border-color;
+	position: relative;
+}
+
+.product-image.missing-image .octicon {
+	font-size: 32px;
+	color: @border-color;
+}
+
+.product-text {
+	padding: 15px 0px;
+}