diff --git a/src/components/DocsCallout.js b/src/components/DocsCallout.js
index 63146a5..0af7ccd 100644
--- a/src/components/DocsCallout.js
+++ b/src/components/DocsCallout.js
@@ -5,7 +5,7 @@ import { CCallout, CLink } from '@coreui/react'
 import packageJson from '../../package.json'
 
 const DocsCallout = (props) => {
-  const { href, name } = props
+  const { content, href, name } = props
 
   const plural = name.slice(-1) === 's' ? true : false
 
@@ -13,9 +13,13 @@ const DocsCallout = (props) => {
 
   return (
     <CCallout color="info" className="bg-white">
-      A React {name} component {plural ? 'have' : 'has'} been created as a native React.js version
-      of Bootstrap {name}. {name} {plural ? 'are' : 'is'} delivered with some new features,
-      variants, and unique design that matches CoreUI Design System requirements.
+      {content
+        ? content
+        : `A React ${name} component ${
+            plural ? 'have' : 'has'
+          } been created as a native React.js version
+      of Bootstrap ${name}. ${name} ${plural ? 'are' : 'is'} delivered with some new features,
+      variants, and unique design that matches CoreUI Design System requirements.`}
       <br />
       <br />
       For more information please visit our official{' '}
@@ -28,6 +32,7 @@ const DocsCallout = (props) => {
 }
 
 DocsCallout.propTypes = {
+  content: PropTypes.string,
   href: PropTypes.string,
   name: PropTypes.string,
 }
diff --git a/src/views/charts/Charts.js b/src/views/charts/Charts.js
index 76b082f..a9e13f1 100644
--- a/src/views/charts/Charts.js
+++ b/src/views/charts/Charts.js
@@ -8,19 +8,23 @@ import {
   CChartPolarArea,
   CChartRadar,
 } from '@coreui/react-chartjs'
-import { DocsLink } from 'src/components'
+import { DocsCallout } from 'src/components'
 
 const Charts = () => {
   const random = () => Math.round(Math.random() * 100)
 
   return (
     <CRow>
+      <CCol xs={12}>
+        <DocsCallout
+          name="Chart"
+          href="components/chart"
+          content="React wrapper component for Chart.js 3.0, the most popular charting library."
+        />
+      </CCol>
       <CCol xs={6}>
         <CCard className="mb-4">
-          <CCardHeader>
-            Bar Chart
-            <DocsLink href="http://www.chartjs.org" />
-          </CCardHeader>
+          <CCardHeader>Bar Chart</CCardHeader>
           <CCardBody>
             <CChartBar
               data={{
diff --git a/src/views/icons/brands/Brands.js b/src/views/icons/brands/Brands.js
index dbfba92..d44e81d 100644
--- a/src/views/icons/brands/Brands.js
+++ b/src/views/icons/brands/Brands.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
 import { brandSet } from '@coreui/icons'
-import { DocsLink } from 'src/components'
+import { DocsCallout } from 'src/components'
 
 const toKebabCase = (str) => {
   return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
@@ -19,15 +19,19 @@ export const getIconsView = (iconset) => {
 
 const CoreUIIcons = () => {
   return (
-    <CCard className="mb-4">
-      <CCardHeader>
-        Brand Icons
-        <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
-      </CCardHeader>
-      <CCardBody>
-        <CRow className="text-center">{getIconsView(brandSet)}</CRow>
-      </CCardBody>
-    </CCard>
+    <>
+      <DocsCallout
+        name="CoreUI Brand Icons"
+        href="components/chart"
+        content="CoreUI Brand Icons. 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."
+      />
+      <CCard className="mb-4">
+        <CCardHeader>Brand Icons</CCardHeader>
+        <CCardBody>
+          <CRow className="text-center">{getIconsView(brandSet)}</CRow>
+        </CCardBody>
+      </CCard>
+    </>
   )
 }
 
diff --git a/src/views/icons/coreui-icons/CoreUIIcons.js b/src/views/icons/coreui-icons/CoreUIIcons.js
index cb66a3a..d0a5969 100644
--- a/src/views/icons/coreui-icons/CoreUIIcons.js
+++ b/src/views/icons/coreui-icons/CoreUIIcons.js
@@ -2,19 +2,23 @@ import React from 'react'
 import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
 import { freeSet } from '@coreui/icons'
 import { getIconsView } from '../brands/Brands.js'
-import { DocsLink } from 'src/components'
+import { DocsCallout } from 'src/components'
 
 const CoreUIIcons = () => {
   return (
-    <CCard className="mb-4">
-      <CCardHeader>
-        Free Icons / as CIcon{' '}
-        <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
-      </CCardHeader>
-      <CCardBody>
-        <CRow className="text-center">{getIconsView(freeSet)}</CRow>
-      </CCardBody>
-    </CCard>
+    <>
+      <DocsCallout
+        name="CoreUI Icons"
+        href="components/chart"
+        content="CoreUI Icons. 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."
+      />
+      <CCard className="mb-4">
+        <CCardHeader>Free Icons</CCardHeader>
+        <CCardBody>
+          <CRow className="text-center">{getIconsView(freeSet)}</CRow>
+        </CCardBody>
+      </CCard>
+    </>
   )
 }
 
diff --git a/src/views/icons/flags/Flags.js b/src/views/icons/flags/Flags.js
index d86495a..a1179df 100644
--- a/src/views/icons/flags/Flags.js
+++ b/src/views/icons/flags/Flags.js
@@ -2,19 +2,23 @@ import React from 'react'
 import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
 import { getIconsView } from '../brands/Brands.js'
 import { flagSet } from '@coreui/icons'
-import { DocsLink } from 'src/components'
+import { DocsCallout } from 'src/components'
 
 const CoreUIIcons = () => {
   return (
-    <CCard className="mb-4">
-      <CCardHeader>
-        Flag Icons
-        <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
-      </CCardHeader>
-      <CCardBody>
-        <CRow className="text-center">{getIconsView(flagSet)}</CRow>
-      </CCardBody>
-    </CCard>
+    <>
+      <DocsCallout
+        name="CoreUI Flag Icons"
+        href="components/chart"
+        content="CoreUI Flag Icons. 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."
+      />
+      <CCard className="mb-4">
+        <CCardHeader>Flag Icons</CCardHeader>
+        <CCardBody>
+          <CRow className="text-center">{getIconsView(flagSet)}</CRow>
+        </CCardBody>
+      </CCard>
+    </>
   )
 }