diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
index 4efbea75d2..8c8ec999f8 100644
--- a/frontend/src/Editor/Inspector/Components/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -223,9 +223,10 @@ class Table extends React.Component {
             eventUpdated={this.actionButtonEventUpdated}
             dataQueries={this.state.dataQueries}
             eventOptionUpdated={this.actionButtonEventOptionUpdated}
+            currentState={this.state.currentState}
             extraData={{ actionButton: action, index: index }} // This data is returned in the callbacks
           />
-          <button className="btn btn-sm btn-danger col" onClick={() => this.removeAction(index)}>
+          <button className="btn btn-sm btn-outline-danger col" onClick={() => this.removeAction(index)}>
             Remove
           </button>
         </Popover.Content>
@@ -400,8 +401,8 @@ class Table extends React.Component {
 
           <hr></hr>
 
-          {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onRowClicked', componentMeta.events.onRowClicked)}
-          {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onPageChanged', componentMeta.events.onPageChanged)}
+          {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onRowClicked', componentMeta.events.onRowClicked, currentState)}
+          {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onPageChanged', componentMeta.events.onPageChanged, currentState)}
 
           {renderQuerySelector(component, dataQueries, eventOptionUpdated, 'onBulkUpdate', componentMeta.events.onBulkUpdate)}
 
diff --git a/frontend/src/Editor/Inspector/EventSelector.jsx b/frontend/src/Editor/Inspector/EventSelector.jsx
index 085e12b235..3aa93c6800 100644
--- a/frontend/src/Editor/Inspector/EventSelector.jsx
+++ b/frontend/src/Editor/Inspector/EventSelector.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { ActionTypes } from '../ActionTypes';
 import SelectSearch, { fuzzySearch } from 'react-select-search';
+import { CodeHinter } from '../CodeBuilder/CodeHinter';
 
 export const EventSelector = ({
   param,
@@ -9,7 +10,8 @@ export const EventSelector = ({
   eventOptionUpdated,
   dataQueries,
   extraData,
-  eventMeta
+  eventMeta,
+  currentState
 }) => {
   function onChange(value) {
     const query = dataQueries.find((dataquery) => dataquery.id === value);
@@ -59,12 +61,10 @@ export const EventSelector = ({
           {definition.actionId === 'open-webpage' && (
             <div className="p-3">
               <label className="form-label mt-2">URL</label>
-              <input
-                onChange={(e) => eventOptionUpdated(param, 'url', e.target.value, extraData)}
-                value={message}
-                type="text"
-                className="form-control form-control-sm"
-                placeholder="https://example.com"
+              <CodeHinter
+                currentState={currentState}
+                initialValue={definition.options.url}
+                onChange={(value) => eventOptionUpdated(param, 'url', value, extraData)}
               />
             </div>
           )}
diff --git a/frontend/src/Editor/Inspector/Inspector.jsx b/frontend/src/Editor/Inspector/Inspector.jsx
index 4c7792973d..97f36a7e87 100644
--- a/frontend/src/Editor/Inspector/Inspector.jsx
+++ b/frontend/src/Editor/Inspector/Inspector.jsx
@@ -150,7 +150,7 @@ export const Inspector = ({
           {Object.keys(componentMeta.properties).map((property) => renderElement(component, componentMeta, paramUpdated, dataQueries, property, 'properties', currentState, components))}
           {Object.keys(componentMeta.styles).map((style) => renderElement(component, componentMeta, paramUpdated, dataQueries, style, 'styles', currentState, components))}
           <hr></hr>
-          {Object.keys(componentMeta.events).map((eventName) => renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, eventName, componentMeta.events[eventName]))}
+          {Object.keys(componentMeta.events).map((eventName) => renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, eventName, componentMeta.events[eventName], currentState))}
         </div>
       )}
     </div>
diff --git a/frontend/src/Editor/Inspector/Utils.js b/frontend/src/Editor/Inspector/Utils.js
index e517bd90d6..40bec44c32 100644
--- a/frontend/src/Editor/Inspector/Utils.js
+++ b/frontend/src/Editor/Inspector/Utils.js
@@ -49,7 +49,7 @@ export function renderElement(component, componentMeta, paramUpdated, dataQuerie
   );
 }
 
-export function renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, eventName, eventMeta) {
+export function renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, eventName, eventMeta, currentState) {
   let definition = component.component.definition.events[eventName];
   definition = definition || { };
 
@@ -61,6 +61,7 @@ export function renderEvent(component, eventUpdated, dataQueries, eventOptionUpd
             eventUpdated={eventUpdated}
             dataQueries={dataQueries}
             eventOptionUpdated={eventOptionUpdated}
+            currentState={currentState}
         />
   );
 }