diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0a02f9e9a5..bb0390ef34 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -72,6 +72,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Resolved [#4847](https://github.com/microsoft/BotFramework-WebChat/issues/4847). Migrated to npm workspaces from lerna, in PR [#5301](https://github.com/microsoft/BotFramework-WebChat/pull/5301), by [@compulim](https://github.com/compulim)
 -  Resolved [#5302](https://github.com/microsoft/BotFramework-WebChat/issues/5302). Migrated to `core-js-pure/Promise.withResolveers` from `p-defer`, in PR [#5301](https://github.com/microsoft/BotFramework-WebChat/pull/5301), by [@compulim](https://github.com/compulim)
 -  Improved message bubble layout in Fluent theme to allow growth beyond 450px up to 75% of container width, in PR [#5324](https://github.com/microsoft/BotFramework-WebChat/pull/5324), by [@OEvgeny](https://github.com/OEvgeny)
+-  Improved drop zone behavior and styling in Fluent theme, in PR [#5328](https://github.com/microsoft/BotFramework-WebChat/pull/5328), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Fixed
 
diff --git a/__tests__/__image_snapshots__/html/drag-and-drop-upload-js-fluent-theme-applied-drag-and-drop-upload-2-snap.png b/__tests__/__image_snapshots__/html/drag-and-drop-upload-js-fluent-theme-applied-drag-and-drop-upload-2-snap.png
index 86b3ae7d29..d1d3d4f062 100644
Binary files a/__tests__/__image_snapshots__/html/drag-and-drop-upload-js-fluent-theme-applied-drag-and-drop-upload-2-snap.png and b/__tests__/__image_snapshots__/html/drag-and-drop-upload-js-fluent-theme-applied-drag-and-drop-upload-2-snap.png differ
diff --git a/packages/fluent-theme/src/components/dropZone/DropZone.module.css b/packages/fluent-theme/src/components/dropZone/DropZone.module.css
index 5e95ffb827..b8a2815ec8 100644
--- a/packages/fluent-theme/src/components/dropZone/DropZone.module.css
+++ b/packages/fluent-theme/src/components/dropZone/DropZone.module.css
@@ -8,11 +8,11 @@
   place-content: center;
   place-items: center;
   position: absolute;
+  transition: all var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
 }
 
 :global(.webchat-fluent) .sendbox__attachment-drop-zone--droppable {
-  background-color: #e00;
-  color: White;
+  background-color: var(--webchat-colorBrandBackground2Hover);
 }
 
 :global(.webchat-fluent) .sendbox__attachment-drop-zone-icon {
diff --git a/packages/fluent-theme/src/components/dropZone/DropZone.tsx b/packages/fluent-theme/src/components/dropZone/DropZone.tsx
index e591240fa3..d39300d491 100644
--- a/packages/fluent-theme/src/components/dropZone/DropZone.tsx
+++ b/packages/fluent-theme/src/components/dropZone/DropZone.tsx
@@ -62,12 +62,19 @@ const DropZone = (props: { readonly onFilesAdded: (files: File[]) => void }) =>
 
     const handleDragLeave = () => --entranceCounter <= 0 && setDropZoneState(false);
 
+    const handleDragEnd = () => {
+      entranceCounter = 0;
+      setDropZoneState(false);
+    };
+
     document.addEventListener('dragenter', handleDragEnter, false);
     document.addEventListener('dragleave', handleDragLeave, false);
+    document.addEventListener('dragend', handleDragEnd, false);
 
     return () => {
       document.removeEventListener('dragenter', handleDragEnter);
       document.removeEventListener('dragleave', handleDragLeave);
+      document.removeEventListener('dragend', handleDragEnd);
     };
   }, [setDropZoneState]);