diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss
index c8f8c0db3..8b990fca6 100644
--- a/packages/cxl-lumo-styles/scss/global.scss
+++ b/packages/cxl-lumo-styles/scss/global.scss
@@ -6,6 +6,7 @@ html {
   --cxl-content-width: 36em;
   --cxl-wrap-width: 72rem;
   --cxl-wrap-padding: var(--lumo-space-m);
+  --cxl-color-light-gray: hsla(0, 0%, 96%, 1);
 
   /**
    * Lumo Icons have a documented 4px "safe area" around them. Vaadin Icons don't, for unknown reasons.
diff --git a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss
index 59479aac9..0c56e437f 100644
--- a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss
+++ b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss
@@ -1,4 +1,5 @@
 @use "../mixins";
+@use "../mq";
 
 ::slotted(vaadin-tab) {
   align-items: stretch; // Equal height elements.
@@ -31,3 +32,86 @@
     display: initial;
   }
 }
+
+/**
+ * Theme "cxl-dashboard-category"
+ */
+
+:host([theme~="cxl-dashboard-category"][theme~="minimal"]) {
+  margin: 0 calc(var(--lumo-space-m) * -1);
+
+  @media #{mq.$small} {
+    margin: 0 calc(var(--lumo-space-l) * -1);
+  }
+
+  ::slotted(vaadin-tab) {
+    padding: 0 calc(var(--lumo-space-s) / 2) calc(var(--lumo-space-s) / 2);
+  }
+
+  ::slotted(vaadin-tab:first-of-type) {
+    margin-inline-start: calc(var(--lumo-space-m) - var(--lumo-space-xs));
+
+    @media #{mq.$small} {
+      margin-inline-start: calc(var(--lumo-space-l) - var(--lumo-space-xs));
+    }
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    top: calc(var(--lumo-space-m) * -1);
+    bottom: calc(var(--lumo-space-m) * -1);
+    width: 68px;
+    content: "";
+    background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
+    opacity: 0%;
+  }
+
+  [part="tabs"] {
+    margin: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  [part="back-button"],
+  [part="forward-button"] {
+    width: var(--lumo-space-xl);
+    height: var(--lumo-space-xl);
+    color: var(--lumo-primary-color);
+    border-radius: 100%;
+
+    &::after {
+      font-size: var(--lumo-font-size-xxl);
+    }
+  }
+
+  [part="back-button"] {
+    margin-left: var(--lumo-space-s);
+  }
+
+  [part="forward-button"] {
+    margin-right: var(--lumo-space-s);
+  }
+}
+
+:host([theme~="cxl-dashboard-category"][overflow="start end"]) {
+  &::before {
+    left: 0;
+    z-index: 1;
+    rotate: 180deg;
+    opacity: 100%;
+  }
+}
+
+:host([theme~="cxl-dashboard-category"][overflow="end"]),
+:host([theme~="cxl-dashboard-category"][overflow="start end"]) {
+  &::after {
+    right: 0;
+    opacity: 100%;
+  }
+}
diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-accordion-panel.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-accordion-panel.scss
index e8f17e8ae..cd24d47c3 100644
--- a/packages/cxl-lumo-styles/scss/themes/vaadin-accordion-panel.scss
+++ b/packages/cxl-lumo-styles/scss/themes/vaadin-accordion-panel.scss
@@ -149,3 +149,42 @@
     padding-bottom: var(--lumo-space-m);
   }
 }
+
+/**
+ * Theme "cxl-dashboard-category".
+ */
+:host([theme~="cxl-dashboard-category"]) {
+  border-bottom: solid 1px var(--cxl-color-light-gray);
+
+  [part="summary"] {
+    padding: var(--lumo-space-l) 0;
+  }
+
+  [part="content"] {
+    padding: 0;
+    margin-bottom: var(--lumo-space-l);
+  }
+
+  [part="toggle"] {
+    margin-right: var(--lumo-space-l);
+  }
+}
+
+:host([theme~="cxl-dashboard-category"][opened]) {
+  [part="summary"] {
+    padding-bottom: 0;
+  }
+}
+
+@media (hover: hover) {
+  :host([theme~="cxl-dashboard-category"]:not([opened])) {
+    [part="summary"]:hover {
+      cursor: pointer;
+      background-color: var(--cxl-color-light-gray);
+
+      [part="toggle"] {
+        color: var(--lumo-shade);
+      }
+    }
+  }
+}
diff --git a/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss b/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss
index 07306acb6..df657e77d 100644
--- a/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss
+++ b/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss
@@ -265,4 +265,73 @@ cxl-vaadin-accordion {
       }
     }
   }
