diff --git a/package-lock.json b/package-lock.json
index 3d76695..833e7c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,7 +1,7 @@
 {
   "name": "opacity-web2.0",
   "version": "1.0.0",
-  "lockfileVersion": 2,
+  "lockfileVersion": 1,
   "requires": true,
   "packages": {
     "": {
@@ -9352,8 +9352,7 @@
     "@hcaptcha/react-hcaptcha": {
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@hcaptcha/react-hcaptcha/-/react-hcaptcha-0.3.9.tgz",
-      "integrity": "sha512-yc3rRVQCz3w+rq9+Y1yi+hUlZscMDoXli0st8liefZ79gkFRa3vqd2zl+qGeRq+3HG7i+ydNNIXmnWhg8wJCSg==",
-      "requires": {}
+      "integrity": "sha512-yc3rRVQCz3w+rq9+Y1yi+hUlZscMDoXli0st8liefZ79gkFRa3vqd2zl+qGeRq+3HG7i+ydNNIXmnWhg8wJCSg=="
     },
     "@microsoft/api-documenter": {
       "version": "7.13.77",
@@ -9465,8 +9464,7 @@
     "@researchgate/react-intersection-observer": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@researchgate/react-intersection-observer/-/react-intersection-observer-1.3.5.tgz",
-      "integrity": "sha512-aYlsex5Dd6BAHMJvJrUoFp8gzgMSL27xFvrxkVYW0bV1RMAapVsO+QeYLtTaSF/QCflktODodvv+wJm49oMnnQ==",
-      "requires": {}
+      "integrity": "sha512-aYlsex5Dd6BAHMJvJrUoFp8gzgMSL27xFvrxkVYW0bV1RMAapVsO+QeYLtTaSF/QCflktODodvv+wJm49oMnnQ=="
     },
     "@rushstack/node-core-library": {
       "version": "3.44.2",
@@ -10411,17 +10409,6 @@
       "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
       "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk="
     },
-    "bufferutil": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.5.tgz",
-      "integrity": "sha512-HTm14iMQKK2FjFLRTM5lAVcyaUzOnqbPtesFIvREgXpJHdQm8bWS+GkQgIkfaBYRHuCnea7w8UVNfwiAQhlr9A==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "node-gyp-build": "^4.3.0"
-      }
-    },
     "bytes": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz",
@@ -10856,6 +10843,14 @@
         "randomfill": "^1.0.3"
       }
     },
+    "css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "requires": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
     "css-mediaquery": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
@@ -13035,6 +13030,11 @@
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
     },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "meow": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
@@ -13878,6 +13878,11 @@
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
+    "raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
+    },
     "ramda": {
       "version": "0.27.1",
       "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.27.1.tgz",
@@ -13931,6 +13936,20 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-beautiful-dnd": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz",
+      "integrity": "sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==",
+      "requires": {
+        "@babel/runtime": "^7.9.2",
+        "css-box-model": "^1.2.0",
+        "memoize-one": "^5.1.1",
+        "raf-schd": "^4.0.2",
+        "react-redux": "^7.2.0",
+        "redux": "^4.0.4",
+        "use-memo-one": "^1.1.1"
+      }
+    },
     "react-bootstrap": {
       "version": "1.6.4",
       "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.6.4.tgz",
@@ -13958,8 +13977,7 @@
         "@restart/context": {
           "version": "2.1.4",
           "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
-          "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==",
-          "requires": {}
+          "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
         },
         "@restart/hooks": {
           "version": "0.3.27",
@@ -14020,8 +14038,7 @@
     "react-circular-progressbar": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.0.4.tgz",
-      "integrity": "sha512-OfX0ThSxRYEVGaQSt0DlXfyl5w4DbXHsXetyeivmoQrh9xA9bzVPHNf8aAhOIiwiaxX2WYWpLDB3gcpsDJ9oww==",
-      "requires": {}
+      "integrity": "sha512-OfX0ThSxRYEVGaQSt0DlXfyl5w4DbXHsXetyeivmoQrh9xA9bzVPHNf8aAhOIiwiaxX2WYWpLDB3gcpsDJ9oww=="
     },
     "react-copy-to-clipboard": {
       "version": "5.0.4",
@@ -14035,8 +14052,7 @@
     "react-country-region-selector": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/react-country-region-selector/-/react-country-region-selector-3.4.0.tgz",
-      "integrity": "sha512-3zUC0Uhsr6gV8Wxj/BBVJxdTl7pETHPnpDU72OT1n6WrhKVlSYcITEjV0iSyqyk+EmTPM1Fca9JmHRJ+efA2UA==",
-      "requires": {}
+      "integrity": "sha512-3zUC0Uhsr6gV8Wxj/BBVJxdTl7pETHPnpDU72OT1n6WrhKVlSYcITEjV0iSyqyk+EmTPM1Fca9JmHRJ+efA2UA=="
     },
     "react-device-detect": {
       "version": "2.1.2",
@@ -14047,9 +14063,9 @@
       }
     },
     "react-dnd": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.4.tgz",
