diff --git a/src/_includes/sidebar/destinations-menu-mobile.html b/src/_includes/sidebar/destination-menu-mobile.html
similarity index 100%
rename from src/_includes/sidebar/destinations-menu-mobile.html
rename to src/_includes/sidebar/destination-menu-mobile.html
diff --git a/src/_includes/sidebar/destinations-menu.html b/src/_includes/sidebar/destination-menu.html
similarity index 100%
rename from src/_includes/sidebar/destinations-menu.html
rename to src/_includes/sidebar/destination-menu.html
diff --git a/src/_includes/sidebar/source-menu-mobile.html b/src/_includes/sidebar/source-menu-mobile.html
new file mode 100644
index 0000000000..8b98672fba
--- /dev/null
+++ b/src/_includes/sidebar/source-menu-mobile.html
@@ -0,0 +1,31 @@
+{% assign destination_categories = site.data.catalogV2.source_categories.items | sort: "name" %}
+
+<div class="destination-menu-mobile" data-anchors-indicator data-sections=".destinations-catalog__section" data-active-class="destination-menu-mobile__item--active">
+  <div class="destination-menu-mobile__select" data-ref="dropdown-menu[head]" data-active-class="destination-menu-mobile__select--active">
+    <div class="destination-menu-mobile__select-inner">
+      <span class="flex flex--middle" data-ref="dropdown-menu[head-inner]">
+        Choose category
+      </span>
+
+      <svg viewBox="0 0 8 5" xmlns="http://www.w3.org/2000/svg" class="destination-menu-mobile__select-arrow">
+        <path d="M1 1l3 3 3-3" stroke="#A5B0BA" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </div>
+  </div>
+
+  <ul class="destination-menu-mobile__list list list--unstyle" data-ref="dropdown-menu[body]" data-active-class="destination-menu-mobile__list--active">
+    {% for category in destination_categories %}
+      {% assign category_name_size = category.display_name | size %}
+      {% if category_name_size != 0 %}
+        {% assign category_icon = category.display_name | slugify %}
+        <li class="destination-menu-mobile__item">
+          <a class="destination-menu-mobile__link" href="#{{ category.display_name | slugify }}" title="{{ category.display_name }}" data-ref="dropdown-menu[link]" >
+            <span class="destination-menu-mobile__icon">
+            </span>
+            {{ category.display_name }}
+          </a>
+        </li>
+      {% endif %}
+    {% endfor %}
+  </ul>
+</div>
diff --git a/src/_includes/sidebar/source-menu.html b/src/_includes/sidebar/source-menu.html
new file mode 100644
index 0000000000..d68c474817
--- /dev/null
+++ b/src/_includes/sidebar/source-menu.html
@@ -0,0 +1,17 @@
+{% assign destination_categories = site.data.catalogV2.source_categories.items | sort: "name" %}
+
+<div class="destination-menu" data-anchors-indicator data-sections=".destinations-catalog__section" data-active-class="destination-menu__link--active">
+  <ul class="destination-menu__list list list--unstyle">
+    {% for category in destination_categories %}
+      {% assign category_name_size = category.display_name | size %}
+      {% if category_name_size != 0 %}
+        {% assign category_icon = category.display_name | slugify %}
+        <li class="destination-menu__item">
+          <a class="destination-menu__link flex" href="#{{ category.display_name | slugify }}" title="{{ category.display_name }}">
+            {{ category.display_name }}
+          </a>
+        </li>
+      {% endif %}
+    {% endfor %}
+  </ul>
+</div>
diff --git a/src/_layouts/destinations.html b/src/_layouts/catalog.html
similarity index 96%
rename from src/_layouts/destinations.html
rename to src/_layouts/catalog.html
index d25ab49f78..66569b53ee 100644
--- a/src/_layouts/destinations.html
+++ b/src/_layouts/catalog.html
@@ -29,7 +29,7 @@ <h1 id="{{ page.title | downcase }}" class="destinations__heading page__heading"
             </h1>
           {%- endif -%}
 
-          {% include sidebar/destinations-menu-mobile.html %}
+          {% include sidebar/{{ page.integration_type }}-menu-mobile.html %}
 
           <div class="destinations__body" data-headings-anchors>
             <div class="destinations-catalog">
@@ -84,7 +84,7 @@ <h5>{{ destination.display_name }}</h5>
       {% include navbar/nav.html %}
 
       <div class="sidebar sidebar--sticky">
-        {% include sidebar/destinations-menu.html %}
+        {% include sidebar/{{ page.integration_type }}-menu.html %}
         {% include sidebar/feedback.html %}
       </div>
     </div>
diff --git a/src/connections/destinations/catalog/index.md b/src/connections/destinations/catalog/index.md
index e38744e74c..959631b682 100644
--- a/src/connections/destinations/catalog/index.md
+++ b/src/connections/destinations/catalog/index.md
@@ -1,5 +1,5 @@
 ---
 title: Destination catalog
 hide_toc: true
