diff --git a/src/browser/components/sessionstore/TabGroupState-sys-mjs.patch b/src/browser/components/sessionstore/TabGroupState-sys-mjs.patch
index 0ced48d9aa..7b41d5a43f 100644
--- a/src/browser/components/sessionstore/TabGroupState-sys-mjs.patch
+++ b/src/browser/components/sessionstore/TabGroupState-sys-mjs.patch
@@ -1,14 +1,16 @@
 diff --git a/browser/components/sessionstore/TabGroupState.sys.mjs b/browser/components/sessionstore/TabGroupState.sys.mjs
-index 1289549cf33ce6efb620c877bd1ba1c24475d2b0..4c34c923f4b129dd9ea79414d978c6432317340c 100644
+index 1289549cf33ce6efb620c877bd1ba1c24475d2b0..ff128b9dc8cdcb418b8cc2a416026b58f8df4a1f 100644
 --- a/browser/components/sessionstore/TabGroupState.sys.mjs
 +++ b/browser/components/sessionstore/TabGroupState.sys.mjs
-@@ -65,6 +65,9 @@ class _TabGroupState {
+@@ -65,6 +65,11 @@ class _TabGroupState {
     */
    collect(tabGroup) {
      return {
 +      pinned: tabGroup.pinned,
 +      essential: tabGroup.essential,
 +      splitView: tabGroup.hasAttribute("split-view-group"),
++      parentGroupId: tabGroup.group?.id,
++      isZenFolder: tabGroup.isZenFolder,
        id: tabGroup.id,
        name: tabGroup.label,
        color: tabGroup.color,
diff --git a/src/browser/components/tabbrowser/content/tab-js.patch b/src/browser/components/tabbrowser/content/tab-js.patch
index c759abcabb..e960c40b8d 100644
--- a/src/browser/components/tabbrowser/content/tab-js.patch
+++ b/src/browser/components/tabbrowser/content/tab-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tab.js b/browser/components/tabbrowser/content/tab.js
-index b9381999a77ecacdb95c69494ac8972e9f13d14d..a210b53bb46373f8bab532a00b25301d645641cd 100644
+index b9381999a77ecacdb95c69494ac8972e9f13d14d..7976a3ca5bc45953126e354243d91a2c6d5dccd9 100644
 --- a/browser/components/tabbrowser/content/tab.js
 +++ b/browser/components/tabbrowser/content/tab.js
 @@ -21,6 +21,7 @@
@@ -52,7 +52,7 @@ index b9381999a77ecacdb95c69494ac8972e9f13d14d..a210b53bb46373f8bab532a00b25301d
          return;
        }
  
-@@ -225,11 +228,25 @@
+@@ -225,11 +228,23 @@
      }
  
      get visible() {
@@ -66,13 +66,11 @@ index b9381999a77ecacdb95c69494ac8972e9f13d14d..a210b53bb46373f8bab532a00b25301d
 +      }
 +      // Selected tabs are always visible
 +      if (this.selected || this.multiselected) return true;
-+      // Recursively check all parent groups
-+      let currentParent = this.group;
-+      while (currentParent) {
-+        if (currentParent.collapsed && !currentParent.activeTabs?.includes(this)) {
-+          return false;
++      if (this.group) {
++        if (this.group.hasAttribute("split-view-group") && this.group?.group?.isZenFolder) {
++          return this.group.group.isTabVisibleInGroup(this);
 +        }
-+        currentParent = currentParent.group;
++        return this.group.isTabVisibleInGroup(this);
 +      }
 +      if (this.pinned && !this.hasAttribute("zen-essential") &&
 +          gZenWorkspaces.activeWorkspaceElement?.hasCollapsedPinnedTabs &&
@@ -83,7 +81,7 @@ index b9381999a77ecacdb95c69494ac8972e9f13d14d..a210b53bb46373f8bab532a00b25301d
      }
  
      get hidden() {
-@@ -308,7 +325,7 @@
+@@ -308,7 +323,7 @@
          return false;
        }
  
@@ -92,7 +90,7 @@ index b9381999a77ecacdb95c69494ac8972e9f13d14d..a210b53bb46373f8bab532a00b25301d
      }
  
      get lastAccessed() {
-@@ -393,7 +410,18 @@
+@@ -393,7 +408,24 @@
      }
  
      get group() {
@@ -100,8 +98,14 @@ index b9381999a77ecacdb95c69494ac8972e9f13d14d..a210b53bb46373f8bab532a00b25301d
 +      if (typeof gBrowser === "undefined") {
 +        return null;
 +      }
-+      if (gBrowser.isTabGroup(this.parentElement?.parentElement)) {
-+        return this.parentElement.parentElement;
++      if (this._originalGroup && !this.splitView && (this.parentElement.classList.contains("tab-group-active-tabs-container") || this.parentElement.classList.contains("zen-workspace-pinned-active-tabs-section"))) return this._originalGroup;
++      let group = this.parentElement?.parentElement; // FF groups and Split View
++      if (group && gBrowser.isTabGroup(group)) {
++        return this.parentElement.parentElement
++      }
++      group = this.parentElement?.parentElement?.parentElement; // Folders
++      if (group && gBrowser.isTabGroup(group)) {
++        return this.parentElement.parentElement.parentElement
 +      }
 +      if (this.pinned && !this.hasAttribute('zen-essential')) {
 +        let collapsiblePins = gZenWorkspaces.workspaceElement(this.getAttribute('zen-workspace-id'))?.collapsiblePins;
@@ -112,7 +116,7 @@ index b9381999a77ecacdb95c69494ac8972e9f13d14d..a210b53bb46373f8bab532a00b25301d
      }
  
      get splitview() {
-@@ -475,6 +503,10 @@
+@@ -475,6 +507,10 @@
          }
        }
  
@@ -123,7 +127,7 @@ index b9381999a77ecacdb95c69494ac8972e9f13d14d..a210b53bb46373f8bab532a00b25301d
        // If the previous target wasn't part of this tab then this is a mouseenter event.
        if (!this.contains(event.relatedTarget)) {
          this._mouseenter();
-@@ -504,6 +536,7 @@
+@@ -504,6 +540,7 @@
        if (!this.contains(event.relatedTarget)) {
          this._mouseleave();
        }
@@ -131,7 +135,7 @@ index b9381999a77ecacdb95c69494ac8972e9f13d14d..a210b53bb46373f8bab532a00b25301d
      }
  
      on_dragstart(event) {
-@@ -538,6 +571,8 @@
+@@ -538,6 +575,8 @@
          this.style.MozUserFocus = "ignore";
        } else if (
          event.target.classList.contains("tab-close-button") ||
@@ -140,7 +144,7 @@ index b9381999a77ecacdb95c69494ac8972e9f13d14d..a210b53bb46373f8bab532a00b25301d
          event.target.classList.contains("tab-icon-overlay") ||
          event.target.classList.contains("tab-audio-button")
        ) {
-@@ -572,7 +607,7 @@
+@@ -572,7 +611,7 @@
            }
          } else if (
            event.altKey &&
@@ -149,7 +153,7 @@ index b9381999a77ecacdb95c69494ac8972e9f13d14d..a210b53bb46373f8bab532a00b25301d
          ) {
            eventMaySelectTab = false;
          } else if (!this.selected && this.multiselected) {
-@@ -597,6 +632,10 @@
+@@ -597,6 +636,10 @@
        this.style.MozUserFocus = "";
      }
  
@@ -160,7 +164,7 @@ index b9381999a77ecacdb95c69494ac8972e9f13d14d..a210b53bb46373f8bab532a00b25301d
      on_click(event) {
        if (event.button != 0) {
          return;
-@@ -620,14 +659,31 @@
+@@ -620,14 +663,31 @@
              trigger: "alt_click",
            });
          }
@@ -193,7 +197,7 @@ index b9381999a77ecacdb95c69494ac8972e9f13d14d..a210b53bb46373f8bab532a00b25301d
          gBrowser.multiSelectedTabsCount > 0 &&
          !event.target.classList.contains("tab-close-button") &&
          !event.target.classList.contains("tab-icon-overlay") &&
-@@ -639,8 +695,9 @@
+@@ -639,8 +699,9 @@
        }
  
        if (
@@ -205,7 +209,7 @@ index b9381999a77ecacdb95c69494ac8972e9f13d14d..a210b53bb46373f8bab532a00b25301d
        ) {
          if (this.activeMediaBlocked) {
            if (this.multiselected) {
-@@ -658,7 +715,7 @@
+@@ -658,7 +719,7 @@
          return;
        }
  
@@ -214,7 +218,7 @@ index b9381999a77ecacdb95c69494ac8972e9f13d14d..a210b53bb46373f8bab532a00b25301d
          if (this.multiselected) {
            gBrowser.removeMultiSelectedTabs(
              lazy.TabMetrics.userTriggeredContext(
-@@ -678,6 +735,14 @@
+@@ -678,6 +739,14 @@
          // (see tabbrowser-tabs 'click' handler).
          gBrowser.tabContainer._blockDblClick = true;
        }
@@ -229,7 +233,7 @@ index b9381999a77ecacdb95c69494ac8972e9f13d14d..a210b53bb46373f8bab532a00b25301d
      }
  
      on_dblclick(event) {
-@@ -701,6 +766,8 @@
+@@ -701,6 +770,8 @@
            animate: true,
            triggeringEvent: event,
          });
diff --git a/src/browser/components/tabbrowser/content/tabbrowser-js.patch b/src/browser/components/tabbrowser/content/tabbrowser-js.patch
index e2458ba13b..9116979981 100644
--- a/src/browser/components/tabbrowser/content/tabbrowser-js.patch
+++ b/src/browser/components/tabbrowser/content/tabbrowser-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88f4eec282 100644
+index 43fb79a3060e20f671ae6ffc26350c7abf497702..9ac12f77a7fa77fdfbcfdb218a107a44e1693da0 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -502,6 +502,7 @@
@@ -454,19 +454,18 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
            let { groupId } = tabData;
            const tabGroup = tabGroupWorkingData.get(groupId);
            // if a tab refers to a tab group we don't know, skip any group
-@@ -4564,7 +4692,10 @@
+@@ -4559,7 +4687,9 @@
+ 
+             // if this is the first time encountering a tab group, create its
+             // DOM node once and place it in the tabs bar fragment
+-            if (!tabGroup.node) {
++            if (tabGroup.stateData.isZenFolder || tabGroup.stateData.splitView) {
++              gZenFolders.createGroup(tabGroup.stateData.id, tabGroupWorkingData, tabsFragment);
++            } else {
+               tabGroup.node = this._createTabGroup(
                  tabGroup.stateData.id,
                  tabGroup.stateData.color,
-                 tabGroup.stateData.collapsed,
--                tabGroup.stateData.name
-+                tabGroup.stateData.name,
-+                tabGroup.stateData.pinned,
-+                tabGroup.stateData.essential,
-+                tabGroup.stateData.splitView,
-               );
-               tabsFragment.appendChild(tabGroup.node);
-             }
-@@ -4619,9 +4750,21 @@
+@@ -4619,9 +4749,21 @@
        // to remove the old selected tab.
        if (tabToSelect) {
          let leftoverTab = this.selectedTab;
@@ -488,7 +487,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
  
        if (tabs.length > 1 || !tabs[0].selected) {
          this._updateTabsAfterInsert();
-@@ -4812,11 +4955,14 @@
+@@ -4812,11 +4954,14 @@
        if (ownerTab) {
          tab.owner = ownerTab;
        }
@@ -504,7 +503,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
          if (
            !bulkOrderedOpen &&
            ((openerTab &&
-@@ -4828,7 +4974,7 @@
+@@ -4828,7 +4973,7 @@
            let lastRelatedTab =
              openerTab && this._lastRelatedTabMap.get(openerTab);
            let previousTab = lastRelatedTab || openerTab || this.selectedTab;
@@ -513,7 +512,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
              tabGroup = previousTab.group;
            }
            if (
-@@ -4844,7 +4990,7 @@
+@@ -4844,7 +4989,7 @@
                  previousTab.splitview
                ) + 1;
            } else if (previousTab.visible) {
@@ -522,7 +521,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
            } else if (previousTab == FirefoxViewHandler.tab) {
              elementIndex = 0;
            }
-@@ -4872,14 +5018,14 @@
+@@ -4872,14 +5017,14 @@
        }
        // Ensure index is within bounds.
        if (tab.pinned) {
@@ -541,7 +540,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
  
        if (pinned && !itemAfter?.pinned) {
          itemAfter = null;
-@@ -4896,7 +5042,7 @@
+@@ -4896,7 +5041,7 @@
  
        this.tabContainer._invalidateCachedTabs();
  
@@ -550,7 +549,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
          if (
            (this.isTab(itemAfter) && itemAfter.group == tabGroup) ||
            this.isSplitViewWrapper(itemAfter)
-@@ -4927,7 +5073,11 @@
+@@ -4927,7 +5072,11 @@
          const tabContainer = pinned
            ? this.tabContainer.pinnedTabsContainer
            : this.tabContainer;
@@ -562,7 +561,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        }
  
        if (tab.group?.collapsed) {
-@@ -4942,6 +5092,7 @@
+@@ -4942,6 +5091,7 @@
        if (pinned) {
          this._updateTabBarForPinnedTabs();
        }
@@ -570,7 +569,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
  
        TabBarVisibility.update();
      }
-@@ -5490,6 +5641,7 @@
+@@ -5490,6 +5640,7 @@
          telemetrySource,
        } = {}
      ) {
@@ -578,7 +577,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        // When 'closeWindowWithLastTab' pref is enabled, closing all tabs
        // can be considered equivalent to closing the window.
        if (
-@@ -5579,6 +5731,7 @@
+@@ -5579,6 +5730,7 @@
          if (lastToClose) {
            this.removeTab(lastToClose, aParams);
          }
@@ -586,7 +585,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        } catch (e) {
          console.error(e);
        }
-@@ -5624,6 +5777,14 @@
+@@ -5624,6 +5776,14 @@
          return;
        }
  
@@ -601,7 +600,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        let isVisibleTab = aTab.visible;
        // We have to sample the tab width now, since _beginRemoveTab might
        // end up modifying the DOM in such a way that aTab gets a new
-@@ -5631,6 +5792,9 @@
+@@ -5631,6 +5791,9 @@
        // state).
        let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
        let isLastTab = this.#isLastTabInWindow(aTab);
@@ -611,7 +610,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        if (
          !this._beginRemoveTab(aTab, {
            closeWindowFastpath: true,
-@@ -5642,13 +5806,14 @@
+@@ -5642,13 +5805,14 @@
            telemetrySource,
          })
        ) {
@@ -627,7 +626,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        let lockTabSizing =
          !this.tabContainer.verticalMode &&
          !aTab.pinned &&
-@@ -5679,7 +5844,13 @@
+@@ -5679,7 +5843,13 @@
          // We're not animating, so we can cancel the animation stopwatch.
          Glean.browserTabclose.timeAnim.cancel(aTab._closeTimeAnimTimerId);
          aTab._closeTimeAnimTimerId = null;
@@ -642,7 +641,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
          return;
        }
  
-@@ -5813,7 +5984,7 @@
+@@ -5813,7 +5983,7 @@
            closeWindowWithLastTab != null
              ? closeWindowWithLastTab
              : !window.toolbar.visible ||
@@ -651,7 +650,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
  
          if (closeWindow) {
            // We've already called beforeunload on all the relevant tabs if we get here,
-@@ -5837,6 +6008,7 @@
+@@ -5837,6 +6007,7 @@
  
          newTab = true;
        }
@@ -659,7 +658,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        aTab._endRemoveArgs = [closeWindow, newTab];
  
        // swapBrowsersAndCloseOther will take care of closing the window without animation.
-@@ -5877,13 +6049,7 @@
+@@ -5877,13 +6048,7 @@
        aTab._mouseleave();
  
        if (newTab) {
@@ -674,7 +673,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        } else {
          TabBarVisibility.update();
        }
-@@ -6016,6 +6182,7 @@
+@@ -6016,6 +6181,7 @@
          this.tabs[i]._tPos = i;
        }
  
@@ -682,7 +681,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        if (!this._windowIsClosing) {
          // update tab close buttons state
          this.tabContainer._updateCloseButtons();
-@@ -6201,6 +6368,7 @@
+@@ -6201,6 +6367,7 @@
          memory_after: await getTotalMemoryUsage(),
          time_to_unload_in_ms: timeElapsed,
        });
@@ -690,7 +689,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
      }
  
      /**
-@@ -6246,6 +6414,7 @@
+@@ -6246,6 +6413,7 @@
        }
  
        let excludeTabs = new Set(aExcludeTabs);
@@ -698,7 +697,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
  
        // If this tab has a successor, it should be selectable, since
        // hiding or closing a tab removes that tab as a successor.
-@@ -6258,15 +6427,22 @@
+@@ -6258,15 +6426,22 @@
          !excludeTabs.has(aTab.owner) &&
          Services.prefs.getBoolPref("browser.tabs.selectOwnerOnClose")
        ) {
@@ -723,7 +722,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        let tab = this.tabContainer.findNextTab(aTab, {
          direction: 1,
          filter: _tab => remainingTabs.includes(_tab),
-@@ -6280,7 +6456,7 @@
+@@ -6280,7 +6455,7 @@
        }
  
        if (tab) {
@@ -732,7 +731,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        }
  
        // If no qualifying visible tab was found, see if there is a tab in
-@@ -6301,7 +6477,7 @@
+@@ -6301,7 +6476,7 @@
          });
        }
  
@@ -741,7 +740,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
      }
  
      _blurTab(aTab) {
-@@ -6312,7 +6488,7 @@
+@@ -6312,7 +6487,7 @@
       * @returns {boolean}
       *   False if swapping isn't permitted, true otherwise.
       */
@@ -750,7 +749,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        // Do not allow transfering a private tab to a non-private window
        // and vice versa.
        if (
-@@ -6366,6 +6542,7 @@
+@@ -6366,6 +6541,7 @@
        // fire the beforeunload event in the process.  Close the other
        // window if this was its last tab.
        if (
@@ -758,7 +757,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
          !remoteBrowser._beginRemoveTab(aOtherTab, {
            adoptedByTab: aOurTab,
            closeWindowWithLastTab: true,
-@@ -6377,7 +6554,7 @@
+@@ -6377,7 +6553,7 @@
        // If this is the last tab of the window, hide the window
        // immediately without animation before the docshell swap, to avoid
        // about:blank being painted.
@@ -767,7 +766,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        if (closeWindow) {
          let win = aOtherTab.ownerGlobal;
          win.windowUtils.suppressAnimation(true);
-@@ -6511,11 +6688,13 @@
+@@ -6511,11 +6687,13 @@
        }
  
        // Finish tearing down the tab that's going away.
@@ -781,7 +780,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
  
        this.setTabTitle(aOurTab);
  
-@@ -6717,10 +6896,10 @@
+@@ -6717,10 +6895,10 @@
        SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
      }
  
@@ -794,7 +793,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
          aTab.selected ||
          aTab.closing ||
          // Tabs that are sharing the screen, microphone or camera cannot be hidden.
-@@ -6780,7 +6959,8 @@
+@@ -6780,7 +6958,8 @@
       * @param {object} [aOptions={}]
       *   Key-value pairs that will be serialized into the features string.
       */
@@ -804,7 +803,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        if (this.tabs.length == 1) {
          return null;
        }
-@@ -6797,7 +6977,7 @@
+@@ -6797,7 +6976,7 @@
        // tell a new window to take the "dropped" tab
        let args = Cc["@mozilla.org/array;1"].createInstance(Ci.nsIMutableArray);
        args.appendElement(aTab.splitview ?? aTab);
@@ -813,7 +812,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
          private: PrivateBrowsingUtils.isWindowPrivate(window),
          features: Object.entries(aOptions)
            .map(([key, value]) => `${key}=${value}`)
-@@ -6805,6 +6985,8 @@
+@@ -6805,6 +6984,8 @@
          openerWindow: window,
          args,
        });
@@ -822,7 +821,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
      }
  
      /**
-@@ -6917,7 +7099,7 @@
+@@ -6917,7 +7098,7 @@
       *   `true` if element is a `<tab-group>`
       */
      isTabGroup(element) {
@@ -831,7 +830,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
      }
  
      /**
-@@ -7002,8 +7184,8 @@
+@@ -7002,8 +7183,8 @@
        }
  
        // Don't allow mixing pinned and unpinned tabs.
@@ -842,7 +841,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        } else {
          tabIndex = Math.max(tabIndex, this.pinnedTabCount);
        }
-@@ -7049,8 +7231,8 @@
+@@ -7049,8 +7230,8 @@
        this.#handleTabMove(
          element,
          () => {
@@ -853,7 +852,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
              neighbor = neighbor.group;
            }
            if (neighbor?.splitview) {
-@@ -7061,6 +7243,12 @@
+@@ -7061,6 +7242,12 @@
                return;
              }
            }
@@ -866,7 +865,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
  
            if (movingForwards && neighbor) {
              neighbor.after(element);
-@@ -7119,23 +7307,31 @@
+@@ -7119,23 +7306,31 @@
      #moveTabNextTo(element, targetElement, moveBefore = false, metricsContext) {
        if (this.isTabGroupLabel(targetElement)) {
          targetElement = targetElement.group;
@@ -904,7 +903,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        } else if (!element.pinned && targetElement && targetElement.pinned) {
          // If the caller asks to move an unpinned element next to a pinned
          // tab, move the unpinned element to be the first unpinned element
-@@ -7148,12 +7344,35 @@
+@@ -7148,12 +7343,35 @@
          //    move the tab group right before the first unpinned tab.
          // 4. Moving a tab group and the first unpinned tab is grouped:
          //    move the tab group right before the first unpinned tab's tab group.
@@ -941,7 +940,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
  
        // We want to include the splitview wrapper if it's the targetElement, but
        // not in the case where we want to reverse tabs within the same splitview.
-@@ -7162,6 +7381,7 @@
+@@ -7162,6 +7380,7 @@
        }
  
        let getContainer = () =>
@@ -949,7 +948,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
          element.pinned
            ? this.tabContainer.pinnedTabsContainer
            : this.tabContainer;
-@@ -7170,11 +7390,15 @@
+@@ -7170,11 +7389,15 @@
          element,
          () => {
            if (moveBefore) {
@@ -966,7 +965,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
            }
          },
          metricsContext
-@@ -7248,11 +7472,15 @@
+@@ -7248,11 +7471,15 @@
       * @param {TabMetricsContext} [metricsContext]
       */
      moveTabToExistingGroup(aTab, aGroup, metricsContext) {
@@ -985,7 +984,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        }
        if (aTab.group && aTab.group.id === aGroup.id) {
          return;
-@@ -7324,6 +7552,7 @@
+@@ -7324,6 +7551,7 @@
  
        let state = {
          tabIndex: tab._tPos,
@@ -993,7 +992,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        };
        if (tab.visible) {
          state.elementIndex = tab.elementIndex;
-@@ -7355,7 +7584,7 @@
+@@ -7355,7 +7583,7 @@
        let changedSplitView =
          previousTabState.splitViewId != currentTabState.splitViewId;
  
@@ -1002,7 +1001,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
          tab.dispatchEvent(
            new CustomEvent("TabMove", {
              bubbles: true,
-@@ -7402,6 +7631,10 @@
+@@ -7402,6 +7630,10 @@
  
        moveActionCallback();
  
@@ -1013,7 +1012,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        // Clear tabs cache after moving nodes because the order of tabs may have
        // changed.
        this.tabContainer._invalidateCachedTabs();
-@@ -7452,7 +7685,22 @@
+@@ -7452,7 +7684,22 @@
       * @returns {object}
       *    The new tab in the current window, null if the tab couldn't be adopted.
       */
@@ -1037,7 +1036,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        // Swap the dropped tab with a new one we create and then close
        // it in the other window (making it seem to have moved between
        // windows). We also ensure that the tab we create to swap into has
-@@ -7495,6 +7743,8 @@
+@@ -7495,6 +7742,8 @@
        }
        params.skipLoad = true;
        let newTab = this.addWebTab("about:blank", params);
@@ -1046,7 +1045,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
  
        aTab.container.tabDragAndDrop.finishAnimateTabMove();
  
-@@ -8205,7 +8455,7 @@
+@@ -8205,7 +8454,7 @@
          // preventDefault(). It will still raise the window if appropriate.
          return;
        }
@@ -1055,7 +1054,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        window.focus();
        aEvent.preventDefault();
      }
-@@ -8222,7 +8472,6 @@
+@@ -8222,7 +8471,6 @@
  
      on_TabGroupCollapse(aEvent) {
        aEvent.target.tabs.forEach(tab => {
@@ -1063,7 +1062,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
        });
      }
  
-@@ -8556,7 +8805,9 @@
+@@ -8556,7 +8804,9 @@
  
          let filter = this._tabFilters.get(tab);
          if (filter) {
@@ -1073,7 +1072,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
  
            let listener = this._tabListeners.get(tab);
            if (listener) {
-@@ -9359,6 +9610,7 @@
+@@ -9359,6 +9609,7 @@
              aWebProgress.isTopLevel
            ) {
              this.mTab.setAttribute("busy", "true");
@@ -1081,7 +1080,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
              gBrowser._tabAttrModified(this.mTab, ["busy"]);
              this.mTab._notselectedsinceload = !this.mTab.selected;
            }
-@@ -9439,6 +9691,7 @@
+@@ -9439,6 +9690,7 @@
          // known defaults. Note we use the original URL since about:newtab
          // redirects to a prerendered page.
          const shouldRemoveFavicon =
@@ -1089,7 +1088,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
            !this.mBrowser.mIconURL &&
            !ignoreBlank &&
            !(originalLocation.spec in FAVICON_DEFAULTS);
-@@ -9613,13 +9866,6 @@
+@@ -9613,13 +9865,6 @@
              this.mBrowser.originalURI = aRequest.originalURI;
            }
  
@@ -1103,7 +1102,7 @@ index 43fb79a3060e20f671ae6ffc26350c7abf497702..146b1559b8430773bd4ec173a8f4fe88
          }
  
          let userContextId = this.mBrowser.getAttribute("usercontextid") || 0;
-@@ -10507,7 +10753,8 @@ var TabContextMenu = {
+@@ -10507,7 +10752,8 @@ var TabContextMenu = {
      );
      contextUnpinSelectedTabs.hidden =
        !this.contextTab.pinned || !this.multiselected;
diff --git a/src/browser/components/tabbrowser/content/tabgroup-js.patch b/src/browser/components/tabbrowser/content/tabgroup-js.patch
index 60b9eafaea..51c447d113 100644
--- a/src/browser/components/tabbrowser/content/tabgroup-js.patch
+++ b/src/browser/components/tabbrowser/content/tabgroup-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabgroup.js b/browser/components/tabbrowser/content/tabgroup.js
-index d1be14df27d76a191eaff05502c030fd68c46738..e9b5e90e39b594a6119081c8d707fb4a064fea9b 100644
+index d1be14df27d76a191eaff05502c030fd68c46738..8efbcb24142acf35f63dbaebf6ca7ecb955c6817 100644
 --- a/browser/components/tabbrowser/content/tabgroup.js
 +++ b/browser/components/tabbrowser/content/tabgroup.js
 @@ -14,11 +14,11 @@
@@ -117,7 +117,17 @@ index d1be14df27d76a191eaff05502c030fd68c46738..e9b5e90e39b594a6119081c8d707fb4a
              Services.obs.notifyObservers(
                this,
                "browser-tabgroup-removed-from-dom"
-@@ -223,7 +251,10 @@
+@@ -203,6 +231,9 @@
+           }
+           for (const mutation of mutations) {
+             for (const addedNode of mutation.addedNodes) {
++              if (this.isZenFolder) {
++                this.initTabWeight(addedNode);
++              }
+               if (gBrowser.isTab(addedNode)) {
+                 this.#updateTabAriaHidden(addedNode);
+               } else if (gBrowser.isSplitViewWrapper(addedNode)) {
+@@ -223,7 +254,10 @@
            }
          });
        }
@@ -129,7 +139,7 @@ index d1be14df27d76a191eaff05502c030fd68c46738..e9b5e90e39b594a6119081c8d707fb4a
      }
  
      get color() {
-@@ -317,6 +348,9 @@
+@@ -317,6 +351,9 @@
      }
  
      set collapsed(val) {
@@ -139,7 +149,7 @@ index d1be14df27d76a191eaff05502c030fd68c46738..e9b5e90e39b594a6119081c8d707fb4a
        if (!!val == this.collapsed) {
          return;
        }
-@@ -403,7 +437,6 @@
+@@ -403,7 +440,6 @@
            tabGroupName,
          })
          .then(result => {
@@ -147,7 +157,7 @@ index d1be14df27d76a191eaff05502c030fd68c46738..e9b5e90e39b594a6119081c8d707fb4a
          });
      }
  
-@@ -478,13 +511,68 @@
+@@ -478,13 +514,70 @@
       * @returns {MozTabbrowserTab[]}
       */
      get tabs() {
@@ -162,9 +172,8 @@ index d1be14df27d76a191eaff05502c030fd68c46738..e9b5e90e39b594a6119081c8d707fb4a
 +        tabsCollect.push(item);
 +        if (gBrowser.isTabGroup(item)) {
 +          tabsCollect.push(...item.tabs);
-         }
-       }
--      return childrenArray.filter(node => node.matches("tab"));
++        }
++      }
 +      return tabsCollect.filter(node => node.matches("tab"));
 +    }
 +
