diff --git a/example/react-app/src/assets/keyIcon.svg b/example/react-app/src/assets/keyIcon.svg
index ec51013..0023c66 100644
--- a/example/react-app/src/assets/keyIcon.svg
+++ b/example/react-app/src/assets/keyIcon.svg
@@ -1,8 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" className="">
-    <path
-        fill="currentColor"
-        fill-rule="evenodd"
-        d="M18 8a6 6 0 0 1-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1 1 18 8m-6-4a1 1 0 1 0 0 2 2 2 0 0 1 2 2 1 1 0 0 0 2 0 4 4 0 0 0-4-4"
-        clip-rule="evenodd"
-    ></path>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-5"
+    style="width: 25px; height: 30px;">
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+        d="M15 7a2 2 0 0 1 2 2m4 0a6 6 0 0 1-7.743 5.743L11 17H9v2H7v2H4a1 1 0 0 1-1-1v-2.586a1 1 0 0 1 .293-.707l5.964-5.964A6 6 0 1 1 21 9"></path>
 </svg>
\ No newline at end of file
diff --git a/example/react-app/src/components/Account.tsx b/example/react-app/src/components/Account.tsx
index 762ad01..5752fe2 100644
--- a/example/react-app/src/components/Account.tsx
+++ b/example/react-app/src/components/Account.tsx
@@ -32,6 +32,7 @@ const Account = () => {
       <Divider />
       <Button
         className="text-sm w-full"
+        title="Copy"
         onClick={() => {
           navigator.clipboard.writeText(address);
           setAddressToShow("Copied!");
diff --git a/example/react-app/src/components/Passkeys.tsx b/example/react-app/src/components/Passkeys.tsx
index 8f673fa..b988253 100644
--- a/example/react-app/src/components/Passkeys.tsx
+++ b/example/react-app/src/components/Passkeys.tsx
@@ -1,7 +1,6 @@
 import Card from "./Card";
 import { usePlayground } from "../services/playground";
 import keyIcon from "../assets/keyIcon.svg";
-import deleteIcon from "../assets/deleteIcon.svg";
 import Button from "./Button";
 import Divider from "./Divider";
 import Badge from "./Badge";
@@ -30,18 +29,14 @@ const Passkeys = () => {
       {hasPasskeys && (
         <div className="divide-y divide-app-gray-200 ">
           {passkeys.map((passkey, index) => (
-            <div key={index} className="flex items-center py-4">
+            <div key={passkey.id} className="flex items-center py-4">
               <div className="mr-2">
                 <img src={keyIcon} className="text-app-gray-900 w-5 h-5" alt="key" />
               </div>
               <div>
-                <h4 className="text-sm font-semibold text-app-gray-900 dark:text-app-white">Passkey #{index + 1}</h4>
-                <p className="text-xs text-app-gray-400">{passkey?.created_at}</p>
-              </div>
-              <div className="ml-auto">
-                <button>
-                  <img src={deleteIcon} className="w-5" alt="key" />
-                </button>
+                <h4 className="text-sm font-semibold text-app-gray-900 dark:text-app-white">{passkey.name}</h4>
+                <p className="text-xs text-app-gray-400">{passkey.detail1}</p>
+                <p className="text-xs text-app-gray-400">{passkey.detail2}</p>
               </div>
             </div>
           ))}
diff --git a/example/react-app/src/components/WalletServices.tsx b/example/react-app/src/components/WalletServices.tsx
index 7ab18ba..fc02b2e 100644
--- a/example/react-app/src/components/WalletServices.tsx
+++ b/example/react-app/src/components/WalletServices.tsx
@@ -2,10 +2,29 @@ import Card from "./Card";
 import { usePlayground } from "../services/playground";
 import walletServices from "../assets/walletServices.svg";
 import Button from "./Button";
+import { useState } from "react";
 
 const WalletServices = () => {
+  const [signedMessage, setSignedMessage] = useState<string>("");
+  const [signingState, setSigningState] = useState<"success" | "error" | "">("");
   const { showCheckout, showWalletUI, showWalletScanner, signMessage } = usePlayground();
 
+  async function onSignMessage() {
+    try {
+      const signature = await signMessage();
+      setSignedMessage(signature);
+      setSigningState("success");
+    } catch (error) {
+      console.error(error);
+      setSigningState("error");
+    } finally {
+      setTimeout(() => {
+        setSignedMessage("");
+        setSigningState("");
+      }, 3000);
+    }
+  }
+
   return (
     <Card className="text-center">
       <div className="mb-4">
@@ -23,9 +42,20 @@ const WalletServices = () => {
         <Button className="w-full" onClick={showWalletScanner}>
           Connect to Applications
         </Button>
-        <Button className="w-full" onClick={signMessage}>
-          Sign Personal Message
-        </Button>
+        {signedMessage ? (
+          <div
+            className={`border p-2 border-app-gray-500 text-app-gray-500 flex flex-col items-center justify-center text-sm rounded-md min-h-9 ${
+              signingState === "success" ? "bg-app-green-100 text-app-green-500" : "bg-app-red-100 text-app-red-800"
+            }`}
+          >
+            <div>{signingState === "success" ? "Signature Success!" : "Signature Failed, Try again"}</div>
+            {signedMessage && <div className="break-all text-xxs leading-tight mt-1">{signedMessage}</div>}
+          </div>
+        ) : (
+          <Button className="w-full" onClick={onSignMessage}>
+            Sign Personal Message
+          </Button>
+        )}
       </div>
     </Card>
   );
diff --git a/example/react-app/src/services/playground.tsx b/example/react-app/src/services/playground.tsx
index 879e3ee..c33576f 100644
--- a/example/react-app/src/services/playground.tsx
+++ b/example/react-app/src/services/playground.tsx
@@ -11,6 +11,12 @@ import { shouldSupportPasskey } from "../utils";
 import { OpenloginUserInfo } from "@toruslabs/openlogin-utils";
 import RPC from "../evm.ethers";
 
+type PasskeysData = {
+  id: string;
+  name: string;
+  detail1: string;
+  detail2: string;
+};
 export interface IPlaygroundContext {
   address: string;
   balance: string;
@@ -22,7 +28,7 @@ export interface IPlaygroundContext {
   playgroundConsoleTitle: string;
   playgroundConsoleData: string;
   hasPasskeys: boolean;
-  passkeys: Record<string, string>[];
+  passkeys: PasskeysData[];
   isCancelModalOpen: boolean;
   showRegisterPasskeyModal: boolean;
   showInfoPopup: boolean;
@@ -36,7 +42,7 @@ export interface IPlaygroundContext {
   showCheckout: () => void;
   showWalletUI: () => void;
   showWalletScanner: () => void;
-  signMessage: () => void;
+  signMessage: () => Promise<string>;
   sendTransaction: () => void;
   toggleCancelModal: (isOpen: boolean) => void;
   toggleRegisterPasskeyModal: () => void;
@@ -69,7 +75,7 @@ export const PlaygroundContext = createContext<IPlaygroundContext>({
   showCheckout: async () => null,
   showWalletUI: async () => null,
   showWalletScanner: async () => null,
-  signMessage: async () => null,
+  signMessage: async () => "",
   sendTransaction: async () => null,
   toggleCancelModal: async () => null,
   toggleRegisterPasskeyModal: async () => null,
@@ -136,7 +142,7 @@ export const Playground = ({ children }: IPlaygroundProps) => {
   const [showRegisterPasskeyModal, setShowRegisterPasskeyModal] = useState<boolean>(false);
   const [showInfoPopup, setShowInfoPopup] = useState<boolean>(false);
   const [infoPopupCopy, setInfoPopupCopy] = useState<InfoPopupCopy>({});
-  const [passkeys, setPasskeys] = useState<Record<string, string>[]>([]);
+  const [passkeys, setPasskeys] = useState<PasskeysData[]>([]);
 
   // Dialog
   const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
@@ -260,14 +266,15 @@ export const Playground = ({ children }: IPlaygroundProps) => {
     await wsPlugin.showWalletUi();
   };
 
-  const signMessage = async () => {
+  const signMessage = async (): Promise<string> => {
     if (!provider) {
       uiConsole("No provider found");
-      return;
+      return "";
     }
     const rpc = new RPC(provider);
     const result = await rpc.signMessage();
     uiConsole(result);
+    return result;
   };
 
   const sendTransaction = async () => {
@@ -372,9 +379,17 @@ export const Playground = ({ children }: IPlaygroundProps) => {
           setChainId(`0x${chainId}`);
 
           const res = (await plugin?.listAllPasskeys()) as unknown as Record<string, string>[];
-          console.log("passkeys", res);
           setHasPasskeys(res.length > 0);
-          setPasskeys(res);
+          setPasskeys(
+            res.map((passkey) => {
+              return {
+                id: passkey.id,
+                name: passkey.provider_name,
+                detail1: `${passkey.browser} ${passkey.browser_version} (${passkey.os})`,
+                detail2: new Date(passkey.updated_at).toLocaleString(),
+              };
+            })
+          );
         });
         web3authSfa.on(ADAPTER_EVENTS.DISCONNECTED, () => {
           console.log("sfa:disconnected");
diff --git a/example/react-app/tailwind.config.js b/example/react-app/tailwind.config.js
index b7ce707..a0498d8 100644
--- a/example/react-app/tailwind.config.js
+++ b/example/react-app/tailwind.config.js
@@ -3,6 +3,9 @@ module.exports = {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
+      fontSize: {
+        xxs: "0.625rem",
+      },
       colors: {
         primary: "#0364FF",
         purple_100: "#EDEBFE",