diff --git a/src/views/components/base/accordion/Accordion.js b/src/views/components/base/accordion/Accordion.js
index b5a8790..1542605 100644
--- a/src/views/components/base/accordion/Accordion.js
+++ b/src/views/components/base/accordion/Accordion.js
@@ -7,17 +7,12 @@ import {
   CRow,
   CAccordion,
   CAccordionBody,
-  CAccordionButton,
-  CAccordionCollapse,
   CAccordionHeader,
   CAccordionItem,
 } from '@coreui/react'
 import { DocsCallout, DocsExample } from 'src/components'
 
 const Accordion = () => {
-  const [activeKey, setActiveKey] = useState(0)
-  const [activeKey2, setActiveKey2] = useState(0)
-
   return (
     <CRow>
       <CCol xs={12}>
@@ -33,69 +28,42 @@ const Accordion = () => {
               Click the accordions below to expand/collapse the accordion content.
             </p>
             <DocsExample href="components/accordion">
-              <CAccordion>
-                <CAccordionItem>
-                  <CAccordionHeader>
-                    <CAccordionButton
-                      collapsed={activeKey !== 1}
-                      onClick={() => (activeKey === 1 ? setActiveKey(0) : setActiveKey(1))}
-                    >
-                      Accordion Item #1
-                    </CAccordionButton>
-                  </CAccordionHeader>
-                  <CAccordionCollapse visible={activeKey === 1}>
-                    <CAccordionBody>
-                      <strong>This is the first item&#39;s accordion body.</strong> It is hidden by
-                      default, until the collapse plugin adds the appropriate classes that we use to
-                      style each element. These classes control the overall appearance, as well as
-                      the showing and hiding via CSS transitions. You can modify any of this with
-                      custom CSS or overriding our default variables. It&#39;s also worth noting
-                      that just about any HTML can go within the <code>.accordion-body</code>,
-                      though the transition does limit overflow.
-                    </CAccordionBody>
-                  </CAccordionCollapse>
+              <CAccordion activeItemKey={2}>
+                <CAccordionItem itemKey={1}>
+                  <CAccordionHeader>Accordion Item #1</CAccordionHeader>
+                  <CAccordionBody>
+                    <strong>This is the first item&#39;s accordion body.</strong> It is hidden by
+                    default, until the collapse plugin adds the appropriate classes that we use to
+                    style each element. These classes control the overall appearance, as well as the
+                    showing and hiding via CSS transitions. You can modify any of this with custom
+                    CSS or overriding our default variables. It&#39;s also worth noting that just
+                    about any HTML can go within the <code>.accordion-body</code>, though the
+                    transition does limit overflow.
+                  </CAccordionBody>
                 </CAccordionItem>
-                <CAccordionItem>
-                  <CAccordionHeader>
-                    <CAccordionButton
-                      collapsed={activeKey !== 2}
-                      onClick={() => (activeKey === 2 ? setActiveKey(0) : setActiveKey(2))}
-                    >
-                      Accordion Item #2
-                    </CAccordionButton>
-                  </CAccordionHeader>
-                  <CAccordionCollapse visible={activeKey === 2}>
-                    <CAccordionBody>
-                      <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
-                      default, until the collapse plugin adds the appropriate classes that we use to
-                      style each element. These classes control the overall appearance, as well as
-                      the showing and hiding via CSS transitions. You can modify any of this with
-                      custom CSS or overriding our default variables. It&#39;s also worth noting
-                      that just about any HTML can go within the <code>.accordion-body</code>,
-                      though the transition does limit overflow.
-                    </CAccordionBody>
-                  </CAccordionCollapse>
+                <CAccordionItem itemKey={2}>
+                  <CAccordionHeader>Accordion Item #2</CAccordionHeader>
+                  <CAccordionBody>
+                    <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
+                    default, until the collapse plugin adds the appropriate classes that we use to
+                    style each element. These classes control the overall appearance, as well as the
+                    showing and hiding via CSS transitions. You can modify any of this with custom
+                    CSS or overriding our default variables. It&#39;s also worth noting that just
+                    about any HTML can go within the <code>.accordion-body</code>, though the
+                    transition does limit overflow.
+                  </CAccordionBody>
                 </CAccordionItem>
-                <CAccordionItem>
-                  <CAccordionHeader>
-                    <CAccordionButton
-                      collapsed={activeKey !== 3}
-                      onClick={() => (activeKey === 3 ? setActiveKey(0) : setActiveKey(3))}
-                    >
-                      Accordion Item #3
-                    </CAccordionButton>
-                  </CAccordionHeader>
-                  <CAccordionCollapse visible={activeKey === 3}>
-                    <CAccordionBody>
-                      <strong>This is the third item&#39;s accordion body.</strong> It is hidden by
-                      default, until the collapse plugin adds the appropriate classes that we use to
-                      style each element. These classes control the overall appearance, as well as
-                      the showing and hiding via CSS transitions. You can modify any of this with
-                      custom CSS or overriding our default variables. It&#39;s also worth noting
-                      that just about any HTML can go within the <code>.accordion-body</code>,
-                      though the transition does limit overflow.
-                    </CAccordionBody>
-                  </CAccordionCollapse>
+                <CAccordionItem itemKey={3}>
+                  <CAccordionHeader>Accordion Item #3</CAccordionHeader>
+                  <CAccordionBody>
+                    <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
+                    default, until the collapse plugin adds the appropriate classes that we use to
+                    style each element. These classes control the overall appearance, as well as the
+                    showing and hiding via CSS transitions. You can modify any of this with custom
+                    CSS or overriding our default variables. It&#39;s also worth noting that just
+                    about any HTML can go within the <code>.accordion-body</code>, though the
+                    transition does limit overflow.
+                  </CAccordionBody>
                 </CAccordionItem>
               </CAccordion>
             </DocsExample>
@@ -113,68 +81,92 @@ const Accordion = () => {
             </p>
             <DocsExample href="components/accordion#flush">
               <CAccordion flush>
-                <CAccordionItem>
-                  <CAccordionHeader>
-                    <CAccordionButton
-                      collapsed={activeKey2 !== 1}
-                      onClick={() => (activeKey2 === 1 ? setActiveKey2(0) : setActiveKey2(1))}
-                    >
-                      Accordion Item #1
-                    </CAccordionButton>
-                  </CAccordionHeader>
-                  <CAccordionCollapse visible={activeKey2 === 1}>
-                    <CAccordionBody>
-                      <strong>This is the first item&#39;s accordion body.</strong> It is hidden by
-                      default, until the collapse plugin adds the appropriate classes that we use to
-                      style each element. These classes control the overall appearance, as well as
-                      the showing and hiding via CSS transitions. You can modify any of this with
-                      custom CSS or overriding our default variables. It&#39;s also worth noting
-                      that just about any HTML can go within the <code>.accordion-body</code>,
-                      though the transition does limit overflow.
-                    </CAccordionBody>
-                  </CAccordionCollapse>
+                <CAccordionItem itemKey={1}>
+                  <CAccordionHeader>Accordion Item #1</CAccordionHeader>
+                  <CAccordionBody>
+                    <strong>This is the first item&#39;s accordion body.</strong> It is hidden by
+                    default, until the collapse plugin adds the appropriate classes that we use to
+                    style each element. These classes control the overall appearance, as well as the
+                    showing and hiding via CSS transitions. You can modify any of this with custom
+                    CSS or overriding our default variables. It&#39;s also worth noting that just
+                    about any HTML can go within the <code>.accordion-body</code>, though the
+                    transition does limit overflow.
+                  </CAccordionBody>
                 </CAccordionItem>
-                <CAccordionItem>
-                  <CAccordionHeader>
-                    <CAccordionButton
-                      collapsed={activeKey2 !== 2}
-                      onClick={() => (activeKey2 === 2 ? setActiveKey2(0) : setActiveKey2(2))}
-                    >
-                      Accordion Item #2
-                    </CAccordionButton>
-                  </CAccordionHeader>
-                  <CAccordionCollapse visible={activeKey2 === 2}>
-                    <CAccordionBody>
-                      <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
-                      default, until the collapse plugin adds the appropriate classes that we use to
-                      style each element. These classes control the overall appearance, as well as
-                      the showing and hiding via CSS transitions. You can modify any of this with
-                      custom CSS or overriding our default variables. It&#39;s also worth noting
-                      that just about any HTML can go within the <code>.accordion-body</code>,
-                      though the transition does limit overflow.
-                    </CAccordionBody>
-                  </CAccordionCollapse>
+                <CAccordionItem itemKey={2}>
+                  <CAccordionHeader>Accordion Item #2</CAccordionHeader>
+                  <CAccordionBody>
+                    <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
+                    default, until the collapse plugin adds the appropriate classes that we use to
+                    style each element. These classes control the overall appearance, as well as the
+                    showing and hiding via CSS transitions. You can modify any of this with custom
+                    CSS or overriding our default variables. It&#39;s also worth noting that just
+                    about any HTML can go within the <code>.accordion-body</code>, though the
+                    transition does limit overflow.
+                  </CAccordionBody>
                 </CAccordionItem>
-                <CAccordionItem>
-                  <CAccordionHeader>
-                    <CAccordionButton
-                      collapsed={activeKey2 !== 3}
-                      onClick={() => (activeKey2 === 3 ? setActiveKey2(0) : setActiveKey2(3))}
-                    >
-                      Accordion Item #3
-                    </CAccordionButton>
-                  </CAccordionHeader>
-                  <CAccordionCollapse visible={activeKey2 === 3}>
-                    <CAccordionBody>
-                      <strong>This is the third item&#39;s accordion body.</strong> It is hidden by
-                      default, until the collapse plugin adds the appropriate classes that we use to
-                      style each element. These classes control the overall appearance, as well as
-                      the showing and hiding via CSS transitions. You can modify any of this with
-                      custom CSS or overriding our default variables. It&#39;s also worth noting
-                      that just about any HTML can go within the <code>.accordion-body</code>,
-                      though the transition does limit overflow.
-                    </CAccordionBody>
-                  </CAccordionCollapse>
+                <CAccordionItem itemKey={3}>
+                  <CAccordionHeader>Accordion Item #3</CAccordionHeader>
+                  <CAccordionBody>
+                    <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
+                    default, until the collapse plugin adds the appropriate classes that we use to
+                    style each element. These classes control the overall appearance, as well as the
+                    showing and hiding via CSS transitions. You can modify any of this with custom
+                    CSS or overriding our default variables. It&#39;s also worth noting that just
+                    about any HTML can go within the <code>.accordion-body</code>, though the
+                    transition does limit overflow.
+                  </CAccordionBody>
+                </CAccordionItem>
+              </CAccordion>
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Accordion</strong> <small>Always open</small>
+          </CCardHeader>
+          <CCardBody>
+            <p className="text-medium-emphasis small">
+              Add <code>alwaysOpen</code> property to make accordion items stay open when another
+              item is opened.
+            </p>
+            <DocsExample href="components/accordion#flush">
+              <CAccordion alwaysOpen>
+                <CAccordionItem itemKey={1}>
+                  <CAccordionHeader>Accordion Item #1</CAccordionHeader>
+                  <CAccordionBody>
+                    <strong>This is the first item&#39;s accordion body.</strong> It is hidden by
+                    default, until the collapse plugin adds the appropriate classes that we use to
+                    style each element. These classes control the overall appearance, as well as the
+                    showing and hiding via CSS transitions. You can modify any of this with custom
+                    CSS or overriding our default variables. It&#39;s also worth noting that just
+                    about any HTML can go within the <code>.accordion-body</code>, though the
+                    transition does limit overflow.
+                  </CAccordionBody>
+                </CAccordionItem>
+                <CAccordionItem itemKey={2}>
+                  <CAccordionHeader>Accordion Item #2</CAccordionHeader>
+                  <CAccordionBody>
+                    <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
+                    default, until the collapse plugin adds the appropriate classes that we use to
+                    style each element. These classes control the overall appearance, as well as the
+                    showing and hiding via CSS transitions. You can modify any of this with custom
+                    CSS or overriding our default variables. It&#39;s also worth noting that just
+                    about any HTML can go within the <code>.accordion-body</code>, though the
+                    transition does limit overflow.
+                  </CAccordionBody>
+                </CAccordionItem>
+                <CAccordionItem itemKey={3}>
+                  <CAccordionHeader>Accordion Item #3</CAccordionHeader>
+                  <CAccordionBody>
+                    <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
+                    default, until the collapse plugin adds the appropriate classes that we use to
+                    style each element. These classes control the overall appearance, as well as the
+                    showing and hiding via CSS transitions. You can modify any of this with custom
+                    CSS or overriding our default variables. It&#39;s also worth noting that just
+                    about any HTML can go within the <code>.accordion-body</code>, though the
+                    transition does limit overflow.
+                  </CAccordionBody>
                 </CAccordionItem>
               </CAccordion>
             </DocsExample>
diff --git a/src/views/components/notifications/modals/Modals.js b/src/views/components/notifications/modals/Modals.js
index e7b3a93..918e80e 100644
--- a/src/views/components/notifications/modals/Modals.js
+++ b/src/views/components/notifications/modals/Modals.js
@@ -23,7 +23,7 @@ const LiveDemo = () => {
     <>
       <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
       <CModal visible={visible} onDismiss={() => setVisible(false)}>
-        <CModalHeader onDismiss={() => setVisible(false)}>
+        <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
         </CModalHeader>
         <CModalBody>Woohoo, you&#39;re reading this text in a modal!</CModalBody>
@@ -43,8 +43,8 @@ const StaticBackdrop = () => {
   return (
     <>
       <CButton onClick={() => setVisible(!visible)}>Launch static backdrop modal</CButton>
-      <CModal visible={visible}>
-        <CModalHeader onDismiss={() => setVisible(false)}>
+      <CModal backdrop="static" visible={visible} onDismiss={() => setVisible(false)}>
+        <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
         </CModalHeader>
         <CModalBody>
@@ -67,7 +67,7 @@ const ScrollingLongContent = () => {
     <>
       <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
       <CModal visible={visible} onDismiss={() => setVisible(false)}>
-        <CModalHeader onDismiss={() => setVisible(false)}>
+        <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
         </CModalHeader>
         <CModalBody>
@@ -167,7 +167,7 @@ const ScrollingLongContent2 = () => {
     <>
       <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
       <CModal scrollable visible={visible} onDismiss={() => setVisible(false)}>
-        <CModalHeader onDismiss={() => setVisible(false)}>
+        <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
         </CModalHeader>
         <CModalBody>
@@ -266,8 +266,8 @@ const VerticallyCentered = () => {
   return (
     <>
       <CButton onClick={() => setVisible(!visible)}>Vertically centered modal</CButton>
-      <CModal alignment="center" visible={visible}>
-        <CModalHeader onDismiss={() => setVisible(false)}>
+      <CModal alignment="center" visible={visible} onDismiss={() => setVisible(false)}>
+        <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
         </CModalHeader>
         <CModalBody>
@@ -290,8 +290,8 @@ const VerticallyCentered2 = () => {
   return (
     <>
       <CButton onClick={() => setVisible(!visible)}>Vertically centered scrollable modal</CButton>
-      <CModal alignment="center" scrollable visible={visible}>
-        <CModalHeader onDismiss={() => setVisible(false)}>
+      <CModal alignment="center" scrollable visible={visible} onDismiss={() => setVisible(false)}>
+        <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
         </CModalHeader>
         <CModalBody>
@@ -333,8 +333,8 @@ const TooltipsPopovers = () => {
   return (
     <>
       <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
-      <CModal alignment="center" visible={visible}>
-        <CModalHeader onDismiss={() => setVisible(false)}>
+      <CModal alignment="center" visible={visible} onDismiss={() => setVisible(false)}>
+        <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
         </CModalHeader>
         <CModalBody>
@@ -379,20 +379,20 @@ const OptionalSizes = () => {
       <CButton onClick={() => setVisibleXL(!visibleXL)}>Extra large modal</CButton>
       <CButton onClick={() => setVisibleLg(!visibleLg)}>Large modal</CButton>
       <CButton onClick={() => setVisibleSm(!visibleSm)}>Small large modal</CButton>
-      <CModal size="xl" visible={visibleXL}>
-        <CModalHeader onDismiss={() => setVisibleXL(false)}>
+      <CModal size="xl" visible={visibleXL} onDismiss={() => setVisibleXL(false)}>
+        <CModalHeader>
           <CModalTitle>Extra large modal</CModalTitle>
         </CModalHeader>
         <CModalBody>...</CModalBody>
       </CModal>
-      <CModal size="lg" visible={visibleLg}>
-        <CModalHeader onDismiss={() => setVisibleLg(false)}>
+      <CModal size="lg" visible={visibleLg} onDismiss={() => setVisibleLg(false)}>
+        <CModalHeader>
           <CModalTitle>Large modal</CModalTitle>
         </CModalHeader>
         <CModalBody>...</CModalBody>
       </CModal>
-      <CModal size="sm" visible={visibleSm}>
-        <CModalHeader onDismiss={() => setVisibleSm(false)}>
+      <CModal size="sm" visible={visibleSm} onDismiss={() => setVisibleSm(false)}>
+        <CModalHeader>
           <CModalTitle>Small modal</CModalTitle>
         </CModalHeader>
         <CModalBody>...</CModalBody>
@@ -417,38 +417,38 @@ const FullscreenModal = () => {
       <CButton onClick={() => setVisibleLg(!visibleLg)}>Full screen below lg</CButton>
       <CButton onClick={() => setVisibleXL(!visibleXL)}>Full screen below xl</CButton>
       <CButton onClick={() => setVisibleXXL(!visibleXXL)}>Full screen below xxl</CButton>
-      <CModal fullscreen visible={visible}>
-        <CModalHeader onDismiss={() => setVisible(false)}>
+      <CModal fullscreen visible={visible} onDismiss={() => setVisible(false)}>
+        <CModalHeader>
           <CModalTitle>Full screen</CModalTitle>
         </CModalHeader>
         <CModalBody>...</CModalBody>
       </CModal>
-      <CModal fullscreen="sm" visible={visibleSm}>
-        <CModalHeader onDismiss={() => setVisibleSm(false)}>
+      <CModal fullscreen="sm" visible={visibleSm} onDismiss={() => setVisibleSm(false)}>
+        <CModalHeader>
           <CModalTitle>Full screen below sm</CModalTitle>
         </CModalHeader>
         <CModalBody>...</CModalBody>
       </CModal>
-      <CModal fullscreen="md" visible={visibleMd}>
-        <CModalHeader onDismiss={() => setVisibleMd(false)}>
+      <CModal fullscreen="md" visible={visibleMd} onDismiss={() => setVisibleMd(false)}>
+        <CModalHeader>
           <CModalTitle>Full screen below md</CModalTitle>
         </CModalHeader>
         <CModalBody>...</CModalBody>
       </CModal>
-      <CModal fullscreen="lg" visible={visibleLg}>
-        <CModalHeader onDismiss={() => setVisibleLg(false)}>
+      <CModal fullscreen="lg" visible={visibleLg} onDismiss={() => setVisibleLg(false)}>
+        <CModalHeader>
           <CModalTitle>Full screen below lg</CModalTitle>
         </CModalHeader>
         <CModalBody>...</CModalBody>
       </CModal>
-      <CModal fullscreen="xl" visible={visibleXL}>
-        <CModalHeader onDismiss={() => setVisibleXL(false)}>
+      <CModal fullscreen="xl" visible={visibleXL} onDismiss={() => setVisibleXL(false)}>
+        <CModalHeader>
           <CModalTitle>Full screen below xl</CModalTitle>
         </CModalHeader>
         <CModalBody>...</CModalBody>
       </CModal>
-      <CModal fullscreen="xxl" visible={visibleXXL}>
-        <CModalHeader onDismiss={() => setVisibleXXL(false)}>
+      <CModal fullscreen="xxl" visible={visibleXXL} onDismiss={() => setVisibleXXL(false)}>
+        <CModalHeader>
           <CModalTitle>Full screen below xxl</CModalTitle>
         </CModalHeader>
         <CModalBody>...</CModalBody>