@@ -190,15 +199,18 @@ index d1be14df27d76a191eaff05502c030fd68c46738..e9b5e90e39b594a6119081c8d707fb4a
 +            result.push(labelContainer);
 +          }
 +          result.push(...item.childGroupsAndTabs);
-+        }
-+      }
+         }
+       }
+-      return childrenArray.filter(node => node.matches("tab"));
 +      return result;
 +    }
 +
 +    get group() {
-+      if (gBrowser.isTabGroup(this.parentElement?.parentElement)) {
-+        return this.parentElement.parentElement;
-+      }
++      if (this.hasAttribute("split-view-group") && this._originalGroup) return this._originalGroup;
++      let group = this.parentElement?.parentElement; // FF groups and Split View
++      if (group && gBrowser.isTabGroup(group)) return this.parentElement.parentElement
++      group = this.parentElement?.parentElement?.parentElement; // Folders
++      if (group && gBrowser.isTabGroup(group)) return this.parentElement.parentElement.parentElement
 +      return null;
 +    }
 +
@@ -221,7 +233,7 @@ index d1be14df27d76a191eaff05502c030fd68c46738..e9b5e90e39b594a6119081c8d707fb4a
      }
  
      /**
-@@ -592,7 +680,6 @@
+@@ -592,7 +685,6 @@
            );
          } else {
            if (tabOrSplitView.pinned) {
@@ -229,7 +241,7 @@ index d1be14df27d76a191eaff05502c030fd68c46738..e9b5e90e39b594a6119081c8d707fb4a
            }
            let tabToMove =
              this.ownerGlobal === tabOrSplitView.ownerGlobal
-@@ -661,7 +748,7 @@
+@@ -661,7 +753,7 @@
       */
      on_click(event) {
        let isToggleElement =
@@ -238,7 +250,7 @@ index d1be14df27d76a191eaff05502c030fd68c46738..e9b5e90e39b594a6119081c8d707fb4a
          event.target === this.#overflowCountLabel;
        if (isToggleElement && event.button === 0) {
          event.preventDefault();
-@@ -740,5 +827,6 @@
+@@ -740,5 +832,6 @@
      }
    }
  
