diff --git a/assets/js/tabs.js b/assets/js/tabs.js
index b8d7937..0b4328e 100644
--- a/assets/js/tabs.js
+++ b/assets/js/tabs.js
@@ -1,20 +1,50 @@
-document.querySelectorAll('.hextra-tabs-toggle').forEach(function (button) {
-  button.addEventListener('click', function (e) {
-    // set parent tabs to unselected
-    const tabs = Array.from(e.target.parentElement.querySelectorAll('.hextra-tabs-toggle'));
-    tabs.map(tab => tab.dataset.state = '');
-
-    // set current tab to selected
-    e.target.dataset.state = 'selected';
-
-    // set all panels to unselected
-    const panelsContainer = e.target.parentElement.parentElement.nextElementSibling;
-    Array.from(panelsContainer.children).forEach(function (panel) {
-      panel.dataset.state = '';
+(function () {
+  function updateGroup(container, index) {
+    const tabs = Array.from(container.querySelectorAll('.hextra-tabs-toggle'));
+    tabs.forEach((tab, i) => {
+      tab.dataset.state = i === index ? 'selected' : '';
+      if (i === index) {
+        tab.setAttribute('aria-selected', 'true');
+        tab.tabIndex = 0;
+      } else {
+        tab.removeAttribute('aria-selected');
+        tab.removeAttribute('tabindex');
+      }
     });
+    const panelsContainer = container.parentElement.nextElementSibling;
+    Array.from(panelsContainer.children).forEach((panel, i) => {
+      panel.dataset.state = i === index ? 'selected' : '';
+      if (i === index) {
+        panel.tabIndex = 0;
+      } else {
+        panel.removeAttribute('tabindex');
+      }
+    });
+  }
 
-    const panelId = e.target.getAttribute('aria-controls');
-    const panel = panelsContainer.querySelector(`#${panelId}`);
-    panel.dataset.state = 'selected';
+  const groups = document.querySelectorAll('[data-tab-group]');
+
+  groups.forEach((group) => {
+    const key = group.dataset.tabGroup;
+    const saved = localStorage.getItem('hextra-tab-' + key);
+    if (saved !== null) {
+      updateGroup(group, parseInt(saved, 10));
+    }
   });
-});
+
+  document.querySelectorAll('.hextra-tabs-toggle').forEach((button) => {
+    button.addEventListener('click', function (e) {
+      const container = e.target.parentElement;
+      const index = Array.from(container.querySelectorAll('.hextra-tabs-toggle')).indexOf(
+        e.target
+      );
+      const key = container.dataset.tabGroup;
+      document
+        .querySelectorAll('[data-tab-group="' + key + '"]')
+        .forEach((grp) => updateGroup(grp, index));
+      if (key) {
+        localStorage.setItem('hextra-tab-' + key, index.toString());
+      }
+    });
+  });
+})();
diff --git a/layouts/_shortcodes/tabs.html b/layouts/_shortcodes/tabs.html
index b068790..eb75b23 100644
--- a/layouts/_shortcodes/tabs.html
+++ b/layouts/_shortcodes/tabs.html
@@ -6,7 +6,7 @@
 {{- end -}}
 
 <div class="hextra-scrollbar hx:overflow-x-auto hx:overflow-y-hidden hx:overscroll-x-contain">
-  <div class="hx:mt-4 hx:flex hx:w-max hx:min-w-full hx:border-b hx:border-gray-200 hx:pb-px hx:dark:border-neutral-800">
+  <div class="hx:mt-4 hx:flex hx:w-max hx:min-w-full hx:border-b hx:border-gray-200 hx:pb-px hx:dark:border-neutral-800" data-tab-group="{{ delimit $items "," }}">
     {{- range $i, $item := $items -}}
       <button
         class="hextra-tabs-toggle hx:cursor-pointer hx:data-[state=selected]:border-primary-500 hx:data-[state=selected]:text-primary-600 hx:data-[state=selected]:dark:border-primary-500 hx:data-[state=selected]:dark:text-primary-600 hx:mr-2 hx:rounded-t hx:p-2 hx:font-medium hx:leading-5 hx:transition-colors hx:-mb-0.5 hx:select-none hx:border-b-2 hx:border-transparent hx:text-gray-600 hx:hover:border-gray-200 hx:hover:text-black hx:dark:text-gray-200 hx:dark:hover:border-neutral-800 hx:dark:hover:text-white"