diff --git a/frontend/src/components/ImageUploadSection.tsx b/frontend/src/components/ImageUploadSection.tsx
index 9f15fbf6..01642a38 100644
--- a/frontend/src/components/ImageUploadSection.tsx
+++ b/frontend/src/components/ImageUploadSection.tsx
@@ -4,9 +4,11 @@ import { ImagesService, Body_upload_image_images_post } from "../api";
 export function ImageUploadSection({
   tempImage,
   setTempImage,
+  showLabel = false,
 }: {
   tempImage: string;
   setTempImage: (value: string) => void;
+  showLabel?: boolean;
 }) {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [uploadError, setUploadError] = useState<string>("");
@@ -130,7 +132,8 @@ export function ImageUploadSection({
 
   return (
     <div className="flex flex-col w-full min-w-0 gap-3">
-      <div>image url or path:</div>
+      {/* Conditionally show label */}
+      {showLabel && <div>image url or path:</div>}
 
       <div className="flex flex-col gap-2 w-full">
         {/* URL Input */}
diff --git a/frontend/src/pages/BookEditor.tsx b/frontend/src/pages/BookEditor.tsx
index 368534b6..b18c323c 100644
--- a/frontend/src/pages/BookEditor.tsx
+++ b/frontend/src/pages/BookEditor.tsx
@@ -28,6 +28,27 @@ function PropsForm({ tempProps, setTempProps }: PropsFormProps) {
     console.error("Error parsing tempProps JSON:", e);
   }
 
+  const imageKeys = new Set([
+    "image",
+    "imageUrl",
+    "imageSrc",
+    "backgroundImage",
+    "img",
+  ]);
+
+  // Helper to check if a key is an image field
+  const isImageField = (key: string): boolean => {
+    const lowerKey = key.toLowerCase();
+    return (
+      imageKeys.has(lowerKey) ||
+      lowerKey.includes("image") ||
+      lowerKey.includes("img") ||
+      (typeof propsObject[key] === "string" &&
+        (propsObject[key].startsWith("http") ||
+          propsObject[key].startsWith("/")))
+    );
+  };
+
   // Compute arrays based on the initial propsObject
   const objectArrays = Object.keys(propsObject).filter(
     (key) =>
@@ -215,6 +236,14 @@ function PropsForm({ tempProps, setTempProps }: PropsFormProps) {
                     className="border border-gray-300 rounded p-1 font-mono whitespace-pre w-full max-w-full min-w-0"
                     style={{ resize: "vertical" }}
                   />
+                ) : isImageField(key) ? (
+                  // *** NEW: Use ImageUploadSection for image fields ***
+                  <ImageUploadSection
+                    tempImage={propsObject[key]}
+                    setTempImage={(newValue) =>
+                      handleInputChange(key, newValue)
+                    }
+                  />
                 ) : (
                   <input
                     id={key}
@@ -326,6 +355,14 @@ function PropsForm({ tempProps, setTempProps }: PropsFormProps) {
                           <option value="true">True</option>
                           <option value="false">False</option>
                         </select>
+                      ) : isImageField(field) ? (
+                        // *** NEW: Use ImageUploadSection for image fields in arrays ***
+                        <ImageUploadSection
+                          tempImage={value}
+                          setTempImage={(newValue) =>
+                            handleOptionChange(arrayKey, index, field, newValue)
+                          }
+                        />
                       ) : (
                         <input
                           id={`${field}-${index}`}
@@ -472,13 +509,13 @@ function PageNavigator({
           </button>
 
           <a
-            className="w-9/12 h-12 border border-primary-green flex items-center justify-center rounded-xl text-lg hover:bg-primary-green hover:text-white text-center"
+            className="w-9/12 h-12 bg-primary-green text-white flex items-center justify-center rounded-xl text-lg hover:bg-green-700 text-center transition-colors"
             href={`/book/${bookId}/1`}
           >
             Preview Book
           </a>
           <button
-            className="w-9/12 h-12 border border-primary-green flex items-center justify-center rounded-xl text-lg hover:bg-primary-green hover:text-white text-center"
+            className="w-9/12 h-12 bg-primary-green text-white flex items-center justify-center rounded-xl text-lg hover:bg-green-700 text-center transition-colors"
             onClick={() => setPageNum(0)}
           >
             Book Details
@@ -531,7 +568,7 @@ function PageNavigator({
             );
           })}
           <button
-            className="w-9/12 h-12 border border-primary-green flex flex-col items-center justify-center rounded-xl text-xl hover:bg-primary-green hover:text-white"
+            className="w-9/12 h-12 bg-primary-green text-white flex flex-col items-center justify-center rounded-xl text-xl hover:bg-green-700 transition-colors"
             onClick={addPage}
           >
             +
@@ -731,6 +768,7 @@ function BookImageEditor({
           <ImageUploadSection
             tempImage={tempImage}
             setTempImage={setTempImage}
+            showLabel={true}
           />
         ) : (
           <>