diff --git a/README.md b/README.md
index da0e418..132166b 100644
--- a/README.md
+++ b/README.md
@@ -2,12 +2,12 @@
 
 Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 
-### ⚠️ Reminder: you must set the tag of the environment you wish to deploy in this repo, then run the deploy workflow in workspaces-stack to deploy to dev, stage or prod. 
+### ⚠️ Reminder: you must set the tag of the environment you wish to deploy in this repo, then run the deploy workflow in workspaces-stack to deploy to dev, stage or prod.
 
 ## Dev Setup
 
 NB: This will start the dev server against the cloud-hosted backend. If you need to change both the frontend and the backend, you'll
-need to start a local copy of the backend (workspaces-tasking-manager) and set the environment vars appropriately below. 
+need to start a local copy of the backend (workspaces-tasking-manager) and set the environment vars appropriately below.
 
 The below values are for cloud-hosted dev:
 
@@ -19,6 +19,10 @@ export VITE_OSM_URL=https://osm.workspaces-dev.sidewalks.washington.edu/
 export VITE_RAPID_URL=https://rapid.workspaces-dev.sidewalks.washington.edu/
 export VITE_PATHWAYS_EDITOR_URL=https://pathways.workspaces-dev.sidewalks.washington.edu/
 export CODE_VERSION="local"
+export VITE_IMAGERY_SCHEMA=https://raw.githubusercontent.com/TaskarCenterAtUW/tdei-tools/main/docs/imagery-layer/schema.json
+export VITE_IMAGERY_EXAMPLE_URL=https://raw.githubusercontent.com/TaskarCenterAtUW/tdei-tools/main/docs/imagery-layer/example.json
+export VITE_LONG_FORM_QUEST_SCHEMA=https://raw.githubusercontent.com/TaskarCenterAtUW/tdei-tools/refs/heads/main/docs/quest-definition/schema.json
+export VITE_LONG_FORM_QUEST_EXAMPLE_URL=https://raw.githubusercontent.com/TaskarCenterAtUW/tdei-tools/refs/heads/main/docs/quest-definition/example.json
 
 # install deps
 npm install
diff --git a/package-lock.json b/package-lock.json
index 683d4bf..583a040 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "hasInstallScript": true,
       "dependencies": {
         "@zip.js/zip.js": "^2.7.41",
+        "ajv": "^8.17.1",
+        "ajv-formats": "^3.0.1",
         "bootstrap": "^5.3.3",
         "js-cookie": "^3.0.5",
         "nuxt": "^4.0.0",
@@ -4514,6 +4516,39 @@
         "node": ">= 14"
       }
     },
+    "node_modules/ajv": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
+      "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/alien-signals": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-2.0.7.tgz",
@@ -6528,6 +6563,22 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/fast-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
+      "integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/fastq": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
@@ -11693,9 +11744,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.3.tgz",
-      "integrity": "sha512-OOUi5zjkDxYrKhTV3V7iKsoS37VUM7v40+HuwEmcrsf11Cdx9y3DIr2Px6liIcZFwt3XSRpQvFpL3WVy7ApkGw==",
+      "version": "7.1.11",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.11.tgz",
+      "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==",
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
@@ -11703,7 +11754,7 @@
         "picomatch": "^4.0.3",
         "postcss": "^8.5.6",
         "rollup": "^4.43.0",
-        "tinyglobby": "^0.2.14"
+        "tinyglobby": "^0.2.15"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -12101,6 +12152,22 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/vite/node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
     "node_modules/vscode-uri": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
diff --git a/package.json b/package.json
index dbd7290..e4a8db9 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@zip.js/zip.js": "^2.7.41",
+    "ajv": "^8.17.1",
+    "ajv-formats": "^3.0.1",
     "bootstrap": "^5.3.3",
     "js-cookie": "^3.0.5",
     "nuxt": "^4.0.0",
diff --git a/pages/workspace/[id]/settings.vue b/pages/workspace/[id]/settings.vue
index 356edf7..4f3ff70 100644
--- a/pages/workspace/[id]/settings.vue
+++ b/pages/workspace/[id]/settings.vue
@@ -15,8 +15,10 @@
 
             <button type="submit" class="btn btn-primary">Rename</button>
           </form>
-        </div><!-- .card-body -->
-      </div><!-- .card -->
+        </div>
+        <!-- .card-body -->
+      </div>
+      <!-- .card -->
 
       <div class="card mb-4">
         <div class="card-body">
@@ -30,36 +32,100 @@
                 class="form-check-input"
                 :true-value="1"
                 :false-value="0"
-                @change="toggleExternalAppAccess"
-              >
-              Publish this workspace for external apps (change will take effect immediately)
+              />
+              Publish this workspace for external apps (change will take effect
+              immediately)
             </label>
           </div>
 
