diff --git a/packages/nextjs/app/api/frame/[id]/route.ts b/packages/nextjs/app/api/frame/[id]/route.ts
index 9d8a5be..f158a22 100644
--- a/packages/nextjs/app/api/frame/[id]/route.ts
+++ b/packages/nextjs/app/api/frame/[id]/route.ts
@@ -24,7 +24,6 @@ export async function PUT(req: NextRequest, { params }: { params: { id: string }
   return new NextResponse(JSON.stringify(frame));
 }
 
-// delete frame
 export async function DELETE(req: NextRequest, { params }: { params: { id: string } }) {
   await connectDB();
   const frame_id = params.id;
diff --git a/packages/nextjs/app/api/frog/[...routes]/route.tsx b/packages/nextjs/app/api/frog/[...routes]/route.tsx
index 84fd369..04d6fe4 100644
--- a/packages/nextjs/app/api/frog/[...routes]/route.tsx
+++ b/packages/nextjs/app/api/frog/[...routes]/route.tsx
@@ -1,10 +1,11 @@
 /** @jsxImportSource frog/jsx */
+import { error } from "console";
 import { Button, Frog, TextInput, parseEther } from "frog";
 import { FrameData } from "frog/_lib/types/frame";
 import { devtools } from "frog/dev";
 import { handle } from "frog/next";
 import { serveStatic } from "frog/serve-static";
-import { ABI } from "~~/constants";
+import { ABI, htmlErrorImageTemplate } from "~~/constants";
 import Analytics from "~~/model/analytics";
 import { getFrameAtServer } from "~~/services/frames";
 import { Frame } from "~~/types/commontypes";
@@ -154,19 +155,28 @@ app.image("/:journeyId/:frameId/img", async c => {
   if (!match || match.length < 3) {
     throw new Error("Invalid journey or frame ID");
   }
-
-  const [, , frameId] = match;
-  const data: Frame = await getFrameAtServer(frameId);
-  const frame = makeFrogFrame(data.frameJson);
-  const parsedHTML = parseHtmlToJsxNode(frame.image.content as string);
-  return c.res({
-    headers: {
-      "Cache-Control": "max-age=0",
-      "cache-control": "max-age=0",
-    },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    image: parsedHTML as any,
-  });
+  try {
+    const [, , frameId] = match;
+    const data: Frame = await getFrameAtServer(frameId);
+    const frame = makeFrogFrame(data.frameJson);
+    const parsedHTML = parseHtmlToJsxNode(frame.image.content as string);
+    const res = c.res({
+      headers: {
+        "Cache-Control": "max-age=0",
+        "cache-control": "max-age=0",
+      },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      image: parsedHTML as any,
+    });
+    return res;
+  } catch (error) {
+    console.log("Error encountered:", error);
+    const htmlErrorImage = htmlErrorImageTemplate.replace("$$ErrorString$$", error.toString());
+    const errorImage = parseHtmlToJsxNode(htmlErrorImage);
+    return c.res({
+      image: errorImage as any,
+    });
+  }
 });
 
 devtools(app, { serveStatic });
diff --git a/packages/nextjs/app/api/journey/route.ts b/packages/nextjs/app/api/journey/route.ts
index 063dec5..ea15e55 100644
--- a/packages/nextjs/app/api/journey/route.ts
+++ b/packages/nextjs/app/api/journey/route.ts
@@ -3,16 +3,18 @@ import Journey from "~~/model/journey";
 import connectDB from "~~/services/connectDB";
 
 export async function GET(req: NextRequest) {
-  const { searchParams } = new URL(req.url);
-  const walletAddress = searchParams.get("walletAddress") as string;
+  // const { searchParams } = new URL(req.url);
+  // const walletAddress = searchParams.get("walletAddress") as string;
 
-  console.log(walletAddress);
+  // console.log(walletAddress);
   await connectDB();
 
   const journeys = await Journey.find({
-    walletAddress,
+    // TODO: uncomment
+    // walletAddress,
   });
 
+  console.log("yabba", journeys);
   return NextResponse.json(journeys);
 }
 
diff --git a/packages/nextjs/app/dashboard/page.tsx b/packages/nextjs/app/dashboard/page.tsx
index adde04f..4dcba61 100644
--- a/packages/nextjs/app/dashboard/page.tsx
+++ b/packages/nextjs/app/dashboard/page.tsx
@@ -15,6 +15,7 @@ import { Skeleton } from "~~/~/components/ui/skeleton";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~~/~/components/ui/tabs";
 
 const MyFrames = ({ frames }: { frames: Journey[] }) => {
+  console.log("Chammma", frames)
   const [showAll, setShowAll] = useState(false);
   const displayedFrames = showAll ? frames : frames.slice(0, 4);
 
@@ -25,9 +26,9 @@ const MyFrames = ({ frames }: { frames: Journey[] }) => {
           <div className="rounded-full bg-purple-900 p-3">
             <Plus className="h-6 w-6 text-purple-300" />
           </div>
-          <h3 className="mt-4 text-lg font-semibold text-black">No frames yet</h3>
-          <p className="mt-2 text-sm text-purple-200">Pick a system template</p>
-          <Button className="mt-4 bg-purple-600 hover:bg-purple-700 text-white">Create Frame</Button>
+          <h3 className="mt-4 text-lg font-semibold text-purple-300">No journeys yet</h3>
+          <p className="mt-2 text-sm text-purple-200">Get started by using a precreated template ⚡</p>
+          <Button className="mt-4 bg-purple-600 hover:bg-purple-700 text-white">Create Frame Journey</Button>
         </CardContent>
       </Card>
     );
@@ -36,7 +37,7 @@ const MyFrames = ({ frames }: { frames: Journey[] }) => {
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-        <h2 className="text-2xl font-bold text-black">My Frames</h2>
+        <h2 className="text-2xl font-bold text-purple-300">My Frame Journeys</h2>
         {frames.length > 4 && (
           <Button
             variant="outline"
@@ -117,10 +118,9 @@ export default function Dashboard() {
   const myFrames = useQuery({
     queryKey: ["myFrames", address],
     queryFn: async () => {
-      if (!address) throw new Error("No address provided");
+      // if (!address) throw new Error("No address provided");
       return getAllTemplates(address as `0x${string}`);
     },
-    enabled: !!address,
   });
 
   if (!address) {
@@ -148,7 +148,7 @@ export default function Dashboard() {
               value="my-frames"
               className="rounded-md px-3 py-2 text-sm font-medium text-gray-700 transition-all data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm"
             >
-              My Frames
+              My Frame Journeys
             </TabsTrigger>
             <TabsTrigger
               value="templates"
diff --git a/packages/nextjs/components/ButtonEditor.tsx b/packages/nextjs/components/ButtonEditor.tsx
index f312713..3316de2 100644
--- a/packages/nextjs/components/ButtonEditor.tsx
+++ b/packages/nextjs/components/ButtonEditor.tsx
@@ -74,18 +74,33 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
       </Select>
       {button.type === "Button" && (
         <>
+          <label htmlFor="buttonType" className="block text-sm font-medium text-gray-700 mb-1">
+            Button Value
+          </label>
+          <TextField
+            id="buttonValue"
+            size="small"
+            value={button.props?.value || ""} // Default to an empty string if no value
+            onChange={e => {
+              onSave({ ...button, props: { ...button.props, value: e.target.value } });
+            }}
+          />
+
           <label htmlFor="buttonType" className="block text-sm font-medium text-gray-700 mb-1">
             Next Frame
           </label>
           <Select
             id="post"
             size="small"
-            value={removeUrl(button.props.action as string, productID)}
+            value={removeUrl(button.props?.action || "", productID)} // Default to an empty string if no action
             variant="outlined"
             onChange={e =>
               onSave({
                 ...button,
-                props: { ...button.props, action: `${APP_URL}/api/frog/${productID}/` + e.target.value },
+                props: {
+                  ...button.props,
+                  action: `${APP_URL}/api/frog/${productID}/` + e.target.value,
+                },
               })
             }
           >
@@ -108,13 +123,14 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
           <TextField
             id="buttonHref"
             size="small"
-            value={button.props.href as string}
+            value={button.props?.href || ""} // Default to empty string if href is undefined
             onChange={e => {
-              onSave({ ...button, props: { ...button.props, href: e.target.value as string } });
+              onSave({ ...button, props: { ...button.props, href: e.target.value } });
             }}
           />
         </>
       )}
+
       {button.type === "Button.Mint" && (
         <>
           <label htmlFor="buttonMint" className="block text-sm font-medium text-gray-700 mb-1">
@@ -123,13 +139,14 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
           <TextField
             id="buttonMint"
             size="small"
-            value={button.props.target as string}
+            value={button.props?.target || ""} // Default to empty string if target is undefined
             onChange={e => {
-              onSave({ ...button, props: { ...button.props, target: e.target.value as string } });
+              onSave({ ...button, props: { ...button.props, target: e.target.value } });
             }}
           />
         </>
       )}
+
       {button.type === "Button.Location" && (
         <>
           <label htmlFor="buttonLocation" className="block text-sm font-medium text-gray-700 mb-1">
@@ -138,7 +155,7 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
           <TextField
             id="buttonLocation"
             size="small"
-            value={button.props.location as string}
+            value={button.props?.location || ""} // Default to empty string if location is undefined
             onChange={e =>
               onSave({
                 ...button,
@@ -148,6 +165,7 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
           />
         </>
       )}
+
       {button.type === "Button.Transaction" && (
         <>
           <label htmlFor="buttonTx" className="block text-sm font-medium text-gray-700 mb-1">
@@ -160,7 +178,7 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
           <Select
             id="post"
             size="small"
-            value={removeTxUrl(button.props.target as string, productID, frame?._id)}
+            value={removeTxUrl(button.props?.target || "", productID, frame?._id)} // Default to empty string if target is undefined
             variant="outlined"
             onChange={e =>
               onSave({
@@ -175,13 +193,14 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
             <MenuItem value="send-contract">Contract interaction</MenuItem>
             <MenuItem value="send-ether">P2P transfer</MenuItem>
           </Select>
+
           <label htmlFor="buttonTx" className="block text-sm font-medium text-gray-700 mb-1">
             Tx Success
           </label>
           <Select
             id="post"
             size="small"
-            value={removeUrl(button.props.action as string, productID)}
+            value={removeUrl(button.props?.action || "", productID)} // Default to empty string if action is undefined
             variant="outlined"
             onChange={e =>
               onSave({
@@ -199,7 +218,8 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
                 ),
             )}
           </Select>
-          {button.props.target?.includes("send-ether") && (
+
+          {button.props?.target?.includes("send-ether") && (
             <>
               <label htmlFor="chainId" className="block text-sm font-medium text-gray-700 mb-1">
                 Chain ID
@@ -207,7 +227,7 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
               <Select
                 id="chainId"
                 size="small"
-                value=""
+                value={frameTxConfig.chainId || ""} // Default to empty string for chain ID if undefined
                 variant="outlined"
                 onChange={e => {
                   setFrameTxConfig({ ...frameTxConfig, chainId: e.target.value });
@@ -219,31 +239,34 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
                   </MenuItem>
                 ))}
               </Select>
+
               <label htmlFor="toAddress" className="block text-sm font-medium text-gray-700 mb-1">
                 To Address
               </label>
               <TextField
                 id="toAddress"
                 size="small"
-                value=""
+                value={frameTxConfig.toAddress || ""} // Default to empty string for toAddress if undefined
                 onChange={e => {
                   setFrameTxConfig({ ...frameTxConfig, toAddress: e.target.value });
                 }}
               />
+
               <label htmlFor="value" className="block text-sm font-medium text-gray-700 mb-1">
                 Value
               </label>
               <TextField
                 id="value"
                 size="small"
-                value=""
+                value={frameTxConfig.value || ""} // Default to empty string for value if undefined
                 onChange={e => {
                   setFrameTxConfig({ ...frameTxConfig, value: e.target.value });
                 }}
               />
             </>
           )}
-          {button.props.target?.includes("send-contract") && (
+
+          {button.props?.target?.includes("send-contract") && (
             <>
               <label htmlFor="chainId" className="block text-sm font-medium text-gray-700 mb-1">
                 Chain ID
@@ -251,7 +274,7 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
               <Select
                 id="chainId"
                 size="small"
-                value=""
+                value={frameTxConfig.chainId || ""} // Default to empty string for chain ID if undefined
                 variant="outlined"
                 onChange={e => {
                   setFrameTxConfig({ ...frameTxConfig, chainId: e.target.value });
@@ -263,35 +286,38 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
                   </MenuItem>
                 ))}
               </Select>
+
               <label htmlFor="toAddress" className="block text-sm font-medium text-gray-700 mb-1">
                 To Address
               </label>
               <TextField
                 id="toAddress"
                 size="small"
-                value=""
+                value={frameTxConfig.toAddress || ""} // Default to empty string for toAddress if undefined
                 onChange={e => {
                   setFrameTxConfig({ ...frameTxConfig, toAddress: e.target.value });
                 }}
               />
+
               <label htmlFor="value" className="block text-sm font-medium text-gray-700 mb-1">
                 Contract Address (fetch ABI)
               </label>
               <TextField
                 id="value"
                 size="small"
-                value=""
+                value={frameTxConfig.contractAddress || ""} // Default to empty string for contractAddress if undefined
                 onChange={e => {
                   setFrameTxConfig({ ...frameTxConfig, contractAddress: e.target.value });
                 }}
               />
+
               <label htmlFor="functionName" className="block text-sm font-medium text-gray-700 mb-1">
                 Function Name
               </label>
               <TextField
                 id="functionName"
                 size="small"
-                value=""
+                value={frameTxConfig.functionName || ""} // Default to empty string for functionName if undefined
                 onChange={e => {
                   setFrameTxConfig({ ...frameTxConfig, functionName: e.target.value });
                 }}
diff --git a/packages/nextjs/components/FrameRenderer.tsx b/packages/nextjs/components/FrameRenderer.tsx
index 4bfa14c..f4e8e31 100644
--- a/packages/nextjs/components/FrameRenderer.tsx
+++ b/packages/nextjs/components/FrameRenderer.tsx
@@ -46,6 +46,7 @@ const theme = {
 function FrameRender() {
   const { currentFrame, buttons, textInput, currentFrameId, productID } = useProductJourney();
   const [imageLoaded, setImageLoaded] = useState(false); // State to track image loading
+  const [imageError, setImageError] = useState(false);
 
   if (!currentFrame) return null;
 
@@ -55,21 +56,51 @@ function FrameRender() {
       <div className={theme.ImageContainer.className} style={theme.ImageContainer.style}>
         {!imageLoaded && <div className={theme.Skeleton.className} />} {/* Show skeleton while loading */}
         {/* Rendering the image based on its type using the components defined in the theme */}
-        {currentFrame.image.type === "html" && (
-          <img
-            src={`${APP_URL}/api/frog/${productID}/${currentFrameId}/img`}
-            alt="Frame HTML Image"
+        {!imageError ? (
+          // Display the image based on its type, and show error fallback on failure
+          <>
+            {currentFrame.image.type === "html" && (
+              <img
+                src={`${APP_URL}/api/frog/${productID}/${currentFrameId}/img`}
+                alt="Frame HTML Image"
+                className={theme.Image.className}
+                onLoad={() => setImageLoaded(true)} // Set loaded state on image load
+                onError={() => setImageError(true)} // Set error state on image load failure
+              />
+            )}
+            {currentFrame.image.type === "src" && (
+              <img
+                src={currentFrame.image.src}
+                alt="Frame image"
+                className={theme.Image.className}
+                onLoad={() => setImageLoaded(true)}
+              />
+            )}
+          </>
+        ) : (
+          // Render fallback content when image fails to load
+          <div
             className={theme.Image.className}
-            onLoad={() => setImageLoaded(true)} // Set loaded state on image load
-          />
-        )}
-        {currentFrame.image.type === "src" && (
-          <img
-            src={currentFrame.image.src}
-            alt="Frame image"
-            className={theme.Image.className}
-            onLoad={() => setImageLoaded(true)} // Set loaded state on image load
-          />
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              textAlign: "center",
+              padding: "20px", // Optional for spacing
+              wordWrap: "break-word", // Ensures long text wraps within the container
+            }}
+          >
+            <p>
+              Image failed to load since error in HTML
+              <br />
+              <br />
+              <br />
+              - if using HTML try using a Satori Playground to make sure image renders correct <br />
+              - Make sure if a div has more than two child elements use display: flex <br />
+              - Make sure your css supports the satori standards <br />
+            </p>
+          </div>
         )}
       </div>
 
diff --git a/packages/nextjs/constants/index.ts b/packages/nextjs/constants/index.ts
index 154372f..f7a1090 100644
--- a/packages/nextjs/constants/index.ts
+++ b/packages/nextjs/constants/index.ts
@@ -607,3 +607,5 @@ export const ABI: Abi = [
 
 export const contract = "0xf8dB9d751088FAb0f7a57b973b5289A5fDA8dB24";
 export const myAddress = "0x4CbEe7aD42d33e9D3B41e8b6FAcA2f6f173C8A94";
+
+export const htmlErrorImageTemplate = `<div style="font-size:36px;background-color:light-red;color:#fff;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;border:2px solid #ccc;border-radius:10px;padding:20px;box-shadow:0 4px 20px rgba(0,0,0,.1)">Error<div style=display:flex;font-size:20px;margin-top:40px>$$ErrorString$$</div></div>`;