diff --git a/src/components/ImageSettingsModal.jsx b/src/components/ImageSettingsModal.jsx
index 9778ac7aa..f26e2a1c9 100644
--- a/src/components/ImageSettingsModal.jsx
+++ b/src/components/ImageSettingsModal.jsx
@@ -42,7 +42,11 @@ export default class ImageSettingsModal extends Component {
 
   renameImage = async () => {
     const {
-      match, image, isPendingUpload, toReload, onClose,
+      match,
+      image,
+      isPendingUpload,
+      toReload,
+      onClose,
     } = this.props;
     const { siteName } = match.params;
     const {
@@ -140,7 +144,6 @@ export default class ImageSettingsModal extends Component {
                   )}
               />
             </div>
-
             <form className={elementStyles.modalContent}>
               <div className={elementStyles.modalFormFields}>
                 <FormField
@@ -170,7 +173,13 @@ export default class ImageSettingsModal extends Component {
                         className={(errorMessage || !sha) ? elementStyles.disabled : elementStyles.blue}
                         callback={this.renameImage}
                       />
-                      <button type="button" className={elementStyles.warning} onClick={() => this.setState({ canShowDeleteWarningModal: true })}>Delete</button>
+                      <button
+                        type="button"
+                        className={elementStyles.warning}
+                        onClick={() => this.setState({ canShowDeleteWarningModal: true })}
+                      >
+                        Delete
+                      </button>
                     </>
                   )}
               </div>
diff --git a/src/components/ImagesModal.jsx b/src/components/ImagesModal.jsx
index 8d826484f..0ac4d89de 100644
--- a/src/components/ImagesModal.jsx
+++ b/src/components/ImagesModal.jsx
@@ -1,12 +1,20 @@
 import React, { PureComponent } from 'react';
-import axios from 'axios';
 import PropTypes from 'prop-types';
 import mediaStyles from '../styles/isomer-cms/pages/Media.module.scss';
 import elementStyles from '../styles/isomer-cms/Elements.module.scss';
 import { UploadImageCard } from '../layouts/Images';
+import LoadingButton from './LoadingButton';
 
-export const ImageCard = ({ image, siteName, onClick }) => (
-  <div className={mediaStyles.mediaCard} key={image.path}>
+export const ImageCard = ({
+  image,
+  siteName,
+  onClick,
+  isSelected,
+}) => (
+  <div
+    className={isSelected ? mediaStyles.selectedMediaCard : mediaStyles.mediaCard}
+    key={image.path}
+  >
     <a href="/" onClick={(e) => { e.preventDefault(); onClick(image.path); }}>
       <div className={mediaStyles.mediaCardImageContainer}>
         <img
@@ -18,7 +26,6 @@ export const ImageCard = ({ image, siteName, onClick }) => (
       </div>
       <div className={mediaStyles.mediaCardDescription}>
         <div className={mediaStyles.mediaCardName}>{image.fileName}</div>
-        <i className="bx bxs-edit" />
       </div>
     </a>
   </div>
@@ -27,13 +34,27 @@ export const ImageCard = ({ image, siteName, onClick }) => (
 
 export default class ImagesModal extends PureComponent {
   render() {
-    const { siteName, images, onClose, onImageSelect, readImageToUpload } = this.props;
+    const {
+      siteName,
+      images,
+      onClose,
+      onImageSelect,
+      readImageToUpload,
+      selectedImage,
+      setSelectedImage,
+    } = this.props;
     return (!!images.length
       && (
         <div className={elementStyles.overlay}>
           <div className={mediaStyles.mediaModal}>
             <div className={elementStyles.modalHeader}>
-              <h1>Select Image</h1>
+              <h1 style={{ flexGrow: 1 }}>Select Image</h1>
+              <LoadingButton
+                label="Select image"
+                disabledStyle={elementStyles.disabled}
+                className={elementStyles.blue}
+                callback={onImageSelect}
+              />
               <button type="button" onClick={onClose}>
                 <i className="bx bx-x" />
               </button>
@@ -45,6 +66,10 @@ export default class ImagesModal extends PureComponent {
               />
               <input
                 onChange={readImageToUpload}
+                onClick={(event) => {
+                  // eslint-disable-next-line no-param-reassign
+                  event.target.value = '';
+                }}
                 type="file"
                 id="file-upload"
                 accept="image/png, image/jpeg, image/gif"
@@ -55,8 +80,9 @@ export default class ImagesModal extends PureComponent {
                 <ImageCard
                   image={image}
                   siteName={siteName}
-                  onClick={onImageSelect}
+                  onClick={setSelectedImage}
                   key={image.fileName}
+                  isSelected={image.path === selectedImage}
                 />
               ))}
             </div>
@@ -64,7 +90,7 @@ export default class ImagesModal extends PureComponent {
         </div>
       )
     );
-  };
+  }
 }
 
 ImageCard.propTypes = {
@@ -74,10 +100,18 @@ ImageCard.propTypes = {
   }).isRequired,
   siteName: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
+  isSelected: PropTypes.bool.isRequired,
 };
 
 ImagesModal.propTypes = {
+  images: PropTypes.arrayOf(PropTypes.shape({
+    fileName: PropTypes.string,
+    path: PropTypes.string,
+  })).isRequired,
   onClose: PropTypes.func.isRequired,
   siteName: PropTypes.string.isRequired,
   onImageSelect: PropTypes.func.isRequired,
+  readImageToUpload: PropTypes.func.isRequired,
+  selectedImage: PropTypes.string.isRequired,
+  setSelectedImage: PropTypes.func.isRequired,
 };
diff --git a/src/layouts/EditPage.jsx b/src/layouts/EditPage.jsx
index 2bb2355cb..7ae93eb3d 100644
--- a/src/layouts/EditPage.jsx
+++ b/src/layouts/EditPage.jsx
@@ -43,6 +43,7 @@ export default class EditPage extends Component {
       images: [],
       isSelectingImage: false,
       pendingImageUpload: null,
+      selectedImage: '',
     };
     this.mdeRef = React.createRef();
   }
@@ -129,8 +130,9 @@ export default class EditPage extends Component {
     }));
   }
 
