diff --git a/erpnext/public/js/hub/components/DetailView.vue b/erpnext/public/js/hub/components/DetailView.vue
new file mode 100644
index 0000000..ae6e8ab
--- /dev/null
+++ b/erpnext/public/js/hub/components/DetailView.vue
@@ -0,0 +1,54 @@
+<template>
+	<div class="hub-item-container">
+		<div class="row visible-xs">
+			<div class="col-xs-12 margin-bottom">
+				<button class="btn btn-xs btn-default" data-route="marketplace/home">{{ back_to_home_text }}</button>
+			</div>
+		</div>
+		<div class="row margin-bottom">
+			<div class="col-md-3">
+				<div class="hub-item-image">
+					<img :src="image">
+				</div>
+			</div>
+			<div class="col-md-6">
+				<h2>{{ title }}</h2>
+				<div class="text-muted">
+					<p v-for="subtitle in subtitles"
+						:key="subtitle"
+						v-html="subtitle"
+					>
+					</p>
+				</div>
+
+			</div>
+		</div>
+		<div v-for="section in sections" class="row hub-item-description"
+			:key="section.title"
+		>
+			<h6 class="col-md-12 margin-top">
+				<b class="text-muted">{{ section.title }}</b>
+			</h6>
+			<p class="col-md-12" v-html="section.content">
+			</p>
+		</div>
+
+	</div>
+</template>
+
+<script>
+
+export default {
+	name: 'detail-view',
+	props: ['title', 'subtitles', 'image', 'sections'],
+	data() {
+		return {
+			back_to_home_text: __('Back to Home')
+		}
+	},
+	computed: {}
+}
+</script>
+
+<style lang="less" scoped>
+</style>
diff --git a/erpnext/public/js/hub/components/detail_view.js b/erpnext/public/js/hub/components/detail_view.js
index f161e45..fca6a56 100644
--- a/erpnext/public/js/hub/components/detail_view.js
+++ b/erpnext/public/js/hub/components/detail_view.js
@@ -132,42 +132,6 @@
 	return html;
 }
 
-function get_profile_html(profile) {
-	const p = profile;
-	const profile_html = `<div class="hub-item-container">
-		<div class="row visible-xs">
-			<div class="col-xs-12 margin-bottom">
-				<button class="btn btn-xs btn-default" data-route="marketplace/home">Back to home</button>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-3">
-				<div class="hub-item-image">
-					<img src="${p.logo}">
-				</div>
-			</div>
-			<div class="col-md-6">
-				<h2>${p.company}</h2>
-				<div class="text-muted">
-					<p>${p.country}</p>
-					<p>${p.site_name}</p>
-					<p>${__(`Joined ${comment_when(p.creation)}`)}</p>
-				</div>
-				<hr>
-				<div class="hub-item-description">
-				${'description'
-					? `<p>${p.company_description}</p>`
-					: `<p>__('No description')</p`
-				}
-				</div>
-			</div>
-		</div>
-
-	</div>`;
-
-	return profile_html;
-}
-
 export {
 	get_detail_view_html,
 	get_profile_html
diff --git a/erpnext/public/js/hub/marketplace.js b/erpnext/public/js/hub/marketplace.js
index d8bfea8..433f7da 100644
--- a/erpnext/public/js/hub/marketplace.js
+++ b/erpnext/public/js/hub/marketplace.js
@@ -3,7 +3,6 @@
 // pages
 import './pages/item';
 import './pages/seller';
-import './pages/profile';
 import './pages/messages';
 import './pages/buying_messages';
 import './pages/not_found';
@@ -14,6 +13,7 @@
 import Category from './pages/Category.vue';
 import Search from './pages/Search.vue';
 import PublishedProducts from './pages/PublishedProducts.vue';
+import Profile from './pages/Profile.vue';
 
 // components
 import { ProfileDialog } from './components/profile_dialog';
@@ -203,7 +203,7 @@
 		}
 
 		if (route[1] === 'profile' && !this.subpages.profile) {
-			this.subpages.profile = new erpnext.hub.Profile(this.$body);
+			this.subpages.profile = new erpnext.hub.ProfilePage(this.$body);
 		}
 
 		if (route[1] === 'publish' && !this.subpages.publish) {
@@ -374,3 +374,21 @@
 		$('[data-page-name="search"]').hide();
 	}
 }
