diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js
index 4d0c60036..156ae8014 100644
--- a/src/components/AppSidebar.js
+++ b/src/components/AppSidebar.js
@@ -30,7 +30,8 @@ const AppSidebar = () => {
 
   return (
     <CSidebar
-      className="sidebar-dark border-end"
+      className="border-end"
+      colorScheme="dark"
       position="fixed"
       unfoldable={unfoldable}
       visible={sidebarShow}
diff --git a/src/views/base/cards/Cards.js b/src/views/base/cards/Cards.js
index c9a8ddb40..bb89cc03c 100644
--- a/src/views/base/cards/Cards.js
+++ b/src/views/base/cards/Cards.js
@@ -54,7 +54,9 @@ const Cards = () => {
                     Some quick example text to build on the card title and make up the bulk of the
                     card&#39;s content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
             </DocsExample>
@@ -235,7 +237,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
             </DocsExample>
@@ -250,7 +254,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
             </DocsExample>
@@ -278,7 +284,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
                 <CCardFooter className="text-body-secondary">2 days ago</CCardFooter>
               </CCard>
@@ -310,7 +318,9 @@ const Cards = () => {
                       <CCardText>
                         With supporting text below as a natural lead-in to additional content.
                       </CCardText>
-                      <CButton href="#">Go somewhere</CButton>
+                      <CButton color="primary" href="#">
+                        Go somewhere
+                      </CButton>
                     </CCardBody>
                   </CCard>
                 </CCol>
@@ -321,7 +331,9 @@ const Cards = () => {
                       <CCardText>
                         With supporting text below as a natural lead-in to additional content.
                       </CCardText>
-                      <CButton href="#">Go somewhere</CButton>
+                      <CButton color="primary" href="#">
+                        Go somewhere
+                      </CButton>
                     </CCardBody>
                   </CCard>
                 </CCol>
@@ -340,7 +352,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
               <CCard className="w-50">
@@ -349,7 +363,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
             </DocsExample>
@@ -364,7 +380,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
             </DocsExample>
@@ -390,7 +408,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
               <CCard className="text-center" style={{ width: '18rem' }}>
@@ -399,7 +419,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
               <CCard className="text-end" style={{ width: '18rem' }}>
@@ -408,7 +430,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
             </DocsExample>
@@ -449,7 +473,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
             </DocsExample>
@@ -477,7 +503,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
             </DocsExample>
diff --git a/src/views/base/collapses/Collapses.js b/src/views/base/collapses/Collapses.js
index 6f98a69cd..218518933 100644
--- a/src/views/base/collapses/Collapses.js
+++ b/src/views/base/collapses/Collapses.js
@@ -27,7 +27,9 @@ const Collapses = () => {
               >
                 Link
               </CButton>
-              <CButton onClick={() => setVisible(!visible)}>Button</CButton>
+              <CButton color="primary" onClick={() => setVisible(!visible)}>
+                Button
+              </CButton>
               <CCollapse visible={visible}>
                 <CCard className="mt-3">
                   <CCardBody>
@@ -81,8 +83,12 @@ const Collapses = () => {
               A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
             </p>
             <DocsExample href="components/collapse#multiple-targets">
-              <CButton onClick={() => setVisibleA(!visibleA)}>Toggle first element</CButton>
-              <CButton onClick={() => setVisibleB(!visibleB)}>Toggle second element</CButton>
+              <CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
+                Toggle first element
+              </CButton>
+              <CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
+                Toggle second element
+              </CButton>
               <CButton
                 onClick={() => {
                   setVisibleA(!visibleA)
diff --git a/src/views/base/jumbotrons/Jumbotrons.js b/src/views/base/jumbotrons/Jumbotrons.js
index 560681367..18c9223b8 100644
--- a/src/views/base/jumbotrons/Jumbotrons.js
+++ b/src/views/base/jumbotrons/Jumbotrons.js
@@ -18,7 +18,9 @@ const Jumbotrons = () => {
               previous versions of Bootstrap. Check out the examples below for how you can remix and
               restyle it to your liking.
             </p>
-            <CButton size="lg">Example button</CButton>
+            <CButton color="primary" size="lg">
+              Example button
+            </CButton>
           </CContainer>
           <CRow className="align-items-md-stretch">
             <CCol md={6}>
diff --git a/src/views/base/placeholders/Placeholders.js b/src/views/base/placeholders/Placeholders.js
index 9639b168b..4f0e80f21 100644
--- a/src/views/base/placeholders/Placeholders.js
+++ b/src/views/base/placeholders/Placeholders.js
@@ -39,7 +39,9 @@ const Placeholders = () => {
                       Some quick example text to build on the card title and make up the bulk of the
                       card&#39;s content.
                     </CCardText>
-                    <CButton href="#">Go somewhere</CButton>
+                    <CButton color="primary" href="#">
+                      Go somewhere
+                    </CButton>
                   </CCardBody>
                 </CCard>
                 <CCard style={{ width: '18rem' }}>
diff --git a/src/views/base/spinners/Spinners.js b/src/views/base/spinners/Spinners.js
index 7347cf0c1..c3b927f54 100644
--- a/src/views/base/spinners/Spinners.js
+++ b/src/views/base/spinners/Spinners.js
@@ -93,19 +93,19 @@ const Accordion = () => {
               as needed.
             </p>
             <DocsExample href="components/spinner#buttons">
-              <CButton disabled>
+              <CButton color="primary" disabled>
                 <CSpinner component="span" size="sm" aria-hidden="true" />
               </CButton>
-              <CButton disabled>
+              <CButton color="primary" disabled>
                 <CSpinner component="span" size="sm" aria-hidden="true" />
                 Loading...
               </CButton>
             </DocsExample>
             <DocsExample href="components/spinner#buttons">
-              <CButton disabled>
+              <CButton color="primary" disabled>
                 <CSpinner component="span" size="sm" variant="grow" aria-hidden="true" />
               </CButton>
-              <CButton disabled>
+              <CButton color="primary" disabled>
                 <CSpinner component="span" size="sm" variant="grow" aria-hidden="true" />
                 Loading...
               </CButton>
diff --git a/src/views/forms/form-control/FormControl.js b/src/views/forms/form-control/FormControl.js
index 5949a79ce..caea5f722 100644
--- a/src/views/forms/form-control/FormControl.js
+++ b/src/views/forms/form-control/FormControl.js
@@ -183,7 +183,7 @@ const FormControl = () => {
                   <CFormInput type="password" id="inputPassword2" placeholder="Password" />
                 </div>
                 <div className="col-auto">
-                  <CButton type="submit" className="mb-3">
+                  <CButton color="primary" type="submit" className="mb-3">
                     Confirm identity
                   </CButton>
                 </div>
diff --git a/src/views/forms/layout/Layout.js b/src/views/forms/layout/Layout.js
index 9d2b21fd2..8fdc2a88c 100644
--- a/src/views/forms/layout/Layout.js
+++ b/src/views/forms/layout/Layout.js
@@ -102,7 +102,9 @@ const Layout = () => {
                   <CFormCheck type="checkbox" id="gridCheck" label="Check me out" />
                 </CCol>
                 <CCol xs={12}>
-                  <CButton type="submit">Sign in</CButton>
+                  <CButton color="primary" type="submit">
+                    Sign in
+                  </CButton>
                 </CCol>
               </CForm>
             </DocsExample>
@@ -178,7 +180,9 @@ const Layout = () => {
                     <CFormCheck type="checkbox" id="gridCheck1" label="Example checkbox" />
                   </div>
                 </CRow>
-                <CButton type="submit">Sign in</CButton>
+                <CButton color="primary" type="submit">
+                  Sign in
+                </CButton>
               </CForm>
             </DocsExample>
           </CCardBody>
@@ -314,7 +318,9 @@ const Layout = () => {
                   <CFormCheck type="checkbox" id="autoSizingCheck" label="Remember me" />
                 </CCol>
                 <CCol xs="auto">
-                  <CButton type="submit">Submit</CButton>
+                  <CButton color="primary" type="submit">
+                    Submit
+                  </CButton>
                 </CCol>
               </CForm>
             </DocsExample>
@@ -353,7 +359,9 @@ const Layout = () => {
                   <CFormCheck type="checkbox" id="autoSizingCheck2" label="Remember me" />
                 </CCol>
                 <CCol xs="auto">
-                  <CButton type="submit">Submit</CButton>
+                  <CButton color="primary" type="submit">
+                    Submit
+                  </CButton>
                 </CCol>
               </CForm>
             </DocsExample>
@@ -400,7 +408,9 @@ const Layout = () => {
                   <CFormCheck type="checkbox" id="inlineFormCheck" label="Remember me" />
                 </CCol>
                 <CCol xs={12}>
-                  <CButton type="submit">Submit</CButton>
+                  <CButton color="primary" type="submit">
+                    Submit
+                  </CButton>
                 </CCol>
               </CForm>
             </DocsExample>
diff --git a/src/views/notifications/modals/Modals.js b/src/views/notifications/modals/Modals.js
index d65dd44b2..11e375884 100644
--- a/src/views/notifications/modals/Modals.js
+++ b/src/views/notifications/modals/Modals.js
@@ -21,7 +21,9 @@ const LiveDemo = () => {
   const [visible, setVisible] = useState(false)
   return (
     <>
-      <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Launch demo modal
+      </CButton>
       <CModal visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
@@ -42,7 +44,9 @@ const StaticBackdrop = () => {
   const [visible, setVisible] = useState(false)
   return (
     <>
-      <CButton onClick={() => setVisible(!visible)}>Launch static backdrop modal</CButton>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Launch static backdrop modal
+      </CButton>
       <CModal backdrop="static" visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
@@ -65,7 +69,9 @@ const ScrollingLongContent = () => {
   const [visible, setVisible] = useState(false)
   return (
     <>
-      <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Launch demo modal
+      </CButton>
       <CModal visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
@@ -165,7 +171,9 @@ const ScrollingLongContent2 = () => {
   const [visible, setVisible] = useState(false)
   return (
     <>
-      <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Launch demo modal
+      </CButton>
       <CModal scrollable visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
@@ -265,7 +273,9 @@ const VerticallyCentered = () => {
   const [visible, setVisible] = useState(false)
   return (
     <>
-      <CButton onClick={() => setVisible(!visible)}>Vertically centered modal</CButton>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Vertically centered modal
+      </CButton>
       <CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
@@ -289,7 +299,9 @@ const VerticallyCentered2 = () => {
   const [visible, setVisible] = useState(false)
   return (
     <>
-      <CButton onClick={() => setVisible(!visible)}>Vertically centered scrollable modal</CButton>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Vertically centered scrollable modal
+      </CButton>
       <CModal alignment="center" scrollable visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
@@ -332,7 +344,9 @@ const TooltipsPopovers = () => {
   const [visible, setVisible] = useState(false)
   return (
     <>
-      <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Launch demo modal
+      </CButton>
       <CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
@@ -342,7 +356,7 @@ const TooltipsPopovers = () => {
           <p>
             This
             <CPopover title="Popover title" content="Popover body content is set in this property.">
-              <CButton>button</CButton>
+              <CButton color="primary">button</CButton>
             </CPopover>{' '}
             triggers a popover on click.
           </p>
@@ -376,9 +390,15 @@ const OptionalSizes = () => {
   const [visibleSm, setVisibleSm] = useState(false)
   return (
     <>
-      <CButton onClick={() => setVisibleXL(!visibleXL)}>Extra large modal</CButton>
-      <CButton onClick={() => setVisibleLg(!visibleLg)}>Large modal</CButton>
-      <CButton onClick={() => setVisibleSm(!visibleSm)}>Small large modal</CButton>
+      <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>
+        Extra large modal
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>
+        Large modal
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>
+        Small large modal
+      </CButton>
       <CModal size="xl" visible={visibleXL} onClose={() => setVisibleXL(false)}>
         <CModalHeader>
           <CModalTitle>Extra large modal</CModalTitle>
@@ -411,12 +431,24 @@ const FullscreenModal = () => {
 
   return (
     <>
-      <CButton onClick={() => setVisible(!visible)}>Full screen</CButton>
-      <CButton onClick={() => setVisibleSm(!visibleSm)}>Full screen below sm</CButton>
-      <CButton onClick={() => setVisibleMd(!visibleMd)}>Full screen below md</CButton>
-      <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>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Full screen
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>
+        Full screen below sm
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleMd(!visibleMd)}>
+        Full screen below md
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>
+        Full screen below lg
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>
+        Full screen below xl
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleXXL(!visibleXXL)}>
+        Full screen below xxl
+      </CButton>
       <CModal fullscreen visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Full screen</CModalTitle>
diff --git a/src/views/notifications/toasts/Toasts.js b/src/views/notifications/toasts/Toasts.js
index 9631a0e83..639b78b48 100644
--- a/src/views/notifications/toasts/Toasts.js
+++ b/src/views/notifications/toasts/Toasts.js
@@ -39,7 +39,9 @@ const ExampleToast = () => {
   )
   return (
     <>
-      <CButton onClick={() => addToast(exampleToast)}>Send a toast</CButton>
+      <CButton color="primary" onClick={() => addToast(exampleToast)}>
+        Send a toast
+      </CButton>
       <CToaster ref={toaster} push={toast} placement="top-end" />
     </>
   )