diff --git a/src/client/webapp/elements/overlays/overlay-image.tsx b/src/client/webapp/elements/overlays/overlay-image.tsx
index 29ed243..2314fc7 100644
--- a/src/client/webapp/elements/overlays/overlay-image.tsx
+++ b/src/client/webapp/elements/overlays/overlay-image.tsx
@@ -3,12 +3,15 @@ const electronConsole = electronRemote.getGlobal('console') as Console;
 import Logger from '../../../../logger/logger';
 const LOG = Logger.create(__filename, electronConsole);
 
-import React, { FC, useEffect, useMemo, useRef, useState } from 'react';
+import * as FileType from 'file-type';
+
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import CombinedGuild from '../../guild-combined';
 import ElementsUtil from '../require/elements-util';
 import { Resource } from '../../data-types';
-import Button from '../components/button';
 import DownloadButton from '../components/button-download';
+import createImageContextMenu from '../context-menu-img';
+import Q from '../../q-module';
 
 type ButtonText = 'Loading...' | 'Error' | 'Save' | 'Downloading...' | 'Writing...' | 'Reveal in Explorer' | 'Try Again';
 
@@ -24,6 +27,8 @@ const ImageOverlay: FC<ImageOverlayProps> = (props: ImageOverlayProps) => {
 	const [ resource, setResource ] = useState<Resource | null>(null);
 	const [ resourceImgSrc, setResourceImgSrc ] = useState<string>('./img/loading.svg');
 	const [ resourceErr, setResourceErr ] = useState<boolean>(false);
+	const [ mime, setMime ] = useState<string | null>(null);
+	const [ ext, setExt ] = useState<string | null>(null);
 	
 	useEffect(() => {
 		(async () => {
@@ -32,21 +37,34 @@ const ImageOverlay: FC<ImageOverlayProps> = (props: ImageOverlayProps) => {
 				setResource(resource);
 				const resourceImgSrc = await ElementsUtil.getImageBufferSrc(resource.data);
 				setResourceImgSrc(resourceImgSrc);
+				const { mime, ext } = (await FileType.fromBuffer(resource.data)) ?? { mime: null, ext: null };
+				if (mime === null || ext === null) throw new Error('unable to get mime/ext');
+				setMime(mime);
+				setExt(ext);
 			} catch (e) {
 				LOG.error('unable to load image for overlay', e);
 				setResource(null);
 				setResourceImgSrc('./img/error.png');
 				setResourceErr(true);
+				return;
 			}
-			
 		})();
 	});
 
+	const onImageContextMenu = (e: React.MouseEvent) => {
+		// TODO: This should be in react!
+		if (!resource) return;
+		const contextMenu = createImageContextMenu(document, new Q(document), guild, resourceName, resource.data, mime as string, ext as string, false);
+		document.body.appendChild(contextMenu);
+		const relativeTo = { x: e.pageX, y: e.pageY };
+		ElementsUtil.alignContextElement(contextMenu, relativeTo, { top: 'centerY', left: 'right' });
+	};
+
 	const sizeText = useMemo(() => resource ? ElementsUtil.humanSize(resource.data.length) : 'Loading Size...', [ resource ]);
 
 	return (
 		<div className="content popup-image" onClick={(e) => { e.stopPropagation(); /* prevent overlay click */ }}>
-			<img src={resourceImgSrc} alt={resourceName} title={resourceName}></img>
+			<img src={resourceImgSrc} alt={resourceName} title={resourceName} onContextMenu={onImageContextMenu}></img>
 			<div className="download">
 				<div className="info">
 					<div className="name">{resourceName}</div>