diff --git a/frontend/src/Editor/Inspector/Inspector.jsx b/frontend/src/Editor/Inspector/Inspector.jsx
index b8e807cc72..f949dac530 100644
--- a/frontend/src/Editor/Inspector/Inspector.jsx
+++ b/frontend/src/Editor/Inspector/Inspector.jsx
@@ -7,7 +7,7 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
 import ReactTooltip from 'react-tooltip';
 import { toast } from 'react-toastify';
-import { validateQueryName } from '@/_helpers/utils';
+import { validateQueryName, convertToKebabCase } from '@/_helpers/utils';
 
 export const Inspector = ({
   selectedComponentId,
@@ -244,7 +244,7 @@ export const Inspector = ({
       </div>
 
       <div className="widget-documentation-link p-2">
-        <a href={`https://docs.tooljet.io/docs/widgets/${componentMeta.name.toLowerCase()}`} target="_blank">
+        <a href={`https://docs.tooljet.io/docs/widgets/${convertToKebabCase(componentMeta?.name ?? '')}`} target="_blank">
           <small>
             {componentMeta.name} documentation
           </small>
diff --git a/frontend/src/_helpers/utils.js b/frontend/src/_helpers/utils.js
index 874250d118..c4c4be7a5f 100644
--- a/frontend/src/_helpers/utils.js
+++ b/frontend/src/_helpers/utils.js
@@ -129,3 +129,6 @@ export function validateQueryName(name){
     const nameRegex = new RegExp('^[A-Za-z0-9_-]*$');
     return nameRegex.test(name);
 };
+
+
+export const convertToKebabCase = string => string.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/\s+/g, '-').toLowerCase()