diff --git a/interface/app/$libraryId/Explorer/QuickPreview/index.tsx b/interface/app/$libraryId/Explorer/QuickPreview/index.tsx
index 6db4b813c..d728347b5 100644
--- a/interface/app/$libraryId/Explorer/QuickPreview/index.tsx
+++ b/interface/app/$libraryId/Explorer/QuickPreview/index.tsx
@@ -192,6 +192,12 @@ export const QuickPreview = () => {
 		getQuickPreviewStore().itemIndex = 0;
 	});
 
+	//close quick preview
+	useShortcut('closeQuickPreview', (e) => {
+		e.preventDefault();
+		getQuickPreviewStore().open = false;
+	});
+
 	// Toggle metadata
 	useShortcut('toggleMetaData', () => setShowMetadata(!showMetadata));
 
@@ -632,7 +638,7 @@ const IconButton = ({
 	return (
 		<button
 			className={clsx(
-				'text-md inline-flex h-[30px] w-[30px] items-center justify-center rounded opacity-80 outline-none',
+				'text-md inline-flex size-[30px] items-center justify-center rounded opacity-80 outline-none',
 				'hover:opacity-100',
 				'focus:opacity-100',
 				'disabled:pointer-events-none disabled:opacity-40',
diff --git a/interface/hooks/useShortcut.ts b/interface/hooks/useShortcut.ts
index 0ddf85c33..1c80781e0 100644
--- a/interface/hooks/useShortcut.ts
+++ b/interface/hooks/useShortcut.ts
@@ -1,7 +1,7 @@
+import { valtioPersist } from '@sd/client';
 import { useMemo } from 'react';
 import { useKeys } from 'rooks';
 import { useSnapshot } from 'valtio';
-import { valtioPersist } from '@sd/client';
 import { useRoutingContext } from '~/RoutingContext';
 import { OperatingSystem } from '~/util/Platform';
 
@@ -119,6 +119,9 @@ const shortcuts = {
 		macOS: ['Meta', 'KeyO'],
 		all: ['Enter']
 	},
+	closeQuickPreview: {
+		all: ['Escape']
+	},
 	delItem: {
 		macOS: ['Meta', 'Backspace'],
 		all: ['Delete']