diff --git a/App.jsx b/App.jsx
new file mode 100644
index 0000000..eb1cc93
--- /dev/null
+++ b/App.jsx
@@ -0,0 +1,78 @@
+import { useState, useEffect } from "react";
+import abi from "../abi.json";
+import { ethers } from "ethers";
+
+const contractAddress = "0x9D1eb059977D71E1A21BdebD1F700d4A39744A70";
+
+function App() {
+  const [text, setText] = useState("");
+  const [retrievedMessage, setRetrievedMessage] = useState("");
+
+  async function requestAccount() {
+    await window.ethereum.request({ method: "eth_requestAccounts" });
+  }
+
+  const handleSet = async () => {
+    try {
+      if (!text) {
+        alert("Please enter a message before setting.");
+        return;
+      }
+
+      if (window.ethereum && window.ethereum.isMetaMask) {
+        await requestAccount();
+        const provider = new ethers.BrowserProvider(window.ethereum);
+        const signer = await provider.getSigner();
+        const contract = new ethers.Contract(contractAddress, abi, signer);
+
+        const tx = await contract.setMessage(text);
+        const txReceipt = await tx.wait();
+        console.log("Transaction successful:", txReceipt);
+        setText(""); // Clear input after successful transaction
+        await getMessage(); // Refresh the displayed message
+      } else {
+        throw new Error("Please use MetaMask to interact with this application.");
+      }
+    } catch (error) {
+      console.error("Error Debbie setting message:", error);
+      alert(error.message || "Failed to set message on the smart contract.");
+    }
+  };
+
+  const getMessage = async () => {
+    try {
+      if (window.ethereum && window.ethereum.isMetaMask) {
+        const provider = new ethers.BrowserProvider(window.ethereum);
+        const contract = new ethers.Contract(contractAddress, abi, provider);
+        const message = await contract.getMessage();
+        setRetrievedMessage(message);
+      } else {
+        throw new Error("Please use MetaMask to interact with this application.");
+      }
+    } catch (error) {
+      console.error("Error Debbie fetching message:", error);
+      alert(error.message || "Failed to fetch message from the smart contract.");
+    }
+  };
+
+  useEffect(() => {
+    getMessage();
+  }, []);
+
+  return (
+    <div style={{ padding: "2rem" }}>
+      <h1>Set Message on Smart Contract</h1>
+      <input
+        type="text"
+        placeholder="Set message"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+      />
+      <button onClick={handleSet}>Set Message</button>
+      <button onClick={getMessage}>Get Message</button>
+      <p>Current Message: {retrievedMessage || "No message retrieved yet"}</p>
+    </div>
+  );
+}
+
+export default App;
\ No newline at end of file
diff --git a/index.jsx b/index.jsx
new file mode 100644
index 0000000..bd365f0
--- /dev/null
+++ b/index.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
\ No newline at end of file