diff --git a/website/templates/html/outer.html b/website/templates/html/outer.html
index ec71476..cc1181c 100644
--- a/website/templates/html/outer.html
+++ b/website/templates/html/outer.html
@@ -3,8 +3,17 @@
 {% block body %}
 	<div class="container">
 		<div class="pull-right" style="margin:4px;" id="user-tools">
+			<a href="cart" title="Shopping Cart"><i class="icon-shopping-cart"></i> 
+				<span class="cart-count"></span></a> |
 			<a id="login-link" href="login">Login</a>
 		</div>
+		<div class="pull-right hide" style="margin:4px;" id="user-tools-post-login">
+			<a href="profile" title="My Profile" id="user-full-name"></a> |
+			<a href="account" title="My Account">My Account</a> |
+			<a href="cart" title="Shopping Cart"><i class="icon-shopping-cart"></i> 
+				<span class="cart-count"></span></a> |
+			<a href="server.py?cmd=web_logout" title="Sign Out"><i class="icon-signout"></i></a>
+		</div>
 		<div class="clearfix"></div>
 		{% if banner_html %}<div class="row" style="margin-top: 30px;">
 			<div class="col col-lg-12">{{ banner_html }}</div>
diff --git a/website/templates/html/product_in_list.html b/website/templates/html/product_in_list.html
index e9752b3..14f020b 100644
--- a/website/templates/html/product_in_list.html
+++ b/website/templates/html/product_in_list.html
@@ -1,4 +1,5 @@
-<div class="col col-lg-3">
+<!-- TODO product listing -->
+<div class="col col-lg-12">
 	<div style="height: 120px; overflow: hidden;">
 		<a href="{{ page_name }}">
 		{%- if website_image -%}
diff --git a/website/templates/html/product_page.html b/website/templates/html/product_page.html
index 263159f..ac1af5a 100644
--- a/website/templates/html/product_page.html
+++ b/website/templates/html/product_page.html
@@ -29,14 +29,18 @@
 			</div>
 			<div class="col col-lg-6">
 				<h3 itemprop="name" style="margin-top: 0px;">{{ item_name }}</h3>
-				<p class="help">Item Code: {{ name }}</p>
+				<p class="help">Item Code: <span itemprop="productID">{{ name }}</span></p>
 				<h4>Product Description</h4>
 				<div itemprop="description">
 				{{ web_long_description or web_short_description or 
 					"[No description given]" }}
 				</div>
-				<div class="item-price hide"></div>
-				<div class="item-stock"></div>
+				<div class="item-price-info" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+					<div class="item-price hide" itemprop="price"></div>
+					<div class="item-stock" itemprop="availablity"></div>
+					<button class="btn btn-primary item-add-to-cart hide">Add to Cart</button>
+					<button class="btn btn-default item-remove-from-cart hide">Remove from Cart</button>
+				</div>
 			</div>
 		</div>
 		{% if obj.doclist.get({"doctype":"Item Website Specification"}) -%}
