diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 01cfb100c..1e4289de2 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -18,6 +18,7 @@ jobs:
     - name: Setup Environment
       run: |
         npm install
+    - run: git config --global url."https://${{ GITHUB_TOKEN }}@github.com/".insteadOf ssh://git@github.com/
     - name: Generate meta and build
       run: |
         npm run meta
diff --git a/components/roadmap/content-drawer.tsx b/components/roadmap/content-drawer.tsx
index 2ae6df29c..f8483c19e 100644
--- a/components/roadmap/content-drawer.tsx
+++ b/components/roadmap/content-drawer.tsx
@@ -3,7 +3,7 @@ import { RemoveScroll } from 'react-remove-scroll';
 import { RoadmapType } from '../../lib/roadmap';
 import RoadmapGroup from '../../pages/[roadmap]/[group]';
 import { CheckIcon, CloseIcon, RepeatIcon } from '@chakra-ui/icons';
-import { queryGroupElementsById } from '../../lib/renderer/utils';
+import { queryGroupElementsById } from '../../lib/renderer';
 
 type ContentDrawerProps = {
   roadmap: RoadmapType;
diff --git a/lib/renderer.ts b/lib/renderer.ts
new file mode 100644
index 000000000..9c4c069f6
--- /dev/null
+++ b/lib/renderer.ts
@@ -0,0 +1,21 @@
+export function removeSortingInfo(groupId: string) {
+  return (groupId || '').replace(/^\d+-/, '');
+}
+
+export function queryGroupElementsById(groupId: string) {
+  const elements = document.querySelectorAll(
+    `[data-group-id$="-${groupId}"]`
+  ) as any;
+  const matchingElements: HTMLElement[] = [];
+
+  elements.forEach((element: HTMLElement) => {
+    const foundGroupId = element?.dataset?.groupId || '';
+    const validGroupRegex = new RegExp(`^\\d+-${groupId}$`);
+
+    if (validGroupRegex.test(foundGroupId)) {
+      matchingElements.push(element);
+    }
+  });
+
+  return matchingElements;
+}
diff --git a/package-lock.json b/package-lock.json
index 45e12c396..5b826d470 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "react": "17.0.2",
         "react-dom": "17.0.2",
         "react-remove-scroll": "^2.4.3",
+        "roadmap-renderer": "github:kamranahmedse/roadmap-renderer",
         "styled-components": "^5.3.3",
         "use-http": "^1.0.26"
       },
@@ -11552,6 +11553,11 @@
         "inherits": "^2.0.1"
       }
     },
+    "node_modules/roadmap-renderer": {
+      "version": "1.0.0",
+      "resolved": "git+ssh://git@github.com/kamranahmedse/roadmap-renderer.git#957c75fa7124bc38ea019a57061596684259839a",
+      "license": "MIT"
+    },
     "node_modules/run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -22490,6 +22496,10 @@
         "inherits": "^2.0.1"
       }
     },
+    "roadmap-renderer": {
+      "version": "git+ssh://git@github.com/kamranahmedse/roadmap-renderer.git#957c75fa7124bc38ea019a57061596684259839a",
+      "from": "roadmap-renderer@git+ssh://git@github.com/kamranahmedse/roadmap-renderer.git"
+    },
     "run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
diff --git a/package.json b/package.json
index 8e593f945..931c9f442 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-remove-scroll": "^2.4.3",
+    "roadmap-renderer": "github:kamranahmedse/roadmap-renderer",
     "styled-components": "^5.3.3",
     "use-http": "^1.0.26"
   },
diff --git a/pages/[roadmap]/interactive.tsx b/pages/[roadmap]/interactive.tsx
index 951e028ac..b6a7c10e7 100644
--- a/pages/[roadmap]/interactive.tsx
+++ b/pages/[roadmap]/interactive.tsx
@@ -1,17 +1,17 @@
 import { useFetch } from 'use-http';
 import { useEffect, useRef, useState } from 'react';
 import { Box, Container } from '@chakra-ui/react';
+import { wireframeJSONToSVG } from 'roadmap-renderer';
 import { GlobalHeader } from '../../components/global-header';
 import { OpensourceBanner } from '../../components/opensource-banner';
 import { Footer } from '../../components/footer';
 import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap';
 import Helmet from '../../components/helmet';
-import { wireframeJSONToSVG } from '../../lib/renderer';
 import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header';
 import { ContentDrawer } from '../../components/roadmap/content-drawer';
 import { RoadmapError } from '../../components/roadmap/roadmap-error';
 import { RoadmapLoader } from '../../components/roadmap/roadmap-loader';
-import { removeSortingInfo } from '../../lib/renderer/utils';
+import { removeSortingInfo } from '../../lib/renderer';
 
 type RoadmapProps = {
   roadmap: RoadmapType;
@@ -216,7 +216,6 @@ type ContextType = {
 
 export async function getStaticProps(context: ContextType) {
   const roadmapId: string = context?.params?.roadmap;
-
   return {
     props: {
       roadmap: getRoadmapById(roadmapId),