diff --git a/src/zen/drag-and-drop/ZenDragAndDrop.js b/src/zen/drag-and-drop/ZenDragAndDrop.js
index 0c9d9d4279..1e2f11a11f 100644
--- a/src/zen/drag-and-drop/ZenDragAndDrop.js
+++ b/src/zen/drag-and-drop/ZenDragAndDrop.js
@@ -635,7 +635,7 @@
     }
 
     get #dragShiftableItems() {
-      const separator = gZenWorkspaces.pinnedTabsContainer.querySelector(
+      const separator = gZenWorkspaces.pinnedTabsContainerWrapper.querySelector(
         ".pinned-tabs-container-separator"
       );
       // Make sure to always return the separator at the start of the array
diff --git a/src/zen/folders/ZenFolder.mjs b/src/zen/folders/ZenFolder.mjs
index 0d33826c67..43b4a756cb 100644
--- a/src/zen/folders/ZenFolder.mjs
+++ b/src/zen/folders/ZenFolder.mjs
@@ -17,8 +17,11 @@ export class nsZenFolder extends MozTabbrowserTabGroup {
         <label class="tab-group-label" role="button"/>
         <image class="tab-reset-button reset-icon" role="button" keyNav="false" data-l10n-id="zen-folders-unload-all-tooltip"/>
       </hbox>
-      <html:div class="tab-group-container">
-        <html:div class="zen-tab-group-start" />
+      <html:div class="tab-group-active-tabs-container" />
+      <html:div class="tab-group-container-wrapper">
+        <html:div class="tab-group-container">
+          <html:div class="zen-tab-group-start" />
+        </html:div>
       </html:div>
       <vbox class="tab-group-overflow-count-container" pack="center">
         <label class="tab-group-overflow-count" role="button" />
@@ -101,12 +104,24 @@ export class nsZenFolder extends MozTabbrowserTabGroup {
    * @returns {MozTabbrowserTabGroup|null} The group this folder belongs to, or null if it is not part of a group.
    */
   get group() {
-    if (gBrowser.isTabGroup(this.parentElement?.parentElement)) {
-      return this.parentElement.parentElement;
+    if (gBrowser.isTabGroup(this.parentElement?.parentElement?.parentElement)) {
+      return this.parentElement.parentElement.parentElement;
     }
     return null;
   }
 
+  get groupContainerWrapper() {
+    return this.querySelector(".tab-group-container-wrapper");
+  }
+
+  get groupContainer() {
+    return this.groupContainerWrapper.querySelector(".tab-group-container");
+  }
+
+  get groupActiveTabsContainer() {
+    return this.querySelector(".tab-group-active-tabs-container");
+  }
+
   get isZenFolder() {
     return true;
   }
@@ -114,12 +129,12 @@ export class nsZenFolder extends MozTabbrowserTabGroup {
   get activeGroups() {
     let activeGroups = [];
     let currentGroup = this;
-    if (currentGroup?.hasAttribute("has-active")) {
+    if (currentGroup?.hasActiveTab) {
       activeGroups.push(currentGroup);
     }
     while (currentGroup?.group) {
       currentGroup = currentGroup?.group;
-      if (currentGroup?.hasAttribute("has-active")) {
+      if (currentGroup?.hasActiveTab) {
         activeGroups.push(currentGroup);
       }
     }
@@ -129,10 +144,10 @@ export class nsZenFolder extends MozTabbrowserTabGroup {
   get childActiveGroups() {
     if (this.tagName === "zen-workspace-collapsible-pins") {
       return Array.from(
-        this.parentElement.querySelectorAll("zen-folder[has-active]")
+        this.parentElement.querySelectorAll("zen-folder[hasactivetab]")
       );
     }
-    return Array.from(this.querySelectorAll("zen-folder[has-active]"));
+    return Array.from(this.querySelectorAll("zen-folder[hasactivetab]"));
   }
 
   rename() {
@@ -195,7 +210,10 @@ export class nsZenFolder extends MozTabbrowserTabGroup {
   }
 
   get allItems() {
-    return [...this.groupContainer.children].filter(
+    return [
+      ...this.groupContainer.children,
+      ...this.groupActiveTabsContainer.children,
+    ].filter(
       child =>
         !(
           child.classList.contains("zen-tab-group-start") ||
@@ -222,28 +240,30 @@ export class nsZenFolder extends MozTabbrowserTabGroup {
   }
 
   set activeTabs(tabs) {
-    if (tabs.length) {
-      this._activeTabs = tabs;
-      for (let tab of tabs) {
-        tab.setAttribute("folder-active", "true");
-      }
-    } else {
-      const folders = new Map();
-      for (let tab of this._activeTabs) {
-        const group = tab?.group?.hasAttribute("split-view-group")
-          ? tab?.group?.group
-          : tab?.group;
-        if (!folders.has(group?.id)) {
-          folders.set(group?.id, group?.activeGroups?.at(-1));
-        }
-        let activeGroup = folders.get(group?.id);
-        if (!activeGroup) {
-          tab.removeAttribute("folder-active");
-          tab.style.removeProperty("--zen-folder-indent");
-        }
+    if (this.isBeingDragged) {
+      return;
+    }
+
+    const isAdding = !!tabs.length;
+    if (isAdding) {
+      if (this.hasActiveTab) {
+        const union = (a, b) => {
+          const set = new Set(a);
+          for (const item of b) {
+            set.add(item);
+          }
+          return [...set].sort((aTab, bTab) => aTab._tPos > bTab._tPos);
+        };
+        this._activeTabs = union(this._activeTabs, tabs);
+      } else {
+        this._activeTabs = tabs;
+        this.hasActiveTab = true;
       }
+    }
+
+    if (!isAdding) {
       this._activeTabs = [];
-      folders.clear();
+      this.hasActiveTab = false;
     }
   }
 
@@ -251,6 +271,44 @@ export class nsZenFolder extends MozTabbrowserTabGroup {
     return this._activeTabs;
   }
 
+  initWeight() {
+    let curWeight = 1000;
+    for (const item of this.allItems) {
+      if (!item._zenWeight) {
+        item._zenWeight = curWeight;
+      }
+      curWeight = item._zenWeight + 1000;
+    }
+  }
+
+  initTabWeight(tab) {
+    const elems = this.allItems.filter(el => el !== tab);
+    if (!elems.every(el => el._zenWeight)) {
+      this.initWeight();
+      return;
+    }
+
+    let prevTab = tab.previousElementSibling;
+    let nextTab = tab.nextElementSibling;
+
+    let prevWeight = prevTab?._zenWeight || 0;
+    let nextWeight = nextTab?._zenWeight || Infinity;
+    let tabWeight = tab._zenWeight || -1;
+
+    if (tabWeight <= prevWeight || tabWeight >= nextWeight) {
+      let newTabWeight =
+        nextWeight === Infinity ? prevWeight + 2000 : nextWeight;
+      tab._zenWeight = (prevWeight + newTabWeight) / 2;
+    }
+  }
+
+  removeActiveTab(tab) {
+    this._activeTabs = this._activeTabs.filter(t => t !== tab);
+    if (!this._activeTabs.length) {
+      this.hasActiveTab = false;
+    }
+  }
+
   get resetButton() {
     return (
       this.labelElement.parentElement?.querySelector(".tab-reset-button") ??
@@ -287,26 +345,103 @@ export class nsZenFolder extends MozTabbrowserTabGroup {
   }
 
   addTabs(tabs) {
-    let tabsFromOutside = [];
-    for (let tab of tabs) {
-      if (tab.group !== this) {
-        tabsFromOutside.push(tab);
-      }
-    }
     super.addTabs(tabs);
     if (
       this.collapsed &&
       !gZenFolders._sessionRestoring &&
       this.isLiveFolder &&
-      tabsFromOutside.length
+      tabs.length
     ) {
-      tabsFromOutside.forEach(tab => {
-        tab.setAttribute("folder-active", "true");
-      });
+      this.activeTabs = [...this.activeTabs, ...tabs];
       gZenFolders.animateCollapse(this);
     }
   }
 
+  /**
+   * @returns {MozTabbrowserTab[]}
+   */
+  get tabs() {
+    // add other group tabs if they are under this group
+    const groupContainer = Array.from(this.groupContainer?.children);
+    const groupActiveTabsContainer = Array.from(
+      this.groupActiveTabsContainer?.children
+    );
+    let childs = [...groupActiveTabsContainer, ...groupContainer];
+    const tabsCollect = [];
+    for (let item of childs) {
+      tabsCollect.push(item);
+      if (gBrowser.isTabGroup(item)) {
+        tabsCollect.push(...item.tabs);
+      }
+    }
+    return tabsCollect.filter(node => node.matches("tab"));
+  }
+
+  get childGroupsAndTabs() {
+    const result = [];
+    const groupContainer = Array.from(this.groupContainer?.children);
+    const groupActiveTabsContainer = Array.from(
+      this.groupActiveTabsContainer?.children
+    );
+    let childs = [...groupContainer, ...groupActiveTabsContainer];
+
+    for (const item of childs) {
+      if (gBrowser.isTab(item)) {
+        result.push(item);
+      } else if (gBrowser.isTabGroup(item)) {
+        const labelContainer = item.labelElement;
+        labelContainer.visible = item.visible;
+        if (gBrowser.isTabGroupLabel(labelContainer)) {
+          result.push(labelContainer);
+        }
+        result.push(...item.childGroupsAndTabs);
+      }
+    }
+    return result;
+  }
+
+  /**
+   * @param {MozTabbrowserTab} tab
+   * @returns {boolean}
+   */
+  isTabVisibleInGroup(tab) {
+    // Selected tabs are always visible
+    if (tab.selected || tab.multiselected) {
+      return true;
+    }
+
+    // Recursively check all parent groups
+    let currentGroup = this;
+    while (currentGroup) {
+      if (currentGroup.isBeingDragged) {
+        return false;
+      }
+
+      if (currentGroup.collapsed && !currentGroup.activeTabs?.includes(tab)) {
+        return false;
+      }
+
+      currentGroup = currentGroup.group;
+    }
+
+    return true;
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  get hasActiveTab() {
+    return this.hasAttribute("hasactivetab");
+  }
+
+  /**
+   * @param {boolean} val
+   */
+  set hasActiveTab(val) {
+    val = !!this.activeTabs.length;
+    this.toggleAttribute("hasactivetab", val);
+  }
+
   /**
    * Get the root most collapsed folder in the tree.
    *
diff --git a/src/zen/folders/ZenFolders.mjs b/src/zen/folders/ZenFolders.mjs
index 3267d579fe..0a96228d26 100644
--- a/src/zen/folders/ZenFolders.mjs
+++ b/src/zen/folders/ZenFolders.mjs
@@ -46,12 +46,20 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
   #mouseTimer = null;
   #lastHighlightedGroup = null;
 
+  _ANIMATION_DURATION = {
+    COLLAPSE_TRANSFORM: 180,
+    COLLAPSE_HEIGHT: 200,
+    COLLAPSE_ACTIVE_HEIGHT: 200,
+    COLLAPSE_APPEND: 150,
+    EXPAND_TRANSFORM: 220,
+    EXPAND_HEIGHT: 220,
+    OPACITY: 200,
+  };
+
   #lastFolderContextMenu = null;
 
   #foldersEnabled = false;
 
-  #animationCount = 0;
-
   init() {
     this.#foldersEnabled = !gZenWorkspaces.privateWindowOrDisabled;
 
@@ -314,6 +322,9 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
   on_TabGrouped(event) {
     const tab = event.detail;
     const group = tab.group;
+    if (group.isZenFolder) {
+      group.initTabWeight(tab);
+    }
     if (groupIsCollapsiblePins(group)) {
       return;
     }
@@ -322,10 +333,7 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
 
     if (isActiveFolder) {
       for (const folder of group.activeGroups) {
-        folder.activeTabs = [...new Set([...folder.activeTabs, tab])].sort(
-          (a, b) => a._tPos > b._tPos
-        );
-        this.setFolderIndentation([tab], folder, /* for collapse = */ true);
+        folder.activeTabs = [tab];
       }
     }
 
@@ -339,15 +347,12 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
       group.setAttribute("had-zen-pinned-changed", true);
     }
 
-    if (group.collapsed && !this._sessionRestoring && !group.isLiveFolder) {
-      group.collapsed = group.hasAttribute("has-active");
+    if (group.collapsed && !group.isLiveFolder) {
+      group.collapsed = group.hasActiveTab;
     }
   }
 
   on_FolderGrouped(event) {
-    if (this._sessionRestoring) {
-      return;
-    }
     const folder = event.detail;
     const parentFolder = event.target;
     if (groupIsCollapsiblePins(parentFolder)) {
@@ -356,21 +361,19 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
     const isActiveFolder = parentFolder?.activeGroups?.length > 0;
     const isSplitView = folder.hasAttribute("split-view-group");
     if (isActiveFolder && isSplitView) {
-      parentFolder.activeTabs = [
-        ...new Set([...parentFolder.activeTabs, ...folder.tabs]),
-      ].sort((a, b) => a._tPos > b._tPos);
+      parentFolder.activeTabs = folder.tabs;
     }
     parentFolder.collapsed = isActiveFolder;
   }
 
   on_FolderUngrouped(event) {
-    if (this._sessionRestoring) {
-      return;
-    }
     const parentFolder = event.target;
     const folder = event.detail;
+    delete folder._zenWeight;
     for (const tab of folder.tabs) {
       this.animateUnload(parentFolder, tab, true);
+      delete tab._zenWeight;
+      delete tab._originalGroup;
     }
   }
 
@@ -389,7 +392,6 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
       return;
     }
 
-    collapsedRoot.setAttribute("has-active", "true");
     await this.animateSelect(collapsedRoot);
     gBrowser.tabContainer._invalidateCachedTabs();
   }
@@ -412,6 +414,11 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
   async on_TabUngrouped(event) {
     const tab = event.detail;
     const group = event.target;
+    if (!group.isZenFolder) {
+      return;
+    }
+    delete tab._zenWeight;
+    delete tab._originalGroup;
     if (
       tab.pinned &&
       group.hasAttribute("split-view-group") &&
@@ -549,7 +556,6 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
               gBrowser.tabContainer._invalidateCachedTabs();
               if (selectedTab) {
                 selectedTab.setAttribute("zen-workspace-id", newWorkspace.uuid);
-                selectedTab.removeAttribute("folder-active");
                 gZenWorkspaces.lastSelectedWorkspaceTabs[newWorkspace.uuid] =
                   selectedTab;
               }
@@ -639,15 +645,12 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
       options.workspaceId && workspacePinned
         ? workspacePinned
         : gZenWorkspaces.pinnedTabsContainer;
-    const insertBefore =
-      options.insertBefore ||
-      pinnedContainer.querySelector(".pinned-tabs-container-separator");
+    const insertBefore = options.insertBefore || pinnedContainer.lastChild;
     const emptyTab = gBrowser.addTab("about:blank", {
       skipAnimation: true,
       pinned: true,
       triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal(),
       _forZenEmptyTab: true,
-      createLazyBrowser: true,
     });
 
     gBrowser.pinTab(emptyTab);
@@ -680,7 +683,7 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
       folder.rename();
     }
 
-    this.#groupInit(folder);
+    this.#folderInit(folder);
     return folder;
   }
 
@@ -697,27 +700,18 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
       id = `${Date.now()}-${Math.round(Math.random() * 100)}`;
     }
     folder.id = id;
-    folder.label = options.label || "New Folder";
+    folder.label = options.name || options.label || "New Folder";
+    requestAnimationFrame(() => {
+      folder.collapsed = options.collapsed;
+    });
     folder.saveOnWindowClose = !!options.saveOnWindowClose;
     folder.color = "zen-workspace-color";
-    folder.isLiveFolder = options.isLiveFolder;
 
     folder.setAttribute(
       "zen-workspace-id",
       options.workspaceId || gZenWorkspaces.activeWorkspace
     );
 
-    // note: We set if the folder is collapsed some time after creation.
-    //   we do this to ensure marginBottom is set correctly in the case
-    //   that we want it to initially be collapsed.
-    setTimeout(
-      // eslint-disable-next-line no-shadow
-      folder => {
-        folder.collapsed = !!options.collapsed;
-      },
-      0,
-      folder
-    );
     return folder;
   }
 
@@ -747,7 +741,6 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
   }
 
   handleTabUnpin(tab) {
-    tab.style.removeProperty("--zen-folder-indent");
     const group = tab.group;
     if (!group) {
       return false;
@@ -988,85 +981,13 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
       stateValue = isCollapsed ? "close" : "open";
     }
     svg.setAttribute("state", stateValue);
-    const hasActive = group.hasAttribute("has-active");
+    const hasActive = group.hasActiveTab;
     const activeValue = hasActive && isCollapsed ? "true" : "false";
     svg.setAttribute("active", activeValue);
 
     return [];
   }
 
-  // eslint-disable-next-line complexity
-  setFolderIndentation(
-    tabs,
-    groupElem = undefined,
-    forCollapse = true,
-    animate = true
-  ) {
-    if (!gZenPinnedTabManager.expandedSidebarMode) {
-      return;
-    }
-    const isSpaceCollapsed =
-      gZenWorkspaces.activeWorkspaceElement?.hasCollapsedPinnedTabs;
-
-    let tab = tabs[0];
-    let isTab = false;
-    if (tab.group?.hasAttribute("split-view-group")) {
-      tab = tab.group;
-      isTab = true;
-    }
-    if (!groupElem && tab?.group) {
-      groupElem = tab; // So we can set isTab later
-    }
-    if (
-      gBrowser.isTab(groupElem) &&
-      (!(
-        groupElem.hasAttribute("zen-empty-tab") && groupElem.group === tab.group
-      ) ||
-        groupElem?.hasAttribute("zen-empty-tab"))
-    ) {
-      groupElem = groupElem.group;
-      isTab = true;
-    }
-    if (!isTab && !groupElem?.hasAttribute("selected") && !forCollapse) {
-      groupElem = null; // Don't indent if the group is not selected
-    }
-    if (groupIsCollapsiblePins(groupElem) || isSpaceCollapsed) {
-      groupElem = null; // Don't indent if it's inside the collapsible pinned tabs
-    }
-    let level = groupElem?.level + 1 || 0;
-    if (gBrowser.isTabGroupLabel(groupElem)) {
-      // If it is a group label, we should not increase its level by one.
-      level = groupElem.group.level;
-    }
-    const baseSpacing = 14; // Base spacing for each level
-    let tabToAnimate = tab;
-    if (gBrowser.isTabGroupLabel(tab)) {
-      tabToAnimate = tab.group;
-    }
-    const tabLevel = tabToAnimate?.group?.level || 0;
-    const spacing = (level - tabLevel) * baseSpacing;
-    if (!animate) {
-      for (const tabItem of tabs) {
-        tabItem.style.setProperty("transition", "none", "important");
-      }
-    }
-    for (const tabItem of tabs) {
-      if (
-        gBrowser.isTabGroupLabel(tabItem) ||
-        tabItem.group?.hasAttribute("split-view-group")
-      ) {
-        tabItem.group.style.setProperty("--zen-folder-indent", `${spacing}px`);
-        continue;
-      }
-      tabItem.style.setProperty("--zen-folder-indent", `${spacing}px`);
-    }
-    if (!animate) {
-      for (const tabItem of tabs) {
-        tabItem.style.removeProperty("transition");
-      }
-    }
-  }
-
   changeFolderUserIcon(group) {
     if (!group) {
       return;
@@ -1098,15 +1019,20 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
     }
   }
 
-  #groupInit(group, stateData) {
+  #folderInit(group, stateData) {
     // Setup zen-folder icon to the correct position
     this.updateFolderIcon(group, "auto");
     if (stateData?.userIcon) {
       this.setFolderUserIcon(group, stateData.userIcon);
     }
 
-    if (group.collapsed) {
-      this.on_TabGroupCollapse({ target: group });
+    if (stateData?.isLiveFolder) {
+      group.isLiveFolder = stateData.isLiveFolder;
+    }
+
+    // For Old Restore compatibility
+    if (stateData?.collapsed) {
+      group.collapsed = stateData.collapsed;
     }
 
     const labelContainer = group.querySelector(".tab-group-label-container");
@@ -1143,80 +1069,51 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
     const folders = Array.from(
       gBrowser.tabContainer.querySelectorAll("zen-folder")
     );
-    const splitGroups = Array.from(
-      gBrowser.tabContainer.querySelectorAll("tab-group[split-view-group]")
-    );
-    const allData = [...folders, ...splitGroups];
-
-    // Sort elements in the order in which they appear in the DOM
-    allData.sort((a, b) => {
-      const position = a.compareDocumentPosition(b);
-      if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
-        return -1;
-      }
-      if (position & Node.DOCUMENT_POSITION_PRECEDING) {
-        return 1;
-      }
-      return 0;
-    });
 
     const storedData = [];
 
-    for (const folder of allData) {
-      const parentFolder = folder.parentElement.closest("zen-folder");
-      // Skip split-view-group if it's not a zen-folder child
-      if (!parentFolder && folder.hasAttribute("split-view-group")) {
-        continue;
-      }
-      const emptyFolderTabs = folder.tabs
-        .filter(tab => tab.hasAttribute("zen-empty-tab"))
-        .map(tab => tab.getAttribute("id"));
-
-      let prevSiblingInfo = null;
-      const prevSibling = folder.previousElementSibling;
+    for (const folder of folders) {
       const userIcon = folder?.icon?.querySelector("svg .icon image");
 
-      if (prevSibling) {
-        if (gBrowser.isTabGroup(prevSibling)) {
-          prevSiblingInfo = { type: "group", id: prevSibling.id };
-        } else if (
-          gBrowser.isTab(prevSibling) &&
-          prevSibling.hasAttribute("id")
-        ) {
-          prevSiblingInfo = { type: "tab", id: prevSibling.getAttribute("id") };
-        } else {
-          prevSiblingInfo = { type: "start", id: null };
-        }
-      }
-
       storedData.push({
-        pinned: folder.pinned,
-        essential: folder.essential,
-        splitViewGroup: folder.hasAttribute("split-view-group"),
         id: folder.id,
-        name: folder.label,
-        collapsed: folder.collapsed,
-        saveOnWindowClose: folder.saveOnWindowClose,
-        parentId: parentFolder ? parentFolder.id : null,
-        prevSiblingInfo,
-        emptyTabIds: emptyFolderTabs,
         userIcon: userIcon?.getAttribute("href"),
         isLiveFolder: folder.isLiveFolder,
-        // note: We shouldn't be using the workspace-id anywhere, we are just
-        //  remembering it for the pinned tabs manager to use it later.
-        workspaceId: folder.getAttribute("zen-workspace-id"),
       });
     }
     return storedData;
   }
 
   restoreDataFromSessionStore(data) {
-    if (!data || this._sessionRestoring) {
+    if (!data) {
       return;
     }
 
-    this._sessionRestoring = true;
+    const tabFolderWorkingData = new Map();
+
+    for (const folderData of data) {
+      // For Old Restore compatibility
+      if (folderData.pinned) {
+        this.#oldFoldersRestoreFromSS(data);
+        return;
+      }
+      const workingData = {
+        stateData: folderData,
+        node: document.getElementById(folderData.id),
+      };
+      tabFolderWorkingData.set(folderData.id, workingData);
+    }
+
+    // Initialize UI state for all folders.
+    // Iterate from end to start to ensure correct initialization order for nested folders.
+    for (const { stateData, node } of tabFolderWorkingData.values()) {
+      if (node && stateData) {
+        this.#folderInit(node, stateData);
+      }
+    }
+  }
 
+  #oldFoldersRestoreFromSS(data) {
     const tabFolderWorkingData = new Map();
 
     for (const folderData of data) {
@@ -1311,12 +1208,42 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
     // Initialize UI state for all folders.
     for (const { stateData, node } of tabFolderWorkingData.values()) {
       if (node && !stateData.splitViewGroup) {
-        this.#groupInit(node, stateData);
+        requestAnimationFrame(() => {
+          this.#folderInit(node, stateData);
+        });
       }
     }
 
     gBrowser.tabContainer._invalidateCachedTabs();
-    delete this._sessionRestoring;
+  }
+
+  createGroup(groupId, tabGroupWorkingData, tabsFragment) {
+    const tabGroup = tabGroupWorkingData?.get(groupId);
+    if (!tabGroup || tabGroup.node) {
+      return;
+    }
+
+    if (tabGroup.stateData.isZenFolder) {
+      tabGroup.node = this._createFolderNode(tabGroup.stateData);
+    } else if (tabGroup.stateData.splitView) {
+      tabGroup.node = gBrowser._createTabGroup(
+        tabGroup.stateData.id,
+        tabGroup.stateData.color,
+        tabGroup.stateData.collapsed,
+        tabGroup.stateData.name,
+        tabGroup.stateData.pinned,
+        tabGroup.stateData.essential,
+        tabGroup.stateData.splitView
+      );
+    }
+
+    const parentGroupId = tabGroup.stateData.parentGroupId;
+    if (parentGroupId && tabGroupWorkingData.has(parentGroupId)) {
+      const parentGroup = tabGroupWorkingData.get(parentGroupId);
+      parentGroup.containingTabsFragment.appendChild(tabGroup.node);
+    } else {
+      tabsFragment.appendChild(tabGroup.node);
+    }
   }
 
   /**
@@ -1364,460 +1291,465 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
     }
   }
 
-  #normalizeGroupItems(items) {
-    return items
-      .filter(item => !item.hasAttribute("zen-empty-tab"))
-      .map(item => {
-        if (gBrowser.isTabGroup(item)) {
-          item = item.firstChild;
-        } else if (gBrowser.isTabGroupLabel(item)) {
-          if (item?.group?.hasAttribute("split-view-group")) {
-            item = item.group;
-          } else {
-            item = item.parentElement;
-          }
-        }
-        return item;
-      });
+  getBoundsWithoutFlushing(element) {
+    return window.windowUtils.getBoundsWithoutFlushing(element);
   }
 
-  #shouldTabBeActive(tab, contextGroup) {
-    if (tab.multiselected || tab.selected) {
-      return true;
-    }
-    // See https://github.com/zen-browser/desktop/issues/12509.
-    // We can't just blindly check for the tab's active state
-    // because it would mean that all tabs in a collapsed group that
-    // are active means they should be active for contextGroup as well,
-    // even if they are active because of another group they belong to.
-    return tab.hasAttribute("folder-active") && contextGroup === tab.group;
+  #calculateHeightShift(container) {
+    return -1 * this.getBoundsWithoutFlushing(container).height;
   }
 
-  #collectGroupItems(group, opts = {}) {
-    const {
-      selectedTabs = [],
-      splitViewIds = new Set(),
-      activeFoldersIds = new Set(),
-    } = opts;
-    const folders = new Map();
-    return group.childGroupsAndTabs
-      .filter(item => !item.hasAttribute("zen-empty-tab"))
-      .map(item => {
-        const isSplitView = item.group?.hasAttribute?.("split-view-group");
-        const itemGroup = isSplitView ? item.group.group : item.group;
-        if (!folders.has(itemGroup?.id)) {
-          folders.set(itemGroup?.id, itemGroup?.activeGroups[0]);
-        }
-        const lastActiveFolder = folders.get(itemGroup?.id);
-        const activeFolderId = lastActiveFolder?.id;
-        const splitViewId = isSplitView ? item?.group?.id : null;
-
-        if (this.#shouldTabBeActive(item, group)) {
-          selectedTabs.push(item);
-          if (splitViewId) {
-            splitViewIds.add(splitViewId);
-          }
-          if (activeFolderId) {
-            activeFoldersIds.add(activeFolderId);
-          }
-        }
-
-        if (gBrowser.isTabGroupLabel(item)) {
-          if (isSplitView) {
-            item = item.group;
-          } else {
-            item = item.parentElement;
-          }
-        }
-
-        return { item, splitViewId, activeFolderId };
-      });
+  #getSelectedTabs(group) {
+    return group.tabs.flatMap(tab => {
+      if (tab.splitView && (tab.multiselected || tab.selected)) {
+        return tab.group.tabs;
+      } else if (tab.multiselected || tab.selected) {
+        return [tab];
+      }
+      return [];
+    });
   }
 
-  #createAnimation(items, targetState, opts, callback = () => {}) {
-    items = Array.isArray(items) ? items : [items];
-    return items.map(item =>
-      gZenUIManager.motion.animate(item, targetState, opts).then(callback)
+  async createAnimation(element, keyframes, options = {}, callback = null) {
+    const elements = Array.isArray(element) ? element : [element];
+
+    await Promise.all(
+      elements.map(
+        el =>
+          new Promise(resolve => {
+            const animation = el.animate(keyframes, {
+              ...options,
+            });
+            animation.onfinish = () => {
+              // Set the final value of the animation to the element style
+              try {
+                animation.commitStyles();
+              } catch {
+                // Ignore Uncaught DOMException: Animation.commitStyles: Target is not rendered
+              }
+              animation.cancel();
+              resolve();
+            };
+          })
+      )
     );
+
+    if (callback) {
+      callback();
+    }
   }
 
-  #calculateHeightShift(tabsContainer, selectedTabs) {
-    let heightShift = 0;
-    if (selectedTabs.length) {
-      return heightShift;
+  #insertInOrder(container, element, isAdding = false) {
+    const weight = element._zenWeight;
+    if (weight === undefined) {
+      container.appendChild(element);
+      return;
     }
-    heightShift +=
-      window.windowUtils.getBoundsWithoutFlushing(tabsContainer).height;
-    if (tabsContainer.separatorElement) {
-      heightShift -= window.windowUtils.getBoundsWithoutFlushing(
-        tabsContainer.separatorElement
-      ).height;
+
+    let insertBefore = null;
+    for (const child of container.children) {
+      if (child === element) {
+        continue;
+      }
+      const activeCondition = isAdding
+        ? child._originalGroup === element._originalGroup
+        : true;
+      const childWeight = child._zenWeight;
+      if (
+        childWeight !== undefined &&
+        childWeight > weight &&
+        activeCondition
+      ) {
+        insertBefore = child;
+        break;
+      }
     }
 
-    return heightShift;
+    if (insertBefore) {
+      gBrowser.moveTabBefore(element, insertBefore);
+    } else {
+      container.appendChild(element);
+    }
   }
 
-  get #folderAnimationDuration() {
-    return this._dontAnimateFolder ? 0 : 0.12;
+  #animateActiveTabsAdd(elem, folder) {
+    const tabsActiveContainer = folder.groupActiveTabsContainer;
+    const firstRect = elem.getBoundingClientRect();
+    this.#insertInOrder(tabsActiveContainer, elem, true);
+    const lastRect = elem.getBoundingClientRect();
+    const invertY = firstRect.top - lastRect.top;
+    return this.createAnimation(
+      elem,
+      { transform: [`translateY(${invertY}px)`, "translateY(0px)"] },
+      {
+        duration: this._ANIMATION_DURATION.COLLAPSE_APPEND,
+        easing: "ease-in-out",
+      },
+      () => {
+        elem.style.removeProperty("transform");
+      }
+    );
   }
 
-  async animateCollapse(group) {
-    this.cancelPopupTimer();
-
+  #moveToActiveTabsContainer(group, activeTabs, isAdding) {
+    const splitGroupIds = new Set();
     const animations = [];
-    const selectedTabs = [];
-    const splitViewIds = new Set();
-    const activeFoldersIds = new Set();
-    const itemsToHide = [];
-
-    const tabsContainer = group.groupContainer;
-    const groupStart = group.groupStartElement;
-
-    const groupItems = this.#collectGroupItems(group, {
-      selectedTabs,
-      splitViewIds,
-      activeFoldersIds,
-    });
-    const collapsedHeight = this.#calculateHeightShift(
-      tabsContainer,
-      selectedTabs
-    );
-
-    if (selectedTabs.length) {
-      for (let i = 0; i < groupItems.length; i++) {
-        const { item, splitViewId, activeFolderId } = groupItems[i];
-
-        // Skip selected items
-        if (selectedTabs.includes(item)) {
-          continue;
-        }
 
-        // Skip items from selected split-view groups
-        if (splitViewId && splitViewIds.has(splitViewId)) {
+    for (const tab of activeTabs) {
+      let element;
+      if (tab.splitView) {
+        const splitGroup = tab.group;
+        if (splitGroupIds.has(splitGroup.id)) {
           continue;
         }
+        splitGroupIds.add(splitGroup.id);
+        element = splitGroup;
+      } else {
+        element = tab;
+      }
 
-        // Skip items from selected active groups
-        if (activeFolderId && activeFoldersIds.has(activeFolderId)) {
-          // If item is tab-group-label-container we should hide it.
-          // Other items between tab-group-labe-container and folder-active tab should be visible cuz they are hidden by margin-top
-          if (
-            item.parentElement.id !== activeFolderId &&
-            !item.hasAttribute("folder-active")
-          ) {
-            continue;
+      if (isAdding) {
+        // === COLLAPSE ===
+        if (!element._originalGroup) {
+          if (tab.splitView) {
+            group.groupActiveTabsContainer.style.removeProperty("height");
           }
+          element._originalGroup = element.group;
         }
 
-        if (!itemsToHide.includes(item)) {
-          itemsToHide.push(item);
-        }
-      }
+        animations.push(this.#animateActiveTabsAdd(element, group));
+      } else {
+        // === EXPAND ===
+        const originalGroup = element._originalGroup;
 
-      group.setAttribute("has-active", "true");
-      group.activeTabs = selectedTabs;
+        if (originalGroup === group) {
+          const tabsContainer = originalGroup.groupContainer;
+          this.#insertInOrder(tabsContainer, element);
+          delete element._originalGroup;
+        } else {
+          const activeFolder = group.childActiveGroups?.find(folder =>
+            folder.activeTabs.includes(tab)
+          );
 
-      selectedTabs.forEach(tab => {
-        this.setFolderIndentation([tab], group, /* for collapse = */ true);
-      });
+          if (activeFolder) {
+            animations.push(this.#animateActiveTabsAdd(element, activeFolder));
+          } else {
+            if (!originalGroup) {
+              return;
+            }
+            const tabsContainer = originalGroup.groupContainer;
+            this.#insertInOrder(tabsContainer, element);
+            delete element._originalGroup;
+          }
+        }
+      }
     }
+    return animations;
+  }
 
-    let duration = this.#folderAnimationDuration;
-
-    animations.push(
-      ...this.#createAnimation(
-        itemsToHide,
-        { opacity: [1, 0], height: ["auto", 0] },
-        { duration, ease: "easeInOut" }
-      ),
-      ...this.updateFolderIcon(group),
-      ...this.#createAnimation(
-        groupStart,
-        {
-          marginTop: -(
-            collapsedHeight +
-            4 * (selectedTabs.length === 0 ? 1 : 0)
-          ),
-        },
-        { duration, ease: "easeInOut" }
-      )
-    );
-
-    gBrowser.tabContainer._invalidateCachedVisibleTabs();
-    this.#animationCount += 1;
-    await Promise.all(animations);
-    if (this.#animationCount) {
-      this.#animationCount -= 1;
-      return;
-    }
-    // Prevent hiding if we spam the group animations
-    if (!selectedTabs.length && !this.#animationCount) {
-      tabsContainer.setAttribute("hidden", true);
+  #queueAnimation(group, animationTask) {
+    // If the queue is not yet created, create an empty successful resolved Promise
+    if (!group._animationQueue) {
+      group._animationQueue = Promise.resolve();
     }
 
-    this.styleCleanup(itemsToHide);
-  }
+    // Connect the new task to the completion of the previous
+    group._animationQueue = group._animationQueue
+      .then(() => animationTask())
+      .catch(console.error);
 
-  async animateExpand(group) {
-    this.cancelPopupTimer();
-
-    const animations = [];
-    const itemsToHide = [];
+    return group._animationQueue;
+  }
 
-    const tabsContainer = group.groupContainer;
-    tabsContainer.removeAttribute("hidden");
-    tabsContainer.style.overflowY = "hidden";
+  async animateCollapse(group) {
+    return this.#queueAnimation(group, async () => {
+      this.cancelPopupTimer();
 
-    const groupStart = group.groupStartElement;
-    const itemsToShow = this.#normalizeGroupItems(group.childGroupsAndTabs);
-    const activeFolders = group.childActiveGroups;
+      const animations = [];
+      const selectedTabs = this.#getSelectedTabs(group);
 
-    for (const folder of activeFolders) {
-      const splitViewIds = new Set();
-      const selectedTabs = folder.activeTabs;
+      const tabsContainer = group.groupContainer;
+      const tabsContainerWrapper = group.groupContainerWrapper;
+      const tabsContainerActive = group.groupActiveTabsContainer;
 
-      const activeFoldersIds = new Set();
-      const activeFolderItems = this.#collectGroupItems(folder, {
-        splitViewIds,
-        activeFoldersIds,
-      });
+      // Calculate the height of the tabs container for animation
+      const collapsedHeight = this.#calculateHeightShift(tabsContainer);
 
       if (selectedTabs.length) {
-        for (let i = 0; i < activeFolderItems.length; i++) {
-          const { item, splitViewId, activeFolderId } = activeFolderItems[i];
+        group.activeTabs = selectedTabs;
+        animations.push(
+          this.#moveToActiveTabsContainer(group, selectedTabs, true)
+        );
+      }
 
-          // Skip selected items
-          if (selectedTabs.includes(item)) {
-            continue;
-          }
+      const items = group.allItems.filter(
+        item =>
+          !selectedTabs
+            .map(tab => (tab.splitView ? tab.group : tab))
+            .includes(item)
+      );
 
-          // Skip items from selected split-view groups
-          if (splitViewId && splitViewIds.has(splitViewId)) {
-            continue;
-          }
+      const activeContainerHeight = new Set(
+        selectedTabs.map(tab => (tab.splitView ? tab.group : tab))
+      );
 
-          if (activeFolderId && activeFoldersIds.has(activeFolderId)) {
-            const parentFolder = item.parentElement;
-            if (
-              gBrowser.isTabGroup(parentFolder) &&
-              parentFolder.id !== activeFolderId &&
-              item.hasAttribute("folder-active")
-            ) {
-              continue;
-            }
+      animations.push(
+        ...this.updateFolderIcon(group),
+        this.createAnimation(
+          tabsContainer,
+          { transform: [`translateY(${collapsedHeight}px)`] },
+          {
+            duration: gReduceMotion
+              ? 0
+              : this._ANIMATION_DURATION.COLLAPSE_TRANSFORM,
+            easing: "ease-in-out",
           }
-
-          if (!itemsToHide.includes(item)) {
-            itemsToHide.push(item);
+        ),
+        this.createAnimation(
+          tabsContainerWrapper,
+          {
+            gridTemplateRows: ["1fr", "0fr"],
+          },
+          {
+            duration: gReduceMotion
+              ? 0
+              : this._ANIMATION_DURATION.COLLAPSE_HEIGHT,
+            easing: "ease-in-out",
           }
-        }
-      }
-    }
-
-    const afterMarginTop = () => {
-      tabsContainer.style.overflowY = "";
-      if (group.hasAttribute("has-active")) {
-        const activeTabs = group.activeTabs;
-        const folders = new Map();
-        group.removeAttribute("has-active");
-        for (let tab of activeTabs) {
-          const tabGroup = tab?.group?.hasAttribute("split-view-group")
-            ? tab?.group?.group
-            : tab?.group;
-          if (!folders.has(tabGroup?.id)) {
-            folders.set(tabGroup?.id, tabGroup?.activeGroups?.at(-1));
+        ),
+        this.createAnimation(
+          items,
+          {
+            opacity: [1, 0],
+          },
+          {
+            duration: gReduceMotion ? 0 : this._ANIMATION_DURATION.OPACITY,
+            easing: "ease-in-out",
           }
-          let activeGroup = folders.get(tabGroup?.id);
-          if (activeGroup) {
-            this.setFolderIndentation(
-              [tab],
-              activeGroup,
-              /* for collapse = */ true
-            );
-          } else {
-            // Since the folder is now expanded, we should remove active attribute
-            // to the tab that was previously visible
-            tab.removeAttribute("folder-active");
-            if (tab.group?.hasAttribute("split-view-group")) {
-              tab.group.style.removeProperty("--zen-folder-indent");
-            } else {
-              tab.style.removeProperty("--zen-folder-indent");
-            }
+        ),
+        this.createAnimation(
+          tabsContainerActive,
+          { height: ["0px", `${activeContainerHeight.size * 40}px`] },
+          {
+            duration: gReduceMotion
+              ? 0
+              : this._ANIMATION_DURATION.COLLAPSE_ACTIVE_HEIGHT,
+            easing: "ease-in-out",
+          },
+          () => {
+            tabsContainerActive.style.removeProperty("height");
           }
-        }
-        folders.clear();
-      }
-      // Folder has been expanded and has no active tabs
-      group.activeTabs = [];
-    };
+        )
+      );
 
-    let duration = this.#folderAnimationDuration;
-
-    animations.push(
-      ...this.#createAnimation(
-        itemsToShow,
-        { opacity: "", height: "" },
-        { duration, ease: "easeInOut" }
-      ),
-      ...this.#createAnimation(
-        itemsToHide,
-        { opacity: 0, height: 0 },
-        { duration, ease: "easeInOut" }
-      ),
-      ...this.updateFolderIcon(group),
-      ...this.#createAnimation(
-        groupStart,
-        {
-          marginTop: 0,
-        },
-        { duration, ease: "easeInOut" },
-        afterMarginTop
-      )
-    );
+      gBrowser.tabContainer._invalidateCachedVisibleTabs();
+      await Promise.all(animations).then(() => {
+        items.forEach(item => item.style.removeProperty("opacity"));
+      });
+    });
+  }
 
