diff --git a/src/commands/Dashboard.ts b/src/commands/Dashboard.ts
index 8a693a3b..17190abf 100644
--- a/src/commands/Dashboard.ts
+++ b/src/commands/Dashboard.ts
@@ -495,23 +495,10 @@ export class Dashboard {
    * Update the metadata of the selected file
    */
   private static async updateMediaMetadata({ file, filename, page, folder, ...metadata }: { file:string; filename:string; page: number; folder: string | null; metadata: any; }) {
-    const name = basename(file);
-
     Dashboard.mediaLib.set(file, metadata);
 
     // Check if filename needs to be updated
-    if (name !== filename && filename) {
-      try {
-        const oldFileInfo = parse(file);
-        const newFileInfo = parse(filename);
-        const newPath = join(dirname(file), `${newFileInfo.name}${oldFileInfo.ext}`);
-        renameSync(file, newPath);
-        Dashboard.mediaLib.rename(file, newPath);
-        Dashboard.resetMedia();
-      } catch(err) {
-        Notifications.error(`Something went wrong updating ${name}`);
-      }
-    }
+    Dashboard.mediaLib.updateFilename(file, filename);
 
     Dashboard.getMedia(page || 0, folder || "");
   }
diff --git a/src/dashboardWebView/components/Media/Item.tsx b/src/dashboardWebView/components/Media/Item.tsx
index 29084b36..81874481 100644
--- a/src/dashboardWebView/components/Media/Item.tsx
+++ b/src/dashboardWebView/components/Media/Item.tsx
@@ -15,15 +15,15 @@ export interface IItemProps {
 }
 
 export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWithChildren<IItemProps>) => {
-  const settings = useRecoilValue(SettingsSelector);
-  const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
   const [ , setLightbox ] = useRecoilState(LightboxAtom);
   const [ showAlert, setShowAlert ] = React.useState(false);
   const [ showForm, setShowForm ] = React.useState(false);
-  const viewData = useRecoilValue(ViewDataSelector);
   const [ caption, setCaption ] = React.useState(media.caption);
   const [ alt, setAlt ] = React.useState(media.alt);
   const [ filename, setFilename ] = React.useState<string | null>(null);
+  const settings = useRecoilValue(SettingsSelector);
+  const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
+  const viewData = useRecoilValue(ViewDataSelector);
   const page = useRecoilValue(PageSelector);
 
   const parseWinPath = (path: string | undefined) => {
@@ -55,6 +55,10 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
     return relPath;
   };
 
+  const getFileName = () => {
+    return basename(parseWinPath(media.fsPath) || "");
+  };
+
   const copyToClipboard = () => {
     const relPath = getRelPath();
     Messenger.send(DashboardMessage.copyToClipboard, parseWinPath(relPath) || "");
@@ -137,7 +141,13 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
       folder: selectedFolder,
       page
     });
+    
     setShowForm(false);
+
+    // Reset the values
+    setAlt(media.alt);
+    setCaption(media.caption);
+    setFilename(getFileName());
   };
 
   useEffect(() => {
@@ -155,7 +165,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
   useEffect(() => {
     const name = basename(parseWinPath(media.fsPath) || "");
     if (name !== filename) {
-      setFilename(name);
+      setFilename(getFileName());
     }
   }, [media.fsPath]);
 
diff --git a/src/helpers/MediaLibrary.ts b/src/helpers/MediaLibrary.ts
index 044b8a07..584b4828 100644
--- a/src/helpers/MediaLibrary.ts
+++ b/src/helpers/MediaLibrary.ts
@@ -1,8 +1,10 @@
 import { Dashboard } from '../commands/Dashboard';
 import { workspace } from 'vscode';
 import { JsonDB } from 'node-json-db/dist/JsonDB';
-import { join } from 'path';
+import { basename, dirname, join, parse } from 'path';
 import { Folders, WORKSPACE_PLACEHOLDER } from '../commands/Folders';
+import { existsSync, renameSync } from 'fs';
+import { Notifications } from './Notifications';
 
 interface MediaRecord {
   description: string;
@@ -66,6 +68,28 @@ export class MediaLibrary {
     }
   }
 
+  public updateFilename(filePath: string, filename: string) {
+    const name = basename(filePath);
+    
+    if (name !== filename && filename) {
+      try {
+        const oldFileInfo = parse(filePath);
+        const newFileInfo = parse(filename);
+        const newPath = join(dirname(filePath), `${newFileInfo.name}${oldFileInfo.ext}`);
+
+        if (existsSync(newPath)) {
+          Notifications.warning(`The name "${filename}" already exists at the file location.`);
+        } else {
+          renameSync(filePath, newPath);
+          this.rename(filePath, newPath);
+          Dashboard.resetMedia();
+        }
+      } catch(err) {
+        Notifications.error(`Something went wrong updating "${name}" to "${filename}".`);
+      }
+    }
+  }
+
   private parsePath(path: string) {
     const wsFolder = Folders.getWorkspaceFolder();
     const isWindows = process.platform === 'win32';