diff --git a/frappe/public/icons/timeless/icons.svg b/frappe/public/icons/timeless/icons.svg
index 29aa428d99..a67fadfd36 100644
--- a/frappe/public/icons/timeless/icons.svg
+++ b/frappe/public/icons/timeless/icons.svg
@@ -120,6 +120,12 @@
 		<path d="M3.14886 8.08422L5.23297 6.00012L3.14886 3.91602" stroke="var(--icon-stroke)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 	</symbol>
 
+	<symbol viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" id="icon-external-link">
+		<path d="M9.75003 7.83333V9C9.75003 9.82843 9.07846 10.5 8.25003 10.5H3.25C2.42157 10.5 1.75 9.82843 1.75 9V4C1.75 3.17158 2.42151 2.50001 3.24993 2.50001C3.62327 2.5 4.02808 2.5 4.4167 2.5" stroke="var(--icon-stroke)" stroke-linecap="round" stroke-linejoin="round"/>
+		<path d="M6.75 1.5H10.25V4.5" stroke="var(--icon-stroke)" stroke-linecap="round" stroke-linejoin="round"/>
+		<path d="M6.75 5L9.75 2" stroke="var(--icon-stroke)" stroke-linecap="round" stroke-linejoin="round"/>
+	</symbol>
+
 	<symbol viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" fill="#112B42" id="icon-up">
 		<path d="M3 5h6L6 2 3 5z"></path>
 		<path opacity=".5" d="M6 10l3-3H3l3 3z"></path>
@@ -302,7 +308,7 @@
 		<path stroke="#E24C4C" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M13.2 14.4v8.571"></path>
 	</symbol>
 
-	<symbol viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="icon-external-link">
+	<symbol viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="icon-pen">
 		<path fill-rule="evenodd" clip-rule="evenodd" d="M10.348 3.207a1 1 0 0 1 1.415 0l1.03 1.03a1 1 0 0 1 0 1.415l-6.626 6.626L2.5 13.5l1.222-3.667 6.626-6.626z" stroke="var(--icon-stroke)" stroke-linecap="round" stroke-linejoin="round"></path>
 	</symbol>
 
diff --git a/frappe/public/js/frappe/file_uploader/TreeNode.vue b/frappe/public/js/frappe/file_uploader/TreeNode.vue
index 308bb2b825..9b9f673ec9 100644
--- a/frappe/public/js/frappe/file_uploader/TreeNode.vue
+++ b/frappe/public/js/frappe/file_uploader/TreeNode.vue
@@ -1,22 +1,40 @@
 <template>
 	<div class="tree-node" :class="{ opened: node.open }">
 		<span
+			ref="reference"
 			class="tree-link"
 			@click="emit('node-click', node)"
 			:class="{ active: node.value === selected_node.value }"
 			:disabled="node.fetching"
+			@mouseover="onMouseover"
+			@mouseleave="onMouseleave"
 		>
 			<div v-html="icon"></div>
 			<a class="tree-label">{{ node.label }}</a>
+			<!-- Icon open File record in new tab -->
+			<a
+				v-if="node.is_leaf"
+				:href="open_file(node.value)"
+				:disabled="node.fetching"
+				target="_blank"
+				class="file-doc-link ml-2"
+				v-html="frappe.utils.icon('external-link', 'sm')"
+				@click.stop
+			/>
 		</span>
+		<div v-if="node.file_url && frappe.utils.is_image_file(node.file_url)">
+			<div v-show="isOpen" class="popover" ref="popover" role="tooltip">
+				<img :src="node.file_url" />
+			</div>
+		</div>
 		<ul class="tree-children" v-show="node.open">
 			<TreeNode
 				v-for="n in node.children"
 				:key="n.value"
 				:node="n"
 				:selected_node="selected_node"