-layout: destinations
+layout: catalog
 ---
diff --git a/src/connections/sources/catalog/index.md b/src/connections/sources/catalog/index.md
index 4dfe29f64d..d128e5f631 100644
--- a/src/connections/sources/catalog/index.md
+++ b/src/connections/sources/catalog/index.md
@@ -4,76 +4,36 @@ hide_toc: true
 landing: true
 icon: symbols/connections.svg
 excerpt: Detailed information about each destination. Learn how our API methods are implemented for that destination.
+layout: catalog
 ---
 
 <div class="destinations-catalog">
-
-  {% assign items = site.data.catalog.sources.sources %}
-  {% assign categories_array = "" | split: ',' %}
-
-  {% for item in items %}
-    {% assign main_category = item.categories[0] %}
-    {% unless categories_array contains main_category %}
-      {% if main_category and main_category != "" %}
-        {% assign categories_array = categories_array | push: main_category %}
-      {% endif %}
-    {% endunless %}
-  {% endfor %}
-  {% for item in items %}
-    {% assign main_category = item.categories[0] %}
-    {% unless categories_array contains main_category %}
-      {% unless main_category and main_category != "" %}
-        {% assign categories_array = categories_array | push: 'Uncategorized' %}
-      {% endunless %}
-    {% endunless %}
-  {% endfor %}
-
-  {% for category in categories_array %}
-    <div class="destinations-catalog__section" id="{{ category.name | slugify }}">
-      <h2 class="destinations-catalog__title">
-        {{ category }}
+  {% assign categories = site.data.catalogV2.source_categories.items %}
+  {% for category in categories %}
+    <div class="destinations-catalog__section markdown" id="{{ category.display_name | slugify }}">
+      <h2 class="destinations-catalog__title" id="{{ category.display_name | slugify }}">
+        {{ category.display_name }}
       </h2>
       <div class="flex flex--wrap waffle waffle--large">
-        {% for item in items %}
-          {% if item.categories[0] and item.categories[0] != "" %}
-            {% if item.categories[0] == category %}
-              <div class="flex__column flex__column--6 flex__column--4@medium">
-                <a class="thumbnail-integration" href="{{ doc_path | relative_url }}">
-                  <div class="thumbnail-integration__content flex flex--stack flex--center flex--middle">
-                    <div class="thumbnail-integration__logo">
-                      {% if item.logos.mark != '' %}
-                        <img class="image" alt="{{item.display_name}}" src="{{item.logos.mark}}" />
-                      {% else %}
-                        <img class="image" alt="{{item.display_name}}" src="{{item.logos.logo}}" />
-                      {% endif %}
-                    </div>
-                    <h5>{{ item.display_name }}</h5>
-                  </div>
-                  {% if item.status == 'PUBLIC_BETA' %}
-                    <p class="thumbnail-integration__label">Beta</p>
+        {% assign integrations = site.data.catalogV2.sources.items | where: "categories", category.display_name %}
+        {% for integration in integrations %}
+          <div class="flex__column flex__column--6 flex__column--4@medium">
+            <a class="thumbnail-integration" href="{{ site.baseurl }}/{{ integration.url }}">
+              <div class="thumbnail-integration__content flex flex--stack flex--center flex--middle">
+                <div class="thumbnail-integration__logo">
+                  {% if integration.logos.mark != '' %}
+                    <img class="image" alt="{{integration.display_name}}" src="{{integration.logo.url}}" />
+                  {% else %}
+                    <img class="image" alt="{{integration.display_name}}" src="{{integration.logo.url}}" />
                   {% endif %}
-                </a>
-              </div>
-            {% endif %}
-          {% else %}
-            <div class="flex__column flex__column--6 flex__column--4@medium">
-              <a class="thumbnail-integration" href="{{ doc_path | relative_url }}">
-                <div class="thumbnail-integration__content flex flex--stack flex--center flex--middle">
-                  <div class="thumbnail-integration__logo">
-                    {% if item.logos.mark != '' %}
-                      <img class="image" alt="{{item.display_name}}" src="{{item.logos.mark}}" />
-                    {% else %}
-                      <img class="image" alt="{{item.display_name}}" src="{{item.logos.logo}}" />
-                    {% endif %}
-                  </div>
-                  <h5>{{ item.display_name }}</h5>
                 </div>
-                {% if item.status == 'PUBLIC_BETA' %}
-                  <p class="thumbnail-integration__label">Beta</p>
-                {% endif %}
-              </a>
-            </div>
-          {% endif %}
+                <h5>{{ integration.display_name }}</h5>
+              </div>
+              {% if integration.status == 'PUBLIC_BETA' %}
+                <p class="thumbnail-integration__label">Beta</p>
+              {% endif %}
+            </a>
+          </div>
         {% endfor %}
       </div>
     </div>