diff --git a/erpnext/hooks.py b/erpnext/hooks.py
index 178b732e4a1..6c42c5cfcdb 100644
--- a/erpnext/hooks.py
+++ b/erpnext/hooks.py
@@ -170,11 +170,9 @@ default_roles = [
 ]
 
 role_home_page = {
-	"LMS User": "`lms`"
+	"LMS User": "/lms"
 }
 
-# get_website_user_home_page = "erpnext.education.utils.get_home_page"
-
 has_website_permission = {
 	"Sales Order": "erpnext.controllers.website_list_for_contact.has_website_permission",
 	"Quotation": "erpnext.controllers.website_list_for_contact.has_website_permission",
diff --git a/erpnext/public/js/education/lms/components/Navbar.vue b/erpnext/public/js/education/lms/components/Navbar.vue
new file mode 100644
index 00000000000..69445c1116d
--- /dev/null
+++ b/erpnext/public/js/education/lms/components/Navbar.vue
@@ -0,0 +1,84 @@
+<template>
+    <nav class="navbar navbar-expand-lg navbar-light">
+        <div class="container">
+            <router-link tag="a" :class="'navbar-brand'" :to="{name: 'home'}">
+                <span>{{ portal.title }}</span>
+            </router-link>
+            <button class="navbar-toggler mr-3" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse mx-3" id="navbarSupportedContent">
+                <ul class="navbar-nav mr-auto">
+                </ul>
+                <ul class="navbar-nav ml-auto justify-content-end">
+                    <!-- post login tools -->
+                    <li class="nav-item dropdown hide" id="website-post-login" data-label="website-post-login" style="display: none">
+
+
+                    <li v-if="isLogin" class="nav-item dropdown" id="website-post-login" data-label="website-post-login"
+                        style="">
+                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
+                            <span class="user-image-wrapper"><span class="avatar avatar-small" :title="fullName">
+                                    <span class="avatar-frame" :style="avatarStyle"
+                                        :title="fullName"></span>
+                                </span></span>
+                            <span class="full-name">{{ fullName }}</span>
+                            <b class="caret"></b>
+                        </a>
+                        <div class="dropdown-menu" role="menu">
+                            <router-link tag="a" :class="'dropdown-item'" :to="{name: 'profile'}">
+                                My Profile
+                            </router-link>
+                            <router-link tag="a" :class="'dropdown-item'" :to="{name: 'logout'}">
+                                Logout
+                            </router-link>
+                        </div>
+                    </li>
+                    <li v-else class="nav-item">
+                        <router-link tag="a" :class="'nav-link'" :to="{name: 'login'}">
+                            Login
+                        </router-link>
+                    </li>
+
+                    <li class="nav-item btn-login-area" style="display: none;"><a class="nav-link" href="/login">Login</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+</template>
+<script>
+export default {
+    name: "Home",
+    data() {
+    	return{
+            portal: {},
+            avatar: frappe.get_cookie("user_image"),
+            fullName: frappe.get_cookie("full_name"),
+            isLogin: frappe.is_user_logged_in()
+    	}
+    },
+	mounted() {
+        this.getPortalDetails().then(data => this.portal = data);
+    },
+    methods: {
+        getPortalDetails() {
+            return lms.call("get_portal_details")
+        }
+    },
+    computed: {
+		avatarStyle() {
+			return `background-image: url("${this.avatar}")`
+        },
+        // isLogin() {
+        //     return frappe.is_user_logged_in()
+        // },
+	}
+};
+</script>
+<style scoped>
+a {
+	text-decoration: none;
+}
+</style>
\ No newline at end of file
diff --git a/erpnext/public/js/education/lms/lmsRoot.vue b/erpnext/public/js/education/lms/lmsRoot.vue
index 3a6cb801712..a0934ef94af 100644
--- a/erpnext/public/js/education/lms/lmsRoot.vue
+++ b/erpnext/public/js/education/lms/lmsRoot.vue
@@ -1,10 +1,15 @@
 <template>
 	<div id="lms-root">
+		<navbar></navbar>
 	<router-view :key="$route.fullPath"></router-view>
 	</div>
 </template>
 <script>
+import Navbar from "./components/Navbar.vue"
 export default {
 	name: "lmsRoot",
+	components: {
+		Navbar
+	}
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/erpnext/public/js/education/lms/routes.js b/erpnext/public/js/education/lms/routes.js
index 65c7dba5dab..b0ef17f4337 100644
--- a/erpnext/public/js/education/lms/routes.js
+++ b/erpnext/public/js/education/lms/routes.js
@@ -48,6 +48,24 @@ const routes = [{
 		component: Home,
 		props: true
 	},
+	{
+		name: 'login',
+		path: '/Login',
+		beforeEnter(to, from, next) {
+			window.location = window.location.origin.toString() + '/login#login'
+		},
+		component: Home,
+		props: true
+	},
+	{
+		name: 'logout',
+		path: '/Logout',
+		beforeEnter(to, from, next) {
+			window.location = window.location.origin.toString() + '/?cmd=web_logout'
+		},
+		component: Home,
+		props: true
+	},
 	{
 		name: 'profile',
 		path: '/Profile',
diff --git a/erpnext/www/lms.html b/erpnext/www/lms.html
index 372e87438b1..8e4988164e0 100644
--- a/erpnext/www/lms.html
+++ b/erpnext/www/lms.html
@@ -2,6 +2,7 @@
 
 {% block title %}{{ heading or "LMS"}}{% endblock %}
 
+{% block navbar %}{% endblock %}
 {% block page_content %}
 <div id="lms-app"></div>
 <script type="text/javascript" src="/assets/js/lms.min.js"></script>