diff --git a/.gitignore b/.gitignore
index 3c5d60d..ba37547 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,4 +20,5 @@ node_modules
 .idea
 
 # cli
-dist
\ No newline at end of file
+dist
+.vercel
diff --git a/packages/nextjs/app/data/component/TransactionModal.tsx b/packages/nextjs/app/data/component/TransactionModal.tsx
new file mode 100644
index 0000000..0ab4eb0
--- /dev/null
+++ b/packages/nextjs/app/data/component/TransactionModal.tsx
@@ -0,0 +1,42 @@
+// components/TransactionModal.tsx
+import React from "react";
+
+interface TransactionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const TransactionModal: React.FC<TransactionModalProps> = ({ isOpen, onClose }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="bg-white rounded-lg shadow-lg p-8 max-w-md w-full">
+        <h2 className="text-2xl font-bold mb-4">Transaction in Progress</h2>
+        <p className="mb-6">
+          Your mood is being stored on the blockchain. Please wait while the transaction is being processed.
+        </p>
+        <p className="mb-6">
+          Interested in learning more about meta transactions and the technology behind this app? Check out the{" "}
+          <a href="https://github.com/CreedsCode/web3era-toy" passHref>
+            <a className="text-purple-600 hover:underline" target="_blank" rel="noopener noreferrer">
+              GitHub repository
+            </a>
+          </a>{" "}
+          for a detailed guide and the source code. Stay up to date by following me on{" "}
+          <a href="https://x.com/spanish_vanish" passHref>
+            <a className="text-purple-600 hover:underline" target="_blank" rel="noopener noreferrer">
+              Twitter
+            </a>
+          </a>
+          .
+        </p>
+        <button className="bg-purple-600 text-white px-4 py-2 rounded-md hover:bg-purple-700" onClick={onClose}>
+          Close
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default TransactionModal;
diff --git a/packages/nextjs/app/data/page.tsx b/packages/nextjs/app/data/page.tsx
index f7639e1..6ee1f18 100644
--- a/packages/nextjs/app/data/page.tsx
+++ b/packages/nextjs/app/data/page.tsx
@@ -2,11 +2,13 @@
 
 import { useEffect, useState } from "react";
 import Link from "next/link";
+import TransactionModal from "./component/TransactionModal";
 import type { NextPage } from "next";
 import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth";
 
 const Data: NextPage = () => {
   const [formattedEntries, setFormattedEntries] = useState([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const {
     data: events,
@@ -22,7 +24,11 @@ const Data: NextPage = () => {
   useEffect(() => {
     console.log("=====================");
     console.log(events, isLoading, error);
+    setIsModalOpen(true);
+
     if (events) {
+      setIsModalOpen(true);
+
       const formatted = events.map(event => {
         let parsedData;
         try {
@@ -62,6 +68,8 @@ const Data: NextPage = () => {
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-green-400 via-blue-500 to-purple-500 flex flex-col items-center justify-center p-4">
+      <TransactionModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
+
       <div className="bg-white rounded-lg shadow-2xl p-8 max-w-2xl w-full">
         <h1 className="text-4xl font-bold text-center mb-6 text-purple-600">Mood Board</h1>
         <p className="text-center mb-8 text-gray-700">Check out everyone&apos;s on-chain moods!</p>
diff --git a/packages/nextjs/app/mood/page.tsx b/packages/nextjs/app/mood/page.tsx
index e9cb4c4..879d59a 100644
--- a/packages/nextjs/app/mood/page.tsx
+++ b/packages/nextjs/app/mood/page.tsx
@@ -12,7 +12,6 @@ const Mood: NextPage = () => {
   const [wallet, setWallet] = useState<PrivateKeyAccount | null>(null);
   const [selectedMood, setSelectedMood] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
-
   const { data: deployedContractData } = useDeployedContractInfo("DataContract");
 
   const moods = [
@@ -34,6 +33,7 @@ const Mood: NextPage = () => {
       setWallet(privateKeyToAccount(storedWallet));
     }
   }, []);
+
   const handleMoodSelect = async (mood: string) => {
     setSelectedMood(mood);
     setIsSubmitting(true);
diff --git a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx b/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx
index f67c2f7..119f229 100644
--- a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx
+++ b/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx
@@ -6,8 +6,8 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useTheme } from "next-themes";
 import { Toaster } from "react-hot-toast";
 import { WagmiProvider } from "wagmi";
-import { Footer } from "~~/components/Footer";
-import { Header } from "~~/components/Header";
+// import { Footer } from "~~/components/Footer";
+// import { Header } from "~~/components/Header";
 import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { ProgressBar } from "~~/components/scaffold-eth/ProgressBar";
 import { useInitializeNativeCurrencyPrice } from "~~/hooks/scaffold-eth";
@@ -19,9 +19,9 @@ const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   return (
     <>
       <div className="flex flex-col min-h-screen">
-        <Header />
+        {/* <Header /> */}
         <main className="relative flex flex-col flex-1">{children}</main>
-        <Footer />
+        {/* <Footer /> */}
       </div>
       <Toaster />
     </>