-      "integrity": "sha512-AFJJXzUIWp5WAhgvI85ESkDCawM0lhoVvfo/lrseLXwFdH3kEO3v8I2C81QPqBW2UEyJBIPStOhPMGYGFtq/bg==",
+      "version": "14.0.5",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.5.tgz",
+      "integrity": "sha512-9i1jSgbyVw0ELlEVt/NkCUkxy1hmhJOkePoCH713u75vzHGyXhPDm28oLfc2NMSBjZRM1Y+wRjHXJT3sPrTy+A==",
       "requires": {
         "@react-dnd/invariant": "^2.0.0",
         "@react-dnd/shallowequal": "^2.0.0",
@@ -14059,9 +14075,9 @@
       }
     },
     "react-dnd-html5-backend": {
-      "version": "14.0.2",
-      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.0.2.tgz",
-      "integrity": "sha512-QgN6rYrOm4UUj6tIvN8ovImu6uP48xBXF2rzVsp6tvj6d5XQ7OjHI4SJ/ZgGobOneRAU3WCX4f8DGCYx0tuhlw==",
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.1.0.tgz",
+      "integrity": "sha512-6ONeqEC3XKVf4eVmMTe0oPds+c5B9Foyj8p/ZKLb7kL2qh9COYxiBHv3szd6gztqi/efkmriywLUVlPotqoJyw==",
       "requires": {
         "dnd-core": "14.0.1"
       }
@@ -14105,8 +14121,7 @@
     "react-google-tag-manager": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-google-tag-manager/-/react-google-tag-manager-2.2.1.tgz",
-      "integrity": "sha512-8yPbEE3r2z0OWRvJYg1HegKQktH2fIJ2hHCFzAk7+GeOHIK7Vcq+dA0wo2Wf81oHSPMHiOY7nhXIviSVJFV64w==",
-      "requires": {}
+      "integrity": "sha512-8yPbEE3r2z0OWRvJYg1HegKQktH2fIJ2hHCFzAk7+GeOHIK7Vcq+dA0wo2Wf81oHSPMHiOY7nhXIviSVJFV64w=="
     },
     "react-helmet": {
       "version": "6.1.0",
@@ -14127,8 +14142,7 @@
         "react-side-effect": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
-          "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==",
-          "requires": {}
+          "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ=="
         }
       }
     },
@@ -14145,8 +14159,7 @@
     "react-loading": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/react-loading/-/react-loading-2.0.3.tgz",
-      "integrity": "sha512-Vdqy79zq+bpeWJqC+xjltUjuGApyoItPgL0vgVfcJHhqwU7bAMKzysfGW/ADu6i0z0JiOCRJjo+IkFNkRNbA3A==",
-      "requires": {}
+      "integrity": "sha512-Vdqy79zq+bpeWJqC+xjltUjuGApyoItPgL0vgVfcJHhqwU7bAMKzysfGW/ADu6i0z0JiOCRJjo+IkFNkRNbA3A=="
     },
     "react-lottie": {
       "version": "1.2.3",
@@ -14359,8 +14372,7 @@
     "reaptcha": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/reaptcha/-/reaptcha-1.7.3.tgz",
-      "integrity": "sha512-j2+JvHssw8FO43aDMrL+Ylb0nlDJDRZNK2olpIMO1SQBkZO2S9c3+oTTJJFPjHznkpfN9RahKBl8NIeL4VHrWA==",
-      "requires": {}
+      "integrity": "sha512-j2+JvHssw8FO43aDMrL+Ylb0nlDJDRZNK2olpIMO1SQBkZO2S9c3+oTTJJFPjHznkpfN9RahKBl8NIeL4VHrWA=="
     },
     "redent": {
       "version": "1.0.0",
@@ -14399,14 +14411,12 @@
     "redux-observable": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/redux-observable/-/redux-observable-1.2.0.tgz",
-      "integrity": "sha512-yeR90RP2WzZzCxxnQPlh2uFzyfFLsfXu8ROh53jGDPXVqj71uNDMmvi/YKQkd9ofiVoO4OYb1snbowO49tCEMg==",
-      "requires": {}
+      "integrity": "sha512-yeR90RP2WzZzCxxnQPlh2uFzyfFLsfXu8ROh53jGDPXVqj71uNDMmvi/YKQkd9ofiVoO4OYb1snbowO49tCEMg=="
     },
     "redux-persist": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz",
