diff --git a/erpnext/templates/includes/macros.html b/erpnext/templates/includes/macros.html
index 743daaf..aec201e 100644
--- a/erpnext/templates/includes/macros.html
+++ b/erpnext/templates/includes/macros.html
@@ -118,7 +118,6 @@
 	'text-left': align == 'Left' or is_featured,
 }) -%}
 <div class="card-body {{ align_class }}" style="width:100%">
-
 	<div style="margin-top: 16px; display: flex;">
 		<a href="/{{ item.route or '#' }}">
 			<div class="product-title">{{ title or '' }}</div>
@@ -128,7 +127,9 @@
 		{% endif %}
 		{% if not item.has_variants %}
 			<div class="like-action"
-				data-item-code="{{ item.item_code }}" data-price="{{ item.price }}">
+				data-item-code="{{ item.item_code }}"
+				data-price="{{ item.price }}"
+				data-formatted-price="{{ item.get('formatted_price') }}">
 				<svg class="icon sm">
 					{%- set icon_class = "wished" if item.wished else "not-wished"-%}
 					<use class="{{ icon_class }} wish-icon" href="#icon-heart"></use>
@@ -161,3 +162,63 @@
 	{% endif %}
 </div>
 {%- endmacro -%}
+
+
+{%- macro wishlist_card(item, settings) %}
+<div class="col-sm-3 item-card" style="min-width: 220px;">
+	<div class="card text-center">
+		{% if item.image %}
+			<div class="card-img-container">
+				<a href="/{{ item.route or '#' }}" style="text-decoration: none;">
+					<img class="card-img" src="{{ item.image }}" alt="{{ title }}">
+				</a>
+				<div class="remove-wish"
+					style="position:absolute; top:10px; right: 20px; border-radius: 50%; border: 1px solid var(--gray-100); width: 25px; height: 25px;"
+					data-item-code="{{ item.item_code }}">
+					<span style="padding-bottom: 2px;">
+						<svg class="icon sm remove-wish-icon" style="margin-bottom: 4px; margin-left: 0.5px;">
+							<use class="close" href="#icon-close"></use>
+						</svg>
+					</span>
+				</div>
+
+			</div>
+		{% else %}
+		<a href="/{{ item.route or '#' }}" style="text-decoration: none;">
+			<div class="card-img-top no-image">
+				{{ frappe.utils.get_abbr(title) }}
+			</div>
+		</a>
+		{% endif %}
+
+		{{ wishlist_card_body(item, settings) }}
+
+
+	</div>
+</div>
+{%- endmacro -%}
+
+{%- macro wishlist_card_body(item, settings) %}
+<div class="card-body text-center" style="width:100%">
+	<div style="margin-top: 16px;">
+		<div class="product-title">{{ item.item_name or item.item_code or ''}}</div>
+	</div>
+	<div class="product-price">{{ item.formatted_price or '' }}</div>
+
+	{% if (item.available and settings.show_stock_availability) or (not settings.show_stock_availability) %}
+	<!-- Show move to cart button if in stock or if showing stock availability is disabled -->
+	<button data-item-code="{{ item.item_code}}" class="btn btn-add-to-cart w-100 wishlist-cart-not-added">
+		<span class="mr-2">
+			<svg class="icon icon-md">
+				<use href="#icon-assets"></use>
+			</svg>
+		</span>
+		{{ _("Move to Cart") }}
+	</button>
+	{% else %}
+	<div style="color: #F47A7A; width: 100%;">
+		{{ _("Not in Stock") }}
+	</div>
+	{% endif %}
+</div>
+{%- endmacro -%}
diff --git a/erpnext/templates/includes/navbar/navbar_items.html b/erpnext/templates/includes/navbar/navbar_items.html
index 54ed98a..793bacb 100644
--- a/erpnext/templates/includes/navbar/navbar_items.html
+++ b/erpnext/templates/includes/navbar/navbar_items.html
@@ -10,7 +10,7 @@
 		</a>
 	</li>
 	<li class="wishlist wishlist-icon hidden">
-		<a class="nav-link" href="/cart">
+		<a class="nav-link" href="/wishlist">
 			<svg class="icon icon-lg">
 				<use href="#icon-heart"></use>
 			</svg>
diff --git a/erpnext/templates/pages/wishlist.html b/erpnext/templates/pages/wishlist.html
new file mode 100644
index 0000000..6e7a65b
--- /dev/null
+++ b/erpnext/templates/pages/wishlist.html
@@ -0,0 +1,24 @@
+{% extends "templates/web.html" %}
+
+{% block title %} {{ _("Wishlist") }} {% endblock %}
+
+{% block header %}<h3 class="shopping-cart-header mt-2 mb-6">{{ _("Wishlist") }}</h1>{% endblock %}
+
+{% block page_content %}
+{% if items %}
+	<div class="row">
+		<div class="col-12 col-md-11 item-card-group-section">
+			<div class="row products-list">
+					{% from "erpnext/templates/includes/macros.html" import wishlist_card %}
+					{% for item in items %}
+						{{ wishlist_card(item, settings) }}
+					{% endfor %}
+			</div>
+		</div>
+	</div>
+{% else %}
+	<!-- TODO: Make empty state for wishlist -->
+	{% include "erpnext/www/all-products/not_found.html" %}
+{% endif %}
+
+{% endblock %}
\ No newline at end of file
diff --git a/erpnext/templates/pages/wishlist.py b/erpnext/templates/pages/wishlist.py
new file mode 100644
index 0000000..15aef87
--- /dev/null
+++ b/erpnext/templates/pages/wishlist.py
@@ -0,0 +1,39 @@
+# Copyright (c) 2021, Frappe Technologies Pvt. Ltd. and Contributors
+# License: GNU General Public License v3. See license.txt
+from __future__ import unicode_literals
+
+no_cache = 1
+
+import frappe
+from erpnext.e_commerce.shopping_cart.cart import get_cart_quotation
+
+def get_context(context):
+	settings = frappe.get_doc("E Commerce Settings")
+	items = get_wishlist_items()
+
+	if settings.show_stock_availability:
+		for item in items:
+			stock_qty = frappe.utils.flt(
+				frappe.db.get_value("Bin",
+					{
+						"item_code": item.item_code,
+						"warehouse": item.get("warehouse")
+					},
+					"actual_qty")
+				)
+			item.available = True if stock_qty else False
+
+	context.items = items
+	context.settings = settings
+
+def get_wishlist_items():
+	if frappe.db.exists("Wishlist", frappe.session.user):
+		return frappe.db.sql("""
+			Select
+				item_code, item_name, website_item, price,
+				warehouse, image, item_group, route, formatted_price
+			from
+				`tabWishlist Items`
+			where
+				parent=%(user)s"""%{"user": frappe.db.escape(frappe.session.user)}, as_dict=1)
+	return
\ No newline at end of file