-  onImageClick = (filePath) => {
-    const path = `/${filePath}`;
+  onImageClick = () => {
+    const { selectedImage } = this.state;
+    const path = `/${selectedImage}`;
     const cm = this.mdeRef.current.simpleMde.codemirror;
     cm.replaceSelection(`![](${path})`);
     // set state so that rerender is triggered and image is shown
@@ -170,10 +172,21 @@ export default class EditPage extends Component {
     imgReader.readAsDataURL(event.target.files[0]);
   }
 
+  setSelectedImage = async (filePath) => {
+    this.setState({ selectedImage: filePath });
+  }
+
   render() {
     const { match } = this.props;
     const { siteName, fileName } = match.params;
-    const { editorValue, canShowDeleteWarningModal, images, isSelectingImage, pendingImageUpload } = this.state;
+    const {
+      editorValue,
+      canShowDeleteWarningModal,
+      images,
+      isSelectingImage,
+      pendingImageUpload,
+      selectedImage,
+    } = this.state;
     return (
       <>
         <Header
@@ -185,10 +198,15 @@ export default class EditPage extends Component {
           { isSelectingImage && (
             <ImagesModal
               siteName={siteName}
-              onClose={() => this.setState({ isSelectingImage: false })}
+              onClose={() => this.setState({ isSelectingImage: false, selectedImage: '' })}
               images={images}
-              onImageSelect={this.onImageClick}
+              onImageSelect={() => {
+                this.onImageClick();
+                this.setState({ selectedImage: '' });
+              }}
               readImageToUpload={this.readImageToUpload}
+              selectedImage={selectedImage}
+              setSelectedImage={this.setSelectedImage}
             />
           )}
           <div className={editorStyles.pageEditorSidebar}>
@@ -213,7 +231,7 @@ export default class EditPage extends Component {
                     name: 'image',
                     action: async () => {
                       await this.getImages(siteName);
-                      this.setState({ isSelectingImage: true })
+                      this.setState({ isSelectingImage: true });
                     },
                     className: 'fa fa-picture-o',
                     title: 'Insert Image',
@@ -227,7 +245,10 @@ export default class EditPage extends Component {
             />
           </div>
           <div className={editorStyles.pageEditorMain}>
-            <SimplePage chunk={prependImageSrc(siteName, marked(editorValue))} title={prettifyPageFileName(fileName)} />
+            <SimplePage
+              chunk={prependImageSrc(siteName, marked(editorValue))}
+              title={prettifyPageFileName(fileName)}
+            />
           </div>
         </div>
         <div className={editorStyles.pageEditorFooter}>
diff --git a/src/layouts/Images.jsx b/src/layouts/Images.jsx
index 451628443..a49b0f6f5 100644
--- a/src/layouts/Images.jsx
+++ b/src/layouts/Images.jsx
@@ -122,6 +122,10 @@ export default class Images extends Component {
                   />
                   <input
                     onChange={this.onImageSelect}
+                    onClick={(event) => {
+                      // eslint-disable-next-line no-param-reassign
+                      event.target.value = '';
+                    }}
                     type="file"
                     id="file-upload"
                     accept="image/png, image/jpeg, image/gif"
diff --git a/src/styles/isomer-cms/pages/Media.module.scss b/src/styles/isomer-cms/pages/Media.module.scss
index f524cbac9..39680748d 100644
--- a/src/styles/isomer-cms/pages/Media.module.scss
+++ b/src/styles/isomer-cms/pages/Media.module.scss
@@ -35,6 +35,10 @@
   overflow-y: scroll;
   padding-bottom: 50px;
 
+    .selectedMediaCard{
+      outline: 2px solid $isomer-blue;
+      @extend .mediaCard;
+    }
 
     .mediaCard{
       @include single-site;