+
+  /**
+   * Theme "cxl-dashboard-category"
+   */
+  &[theme~="cxl-dashboard-category"] {
+    .header {
+      display: flex;
+      align-items: baseline;
+      padding: var(--lumo-space-l) var(--lumo-space-m);
+
+      @media #{mq.$small} {
+        padding: var(--lumo-space-l);
+      }
+
+      .entry-title {
+        margin: 0;
+      }
+
+      > span {
+        margin: 0 0 0 var(--lumo-space-m);
+        font-size: var(--lumo-font-size-xs);
+        font-weight: 600;
+        color: var(--lumo-primary-color);
+        text-transform: uppercase;
+      }
+    }
+
+    .summary {
+      padding: 0 var(--lumo-space-m) var(--lumo-space-l);
+
+      @media #{mq.$small} {
+        padding: 0 var(--lumo-space-l);
+      }
+    }
+
+    .summary-header {
+      display: flex;
+      align-items: center;
+
+      &:not(:first-of-type) {
+        padding-top: var(--lumo-space-l);
+        margin-top: var(--lumo-space-l);
+        border-top: 1px solid var(--cxl-color-light-gray);
+      }
+
+      h5 {
+        margin: 0;
+      }
+
+      vaadin-progress-bar {
+        width: 100px;
+        margin-left: var(--lumo-space-m);
+      }
+
+      a {
+        margin-left: auto;
+      }
+    }
+
+    .summary-cards {
+      h6 {
+        margin-bottom: var(--lumo-space-s);
+        font-size: var(--lumo-font-size-xs);
+        font-weight: 400;
+        line-height: 2;
+        opacity: 50%;
+      }
+    }
+  }
 }
diff --git a/packages/storybook/cxl-ui/cxl-tabs-slider/cxl-tabs-slider.stories.js b/packages/storybook/cxl-ui/cxl-tabs-slider/cxl-tabs-slider.stories.js
index 6ed214cbc..5945d272b 100644
--- a/packages/storybook/cxl-ui/cxl-tabs-slider/cxl-tabs-slider.stories.js
+++ b/packages/storybook/cxl-ui/cxl-tabs-slider/cxl-tabs-slider.stories.js
@@ -8,14 +8,14 @@ export default {
   title: 'CXL UI/cxl-tabs-slider',
 };
 
-export const CXLTabsSlider = ({ Cards }) => html`
+export const CXLTabsSlider = ({ Cards, Themes }) => html`
   <style>
     vaadin-tab {
       max-width: calc(var(--cxl-content-width) / 2);
     }
   </style>
 
-  <cxl-tabs-slider orientation="horizontal" theme="minimal">
+  <cxl-tabs-slider orientation="horizontal" theme="minimal ${Themes}">
     ${archiveData
       .slice(0, Cards)
       .map((el) => html` <vaadin-tab>${CXLTestimonial({ el })}</vaadin-tab> `)}
