diff --git a/src/app/content/ui/icon.json b/src/app/content/ui/icon.json
index 718953ab..4479ac05 100644
--- a/src/app/content/ui/icon.json
+++ b/src/app/content/ui/icon.json
@@ -10,7 +10,6 @@
     "Subtle Variants": "import { Icon } from \"@/components/ui/icon\";\nimport { mdiInformationOutline } from \"@mdi/js\";\n\nexport default function SubtleVariantsDemo() {\n  return (\n    <div className=\"flex items-center justify-center gap-4\">\n      <Icon path={mdiInformationOutline} variant=\"subtle\" colorScheme=\"primary\" />\n      <Icon path={mdiInformationOutline} variant=\"subtle\" colorScheme=\"neutral\" />\n      <Icon path={mdiInformationOutline} variant=\"subtle\" colorScheme=\"success\" />\n      <Icon path={mdiInformationOutline} variant=\"subtle\" colorScheme=\"danger\" />\n      <Icon path={mdiInformationOutline} variant=\"subtle\" colorScheme=\"warning\" />\n      <Icon path={mdiInformationOutline} variant=\"subtle\" colorScheme=\"yellow\" />\n      <Icon path={mdiInformationOutline} variant=\"subtle\" colorScheme=\"teal\" />\n      <Icon path={mdiInformationOutline} variant=\"subtle\" colorScheme=\"cyan\" />\n      <Icon path={mdiInformationOutline} variant=\"subtle\" colorScheme=\"blue\" />\n      <Icon path={mdiInformationOutline} variant=\"subtle\" colorScheme=\"purple\" />\n      <Icon path={mdiInformationOutline} variant=\"subtle\" colorScheme=\"pink\" />\n    </div>\n  );\n}",
 
     "Filled Variants": "import { Icon } from \"@/components/ui/icon\";\nimport { mdiInformationOutline } from \"@mdi/js\";\n\nexport default function FilledVariantsDemo() {\n  return (\n    <div className=\"flex items-center justify-center gap-4\">\n      <Icon path={mdiInformationOutline} variant=\"filled\" colorScheme=\"primary\" />\n      <Icon path={mdiInformationOutline} variant=\"filled\" colorScheme=\"neutral\" />\n      <Icon path={mdiInformationOutline} variant=\"filled\" colorScheme=\"success\" />\n      <Icon path={mdiInformationOutline} variant=\"filled\" colorScheme=\"danger\" />\n      <Icon path={mdiInformationOutline} variant=\"filled\" colorScheme=\"warning\" />\n      <Icon path={mdiInformationOutline} variant=\"filled\" colorScheme=\"yellow\" />\n      <Icon path={mdiInformationOutline} variant=\"filled\" colorScheme=\"teal\" />\n      <Icon path={mdiInformationOutline} variant=\"filled\" colorScheme=\"cyan\" />\n      <Icon path={mdiInformationOutline} variant=\"filled\" colorScheme=\"blue\" />\n      <Icon path={mdiInformationOutline} variant=\"filled\" colorScheme=\"purple\" />\n      <Icon path={mdiInformationOutline} variant=\"filled\" colorScheme=\"pink\" />\n    </div>\n  );\n}",
-
-    "Sitecore Logos": "import { Icon } from \"@/components/ui/icon\";\nimport { iconContentHubOne, iconOrdercloud, iconPersonalize, iconXmCloud } from \"@/app/(registry)/graphics/icons/logo-icons\";\n\nexport default function SitecoreLogosDemo() {\n  return (\n    <div className=\"flex items-center justify-center gap-4\">\n      <Icon path={iconXmCloud} variant=\"default\" colorScheme=\"neutral\" />\n      <Icon path={iconContentHubOne} variant=\"subtle\" colorScheme=\"primary\" />\n      <Icon path={iconPersonalize} variant=\"subtle\" colorScheme=\"danger\" />\n      <Icon path={iconOrdercloud} variant=\"filled\" colorScheme=\"cyan\" />\n    </div>\n  );\n}"
+    "Sitecore Logos": "import { Icon } from \"@/components/ui/icon\";\n\nexport default function SitecoreLogosDemo() {\n  return (\n    <div className=\"flex items-center justify-center gap-4\">\n      <Icon path={\"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/mark-xm_cloud_content\"} variant=\"default\" colorScheme=\"neutral\" />\n      <Icon path={\"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/mark-content_hub_one\"} variant=\"subtle\" colorScheme=\"primary\" />\n      <Icon path={\"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/mark-personalize\"} variant=\"subtle\" colorScheme=\"danger\" />\n      <Icon path={\"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/mark-ordercloud\"} variant=\"filled\" colorScheme=\"cyan\" />\n    </div>\n  );\n}"
 }
 
