diff --git a/src/assets/images/components.webp b/src/assets/images/components.webp
new file mode 100644
index 00000000..dfdee46b
Binary files /dev/null and b/src/assets/images/components.webp differ
diff --git a/src/assets/images/icons.webp b/src/assets/images/icons.webp
new file mode 100644
index 00000000..b5ca82d0
Binary files /dev/null and b/src/assets/images/icons.webp differ
diff --git a/src/components/DocsComponents.vue b/src/components/DocsComponents.vue
new file mode 100644
index 00000000..7ebc2351
--- /dev/null
+++ b/src/components/DocsComponents.vue
@@ -0,0 +1,43 @@
+<script setup>
+const props = defineProps({
+  href: String,
+})
+
+import ComponentsImg from '@/assets/images/components.webp'
+</script>
+
+<template>
+  <div class="bg-primary bg-opacity-10 border border-2 border-primary rounded mb-4">
+    <div class="row d-flex align-items-center p-3 px-xl-4 flex-xl-nowrap">
+      <div class="col-xl-auto col-12 d-none d-xl-block p-0">
+        <img
+          class="img-fluid"
+          :src="ComponentsImg"
+          width="160px"
+          height="160px"
+          alt="CoreUI PRO hexagon"
+        />
+      </div>
+      <div class="col-md col-12 px-lg-4">
+        Our Admin Panel isn’t just a mix of third-party components. It’s
+        <strong>
+          the only open-source Vue dashboard built on a professional, enterprise-grade UI Components
+          Library
+        </strong>
+        . This component is part of this library, and we present only the basic usage of it here. To
+        explore extended examples, detailed API documentation, and customization options, refer to
+        our docs.
+      </div>
+      <div class="col-md-auto col-12 mt-3 mt-lg-0">
+        <a
+          class="btn btn-primary text-nowrap text-white"
+          :href="`https://coreui.io/vue/docs/${props.href}`"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Explore Documentation
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/DocsIcons.vue b/src/components/DocsIcons.vue
new file mode 100644
index 00000000..ffe0e64d
--- /dev/null
+++ b/src/components/DocsIcons.vue
@@ -0,0 +1,29 @@
+<script setup>
+import IconsImg from '@/assets/images/icons.webp'
+</script>
+
+<template>
+  <div class="bg-warning bg-opacity-10 border border-2 border-warning rounded mb-4">
+    <div class="row d-flex align-items-center p-3 px-xl-4 flex-xl-nowrap">
+      <div class="col-xl-auto col-12 d-none d-xl-block p-0">
+        <img class="img-fluid" :src="IconsImg" width="160px" height="160px" alt="CoreUI Icons" />
+      </div>
+      <div class="col-md col-12 px-lg-4">
+        CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG,
+        and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You
+        can use them in your digital products for web or mobile app. For more information please
+        visit our documentation.
+      </div>
+      <div class="col-md-auto col-12 mt-3 mt-lg-0">
+        <a
+          class="btn btn-warning text-nowrap text-white"
+          href="https://coreui.io/vue/docs/components/icon.html"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Explore Documentation
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/main.js b/src/main.js
index bf8b8e5f..64a416a6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,7 +7,9 @@ import router from './router'
 import CoreuiVue from '@coreui/vue'
 import CIcon from '@coreui/icons-vue'
 import { iconsSet as icons } from '@/assets/icons'
+import DocsComponents from '@/components/DocsComponents'
 import DocsExample from '@/components/DocsExample'
+import DocsIcons from '@/components/DocsIcons'
 
 const app = createApp(App)
 app.use(createPinia())
@@ -15,6 +17,8 @@ app.use(router)
 app.use(CoreuiVue)
 app.provide('icons', icons)
 app.component('CIcon', CIcon)
+app.component('DocsComponents', DocsComponents)
 app.component('DocsExample', DocsExample)
+app.component('DocsIcons', DocsIcons)
 
 app.mount('#app')
