diff --git a/components/editorjs/tools/PageTransition.tsx b/components/editorjs/tools/PageTransition.tsx
index 8877839279..3196c3c4df 100644
--- a/components/editorjs/tools/PageTransition.tsx
+++ b/components/editorjs/tools/PageTransition.tsx
@@ -20,19 +20,21 @@ export default class PageTransition implements BlockTool {
 
   constructor({
     data,
+    api,
   }: {
     api: API;
     config?: ToolConfig;
     data?: PageTransitionData;
   }) {
-    this.submitLabel = data.label || "Submit";
+    this.api = api;
+    this.submitLabel = data.submitLabel || "Submit";
   }
 
   save(block: HTMLDivElement) {
     return {
       submitLabel: (
         block.firstElementChild.firstElementChild
-          .firstElementChild as HTMLInputElement
+          .firstElementChild as HTMLElement
       ).innerHTML,
     };
   }
@@ -40,8 +42,8 @@ export default class PageTransition implements BlockTool {
   render(): HTMLElement {
     const container = document.createElement("div");
     const toolView = (
-      <div className="my-8">
-        <div className="inline-flex items-center px-4 py-3 text-sm font-medium text-white bg-gray-700 border border-transparent rounded-md shadow-sm hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+      <div className="relative mt-16 mb-8">
+        <div className="absolute inline-flex items-center px-4 py-3 text-sm font-medium text-white bg-gray-700 border border-transparent rounded-md shadow-sm left -top-14 hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
           <div
             contentEditable
             id="label"
diff --git a/components/frontend/App.tsx b/components/frontend/App.tsx
index d87b4ba03a..e6b6db3d3a 100644
--- a/components/frontend/App.tsx
+++ b/components/frontend/App.tsx
@@ -2,6 +2,7 @@ import { GlobeAltIcon, MailIcon, PhoneIcon } from "@heroicons/react/solid";
 import { SnoopElement, SnoopForm, SnoopPage } from "@snoopforms/react";
 import { useMemo } from "react";
 import { trackPosthogEvent } from "../../lib/posthog";
+import { generateId } from "../../lib/utils";
 import Loading from "../Loading";
 
 export default function App({ id = "", formId, blocks, localOnly = false }) {
@@ -16,6 +17,7 @@ export default function App({ id = "", formId, blocks, localOnly = false }) {
         currentPage.blocks.push(block);
       } else {
         currentPage.blocks.push({
+          id: generateId(10),
           data: {
             label: block.data.submitLabel,
           },
diff --git a/package.json b/package.json
index 8a5efbfed4..980f22dfd2 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "@headlessui/react": "^1.6.1",
     "@heroicons/react": "^1.0.6",
     "@prisma/client": "^4.1.0",
-    "@snoopforms/react": "^0.2.1",
+    "@snoopforms/react": "^0.2.2",
     "babel-plugin-superjson-next": "^0.4.3",
     "bcryptjs": "^2.4.3",
     "chart.js": "^3.8.2",
diff --git a/yarn.lock b/yarn.lock
index 81cd560539..eecde55edd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -257,10 +257,10 @@
   resolved "https://registry.npmjs.org/@sentry/types/-/types-7.8.0.tgz"
   integrity sha512-X9D2jlcAzbJdCHA+eCMv2t5HI9769Qpx48e+sZiK7Oasy1jwQtqzQRaiI9fy/zZ+p7Fyerj/4WjW/E2c4dJ63w==
 
-"@snoopforms/react@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@snoopforms/react/-/react-0.2.1.tgz#fb02ff7e1fefd07045b829546fd046aed58a0c51"
-  integrity sha512-FWYQWg28mtgcR0/HEJy3+6P4XB+rKfNsjAq3lul5jbyuE5DA+dbvtsOtvZBlFy9demjzvF/0k8yiRoWRZTf1Aw==
+"@snoopforms/react@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@snoopforms/react/-/react-0.2.2.tgz#9f3020cca581d72056c405bbf1278d16aea7d30e"
+  integrity sha512-YPApJFEDv3L+9aMTg3Kzr+aFHFhfMHbYrxzvBRIgvVoOzUIL/wtVwskJtCzP2C+YPS7NvQFjaWJFvxTGRzVE0g==
   dependencies:
     "@fingerprintjs/fingerprintjs" "^3.3.3"
     "@headlessui/react" "^1.6.6"