-    this.#animationCount += 1;
-    await Promise.all(animations);
-    this.#animationCount -= 1;
+  async animateExpand(group) {
+    return this.#queueAnimation(group, async () => {
+      this.cancelPopupTimer();
 
-    // Cleanup
-    this.styleCleanup(itemsToShow);
-    this.styleCleanup(itemsToHide);
-  }
+      const animations = [];
 
-  async animateUnloadAll(group) {
-    const animations = [];
+      const tabsContainer = group.groupContainer;
+      const tabsContainerWrapper = group.groupContainerWrapper;
 
-    const activeGroups = [group, ...group.childActiveGroups];
-    for (const folder of activeGroups) {
-      folder.removeAttribute("has-active");
-      folder.activeTabs = [];
-      const groupItems = this.#normalizeGroupItems(folder.allItems);
-      const tabsContainer = folder.groupContainer;
-
-      // Set correct margin-top after animation
-      const afterAnimate = () => {
-        groupStart.style.removeProperty("margin-top");
-        this.styleCleanup(groupItems);
-        // Trigger the recalculation so that zen returns
-        // the correct container size in the DOM
-        tabsContainer.offsetHeight;
-        tabsContainer.setAttribute("hidden", true);
-        const collapsedHeight = this.#calculateHeightShift(tabsContainer, []);
-        groupStart.style.marginTop = `${-(collapsedHeight + 4)}px`;
-      };
+      const activeTabs = group.activeTabs;
+      if (group.activeTabs.length) {
+        group.activeTabs = [];
+        tabsContainer.style.transform = "translateY(0px)";
+        animations.push(
+          this.#moveToActiveTabsContainer(group, activeTabs, false)
+        );
+      }
 
-      const groupStart = folder.groupStartElement;
-      const collapsedHeight = this.#calculateHeightShift(tabsContainer, []);
+      const items = group.allItems
+        .reverse()
+        .filter(
+          item =>
+            !activeTabs
+              .map(tab => (tab.splitView ? tab.group : tab))
+              .includes(item)
+        );
+
+      const clearContainerStyle = () => {
+        items.forEach(item => item.style.removeProperty("opacity"));
+        if (!group.hasActiveTab) {
+          tabsContainerWrapper.style.removeProperty("grid-template-rows");
+          tabsContainer.style.removeProperty("transform");
+        }
+      };
 
-      // Collect animations for this specific folder becoming inactive
       animations.push(
-        ...this.updateFolderIcon(folder, "close", false),
-        ...this.#createAnimation(
-          groupStart,
+        ...this.updateFolderIcon(group),
+        this.createAnimation(
+          tabsContainer,
+          { transform: ["translateY(0px)"] },
+          {
+            duration: this._ANIMATION_DURATION.EXPAND_TRANSFORM,
+            easing: "ease-in-out",
+          }
+        ),
+        this.createAnimation(
+          items,
+          {
+            opacity: [0, 1],
+          },
+          {
+            duration: gReduceMotion ? 0 : this._ANIMATION_DURATION.OPACITY,
+            easing: "ease-in-out",
+          }
+        ),
+        this.createAnimation(
+          tabsContainerWrapper,
           {
-            marginTop: -(collapsedHeight + 4),
+            gridTemplateRows: ["0fr", "1fr"],
           },
-          { duration: 0.12, ease: "easeInOut" },
-          afterAnimate
+          {
+            duration: this._ANIMATION_DURATION.EXPAND_HEIGHT,
+            easing: "ease-in-out",
+          }
         )
       );
-    }
 
-    this.#animationCount += 1;
-    await Promise.all(animations);
-    this.#animationCount -= 1;
-    gBrowser.tabContainer._invalidateCachedVisibleTabs();
+      await Promise.all(animations).then(clearContainerStyle);
+    });
   }
 