+
+erpnext.hub.ProfilePage = class {
+	constructor(parent) {
+		this.$wrapper = $(`<div id="vue-area-profile">`).appendTo($(parent));
+
+		new Vue({
+			render: h => h(Profile)
+		}).$mount('#vue-area-profile');
+	}
+
+	show() {
+		$('[data-page-name="profile"]').show();
+	}
+
+	hide() {
+		$('[data-page-name="profile"]').hide();
+	}
+}
diff --git a/erpnext/public/js/hub/pages/Profile.vue b/erpnext/public/js/hub/pages/Profile.vue
new file mode 100644
index 0000000..2f3c9d5
--- /dev/null
+++ b/erpnext/public/js/hub/pages/Profile.vue
@@ -0,0 +1,66 @@
+<template>
+	<div
+		class="marketplace-page"
+		:data-page-name="page_name"
+	>
+
+		<detail-view v-if="profile"
+			:title="title"
+			:subtitles="subtitles"
+			:image="image"
+			:sections="sections"
+		>
+		</detail-view>
+	</div>
+</template>
+
+<script>
+import DetailView from '../components/DetailView.vue';
+
+export default {
+	name: 'saved-products-page',
+	components: {
+		DetailView
+	},
+	data() {
+		return {
+			page_name: frappe.get_route()[1],
+			profile: null,
+			title: null,
+			subtitles: [],
+			image: null,
+			sections: []
+		};
+	},
+	created() {
+		this.get_profile();
+	},
+	methods: {
+		get_profile() {
+			hub.call(
+				'get_hub_seller_profile',
+				{ hub_seller: hub.settings.company_email }
+			).then(profile => {
+				this.profile = profile;
+				this.title = profile.company;
+				this.subtitles = [
+					__(profile.country),
+					__(profile.site_name),
+					__(`Joined ${comment_when(profile.creation)}`)
+				];
+				this.image = profile.logo;
+				this.sections = [
+					{
+						title: __('About the Company'),
+						content: profile.company_description
+							? __(profile.company_description)
+							: __('No description')
+					}
+				];
+			});
+		}
+	}
+}
+</script>
+
+<style scoped></style>
diff --git a/erpnext/public/js/hub/pages/SavedProducts.vue b/erpnext/public/js/hub/pages/SavedProducts.vue
index 6e5eeff..f113a20 100644
--- a/erpnext/public/js/hub/pages/SavedProducts.vue
+++ b/erpnext/public/js/hub/pages/SavedProducts.vue
@@ -71,7 +71,7 @@
 			}
 
 			alert = frappe.show_alert(__(`<span>${hub_item_code} removed.
-				<a href="#" class="undo-remove" data-action="undo-remove"><b>Undo</b></a></span>`),
+				<a href="#" data-action="undo-remove"><b>Undo</b></a></span>`),
 				grace_period/1000,
 				{
 					'undo-remove': undo_remove.bind(this)
diff --git a/erpnext/public/js/hub/pages/profile.js b/erpnext/public/js/hub/pages/profile.js
deleted file mode 100644
index 9bfa85d..0000000
--- a/erpnext/public/js/hub/pages/profile.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import SubPage from './subpage';
-import { get_detail_skeleton_html } from '../components/skeleton_state';
-import { ProfileDialog } from '../components/profile_dialog';
-
-erpnext.hub.Profile = class Profile extends SubPage {
-	make_wrapper() {
-		super.make_wrapper();
-		this.make_edit_profile_dialog();
-	}
-
-	refresh() {
-		this.show_skeleton();
-		this.get_hub_seller_profile(this.keyword)
-			.then(profile => {
-				this.edit_profile_dialog.set_values(profile);
-				this.render(profile);
-			});
-	}
-
-	get_hub_seller_profile() {
-		return hub.call('get_hub_seller_profile', { hub_seller: hub.settings.company_email });
-	}
-
-	show_skeleton() {
-		this.$wrapper.html(get_detail_skeleton_html());
-	}
-
-	render(profile) {
-		const p = profile;
-		const content_by_log_type = this.get_content_by_log_type();
-
-		let activity_logs = (p.hub_seller_activity || []).sort((a, b) => {
-			return new Date(b.creation) - new Date(a.creation);
-		});
-
-		const timeline_items_html = activity_logs
-			.map(log => {
-				const stats = JSON.parse(log.stats);
-				const no_of_items = stats && stats.push_update || '';
-
-				const content = content_by_log_type[log.type];
-				const message = content.get_message(no_of_items);
-				const icon = content.icon;
-				return this.get_timeline_log_item(log.pretty_date, message, icon);
-			})
-			.join('');
-
-		const profile_html = `<div class="hub-item-container">
-			<div class="row visible-xs">
-				<div class="col-xs-12 margin-bottom">
-					<button class="btn btn-xs btn-default" data-route="marketplace/home">Back to home</button>
-				</div>
-			</div>
-			<div class="row">
-				<div class="col-md-3">
-					<div class="hub-item-image">
-						<img src="${p.logo}">
-					</div>
-				</div>
-				<div class="col-md-8">
-					<h2>${p.company}</h2>
-					<div class="text-muted">
-						<p>${p.country}</p>
-						<p>${p.site_name}</p>
-					</div>
-					<hr>
-					<div class="hub-item-description">
-					${'description'
-						? `<p>${p.company_description}</p>`
-						: `<p>__('No description')</p`
-					}
-					</div>
-				</div>
-				<div class="col-md-1">
-					<div class="dropdown pull-right hub-item-dropdown">
-						<a class="dropdown-toggle btn btn-xs btn-default" data-toggle="dropdown">
-							<span class="caret"></span>
-						</a>
-						<ul class="dropdown-menu dropdown-right" role="menu">
-						<li><a data-action="edit_profile">${__('Edit Profile')}</a></li>
-						</ul>
-					</div>
-				</div>
-			</div>
-
-			<div class="timeline">
-				<div class="timeline-items">
-					${timeline_items_html}
-				</div>
-			</div>
-
-		</div>`;
-
-		this.$wrapper.html(profile_html);
-	}
-
-	make_edit_profile_dialog() {
-		this.edit_profile_dialog = ProfileDialog(
-			__('Edit Profile'),
-			{
-				label: __('Update'),
-				on_submit: this.update_profile.bind(this)
-			}
-		);
-
-		this.edit_profile_dialog.set_df_property('company_email', 'read_only', 1);
-	}
-
-	edit_profile() {
-		this.edit_profile_dialog.set_values({
-			company_email: hub.settings.company_email
-		});
-		this.edit_profile_dialog.show();
-	}
-
-	update_profile(new_values) {
-		hub.call('update_profile', {
-			hub_seller: hub.settings.company_email,
-			updated_profile: new_values
-		}).then(new_profile => {
-				this.edit_profile_dialog.hide();
-				this.render(new_profile);
-			});
-	}
-
-	get_timeline_log_item(pretty_date, message, icon) {
-		return `<div class="media timeline-item  notification-content">
-			<div class="small">
-				<i class="octicon ${icon} fa-fw"></i>
-				<span title="Administrator"><b>${pretty_date}</b> ${message}</span>
-			</div>
-		</div>`;
-	}
-
-	get_content_by_log_type() {
-		return {
-			"Created": {
-				icon: 'octicon-heart',
-				get_message: () => 'Joined Marketplace'
-			},
-			"Items Publish": {
-				icon: 'octicon-bookmark',
-				get_message: (no_of_items) =>
-					`Published ${no_of_items} product${no_of_items > 1 ? 's' : ''} to Marketplace`
-			}
-		}
-	}
-}