diff --git a/app/package-lock.json b/app/package-lock.json
index 4ddca192e5..7ff1a16d6a 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -2585,26 +2585,29 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.6.9",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
-      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
       "dependencies": {
-        "@floating-ui/utils": "^0.2.9"
+        "@floating-ui/utils": "^0.2.10"
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.6.13",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
-      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "license": "MIT",
       "dependencies": {
-        "@floating-ui/core": "^1.6.0",
-        "@floating-ui/utils": "^0.2.9"
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
       }
     },
     "node_modules/@floating-ui/react": {
       "version": "0.26.28",
       "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
       "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
+      "license": "MIT",
       "dependencies": {
         "@floating-ui/react-dom": "^2.1.2",
         "@floating-ui/utils": "^0.2.8",
@@ -2616,11 +2619,12 @@
       }
     },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
-      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
+      "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==",
+      "license": "MIT",
       "dependencies": {
-        "@floating-ui/dom": "^1.0.0"
+        "@floating-ui/dom": "^1.7.4"
       },
       "peerDependencies": {
         "react": ">=16.8.0",
@@ -2628,9 +2632,10 @@
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
-      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
     },
     "node_modules/@formatjs/ecma402-abstract": {
       "version": "1.11.4",
@@ -4306,12 +4311,14 @@
     "node_modules/@reportportal/ui-kit/node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
-      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
     },
     "node_modules/@reportportal/ui-kit/node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -4320,6 +4327,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
       "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
@@ -4329,6 +4337,7 @@
       "version": "6.1.12",
       "resolved": "https://registry.npmjs.org/downshift/-/downshift-6.1.12.tgz",
       "integrity": "sha512-7XB/iaSJVS4T8wGFT3WRXmSF1UlBHAA40DshZtkrIscIN+VC+Lh363skLxFTvJwtNgHxAMDGEHT4xsyQFWL+UA==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.14.8",
         "compute-scroll-into-view": "^1.0.17",
@@ -4344,6 +4353,7 @@
       "version": "10.18.0",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.18.0.tgz",
       "integrity": "sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==",
+      "license": "MIT",
       "dependencies": {
         "tslib": "^2.4.0"
       },
@@ -4367,6 +4377,7 @@
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.6.0.tgz",
       "integrity": "sha512-9cQH6Z/qa4LrGhzdc3XoHbhrxNcMi9MKjZmYgF/1MNNaJwvdSjv3Xd+jjvrEEbKEf71ZgCA3n7fQbdwd70qCRw==",
+      "license": "MIT",
       "dependencies": {
         "@floating-ui/react": "^0.27.0",
         "clsx": "^2.1.1",
@@ -4378,12 +4389,13 @@
       }
     },
     "node_modules/@reportportal/ui-kit/node_modules/react-datepicker/node_modules/@floating-ui/react": {
-      "version": "0.27.8",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.8.tgz",
-      "integrity": "sha512-EQJ4Th328y2wyHR3KzOUOoTW2UKjFk53fmyahfwExnFQ8vnsMYqKc+fFPOkeYtj5tcp1DUMiNJ7BFhed7e9ONw==",
+      "version": "0.27.16",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.16.tgz",
+      "integrity": "sha512-9O8N4SeG2z++TSM8QA/KTeKFBVCNEz/AGS7gWPJf6KFRzmRWixFRnCnkPHRDwSVZW6QPDO6uT0P2SpWNKCc9/g==",
+      "license": "MIT",
       "dependencies": {
-        "@floating-ui/react-dom": "^2.1.2",
-        "@floating-ui/utils": "^0.2.9",
+        "@floating-ui/react-dom": "^2.1.6",
+        "@floating-ui/utils": "^0.2.10",
         "tabbable": "^6.0.0"
       },
       "peerDependencies": {
@@ -4441,7 +4453,8 @@
     "node_modules/@reportportal/ui-kit/node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "license": "MIT"
     },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
@@ -25427,9 +25440,10 @@
       }
     },
     "node_modules/tabbable": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
