diff --git a/ui/public/resource/course.json b/ui/public/resource/course.json
index 179cc3d7..ad40bcf7 100644
--- a/ui/public/resource/course.json
+++ b/ui/public/resource/course.json
@@ -20,6 +20,13 @@
 		"url": "https://www.joyofreact.com/",
 		"socials": []
 	},
+	{
+		"name": "REACT.gg",
+		"category": "React",
+		"subCategory": "React",
+		"url": "https://react.gg/",
+		"socials": []
+	},
 	{
 		"name": "useEffect",
 		"category": "React",
diff --git a/ui/public/resource/plugin.json b/ui/public/resource/plugin.json
index ef59ccd0..8c6a66f4 100644
--- a/ui/public/resource/plugin.json
+++ b/ui/public/resource/plugin.json
@@ -1,4 +1,16 @@
 [
+	{
+		"name": "ReacTree",
+		"category": "VSCode Extension",
+		"subCategory": "Visualizer",
+		"url": "https://marketplace.visualstudio.com/items?itemName=ReacTreeDev.reactree",
+		"socials": [
+			{
+				"url": "https://marketplace.visualstudio.com",
+				"name": "VSCode Marketplace"
+			}
+		]
+	},
 	{
 		"name": "Prettier-vscode",
 		"category": "VSCode Extension",
diff --git a/ui/src/components/Hoc/withPageTitle/utils/constants.ts b/ui/src/components/Hoc/withPageTitle/utils/constants.ts
index 9828a8a0..a40f3041 100644
--- a/ui/src/components/Hoc/withPageTitle/utils/constants.ts
+++ b/ui/src/components/Hoc/withPageTitle/utils/constants.ts
@@ -4,11 +4,25 @@ type HelpEntry = {
 	description: string;
 };
 
-interface HelpType {
+interface Help {
 	[key: string]: HelpEntry;
 }
 
-const HELP: HelpType = {
+interface QueryParam {
+	[key: string]: string;
+}
+
+interface BeamDetail {
+	name?: string;
+	url?: string;
+	queryParams?: QueryParam[];
+}
+
+interface Beam {
+	[key: string]: BeamDetail[];
+}
+
+const HELP: Help = {
 	[routesById.colorpicker.id]: {
 		description: "Color generator tool",
 	},
@@ -17,6 +31,14 @@ const HELP: HelpType = {
 	},
 };
 
+const BEAM: Beam = {
+	[routesById.colorpicker.id]: [
+		{ name: routesById.shadesandtints.title },
+		{ url: routesById.shadesandtints.path },
+		{ queryParams: [{ color: "color" }] },
+	],
+};
+
 const NO_PADDING = [
 	"BinaryTree: Developer Productivity Tools",
 	"About",
@@ -36,4 +58,4 @@ const NO_TITLE = [
 ];
 
 export type { HelpEntry };
-export { HELP, NO_PADDING, NO_TITLE };
+export { HELP, NO_PADDING, NO_TITLE, BEAM };
diff --git a/ui/src/components/Hoc/withPageTitle/utils/hooks.ts b/ui/src/components/Hoc/withPageTitle/utils/hooks.ts
index ddaba44f..ab39451a 100644
--- a/ui/src/components/Hoc/withPageTitle/utils/hooks.ts
+++ b/ui/src/components/Hoc/withPageTitle/utils/hooks.ts
@@ -1,6 +1,6 @@
 import { routes } from "data/routeData";
 import { useLocation } from "react-router-dom";
-import { HELP } from "./constants";
+import { BEAM, HELP } from "./constants";
 
 const usePageTitle = () => {
 	const { pathname } = useLocation();
@@ -16,6 +16,7 @@ const usePageTitle = () => {
 		title,
 		description,
 		helpObject: HELP[id] || {},
+		beamObject: BEAM[id] || {},
 		url: `https://binarytree.dev${pathname}`,
 	};
 };