diff --git a/changelog/unreleased/accordion b/changelog/unreleased/accordion
new file mode 100644
index 000000000..ccc044f6a
--- /dev/null
+++ b/changelog/unreleased/accordion
@@ -0,0 +1,5 @@
+Change: New accordion component implementation
+
+We rewrote the accordion component to remove UIKit styles and align with our own styling. Some accessibility aspects are already implement, for example expanding and collapsing accordion items by pressing space or enter already works. More will come later on.
+
+https://github.com/owncloud/owncloud-design-system/pull/911
diff --git a/src/elements/OcAccordion.vue b/src/elements/OcAccordion.vue
new file mode 100644
index 000000000..979729f62
--- /dev/null
+++ b/src/elements/OcAccordion.vue
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+
+
+An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.
+The headings function as controls that enable users to reveal or hide their associated sections of content.
+Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.
+
+The accordion component is using `oc-accordion-item` as its children.
+To see documentation on how to use this component, see [oc-accordion-item](/#/Elements/oc-accordion-item).
+
+```jsx
+
+
+