-          <form @submit.prevent="saveLongFormQuestDefinition">
-            <label class="d-block form-label">
-              GoInfoGame Long Form Quest JSON Definition
-              <textarea v-model.trim="longFormQuestDef" class="form-control" rows="5" />
+          <form @submit.prevent="saveExternalAppConfigurations">
+            <label class="d-block form-label mb-3">
+              AVIV ScoutRoute Long Form Quest JSON Definition
+              <textarea
+                v-model.trim="longFormQuestDef"
+                class="form-control"
+                :class="{ 'drag-over': isDraggingQuest }"
+                rows="5"
+                placeholder="Optional"
+                @dragover.prevent="isDraggingQuest = true"
+                @dragleave.prevent="isDraggingQuest = false"
+                @drop.prevent="onQuestFileDrop"
+              />
+              <div id="imagery-help" class="form-text">
+                Paste the JSON content directly or drag and drop a JSON file.
+                See the
+                <a :href="longFormQuestSchemaUrl" target="_blank"
+                  >JSON Schema</a
+                >
+                for the required format and an
+                <a :href="longFormQuestExampleUrl" target="_blank">example</a>.
+              </div>
+              <div v-if="longFormQuestError" class="form-text text-danger">
+                {{ longFormQuestError }}
+              </div>
             </label>
 
