diff --git a/x-pack/plugins/security_solution/cypress/integration/timelines/data_providers.spec.ts b/x-pack/plugins/security_solution/cypress/integration/timelines/data_providers.spec.ts
index cb93007f19c9c..d42632a66eb26 100644
--- a/x-pack/plugins/security_solution/cypress/integration/timelines/data_providers.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/timelines/data_providers.spec.ts
@@ -10,6 +10,7 @@ import {
   TIMELINE_DATA_PROVIDERS_EMPTY,
   TIMELINE_DROPPED_DATA_PROVIDERS,
   TIMELINE_DATA_PROVIDERS_ACTION_MENU,
+  IS_DRAGGING_DATA_PROVIDERS,
   TIMELINE_FLYOUT_HEADER,
 } from '../../screens/timeline';
 import { HOSTS_NAMES_DRAGGABLE } from '../../screens/hosts/all_hosts';
@@ -17,6 +18,7 @@ import { HOSTS_NAMES_DRAGGABLE } from '../../screens/hosts/all_hosts';
 import {
   dragAndDropFirstHostToTimeline,
   dragFirstHostToEmptyTimelineDataProviders,
+  unDragFirstHostToEmptyTimelineDataProviders,
   dragFirstHostToTimeline,
   waitForAllHostsToBeLoaded,
 } from '../../tasks/hosts/all_hosts';
@@ -26,13 +28,14 @@ import { openTimelineUsingToggle } from '../../tasks/security_main';
 import { addDataProvider, closeTimeline, createNewTimeline } from '../../tasks/timeline';
 
 import { HOSTS_URL } from '../../urls/navigation';