diff --git a/src/views/base/Accordion.vue b/src/views/base/Accordion.vue
index 83edaaf1..98e5b31b 100644
--- a/src/views/base/Accordion.vue
+++ b/src/views/base/Accordion.vue
@@ -1,7 +1,7 @@
-
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/accordion.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Accordion</strong>
diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index c23bb469..c7e214a5 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -1,16 +1,16 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/breadcrumb.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Breadcrumb</strong>
         </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            The breadcrumb navigation provides links back to each previous page
-            the user navigated through and shows the current location in a
-            website or an application. You don’t have to add separators, because
-            they automatically added in CSS through
+            The breadcrumb navigation provides links back to each previous page the user navigated
+            through and shows the current location in a website or an application. You don’t have to
+            add separators, because they automatically added in CSS through
             <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before">
               <code>::before</code>
             </a>
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index 43cf10b9..524cb0f2 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -6,6 +6,7 @@ import VueImg from '@/assets/images/vue.jpg'
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/card.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Card</strong> <small>Example</small>
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
index 0003404b..af00c03a 100644
--- a/src/views/base/Carousels.vue
+++ b/src/views/base/Carousels.vue
@@ -7,6 +7,7 @@ import VueImg from '@/assets/images/vue.jpg'
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/carousel.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Carousels</strong> <small>Slide only</small>
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index 296dd9f3..194bfdfd 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -10,6 +10,7 @@ const visibleHorizontal = ref(false)
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/collapse.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Collapse</strong>
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 23093fc7..4d6a4c4e 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/list-group.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue List Group</strong> <small>Basic example</small>
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index ec73f2a8..2c544f85 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/nav.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Navs</strong> <small>Base navs</small>
diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue
index 060cdd02..2141769e 100644
--- a/src/views/base/Paginations.vue
+++ b/src/views/base/Paginations.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/pagination.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Pagination</strong>
diff --git a/src/views/base/Placeholders.vue b/src/views/base/Placeholders.vue
index 631375cd..597748ff 100644
--- a/src/views/base/Placeholders.vue
+++ b/src/views/base/Placeholders.vue
@@ -5,6 +5,7 @@ import VueImg from '@/assets/images/vue.jpg'
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/placeholder.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Placeholder</strong>
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index 33d6d8a0..81147e15 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/popover.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Popovers</strong> <small>Basic example</small>
diff --git a/src/views/base/Progress.vue b/src/views/base/Progress.vue
index 8d7f810d..68d05fe3 100644
--- a/src/views/base/Progress.vue
+++ b/src/views/base/Progress.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/progress.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Progress</strong> <small>Basic example</small>
diff --git a/src/views/base/Spinners.vue b/src/views/base/Spinners.vue
index 54d5d44c..1f9b6454 100644
--- a/src/views/base/Spinners.vue
+++ b/src/views/base/Spinners.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/spinner.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Spinner</strong> <small>Border</small>
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index 6dcc2a94..8a4061ff 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/table.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Table</strong> <small>Basic example</small>
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
index 0460be0f..66b6518f 100644
--- a/src/views/base/Tabs.vue
+++ b/src/views/base/Tabs.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/tabs.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Tabs</strong>
diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue
index cbf68c99..e98467e4 100644
--- a/src/views/base/Tooltips.vue
+++ b/src/views/base/Tooltips.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/tooltip.html" />
       <CCard>
         <CCardHeader>
           <strong>Vue Tooltips</strong> <small>Basic example</small>
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
index 479874a5..21bfd114 100644
--- a/src/views/buttons/ButtonGroups.vue
+++ b/src/views/buttons/ButtonGroups.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/button-group.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Button Group</strong> <span>Basic example</span>
diff --git a/src/views/buttons/Buttons.vue b/src/views/buttons/Buttons.vue
index fc09f196..fd26fe88 100644
--- a/src/views/buttons/Buttons.vue
+++ b/src/views/buttons/Buttons.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/button.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Button</strong>
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index 4fbd90e3..4aaa38a9 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/dropdown.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Dropdown</strong> <small>Single button</small>
diff --git a/src/views/forms/ChecksRadios.vue b/src/views/forms/ChecksRadios.vue
index 932013b9..03dea2e6 100644
--- a/src/views/forms/ChecksRadios.vue
+++ b/src/views/forms/ChecksRadios.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/checks-radios.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Checkbox</strong>
diff --git a/src/views/forms/FloatingLabels.vue b/src/views/forms/FloatingLabels.vue
index e171d190..8fbf36ee 100644
--- a/src/views/forms/FloatingLabels.vue
+++ b/src/views/forms/FloatingLabels.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/floating-labels.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Floating labels</strong>
diff --git a/src/views/forms/FormControl.vue b/src/views/forms/FormControl.vue
index fc307643..19273921 100644
--- a/src/views/forms/FormControl.vue
+++ b/src/views/forms/FormControl.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/form-control.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Form Control</strong>
diff --git a/src/views/forms/InputGroup.vue b/src/views/forms/InputGroup.vue
index 9c1fa052..efd3447e 100644
--- a/src/views/forms/InputGroup.vue
+++ b/src/views/forms/InputGroup.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/input-group.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Input group</strong> <small>Basic example</small>
diff --git a/src/views/forms/Layout.vue b/src/views/forms/Layout.vue
index 711043f1..8d304416 100644
--- a/src/views/forms/Layout.vue
+++ b/src/views/forms/Layout.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/layout.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Layout</strong> <small>Form grid</small>
diff --git a/src/views/forms/Range.vue b/src/views/forms/Range.vue
index 3a92d645..3ac97c2a 100644
--- a/src/views/forms/Range.vue
+++ b/src/views/forms/Range.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/range.html" />
       <CCard class="mb-4">
         <CCardHeader> <strong>Vue Range</strong> <small></small> </CCardHeader>
         <CCardBody>
