diff --git a/package-lock.json b/package-lock.json
index 62728a18..73e37a36 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9208,21 +9208,13 @@
       }
     },
     "node_modules/dnd-core": {
-      "version": "14.0.1",
-      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz",
-      "integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.0.tgz",
+      "integrity": "sha512-wTDYKyjSqWuYw3ZG0GJ7k+UIfzxTNoZLjDrut37PbcPGNfwhlKYlPUqjAKUjOOv80izshUiqusaKgJPItXSevA==",
       "dependencies": {
         "@react-dnd/asap": "^4.0.0",
         "@react-dnd/invariant": "^2.0.0",
-        "redux": "^4.1.1"
-      }
-    },
-    "node_modules/dnd-core/node_modules/redux": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
-      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
-      "dependencies": {
-        "@babel/runtime": "^7.9.2"
+        "redux": "^4.0.5"
       }
     },
     "node_modules/dns-equal": {
@@ -20674,13 +20666,13 @@
       }
     },
     "node_modules/react-dnd": {
-      "version": "14.0.5",
-      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.5.tgz",
-      "integrity": "sha512-9i1jSgbyVw0ELlEVt/NkCUkxy1hmhJOkePoCH713u75vzHGyXhPDm28oLfc2NMSBjZRM1Y+wRjHXJT3sPrTy+A==",
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.2.tgz",
+      "integrity": "sha512-JoEL78sBCg8SzjOKMlkR70GWaPORudhWuTNqJ56lb2P8Vq0eM2+er3ZrMGiSDhOmzaRPuA9SNBz46nHCrjn11A==",
       "dependencies": {
         "@react-dnd/invariant": "^2.0.0",
         "@react-dnd/shallowequal": "^2.0.0",
-        "dnd-core": "14.0.1",
+        "dnd-core": "14.0.0",
         "fast-deep-equal": "^3.1.3",
         "hoist-non-react-statics": "^3.3.2"
       },
@@ -20703,11 +20695,11 @@
       }
     },
     "node_modules/react-dnd-html5-backend": {
-      "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==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.0.0.tgz",
+      "integrity": "sha512-2wAQqRFC1hbRGmk6+dKhOXsyQQOn3cN8PSZyOUeOun9J8t3tjZ7PS2+aFu7CVu2ujMDwTJR3VTwZh8pj2kCv7g==",
       "dependencies": {
-        "dnd-core": "14.0.1"
+        "dnd-core": "14.0.0"
       }
     },
     "node_modules/react-dom": {
@@ -33605,23 +33597,13 @@
       }
     },
     "dnd-core": {
-      "version": "14.0.1",
-      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz",
-      "integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.0.tgz",
+      "integrity": "sha512-wTDYKyjSqWuYw3ZG0GJ7k+UIfzxTNoZLjDrut37PbcPGNfwhlKYlPUqjAKUjOOv80izshUiqusaKgJPItXSevA==",
       "requires": {
         "@react-dnd/asap": "^4.0.0",
         "@react-dnd/invariant": "^2.0.0",
-        "redux": "^4.1.1"
-      },
-      "dependencies": {
-        "redux": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
-          "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
-          "requires": {
-            "@babel/runtime": "^7.9.2"
-          }
-        }
+        "redux": "^4.0.5"
       }
     },
     "dns-equal": {
@@ -42407,23 +42389,23 @@
       }
     },
     "react-dnd": {
-      "version": "14.0.5",
-      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.5.tgz",
-      "integrity": "sha512-9i1jSgbyVw0ELlEVt/NkCUkxy1hmhJOkePoCH713u75vzHGyXhPDm28oLfc2NMSBjZRM1Y+wRjHXJT3sPrTy+A==",
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.2.tgz",
+      "integrity": "sha512-JoEL78sBCg8SzjOKMlkR70GWaPORudhWuTNqJ56lb2P8Vq0eM2+er3ZrMGiSDhOmzaRPuA9SNBz46nHCrjn11A==",
       "requires": {
         "@react-dnd/invariant": "^2.0.0",
         "@react-dnd/shallowequal": "^2.0.0",
-        "dnd-core": "14.0.1",
+        "dnd-core": "14.0.0",
         "fast-deep-equal": "^3.1.3",
         "hoist-non-react-statics": "^3.3.2"
       }
     },
     "react-dnd-html5-backend": {
-      "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==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.0.0.tgz",
+      "integrity": "sha512-2wAQqRFC1hbRGmk6+dKhOXsyQQOn3cN8PSZyOUeOun9J8t3tjZ7PS2+aFu7CVu2ujMDwTJR3VTwZh8pj2kCv7g==",
       "requires": {
-        "dnd-core": "14.0.1"
+        "dnd-core": "14.0.0"
       }
     },
     "react-dom": {
diff --git a/src/ui/DragAndDrop/DragAndDropContainer.jsx b/src/ui/DragAndDrop/DragAndDropContainer.jsx
index ec1697be..fc63ce12 100644
--- a/src/ui/DragAndDrop/DragAndDropContainer.jsx
+++ b/src/ui/DragAndDrop/DragAndDropContainer.jsx
@@ -1,65 +1,41 @@
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import css from '../Main.module.css';
-import { DnDItemTypes } from '../Constants/DnDItemTypes';
-import { useDrag } from 'react-dnd';
 
 export const DragAndDropContainer = ({ children }) => {
-  const [position, setPosition] = useState({ top: 100, left: null });
-  const [isCanDrag, setIsCanDrag] = useState(false);
+  const [position, setPosition] = useState({ top: 100, left: 900 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
 
-  const checkEventTagName = useCallback(
-    (e) => {
-      e.target.tagName === 'DIV' ? setIsCanDrag(true) : setIsCanDrag(false);
-    },
-    [isCanDrag, setIsCanDrag]
-  );
+  const startDrag = (e) => {
+    if (e.target.tagName.toLowerCase() !== 'span') {
+      setIsDragging(true);
+      setOffset({
+        x: e.clientX - position.left,
+        y: e.clientY - position.top,
+      });
+    }
+  };
 
-  const getLeftPositionSettings = useCallback(
-    (e) => {
-      if (position.left === null) {
-        setPosition({
-          top: position.top,
-          left: window.innerWidth - e.currentTarget.offsetWidth - 25,
-        });
-      }
-    },
-    [position]
-  );
+  const stopDrag = () => {
+    setIsDragging(false);
+  };
 
-  const [{ isDragging }, drag, dragPreview] = useDrag(
-    () => ({
-      type: DnDItemTypes.SETTINGS,
-      item: { left: position.left, top: position.top, isCanDrag },
-      options: {
-        dropEffect: 'move',
-      },
-      end: (item, monitor) => {
-        const { x, y } = monitor.getDropResult();
-        const top = Math.round(item.top + y);
-        const left = Math.round(item.left + x);
-        setPosition({ top, left });
-      },
-      canDrag: () => {
-        return isCanDrag;
-      },
-      collect: (monitor) => ({
-        isDragging: monitor.isDragging(),
-      }),
-    }),
-    [position.left, position.top, isCanDrag]
-  );
+  const handleDrag = (e) => {
+    if (isDragging) {
+      const x = e.clientX - offset.x;
+      const y = e.clientY - offset.y;
+      setPosition({ left: x, top: y });
+    }
+  };
 
-  return isDragging ? (
-    <div style={{ display: 'none' }} ref={dragPreview}>
-      {children}
-    </div>
-  ) : (
+  return (
     <div
-      ref={drag}
-      onMouseDown={getLeftPositionSettings}
-      onMouseMove={checkEventTagName}
+      onMouseDown={startDrag}
+      onMouseUp={stopDrag}
+      onMouseMove={handleDrag}
       style={{
-        cursor: isCanDrag ? 'move' : 'default',
+        opacity: isDragging ? 0.5 : 1,
+        cursor: isDragging ? 'grabbing' : 'grab',
         top: position.top,
         left: position.left,
       }}
diff --git a/src/ui/Main.module.css b/src/ui/Main.module.css
index 9a4c1194..cf06950d 100644
--- a/src/ui/Main.module.css
+++ b/src/ui/Main.module.css
@@ -189,13 +189,10 @@
     display: flex;
     flex-direction: column;
     position: absolute;
-    right: 25px;
-    top: 100px;
     background-color: var(--dark-gray);
     padding: 25px;
     width: 400px;
     opacity: var(--opacity);
-    cursor: all-scroll;
     border-radius: 24px;
     transition: opacity 300ms ease-in-out;
     z-index: 11;