diff --git a/src/app/content/ui/navigation-menu.json b/src/app/content/ui/navigation-menu.json
index 73594404..031484bf 100644
--- a/src/app/content/ui/navigation-menu.json
+++ b/src/app/content/ui/navigation-menu.json
@@ -1,4 +1,6 @@
 {
-    "Default": "import {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuContent,\n  NavigationMenuLink\n} from \"@/components/ui/navigation-menu\";\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n];\n\nexport default function DefaultDemo() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n              <ListItem\n              href=\"#\"\n              className=\"row-span-3 from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-6 no-underline outline-hidden select-none focus:shadow-md\"\n              >\n              <div className=\"mt-4 mb-2 text-lg font-medium\">Blok CN</div>\n              <p className=\"text-muted-foreground text-sm leading-tight\">\n                Beautifully designed components built with Tailwind CSS.\n              </p>\n            </ListItem>\n            <ListItem href=\"#\" title=\"Build better products faster\">\n              Blok is a Sitecore's product design system: the ui framework and style guide we use to build great apps. It's publicly available, so that anyone can easily build software in the Sitecore product design language.\n            </ListItem>\n            <ListItem href=\"#\" title=\"Installation\">\n              How to install dependencies and structure your app.\n            </ListItem>\n            <ListItem href=\"#\" title=\"Typography\">\n              Styles for headings, paragraphs, lists...etc\n            </ListItem>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n            {components.map((component) => (\n            <ListItem\n            key={component.title}\n            title={component.title}\n            href=\"#\"\n            >\n            {component.description}\n          </ListItem>\n          ))}\n        </ul>\n      </NavigationMenuContent>\n    </NavigationMenuItem>\n\n    <NavigationMenuItem>\n      <NavigationMenuLink\n      asChild\n      className={navigationMenuTriggerStyle()}\n      >\n      <Link href=\"#\">Documentation</Link>\n    </NavigationMenuLink>\n    </NavigationMenuItem>\n    </NavigationMenuList>\n    </NavigationMenu>\n  );\n}",
-    "Secondary": "import {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuTrigger,\n  NavigationMenuContent\n} from \"@/components/ui/navigation-menu\";\nimport { Icon } from \"@/lib/icon\";\nimport {\n  mdiHelpCircleOutline,\n  mdiCircleOutline,\n  mdiCheckCircleOutline\n} from \"@mdi/js\";\n\nexport default function SecondaryDemo() {\n  return (\n    <div className=\"pb-50\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n            asChild\n            className={navigationMenuTriggerStyle()}\n            >\n            <Link href=\"#\">Documentation</Link>\n          </NavigationMenuLink>\n        </NavigationMenuItem>\n\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>List</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[300px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Components</div>\n                    <div className=\"text-muted-foreground\">\n                      Browse all components in the library.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Documentation</div>\n                    <div className=\"text-muted-foreground\">\n                      Learn how to use the library.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Blog</div>\n                    <div className=\"text-muted-foreground\">\n                      Read our latest blog posts.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[200px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Components</Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Documentation</Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Blocks</Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[200px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <Icon path={mdiHelpCircleOutline} />\n                    Backlog\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <Icon path={mdiCircleOutline} />\n                    To Do\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <Icon path={mdiCheckCircleOutline} />\n                    Done\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n    </div>\n  );\n}"
-}
\ No newline at end of file
+    "Default": "import {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\";\nimport type React from \"react\";\n\nfunction Link({\n  href,\n  children,\n  className,\n  ...props\n}: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) {\n  return (\n    <a href={href} className={className} {...props}>\n      {children}\n    </a>\n  );\n}\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n];\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"text-sm leading-none font-medium\">{title}</div>\n          <div className=\"text-muted-foreground line-clamp-2 text-sm leading-snug\">\n            {children}\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  );\n}\n\nexport default function DefaultDemo() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n              <ListItem\n                href=\"#\"\n                className=\"row-span-3 from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-6 no-underline outline-hidden select-none focus:shadow-md\"\n              >\n                <div className=\"mt-4 mb-2 text-lg font-medium\">Blok CN</div>\n                <p className=\"text-muted-foreground text-sm leading-tight\">\n                  Beautifully designed components built with Tailwind CSS.\n                </p>\n              </ListItem>\n              <ListItem href=\"#\" title=\"Build better products faster\">\n                Blok is a Sitecore's product design system: the ui framework and style guide we use to build great apps. It's publicly available, so that anyone can easily build software in the Sitecore product design language.\n              </ListItem>\n              <ListItem href=\"#\" title=\"Installation\">\n                How to install dependencies and structure your app.\n              </ListItem>\n              <ListItem href=\"#\" title=\"Typography\">\n                Styles for headings, paragraphs, lists...etc\n              </ListItem>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n              {components.map((component) => (\n                <ListItem\n                  key={component.title}\n                  title={component.title}\n                  href=\"#\"\n                >\n                  {component.description}\n                </ListItem>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n\n        <NavigationMenuItem>\n          <NavigationMenuLink\n            asChild\n            className={navigationMenuTriggerStyle()}\n          >\n            <Link href=\"#\">Documentation</Link>\n          </NavigationMenuLink>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  );\n}",
+
+    "Secondary": "import {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\";\nimport {\n  mdiCheckCircleOutline,\n  mdiCircleOutline,\n  mdiHelpCircleOutline,\n} from \"@mdi/js\";\nimport { Icon } from \"@/lib/icon\";\nimport type React from \"react\";\n\nfunction Link({\n  href,\n  children,\n  className,\n  ...props\n}: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) {\n  return (\n    <a href={href} className={className} {...props}>\n      {children}\n    </a>\n  );\n}\n\nexport default function SecondaryDemo() {\n  return (\n    <NavigationMenu viewport={false}>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuLink\n            asChild\n            className={navigationMenuTriggerStyle()}\n          >\n            <Link href=\"#\">Documentation</Link>\n          </NavigationMenuLink>\n        </NavigationMenuItem>\n\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>List</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[300px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Components</div>\n                    <div className=\"text-muted-foreground\">\n                      Browse all components in the library.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Documentation</div>\n                    <div className=\"text-muted-foreground\">\n                      Learn how to use the library.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Blog</div>\n                    <div className=\"text-muted-foreground\">\n                      Read our latest blog posts.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[200px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Components</Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Documentation</Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Blocks</Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[200px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <Icon path={mdiHelpCircleOutline} />\n                    Backlog\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <Icon path={mdiCircleOutline} />\n                    To Do\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <Icon path={mdiCheckCircleOutline} />\n                    Done\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  );\n}"
+}
+
diff --git a/src/app/content/ui/scroll-area.json b/src/app/content/ui/scroll-area.json
index 30bb3cb0..505cbef7 100644
--- a/src/app/content/ui/scroll-area.json
+++ b/src/app/content/ui/scroll-area.json
@@ -1,5 +1,8 @@
 {
-    "Default": "import { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { Separator } from \"@/components/ui/separator\";\nimport * as React from \"react\";\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n);\n\nexport default function DefaultDemo() {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <ScrollArea className=\"h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n          <React.Fragment key={tag}>\n            <div className=\"text-sm\">{tag}</div>\n            <Separator className=\"my-2\" />\n          </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </div>\n  );\n}",
-    "Vertical": "import { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { Separator } from \"@/components/ui/separator\";\nimport * as React from \"react\";\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n);\n\nexport default function VerticalDemo() {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <ScrollArea className=\"h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n          <React.Fragment key={tag}>\n            <div className=\"text-sm\">{tag}</div>\n            <Separator className=\"my-2\" />\n          </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </div>\n  );\n}",
-    "Horizontal": "import { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\";\n\nexport default function HorizontalDemo() {\n  return (\n    <ScrollArea className=\"w-full max-w-96 rounded-md border p-4\">\n      <div className=\"flex gap-4\">\n        {works.map((artwork) => (\n        <figure key={artwork.artist} className=\"shrink-0\">\n          <div className=\"overflow-hidden rounded-md\">\n            <img\n            src={artwork.art}\n            alt={`Photo by ${artwork.artist}`}\n            className=\"aspect-3/4 w-[300px] h-[400px] object-cover\"\n            />\n          </div>\n        </figure>\n        ))}\n      </div>\n      <ScrollBar orientation=\"horizontal\" />\n    </ScrollArea>\n  );\n}"
-}
\ No newline at end of file
+    "Default": "import * as React from \"react\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { Separator } from \"@/components/ui/separator\";\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n);\n\nexport default function DefaultDemo() {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <ScrollArea className=\"h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </div>\n  );\n}",
+
+    "Vertical": "import * as React from \"react\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { Separator } from \"@/components/ui/separator\";\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n);\n\nexport default function VerticalDemo() {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <ScrollArea className=\"h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </div>\n  );\n}",
+
+    "Horizontal": "import * as React from \"react\";\nimport { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\";\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/235496330fe148edb446ee62d1d54d56?v=4a57ed46\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/6712f89819cc43f98ba707b516191919?v=b56e5265\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/0dff752591c943569243ed310d5237ca?v=cca386af\",\n  },\n] as const;\n\nexport default function HorizontalDemo() {\n  return (\n    <ScrollArea className=\"w-full max-w-96 rounded-md border p-4\">\n      <div className=\"flex gap-4\">\n        {works.map((artwork) => (\n          <figure key={artwork.artist} className=\"shrink-0\">\n            <div className=\"overflow-hidden rounded-md\">\n              <img\n                src={artwork.art}\n                alt={`Photo by ${artwork.artist}`}\n                className=\"aspect-[3/4] w-[300px] h-[400px] object-cover\"\n              />\n            </div>\n          </figure>\n        ))}\n      </div>\n      <ScrollBar orientation=\"horizontal\" />\n    </ScrollArea>\n  );\n}"
+}
+
diff --git a/src/app/demo/[name]/ui/icon.tsx b/src/app/demo/[name]/ui/icon.tsx
index 86ad39d4..eb6895eb 100644
--- a/src/app/demo/[name]/ui/icon.tsx
+++ b/src/app/demo/[name]/ui/icon.tsx
@@ -87,13 +87,13 @@ export const icon = {
             <Icon path={mdiInformationOutline} variant="filled" colorScheme="pink" />
         </div>
     ),
