diff --git a/digital-course-file/src/user/Folder.js b/digital-course-file/src/user/Folder.js
index 1faf4b5b7238a58d5f97a999442124ece1265aec..158487baacaf37358840045c5a860557d25b1acb 100644
--- a/digital-course-file/src/user/Folder.js
+++ b/digital-course-file/src/user/Folder.js
@@ -3,11 +3,45 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFolder } from "@fortawesome/free-solid-svg-icons"
 import { Button } from "react-bootstrap";
 import { Link } from "react-router-dom";
+import { useHistory } from "react-router-dom";
+
+import { useContextMenu, Menu, Item, Separator } from "react-contexify";
+
+import "react-contexify/dist/ReactContexify.css";
 
 export default function Folder ({folder}) {
+    const history = useHistory();
+    const MENU_ID = "#abcd123141asscsc!1223";
+
+    const { show } = useContextMenu({
+        id: MENU_ID,
+      });
+
+      function displayMenu(e) {
+        show(e, { props: { id: Number(e.currentTarget.id) } });
+      }
+    
+      function handleItemClick({ event, props, data, triggerEvent }) {
+
+        switch (event.currentTarget.id) {
+          case "open":
+            history.push(`/folder/${folder.id}`);
+            break;
+
+          case "rename":
+            break;
+
+          case "details":
+            break;
+
+        }
+      }
     
+
     return (
+        <div>
         <Button 
+            onContextMenu={displayMenu}
             to={`/folder/${folder.id}`} 
             variant="outline-secondary" 
             className="text-truncate w-100" 
@@ -15,7 +49,22 @@ export default function Folder ({folder}) {
             <FontAwesomeIcon icon={faFolder} className="mr-2"/>
             {folder.name}
         </Button>
-        
+
+        <Menu id={MENU_ID}>
+        <Item id="open" onClick={handleItemClick}>
+          Open
+        </Item>
+        <Item id="rename" onClick={handleItemClick}>
+          Rename
+        </Item>
+
+        <Item id="details" onClick={handleItemClick}>
+          Details
+        </Item>
+
+      </Menu>
+
+        </div>
     );
 
 }
\ No newline at end of file
diff --git a/digital-course-file/src/user/Hero.js b/digital-course-file/src/user/Hero.js
index 3db53a3a21c5cac4981f8cef694cd3087aef2dec..c074b042fc8acd6a3fbf940036090783257443bf 100644
--- a/digital-course-file/src/user/Hero.js
+++ b/digital-course-file/src/user/Hero.js
@@ -102,79 +102,5 @@ const Hero = ({ handleLogout }) => {
 
   
 }
-class ContextMenu extends React.Component {
-  state = {
-      visible: false,
-  };
-  
-  componentDidMount() {
-      document.addEventListener('contextmenu', this._handleContextMenu);
-      document.addEventListener('click', this._handleClick);
-      document.addEventListener('scroll', this._handleScroll);
-  };
-
-  componentWillUnmount() {
-    document.removeEventListener('contextmenu', this._handleContextMenu);
-    document.removeEventListener('click', this._handleClick);
-    document.removeEventListener('scroll', this._handleScroll);
-  }
-  
-  _handleContextMenu = (event) => {
-      event.preventDefault();
-      
-      this.setState({ visible: true });
-      
-      const clickX = event.clientX;
-      const clickY = event.clientY;
-      const screenW = window.innerWidth;
-      const screenH = window.innerHeight;
-      const rootW = this.root.offsetWidth;
-      const rootH = this.root.offsetHeight;
-      
-      const right = (screenW - clickX) > rootW;
-      const left = !right;
-      const top = (screenH - clickY) > rootH;
-      const bottom = !top;
-      
-      if (right) {
-          this.root.style.left = `${clickX + 5}px`;
-      }
-      
-      if (left) {
-          this.root.style.left = `${clickX - rootW - 5}px`;
-      }
-      
-      if (top) {
-          this.root.style.top = `${clickY + 5}px`;
-      }
-      
-      if (bottom) {
-          this.root.style.top = `${clickY - rootH - 5}px`;
-      }
-  };
 
-  _handleClick = (event) => {
-      const { visible } = this.state;
-      const wasOutside = !(event.target.contains === this.root);
-      
-      if (wasOutside && visible) this.setState({ visible: false, });
-  };
-
-  _handleScroll = () => {
-      const { visible } = this.state;
-      
-      if (visible) this.setState({ visible: false, });
-  };
-  
-  render() {
-      const { visible } = this.state;
-      
-      return(visible || null) && 
-          <div ref={ref => {this.root = ref}} className="contextMenu">
-              <div className="contextMenu--option">Delete</div>
-              
-          </div>
-  };
-}
-ReactDOM.render(<ContextMenu/>, document.getElementById('root'));
 export default Hero