-import { cleanKibana } from '../../tasks/common';
+import { cleanKibana, scrollToBottom } from '../../tasks/common';
 
 describe('timeline data providers', () => {
   before(() => {
     cleanKibana();
     loginAndWaitForPage(HOSTS_URL);
     waitForAllHostsToBeLoaded();
+    scrollToBottom();
   });
 
   afterEach(() => {
@@ -74,44 +77,24 @@ describe('timeline data providers', () => {
     });
   });
 
-  it.skip('sets the background to euiColorSuccess with a 10% alpha channel when the user starts dragging a host, but is not hovering over the data providers', () => {
+  it('sets correct classes when the user starts dragging a host, but is not hovering over the data providers', () => {
     dragFirstHostToTimeline();
 
-    if (Cypress.browser.name === 'firefox') {
-      cy.get(TIMELINE_DATA_PROVIDERS)
-        .filter(':visible')
-        .should('have.css', 'background-color', 'rgba(1, 125, 115, 0.1)');
-    } else {
-      cy.get(TIMELINE_DATA_PROVIDERS)
-        .filter(':visible')
-        .should(
-          'have.css',
-          'background',
-          'rgba(1, 125, 115, 0.1) none repeat scroll 0% 0% / auto padding-box border-box'
-        );
-    }
+    cy.get(IS_DRAGGING_DATA_PROVIDERS)
+      .find(TIMELINE_DATA_PROVIDERS)
+      .filter(':visible')
+      .should('have.class', 'drop-target-data-providers');
   });
 
-  // https://github.com/elastic/kibana/issues/94576
-  it.skip('sets the background to euiColorSuccess with a 20% alpha channel and renders the dashed border color as euiColorSuccess when the user starts dragging a host AND is hovering over the data providers', () => {
+  it('render an extra highlighted area in dataProvider when the user starts dragging a host AND is hovering over the data providers', () => {
     dragFirstHostToEmptyTimelineDataProviders();
 
-    if (Cypress.browser.name === 'firefox') {
-      cy.get(TIMELINE_DATA_PROVIDERS_EMPTY)
-        .filter(':visible')
-        .should('have.css', 'background-color', 'rgba(1, 125, 115, 0.2)');
-    } else {
-      cy.get(TIMELINE_DATA_PROVIDERS_EMPTY)
-        .filter(':visible')
-        .should(
-          'have.css',
-          'background',
-          'rgba(1, 125, 115, 0.2) none repeat scroll 0% 0% / auto padding-box border-box'
-        );
+    cy.get(IS_DRAGGING_DATA_PROVIDERS)
+      .find(TIMELINE_DATA_PROVIDERS_EMPTY)
+      .children()
+      .should('exist');
 
-      cy.get(TIMELINE_DATA_PROVIDERS)
-        .filter(':visible')
-        .should('have.css', 'border', '3.1875px dashed rgb(1, 125, 115)');
-    }
+    // Release the dragging item so the cursor can peform other action
+    unDragFirstHostToEmptyTimelineDataProviders();
   });
 });
diff --git a/x-pack/plugins/security_solution/cypress/integration/timelines/flyout_button.spec.ts b/x-pack/plugins/security_solution/cypress/integration/timelines/flyout_button.spec.ts
index 6b6463803ee37..c7ec17d027e80 100644
--- a/x-pack/plugins/security_solution/cypress/integration/timelines/flyout_button.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/timelines/flyout_button.spec.ts
@@ -8,6 +8,7 @@
 import { TIMELINE_BOTTOM_BAR_TOGGLE_BUTTON } from '../../screens/security_main';
 import {
   CREATE_NEW_TIMELINE,
+  IS_DRAGGING_DATA_PROVIDERS,
   TIMELINE_DATA_PROVIDERS,
   TIMELINE_FLYOUT_HEADER,
   TIMELINE_SETTINGS_ICON,
@@ -76,21 +77,12 @@ describe('timeline flyout button', () => {
     closeTimelineUsingCloseButton();
   });
 
-  it.skip('sets the data providers background to euiColorSuccess with a 10% alpha channel when the user starts dragging a host, but is not hovering over the data providers area', () => {
+  it('sets correct classes when the user starts dragging a host, but is not hovering over the data providers', () => {
     dragFirstHostToTimeline();
 
-    if (Cypress.browser.name === 'firefox') {
-      cy.get(TIMELINE_DATA_PROVIDERS)
-        .filter(':visible')
-        .should('have.css', 'background-color', 'rgba(1, 125, 115, 0.1)');
-    } else {
-      cy.get(TIMELINE_DATA_PROVIDERS)
-        .filter(':visible')
-        .should(
-          'have.css',
-          'background',
-          'rgba(1, 125, 115, 0.1) none repeat scroll 0% 0% / auto padding-box border-box'
-        );
-    }
+    cy.get(IS_DRAGGING_DATA_PROVIDERS)
+      .find(TIMELINE_DATA_PROVIDERS)
+      .filter(':visible')
+      .should('have.class', 'drop-target-data-providers');
   });
 });
diff --git a/x-pack/plugins/security_solution/cypress/screens/timeline.ts b/x-pack/plugins/security_solution/cypress/screens/timeline.ts
index 10a469a90fd51..4c80f266e687c 100644
--- a/x-pack/plugins/security_solution/cypress/screens/timeline.ts
+++ b/x-pack/plugins/security_solution/cypress/screens/timeline.ts
@@ -114,6 +114,8 @@ export const TIMELINE_CHANGES_IN_PROGRESS = '[data-test-subj="timeline"] .euiPro
 
 export const TIMELINE_COLUMN_SPINNER = '[data-test-subj="timeline-loading-spinner"]';
 
+export const IS_DRAGGING_DATA_PROVIDERS = '.is-dragging';
+
 export const TIMELINE_DATA_PROVIDERS = '[data-test-subj="dataProviders"]';
 
 export const TIMELINE_DATA_PROVIDERS_ACTION_MENU = '[data-test-subj="providerActions"]';
diff --git a/x-pack/plugins/security_solution/cypress/tasks/common.ts b/x-pack/plugins/security_solution/cypress/tasks/common.ts
index 293cd8fbeaa85..468b0e22838dd 100644
--- a/x-pack/plugins/security_solution/cypress/tasks/common.ts
+++ b/x-pack/plugins/security_solution/cypress/tasks/common.ts
@@ -148,3 +148,5 @@ export const cleanKibana = () => {
 
   esArchiverResetKibana();
 };
+
+export const scrollToBottom = () => cy.scrollTo('bottom');
diff --git a/x-pack/plugins/security_solution/cypress/tasks/hosts/all_hosts.ts b/x-pack/plugins/security_solution/cypress/tasks/hosts/all_hosts.ts
index 98e3d74ad3bc4..317a35708de57 100644
--- a/x-pack/plugins/security_solution/cypress/tasks/hosts/all_hosts.ts
+++ b/x-pack/plugins/security_solution/cypress/tasks/hosts/all_hosts.ts
@@ -29,6 +29,23 @@ export const dragFirstHostToEmptyTimelineDataProviders = () => {
     .then((dataProvidersDropArea) => dragWithoutDrop(dataProvidersDropArea));
 };
 
+export const unDragFirstHostToEmptyTimelineDataProviders = () => {
+  cy.get(HOSTS_NAMES_DRAGGABLE)
+    .first()
+    .then((host) => {
+      cy.wrap(host)
+        .trigger('mousemove', {
+          button: 0,
+          clientX: host[0].getBoundingClientRect().left,
+          clientY: host[0].getBoundingClientRect().top,
+          force: true,
+        })
+        .wait(300)
+        .trigger('mouseup', { force: true })
+        .wait(300);
+    });
+};
+
 export const dragFirstHostToTimeline = () => {
   cy.get(HOSTS_NAMES_DRAGGABLE)
     .first()