-    // "Sitecore Logos": (
-    //   <div className="flex items-center justify-center gap-4">
-    //     <Icon path={iconXmCloud} variant="default" colorScheme="neutral" />
-    //     <Icon path={iconContentHubOne} variant="subtle" colorScheme="primary" />
-    //     <Icon path={iconPersonalize} variant="subtle" colorScheme="danger" />
-    //     <Icon path={iconOrdercloud} variant="filled" colorScheme="cyan" />
-    //   </div>
-    // )
+    "Sitecore Logos": (
+      <div className="flex items-center justify-center gap-4">
+        <Icon path={"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/mark-xm_cloud_content"} variant="default" colorScheme="neutral" />
+        <Icon path={"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/mark-content_hub_one"} variant="subtle" colorScheme="primary" />
+        <Icon path={"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/mark-personalize"} variant="subtle" colorScheme="danger" />
+        <Icon path={"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/mark-ordercloud"} variant="filled" colorScheme="cyan" />
+      </div>
+    )
   },
 };
diff --git a/src/components/ui/icon.tsx b/src/components/ui/icon.tsx
index 0a92b1e4..cc598449 100644
--- a/src/components/ui/icon.tsx
+++ b/src/components/ui/icon.tsx
@@ -1,7 +1,8 @@
+'use client'
+
 import { cn } from "@/lib/utils";