-  async animateUnload(group, tabToUnload, ungroup = false) {
-    const isSplitView = tabToUnload.group?.hasAttribute("split-view-group");
-    if (
-      (!group?.isZenFolder || !isSplitView) &&
-      !tabToUnload.hasAttribute("folder-active")
-    ) {
-      return;
-    }
-    const animations = [];
-    let lastTab = false;
-
-    const activeGroups = group.activeGroups;
-    for (const folder of activeGroups) {
-      folder.activeTabs = folder.activeTabs.filter(tab => tab !== tabToUnload);
-
-      if (folder.activeTabs.length === 0) {
-        lastTab = true;
-        animations.push(async () => {
-          folder.removeAttribute("has-active");
-          const groupItems = this.#normalizeGroupItems(folder.allItems);
-          const tabsContainer = folder.groupContainer;
-
-          // Set correct margin-top after animation
-          const afterAnimate = () => {
-            groupStart.style.removeProperty("margin-top");
-            this.styleCleanup(groupItems);
-            // Trigger the recalculation so that zen returns
-            // the correct container size in the DOM
-            tabsContainer.offsetHeight;
-            tabsContainer.setAttribute("hidden", true);
-            const collapsedHeight = this.#calculateHeightShift(
-              tabsContainer,
-              []
-            );
-            groupStart.style.marginTop = `${-(collapsedHeight + 4)}px`;
-          };
-
-          const groupStart = folder.groupStartElement;
-          const collapsedHeight = this.#calculateHeightShift(tabsContainer, []);
-
-          // Collect animations for this specific folder becoming inactive
-          const folderAnimation = [
-            ...this.updateFolderIcon(folder, "close", false),
-            ...this.#createAnimation(
-              groupStart,
+  async animateUnloadAll(group) {
+    return this.#queueAnimation(group, async () => {
+      const animations = [];
+      const activeFolders = [group, ...group.childActiveGroups];
+      const tabsToMove = group.activeTabs;
+      const alreadyAnimated = new Set();
+      for (const folder of activeFolders) {
+        const activeTabs = folder.activeTabs;
+        folder.activeTabs = [];
+        const activeContainer = folder.groupActiveTabsContainer;
+        activeContainer.style.overflowY = "clip";
+        const containerHeight =
+          this.getBoundsWithoutFlushing(activeContainer).height;
+        animations.push(
+          ...this.updateFolderIcon(folder, "close", false),
+          this.createAnimation(
+            activeContainer,
+            { height: [`${containerHeight}px`, "0px"] },
+            {
+              duration: this._ANIMATION_DURATION.COLLAPSE_ACTIVE_HEIGHT,
+              easing: "ease-in-out",
+            },
+            () => {
+              activeContainer.style.removeProperty("height");
+              activeContainer.style.removeProperty("overflow-y");
+            }
+          )
+        );
+        for (let i = 0; i < activeTabs.length; i++) {
+          const tab = activeTabs[i];
+          if (alreadyAnimated.has(tab)) {
+            continue;
+          }
+          alreadyAnimated.add(tab);
+          animations.push(
+            this.createAnimation(
+              tab,
               {
-                marginTop: -(collapsedHeight + 4),
+                transform: [
+                  "translateY(0px)",
+                  `translateY(-${containerHeight}px)`,
+                ],
               },
-              { duration: 0.12, ease: "easeInOut" },
-              afterAnimate
-            ),
-          ];
-          await Promise.all(folderAnimation);
-        });
+              {
+                duration: this._ANIMATION_DURATION.COLLAPSE_TRANSFORM,
+                easing: "ease-in-out",
+              },
+              () => {
+                tab.style.removeProperty("transform");
+              }
+            )
+          );
+        }
       }
-    }
 
-    tabToUnload.removeAttribute("folder-active");
-    if (isSplitView) {
-      tabToUnload = tabToUnload.group;
-    }
-
-    tabToUnload.style.removeProperty("--zen-folder-indent");
+      await Promise.all(animations);
+      await Promise.all(
+        this.#moveToActiveTabsContainer(group, tabsToMove, false)
+      );
+    });
+  }
 
