diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/index.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/index.tsx
index 1821fdaa2d7..6bd292ccbce 100644
--- a/studio/components/interfaces/Database/Hooks/CreateHook/index.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/index.tsx
@@ -415,7 +415,7 @@ const CreateHook: FC<CreateHookProps> = ({ hook, visible = true, setVisible }) =
                   <SidePanel.Seperator />
                   <div className="space-y-2 px-6">
                     <div className="flex items-center space-x-2">
-                      <h5 className="text-scale-1200 text-base">HTTP Headers</h5>
+                      <h5 className="text-base text-scale-1200">HTTP Headers</h5>
                       <Badge color="gray">Read only</Badge>
                     </div>
                     <div className="space-y-2">
@@ -442,6 +442,10 @@ const CreateHook: FC<CreateHookProps> = ({ hook, visible = true, setVisible }) =
                       )}
                     </div>
                   </div>
+                  <p className="mx-6 mt-12 text-sm text-scale-1100">
+                    <strong>Note:</strong> You can only edit a webhook's name and mode. To change
+                    other settings, you'll need to delete and recreate the webhook.
+                  </p>
                 </>
               )}
 
@@ -450,7 +454,7 @@ const CreateHook: FC<CreateHookProps> = ({ hook, visible = true, setVisible }) =
                   <SidePanel.Seperator />
                   <div className="space-y-2 px-6">
                     <div className="flex items-center space-x-2">
-                      <h5 className="text-scale-1200 text-base">HTTP Parameters</h5>
+                      <h5 className="text-base text-scale-1200">HTTP Parameters</h5>
                       <Badge color="gray">Read only</Badge>
                     </div>
                     <div className="space-y-2">
@@ -487,13 +491,13 @@ const CreateHook: FC<CreateHookProps> = ({ hook, visible = true, setVisible }) =
               </div>
               <SidePanel.Seperator />
               <div className="space-y-6 px-6">
-                <h5 className="text-scale-1200 text-base">Conditions to fire hook</h5>
+                <h5 className="text-base text-scale-1200">Conditions to fire hook</h5>
                 <TableSelection />
                 <CheckboxEvents />
               </div>
               <SidePanel.Seperator />
               <div className="space-y-6 px-6">
-                <h5 className="text-scale-1200 text-base">Type of hook</h5>
+                <h5 className="text-base text-scale-1200">Type of hook</h5>
                 <RadioGroupHookService />
               </div>
               <ServiceConfigForm />