-            <button type="submit" class="btn btn-primary">Save Quest Definition</button>
+            <label class="d-block form-label mb-3">
+              Imagery JSON Definition
+              <textarea
+                v-model.trim="imageryListDef"
+                class="form-control"
+                :class="{ 'drag-over': isDraggingImagery }"
+                rows="5"
+                placeholder="Optional"
+                @dragover.prevent="isDraggingImagery = true"
+                @dragleave.prevent="isDraggingImagery = false"
+                @drop.prevent="onImageryFileDrop"
+              />
+              <div id="imagery-help" class="form-text">
+                Paste the JSON content directly or drag and drop a JSON file.
+                See the
+                <a :href="imagerySchemaUrl" target="_blank">JSON Schema</a>
+                for the required format and an
+                <a :href="imageryExampleUrl" target="_blank">example</a>.
+              </div>
+              <div v-if="imageryError" class="form-text text-danger">
+                {{ imageryError }}
+              </div>
+            </label>
+
+            <button type="submit" class="btn btn-primary">Save</button>
+            <div
+              v-if="saveStatus"
+              :class="`mt-2 form-text text-${
+                saveStatus.type === 'success' ? 'success' : 'danger'
+              }`"
+            >
+              {{ saveStatus.message }}
+            </div>
           </form>
-        </div><!-- .card-body -->
-      </div><!-- .card -->
+        </div>
+        <!-- .card-body -->
+      </div>
+      <!-- .card -->
 
       <div class="card mb-4 border-danger">
         <div class="card-body">
           <h3 class="card-title mb-3">Delete Workspace</h3>
 
-          <p>Deleting a workspace is permanent. This action will not remove any TDEI datasets outside of Workspaces.</p>
+          <p>
+            Deleting a workspace is permanent. This action will not remove any
+            TDEI datasets outside of Workspaces.
+          </p>
 
-          <button class="btn btn-outline-danger mb-3" :disabled="deleteAccepted" @click="acceptDelete">
+          <button
+            class="btn btn-outline-danger mb-3"
+            :disabled="deleteAccepted"
+            @click="acceptDelete"
+          >
             I understand, and I want to delete this workspace
           </button>
 
           <template v-if="deleteAccepted">
             <label class="d-block mb-3">
-              <strong>To confirm, please type "delete" in the box below:</strong>
+              <strong
+                >To confirm, please type "delete" in the box below:</strong
+              >
               <input
                 ref="deleteAttestationInput"
                 v-model.trim="deleteAttestation"
@@ -67,35 +133,77 @@
               />
             </label>
 
-            <button class="btn btn-danger" :disabled="deleteAttestation !== 'delete'" @click="submitDelete">
+            <button
+              class="btn btn-danger"
+              :disabled="deleteAttestation !== 'delete'"
+              @click="submitDelete"
+            >
               Delete this workspace
             </button>
           </template>
-        </div><!-- .card-body -->
-      </div><!-- .card -->
-    </div><!-- .col -->
+        </div>
+        <!-- .card-body -->
+      </div>
+      <!-- .card -->
+    </div>
+    <!-- .col -->
   </app-page>
 </template>
 
 <script setup lang="ts">
-import { LoadingContext } from '~/services/loading'
-import { workspacesClient } from '~/services/index'
-import { toast } from 'vue3-toastify';
-import 'vue3-toastify/dist/index.css';
+import { LoadingContext } from "~/services/loading";
+import { workspacesClient } from "~/services/index";
+import type { Ref } from "vue";
+import { toast } from "vue3-toastify";
+import "vue3-toastify/dist/index.css";
+import Ajv from "ajv";
+import addFormats from "ajv-formats";
 
 const route = useRoute();
 const workspaceId = route.params.id;
-const [workspace, longFormQuestJson] = await Promise.all([
+const [workspace] = await Promise.all([
   workspacesClient.getWorkspace(workspaceId),
-  workspacesClient.getLongFormQuestDefinition(workspaceId)
 ]);
 
 const workspaceName = ref(workspace.title);
-const longFormQuestDef = ref(longFormQuestJson)
+let longFormQuestJson: string = "";
+if (
+  workspace.longFormQuestDef &&
+  typeof workspace.longFormQuestDef === "object" &&
+  !Array.isArray(workspace.longFormQuestDef)
+) {
+  longFormQuestJson = JSON.stringify(workspace.longFormQuestDef, null, 2);
+}
+const longFormQuestDef = ref(longFormQuestJson);
+let imageryListDefInit: string = "";
+if (Array.isArray(workspace.imageryListDef)) {
+  imageryListDefInit = JSON.stringify(workspace.imageryListDef, null, 2);
+}
+const imageryListDef = ref(imageryListDefInit);
 
 const deleteAccepted = ref(false);
-const deleteAttestation = ref('');
+const deleteAttestation = ref("");
 const deleteAttestationInput = ref(null);
+const isDraggingImagery = ref(false);
+const isDraggingQuest = ref(false);
+const imageryError = ref<string | null>(null);
+const longFormQuestError = ref<string | null>(null);
+const saveStatus = ref<{ type: "success" | "error"; message: string } | null>(
+  null
+);
+
+function clearMessages() {
+  imageryError.value = null;
+  longFormQuestError.value = null;
+  saveStatus.value = null;
+}
+
+watch(
+  [longFormQuestDef, imageryListDef, () => workspace.externalAppAccess],
+  () => {
+    clearMessages();
+  }
+);
 
 async function save(details) {
   await workspacesClient.updateWorkspace(workspaceId, details);
@@ -104,31 +212,163 @@ async function save(details) {
 async function rename() {
   try {
     await save({ title: workspaceName.value });
-  } catch(e) {
-    toast.error('Workspace rename failed:' + e.message);
+  } catch (e) {
+    toast.error("Workspace rename failed:" + e.message);
     return;
   }
-  toast.success('Workspace renamed successfully.');
+  toast.success("Workspace renamed successfully.");
+}
+
+const imagerySchemaUrl = import.meta.env.VITE_IMAGERY_SCHEMA;
+const imageryExampleUrl = import.meta.env.VITE_IMAGERY_EXAMPLE_URL;
+const longFormQuestSchemaUrl = import.meta.env.VITE_LONG_FORM_QUEST_SCHEMA;
+const longFormQuestExampleUrl = import.meta.env
+  .VITE_LONG_FORM_QUEST_EXAMPLE_URL;
+
+const imagerySchema = ref<any>(null);
+const longFormQuestSchema = ref<any>(null);
+
+function handleFileDrop(
+  event: DragEvent,
+  targetRef: Ref<string>,
+  isDraggingRef: Ref<boolean>
+) {
+  isDraggingRef.value = false;
+  const files = event.dataTransfer?.files;
+  if (files && files[0]) {
+    const file = files[0];
+    if (!file.type.includes("json") && !file.name.endsWith(".json")) {
+      toast.error("Please drop a valid JSON file.");
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      if (typeof e.target?.result === "string") {
+        try {
+          const parsed = JSON.parse(e.target.result);
+          targetRef.value = JSON.stringify(parsed, null, 2);
+          toast.success("JSON file loaded successfully.");
+        } catch (err) {
+          targetRef.value = e.target.result;
+          toast.warn("The selected file is not valid JSON.");
+        }
+      }
+    };
+    reader.onerror = () => {
+      toast.error("Failed to read the file.");
+    };
+    reader.readAsText(file);
+  }
 }
 
-async function toggleExternalAppAccess() {
+function onImageryFileDrop(event: DragEvent) {
+  handleFileDrop(event, imageryListDef, isDraggingImagery);
+}
+
+function onQuestFileDrop(event: DragEvent) {
+  handleFileDrop(event, longFormQuestDef, isDraggingQuest);
+}
+
+async function validateJson(
+  jsonString: string | undefined,
+  schemaUrl: string,
+  cachedSchema: Ref<any>,
+  definitionName: string
+): Promise<{ data: any | null; error: string | null }> {
+  if (!jsonString) {
+    return { data: null, error: null };
+  }
+
   try {
-    await save({ externalAppAccess: workspace.externalAppAccess });
-  } catch(e) {
-    toast.error('External app enable/disable failed:' + e.message);
-    return;
+    if (!cachedSchema.value) {
+      const schemaResponse = await fetch(schemaUrl);
+      if (!schemaResponse.ok) {
+        throw new Error(
+          `Could not fetch ${definitionName.toLowerCase()} schema: ${
+            schemaResponse.statusText
+          }`
+        );
+      }
+      cachedSchema.value = await schemaResponse.json();
+      // remove "version" from the schema if exists
+      // we have version in long form quest schema which is creating problem while validating with json.
+      if (cachedSchema.value.version) {
+        delete cachedSchema.value.version;
+      }
+    }
+
+    let parsedJson;
+    try {
+      parsedJson = JSON.parse(jsonString);
+    } catch (e: any) {
+      return {
+        data: null,
+        error: `${definitionName} is not valid JSON: ${e.message}`,
+      };
+    }
+
+    const ajv = new Ajv({ allErrors: true });
+    addFormats(ajv);
+    const validate = ajv.compile(cachedSchema.value);
+    const valid = validate(parsedJson);
+    if (!valid) {
+      return {
+        data: null,
+        error: `${definitionName} JSON is not valid: ${ajv.errorsText(
+          validate.errors
+        )}`,
+      };
+    }
+
+    return { data: parsedJson, error: null };
+  } catch (e: any) {
+    return {
+      data: null,
+      error: `Failed to validate ${definitionName.toLowerCase()}: ${e.message}`,
+    };
   }
-  toast.success('External app enable/disable set successfully.');    
 }
 
-async function saveLongFormQuestDefinition() {
+async function saveExternalAppConfigurations() {
+  clearMessages();
+  let hasError = false;
+  const imageryResult = await validateJson(
+    imageryListDef.value,
+    imagerySchemaUrl,
+    imagerySchema,
+    "Imagery definition"
+  );
+  if (imageryResult.error) {
+    imageryError.value = imageryResult.error;
+    hasError = true;
+  }
+
+  const longFormQuestResult = await validateJson(
+    longFormQuestDef.value,
+    longFormQuestSchemaUrl,
+    longFormQuestSchema,
+    "Long form quest definition"
+  );
+  if (longFormQuestResult.error) {
+    longFormQuestError.value = longFormQuestResult.error;
+    hasError = true;
+  }
+
+  if (hasError) return;
+
   try {
-    await workspacesClient.saveLongFormQuestDefinition(workspaceId, longFormQuestDef.value);
-  } catch(e) {
-    toast.error('Long form quest update failed:' + e.message);
-    return;
+    await save({
+      imageryListDef: imageryResult.data,
+      longFormQuestDef: longFormQuestResult.data,
+      externalAppAccess: workspace.externalAppAccess,
+    });
+    saveStatus.value = { type: "success", message: "Changes saved." };
+  } catch (e) {
+    saveStatus.value = {
+      type: "error",
+      message: "Failed to save changes: " + e.message,
+    };
   }
-  toast.success('Long form quest updated successfully.');
 }
 
 async function acceptDelete() {
@@ -139,6 +379,14 @@ async function acceptDelete() {
 
 async function submitDelete() {
   await workspacesClient.deleteWorkspace(workspaceId);
-  navigateTo('/dashboard');
+  navigateTo("/dashboard");
 }
 </script>
+
+<style scoped>
+.drag-over {
+  border-style: dashed;
+  border-color: var(--bs-primary);
+  background-color: var(--bs-light);
+}
+</style>
diff --git a/services/workspaces.ts b/services/workspaces.ts
index a634611..1a46bad 100644
--- a/services/workspaces.ts
+++ b/services/workspaces.ts
@@ -104,22 +104,6 @@ export class WorkspacesClient extends BaseHttpClient implements ICancelableClien
     ]);
   }
 
-  async getLongFormQuestDefinition(workspaceId: number) {
-    const response = await this._get(`workspaces/${workspaceId}/quests/long`);
-
-    if (response.status === 204) {
-      return undefined
-    }
-
-    return await response.text();
-  }
-
-  async saveLongFormQuestDefinition(workspaceId: number, definition: string): Promise {
-    await this._put(`workspaces/${workspaceId}/quests/long`, definition, {
-      headers: { ...this._requestHeaders, 'Content-Type': 'text/plain' }
-    });
-  }
-
   #setAuthHeader() {
     if (this.#tdeiClient.auth.complete) {
       this._requestHeaders.Authorization = 'Bearer ' + this.#tdeiClient.auth.accessToken;