-    let tabUnloadAnimations = [];
-    if (!ungroup && !lastTab) {
-      tabUnloadAnimations = this.#createAnimation(
-        tabToUnload,
-        {
-          opacity: 0,
-          height: 0,
-        },
-        {
-          duration: 0.12,
-          ease: "easeInOut",
+  async animateUnload(group, tabToUnload, ungroup = false) {
+    return this.#queueAnimation(group, async () => {
+      const animations = [];
+      const isSplitView = tabToUnload.splitView ?? false;
+      const activeFolders = group.activeGroups;
+      if (!activeFolders.length) {
+        return;
+      }
+      for (const folder of activeFolders) {
+        folder.removeActiveTab(tabToUnload);
+        if (!folder.activeTabs.length) {
+          const activeContainer = folder.groupActiveTabsContainer;
+          activeContainer.style.overflowY = "clip";
+          const containerHeight =
+            this.getBoundsWithoutFlushing(activeContainer).height;
+          animations.push(
+            ...this.updateFolderIcon(folder, "close", false),
+            this.createAnimation(
+              activeContainer,
+              { height: [`${containerHeight}px`, "0px"] },
+              {
+                duration: this._ANIMATION_DURATION.COLLAPSE_ACTIVE_HEIGHT,
+                easing: "ease-in-out",
+              },
+              () => {
+                activeContainer.style.removeProperty("height");
+                activeContainer.style.overflowY = "";
+              }
+            )
+          );
         }
-      );
-    }
+      }
 
-    // Manage global animation count
-    this.#animationCount += 1;
+      if (isSplitView) {
+        tabToUnload = tabToUnload.group;
+      }
 
-    // Await the tab unload animation first
-    await Promise.all(tabUnloadAnimations);
-    await Promise.all(
-      animations.map(item => (typeof item === "function" ? item() : item))
-    );
-    this.#animationCount -= 1;
-    gBrowser.tabContainer._invalidateCachedTabs();
+      const activeContainer = group.groupActiveTabsContainer;
+      activeContainer.style.overflowY = "clip";
+      const tabHeight = this.getBoundsWithoutFlushing(tabToUnload).height;
+      animations.push(
+        this.createAnimation(
+          tabToUnload,
+          {
+            transform: ["translateY(0px)", `translateY(-${tabHeight}px)`],
+            height: [`${tabHeight}px`, "0px"],
+          },
+          {
+            duration: this._ANIMATION_DURATION.COLLAPSE_TRANSFORM,
+            easing: "ease-in-out",
+          },
+          () => {
+            tabToUnload.style.removeProperty("transform");
+            tabToUnload.style.removeProperty("height");
+            activeContainer.style.overflowY = "";
+          }
+        )
+      );
+      group.removeActiveTab(tabToUnload);
+      // TODO: Check that no styles are left on elements
+      if (ungroup) {
+        return;
+      }
+      await Promise.all(animations);
+      await Promise.all(
+        this.#moveToActiveTabsContainer(group, [tabToUnload], false)
+      );
+    });
   }
 
   async animateSelect(group) {
@@ -1825,168 +1757,140 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
       return;
     }
 
