diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
index d3e8ccea8e5..ae4d16cf08a 100644
--- a/.github/workflows/gh-pages.yml
+++ b/.github/workflows/gh-pages.yml
@@ -72,6 +72,7 @@ jobs:
           python openbb_platform/dev_install.py -e all
           pip uninstall nbmake -y
           python website/generate_platform_v4_markdown.py
+          python website/generate_widgets_library.py
 
       - name: Setup Node
         uses: actions/setup-node@v3
diff --git a/website/generate_widgets_library.py b/website/generate_widgets_library.py
new file mode 100644
index 00000000000..7fb5851d617
--- /dev/null
+++ b/website/generate_widgets_library.py
@@ -0,0 +1,116 @@
+from pathlib import Path
+
+import requests
+
+
+def main() -> bool:
+    widgets_json_url = "https://raw.githubusercontent.com/OpenBB-finance/widgets-library/main/widgets.json"
+
+    response = requests.get(widgets_json_url, timeout=10)
+    widgets_data = response.json()
+
+    # Process the data into the desired format
+    all_widgets = {}
+    for widget_id, widget_info in widgets_data.items():
+        if widget_info.get("disabled", False):
+            continue
+
+        category = widget_info.get("category")
+        if category:
+            if category not in all_widgets:
+                all_widgets[category] = []
+
+            all_widgets[category].append(
+                {
+                    "name": widget_info.get("name"),
+                    "description": widget_info.get("description"),
+                    "source": widget_info.get("source"),
+                    "widgetId": widget_info.get("widgetId"),
+                }
+            )
+
+    # Create the category index file
+    text = """# Widgets Library
+
+import NewReferenceCard from "@site/src/components/General/NewReferenceCard";
+
+<ul className="grid grid-cols-1 gap-4 -ml-6">
+"""
+    for category, widgets in all_widgets.items():
+        text += f"""
+<NewReferenceCard
+    title="{category}"
+    description="{', '.join([widget['name'] for widget in widgets])}"
+    url="/pro/widgets-library/{category}"
+/>"""
+    text += "\n</ul>"
+
+    website_path = Path(__file__).parent.absolute()
+    base_path = website_path / "content" / "pro" / "widgets-library"
+
+    index_path = base_path / "index.mdx"
+    with index_path.open("w") as index_file:
+        index_file.write(f"{text}\n")
+
+    for category, widgets in all_widgets.items():
+        category_path = base_path / category
+        category_path.mkdir(parents=True, exist_ok=True)
+
+        # Create the category index file
+        text = f"""# {category}
+
+import NewReferenceCard from "@site/src/components/General/NewReferenceCard";
+
+<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 -ml-6">
+"""
+        for widget in widgets:
+            text += f"""
+<NewReferenceCard
+    title="{widget['name']}"
+    description="{widget['description']}"
+    url="/pro/widgets-library/{category}/{widget['widgetId']}"
+    chevron={{false}}
+/>"""
+        text += "\n</ul>"
+
+        index_path = category_path / "index.mdx"
+        with index_path.open("w") as index_file:
+            index_file.write(f"{text}\n")
+
+        # Create each individual widget file
+        for widget in widgets:
+            widget_path = category_path / f"{widget['widgetId']}.md"
+
+            text = f"""---
+title: {widget['name']}
+description: {widget['description']}
+keywords:
+- OpenBB
+- Terminal Pro
+- Investment Research
+- Widgets
+- {widget['name']}
+- {category}
+---
+
+import HeadTitle from '@site/src/components/General/HeadTitle.tsx';
+
+<HeadTitle title="{widget['name']} - {category} | OpenBB Terminal Pro Docs" />
+
+<img
+    src="https://raw.githubusercontent.com/OpenBB-finance/widgets-library/main/{category}/{widget['widgetId']}.png"
+    alt="OpenBB Terminal Pro Widgets Library"
+/>
+
+{widget['description']}.
+
+{'**Source:** ' + ','.join(widget['source']) if widget['source'] else ''}
+"""
+            with widget_path.open("w") as widget_file:
+                widget_file.write(f"{text}\n")
+
+    return True
+
+
+if __name__ == "__main__":
+    main()
diff --git a/website/src/components/General/NewReferenceCard.tsx b/website/src/components/General/NewReferenceCard.tsx
index 7e24f68d8fc..f97b6de18d9 100644
--- a/website/src/components/General/NewReferenceCard.tsx
+++ b/website/src/components/General/NewReferenceCard.tsx
@@ -10,11 +10,13 @@ export default function NewReferenceCard({
   url,
   description,
   command,
+  chevron = true,
 }: {
   title: string;
   url: string;
   description: string;
   command: string;
+  chevron?: boolean;
 }) {
   // TODO: Waiting for mockup of how to display the command vs menu item
   const something = command ? "" : "";
@@ -25,11 +27,12 @@ export default function NewReferenceCard({
       className={clsx(
         "rounded border-2 hover:!text-black dark:hover:!text-white !no-underline p-6 cursor-pointer relative overflow-hidden hover:-translate-y-2 transform transition-all duration-300 ease-in-out font-bold shadow-md",
         {
-          "hover:bg-[#669DCB] border-[#669DCB] dark:hover:bg-[#004A87] dark:border-[#004A87]": cleanedPath.startsWith("/terminal"),
+          "hover:bg-[#669DCB] border-[#669DCB] dark:hover:bg-[#004A87] dark:border-[#004A87]": cleanedPath.startsWith("/terminal") || cleanedPath.startsWith("/pro"),
           "hover:bg-[#b186bb] border-[#b186bb] dark:hover:bg-[#3a204f] dark:border-[#3a204f]": cleanedPath.startsWith("/bot"),
           "hover:bg-[#F5B166] border-[#F5B166] dark:hover:bg-[#511d11] dark:border-[#511d11]": cleanedPath.startsWith("/sdk") || cleanedPath.startsWith("/platform"),
           header_docs:
             !cleanedPath.startsWith("/terminal") &&
+            !cleanedPath.startsWith("/pro") &&
             !cleanedPath.startsWith("/sdk") &&
             !cleanedPath.startsWith("/platform") &&
             !cleanedPath.startsWith("/bot"),
@@ -43,7 +46,7 @@ export default function NewReferenceCard({
           {title}
           {something}
         </p>
-        <ChevronRightIcon className="ml-auto mr-4" />
+        {chevron && <ChevronRightIcon className="ml-auto mr-4" />}
       </div>
       {description ? (
         <p className="text-grey-900 dark:text-grey-200 text-xs font-medium mt-2 mb-0">{description}</p>