-				@node-click="n => emit('node-click', n)"
-				@load-more="n => emit('load-more', n)"
+				@node-click="(n) => emit('node-click', n)"
+				@load-more="(n) => emit('load-more', n)"
 			/>
 			<button
 				class="btn btn-xs btn-load-more"
@@ -32,7 +50,8 @@
 
 <script setup>
 import TreeNode from "./TreeNode.vue";
-import { computed } from "vue";
+import { createPopper } from "@popperjs/core";
+import { ref, computed } from "vue";
 
 // props
 const props = defineProps({
@@ -50,7 +69,7 @@ let icon = computed(() => {
 		open: frappe.utils.icon("folder-open", "md"),
 		closed: frappe.utils.icon("folder-normal", "md"),
 		leaf: frappe.utils.icon("primitive-dot", "xs"),
-		search: frappe.utils.icon("search")
+		search: frappe.utils.icon("search"),
 	};
 
 	if (props.node.by_search) return icons.search;
@@ -59,6 +78,52 @@ let icon = computed(() => {
 	return icons.closed;
 });
 
+let open_file = (filename) => {
+	return frappe.utils.get_form_link("File", filename);
+};
+
+const reference = ref(null);
+const popover = ref(null);
+let isOpen = ref(false);
+
+let popper = ref(null);
+
+function setupPopper() {
+	if (!popper.value) {
+		popper.value = createPopper(reference.value, popover.value, {
+			placement: "top",
+			modifiers: [
+				{
+					name: "offset",
+					options: {
+						offset: [0, 4],
+					},
+				},
+			],
+		});
+	} else {
+		popper.value.update();
+	}
+}
+
+let hoverTimer = null;
+let leaveTimer = null;
+
+function onMouseover() {
+	leaveTimer && clearTimeout(leaveTimer) && (leaveTimer = null);
+	hoverTimer && clearTimeout(hoverTimer);
+	hoverTimer = setTimeout(() => {
+		isOpen.value = true;
+		setupPopper();
+	}, 800);
+}
+function onMouseleave() {
+	hoverTimer && clearTimeout(hoverTimer) && (hoverTimer = null);
+	leaveTimer && clearTimeout(leaveTimer);
+	leaveTimer = setTimeout(() => {
+		isOpen.value = false;
+	}, 100);
+}
 </script>
 
 <style scoped>
@@ -66,4 +131,7 @@ let icon = computed(() => {
 	margin-left: 1.6rem;
 	margin-top: 0.5rem;
 }
+.popover {
+	padding: 10px;
+}
 </style>
diff --git a/frappe/public/scss/desk/tree.scss b/frappe/public/scss/desk/tree.scss
index d400932e51..bf99d7c55d 100644
--- a/frappe/public/scss/desk/tree.scss
+++ b/frappe/public/scss/desk/tree.scss
@@ -58,6 +58,19 @@
 	}
 }
 
+.tree-link .file-doc-link {
+	opacity: 0;
+}
+
+.tree-link:hover .file-doc-link {
+	opacity: 0.4;
+}
+
+.tree-link .file-doc-link:hover {
+	transform: scale(1.1);
+	opacity: 0.5;
+}
+
 .tree-hover {
 	background-color: var(--highlight-color);
 	min-height: 25px;
diff --git a/package.json b/package.json
index 0794ae5d1d..63907dee69 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
   },
   "homepage": "https://frappeframework.com",
   "dependencies": {
+    "@popperjs/core": "^2.11.2",
     "@editorjs/editorjs": "^2.26.3",
     "@frappe/esbuild-plugin-postcss2": "^0.1.3",
     "@redis/client": "^1.5.8",
diff --git a/yarn.lock b/yarn.lock
index ab80f90c90..21bf22401a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -81,6 +81,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@popperjs/core@^2.11.2":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@redis/client@^1.5.8":
   version "1.5.8"
   resolved "https://registry.yarnpkg.com/@redis/client/-/client-1.5.8.tgz#a375ba7861825bd0d2dc512282b8bff7b98dbcb1"