-    this.cancelPopupTimer();
-
-    const animations = [];
-    const selectedTabs = [];
-    const splitViewIds = new Set();
-    const itemsToHide = [];
-
-    const groupItems = this.#collectGroupItems(group, {
-      selectedTabs,
-      splitViewIds,
-    });
-
-    for (const tab of selectedTabs) {
-      let currentGroup = tab?.group?.hasAttribute("split-view-group")
-        ? tab.group.group
-        : tab?.group;
-      while (currentGroup) {
-        const activeTabs = selectedTabs.filter(t =>
-          currentGroup.tabs.includes(t)
-        );
-        if (activeTabs.length) {
-          if (currentGroup.collapsed) {
-            if (currentGroup.hasAttribute("has-active")) {
-              // It is important to keep the sequence of elements as in the DOM
-              currentGroup.activeTabs = [
-                ...new Set([...currentGroup.activeTabs, ...activeTabs]),
-              ].sort((a, b) => a._tPos > b._tPos);
-            } else {
-              currentGroup.setAttribute("has-active", "true");
-              currentGroup.activeTabs = activeTabs;
-            }
-
-            const tabsContainer = currentGroup.groupContainer;
-            const groupStart = currentGroup.groupStartElement;
-            tabsContainer.style.overflowY = "clip";
-
-            if (tabsContainer.hasAttribute("hidden")) {
-              tabsContainer.removeAttribute("hidden");
-            }
-
-            const afterMarginTop = () => {
-              tabsContainer.style.overflowY = "";
-            };
+    return this.#queueAnimation(group, async () => {
+      this.cancelPopupTimer();
 
-            animations.push(
-              ...this.updateFolderIcon(currentGroup, "close", false),
-              ...this.#createAnimation(
-                groupStart,
-                {
-                  marginTop: 0,
-                },
-                { duration: 0.12, ease: "easeInOut" },
-                afterMarginTop
-              )
-            );
-            for (const activeTab of activeTabs) {
-              this.setFolderIndentation(
-                [activeTab],
-                currentGroup,
-                /* for collapse = */ true,
-                /* animate = */ false
-              );
-            }
-          }
-        }
-        currentGroup = currentGroup.group;
+      const selectedTabs = this.#getSelectedTabs(group);
+      const tabsActiveContainer = group.groupActiveTabsContainer;
+      if (selectedTabs.every(t => tabsActiveContainer.contains(t))) {
+        return;
       }
-    }
 
-    const itemsToShow = [];
-    if (selectedTabs.length) {
-      for (let i = 0; i < groupItems.length; i++) {
-        const { item, splitViewId } = groupItems[i];
-
-        let itemVisible = item.visible;
-        if (itemVisible) {
-          itemsToShow.push(item);
-        }
-
-        // Skip selected items
-        if (selectedTabs.includes(item)) {
-          continue;
-        }
-
-        // Skip items from selected split-view groups
-        if (splitViewId && splitViewIds.has(splitViewId)) {
-          continue;
-        }
-
-        if (!itemVisible && !itemsToHide.includes(item)) {
-          itemsToHide.push(item);
+      for (const tab of selectedTabs) {
+        let curGroup = tab.splitView ? tab.group.group : tab.group;
+        while (curGroup && curGroup.collapsed) {
+          const activeTabs = selectedTabs.filter(t =>
+            curGroup.tabs.includes(t)
+          );
+          if (activeTabs.length) {
+            curGroup.activeTabs = activeTabs;
+            this.updateFolderIcon(curGroup, "close", false);
+          }
+          curGroup = curGroup.group;
         }
       }
-    }
 
-    // FIXME: This is a hack to fix the animations not working properly
-    this.styleCleanup(itemsToShow);
-    itemsToHide.forEach(item => {
-      item.style.opacity = 0;
-      item.style.height = 0;
+      tabsActiveContainer.style.overflowY = "clip";
+      await Promise.all(
+        this.#moveToActiveTabsContainer(group, group.activeTabs, true)
+      ).then(() => {
+        tabsActiveContainer.style.overflowY = "";
+      });
     });
-
-    animations.push(
-      ...this.#createAnimation(
-        itemsToShow,
-        {
-          opacity: "",
-          height: "",
-        },
-        {
-          duration: 0.12,
-          ease: "easeInOut",
-        }
-      ),
-      ...this.#createAnimation(
-        itemsToHide,
-        {
-          opacity: 0,
-          height: 0,
-        },
-        {
-          duration: 0.12,
-          ease: "easeInOut",
-        }
-      )
-    );
-
-    this.#animationCount += 1;
-    await Promise.all(animations);
-    this.#animationCount -= 1;
-    if (this.#animationCount) {
-      return;
-    }
-
-    // Cleanup
-    this.styleCleanup(selectedTabs);
   }
 
-  animateGroupMove(group, expand = false) {
+  async animateGroupMove(group, expand = false) {
     if (!group?.isZenFolder) {
       return;
     }
-    const groupStart = group.groupStartElement;
-    const tabsContainer = group.groupContainer;
-    const heightContainer = expand
-      ? 0
-      : this.#calculateHeightShift(tabsContainer, []);
-    tabsContainer.style.overflowY = "clip";
-
-    this.#createAnimation(
-      groupStart,
-      {
-        marginTop: expand ? 0 : -(heightContainer + 4),
-      },
-      { duration: 0.12, ease: "easeInOut" }
-    );
-  }
-
-  styleCleanup(items) {
-    items.forEach(item => {
-      item.style.removeProperty("opacity");
-      item.style.removeProperty("height");
+    return this.#queueAnimation(group, async () => {
+      console.warn("NOT IMPLEMENTED", group, expand);
+      let heightContainer;
+      const animations = [];
+      const isActive = group.hasActiveTab;
+      const activeTabs = group.activeTabs;
+      const tabsContainer = group.groupContainer;
+      const tabsContainerWrapper = group.groupContainerWrapper;
+      const tabsContainerActive = group.groupActiveTabsContainer;
+
+      // if (expand) {
+      //   if (isActive) {
+      //     const shiftSize = activeTabs.length * 40;
+      //     activeTabs.forEach(tab => {
+      //       animations.push(
+      //         this.createAnimation(
+      //           tab,
+      //           {
+      //             transform: [`translateY(-${shiftSize}px)`, "translateY(0px)"],
+      //           },
+      //           {
+      //             duration: this._ANIMATION_DURATION.COLLAPSE_TRANSFORM,
+      //             easing: "ease-in-out",
+      //           },
+      //           () => {
+      //             tab.style.removeProperty("transform");
+      //           }
+      //         )
+      //       );
+      //     });
+      //     animations.push(
+      //       this.createAnimation(
+      //         tabsContainerActive,
+      //         { height: ["0px", `${shiftSize}px`] },
+      //         {
+      //           duration: this._ANIMATION_DURATION.EXPAND_HEIGHT,
+      //           easing: "ease-in-out",
+      //         },
+      //         () => {
+      //           tabsContainerActive.style.removeProperty("height");
+      //         }
+      //       )
+      //     );
+      //   } else {
+      //     animations.push(
+      //       this.createAnimation(
+      //         tabsContainerWrapper,
+      //         {
+      //           gridTemplateRows: ["0fr", "1fr"],
+      //         },
+      //         {
+      //           duration: this._ANIMATION_DURATION.COLLAPSE_HEIGHT,
+      //           easing: "ease-in-out",
+      //         }
+      //       )
+      //     );
+      //   }
+      // } else if (isActive) {
+      //   heightContainer =
+      //     this.getBoundsWithoutFlushing(tabsContainerActive).height;
+      //   activeTabs.forEach(tab => {
+      //     animations.push(
+      //       this.createAnimation(
+      //         tab,
+      //         {
+      //           transform: [
+      //             "translateY(0px)",
+      //             `translateY(-${heightContainer}px)`,
+      //           ],
+      //         },
+      //         {
+      //           duration: this._ANIMATION_DURATION.COLLAPSE_TRANSFORM,
+      //           easing: "ease-in-out",
+      //         }
+      //       )
+      //     );
+      //   });
+      //   animations.push(
+      //     this.createAnimation(
+      //       tabsContainerActive,
+      //       { height: [`${heightContainer}px`, "0px"] },
+      //       {
+      //         duration: this._ANIMATION_DURATION.COLLAPSE_ACTIVE_HEIGHT,
+      //         easing: "ease-in-out",
+      //       }
+      //     )
+      //   );
+      // } else {
+      //   heightContainer = this.getBoundsWithoutFlushing(tabsContainer).height;
+      //   animations.push(
+      //     this.createAnimation(
+      //       tabsContainer,
+      //     { transform: [`translateY(${heightContainer}px)`] },
+      //     { duration: this._ANIMATION_DURATION.COLLAPSE_TRANSFORM, easing: "ease-in-out" },
+      //   ));
+      // }
+
+      await Promise.all(animations);
     });
   }
 }
diff --git a/src/zen/folders/zen-folders.css b/src/zen/folders/zen-folders.css
index f3ba4cdfd1..8e659a4c85 100644
--- a/src/zen/folders/zen-folders.css
+++ b/src/zen/folders/zen-folders.css
@@ -28,7 +28,7 @@ zen-folder {
     background-color: var(--zen-toolbar-element-bg-hover);
   }
 
