diff --git a/analyzer/app.py b/analyzer/app.py
index 48a1fd3..960d0d1 100644
--- a/analyzer/app.py
+++ b/analyzer/app.py
@@ -2,7 +2,7 @@
 from flask_restful import Resource, Api
 from convex import ConvexClient
 from config import url as convex_url
-from treehacks2023.analyzer.boundingBoxes import computeBoundingBox
+from boundingBoxes import computeBoundingBox
 
 app = Flask(__name__)
 api = Api(app)
@@ -20,3 +20,13 @@ def get(self):
 
 if __name__ == '__main__':
     app.run(debug=True)
+
+messages = client.query("listMessages")
+print("PYTHON RPINT")
+print(messages)
+for message in messages:
+    if "format" in message and "url" in message and message["format"] == "image" and message["url"] != None:
+        print("URL", message["url"])
+        print(message["url"] == None)
+# from pprint import pprint
+# pprint(messages)
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 7cfe5e6..ed4a3bd 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -2,11 +2,53 @@ import logo from './logo.svg';
 import './App.css';
 import { useQuery } from "./convex/_generated/react";
 import { useMutation } from "./convex/_generated/react";
+import { useRef, useState } from "react";
+
+function Image({ message }) {
+  return <img src={message.url} height="300px" width="auto" />;
+}
 
 function App() {
+  const messages = useQuery("listMessages") || [];
+
   // const data = useQuery("listMessages");
-  const sendMessage = useMutation("sendMessage");
-  const sendHello = () => sendMessage("Hello!", "me");
+  const sendMessage = useMutation("sendMessage:sendMessage");
+  const sendHello = () => sendMessage("Hello!", "me2");
+
+
+  const [name] = useState(() => "User " + Math.floor(Math.random() * 10000));
+
+  const imageInput = useRef(null);
+  const [selectedImage, setSelectedImage] = useState(null);
+
+  const generateUploadUrl = useMutation("sendMessage:generateUploadUrl");
+  const sendImage = useMutation("sendMessage:sendImage");
+
+  // async function handleSendMessage(event) {
+  //   event.preventDefault();
+  //   setNewMessageText("");
+  //   if (newMessageText) {
+  //     await sendMessage(newMessageText, name);
+  //   }
+  // }
+
+  async function handleSendImage(event) {
+    event.preventDefault();
+    setSelectedImage(null);
+    imageInput.current.value = "";
+
+    // Step 1: Get a short-lived upload URL
+    const postUrl = await generateUploadUrl();
+    // Step 2: POST the file to the URL
+    const result = await fetch(postUrl, {
+      method: "POST",
+      headers: { "Content-Type": selectedImage.type },
+      body: selectedImage,
+    });
+    const { storageId } = await result.json();
+    // Step 3: Save the newly allocated storage id to the messages table
+    await sendImage(storageId, name);
+  }
 
   return (
     <div className="App">
@@ -24,6 +66,30 @@ function App() {
           Learn React
         </a>
         <button onClick={sendHello}>click me!</button>
+        <form onSubmit={handleSendImage}>
+        <ul>
+        {messages.map(message => (
+          <li key={message._id.toString()}>
+            <span>{message.author}:</span>
+            {message.format === "image" ? (
+              <Image message={message} />
+            ) : (
+              <span>{message.body}</span>
+            )}
+            <span>{new Date(message._creationTime).toLocaleTimeString()}</span>
+          </li>
+        ))}
+      </ul>
+        <input
+          type="file"
+          accept="image/*"
+          ref={imageInput}
+          onChange={event => setSelectedImage(event.target.files[0])}
+          className="ms-2 btn btn-primary"
+          disabled={selectedImage}
+        />
+        <input type="submit" value="Send Image" disabled={!selectedImage} />
+      </form>
       </header>
     </div>
   );
diff --git a/frontend/src/convex/_generated/api.d.ts b/frontend/src/convex/_generated/api.d.ts
index 4777e1b..7139ff4 100644
--- a/frontend/src/convex/_generated/api.d.ts
+++ b/frontend/src/convex/_generated/api.d.ts
@@ -10,6 +10,7 @@
  */
 
 import type { ApiFromModules } from "convex/api";
+import type * as listMessages from "../listMessages";
 import type * as sendMessage from "../sendMessage";
 
 /**
@@ -22,5 +23,6 @@ import type * as sendMessage from "../sendMessage";
  * `ConvexReactClient` to create app-specific types.
  */
 export type API = ApiFromModules<{
+  listMessages: typeof listMessages;
   sendMessage: typeof sendMessage;
 }>;
diff --git a/frontend/src/convex/listMessages.js b/frontend/src/convex/listMessages.js
new file mode 100644
index 0000000..fa0f967
--- /dev/null
+++ b/frontend/src/convex/listMessages.js
@@ -0,0 +1,18 @@
+import { query } from "./_generated/server";
+
+export default query(async ({ db, storage }) => {
+  const messages = await db.query("messages").collect();
+  for (const message of messages) {
+    if (message.format == "image") {
+      message.url = await storage.getUrl(message.body);
+    }
+  }
+  console.log("MESSAGES FORMAT", messages);
+
+  const messagesJSON = {}
+  messages.forEach((message, index) => {
+    messagesJSON[index] = message;
+  });
+  console.log("JSONN", messagesJSON);
+  return messages;
+});
diff --git a/frontend/src/convex/sendMessage.js b/frontend/src/convex/sendMessage.js
index a0615db..5e3f3f3 100644
--- a/frontend/src/convex/sendMessage.js
+++ b/frontend/src/convex/sendMessage.js
@@ -1,6 +1,22 @@
 import { mutation } from "./_generated/server";
 
-export default mutation(async ({ db }, body, author) => {
-  const message = { body: body, author: author, test1: "test2" };
-  await db.insert("messages", message);
+// export default mutation(async ({ db }, body, author) => {
+//   const message = { body: body, author: author, test1: "test2" };
+//   await db.insert("messages", message);
+// });
+
+export const sendMessage = mutation(async ({ db }, body, author) => {
+    const message = { body, author, format: "text" };
+    await db.insert("messages", message);
+  });
+
+// Generate a short-lived upload URL.
+export const generateUploadUrl = mutation(async ({ storage }) => {
+    return await storage.generateUploadUrl();
+});
+
+// Save the storage ID within a message.
+export const sendImage = mutation(async ({ db }, storageId, author) => {
+const message = { body: storageId, author, format: "image" };
+await db.insert("messages", message);
 });