diff --git a/src/views/examples/base/cards/Cards.js b/src/views/examples/base/cards/Cards.js
index 084eb77..480bda8 100644
--- a/src/views/examples/base/cards/Cards.js
+++ b/src/views/examples/base/cards/Cards.js
@@ -115,7 +115,7 @@ const Cards = () => {
               <CCard style={{ width: '18rem' }}>
                 <CCardBody>
                   <CCardTitle>Card title</CCardTitle>
-                  <CCardSubtitle className="mb-2 text-muted">Card subtitle</CCardSubtitle>
+                  <CCardSubtitle className="mb-2 text-medium-emphasis">Card subtitle</CCardSubtitle>
                   <CCardText>
                     Some quick example text to build on the card title and make up the bulk of the
                     card's content.
@@ -329,7 +329,7 @@ const Cards = () => {
                   </CCardText>
                   <CButton href="#">Go somewhere</CButton>
                 </CCardBody>
-                <CCardFooter className="text-muted">2 days ago</CCardFooter>
+                <CCardFooter className="text-medium-emphasis">2 days ago</CCardFooter>
               </CCard>
             </Example>
           </CCardBody>
@@ -572,7 +572,7 @@ const Cards = () => {
                         additional content. This content is a little bit longer.
                       </CCardText>
                       <CCardText>
-                        <small className="text-muted">Last updated 3 mins ago</small>
+                        <small className="text-medium-emphasis">Last updated 3 mins ago</small>
                       </CCardText>
                     </CCardBody>
                   </CCard>
@@ -586,7 +586,7 @@ const Cards = () => {
                         additional content. This content is a little bit longer.
                       </CCardText>
                       <CCardText>
-                        <small className="text-muted">Last updated 3 mins ago</small>
+                        <small className="text-medium-emphasis">Last updated 3 mins ago</small>
                       </CCardText>
                     </CCardBody>
                     <CCardImage
@@ -777,7 +777,7 @@ const Cards = () => {
                       additional content. This content is a little bit longer.
                     </CCardText>
                     <CCardText>
-                      <small className="text-muted">Last updated 3 mins ago</small>
+                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
                     </CCardText>
                   </CCardBody>
                 </CCard>
@@ -807,7 +807,7 @@ const Cards = () => {
                       content.
                     </CCardText>
                     <CCardText>
-                      <small className="text-muted">Last updated 3 mins ago</small>
+                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
                     </CCardText>
                   </CCardBody>
                 </CCard>
@@ -838,7 +838,7 @@ const Cards = () => {
                       that equal height action.
                     </CCardText>
                     <CCardText>
-                      <small className="text-muted">Last updated 3 mins ago</small>
+                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
                     </CCardText>
                   </CCardBody>
                 </CCard>
@@ -876,7 +876,7 @@ const Cards = () => {
                     </CCardText>
                   </CCardBody>
                   <CCardFooter>
-                    <small className="text-muted">Last updated 3 mins ago</small>
+                    <small className="text-medium-emphasis">Last updated 3 mins ago</small>
                   </CCardFooter>
                 </CCard>
                 <CCard>
@@ -906,7 +906,7 @@ const Cards = () => {
                     </CCardText>
                   </CCardBody>
                   <CCardFooter>
-                    <small className="text-muted">Last updated 3 mins ago</small>
+                    <small className="text-medium-emphasis">Last updated 3 mins ago</small>
                   </CCardFooter>
                 </CCard>
                 <CCard>
@@ -937,7 +937,7 @@ const Cards = () => {
                     </CCardText>
                   </CCardBody>
                   <CCardFooter>
-                    <small className="text-muted">Last updated 3 mins ago</small>
+                    <small className="text-medium-emphasis">Last updated 3 mins ago</small>
                   </CCardFooter>
                 </CCard>
               </CCardGroup>
@@ -989,7 +989,7 @@ const Cards = () => {
                       </CCardText>
                     </CCardBody>
                     <CCardFooter>
-                      <small className="text-muted">Last updated 3 mins ago</small>
+                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
                     </CCardFooter>
                   </CCard>
                 </CCol>
@@ -1021,7 +1021,7 @@ const Cards = () => {
                       </CCardText>
                     </CCardBody>
                     <CCardFooter>
-                      <small className="text-muted">Last updated 3 mins ago</small>
+                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
                     </CCardFooter>
                   </CCard>
                 </CCol>
@@ -1053,7 +1053,7 @@ const Cards = () => {
                       </CCardText>
                     </CCardBody>
                     <CCardFooter>
-                      <small className="text-muted">Last updated 3 mins ago</small>
+                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
                     </CCardFooter>
                   </CCard>
                 </CCol>
@@ -1085,7 +1085,7 @@ const Cards = () => {
                       </CCardText>
                     </CCardBody>
                     <CCardFooter>
-                      <small className="text-muted">Last updated 3 mins ago</small>
+                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
                     </CCardFooter>
                   </CCard>
                 </CCol>
@@ -1125,7 +1125,7 @@ const Cards = () => {
                       </CCardText>
                     </CCardBody>
                     <CCardFooter>
-                      <small className="text-muted">Last updated 3 mins ago</small>
+                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
                     </CCardFooter>
                   </CCard>
                 </CCol>
@@ -1157,7 +1157,7 @@ const Cards = () => {
                       </CCardText>
                     </CCardBody>
                     <CCardFooter>
-                      <small className="text-muted">Last updated 3 mins ago</small>
+                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
                     </CCardFooter>
                   </CCard>
                 </CCol>
@@ -1189,7 +1189,7 @@ const Cards = () => {
                       </CCardText>
                     </CCardBody>
                     <CCardFooter>
-                      <small className="text-muted">Last updated 3 mins ago</small>
+                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
                     </CCardFooter>
                   </CCard>
                 </CCol>
@@ -1221,7 +1221,7 @@ const Cards = () => {
                       </CCardText>
                     </CCardBody>
                     <CCardFooter>
-                      <small className="text-muted">Last updated 3 mins ago</small>
+                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
                     </CCardFooter>
                   </CCard>
                 </CCol>
diff --git a/src/views/examples/base/list-groups/ListGroups.js b/src/views/examples/base/list-groups/ListGroups.js
index d193bae..4aa14a6 100644
--- a/src/views/examples/base/list-groups/ListGroups.js
+++ b/src/views/examples/base/list-groups/ListGroups.js
@@ -283,24 +283,24 @@ const ListGroups = () => {
                 <CListGroupItem component="a" href="#">
                   <div className="d-flex w-100 justify-content-between">
                     <h5 className="mb-1">List group item heading</h5>
-                    <small className="text-muted">3 days ago</small>
+                    <small className="text-medium-emphasis">3 days ago</small>
                   </div>
                   <p className="mb-1">
                     Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
                     varius blandit.
                   </p>
-                  <small className="text-muted">Donec id elit non mi porta.</small>
+                  <small className="text-medium-emphasis">Donec id elit non mi porta.</small>
                 </CListGroupItem>
                 <CListGroupItem component="a" href="#">
                   <div className="d-flex w-100 justify-content-between">
                     <h5 className="mb-1">List group item heading</h5>
-                    <small className="text-muted">3 days ago</small>
+                    <small className="text-medium-emphasis">3 days ago</small>
                   </div>
                   <p className="mb-1">
                     Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
                     varius blandit.
                   </p>
-                  <small className="text-muted">Donec id elit non mi porta.</small>
+                  <small className="text-medium-emphasis">Donec id elit non mi porta.</small>
                 </CListGroupItem>
               </CListGroup>
             </Example>
diff --git a/src/views/examples/pages/login/Login.js b/src/views/examples/pages/login/Login.js
index f09620a..769ee5e 100644
--- a/src/views/examples/pages/login/Login.js
+++ b/src/views/examples/pages/login/Login.js
@@ -17,7 +17,7 @@ import CIcon from '@coreui/icons-react'
 
 const Login = () => {
   return (
-    <div className="c-app c-default-layout flex-row align-items-center">
+    <div className="bg-light min-vh-100 d-flex flex-row align-items-center">
       <CContainer>
         <CRow className="justify-content-center">
           <CCol md="8">
@@ -26,7 +26,7 @@ const Login = () => {
                 <CCardBody>
                   <CForm>
                     <h1>Login</h1>
-                    <p className="text-muted">Sign In to your account</p>
+                    <p className="text-medium-emphasis">Sign In to your account</p>
                     <CInputGroup className="mb-3">
                       <CInputGroupText>
                         <CIcon name="cil-user" />
@@ -58,7 +58,7 @@ const Login = () => {
                   </CForm>
                 </CCardBody>
               </CCard>
-              <CCard className="text-white bg-primary py-5 d-md-down-none" style={{ width: '44%' }}>
+              <CCard className="text-white bg-primary py-5" style={{ width: '44%' }}>
                 <CCardBody className="text-center">
                   <div>
                     <h2>Sign up</h2>
diff --git a/src/views/examples/pages/page404/Page404.js b/src/views/examples/pages/page404/Page404.js
index f334597..7dc7670 100644
--- a/src/views/examples/pages/page404/Page404.js
+++ b/src/views/examples/pages/page404/Page404.js
@@ -12,14 +12,16 @@ import CIcon from '@coreui/icons-react'
 
 const Page404 = () => {
   return (
-    <div className="c-app c-default-layout flex-row align-items-center">
+    <div className="bg-light min-vh-100 d-flex flex-row align-items-center">
       <CContainer>
         <CRow className="justify-content-center">
           <CCol md="6">
             <div className="clearfix">
               <h1 className="float-start display-3 me-4">404</h1>
               <h4 className="pt-3">Oops! You{"'"}re lost.</h4>
-              <p className="text-muted float-start">The page you are looking for was not found.</p>
+              <p className="text-medium-emphasis float-start">
+                The page you are looking for was not found.
+              </p>
             </div>
             <CInputGroup className="input-prepend">
               <CInputGroupText>
diff --git a/src/views/examples/pages/page500/Page500.js b/src/views/examples/pages/page500/Page500.js
index a935da1..71c015f 100644
--- a/src/views/examples/pages/page500/Page500.js
+++ b/src/views/examples/pages/page500/Page500.js
@@ -12,14 +12,14 @@ import CIcon from '@coreui/icons-react'
 
 const Page500 = () => {
   return (
-    <div className="c-app c-default-layout flex-row align-items-center">
+    <div className="bg-light min-vh-100 d-flex flex-row align-items-center">
       <CContainer>
         <CRow className="justify-content-center">
           <CCol md="6">
             <span className="clearfix">
               <h1 className="float-start display-3 me-4">500</h1>
               <h4 className="pt-3">Houston, we have a problem!</h4>
-              <p className="text-muted float-start">
+              <p className="text-medium-emphasis float-start">
                 The page you are looking for is temporarily unavailable.
               </p>
             </span>
diff --git a/src/views/examples/pages/register/Register.js b/src/views/examples/pages/register/Register.js
index 7018dc6..af10d6b 100644
--- a/src/views/examples/pages/register/Register.js
+++ b/src/views/examples/pages/register/Register.js
@@ -16,7 +16,7 @@ import CIcon from '@coreui/icons-react'
 
 const Register = () => {
   return (
-    <div className="c-app c-default-layout flex-row align-items-center">
+    <div className="bg-light min-vh-100 d-flex flex-row align-items-center">
       <CContainer>
         <CRow className="justify-content-center">
           <CCol md="9" lg="7" xl="6">
@@ -24,7 +24,7 @@ const Register = () => {
               <CCardBody className="p-4">
                 <CForm>
                   <h1>Register</h1>
-                  <p className="text-muted">Create your account</p>
+                  <p className="text-medium-emphasis">Create your account</p>
                   <CInputGroup className="mb-3">
                     <CInputGroupText>
                       <CIcon name="cil-user" />
diff --git a/src/views/examples/theme/colors/Colors.js b/src/views/examples/theme/colors/Colors.js
index b99a0f9..c972769 100644
--- a/src/views/examples/theme/colors/Colors.js
+++ b/src/views/examples/theme/colors/Colors.js
@@ -18,11 +18,11 @@ const ThemeView = () => {
     <table className="table w-100" ref={ref}>
       <tbody>
         <tr>
-          <td className="text-muted">HEX:</td>
+          <td className="text-medium-emphasis">HEX:</td>
           <td className="font-weight-bold">{rgbToHex(color)}</td>
         </tr>
         <tr>
-          <td className="text-muted">RGB:</td>
+          <td className="text-medium-emphasis">RGB:</td>
           <td className="font-weight-bold">{color}</td>
         </tr>
       </tbody>
diff --git a/src/views/examples/widgets/Widgets.js b/src/views/examples/widgets/Widgets.js
index 34429ff..4403bdc 100644
--- a/src/views/examples/widgets/Widgets.js
+++ b/src/views/examples/widgets/Widgets.js
@@ -168,7 +168,7 @@ const Widgets = () => {
             color="primary"
             footer={
               <CLink
-                className="font-weight-bold font-xs btn-block text-muted"
+                className="font-weight-bold font-xs btn-block text-medium-emphasis"
                 href="https://coreui.io/"
                 rel="noopener norefferer"
                 target="_blank"
@@ -189,7 +189,7 @@ const Widgets = () => {
             color="info"
             footer={
               <CLink
-                className="font-weight-bold font-xs btn-block text-muted"
+                className="font-weight-bold font-xs btn-block text-medium-emphasis"
                 href="https://coreui.io/"
                 rel="noopener norefferer"
                 target="_blank"
@@ -210,7 +210,7 @@ const Widgets = () => {
             color="warning"
             footer={
               <CLink
-                className="font-weight-bold font-xs btn-block text-muted"
+                className="font-weight-bold font-xs btn-block text-medium-emphasis"
                 href="https://coreui.io/"
                 rel="noopener norefferer"
                 target="_blank"
@@ -231,7 +231,7 @@ const Widgets = () => {
             color="danger"
             footer={
               <CLink
-                className="font-weight-bold font-xs btn-block text-muted"
+                className="font-weight-bold font-xs btn-block text-medium-emphasis"
                 href="https://coreui.io/"
                 rel="noopener norefferer"
                 target="_blank"