diff --git a/web/components/Modal.tsx b/web/components/Modal.tsx
index 641ff95..16c9abb 100644
--- a/web/components/Modal.tsx
+++ b/web/components/Modal.tsx
@@ -15,8 +15,8 @@ export const Modal = forwardRef(
           <h3 class="font-bold text-lg">{title}</h3>
           {children}
         </form>
-        <form method="dialog" class="modal-backdrop">
-          <button>close</button>
+        <form method="dialog" class="modal-backdrop bg-black opacity-30">
+          <button aria-label="close" />
         </form>
       </dialog>
     );
diff --git a/web/islands/ListAbi.tsx b/web/islands/ListAbi.tsx
index 8d89cc8..69e5672 100644
--- a/web/islands/ListAbi.tsx
+++ b/web/islands/ListAbi.tsx
@@ -81,7 +81,7 @@ export const ListAbi = ({ entries }: Props) => {
   return (
     <>
       <div class="float-right pb-4">
-        <button class="btn" onClick={() => modalRef.current?.showModal()}>
+        <button class="btn" onClick={() => modalRef.current?.show()}>
           +
         </button>
         <Modal title="Register ABI" ref={modalRef}>
diff --git a/web/islands/ListSources.tsx b/web/islands/ListSources.tsx
index 5dc8467..57f68b1 100644
--- a/web/islands/ListSources.tsx
+++ b/web/islands/ListSources.tsx
@@ -97,7 +97,7 @@ export const ListSources = ({ entries }: ListSourcesProps) => {
   return (
     <>
       <div class="float-right pb-4">
-        <button class="btn" onClick={() => modalRef.current?.showModal()}>
+        <button class="btn" onClick={() => modalRef.current?.show()}>
           +
         </button>
         <Modal title="Register Event Source" ref={modalRef}>
diff --git a/web/islands/ListWebhook.tsx b/web/islands/ListWebhook.tsx
index 6d48a6f..a52b26c 100644
--- a/web/islands/ListWebhook.tsx
+++ b/web/islands/ListWebhook.tsx
@@ -1,4 +1,10 @@
-import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "preact/hooks";
 import {
   CollapsibleTable,
   CollapsibleTableRow,
@@ -26,29 +32,32 @@ export const ListWebhook = ({ entries }: ListWebhookProps) => {
   const modalRef = useRef<HTMLDialogElement>(null);
   const [toast, setToast] = useState<ToastProps | null>(null);
   const [sources, setSources] = useState<SourceEntry[]>([]);
+  const [selectedAddress, setSelectedAddress] = useState<string>();
+  const addresses = useMemo(
+    () => [...new Set(sources.map((source) => source.address))],
+    [sources],
+  );
+  const abiHashes = useMemo(
+    () =>
+      sources
+        .filter((source) => source.address === selectedAddress)
+        .map((source) => source.abiHash),
+    [sources, selectedAddress],
+  );
 
   useEffect(() => {
-    const getAbis = async () => {
+    const getSources = async () => {
       const res = await fetch("/api/sources");
       setSources(await res.json());
     };
 
-    getAbis();
+    getSources();
   }, []);
 
   const handleSubmit = useCallback(async (e: Event) => {
     e.preventDefault();
 
     const formData = new FormData(e.target as HTMLFormElement);
-    const addressAbiHash = formData.get("address_abiHash");
-    if (!addressAbiHash) {
-      setToast({ type: "error", text: "Failed to register a webhook entry." });
-      return;
-    }
-
-    const [address, abiHash] = addressAbiHash.toString().split(":");
-    formData.set("sourceAddress", address);
-    formData.set("abiHash", abiHash);
 
     const res = await fetch("/api/webhook", {
       method: "POST",
@@ -85,25 +94,23 @@ export const ListWebhook = ({ entries }: ListWebhookProps) => {
   return (
     <>
       <div class="float-right pb-4">
-        <button class="btn" onClick={() => modalRef.current?.showModal()}>
+        <button class="btn" onClick={() => modalRef.current?.show()}>
           +
         </button>
         <Modal title="Register Webhook" ref={modalRef}>
           <form onSubmit={handleSubmit} class="form-control w-full">
             <label class="label">
-              <span class="label-text">Event Source</span>
+              <span class="label-text">Contract Address</span>
             </label>
             <SearchDropdown
-              name="address_abiHash"
-              list={sources}
-              entrySelector={(e) => `${e.address}:${e.abiHash}`}
-              entryTransform={(e) => (
-                <>
-                  <div>Address: {e.address}</div>
-                  <div>ABI: {e.abiHash}</div>
-                </>
-              )}
+              name="sourceAddress"
+              list={addresses}
+              onSelect={setSelectedAddress}
             />
+            <label class="label">
+              <span class="label-text">ABI Hash</span>
+            </label>
+            <SearchDropdown name="abiHash" list={abiHashes} />
             <label class="label">
               <span class="label-text">Webhook URL</span>
             </label>
diff --git a/web/islands/SearchDropdown.tsx b/web/islands/SearchDropdown.tsx
index d7f59fd..0f646d6 100644
--- a/web/islands/SearchDropdown.tsx
+++ b/web/islands/SearchDropdown.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useRef, useState } from "preact/hooks";
-import type { ComponentChild, VNode } from "preact";
+import type { ComponentChild } from "preact";
 
 export interface SearchDropdownProps<T> {
   list: T[];
@@ -11,9 +11,10 @@ export interface SearchDropdownProps<T> {
 }
 
 export const SearchDropdown = <T,>(props: SearchDropdownProps<T>) => {
-  if (props.list.length === 0) return null;
-
-  if (!props.entrySelector && typeof props.list[0] !== "string") {
+  if (
+    props.list.length > 0 && typeof props.list[0] !== "string" &&
+    !props.entrySelector
+  ) {
     throw new Error(
       "entrySelector should be provided if list is not string array.",
     );
@@ -58,10 +59,15 @@ export const SearchDropdown = <T,>(props: SearchDropdownProps<T>) => {
 
   return (
     <>
-      <details class="dropdown w-full max-w-xs" ref={detailsRef}>
+      <details
+        class="dropdown w-full max-w-xs"
+        ref={detailsRef}
+        onBlur={() => setDetailsOpen(false)}
+      >
         <summary class="list-none">
           <input
             type="text"
+            name={props.name}
             ref={inputRef}
             value={input}
             onChange={(e) => setInput(e.currentTarget.value)}
@@ -69,19 +75,20 @@ export const SearchDropdown = <T,>(props: SearchDropdownProps<T>) => {
             class="input input-bordered w-full max-w-xs"
           />
         </summary>
-        <ul class="shadow menu dropdown-content bg-base-100 rounded-box">
-          {filteredList.map(([k, v]) => (
-            <div
-              class="btn"
-              value={k}
-              onClick={() => onSelect(v)}
-            >
-              <div class="text-left truncate">{entryTransform(v)}</div>
-            </div>
-          ))}
-        </ul>
+        {filteredList.length > 0 && (
+          <ul class="shadow menu bg-base-100 rounded-xl rounded-tl fixed z-[2]">
+            {filteredList.map(([k, v]) => (
+              <div
+                class="btn"
+                value={k}
+                onMouseDown={() => onSelect(v)}
+              >
+                <div class="text-left truncate">{entryTransform(v)}</div>
+              </div>
+            ))}
+          </ul>
+        )}
       </details>
-      {props.name && <input type="hidden" name={props.name} value={input} />}
     </>
   );
 };