diff --git a/src/App.vue b/src/App.vue
index d7848869..62786d79 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,7 +24,8 @@ const routeTitleI18nKeys = {
   "adminlogin": ["header.operator_login"],
   "guestHome": ["guest.home.title"],
   "PwaDownload": ["guest.pwa.title"],
-  "connectivity-issue": ["connectivity.title"]
+  "connectivity-issue": ["connectivity.title"],
+  "selfservestudio": ["admin.self_serve.title"]
 };
 
 const toReadableTitle = (value) => {
diff --git a/src/components/displays/department/moduleNavigation/DepartmentModulesDisplay.vue b/src/components/displays/department/moduleNavigation/DepartmentModulesDisplay.vue
index 2dfc659a..80452e50 100644
--- a/src/components/displays/department/moduleNavigation/DepartmentModulesDisplay.vue
+++ b/src/components/displays/department/moduleNavigation/DepartmentModulesDisplay.vue
@@ -124,6 +124,20 @@ const modules = computed(() => [
         isSavingSelfServeEnabled.value = false;
       }
     }
+  },
+  {
+    id: 6,
+    name: 'Self-Serve Studio',
+    description: 'Configure questions, conditions, rules and tasks',
+    icon: "fas fa-project-diagram",
+    onClick: () => {
+      const departmentId = router.currentRoute.value.params.departmentId;
+      router.push(`/admin/${departmentId}/modules/self-serve/studio`);
+    },
+    onClickCount: () => {
+      this.onClick();
+    },
+    count: 0
   }
   /**
    * {
diff --git a/src/components/displays/department/tables/SelfServeTryModal.vue b/src/components/displays/department/tables/SelfServeTryModal.vue
index 9ad58a96..0f495ff7 100644
--- a/src/components/displays/department/tables/SelfServeTryModal.vue
+++ b/src/components/displays/department/tables/SelfServeTryModal.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed, onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
+import Swal from "sweetalert2";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { useSelfServeLogic } from "@/composables/useSelfServeLogic";
 import SelfServeQuestionCards from "@/components/displays/selfServe/SelfServeQuestionCards.vue";
@@ -28,7 +29,16 @@ const props = defineProps({
 const emit = defineEmits(["closeModal"]);
 
 const availableLanes = ref([]);
+const availableVehicleTypes = ref([]);
 const selectedLaneId = ref(props.laneId ? parseInt(props.laneId) : null);
+const normalizeVehicleTypeId = (value) => {
+  const parsed = parseInt(value);
+  if (Number.isNaN(parsed) || parsed <= 0) {
+    return null;
+  }
+  return parsed;
+};
+const selectedVehicleTypeId = ref(normalizeVehicleTypeId(props.vehicleTypeId));
 const reg = ref("AB12345");
 
 const {
@@ -44,17 +54,84 @@ const {
   evaluationTrace,
   visibleQuestions,
   activeTasks,
-  currentQuestion,
-  allVisibleQuestionsAnswered,
   machineAvailable,
   allowed,
   fetchSelfServeData,
   syncVehicleAnswer,
+  clearVehicleAnswers,
+  evaluateCondition,
 } = useSelfServeLogic();
 
 const emptyCompletedTasks = computed(() => ({}));
+const isAnswered = (questionId) => {
+  const answer = answers.value[questionId];
+  return answer === true || answer === false;
+};
+const displayQuestions = computed(() => {
+  const localVisibleQuestions = [...questions.value]
+    .filter((question) => {
+      const conditionId = parseInt(question?.condition_id ?? 0);
+      if (!conditionId) {
+        return true;
+      }
+
+      return evaluateCondition(conditionId);
+    })
+    .sort((a, b) => {
+      const priorityA = parseInt(a?.order_priority ?? 0);
+      const priorityB = parseInt(b?.order_priority ?? 0);
+      if (priorityA !== priorityB) {
+        return priorityA - priorityB;
+      }
+
+      return parseInt(a?.id ?? 0) - parseInt(b?.id ?? 0);
+    });
+
+  if (visibleQuestions.value.length > 0) {
+    const mergedById = new Map();
+
+    visibleQuestions.value.forEach((question) => {
+      mergedById.set(parseInt(question.id), question);
+    });
+
+    // Keep unanswered follow-up questions visible even if backend summary is briefly stale.
+    localVisibleQuestions.forEach((question) => {
+      const questionId = parseInt(question.id);
+      if (!mergedById.has(questionId) && !isAnswered(questionId)) {
+        mergedById.set(questionId, question);
+      }
+    });
+
+    return [...mergedById.values()].sort((a, b) => {
+      const priorityA = parseInt(a?.order_priority ?? 0);
+      const priorityB = parseInt(b?.order_priority ?? 0);
+      if (priorityA !== priorityB) {
+        return priorityA - priorityB;
+      }
+
+      return parseInt(a?.id ?? 0) - parseInt(b?.id ?? 0);
+    });
+  }
+
+  const hasUnansweredQuestions = localVisibleQuestions.some((question) => !isAnswered(question.id));
+  if (!hasUnansweredQuestions) {
+    return visibleQuestions.value;
+  }
+
+  return localVisibleQuestions;
+});
+const allDisplayQuestionsAnswered = computed(() => (
+  displayQuestions.value.length > 0
+  && displayQuestions.value.every((question) => isAnswered(question.id))
+));
 const answeredQuestions = computed(() => (
-  visibleQuestions.value.filter((question) => answers.value[question.id] === true || answers.value[question.id] === false)
+  displayQuestions.value.filter((question) => isAnswered(question.id))
+));
+const normalizedReg = computed(() => reg.value.trim().toUpperCase());
+const canClearAnswers = computed(() => (
+  !!selectedLaneId.value
+  && normalizedReg.value.length >= 2
+  && !loading.value
 ));
 
 const loadLanes = async () => {
@@ -66,14 +143,31 @@ const loadLanes = async () => {
   }
 };
 
+const loadVehicleTypes = async () => {
+  const options = await SessionUser.objects.vehicles.columns.type.options(true, {
+    isWash: true,
+    addDefaultOption: true,
+    restrictToCategory4: null,
+    includeProductRaw: true,
+  });
+
+  availableVehicleTypes.value = (options || [])
+    .map((entry) => ({
+      id: parseInt(entry.id),
+      name: entry.name,
+    }))
+    .filter((entry) => !Number.isNaN(entry.id) && entry.id > 0);
+};
+
 const refresh = async () => {
   if (!selectedLaneId.value || !reg.value.trim()) {
     return;
   }
 
+  const vehicleTypeId = normalizeVehicleTypeId(selectedVehicleTypeId.value);
   await fetchSelfServeData(
     props.departmentId,
-    props.vehicleTypeId,
+    vehicleTypeId,
     selectedLaneId.value,
     reg.value.trim().toUpperCase()
   );
@@ -87,6 +181,33 @@ const submitAnswer = async (questionId, value) => {
     reg: reg.value,
     questionId,
     value,
+    vehicleTypeId: normalizeVehicleTypeId(selectedVehicleTypeId.value),
+  });
+};
+
+const clearAnswers = async () => {
+  if (!canClearAnswers.value) {
+    return;
+  }
+
+  const confirmation = await Swal.fire({
+    title: "Ryd besvarelser?",
+    text: `Registreringsnummer ${normalizedReg.value} pa bane ${selectedLaneId.value} bliver ryddet.`,
+    icon: "warning",
+    showCancelButton: true,
+    confirmButtonText: "Ja, ryd besvarelser",
+    cancelButtonText: "Annuller",
+  });
+
+  if (!confirmation.isConfirmed) {
+    return;
+  }
+
+  await clearVehicleAnswers({
+    departmentId: props.departmentId,
+    laneId: selectedLaneId.value,
+    vehicleTypeId: normalizeVehicleTypeId(selectedVehicleTypeId.value),
+    reg: normalizedReg.value,
   });
 };
 
@@ -96,11 +217,12 @@ const closeModal = () => {
 
 onMounted(async () => {
   await loadLanes();
+  await loadVehicleTypes();
   await refresh();
 });
 
-watch(() => [selectedLaneId.value, reg.value], async ([laneId, registration], [oldLaneId, oldRegistration] = []) => {
-  if (laneId === oldLaneId && registration === oldRegistration) {
+watch(() => [selectedLaneId.value, reg.value, normalizeVehicleTypeId(selectedVehicleTypeId.value)], async ([laneId, registration, vehicleTypeId], [oldLaneId, oldRegistration, oldVehicleTypeId] = []) => {
+  if (laneId === oldLaneId && registration === oldRegistration && vehicleTypeId === oldVehicleTypeId) {
     return;
   }
 
@@ -126,11 +248,11 @@ watch(() => [selectedLaneId.value, reg.value], async ([laneId, registration], [o
           <div class="column is-12">
             <div class="box">
               <div class="columns is-multiline">
-                <div class="column is-4">
+                <div class="column is-3">
                   <label class="label">Registreringsnummer</label>
                   <input v-model="reg" class="input" type="text" placeholder="AB12345" data-testid="self-serve-try-reg" />
                 </div>
-                <div v-if="!props.laneId" class="column is-4">
+                <div v-if="!props.laneId" class="column is-3">
                   <label class="label">Bane</label>
                   <div class="select is-fullwidth">
                     <select v-model="selectedLaneId" data-testid="self-serve-try-lane">
@@ -141,11 +263,22 @@ watch(() => [selectedLaneId.value, reg.value], async ([laneId, registration], [o
                     </select>
                   </div>
                 </div>
-                <div v-else class="column is-4">
+                <div v-else class="column is-3">
                   <label class="label">Bane</label>
                   <input class="input" :value="selectedLaneId" type="text" disabled>
                 </div>
-                <div class="column is-4 is-flex is-align-items-flex-end">
+                <div class="column is-3">
+                  <label class="label">Koretojstype</label>
+                  <div class="select is-fullwidth">
+                    <select v-model="selectedVehicleTypeId" data-testid="self-serve-try-vehicle-type">
+                      <option :value="null">Auto (fra registreringsnummer)</option>
+                      <option v-for="entry in availableVehicleTypes" :key="entry.id" :value="entry.id">
+                        {{ entry.name }}
+                      </option>
+                    </select>
+                  </div>
+                </div>
+                <div class="column is-3 is-flex is-align-items-flex-end">
                   <button class="button is-link is-fullwidth" data-testid="self-serve-try-refresh" :class="{ 'is-loading': loading }" @click="refresh">
                     Hent preview
                   </button>
@@ -159,8 +292,8 @@ watch(() => [selectedLaneId.value, reg.value], async ([laneId, registration], [o
                 <span class="tag" :class="machineAvailable ? 'is-success' : 'is-light'">
                   Maskine tilgaengelig: {{ machineAvailable ? "Ja" : "Nej" }}
                 </span>
-                <span class="tag" :class="allVisibleQuestionsAnswered ? 'is-success' : 'is-warning'">
-                  Alle synlige sporgsmal besvaret: {{ allVisibleQuestionsAnswered ? "Ja" : "Nej" }}
+                <span class="tag" :class="allDisplayQuestionsAnswered ? 'is-success' : 'is-warning'">
+                  Alle synlige sporgsmal besvaret: {{ allDisplayQuestionsAnswered ? "Ja" : "Nej" }}
                 </span>
                 <span v-if="session" class="tag is-info">
                   Session: {{ session.status }} (#{{ session.id }})
@@ -188,25 +321,12 @@ watch(() => [selectedLaneId.value, reg.value], async ([laneId, registration], [o
             <div class="box" style="height: 100%">
               <h4 class="title is-5">Sporgsmal</h4>
 
-              <div v-if="currentQuestion" class="notification is-info is-light">
-                <p class="title is-6">{{ currentQuestion.question }}</p>
-                <p v-if="currentQuestion.description" class="is-size-7 mb-3">{{ currentQuestion.description }}</p>
-                <div class="buttons">
-                  <button class="button is-success" :class="{ 'is-loading': loading }" @click="submitAnswer(currentQuestion.id, true)">
-                    {{ $t("common.yes") }}
-                  </button>
-                  <button class="button is-danger" :class="{ 'is-loading': loading }" @click="submitAnswer(currentQuestion.id, false)">
-                    {{ $t("common.no") }}
-                  </button>
-                </div>
-              </div>
-
-              <div v-else class="notification is-success is-light">
-                <p>{{ visibleQuestions.length === 0 ? "Ingen synlige sporgsmal for denne preview." : "Alle synlige sporgsmal er besvaret." }}</p>
+              <div v-if="displayQuestions.length === 0" class="notification is-success is-light">
+                <p>Ingen synlige sporgsmal for denne preview.</p>
               </div>
 
               <SelfServeQuestionCards
-                :visibleQuestions="visibleQuestions"
+                :visibleQuestions="displayQuestions"
                 :answers="answers"
                 @answer-question="submitAnswer"
               />
@@ -249,7 +369,18 @@ watch(() => [selectedLaneId.value, reg.value], async ([laneId, registration], [o
 
               <hr />
 
-              <h5 class="subtitle is-6">Besvarede sporgsmal</h5>
+              <div class="is-flex is-align-items-center is-justify-content-space-between mb-2">
+                <h5 class="subtitle is-6 mb-0">Besvarede sporgsmal</h5>
+                <button
+                  class="button is-small is-light"
+                  data-testid="self-serve-try-clear-answers"
+                  :class="{ 'is-loading': loading }"
+                  :disabled="!canClearAnswers"
+                  @click="clearAnswers"
+                >
+                  Ryd besvarelser
+                </button>
+              </div>
               <ul>
                 <li v-for="question in answeredQuestions" :key="question.id" class="mb-1">
                   {{ question.question }}:
diff --git a/src/components/session/token/SessionUser/Objects/SelfServeVehicleConditions.vue b/src/components/session/token/SessionUser/Objects/SelfServeVehicleConditions.vue
index 22aceca6..13d7c509 100644
--- a/src/components/session/token/SessionUser/Objects/SelfServeVehicleConditions.vue
+++ b/src/components/session/token/SessionUser/Objects/SelfServeVehicleConditions.vue
@@ -163,11 +163,19 @@ export const SelfServeVehicleConditions = {
     single: async (id) => {
       return ObjectsGlobal.get.object(SelfServeVehicleConditions.meta.endpoint, id);
     },
-    previewAllowed: async (laneId, reg) => {
-      return authenticatedRequest("/department/selfserve/vehicle/allowed", "GET", {
+    previewAllowed: async (laneId, reg, vehicleTypeId = null) => {
+      const params = {
         lane_id: parseInt(laneId),
         reg: reg,
-      }).then((response) => response.data.data || response.data);
+      };
+
+      const normalizedVehicleTypeId = parseInt(vehicleTypeId);
+      if (!Number.isNaN(normalizedVehicleTypeId) && normalizedVehicleTypeId > 0) {
+        params.vehicle_type = normalizedVehicleTypeId;
+      }
+
+      return authenticatedRequest("/department/selfserve/vehicle/allowed", "GET", params)
+        .then((response) => response.data.data || response.data);
     },
     washSummary: async (params = {}) => {
       return authenticatedRequest("/department/selfserve/washes/summary", "GET", params)
diff --git a/src/composables/useSelfServeLogic.js b/src/composables/useSelfServeLogic.js
index 36766f07..a10f022a 100644
--- a/src/composables/useSelfServeLogic.js
+++ b/src/composables/useSelfServeLogic.js
@@ -52,6 +52,9 @@ const normalizeTask = (task) => ({
 });
 
 const extractTaskId = (task) => parseInt(task?.task_id ?? task?.id ?? 0) || null;
+const extractVehicleConditionQuestionId = (condition) => (
+  parseInt(condition?.question?.id ?? condition?.question_id ?? condition?.question ?? 0) || null
+);
 
 const buildAnswersMap = (questions) => questions.reduce((accumulator, question) => {
   accumulator[question.id] = question.answer;
@@ -70,6 +73,35 @@ const sortByOrderPriority = (list) => [...list].sort((a, b) => {
   return parseInt(a?.id ?? 0) - parseInt(b?.id ?? 0);
 });
 
+const normalizePositiveInt = (value) => {
+  const parsed = parseInt(value);
+  return !Number.isNaN(parsed) && parsed > 0 ? parsed : null;
+};
+
+const extractResolvedVehicleTypeId = (payload) => {
+  if (!payload || typeof payload !== "object") {
+    return null;
+  }
+
+  const candidates = [
+    payload?.vehicle_type_id,
+    payload?.session?.vehicle_type_id,
+    payload?.vehicle?.vehicle_type_id,
+    payload?.vehicle?.type_id,
+    payload?.vehicle?.type?.id,
+    payload?.vehicle?.type,
+  ];
+
+  for (const candidate of candidates) {
+    const normalizedCandidate = normalizePositiveInt(candidate);
+    if (normalizedCandidate !== null) {
+      return normalizedCandidate;
+    }
+  }
+
+  return null;
+};
+
 const mergeQuestion = (existingQuestion, incomingQuestion, incomingRaw = {}) => {
   if (!existingQuestion) {
     return incomingQuestion;
@@ -177,8 +209,22 @@ export function useSelfServeLogic() {
   const configVersionId = ref(null);
   const evaluationTrace = ref(null);
   const lastPreviewContextKey = ref(null);
+  const lastVehicleTypeOverride = ref(null);
+  const lastResolvedVehicleTypeId = ref(null);
   const summaryVisibleQuestionIds = ref([]);
   const summaryQuestionOrder = ref({});
+  const latestFetchRequestId = ref(0);
+
+  const beginFetchRequest = () => {
+    latestFetchRequestId.value += 1;
+    return latestFetchRequestId.value;
+  };
+
+  const isFetchRequestActive = (requestId) => (
+    requestId === null
+    || requestId === undefined
+    || requestId === latestFetchRequestId.value
+  );
 
   const setSummaryVisibleQuestions = (questionList = []) => {
     const normalizedIds = (Array.isArray(questionList) ? questionList : [])
@@ -192,6 +238,18 @@ export function useSelfServeLogic() {
     }, {});
   };
 
+  const updateResolvedVehicleTypeId = (...sources) => {
+    for (const source of sources) {
+      const resolvedVehicleTypeId = extractResolvedVehicleTypeId(source);
+      if (resolvedVehicleTypeId !== null) {
+        lastResolvedVehicleTypeId.value = resolvedVehicleTypeId;
+        return resolvedVehicleTypeId;
+      }
+    }
+
+    return lastResolvedVehicleTypeId.value;
+  };
+
   const isImage = (attachment) => {
     const filename = attachment?.content?.other || "";
     const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg"];
@@ -246,7 +304,11 @@ export function useSelfServeLogic() {
   };
 
   const applyPreviewData = async (previewData, options = {}) => {
-    const { mergeQuestions = false } = options;
+    const { mergeQuestions = false, requestId = null } = options;
+    if (!isFetchRequestActive(requestId)) {
+      return false;
+    }
+
     preview.value = previewData || null;
     lane.value = previewData?.lane || lane.value;
     machineType.value = previewData?.machine_type || machineType.value;
@@ -289,13 +351,24 @@ export function useSelfServeLogic() {
       ? previewData.tasks.map(normalizeTask).sort((a, b) => a.order_priority - b.order_priority)
       : [];
 
-    tasks.value = await hydrateTaskAttachments(normalizedTasks);
+    const hydratedTasks = await hydrateTaskAttachments(normalizedTasks);
+    if (!isFetchRequestActive(requestId)) {
+      return false;
+    }
+
+    tasks.value = hydratedTasks;
     allowedServices.value = Array.isArray(previewData?.allowed_services)
       ? previewData.allowed_services
       : [];
+    return true;
   };
 
-  const applySummaryData = async (summaryData) => {
+  const applySummaryData = async (summaryData, options = {}) => {
+    const { requestId = null } = options;
+    if (!isFetchRequestActive(requestId)) {
+      return false;
+    }
+
     summary.value = summaryData || null;
     session.value = summaryData?.session || session.value;
     lane.value = summaryData?.lane || lane.value;
@@ -332,9 +405,16 @@ export function useSelfServeLogic() {
         .map(normalizeTask)
         .sort((a, b) => a.order_priority - b.order_priority);
 
-      tasks.value = await hydrateTaskAttachments(normalizedTasks);
+      const hydratedTasks = await hydrateTaskAttachments(normalizedTasks);
+      if (!isFetchRequestActive(requestId)) {
+        return false;
+      }
+
+      tasks.value = hydratedTasks;
       allowedServices.value = Array.from(new Set(normalizedTasks.flatMap((task) => task.services || [])));
     }
+
+    return true;
   };
 
   const downloadAttachment = async (taskId, attachmentId) => {
@@ -350,7 +430,8 @@ export function useSelfServeLogic() {
     }
   };
 
-  const fetchWashSummary = async (params = {}, manageLoading = true) => {
+  const fetchWashSummary = async (params = {}, manageLoading = true, options = {}) => {
+    const { requestId = null } = options;
     if (!params.session_id && !(params.lane_id && params.reg)) {
       return null;
     }
@@ -361,7 +442,10 @@ export function useSelfServeLogic() {
 
     try {
       const summaryData = await SessionUser.objects.self_serve_vehicle_conditions.get.washSummary(params);
-      await applySummaryData(summaryData);
+      const didApply = await applySummaryData(summaryData, { requestId });
+      if (!didApply) {
+        return null;
+      }
       return summaryData;
     } catch (error) {
       console.error("Error fetching self-serve summary:", error);
@@ -374,6 +458,8 @@ export function useSelfServeLogic() {
   };
 
   const fetchSelfServeData = async (_departmentId, _vehicleTypeId, laneId = null, reg = null) => {
+    const requestId = beginFetchRequest();
+
     if (!laneId || !reg || reg.trim().length < 2) {
       preview.value = null;
       summary.value = null;
@@ -391,33 +477,93 @@ export function useSelfServeLogic() {
       configVersionId.value = null;
       evaluationTrace.value = null;
       lastPreviewContextKey.value = null;
+      lastVehicleTypeOverride.value = null;
+      lastResolvedVehicleTypeId.value = null;
       summaryVisibleQuestionIds.value = [];
       summaryQuestionOrder.value = {};
+      loading.value = false;
       return null;
     }
 
     loading.value = true;
     try {
       const normalizedReg = reg.trim().toUpperCase();
-      const contextKey = `${parseInt(laneId)}:${normalizedReg}`;
+      const normalizedVehicleTypeId = parseInt(_vehicleTypeId);
+      const hasVehicleTypeOverride = !Number.isNaN(normalizedVehicleTypeId) && normalizedVehicleTypeId > 0;
+      lastVehicleTypeOverride.value = hasVehicleTypeOverride ? normalizedVehicleTypeId : null;
+      if (hasVehicleTypeOverride) {
+        lastResolvedVehicleTypeId.value = normalizedVehicleTypeId;
+      }
+      const contextVehicleTypeKey = hasVehicleTypeOverride
+        ? normalizedVehicleTypeId
+        : (lastResolvedVehicleTypeId.value ?? "auto");
+      const contextKey = `${parseInt(laneId)}:${normalizedReg}:${contextVehicleTypeKey}`;
       const shouldMergeQuestions = lastPreviewContextKey.value === contextKey;
-      const previewData = await SessionUser.objects.self_serve_vehicle_conditions.get.previewAllowed(laneId, normalizedReg);
-      await applyPreviewData(previewData, { mergeQuestions: shouldMergeQuestions });
-      lastPreviewContextKey.value = contextKey;
+      const previewData = hasVehicleTypeOverride
+        ? await SessionUser.objects.self_serve_vehicle_conditions.get.previewAllowed(laneId, normalizedReg, normalizedVehicleTypeId)
+        : await SessionUser.objects.self_serve_vehicle_conditions.get.previewAllowed(laneId, normalizedReg);
+
+      if (!isFetchRequestActive(requestId)) {
+        return null;
+      }
+
+      const didApplyPreview = await applyPreviewData(previewData, {
+        mergeQuestions: shouldMergeQuestions,
+        requestId,
+      });
+      if (!didApplyPreview || !isFetchRequestActive(requestId)) {
+        return null;
+      }
+
+      updateResolvedVehicleTypeId(previewData, previewData?.session, previewData?.vehicle);
+      const resolvedContextVehicleTypeKey = hasVehicleTypeOverride
+        ? normalizedVehicleTypeId
+        : (lastResolvedVehicleTypeId.value ?? "auto");
+      lastPreviewContextKey.value = `${parseInt(laneId)}:${normalizedReg}:${resolvedContextVehicleTypeKey}`;
 
       let summaryData = null;
       if (previewData?.session?.id) {
-        summaryData = await fetchWashSummary({ session_id: previewData.session.id }, false);
+        summaryData = await fetchWashSummary(
+          { session_id: previewData.session.id },
+          false,
+          { requestId }
+        );
       }
 
-      let hasSummaryQuestions = Array.isArray(summaryData?.questions);
-      if (!hasSummaryQuestions && previewData?.session?.id) {
-        const fallbackSummary = await fetchWashSummary({ lane_id: parseInt(laneId), reg: normalizedReg }, false);
-        hasSummaryQuestions = Array.isArray(fallbackSummary?.questions);
+      if (!isFetchRequestActive(requestId)) {
+        return null;
+      }
+
+      updateResolvedVehicleTypeId(summaryData, summaryData?.session);
+      let hasSummaryQuestions = Array.isArray(summaryData?.questions) && summaryData.questions.length > 0;
+      const shouldRunFallbackSummary = !!previewData?.session?.id
+        && (!hasSummaryQuestions || !hasVehicleTypeOverride);
+      if (shouldRunFallbackSummary) {
+        const fallbackSummaryParams = {
+          lane_id: parseInt(laneId),
+          reg: normalizedReg,
+        };
+        const fallbackVehicleTypeId = hasVehicleTypeOverride
+          ? normalizedVehicleTypeId
+          : updateResolvedVehicleTypeId(previewData, summaryData, session.value, vehicle.value);
+        if (fallbackVehicleTypeId !== null) {
+          fallbackSummaryParams.vehicle_type = fallbackVehicleTypeId;
+        }
+        const fallbackSummary = await fetchWashSummary(
+          fallbackSummaryParams,
+          false,
+          { requestId }
+        );
+        if (!isFetchRequestActive(requestId)) {
+          return null;
+        }
+
+        updateResolvedVehicleTypeId(fallbackSummary, fallbackSummary?.session);
+        hasSummaryQuestions = Array.isArray(fallbackSummary?.questions) && fallbackSummary.questions.length > 0;
       }
 
       // If summary is not available yet, keep the preview list visible so the Questions step is not empty.
-      if (!hasSummaryQuestions) {
+      if (!hasSummaryQuestions && isFetchRequestActive(requestId)) {
         setSummaryVisibleQuestions(questions.value);
       }
 
@@ -426,11 +572,13 @@ export function useSelfServeLogic() {
       console.error("Error fetching self-serve preview:", error);
       return null;
     } finally {
-      loading.value = false;
+      if (isFetchRequestActive(requestId)) {
+        loading.value = false;
+      }
     }
   };
 
-  const syncVehicleAnswer = async ({ departmentId, laneId, customerNumber = null, reg, questionId, value }) => {
+  const syncVehicleAnswer = async ({ departmentId, laneId, customerNumber = null, reg, questionId, value, vehicleTypeId = undefined }) => {
     if (!departmentId || !laneId || !reg || !questionId) {
       return null;
     }
@@ -455,11 +603,20 @@ export function useSelfServeLogic() {
         [parseInt(questionId)]: value,
       };
 
+      const refreshVehicleTypeCandidate = vehicleTypeId === undefined || vehicleTypeId === null
+        ? (lastVehicleTypeOverride.value ?? lastResolvedVehicleTypeId.value)
+        : vehicleTypeId;
+      const normalizedRefreshVehicleTypeId = parseInt(refreshVehicleTypeCandidate);
+      const refreshVehicleTypeId = !Number.isNaN(normalizedRefreshVehicleTypeId) && normalizedRefreshVehicleTypeId > 0
+        ? normalizedRefreshVehicleTypeId
+        : null;
+
       if (responseSummary) {
         await applySummaryData(responseSummary);
+        updateResolvedVehicleTypeId(responseSummary, responseSummary?.session);
       }
 
-      await fetchSelfServeData(departmentId, null, laneId, normalizedReg);
+      await fetchSelfServeData(departmentId, refreshVehicleTypeId, laneId, normalizedReg);
       answers.value = {
         ...answers.value,
         [parseInt(questionId)]: value,
@@ -473,6 +630,67 @@ export function useSelfServeLogic() {
     }
   };
 
+  const clearVehicleAnswers = async ({ departmentId = null, laneId, reg, questionIds = [], vehicleTypeId = null }) => {
+    if (!laneId || !reg || !reg.trim()) {
+      return { deletedCount: 0 };
+    }
+
+    loading.value = true;
+    try {
+      const normalizedReg = reg.trim().toUpperCase();
+      const filters = {
+        lane: parseInt(laneId),
+        reg: normalizedReg,
+      };
+
+      if (departmentId !== null && departmentId !== undefined && !Number.isNaN(parseInt(departmentId))) {
+        filters.department = parseInt(departmentId);
+      }
+
+      const conditions = await SessionUser.objects.self_serve_vehicle_conditions.get.all(filters);
+      const normalizedQuestionIds = new Set(
+        (Array.isArray(questionIds) ? questionIds : [])
+          .map((id) => parseInt(id))
+          .filter((id) => !Number.isNaN(id) && id > 0)
+      );
+
+      const conditionIdsToDelete = (Array.isArray(conditions) ? conditions : [])
+        .filter((condition) => {
+          if (normalizedQuestionIds.size === 0) {
+            return true;
+          }
+
+          const conditionQuestionId = extractVehicleConditionQuestionId(condition);
+          return conditionQuestionId !== null && normalizedQuestionIds.has(conditionQuestionId);
+        })
+        .map((condition) => parseInt(condition?.id ?? 0))
+        .filter((id) => !Number.isNaN(id) && id > 0);
+
+      await Promise.all(conditionIdsToDelete.map((conditionId) => (
+        SessionUser.objects.self_serve_vehicle_conditions.delete(conditionId)
+      )));
+
+      // Force a non-merge refresh so cleared answers are not kept from local state.
+      lastPreviewContextKey.value = null;
+      const refreshVehicleTypeCandidate = vehicleTypeId !== null && vehicleTypeId !== undefined
+        ? vehicleTypeId
+        : (lastVehicleTypeOverride.value ?? lastResolvedVehicleTypeId.value);
+      const normalizedRefreshVehicleTypeId = parseInt(refreshVehicleTypeCandidate);
+      const refreshVehicleTypeId = !Number.isNaN(normalizedRefreshVehicleTypeId) && normalizedRefreshVehicleTypeId > 0
+        ? normalizedRefreshVehicleTypeId
+        : null;
+
+      await fetchSelfServeData(departmentId, refreshVehicleTypeId, parseInt(laneId), normalizedReg);
+
+      return { deletedCount: conditionIdsToDelete.length };
+    } catch (error) {
+      console.error("Error clearing self-serve answers:", error);
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
   const reset = () => {
     completedTasks.value = {};
   };
@@ -492,6 +710,14 @@ export function useSelfServeLogic() {
 
   const visibleQuestions = computed(() => {
     const allowedQuestionIds = new Set(Array.isArray(summaryVisibleQuestionIds.value) ? summaryVisibleQuestionIds.value : []);
+    const hasSummarySnapshot = summary.value !== null;
+
+    if (hasSummarySnapshot && allowedQuestionIds.size === 0) {
+      return [...questions.value]
+        .filter((question) => answers.value[question.id] === true || answers.value[question.id] === false)
+        .sort((a, b) => parseInt(a?.order_priority ?? 0) - parseInt(b?.order_priority ?? 0));
+    }
+
     return [...questions.value]
       .filter((question) => allowedQuestionIds.has(question.id))
       .sort((a, b) => {
@@ -664,6 +890,7 @@ export function useSelfServeLogic() {
     fetchSelfServeData,
     fetchWashSummary,
     syncVehicleAnswer,
+    clearVehicleAnswers,
     evaluateRule,
     evaluateCondition,
     isQuestionVisible,
diff --git a/src/router.js b/src/router.js
index 6609012b..3b51bb22 100644
--- a/src/router.js
+++ b/src/router.js
@@ -121,18 +121,8 @@ import DepartmentTimeBookingsNew
 	from "@/views/dashboards/departmentDashboard/modules/time-bookings/book/DepartmentTimeBookingsNew.vue";
 import DepartmentWashLanes from "@/views/dashboards/departmentDashboard/modules/wash-lanes/DepartmentWashLanes.vue";
 import DepartmentWashLane from "@/views/dashboards/departmentDashboard/modules/wash-lanes/DepartmentWashLane.vue";
-import DepartmentSelfServeQuestions
-	from "@/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeQuestions.vue";
-import DepartmentSelfServeTasks
-	from "@/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeTasks.vue";
-import DepartmentSelfServeConditions
-	from "@/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeConditions.vue";
-import DepartmentSelfServeConditionRules
-	from "@/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeConditionRules.vue";
-import DepartmentSelfServeVehicleConditions
-	from "@/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeVehicleConditions.vue";
-import DepartmentSelfServeMachineTypes
-  from "@/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeMachineTypes.vue";
+import DepartmentSelfServeStudio
+  from "@/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue";
 import DepartmentGoals
     from "@/views/dashboards/departmentDashboard/modules/goals/DepartmentGoals.vue";
 import ConfigurationLimble from "@/views/dashboards/superUserDashboard/configuration/ConfigurationLimble.vue";
@@ -524,41 +514,71 @@ export const router = createRouter({
 			component: DepartmentWashLane,
 			meta: { middleware: adminMiddleware, departmentSelection: true }
 		},
+		{
+			name: 'selfservestudio',
+			path: '/admin/:departmentId/modules/self-serve/studio',
+			component: DepartmentSelfServeStudio,
+			meta: { middleware: adminMiddleware, departmentSelection: true, title: 'Self-Serve Studio' }
+		},
 		{
 			name: 'selfservequestions',
 			path: '/admin/:departmentId/modules/self-serve/questions',
-			component: DepartmentSelfServeQuestions,
-			meta: { middleware: adminMiddleware, departmentSelection: true }
+			redirect: (to) => ({
+				name: 'selfservestudio',
+				params: to.params,
+				query: { ...to.query, tab: 'questions' }
+			}),
+			meta: { middleware: adminMiddleware, departmentSelection: true, title: 'Self-Serve Studio' }
 		},
 		{
 			name: 'selfservetasks',
 			path: '/admin/:departmentId/modules/self-serve/tasks',
-			component: DepartmentSelfServeTasks,
-			meta: { middleware: adminMiddleware, departmentSelection: true }
+			redirect: (to) => ({
+				name: 'selfservestudio',
+				params: to.params,
+				query: { ...to.query, tab: 'tasks' }
+			}),
+			meta: { middleware: adminMiddleware, departmentSelection: true, title: 'Self-Serve Studio' }
 		},
 		{
 			name: 'selfserveconditions',
 			path: '/admin/:departmentId/modules/self-serve/conditions',
-			component: DepartmentSelfServeConditions,
-			meta: { middleware: adminMiddleware, departmentSelection: true }
+			redirect: (to) => ({
+				name: 'selfservestudio',
+				params: to.params,
+				query: { ...to.query, tab: 'conditions' }
+			}),
+			meta: { middleware: adminMiddleware, departmentSelection: true, title: 'Self-Serve Studio' }
 		},
 		{
 			name: 'selfserveconditionrules',
 			path: '/admin/:departmentId/modules/self-serve/condition-rules',
-			component: DepartmentSelfServeConditionRules,
-			meta: { middleware: adminMiddleware, departmentSelection: true }
+			redirect: (to) => ({
+				name: 'selfservestudio',
+				params: to.params,
+				query: { ...to.query, tab: 'conditions' }
+			}),
+			meta: { middleware: adminMiddleware, departmentSelection: true, title: 'Self-Serve Studio' }
 		},
 		{
 			name: 'selfservevehicleconditions',
 			path: '/admin/:departmentId/modules/self-serve/vehicle-conditions',
-			component: DepartmentSelfServeVehicleConditions,
-			meta: { middleware: adminMiddleware, departmentSelection: true }
+			redirect: (to) => ({
+				name: 'selfservestudio',
+				params: to.params,
+				query: { ...to.query, tab: 'conditions', compat_view: 'vehicle-conditions' }
+			}),
+			meta: { middleware: adminMiddleware, departmentSelection: true, title: 'Self-Serve Studio' }
 		},
 		{
 			name: 'selfservemachinetypes',
 			path: '/admin/:departmentId/modules/self-serve/machine-types',
-			component: DepartmentSelfServeMachineTypes,
-			meta: { middleware: adminMiddleware, departmentSelection: true }
+			redirect: (to) => ({
+				name: 'selfservestudio',
+				params: to.params,
+				query: { ...to.query, tab: 'conditions', compat_view: 'machine-types' }
+			}),
+			meta: { middleware: adminMiddleware, departmentSelection: true, title: 'Self-Serve Studio' }
 		},
 		{
 			name: 'superuser',
diff --git a/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue b/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue
new file mode 100644
index 00000000..334fdd56
--- /dev/null
+++ b/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue
@@ -0,0 +1,1045 @@
+<script setup>
+import { computed, onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useToast } from "vue-toast-notification";
+import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
+import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
+import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFallBackPageWrapper.vue";
+import PageTitle from "@/components/global/PageTitle.vue";
+import SelfServeTryModal from "@/components/displays/department/tables/SelfServeTryModal.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
+
+const route = useRoute();
+const router = useRouter();
+const toast = useToast();
+
+const parseIntOrZero = (value) => {
+  const parsed = Number.parseInt(value, 10);
+  return Number.isNaN(parsed) ? 0 : parsed;
+};
+
+const parseNullableInt = (value) => {
+  if (value === null || value === undefined || value === "" || value === "null") {
+    return null;
+  }
+  const parsed = Number.parseInt(value, 10);
+  return Number.isNaN(parsed) ? null : parsed;
+};
+
+const ensureArray = (value) => {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  if (Array.isArray(value?.list)) {
+    return value.list;
+  }
+  if (Array.isArray(value?.rows)) {
+    return value.rows;
+  }
+  if (Array.isArray(value?.data)) {
+    return value.data;
+  }
+  return [];
+};
+
+const withErrorToast = (error, fallbackMessage) => {
+  const message = error?.response?.data?.message
+    || error?.response?.data?.data?.message
+    || error?.message
+    || fallbackMessage;
+  toast.error(message);
+};
+
+const requestGet = async (url, params = {}) => {
+  const response = await authenticatedRequest(url, "GET", params);
+  return response?.data?.data ?? null;
+};
+
+const requestPost = async (url, data = {}) => {
+  const response = await authenticatedRequest(url, "POST", data);
+  return response?.data?.data ?? null;
+};
+
+const requestPut = async (url, data = {}) => {
+  const response = await authenticatedRequest(url, "PUT", data);
+  return response?.data?.data ?? null;
+};
+
+const requestDelete = async (url, data = {}) => {
+  const response = await authenticatedRequest(url, "DELETE", data);
+  return response?.data?.data ?? null;
+};
+
+const departmentId = computed(() => parseIntOrZero(route.params.departmentId || SessionUser.functions.getDepartmentIdFromUrl()));
+const scopedLaneId = computed(() => parseNullableInt(route.query.lane_id));
+const scopedMachineTypeId = computed(() => parseNullableInt(route.query.machine_type_id));
+
+const tabs = [
+  { id: "questions", label: "Questions" },
+  { id: "conditions", label: "Conditions/Rules" },
+  { id: "tasks", label: "Tasks" },
+  { id: "simulator", label: "Simulator" },
+  { id: "history", label: "Version History" },
+];
+
+const activeTab = ref("questions");
+const questions = ref([]);
+const conditions = ref([]);
+const rules = ref([]);
+const tasks = ref([]);
+const machineTypes = ref([]);
+const products = ref([]);
+const lanes = ref([]);
+
+const versions = ref([]);
+const activeConfig = ref(null);
+const latestValidation = ref(null);
+
+const selectedConditionId = ref(null);
+const showTryModal = ref(false);
+const simulatorLaneId = ref(scopedLaneId.value);
+const simulatorReg = ref("AB12345");
+
+const showQuestionModal = ref(false);
+const showConditionModal = ref(false);
+const showRuleModal = ref(false);
+const showTaskModal = ref(false);
+
+const questionForm = ref({
+  id: null,
+  scope_mode: "legacy",
+  department: 0,
+  lane: 0,
+  product: 0,
+  question: "",
+  description: "",
+  condition_id: null,
+  order_priority: 1,
+});
+
+const conditionForm = ref({
+  id: null,
+  scope_mode: "legacy",
+  machine_type_id: null,
+  department: 0,
+  lane: 0,
+  product: 0,
+  condition_id: null,
+  name: "",
+  description: "",
+});
+
+const ruleForm = ref({
+  id: null,
+  condition_id: null,
+  type: "IS_TRUE",
+  object_type: "question",
+  object_id: null,
+  name: "",
+  description: "",
+});
+
+const taskForm = ref({
+  id: null,
+  scope_mode: "legacy",
+  machine_type_id: null,
+  department: 0,
+  lane: 0,
+  product: 0,
+  gate_type: "ALWAYS",
+  gate_ref_id: null,
+  task: "",
+  description: "",
+  order_priority: 1,
+  services: [],
+  buttons: [],
+  dynamic_images_vehicle_type: null,
+});
+
+const ruleTypes = [
+  "IS_TRUE",
+  "IS_FALSE",
+  "IS_TRUE_OR_NOT_SET",
+  "IS_FALSE_OR_NOT_SET",
+  "IS_SET",
+  "IS_TRUE_OR_ANY_TRUE",
+];
+
+const machineTypeName = (machineTypeId) => {
+  const found = machineTypes.value.find((entry) => parseInt(entry.id) === parseInt(machineTypeId));
+  return found?.name || `#${machineTypeId}`;
+};
+
+const conditionName = (conditionId) => {
+  const found = conditions.value.find((entry) => parseInt(entry.id) === parseInt(conditionId));
+  return found?.name || `#${conditionId}`;
+};
+
+const questionName = (questionId) => {
+  const found = questions.value.find((entry) => parseInt(entry.id) === parseInt(questionId));
+  return found?.question || `#${questionId}`;
+};
+
+const scopeLabel = (item) => {
+  if (parseNullableInt(item.machine_type_id)) {
+    return `Machine type: ${machineTypeName(item.machine_type_id)}`;
+  }
+  const department = parseIntOrZero(item.department);
+  const lane = parseIntOrZero(item.lane);
+  const product = parseIntOrZero(item.product);
+  if (department === 0 && lane === 0 && product === 0) {
+    return "Shared";
+  }
+  return `Dept ${department} / Lane ${lane} / Vehicle ${product}`;
+};
+
+const taskGateLabel = (task) => {
+  const gateType = String(task.gate_type || "ALWAYS").toUpperCase();
+  const gateRefId = parseNullableInt(task.gate_ref_id ?? task.condition_id);
+  if (gateType === "ALWAYS" || gateRefId === null) {
+    return "Always";
+  }
+  if (gateType === "CONDITION") {
+    return `Condition: ${conditionName(gateRefId)}`;
+  }
+  if (gateType === "QUESTION") {
+    return `Question: ${questionName(gateRefId)}`;
+  }
+  return `Legacy: ${gateRefId}`;
+};
+
+const selectedConditionRules = computed(() => {
+  if (!selectedConditionId.value) {
+    return [];
+  }
+  return rules.value.filter((entry) => parseInt(entry.condition_id) === parseInt(selectedConditionId.value));
+});
+
+const availableRuleTargets = computed(() => (
+  ruleForm.value.object_type === "condition"
+    ? conditions.value.map((entry) => ({ id: parseInt(entry.id), name: entry.name }))
+    : questions.value.map((entry) => ({ id: parseInt(entry.id), name: entry.question }))
+));
+
+const availableTaskGateTargets = computed(() => {
+  if (taskForm.value.gate_type === "CONDITION") {
+    return conditions.value.map((entry) => ({ id: parseInt(entry.id), name: entry.name }));
+  }
+  if (taskForm.value.gate_type === "QUESTION") {
+    return questions.value.map((entry) => ({ id: parseInt(entry.id), name: entry.question }));
+  }
+  return [];
+});
+
+const loadStudioData = async () => {
+  try {
+    const [questionList, conditionList, ruleList, taskList, machineTypeList, productList, laneList] = await Promise.all([
+      SessionUser.objects.self_serve_questions.get.all(),
+      SessionUser.objects.self_serve_conditions.get.all(),
+      SessionUser.objects.self_serve_condition_rules.get.all(),
+      SessionUser.objects.self_serve_tasks.get.all(),
+      SessionUser.objects.self_serve_machine_types.get.all(),
+      SessionUser.objects.products.get.all(),
+      SessionUser.objects.department_lanes.get.all(),
+    ]);
+
+    questions.value = ensureArray(questionList).filter((entry) => [0, departmentId.value].includes(parseIntOrZero(entry.department)));
+    conditions.value = ensureArray(conditionList).filter((entry) => [0, departmentId.value].includes(parseIntOrZero(entry.department)));
+    rules.value = ensureArray(ruleList);
+    tasks.value = ensureArray(taskList).filter((entry) => [0, departmentId.value].includes(parseIntOrZero(entry.department)));
+    machineTypes.value = ensureArray(machineTypeList);
+    products.value = ensureArray(productList);
+    lanes.value = ensureArray(laneList).filter((entry) => parseIntOrZero(entry.department) === departmentId.value);
+
+    if (!selectedConditionId.value && conditions.value.length > 0) {
+      selectedConditionId.value = conditions.value[0].id;
+    }
+  } catch (error) {
+    withErrorToast(error, "Failed to load studio data.");
+  }
+};
+
+const loadVersionData = async () => {
+  try {
+    versions.value = ensureArray(await requestGet("/department/selfserve/config/versions", { department: departmentId.value }));
+    activeConfig.value = await requestGet("/department/selfserve/config/active", { department: departmentId.value });
+  } catch (error) {
+    withErrorToast(error, "Failed to load version data.");
+  }
+};
+
+const refreshDraft = async () => {
+  try {
+    await requestPost("/department/selfserve/config/draft", { department: departmentId.value, force: true });
+    toast.success("Draft refreshed.");
+    await loadVersionData();
+  } catch (error) {
+    withErrorToast(error, "Failed to refresh draft.");
+  }
+};
+
+const validateDraft = async () => {
+  try {
+    latestValidation.value = await requestPost("/department/selfserve/config/validate", { department: departmentId.value });
+    toast.success(latestValidation.value?.validation?.valid ? "Draft is valid." : "Draft has validation errors.");
+    await loadVersionData();
+  } catch (error) {
+    withErrorToast(error, "Failed to validate draft.");
+  }
+};
+
+const publishDraft = async () => {
+  if (!window.confirm("Publish current draft?")) {
+    return;
+  }
+  try {
+    await requestPost("/department/selfserve/config/publish", { department: departmentId.value });
+    toast.success("Draft published.");
+    await loadVersionData();
+  } catch (error) {
+    withErrorToast(error, "Failed to publish draft.");
+  }
+};
+
+const rollbackToVersion = async (versionId) => {
+  if (!window.confirm(`Rollback to version #${versionId}?`)) {
+    return;
+  }
+  try {
+    await requestPost("/department/selfserve/config/rollback", {
+      department: departmentId.value,
+      target_version_id: versionId,
+    });
+    toast.success("Rollback completed.");
+    await loadVersionData();
+  } catch (error) {
+    withErrorToast(error, "Failed to rollback version.");
+  }
+};
+
+const openQuestionModal = (record = null) => {
+  questionForm.value = record
+    ? {
+      ...record,
+      scope_mode: parseIntOrZero(record.department) === 0 && parseIntOrZero(record.lane) === 0 && parseIntOrZero(record.product) === 0 ? "shared" : "legacy",
+    }
+    : {
+      id: null,
+      scope_mode: "legacy",
+      department: departmentId.value,
+      lane: scopedLaneId.value || 0,
+      product: 0,
+      question: "",
+      description: "",
+      condition_id: null,
+      order_priority: questions.value.length + 1,
+    };
+  showQuestionModal.value = true;
+};
+
+const saveQuestion = async () => {
+  const payload = {
+    question: String(questionForm.value.question || "").trim(),
+    description: String(questionForm.value.description || "").trim(),
+    condition_id: parseNullableInt(questionForm.value.condition_id),
+    order_priority: parseIntOrZero(questionForm.value.order_priority),
+    department: questionForm.value.scope_mode === "shared" ? 0 : parseIntOrZero(questionForm.value.department || departmentId.value),
+    lane: questionForm.value.scope_mode === "shared" ? 0 : parseIntOrZero(questionForm.value.lane),
+    product: questionForm.value.scope_mode === "shared" ? 0 : parseIntOrZero(questionForm.value.product),
+  };
+  try {
+    if (questionForm.value.id) {
+      await requestPut("/department/selfserve/questions", { id: questionForm.value.id, ...payload });
+    } else {
+      await requestPost("/department/selfserve/questions", payload);
+    }
+    toast.success("Question saved.");
+    showQuestionModal.value = false;
+    await loadStudioData();
+    await loadVersionData();
+  } catch (error) {
+    withErrorToast(error, "Failed to save question.");
+  }
+};
+
+const openConditionModal = (record = null) => {
+  conditionForm.value = record
+    ? {
+      ...record,
+      scope_mode: parseNullableInt(record.machine_type_id) ? "machine_type" : "legacy",
+    }
+    : {
+      id: null,
+      scope_mode: scopedMachineTypeId.value ? "machine_type" : "legacy",
+      machine_type_id: scopedMachineTypeId.value,
+      department: departmentId.value,
+      lane: scopedLaneId.value || 0,
+      product: 0,
+      condition_id: null,
+      name: "",
+      description: "",
+    };
+  showConditionModal.value = true;
+};
+
+const saveCondition = async () => {
+  const payload = {
+    name: String(conditionForm.value.name || "").trim(),
+    description: String(conditionForm.value.description || "").trim(),
+    condition_id: parseNullableInt(conditionForm.value.condition_id),
+    machine_type_id: conditionForm.value.scope_mode === "machine_type" ? parseNullableInt(conditionForm.value.machine_type_id) : null,
+    department: conditionForm.value.scope_mode === "machine_type" ? 0 : parseIntOrZero(conditionForm.value.department || departmentId.value),
+    lane: conditionForm.value.scope_mode === "machine_type" ? 0 : parseIntOrZero(conditionForm.value.lane),
+    product: conditionForm.value.scope_mode === "machine_type" ? 0 : parseIntOrZero(conditionForm.value.product),
+  };
+  try {
+    if (conditionForm.value.id) {
+      await requestPut("/department/selfserve/conditions", { id: conditionForm.value.id, ...payload });
+    } else {
+      await requestPost("/department/selfserve/conditions", payload);
+    }
+    toast.success("Condition saved.");
+    showConditionModal.value = false;
+    await loadStudioData();
+    await loadVersionData();
+  } catch (error) {
+    withErrorToast(error, "Failed to save condition.");
+  }
+};
+
+const openRuleModal = (record = null) => {
+  ruleForm.value = record
+    ? { ...record }
+    : {
+      id: null,
+      condition_id: parseNullableInt(selectedConditionId.value),
+      type: "IS_TRUE",
+      object_type: "question",
+      object_id: null,
+      name: "",
+      description: "",
+    };
+  showRuleModal.value = true;
+};
+
+const saveRule = async () => {
+  const payload = {
+    condition_id: parseNullableInt(ruleForm.value.condition_id),
+    type: String(ruleForm.value.type || "IS_TRUE"),
+    object_type: String(ruleForm.value.object_type || "question"),
+    object_id: parseNullableInt(ruleForm.value.object_id),
+    name: String(ruleForm.value.name || "").trim(),
+    description: String(ruleForm.value.description || "").trim(),
+  };
+  try {
+    if (ruleForm.value.id) {
+      await requestPut("/department/selfserve/condition/rules", { id: ruleForm.value.id, ...payload });
+    } else {
+      await requestPost("/department/selfserve/condition/rules", payload);
+    }
+    toast.success("Rule saved.");
+    showRuleModal.value = false;
+    await loadStudioData();
+    await loadVersionData();
+  } catch (error) {
+    withErrorToast(error, "Failed to save rule.");
+  }
+};
+
+const openTaskModal = (record = null) => {
+  taskForm.value = record
+    ? {
+      ...record,
+      scope_mode: parseNullableInt(record.machine_type_id) ? "machine_type" : "legacy",
+      gate_type: String(record.gate_type || "ALWAYS").toUpperCase(),
+      gate_ref_id: parseNullableInt(record.gate_ref_id ?? record.condition_id),
+      services: Array.isArray(record.services) ? [...record.services] : [],
+      buttons: Array.isArray(record.buttons) ? [...record.buttons] : [],
+    }
+    : {
+      id: null,
+      scope_mode: scopedMachineTypeId.value ? "machine_type" : "legacy",
+      machine_type_id: scopedMachineTypeId.value,
+      department: departmentId.value,
+      lane: scopedLaneId.value || 0,
+      product: 0,
+      gate_type: "ALWAYS",
+      gate_ref_id: null,
+      task: "",
+      description: "",
+      order_priority: tasks.value.length + 1,
+      services: [],
+      buttons: [],
+      dynamic_images_vehicle_type: null,
+    };
+  showTaskModal.value = true;
+};
+
+const saveTask = async () => {
+  const payload = {
+    task: String(taskForm.value.task || "").trim(),
+    description: String(taskForm.value.description || "").trim(),
+    order_priority: parseIntOrZero(taskForm.value.order_priority),
+    services: Array.isArray(taskForm.value.services) ? taskForm.value.services : [],
+    buttons: Array.isArray(taskForm.value.buttons) ? taskForm.value.buttons.map((entry) => parseIntOrZero(entry)) : [],
+    dynamic_images_vehicle_type: parseNullableInt(taskForm.value.dynamic_images_vehicle_type),
+    gate_type: String(taskForm.value.gate_type || "ALWAYS").toUpperCase(),
+    gate_ref_id: null,
+    condition_id: null,
+    machine_type_id: taskForm.value.scope_mode === "machine_type" ? parseNullableInt(taskForm.value.machine_type_id) : null,
+    department: taskForm.value.scope_mode === "machine_type" ? 0 : parseIntOrZero(taskForm.value.department || departmentId.value),
+    lane: taskForm.value.scope_mode === "machine_type" ? 0 : parseIntOrZero(taskForm.value.lane),
+    product: taskForm.value.scope_mode === "machine_type" ? 0 : parseIntOrZero(taskForm.value.product),
+  };
+  if (payload.gate_type !== "ALWAYS") {
+    payload.gate_ref_id = parseNullableInt(taskForm.value.gate_ref_id);
+    payload.condition_id = payload.gate_ref_id;
+  }
+  try {
+    if (taskForm.value.id) {
+      await requestPut("/department/selfserve/tasks", { id: taskForm.value.id, ...payload });
+    } else {
+      await requestPost("/department/selfserve/tasks", payload);
+    }
+    toast.success("Task saved.");
+    showTaskModal.value = false;
+    await loadStudioData();
+    await loadVersionData();
+  } catch (error) {
+    withErrorToast(error, "Failed to save task.");
+  }
+};
+
+const deleteRecord = async (type, id) => {
+  if (!window.confirm(`Delete ${type} #${id}?`)) {
+    return;
+  }
+  const endpointMap = {
+    question: "/department/selfserve/questions",
+    condition: "/department/selfserve/conditions",
+    rule: "/department/selfserve/condition/rules",
+    task: "/department/selfserve/tasks",
+  };
+  try {
+    await requestDelete(endpointMap[type], { id });
+    toast.success(`${type} deleted.`);
+    await loadStudioData();
+    await loadVersionData();
+  } catch (error) {
+    withErrorToast(error, `Failed to delete ${type}.`);
+  }
+};
+
+const toggleTaskButton = (buttonIndex) => {
+  const value = parseIntOrZero(buttonIndex);
+  const current = Array.isArray(taskForm.value.buttons) ? [...taskForm.value.buttons] : [];
+  taskForm.value.buttons = current.includes(value)
+    ? current.filter((entry) => entry !== value)
+    : [...current, value].sort((a, b) => a - b);
+};
+
+const changeTab = async (tabId) => {
+  activeTab.value = tabId;
+  await router.replace({ query: { ...route.query, tab: tabId } });
+};
+
+watch(() => route.query.tab, (value) => {
+  const candidate = typeof value === "string" ? value : "questions";
+  activeTab.value = tabs.some((entry) => entry.id === candidate) ? candidate : "questions";
+}, { immediate: true });
+
+onMounted(async () => {
+  await loadStudioData();
+  await loadVersionData();
+});
+</script>
+
+<template>
+  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
+    <DepartmentDashboardPageWrapper>
+      <NotFoundFallBackPageWrapper
+        :exists="SessionUser.functions.getDepartmentIdFromUrl() && SessionUser.canAccessDepartment(SessionUser.functions.getDepartmentIdFromUrl())"
+        :error="$t('admin.errors.select_department')"
+      >
+        <section data-testid="self-serve-studio">
+          <PageTitle title="Self-Serve Studio" subtitle="Versioned configuration authoring">
+            <template #buttons>
+              <button class="button is-link is-light" @click="loadStudioData">
+                <span class="icon"><i class="fas fa-rotate"></i></span>
+                <span>Reload</span>
+              </button>
+            </template>
+          </PageTitle>
+
+          <div v-if="scopedLaneId || scopedMachineTypeId" class="notification is-info is-light">
+            <strong>Scoped:</strong>
+            <span v-if="scopedLaneId" class="ml-2">Lane #{{ scopedLaneId }}</span>
+            <span v-if="scopedMachineTypeId" class="ml-2">Machine type {{ machineTypeName(scopedMachineTypeId) }}</span>
+          </div>
+
+          <div class="tabs is-boxed mb-4">
+            <ul>
+              <li v-for="tab in tabs" :key="tab.id" :class="{ 'is-active': activeTab === tab.id }">
+                <a @click.prevent="changeTab(tab.id)">{{ tab.label }}</a>
+              </li>
+            </ul>
+          </div>
+
+          <template v-if="activeTab === 'questions'">
+            <div class="buttons mb-3">
+              <button class="button is-primary" @click="openQuestionModal()">Add Question</button>
+            </div>
+            <table class="table is-fullwidth is-striped is-hoverable">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th>Question</th>
+                  <th>If Condition</th>
+                  <th>Scope</th>
+                  <th class="has-text-right">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="item in questions" :key="item.id">
+                  <td>{{ item.order_priority }}</td>
+                  <td>{{ item.question }}</td>
+                  <td>{{ item.condition_id ? conditionName(item.condition_id) : "None" }}</td>
+                  <td>{{ scopeLabel(item) }}</td>
+                  <td class="has-text-right">
+                    <button class="button is-small is-info is-light mr-2" @click="openQuestionModal(item)">
+                      <i class="fas fa-pen"></i>
+                    </button>
+                    <button class="button is-small is-danger is-light" @click="deleteRecord('question', item.id)">
+                      <i class="fas fa-trash"></i>
+                    </button>
+                  </td>
+                </tr>
+                <tr v-if="questions.length === 0">
+                  <td colspan="5" class="has-text-centered is-italic">No questions configured.</td>
+                </tr>
+              </tbody>
+            </table>
+          </template>
+
+          <template v-else-if="activeTab === 'conditions'">
+            <div class="columns is-variable is-5">
+              <div class="column is-7">
+                <div class="buttons mb-3">
+                  <button class="button is-primary" @click="openConditionModal()">Add Condition</button>
+                </div>
+                <table class="table is-fullwidth is-striped">
+                  <thead>
+                    <tr>
+                      <th>ID</th>
+                      <th>Name</th>
+                      <th>Scope</th>
+                      <th class="has-text-right">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="item in conditions"
+                      :key="item.id"
+                      :class="{ 'has-background-link-light': parseInt(item.id) === parseInt(selectedConditionId || 0) }"
+                    >
+                      <td>{{ item.id }}</td>
+                      <td>{{ item.name }}</td>
+                      <td>{{ scopeLabel(item) }}</td>
+                      <td class="has-text-right">
+                        <button class="button is-small is-link is-light mr-2" @click="selectedConditionId = item.id">
+                          <i class="fas fa-gavel"></i>
+                        </button>
+                        <button class="button is-small is-info is-light mr-2" @click="openConditionModal(item)">
+                          <i class="fas fa-pen"></i>
+                        </button>
+                        <button class="button is-small is-danger is-light" @click="deleteRecord('condition', item.id)">
+                          <i class="fas fa-trash"></i>
+                        </button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <div class="column is-5">
+                <div class="box">
+                  <div class="is-flex is-justify-content-space-between is-align-items-center mb-3">
+                    <h4 class="title is-6 mb-0">Rules</h4>
+                    <button class="button is-small is-primary" :disabled="!selectedConditionId" @click="openRuleModal()">Add Rule</button>
+                  </div>
+                  <table class="table is-fullwidth is-striped">
+                    <thead>
+                      <tr>
+                        <th>Type</th>
+                        <th>Target</th>
+                        <th class="has-text-right">Actions</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr v-for="entry in selectedConditionRules" :key="entry.id">
+                        <td>{{ entry.type }}</td>
+                        <td>{{ entry.object_type === 'condition' ? conditionName(entry.object_id) : questionName(entry.object_id) }}</td>
+                        <td class="has-text-right">
+                          <button class="button is-small is-info is-light mr-2" @click="openRuleModal(entry)">
+                            <i class="fas fa-pen"></i>
+                          </button>
+                          <button class="button is-small is-danger is-light" @click="deleteRecord('rule', entry.id)">
+                            <i class="fas fa-trash"></i>
+                          </button>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </template>
+
+          <template v-else-if="activeTab === 'tasks'">
+            <div class="buttons mb-3">
+              <button class="button is-primary" @click="openTaskModal()">Add Task</button>
+            </div>
+            <table class="table is-fullwidth is-striped is-hoverable">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th>Task</th>
+                  <th>Gate</th>
+                  <th>Scope</th>
+                  <th class="has-text-right">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="item in tasks" :key="item.id">
+                  <td>{{ item.order_priority }}</td>
+                  <td>{{ item.task }}</td>
+                  <td>{{ taskGateLabel(item) }}</td>
+                  <td>{{ scopeLabel(item) }}</td>
+                  <td class="has-text-right">
+                    <button class="button is-small is-info is-light mr-2" @click="openTaskModal(item)">
+                      <i class="fas fa-pen"></i>
+                    </button>
+                    <button class="button is-small is-danger is-light" @click="deleteRecord('task', item.id)">
+                      <i class="fas fa-trash"></i>
+                    </button>
+                  </td>
+                </tr>
+                <tr v-if="tasks.length === 0">
+                  <td colspan="5" class="has-text-centered is-italic">No tasks configured.</td>
+                </tr>
+              </tbody>
+            </table>
+          </template>
+
+          <template v-else-if="activeTab === 'simulator'">
+            <div class="box">
+              <div class="columns is-multiline">
+                <div class="column is-6">
+                  <label class="label">Lane</label>
+                  <div class="select is-fullwidth">
+                    <select v-model="simulatorLaneId">
+                      <option :value="null">Select lane</option>
+                      <option v-for="entry in lanes" :key="entry.id" :value="entry.id">
+                        {{ entry.name }} ({{ entry.id }})
+                      </option>
+                    </select>
+                  </div>
+                </div>
+                <div class="column is-6">
+                  <label class="label">Registration</label>
+                  <input v-model="simulatorReg" class="input" placeholder="AB12345">
+                </div>
+              </div>
+              <button class="button is-warning" :disabled="!simulatorLaneId || !simulatorReg.trim()" @click="showTryModal = true">
+                Open Simulator
+              </button>
+            </div>
+            <SelfServeTryModal
+              v-if="showTryModal"
+              :departmentId="departmentId"
+              :laneId="simulatorLaneId"
+              @closeModal="showTryModal = false"
+            />
+          </template>
+
+          <template v-else-if="activeTab === 'history'">
+            <div class="buttons mb-3">
+              <button class="button is-link" @click="refreshDraft">Create/Refresh Draft</button>
+              <button class="button is-info" @click="validateDraft">Validate Draft</button>
+              <button class="button is-success" @click="publishDraft">Publish Draft</button>
+            </div>
+            <div v-if="activeConfig" class="notification is-light">
+              <strong>Active source:</strong>
+              <span v-if="activeConfig.source === 'published'"> Published version #{{ activeConfig.version_id }}</span>
+              <span v-else> Legacy fallback</span>
+            </div>
+            <div v-if="latestValidation?.validation" class="notification" :class="latestValidation.validation.valid ? 'is-success is-light' : 'is-warning is-light'">
+              <strong>Latest validation:</strong> {{ latestValidation.validation.valid ? 'valid' : 'errors found' }}
+            </div>
+            <table class="table is-fullwidth is-striped">
+              <thead>
+                <tr>
+                  <th>ID</th>
+                  <th>Status</th>
+                  <th>Version #</th>
+                  <th>Published At</th>
+                  <th class="has-text-right">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="entry in versions" :key="entry.id">
+                  <td>#{{ entry.id }}</td>
+                  <td>{{ entry.status }}</td>
+                  <td>{{ entry.version_number }}</td>
+                  <td>{{ entry.published_at || '-' }}</td>
+                  <td class="has-text-right">
+                    <button class="button is-small is-warning is-light" @click="rollbackToVersion(entry.id)">Rollback</button>
+                  </td>
+                </tr>
+                <tr v-if="versions.length === 0">
+                  <td colspan="5" class="has-text-centered is-italic">No versions found.</td>
+                </tr>
+              </tbody>
+            </table>
+          </template>
+        </section>
+      </NotFoundFallBackPageWrapper>
+    </DepartmentDashboardPageWrapper>
+  </RestrictedPageWrapper>
+
+  <div v-if="showQuestionModal" class="modal is-active">
+    <div class="modal-background" @click="showQuestionModal = false"></div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">{{ questionForm.id ? 'Edit Question' : 'New Question' }}</p>
+        <button class="delete" @click="showQuestionModal = false"></button>
+      </header>
+      <section class="modal-card-body">
+        <div class="field">
+          <label class="label">Scope</label>
+          <div class="select is-fullwidth">
+            <select v-model="questionForm.scope_mode">
+              <option value="legacy">Department/Lane/Vehicle</option>
+              <option value="shared">Shared</option>
+            </select>
+          </div>
+        </div>
+        <div class="field">
+          <label class="label">Question</label>
+          <input v-model="questionForm.question" class="input">
+        </div>
+        <div class="field">
+          <label class="label">Description</label>
+          <input v-model="questionForm.description" class="input">
+        </div>
+        <div class="field">
+          <label class="label">Condition</label>
+          <div class="select is-fullwidth">
+            <select v-model="questionForm.condition_id">
+              <option :value="null">None</option>
+              <option v-for="entry in conditions" :key="entry.id" :value="parseInt(entry.id)">{{ entry.name }}</option>
+            </select>
+          </div>
+        </div>
+      </section>
+      <footer class="modal-card-foot">
+        <button class="button is-success" @click="saveQuestion">Save</button>
+        <button class="button" @click="showQuestionModal = false">Cancel</button>
+      </footer>
+    </div>
+  </div>
+
+  <div v-if="showConditionModal" class="modal is-active">
+    <div class="modal-background" @click="showConditionModal = false"></div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">{{ conditionForm.id ? 'Edit Condition' : 'New Condition' }}</p>
+        <button class="delete" @click="showConditionModal = false"></button>
+      </header>
+      <section class="modal-card-body">
+        <div class="field">
+          <label class="label">Scope</label>
+          <div class="select is-fullwidth">
+            <select v-model="conditionForm.scope_mode">
+              <option value="machine_type">Machine Type</option>
+              <option value="legacy">Department/Lane/Vehicle</option>
+            </select>
+          </div>
+        </div>
+        <div v-if="conditionForm.scope_mode === 'machine_type'" class="field">
+          <label class="label">Machine Type</label>
+          <div class="select is-fullwidth">
+            <select v-model="conditionForm.machine_type_id">
+              <option :value="null">Select machine type</option>
+              <option v-for="entry in machineTypes" :key="entry.id" :value="parseInt(entry.id)">{{ entry.name }}</option>
+            </select>
+          </div>
+        </div>
+        <div class="field">
+          <label class="label">Name</label>
+          <input v-model="conditionForm.name" class="input">
+        </div>
+        <div class="field">
+          <label class="label">Description</label>
+          <input v-model="conditionForm.description" class="input">
+        </div>
+      </section>
+      <footer class="modal-card-foot">
+        <button class="button is-success" @click="saveCondition">Save</button>
+        <button class="button" @click="showConditionModal = false">Cancel</button>
+      </footer>
+    </div>
+  </div>
+
+  <div v-if="showRuleModal" class="modal is-active">
+    <div class="modal-background" @click="showRuleModal = false"></div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">{{ ruleForm.id ? 'Edit Rule' : 'New Rule' }}</p>
+        <button class="delete" @click="showRuleModal = false"></button>
+      </header>
+      <section class="modal-card-body">
+        <div class="field">
+          <label class="label">Condition</label>
+          <div class="select is-fullwidth">
+            <select v-model="ruleForm.condition_id">
+              <option :value="null">Select condition</option>
+              <option v-for="entry in conditions" :key="entry.id" :value="parseInt(entry.id)">{{ entry.name }}</option>
+            </select>
+          </div>
+        </div>
+        <div class="field">
+          <label class="label">Type</label>
+          <div class="select is-fullwidth">
+            <select v-model="ruleForm.type">
+              <option v-for="type in ruleTypes" :key="type" :value="type">{{ type }}</option>
+            </select>
+          </div>
+        </div>
+        <div class="field">
+          <label class="label">Object Type</label>
+          <div class="select is-fullwidth">
+            <select v-model="ruleForm.object_type">
+              <option value="question">Question</option>
+              <option value="condition">Condition</option>
+            </select>
+          </div>
+        </div>
+        <div class="field">
+          <label class="label">Target</label>
+          <div class="select is-fullwidth">
+            <select v-model="ruleForm.object_id">
+              <option :value="null">Select target</option>
+              <option v-for="entry in availableRuleTargets" :key="entry.id" :value="parseInt(entry.id)">{{ entry.name }}</option>
+            </select>
+          </div>
+        </div>
+        <div class="field">
+          <label class="label">Name</label>
+          <input v-model="ruleForm.name" class="input">
+        </div>
+        <div class="field">
+          <label class="label">Description</label>
+          <input v-model="ruleForm.description" class="input">
+        </div>
+      </section>
+      <footer class="modal-card-foot">
+        <button class="button is-success" @click="saveRule">Save</button>
+        <button class="button" @click="showRuleModal = false">Cancel</button>
+      </footer>
+    </div>
+  </div>
+
+  <div v-if="showTaskModal" class="modal is-active">
+    <div class="modal-background" @click="showTaskModal = false"></div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">{{ taskForm.id ? 'Edit Task' : 'New Task' }}</p>
+        <button class="delete" @click="showTaskModal = false"></button>
+      </header>
+      <section class="modal-card-body">
+        <div class="field">
+          <label class="label">Scope</label>
+          <div class="select is-fullwidth">
+            <select v-model="taskForm.scope_mode">
+              <option value="machine_type">Machine Type</option>
+              <option value="legacy">Department/Lane/Vehicle</option>
+            </select>
+          </div>
+        </div>
+        <div v-if="taskForm.scope_mode === 'machine_type'" class="field">
+          <label class="label">Machine Type</label>
+          <div class="select is-fullwidth">
+            <select v-model="taskForm.machine_type_id">
+              <option :value="null">Select machine type</option>
+              <option v-for="entry in machineTypes" :key="entry.id" :value="parseInt(entry.id)">{{ entry.name }}</option>
+            </select>
+          </div>
+        </div>
+        <div class="field">
+          <label class="label">Task</label>
+          <input v-model="taskForm.task" class="input">
+        </div>
+        <div class="field">
+          <label class="label">Description</label>
+          <input v-model="taskForm.description" class="input">
+        </div>
+        <div class="field">
+          <label class="label">Gate Type</label>
+          <div class="select is-fullwidth">
+            <select v-model="taskForm.gate_type">
+              <option value="ALWAYS">ALWAYS</option>
+              <option value="CONDITION">CONDITION</option>
+              <option value="QUESTION">QUESTION</option>
+            </select>
+          </div>
+        </div>
+        <div v-if="taskForm.gate_type !== 'ALWAYS'" class="field">
+          <label class="label">Gate Reference</label>
+          <div class="select is-fullwidth">
+            <select v-model="taskForm.gate_ref_id">
+              <option :value="null">Select reference</option>
+              <option v-for="entry in availableTaskGateTargets" :key="entry.id" :value="parseInt(entry.id)">{{ entry.name }}</option>
+            </select>
+          </div>
+        </div>
+        <div class="field">
+          <label class="label">Services</label>
+          <label class="checkbox">
+            <input
+              type="checkbox"
+              :checked="Array.isArray(taskForm.services) && taskForm.services.includes('MACHINE')"
+              @change="(event) => { taskForm.services = event.target.checked ? ['MACHINE'] : []; }"
+            >
+            MACHINE
+          </label>
+        </div>
+        <div class="field">
+          <label class="label">Buttons</label>
+          <div class="buttons">
+            <button
+              v-for="index in 12"
+              :key="index - 1"
+              type="button"
+              class="button is-small"
+              :class="Array.isArray(taskForm.buttons) && taskForm.buttons.includes(index - 1) ? 'is-link' : 'is-light'"
+              @click="toggleTaskButton(index - 1)"
+            >
+              {{ index - 1 }}
+            </button>
+          </div>
+        </div>
+      </section>
+      <footer class="modal-card-foot">
+        <button class="button is-success" @click="saveTask">Save</button>
+        <button class="button" @click="showTaskModal = false">Cancel</button>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-card {
+  width: min(960px, 95vw);
+}
+</style>
diff --git a/src/views/dashboards/departmentDashboard/modules/wash-lanes/DepartmentWashLane.vue b/src/views/dashboards/departmentDashboard/modules/wash-lanes/DepartmentWashLane.vue
index 31ef9f80..6b0379b3 100644
--- a/src/views/dashboards/departmentDashboard/modules/wash-lanes/DepartmentWashLane.vue
+++ b/src/views/dashboards/departmentDashboard/modules/wash-lanes/DepartmentWashLane.vue
@@ -29,6 +29,22 @@ const selectVehicleType = (vehicleType) => {
   selectedVehicleType.value = vehicleType;
 };
 
+const openStudio = () => {
+  const query = {
+    tab: "conditions",
+    lane_id: laneId,
+  };
+  if (lane.value?.machine_type_id) {
+    query.machine_type_id = lane.value.machine_type_id;
+  }
+
+  router.push({
+    name: "selfservestudio",
+    params: { departmentId },
+    query,
+  });
+};
+
 const loadLane = async () => {
   isLoading.value = true;
   try {
@@ -55,6 +71,12 @@ onMounted(() => {
         <div v-if="lane" data-testid="department-wash-lane-page">
           <PageTitle :title="t('admin.wash_lanes.single.title') + ': ' + lane.name" :subtitle="'ID: ' + lane.id">
             <template #buttons>
+              <button class="button is-link is-light" @click="openStudio">
+                <span class="icon">
+                  <i class="fas fa-project-diagram"></i>
+                </span>
+                <span>Open Self-Serve Studio</span>
+              </button>
               <button class="button is-dark" @click="router.push(`/admin/${departmentId}/modules/wash-lanes`)">
                 <span class="icon">
                   <i class="fas fa-arrow-left"></i>
@@ -286,12 +308,12 @@ onMounted(() => {
                         </span>
                         <span>{{ t('admin.self_serve.tasks.add') }}</span>
                       </button>
-                      <router-link :to="{ name: 'selfservevehicleconditions', params: { departmentId: departmentId } }" class="button is-link is-light">
+                      <button class="button is-link is-light" @click="openStudio">
                         <span class="icon">
-                          <i class="fas fa-car-side"></i>
+                          <i class="fas fa-project-diagram"></i>
                         </span>
-                        <span>{{ t('admin.self_serve.vehicle_conditions.title') }}</span>
-                      </router-link>
+                        <span>Open Studio</span>
+                      </button>
                       <button
                           class="button is-warning is-light"
                           data-testid="self-serve-admin-open-try-modal"
diff --git a/src/views/dashboards/superUserDashboard/selfserve/components/SelfServeMachineConnectivity.vue b/src/views/dashboards/superUserDashboard/selfserve/components/SelfServeMachineConnectivity.vue
index 6cb31b41..a4a8226e 100644
--- a/src/views/dashboards/superUserDashboard/selfserve/components/SelfServeMachineConnectivity.vue
+++ b/src/views/dashboards/superUserDashboard/selfserve/components/SelfServeMachineConnectivity.vue
@@ -47,6 +47,7 @@ const laneLastUpdatedAt = reactive<Record<number, number | null>>({});
 const laneInProgressDetails = reactive<Record<number, InProgressWashDetails | null>>({});
 const laneInProgressLoading = reactive<Record<number, boolean>>({});
 const lanePollSubscribers = reactive<Record<number, number>>({});
+const lanePollingActive = reactive<Record<number, boolean>>({});
 const lanePollIntervals = new Map<number, ReturnType<typeof setInterval>>();
 
 const createInitialRelayStatusMap = (): RelayStatusMap => ({
@@ -102,6 +103,9 @@ const ensureLaneState = (laneId: number): void => {
   if (!Object.prototype.hasOwnProperty.call(lanePollSubscribers, laneId)) {
     lanePollSubscribers[laneId] = 0;
   }
+  if (!Object.prototype.hasOwnProperty.call(lanePollingActive, laneId)) {
+    lanePollingActive[laneId] = false;
+  }
 };
 
 const parseErrorMessage = (error: unknown): string => {
@@ -465,9 +469,12 @@ export const startPolling = async (
   lanePollSubscribers[normalizedLaneId] += 1;
 
   if (lanePollIntervals.has(normalizedLaneId)) {
+    lanePollingActive[normalizedLaneId] = true;
     return;
   }
 
+  lanePollingActive[normalizedLaneId] = true;
+
   const pollInterval = Math.max(1000, Math.round(intervalMs));
   const refreshLane = async () => {
     await Promise.allSettled([
@@ -501,6 +508,7 @@ export const stopPolling = (laneId: number): void => {
     clearInterval(intervalRef);
   }
   lanePollIntervals.delete(normalizedLaneId);
+  lanePollingActive[normalizedLaneId] = false;
 };
 
 export const clearLaneError = (laneId: number): void => {
@@ -520,7 +528,7 @@ export const useMachineConnectivity = (laneId: number) => {
   const lastUpdatedAt = computed(() => laneLastUpdatedAt[normalizedLaneId]);
   const inProgressDetails = computed(() => laneInProgressDetails[normalizedLaneId]);
   const inProgressLoading = computed(() => laneInProgressLoading[normalizedLaneId]);
-  const isPolling = computed(() => lanePollIntervals.has(normalizedLaneId));
+  const isPolling = computed(() => Boolean(lanePollingActive[normalizedLaneId]));
 
   return {
     laneId: normalizedLaneId,
@@ -561,6 +569,7 @@ export const machineConnectivityStore = {
     laneInProgressDetails,
     laneInProgressLoading,
     lanePollSubscribers,
+    lanePollingActive,
   },
   functions: {
     fetchRelayStatus,
@@ -598,6 +607,7 @@ export const __resetMachineConnectivityStoreForTests = (): void => {
   resetReactiveObject(laneInProgressDetails as unknown as Record<string, unknown>);
   resetReactiveObject(laneInProgressLoading as unknown as Record<string, unknown>);
   resetReactiveObject(lanePollSubscribers as unknown as Record<string, unknown>);
+  resetReactiveObject(lanePollingActive as unknown as Record<string, unknown>);
 };
 
 export default {
diff --git a/src/views/dashboards/superUserDashboard/selfserve/displays/machine/SelfServeGenericStatus.vue b/src/views/dashboards/superUserDashboard/selfserve/displays/machine/SelfServeGenericStatus.vue
new file mode 100644
index 00000000..41ac0848
--- /dev/null
+++ b/src/views/dashboards/superUserDashboard/selfserve/displays/machine/SelfServeGenericStatus.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {defineProps} from "vue";
+import {BIcon} from "buefy";
+
+defineProps<{
+  icon: string;
+  type: string;
+  label: string;
+}>()
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <span class="is-small label">
+      <span class="mr-2">
+        <b-icon
+          :icon="icon"
+          :type="type"
+          pack="fas"
+          size="is-small"
+        />
+      </span>
+      {{ label }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/dashboards/superUserDashboard/selfserve/displays/machine/SelfServeMachine.vue b/src/views/dashboards/superUserDashboard/selfserve/displays/machine/SelfServeMachine.vue
index 20b87514..0779e1a8 100644
--- a/src/views/dashboards/superUserDashboard/selfserve/displays/machine/SelfServeMachine.vue
+++ b/src/views/dashboards/superUserDashboard/selfserve/displays/machine/SelfServeMachine.vue
@@ -102,6 +102,7 @@ watch(
         <div class="divider">
           <p class="divider-text">Access Controls</p>
         </div>
+        <p class="title is-6 mb-2">Department Self-Serve</p>
         <div class="columns is-mobile">
           <div class="column is-half">
             <b-tooltip multilined dashed>
@@ -119,6 +120,7 @@ watch(
             <div class="columns is-mobile">
               <div class="column is-half">
                 <SelfServeMachineStatus :machineStatus="departmentSelfServeEnabled ? 'ON' : 'OFF'" />
+                <p class="label is-small mt-2">{{ departmentSelfServeStatusLabel }}</p>
               </div>
               <div class="column is-half">
                 <b-switch
@@ -132,6 +134,7 @@ watch(
             </div>
           </div>
         </div>
+        <p v-if="departmentSelfServeError" class="help is-danger mt-2">{{ departmentSelfServeError }}</p>
         <!-- Relay controls -->
         <SelfServeMachineRelayControls :machine="machine" />
         <!-- Current wash cycle -->
diff --git a/src/views/dashboards/superUserDashboard/selfserve/displays/machine/SelfServeMachineRelayControls.vue b/src/views/dashboards/superUserDashboard/selfserve/displays/machine/SelfServeMachineRelayControls.vue
index ebaad9f9..5d679940 100644
--- a/src/views/dashboards/superUserDashboard/selfserve/displays/machine/SelfServeMachineRelayControls.vue
+++ b/src/views/dashboards/superUserDashboard/selfserve/displays/machine/SelfServeMachineRelayControls.vue
@@ -89,8 +89,12 @@ const parseBillableStatus = (inProgressDetails: typeof connectivity.inProgressDe
   if (!inProgressDetails?.in_progress) {
     return MachineStatusType.OFF;
   }
-  const includedTimeMs = (inProgressDetails.session.included_minutes ?? 0) * 60 * 1000;
-  const washStartedAt = new Date(inProgressDetails.session.wash_started_at).getTime();
+  const includedTimeMs = Number(inProgressDetails.session?.included_minutes ?? 0) * 60 * 1000;
+  const washStartedAtValue = inProgressDetails.session?.wash_started_at;
+  const washStartedAt = washStartedAtValue ? new Date(String(washStartedAtValue)).getTime() : Number.NaN;
+  if (!Number.isFinite(washStartedAt)) {
+    return MachineStatusType.ON;
+  }
   if (Date.now() - washStartedAt >= includedTimeMs) {
     return MachineStatusType.BILLABLE;
   }
@@ -103,9 +107,13 @@ const parseBillableMinuteAmount = (inProgressDetails: typeof connectivity.inProg
   }
   // When there's included minutes, it should count down.
   // When there's no included minutes, or they've all been used, it should count up from 0.
-  const includedMinutes = inProgressDetails.session.included_minutes ?? 0;
-  const washStartedAt = new Date(inProgressDetails.session.wash_started_at).getTime();
-  const elapsedMinutes = Math.floor((Date.now() - washStartedAt) / (60 * 1000));
+  const includedMinutes = Number(inProgressDetails.session?.included_minutes ?? 0);
+  const washStartedAtValue = inProgressDetails.session?.wash_started_at;
+  const washStartedAt = washStartedAtValue ? new Date(String(washStartedAtValue)).getTime() : Number.NaN;
+  if (!Number.isFinite(washStartedAt)) {
+    return "N/A";
+  }
+  const elapsedMinutes = Math.max(0, Math.floor((Date.now() - washStartedAt) / (60 * 1000)));
   if (includedMinutes > 0 && elapsedMinutes >= includedMinutes) {
     // If there are included minutes, we show the remaining minutes.
     return elapsedMinutes - includedMinutes;
@@ -113,6 +121,8 @@ const parseBillableMinuteAmount = (inProgressDetails: typeof connectivity.inProg
     // If there are no included minutes, we show the elapsed minutes.
     return includedMinutes - elapsedMinutes;
   }
+
+  return elapsedMinutes;
 }
 
 const openGate = async (gate: LaneGate) => {
@@ -241,7 +251,7 @@ onUnmounted(() => {
         <p>Loading in-progress details...</p>
       </template>
       <template v-else-if="inProgressDetails?.in_progress">
-        <div class="columns is-mobile">
+        <div class="columns is-mobile is-multiline">
           <div class="column is-half">
             <p>
               <b-tooltip multilined dashed>
@@ -266,6 +276,52 @@ onUnmounted(() => {
               </div>
             </div>
           </div>
+          <!-- Customer -->
+          <div class="column is-half">
+            <p>
+              <b-tooltip multilined dashed>
+                <template v-slot:default>
+                  <p>Customer</p>
+                </template>
+                <template v-slot:content>
+                  The customer associated with the current wash session, if available. This is based on the most recent session information and may not always be accurate.
+                </template>
+              </b-tooltip>
+            </p>
+          </div>
+          <div class="column is-half">
+            <div class="columns is-mobile">
+              <div class="column is-half">
+                <SelfServeMachineStatus :machine-status="inProgressDetails.customer ? MachineStatusType.ON : MachineStatusType.OFF" />
+              </div>
+              <div class="column is-half">
+                <p class="label is-small">Customer: {{ customerDisplay }}</p>
+              </div>
+            </div>
+          </div>
+          <!-- Vehicle -->
+          <div class="column is-half">
+            <p>
+              <b-tooltip multilined dashed>
+                <template v-slot:default>
+                  <p>Vehicle</p>
+                </template>
+                <template v-slot:content>
+                  The vehicle associated with the current wash, if available. This is based on the most recent session information and may not always be accurate.
+                </template>
+              </b-tooltip>
+            </p>
+          </div>
+          <div class="column is-half">
+            <div class="columns is-mobile">
+              <div class="column is-half">
+                <SelfServeMachineStatus :machine-status="inProgressDetails.vehicle ? MachineStatusType.ON : MachineStatusType.OFF" />
+              </div>
+              <div class="column is-half">
+                <p class="label is-small">Vehicle: {{ vehicleDisplay }}</p>
+              </div>
+            </div>
+          </div>
         </div>
       </template>
       <template v-else>
diff --git a/src/views/dashboards/superUserDashboard/selfserve/displays/machine/SelfServeMachineStatus.vue b/src/views/dashboards/superUserDashboard/selfserve/displays/machine/SelfServeMachineStatus.vue
index b17ea2c4..95c441a5 100644
--- a/src/views/dashboards/superUserDashboard/selfserve/displays/machine/SelfServeMachineStatus.vue
+++ b/src/views/dashboards/superUserDashboard/selfserve/displays/machine/SelfServeMachineStatus.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {defineProps} from "vue";
 import type {MachineStatus} from "@/views/dashboards/superUserDashboard/selfserve/types/MachineStatusType.vue";
-import {BIcon} from "buefy";
+import SelfServeGenericStatus from "@/views/dashboards/superUserDashboard/selfserve/displays/machine/SelfServeGenericStatus.vue";
 defineProps<{machineStatus: typeof MachineStatus[keyof typeof MachineStatus]}>()
 
 const icon = {
@@ -11,7 +11,7 @@ const icon = {
   ON: "check",
   OFF: "close",
   INCLUDED: "clock",
-  BILLABLE: "clock",
+  BILLABLE: "dollar-sign",
 }
 const type = {
   ONLINE: "is-success",
@@ -19,31 +19,18 @@ const type = {
   MAINTENANCE: "is-warning",
   ON: "is-success",
   OFF: "is-danger",
-  INCLUDED: "is-info",
-  BILLABLE: "is-info",
+  INCLUDED: "is-grey",
+  BILLABLE: "is-success",
 }
 
 </script>
 
 <template>
-  <div class="flex items-center gap-2">
-    <span class="is-small label">
-      <span class="mr-2">
-        <b-icon
-          :icon="icon[machineStatus]"
-          :type="type[machineStatus]"
-          pack="fas"
-          size="is-small"
-        />
-      </span>
-      <!-- If INCLUDED -->
-      <span v-if="machineStatus === 'INCLUDED'">PREPAID</span>
-      <span v-else-if="machineStatus === 'BILLABLE'">ADD</span>
-      <!-- If maintenance, show maintenance -->
-      <span v-else-if="machineStatus === 'MAINTENANCE'">N/A</span>
-      <span v-else>{{ machineStatus }}</span>
-    </span>
-  </div>
+  <SelfServeGenericStatus
+    :icon="icon[machineStatus]"
+    :type="type[machineStatus]"
+    :label="machineStatus === 'INCLUDED' ? 'Incl.' : machineStatus === 'BILLABLE' ? 'ADD' : machineStatus === 'MAINTENANCE' ? 'N/A' : machineStatus"
+  />
 </template>
 
 <style scoped>
diff --git a/tests/unit/self-serve-try-modal.spec.js b/tests/unit/self-serve-try-modal.spec.js
new file mode 100644
index 00000000..cd74b247
--- /dev/null
+++ b/tests/unit/self-serve-try-modal.spec.js
@@ -0,0 +1,382 @@
+// @vitest-environment jsdom
+import { flushPromises } from "@vue/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  fetchSelfServeData: vi.fn(),
+  syncVehicleAnswer: vi.fn(),
+  clearVehicleAnswers: vi.fn(),
+  swalFire: vi.fn(),
+  getLanes: vi.fn(),
+  getVehicleTypeOptions: vi.fn(),
+  loading: { value: false, __v_isRef: true },
+  lane: { value: { id: 3, name: "Lane 3" }, __v_isRef: true },
+  machineType: { value: null, __v_isRef: true },
+  session: { value: null, __v_isRef: true },
+  events: { value: [], __v_isRef: true },
+  questions: { value: [], __v_isRef: true },
+  answers: { value: {}, __v_isRef: true },
+  allowedServices: { value: [], __v_isRef: true },
+  configVersionId: { value: null, __v_isRef: true },
+  evaluationTrace: { value: null, __v_isRef: true },
+  visibleQuestions: { value: [], __v_isRef: true },
+  activeTasks: { value: [], __v_isRef: true },
+  currentQuestion: { value: null, __v_isRef: true },
+  allVisibleQuestionsAnswered: { value: false, __v_isRef: true },
+  machineAvailable: { value: true, __v_isRef: true },
+  allowed: { value: true, __v_isRef: true },
+  evaluateCondition: vi.fn(() => true),
+}));
+
+vi.mock("@/components/session/token/SessionUser.vue", () => ({
+  SessionUser: {
+    user: {
+      customer_number: { value: 12345 },
+    },
+    objects: {
+      department_lanes: {
+        get: {
+          all: mocks.getLanes,
+        },
+      },
+      vehicles: {
+        columns: {
+          type: {
+            options: mocks.getVehicleTypeOptions,
+          },
+        },
+      },
+    },
+  },
+}));
+
+vi.mock("sweetalert2", () => ({
+  default: {
+    fire: mocks.swalFire,
+  },
+}));
+
+vi.mock("@/composables/useSelfServeLogic", () => ({
+  useSelfServeLogic: () => ({
+    loading: mocks.loading,
+    lane: mocks.lane,
+    machineType: mocks.machineType,
+    session: mocks.session,
+    events: mocks.events,
+    questions: mocks.questions,
+    answers: mocks.answers,
+    allowedServices: mocks.allowedServices,
+    configVersionId: mocks.configVersionId,
+    evaluationTrace: mocks.evaluationTrace,
+    visibleQuestions: mocks.visibleQuestions,
+    activeTasks: mocks.activeTasks,
+    currentQuestion: mocks.currentQuestion,
+    allVisibleQuestionsAnswered: mocks.allVisibleQuestionsAnswered,
+    machineAvailable: mocks.machineAvailable,
+    allowed: mocks.allowed,
+    fetchSelfServeData: mocks.fetchSelfServeData,
+    syncVehicleAnswer: mocks.syncVehicleAnswer,
+    clearVehicleAnswers: mocks.clearVehicleAnswers,
+    evaluateCondition: mocks.evaluateCondition,
+  }),
+}));
+
+import { mountWithApp } from "./helpers/mountWithApp.js";
+import SelfServeTryModal from "@/components/displays/department/tables/SelfServeTryModal.vue";
+
+describe("SelfServeTryModal", () => {
+  beforeEach(() => {
+    mocks.fetchSelfServeData.mockReset();
+    mocks.syncVehicleAnswer.mockReset();
+    mocks.clearVehicleAnswers.mockReset();
+    mocks.swalFire.mockReset();
+    mocks.getLanes.mockReset();
+    mocks.getVehicleTypeOptions.mockReset();
+    mocks.evaluateCondition.mockReset();
+
+    mocks.getLanes.mockResolvedValue([
+      { id: 3, department: 9, name: "Lane 3" },
+    ]);
+    mocks.getVehicleTypeOptions.mockResolvedValue([
+      { id: 0, name: "Ukendt" },
+      { id: 2, name: "Truck" },
+      { id: 3, name: "Van" },
+    ]);
+    mocks.clearVehicleAnswers.mockResolvedValue({ deletedCount: 1 });
+    mocks.swalFire.mockResolvedValue({ isConfirmed: true });
+    mocks.loading.value = false;
+    mocks.questions.value = [];
+    mocks.visibleQuestions.value = [];
+    mocks.answers.value = {};
+    mocks.currentQuestion.value = null;
+    mocks.evaluateCondition.mockReturnValue(true);
+  });
+
+  const mountModal = () => mountWithApp(SelfServeTryModal, {
+    props: {
+      departmentId: 9,
+      laneId: 3,
+    },
+    global: {
+      stubs: {
+        SelfServeQuestionCards: true,
+        SelfServeTaskList: true,
+      },
+    },
+  });
+
+  it("keeps clear answers enabled for valid lane/reg even when no visible answers exist", async () => {
+    const wrapper = mountModal();
+
+    await flushPromises();
+
+    const clearButton = wrapper.get('[data-testid="self-serve-try-clear-answers"]');
+    expect(clearButton.attributes("disabled")).toBeUndefined();
+  });
+
+  it("allows selecting vehicle type and refreshes preview with the selected type", async () => {
+    const wrapper = mountModal();
+
+    await flushPromises();
+
+    mocks.fetchSelfServeData.mockClear();
+    await wrapper.get('[data-testid="self-serve-try-vehicle-type"]').setValue("3");
+    await flushPromises();
+
+    expect(mocks.fetchSelfServeData).toHaveBeenCalledWith(9, 3, 3, "AB12345");
+  });
+
+  it("syncs answers with the selected vehicle type context", async () => {
+    mocks.visibleQuestions.value = [{ id: 77, question: "Question 77" }];
+    mocks.currentQuestion.value = null;
+    mocks.syncVehicleAnswer.mockResolvedValue({});
+
+    const wrapper = mountWithApp(SelfServeTryModal, {
+      props: {
+        departmentId: 9,
+        laneId: 3,
+      },
+      global: {
+        stubs: {
+          SelfServeQuestionCards: {
+            props: ["visibleQuestions"],
+            emits: ["answer-question"],
+            template: "<button data-testid='emit-card-answer' @click=\"$emit('answer-question', visibleQuestions[0]?.id, true)\">answer</button>",
+          },
+          SelfServeTaskList: true,
+        },
+      },
+    });
+
+    await flushPromises();
+    await wrapper.get('[data-testid="self-serve-try-vehicle-type"]').setValue("3");
+    await flushPromises();
+
+    await wrapper.get("[data-testid='emit-card-answer']").trigger("click");
+    await flushPromises();
+
+    expect(mocks.syncVehicleAnswer).toHaveBeenCalledWith({
+      departmentId: 9,
+      laneId: 3,
+      customerNumber: 12345,
+      reg: "AB12345",
+      questionId: 77,
+      value: true,
+      vehicleTypeId: 3,
+    });
+  });
+
+  it("does not duplicate the current question in the question cards list", async () => {
+    mocks.currentQuestion.value = { id: 11, question: "Question 11" };
+    mocks.visibleQuestions.value = [
+      { id: 11, question: "Question 11" },
+      { id: 22, question: "Question 22" },
+    ];
+
+    const wrapper = mountWithApp(SelfServeTryModal, {
+      props: {
+        departmentId: 9,
+        laneId: 3,
+      },
+      global: {
+        stubs: {
+          SelfServeQuestionCards: {
+            props: ["visibleQuestions"],
+            template: "<div data-testid='question-cards-probe'>{{ visibleQuestions.map(q => q.question).join('|') }}</div>",
+          },
+          SelfServeTaskList: true,
+        },
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.find(".notification.is-info").exists()).toBe(false);
+    expect(wrapper.get("[data-testid='question-cards-probe']").text()).toBe("Question 11|Question 22");
+  });
+
+  it("keeps rendering known questions when visible list is temporarily empty but unanswered questions still exist", async () => {
+    mocks.visibleQuestions.value = [];
+    mocks.questions.value = [
+      { id: 11, question: "Question 11", order_priority: 1 },
+      { id: 22, question: "Question 22", order_priority: 2 },
+    ];
+    mocks.answers.value = { 11: true, 22: null };
+
+    const wrapper = mountWithApp(SelfServeTryModal, {
+      props: {
+        departmentId: 9,
+        laneId: 3,
+      },
+      global: {
+        stubs: {
+          SelfServeQuestionCards: {
+            props: ["visibleQuestions"],
+            template: "<div data-testid='question-cards-probe'>{{ visibleQuestions.map(q => q.question).join('|') }}</div>",
+          },
+          SelfServeTaskList: true,
+        },
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.get("[data-testid='question-cards-probe']").text()).toBe("Question 11|Question 22");
+    expect(wrapper.text()).toContain("Alle synlige sporgsmal besvaret: Nej");
+  });
+
+  it("keeps condition-true unanswered follow-up visible when server visible list is stale", async () => {
+    mocks.visibleQuestions.value = [
+      { id: 11, question: "Question 11", order_priority: 1, condition_id: null },
+    ];
+    mocks.questions.value = [
+      { id: 11, question: "Question 11", order_priority: 1, condition_id: null },
+      { id: 12, question: "Follow-up question", order_priority: 2, condition_id: 100 },
+    ];
+    mocks.answers.value = { 11: true, 12: null };
+    mocks.evaluateCondition.mockImplementation((conditionId) => parseInt(conditionId) === 100);
+
+    const wrapper = mountWithApp(SelfServeTryModal, {
+      props: {
+        departmentId: 9,
+        laneId: 3,
+      },
+      global: {
+        stubs: {
+          SelfServeQuestionCards: {
+            props: ["visibleQuestions"],
+            template: "<div data-testid='question-cards-probe'>{{ visibleQuestions.map(q => q.question).join('|') }}</div>",
+          },
+          SelfServeTaskList: true,
+        },
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.get("[data-testid='question-cards-probe']").text()).toBe("Question 11|Follow-up question");
+  });
+
+  it("does not add follow-up questions when their condition is false", async () => {
+    mocks.visibleQuestions.value = [
+      { id: 11, question: "Question 11", order_priority: 1, condition_id: null },
+    ];
+    mocks.questions.value = [
+      { id: 11, question: "Question 11", order_priority: 1, condition_id: null },
+      { id: 12, question: "Follow-up question", order_priority: 2, condition_id: 100 },
+    ];
+    mocks.answers.value = { 11: false, 12: null };
+    mocks.evaluateCondition.mockReturnValue(false);
+
+    const wrapper = mountWithApp(SelfServeTryModal, {
+      props: {
+        departmentId: 9,
+        laneId: 3,
+      },
+      global: {
+        stubs: {
+          SelfServeQuestionCards: {
+            props: ["visibleQuestions"],
+            template: "<div data-testid='question-cards-probe'>{{ visibleQuestions.map(q => q.question).join('|') }}</div>",
+          },
+          SelfServeTaskList: true,
+        },
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.get("[data-testid='question-cards-probe']").text()).toBe("Question 11");
+  });
+
+  it("disables clear answers when registration is invalid", async () => {
+    const wrapper = mountModal();
+
+    await flushPromises();
+    await wrapper.get('[data-testid="self-serve-try-reg"]').setValue("A");
+    await flushPromises();
+
+    const clearButton = wrapper.get('[data-testid="self-serve-try-clear-answers"]');
+    expect(clearButton.attributes("disabled")).toBeDefined();
+  });
+
+  it("disables clear answers while loading", async () => {
+    mocks.loading.value = true;
+
+    const wrapper = mountModal();
+
+    await flushPromises();
+
+    const clearButton = wrapper.get('[data-testid="self-serve-try-clear-answers"]');
+    expect(clearButton.attributes("disabled")).toBeDefined();
+  });
+
+  it("does not clear answers when confirmation is cancelled", async () => {
+    mocks.swalFire.mockResolvedValue({ isConfirmed: false });
+
+    const wrapper = mountModal();
+
+    await flushPromises();
+
+    await wrapper.get('[data-testid="self-serve-try-clear-answers"]').trigger("click");
+
+    expect(mocks.swalFire).toHaveBeenCalledTimes(1);
+    expect(mocks.clearVehicleAnswers).not.toHaveBeenCalled();
+  });
+
+  it("clears answers for the selected lane and registration when confirmed", async () => {
+    const wrapper = mountWithApp(SelfServeTryModal, {
+      props: {
+        departmentId: 9,
+        laneId: 3,
+      },
+      global: {
+        stubs: {
+          SelfServeQuestionCards: true,
+          SelfServeTaskList: true,
+        },
+      },
+    });
+
+    await flushPromises();
+
+    const clearButton = wrapper.get('[data-testid="self-serve-try-clear-answers"]');
+    expect(clearButton.attributes("disabled")).toBeUndefined();
+
+    await clearButton.trigger("click");
+
+    expect(mocks.swalFire).toHaveBeenCalledTimes(1);
+    expect(mocks.swalFire.mock.calls[0][0]).toMatchObject({
+      title: "Ryd besvarelser?",
+      icon: "warning",
+    });
+    expect(mocks.swalFire.mock.calls[0][0].text).toContain("AB12345");
+    expect(mocks.swalFire.mock.calls[0][0].text).toContain("3");
+    expect(mocks.clearVehicleAnswers).toHaveBeenCalledWith({
+      departmentId: 9,
+      laneId: 3,
+      vehicleTypeId: null,
+      reg: "AB12345",
+    });
+  });
+});
diff --git a/tests/unit/use-self-serve-logic.spec.js b/tests/unit/use-self-serve-logic.spec.js
index f4a7c555..29d735b4 100644
--- a/tests/unit/use-self-serve-logic.spec.js
+++ b/tests/unit/use-self-serve-logic.spec.js
@@ -4,6 +4,8 @@ const mocks = vi.hoisted(() => ({
   previewAllowed: vi.fn(),
   washSummary: vi.fn(),
   add: vi.fn(),
+  getAll: vi.fn(),
+  deleteCondition: vi.fn(),
   attachmentsList: vi.fn(),
   attachmentsDownload: vi.fn(),
   request: vi.fn(),
@@ -17,8 +19,10 @@ vi.mock("@/components/session/token/SessionUser.vue", () => ({
         get: {
           previewAllowed: mocks.previewAllowed,
           washSummary: mocks.washSummary,
+          all: mocks.getAll,
         },
         add: mocks.add,
+        delete: mocks.deleteCondition,
       },
       self_serve_tasks: {
         attachments: {
@@ -37,6 +41,8 @@ describe("useSelfServeLogic", () => {
     mocks.previewAllowed.mockReset();
     mocks.washSummary.mockReset();
     mocks.add.mockReset();
+    mocks.getAll.mockReset();
+    mocks.deleteCondition.mockReset();
     mocks.attachmentsList.mockReset();
     mocks.attachmentsDownload.mockReset();
     mocks.request.mockReset();
@@ -87,7 +93,7 @@ describe("useSelfServeLogic", () => {
 
     await logic.fetchSelfServeData(1, 9, 7, "ab12345");
 
-    expect(mocks.previewAllowed).toHaveBeenCalledWith(7, "AB12345");
+    expect(mocks.previewAllowed).toHaveBeenCalledWith(7, "AB12345", 9);
     expect(mocks.washSummary).toHaveBeenCalledWith({ session_id: 91 });
     expect(logic.allowed.value).toBe(true);
     expect(logic.machineAvailable.value).toBe(true);
@@ -128,7 +134,7 @@ describe("useSelfServeLogic", () => {
     await logic.fetchSelfServeData(1, 9, 7, "ab12345");
 
     expect(mocks.washSummary).toHaveBeenNthCalledWith(1, { session_id: 91 });
-    expect(mocks.washSummary).toHaveBeenNthCalledWith(2, { lane_id: 7, reg: "AB12345" });
+    expect(mocks.washSummary).toHaveBeenNthCalledWith(2, { lane_id: 7, reg: "AB12345", vehicle_type: 9 });
     expect(logic.visibleQuestions.value.map((question) => question.id)).toEqual([1]);
   });
 
@@ -152,6 +158,61 @@ describe("useSelfServeLogic", () => {
     expect(logic.visibleQuestions.value.map((question) => question.id)).toEqual([1, 2]);
   });
 
+  it("keeps the newest task list when overlapping preview requests resolve out of order", async () => {
+    const createDeferred = () => {
+      let resolve;
+      const promise = new Promise((res) => {
+        resolve = res;
+      });
+
+      return { promise, resolve };
+    };
+
+    const firstPreview = createDeferred();
+    const secondPreview = createDeferred();
+
+    mocks.previewAllowed
+      .mockImplementationOnce(() => firstPreview.promise)
+      .mockImplementationOnce(() => secondPreview.promise);
+    mocks.attachmentsList.mockResolvedValue({ data: [] });
+
+    const logic = useSelfServeLogic();
+
+    const firstFetch = logic.fetchSelfServeData(1, null, 7, "ab12345");
+    const secondFetch = logic.fetchSelfServeData(1, 9, 7, "ab12345");
+
+    secondPreview.resolve({
+      allowed: true,
+      session: null,
+      questions: [],
+      tasks: [
+        { id: 1001, task: "Task A", order_priority: 1 },
+        { id: 1002, task: "Task B", order_priority: 2 },
+      ],
+      conditions: [],
+      rules: [],
+      allowed_services: [],
+    });
+    await secondFetch;
+
+    expect(logic.tasks.value.map((task) => task.id)).toEqual([1001, 1002]);
+
+    firstPreview.resolve({
+      allowed: true,
+      session: null,
+      questions: [],
+      tasks: [
+        { id: 1001, task: "Task A", order_priority: 1 },
+      ],
+      conditions: [],
+      rules: [],
+      allowed_services: [],
+    });
+    await firstFetch;
+
+    expect(logic.tasks.value.map((task) => task.id)).toEqual([1001, 1002]);
+  });
+
   it("evaluates conditional rules for task activation", () => {
     const logic = useSelfServeLogic();
 
@@ -270,6 +331,160 @@ describe("useSelfServeLogic", () => {
     expect(logic.visibleQuestions.value.map((question) => question.id)).toEqual([2]);
   });
 
+  it("preserves the selected vehicle-type override when refreshing after answer sync", async () => {
+    mocks.previewAllowed.mockResolvedValue({
+      allowed: true,
+      session: { id: 66, status: "IN_PROGRESS" },
+      questions: [
+        { id: 1, question: "Primary question", answer: null, order_priority: 1 },
+      ],
+      tasks: [],
+      conditions: [],
+      rules: [],
+    });
+    mocks.washSummary.mockResolvedValue({
+      session: { id: 66, status: "IN_PROGRESS" },
+      questions: [
+        { id: 1, question: "Primary question", answer: null, order_priority: 1 },
+      ],
+      tasks: [],
+      events: [],
+    });
+    mocks.add.mockResolvedValue({
+      data: {
+        data: {
+          selfserve: {
+            session: { id: 66, status: "IN_PROGRESS" },
+            questions: [
+              { id: 1, question: "Primary question", answer: true, order_priority: 1 },
+            ],
+            tasks: [],
+            conditions: [],
+            rules: [],
+          },
+        },
+      },
+    });
+
+    const logic = useSelfServeLogic();
+
+    await logic.fetchSelfServeData(1, 9, 7, "ab12345");
+    await logic.syncVehicleAnswer({
+      departmentId: 1,
+      laneId: 7,
+      customerNumber: 12345,
+      reg: "ab12345",
+      questionId: 1,
+      value: true,
+    });
+
+    expect(mocks.previewAllowed).toHaveBeenNthCalledWith(1, 7, "AB12345", 9);
+    expect(mocks.previewAllowed).toHaveBeenNthCalledWith(2, 7, "AB12345", 9);
+  });
+
+  it("uses the resolved auto vehicle type for lane/reg summary fallback", async () => {
+    mocks.previewAllowed.mockResolvedValue({
+      allowed: true,
+      session: { id: 91, status: "IN_PROGRESS", vehicle_type_id: 5 },
+      questions: [
+        { id: 1, question: "Primary question", answer: null, order_priority: 1 },
+      ],
+      tasks: [],
+      conditions: [],
+      rules: [],
+    });
+    mocks.washSummary.mockResolvedValue({
+      session: { id: 91, status: "IN_PROGRESS", vehicle_type_id: 5 },
+      questions: [
+        { id: 1, question: "Primary question", answer: null, order_priority: 1 },
+      ],
+      tasks: [],
+      events: [],
+    });
+
+    const logic = useSelfServeLogic();
+    await logic.fetchSelfServeData(1, null, 7, "ab12345");
+
+    expect(mocks.washSummary).toHaveBeenNthCalledWith(1, { session_id: 91 });
+    expect(mocks.washSummary).toHaveBeenNthCalledWith(2, { lane_id: 7, reg: "AB12345", vehicle_type: 5 });
+  });
+
+  it("reuses the resolved auto vehicle type when refreshing after answer sync", async () => {
+    mocks.previewAllowed.mockResolvedValue({
+      allowed: true,
+      session: { id: 66, status: "IN_PROGRESS", vehicle_type_id: 5 },
+      questions: [
+        { id: 1, question: "Primary question", answer: null, order_priority: 1 },
+      ],
+      tasks: [],
+      conditions: [],
+      rules: [],
+    });
+    mocks.washSummary.mockResolvedValue({
+      session: { id: 66, status: "IN_PROGRESS", vehicle_type_id: 5 },
+      questions: [
+        { id: 1, question: "Primary question", answer: null, order_priority: 1 },
+      ],
+      tasks: [],
+      events: [],
+    });
+    mocks.add.mockResolvedValue({
+      data: {
+        data: {
+          selfserve: {
+            session: { id: 66, status: "IN_PROGRESS", vehicle_type_id: 5 },
+            questions: [
+              { id: 1, question: "Primary question", answer: true, order_priority: 1 },
+            ],
+            tasks: [],
+            conditions: [],
+            rules: [],
+          },
+        },
+      },
+    });
+
+    const logic = useSelfServeLogic();
+
+    await logic.fetchSelfServeData(1, null, 7, "ab12345");
+    await logic.syncVehicleAnswer({
+      departmentId: 1,
+      laneId: 7,
+      customerNumber: 12345,
+      reg: "ab12345",
+      questionId: 1,
+      value: true,
+    });
+
+    expect(mocks.previewAllowed).toHaveBeenNthCalledWith(1, 7, "AB12345");
+    expect(mocks.previewAllowed).toHaveBeenNthCalledWith(2, 7, "AB12345", 5);
+  });
+
+  it("keeps answered questions visible when summary returns no currently-visible question list", async () => {
+    mocks.previewAllowed.mockResolvedValue({
+      allowed: false,
+      session: { id: 99, status: "MACHINE_NOT_ALLOWED" },
+      questions: [
+        { id: 1, question: "Primary question", answer: true, order_priority: 1 },
+      ],
+      tasks: [],
+      conditions: [],
+      rules: [],
+    });
+    mocks.washSummary.mockResolvedValue({
+      session: { id: 99, status: "MACHINE_NOT_ALLOWED" },
+      questions: [],
+      tasks: [],
+      events: [],
+    });
+
+    const logic = useSelfServeLogic();
+    await logic.fetchSelfServeData(1, 9, 7, "ab12345");
+
+    expect(logic.answers.value[1]).toBe(true);
+    expect(logic.visibleQuestions.value.map((question) => question.id)).toEqual([1]);
+  });
+
   it("hides condition-dependent questions again when the parent answer no longer satisfies the condition", async () => {
     const baseConditions = [
       { id: 100, name: "Primary answer is yes" },
@@ -289,17 +504,29 @@ describe("useSelfServeLogic", () => {
       conditions: baseConditions,
       rules: baseRules,
     });
-    mocks.washSummary.mockResolvedValueOnce({
-      session: { id: 55, status: "IN_PROGRESS" },
-      questions: [
-        { id: 2, question: "Primary question", answer: true, order_priority: 1, condition_id: null },
-        { id: 3, question: "Conditional follow-up", answer: null, order_priority: 2, condition_id: 100 },
-      ],
-      tasks: [],
-      conditions: baseConditions,
-      rules: baseRules,
-      events: [],
-    });
+    mocks.washSummary
+      .mockResolvedValueOnce({
+        session: { id: 55, status: "IN_PROGRESS" },
+        questions: [
+          { id: 2, question: "Primary question", answer: true, order_priority: 1, condition_id: null },
+          { id: 3, question: "Conditional follow-up", answer: null, order_priority: 2, condition_id: 100 },
+        ],
+        tasks: [],
+        conditions: baseConditions,
+        rules: baseRules,
+        events: [],
+      })
+      .mockResolvedValueOnce({
+        session: { id: 55, status: "IN_PROGRESS" },
+        questions: [
+          { id: 2, question: "Primary question", answer: true, order_priority: 1, condition_id: null },
+          { id: 3, question: "Conditional follow-up", answer: null, order_priority: 2, condition_id: 100 },
+        ],
+        tasks: [],
+        conditions: baseConditions,
+        rules: baseRules,
+        events: [],
+      });
 
     mocks.add.mockResolvedValue({
       data: {
@@ -439,4 +666,79 @@ describe("useSelfServeLogic", () => {
     expect(logic.answers.value[1]).toBe(true);
     expect(logic.visibleQuestions.value.map((question) => question.id)).toEqual([1, 2]);
   });
+
+  it("clears persisted answers for a lane/reg and refreshes preview state", async () => {
+    mocks.previewAllowed
+      .mockResolvedValueOnce({
+        allowed: true,
+        session: { id: 88, status: "IN_PROGRESS" },
+        questions: [
+          { id: 1, question: "Doors closed?", answer: true, order_priority: 1 },
+          { id: 2, question: "Windows closed?", answer: false, order_priority: 2 },
+        ],
+        tasks: [],
+        conditions: [],
+        rules: [],
+      })
+      .mockResolvedValueOnce({
+        allowed: true,
+        session: { id: 88, status: "IN_PROGRESS" },
+        questions: [
+          { id: 1, question: "Doors closed?", answer: null, order_priority: 1 },
+          { id: 2, question: "Windows closed?", answer: null, order_priority: 2 },
+        ],
+        tasks: [],
+        conditions: [],
+        rules: [],
+      });
+    mocks.washSummary
+      .mockResolvedValueOnce({
+        session: { id: 88, status: "IN_PROGRESS" },
+        questions: [
+          { id: 1, question: "Doors closed?", answer: true, order_priority: 1 },
+          { id: 2, question: "Windows closed?", answer: false, order_priority: 2 },
+        ],
+        tasks: [],
+        events: [],
+      })
+      .mockResolvedValueOnce({
+        session: { id: 88, status: "IN_PROGRESS" },
+        questions: [
+          { id: 1, question: "Doors closed?", answer: null, order_priority: 1 },
+          { id: 2, question: "Windows closed?", answer: null, order_priority: 2 },
+        ],
+        tasks: [],
+        events: [],
+      });
+    mocks.getAll.mockResolvedValue([
+      { id: 701, question: 1 },
+      { id: 702, question: 2 },
+    ]);
+    mocks.deleteCondition.mockResolvedValue({ data: { message: "Condition deleted" } });
+
+    const logic = useSelfServeLogic();
+    await logic.fetchSelfServeData(3, null, 7, "ab12345");
+
+    expect(logic.answers.value[1]).toBe(true);
+    expect(logic.answers.value[2]).toBe(false);
+
+    const result = await logic.clearVehicleAnswers({
+      departmentId: 3,
+      laneId: 7,
+      reg: "ab12345",
+    });
+
+    expect(result).toEqual({ deletedCount: 2 });
+    expect(mocks.getAll).toHaveBeenCalledWith({
+      lane: 7,
+      reg: "AB12345",
+      department: 3,
+    });
+    expect(mocks.deleteCondition).toHaveBeenCalledTimes(2);
+    expect(mocks.deleteCondition).toHaveBeenNthCalledWith(1, 701);
+    expect(mocks.deleteCondition).toHaveBeenNthCalledWith(2, 702);
+    expect(logic.answers.value[1]).toBe(null);
+    expect(logic.answers.value[2]).toBe(null);
+    expect(logic.allVisibleQuestionsAnswered.value).toBe(false);
+  });
 });