diff --git a/apps/playground/src/pages/apis/utilities/deserializers/deserialize-address.tsx b/apps/playground/src/pages/apis/utilities/deserializers/deserialize-address.tsx
new file mode 100644
index 000000000..3e78bec66
--- /dev/null
+++ b/apps/playground/src/pages/apis/utilities/deserializers/deserialize-address.tsx
@@ -0,0 +1,63 @@
+import { useState } from "react";
+
+import { deserializeAddress } from "@meshsdk/core";
+
+import Input from "~/components/form/input";
+import InputTable from "~/components/sections/input-table";
+import LiveCodeDemo from "~/components/sections/live-code-demo";
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import { demoAddresses } from "~/data/cardano";
+
+export default function DeserializeAddress() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="deserializeAddress"
+      title="Deserialize Address"
+      leftSection={Left()}
+      rightSection={Right()}
+    />
+  );
+}
+
+function Left() {
+  return (
+    <>
+      <p>
+        Deserialize bech32 address into payment and staking parts, with
+        visibility of whether they are script or key hash.
+      </p>
+    </>
+  );
+}
+
+function Right() {
+  const [userInput, setUserInput] = useState<string>(
+    demoAddresses.testnetPayment,
+  );
+
+  async function runDemo() {
+    return deserializeAddress(userInput);
+  }
+
+  let codeSnippet = `deserializeAddress('${userInput}');`;
+
+  return (
+    <LiveCodeDemo
+      title="Deserialize Address"
+      subtitle="Convert bech32 address to The deserialized address object"
+      code={codeSnippet}
+      runCodeFunction={runDemo}
+    >
+      <InputTable
+        listInputs={[
+          <Input
+            value={userInput}
+            onChange={(e) => setUserInput(e.target.value)}
+            label="Address"
+            key={0}
+          />,
+        ]}
+      />
+    </LiveCodeDemo>
+  );
+}
diff --git a/apps/playground/src/pages/apis/utilities/deserializers/index.tsx b/apps/playground/src/pages/apis/utilities/deserializers/index.tsx
index 6df1900eb..0b25bd5ca 100644
--- a/apps/playground/src/pages/apis/utilities/deserializers/index.tsx
+++ b/apps/playground/src/pages/apis/utilities/deserializers/index.tsx
@@ -4,10 +4,11 @@ import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth";
 import TitleIconDescriptionBody from "~/components/sections/title-icon-description-body";
 import Metatags from "~/components/site/metatags";
 import { metaDeserializers } from "~/data/links-utilities";
