diff --git a/erpnext/public/js/hub/hub_listing.js b/erpnext/public/js/hub/hub_listing.js
index 0ff7970..9ac1b84 100644
--- a/erpnext/public/js/hub/hub_listing.js
+++ b/erpnext/public/js/hub/hub_listing.js
@@ -22,7 +22,7 @@
 		const title = this.page_title;
 		let iconHtml = `<img class="hub-icon" src="assets/erpnext/images/hub_logo.svg">`;
 		let titleHtml = `<span class="hub-page-title">${title}</span>`;
-		this.page.set_title(iconHtml + titleHtml, '', false, title);
+		this.page.set_title(titleHtml, '', false, title);
 	}
 
 	setup_fields() {
@@ -36,6 +36,8 @@
 			});
 	}
 
+	setup_filter_area() { }
+
 	get_meta() {
 		return new Promise(resolve =>
 			frappe.call('erpnext.hub_node.get_meta', {doctype: this.doctype}, resolve));
@@ -72,12 +74,12 @@
 	}
 
 	setup_sort_selector() {
-		this.sort_selector = new frappe.ui.SortSelector({
-			parent: this.filter_area.$filter_list_wrapper,
-			doctype: this.doctype,
-			args: this.order_by,
-			onchange: () => this.refresh(true)
-		});
+		// this.sort_selector = new frappe.ui.SortSelector({
+		// 	parent: this.filter_area.$filter_list_wrapper,
+		// 	doctype: this.doctype,
+		// 	args: this.order_by,
+		// 	onchange: () => this.refresh(true)
+		// });
 	}
 
 	setup_view() {
@@ -88,6 +90,21 @@
 				this.page.fields_dict[field].set_value(value);
 			}
 		}
