diff --git a/frappe/core/page/recorder/recorder.js b/frappe/core/page/recorder/recorder.js
index f38af41af0..4d6d6aa84c 100644
--- a/frappe/core/page/recorder/recorder.js
+++ b/frappe/core/page/recorder/recorder.js
@@ -2,7 +2,8 @@ frappe.pages['recorder'].on_page_load = function(wrapper) {
 	frappe.ui.make_app_page({
 		parent: wrapper,
 		title: 'Recorder',
-		single_column: true
+		single_column: true,
+		card_layout: true
 	});
 
 	frappe.recorder = new Recorder(wrapper);
diff --git a/frappe/public/js/frappe/recorder/RecorderDetail.vue b/frappe/public/js/frappe/recorder/RecorderDetail.vue
index 53b3c8720b..57e63a0233 100644
--- a/frappe/public/js/frappe/recorder/RecorderDetail.vue
+++ b/frappe/public/js/frappe/recorder/RecorderDetail.vue
@@ -1,11 +1,6 @@
 <template>
 	<div>
-		<div class="frappe-list">
-			<div class="list-filters"></div>
-			<div style="margin-bottom:9px" class="list-toolbar-wrapper hide">
-				<div class="list-toolbar btn-group" style="display:inline-block; margin-right: 10px;"></div>
-			</div>
-			<div style="clear:both"></div>
+		<div class="page-form">
 			<div class="filter-list">
 				<div class="tag-filters-area">
 					<div class="active-tag-filters">
@@ -26,6 +21,13 @@
 					</button>
 				</div>
 			</div>
+		</div>
+		<div class="frappe-list">
+			<div class="list-filters"></div>
+			<div style="margin-bottom:9px" class="list-toolbar-wrapper hide">
+				<div class="list-toolbar btn-group" style="display:inline-block; margin-right: 10px;"></div>
+			</div>
+			<div style="clear:both"></div>
 			<div  v-if="requests.length != 0" class="result">
 				<div class="list-headers">
 					<header class="level list-row list-row-head text-muted small">
diff --git a/frappe/public/js/frappe/recorder/RecorderRoot.vue b/frappe/public/js/frappe/recorder/RecorderRoot.vue
index 734b558cb8..0877acc463 100644
--- a/frappe/public/js/frappe/recorder/RecorderRoot.vue
+++ b/frappe/public/js/frappe/recorder/RecorderRoot.vue
@@ -7,5 +7,8 @@
 <script>
 export default {
 	name: "RecorderRoot",
+	created() {
+		this.$router.push({name: 'recorder-detail'});
+	},
 };
 </script>
diff --git a/frappe/public/js/frappe/recorder/recorder.js b/frappe/public/js/frappe/recorder/recorder.js
index bf771c2709..f3a33e6a8f 100644
--- a/frappe/public/js/frappe/recorder/recorder.js
+++ b/frappe/public/js/frappe/recorder/recorder.js
@@ -10,7 +10,7 @@ Vue.use(VueRouter);
 const routes = [
 	{
 		name: "recorder-detail",
-		path: '/app',
+		path: '/detail',
 		component: RecorderDetail,
 	},
 	{