diff --git a/erpnext/public/css/hub.css b/erpnext/public/css/hub.css
index 559c203..5f86cf4 100644
--- a/erpnext/public/css/hub.css
+++ b/erpnext/public/css/hub.css
@@ -1,3 +1,29 @@
+body[data-route^="Hub/"] .freeze .image-view-container .list-row-col {
+  background-color: #fafbfc;
+  color: #fafbfc;
+}
+body[data-route^="Hub/"] .freeze .image-view-container .placeholder-text {
+  color: #fafbfc;
+}
+body[data-route^="Hub/"] .freeze {
+  display: none;
+}
+body[data-route^="Hub/"] .image-view-container {
+  justify-content: space-around;
+}
+.img-wrapper {
+  border: 1px solid #d1d8dd;
+  border-radius: 3px;
+  padding: 12px;
+  overflow: hidden;
+  text-align: center;
+  white-space: nowrap;
+}
+.img-wrapper .helper {
+  height: 100%;
+  display: inline-block;
+  vertical-align: middle;
+}
 /* hub */
 div[data-page-route="hub"] .page-head {
   height: 80px;
diff --git a/erpnext/public/css/pos.css b/erpnext/public/css/pos.css
index e2d301d..bc81182 100644
--- a/erpnext/public/css/pos.css
+++ b/erpnext/public/css/pos.css
@@ -169,8 +169,5 @@
   height: 60px;
 }
 .grand-total .grand-total-value {
-  font-size: 18px;
-}
-.rounded-total-value {
-  font-size: 18px;
+  font-size: 24px;
 }
diff --git a/erpnext/public/js/hub/hub_factory.js b/erpnext/public/js/hub/hub_factory.js
index f260fcc..a341c22 100644
--- a/erpnext/public/js/hub/hub_factory.js
+++ b/erpnext/public/js/hub/hub_factory.js
@@ -5,9 +5,22 @@
 		const page_name = frappe.get_route_str();
 		const page = route[1];
 
