diff --git a/src/_nav.js b/src/_nav.js
index db78c49bd..9f8ca150b 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -7,6 +7,7 @@ import {
   cilCursor,
   cilDescription,
   cilDrop,
+  cilExternalLink,
   cilNotes,
   cilPencil,
   cilPuzzle,
@@ -62,6 +63,20 @@ const _nav = [
         name: 'Breadcrumb',
         to: '/base/breadcrumbs',
       },
+      {
+        component: CNavItem,
+        name: (
+          <React.Fragment>
+            {'Calendar'}
+            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
+          </React.Fragment>
+        ),
+        href: 'https://coreui.io/react/docs/components/calendar/',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: CNavItem,
         name: 'Cards',
@@ -107,6 +122,29 @@ const _nav = [
         name: 'Progress',
         to: '/base/progress',
       },
+      {
+        component: CNavItem,
+        name: 'Smart Pagination',
+        href: 'https://coreui.io/react/docs/components/smart-pagination/',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
+      {
+        component: CNavItem,
+        name: (
+          <React.Fragment>
+            {'Smart Table'}
+            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
+          </React.Fragment>
+        ),
+        href: 'https://coreui.io/react/docs/components/smart-table/',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: CNavItem,
         name: 'Spinners',
@@ -127,6 +165,20 @@ const _nav = [
         name: 'Tooltips',
         to: '/base/tooltips',
       },
+      {
+        component: CNavItem,
+        name: (
+          <React.Fragment>
+            {'Virtual Scroller'}
+            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
+          </React.Fragment>
+        ),
+        href: 'https://coreui.io/react/docs/components/virtual-scroller/',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
     ],
   },
   {
@@ -150,6 +202,20 @@ const _nav = [
         name: 'Dropdowns',
         to: '/buttons/dropdowns',
       },
+      {
+        component: CNavItem,
+        name: (
+          <React.Fragment>
+            {'Loading Button'}
+            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
+          </React.Fragment>
+        ),
+        href: 'https://coreui.io/react/docs/components/loading-button/',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
     ],
   },
   {
@@ -167,6 +233,20 @@ const _nav = [
         name: 'Select',
         to: '/forms/select',
       },
+      {
+        component: CNavItem,
+        name: (
+          <React.Fragment>
+            {'Multi Select'}
+            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
+          </React.Fragment>
+        ),
+        href: 'https://coreui.io/react/docs/forms/multi-select/',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: CNavItem,
         name: 'Checks & Radios',
@@ -177,6 +257,34 @@ const _nav = [
         name: 'Range',
         to: '/forms/range',
       },
+      {
+        component: CNavItem,
+        name: (
+          <React.Fragment>
+            {'Range Slider'}
+            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
+          </React.Fragment>
+        ),
+        href: 'https://coreui.io/react/docs/forms/range-slider/',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
+      {
+        component: CNavItem,
+        name: (
+          <React.Fragment>
+            {'Rating'}
+            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
+          </React.Fragment>
+        ),
+        href: 'https://coreui.io/react/docs/forms/rating/',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: CNavItem,
         name: 'Input Group',
@@ -187,6 +295,43 @@ const _nav = [
         name: 'Floating Labels',
         to: '/forms/floating-labels',
       },
+      {
+        component: CNavItem,
+        name: (
+          <React.Fragment>
+            {'Date Picker'}
+            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
+          </React.Fragment>
+        ),
+        href: 'https://coreui.io/react/docs/forms/date-picker/',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
+      {
+        component: CNavItem,
+        name: 'Date Range Picker',
+        href: 'https://coreui.io/react/docs/forms/date-range-picker/',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
+      {
+        component: CNavItem,
+        name: (
+          <React.Fragment>
+            {'Time Picker'}
+            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
+          </React.Fragment>
+        ),
+        href: 'https://coreui.io/react/docs/forms/time-picker/',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: CNavItem,
         name: 'Layout',
@@ -214,10 +359,6 @@ const _nav = [
         component: CNavItem,
         name: 'CoreUI Free',
         to: '/icons/coreui-icons',
-        badge: {
-          color: 'success',
-          text: 'NEW',
-        },
       },
       {
         component: CNavItem,
diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
index 6b73cec4e..8ee3beee9 100644
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -20,7 +20,7 @@ export const AppSidebarNav = ({ items }) => {
             )}
         {name && name}
         {badge && (
-          <CBadge color={badge.color} className="ms-auto">
+          <CBadge color={badge.color} className="ms-auto" size="sm">
             {badge.text}
           </CBadge>
         )}
@@ -34,7 +34,11 @@ export const AppSidebarNav = ({ items }) => {
     return (
       <Component as="div" key={index}>
         {rest.to || rest.href ? (
-          <CNavLink {...(rest.to && { as: NavLink })} {...rest}>
+          <CNavLink
+            {...(rest.to && { as: NavLink })}
+            {...(rest.href && { target: '_blank', rel: 'noopener noreferrer' })}
+            {...rest}
+          >
             {navLink(name, icon, badge, indent)}
           </CNavLink>
         ) : (