+import DeserializeAddress from "./deserialize-address";
 
 const ReactPage: NextPage = () => {
   const sidebarItems = [
-    { label: "Coming soon", to: "resolveDataHash" },
+    { label: "Deserialize Address", to: "deserializeAddress" },
   ];
 
   return (
@@ -24,6 +25,8 @@ const ReactPage: NextPage = () => {
         >
           <></>
         </TitleIconDescriptionBody>
+
+        <DeserializeAddress />
       </SidebarFullwidth>
     </>
   );
diff --git a/apps/playground/src/pages/apis/utilities/deserializers/resolve-data-hash.tsx b/apps/playground/src/pages/apis/utilities/deserializers/resolve-data-hash.tsx
deleted file mode 100644
index ae59bbb55..000000000
--- a/apps/playground/src/pages/apis/utilities/deserializers/resolve-data-hash.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { useState } from "react";
-import Link from "~/components/link";
-
-import { Data } from "@meshsdk/core";
-import { resolveDataHash } from "@meshsdk/core";
-
-import Input from "~/components/form/input";
-import InputTable from "~/components/sections/input-table";
-import LiveCodeDemo from "~/components/sections/live-code-demo";
-import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
-
-export default function ResolveDataHash() {
-  return (
-    <TwoColumnsScroll
-      sidebarTo="resolveDataHash"
-      title="Resolve Data Hash"
-      leftSection={Left()}
-      rightSection={Right()}
-    />
-  );
-}
-
-function Left() {
-  return (
-    <>
-      <p>
-        Converts datum into hash. Getting the hash is useful when you need to
-        query for the UTXO that contain the assets you need for your
-        transaction's input.
-      </p>
-      <p>
-        Explore <Link href="/apis/transaction">Transaction</Link> to learn more
-        about designing Datum, and learn how to query for UTXOs containing the
-        datum hash.
-      </p>
-    </>
-  );
-}
-
-function Right() {
-  const [userInput, setUserInput] = useState<string>("supersecretdatum");
-
-  async function runDemo() {
-    const datum: Data = userInput;
-    const dataHash = resolveDataHash(datum);
-    return dataHash;
-  }
-
-  let codeSnippet = `resolveDataHash('${userInput}');`;
-
-  return (
-    <LiveCodeDemo
-      title="Resolve Data Hash"
-      subtitle="Convert datum into hash"
-      code={codeSnippet}
-      runCodeFunction={runDemo}
-    >
-      <InputTable
-        listInputs={[
-          <Input
-            value={userInput}
-            onChange={(e) => setUserInput(e.target.value)}
-            label="Datum"
-            key={0}
-          />,
-        ]}
-      />
-    </LiveCodeDemo>
-  );
-}
diff --git a/apps/playground/src/pages/apis/utilities/serializers/index.tsx b/apps/playground/src/pages/apis/utilities/serializers/index.tsx
index f7b98874c..277dcdcc4 100644
--- a/apps/playground/src/pages/apis/utilities/serializers/index.tsx
+++ b/apps/playground/src/pages/apis/utilities/serializers/index.tsx
@@ -5,9 +5,13 @@ import TitleIconDescriptionBody from "~/components/sections/title-icon-descripti
 import Metatags from "~/components/site/metatags";
 import { metaSerializers } from "~/data/links-utilities";
 import SerializeNativeScript from "./serialize-native-script";
+import SerializePlutusScript from "./serialize-plutus-script";
 
 const ReactPage: NextPage = () => {
-  const sidebarItems = [{ label: "Coming soon", to: "resolveDataHash" }];
+  const sidebarItems = [
+    { label: "Serialize Native Script", to: "serializeNativeScript" },
+    { label: "Serialize Plutus Script", to: "serializePlutusScript" },
+  ];
 
   return (
     <>
@@ -25,6 +29,7 @@ const ReactPage: NextPage = () => {
         </TitleIconDescriptionBody>
 
         <SerializeNativeScript />
+        <SerializePlutusScript />
       </SidebarFullwidth>
     </>
   );
diff --git a/apps/playground/src/pages/apis/utilities/serializers/serialize-plutus-script.tsx b/apps/playground/src/pages/apis/utilities/serializers/serialize-plutus-script.tsx
new file mode 100644
index 000000000..860715242
--- /dev/null
+++ b/apps/playground/src/pages/apis/utilities/serializers/serialize-plutus-script.tsx
@@ -0,0 +1,48 @@
+import { PlutusScript, serializePlutusScript } from "@meshsdk/core";
+
+import LiveCodeDemo from "~/components/sections/live-code-demo";
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import { demoPlutusAlwaysSucceedScript } from "~/data/cardano";
+
+export default function SerializePlutusScript() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="serializePlutusScript"
+      title="Serialize Plutus Script"
+      leftSection={Left()}
+      rightSection={Right()}
+    />
+  );
+}
+
+function Left() {
+  return (
+    <>
+      <p>Serialize Plutus script into bech32 address.</p>
+    </>
+  );
+}
+
+function Right() {
+  async function runDemo() {
+    const script: PlutusScript = {
+      code: demoPlutusAlwaysSucceedScript,
+      version: "V2",
+    };
+
+    const address = serializePlutusScript(script);
+
+    return address;
+  }
+
+  let codeSnippet = ``;
+
+  return (
+    <LiveCodeDemo
+      title="Serialize Plutus Script"
+      subtitle="Serialize Plutus script into bech32 address"
+      code={codeSnippet}
+      runCodeFunction={runDemo}
+    ></LiveCodeDemo>
+  );
+}