diff --git a/tests/desktop/normal/features_and_events/toggle_event_source_visibility.spec.ts b/tests/desktop/normal/features_and_events/toggle_event_source_visibility.spec.ts
new file mode 100644
index 000000000..259abbc05
--- /dev/null
+++ b/tests/desktop/normal/features_and_events/toggle_event_source_visibility.spec.ts
@@ -0,0 +1,171 @@
+import { test, expect } from "@playwright/test";
+import { Helioviewer } from "../../../page_objects/helioviewer";
+import { mockEvents } from "../../../utils/events";
+
+/**
+ * This test mocks some random events including some empty event-types
+ * then validates they are visible eventhough they are not checked
+ * then toggle empty resource visibility,
+ * then validates they those empty event-type nodes are not visible anymore
+ */
+test("Toggle event source visibility should hide/show empty event-type nodes, on off style", async ({
+  page,
+  browser
+}, info) => {
+  // mocked event data
+  const events = {
+    HEK: {
+      "Active Region": {
+        SPoCA: {
+          "SPoCA 37775": {},
+          "SPoCA 37776": {}
+        },
+        "NOAA SWPC Observer": {
+          "NOAA 13814": {},
+          "NOAA 13815": {}
+        }
+      },
+      "Coronal Hole": {
+        SPoCA: {
+          "SPoCA 49106": {},
+          "SPoCA 49144": {}
+        }
+      },
+      "EMPTY EVENT TYPE HEK": {}
+    },
+    CCMC: {
+      DONKI: {
+        CME: {
+          "Type:C 11 456km": {}
+        }
+      },
+      "Solar Flare Predictions": {
+        AMOS: {
+          "C+ 34.05% M+: 2.82% X: 0%": {},
+          "C+ 77.15% M+: 9.08% X: 0%": {}
+        },
+        "MAG4 Sharp FE": {
+          "M: 34.05% M+: 2.82% X: 0%": {},
+          "M: 77.15% M+: 9.08% X: 0%": {}
+        }
+      },
+      "EMPTY EVENT TYPE CCMC": {}
+    }
+  };
+
+  // mock events
+  await mockEvents(page, events);
+
+  // load helioviewer
+  let hv = new Helioviewer(page, info);
+
+  // Action 1 : BROWSE TO HELIOVIEWER
+  await hv.Load();
+  await hv.CloseAllNotifications();
+
+  // Action 2 : Open left sources panel
+  await hv.OpenSidebar();
+
+  // Parse event tree pieces
+  const hek = hv.parseTree("HEK");
+  const ccmc = hv.parseTree("CCMC");
+
+  // Action 3: toggle empty event source visibility for HEK layer
+  await hek.toggleVisibilityEmptyEventSources();
+
+  // Assert empty event types should be visible for ccmc but not for hek
+  await ccmc.assertEventTypeNodeVisible("EMPTY EVENT TYPE CCMC");
+  await hek.assertEventTypeNodeNotVisible("EMPTY EVENT TYPE HEK");
+
+  // Action 4: now toggle again to make empty event types appear for HEK
+  await hek.toggleVisibilityEmptyEventSources();
+  // Action 5:  toggle to hide empty event types for CCMC this time
+  await ccmc.toggleVisibilityEmptyEventSources();
+
+  // Assert empty event types should be visible for ccmc but not for not hek
+  await ccmc.assertEventTypeNodeNotVisible("EMPTY EVENT TYPE CCMC");
+  await hek.assertEventTypeNodeVisible("EMPTY EVENT TYPE HEK");
+});
+
+/**
+ * This test mocks some random events including some empty event-types
+ * then validates they are visible eventhough they are not checked
+ * then toggle empty resource visibility,
+ * then validates they those empty event-type nodes are not visible anymore
+ */
+test("Toggle event source visibility should be preserved with state.", async ({ page, browser }, info) => {
+  // mocked event data
+  const events = {
+    HEK: {
+      "Active Region": {
+        SPoCA: {
+          "SPoCA 37775": {},
+          "SPoCA 37776": {}
+        },
+        "NOAA SWPC Observer": {
+          "NOAA 13814": {},
+          "NOAA 13815": {}
+        }
+      },
+      "Coronal Hole": {
+        SPoCA: {
+          "SPoCA 49106": {},
+          "SPoCA 49144": {}
+        }
+      },
+      "EMPTY EVENT TYPE HEK": {}
+    },
+    CCMC: {
+      DONKI: {
+        CME: {
+          "Type:C 11 456km": {}
+        }
+      },
+      "Solar Flare Predictions": {
+        AMOS: {
+          "C+ 34.05% M+: 2.82% X: 0%": {},
+          "C+ 77.15% M+: 9.08% X: 0%": {}
+        },
+        "MAG4 Sharp FE": {
+          "M: 34.05% M+: 2.82% X: 0%": {},
+          "M: 77.15% M+: 9.08% X: 0%": {}
+        }
+      },
+      "EMPTY EVENT TYPE CCMC": {}
+    }
+  };
+
+  // mock events
+  await mockEvents(page, events);
+
+  // load helioviewer
+  let hv = new Helioviewer(page, info);
+
+  // Action 1 : BROWSE TO HELIOVIEWER
+  await hv.Load();
+  await hv.CloseAllNotifications();
+
+  // Action 2 : Open left sources panel
+  await hv.OpenSidebar();
+
+  // Parse event tree pieces
+  const hek = hv.parseTree("HEK");
+  const ccmc = hv.parseTree("CCMC");
+
+  // Action 3:  toggle to hide empty event-types for CCMC this time
+  await ccmc.toggleVisibilityEmptyEventSources();
+
+  // Assert empty event types should be visible for ccmc but not for not hek
+  await ccmc.assertEventTypeNodeNotVisible("EMPTY EVENT TYPE CCMC");
+  await hek.assertEventTypeNodeVisible("EMPTY EVENT TYPE HEK");
+
+  await hv.Load();
+  await hv.CloseAllNotifications();
+
+  // Parse event tree pieces
+  const hekReload = hv.parseTree("HEK");
+  const ccmcReload = hv.parseTree("CCMC");
+
+  await ccmcReload.assertEventTypeNodeNotVisible("EMPTY EVENT TYPE CCMC");
+  await hekReload.assertEventTypeNodeVisible("EMPTY EVENT TYPE HEK");
+});
diff --git a/tests/page_objects/event_tree.ts b/tests/page_objects/event_tree.ts
index bafb18fb7..45de32baf 100644
--- a/tests/page_objects/event_tree.ts
+++ b/tests/page_objects/event_tree.ts
@@ -9,12 +9,14 @@ class EventTree {
   root: Locator;
   markersRoot: Locator;
   eventLayerRoot: Locator;
+  source: string;
 
   constructor(source, page) {
     this.page = page;
     this.root = page.locator("#tree_" + source);
     this.markersRoot = page.locator("#tree_" + source + "-event-container");
     this.eventLayerRoot = page.locator("#event-layer-" + source);
+    this.source = source;
   }
 
   /**
@@ -264,6 +266,14 @@ class EventTree {
     await expect(markerLabel).not.toHaveClass("event-label event-label-hover");
   }
 
+  /**
+   * This function toggles "hiding of empty event sources" functionality for this event source layer
+   * @return {Promise<void>} you can await this promise to wait for toggleing to complete
+   **/
+  async toggleVisibilityEmptyEventSources(): Promise<void> {
+    return this.eventLayerRoot.locator("#visibilityAvailableBtn-event-layer-" + this.source).click();
+  }
+
   /**
    * This function triggers "check all" functionality for this event source layer
    * "Check all" function turns on all events for this source,
@@ -380,6 +390,28 @@ class EventTree {
       .filter({ has: eventInstanceLink });
     await expect(eventInstanceNode).toHaveClass(/jstree-unchecked/);
   }
+
+  /**
+   * This function checks if the given event_type node is visible in event tree.
+   * @param {string} event_type, The event type name pointing to the node in tree (e.g. "Active Region", "Corona Hole").
+   * @return {Promise<void>} A promise for you to wait for assertion to complete.
+   */
+  async assertEventTypeNodeVisible(event_type: string): Promise<void> {
+    const eventTypeLink = this.page.getByRole("link", { name: event_type });
+    const eventTypeNode = await this.root.getByRole("listitem").filter({ has: eventTypeLink });
+    return expect(eventTypeNode).toBeVisible();
+  }
+
+  /**
+   * This function checks if the given event_type node is not visible in event tree.
+   * @param {string} event_type, The event type name pointing to the node in tree (e.g. "Active Region", "Corona Hole").
+   * @return {Promise<void>} A promise for you to wait for assertion to complete.
+   */
+  async assertEventTypeNodeNotVisible(event_type: string): Promise<void> {
+    const eventTypeLink = this.page.getByRole("link", { name: event_type });
+    const eventTypeNode = await this.root.getByRole("listitem").filter({ has: eventTypeLink });
+    return expect(eventTypeNode).not.toBeVisible();
+  }
 }
 
 export { EventTree };