diff --git a/src/Extensions/Components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj b/src/Extensions/Components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj
index a692e7a00..4f7a0260e 100644
--- a/src/Extensions/Components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj
+++ b/src/Extensions/Components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.0.1-beta09</Version>
+    <Version>8.0.1</Version>
   </PropertyGroup>
 
   <PropertyGroup>
diff --git a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-core.esm.js b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-core.esm.js
index bcb24a579..5cacf0cef 100644
--- a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-core.esm.js
+++ b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-core.esm.js
@@ -7840,6 +7840,7 @@ class DockviewComponent extends BaseGrid {
                 referenceGroup.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index: options.position.index
                 });
                 if (!options.inactive) {
                     this.doSetGroupAndPanelActive(referenceGroup);
diff --git a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js
index 8d90b1f3a..ee7ab4b02 100644
--- a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js
+++ b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js
@@ -24,9 +24,9 @@ const onAddGroup = group => {
     createGroupActions(group);
 }
 
-const addGroupWithPanel = (dockview, panel, panels) => {
+const addGroupWithPanel = (dockview, panel, panels, index) => {
     if (panel.groupId) {
-        addPanelWidthGroupId(dockview, panel)
+        addPanelWidthGroupId(dockview, panel, index)
     }
     else {
         addPanelWidthCreatGroup(dockview, panel, panels)
@@ -34,7 +34,7 @@ const addGroupWithPanel = (dockview, panel, panels) => {
     deletePanel(dockview, panel)
 }
 
-const addPanelWidthGroupId = (dockview, panel) => {
+const addPanelWidthGroupId = (dockview, panel, index) => {
     let group = dockview.api.getGroup(panel.groupId)
     let { position = {}, currentPosition, height, isPackup, isMaximized } = panel.params || {}
     if (!group) {
@@ -65,7 +65,7 @@ const addPanelWidthGroupId = (dockview, panel) => {
         id: panel.id,
         title: panel.title,
         component: panel.component,
-        position: { referenceGroup: group },
+        position: { referenceGroup: group, index: index || 0 },
         params: { ...panel.params, isPackup, height, isMaximized, position }
     })
     dockview._panelVisibleChanged?.fire({ title: panel.title, status: true });
@@ -411,9 +411,10 @@ const setWidth = (observerList) => {
         let dropMenu = dropdown.querySelector('.dropdown-menu')
         if (voidWidth === 0) {
             if (tabsContainer.children.length <= 1) return
-            let lastTab = header.querySelector('.tabs-container>.inactive-tab:not(:has(+ .inactive-tab))')
-            let aEle = document.createElement('a')
-            let liEle = document.createElement('li')
+            const inactiveTabs = header.querySelectorAll('.tabs-container>.inactive-tab')
+            const lastTab = inactiveTabs[inactiveTabs.length - 1]
+            const aEle = document.createElement('a')
+            const liEle = document.createElement('li')
             aEle.className = 'dropdown-item'
             liEle.tabWidth = lastTab.offsetWidth;
             aEle.append(lastTab)
diff --git a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js
index 1570ca277..37d8f1a12 100644
--- a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js
+++ b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js
@@ -20,7 +20,8 @@ const onRemovePanel = event => {
                 height: event.group.element.parentElement.offsetHeight,
                 top: parseFloat(event.group.element.parentElement.style.top || 0),
                 left: parseFloat(event.group.element.parentElement.style.left || 0)
-            }
+            },
+            index: event.group.delPanelIndex
         }
     }
     if (event.params.groupInvisible) {
diff --git a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js
index 4dd05e38b..19b39c85c 100644
--- a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js
+++ b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js
@@ -109,13 +109,18 @@ const toggleComponent = (dockview, options) => {
         const pan = findContentFromPanels(localPanels, p);
         if (pan === void 0) {
             const panel = findContentFromPanels(dockview.params.panels, p);
-            addGroupWithPanel(dockview, panel || p, panels);
+            const groupPanels = panels.filter(p1 => p1.params.parentId == p.params.parentId)
+            const indexOfOptions = groupPanels.findIndex(p => p.id == panel.id)
+            const index = panel && panel.params.index
+            console.log(index, 'index');
+            addGroupWithPanel(dockview, panel || p, panels, index ?? indexOfOptions);
         }
     })
 
     localPanels.forEach(item => {
         let pan = findContentFromPanels(panels, item);
         if (pan === void 0) {
+            item.group.delPanelIndex = item.group.panels.findIndex(p => p.id == item.id)
             dockview.removePanel(item)
         }
     })