+		const assets = {
+			'List': [
+				'/assets/erpnext/js/hub/hub_page.js',
+				'/assets/erpnext/css/hub.css',
+			],
+			'Form': [
+				'/assets/erpnext/js/hub/hub_form.js',
+				'/assets/erpnext/css/hub.css',
+			]
+		};
+		console.log("make factory?");
+
 		if (!erpnext.hub.pages[page_name]) {
+			console.log("pages?");
 			if (page === 'Item' && !route[2]) {
-				frappe.require('/assets/erpnext/js/hub/hub_page.js', () => {
+				frappe.require(assets['List'], () => {
 					erpnext.hub.pages[page_name] = new erpnext.hub.HubPage({
 						doctype: 'Hub Settings',
 						parent: this.make_page(true, page_name)
@@ -15,7 +28,8 @@
 					window.hub_page = erpnext.hub.pages[page_name];
 				});
 			} else if(route[2]) {
-				frappe.require('/assets/erpnext/js/hub/hub_form.js', () => {
+				console.log("form?");
+				frappe.require(assets['Form'], () => {
 					erpnext.hub.pages[page_name] = new erpnext.hub.HubForm({
 						hub_item_code: route[2],
 						doctype: 'Hub Settings',
@@ -25,6 +39,7 @@
 				});
 			}
 		} else {
+			console.log("else?");
 			frappe.container.change_to(page_name);
 			window.hub_page = erpnext.hub.pages[page_name];
 		}
diff --git a/erpnext/public/js/hub/hub_form.js b/erpnext/public/js/hub/hub_form.js
index 0a8b5b0..208af41 100644
--- a/erpnext/public/js/hub/hub_form.js
+++ b/erpnext/public/js/hub/hub_form.js
@@ -8,7 +8,7 @@
 	}
 
 	setup_fields() {
-
+		this.fields = ['hub_item_code', 'item_name', 'item_code', 'description', 'seller', 'company_name', 'country'];
 	}
 
 	set_breadcrumbs() {
@@ -40,9 +40,12 @@
 		};
 	}
 
+	prepare_data(r) {
+		this.data = r.message;
+	}
+
 	update_data(r) {
-		const data = r.message;
-		this.data = data;
+		this.data = r.message;
 	}
 
 	render() {
@@ -51,13 +54,14 @@
 		});
 
 		let fields = [];
-		for (let fieldname in this.data) {
+		this.fields.map(fieldname => {
 			fields.push({
-				label: toTitle(fieldname),
+				label: toTitle(frappe.model.unscrub(fieldname)),
 				fieldname,
-				fieldtype: 'Data'
+				fieldtype: 'Data',
+				read_only: 1
 			});
-		}
+		});
 
 		this.form = new frappe.ui.FieldGroup({
 			parent: this.$result,
diff --git a/erpnext/public/js/hub/hub_page.js b/erpnext/public/js/hub/hub_page.js
index 8ecd28b..9b6c4f4 100644
--- a/erpnext/public/js/hub/hub_page.js
+++ b/erpnext/public/js/hub/hub_page.js
@@ -8,10 +8,22 @@
 
 		const route = frappe.get_route();
 		this.page_name = route[1];
+
+		return this.get_hub_item_meta()
+			.then(r => {
+				this.meta = r.message || this.meta;
+				this.doctype = 'Hub Item';
+				frappe.model.sync(this.meta);
+			});
+	}
+
+	get_hub_item_meta() {
+		return new Promise(resolve =>
+			frappe.call('erpnext.hub_node.get_hub_item_meta', {}, resolve));
 	}
 
 	setup_fields() {
-
+		this.fields = ['name', 'hub_item_code', 'image', 'item_name', 'item_code'];
 	}
 
 	set_breadcrumbs() {
@@ -23,13 +35,32 @@
 	}
 
 	setup_filter_area() {
-
+		this.custom_filter_configs = [
+			{
+				fieldtype: 'Data',
+				label: 'Company',
+				condition: 'like',
+				fieldname: 'company_name',
+			},
+			{
+				fieldtype: 'Link',
+				label: 'Country',
+				options: 'Country',
+				condition: 'like',
+				fieldname: 'country'
+			}
+		];
+		this.filter_area = new FilterArea(this);
 	}
 
 	setup_sort_selector() {
 
 	}
 
+	setup_view() {
+
+	}
+
 	get_args() {
 		return {
 			start: this.start,
@@ -37,18 +68,33 @@
 			category: this.category || '',
 			order_by: this.order_by,
 			company: this.company || '',
-			text: this.search_text || ''
+			text: this.search_text || '',
+			fields: this.fields
 		};
 	}
 
 	update_data(r) {
 		const data = r.message;
+		console.log('update data', data);
 
 		if (this.start === 0) {
 			this.data = data;
 		} else {
 			this.data = this.data.concat(data);
 		}
+
+	}
+
+	freeze(toggle) {
+		this.$freeze.toggle(toggle);
+		if (this.$freeze.find('.image-view-container').length) return;
+
+		const html = Array.from(new Array(4)).map(d => this.card_html({
+			name: 'freeze',
+			item_name: 'freeze'
+		})).join('');
+
+		this.$freeze.html(`<div class="image-view-container border-top">${html}</div>`);
 	}
 
 	render() {
@@ -56,13 +102,15 @@
 	}
 
 	render_image_view() {
-		var html = this.data.map(this.card_html.bind(this)).join("");
+		let data = this.data;
+		console.log('this.data render', this.data);
+		if (this.start === 0) {
+			this.$result.html('<div class="image-view-container small padding-top">');
+			data = this.data.slice(this.start);
+		}
 
-		this.$result.html(`
-			<div class="image-view-container small">
-				${html}
-			</div>
-		`);
+		var html = data.map(this.card_html.bind(this)).join("");
+		this.$result.find('.image-view-container').append(html);
 	}
 
 	card_html(item) {
@@ -70,39 +118,28 @@
 		const encoded_name = item._name;
 		const title = strip_html(item['item_name' || 'item_code']);
 
-		const _class = !item.image ? 'no-image' : '';
-		const _html = item.image ?
-			`<img data-name="${encoded_name}" src="${ item.image }" alt="${ title }">` :
-			`<span class="placeholder-text">
-				${ frappe.get_abbr(title) }
-			</span>`;
+		const route = `#Hub/Item/${item.hub_item_code}`;
+
+		const image_html = item.image ?
+			`<img src="${item.image}">
+			<span class="helper"></span>` :
+			`<div class="standard-image">${frappe.get_abbr(title)}</div>`;
 
 		return `
-			<div class="image-view-item">
-				<div class="image-view-header">
-					<div class="list-row-col list-subject ellipsis level">
-						<div class="list-row-col">
-							<span>${title}</span>
+			<div class="hub-item-wrapper margin-bottom" style="width: 200px;">
+				<a href="${route}">
+					<div class="hub-item-image">
+						<div class="img-wrapper" style="height: 200px; width: 200px">
+							${image_html}
 						</div>
 					</div>
-				</div>
-				<div class="image-view-body">
-					<a  data-name="${encoded_name}"
-						title="${encoded_name}"
-						href="#Hub/Item/${item.hub_item_code}"
-					>
-						<div class="image-field ${_class}"
-							data-name="${encoded_name}"
-						>
-							${_html}
-						</div>
-					</a>
-				</div>
+					<div class="hub-item-title">
+						<h5 class="bold">
+							${ title }
+						</h5>
+					</div>
+				</a>
 			</div>
 		`;
 	}
-
-	show_hub_form() {
-
-	}
-};
+};
\ No newline at end of file
diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index 1cae692..66199a4 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -1,5 +1,41 @@
 @import "../../../../frappe/frappe/public/less/variables.less";
 
+body[data-route^="Hub/"] {
+	.freeze .image-view-container {
+		.list-row-col {
+			background-color: @light-bg;
+			color: @light-bg;
+		}
+
+		.placeholder-text {
+			color: @light-bg;
+		}
+	}
+
+	.freeze {
+		display: none;
+	}
+
+	.image-view-container {
+		justify-content: space-around;
+	}
+}
+
+.img-wrapper {
+	border: 1px solid #d1d8dd;
+	border-radius: 3px;
+	padding: 12px;
+	overflow: hidden;
+	text-align: center;
+	white-space: nowrap;
+
+	.helper {
+		height: 100%;
+		display: inline-block;
+		vertical-align: middle;
+	}
+}
+
 /* hub */
 div[data-page-route="hub"] {
 	.page-head {