diff --git a/frappe/public/css/page.css b/frappe/public/css/page.css
deleted file mode 100644
index 280656c2f7..0000000000
--- a/frappe/public/css/page.css
+++ /dev/null
@@ -1,315 +0,0 @@
-/* the element that this class is applied to, should have a max width for this to work*/
-.page-container {
-  margin-top: 40px;
-}
-.page-head {
-  border-bottom: 1px solid #d1d8dd;
-  height: 70px;
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 41px;
-  margin: auto;
-  background-color: #fff;
-  z-index: 101;
-}
-.sub-heading {
-  display: inline-block;
-  margin-right: 10px;
-  max-width: 50%;
-  vertical-align: middle;
-}
-@media (min-width: 767px) {
-  .page-body {
-    overflow-x: hidden;
-    min-height: calc(100vh - 40px);
-  }
-}
-.page-title {
-  position: relative;
-}
-.page-title h6 {
-  margin-top: -8px;
-}
-.page-title h1 {
-  margin-top: 17px;
-}
-.page-title .indicator {
-  vertical-align: middle;
-}
-.page-title .title-text {
-  margin-right: 7px;
-  max-width: 75%;
-  display: inline-block;
-  vertical-align: middle;
-}
-.page-title .title-image {
-  width: 46px;
-  height: 0;
-  padding: 23px 0;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center center;
-  border-radius: 4px;
-  color: #fff;
-  text-align: center;
-  line-height: 0;
-  float: left;
-  margin-right: 10px;
-}
-.editable-title .title-text {
-  cursor: pointer;
-}
-.editable-title .title-text:hover {
-  background-color: #fffce7;
-}
-.page-actions {
-  padding-top: 17px;
-  padding-bottom: 17px;
-}
-.page-actions .sub-heading {
-  max-width: 50%;
-  overflow: hidden;
-}
-.page-content {
-  margin-top: 70px;
-}
-/* show menu aligned to the right border of the dropdown */
-.page-actions .dropdown-menu,
-.form-inner-toolbar .dropdown-menu {
-  right: 0px;
-  left: auto;
-}
-.layout-main-section {
-  border: 1px solid #d1d8dd;
-  border-top: 0px;
-}
-.layout-main-section-wrapper {
-  margin-bottom: 60px;
-}
-.layout-footer {
-  border: 1px solid #d1d8dd;
-  border-top: 0px;
-  padding: 3px 15px;
-  font-size: 12px;
-}
-.page-form {
-  margin: 0px;
-  padding-right: 15px;
-  padding-top: 10px;
-  display: flex;
-  flex-wrap: wrap;
-  border-bottom: 1px solid #d1d8dd;
-  background-color: #F7FAFC;
-}
-.page-form .form-group {
-  padding-right: 0px;
-  margin-bottom: 10px;
-}
-.page-form .checkbox {
-  margin-top: 4px;
-  margin-bottom: 4px;
-}
-.page-form .checkbox .help-box {
-  display: none;
-}
-select.input-sm {
-  line-height: 1.2em !important;
-}
-.message-page {
-  padding-top: 10rem;
-}
-.message-page .message-page-icon {
-  font-size: 10rem;
-  margin-bottom: 1rem;
-}
-.message-page .message-page-image {
-  margin-bottom: 1rem;
-}
-.message-page .btn-home {
-  margin-top: 1rem;
-}
-@media (max-width: 991px) {
-  .page-head .page-title h1 {
-    font-size: 22px;
-    margin-top: 22px;
-  }
-}
-@media (max-width: 767px) {
-  .page-actions {
-    max-width: 150px;
-    float: right;
-  }
-  .page-title {
-    position: absolute;
-    left: 0;
-    right: 101px;
-    width: 100%;
-  }
-  .page-title h1 {
-    padding-right: 170px;
-  }
-  .page-head .page-title h1 {
-    font-size: 18px;
-  }
-}
-#page-setup-wizard {
-  margin-top: 30px;
-}
-@media (min-width: 768px) {
-  .setup-wizard-slide {
-    max-width: 500px;
-  }
-}
-.setup-wizard-slide {
-  margin: 60px auto;
-  padding: 10px 50px;
-  border: 1px solid #d1d8dd;
-  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
-}
-.setup-wizard-slide .slides-progress {
-  margin-top: 20px;
-}
-.setup-wizard-slide .lead {
-  margin: 30px;
-  color: #777777;
-  text-align: center;
-  font-size: 24px;
-}
-.setup-wizard-slide .col-sm-12 {
-  padding: 0px;
-}
-.setup-wizard-slide .section-body .col-sm-6:first-child {
-  padding-left: 0px;
-}
-.setup-wizard-slide .section-body .col-sm-6:last-child {
-  padding-right: 0px;
-}
-.setup-wizard-slide .form-control {
-  font-weight: 500;
-}
-.setup-wizard-slide .form-control.bold {
-  background-color: #fff;
-}
-.setup-wizard-slide .add-more {
-  margin: 0px;
-}
-.setup-wizard-slide .footer {
-  padding: 30px 7px;
-}
-.setup-wizard-slide a.next-btn.disabled {
-  background-color: #b1bdca;
-  color: #fff;
-  border-color: #b1bdca;
-}
-.setup-wizard-slide a.complete-btn.disabled {
-  background-color: #b1bdca;
-  color: #fff;
-  border-color: #b1bdca;
-}
-.setup-wizard-slide .fa-fw {
-  vertical-align: middle;
-  font-size: 10px;
-}
-.setup-wizard-slide .fa-fw.active {
-  color: #5e64ff;
-}
-.setup-wizard-slide .icon-circle-blank {
-  font-size: 7px;
-}
-.setup-wizard-slide .icon-circle {
-  font-size: 10px;
-}
-.setup-wizard-slide .frappe-control[data-fieldtype="Attach Image"] {
-  width: 140px;
-  height: 180px;
-  margin-top: 20px;
-}
-.setup-wizard-slide .frappe-control[data-fieldtype="Attach Image"] .form-group {
-  display: none;
-}
-.setup-wizard-slide .frappe-control[data-fieldtype="Attach Image"] .clearfix {
-  display: none;
-}
-.setup-wizard-slide .missing-image {
-  display: block;
-  position: relative;
-  border-radius: 4px;
-  border: 1px solid #d1d8dd;
-  border-radius: 6px;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-.setup-wizard-slide .missing-image .octicon {
-  position: relative;
-  top: 50%;
-  transform: translate(0px, -50%);
-  -webkit-transform: translate(0px, -50%);
-}
-.setup-wizard-slide .attach-image-display {
-  display: block;
-  position: relative;
-  border-radius: 4px;
-}
-.setup-wizard-slide .img-container {
-  height: 100%;
-  width: 100%;
-  padding: 2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  border: 1px solid #d1d8dd;
-  border-radius: 6px;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-.setup-wizard-slide .img-overlay {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  color: #777777;
-  background-color: rgba(255, 255, 255, 0.7);
-  opacity: 0;
-}
-.setup-wizard-slide .img-overlay:hover {
-  opacity: 1;
-  cursor: pointer;
-}
-.setup-wizard-slide .progress-bar {
-  background-color: #5e64ff;
-}
-.page-card-container {
-  padding: 70px;
-}
-.page-card {
-  max-width: 360px;
-  margin: 70px auto;
-  padding: 15px;
-  border: 1px solid #d1d8dd;
-  border-radius: 4px;
-  background-color: #fff;
-  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
-}
-.page-card .page-card-head {
-  padding: 10px 15px;
-  margin: -15px;
-  margin-bottom: 15px;
-  border-bottom: 1px solid #d1d8dd;
-}
-.page-card .btn {
-  margin-top: 30px;
-}
-.state-icon-container {
-  display: flex;
-  justify-content: center;
-}
-.state-icon {
-  position: relative;
-  width: 100px !important;
-  height: 100px !important;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
diff --git a/frappe/public/js/frappe/ui/page.html b/frappe/public/js/frappe/ui/page.html
index 284156f3d6..6d7f4e460c 100644
--- a/frappe/public/js/frappe/ui/page.html
+++ b/frappe/public/js/frappe/ui/page.html
@@ -16,8 +16,13 @@
 					</span>
 				</span>
 				<div class="flex fill-width title-area">
-					<h3 class="ellipsis title-text"></h3>
-					<span class="indicator-pill whitespace-nowrap"></span>
+					<div>
+						<div class="flex">
+							<h3 class="ellipsis title-text"></h3>
+							<span class="indicator-pill whitespace-nowrap"></span>
+						</div>
+						<div class="ellipsis sub-heading hide text-muted"></div>
+					</div>
 					<button class="btn btn-default more-button hide">
 						<svg class="icon icon-sm">
 							<use xlink:href="#icon-dot-horizontal">
diff --git a/frappe/public/scss/desk/css_variables.scss b/frappe/public/scss/desk/css_variables.scss
index 758c7efbb9..f211c0e831 100644
--- a/frappe/public/scss/desk/css_variables.scss
+++ b/frappe/public/scss/desk/css_variables.scss
@@ -215,6 +215,10 @@
 	--criticism-bg: var(--red-100);
 	--btn-height: 28px;
 
+	// page
+	--page-head-height: 90px;
+	--page-bottom-margin: 60px;
+
 	// timeline
 	--timeline-item-icon-size: 34px;
 	--timeline-item-left-margin: var(--margin-xl);
diff --git a/frappe/public/scss/desk/page.scss b/frappe/public/scss/desk/page.scss
index 97d0ac1215..2858e77b71 100644
--- a/frappe/public/scss/desk/page.scss
+++ b/frappe/public/scss/desk/page.scss
@@ -1,6 +1,6 @@
 .page-title {
 	display: flex;
-	align-items: center;
+	align-items: flex-start;
 	.sidebar-toggle-btn {
 		display: flex;
 		margin-right: var(--margin-sm);
@@ -22,15 +22,22 @@
 				display: none;
 			}
 		}
+		margin-top: 2px;
 	}
 	.title-area {
 		display: inline-flex;
-		align-items: center;
+		align-items: flex-start;
 		.title-text {
 			cursor: pointer;
 			margin-bottom: 0px;
 			margin-right: var(--margin-sm)
 		}
+		.indicator-pill {
+			margin-top: 2px;
+		}
+		.sub-heading {
+			font-size: var(--text-sm);
+		}
 	}
 }
 
@@ -60,9 +67,9 @@
 		display: inline-flex;
 	}
 }
-$page-bottom-margin: 60px;
+
 .layout-main-section-wrapper {
-	margin-bottom: $page-bottom-margin;
+	margin-bottom: var(--page-bottom-margin);
 }
 
 .layout-main-section.frappe-card {
@@ -77,7 +84,7 @@ $page-bottom-margin: 60px;
 	background: var(--bg-color);
 	margin-bottom: 5px;
 	.page-head-content {
-		height: $page-head-height;
+		height: var(--page-head-height);
 	}
 	&.drop-shadow {
 		box-shadow: var(--shadow-sm);
diff --git a/frappe/public/scss/desk/variables.scss b/frappe/public/scss/desk/variables.scss
index 5af3c33c68..d979b67693 100644
--- a/frappe/public/scss/desk/variables.scss
+++ b/frappe/public/scss/desk/variables.scss
@@ -45,7 +45,6 @@ $theme-colors: (
 );
 
 $navbar-height: 60px;
-$page-head-height: 68px;
 
 $body-color: var(--text-light);
 $component-active-color: var(--fg-color);