diff --git a/apps/playground/.env.example b/apps/playground/.env.example
index ef77c84df..db20c4906 100644
--- a/apps/playground/.env.example
+++ b/apps/playground/.env.example
@@ -6,4 +6,7 @@ BLOCKFROST_API_KEY_PREPROD=
 DONATE_ADA_ADDRESS=
 DONATE_MESHTOKEN_WALLET=
 
-NEXT_PUBLIC_GOOGLE_ANALYTICS=
\ No newline at end of file
+NEXT_PUBLIC_GOOGLE_ANALYTICS=
+
+GOOGLE_SEARCH_API=
+GOOGLE_SEARCH_CX=
\ No newline at end of file
diff --git a/apps/playground/src/backend/search.ts b/apps/playground/src/backend/search.ts
new file mode 100644
index 000000000..5ea9bc4a0
--- /dev/null
+++ b/apps/playground/src/backend/search.ts
@@ -0,0 +1,18 @@
+import { post } from "./";
+
+export async function searchQuery(query: string) {
+  const googleSearchResults = await post(`google/search`, { query });
+
+  const results: any[] = [];
+
+  for (const result of googleSearchResults.items) {
+    results.push({
+      title: result.title,
+      url: result.link.replace("https://meshjs.dev/", "/"),
+      displayUrl: result.htmlFormattedUrl,
+      snippet: result.htmlSnippet,
+    });
+  }
+
+  return results;
+}
diff --git a/apps/playground/src/components/site/navbar/index.tsx b/apps/playground/src/components/site/navbar/index.tsx
index 106ba116d..ee57eede3 100644
--- a/apps/playground/src/components/site/navbar/index.tsx
+++ b/apps/playground/src/components/site/navbar/index.tsx
@@ -26,6 +26,8 @@ export default function Navbar() {
   const [showMobileMenu, setShowMobileMenu] = useState(false);
   const router = useRouter();
 
+  const [query, setQuery] = useState<string>("");
+
   useEffect(() => {
     setIsSSR(false);
   }, []);
@@ -38,6 +40,13 @@ export default function Navbar() {
     setShowMobileMenu(!showMobileMenu);
   }
 
+  function search() {
+    router.push({
+      pathname: "/search",
+      query: { q: query },
+    });
+  }
+
   useEffect(() => {
     function setDarkTheme(bool: boolean) {
       if (bool) {
@@ -75,6 +84,46 @@ export default function Navbar() {
 
           {/* right icons start */}
           <div className="flex items-center lg:order-2">
+            <div id="search-div" className="mr-3 hidden w-full lg:inline-block">
+              <label
+                htmlFor="search-bar"
+                className="sr-only mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+              >
+                Search
+              </label>
+              <div className="relative">
+                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                  <svg
+                    className="h-5 w-5 text-gray-500 dark:text-gray-400"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                    ></path>
+                  </svg>
+                </div>
+                <input
+                  type="search"
+                  id="search-bar"
+                  className="focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 block w-full rounded-lg border border-gray-300 bg-gray-50 px-4 py-2 pl-10 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+                  placeholder="Search"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      search();
+                    }
+                  }}
+                />
+              </div>
+            </div>
+
             {socials.map((social, i) => {
               return (
                 <Link
@@ -122,6 +171,60 @@ export default function Navbar() {
               !showMobileMenu && "hidden"
             } w-full items-center justify-between lg:order-1 lg:flex lg:w-auto`}
           >
+            <div className="mt-4 flex items-center lg:hidden">
+              <label htmlFor="search-mobile" className="sr-only">
+                Search
+              </label>
+              <div className="relative w-full">
+                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                  <svg
+                    className="h-5 w-5 text-gray-500 dark:text-gray-400"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                      clipRule="evenodd"
+                    ></path>
+                  </svg>
+                </div>
+                <input
+                  type="search"
+                  id="search-mobile"
+                  className="focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 pl-10  text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+                  placeholder="Search for anything..."
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      search();
+                    }
+                  }}
+                />
+              </div>
+              <button
+                className="bg-primary-700 border-primary-700 hover:bg-primary-800 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 ml-2 inline-flex items-center rounded-lg border p-2.5 text-sm font-medium text-white focus:outline-none focus:ring-4"
+                onClick={() => search()}
+              >
+                <svg
+                  className="mr-2 h-5 w-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                  ></path>
+                </svg>{" "}
+                Search
+              </button>
+            </div>
             <ul className="mt-4 flex flex-col font-medium lg:mt-0 lg:flex-row lg:space-x-8">
               <MenuItemDropdown title="SDK" items={linksApi} />
               <MenuItemDropdown title="Resources" items={linksResources} />
diff --git a/apps/playground/src/pages/api/blockfrost/[...slug].ts b/apps/playground/src/pages/api/blockfrost/[...slug].ts
index 60b3d58be..5e8bca5b6 100644
--- a/apps/playground/src/pages/api/blockfrost/[...slug].ts
+++ b/apps/playground/src/pages/api/blockfrost/[...slug].ts
@@ -1,8 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import axios from "axios";
 
-import { bytesToHex, toBytes } from "@meshsdk/common";
-import { fromBytes } from "@meshsdk/core-csl";
+import { toBytes } from "@meshsdk/common";
 
 export default async function handler(
   _req: NextApiRequest,
diff --git a/apps/playground/src/pages/api/google/search.ts b/apps/playground/src/pages/api/google/search.ts
new file mode 100644
index 000000000..f2c5bf13d
--- /dev/null
+++ b/apps/playground/src/pages/api/google/search.ts
@@ -0,0 +1,17 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import axios from "axios";
+
+export default async function handler(
+  _req: NextApiRequest,
+  _res: NextApiResponse,
+) {
+  try {
+    const query = _req.body.query;
+    const resGoogle = await axios.get(
+      `https://customsearch.googleapis.com/customsearch/v1?key=${process.env.GOOGLE_SEARCH_API}&cx=${process.env.GOOGLE_SEARCH_CX}&num=10&q=${query}`,
+    );
+    _res.status(200).json(resGoogle.data);
+  } catch (error) {
+    _res.status(500).json(error);
+  }
+}
diff --git a/apps/playground/src/pages/apis/txbuilder/common.tsx b/apps/playground/src/pages/apis/txbuilder/common.tsx
index 6bcbab011..607490ca2 100644
--- a/apps/playground/src/pages/apis/txbuilder/common.tsx
+++ b/apps/playground/src/pages/apis/txbuilder/common.tsx
@@ -1,6 +1,7 @@
 import { MeshTxBuilder } from "@meshsdk/core";
 
 import { getProvider } from "~/components/cardano/mesh-wallet";
+import Link from "~/components/link";
 
 export function getTxBuilder() {
   const blockchainProvider = getProvider();
@@ -20,8 +21,13 @@ export function Intro() {
   return (
     <>
       <p>
-        The <code>MeshTxBuilder</code> is a powerful low-level APIs that allows
-        you to build and sign transactions.
+        In the code snippet, you will find <code>txBuilder</code>, which is an
+        instance of <code>MeshTxBuilder</code>, a powerful low-level APIs that
+        allows you to build transactions. Learn how to initialize{" "}
+        <Link href="/apis/txbuilder/basics#initializeTxbuilder">
+          <code>MeshTxBuilder</code>
+        </Link>
+        .
       </p>
     </>
   );
diff --git a/apps/playground/src/pages/apis/txbuilder/governance/registration.tsx b/apps/playground/src/pages/apis/txbuilder/governance/registration.tsx
index 27ac6f380..d562b211a 100644
--- a/apps/playground/src/pages/apis/txbuilder/governance/registration.tsx
+++ b/apps/playground/src/pages/apis/txbuilder/governance/registration.tsx
@@ -42,15 +42,8 @@ function Left() {
   codeAnchor += `const anchorUrl = "https://meshjs.dev/governance/meshjs.jsonld";\n`;
   codeAnchor += `const anchorHash = await getMeshJsonHash(anchorUrl);\n`;
 
-  let codeUtxo = ``;
-  codeUtxo += `// get utxo to pay for the registration\n`;
-  codeUtxo += `const utxos = await wallet.getUtxos();\n`;
-  codeUtxo += `const registrationFee = "500000000";\n`;
-  codeUtxo += `const assetMap = new Map<Unit, Quantity>();\n`;
-  codeUtxo += `assetMap.set("lovelace", registrationFee);\n`;
-  codeUtxo += `const selectedUtxos = keepRelevant(assetMap, utxos);\n`;
-
   let codeTx = ``;
+  codeTx += `const utxos = await wallet.getUtxos();\n`;
   codeTx += `const changeAddress = await wallet.getChangeAddress();\n`;
   codeTx += `\n`;
   codeTx += `txBuilder\n`;
@@ -109,16 +102,12 @@ function Left() {
         anchor from the given URL and returns the hash of the anchor.
       </p>
       <Codeblock data={codeAnchor} />
-      <p>
-        Then, we select the UTxOs to pay for the registration. According to the
-        current protocol parameters, the deposit for registering a DRep is 500
-        ADA.
-      </p>
-      <Codeblock data={codeUtxo} />
       <p>
         We can now build the transaction by adding the DRep registration
         certificate to the transaction. We also need to add the change address
-        and the selected UTxOs to the transaction.
+        and the selected UTxOs to the transaction. Note that the deposit for
+        registering a DRep is 500 ADA, we would set 505 ADA as UTxO selection
+        threshold.
       </p>
       <Codeblock data={codeTx} />
       <p>
@@ -163,13 +152,9 @@ function Right() {
         anchorDataHash: anchorHash,
       };
     }
-    
+
     // get utxo to pay for the registration
     const utxos = await wallet.getUtxos();
-    const registrationFee = "500000000";
-    const assetMap = new Map<Unit, Quantity>();
-    assetMap.set("lovelace", registrationFee);
-    const selectedUtxos = keepRelevant(assetMap, utxos);
 
     const changeAddress = await wallet.getChangeAddress();
 
@@ -177,7 +162,7 @@ function Right() {
     txBuilder
       .drepRegistrationCertificate(dRepId, anchor)
       .changeAddress(changeAddress)
-      .selectUtxosFrom(selectedUtxos);
+      .selectUtxosFrom(utxos, "keepRelevant", "505000000");
 
     const unsignedTx = await txBuilder.complete();
     const signedTx = await wallet.signTx(unsignedTx);
@@ -194,11 +179,6 @@ function Right() {
   codeSnippet += `\n`;
   codeSnippet += `// get utxo to pay for the registration\n`;
   codeSnippet += `const utxos = await wallet.getUtxos();\n`;
-  codeSnippet += `const registrationFee = "500000000";\n`;
-  codeSnippet += `const assetMap = new Map<Unit, Quantity>();\n`;
-  codeSnippet += `assetMap.set("lovelace", registrationFee);\n`;
-  codeSnippet += `const selectedUtxos = keepRelevant(assetMap, utxos);\n`;
-  codeSnippet += `\n`;
   codeSnippet += `const changeAddress = await wallet.getChangeAddress();\n`;
   codeSnippet += `\n`;
   codeSnippet += `txBuilder\n`;
@@ -207,7 +187,7 @@ function Right() {
   codeSnippet += `    anchorDataHash: anchorHash,\n`;
   codeSnippet += `  })\n`;
   codeSnippet += `  .changeAddress(changeAddress)\n`;
-  codeSnippet += `  .selectUtxosFrom(selectedUtxos);\n`;
+  codeSnippet += `  .selectUtxosFrom(utxos, "keepRelevant", "505000000");\n`;
   codeSnippet += `\n`;
   codeSnippet += `const unsignedTx = await txBuilder.complete();\n`;
   codeSnippet += `const signedTx = await wallet.signTx(unsignedTx);\n`;
diff --git a/apps/playground/src/pages/apis/txbuilder/governance/vote-delegation.tsx b/apps/playground/src/pages/apis/txbuilder/governance/vote-delegation.tsx
index fbda0819f..c878b6179 100644
--- a/apps/playground/src/pages/apis/txbuilder/governance/vote-delegation.tsx
+++ b/apps/playground/src/pages/apis/txbuilder/governance/vote-delegation.tsx
@@ -28,21 +28,7 @@ function Left() {
   codeGetWalletInfo += `const rewardAddress = rewardAddresses[0];\n`;
   codeGetWalletInfo += `const changeAddress = await wallet.getChangeAddress();\n`;
 
-  let codeUtxo = ``;
-  codeUtxo += `const assetMap = new Map<Unit, Quantity>();\n`;
-  codeUtxo += `assetMap.set("lovelace", "5000000");\n`;
-  codeUtxo += `const selectedUtxos = keepRelevant(assetMap, utxos);\n`;
-
   let codeTx = ``;
-  codeTx += `for (const utxo of selectedUtxos) {\n`;
-  codeTx += `  txBuilder.txIn(\n`;
-  codeTx += `    utxo.input.txHash,\n`;
-  codeTx += `    utxo.input.outputIndex,\n`;
-  codeTx += `    utxo.output.amount,\n`;
-  codeTx += `    utxo.output.address,\n`;
-  codeTx += `  );\n`;
-  codeTx += `}\n`;
-  codeTx += `\n`;
   codeTx += `txBuilder\n`;
   codeTx += `  .voteDelegationCertificate(\n`;
   codeTx += `    {\n`;
@@ -50,7 +36,8 @@ function Left() {
   codeTx += `    },\n`;
   codeTx += `    rewardAddress,\n`;
   codeTx += `  )\n`;
-  codeTx += `  .changeAddress(changeAddress);\n`;
+  codeTx += `  .changeAddress(changeAddress)`;
+  codeTx += `  .selectUtxos(utxos, "keepRelevant", "10000000")\n`;
 
   let codeBuildSign = ``;
   codeBuildSign += `const unsignedTx = await txBuilder.complete();\n`;
@@ -74,13 +61,14 @@ function Left() {
         will select the UTXOs that have at least 5 ADA. Though the fee is less
         than 1 ADA.
       </p>
-      <Codeblock data={codeUtxo} />
       <p>
         We can now start building the transaction. We will add the selected
         UTXOs as inputs to the transaction. We will also add the vote delegation
         certificate to the transaction. The vote delegation certificate requires
         the DRep ID of the DRep to delegate to and the reward address of the
-        delegator.
+        delegator. Note that we would need to have at least 5 ADA for the
+        certificate delegation, in the <code>selectUtxosFrom</code> we will
+        configure 10 ADA as threshold buffer.
       </p>
       <Codeblock data={codeTx} />
       <p>
@@ -111,21 +99,8 @@ function Right() {
 
     const changeAddress = await wallet.getChangeAddress();
 
-    const assetMap = new Map<Unit, Quantity>();
-    assetMap.set("lovelace", "5000000");
-    const selectedUtxos = keepRelevant(assetMap, utxos);
-
     const txBuilder = getTxBuilder();
 
-    for (const utxo of selectedUtxos) {
-      txBuilder.txIn(
-        utxo.input.txHash,
-        utxo.input.outputIndex,
-        utxo.output.amount,
-        utxo.output.address,
-      );
-    }
-
     txBuilder
       .voteDelegationCertificate(
         {
@@ -133,7 +108,8 @@ function Right() {
         },
         rewardAddress,
       )
-      .changeAddress(changeAddress);
+      .changeAddress(changeAddress)
+      .selectUtxosFrom(utxos, "keepRelevant", "10000000");
 
     const unsignedTx = await txBuilder.complete();
     const signedTx = await wallet.signTx(unsignedTx);
@@ -148,21 +124,8 @@ function Right() {
   codeSnippet += `\n`;
   codeSnippet += `const changeAddress = await wallet.getChangeAddress();\n`;
   codeSnippet += `\n`;
-  codeSnippet += `const assetMap = new Map<Unit, Quantity>();\n`;
-  codeSnippet += `assetMap.set("lovelace", "5000000");\n`;
-  codeSnippet += `const selectedUtxos = keepRelevant(assetMap, utxos);\n`;
-  codeSnippet += `\n`;
   codeSnippet += `const txBuilder = getTxBuilder();\n`;
   codeSnippet += `\n`;
-  codeSnippet += `for (const utxo of selectedUtxos) {\n`;
-  codeSnippet += `  txBuilder.txIn(\n`;
-  codeSnippet += `    utxo.input.txHash,\n`;
-  codeSnippet += `    utxo.input.outputIndex,\n`;
-  codeSnippet += `    utxo.output.amount,\n`;
-  codeSnippet += `    utxo.output.address,\n`;
-  codeSnippet += `  );\n`;
-  codeSnippet += `}\n`;
-  codeSnippet += `\n`;
   codeSnippet += `txBuilder\n`;
   codeSnippet += `  .voteDelegationCertificate(\n`;
   codeSnippet += `    {\n`;
@@ -171,6 +134,7 @@ function Right() {
   codeSnippet += `    rewardAddress,\n`;
   codeSnippet += `  )\n`;
   codeSnippet += `  .changeAddress(changeAddress);\n`;
+  codeSnippet += `  .selectUtxos(utxos, "keepRelevant", "10000000")\n`;
   codeSnippet += `\n`;
   codeSnippet += `const unsignedTx = await txBuilder.complete();\n`;
   codeSnippet += `const signedTx = await wallet.signTx(unsignedTx);\n`;
diff --git a/apps/playground/src/pages/providers/hydra-endpoints/init-head.tsx b/apps/playground/src/pages/providers/hydra-endpoints/init-head.tsx
index 3a278d4af..02e4bb3a8 100644
--- a/apps/playground/src/pages/providers/hydra-endpoints/init-head.tsx
+++ b/apps/playground/src/pages/providers/hydra-endpoints/init-head.tsx
@@ -1,5 +1,6 @@
-import { HydraProvider } from "@meshsdk/core";
+import { HydraProvider, MeshTxBuilder, MeshWallet } from "@meshsdk/core";
 
+import Button from "~/components/button/button";
 import LiveCodeDemo from "~/components/sections/live-code-demo";
 import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
 import Codeblock from "~/components/text/codeblock";
@@ -37,10 +38,68 @@ function Left() {
 function Right(hydraProvider: HydraProvider, provider: string) {
   async function runDemo() {
     hydraProvider.onMessage((message) => {
-      console.log("HydraProvider received message", message);
+      console.log("Hydra onMessage", message);
     });
+    hydraProvider.onStatusChange((status) => {
+      console.log("Hydra status", status);
+    });
+
     await hydraProvider.connect();
-    return await hydraProvider.initializesHead();
+
+    // return await hydraProvider.initializesHead();
+  }
+
+  async function test1() {
+    const utxos = await hydraProvider.fetchUTxOs();
+    console.log("UTXOs: ", utxos);
+    const utxosAddress = await hydraProvider.fetchAddressUTxOs(
+      "addr_test1vpd5axpq4qsh8sxvzny49cp22gc5tqx0djf6wmjv5cx7q5qyrzuw8",
+    );
+    console.log("UTXOs Address: ", utxosAddress);
+  }
+
+  async function test2() {
+    const pp = await hydraProvider.fetchProtocolParameters();
+    console.log("pp: ", pp);
+  }
+
+  async function test3() {
+    // wallet
+    const walletA = {
+      addr: "addr_test1vpsthwvxgfkkm2lm8ggy0c5345u6vrfctmug6tdyx4rf4mqn2xcyw",
+      key: "58201aae63d93899640e91b51c5e8bd542262df3ecf3246c3854f39c40f4eb83557d",
+    };
+
+    const wallet = new MeshWallet({
+      networkId: 0,
+      key: {
+        type: "cli",
+        payment: walletA.key,
+      },
+    });
+
+    const pp = await hydraProvider.fetchProtocolParameters();
+    const utxos = await hydraProvider.fetchAddressUTxOs(walletA.addr);
+    const changeAddress = walletA.addr;
+
+    const txBuilder = new MeshTxBuilder({
+      fetcher: hydraProvider,
+      params: pp,
+      verbose: true,
+    });
+
+    const unsignedTx = await txBuilder
+      .txOut(
+        "addr_test1vpd5axpq4qsh8sxvzny49cp22gc5tqx0djf6wmjv5cx7q5qyrzuw8",
+        [{ unit: "lovelace", quantity: "3000000" }],
+      )
+      .changeAddress(changeAddress)
+      .selectUtxosFrom(utxos)
+      .complete();
+
+    const signedTx = await wallet.signTx(unsignedTx);
+    const txHash = await hydraProvider.submitTx(signedTx);
+    console.log("txHash", txHash);
   }
 
   return (
@@ -50,6 +109,10 @@ function Right(hydraProvider: HydraProvider, provider: string) {
       runCodeFunction={runDemo}
       runDemoShowProviderInit={true}
       runDemoProvider={provider}
-    ></LiveCodeDemo>
+    >
+      <Button onClick={test1}>test1</Button>
+      <Button onClick={test2}>test2</Button>
+      <Button onClick={test3}>test3</Button>
+    </LiveCodeDemo>
   );
 }
diff --git a/apps/playground/src/pages/providers/hydra-endpoints/on-message.tsx b/apps/playground/src/pages/providers/hydra-endpoints/on-message.tsx
index 8edd5c845..2194b04d8 100644
--- a/apps/playground/src/pages/providers/hydra-endpoints/on-message.tsx
+++ b/apps/playground/src/pages/providers/hydra-endpoints/on-message.tsx
@@ -47,10 +47,10 @@ function Left() {
 
 function Right(hydraProvider: HydraProvider, provider: string) {
   useEffect(() => {
-    hydraProvider.onMessage((message) => {
-      console.log("HydraProvider received message", message);
-      // do something with the message
-    });
+    // hydraProvider.onMessage((message) => {
+    //   console.log("HydraProvider received message", message);
+    //   // do something with the message
+    // });
   }, []);
 
   return <></>;
diff --git a/apps/playground/src/pages/providers/hydra.tsx b/apps/playground/src/pages/providers/hydra.tsx
index 7696e5523..ac5a9dd6e 100644
--- a/apps/playground/src/pages/providers/hydra.tsx
+++ b/apps/playground/src/pages/providers/hydra.tsx
@@ -33,7 +33,7 @@ const ReactPage: NextPage = () => {
   code1 += `\nawait hydraProvider.connect();`;
 
   const hydraUrl = useProviders((state) => state.hydraUrl);
-  const hydraProvider = new HydraProvider(hydraUrl);
+  const hydraProvider = new HydraProvider({ url: hydraUrl });
 
   return (
     <>
diff --git a/apps/playground/src/pages/search/index.tsx b/apps/playground/src/pages/search/index.tsx
new file mode 100644
index 000000000..5ed343b96
--- /dev/null
+++ b/apps/playground/src/pages/search/index.tsx
@@ -0,0 +1,149 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+
+import { searchQuery } from "~/backend/search";
+import Link from "~/components/link";
+
+export default function PageSearch() {
+  const router = useRouter();
+
+  const [query, setQuery] = useState<string>("");
+  const [searchResults, setSearchResults] = useState<
+    {
+      title: string;
+      url: string;
+      snippet: string;
+      displayUrl: string;
+    }[]
+  >([]);
+
+  async function search(_query?: string) {
+    console.log("search", _query ? _query : query);
+    const res = await searchQuery(_query ? _query : query);
+    setSearchResults(res);
+  }
+
+  function handleSearch() {
+    router.push({
+      pathname: "/search",
+      query: { q: query },
+    });
+  }
+
+  useEffect(() => {
+    if (router && router.query && router.query.q) {
+      setQuery(router.query.q as string);
+      search(router.query.q as string);
+    }
+  }, [router]);
+
+  return (
+    <>
+      <section className="bg-white py-8 antialiased md:py-16 dark:bg-gray-900">
+        <div className="mx-auto max-w-screen-lg px-4 2xl:px-0">
+          <div className="lg:flex lg:items-center lg:justify-between lg:gap-4">
+            <h2 className="shrink-0 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
+              Search results ({searchResults.length})
+            </h2>
+
+            <div className="mt-4 w-full gap-4 sm:flex sm:items-center sm:justify-end lg:mt-0">
+              <label htmlFor="simple-search" className="sr-only">
+                Search
+              </label>
+              <div className="relative w-full flex-1 lg:max-w-sm">
+                <div className="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3">
+                  <svg
+                    className="h-4 w-4 text-gray-500 dark:text-gray-400"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeWidth="2"
+                      d="m21 21-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"
+                    />
+                  </svg>
+                </div>
+                <input
+                  type="text"
+                  id="simple-search"
+                  className="focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 block w-full rounded-lg border border-gray-300 bg-gray-50 px-4 py-2.5 ps-9 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400"
+                  placeholder="Search Mesh Docs"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      handleSearch();
+                    }
+                  }}
+                />
+              </div>
+
+              <button
+                type="button"
+                data-modal-target="question-modal"
+                data-modal-toggle="question-modal"
+                className="bg-primary-700 hover:bg-primary-800 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 mt-4 w-full shrink-0 rounded-lg px-5 py-2.5 text-sm font-medium text-white focus:outline-none focus:ring-4 sm:mt-0 sm:w-auto"
+                onClick={() => handleSearch()}
+              >
+                Search
+              </button>
+            </div>
+          </div>
+
+          <div className="mt-6 flow-root">
+            <div className="-my-6 divide-y divide-gray-200 dark:divide-gray-800">
+              {searchResults.map((result, i) => {
+                return (
+                  <Row
+                    key={i}
+                    title={result.title}
+                    snippet={result.snippet}
+                    url={result.url}
+                    displayUrl={result.displayUrl}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+function Row({
+  title,
+  snippet,
+  url,
+  displayUrl,
+}: {
+  title: string;
+  snippet: string;
+  url: string;
+  displayUrl: string;
+}) {
+  return (
+    <div className="space-y-4 py-6 md:py-8">
+      <div className="grid">
+        <Link
+          href={url}
+          className="text-xl font-semibold text-gray-900 hover:underline dark:text-white"
+        >
+          {title}
+        </Link>
+        <div className="text-sm text-gray-500">
+          <div dangerouslySetInnerHTML={{ __html: displayUrl }} />
+        </div>
+      </div>
+      <div className="text-base font-normal text-gray-500 dark:text-gray-400">
+        <div dangerouslySetInnerHTML={{ __html: snippet }} />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/playground/tailwind.config.js b/apps/playground/tailwind.config.js
index 6e2d970e6..3c61ab4e1 100644
--- a/apps/playground/tailwind.config.js
+++ b/apps/playground/tailwind.config.js
@@ -22,6 +22,16 @@ module.exports = {
           // 700: "#1d4ed8",
           // 800: "#1e40af",
           // 900: "#1e3a8a",
+          50: "#F9FAFB",
+          100: "#F3F4F6",
+          200: "#E5E7EB",
+          300: "#D1D5DB",
+          400: "#9CA3AF",
+          500: "#6B7280",
+          600: "#4B5563",
+          700: "#374151",
+          800: "#1F2937",
+          900: "#111827",
         },
       },
       typography: {
diff --git a/package-lock.json b/package-lock.json
index dc9f4a5b7..bc5c4ac75 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11814,6 +11814,14 @@
         }
       }
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.6.0.tgz",
+      "integrity": "sha512-+z6ti+CcJnRlLHok/emGEsWQhe7kfSmEW+/6qCzvKY67YPh7YOBfvc7+/+NXq+zJlbArg30tYpqLjNgcAYv2YQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -14365,14 +14373,14 @@
       }
     },
     "node_modules/@sidan-lab/sidan-csl-rs-browser": {
-      "version": "0.9.9",
-      "resolved": "https://registry.npmjs.org/@sidan-lab/sidan-csl-rs-browser/-/sidan-csl-rs-browser-0.9.9.tgz",
-      "integrity": "sha512-hsc+f2EaMYcLE8k2aHUhfbR2ma1qycjdyrfvvEVDsIULmG0eWzgx+oZFGMTJBEERRqbQL0BBE7ya9oGLUQmSoQ=="
+      "version": "0.9.11",
+      "resolved": "https://registry.npmjs.org/@sidan-lab/sidan-csl-rs-browser/-/sidan-csl-rs-browser-0.9.11.tgz",
+      "integrity": "sha512-qZzfc0CEBMWhhnFonff2/fsDmL9k0wn1FNNplkg6JU5q0jU+NdXEdk9pzoz1jrwTDVyq6JT0GMIVXx5pOgNfXA=="
     },
     "node_modules/@sidan-lab/sidan-csl-rs-nodejs": {
-      "version": "0.9.9",
-      "resolved": "https://registry.npmjs.org/@sidan-lab/sidan-csl-rs-nodejs/-/sidan-csl-rs-nodejs-0.9.9.tgz",
-      "integrity": "sha512-ZNUv8fWYD5hZrvVpTr7ytMVyDVJufO3hHuQI5rdekXfK8gTj6t0qakoNldhoD8uxvULQsxLY2mTx/0FBQTMPKg=="
+      "version": "0.9.11",
+      "resolved": "https://registry.npmjs.org/@sidan-lab/sidan-csl-rs-nodejs/-/sidan-csl-rs-nodejs-0.9.11.tgz",
+      "integrity": "sha512-MURMrxa14bMW7ZWcgAPVrNWftX6dBKSMYszYWdfr+UE64fPHE5EKyyH3Bw+ZBgJHeH/I0IgS6Equ81sDIMo/yg=="
     },
     "node_modules/@silentbot1/nat-api": {
       "version": "0.4.7",
@@ -15505,6 +15513,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/ws": {
+      "version": "8.5.13",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.13.tgz",
+      "integrity": "sha512-osM/gWBTPKgHV8XkTunnegTRIsvF6owmf5w+JtAfOw472dptdm0dlGv4xCt6GwQRcC2XVOvvRE/0bAoQcL2QkA==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/yargs": {
       "version": "17.0.33",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
@@ -16121,7 +16138,6 @@
       "version": "1.4.13",
       "resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz",
       "integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==",
-      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "acorn": ">=8.9.0"
@@ -16988,6 +17004,37 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/bits-ui": {
+      "version": "1.0.0-next.65",
+      "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-1.0.0-next.65.tgz",
+      "integrity": "sha512-6pJ2dYP28kkYhvXKyUh22ocTyzciRrx752FJ8+oKUDQ07qnP4O/D8oAFo9pbZVU1MJ3wSMTXkpOVI/DrkJhChQ==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.4",
+        "@floating-ui/dom": "^1.6.7",
+        "@internationalized/date": "^3.5.6",
+        "esm-env": "^1.1.2",
+        "runed": "^0.15.2",
+        "svelte-toolbelt": "^0.4.4"
+      },
+      "engines": {
+        "node": ">=18",
+        "pnpm": ">=8.7.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/huntabyte"
+      },
+      "peerDependencies": {
+        "svelte": "^5.0.0-next.1"
+      }
+    },
+    "node_modules/bits-ui/node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
     "node_modules/bittorrent-dht": {
       "version": "11.0.8",
       "resolved": "https://registry.npmjs.org/bittorrent-dht/-/bittorrent-dht-11.0.8.tgz",
@@ -20606,7 +20653,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.1.tgz",
       "integrity": "sha512-U9JedYYjCnadUlXk7e1Kr+aENQhtUaoaV9+gZm1T8LC/YBAPJx3NSPIAurFOC0U5vrdSevnUJS2/wUVxGwPhng==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/espree": {
@@ -20656,7 +20702,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.3.tgz",
       "integrity": "sha512-ZlQmCCK+n7SGoqo7DnfKaP1sJZa49P01/dXzmjCASSo04p72w8EksT2NMK8CEX8DhKsfJXANioIw8VyHNsBfvQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15",
@@ -24379,7 +24424,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
       "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/locate-path": {
@@ -24553,7 +24597,6 @@
       "version": "0.30.14",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.14.tgz",
       "integrity": "sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0"
@@ -31160,6 +31203,21 @@
       ],
       "license": "MIT"
     },
+    "node_modules/runed": {
+      "version": "0.15.4",
+      "resolved": "https://registry.npmjs.org/runed/-/runed-0.15.4.tgz",
+      "integrity": "sha512-kmbpstUd7v2FdlBM+MT78IyuOVd38tq/e7MHvVb0fnVCsPSPMD/m2Xh+wUhzg9qCJgxRjBbIKu68DlH/x5VXJA==",
+      "funding": [
+        "https://github.com/sponsors/huntabyte",
+        "https://github.com/sponsors/tglide"
+      ],
+      "dependencies": {
+        "esm-env": "^1.0.0"
+      },
+      "peerDependencies": {
+        "svelte": "^5.0.0-next.1"
+      }
+    },
     "node_modules/rxjs": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -32275,7 +32333,6 @@
       "version": "5.6.2",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.6.2.tgz",
       "integrity": "sha512-fyq4gCUW9OoR9X8I1BzmMVIOxzTlyCLI5gArRRTUuJj+jIUSHtud7c+MguQNGLv7Z/rGWxJyG9ZRFd/cFp/klA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.3.0",
@@ -32380,11 +32437,29 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/svelte-toolbelt": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/svelte-toolbelt/-/svelte-toolbelt-0.4.6.tgz",
+      "integrity": "sha512-k8OUvXBUifHZcAlWeY/HLg/4J0v5m2iOfOhn8fDmjt4AP8ZluaDh9eBFus9lFiLX6O5l6vKqI1dKL5wy7090NQ==",
+      "funding": [
+        "https://github.com/sponsors/huntabyte"
+      ],
+      "dependencies": {
+        "clsx": "^2.1.1",
+        "style-to-object": "^1.0.8"
+      },
+      "engines": {
+        "node": ">=18",
+        "pnpm": ">=8.7.0"
+      },
+      "peerDependencies": {
+        "svelte": "^5.0.0-next.126"
+      }
+    },
     "node_modules/svelte/node_modules/is-reference": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
       "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "^1.0.6"
@@ -35361,7 +35436,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
       "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/zod": {
@@ -35432,7 +35506,7 @@
     },
     "packages/mesh-common": {
       "name": "@meshsdk/common",
-      "version": "1.7.29",
+      "version": "1.8.0",
       "license": "Apache-2.0",
       "dependencies": {
         "bech32": "^2.0.0",
@@ -35449,12 +35523,12 @@
     },
     "packages/mesh-contract": {
       "name": "@meshsdk/contract",
-      "version": "1.7.29",
+      "version": "1.8.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@meshsdk/common": "1.7.29",
-        "@meshsdk/core": "1.7.29",
-        "@meshsdk/core-csl": "1.7.29"
+        "@meshsdk/common": "1.8.0",
+        "@meshsdk/core": "1.8.0",
+        "@meshsdk/core-csl": "1.8.0"
       },
       "devDependencies": {
         "@meshsdk/configs": "*",
@@ -35465,16 +35539,16 @@
     },
     "packages/mesh-core": {
       "name": "@meshsdk/core",
-      "version": "1.7.29",
+      "version": "1.8.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@meshsdk/common": "1.7.29",
-        "@meshsdk/core-csl": "1.7.29",
-        "@meshsdk/core-cst": "1.7.29",
-        "@meshsdk/provider": "1.7.29",
-        "@meshsdk/react": "1.7.29",
-        "@meshsdk/transaction": "1.7.29",
-        "@meshsdk/wallet": "1.7.29"
+        "@meshsdk/common": "1.8.0",
+        "@meshsdk/core-csl": "1.8.0",
+        "@meshsdk/core-cst": "1.8.0",
+        "@meshsdk/provider": "1.8.0",
+        "@meshsdk/react": "1.8.0",
+        "@meshsdk/transaction": "1.8.0",
+        "@meshsdk/wallet": "1.8.0"
       },
       "devDependencies": {
         "@meshsdk/configs": "*",
@@ -35485,12 +35559,12 @@
     },
     "packages/mesh-core-csl": {
       "name": "@meshsdk/core-csl",
-      "version": "1.7.29",
+      "version": "1.8.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@meshsdk/common": "1.7.29",
-        "@sidan-lab/sidan-csl-rs-browser": "0.9.9",
-        "@sidan-lab/sidan-csl-rs-nodejs": "0.9.9",
+        "@meshsdk/common": "1.8.0",
+        "@sidan-lab/sidan-csl-rs-browser": "0.9.11",
+        "@sidan-lab/sidan-csl-rs-nodejs": "0.9.11",
         "@types/base32-encoding": "^1.0.2",
         "base32-encoding": "^1.0.0",
         "bech32": "^2.0.0",
@@ -35498,7 +35572,7 @@
       },
       "devDependencies": {
         "@meshsdk/configs": "*",
-        "@meshsdk/provider": "1.7.29",
+        "@meshsdk/provider": "1.8.0",
         "@types/json-bigint": "^1.0.4",
         "eslint": "^8.57.0",
         "ts-jest": "^29.1.4",
@@ -35508,7 +35582,7 @@
     },
     "packages/mesh-core-cst": {
       "name": "@meshsdk/core-cst",
-      "version": "1.7.29",
+      "version": "1.8.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@cardano-sdk/core": "0.35.4",
@@ -35517,7 +35591,7 @@
         "@harmoniclabs/cbor": "1.3.0",
         "@harmoniclabs/plutus-data": "1.2.4",
         "@harmoniclabs/uplc": "1.2.4",
-        "@meshsdk/common": "1.7.29",
+        "@meshsdk/common": "1.8.0",
         "@stricahq/bip32ed25519": "^1.1.0",
         "@stricahq/cbors": "^1.0.3",
         "pbkdf2": "^3.1.2"
@@ -35534,17 +35608,18 @@
     },
     "packages/mesh-provider": {
       "name": "@meshsdk/provider",
-      "version": "1.7.29",
+      "version": "1.8.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@meshsdk/common": "1.7.29",
-        "@meshsdk/core-cst": "1.7.29",
+        "@meshsdk/common": "1.8.0",
+        "@meshsdk/core-cst": "1.8.0",
         "@utxorpc/sdk": "0.6.2",
         "@utxorpc/spec": "0.10.1",
         "axios": "^1.7.2"
       },
       "devDependencies": {
         "@meshsdk/configs": "*",
+        "@types/ws": "^8.5.13",
         "eslint": "^8.57.0",
         "tsup": "^8.0.2",
         "typescript": "^5.3.3"
@@ -35552,13 +35627,13 @@
     },
     "packages/mesh-react": {
       "name": "@meshsdk/react",
-      "version": "1.7.29",
+      "version": "1.8.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@fabianbormann/cardano-peer-connect": "^1.2.18",
-        "@meshsdk/common": "1.7.29",
-        "@meshsdk/transaction": "1.7.29",
-        "@meshsdk/wallet": "1.7.29",
+        "@meshsdk/common": "1.8.0",
+        "@meshsdk/transaction": "1.8.0",
+        "@meshsdk/wallet": "1.8.0",
         "@radix-ui/react-dialog": "^1.1.2",
         "@radix-ui/react-dropdown-menu": "^2.1.2",
         "@radix-ui/react-icons": "^1.3.2",
@@ -35581,10 +35656,11 @@
     },
     "packages/mesh-svelte": {
       "name": "@meshsdk/svelte",
-      "version": "1.7.29",
+      "version": "1.8.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@meshsdk/core": "1.7.29"
+        "@meshsdk/core": "1.8.0",
+        "bits-ui": "1.0.0-next.65"
       },
       "devDependencies": {
         "@meshsdk/configs": "*",
@@ -35609,12 +35685,12 @@
     },
     "packages/mesh-transaction": {
       "name": "@meshsdk/transaction",
-      "version": "1.7.29",
+      "version": "1.8.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@meshsdk/common": "1.7.29",
-        "@meshsdk/core-csl": "1.7.29",
-        "@meshsdk/core-cst": "1.7.29",
+        "@meshsdk/common": "1.8.0",
+        "@meshsdk/core-csl": "1.8.0",
+        "@meshsdk/core-cst": "1.8.0",
         "json-bigint": "^1.0.0"
       },
       "devDependencies": {
@@ -35627,13 +35703,13 @@
     },
     "packages/mesh-wallet": {
       "name": "@meshsdk/wallet",
-      "version": "1.7.29",
+      "version": "1.8.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@meshsdk/common": "1.7.29",
-        "@meshsdk/core-csl": "1.7.29",
-        "@meshsdk/core-cst": "1.7.29",
-        "@meshsdk/transaction": "1.7.29",
+        "@meshsdk/common": "1.8.0",
+        "@meshsdk/core-csl": "1.8.0",
+        "@meshsdk/core-cst": "1.8.0",
+        "@meshsdk/transaction": "1.8.0",
         "@nufi/dapp-client-cardano": "0.3.5",
         "@nufi/dapp-client-core": "0.3.5"
       },
@@ -35647,7 +35723,7 @@
     },
     "scripts/mesh-cli": {
       "name": "meshjs",
-      "version": "1.7.29",
+      "version": "1.8.0",
       "license": "Apache-2.0",
       "dependencies": {
         "chalk": "5.3.0",
diff --git a/packages/mesh-common/package.json b/packages/mesh-common/package.json
index e57b89fb8..0abfc7717 100644
--- a/packages/mesh-common/package.json
+++ b/packages/mesh-common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/common",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Contains constants, types and interfaces used across the SDK and different serialization libraries",
   "main": "./dist/index.cjs",
   "browser": "./dist/index.js",
diff --git a/packages/mesh-common/src/interfaces/fetcher.ts b/packages/mesh-common/src/interfaces/fetcher.ts
index 87e1a8660..ac22095e1 100644
--- a/packages/mesh-common/src/interfaces/fetcher.ts
+++ b/packages/mesh-common/src/interfaces/fetcher.ts
@@ -24,8 +24,6 @@ export interface IFetcher {
     policyId: string,
     cursor?: number | string,
   ): Promise<{ assets: Asset[]; next?: string | number | null }>;
-  fetchHandle(handle: string): Promise<object>;
-  fetchHandleAddress(handle: string): Promise<string>;
   fetchProtocolParameters(epoch: number): Promise<Protocol>;
   fetchTxInfo(hash: string): Promise<TransactionInfo>;
   fetchUTxOs(hash: string, index?: number): Promise<UTxO[]>;
diff --git a/packages/mesh-contract/package.json b/packages/mesh-contract/package.json
index 27ecea902..c4bfc41a7 100644
--- a/packages/mesh-contract/package.json
+++ b/packages/mesh-contract/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/contract",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "List of open-source smart contracts, complete with documentation, live demos, and end-to-end source code. https://meshjs.dev/smart-contracts",
   "main": "./dist/index.cjs",
   "browser": "./dist/index.js",
@@ -34,9 +34,9 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@meshsdk/common": "1.8.0",
-    "@meshsdk/core": "1.8.0",
-    "@meshsdk/core-csl": "1.8.0"
+    "@meshsdk/common": "1.8.1",
+    "@meshsdk/core": "1.8.1",
+    "@meshsdk/core-csl": "1.8.1"
   },
   "prettier": "@meshsdk/configs/prettier",
   "publishConfig": {
diff --git a/packages/mesh-core-csl/package.json b/packages/mesh-core-csl/package.json
index ac5805c83..bbe79bf8c 100644
--- a/packages/mesh-core-csl/package.json
+++ b/packages/mesh-core-csl/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/core-csl",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Types and utilities functions between Mesh and cardano-serialization-lib",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@meshsdk/configs": "*",
-    "@meshsdk/provider": "1.8.0",
+    "@meshsdk/provider": "1.8.1",
     "@types/json-bigint": "^1.0.4",
     "eslint": "^8.57.0",
     "ts-jest": "^29.1.4",
@@ -39,7 +39,7 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@meshsdk/common": "1.8.0",
+    "@meshsdk/common": "1.8.1",
     "@sidan-lab/sidan-csl-rs-browser": "0.9.11",
     "@sidan-lab/sidan-csl-rs-nodejs": "0.9.11",
     "@types/base32-encoding": "^1.0.2",
diff --git a/packages/mesh-core-cst/package.json b/packages/mesh-core-cst/package.json
index 98a7a150f..1b9eb94f2 100644
--- a/packages/mesh-core-cst/package.json
+++ b/packages/mesh-core-cst/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/core-cst",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Types and utilities functions between Mesh and cardano-js-sdk",
   "main": "./dist/index.cjs",
   "browser": "./dist/index.js",
@@ -42,7 +42,7 @@
     "@harmoniclabs/cbor": "1.3.0",
     "@harmoniclabs/plutus-data": "1.2.4",
     "@harmoniclabs/uplc": "1.2.4",
-    "@meshsdk/common": "1.8.0",
+    "@meshsdk/common": "1.8.1",
     "@stricahq/bip32ed25519": "^1.1.0",
     "@stricahq/cbors": "^1.0.3",
     "pbkdf2": "^3.1.2"
diff --git a/packages/mesh-core/package.json b/packages/mesh-core/package.json
index 31febb0b3..526876d7a 100644
--- a/packages/mesh-core/package.json
+++ b/packages/mesh-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/core",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Mesh SDK Core - https://meshjs.dev/",
   "main": "./dist/index.cjs",
   "browser": "./dist/index.js",
@@ -33,13 +33,13 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@meshsdk/common": "1.8.0",
-    "@meshsdk/core-csl": "1.8.0",
-    "@meshsdk/core-cst": "1.8.0",
-    "@meshsdk/provider": "1.8.0",
-    "@meshsdk/react": "1.8.0",
-    "@meshsdk/transaction": "1.8.0",
-    "@meshsdk/wallet": "1.8.0"
+    "@meshsdk/common": "1.8.1",
+    "@meshsdk/core-csl": "1.8.1",
+    "@meshsdk/core-cst": "1.8.1",
+    "@meshsdk/provider": "1.8.1",
+    "@meshsdk/react": "1.8.1",
+    "@meshsdk/transaction": "1.8.1",
+    "@meshsdk/wallet": "1.8.1"
   },
   "prettier": "@meshsdk/configs/prettier",
   "publishConfig": {
diff --git a/packages/mesh-provider/package.json b/packages/mesh-provider/package.json
index 4e89b1986..2bcb19a58 100644
--- a/packages/mesh-provider/package.json
+++ b/packages/mesh-provider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/provider",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Blockchain data providers - https://meshjs.dev/providers",
   "main": "./dist/index.cjs",
   "browser": "./dist/index.js",
@@ -29,13 +29,14 @@
   },
   "devDependencies": {
     "@meshsdk/configs": "*",
+    "@types/ws": "^8.5.13",
     "eslint": "^8.57.0",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@meshsdk/common": "1.8.0",
-    "@meshsdk/core-cst": "1.8.0",
+    "@meshsdk/common": "1.8.1",
+    "@meshsdk/core-cst": "1.8.1",
     "@utxorpc/sdk": "0.6.2",
     "@utxorpc/spec": "0.10.1",
     "axios": "^1.7.2"
diff --git a/packages/mesh-provider/src/hydra.ts b/packages/mesh-provider/src/hydra.ts
deleted file mode 100644
index 1b3d7cc4a..000000000
--- a/packages/mesh-provider/src/hydra.ts
+++ /dev/null
@@ -1,225 +0,0 @@
-import { EventEmitter } from "events";
-import axios, { AxiosInstance } from "axios";
-
-import {
-  AccountInfo,
-  Asset,
-  AssetMetadata,
-  BlockInfo,
-  castProtocol,
-  IFetcher,
-  ISubmitter,
-  Protocol,
-  toBytes,
-  TransactionInfo,
-  UTxO,
-} from "@meshsdk/common";
-
-import { HydraAssets, HydraUTxO } from "./types";
-import { parseHttpError } from "./utils";
-
-import "@meshsdk/core-cst";
-
-/**
- * Experimental Hydra provider - WIP and breaking changes are expected
- */
-export class HydraProvider {
-  private readonly _baseUrl: string;
-  private readonly _eventEmitter: EventEmitter;
-  private _client: WebSocket | undefined;
-  private readonly _axiosInstance: AxiosInstance;
-
-  constructor(url: string) {
-    this._baseUrl = url;
-    this._eventEmitter = new EventEmitter();
-
-    this._axiosInstance = axios.create({ baseURL: url });
-  }
-
-  /**
-   * Submit a transaction to the Hydra node. Note, unlike other providers, Hydra does not return a transaction hash.
-   * @param tx - The transaction in CBOR hex format
-   */
-  async submitTx(tx: string): Promise<void> {
-    try {
-      const payload = {
-        tag: "NewTx",
-        transaction: {
-          type: "Witnessed Tx ConwayEra",
-          description: "Ledger Cddl Format",
-          cborHex: tx,
-        },
-      };
-      this.check();
-      this.sendCommand(payload);
-      // throw parseHttpError(data);
-    } catch (error) {
-      throw parseHttpError(error);
-    }
-  }
-
-  async connect(): Promise<void> {
-    const _client = new WebSocket(this._baseUrl);
-
-    await new Promise((resolve) => {
-      _client.addEventListener("open", () => resolve(true), { once: true });
-    });
-
-    _client.onopen = () => {
-      console.log("Connected to Hydra");
-    };
-    _client.onerror = (error) => {
-      console.error("Error on Hydra websocket: ", error);
-    };
-    _client.onclose = () => {
-      console.error("Hydra websocket closed");
-    };
-    _client.onmessage = this.receiveMessage.bind(this);
-
-    this._client = _client;
-  }
-
-  check() {
-    if (this._client === undefined) {
-      throw new Error("HydraProvider not connected. Do connect() first.");
-    }
-  }
-
-  /**
-   * Initializes a new Head. This command is a no-op when a Head is already open and the server will output an CommandFailed message should this happen.
-   */
-  async initializesHead() {
-    this.check();
-    this.sendCommand({ tag: "Init" });
-  }
-
-  async fetchUtxoSnapshot(): Promise<UTxO[]> {
-    const { data, status } = await this._axiosInstance.get(`snapshot/utxo`);
-    if (status === 200) {
-      console.log("UTXOs: ", data);
-      const utxos: UTxO[] = [];
-      for (const [key, value] of Object.entries(data)) {
-        const utxo = this.toUTxO(value as HydraUTxO, key);
-        utxos.push(utxo);
-      }
-
-      return utxos;
-    }
-    throw parseHttpError(data);
-  }
-
-  async fetchAddressUTxOs(address: string): Promise<UTxO[]> {
-    const utxos = await this.fetchUtxoSnapshot();
-    return utxos.filter((utxo) => utxo.output.address === address);
-  }
-
-  async fetchProtocolParameters(): Promise<Protocol> {
-    try {
-      const { data, status } = await this._axiosInstance.get(
-        "protocol-parameters",
-      );
-
-      if (status === 200)
-        return castProtocol({
-          coinsPerUtxoSize: data.utxoCostPerByte,
-          collateralPercent: data.collateralPercentage,
-          maxBlockExMem: data.maxBlockExecutionUnits.memory,
-          maxBlockExSteps: data.maxBlockExecutionUnits.steps,
-          maxBlockHeaderSize: data.maxBlockHeaderSize,
-          maxBlockSize: data.maxBlockBodySize,
-          maxCollateralInputs: data.maxCollateralInputs,
-          maxTxExMem: data.maxTxExecutionUnits.memory,
-          maxTxExSteps: data.maxTxExecutionUnits.steps,
-          maxTxSize: data.maxTxSize,
-          maxValSize: data.maxValueSize,
-          minFeeA: data.txFeePerByte,
-          minFeeB: data.txFeeFixed,
-          minPoolCost: data.minPoolCost,
-          poolDeposit: data.stakePoolDeposit,
-          priceMem: data.executionUnitPrices.priceMemory,
-          priceStep: data.executionUnitPrices.priceSteps,
-        });
-
-      throw parseHttpError(data);
-    } catch (error) {
-      throw parseHttpError(error);
-    }
-  }
-  // fetchAccountInfo(address: string): Promise<AccountInfo> {
-  //   throw new Error("Method not implemented.");
-  // }
-  // fetchAssetAddresses(
-  //   asset: string,
-  // ): Promise<{ address: string; quantity: string }[]> {
-  //   throw new Error("Method not implemented.");
-  // }
-  // fetchAssetMetadata(asset: string): Promise<AssetMetadata> {
-  //   throw new Error("Method not implemented.");
-  // }
-  // fetchBlockInfo(hash: string): Promise<BlockInfo> {
-  //   throw new Error("Method not implemented.");
-  // }
-  // fetchCollectionAssets(
-  //   policyId: string,
-  //   cursor?: number | string,
-  // ): Promise<{ assets: Asset[]; next?: string | number | null }> {
-  //   throw new Error("Method not implemented.");
-  // }
-  // fetchHandle(handle: string): Promise<object> {
-  //   throw new Error("Method not implemented.");
-  // }
-  // fetchHandleAddress(handle: string): Promise<string> {
-  //   throw new Error("Method not implemented.");
-  // }
-  // fetchTxInfo(hash: string): Promise<TransactionInfo> {
-  //   throw new Error("Method not implemented.");
-  // }
-  // fetchUTxOs(hash: string): Promise<UTxO[]> {
-  //   throw new Error("Method not implemented.");
-  // }
-  // get(url: string): Promise<any> {
-  //   throw new Error("Method not implemented.");
-  // }
-
-  async receiveMessage(message: MessageEvent) {
-    const data = JSON.parse(message.data);
-    this._eventEmitter.emit("hydraMessage", data);
-  }
-
-  onMessage(callback: (message: unknown) => void) {
-    this._eventEmitter.on("hydraMessage", callback);
-  }
-
-  private sendCommand(data: {}) {
-    this._client!.send(JSON.stringify(data));
-  }
-
-  private toUTxO = (hUTxO: HydraUTxO, txId: string): UTxO => {
-    const [txHash, txIndex] = txId.split("#");
-
-    return {
-      input: {
-        outputIndex: Number(txIndex),
-        txHash: txHash!,
-      },
-      output: {
-        address: hUTxO.address,
-        amount: this.toAssets(hUTxO.value),
-        dataHash: hUTxO.datumhash ?? undefined,
-        plutusData: hUTxO.inlineDatum?.toString() ?? undefined, // TODO: cast to correct cbor
-        scriptHash: hUTxO.referenceScript?.toString() ?? undefined, // TODO: cast to correct cbor
-      },
-    };
-  };
-
-  private toAssets = (hAssets: HydraAssets): Asset[] => {
-    const assets: Asset[] = [];
-    for (const [policy, amount] of Object.entries(hAssets)) {
-      assets.push({
-        unit: policy,
-        quantity: amount.toString(),
-      });
-    }
-    return assets;
-  };
-}
diff --git a/packages/mesh-provider/src/hydra/convertor.ts b/packages/mesh-provider/src/hydra/convertor.ts
new file mode 100644
index 000000000..d0f75e9e4
--- /dev/null
+++ b/packages/mesh-provider/src/hydra/convertor.ts
@@ -0,0 +1,62 @@
+import { Asset, UTxO } from "@meshsdk/common";
+
+import { HydraAssets, HydraUTxO } from "./types";
+
+export function toUTxO(hUTxO: HydraUTxO, txId: string): UTxO {
+  const [txHash, txIndex] = txId.split("#");
+
+  // doing this has wasm error
+  // const inlineDatum = hUTxO.inlineDatum
+  //   ? csl.PlutusData.from_json(JSONBig.stringify(hUTxO.inlineDatum), 1).to_hex()
+  //   : undefined;
+
+  return {
+    input: {
+      outputIndex: Number(txIndex),
+      txHash: txHash!,
+    },
+    output: {
+      address: hUTxO.address,
+      amount: toAssets(hUTxO.value),
+      dataHash: hUTxO.datumhash ?? undefined,
+      plutusData: hUTxO.inlineDatum?.toString() ?? undefined, // TODO: cast to correct cbor
+      scriptHash: hUTxO.referenceScript?.toString() ?? undefined, // TODO: cast to correct cbor
+    },
+  };
+}
+
+export function toAssets(hAssets: HydraAssets): Asset[] {
+  const assets: Asset[] = [];
+  for (const policy of Object.keys(hAssets)) {
+    if (policy === "lovelace") {
+      assets.push({
+        unit: policy,
+        quantity: hAssets[policy].toString(),
+      });
+    } else {
+      for (const assetName of Object.keys(hAssets[policy]!)) {
+        assets.push({
+          unit: policy + assetName,
+          quantity: hAssets[policy]![assetName]!.toString(),
+        });
+      }
+    }
+  }
+  return assets;
+}
+
+export function toHydraAssets(assets: Asset[]): HydraAssets {
+  const hAssets: HydraAssets = {
+    lovelace: 0,
+  } as HydraAssets;
+  for (const asset of assets) {
+    if (asset.unit === "" || asset.unit === "lovelace") {
+      hAssets["lovelace"] = Number(asset.quantity);
+    } else {
+      hAssets[asset.unit.slice(0, 56)] = {
+        [asset.unit.slice(56)]: Number(asset.quantity),
+      };
+    }
+  }
+  return hAssets;
+}
diff --git a/packages/mesh-provider/src/hydra/hydra-connection.ts b/packages/mesh-provider/src/hydra/hydra-connection.ts
new file mode 100644
index 000000000..02d0a3f7d
--- /dev/null
+++ b/packages/mesh-provider/src/hydra/hydra-connection.ts
@@ -0,0 +1,100 @@
+import { EventEmitter } from "events";
+
+import { HYDRA_STATUS, HydraStatus } from "./types";
+
+export class HydraConnection extends EventEmitter {
+  _websocket: WebSocket | undefined;
+  _status: HydraStatus = HYDRA_STATUS.IDLE;
+  _websocketUrl: string;
+  private readonly _eventEmitter: EventEmitter;
+  private _connected: boolean = false;
+
+  constructor({
+    url,
+    eventEmitter,
+    history = false,
+  }: {
+    url: string;
+    eventEmitter: EventEmitter;
+    history?: boolean;
+  }) {
+    super();
+    const wsUrl = url.replace("http", "ws");
+    this._websocketUrl = `${wsUrl}/?history=${history ? "yes" : "no"}`;
+    this._eventEmitter = eventEmitter;
+  }
+
+  async connect() {
+    if (this._status !== HYDRA_STATUS.IDLE) {
+      return;
+    }
+
+    this._websocket = new WebSocket(this._websocketUrl);
+    this._status = HYDRA_STATUS.CONNECTING;
+
+    this._websocket.onopen = () => {
+      console.log("Connected to Hydra");
+      this._connected = true;
+    };
+    this._websocket.onerror = (error) => {
+      console.error(`Hydra error: ${error}`);
+    };
+    this._websocket.onclose = (code) => {
+      console.error("Hydra websocket closed", code);
+    };
+    this._websocket.onmessage = (data) => {
+      // console.log("Received message", JSON.parse(data.data));
+      const message = JSON.parse(data.data);
+      this._eventEmitter.emit("onmessage", message);
+      this.processStatus(message);
+    };
+  }
+
+  async disconnect() {
+    if (this._status === HYDRA_STATUS.IDLE) {
+      return;
+    }
+
+    if (this._websocket && this._websocket.readyState === WebSocket.OPEN) {
+      this._websocket.close(1007);
+    }
+
+    this._status = HYDRA_STATUS.IDLE;
+  }
+
+  send(data: any): void {
+    if (this._connected) {
+      this._websocket?.send(JSON.stringify(data));
+    }
+  }
+
+  async processStatus(message: {}) {
+    function getStatus(data: any): HydraStatus | null {
+      switch (data.headStatus) {
+        case "Open":
+          return HYDRA_STATUS.OPEN;
+      }
+
+      switch (data.tag) {
+        case "HeadIsInitializing":
+          return HYDRA_STATUS.INITIALIZING;
+        case "HeadIsOpen":
+          return HYDRA_STATUS.OPEN;
+        case "HeadIsClosed":
+          return HYDRA_STATUS.CLOSED;
+        case "ReadyToFanout":
+          return HYDRA_STATUS.FANOUT_POSSIBLE;
+        case "HeadIsFinalized":
+          return HYDRA_STATUS.FINAL;
+        default:
+          return null;
+      }
+    }
+
+    let status: HydraStatus | null = null;
+    if ((status = getStatus(message)) && status !== null) {
+      this._status = status;
+      this._eventEmitter.emit("onstatuschange", status);
+    }
+  }
+}
diff --git a/packages/mesh-provider/src/hydra/index.ts b/packages/mesh-provider/src/hydra/index.ts
new file mode 100644
index 000000000..549ff7a26
--- /dev/null
+++ b/packages/mesh-provider/src/hydra/index.ts
@@ -0,0 +1,224 @@
+import { EventEmitter } from "events";
+import axios, { AxiosInstance } from "axios";
+
+import {
+  AccountInfo,
+  Asset,
+  AssetMetadata,
+  BlockInfo,
+  castProtocol,
+  GovernanceProposalInfo,
+  IFetcher,
+  ISubmitter,
+  Protocol,
+  TransactionInfo,
+  UTxO,
+} from "@meshsdk/common";
+
+import { parseHttpError } from "../utils";
+import { toUTxO } from "./convertor";
+import { HydraConnection } from "./hydra-connection";
+import { HydraStatus, HydraUTxO } from "./types";
+
+/**
+ * HydraProvider is a tool for administrating & interacting with Hydra Heads.
+ *
+ * Usage:
+ * ```
+ * import { HydraProvider } from "@meshsdk/core";
+ *
+ * const hydraProvider = new HydraProvider({url:'http://123.45.67.890:4001'});
+ */
+export class HydraProvider implements IFetcher, ISubmitter {
+  private _connection: HydraConnection;
+  private _status: HydraStatus = "DISCONNECTED";
+  private readonly _eventEmitter: EventEmitter;
+  private readonly _axiosInstance: AxiosInstance;
+
+  constructor({ url, history = false }: { url: string; history?: boolean }) {
+    this._eventEmitter = new EventEmitter();
+    this._connection = new HydraConnection({
+      url: url,
+      eventEmitter: this._eventEmitter,
+      history: history,
+    });
+    this._axiosInstance = axios.create({ baseURL: url });
+  }
+
+  async connect() {
+    if (this._status !== "DISCONNECTED") {
+      return;
+    }
+    this._status = "CONNECTING";
+    this._connection.connect();
+  }
+
+  fetchAccountInfo(address: string): Promise<AccountInfo> {
+    throw new Error("Method not implemented.");
+  }
+
+  async fetchAddressUTxOs(address: string): Promise<UTxO[]> {
+    const utxos = await this.fetchUTxOs();
+    return utxos.filter((utxo) => utxo.output.address === address);
+  }
+
+  fetchAssetAddresses(
+    asset: string,
+  ): Promise<{ address: string; quantity: string }[]> {
+    throw new Error("Method not implemented.");
+  }
+
+  fetchAssetMetadata(asset: string): Promise<AssetMetadata> {
+    throw new Error("Method not implemented.");
+  }
+
+  fetchBlockInfo(hash: string): Promise<BlockInfo> {
+    throw new Error("Method not implemented.");
+  }
+
+  fetchCollectionAssets(
+    policyId: string,
+    cursor?: string | number | undefined,
+  ): Promise<{ assets: Asset[]; next: string | number | null }> {
+    throw new Error("Method not implemented.");
+  }
+
+  async fetchGovernanceProposal(
+    txHash: string,
+    certIndex: number,
+  ): Promise<GovernanceProposalInfo> {
+    throw new Error("Method not implemented");
+  }
+
+  async fetchProtocolParameters(epoch = Number.NaN): Promise<Protocol> {
+    try {
+      const { data, status } = await this._axiosInstance.get(
+        "protocol-parameters",
+      );
+
+      if (status === 200) {
+        const protocolParams = castProtocol({
+          coinsPerUtxoSize: data.utxoCostPerByte,
+          collateralPercent: data.collateralPercentage,
+          maxBlockExMem: data.maxBlockExecutionUnits.memory,
+          maxBlockExSteps: data.maxBlockExecutionUnits.steps,
+          maxBlockHeaderSize: data.maxBlockHeaderSize,
+          maxBlockSize: data.maxBlockBodySize,
+          maxCollateralInputs: data.maxCollateralInputs,
+          maxTxExMem: data.maxTxExecutionUnits.memory,
+          maxTxExSteps: data.maxTxExecutionUnits.steps,
+          maxTxSize: data.maxTxSize,
+          maxValSize: data.maxValueSize,
+          minFeeA: data.txFeePerByte,
+          minFeeB: data.txFeeFixed,
+          minPoolCost: data.minPoolCost,
+          poolDeposit: data.stakePoolDeposit,
+          priceMem: data.executionUnitPrices.priceMemory,
+          priceStep: data.executionUnitPrices.priceSteps,
+        });
+
+        // const { PlutusV1, PlutusV2, PlutusV3 } = data.costModels;
+
+        // return {
+        //   protocolParams,
+        //   plutusV1: PlutusV1,
+        //   plutusV2: PlutusV2,
+        //   plutusV3: PlutusV3,
+        // };
+
+        return protocolParams;
+      }
+
+      throw parseHttpError(data);
+    } catch (error) {
+      throw parseHttpError(error);
+    }
+  }
+
+  fetchTxInfo(hash: string): Promise<TransactionInfo> {
+    throw new Error("Method not implemented.");
+  }
+
+  async fetchUTxOs(): Promise<UTxO[]> {
+    const { data, status } = await this._axiosInstance.get(`snapshot/utxo`);
+    if (status === 200) {
+      const utxos: UTxO[] = [];
+      for (const [key, value] of Object.entries(data)) {
+        const utxo = toUTxO(value as HydraUTxO, key);
+        utxos.push(utxo);
+      }
+      return utxos;
+    }
+    throw parseHttpError(data);
+  }
+
+  /**
+   * A generic method to fetch data from a URL.
+   * @param url - The URL to fetch data from
+   * @returns - The data fetched from the URL
+   */
+  async get(url: string): Promise<any> {
+    try {
+      const { data, status } = await this._axiosInstance.get(url);
+      if (status === 200 || status == 202) {
+        return data;
+      }
+      throw parseHttpError(data);
+    } catch (error) {
+      throw parseHttpError(error);
+    }
+  }
+
+  /**
+   * Submit a transaction to the Hydra node. Note, unlike other providers, Hydra does not return a transaction hash.
+   * @param tx - The transaction in CBOR hex format
+   */
+  async submitTx(tx: string): Promise<string> {
+    try {
+      const payload = {
+        tag: "NewTx",
+        transaction: {
+          type: "Witnessed Tx ConwayEra",
+          description: "Ledger Cddl Format",
+          cborHex: tx,
+        },
+      };
+      this.send(payload);
+
+      const txId = await new Promise<string>((resolve) => {
+        this.onMessage((message) => {
+          if (message.transaction && message.transaction.cborHex === tx) {
+            if (message.tag === "TxValid") {
+              console.log("txid", message.transaction.txId);
+              resolve(message.transaction.txId);
+            } else if (message.tag == "TxInvalid") {
+              throw JSON.stringify(message.validationError);
+            }
+          }
+        });
+      });
+      return txId;
+    } catch (error) {
+      throw parseHttpError(error);
+    }
+  }
+
+  /**
+   * Initializes a new Head. This command is a no-op when a Head is already open and the server will output an CommandFailed message should this happen.
+   */
+  async initializesHead() {
+    this.send({ tag: "Init" });
+  }
+
+  send(data: any): void {
+    this._connection.send(data);
+  }
+
+  onMessage(callback: (message: any) => void) {
+    this._eventEmitter.on("onmessage", callback);
+  }
+
+  onStatusChange(callback: (status: HydraStatus) => void) {
+    this._eventEmitter.on("onstatuschange", callback);
+  }
+}
diff --git a/packages/mesh-provider/src/hydra/transactions/commit-utxo.ts b/packages/mesh-provider/src/hydra/transactions/commit-utxo.ts
new file mode 100644
index 000000000..71011f8f3
--- /dev/null
+++ b/packages/mesh-provider/src/hydra/transactions/commit-utxo.ts
@@ -0,0 +1,25 @@
+import { Asset, UTxO } from "@meshsdk/core";
+import { csl } from "@meshsdk/core-csl";
+
+export async function commitUtxo(utxo: UTxO) {
+  const txBuilder = csl.TransactionBuilder.new(
+    csl.TransactionBuilderConfigBuilder.new()
+      .fee_algo(csl.LinearFee.new(csl.BigNum.zero(), csl.BigNum.zero()))
+      .pool_deposit(csl.BigNum.from_str("500000000"))
+      .key_deposit(csl.BigNum.from_str("2000000"))
+      .max_value_size(5000)
+      .max_tx_size(16384)
+      .coins_per_utxo_byte(csl.BigNum.zero())
+      .ex_unit_prices(
+        csl.ExUnitPrices.new(
+          csl.UnitInterval.new(csl.BigNum.zero(), csl.BigNum.one()),
+          csl.UnitInterval.new(csl.BigNum.zero(), csl.BigNum.one()),
+        ),
+      )
+      .ref_script_coins_per_byte(
+        csl.UnitInterval.new(csl.BigNum.zero(), csl.BigNum.one()),
+      )
+      .deduplicate_explicit_ref_inputs_with_regular_inputs(true)
+      .build(),
+  );
+}
diff --git a/packages/mesh-provider/src/types/hydra.ts b/packages/mesh-provider/src/hydra/types/index.ts
similarity index 50%
rename from packages/mesh-provider/src/types/hydra.ts
rename to packages/mesh-provider/src/hydra/types/index.ts
index 4e8421f4f..12690fc58 100644
--- a/packages/mesh-provider/src/types/hydra.ts
+++ b/packages/mesh-provider/src/hydra/types/index.ts
@@ -1,3 +1,17 @@
+export const HYDRA_STATUS = {
+  IDLE: "IDLE",
+  DISCONNECTED: "DISCONNECTED",
+  CONNECTING: "CONNECTING",
+  CONNECTED: "CONNECTED",
+  INITIALIZING: "INITIALIZING",
+  OPEN: "OPEN",
+  CLOSED: "CLOSED",
+  FANOUT_POSSIBLE: "FANOUT_POSSIBLE",
+  FINAL: "FINAL",
+} as const;
+
+export type HydraStatus = (typeof HYDRA_STATUS)[keyof typeof HYDRA_STATUS];
+
 export type HydraUTxOs = {
   [x: string]: HydraUTxO;
 };
@@ -14,7 +28,12 @@ export type HydraUTxO = {
 
 export type HydraAssets = {
   lovelace: number;
-  [x: string]: number;
+} & {
+  [x: string]:
+    | {
+        [y: string]: number;
+      }
+    | undefined;
 };
 
 export type HydraReferenceScript = {
@@ -29,3 +48,10 @@ export type HydraReferenceScript = {
       | "PlutusScriptV3";
   };
 };
+
+export type HydraCommitTransaction = {
+  cborHex: string;
+  description: string;
+  txId: string;
+  type: string;
+};
diff --git a/packages/mesh-provider/src/types/index.ts b/packages/mesh-provider/src/types/index.ts
index 87f0fe3b3..1ac185f39 100644
--- a/packages/mesh-provider/src/types/index.ts
+++ b/packages/mesh-provider/src/types/index.ts
@@ -1,4 +1,3 @@
 export * from "./blockfrost";
 export * from "./koios";
-export * from "./maestro";
-export * from "./hydra";
+export * from "./maestro";
\ No newline at end of file
diff --git a/packages/mesh-react/package.json b/packages/mesh-react/package.json
index 2091d91ac..145661ff4 100644
--- a/packages/mesh-react/package.json
+++ b/packages/mesh-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/react",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "React component library - https://meshjs.dev/react",
   "main": "./dist/index.cjs",
   "browser": "./dist/index.js",
@@ -30,9 +30,9 @@
   },
   "dependencies": {
     "@fabianbormann/cardano-peer-connect": "^1.2.18",
-    "@meshsdk/common": "1.8.0",
-    "@meshsdk/transaction": "1.8.0",
-    "@meshsdk/wallet": "1.8.0",
+    "@meshsdk/common": "1.8.1",
+    "@meshsdk/transaction": "1.8.1",
+    "@meshsdk/wallet": "1.8.1",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.2",
diff --git a/packages/mesh-svelte/package.json b/packages/mesh-svelte/package.json
index 98a388cc7..cd4cbf0ad 100644
--- a/packages/mesh-svelte/package.json
+++ b/packages/mesh-svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/svelte",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Svelte component library - https://meshjs.dev/svelte",
   "type": "module",
   "exports": {
@@ -26,7 +26,7 @@
     "dev": "vite dev"
   },
   "dependencies": {
-    "@meshsdk/core": "1.8.0",
+    "@meshsdk/core": "1.8.1",
     "bits-ui": "1.0.0-next.65"
   },
   "devDependencies": {
diff --git a/packages/mesh-transaction/package.json b/packages/mesh-transaction/package.json
index 8e9b6ec2e..7cad820f1 100644
--- a/packages/mesh-transaction/package.json
+++ b/packages/mesh-transaction/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/transaction",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Transactions - https://meshjs.dev/apis/transaction",
   "main": "./dist/index.cjs",
   "browser": "./dist/index.js",
@@ -35,9 +35,9 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@meshsdk/common": "1.8.0",
-    "@meshsdk/core-csl": "1.8.0",
-    "@meshsdk/core-cst": "1.8.0",
+    "@meshsdk/common": "1.8.1",
+    "@meshsdk/core-csl": "1.8.1",
+    "@meshsdk/core-cst": "1.8.1",
     "json-bigint": "^1.0.0"
   },
   "prettier": "@meshsdk/configs/prettier",
diff --git a/packages/mesh-wallet/package.json b/packages/mesh-wallet/package.json
index 1e8835ea1..31308f819 100644
--- a/packages/mesh-wallet/package.json
+++ b/packages/mesh-wallet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/wallet",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Wallets - https://meshjs.dev/apis/wallets",
   "main": "./dist/index.cjs",
   "browser": "./dist/index.js",
@@ -35,10 +35,10 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@meshsdk/common": "1.8.0",
-    "@meshsdk/core-csl": "1.8.0",
-    "@meshsdk/core-cst": "1.8.0",
-    "@meshsdk/transaction": "1.8.0",
+    "@meshsdk/common": "1.8.1",
+    "@meshsdk/core-csl": "1.8.1",
+    "@meshsdk/core-cst": "1.8.1",
+    "@meshsdk/transaction": "1.8.1",
     "@nufi/dapp-client-cardano": "0.3.5",
     "@nufi/dapp-client-core": "0.3.5"
   },
diff --git a/scripts/mesh-cli/package.json b/scripts/mesh-cli/package.json
index 7a673ba15..fa5ee2c2f 100644
--- a/scripts/mesh-cli/package.json
+++ b/scripts/mesh-cli/package.json
@@ -3,7 +3,7 @@
   "description": "A quick and easy way to bootstrap your dApps on Cardano using Mesh.",
   "homepage": "https://meshjs.dev",
   "author": "MeshJS",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.cjs",