-import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { SVGProps } from "react";
+import { SVGProps, useEffect, useState } from "react";
 
 const iconVariants = cva("inline-flex items-center justify-center", {
     variants: {
@@ -151,6 +152,33 @@ const iconSize = {
     xxl: "size-11",
 } as const;
 
+function isUrl(value: string) {
+    return (
+        value.startsWith("http://") ||
+        value.startsWith("https://") ||
+        value.startsWith("data:") ||
+        value.startsWith("blob:")
+    );
+}
+
+function extractInlineSvg(svgText: string) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgText, "image/svg+xml");
+  
+    const svg = doc.querySelector("svg");
+    if (!svg) return null;
+  
+    // Normalize colors so `currentColor` works
+    svg.querySelectorAll("[fill]").forEach((el) => {
+      el.setAttribute("fill", "currentColor");
+    });
+  
+    return {
+      inner: svg.innerHTML,
+      viewBox: svg.getAttribute("viewBox") ?? "0 0 24 24",
+    };
+}
+
 type IconsProps = SVGProps<SVGSVGElement> & {
     path: string,
     title?: string,
@@ -169,22 +197,66 @@ function Icon({
     fill = "currentColor",
     ...props
 }: IconsProps) {
+    const [svgData, setSvgData] = useState<{
+        inner: string;
+        viewBox: string;
+    } | null>(null);
+    
+    const url = isUrl(path);
+
+    useEffect(() => {
+        if (!url) return;
+    
+        let cancelled = false;
+    
+        fetch(path)
+        .then(async (res) => {
+            const text = await res.text();
+            const extracted = extractInlineSvg(text);
+
+            if (!cancelled) {
+            setSvgData(extracted);
+            }
+        })
+        .catch(() => {
+            if (!cancelled) setSvgData(null);
+        });
+    
+        return () => {
+            cancelled = true;
+        };
+    }, [path, url]);
+
     return (
         <span
             className={cn(
                 iconVariants({ variant, colorScheme }),
+                "inline-flex items-center justify-center",
                 className
             )}
         >
-            <svg
-                viewBox="0 0 24 24"
-                aria-label={title}
-                className={iconSize[size]}
-                fill={fill}
-                {...props}
-            >
-                <path d={path} />
-            </svg>
+            {!url && (
+                <svg
+                    viewBox="0 0 24 24"
+                    aria-label={title}
+                    className={iconSize[size]}
+                    fill={fill}
+                    {...props}
+                >
+                    <path d={path} />
+                </svg>
+            )}
+
+            {url && svgData && (
+                <svg
+                    viewBox={svgData.viewBox}
+                    aria-label={title}
+                    className={iconSize[size]}
+                    fill={fill}
+                    dangerouslySetInnerHTML={{ __html: svgData.inner }}
+                    {...props}
+                />
+            )}
         </span>
     )
 }
diff --git a/src/lib/right-sidebar-metadata.ts b/src/lib/right-sidebar-metadata.ts
index 3e59c71a..83d18004 100644
--- a/src/lib/right-sidebar-metadata.ts
+++ b/src/lib/right-sidebar-metadata.ts
@@ -432,7 +432,7 @@ export const rightSidebarMetadata: Record<string, RightSidebarMetadata> = {
           { id: "color-schemes", title: "Color Schemes" },
           { id: "subtle-variants", title: "Subtle Variants" },
           { id: "filled-variants", title: "Filled Variants" },
-          // { id: "sitecore-logos", title: "Sitecore Logos" },
+          { id: "sitecore-logos", title: "Sitecore Logos" },
         ],
       },
     ],