-      "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==",
-      "requires": {}
+      "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ=="
     },
     "regenerator-runtime": {
       "version": "0.13.9",
@@ -15008,14 +15018,6 @@
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
-    "string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "requires": {
-        "safe-buffer": "~5.2.0"
-      }
-    },
     "string-argv": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz",
@@ -15050,6 +15052,14 @@
         "define-properties": "^1.1.3"
       }
     },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "strip-ansi": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
@@ -15223,8 +15233,7 @@
     "tabler-react": {
       "version": "2.0.0-alpha.1",
       "resolved": "https://registry.npmjs.org/tabler-react/-/tabler-react-2.0.0-alpha.1.tgz",
-      "integrity": "sha512-rCeINqbKJQKlsY8P/6NA9U2sL+uFL3znO3i0TsiWlhySQY7wOv5sSsGoiI3/gz2pvPTFTsEB9BrGr7HZJazc7g==",
-      "requires": {}
+      "integrity": "sha512-rCeINqbKJQKlsY8P/6NA9U2sL+uFL3znO3i0TsiWlhySQY7wOv5sSsGoiI3/gz2pvPTFTsEB9BrGr7HZJazc7g=="
     },
     "tar": {
       "version": "2.2.2",
@@ -15624,16 +15633,10 @@
       "resolved": "https://registry.npmjs.org/url-to-options/-/url-to-options-1.0.1.tgz",
       "integrity": "sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k="
     },
