diff --git a/site/components/NavItem.tsx b/site/components/NavItem.tsx
index 0a262e3a..aaa420a7 100644
--- a/site/components/NavItem.tsx
+++ b/site/components/NavItem.tsx
@@ -29,7 +29,7 @@ export default function NavItem({ item }) {
             onMouseLeave={closeDropdown}
             target={item.target || '_self'}
             onClick={() => setshowDropdown(!showDropdown)}
-            className="text-slate-600 dark:text-slate-400 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-500"
+            className={`${item?.style ? item.style : "text-slate-600 dark:text-slate-400"} inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-500`}
           >
             {item.name}
           </Link>
diff --git a/site/content/config.js b/site/content/config.js
index c0ce47d3..9ea3cd7e 100644
--- a/site/content/config.js
+++ b/site/content/config.js
@@ -31,6 +31,12 @@ const config = {
       href: 'https://storybook.portaljs.org',
       target: '_blank',
     },
+    {
+      name: 'Cloud ☁️',
+      href: 'https://portaljs.com/',
+      target: '_blank',
+      style: 'text-blue-600 dark:text-blue-400'
+    },
     // { name: "DL Demo", href: "/data-literate/demo" },
     // { name: "Excel Viewer", href: "/excel-viewer" },
   ],