diff --git a/frontend/libs/console/legacy-ce/src/lib/components/Common/DropdownButton/DropdownButton.tsx b/frontend/libs/console/legacy-ce/src/lib/components/Common/DropdownButton/DropdownButton.tsx
index a7c6a0b98019b..13556ea736238 100644
--- a/frontend/libs/console/legacy-ce/src/lib/components/Common/DropdownButton/DropdownButton.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/components/Common/DropdownButton/DropdownButton.tsx
@@ -76,6 +76,7 @@ const DDButton: React.FC<DropDownButtonProps> = props => {
                 boxShadow: '0 6px 12px rgb(0 0 0 / 18%);',
                 padding: '5px 0',
                 margin: '2px 0 0',
+                zIndex: 100
               }}
               align="start"
             >
diff --git a/frontend/libs/console/legacy-ce/src/lib/components/Common/Headers/Headers.module.scss b/frontend/libs/console/legacy-ce/src/lib/components/Common/Headers/Headers.module.scss
index 51c9af333a877..d75ffa68311db 100644
--- a/frontend/libs/console/legacy-ce/src/lib/components/Common/Headers/Headers.module.scss
+++ b/frontend/libs/console/legacy-ce/src/lib/components/Common/Headers/Headers.module.scss
@@ -1,5 +1,5 @@
 @import '../Common.module';
 
 .headerInputWidth {
-  width: 300px;
+  width: 320px;
 }
diff --git a/frontend/libs/console/legacy-ce/src/lib/components/Services/Events/EventTriggers/Modify/HeadersEditor.tsx b/frontend/libs/console/legacy-ce/src/lib/components/Services/Events/EventTriggers/Modify/HeadersEditor.tsx
index 9e7bb1f7354da..46abc47e1c098 100644
--- a/frontend/libs/console/legacy-ce/src/lib/components/Services/Events/EventTriggers/Modify/HeadersEditor.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/components/Services/Events/EventTriggers/Modify/HeadersEditor.tsx
@@ -47,13 +47,13 @@ const HeadersEditor = (props: HeaderEditorProps) => {
                 .filter(h => !!h.name)
                 .map(header => (
                   <tr className="">
-                    <td className="px-3 py-3 whitespace-nowrap font-medium">
+                    <td className="px-md py-sm whitespace-nowrap font-medium">
                       {header.name}
                     </td>
-                    <td className="px-3 py-3 whitespace-nowrap text-gray-600">
+                    <td className="px-md py-sm whitespace-nowrap text-gray-600">
                       {header.type}
                     </td>
-                    <td className="px-3 py-3 whitespace-nowrap text-gray-600">
+                    <td className="px-md py-sm whitespace-nowrap text-gray-600">
                       {header.value}
                     </td>
                   </tr>
@@ -74,7 +74,7 @@ const HeadersEditor = (props: HeaderEditorProps) => {
   );
 
   return (
-    <div className="mb-lg w-6/12">
+    <div className="mb-lg w-9/12">
       <h2 className="text-lg font-semibold mb-xs flex items-center">Headers</h2>
       <p className="text-sm mb-sm text-gray-600">
         Headers Hasura will send to the webhook with the POST request.