diff --git a/frontend/src/Editor/Components/Link/Link.jsx b/frontend/src/Editor/Components/Link/Link.jsx
index 44cec3715b..571a09bbb4 100644
--- a/frontend/src/Editor/Components/Link/Link.jsx
+++ b/frontend/src/Editor/Components/Link/Link.jsx
@@ -3,6 +3,7 @@ import * as Icons from '@tabler/icons-react';
 import cx from 'classnames';
 import Loader from '@/ToolJetUI/Loader/Loader';
 import './link.scss';
+const tinycolor = require('tinycolor2');
 
 export const Link = ({ height, properties, styles, fireEvent, setExposedVariables, dataCy }) => {
   const { linkTarget, linkText, targetType, visibility, disabledState, loadingState } = properties;
@@ -27,6 +28,7 @@ export const Link = ({ height, properties, styles, fireEvent, setExposedVariable
     opacity: isDisabled ? 0.5 : 1,
     pointerEvents: isDisabled ? 'none' : 'auto',
     fontWeight: '500',
+    '--link-hover-color': tinycolor(textColor).darken(15).toString(),
   };
   // eslint-disable-next-line import/namespace
   const IconElement = Icons?.[icon] == undefined ? Icons['IconHome2'] : Icons[icon];
diff --git a/frontend/src/Editor/Components/Link/link.scss b/frontend/src/Editor/Components/Link/link.scss
index c028f620e5..a92f19829f 100644
--- a/frontend/src/Editor/Components/Link/link.scss
+++ b/frontend/src/Editor/Components/Link/link.scss
@@ -1,8 +1,8 @@
 .link-widget {
   a {
-    text-underline-offset: 4px; // Adds space between text and underline
+    text-underline-offset: 32%; // Adds space between text and underline
     &:hover {
-      // color: var(--interactive-overlays-fill-hover) !important;
+      color: var(--link-hover-color) !important;
     }
     }
 }