diff --git a/src/views/forms/Select.vue b/src/views/forms/Select.vue
index 61649e8f..f182c410 100644
--- a/src/views/forms/Select.vue
+++ b/src/views/forms/Select.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/select.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Select</strong> <small>Default</small>
diff --git a/src/views/forms/Validation.vue b/src/views/forms/Validation.vue
index edacace9..60b727cc 100644
--- a/src/views/forms/Validation.vue
+++ b/src/views/forms/Validation.vue
@@ -38,6 +38,7 @@ const handleSubmitTooltip01 = (event) => {
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/validation.html" />
       <CCard class="mb-4">
         <CCardHeader> <strong>Validation</strong> <small>Custom styles</small> </CCardHeader>
         <CCardBody>
diff --git a/src/views/icons/Brands.vue b/src/views/icons/Brands.vue
index 6e1d1f12..99702483 100644
--- a/src/views/icons/Brands.vue
+++ b/src/views/icons/Brands.vue
@@ -1,26 +1,24 @@
 <script setup>
 import { brandSet } from '@coreui/icons'
+import DocsIcons from '../../components/DocsIcons.vue';
 
 const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
 const icons = brandSet
 </script>
 
 <template>
-  <CRow>
-    <CCol>
-      <CCard>
-        <CCardHeader>CoreUI Icons - Brand</CCardHeader>
-        <CCardBody>
-          <CRow class="text-center">
-            <template v-for="(icon, iconName) in icons" :key="iconName">
-              <CCol class="mb-5" :xs="3" :sm="2">
-                <CIcon :content="icon" size="xxl" />
-                <div>{{ toKebabCase(iconName) }}</div>
-              </CCol>
-            </template>
-          </CRow>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
+  <DocsIcons />
+  <CCard>
+    <CCardHeader>CoreUI Icons - Brand</CCardHeader>
+    <CCardBody>
+      <CRow class="text-center">
+        <template v-for="(icon, iconName) in icons" :key="iconName">
+          <CCol class="mb-5" :xs="3" :sm="2">
+            <CIcon :content="icon" size="xxl" />
+            <div>{{ toKebabCase(iconName) }}</div>
+          </CCol>
+        </template>
+      </CRow>
+    </CCardBody>
+  </CCard>
 </template>
diff --git a/src/views/icons/CoreUIIcons.vue b/src/views/icons/CoreUIIcons.vue
index 290a052e..1d0de1cd 100644
--- a/src/views/icons/CoreUIIcons.vue
+++ b/src/views/icons/CoreUIIcons.vue
@@ -6,21 +6,18 @@ const icons = freeSet
 </script>
 
 <template>
-  <CRow>
-    <CCol>
-      <CCard>
-        <CCardHeader>CoreUI Icons Free</CCardHeader>
-        <CCardBody>
-          <CRow class="text-center">
-            <template v-for="(icon, iconName) in icons" :key="iconName">
-              <CCol class="mb-5" :xs="3" :sm="2">
-                <CIcon :content="icon" size="xxl" />
-                <div>{{ toKebabCase(iconName) }}</div>
-              </CCol>
-            </template>
-          </CRow>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
+  <DocsIcons />
+  <CCard>
+    <CCardHeader>CoreUI Icons Free</CCardHeader>
+    <CCardBody>
+      <CRow class="text-center">
+        <template v-for="(icon, iconName) in icons" :key="iconName">
+          <CCol class="mb-5" :xs="3" :sm="2">
+            <CIcon :content="icon" size="xxl" />
+            <div>{{ toKebabCase(iconName) }}</div>
+          </CCol>
+        </template>
+      </CRow>
+    </CCardBody>
+  </CCard>
 </template>
diff --git a/src/views/icons/Flags.vue b/src/views/icons/Flags.vue
index cd23c088..a6004b0b 100644
--- a/src/views/icons/Flags.vue
+++ b/src/views/icons/Flags.vue
@@ -6,21 +6,18 @@ const icons = flagSet
 </script>
 
 <template>
-  <CRow>
-    <CCol>
-      <CCard>
-        <CCardHeader>CoreUI Icons - Flag</CCardHeader>
-        <CCardBody>
-          <CRow class="text-center">
-            <template v-for="(icon, iconName) in icons" :key="iconName">
-              <CCol class="mb-5" :xs="3" :sm="2">
-                <CIcon :content="icon" size="xxl" />
-                <div>{{ toKebabCase(iconName) }}</div>
-              </CCol>
-            </template>
-          </CRow>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
+  <DocsIcons />
+  <CCard>
+    <CCardHeader>CoreUI Icons - Flag</CCardHeader>
+    <CCardBody>
+      <CRow class="text-center">
+        <template v-for="(icon, iconName) in icons" :key="iconName">
+          <CCol class="mb-5" :xs="3" :sm="2">
+            <CIcon :content="icon" size="xxl" />
+            <div>{{ toKebabCase(iconName) }}</div>
+          </CCol>
+        </template>
+      </CRow>
+    </CCardBody>
+  </CCard>
 </template>
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index a85699b0..1e1a634e 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -7,6 +7,7 @@ const alert = () => {
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/alert.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Alert</strong>
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index 0ec745bc..28859ffc 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -1,5 +1,8 @@
 <template>
   <CRow>
+    <CCol :xs="12">
+      <DocsComponents href="components/badge.html" />
+    </CCol>
     <CCol :lg="6">
       <CCard class="mb-4">
         <CCardHeader>
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index 1bd7272d..d1fb745a 100644
--- a/src/views/notifications/Modals.vue
+++ b/src/views/notifications/Modals.vue
@@ -22,6 +22,7 @@ const fullscreenXxlDemo = ref(false)
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/modal.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Modals</strong>
diff --git a/src/views/notifications/Toasts.vue b/src/views/notifications/Toasts.vue
index 51300319..987c3823 100644
--- a/src/views/notifications/Toasts.vue
+++ b/src/views/notifications/Toasts.vue
@@ -12,6 +12,7 @@ const createToast = () => {
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/toast.html" />
       <CCard class="mb-4">
         <CCardHeader> <strong>Vue Toast</strong> <small>Basic</small> </CCardHeader>
         <CCardBody>