-      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.3.0.tgz",
+      "integrity": "sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ==",
+      "license": "MIT"
     },
     "node_modules/table": {
       "version": "6.9.0",
diff --git a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/attachmentArea.scss b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/attachmentArea.scss
index 3d76b00152..c14294fca8 100644
--- a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/attachmentArea.scss
+++ b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/attachmentArea.scss
@@ -118,3 +118,18 @@
 .dropzone-wrapper {
   width: 100%;
 }
+
+.drag-handle {
+  cursor: grab;
+  touch-action: none;
+  transition: transform 0.15s ease;
+
+  &:active,
+  &--active {
+    cursor: grabbing;
+  }
+
+  &:hover {
+    transform: scale(1.1);
+  }
+}
diff --git a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/attachmentArea.tsx b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/attachmentArea.tsx
index 6ff3b29903..a989339e50 100644
--- a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/attachmentArea.tsx
+++ b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/attachmentArea.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, Ref } from 'react';
 import { useIntl } from 'react-intl';
 import { isNumber } from 'es-toolkit/compat';
 import { noop } from 'es-toolkit';
@@ -59,6 +59,8 @@ interface AttachmentAreaProps {
   canAttachFiles?: boolean;
   onRemove?: () => void;
   onMove?: (direction: 'up' | 'down') => void;
+  dragHandleRef?: Ref<HTMLButtonElement>;
+  isDraggingActive?: boolean;
 }
 
 export const AttachmentArea = ({
@@ -78,6 +80,8 @@ export const AttachmentArea = ({
   canAttachFiles = true,
   onRemove,
   onMove = noop,
+  dragHandleRef,
+  isDraggingActive = false,
 }: PropsWithChildren<AttachmentAreaProps>) => {
   const { formatMessage } = useIntl();
   const { attachedFiles, addFiles, removeFile, downloadFile } = useTmsFileUpload({
@@ -118,7 +122,13 @@ export const AttachmentArea = ({
                     >
                       <ArrowUpIcon />
                     </Button>
-                    <Button variant="text" adjustWidthOn="content">
+                    <Button
+                      ref={dragHandleRef}
+                      variant="text"
+                      adjustWidthOn="content"
+                      className={cx('drag-handle', { 'drag-handle--active': isDraggingActive })}
+                      aria-label={formatMessage(attachmentAreaMessages.dragToReorder)}
+                    >
                       <DragNDropIcon />
                     </Button>
                     <Button
diff --git a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/messages.ts b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/messages.ts
index 04daa95de3..cfcb69a392 100644
--- a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/messages.ts
+++ b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/messages.ts
@@ -17,4 +17,8 @@ export const messages = defineMessages({
     id: 'createTestCaseModal.moveDown',
     defaultMessage: 'Move one position down',
   },
+  dragToReorder: {
+    id: 'createTestCaseModal.dragToReorder',
+    defaultMessage: 'Drag to reorder',
+  },
 });
diff --git a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/HideOnDrag.tsx b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/HideOnDrag.tsx
new file mode 100644
index 0000000000..5534b687c4
--- /dev/null
+++ b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/HideOnDrag.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+import { useHideOnDrag } from './useHideOnDrag';
+
+interface HideOnDragProps {
+  isDragging: boolean;
+  children: ReactNode;
+}
+
+export const HideOnDrag = ({ isDragging, children }: HideOnDragProps) => {
+  const shouldHide = useHideOnDrag({ isDragging });
+
+  if (shouldHide) return null;
+
+  return <>{children}</>;
+};
diff --git a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/messages.ts b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/messages.ts
new file mode 100644
index 0000000000..ea238bc00c
--- /dev/null
+++ b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/messages.ts
@@ -0,0 +1,12 @@
+import { defineMessages } from 'react-intl';
+
+export const messages = defineMessages({
+  steps: {
+    id: 'CreateTestCaseModal.steps',
+    defaultMessage: 'Steps',
+  },
+  addStep: {
+    id: 'CreateTestCaseModal.addStep',
+    defaultMessage: 'Add Step',
+  },
+});
diff --git a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/steps.scss b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/steps.scss
index 82e7995ec3..8a04cc2276 100644
--- a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/steps.scss
+++ b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/steps.scss
@@ -26,11 +26,51 @@
     color: var(--rp-ui-base-almost-black);
   }
 
+  &__list {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px;
+    border: 2px dashed transparent;
+    border-radius: 8px;
+    transition:
+      border-color 0.2s ease,
+      background-color 0.2s ease;
+
+    &--dragging {
+      border-color: $COLOR--topaz-focused;
+      background-color: rgba($COLOR--topaz-focused, 0.08);
+    }
+  }
+
   &__step-container {
     position: relative;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    transition: transform 0.2s ease;
+
+    &--drop-target {
+      transform: translateY(8px);
+
+      .steps__between-area {
+        visibility: hidden;
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: -6px;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background-color: var(--rp-ui-base-topaz-focused);
+        border-radius: 1px;
+      }
+    }
+
+    &--just-dropped {
+      animation: dropHighlight 0.6s ease-out;
+    }
   }
 
   &__between-area {
@@ -64,3 +104,46 @@
     height: 24px;
   }
 }
+
+@keyframes dropHighlight {
+  0% {
+    box-shadow: 0 0 0 3px rgba($COLOR--topaz-focused, 0.4);
+    transform: scale(1.01);
+  }
+
+  50% {
+    box-shadow: 0 0 0 6px rgba($COLOR--topaz-focused, 0.2);
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 rgba($COLOR--topaz-focused, 0);
+    transform: scale(1);
+  }
+}
+
+.drag-preview {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  width: 376px;
+  height: 52px;
+  padding-left: 12px;
+  background-color: var(--rp-ui-base-bg-000);
+  border: 1px solid var(--rp-ui-base-e-200);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--rp-ui-base-almost-black);
+  white-space: nowrap;
+
+  svg {
+    width: 16px;
+    height: 16px;
+
+    path {
+      fill: var(--rp-ui-base-e-300);
+    }
+  }
+}
diff --git a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/steps.tsx b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/steps.tsx
index 480e7a6984..847e13e7b1 100644
--- a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/steps.tsx
+++ b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/steps.tsx
@@ -14,50 +14,64 @@
  * limitations under the License.
  */
 
-import { defineMessages, useIntl } from 'react-intl';
-import { Button, PlusIcon } from '@reportportal/ui-kit';
+import { useCallback, useState, Ref } from 'react';
+import { useIntl } from 'react-intl';
+import { useDrop } from 'react-dnd';
+import { Button, PlusIcon, DragNDropIcon, SortableItem, DragLayer } from '@reportportal/ui-kit';
 import { MIME_TYPES } from '@reportportal/ui-kit/fileDropArea';
 
 import { createClassnames } from 'common/utils';
 
 import { AttachmentArea } from '../../attachmentArea';
-import { Step as StepType } from 'pages/inside/testCaseLibraryPage/types';
 import { Step } from './step';
 import { messages as commonMessages } from '../../messages';
+import { messages } from './messages';
+import { StepsProps } from './types';
+import { HideOnDrag } from './HideOnDrag';
 
 import styles from './steps.scss';
 
 const cx = createClassnames(styles);
 
-interface StepsProps {
-  steps: StepType[];
-  onAddStep: (index?: number) => void;
-  onRemoveStep: (stepId: number) => void;
-  onMoveStep: ({ stepId, direction }: { stepId: number; direction: 'up' | 'down' }) => void;
-  formName: string;
-  isKeyById?: boolean;
-}
-
-const messages = defineMessages({
-  steps: {
-    id: 'CreateTestCaseModal.steps',
-    defaultMessage: 'Steps',
-  },
-  addStep: {
-    id: 'CreateTestCaseModal.addStep',
-    defaultMessage: 'Add Step',
-  },
-});
+const STEP_DRAG_TYPE = 'TEST_CASE_STEP';
+const DROP_ANIMATION_DURATION = 600;
 
 export const Steps = ({
   steps,
   onAddStep,
   onRemoveStep,
   onMoveStep,
+  onReorderSteps,
   formName,
   isKeyById = false,
 }: StepsProps) => {
   const { formatMessage } = useIntl();
+  const [justDroppedId, setJustDroppedId] = useState<number | null>(null);
+
+  const handleDrop = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      const reorderedSteps = [...steps];
+      const [movedStep] = reorderedSteps.splice(fromIndex, 1);
+      reorderedSteps.splice(toIndex, 0, movedStep);
+
+      setJustDroppedId(movedStep.id);
+      setTimeout(() => setJustDroppedId(null), DROP_ANIMATION_DURATION);
+
+      onReorderSteps(reorderedSteps);
+    },
+    [steps, onReorderSteps],
+  );
+
+  // Detect when any step is being dragged to show dotted border around the zone
+  const [{ isDraggingAny }, dropZoneRef] = useDrop(
+    () => ({
+      accept: STEP_DRAG_TYPE,
+      collect: (monitor) => ({
+        isDraggingAny: monitor.canDrop(),
+      }),
+    }),
+    [],
+  );
 
   const renderBetweenStepsArea = (index: number) => {
     const isLastStep = index === steps.length - 1;
@@ -81,33 +95,69 @@ export const Steps = ({
 
   return (
     <div className={cx('steps')}>
+      <DragLayer
+        type={STEP_DRAG_TYPE}
+        previewClassName={cx('drag-preview')}
+        renderPreview={(item) => (
+          <>
+            <DragNDropIcon />
+            <span>Step {item.index + 1}</span>
+          </>
+        )}
+      />
       <span className={cx('steps__label')}>{formatMessage(messages.steps)}</span>
-      {steps.map((step, index) => {
-        const { id, instructions, expectedResult } = step;
-        const fieldKey = isKeyById ? id : index;
+      <div
+        ref={dropZoneRef}
+        className={cx('steps__list', { 'steps__list--dragging': isDraggingAny })}
+      >
+        {steps.map((step, index) => {
+          const { id, instructions, expectedResult } = step;
+          const fieldKey = isKeyById ? id : index;
 
-        return (
-          <div key={id} className={cx('steps__step-container')}>
-            <AttachmentArea
-              isDraggable
+          return (
+            <SortableItem
+              key={id}
+              id={id}
               index={index}
-              totalCount={steps.length}
-              formName={formName}
-              acceptFileMimeTypes={[MIME_TYPES.jpeg, MIME_TYPES.png]}
-              dropZoneDescription={formatMessage(commonMessages.dropFileDescription, {
-                browseButton: formatMessage(commonMessages.browseText),
+              type={STEP_DRAG_TYPE}
+              onDrop={handleDrop}
+              hideDefaultPreview
+              className={cx('steps__step-container', {
+                'steps__step-container--just-dropped': justDroppedId === id,
               })}
-              attachmentFieldName={`steps.${fieldKey}.attachments`}
-              fileSizeMessage={formatMessage(commonMessages.fileSizeInfo)}
-              onRemove={() => onRemoveStep(id)}
-              onMove={(direction) => onMoveStep({ stepId: id, direction })}
+              dropTargetClassName={cx('steps__step-container--drop-target')}
             >
-              <Step stepId={fieldKey} instructions={instructions} expectedResult={expectedResult} />
-            </AttachmentArea>
-            {renderBetweenStepsArea(index)}
-          </div>
-        );
-      })}
+              {({ dragRef, isDragging }) => (
+                <HideOnDrag isDragging={isDragging}>
+                  <AttachmentArea
+                    isDraggable
+                    index={index}
+                    totalCount={steps.length}
+                    formName={formName}
+                    acceptFileMimeTypes={[MIME_TYPES.jpeg, MIME_TYPES.png]}
+                    dropZoneDescription={formatMessage(commonMessages.dropFileDescription, {
+                      browseButton: formatMessage(commonMessages.browseText),
+                    })}
+                    attachmentFieldName={`steps.${fieldKey}.attachments`}
+                    fileSizeMessage={formatMessage(commonMessages.fileSizeInfo)}
+                    onRemove={() => onRemoveStep(id)}
+                    onMove={(direction) => onMoveStep({ stepId: id, direction })}
+                    dragHandleRef={dragRef as Ref<HTMLButtonElement>}
+                    isDraggingActive={isDragging}
+                  >
+                    <Step
+                      stepId={fieldKey}
+                      instructions={instructions}
+                      expectedResult={expectedResult}
+                    />
+                  </AttachmentArea>
+                  {renderBetweenStepsArea(index)}
+                </HideOnDrag>
+              )}
+            </SortableItem>
+          );
+        })}
+      </div>
       <div>
         <Button
           icon={<PlusIcon />}
diff --git a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/types.ts b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/types.ts
new file mode 100644
index 0000000000..a03a18aa76
--- /dev/null
+++ b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/types.ts
@@ -0,0 +1,11 @@
+import { Step } from 'pages/inside/testCaseLibraryPage/types';
+
+export interface StepsProps {
+  steps: Step[];
+  onAddStep: (index?: number) => void;
+  onRemoveStep: (stepId: number) => void;
+  onMoveStep: ({ stepId, direction }: { stepId: number; direction: 'up' | 'down' }) => void;
+  onReorderSteps: (reorderedSteps: Step[]) => void;
+  formName: string;
+  isKeyById?: boolean;
+}
diff --git a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/useHideOnDrag.ts b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/useHideOnDrag.ts
new file mode 100644
index 0000000000..3a436e09cd
--- /dev/null
+++ b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/useHideOnDrag.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+const HIDE_DELAY_MS = 50;
+
+export const useHideOnDrag = ({ isDragging }: { isDragging: boolean }) => {
+  const [shouldHide, setShouldHide] = useState(false);
+
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    if (isDragging) {
+      timeoutId = setTimeout(() => setShouldHide(true), HIDE_DELAY_MS);
+    } else {
+      setShouldHide(false);
+    }
+
+    return () => {
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [isDragging]);
+
+  return shouldHide;
+};
diff --git a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/testCaseDetails.tsx b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/testCaseDetails.tsx
index 85c5e5d52f..db3dfbf625 100644
--- a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/testCaseDetails.tsx
+++ b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/testCaseDetails.tsx
@@ -179,6 +179,13 @@ export const TestCaseDetails = ({
     [steps, syncStepsToForm],
   );
 
+  const handleReorderSteps = useCallback(
+    (reorderedSteps: Step[]) => {
+      setUpdatedSteps(reorderedSteps);
+    },
+    [setUpdatedSteps],
+  );
+
   const isTextTemplate = manualScenarioType === ManualScenarioType.TEXT;
 
   return (
@@ -210,6 +217,7 @@ export const TestCaseDetails = ({
               onAddStep={handleAddStep}
               onRemoveStep={handleRemoveStep}
               onMoveStep={handleMoveStep}
+              onReorderSteps={handleReorderSteps}
               formName={formName}
               isKeyById={isEditMode}
             />
diff --git a/app/src/pages/inside/testPlansPage/testPlanModals/deleteTestPlanModal/useDeleteTestPlanModal.tsx b/app/src/pages/inside/testPlansPage/testPlanModals/deleteTestPlanModal/useDeleteTestPlanModal.tsx
index 54b39d2159..dfd32c45dc 100644
--- a/app/src/pages/inside/testPlansPage/testPlanModals/deleteTestPlanModal/useDeleteTestPlanModal.tsx
+++ b/app/src/pages/inside/testPlansPage/testPlanModals/deleteTestPlanModal/useDeleteTestPlanModal.tsx
@@ -15,10 +15,10 @@
  */
 
 import { noop } from 'es-toolkit';
+import { VoidFn } from '@reportportal/ui-kit/common/types/commonTypes';
 
 import { TestPlanDto } from 'controllers/testPlan';
 import { useModal } from 'common/hooks';
-import { VoidFn } from '@reportportal/ui-kit/common/types/commonTypes';
 
 import { DELETE_TEST_PLAN_MODAL_KEY, DeleteTestPlanModal } from './deleteTestPlanModal';
 
diff --git a/app/src/routes/pageSwitcher.jsx b/app/src/routes/pageSwitcher.jsx
index 4019c214ff..c466e37a51 100644
--- a/app/src/routes/pageSwitcher.jsx
+++ b/app/src/routes/pageSwitcher.jsx
@@ -69,15 +69,15 @@ export default class PageSwitcher extends React.Component {
     return (
       <div className={cx('page-switcher')}>
         <ThemeProvider>
-          <Layout rawContent={rawContent}>
-            {mode === 'development' && <LocalizationSwitcher />}
-            <PageErrorBoundary key={page}>
-              <DndProvider backend={HTML5Backend}>
+          <DndProvider backend={HTML5Backend}>
+            <Layout rawContent={rawContent}>
+              {mode === 'development' && <LocalizationSwitcher />}
+              <PageErrorBoundary key={page}>
                 <PageComponent />
-              </DndProvider>
-            </PageErrorBoundary>
-          </Layout>
-          <ModalContainer />
+              </PageErrorBoundary>
+            </Layout>
+            <ModalContainer />
+          </DndProvider>
           <NotificationContainer />
           <ScreenLock />
         </ThemeProvider>
diff --git a/app/webpack/base.config.js b/app/webpack/base.config.js
index 57a272671c..4c4d32092e 100644
--- a/app/webpack/base.config.js
+++ b/app/webpack/base.config.js
@@ -171,6 +171,14 @@ module.exports = {
           singleton: true,
           requiredVersion: pjson.dependencies['react-copy-to-clipboard'],
         },
+        'react-dnd': {
+          singleton: true,
+          requiredVersion: pjson.dependencies['react-dnd'],
+        },
+        'react-dnd-html5-backend': {
+          singleton: true,
+          requiredVersion: pjson.dependencies['react-dnd-html5-backend'],
+        },
       },
     }),
   ],