diff --git a/website/templates/js/cart.js b/website/templates/js/cart.js
new file mode 100644
index 0000000..8746dd6
--- /dev/null
+++ b/website/templates/js/cart.js
@@ -0,0 +1,66 @@
+// ERPNext - web based ERP (http://erpnext.com)
+// Copyright (C) 2012 Web Notes Technologies Pvt Ltd
+// 
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+// 
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+// 
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// js inside blog page
+
+$(document).ready(function() {
+	// make list of items in the cart
+	wn.cart.render();
+});
+
+// shopping cart
+if(!wn.cart) wn.cart = {};
+$.extend(wn.cart, {
+	render: function() {
+		var $cart_wrapper = $("#cart-added-items").empty();
+		if(Object.keys(wn.cart.get_cart()).length) {
+			$('<div class="row">\
+				<div class="col col-lg-10 col-sm-10">\
+					<div class="row">\
+						<div class="col col-lg-3"></div>\
+						<div class="col col-lg-9"><strong>Item Details</strong></div>\
+					</div>\
+				</div>\
+				<div class="col col-lg-2 col-sm-2"><strong>Qty</strong></div>\
+			</div><hr>').appendTo($cart_wrapper);
+			
+			$.each(wn.cart.get_cart(), function(item_code, item) {
+				item.image_html = item.image ?
+					'<div style="height: 120px; overflow: hidden;"><img src="' + item.image + '" /></div>' :
+					'{% include "app/website/templates/html/product_missing_image.html" %}';
+				item.price_html = item.price ? ('<p>@ ' + item.price + '</p>') : "";
+
+				$(repl('<div class="row">\
+					<div class="col col-lg-10 col-sm-10">\
+						<div class="row">\
+							<div class="col col-lg-3">%(image_html)s</div>\
+							<div class="col col-lg-9">\
+								<h4><a href="%(url)s">%(item_name)s</a></h4>\
+								<p>%(description)s</p>\
+							</div>\
+						</div>\
+					</div>\
+					<div class="col col-lg-2 col-sm-2">\
+						<input type="text" placeholder="Qty" value="%(qty)s">\
+						%(price_html)s\
+					</div>\
+				</div><hr>', item)).appendTo($cart_wrapper);
+			});
+		} else {
+			$('<p class="alert">No Items added to cart.</p>').appendTo($cart_wrapper);
+		}
+	}
+});
\ No newline at end of file
diff --git a/website/templates/js/product_page.js b/website/templates/js/product_page.js
index 69e9cd5..338f253 100644
--- a/website/templates/js/product_page.js
+++ b/website/templates/js/product_page.js
@@ -28,16 +28,41 @@
 				if(data.message.price) {
 					$("<h4>").html(data.message.price.ref_currency + " " 
 						+ data.message.price.ref_rate).appendTo(".item-price");
-					$(".item-price").toggle(true);
+					$(".item-price").removeClass("hide");
 				}
 				if(data.message.stock==0) {
-					$(".item-stock").html("<div class='help'>Not in stock</div>")
+					$(".item-stock").html("<div class='help'>Not in stock</div>");
 				}
 				else if(data.message.stock==1) {
 					$(".item-stock").html("<div style='color: green'>\
-						<i class='icon-check'></i> Available (in stock)</div>")
+						<i class='icon-check'></i> Available (in stock)</div>");
 				}
 			}
 		}
-	})
+	});
+	
+	if(wn.cart.get_cart()[$('[itemscope] [itemprop="name"]').text().trim()]) {
+		$(".item-remove-from-cart").removeClass("hide");
+	} else {
+		$(".item-add-to-cart").removeClass("hide");
+	}
+	
+	$("button.item-add-to-cart").on("click", function() {
+		wn.cart.add_to_cart({
+			url: window.location.href,
+			image: $('[itemscope] [itemprop="image"]').attr("src"),
+			item_code: $('[itemscope] [itemprop="name"]').text().trim(),
+			item_name: $('[itemscope] [itemprop="productID"]').text().trim(),
+			description: $('[itemscope] [itemprop="description"]').html().trim(),
+			price: $('[itemscope] [itemprop="price"]').text().trim()
+		});
+		$(".item-add-to-cart").addClass("hide");
+		$(".item-remove-from-cart").removeClass("hide");
+	});
+	
+	$("button.item-remove-from-cart").on("click", function() {
+		wn.cart.remove_from_cart($('[itemscope] [itemprop="name"]').text().trim());
+		$(".item-add-to-cart").removeClass("hide");
+		$(".item-remove-from-cart").addClass("hide");
+	});
 })
\ No newline at end of file
diff --git a/website/templates/pages/cart.html b/website/templates/pages/cart.html
new file mode 100644
index 0000000..31d5084
--- /dev/null
+++ b/website/templates/pages/cart.html
@@ -0,0 +1,17 @@
+{% extends "app/website/templates/html/page.html" %}
+
+{% block javascript %}
+	{% include "app/website/templates/js/cart.js" %}
+{% endblock %}
+
+{% set title="Shopping Cart" %}
+
+{% block content %}
+<div class="col col-lg-12">
+	<h2>Shopping Cart</h2>
+	<hr>
+	<div id="cart-added-items">
+		<!-- list of items in the cart will be generated using javascript -->
+	</div>
+</div>
+{% endblock %}
\ No newline at end of file