-  &[collapsed][has-active] {
+  &[collapsed][hasactivetab] {
     @media (prefers-reduced-motion: no-preference) {
       #tabbrowser-tabs[movingtab] &:not(:active) {
         transition: var(--tab-dragover-transition);
@@ -45,7 +45,20 @@ zen-folder {
     }
   }
 
-  & > .tab-group-container {
+  & .tab-group-container-wrapper {
+    display: grid;
+    position: relative;
+    z-index: 1;
+    overflow-y: clip;
+  }
+
+  & .tab-group-active-tabs-container {
+    z-index: 2;
+    overflow-y: visible;
+  }
+
+  & .tab-group-active-tabs-container, .tab-group-container-wrapper > .tab-group-container {
+    min-height: 0;
     :root[zen-sidebar-expanded] & > * {
       --zen-folder-indent: 14px; /* Can get overriden by the JS */
       margin-inline-start: var(--zen-folder-indent) !important;
@@ -205,7 +218,7 @@ zen-folder {
     }
   }
 
-  :root[zen-sidebar-expanded] &[has-active] > .tab-group-label-container {
+  :root[zen-sidebar-expanded] &[hasactivetab] > .tab-group-label-container {
     & .tab-reset-button {
       display: flex;
       opacity: 0;
@@ -217,9 +230,16 @@ zen-folder {
   }
 }
 
-zen-workspace[collapsedpinnedtabs] .zen-workspace-pinned-tabs-section,
-zen-folder[collapsed] > .tab-group-container {
-  overflow-y: clip;
+/* Zen Workspaces */ 
+zen-workspace .zen-workspace-pinned-tabs-section-wrapper {
+  display: grid;
+  & .zen-workspace-pinned-tabs-section {
+    min-height: 0;
+  }
+}
+
+.zen-workspace-pinned-active-tabs-section {
+  padding: 0 var(--zen-toolbox-padding);
 }
 
 /* Tabs popup */
diff --git a/src/zen/spaces/ZenSpace.mjs b/src/zen/spaces/ZenSpace.mjs
index d024ded06c..6a44259748 100644
--- a/src/zen/spaces/ZenSpace.mjs
+++ b/src/zen/spaces/ZenSpace.mjs
@@ -19,6 +19,16 @@ class nsZenCollapsiblePins extends nsZenFolder {
     return this.#spaceElement.pinnedTabsContainer;
   }
 
+  get groupContainerWrapper() {
+    return this.#spaceElement.pinnedTabsContainer.parentElement;
+  }
+
+  get groupActiveTabsContainer() {
+    return this.#spaceElement.querySelector(
+      ".zen-workspace-pinned-active-tabs-section"
+    );
+  }
+
   get groupStartElement() {
     // Fetch this instead of the tab-group-start since it is not guaranteed this
     // element will be the first child of the pinned tabs container.
@@ -61,14 +71,17 @@ export class nsZenWorkspace extends MozXULElement {
           <toolbarbutton class="toolbarbutton-1 chromeclass-toolbar-additional zen-workspaces-actions" context="zenWorkspaceMoreActions" />
         </vbox>
         <arrowscrollbox orient="vertical" class="workspace-arrowscrollbox">
-          <vbox class="zen-workspace-tabs-section zen-workspace-pinned-tabs-section" hide-separator="true">
-            <html:div class="zen-tab-group-start space-fake-collapsible-start" style="order: -9999;" />
+          <vbox class="zen-workspace-pinned-active-tabs-section" />
+          <vbox class="zen-workspace-pinned-tabs-section-wrapper" hide-separator="true">
+            <vbox class="zen-workspace-tabs-section zen-workspace-pinned-tabs-section">
+              <html:div class="zen-tab-group-start space-fake-collapsible-start" style="order: -9999;" />
+            </vbox>
             <hbox class="pinned-tabs-container-separator">
               <toolbarseparator flex="1" />
               <toolbarbutton command="cmd_zenCloseUnpinnedTabs"
-                             tooltip="dynamic-shortcut-tooltip"
-                             data-l10n-id="zen-workspaces-close-all-unpinned-tabs-title"
-                             class="zen-workspace-close-unpinned-tabs-button" />
+              tooltip="dynamic-shortcut-tooltip"
+                data-l10n-id="zen-workspaces-close-all-unpinned-tabs-title"
+                class="zen-workspace-close-unpinned-tabs-button" />
             </hbox>
           </vbox>
           <vbox class="zen-workspace-tabs-section zen-workspace-normal-tabs-section">
@@ -123,7 +136,10 @@ export class nsZenWorkspace extends MozXULElement {
     this.pinnedTabsContainer = this.querySelector(
       ".zen-workspace-pinned-tabs-section"
     );
-    this.pinnedTabsContainer.separatorElement =
+    this.pinnedTabsContainerWrapper = this.querySelector(
+      ".zen-workspace-pinned-tabs-section-wrapper"
+    );
+    this.pinnedTabsContainerWrapper.separatorElement =
       this.pinnedTabsContainer.querySelector(
         ".pinned-tabs-container-separator"
       );
diff --git a/src/zen/spaces/ZenSpaceManager.mjs b/src/zen/spaces/ZenSpaceManager.mjs
index 36ca9c50e5..20ce85284b 100644
--- a/src/zen/spaces/ZenSpaceManager.mjs
+++ b/src/zen/spaces/ZenSpaceManager.mjs
@@ -302,6 +302,10 @@ class nsZenWorkspaces {
     return this.activeWorkspaceElement?.pinnedTabsContainer;
   }
 
+  get pinnedTabsContainerWrapper() {
+    return this.pinnedTabsContainer.parentElement;
+  }
+
   get activeWorkspaceIndicator() {
     return this.activeWorkspaceElement?.indicator;
   }
@@ -2642,7 +2646,7 @@ class nsZenWorkspaces {
 
   updateShouldHideSeparator(
     arrowScrollbox,
-    pinnedContainer,
+    pinnedContainerWrapper,
     fromTabSelection = false
   ) {
     const visibleTabsFound = () => {
@@ -2665,15 +2669,16 @@ class nsZenWorkspaces {
 
     // <= 2 because we have the empty tab and the new tab button
     const shouldHideSeparator = fromTabSelection
-      ? pinnedContainer.hasAttribute("hide-separator")
+      ? pinnedContainerWrapper.hasAttribute("hide-separator")
       : !visibleTabsFound();
     if (shouldHideSeparator) {
-      pinnedContainer.setAttribute("hide-separator", "true");
+      pinnedContainerWrapper.setAttribute("hide-separator", "true");
     } else {
-      const workspaceID = pinnedContainer.getAttribute("zen-workspace-id");
+      const workspaceID =
+        pinnedContainerWrapper.firstChild.getAttribute("zen-workspace-id");
       const tabs = this.#unpinnedTabsInWorkspace(workspaceID);
       const closableTabs = this.#getClosableTabs(tabs);
-      const button = pinnedContainer.querySelector(
+      const button = pinnedContainerWrapper.querySelector(
         ".zen-workspace-close-unpinned-tabs-button"
       );
       if (tabs.length === closableTabs.length) {
@@ -2681,7 +2686,7 @@ class nsZenWorkspaces {
       } else {
         button.removeAttribute("can-close");
       }
-      pinnedContainer.removeAttribute("hide-separator");
+      pinnedContainerWrapper.removeAttribute("hide-separator");
     }
   }
 
@@ -2729,7 +2734,8 @@ class nsZenWorkspaces {
           continue;
         }
         const arrowScrollbox = workspaceElement.tabsContainer;
-        const pinnedContainer = workspaceElement.pinnedTabsContainer;
+        const pinnedContainerWrapper =
+          workspaceElement.pinnedTabsContainerWrapper;
         const essentialContainer = this.getEssentialsSection(
           workspaceObject.containerTabId
         );
@@ -2752,7 +2758,7 @@ class nsZenWorkspaces {
           essentialContainer,
           forAnimation
         );
-        this.updateShouldHideSeparator(arrowScrollbox, pinnedContainer);
+        this.updateShouldHideSeparator(arrowScrollbox, pinnedContainerWrapper);
       }
     }
   }
@@ -3148,10 +3154,10 @@ class nsZenWorkspaces {
     const containers = [...pinnedContainers, ...normalContainers];
     const tabGroups = [];
     for (const container of containers) {
-      for (const tabGroup of container.querySelectorAll("tab-group")) {
+      for (const tabGroup of container.querySelectorAll("zen-folder")) {
         tabGroups.push(tabGroup);
       }
-      for (const tabGroup of container.querySelectorAll("zen-folder")) {
+      for (const tabGroup of container.querySelectorAll("tab-group")) {
         tabGroups.push(tabGroup);
       }
     }
diff --git a/src/zen/tabs/ZenPinnedTabManager.mjs b/src/zen/tabs/ZenPinnedTabManager.mjs
index 4bed634471..0bdeeea7b4 100644
--- a/src/zen/tabs/ZenPinnedTabManager.mjs
+++ b/src/zen/tabs/ZenPinnedTabManager.mjs
@@ -344,12 +344,12 @@ class nsZenPinnedTabManager extends nsZenDOMOperatedFeature {
               }
               const isSpltView = tab.group?.hasAttribute("split-view-group");
               const group = isSpltView ? tab.group.group : tab.group;
-              if (!folderToUnload && tab.hasAttribute("folder-active")) {
-                await gZenFolders.animateUnload(group, tab);
+              if (!folderToUnload) {
+                gZenFolders.animateUnload(group, tab);
               }
             }
             if (folderToUnload) {
-              await gZenFolders.animateUnloadAll(folderToUnload);
+              gZenFolders.animateUnloadAll(folderToUnload);
             }
             const allAreUnloaded = pinnedTabs.every(
               tab =>
diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css
index 8dfbcbd583..52f58c0dc9 100644
--- a/src/zen/tabs/zen-tabs/vertical-tabs.css
+++ b/src/zen/tabs/zen-tabs/vertical-tabs.css
@@ -166,7 +166,7 @@
       transform 0.1s ease-in-out;
   }
 
-  .zen-workspace-pinned-tabs-section[hide-separator] & {
+  .zen-workspace-pinned-tabs-section-wrapper[hide-separator] & {
     height: 0;
     opacity: 0;
     padding-bottom: 0;
@@ -897,11 +897,11 @@
 
 #tabbrowser-tabs {
   & .tabbrowser-tab {
-    &[pinned]:not([pending="true"]:not([folder-active="true"])) .tab-close-button {
+    &[pinned]:not([pending="true"]) .tab-close-button {
       display: none !important;
     }
 
-    &[pinned]:is(:not([pending="true"]), [folder-active="true"]):not([zen-essential]) {
+    &[pinned]:is(:not([pending="true"])):not([zen-essential]) {
       &:hover .tab-reset-button,
       &[visuallyselected] .tab-reset-button {
         display: block;
diff --git a/src/zen/tests/folders/browser_folder_issue_9981.js b/src/zen/tests/folders/browser_folder_issue_9981.js
index 3f035c2d02..8a28a4b366 100644
--- a/src/zen/tests/folders/browser_folder_issue_9981.js
+++ b/src/zen/tests/folders/browser_folder_issue_9981.js
@@ -33,25 +33,16 @@ add_task(async function test_Issue_9981() {
 
   Assert.equal(folder.activeTabs.length, 2, "Folder should have 2 active tabs");
 
-  ok(
-    tab1.hasAttribute("folder-active"),
-    "Tab 1 should be in the active folder"
-  );
-  ok(
-    tab2.hasAttribute("folder-active"),
-    "Tab 2 should be in the active folder"
-  );
+  ok(folder.activeTabs.includes(tab1), "Tab 1 should be in the active folder");
+  ok(folder.activeTabs.includes(tab2), "Tab 2 should be in the active folder");
 
   const tab2ResetButton = tab2.querySelector(".tab-reset-button");
   tab2ResetButton.style.display = "flex";
   EventUtils.synthesizeMouseAtCenter(tab2ResetButton, {});
 
+  ok(folder.activeTabs.includes(tab1), "Tab 1 should be in the active folder");
   ok(
-    tab1.hasAttribute("folder-active"),
-    "Tab 1 should be in the active folder"
-  );
-  ok(
-    !tab2.hasAttribute("folder-active"),
+    !folder.activeTabs.includes(tab2),
     "Tab 2 should not be in the active folder"
   );
 
diff --git a/src/zen/tests/folders/browser_folder_reset_button.js b/src/zen/tests/folders/browser_folder_reset_button.js
index 5e45fce9a7..9456ee9342 100644
--- a/src/zen/tests/folders/browser_folder_reset_button.js
+++ b/src/zen/tests/folders/browser_folder_reset_button.js
@@ -33,14 +33,8 @@ add_task(async function test_Issue_() {
 
   Assert.equal(folder.activeTabs.length, 2, "Folder should have 2 active tabs");
 
-  ok(
-    tab1.hasAttribute("folder-active"),
-    "Tab 1 should be in the active folder"
-  );
-  ok(
-    tab2.hasAttribute("folder-active"),
-    "Tab 2 should be in the active folder"
-  );
+  ok(folder.activeTabs.includes(tab1), "Tab 1 should be in the active folder");
+  ok(folder.activeTabs.includes(tab2), "Tab 2 should be in the active folder");
 
   EventUtils.synthesizeMouseAtCenter(folder.resetButton, {});
 
@@ -48,11 +42,11 @@ add_task(async function test_Issue_() {
     /* eslint-disable mozilla/no-arbitrary-setTimeout */
     setTimeout(() => {
       ok(
-        !tab1.hasAttribute("folder-active"),
+        !folder.activeTabs.includes(tab1),
         "Tab 1 should not be in the active folder"
       );
       ok(
-        !tab2.hasAttribute("folder-active"),
+        !folder.activeTabs.includes(tab2),
         "Tab 2 should not be in the active folder"
       );
       resolve();
diff --git a/src/zen/tests/folders/browser_folder_visible_tabs.js b/src/zen/tests/folders/browser_folder_visible_tabs.js
index 2cba246fbf..76c457391f 100644
--- a/src/zen/tests/folders/browser_folder_visible_tabs.js
+++ b/src/zen/tests/folders/browser_folder_visible_tabs.js
@@ -34,11 +34,11 @@ add_task(async function test_Visible_Selected() {
   folder.collapsed = true;
   ok(tab.visible, "Tab is visible in the folder when collapsed");
   ok(
-    tab.hasAttribute("folder-active"),
+    folder.activeTabs.includes(tab),
     "Tab is marked as active in the folder when selected"
   );
   ok(
-    tab.group.hasAttribute("has-active"),
+    tab.group.hasActiveTab,
     "Tab group is marked as active when the tab is selected"
   );
   Assert.deepEqual(
@@ -67,11 +67,11 @@ add_task(async function test_Visible_Not_Selected() {
   gBrowser.selectedTab = originalTab;
   ok(tab.visible, "Tab is visible in the folder when collapsed");
   ok(
-    tab.hasAttribute("folder-active"),
+    folder.activeTabs.includes(tab),
     "Tab is marked as active in the folder when selected"
   );
   ok(
-    tab.group.hasAttribute("has-active"),
+    tab.group.hasActiveTab,
     "Tab group is marked as active when the tab is selected"
   );
   Assert.deepEqual(