diff --git a/package.json b/package.json
index a5c97e7..91b6a1f 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "@farcaster/auth-kit": "^0.6.0",
     "@farcaster/frame-core": "^0.0.19",
     "@farcaster/frame-node": "^0.0.7",
-    "@farcaster/frame-sdk": "^0.0.20",
+    "@farcaster/frame-sdk": "^0.0.21",
     "@farcaster/frame-wagmi-connector": "^0.0.6",
     "@tanstack/react-query": "^5.61.0",
     "@upstash/redis": "^1.34.3",
diff --git a/src/components/Demo.tsx b/src/components/Demo.tsx
index 46cebce..f0b0fe3 100644
--- a/src/components/Demo.tsx
+++ b/src/components/Demo.tsx
@@ -243,204 +243,211 @@ export default function Demo(
   }
 
   return (
-    <div className="w-[300px] mx-auto py-4 px-2">
-      <h1 className="text-2xl font-bold text-center mb-4">{title}</h1>
+    <div style={{ 
+      paddingTop: context?.client.safeAreaInsets?.top ?? 0, 
+      paddingBottom: context?.client.safeAreaInsets?.bottom ?? 0,
+      paddingLeft: context?.client.safeAreaInsets?.left ?? 0,
+      paddingRight: context?.client.safeAreaInsets?.right ?? 0 ,
+    }}>
+      <div className="w-[300px] mx-auto py-2 px-2">
+        <h1 className="text-2xl font-bold text-center mb-4">{title}</h1>
 
-      <div className="mb-4">
-        <h2 className="font-2xl font-bold">Context</h2>
-        <button
-          onClick={toggleContext}
-          className="flex items-center gap-2 transition-colors"
-        >
-          <span
-            className={`transform transition-transform ${
-              isContextOpen ? "rotate-90" : ""
-            }`}
+        <div className="mb-4">
+          <h2 className="font-2xl font-bold">Context</h2>
+          <button
+            onClick={toggleContext}
+            className="flex items-center gap-2 transition-colors"
           >
-            ➤
-          </span>
-          Tap to expand
-        </button>
+            <span
+              className={`transform transition-transform ${
+                isContextOpen ? "rotate-90" : ""
+              }`}
+            >
+              ➤
+            </span>
+            Tap to expand
+          </button>
 
-        {isContextOpen && (
-          <div className="p-4 mt-2 bg-gray-100 dark:bg-gray-800 rounded-lg">
-            <pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
-              {JSON.stringify(context, null, 2)}
-            </pre>
-          </div>
-        )}
-      </div>
-
-      <div>
-        <h2 className="font-2xl font-bold">Actions</h2>
-
-        <div className="mb-4">
-          <div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
-            <pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
-              sdk.actions.signIn
-            </pre>
-          </div>
-          <SignIn />
-        </div>
-
-        <div className="mb-4">
-          <div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
-            <pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
-              sdk.actions.openUrl
-            </pre>
-          </div>
-          <Button onClick={openUrl}>Open Link</Button>
-        </div>
-
-        <div className="mb-4">
-          <div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
-            <pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
-              sdk.actions.openUrl
-            </pre>
-          </div>
-          <Button onClick={openWarpcastUrl}>Open Warpcast Link</Button>
-        </div>
-
-        <div className="mb-4">
-          <div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
-            <pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
-              sdk.actions.close
-            </pre>
-          </div>
-          <Button onClick={close}>Close Frame</Button>
-        </div>
-      </div>
-
-      <div className="mb-4">
-        <h2 className="font-2xl font-bold">Last event</h2>
-
-        <div className="p-4 mt-2 bg-gray-100 dark:bg-gray-800 rounded-lg">
-          <pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
-            {lastEvent || "none"}
-          </pre>
-        </div>
-      </div>
-
-      <div>
-        <h2 className="font-2xl font-bold">Add to client & notifications</h2>
-
-        <div className="mt-2 mb-4 text-sm">
-          Client fid {context?.client.clientFid},
-          {added ? " frame added to client," : " frame not added to client,"}
-          {notificationDetails
-            ? " notifications enabled"
-            : " notifications disabled"}
-        </div>
-
-        <div className="mb-4">
-          <div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
-            <pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
-              sdk.actions.addFrame
-            </pre>
-          </div>
-          {addFrameResult && (
-            <div className="mb-2 text-sm">
-              Add frame result: {addFrameResult}
+          {isContextOpen && (
+            <div className="p-4 mt-2 bg-gray-100 dark:bg-gray-800 rounded-lg">
+              <pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
+                {JSON.stringify(context, null, 2)}
+              </pre>
             </div>
           )}
-          <Button onClick={addFrame} disabled={added}>
-            Add frame to client
-          </Button>
         </div>
 
-        {sendNotificationResult && (
-          <div className="mb-2 text-sm">
-            Send notification result: {sendNotificationResult}
-          </div>
-        )}
-        <div className="mb-4">
-          <Button onClick={sendNotification} disabled={!notificationDetails}>
-            Send notification
-          </Button>
-        </div>
-      </div>
+        <div>
+          <h2 className="font-2xl font-bold">Actions</h2>
 
-      <div>
-        <h2 className="font-2xl font-bold">Wallet</h2>
-
-        {address && (
-          <div className="my-2 text-xs">
-            Address: <pre className="inline">{truncateAddress(address)}</pre>
-          </div>
-        )}
-
-        {chainId && (
-          <div className="my-2 text-xs">
-            Chain ID: <pre className="inline">{chainId}</pre>
-          </div>
-        )}
-
-        <div className="mb-4">
-          <Button
-            onClick={() =>
-              isConnected
-                ? disconnect()
-                : connect({ connector: config.connectors[0] })
-            }
-          >
-            {isConnected ? "Disconnect" : "Connect"}
-          </Button>
-        </div>
-
-        <div className="mb-4">
-          <SignMessage />
-        </div>
-
-        {isConnected && (
-          <>
-            <div className="mb-4">
-              <SendEth />
+          <div className="mb-4">
+            <div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
+              <pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
+                sdk.actions.signIn
+              </pre>
             </div>
-            <div className="mb-4">
-              <Button
-                onClick={sendTx}
-                disabled={!isConnected || isSendTxPending}
-                isLoading={isSendTxPending}
-              >
-                Send Transaction (contract)
-              </Button>
-              {isSendTxError && renderError(sendTxError)}
-              {txHash && (
-                <div className="mt-2 text-xs">
-                  <div>Hash: {truncateAddress(txHash)}</div>
-                  <div>
-                    Status:{" "}
-                    {isConfirming
-                      ? "Confirming..."
-                      : isConfirmed
-                      ? "Confirmed!"
-                      : "Pending"}
+            <SignIn />
+          </div>
+
+          <div className="mb-4">
+            <div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
+              <pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
+                sdk.actions.openUrl
+              </pre>
+            </div>
+            <Button onClick={openUrl}>Open Link</Button>
+          </div>
+
+          <div className="mb-4">
+            <div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
+              <pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
+                sdk.actions.openUrl
+              </pre>
+            </div>
+            <Button onClick={openWarpcastUrl}>Open Warpcast Link</Button>
+          </div>
+
+          <div className="mb-4">
+            <div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
+              <pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
+                sdk.actions.close
+              </pre>
+            </div>
+            <Button onClick={close}>Close Frame</Button>
+          </div>
+        </div>
+
+        <div className="mb-4">
+          <h2 className="font-2xl font-bold">Last event</h2>
+
+          <div className="p-4 mt-2 bg-gray-100 dark:bg-gray-800 rounded-lg">
+            <pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
+              {lastEvent || "none"}
+            </pre>
+          </div>
+        </div>
+
+        <div>
+          <h2 className="font-2xl font-bold">Add to client & notifications</h2>
+
+          <div className="mt-2 mb-4 text-sm">
+            Client fid {context?.client.clientFid},
+            {added ? " frame added to client," : " frame not added to client,"}
+            {notificationDetails
+              ? " notifications enabled"
+              : " notifications disabled"}
+          </div>
+
+          <div className="mb-4">
+            <div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
+              <pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
+                sdk.actions.addFrame
+              </pre>
+            </div>
+            {addFrameResult && (
+              <div className="mb-2 text-sm">
+                Add frame result: {addFrameResult}
+              </div>
+            )}
+            <Button onClick={addFrame} disabled={added}>
+              Add frame to client
+            </Button>
+          </div>
+
+          {sendNotificationResult && (
+            <div className="mb-2 text-sm">
+              Send notification result: {sendNotificationResult}
+            </div>
+          )}
+          <div className="mb-4">
+            <Button onClick={sendNotification} disabled={!notificationDetails}>
+              Send notification
+            </Button>
+          </div>
+        </div>
+
+        <div>
+          <h2 className="font-2xl font-bold">Wallet</h2>
+
+          {address && (
+            <div className="my-2 text-xs">
+              Address: <pre className="inline">{truncateAddress(address)}</pre>
+            </div>
+          )}
+
+          {chainId && (
+            <div className="my-2 text-xs">
+              Chain ID: <pre className="inline">{chainId}</pre>
+            </div>
+          )}
+
+          <div className="mb-4">
+            <Button
+              onClick={() =>
+                isConnected
+                  ? disconnect()
+                  : connect({ connector: config.connectors[0] })
+              }
+            >
+              {isConnected ? "Disconnect" : "Connect"}
+            </Button>
+          </div>
+
+          <div className="mb-4">
+            <SignMessage />
+          </div>
+
+          {isConnected && (
+            <>
+              <div className="mb-4">
+                <SendEth />
+              </div>
+              <div className="mb-4">
+                <Button
+                  onClick={sendTx}
+                  disabled={!isConnected || isSendTxPending}
+                  isLoading={isSendTxPending}
+                >
+                  Send Transaction (contract)
+                </Button>
+                {isSendTxError && renderError(sendTxError)}
+                {txHash && (
+                  <div className="mt-2 text-xs">
+                    <div>Hash: {truncateAddress(txHash)}</div>
+                    <div>
+                      Status:{" "}
+                      {isConfirming
+                        ? "Confirming..."
+                        : isConfirmed
+                        ? "Confirmed!"
+                        : "Pending"}
+                    </div>
                   </div>
-                </div>
-              )}
-            </div>
-            <div className="mb-4">
-              <Button
-                onClick={signTyped}
-                disabled={!isConnected || isSignTypedPending}
-                isLoading={isSignTypedPending}
-              >
-                Sign Typed Data
-              </Button>
-              {isSignTypedError && renderError(signTypedError)}
-            </div>
-            <div className="mb-4">
-              <Button
-                onClick={handleSwitchChain}
-                disabled={isSwitchChainPending}
-                isLoading={isSwitchChainPending}
-              >
-                Switch to {chainId === base.id ? "Optimism" : "Base"}
-              </Button>
-              {isSwitchChainError && renderError(switchChainError)}
-            </div>
-          </>
-        )}
+                )}
+              </div>
+              <div className="mb-4">
+                <Button
+                  onClick={signTyped}
+                  disabled={!isConnected || isSignTypedPending}
+                  isLoading={isSignTypedPending}
+                >
+                  Sign Typed Data
+                </Button>
+                {isSignTypedError && renderError(signTypedError)}
+              </div>
+              <div className="mb-4">
+                <Button
+                  onClick={handleSwitchChain}
+                  disabled={isSwitchChainPending}
+                  isLoading={isSwitchChainPending}
+                >
+                  Switch to {chainId === base.id ? "Optimism" : "Base"}
+                </Button>
+                {isSwitchChainError && renderError(switchChainError)}
+              </div>
+            </>
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/yarn.lock b/yarn.lock
index a243553..828ff74 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -134,6 +134,14 @@
     qrcode "^1.5.3"
     react-remove-scroll "^2.5.7"
 
+"@farcaster/frame-core@0.0.20":
+  version "0.0.20"
+  resolved "https://registry.yarnpkg.com/@farcaster/frame-core/-/frame-core-0.0.20.tgz#2e872db2d17b20d12d602510b5dc6dfb39e942b6"
+  integrity sha512-MMHMy/wSFpCThJKaX+MKGZTZeAPDEMD2uXMsfRlQ/DrLtfWR7R8NuOjoPLGaipmPVNTzIBJm4BJ0+71zitdSGQ==
+  dependencies:
+    ox "^0.4.0"
+    zod "^3.23.8"
+
 "@farcaster/frame-core@^0.0.19":
   version "0.0.19"
   resolved "https://registry.yarnpkg.com/@farcaster/frame-core/-/frame-core-0.0.19.tgz#76621fe6e207c3a5c78a22aa679bbbd7beafdd11"
@@ -150,12 +158,12 @@
     "@farcaster/frame-core" "^0.0.19"
     ox "^0.4.0"
 
-"@farcaster/frame-sdk@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@farcaster/frame-sdk/-/frame-sdk-0.0.20.tgz#253dba9a1aba23c63e01617720835fe6b2b0880b"
-  integrity sha512-9EbB3A9V1ZSH4NvhHVbylcDVNevJqpuGkwz4I+0bKF2936qxvMlcWclDZVEmfO/woYH0ZQgy47YYRIiS3YpIQw==
+"@farcaster/frame-sdk@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@farcaster/frame-sdk/-/frame-sdk-0.0.21.tgz#f5d595003c5e88233cdf63e3793a35c4d6617413"
+  integrity sha512-FaeHdaIRQP6VqBtnwcrgggWcE+a/0hWzuIpp5NcnfYvo8a1JMpkOXspWFAa3fYfCyl9Dm9QF6jXt+T5tiALsPQ==
   dependencies:
-    "@farcaster/frame-core" "^0.0.19"
+    "@farcaster/frame-core" "0.0.20"
     comlink "^4.4.2"
     eventemitter3 "^5.0.1"
     ox "^0.4.0"
@@ -4838,7 +4846,16 @@ strict-uri-encode@^2.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
   integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4933,7 +4950,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==