+
+		const $hub_search = $(`
+			<div class="hub-search-container">
+				<input type="text" class="form-control" placeholder="Search for anything">
+			</div>`
+		);
+		this.$frappe_list.prepend($hub_search);
+		const $search_input = $hub_search.find('input');
+
+		$search_input.on('keydown', frappe.utils.debounce((e) => {
+			if (e.which === frappe.ui.keyCode.ENTER) {
+				this.search_value = $search_input.val();
+				this.refresh();
+			}
+		}, 300));
 	}
 
 	get_args() {
@@ -146,7 +163,10 @@
 		if (this.start === 0) {
 			// ${this.getHeaderHtml()}
 			this.$result.html(`
-				<div class="image-view-container small">
+				<div class="row hub-card-container">
+					<div class="col-md-12 margin-bottom">
+						<b>Recently Published</b>
+					</div>
 					${html}
 				</div>
 			`);
@@ -366,23 +386,23 @@
 	}
 
 	bootstrap_data(response) {
-		let companies = response.companies.map(d => d.name);
-		this.custom_filter_configs = [
-			{
-				fieldtype: 'Autocomplete',
-				label: __('Select Company'),
-				condition: 'like',
-				fieldname: 'company_name',
-				options: companies
-			},
-			{
-				fieldtype: 'Link',
-				label: __('Select Country'),
-				options: 'Country',
-				condition: 'like',
-				fieldname: 'country'
-			}
-		];
+		// let companies = response.companies.map(d => d.name);
+		// this.custom_filter_configs = [
+		// 	{
+		// 		fieldtype: 'Autocomplete',
+		// 		label: __('Select Company'),
+		// 		condition: 'like',
+		// 		fieldname: 'company_name',
+		// 		options: companies
+		// 	},
+		// 	{
+		// 		fieldtype: 'Link',
+		// 		label: __('Select Country'),
+		// 		options: 'Country',
+		// 		condition: 'like',
+		// 		fieldname: 'country'
+		// 	}
+		// ];
 	}
 
 	prepareFormFields() {
@@ -414,6 +434,10 @@
 	setup_side_bar() {
 		super.setup_side_bar();
 
+		this.setup_new_sidebar();
+
+		return;
+
 		let $pitch = $(`<div class="border" style="
 				margin-top: 10px;
 				padding: 0px 10px;
@@ -458,22 +482,71 @@
 		}, __("Account"));
 	}
 
+	setup_new_sidebar() {
+		this.sidebar.$sidebar.append(`
+			<ul class="list-unstyled hub-sidebar-group">
+				<li class="hub-sidebar-item bold active">
+					Browse
+				</li>
+				<li class="hub-sidebar-item text-muted">
+					Favorites
+				</li>
+				<li class="hub-sidebar-item text-muted">
+					Become a seller
+				</li>
+			</ul>
+		`);
+
+		frappe.call('erpnext.hub_node.get_categories')
+			.then(r => {
+				const categories = r.message.map(d => d.value).sort();
+				const sidebar_items = [
+					`<li class="hub-sidebar-item bold is-title">
+						Category
+					</li>`,
+					`<li class="hub-sidebar-item active">
+						All
+					</li>`,
+					...categories.map(category => `
+						<li class="hub-sidebar-item text-muted">
+							${category}
+						</li>
+					`)
+				];
+
+				this.sidebar.$sidebar.append(`
+					<ul class="list-unstyled">
+						${sidebar_items.join('')}
+					</ul>
+				`);
+			});
+	}
+
 	update_category(label) {
 		this.current_category = (label=='All Categories') ? undefined : label;
 		this.refresh();
 	}
 
 	get_filters_for_args() {
-		if(!this.filter_area) return;
-		let filters = {};
-		this.filter_area.get().forEach(f => {
-			let field = f[1] !== 'name' ? f[1] : 'item_name';
-			filters[field] = [f[2], f[3]];
-		});
-		if(this.current_category) {
-			filters['hub_category'] = this.current_category;
+		const filter = {};
+
+		if (this.search_value) {
+			filter.item_name = ['like', `%${this.search_value}%`];
 		}
-		return filters;
+
+		filter.image = ['like', 'http%'];
+		return filter;
+
+		// if(!this.filter_area) return;
+		// let filters = {};
+		// this.filter_area.get().forEach(f => {
+		// 	let field = f[1] !== 'name' ? f[1] : 'item_name';
+		// 	filters[field] = [f[2], f[3]];
+		// });
+		// if(this.current_category) {
+		// 	filters['hub_category'] = this.current_category;
+		// }
+		// return filters;
 	}
 
 	update_data(r) {
@@ -485,11 +558,14 @@
 		});
 	}
 
-	item_html(item) {
+	item_html(item, index) {
 		item._name = encodeURI(item.name);
 		const encoded_name = item._name;
 		const title = strip_html(item[this.meta.title_field || 'name']);
-		const _class = !item[this.imageFieldName] ? 'no-image' : '';
+
+		const img_url = item[this.imageFieldName];
+		const no_image = !img_url;
+		const _class = no_image ? 'no-image' : '';
 		const route = `#Hub/Item/${item.hub_item_code}`;
 		const company_name = item['company_name'];
 
@@ -507,41 +583,66 @@
 			if(i >= ratingAverage) starClass = 'fa-star-o';
 			ratingHtml += `<i class='fa fa-fw ${starClass} star-icon' data-index=${i}></i>`;
 		}
+		let dot_spacer = '<span aria-hidden="true"> · </span>';
+		let subtitle = '';
+		subtitle += comment_when(item.creation);
+		subtitle += dot_spacer;
+
+		if (ratingAverage > 0) {
+			subtitle += ratingAverage + `<i class='fa fa-fw fa-star-o'></i>`;
+			subtitle += dot_spacer;
+		}
+		subtitle += company_name;
 
 		let item_html = `
-			<div class="image-view-item">
-				<div class="image-view-header">
-					<div class="list-row-col list-subject ellipsis level">
-						<span class="level-item bold ellipsis" title="McGuffin">
-							<a href="${route}">${title}</a>
-						</span>
-					</div>
-					<div class="text-muted small" style="margin: 5px 0px;">
-						${ratingHtml}
-						(${reviewLength})
-					</div>
-					<div class="list-row-col">
-						<a href="${'#Hub/Company/'+company_name+'/Items'}"><p>${ company_name }</p></a>
-					</div>
-				</div>
-				<div class="image-view-body">
-					<a  data-name="${encoded_name}"
-						title="${encoded_name}"
-						href="${route}"
-					>
-						<div class="image-field ${_class}"
-							data-name="${encoded_name}"
-						>
-							<button class="btn btn-default zoom-view" data-name="${encoded_name}">
-								<i class="octicon octicon-eye" data-name="${encoded_name}"></i>
-							</button>
-							<button class="btn btn-default like-button" data-name="${encoded_name}">
-								<i class="octicon octicon-heart" data-name="${encoded_name}"></i>
-							</button>
+			<div class="col-sm-3 col-xs-2">
+				<div class="hub-card">
+					<div class="hub-card-header">
+						<div class="list-row-col list-subject ellipsis level">
+							<span class="level-item bold ellipsis" title="McGuffin">
+								<a href="${route}">${title}</a>
+							</span>
 						</div>
-					</a>
+						<div class="text-muted small" style="margin: 5px 0px;">
+							${ratingHtml}
+							(${reviewLength})
+						</div>
+						<div class="list-row-col">
+							<a href="${'#Hub/Company/'+company_name+'/Items'}"><p>${ company_name }</p></a>
+						</div>
+					</div>
+					<div class="hub-card-body">
+						<a  data-name="${encoded_name}"
+							title="${encoded_name}"
+							href="${route}"
+						>
+							<div class="image-field ${_class}"
+								data-name="${encoded_name}"
+							>
+								<button class="btn btn-default zoom-view" data-name="${encoded_name}">
+									<i class="octicon octicon-eye" data-name="${encoded_name}"></i>
+								</button>
+								<button class="btn btn-default like-button" data-name="${encoded_name}">
+									<i class="octicon octicon-heart" data-name="${encoded_name}"></i>
+								</button>
+							</div>
+						</a>
+					</div>
 				</div>
+			</div>
+		`;
 
+		item_html = `
+			<div class="col-md-3 col-sm-4 col-xs-6">
+				<div class="hub-card">
+					<div class="hub-card-header">
+						<div class="hub-card-title ellipsis bold">${title}</div>
+						<div class="hub-card-subtitle ellipsis text-muted">${subtitle}</div>
+					</div>
+					<div class="hub-card-body">
+						<img class="hub-card-image ${no_image ? 'no-image' : ''}" src="${img_url}" />
+					</div>
+				</div>
 			</div>
 		`;
 
diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index bdca28f..ef08fde 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -6,8 +6,71 @@
 		height: 40px;
 	}
 
-	.hub-page-title {
-		margin-left: 10px;
+	.layout-main-section {
+		border: none;
+	}
+
+	.frappe-list {
+		padding-top: 25px;
+		font-size: @text-medium;
+
+		@media (max-width: @screen-xs) {
+			padding-left: 20px;
+			padding-right: 20px;
+		}
+	}
+
+	.hub-card {
+		border: 1px solid @border-color;
+		margin-bottom: 25px;
+		border-radius: 4px;
+		overflow: hidden;
+		cursor: pointer;
+	}
+
+	.hub-card-header {
+		padding: 12px 15px;
+		height: 60px;
+	}
+
+	.hub-card-body {
+		height: 200px;
+	}
+
+	.hub-card-image {
+		min-width: 100%;
+		width: 100%;
+	}
+
+	.hub-search-container {
+		margin-bottom: 20px;
+
+		input {
+			font-size: @text-medium;
+			height: 32px;
+		}
+	}
+
+	.hub-sidebar {
+		padding-top: 25px;
+		padding-right: 15px;
+	}
+
+	.hub-sidebar-group {
+		margin-bottom: 10px;
+	}
+
+	.hub-sidebar-item {
+		padding: 5px 8px;
+		margin-bottom: 3px;
+		border-radius: 4px;
+		border: 1px solid transparent;
+
+		cursor: pointer;
+
+		&.active, &:hover:not(.is-title) {
+			border-color: @border-color;
+		}
 	}
 
 	.img-wrapper {