diff --git a/frappe/desk/page/user_profile/user_profile.css b/frappe/desk/page/user_profile/user_profile.css
index 5c58d765a6..5d6c775474 100644
--- a/frappe/desk/page/user_profile/user_profile.css
+++ b/frappe/desk/page/user_profile/user_profile.css
@@ -1,3 +1,26 @@
 .recent-activity .new-timeline {
 	padding-top: 0;
+}
+
+.recent-activity-title {
+	font-weight: 700;
+	font-size: var(--text-xl);
+	color: var(--text-color);
+}
+
+.recent-activity .recent-activity-footer {
+	margin-left: calc(var(--timeline-left-padding) + var(--timeline-item-left-margin));
+	max-width: var(--timeline-content-max-width);
+}
+
+.recent-activity .show-more-activity-btn {
+	display: block;
+	margin: auto;
+	width: max-content;
+	margin-top: 35px;
+	font-size: var(--text-md);
+}
+
+.recent-activity {
+	padding-bottom: 60px;
 }
\ No newline at end of file
diff --git a/frappe/desk/page/user_profile/user_profile.html b/frappe/desk/page/user_profile/user_profile.html
index 43dd66e62e..911ccc702d 100644
--- a/frappe/desk/page/user_profile/user_profile.html
+++ b/frappe/desk/page/user_profile/user_profile.html
@@ -36,8 +36,9 @@
 			</div>
 		</div>
 		<div class="recent-activity">
-			<p class="recent-activity-title h6 uppercase">{%=__("Recent Activity") %}</p>
-			<div class="recent-activity-list py-2"></div>
+			<div class="recent-activity-title">{%=__("Recent Activity") %}</div>
+			<div class="recent-activity-list"></div>
+			<div class="recent-activity-footer"></div>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/frappe/desk/page/user_profile/user_profile.js b/frappe/desk/page/user_profile/user_profile.js
index 933643c4fe..dd3a886299 100644
--- a/frappe/desk/page/user_profile/user_profile.js
+++ b/frappe/desk/page/user_profile/user_profile.js
@@ -1,9 +1,8 @@
 frappe.pages['user-profile'].on_page_load = function (wrapper) {
-	frappe.ui.make_app_page({
-		parent: wrapper,
-		title: __('User Profile'),
-	});
 	frappe.require('assets/js/user_profile_controller.min.js', () => {
+		frappe.ui.make_app_page({
+			parent: wrapper,
+		});
 		let user_profile = new frappe.ui.UserProfile(wrapper);
 		user_profile.show();
 	});
diff --git a/frappe/desk/page/user_profile/user_profile_controller.js b/frappe/desk/page/user_profile/user_profile_controller.js
index a00ec953d6..70f342bab3 100644
--- a/frappe/desk/page/user_profile/user_profile_controller.js
+++ b/frappe/desk/page/user_profile/user_profile_controller.js
@@ -15,7 +15,9 @@ class UserProfile {
 
 		//validate if user
 		if (route.length > 1) {
+			frappe.dom.freeze(__('Loading user profile') + '...');
 			frappe.db.exists('User', this.user_id).then(exists => {
+				frappe.dom.unfreeze();
 				if (exists) {
 					this.make_user_profile();
 				} else {
@@ -376,6 +378,7 @@ class UserProfile {
 	setup_user_activity_timeline() {
 		this.user_activity_timeline = new UserProfileTimeline({
 			parent: this.wrapper.find('.recent-activity-list'),
+			footer: this.wrapper.find('.recent-activity-footer'),
 			user: this.user_id
 		});
 
@@ -421,9 +424,9 @@ class UserProfileTimeline extends BaseTimeline {
 	}
 
 	setup_show_more_activity() {
-		this.show_more_button = $(`<button class="btn btn-default btn-xs show-more-activity">${__('Show More')}</button>`);
+		this.show_more_button = $(`<a class="show-more-activity-btn">${__('Show More Activity')}</a>`);
 		this.show_more_button.hide();
-		this.timeline_wrapper.after(this.show_more_button);
+		this.footer.append(this.show_more_button);
 		this.show_more_button.on('click', () => this.show_more_activity());
 	}
 
diff --git a/frappe/public/scss/desk/css_variables.scss b/frappe/public/scss/desk/css_variables.scss
index 42b1c09d1d..758c7efbb9 100644
--- a/frappe/public/scss/desk/css_variables.scss
+++ b/frappe/public/scss/desk/css_variables.scss
@@ -214,4 +214,11 @@
 	--criticism-color: var(--red-600);
 	--criticism-bg: var(--red-100);
 	--btn-height: 28px;
+
+	// timeline
+	--timeline-item-icon-size: 34px;
+	--timeline-item-left-margin: var(--margin-xl);
+	--timeline-item-bottom-margin: var(--margin-sm);
+	--timeline-content-max-width: 700px;
+	--timeline-left-padding: calc(var(--padding-xl) + var(--timeline-item-icon-size)/2)
 }
\ No newline at end of file
diff --git a/frappe/public/scss/desk/timeline.scss b/frappe/public/scss/desk/timeline.scss
index e5f04392b1..571fb0b26c 100644
--- a/frappe/public/scss/desk/timeline.scss
+++ b/frappe/public/scss/desk/timeline.scss
@@ -18,12 +18,8 @@ $threshold: 34;
 }
 
 .new-timeline {
-	--timeline-item-icon-size: 34px;
-	--timeline-item-left-margin: var(--margin-xl);
-	--timeline-item-bottom-margin: var(--margin-sm);
-
 	position: relative;
-	padding-left: calc(var(--padding-xl) + var(--timeline-item-icon-size)/2);
+	padding-left: var(--timeline-left-padding);
 	padding-top: var(--padding-lg);
 
 	@include media-breakpoint-down(xs) {
@@ -32,7 +28,7 @@ $threshold: 34;
 
 	&:before {
 		content: ' ';
-		top: 45px;
+		top: 25px;
 		position: absolute;
 		border-left: 1px solid var(--dark-border-color);
 		bottom: calc(-1 * var(--timeline-item-bottom-margin));
@@ -92,7 +88,7 @@ $threshold: 34;
 			font-weight: var(--text-bold);
 		}
 		.timeline-content {
-			max-width: 700px;
+			max-width: var(--timeline-content-max-width);
 			padding: var(--padding-sm);
 			margin-left: var(--timeline-item-left-margin);
 			&.frappe-card {