-    "utf-8-validate": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.7.tgz",
-      "integrity": "sha512-vLt1O5Pp+flcArHGIyKEQq883nBt8nN8tVBcoL0qUXj2XT1n7p70yGIq2VK98I5FdZ1YHc0wk/koOnHjnXWk1Q==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "node-gyp-build": "^4.3.0"
-      }
+    "use-memo-one": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz",
+      "integrity": "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ=="
     },
     "utf8": {
       "version": "2.1.1",
@@ -16440,7 +16443,7 @@
       "requires": {
         "underscore": "1.9.1",
         "web3-core-helpers": "1.2.1",
-        "websocket": "github:web3-js/WebSocket-Node#polyfill/globalThis"
+        "websocket": "websocket@github:web3-js/WebSocket-Node#polyfill/globalThis"
       }
     },
     "web3-shh": {
@@ -16631,8 +16634,7 @@
       "version": "7.5.6",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.6.tgz",
       "integrity": "sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "x-is-string": {
       "version": "0.1.0",
diff --git a/package.json b/package.json
index d3afb26..3dc6bda 100644
--- a/package.json
+++ b/package.json
@@ -36,13 +36,14 @@
     "path-browserify": "^1.0.1",
     "qrcode.react": "^1.0.1",
     "react": "^16.8.6",
+    "react-beautiful-dnd": "^13.1.0",
     "react-bootstrap": "^1.4.3",
     "react-circular-progressbar": "^2.0.4",
     "react-copy-to-clipboard": "^5.0.3",
     "react-country-region-selector": "^3.0.2",
     "react-device-detect": "^2.1.2",
-    "react-dnd": "^14.0.2",
-    "react-dnd-html5-backend": "^14.0.0",
+    "react-dnd": "^14.0.5",
+    "react-dnd-html5-backend": "^14.1.0",
     "react-dom": "^16.8.6",
     "react-dropzone": "^11.3.1",
     "react-file-icon": "^1.0.0",
diff --git a/src/components/FileManager/FileManagerFileEntry.tsx b/src/components/FileManager/FileManagerFileEntry.tsx
index f5cac72..3db4d78 100644
--- a/src/components/FileManager/FileManagerFileEntry.tsx
+++ b/src/components/FileManager/FileManagerFileEntry.tsx
@@ -9,6 +9,7 @@ import { FileIcon, defaultStyles } from "react-file-icon";
 import { useMediaQuery } from "react-responsive";
 import { arraysEqual } from "../../../ts-client-library/packages/util/src/arrayEquality";
 import BrokenBadgeOnEntry from "./BrokenBadgeOnEntry";
+import { useDrag, useDrop } from "react-dnd";
 
 const getFileExtension = (name) => {
   const lastDot = name.lastIndexOf(".");
@@ -30,6 +31,7 @@ export type FileManagerFileEntryProps = {
   handleSelectFile: Function;
   selectedFiles?: FileMetadata[];
   isAccountExpired?: boolean;
+  index?: number;
 };
 
 export const FileManagerFileEntryGrid = ({
@@ -45,12 +47,34 @@ export const FileManagerFileEntryGrid = ({
   handleSelectFile,
   selectedFiles,
   isAccountExpired,
+  index
 }: FileManagerFileEntryProps) => {
   const [fileMeta, setFileMeta] = React.useState<FileMetadata>();
   const [isSelected, setSelected] = React.useState(false);
   const [isBroken, setIsBroken] = React.useState(false);
   const [isMove, setMove] = React.useState(false);
 
+  const elementRef = React.useRef(null);
+
+  const [{ isDragging }, drag] = useDrag(() => ({
+    // what type of item this to determine if a drop target accepts it
+    type: "file",
+    // data of the item to be available to the drop methods
+    item: { id: "id" + index, index },
+    // method to collect additional data for drop handling like whether is currently being dragged
+    collect: (monitor) => {
+      return {
+        isDragging: monitor.isDragging(),
+      };
+    },
+  }));
+
+  drag(elementRef)
+  console.log("isDragging: " + isDragging)
+  if(isDragging) {
+    handleMoveFile(fileMeta)
+  }
+
   const [ref, unobserve] = useIntersectionObserver(() => {
     if (fileEntry) {
       unobserve();
@@ -82,7 +106,7 @@ export const FileManagerFileEntryGrid = ({
   };
 
   return (
-    <div className="grid-item">
+    <div className="grid-item" ref={elementRef}>
       <div className={`items ${isSelected && "grid-item-selected"}`} onClick={() => fileMeta && handleSelectFile(fileMeta)}>
         <div style={{ width: "40px" }}>
           <FileIcon
@@ -176,6 +200,7 @@ export const FileManagerFileEntryList = ({
   handleSelectFile,
   selectedFiles,
   isAccountExpired,
+  index
 }: FileManagerFileEntryProps) => {
   const isMobile = useMediaQuery({ maxWidth: 768 });
   const [fileMeta, setFileMeta] = React.useState<FileMetadata>();
@@ -183,6 +208,27 @@ export const FileManagerFileEntryList = ({
   const [isSelected, setSelected] = React.useState(false);
   const [isMove, setMove] = React.useState(false);
 
+  const elementRef = React.useRef(null);
+
+  const [{ isDragging }, drag] = useDrag(() => ({
+    // what type of item this to determine if a drop target accepts it
+    type: "file",
+    // data of the item to be available to the drop methods
+    item: { id: "id" + index, index },
+    // method to collect additional data for drop handling like whether is currently being dragged
+    collect: (monitor) => {
+      return {
+        isDragging: monitor.isDragging(),
+      };
+    },
+  }));
+
+  drag(elementRef)
+  console.log("isDragging: " + isDragging)
+  if(isDragging) {
+    handleMoveFile(fileMeta)
+  }
+
   const [ref, unobserve] = useIntersectionObserver((e) => {
     if (fileEntry && e.isIntersecting) {
       unobserve();
@@ -233,8 +279,20 @@ export const FileManagerFileEntryList = ({
     handleDeleteBrokenFile(fileLocation);
   };
 
+  // const [{ isDragging }, drag] = useDrag(() => ({
+  //   // data of the item to be available to the drop methods
+  //   item: { id: id, index },
+  //   // method to collect additional data for drop handling like whether is currently being dragged
+  //   collect: (monitor) => {
+  //     return {
+  //       isDragging: monitor.isDragging(),
+  //     };
+  //   },
+  // }));
+
   return (
-    <Table.Row className={isSelected ? "selected" : ""}>
+    // <div ref={elementRef}>
+    <tr className={isSelected ? "selected" : ""} ref={elementRef}>
       <Table.Col className="file-name" onClick={() => fileMeta && handleSelectFile(fileMeta)}>
         <div className="d-flex" ref={ref}>
           <div style={{ width: "18px", marginRight: "40px" }}>
@@ -317,6 +375,7 @@ export const FileManagerFileEntryList = ({
           </Dropdown.Item>
         </DropdownButton>
       </Table.Col>
-    </Table.Row>
+    </tr>
+    // </div>
   );
 };
diff --git a/src/components/FileManager/FileManagerFolderEntry.tsx b/src/components/FileManager/FileManagerFolderEntry.tsx
index 9a22be4..91d633c 100644
--- a/src/components/FileManager/FileManagerFolderEntry.tsx
+++ b/src/components/FileManager/FileManagerFolderEntry.tsx
@@ -8,6 +8,7 @@ import { posix } from "path-browserify";
 import { FileIcon } from "react-file-icon";
 import { useMediaQuery } from "react-responsive";
 import BrokenBadgeOnEntry from "./BrokenBadgeOnEntry";
+import { useDrop } from "react-dnd";
 
 export type FileManagerFolderEntryProps = {
   accountSystem: AccountSystem;
@@ -16,6 +17,7 @@ export type FileManagerFolderEntryProps = {
   handleDeleteItem: (f: FolderFileEntry | FoldersIndexEntry, isFile: boolean) => void;
   handleOpenRenameModal: (f: FolderFileEntry | FoldersIndexEntry, isFile: boolean) => void;
   handlePasteFilePath: (p: string) => void;
+  handleKeyPasteFile: (p: string) => void;
   handleDeleteBrokenFolder: (location: Uint8Array) => void;
   isAccountExpired?: boolean;
   isFilechoosed?: boolean;
@@ -28,12 +30,26 @@ export const FileManagerFolderEntryGrid = ({
   handleDeleteItem,
   handleOpenRenameModal,
   handlePasteFilePath,
+  handleKeyPasteFile,
   handleDeleteBrokenFolder,
   isAccountExpired,
   isFilechoosed,
 }: FileManagerFolderEntryProps) => {
   const [folderMeta, setFolderMeta] = React.useState<FolderMetadata>();
   const [isBroken, setIsBroken] = React.useState(false);
+  const elementRef = React.useRef(null);
+
+  const [, drop] = useDrop({
+    accept: "file",
+    hover(item) {
+      console.log("hovering", item)
+      console.log(folderEntry.path)
+      handlePasteFilePath(folderEntry.path)
+      setCurrentPath(folderEntry.path);
+    }
+  });
+
+  drop(elementRef);
 
   const [ref, unobserve] = useIntersectionObserver((e) => {
     if (folderEntry && e.isIntersecting) {
@@ -56,7 +72,7 @@ export const FileManagerFolderEntryGrid = ({
   };
 
   return (
-    <div className="grid-item">
+    <div className="grid-item" ref={elementRef}>
       <div className="items" onClick={() => !isBroken && folderMeta && setCurrentPath(folderEntry.path)}>
         <div style={{ width: "40px" }}>
           <FileIcon color="#8A8A8A" labelColor="#A8A8A8" fold={false} extension="folder" />
@@ -93,7 +109,7 @@ export const FileManagerFolderEntryGrid = ({
             Rename
           </Dropdown.Item>
           <Dropdown.Divider />
-          <Dropdown.Item disabled={isFilechoosed} eventKey="6" onClick={() => handlePasteFilePath(folderEntry.path)}>
+          <Dropdown.Item disabled={isFilechoosed} eventKey="6" onClick={() => handlePasteFilePath(folderEntry.path)} onChange={() => handleKeyPasteFile(folderEntry.path)}>
             <i className="icon-paste"></i>
             Paste
           </Dropdown.Item>
@@ -119,6 +135,7 @@ export const FileManagerFolderEntryList = ({
   handleDeleteItem,
   handleOpenRenameModal,
   handlePasteFilePath,
+  handleKeyPasteFile,
   handleDeleteBrokenFolder,
   isAccountExpired,
   isFilechoosed,
@@ -126,6 +143,20 @@ export const FileManagerFolderEntryList = ({
   const isMobile = useMediaQuery({ maxWidth: 768 });
   const [folderMeta, setFolderMeta] = React.useState<FolderMetadata>();
   const [isBroken, setIsBroken] = React.useState(false);
+  const elementRef = React.useRef(null);
+
+  const [, drop] = useDrop({
+    accept: "file",
+    hover(item) {
+      console.log("hovering", item)
+      console.log(folderEntry.path)
+      handlePasteFilePath(folderEntry.path)
+      setCurrentPath(folderEntry.path);
+    }
+  });
+
+  drop(elementRef);
+
 
   const [ref, unobserve] = useIntersectionObserver((e) => {
     if (folderEntry && e.isIntersecting) {
@@ -156,7 +187,7 @@ export const FileManagerFolderEntryList = ({
   };
 
   return (
-    <Table.Row>
+    <tr ref={elementRef}>
       <Table.Col className="file-name" onClick={() => !isBroken && folderMeta && setCurrentPath(folderEntry.path)}>
         <div className="d-flex" ref={ref}>
           <i className="icon-folder"></i>
@@ -194,7 +225,7 @@ export const FileManagerFolderEntryList = ({
             Rename
           </Dropdown.Item>
           <Dropdown.Divider />
-          <Dropdown.Item disabled={isFilechoosed} eventKey="6" onClick={() => handlePasteFilePath(folderEntry.path)}>
+          <Dropdown.Item disabled={isFilechoosed} eventKey="6" onClick={() => handlePasteFilePath(folderEntry.path)} onChange={() => handleKeyPasteFile(folderEntry.path)}>
             <i className="icon-paste"></i>
             Paste
           </Dropdown.Item>
@@ -209,6 +240,6 @@ export const FileManagerFolderEntryList = ({
           )}
         </DropdownButton>
       </Table.Col>
-    </Table.Row>
+    </tr>
   );
 };
diff --git a/src/pages/FileManagePage/FileManagePage.tsx b/src/pages/FileManagePage/FileManagePage.tsx
index 2ae0878..b555689 100644
--- a/src/pages/FileManagePage/FileManagePage.tsx
+++ b/src/pages/FileManagePage/FileManagePage.tsx
@@ -74,6 +74,9 @@ const copy = require("../../assets/copy.svg");
 streamsaver.mitm = "/resources/streamsaver/mitm.html";
 Object.assign(streamsaver, { WritableStream });
 import { OPACITY_DRIVE_FOR_MAC, OPACITY_DRIVE_FOR_WINDOWS } from "../../config";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+
 
 let logoutTimeout;
 let fileUploadingList = [];
@@ -83,6 +86,7 @@ const THREAD_COUNT = 10;
 let curThreadNum = 0;
 let uploaderThread = [];
 let location;
+let selectFilesLocation =[];
 
 const FileManagePage = ({ history }) => {
   const isMobile = useMediaQuery({ maxWidth: 768 });
@@ -892,8 +896,8 @@ const FileManagePage = ({ history }) => {
 
   const handleMoveFile = React.useCallback(async (file: FileMetadata) => {
     try {
+      selectFilesLocation[0] = file.location;
       location = file.location;
-      toast.info(`File copied`);
       setIsFileChoosed(false);
     } catch (e) {
       toast.error(`An error occurred while get file location`);
@@ -904,9 +908,10 @@ const FileManagePage = ({ history }) => {
     async (folderpath) => {
       setPageLoading(true);
       try {
-        console.log(location);
-        console.log(folderpath);
-        await accountSystem.moveFile(location, folderpath, false);
+        for(let i=0 ; i< selectFilesLocation.length ; i++)
+        {
+          await accountSystem.moveFile(selectFilesLocation[i], folderpath, false);
+        }
         toast.success(`File successfully moved!`);
         setIsFileChoosed(true);
         setUpdateCurrentFolderSwitch(!updateCurrentFolderSwitch);
@@ -918,6 +923,38 @@ const FileManagePage = ({ history }) => {
     [accountSystem, currentPath, updateCurrentFolderSwitch]
   );
 
+  //move multiple files to folder using keypress
+  const handleKeyMoveFile = async () => {
+    for(let i=0 ; i< selectedFiles.length; i++)
+    {
+      selectFilesLocation[i] = selectedFiles[i].location;
+    }
+    console.log("Cut",selectFilesLocation);
+    setSelectedFiles([]);
+    OnfinishFileManaging();
+  };
+
+  const handleKeyPasteFile = React.useCallback(
+    async () => {
+      setPageLoading(true);
+      console.log("Paste", selectFilesLocation);
+      try {
+        console.log(currentPath);
+        for(let i=0 ; i<selectFilesLocation.length ; i++)
+        {
+          await accountSystem.moveFile(selectFilesLocation[i], currentPath, false);
+        }
+        setUpdateCurrentFolderSwitch(!updateCurrentFolderSwitch);
+        toast.success(`File successfully moved!`);
+        setIsFileChoosed(true);
+      } catch (e) {
+        setPageLoading(false);
+        toast.error(`An error occurred while moving a folder.`);
+      }
+    },
+    [accountSystem, updateCurrentFolderSwitch]
+  );
+
   const deleteMultiFile = React.useCallback(
     async (files: FileMetadata[]) => {
       isFileManaging();
@@ -929,7 +966,7 @@ const FileManagePage = ({ history }) => {
             net: netMiddleware,
             crypto: cryptoMiddleware,
             storageNode: storageNode,
-          },
+          }, 
         });
         bindFileSystemObjectToAccountSystem(accountSystem, fso);
         await accountSystem
@@ -1304,6 +1341,20 @@ const FileManagePage = ({ history }) => {
       e.stopPropagation();
       onSelectAll(e);
     }
+
+    if (e.keyCode === 88 && localStorage.cmd_status === "true") {
+      e.preventDefault();
+      e.stopPropagation();
+      handleKeyMoveFile();
+      console.log("file move func called");
+    }
+
+    if (e.keyCode === 86 && localStorage.cmd_status === "true") {
+      //e.prentDveefault();
+      //e.stopPropagation();
+      handleKeyPasteFile();
+      console.log("file paste func called");
+    }
   };
 
   const keyUpHandler = (e) => {
@@ -1601,6 +1652,7 @@ const FileManagePage = ({ history }) => {
           <div className="breadcrumb-content">
             <Breadcrumb>
               <Breadcrumb.Item href="#" onClick={() => currentPath !== "/" && setCurrentPath("/")}>
+                {console.log("curentPath:",currentPath)}
                 <span className="home-icon"></span>
               </Breadcrumb.Item>
               {currentPath !== "/" &&
@@ -1645,48 +1697,52 @@ const FileManagePage = ({ history }) => {
               )}
 
               {!tableView && (
-                <div className="grid-view">
-                  {folderList.map(
-                    (item) =>
-                      item && (
-                        <FileManagerFolderEntryGrid
-                          key={bytesToB64URL(item.location)}
-                          accountSystem={accountSystem}
-                          folderEntry={item}
-                          handleDeleteItem={handleDeleteItem}
-                          handleOpenRenameModal={handleOpenRenameModal}
-                          handleDeleteBrokenFolder={handleDeleteBrokenFolder}
-                          setCurrentPath={setCurrentPath}
-                          handlePasteFilePath={handlePasteFilePath}
-                          isAccountExpired={isAccountExpired}
-                          isFilechoosed={isFilechoosed}
-                        />
-                      )
-                  )}
-                  {fileList.map(
-                    (item) =>
-                      item && (
-                        <FileManagerFileEntryGrid
-                          key={bytesToB64URL(item.location)}
-                          accountSystem={accountSystem}
-                          fileEntry={item}
-                          fileShare={fileShare}
-                          filePublicShare={filePublicShare}
-                          handleDeleteItem={handleDeleteItem}
-                          handleOpenRenameModal={handleOpenRenameModal}
-                          handleDeleteBrokenFile={handleDeleteBrokenFile}
-                          handleMoveFile={handleMoveFile}
-                          downloadItem={async (f) => {
-                            await fileDownload(f, false);
-                            OnfinishFileManaging();
-                          }}
-                          handleSelectFile={handleSelectFile}
-                          selectedFiles={selectedFiles}
-                          isAccountExpired={isAccountExpired}
-                        />
-                      )
-                  )}
-                </div>
+                 <DndProvider backend={HTML5Backend}>
+                  <div className="grid-view">
+                    {folderList.map(
+                      (item) =>
+                        item && (
+                          <FileManagerFolderEntryGrid
+                            key={bytesToB64URL(item.location)}
+                            accountSystem={accountSystem}
+                            folderEntry={item}
+                            handleDeleteItem={handleDeleteItem}
+                            handleOpenRenameModal={handleOpenRenameModal}
+                            handleDeleteBrokenFolder={handleDeleteBrokenFolder}
+                            setCurrentPath={setCurrentPath}
+                            handlePasteFilePath={handlePasteFilePath}
+                            handleKeyPasteFile={handleKeyPasteFile}
+                            isAccountExpired={isAccountExpired}
+                            //isFilechoosed={isFilechoosed}
+                          />
+                        )
+                    )}
+                    {fileList.map(
+                      (item, idx) =>
+                        item && (
+                          <FileManagerFileEntryGrid
+                            key={bytesToB64URL(item.location)}
+                            accountSystem={accountSystem}
+                            fileEntry={item}
+                            fileShare={fileShare}
+                            filePublicShare={filePublicShare}
+                            handleDeleteItem={handleDeleteItem}
+                            handleOpenRenameModal={handleOpenRenameModal}
+                            handleDeleteBrokenFile={handleDeleteBrokenFile}
+                            handleMoveFile={handleMoveFile}
+                            downloadItem={async (f) => {
+                              await fileDownload(f, false);
+                              OnfinishFileManaging();
+                            }}
+                            handleSelectFile={handleSelectFile}
+                            selectedFiles={selectedFiles}
+                            isAccountExpired={isAccountExpired}
+                            index={idx}
+                          />
+                        )
+                    )}
+                  </div>
+                </DndProvider>
               )}
 
               {tableView && (
@@ -1763,46 +1819,50 @@ const FileManagePage = ({ history }) => {
                     </tr>
                   </Table.Header>
                   <Table.Body>
-                    {folderList.map(
-                      (item) =>
-                        item && (
-                          <FileManagerFolderEntryList
-                            key={bytesToB64URL(item.location)}
-                            accountSystem={accountSystem}
-                            folderEntry={item}
-                            handleDeleteItem={handleDeleteItem}
-                            handleOpenRenameModal={handleOpenRenameModal}
-                            handleDeleteBrokenFolder={handleDeleteBrokenFolder}
-                            setCurrentPath={setCurrentPath}
-                            handlePasteFilePath={handlePasteFilePath}
-                            isAccountExpired={isAccountExpired}
-                            isFilechoosed={isFilechoosed}
-                          />
-                        )
-                    )}
-                    {fileList.map(
-                      (item) =>
-                        item && (
-                          <FileManagerFileEntryList
-                            key={bytesToB64URL(item.location)}
-                            accountSystem={accountSystem}
-                            fileEntry={item}
-                            fileShare={fileShare}
-                            filePublicShare={filePublicShare}
-                            handleDeleteItem={handleDeleteItem}
-                            handleDeleteBrokenFile={handleDeleteBrokenFile}
-                            handleMoveFile={handleMoveFile}
-                            handleOpenRenameModal={handleOpenRenameModal}
-                            downloadItem={async (f) => {
-                              await fileDownload(f);
-                              OnfinishFileManaging();
-                            }}
-                            handleSelectFile={handleSelectFile}
-                            selectedFiles={selectedFiles}
-                            isAccountExpired={isAccountExpired}
-                          />
-                        )
-                    )}
+                    <DndProvider backend={HTML5Backend}>
+                      {folderList.map(
+                        (item) =>
+                          item && (
+                            <FileManagerFolderEntryList
+                              key={bytesToB64URL(item.location)}
+                              accountSystem={accountSystem}
+                              folderEntry={item}
+                              handleDeleteItem={handleDeleteItem}
+                              handleOpenRenameModal={handleOpenRenameModal}
+                              handleDeleteBrokenFolder={handleDeleteBrokenFolder}
+                              setCurrentPath={setCurrentPath}
+                              handlePasteFilePath={handlePasteFilePath}
+                              handleKeyPasteFile={handleKeyPasteFile}
+                              isAccountExpired={isAccountExpired}
+                              //isFilechoosed={isFilechoosed}
+                            />
+                          )
+                      )}
+                      {fileList.map(
+                        (item, idx) =>
+                          item && (
+                            <FileManagerFileEntryList
+                              key={bytesToB64URL(item.location)}
+                              accountSystem={accountSystem}
+                              fileEntry={item}
+                              fileShare={fileShare}
+                              filePublicShare={filePublicShare}
+                              handleDeleteItem={handleDeleteItem}
+                              handleDeleteBrokenFile={handleDeleteBrokenFile}
+                              handleMoveFile={handleMoveFile}
+                              handleOpenRenameModal={handleOpenRenameModal}
+                              downloadItem={async (f) => {
+                                await fileDownload(f);
+                                OnfinishFileManaging();
+                              }}
+                              handleSelectFile={handleSelectFile}
+                              selectedFiles={selectedFiles}
+                              isAccountExpired={isAccountExpired}
+                              index={idx}
+                            />
+                          )
+                      )}
+                    </DndProvider>
                   </Table.Body>
                 </Table>
               )}