diff --git a/frontend/src/scripts/index.js b/frontend/src/scripts/index.js
index cfb4d04..b911750 100644
--- a/frontend/src/scripts/index.js
+++ b/frontend/src/scripts/index.js
@@ -68,6 +68,11 @@ class Main extends Component {
     togglefaq(){
         this.setState({faq: !this.state.faq});
     }
+    renderCloseButton(){
+        return <button style={{"top": 0, "right": 0}} onClick={(e) => {this.togglePhoto()}}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="92" height="92" id="cross"><path fill="white" d="M70.7 64.3c1.8 1.8 1.8 4.6 0 6.4-.9.9-2 1.3-3.2 1.3-1.2 0-2.3-.4-3.2-1.3L46 52.4 27.7 70.7c-.9.9-2 1.3-3.2 1.3s-2.3-.4-3.2-1.3c-1.8-1.8-1.8-4.6 0-6.4L39.6 46 21.3 27.7c-1.8-1.8-1.8-4.6 0-6.4 1.8-1.8 4.6-1.8 6.4 0L46 39.6l18.3-18.3c1.8-1.8 4.6-1.8 6.4 0 1.8 1.8 1.8 4.6 0 6.4L52.4 46l18.3 18.3z"></path></svg>
+        </button>
+    }
     render(){
         let photos_gallery = [];
         let photos_carousel = []
@@ -92,6 +97,7 @@ class Main extends Component {
                 showPlayButton={false}
                 startIndex={this.state.currentImage}
                 showThumbnails={false}
+                renderCustomControls={this.renderCloseButton}
             />
         </Modal>
         }