@@ -25,6 +25,7 @@ export const CXLTabsSlider = ({ Cards }) => html`
 Object.assign(CXLTabsSlider, {
   args: {
     Cards: 3,
+    Themes: ''
   },
   storyName: '[orientation=horizontal]',
 });
diff --git a/packages/storybook/cxl-ui/cxl-vaadin-accordion.stories.js b/packages/storybook/cxl-ui/cxl-vaadin-accordion.stories.js
index b409a7227..1717bec44 100644
--- a/packages/storybook/cxl-ui/cxl-vaadin-accordion.stories.js
+++ b/packages/storybook/cxl-ui/cxl-vaadin-accordion.stories.js
@@ -3,6 +3,7 @@ import { CXLPlaybookAccordion } from './cxl-vaadin-accordion/cxl-playbook-accord
 import { CXLVaadinAccordionThemeVaadin } from './cxl-vaadin-accordion/vaadin-accordion-panel[theme=vaadin].story';
 import { CXLVaadinAccordionThemeFaq } from './cxl-vaadin-accordion/theme=cxl-faq.story';
 import { CXLVaadinAccordionThemeMinidegreeTrack } from './cxl-vaadin-accordion/theme=cxl-minidegree-track.story';
+import { CXLVaadinAccordionThemeCategory } from './cxl-vaadin-accordion/theme=cxl-dashboard-category.story';
 import { CXLHubsAndPlaybooks } from './cxl-vaadin-accordion/cxl-hubs-and-playbooks.story';
 
 export default {
@@ -22,6 +23,7 @@ CXLVaadinAccordionThemeArchive.storyName = 'cxl-accordion-card';
 CXLVaadinAccordionThemeFaq.storyName = '[theme=cxl-faq]';
 CXLVaadinAccordionThemeMinidegreeTrack.storyName = '[theme=cxl-minidegree-track]';
 CXLVaadinAccordionThemeVaadin.storyName = 'vaadin-accordion-panel[theme=vaadin]';
+CXLVaadinAccordionThemeCategory.storyName = '[theme=cxl-dashboard-category]';
 CXLHubsAndPlaybooks.storyName = 'cxl-hubs-and-playbooks';
 
 export {
@@ -30,5 +32,6 @@ export {
   CXLVaadinAccordionThemeFaq,
   CXLVaadinAccordionThemeMinidegreeTrack,
   CXLVaadinAccordionThemeVaadin,
+  CXLVaadinAccordionThemeCategory,
   CXLHubsAndPlaybooks,
 };
diff --git a/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.data.json b/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.data.json
new file mode 100644
index 000000000..30c912b06
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.data.json
@@ -0,0 +1,88 @@
+[
+  {
+    "id": 1,
+    "title": "Deep skills",
+    "completion": "10% complete",
+    "sections": [
+      {
+        "title": "Growth",
+        "progress": "0.50",
+        "action": "View all",
+        "items": [
+          {
+            "title": "Demand capture",
+            "cards": []
+          },
+          {
+            "title": "Sub category",
+            "cards": []
+          }
+        ]
+      },
+      {
+        "title": "Category",
+        "progress": "0.50",
+        "action": "View all",
+        "items": [
+          {
+            "title": "Demand capture",
+            "cards": []
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": 2,
+    "title": "Broad skills",
+    "completion": "10% complete",
+    "sections": [
+      {
+        "title": "Growth",
+        "progress": "0.50",
+        "action": "View all",
+        "items": [
+          {
+            "title": "Demand capture",
+            "cards": []
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": 3,
+    "title": "Fast skills",
+    "completion": "0% complete",
+    "sections": [
+      {
+        "title": "Growth",
+        "items": [
+          {
+            "title": "Demand capture",
+            "cards": []
+          },
+          {
+            "title": "Sub category",
+            "cards": []
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": 4,
+    "title": "Learning history",
+    "sections": [
+      {
+        "title": "Growth",
+        "items": [
+          {
+            "title": "Demand capture",
+            "cards": []
+          }
+        ]
+      }
+    ]
+  }
+]
diff --git a/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.story.js b/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.story.js
new file mode 100644
index 000000000..6e9b33669
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.story.js
@@ -0,0 +1,50 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-vaadin-accordion.js';
+import '@vaadin/progress-bar';
+import categoryData from './theme=cxl-dashboard-category.data.json';
+import { CXLTabsSlider } from '../cxl-tabs-slider/cxl-tabs-slider.stories';
+
+export const CXLVaadinAccordionThemeCategory = () => html`
+  <cxl-vaadin-accordion
+    id="cxl-vaadin-accordion-26107"
+    class="archive archive-category plural"
+    theme="cxl-dashboard-category"
+  >
+    ${categoryData.map(
+      (el) => html`
+        <vaadin-accordion-panel theme="cxl-dashboard-category reverse" data-step-id="${el.id}">
+          <header class="entry-header header" slot="summary">
+            <h4 class="entry-title no-anchor" itemprop="headline">${el.title}</h4>
+            <span>${el.completion}</span>
+          </header>
+          <div class="entry-summary summary" itemprop="description">
+            ${el.sections.map(
+              (section) => html`
+                <div class="summary-header">
+                  <h5>${section.title}</h5>
+                  <vaadin-progress-bar value="${section.progress}"></vaadin-progress-bar>
+                  <a href="#">${section.action}</a>
+                </div>
+                ${section.items.map(
+                  (item) => html`
+                    <div class="summary-cards">
+                      <h6>${item.title}</h6>
+                      ${CXLTabsSlider(CXLTabsSlider.args)}
+                    </div>
+                  `
+                )}
+              `
+            )}
+          </div>
+        </vaadin-accordion-panel>
+      `
+    )}
+  </cxl-vaadin-accordion>
+`;
+
+Object.assign(CXLTabsSlider, {
+  args: {
+    Cards: 8,
+    Themes: 'cxl-dashboard-category',
+  },
+});