diff --git a/branching_xblock/branching_xblock.py b/branching_xblock/branching_xblock.py
index 972f42c..d3e82fb 100644
--- a/branching_xblock/branching_xblock.py
+++ b/branching_xblock/branching_xblock.py
@@ -2,17 +2,22 @@
 import json
 import os
 import uuid
+from collections import deque
 from typing import Any, Optional
 
 from web_fragments.fragment import Fragment
 from xblock.core import XBlock
-from xblock.fields import Boolean, Dict, Float, List, Scope, String
+from xblock.fields import Boolean, Dict, Integer, List, Scope, String
 from xblock.utils.resources import ResourceLoader
 
 from .compat import get_site_configuration_value, sanitize_html
 
 resource_loader = ResourceLoader(__name__)
 
+DFS_STATE_UNVISITED = 0
+DFS_STATE_VISITING = 1
+DFS_STATE_VISITED = 2
+
 
 class BranchingXBlock(XBlock):
     """
@@ -71,12 +76,39 @@ class BranchingXBlock(XBlock):
         help="Allow learners to reset the activity"
     )
 
-    max_score = Float(
-        default=100.0,
+    background_image_url = String(
+        default="",
+        scope=Scope.content,
+        help="Background image URL used for image nodes"
+    )
+
+    background_image_alt_text = String(
+        default="",
+        scope=Scope.content,
+        help="Alt text for the background image"
+    )
+
+    background_image_is_decorative = Boolean(
+        default=False,
+        scope=Scope.content,
+        help="Whether the background image is decorative"
+    )
+
+    max_score = Integer(
+        default=100,
         scope=Scope.content,
         help="Score awarded when scenario is completed (if scoring enabled)"
     )
 
+    grade_ranges = List(
+        default=[
+            {"label": "Fail", "start": 0, "end": 49},
+            {"label": "Pass", "start": 50, "end": 100},
+        ],
+        scope=Scope.content,
+        help="Grade range segments for end-of-activity grade report"
+    )
+
     current_node_id = String(
         scope=Scope.user_state,
         default=None,
@@ -89,10 +121,16 @@ class BranchingXBlock(XBlock):
         help="Path history for undo functionality"
     )
 
-    score = Float(
+    score_history = List(
         scope=Scope.user_state,
-        default=0.0,
-        help="Accumulated score (if scoring enabled)"
+        default=[],
+        help="Awarded points per selected choice, used for undo/reset"
+    )
+
+    choice_history = List(
+        scope=Scope.user_state,
+        default=[],
+        help="Selected choice records used for final report details"
     )
 
     has_completed = Boolean(
@@ -102,19 +140,384 @@ class BranchingXBlock(XBlock):
     )
 
     has_custom_completion = True
+    _normalized_nodes_ref: Optional[dict[str, Any]] = None
 
-    def start_node(self):
+    def start_node(self) -> None:
         """
         Set initial current_node_id if not set.
         """
         if not self.current_node_id and self.scenario_data["start_node_id"]:
             self.current_node_id = self.scenario_data["start_node_id"]
 
-    def get_node(self, node_id):
+    def get_node(self, node_id: str) -> Optional[dict[str, Any]]:
         """
         Get a node by its ID.
         """
-        return self.scenario_data.get("nodes", {}).get(node_id)
+        nodes = self.scenario_data.get("nodes", {})
+        if not isinstance(nodes, dict):
+            return None
+
+        node = nodes.get(node_id)
+        if not isinstance(node, dict):
+            return None
+
+        return node
+
+    def _normalize_scenario_nodes(self) -> None:
+        """
+        Normalize authoring payload shape for already-persisted scenario nodes.
+
+        Studio can load node data that was saved before newer authoring fields
+        (e.g. `overlay_text`, `left_image_url`, `right_image_url`, normalized
+        `choices[*].score`) existed. Without this pass, the editor can receive
+        inconsistent node objects and fail to render/update reliably.
+
+        What this does:
+        - Ensures `scenario_data["nodes"]` is a dict.
+        - Drops malformed non-dict nodes/choices.
+        - Fills missing node keys required by the current editor schema.
+        - Normalizes choice score shape for editor reads.
+        - Writes back only when changes are needed.
+        - Runs once per `nodes` object via `_normalized_nodes_ref`.
+
+        Removal plan:
+        Once all persisted scenario data is guaranteed to follow the current
+        schema, this can be deleted.
+        """
+        nodes = self.scenario_data.get("nodes", {})
+        if nodes is self._normalized_nodes_ref:
+            return
+
+        if not isinstance(nodes, dict):
+            self.scenario_data = {**self.scenario_data, "nodes": {}}
+            self._normalized_nodes_ref = self.scenario_data["nodes"]
+            return
+
+        normalized_nodes: dict[str, dict[str, Any]] = {}
+        changed = False
+        for node_id, node in nodes.items():
+            if not isinstance(node, dict):
+                changed = True
+                continue
+
+            normalized_node, node_changed = self._normalize_scenario_node(node)
+            if node_changed:
+                changed = True
+
+            normalized_nodes[node_id] = normalized_node
+
+        if changed:
+            self.scenario_data = {**self.scenario_data, "nodes": normalized_nodes}
+            nodes = self.scenario_data.get("nodes", {})
+
+        self._normalized_nodes_ref = nodes
+
+    def _normalize_scenario_node(self, node: dict[str, Any]) -> tuple[dict[str, Any], bool]:
+        """
+        Normalize one stored node payload for backward-compatible authoring reads.
+        """
+        normalized_node = dict(node)
+        changed = False
+
+        if "overlay_text" not in normalized_node:
+            normalized_node["overlay_text"] = False
+            changed = True
+
+        if "left_image_url" not in normalized_node:
+            media = normalized_node.get("media") or {}
+            normalized_node["left_image_url"] = (
+                media.get("url", "") if (media.get("type") == "image") else ""
+            )
+            changed = True
+
+        if "right_image_url" not in normalized_node:
+            normalized_node["right_image_url"] = ""
+            changed = True
+
+        raw_choices = normalized_node.get("choices", [])
+        choices_were_invalid = not isinstance(raw_choices, list)
+        if choices_were_invalid:
+            raw_choices = []
+            changed = True
+
+        normalized_choices = []
+        for raw_choice in raw_choices:
+            normalized_choice, choice_changed = self._normalize_choice_score(raw_choice)
+            if normalized_choice is None:
+                changed = True
+                continue
+            normalized_choices.append(normalized_choice)
+            if choice_changed:
+                changed = True
+
+        if choices_were_invalid or normalized_choices != raw_choices:
+            normalized_node["choices"] = normalized_choices
+            changed = True
+
+        if normalized_node != node:
+            changed = True
+
+        return normalized_node, changed
+
+    def _normalize_choice_score(self, raw_choice: Any) -> tuple[Optional[dict[str, Any]], bool]:
+        """
+        Normalize one choice object's score shape for authoring reads.
+        """
+        if not isinstance(raw_choice, dict):
+            return None, True
+
+        choice = dict(raw_choice)
+        changed = False
+        raw_score = choice.get("score")
+
+        if raw_score is None:
+            if choice.get("score") != 0:
+                choice["score"] = 0
+                changed = True
+        elif isinstance(raw_score, str):
+            stripped_score = raw_score.strip()
+            if not stripped_score:
+                choice["score"] = 0
+                changed = True
+            else:
+                score = self._parse_choice_score(raw_score)
+                if score is not None and choice.get("score") != score:
+                    choice["score"] = score
+                    changed = True
+        else:
+            score = self._parse_choice_score(raw_score)
+            if score is not None and choice.get("score") != score:
+                choice["score"] = score
+                changed = True
+
+        return choice, changed
+
+    def _parse_choice_score(self, raw_score: Any) -> Optional[int]:
+        """
+        Parse and validate choice score.
+        """
+        if isinstance(raw_score, bool):
+            return None
+        if isinstance(raw_score, int):
+            score = raw_score
+        elif isinstance(raw_score, float):
+            if not raw_score.is_integer():
+                return None
+            score = int(raw_score)
+        elif isinstance(raw_score, str):
+            stripped = raw_score.strip()
+            if not stripped or not stripped.lstrip('-').isdigit():
+                return None
+            score = int(stripped)
+        else:
+            try:
+                score = int(raw_score)
+            except (TypeError, ValueError):
+                return None
+        return score if 0 <= score <= 100 else None
+
+    def _find_cycle_node_ids(self, nodes: dict[str, dict[str, Any]]) -> set[str]:
+        """
+        Return node IDs that participate in a directed cycle.
+        """
+        state = {}
+        stack = []
+        cycle_node_ids = set()
+
+        def visit(node_id: str) -> None:
+            state[node_id] = DFS_STATE_VISITING
+            stack.append(node_id)
+            node = nodes.get(node_id, {})
+            for choice in node.get("choices", []) or []:
+                target_node_id = choice.get("target_node_id")
+                if target_node_id not in nodes:
+                    continue
+                target_state = state.get(target_node_id, DFS_STATE_UNVISITED)
+                if target_state == DFS_STATE_UNVISITED:
+                    visit(target_node_id)
+                elif target_state == DFS_STATE_VISITING:
+                    if target_node_id in stack:
+                        cycle_start_index = stack.index(target_node_id)
+                        cycle_node_ids.update(stack[cycle_start_index:])
+            stack.pop()
+            state[node_id] = DFS_STATE_VISITED
+
+        for node_id in nodes:
+            if state.get(node_id, DFS_STATE_UNVISITED) == DFS_STATE_UNVISITED:
+                visit(node_id)
+
+        return cycle_node_ids
+
+    def _compute_max_attainable_score(
+        self,
+        nodes: dict[str, dict[str, Any]],
+        start_node_id: Optional[str],
+    ) -> int:
+        """
+        Compute the maximum total score over all reachable start-to-leaf paths.
+        """
+        if not start_node_id or start_node_id not in nodes:
+            return 0
+
+        # Phase 1: collect only nodes reachable from the start node.
+        # This intentionally ignores orphan/disconnected nodes so they do not
+        # affect the grade denominator.
+        reachable = set()
+        pending = deque([start_node_id])
+        while pending:
+            node_id = pending.popleft()
+            if node_id in reachable:
+                continue
+            reachable.add(node_id)
+            node = nodes.get(node_id, {})
+            for choice in node.get("choices", []) or []:
+                target_node_id = choice.get("target_node_id")
+                if target_node_id in nodes and target_node_id not in reachable:
+                    pending.append(target_node_id)
+
+        # Phase 2: compute indegree on the reachable subgraph only.
+        # We use indegree + queue to process nodes in topological order,
+        # which is valid because cycles are blocked by save-time validation.
+        indegree = {node_id: 0 for node_id in reachable}
+        for node_id in reachable:
+            node = nodes.get(node_id, {})
+            for choice in node.get("choices", []) or []:
+                target_node_id = choice.get("target_node_id")
+                if target_node_id in reachable:
+                    indegree[target_node_id] += 1
+
+        topo_queue = deque([node_id for node_id, degree in indegree.items() if degree == 0])
+        # best[node_id] stores the highest score found so far to reach node_id.
+        # We seed start at 0 and then relax outgoing edges.
+        best = {node_id: None for node_id in reachable}
+        best[start_node_id] = 0
+
+        while topo_queue:
+            node_id = topo_queue.popleft()
+            node_score = best[node_id]
+            node = nodes.get(node_id, {})
+
+            for choice in node.get("choices", []) or []:
+                target_node_id = choice.get("target_node_id")
+                if target_node_id not in reachable:
+                    continue
+
+                choice_score = choice.get("score", 0)
+                if node_score is not None:
+                    # Dynamic-programming relaxation:
+                    # if this path gives a higher total for target, keep it.
+                    candidate = node_score + choice_score
+                    prev_best = best[target_node_id]
+                    best[target_node_id] = candidate if prev_best is None else max(prev_best, candidate)
+
+                indegree[target_node_id] -= 1
+                if indegree[target_node_id] == 0:
+                    topo_queue.append(target_node_id)
+
+        # Phase 3: evaluate only leaf nodes (no outgoing reachable targets).
+        # Max attainable score is defined as best start->leaf path sum.
+        leaf_scores = []
+        for node_id in reachable:
+            node = nodes.get(node_id, {})
+            outgoing_targets = [
+                choice.get("target_node_id")
+                for choice in (node.get("choices", []) or [])
+                if choice.get("target_node_id") in reachable
+            ]
+            if not outgoing_targets and best[node_id] is not None:
+                leaf_scores.append(best[node_id])
+
+        # Defensive fallback: if no reachable leaf is detected, return the best
+        # finite score encountered (or 0). This keeps behavior predictable even
+        # for malformed graph edge-cases.
+        if not leaf_scores:
+            finite_scores = [score for score in best.values() if score is not None]
+            return max(finite_scores) if finite_scores else 0
+
+        return max(leaf_scores)
+
+    def _validate_grade_ranges(self, grade_ranges: Any) -> Optional[str]:
+        """
+        Validate contiguous grade range segments from 0 through 100.
+        """
+        if not isinstance(grade_ranges, list) or len(grade_ranges) < 2:
+            return "Grade ranges must contain at least two contiguous segments."
+
+        expected_start = 0
+        for index, grade_range in enumerate(grade_ranges):
+            if not isinstance(grade_range, dict):
+                return f"Grade range {index + 1} is invalid."
+
+            start = grade_range.get("start")
+            end = grade_range.get("end")
+            label = str(grade_range.get("label", "")).strip()
+
+            if label == "":
+                return f"Grade range {index + 1} label is required."
+            if not isinstance(start, int) or not isinstance(end, int):
+                return f"Grade range {index + 1} bounds must be integers."
+            if start < 0 or end > 100:
+                return f"Grade range {index + 1} bounds must be between 0 and 100."
+            if end < start:
+                return f"Grade range {index + 1} has invalid bounds."
+            if start != expected_start:
+                return f"Grade range {index + 1} must start at {expected_start}."
+
+            expected_start = end + 1
+
+        if grade_ranges[-1]["end"] != 100:
+            return "Final grade range must end at 100."
+        return None
+
+    def _build_grade_report(self) -> dict[str, Any]:
+        """
+        Compute learner-facing grade report data from current score state.
+        """
+        safe_ranges = self.grade_ranges
+
+        max_score = int(self.max_score or 0)
+        current_score = self._current_score()
+        percentage = 0.0
+        if max_score > 0.0:
+            percentage = (current_score / max_score) * 100.0
+        percentage = max(0.0, min(100.0, percentage))
+        rounded_percentage = int(round(percentage))
+
+        matched_index = 0
+        matched_range = safe_ranges[0]
+        for index, grade_range in enumerate(safe_ranges):
+            if grade_range["start"] <= rounded_percentage <= grade_range["end"]:
+                matched_index = index
+                matched_range = grade_range
+                break
+
+        detailed_scores = []
+        for entry in (self.choice_history or []):
+            choice_text = str(entry.get("choice_text", "")).strip()
+            if not choice_text:
+                continue
+            points = entry.get("awarded_points", 0)
+            if not isinstance(points, int):
+                points = 0
+            detailed_scores.append({
+                "choice_text": choice_text,
+                "awarded_points": points,
+            })
+
+        return {
+            "score": current_score,
+            "max_score": max_score,
+            "percentage": rounded_percentage,
+            "grade_label": matched_range.get("label", ""),
+            "is_pass_style": matched_index != 0,
+            "detailed_scores": detailed_scores,
+        }
+
+    def _current_score(self) -> int:
+        """
+        Compute the learner's accumulated score from score history.
+        """
+        return sum(self.score_history)
 
     def get_current_node(self) -> Optional[dict[str, Any]]:
         """
@@ -122,38 +525,104 @@ def get_current_node(self) -> Optional[dict[str, Any]]:
         """
         return self.get_node(self.current_node_id) if self.current_node_id else None
 
-    def is_end_node(self, node_id):
+    def is_end_node(self, node_id: str) -> bool:
         """
         Check if node is a leaf node.
         """
         node = self.get_node(node_id)
         return bool(node) and not node.get("choices")
 
-    def validate_scenario(self):
+    def validate_scenario(self, payload: dict[str, Any]) -> dict[str, Any]:
         """
-        Check for common configuration errors.
+        Validate studio payload and return structured validation results.
         """
-        errors = []
-        nodes = self.scenario_data.get("nodes", {})
+        validation_errors = {
+            "node_input_errors": {},
+            "settings_field_errors": {},
+            "global_errors": [],
+            "node_action_errors": {},
+        }
 
-        if not nodes:
-            errors.append("At least one node is required")
-            return errors
+        raw_nodes = payload.get('nodes', [])
+        deleted_node_ids = set(payload.get('deleted_node_ids', []))
+        background_image_url = (payload.get('background_image_url') or '').strip()
+        background_image_alt_text = (payload.get('background_image_alt_text') or '').strip()
+        background_image_is_decorative = bool(payload.get('background_image_is_decorative', False))
+        grade_ranges = payload.get('grade_ranges', self.grade_ranges)
+        grade_ranges_error = self._validate_grade_ranges(grade_ranges)
 
-        # Check start node exists
-        start_id = self.scenario_data.get("start_node_id")
-        if start_id not in nodes:
-            errors.append("Start node ID does not exist")
+        if background_image_url and not background_image_is_decorative and not background_image_alt_text:
+            validation_errors["settings_field_errors"]["background_image_alt_text"] = (
+                "Background image alt text is required unless the image is decorative."
+            )
+        if grade_ranges_error:
+            validation_errors["settings_field_errors"]["grade_ranges"] = grade_ranges_error
 
-        # Check all choice targets exist
-        for node in nodes.values():
-            for choice in node.get("choices", []):
-                if not self.get_node(choice["target_node_id"]):
-                    errors.append(f"Invalid target {choice['target_node_id']} in node {node['id']}")
+        id_map, staged = self._build_staged_nodes(raw_nodes)
+        staged_node_ids = {node["id"] for node in staged}
 
-        return errors
+        resolved_deleted_node_ids = {
+            id_map.get(node_id, node_id)
+            for node_id in deleted_node_ids
+        }
+        node_number_by_id = {
+            node['id']: index + 1
+            for index, node in enumerate(staged)
+        }
+
+        self._validate_references(
+            staged=staged,
+            id_map=id_map,
+            resolved_deleted_node_ids=resolved_deleted_node_ids,
+            node_number_by_id=node_number_by_id,
+            staged_node_ids=staged_node_ids,
+            validation_errors=validation_errors,
+        )
+        final = self._build_final_nodes(staged, resolved_deleted_node_ids, id_map, validation_errors)
 
-    def publish_grade(self):
+        if len(final) > 30:
+            self._add_global_error(validation_errors, "Too many nodes (max 30).")
+
+        if not final:
+            self._add_global_error(validation_errors, "At least one node is required")
+
+        client_id_by_node_id = {
+            node["id"]: node.get("client_id", node["id"])
+            for node in final
+        }
+
+        nodes_dict = {
+            node['id']: {
+                key: value
+                for key, value in node.items()
+                if key != "client_id"
+            }
+            for node in final
+        }
+
+        cycle_node_ids = self._find_cycle_node_ids(nodes_dict)
+        if cycle_node_ids:
+            sorted_cycle_ids = sorted(cycle_node_ids)
+            for node_id in sorted_cycle_ids:
+                client_node_id = client_id_by_node_id.get(node_id, node_id)
+                self._add_node_error(
+                    validation_errors,
+                    node_client_id=client_node_id,
+                    title="Circular path detected",
+                    detail="This node links back through branching choices. Remove one link in the loop.",
+                )
+
+        return {
+            "validation_errors": validation_errors,
+            "nodes_dict": nodes_dict,
+            "start_node_id": final[0]['id'] if final else None,
+            "background_image_url": background_image_url,
+            "background_image_alt_text": background_image_alt_text,
+            "background_image_is_decorative": background_image_is_decorative,
+            "grade_ranges": grade_ranges,
+        }
+
+    def publish_grade(self) -> None:
         """
         Send score to gradebook.
         """
@@ -161,17 +630,17 @@ def publish_grade(self):
             self.runtime.publish(
                 self,
                 "grade",
-                {"value": self.score, "max_value": self.max_score}
+                {"value": self._current_score(), "max_value": self.max_score}
             )
 
-    def resource_string(self, path):
+    def resource_string(self, path: str) -> str:
         """
         Retrieve string contents for the file path.
         """
         path = os.path.join('static', path)
         return resource_loader.load_unicode(path)
 
-    def student_view(self, context=None):
+    def student_view(self, context: Optional[dict[str, Any]] = None) -> Fragment:
         """
         Create primary view of the BranchingXBlock, shown to students when viewing courses.
         """
@@ -182,10 +651,11 @@ def student_view(self, context=None):
         frag.initialize_js('BranchingXBlock')
         return frag
 
-    def studio_view(self, context=None):
+    def studio_view(self, context: Optional[dict[str, Any]] = None) -> Fragment:
         """
         Studio editor view shown to course authors.
         """
+        self._normalize_scenario_nodes()
         html = self.resource_string("html/branching_xblock_edit.html")
         frag = Fragment(html)
 
@@ -193,7 +663,13 @@ def studio_view(self, context=None):
         frag.add_javascript_url(
             self.runtime.local_resource_url(self, 'public/js/vendor/handlebars.js')
         )
-        for tpl in ['settings-panel', 'node-block', 'choice-row']:
+        for tpl in [
+            'settings-step',
+            'nodes-step',
+            'node-list-item',
+            'node-editor',
+            'choice-row',
+        ]:
             html = resource_loader.load_unicode(f'static/handlebars/{tpl}.handlebars')
             frag.add_javascript(f"""
                 (function() {{
@@ -211,12 +687,12 @@ def studio_view(self, context=None):
             get_site_configuration_value("branching_xblock", "AUTHORING_HELP_HTML") or ""
         )
         init_data = {
-            "nodes": self.scenario_data.get("nodes", {}),
-            "start_node_id": self.scenario_data.get("start_node_id"),
+            "nodes":       self.scenario_data.get("nodes", []),
             "enable_undo": bool(self.enable_undo),
             "enable_scoring": bool(self.enable_scoring),
             "enable_reset_activity": bool(self.enable_reset_activity),
             "max_score":   self.max_score,
+            "grade_ranges": self.grade_ranges,
             "display_name": self.display_name,
             "authoring_help_html": authoring_help_html,
         }
@@ -224,30 +700,42 @@ def studio_view(self, context=None):
         frag.initialize_js('BranchingStudioEditor', init_data)
         return frag
 
-    def _get_state(self):
+    def _get_state(self) -> dict[str, Any]:
+        """
+        Build the learner-facing runtime state payload.
+        """
+        nodes = self.scenario_data.get("nodes", {})
+
         return {
-            "nodes":           self.scenario_data.get("nodes", {}),
+            "nodes":           nodes,
             "start_node_id":   self.scenario_data.get("start_node_id"),
             "enable_undo":     bool(self.enable_undo),
             "enable_scoring":  bool(self.enable_scoring),
             "enable_reset_activity": bool(self.enable_reset_activity),
+            "background_image_url": self.background_image_url,
+            "background_image_alt_text": self.background_image_alt_text,
+            "background_image_is_decorative": bool(self.background_image_is_decorative),
             "max_score":       self.max_score,
+            "grade_ranges":    self.grade_ranges,
             "display_name":    self.display_name,
             "current_node":    self.get_current_node(),
             "history":         list(self.history),
+            "score_history":   list(self.score_history),
+            "choice_history":  list(self.choice_history),
             "has_completed":   bool(self.has_completed),
-            "score":           self.score,
+            "score":           self._current_score(),
+            "grade_report":    self._build_grade_report(),
         }
 
     @XBlock.json_handler
-    def get_current_state(self, data, suffix=''):
+    def get_current_state(self, data: dict[str, Any], suffix: str = '') -> dict[str, Any]:
         """
         Fetch current state of the XBlock.
         """
         return self._get_state()
 
     @XBlock.json_handler
-    def select_choice(self, data, suffix=''):
+    def select_choice(self, data: dict[str, Any], suffix: str = '') -> dict[str, Any]:
         """
         Handle choice selection.
         """
@@ -264,20 +752,36 @@ def select_choice(self, data, suffix=''):
         target_node = self.get_node(target_node_id)
         if not target_node:
             return {"success": False, "error": f"Target node {target_node_id} not found"}
+
+        awarded_points = 0
+        if self.enable_scoring:
+            raw_score = choice.get("score", 0)
+            if raw_score is None or (isinstance(raw_score, str) and not raw_score.strip()):
+                awarded_points = 0
+            else:
+                awarded_points = self._parse_choice_score(raw_score)
+                if awarded_points is None:
+                    return {"success": False, "error": "Invalid choice score"}
+            self.score_history.append(awarded_points)
+            self.choice_history.append({
+                "source_node_id": self.current_node_id,
+                "choice_text": (choice.get("text") or "").strip(),
+                "awarded_points": awarded_points,
+            })
+
         if self.enable_undo:
             self.history.append(self.current_node_id)
         self.current_node_id = target_node_id
         if self.is_end_node(target_node_id):
             self.has_completed = True
             if self.enable_scoring:
-                self.score = self.max_score
                 self.publish_grade()
             self.runtime.publish(self, "completion", {"completion": 1.0})
 
         return {"success": True, **self._get_state()}
 
     @XBlock.json_handler
-    def undo_choice(self, data, suffix=''):
+    def undo_choice(self, data: dict[str, Any], suffix: str = '') -> dict[str, Any]:
         """
         Handle undo choice.
         """
@@ -287,15 +791,18 @@ def undo_choice(self, data, suffix=''):
         prev_node_id = self.history.pop()
         self.current_node_id = prev_node_id
 
-        if self.has_completed and self.enable_scoring:
-            self.score = 0.0
+        if self.enable_scoring:
+            if self.score_history:
+                self.score_history.pop()
+            if self.choice_history:
+                self.choice_history.pop()
             self.publish_grade()
 
         self.has_completed = False
         return {"success": True, **self._get_state()}
 
     @XBlock.json_handler
-    def reset_activity(self, data, suffix=''):
+    def reset_activity(self, data: dict[str, Any], suffix: str = '') -> dict[str, Any]:
         """
         Reset learner state to the start node.
         """
@@ -306,108 +813,321 @@ def reset_activity(self, data, suffix=''):
         self.history = []
         self.has_completed = False
 
+        self.score_history = []
+        self.choice_history = []
         if self.enable_scoring:
-            self.score = 0.0
             self.publish_grade()
 
         self.start_node()
         self.runtime.publish(self, "completion", {"completion": 0.0})
         return {"success": True, **self._get_state()}
 
-    @XBlock.json_handler
-    def studio_submit(self, data, suffix=''):
+    def _build_staged_nodes(
+        self,
+        raw_nodes: list[Any],
+    ) -> tuple[dict[str, str], list[dict[str, Any]]]:
         """
-        Handle studio editor save.
+        Assign stable IDs and normalize raw studio node payloads.
         """
-        payload = data
-        raw_nodes = payload.get('nodes', [])
-
-        # 1) Assign real IDs and build id_map
         id_map = {}
         staged = []
         for raw in raw_nodes:
-            old_id = raw.get('id', '')
-            # new ID if temp or missing
-            if old_id.startswith('temp-') or not old_id:
-                new_id = f"node-{uuid.uuid4().hex[:6]}"
-            else:
-                new_id = old_id
-            id_map[old_id] = new_id
-            # carry forward content & media, but keep raw choices for next step
+            if not isinstance(raw, dict):
+                continue
+            raw_old_id = raw.get('id')
+            old_id = raw_old_id.strip() if isinstance(raw_old_id, str) else ''
+            new_id = f"node-{uuid.uuid4().hex[:6]}" if old_id.startswith('temp-') or not old_id else old_id
+            if old_id:
+                id_map[old_id] = new_id
             staged.append({
                 'id': new_id,
+                'client_id': old_id or new_id,
                 'content': raw.get('content', ''),
                 'media': {
                     'type': raw.get('media', {}).get('type', ''),
-                    'url':  raw.get('media', {}).get('url', '')
+                    'url': raw.get('media', {}).get('url', ''),
                 },
-                'choices': raw.get('choices', []),
-                'hint':     raw.get('hint', ''),
+                'left_image_url': raw.get('left_image_url', ''),
+                'right_image_url': raw.get('right_image_url', ''),
+                'choices': raw.get('choices', []) if isinstance(raw.get('choices'), list) else [],
+                'hint': raw.get('hint', ''),
+                'overlay_text': bool(raw.get('overlay_text', False)),
                 'transcript_url': raw.get('transcript_url', ''),
             })
+        return id_map, staged
+
+    def _has_validation_errors(self, validation_errors: dict[str, Any]) -> bool:
+        """Return True when any validation bucket contains an error."""
+        return any(bool(value) for value in validation_errors.values())
+
+    def _add_global_error(self, validation_errors: dict[str, Any], message: str) -> None:
+        errors = validation_errors["global_errors"]
+        if message not in errors:
+            errors.append(message)
+
+    def _add_node_field_error(
+        self,
+        validation_errors: dict[str, Any],
+        *,
+        node_client_id: str,
+        field_name: str,
+        message: str,
+    ) -> None:
+        """Attach field-level validation error to a node."""
+        node_errors = validation_errors["node_input_errors"].setdefault(node_client_id, {})
+        if field_name not in node_errors:
+            node_errors[field_name] = message
+
+    def _add_node_indexed_error(
+        self,
+        validation_errors: dict[str, Any],
+        *,
+        node_client_id: str,
+        field_name: str,
+        index: int,
+        message: str,
+    ) -> None:
+        """Attach a per-index validation error (for repeated node fields like choices)."""
+        node_errors = validation_errors["node_input_errors"].setdefault(node_client_id, {})
+        indexed_errors = node_errors.setdefault(field_name, {})
+        key = str(index)
+        if key not in indexed_errors:
+            indexed_errors[key] = message
+
+    def _add_node_error(
+        self,
+        validation_errors: dict[str, Any],
+        *,
+        node_client_id: str,
+        title: str,
+        detail: str,
+    ) -> None:
+        """Attach a node-level action error shown as a title/detail callout."""
+        node_errors = validation_errors["node_action_errors"]
+        if node_client_id not in node_errors:
+            node_errors[node_client_id] = {"title": title, "detail": detail}
+
+    def _error_response(self, validation_errors: dict[str, Any]) -> dict[str, Any]:
+        """Build a structured validation error response for studio save."""
+        field_errors = {
+            key: value
+            for key, value in validation_errors.items()
+            if value
+        }
+        return {
+            "result": "error",
+            "message": "Validation errors",
+            "field_errors": field_errors,
+        }
+
+    def _validate_references(
+        self,
+        *,
+        staged: list[dict[str, Any]],
+        id_map: dict[str, str],
+        resolved_deleted_node_ids: set[str],
+        node_number_by_id: dict[str, int],
+        staged_node_ids: set[str],
+        validation_errors: dict[str, Any],
+    ) -> None:
+        """
+        Validate references to deleted/missing nodes and missing destinations.
+        """
+        client_id_by_id = {
+            node["id"]: node.get("client_id", node["id"])
+            for node in staged
+        }
+        for node in staged:
+            if node['id'] in resolved_deleted_node_ids:
+                continue
+            node_client_id = node.get("client_id", node["id"])
+            source_node_number = node_number_by_id.get(node['id'])
+            for choice_index, raw_choice in enumerate(node['choices']):
+                if not isinstance(raw_choice, dict):
+                    continue
+                choice_text = (raw_choice.get('text') or '').strip()
+                raw_target = (raw_choice.get('target_node_id') or '').strip()
+                if choice_text and not raw_target:
+                    self._add_node_indexed_error(
+                        validation_errors,
+                        node_client_id=node_client_id,
+                        field_name="choiceDestinationByIndex",
+                        index=choice_index,
+                        message="Required field",
+                    )
+                    continue
+                if not raw_target:
+                    continue
 
-        # 2) Remap choice targets & clean arrays
+                target_node_id = id_map.get(raw_target, raw_target)
+                target_node_client_id = client_id_by_id.get(target_node_id, target_node_id)
+
+                if target_node_id not in staged_node_ids:
+                    self._add_node_indexed_error(
+                        validation_errors,
+                        node_client_id=node_client_id,
+                        field_name="choiceDestinationByIndex",
+                        index=choice_index,
+                        message="Selected destination is invalid.",
+                    )
+                    continue
+
+                if target_node_id not in resolved_deleted_node_ids:
+                    continue
+
+                target_node_number = node_number_by_id.get(target_node_id)
+                if source_node_number and target_node_number:
+                    detail_message = (
+                        f"Node {target_node_number} is referenced by Node {source_node_number}."
+                    )
+                else:
+                    detail_message = "This node is still referenced by another node in this scenario."
+
+                self._add_node_indexed_error(
+                    validation_errors,
+                    node_client_id=node_client_id,
+                    field_name="choiceDestinationByIndex",
+                    index=choice_index,
+                    message="Selected destination is pending deletion.",
+                )
+                self._add_node_error(
+                    validation_errors,
+                    node_client_id=target_node_client_id,
+                    title="You can't delete this node",
+                    detail=detail_message,
+                )
+
+    def _build_final_nodes(
+        self,
+        staged: list[dict[str, Any]],
+        resolved_deleted_node_ids: set[str],
+        id_map: dict[str, str],
+        validation_errors: dict[str, Any],
+    ) -> list[dict[str, Any]]:
+        """
+        Remap targets, drop blank nodes, and validate per-node fields.
+        """
         final = []
         for node in staged:
-            # filter out completely blank nodes
+            if node['id'] in resolved_deleted_node_ids:
+                continue
+
+            node_client_id = node.get("client_id", node["id"])
             has_content = bool(node['content'].strip())
-            has_media = bool(node['media']['url'].strip())
+            has_media = bool(
+                (node['media']['url'] or '').strip()
+                or (node.get('left_image_url', '') or '').strip()
+                or (node.get('right_image_url', '') or '').strip()
+            )
             has_choices = any(
-                (c.get('text', '').strip() or c.get('target_node_id', '').strip())
-                for c in node['choices']
+                (
+                    isinstance(choice, dict)
+                    and (choice.get('text', '').strip() or choice.get('target_node_id', '').strip())
+                )
+                for choice in node['choices']
             )
             if not (has_content or has_media or has_choices):
                 continue
 
-            # remap and clean
-            cleaned = []
-            for raw in node['choices']:
-                text = raw.get('text', '').strip()
-                targ = raw.get('target_node_id', '').strip()
-                # map through id_map if it was a temp ID
-                real_target = id_map.get(targ, targ)
-                if text or real_target:
-                    cleaned.append({
-                        'text': text,
-                        'target_node_id': real_target
-                    })
+            left_image_url = (node.get('left_image_url', '') or '').strip()
+            right_image_url = (node.get('right_image_url', '') or '').strip()
+            if node.get("media", {}).get("type") == "image" and not left_image_url and not right_image_url:
+                self._add_node_field_error(
+                    validation_errors,
+                    node_client_id=node_client_id,
+                    field_name="left_image_url",
+                    message="Please enter a valid URL",
+                )
+
+            cleaned_choices = []
+            for choice_index, raw_choice in enumerate(node['choices']):
+                if not isinstance(raw_choice, dict):
+                    self._add_node_indexed_error(
+                        validation_errors,
+                        node_client_id=node_client_id,
+                        field_name="choiceScoreByIndex",
+                        index=choice_index,
+                        message="Score must be an integer between 0 and 100.",
+                    )
+                    continue
+                text = raw_choice.get('text', '').strip()
+                target_node_id = raw_choice.get('target_node_id', '').strip()
+                if not (text or target_node_id):
+                    continue
+
+                raw_score = raw_choice.get('score', 0)
+                if raw_score is None or (isinstance(raw_score, str) and raw_score.strip() == ''):
+                    score = 0
+                else:
+                    score = self._parse_choice_score(raw_score)
+                if score is None:
+                    self._add_node_indexed_error(
+                        validation_errors,
+                        node_client_id=node_client_id,
+                        field_name="choiceScoreByIndex",
+                        index=choice_index,
+                        message="Score must be an integer between 0 and 100.",
+                    )
+                    continue
+                cleaned_choices.append({
+                    'text': text,
+                    'target_node_id': id_map.get(target_node_id, target_node_id),
+                    'score': score,
+                })
 
             final.append({
-                'id':       node['id'],
-                'type':     'start' if not final else 'normal',
-                'content':  node['content'],
-                'media':    node['media'],
-                'choices':  cleaned,
+                'id': node['id'],
+                'client_id': node_client_id,
+                'type': 'start' if not final else 'normal',
+                'content': node['content'],
+                'media': node['media'],
+                'choices': cleaned_choices,
                 'hint': node.get('hint', ''),
+                'overlay_text': bool(node.get('overlay_text', False)),
+                'left_image_url': left_image_url,
+                'right_image_url': right_image_url,
                 'transcript_url': node.get('transcript_url', ''),
             })
+        return final
+
+    @XBlock.json_handler
+    def studio_submit(self, data: dict[str, Any], suffix: str = '') -> dict[str, Any]:
+        """
+        Handle studio editor save.
+        """
+        payload = data
+        validation_result = self.validate_scenario(payload)
+        validation_errors = validation_result["validation_errors"]
+        nodes_dict = validation_result["nodes_dict"]
+        start_node_id = validation_result["start_node_id"]
+
+        if self._has_validation_errors(validation_errors):
+            return self._error_response(validation_errors)
 
         # 3) Persist scenario_data & settings
-        nodes_dict = {node['id']: node for node in final}
         self.scenario_data = {
             'nodes': nodes_dict,
-            'start_node_id': final[0]['id'] if final else None
+            'start_node_id': start_node_id,
         }
+        self._normalized_nodes_ref = nodes_dict
         self.enable_undo = bool(payload.get('enable_undo', self.enable_undo))
         self.enable_scoring = bool(payload.get('enable_scoring', self.enable_scoring))
         self.enable_reset_activity = bool(payload.get('enable_reset_activity', self.enable_reset_activity))
-        self.max_score = float(payload.get('max_score', self.max_score))
+        self.max_score = self._compute_max_attainable_score(
+            nodes_dict,
+            start_node_id,
+        )
         self.display_name = payload.get('display_name', self.display_name)
+        self.background_image_url = validation_result["background_image_url"]
+        self.background_image_alt_text = validation_result["background_image_alt_text"]
+        self.background_image_is_decorative = validation_result["background_image_is_decorative"]
+        self.grade_ranges = validation_result["grade_ranges"]
 
-        # 4) Validate & respond
-        errors = self.validate_scenario()
-        if errors:
-            return {
-                "result": "error",
-                "message": "Validation errors",
-                "field_errors": {"nodes_json": errors}
-            }
         return {"result": "success"}
 
     # TO-DO: change this to create the scenarios you'd like to see in the
     # workbench while developing your XBlock.
-    @staticmethod
-    def workbench_scenarios():
+    def workbench_scenarios(self) -> list[tuple[str, str]]:
         """
         Create canned scenario for display in the workbench.
         """
diff --git a/branching_xblock/static/css/branching_xblock.css b/branching_xblock/static/css/branching_xblock.css
index b7bc2c9..3fb5bf2 100644
--- a/branching_xblock/static/css/branching_xblock.css
+++ b/branching_xblock/static/css/branching_xblock.css
@@ -26,6 +26,116 @@
     align-self: center;
 }
 
+.branching-scenario .bx-image-composite {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    padding: 0.75rem;
+    box-sizing: border-box;
+}
+
+.branching-scenario .bx-image-composite__bg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    z-index: 0;
+}
+
+.branching-scenario .bx-image-composite--bg-only {
+    padding: 0;
+    aspect-ratio: 16 / 9;
+}
+
+.branching-scenario .bx-image-composite__fg {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.75rem;
+    align-items: center;
+}
+
+.branching-scenario .bx-image-composite__img {
+    width: 100%;
+    height: auto;
+    display: block;
+    object-fit: cover;
+    border-radius: 0.5rem;
+}
+
+.branching-scenario .bx-image-composite__overlay {
+    position: absolute;
+    z-index: 1;
+    left: 50%;
+    bottom: 1.25rem;
+    transform: translateX(-50%);
+    width: calc(100% - 3rem);
+    max-width: 90%;
+}
+
+@media (max-width: 768px) {
+    .branching-scenario .bx-image-composite__fg {
+        grid-template-columns: 1fr;
+    }
+
+    .branching-scenario .bx-image-composite__overlay {
+        position: static;
+        transform: none;
+        width: 100%;
+        max-width: 100%;
+        margin-top: 0.75rem;
+    }
+}
+
+.branching-scenario .media-overlay {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    display: inline-block;
+}
+
+.branching-scenario .media-overlay img {
+    width: 100%;
+    height: auto;
+    display: block;
+    object-fit: cover;
+    border-radius: 0.5rem;
+}
+
+.branching-scenario .media-overlay__text {
+    position: absolute;
+    left: 50%;
+    bottom: 1.25rem;
+    transform: translateX(-50%);
+    width: calc(100% - 3rem);
+    max-width: 90%;
+    background: rgba(8, 36, 73, 0.85);
+    color: #fff;
+    padding: 1rem 1.5rem;
+    border-radius: 0.5rem;
+    font-size: 1.05rem;
+    line-height: 1.5;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+}
+
+.branching-scenario .media-overlay__text p {
+    margin: 0;
+}
+
+@media (max-width: 768px) {
+    .branching-scenario .media-overlay__text {
+        position: static;
+        transform: none;
+        width: 100%;
+        margin-top: 0.75rem;
+    }
+}
+
 .branching-scenario .node-media img,
 .branching-scenario .node-media video,
 .branching-scenario .node-media iframe {
@@ -138,60 +248,122 @@
 
 
 .branching-scenario .choices {
+    padding: 1.5em 1em;
+}
+
+.branching-scenario .choices-heading {
+    font-size: 1.15rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+    color: #1f2a37;
+}
+
+.branching-scenario .choices-form {
     display: flex;
-    flex-wrap: wrap;
-    gap: 0.75em;
-    padding: 1em;
-    justify-content: flex-start;
+    flex-direction: column;
+    gap: 1rem;
 }
 
-/* inline mode keeps the natural width */
-.branching-scenario .choices-inline {
-    flex-wrap: wrap;
+.branching-scenario .choices-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.branching-scenario .choice-option {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    border: 1px solid #d6d6d6;
+    border-radius: 8px;
+    padding: 0.9rem 1rem;
+    background-color: #fff;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+    cursor: pointer;
+}
+
+.branching-scenario .choice-option:hover,
+.branching-scenario .choice-option:focus-within {
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.branching-scenario .choice-option.is-selected {
+    border-color: #0f62a1;
+    box-shadow: 0 0 0 2px rgba(15, 98, 161, 0.25);
+    background-color: #f0f7ff;
+}
+
+.branching-scenario .choice-option__input {
+    margin-top: 0.2rem;
+    width: 1.1rem;
+    height: 1.1rem;
+}
+
+.branching-scenario .choice-option__text {
+    flex: 1;
+    font-size: 1rem;
+    color: #1f2a37;
+}
+
+.branching-scenario .choice-actions {
+    display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.branching-scenario .choice-actions__secondary,
+.branching-scenario .choice-actions__primary {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+}
+
+.branching-scenario .choice-actions__primary {
+    margin-left: auto;
+    justify-content: flex-end;
 }
 
-.branching-scenario .choices .choice-button {
+.choice-submit-button {
+    border: none;
+    background-color: #0f62a1;
     color: #fff;
-    border: 1px solid #0e6aa6;
     border-radius: 6px;
-    padding: 0.65em 1.4em;
-    font-size: 1rem;
-    font-weight: 400;
+    padding: 11px 24px;
+    font-size: 16px;
+    font-weight: 600;
     cursor: pointer;
-    background-color: #0075b4;
-    background-image: none !important;
-    box-shadow: none !important;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 0.35em;
-    line-height: 1.3;
-    white-space: normal;
-    text-align: center;
-    min-width: 6rem;
-    max-width: 100%;
-    flex: 0 1 18rem;
+    transition: background-color 0.2s ease;
 }
 
-.branching-scenario .choices-inline .choice-button {
-    flex: 0 0 auto;
+.choice-submit-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
 }
 
-.branching-scenario .choices .choice-button:hover,
-.branching-scenario .choices .choice-button:focus {
-    background-color: #005f94;
-    border-color: #0a5278;
-    text-decoration: none;
+.choice-submit-button:not(:disabled):hover,
+.choice-submit-button:not(:disabled):focus {
+    background-color: #0c4f83;
 }
 
-.branching-scenario .action-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
+.show-report-button {
+    border: none;
+    background-color: #0f62a1;
+    color: #fff;
+    border-radius: 6px;
+    padding: 0.7rem 1.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.show-report-button:hover,
+.show-report-button:focus {
+    background-color: #0c4f83;
 }
 
 .undo-button {
@@ -204,14 +376,19 @@
     color: #1f2a37;
 }
 
+.undo-button.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
 .reset-button {
-    border: 1px solid #c2410c;
+    border: 1px solid #9a3412;
     border-radius: 4px;
     padding: 0.6em 1.2em;
     font-size: 1em;
     cursor: pointer;
-    background: transparent;
-    color: #c2410c;
+    background: #ffffff;
+    color: #9a3412;
 }
 
 .reset-button:hover,
@@ -222,7 +399,7 @@
 }
 
 .reset-button:focus-visible {
-    outline: 2px solid #ea580c;
+    outline: 2px solid #9a3412;
     outline-offset: 2px;
 }
 
@@ -230,3 +407,343 @@
     padding: 1em 1em;
     font-size: small;
 }
+
+.grade-report {
+    margin: 1.5rem auto;
+    max-width: 1082px;
+    border-radius: 6px;
+    background: #001731;
+    color: #ffffff;
+    padding: 2rem;
+}
+
+.grade-report__title {
+    margin: 0 0 0.25rem;
+    font-size: 1.375rem;
+    line-height: 1.27;
+    font-weight: 700;
+    color: #ffffff;
+}
+
+.grade-report__subtitle {
+    margin: 0 0 1.5rem;
+    color: #ffffff;
+    font-size: 0.875rem;
+    line-height: 1.7;
+}
+
+.grade-report__summary-card {
+    background: #ffffff;
+    border-radius: 14px;
+    padding: 1.75rem 1.9rem 1.65rem;
+    margin-bottom: 1.85rem;
+}
+
+.grade-report__section-title {
+    margin: 0 0 1.2rem;
+    font-size: 1.375rem;
+    line-height: 1.27;
+    font-weight: 700;
+    color: #3b3a3a;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.7rem;
+}
+
+.grade-report__section-icon {
+    width: 38px;
+    height: 38px;
+    border-radius: 999px;
+    background: #d6e1df;
+    color: #3f4346;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.grade-report__section-icon .fa {
+    width: 22px;
+    height: 22px;
+    font-size: 22px;
+    line-height: 1;
+}
+
+.grade-report__summary {
+    display: grid;
+    grid-template-columns: 1fr 1fr 260px;
+    gap: 1.6rem;
+    align-items: center;
+    min-height: 0;
+}
+
+.grade-report__metric {
+    background: #ffffff;
+    color: #1f2a37;
+    border-radius: 12px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.15);
+    padding: 1.35rem 1.5rem;
+    min-height: 148px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.grade-report__metric--score {
+    --report-score-color: #15803d;
+    background: #f2faf7;
+}
+
+.grade-report__metric--max {
+    background: #f2f1f1;
+}
+
+.grade-report__metric-label {
+    font-size: 0.875rem;
+    line-height: 1.35;
+    color: #454545;
+    margin-bottom: 0.65rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+}
+
+.grade-report__metric-label-icon {
+    width: 0.95rem;
+    height: 0.95rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #7a7a7a;
+}
+
+.grade-report__metric-label-icon .fa {
+    font-size: 0.95rem;
+    line-height: 1;
+}
+
+.grade-report__metric-value {
+    font-size: 3.125rem;
+    line-height: 1.1;
+    font-weight: 700;
+}
+
+.grade-report__metric--score .grade-report__metric-value {
+    color: var(--report-score-color);
+}
+
+.grade-report__metric--score.is-fail {
+    --report-score-color: #b91c1c;
+    background: #fcf1f4;
+}
+
+.grade-report__metric--score .grade-report__metric-label-icon {
+    color: var(--report-score-color);
+}
+
+.grade-report__metric--max .grade-report__metric-value {
+    color: #4b5563;
+}
+
+.grade-report__percent {
+    --report-percent-color: #15803d;
+    width: 210px;
+    height: 210px;
+    border-radius: 999px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--report-percent-color);
+    border: none;
+}
+
+.grade-report__percent.is-fail {
+    --report-percent-color: #b91c1c;
+}
+
+.grade-report__percent-ring {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+}
+
+.grade-report__percent-track,
+.grade-report__percent-progress {
+    fill: none;
+    stroke-width: 7;
+}
+
+.grade-report__percent-track {
+    stroke: #d6ddde;
+}
+
+.grade-report__percent-progress {
+    stroke: var(--report-percent-color);
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.2s ease;
+}
+
+.grade-report__percent-content {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.grade-report__percent-value {
+    font-size: 3.75rem;
+    line-height: 1;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+}
+
+.grade-report__percent-label {
+    font-size: 0.875rem;
+    line-height: 1.35;
+    margin-top: 0.35rem;
+    color: #3f3d3d;
+}
+
+.grade-report__details {
+    background: #ffffff;
+    color: #1f2a37;
+    border-radius: 14px;
+    padding: 1.4rem 1.2rem 1.15rem;
+    margin-bottom: 1.6rem;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.15);
+}
+
+.grade-report__details-title {
+    margin: 0 0 1.1rem;
+    font-size: 1.375rem;
+    line-height: 1.27;
+    font-weight: 700;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.7rem;
+}
+
+.grade-report__details-header,
+.grade-report__details-row {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 1rem;
+    align-items: start;
+}
+
+.grade-report__details-header {
+    font-size: 0.875rem;
+    line-height: 1.35;
+    color: #000000;
+    font-weight: 700;
+    padding: 0.45rem 1rem;
+    background: #f2f0ef;
+    border-bottom: none;
+    border-radius: 2px;
+}
+
+.grade-report__details-row {
+    font-size: 0.875rem;
+    line-height: 1.7;
+    padding: 0.62rem 1rem;
+    border-bottom: 1px solid #f2f0ef;
+}
+
+.grade-report__details-row:last-child {
+    border-bottom: none;
+}
+
+.grade-report__details-score {
+    font-weight: 500;
+    font-size: 0.75rem;
+    line-height: 1.67;
+    background: #e1dddb;
+    color: #000000;
+    border-radius: 6px;
+    min-width: 54px;
+    text-align: center;
+    padding: 0.15rem 0.7rem;
+}
+
+.grade-report__details-row--empty {
+    display: block;
+    color: #6b7280;
+}
+
+.grade-report [data-role="reset-activity-report"] {
+    margin-top: 0.35rem;
+}
+
+@media (max-width: 600px) {
+    .branching-scenario .choice-actions {
+        flex-direction: column-reverse;
+        align-items: stretch;
+    }
+
+    .branching-scenario .choice-actions__secondary,
+    .branching-scenario .choice-actions__primary {
+        width: 100%;
+        margin-left: 0;
+    }
+
+    .undo-button,
+    .reset-button,
+    .choice-submit-button,
+    .show-report-button {
+        width: 100%;
+        text-align: center;
+    }
+
+    .grade-report__summary {
+        grid-template-columns: 1fr;
+    }
+
+    .grade-report__percent {
+        width: 150px;
+        height: 150px;
+        margin: 0 auto;
+    }
+
+    .grade-report {
+        padding: 1.1rem;
+    }
+
+    .grade-report__metric-value {
+        font-size: 2.3rem;
+    }
+
+    .grade-report__percent-value {
+        font-size: 2.5rem;
+    }
+
+    .grade-report__title {
+        font-size: 1.8rem;
+    }
+
+    .grade-report__subtitle {
+        font-size: 0.95rem;
+    }
+
+    .grade-report__section-title,
+    .grade-report__details-title {
+        font-size: 1.2rem;
+    }
+
+    .grade-report__metric-label,
+    .grade-report__details-header,
+    .grade-report__details-row {
+        font-size: 1rem;
+    }
+
+    .grade-report__details-score {
+        font-size: 0.85rem;
+        min-width: 36px;
+    }
+
+    .grade-report__percent-label {
+        font-size: 1.1rem;
+    }
+
+}
diff --git a/branching_xblock/static/css/studio_editor.css b/branching_xblock/static/css/studio_editor.css
index c907de3..98c00c7 100644
--- a/branching_xblock/static/css/studio_editor.css
+++ b/branching_xblock/static/css/studio_editor.css
@@ -1,241 +1,649 @@
-.wrapper-comp-settings {
-    max-height: calc(100vh - 160px);
-    overflow-y: auto;
-    background: #fff;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    padding: 1em;
+.branching-editor-step[hidden] {
+    display: none !important;
 }
 
-.xblock-actions {
-    display: flex;
-    justify-content: space-between;
-    padding: 0.75em 1em;
-    border-top: 1px solid #e0e0e0;
+.xblock-actions [hidden] {
+    display: none !important;
+}
+
+.is-hidden {
+    display: none !important;
+}
+
+.bx-wizard {
+    width: 100%;
+    max-width: none;
+    padding: 5rem;
+}
+
+.bx-step-title {
+    margin: 0 0 12px;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 1.2;
+    color: #1f2933;
+}
+
+.bx-settings-step .bx-step-title {
+    margin-bottom: 12px;
+    font-size: 19px;
+}
+
+.bx-settings-step .bx-section-title {
+    margin: 12px 0;
+    font-size: 19px;
+    font-weight: 600;
+    line-height: 1.2;
+    color: #1f2933;
+    padding-top: 15px;
+}
+
+.bx-section-title {
+    margin: 18px 0 10px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.3;
+    color: #1f2933;
+}
+
+.bx-help {
+    margin: 0 0 12px;
+    font-size: 14px;
+    line-height: 1.4;
+    color: #5b6570;
+}
+
+.bx-field {
+    display: block;
+    margin-bottom: 12px;
+}
+
+.bx-field__label {
+    margin-bottom: 4px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.3;
+    color: #303842;
+}
+
+.branching-editor-step .bx-input,
+.branching-editor-step .bx-select,
+.branching-editor-step .bx-textarea {
+    width: 100%;
+    max-width: 700px;
+    min-height: 40px;
+    border: 1px solid #c8cdd3;
+    border-radius: 0;
     background: #fff;
-    position: sticky;
-    bottom: 0;
-    z-index: 1;
-    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
+    box-sizing: border-box;
+    padding: 8px 10px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.3;
+    color: #1f2933;
 }
 
-.xblock-actions .action-item {
-    margin: 0 0.25em;
+.branching-editor-step .bx-input.is-error,
+.branching-editor-step .bx-select.is-error,
+.choice-row .choice-target.is-error {
+    border-color: #d23228;
+    box-shadow: inset 0 0 0 1px #d23228;
 }
 
-.settings {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75em;
-    margin-bottom: 1.5em;
+.bx-field-error,
+.choice-field-error {
+    margin-top: 4px;
+    font-size: 11px;
+    line-height: 1.2;
+    color: #d23228;
 }
 
-.settings label {
-    font-size: 1em;
-    font-weight: bold;
+.branching-editor-step .bx-textarea {
+    max-width: 700px;
+    min-height: 112px;
+    resize: vertical;
 }
 
-.settings .display-name-row {
+.bx-checkbox {
     display: flex;
     align-items: center;
-    gap: 0.75em;
-    font-size: 1em;
-    font-weight: 600;
+    gap: 8px;
+    margin: 10px 0;
 }
 
-.settings .display-name-row input[name="display_name"] {
-    min-width: 220px;
+.bx-checkbox input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    margin: 0;
 }
 
-.bx-authoring-help {
-    border: 1px solid #d0d0d0;
-    border-radius: 4px;
+.branching-editor-step .bx-checkbox span {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.3;
+    color: #303842;
+}
+
+.bx-checkbox--nested {
+    margin: 2px 0 8px;
+}
+
+.bx-grade-range {
+    margin: 14px 0 18px;
+    max-width: 700px;
+    border: 1px solid #d8dde3;
     background: #f8f9fa;
-    padding: 1em;
-    align-self: flex-start;
+    padding: 10px 12px 12px;
+    border-radius: 4px;
+}
+
+.bx-grade-range__title {
+    margin: 0 0 4px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.3;
+    color: #303842;
+}
+
+.bx-settings-step .bx-grade-range__title {
+    padding-top: 0;
+    margin-top: 0;
+}
+
+.bx-grade-range__help {
+    margin: 0 0 6px;
+    font-size: 12px;
+    line-height: 1.35;
+    color: #5b6570;
+}
+
+.bx-grade-range__track-wrap {
     width: 100%;
-    max-width: 800px;
-    box-sizing: content-box;
 }
 
-.bx-authoring-help summary {
+.bx-grade-range__track {
+    position: relative;
+    height: 36px;
+    border: 1px solid #a9b4bf;
+    border-radius: 2px;
+    overflow: hidden;
+    background: #fff;
+    margin-top: 6px;
+}
+
+.bx-grade-range__segment {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    box-sizing: border-box;
     display: flex;
-    align-items: center;
-    gap: 0.5em;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-end;
+    padding-right: 10px;
+    gap: 2px;
+    overflow: hidden;
+}
+
+.bx-grade-range__segment--fail {
+    background: #f4c7c3;
+}
+
+.bx-grade-range__segment--pass {
+    background: #c3da8a;
+}
+
+.bx-grade-range__segment-label {
+    font-size: 10px;
     font-weight: 600;
-    cursor: pointer;
-    user-select: none;
-    padding: 0.25em 0;
-    color: #1d4ed8;
+    line-height: 1;
+    color: #3f4750;
 }
 
-.bx-authoring-help summary::-webkit-details-marker {
-    display: none;
+.bx-grade-range__segment-range {
+    font-size: 9px;
+    font-weight: 500;
+    line-height: 1;
+    color: #4e5965;
 }
 
-.bx-authoring-help summary::after {
-    content: "▾";
-    margin-left: auto;
-    transform: rotate(0deg);
-    transition: transform 150ms ease-in-out;
+.bx-grade-range__ticks {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 8px;
 }
 
-.bx-authoring-help[open] summary::after {
-    transform: rotate(180deg);
+.bx-grade-range__tick {
+    font-size: 10px;
+    line-height: 1;
+    color: #7a8591;
 }
 
-.bx-authoring-help summary:hover {
-    color: #1d4ed8;
+.bx-grade-range__handle {
+    position: absolute;
+    top: 50%;
+    width: 1px;
+    height: 36px;
+    transform: translate(-50%, -50%);
+    border: 0;
+    border-radius: 0;
+    background: #5d6671;
+    cursor: ew-resize;
+    padding: 0;
+    z-index: 2;
+    box-shadow: none;
 }
 
-.bx-authoring-help summary:focus-visible {
-    outline: 2px solid #1d4ed8;
-    outline-offset: 2px;
+.bx-grade-range__handle:focus-visible {
+    outline: 2px solid #0a6fb5;
+    outline-offset: 1px;
 }
 
-.bx-authoring-help-body {
-    margin-top: 0.5em;
-    font-style: normal;
+.bx-nodes-step {
+    display: flex;
+    gap: 14px;
+    min-height: 520px;
 }
 
-.node-block {
-    max-width: 800px;
-    background: #f9f9f9;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    padding: 1em;
-    margin-bottom: 1em;
+.bx-nodes-sidebar {
+    width: 240px;
+    flex: none;
+    border-right: 1px solid #e5e7eb;
+    padding-right: 14px;
 }
 
-.node-block label {
-    display: block;
-    margin-bottom: 1em;
+.bx-node-limit {
+    margin: 8px 0 12px;
+    font-size: 13px;
+    color: #6b7280;
 }
 
-.node-header .btn-delete-node {
-    background-color: #dc3545;
-    color: #fff;
-    border: none;
-    border-radius: 4px;
-    padding: 0.4em 0.8em;
-    font-size: 0.9em;
-    cursor: pointer;
+.bx-node-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
 }
 
-.node-header {
+.bx-node-list-item {
     display: flex;
+    align-items: center;
     justify-content: space-between;
+    min-height: 40px;
+    padding: 0 10px;
+    border: 1px solid transparent;
+    border-radius: 0;
+}
+
+.bx-node-list-item.is-selected {
+    background: #f3f4f6;
+    border-color: #f3f4f6;
+}
+
+.bx-node-list-item.is-pending-delete {
+    background: #f9fafb;
+    border-color: #e5e7eb;
+}
+
+.bx-node-list-item.is-pending-delete .bx-node-list-item__select {
+    color: #6b7280;
+    text-decoration: line-through;
+}
+
+.bx-node-list-item__select {
+    flex: 1;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    text-align: left;
+    cursor: pointer;
+    font-size: 13px;
+    line-height: 1.3;
+    color: #1f2933;
+}
+
+.bx-node-list-item__meta {
+    font-size: 11px;
+    color: #d23228;
+}
+
+.bx-node-list-item__error {
+    display: inline-flex;
     align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    margin-right: 6px;
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 1;
+    color: #fff;
+    background: #dc3545;
 }
 
-.node-block .node-content {
-    width: 100%;
-    min-height: 8em;
-    padding: 0.5em;
-    box-sizing: border-box;
-    resize: vertical;
+.bx-node-list-item__delete {
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1;
+    color: #6b7280;
+    opacity: 0.9;
 }
 
-.node-block .media-type {
-    display: inline-block;
-    width: auto;
-    max-width: 200px;
-    margin-top: 0.25em;
+.bx-node-list-item__delete .fa {
+    font-size: 14px;
+    line-height: 1;
 }
 
-.node-block .media-url {
-    display: block;
-    margin-top: 0.5em;
-    width: 100%;
-    box-sizing: border-box;
+.bx-node-list-item__delete:hover {
+    opacity: 1;
 }
 
-.node-block .transcript-field {
-    margin-top: 0.5em;
+.bx-node-list-item__delete.is-restore {
+    color: #303842;
 }
 
-.node-block .transcript-label {
+.bx-node-editor-header {
     display: flex;
-    flex-direction: column;
-    gap: 0.35em;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
 }
 
-.node-block .transcript-url {
-    width: 100%;
-    box-sizing: border-box;
+.bx-node-editor-header .bx-step-title {
+    margin-bottom: 0;
 }
 
-.choices-container {
-    margin-top: 1em;
+.bx-node-error-banner {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    margin: 0 0 12px;
+    padding: 10px 12px;
+    border: 1px solid #f5c2c7;
+    border-radius: 4px;
+    background: #f8d7da;
+    color: #842029;
+    max-width: 675px;
 }
 
-.choices-container::before {
-    content: "Choices";
-    display: block;
-    font-weight: bold;
-    margin-bottom: 0.5em;
+.bx-node-error-banner__icon {
+    flex: none;
+    margin-top: 1px;
+    font-size: 14px;
+    line-height: 1.2;
+    color: #d23228;
 }
 
-.choice-row {
-    display: flex;
+.bx-node-error-banner__content {
+    min-width: 0;
+}
+
+.bx-node-error-banner__title {
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.4;
+}
+
+.bx-node-error-banner__detail {
+    margin-top: 2px;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.35;
+}
+
+.bx-pending-delete-badge {
+    display: inline-flex;
     align-items: center;
-    gap: 0.5em;
-    margin-bottom: 0.75em;
-    margin-top: 0.75em;
+    min-height: 18px;
+    border-radius: 999px;
+    background: #dc3545;
+    color: #fff;
+    padding: 1px 8px;
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1.2;
 }
 
-.choice-row input.choice-text {
+.bx-nodes-main {
     flex: 1;
+    padding-left: 0;
 }
 
-.choice-row select.choice-target {
+.bx-node-editor-inner .bx-help {
+    margin-top: 4px;
+}
+
+.bx-choices .choices-container {
+    margin-top: 8px;
+}
+
+.bx-choices-help {
+    margin: 0 0 8px;
+    font-size: 12px;
+    line-height: 1.3;
+    color: #6b7280;
+}
+
+.choice-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 10px;
+    margin: 0 0 10px;
+}
+
+.choice-col {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+}
+
+.choice-col--text {
+    flex: 1 1 360px;
+    min-width: 260px;
+    max-width: 420px;
+}
+
+.choice-col--score {
+    flex: none;
+    width: 88px;
+}
+
+.choice-col--target {
     flex: none;
-    width: 200px;
+    width: 180px;
+}
+
+.choice-col__label {
+    font-size: 12px;
+    line-height: 1.2;
+    color: #303842;
+}
+
+.choice-row input.choice-text,
+.choice-row input.choice-score,
+.choice-row select.choice-target {
+    width: 100%;
+    min-height: 36px;
+    height: 36px;
+    box-sizing: border-box;
+    border: 1px solid #c8cdd3;
+    border-radius: 4px;
+    padding: 7px 10px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.3;
+    color: #303842;
+    background: #fff;
 }
 
 .choice-row .btn-delete-choice {
-    background-color: #dc3545;
-    color: #fff;
-    border: none;
+    width: 36px;
+    min-width: 36px;
+    min-height: 36px;
+    border: 0;
     border-radius: 4px;
-    padding: 0.3em 0.6em;
-    font-size: 0.9em;
-    cursor: pointer;
-    flex: none;
+    background: #dc3545;
+    color: #fff;
+    font-size: 18px;
     line-height: 1;
+    cursor: pointer;
+    margin-bottom: 0;
+    margin-top: 20px;
 }
 
 .choice-row .btn-delete-choice:hover {
-    opacity: 0.85;
+    opacity: 0.9;
+}
+
+.bx-choices .bx-btn--secondary {
+    min-height: 36px;
+    border-radius: 4px;
+    padding: 7px 12px;
+    font-size: 13px;
+    line-height: 1.3;
+    margin: 4px 0 0;
+}
+
+.overlay-text-control {
+    margin-bottom: 8px;
+}
+
+.overlay-text-toggle {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.3;
+    color: #303842;
+}
+
+.overlay-text-help {
+    margin: 4px 0 0;
+    font-size: 12px;
+    line-height: 1.3;
+    color: #6b7280;
+}
+
+.bx-btn {
+    border: 1px solid #006fb9;
+    border-radius: 6px;
+    padding: 6px 10px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.2;
+    cursor: pointer;
 }
 
-.btn-add-choice,
-.btn-add-node {
-    display: inline-block;
-    background-color: #007bff;
+.bx-btn--primary {
+    background: #006fb9;
+    border-color: #006fb9;
     color: #fff;
+}
+
+.bx-btn--primary:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.bx-btn--secondary {
+    background: #37a94a;
+    border-color: #37a94a;
+    color: #fff;
+    margin: 8px 0 6px;
+}
+
+.xblock-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 14px;
+    padding: 10px 14px;
+    background: #fff;
+    position: sticky;
+    bottom: 0;
+    z-index: 20;
+    border-top: 1px solid #e5e7eb;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.xblock-actions__warning {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    line-height: 1.2;
+    color: #7c5e00;
+    padding: 0;
+}
+
+.xblock-actions__warning::before {
+    content: "\f071";
+    font-family: FontAwesome;
+    font-size: 11px;
+    line-height: 1;
+    color: #c08a00;
+}
+
+.xblock-actions__error {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    line-height: 1.2;
+    color: #d23228;
+}
+
+.xblock-actions__error::before {
+    content: "\f06a";
+    font-family: FontAwesome;
+    font-size: 11px;
+    line-height: 1;
+    color: #d23228;
+}
+
+.xblock-actions .action-primary {
+    min-height: 36px;
     border: none;
-    border-radius: 4px;
-    padding: 0.6em 1.2em;
-    font-size: 1em;
+    border-radius: 6px;
+    background: #0f62a1;
+    color: #fff;
+    padding: 0.7rem 1.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.2;
     cursor: pointer;
-    margin-top: 0.75em;
-    margin-bottom: 0.75em;
+    transition: background-color 0.2s ease;
 }
 
-.btn-add-choice {
-    background-color: #28a745;
+.xblock-actions .action-primary:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
 }
 
-.btn-add-choice:hover,
-.btn-add-node:hover,
-.choice-row .btn-delete-choice:hover {
-    opacity: 0.85;
+.xblock-actions .action-primary:not(:disabled):hover,
+.xblock-actions .action-primary:not(:disabled):focus {
+    background-color: #0c4f83;
+}
+
+.xblock-actions .action-secondary {
+    min-height: 36px;
+    border: 0;
+    background: transparent;
+    color: #0a6fb5;
+    padding: 0;
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.2;
 }
 
-.editor-note {
-    font-size: 0.75em;
-    color: #555;
-    margin-top: 0.25em;
-    font-style: italic;
+.xblock-actions .action-secondary:hover {
+    text-decoration: underline;
 }
diff --git a/branching_xblock/static/handlebars/choice-row.handlebars b/branching_xblock/static/handlebars/choice-row.handlebars
index 81ed2cf..542b430 100644
--- a/branching_xblock/static/handlebars/choice-row.handlebars
+++ b/branching_xblock/static/handlebars/choice-row.handlebars
@@ -1,9 +1,35 @@
 <div class="choice-row" data-choice-idx="{{i}}">
-  <input class="choice-text" value="{{choice.text}}" placeholder="Choice text"/>
-  <select class="choice-target">
-    {{#each options}}
-      <option value="{{this.id}}" {{#if (eq this.id ../choice.target_node_id)}}selected{{/if}}>{{this.label}}</option>
-    {{/each}}
-  </select>
-  <button type="button" class="btn-delete-choice">x</button>
+  <div class="choice-col choice-col--text">
+    <label class="choice-col__label">Choice text</label>
+    <input class="choice-text" value="{{choice.text}}" placeholder="Choice text"/>
+  </div>
+  <div class="choice-col choice-col--score">
+    <label class="choice-col__label">Score</label>
+    <input
+      class="choice-score {{#if score_error}}is-error{{/if}}"
+      type="number"
+      min="0"
+      max="100"
+      step="1"
+      value="{{choice.score}}"
+      placeholder="0"
+      aria-label="Choice score"
+    />
+    {{#if score_error}}
+      <div class="choice-field-error">{{score_error}}</div>
+    {{/if}}
+  </div>
+  <div class="choice-col choice-col--target">
+    <label class="choice-col__label">Destination*</label>
+    <select class="choice-target {{#if destination_error}}is-error{{/if}}">
+      <option value="" {{#unless choice.target_node_id}}selected{{/unless}}>Select node</option>
+      {{#each options}}
+        <option value="{{this.id}}" {{#if (eq this.id ../choice.target_node_id)}}selected{{/if}}>{{this.label}}</option>
+      {{/each}}
+    </select>
+    {{#if destination_error}}
+      <div class="choice-field-error">{{destination_error}}</div>
+    {{/if}}
+  </div>
+  <button type="button" class="btn-delete-choice" aria-label="Delete choice">×</button>
 </div>
diff --git a/branching_xblock/static/handlebars/node-block.handlebars b/branching_xblock/static/handlebars/node-block.handlebars
index 7e74891..9652af2 100644
--- a/branching_xblock/static/handlebars/node-block.handlebars
+++ b/branching_xblock/static/handlebars/node-block.handlebars
@@ -22,6 +22,13 @@
       </label>
     </div>
   </label>
+  <div class="overlay-text-control {{#unless (eq node.media.type 'image')}}is-hidden{{/unless}}">
+    <label class="overlay-text-toggle">
+      <input type="checkbox" class="overlay-text-checkbox" {{#if node.overlay_text}}checked{{/if}}>
+      Overlay text on image
+    </label>
+    <p class="overlay-text-help">If left unchecked, text will appear outside the image.</p>
+  </div>
   <label>Hint:<br/>
     <textarea class="node-hint">{{node.hint}}</textarea>
   </label>
diff --git a/branching_xblock/static/handlebars/node-editor.handlebars b/branching_xblock/static/handlebars/node-editor.handlebars
new file mode 100644
index 0000000..6900328
--- /dev/null
+++ b/branching_xblock/static/handlebars/node-editor.handlebars
@@ -0,0 +1,85 @@
+<div class="bx-node-editor-inner" data-node-id="{{id}}">
+  {{#if node_error_detail}}
+    <div class="bx-node-error-banner" role="alert">
+      <span class="fa fa-exclamation-circle bx-node-error-banner__icon" aria-hidden="true"></span>
+      <div class="bx-node-error-banner__content">
+        <div class="bx-node-error-banner__title">
+          {{#if node_error_title}}{{node_error_title}}{{else}}You can't delete this node{{/if}}
+        </div>
+        <div class="bx-node-error-banner__detail">{{node_error_detail}}</div>
+      </div>
+    </div>
+  {{/if}}
+
+  <div class="bx-node-editor-header">
+    <h2 class="bx-step-title">Node {{number}}</h2>
+    {{#if is_pending_delete}}
+      <span class="bx-pending-delete-badge">Pending deletion</span>
+    {{/if}}
+  </div>
+
+  <label class="bx-field">
+    <div class="bx-field__label">Content</div>
+    <textarea class="bx-textarea" data-role="node-content">{{content}}</textarea>
+  </label>
+
+  <label class="bx-field">
+    <div class="bx-field__label">Media</div>
+    <select class="bx-select" data-role="media-type">
+      <option value="" {{#unless media.type}}selected{{/unless}}>None</option>
+      <option value="image" {{#if (eq media.type 'image')}}selected{{/if}}>Image</option>
+      <option value="video" {{#if (eq media.type 'video')}}selected{{/if}}>Video</option>
+      <option value="audio" {{#if (eq media.type 'audio')}}selected{{/if}}>Audio</option>
+    </select>
+  </label>
+
+  <div class="{{#unless is_image}}is-hidden{{/unless}}" data-role="image-url-fields">
+    <label class="bx-field">
+      <div class="bx-field__label">Left image URL</div>
+      <input type="text" class="bx-input {{#if left_image_url_error}}is-error{{/if}}" data-role="left-image-url" placeholder="URL" value="{{left_image_url}}" />
+      {{#if left_image_url_error}}
+        <div class="bx-field-error">{{left_image_url_error}}</div>
+      {{/if}}
+    </label>
+    <label class="bx-field">
+      <div class="bx-field__label">Right image URL</div>
+      <input type="text" class="bx-input" data-role="right-image-url" placeholder="URL" value="{{right_image_url}}" />
+    </label>
+  </div>
+
+  <label class="bx-field {{#unless show_media_url}}is-hidden{{/unless}}" data-role="media-url-field">
+    <div class="bx-field__label">URL</div>
+    <input type="text" class="bx-input" data-role="media-url" placeholder="URL" value="{{media.url}}" />
+    <div class="bx-help">Supports direct media files (.mp4/.webm/.mp3) or links from YouTube, Vimeo, Panopto.</div>
+  </label>
+
+  <label class="bx-field {{#unless show_transcript}}is-hidden{{/unless}}" data-role="transcript-url-field">
+    <div class="bx-field__label">Transcript URL</div>
+    <input type="text" class="bx-input" data-role="transcript-url" placeholder="https://..." value="{{transcript_url}}" />
+  </label>
+
+  <div class="overlay-text-control {{#unless show_overlay}}is-hidden{{/unless}}" data-role="overlay-text-control">
+    <label class="overlay-text-toggle">
+      <input type="checkbox" class="overlay-text-checkbox" data-role="overlay-text" {{#if overlay_text}}checked{{/if}}>
+      Overlay text on image
+    </label>
+    <p class="overlay-text-help">If left unchecked, text will appear outside the image.</p>
+  </div>
+
+  <label class="bx-checkbox">
+    <input type="checkbox" data-role="no-branches" {{#if no_branches}}checked{{/if}} {{#if has_choices}}disabled{{/if}} />
+    <span>This node has no branches</span>
+  </label>
+
+  <label class="bx-field">
+    <div class="bx-field__label">Hint</div>
+    <textarea class="bx-textarea" data-role="node-hint">{{hint}}</textarea>
+  </label>
+
+  <div class="bx-choices {{#if no_branches}}is-hidden{{/if}}" data-role="choices-section">
+    <h3 class="bx-section-title">Choices</h3>
+    <div class="bx-help bx-choices-help">When a learner selects a choice, the score assigned to that choice is added to the total score.</div>
+    <div class="choices-container" data-role="choices-container"></div>
+    <button type="button" class="bx-btn bx-btn--secondary" data-role="add-choice">Add Choice</button>
+  </div>
+</div>
diff --git a/branching_xblock/static/handlebars/node-list-item.handlebars b/branching_xblock/static/handlebars/node-list-item.handlebars
new file mode 100644
index 0000000..4ec8d91
--- /dev/null
+++ b/branching_xblock/static/handlebars/node-list-item.handlebars
@@ -0,0 +1,21 @@
+<div class="bx-node-list-item {{#if is_selected}}is-selected{{/if}} {{#if is_pending_delete}}is-pending-delete{{/if}} {{#if has_errors}}has-errors{{/if}}" data-node-id="{{id}}">
+  <button type="button" class="bx-node-list-item__select" data-role="select-node" data-node-id="{{id}}">
+    Node {{number}}{{#if is_unlinked}} <span class="bx-node-list-item__meta">(unlinked node)</span>{{/if}}
+  </button>
+  {{#if has_errors}}
+    <span class="bx-node-list-item__error" aria-label="Node has errors">!</span>
+  {{/if}}
+  <button
+    type="button"
+    class="bx-node-list-item__delete {{#if is_pending_delete}}is-restore{{/if}}"
+    data-role="toggle-delete-node"
+    data-node-id="{{id}}"
+    aria-label="{{#if is_pending_delete}}Restore node{{else}}Delete node{{/if}}"
+  >
+    {{#if is_pending_delete}}
+      <span class="fa fa-undo" aria-hidden="true"></span>
+    {{else}}
+      <span class="fa fa-trash-o" aria-hidden="true"></span>
+    {{/if}}
+  </button>
+</div>
diff --git a/branching_xblock/static/handlebars/nodes-step.handlebars b/branching_xblock/static/handlebars/nodes-step.handlebars
new file mode 100644
index 0000000..d17a56e
--- /dev/null
+++ b/branching_xblock/static/handlebars/nodes-step.handlebars
@@ -0,0 +1,12 @@
+<div class="bx-wizard bx-nodes-step">
+  <div class="bx-nodes-sidebar">
+    <button type="button" class="bx-btn bx-btn--primary" data-role="add-node">+ Add node</button>
+    <div class="bx-node-limit">Max 30 nodes</div>
+    <div class="bx-node-list" data-role="node-list"></div>
+  </div>
+
+  <div class="bx-nodes-main">
+    <div class="bx-node-editor" data-role="node-editor"></div>
+  </div>
+</div>
+
diff --git a/branching_xblock/static/handlebars/settings-step.handlebars b/branching_xblock/static/handlebars/settings-step.handlebars
new file mode 100644
index 0000000..d604218
--- /dev/null
+++ b/branching_xblock/static/handlebars/settings-step.handlebars
@@ -0,0 +1,70 @@
+<div class="bx-wizard bx-settings-step">
+  <h2 class="bx-step-title">Settings</h2>
+
+  <label class="bx-field">
+    <div class="bx-field__label">Display Name</div>
+    <input type="text" name="display_name" value="{{display_name}}" class="bx-input" />
+  </label>
+
+  <label class="bx-checkbox">
+    <input type="checkbox" name="enable_undo" {{#if enable_undo}}checked{{/if}} />
+    <span>Let learners try the previous node again</span>
+  </label>
+
+  <label class="bx-checkbox">
+    <input type="checkbox" name="enable_reset_activity" {{#if enable_reset_activity}}checked{{/if}} />
+    <span>Let learners reset the activity</span>
+  </label>
+
+  <label class="bx-checkbox">
+    <input type="checkbox" name="enable_scoring" {{#if enable_scoring}}checked{{/if}} />
+    <span>Include a grade report at the end of the activity</span>
+  </label>
+
+  <div class="bx-grade-range {{#unless enable_scoring}}is-hidden{{/unless}}" data-role="grade-range-section">
+    <h3 class="bx-section-title bx-grade-range__title">Specify Grade Range</h3>
+    <p class="bx-help bx-grade-range__help">Adjust the scale to set percentage ranges for each grade.</p>
+    <div class="bx-grade-range__slider" data-role="grade-range-slider"></div>
+    {{#if grade_ranges_error}}
+      <div class="bx-field-error">{{grade_ranges_error}}</div>
+    {{/if}}
+  </div>
+
+  <h3 class="bx-section-title">Background image</h3>
+  <p class="bx-help">
+    This image will appear in the background of any nodes with “Image” as the media type.
+  </p>
+
+  <label class="bx-field">
+    <div class="bx-field__label">Image URL</div>
+    <input
+      type="text"
+      name="background_image_url"
+      class="bx-input {{#if background_image_url_error}}is-error{{/if}}"
+      placeholder="URL"
+      value="{{background_image_url}}"
+    />
+    {{#if background_image_url_error}}
+      <div class="bx-field-error">{{background_image_url_error}}</div>
+    {{/if}}
+  </label>
+
+  <div class="bx-field">
+    <div class="bx-field__label">Alt text</div>
+    <label class="bx-checkbox bx-checkbox--nested">
+      <input type="checkbox" name="background_image_is_decorative" {{#if background_image_is_decorative}}checked{{/if}} />
+      <span>Decorative image</span>
+    </label>
+    <input
+      type="text"
+      name="background_image_alt_text"
+      class="bx-input {{#if background_image_alt_text_error}}is-error{{/if}}"
+      placeholder="Alt text"
+      value="{{background_image_alt_text}}"
+      {{#if background_image_is_decorative}}disabled{{/if}}
+    />
+    {{#if background_image_alt_text_error}}
+      <div class="bx-field-error">{{background_image_alt_text_error}}</div>
+    {{/if}}
+  </div>
+</div>
diff --git a/branching_xblock/static/html/branching_xblock.html b/branching_xblock/static/html/branching_xblock.html
index 99a6728..c2585ca 100644
--- a/branching_xblock/static/html/branching_xblock.html
+++ b/branching_xblock/static/html/branching_xblock.html
@@ -11,17 +11,87 @@
                 <div data-role="hint" class="node-hint px-2 py-3"></div>
             </details>
         </div>
-        <div class="choices" data-role="choices"></div>
-
-        <div class="action-row">
-            <button class="undo-button action-secondary btn-secondary" data-role="undo" style="display: none;">
-                Go Back
-            </button>
-            <button type="button" class="reset-button action-secondary btn-secondary" data-role="reset-activity" style="display: none;">
-                Reset
-            </button>
+        <div class="choices" data-role="choices">
+            <h3 class="choices-heading" data-role="choice-heading">Choose Next Step:</h3>
+            <form class="choices-form" data-role="choice-form">
+                <div class="choices-list" data-role="choice-list"></div>
+                <div class="choice-actions">
+                    <div class="choice-actions__secondary">
+                        <button type="button" class="undo-button action-secondary btn-secondary" data-role="undo">
+                            Go Back
+                        </button>
+                        <button type="button" class="reset-button action-secondary btn-secondary" data-role="reset-activity" style="display: none;">
+                            Reset
+                        </button>
+                    </div>
+                    <div class="choice-actions__primary">
+                        <button type="button" class="show-report-button action-primary btn-primary" data-role="show-report" style="display: none;">
+                            Show Report
+                        </button>
+                        <button type="submit" class="choice-submit-button action-primary btn-primary" data-role="submit-choice" disabled>
+                            Submit
+                        </button>
+                    </div>
+                </div>
+            </form>
         </div>
 
         <div class="score-display" data-role="score" style="display: none;"></div>
+        <div class="grade-report" data-role="grade-report" hidden>
+            <h3 class="grade-report__title">Activity Complete!</h3>
+            <p class="grade-report__subtitle">Let's take a look at this report below to see how you performed.</p>
+
+            <div class="grade-report__summary-card">
+                <h4 class="grade-report__section-title">
+                    <span class="grade-report__section-icon" aria-hidden="true">
+                        <span class="fa fa-graduation-cap" aria-hidden="true"></span>
+                    </span>
+                    Your Grade
+                </h4>
+                <div class="grade-report__summary">
+                    <div class="grade-report__metric grade-report__metric--score">
+                        <div class="grade-report__metric-label">
+                            <span class="grade-report__metric-label-icon" aria-hidden="true">
+                                <span class="fa fa-trophy" data-role="report-score-icon" aria-hidden="true"></span>
+                            </span>
+                            Your Score
+                        </div>
+                        <div class="grade-report__metric-value" data-role="report-score">0</div>
+                    </div>
+                    <div class="grade-report__metric grade-report__metric--max">
+                        <div class="grade-report__metric-label">Highest Possible Score</div>
+                        <div class="grade-report__metric-value" data-role="report-max-score">0</div>
+                    </div>
+                    <div class="grade-report__percent" data-role="report-percent-pill">
+                        <svg class="grade-report__percent-ring" viewBox="0 0 120 120" aria-hidden="true" focusable="false">
+                            <circle class="grade-report__percent-track" cx="60" cy="60" r="48"></circle>
+                            <circle class="grade-report__percent-progress" data-role="report-percent-circle" cx="60" cy="60" r="48"></circle>
+                        </svg>
+                        <div class="grade-report__percent-content">
+                            <div class="grade-report__percent-value" data-role="report-percent">0%</div>
+                            <div class="grade-report__percent-label" data-role="report-grade-label"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grade-report__details">
+                <h4 class="grade-report__details-title">
+                    <span class="grade-report__section-icon" aria-hidden="true">
+                        <span class="fa fa-line-chart" aria-hidden="true"></span>
+                    </span>
+                    Detailed Score
+                </h4>
+                <div class="grade-report__details-header">
+                    <span>Your Selections</span>
+                    <span>Score</span>
+                </div>
+                <div class="grade-report__details-rows" data-role="report-details"></div>
+            </div>
+
+            <button type="button" class="action-primary btn-primary" data-role="reset-activity-report" style="display: none;">
+                Reset Activity
+            </button>
+        </div>
     </div>
 </div>
diff --git a/branching_xblock/static/html/branching_xblock_edit.html b/branching_xblock/static/html/branching_xblock_edit.html
index 1b77928..1edd3d2 100644
--- a/branching_xblock/static/html/branching_xblock_edit.html
+++ b/branching_xblock/static/html/branching_xblock_edit.html
@@ -1,12 +1,16 @@
 <div class="wrapper-comp-settings is-active editor-with-buttons">
-  <!-- Editor UI placeholder -->
-  <div class="branching-scenario-editor"></div>
+  <div class="branching-editor-step" data-role="step-settings"></div>
+  <div class="branching-editor-step" data-role="step-nodes" hidden></div>
 
   <!-- Error messages get injected here -->
   <div class="errors" style="color:red;"></div>
 </div>
 
 <div class="xblock-actions">
-  <button type="button" class="action-primary save-button">Save</button>
-  <button type="button" class="action-secondary cancel-button">Cancel</button>
+  <button type="button" class="action-primary" data-role="continue">Continue</button>
+  <button type="button" class="action-primary" data-role="save" hidden>Save</button>
+  <button type="button" class="action-secondary" data-role="back" hidden>Back</button>
+  <button type="button" class="action-secondary" data-role="cancel">Cancel</button>
+  <div class="xblock-actions__error" data-role="save-validation-summary" hidden></div>
+  <div class="xblock-actions__warning" data-role="pending-delete-summary" hidden></div>
 </div>
diff --git a/branching_xblock/static/js/src/branching_xblock.js b/branching_xblock/static/js/src/branching_xblock.js
index dfe108d..c4127a8 100644
--- a/branching_xblock/static/js/src/branching_xblock.js
+++ b/branching_xblock/static/js/src/branching_xblock.js
@@ -3,6 +3,9 @@ function BranchingXBlock(runtime, element) {
 
     let currentHintNodeId = null;
     let isHintVisible = false;
+    let selectedChoiceIndex = null;
+    let isReportVisible = false;
+    let currentState = null;
 
     const MEDIA_FILE_REGEX = /\.(mp4|webm|ogg|mp3|wav)(\?|#|$)/i;
 
@@ -77,11 +80,67 @@ function BranchingXBlock(runtime, element) {
         const $summary = $details.find('[data-role="hint-summary"]');
         $details.prop('open', isHintVisible);
         if ($summary.length) {
-            $summary.text(isHintVisible ? 'Hide hint' : 'Show hint');
+            $summary.text(isHintVisible ? 'Hide' : 'Show hint');
         }
     }
 
+    function renderGradeReport(reportData, showResetInReport) {
+        const $report = $el.find('[data-role="grade-report"]');
+        const score = Number(reportData?.score || 0);
+        const maxScore = Number(reportData?.max_score || 0);
+        const percentage = Number(reportData?.percentage || 0);
+        const gradeLabel = String(reportData?.grade_label || '').trim();
+        const isPassStyle = Boolean(reportData?.is_pass_style);
+        const details = Array.isArray(reportData?.detailed_scores) ? reportData.detailed_scores : [];
+
+        $report.find('[data-role="report-score"]').text(String(Math.round(score)));
+        $report.find('[data-role="report-max-score"]').text(String(Math.round(maxScore)));
+        $report.find('[data-role="report-percent"]').text(`${percentage}%`);
+        $report.find('[data-role="report-grade-label"]').text(gradeLabel);
+        const boundedPercentage = Math.max(0, Math.min(100, percentage));
+        const $percentPill = $report.find('[data-role="report-percent-pill"]');
+        $percentPill
+            .toggleClass('is-fail', !isPassStyle);
+        const $scoreMetric = $report.find('.grade-report__metric--score');
+        $scoreMetric
+            .toggleClass('is-fail', !isPassStyle);
+        const $scoreIcon = $report.find('[data-role="report-score-icon"]');
+        $scoreIcon
+            .toggleClass('fa-trophy', isPassStyle)
+            .toggleClass('fa-exclamation-triangle', !isPassStyle);
+        const $percentCircle = $report.find('[data-role="report-percent-circle"]');
+        if ($percentCircle.length) {
+            const radius = Number($percentCircle.attr('r')) || 48;
+            const circumference = 2 * Math.PI * radius;
+            const offset = circumference * (1 - (boundedPercentage / 100));
+            $percentCircle.css({
+                strokeDasharray: circumference,
+                strokeDashoffset: offset,
+            });
+        }
+        $report.find('[data-role="reset-activity-report"]').toggle(showResetInReport);
+
+        const $details = $report.find('[data-role="report-details"]').empty();
+        if (!details.length) {
+            $details.append(
+                $('<div class="grade-report__details-row grade-report__details-row--empty"></div>')
+                    .text('No scored selections were recorded for this attempt.')
+            );
+            return;
+        }
+
+        details.forEach((entry) => {
+            const text = String(entry.choice_text || '').trim();
+            const points = Number(entry.awarded_points || 0);
+            const $row = $('<div class="grade-report__details-row"></div>');
+            $row.append($('<span class="grade-report__details-text"></span>').text(text || 'Untitled choice'));
+            $row.append($('<span class="grade-report__details-score"></span>').text(String(points)));
+            $details.append($row);
+        });
+    }
+
     function updateView(state) {
+        currentState = state;
         const node = state.current_node || state.nodes[state.start_node_id] || {};
 
         // Active node
@@ -89,6 +148,16 @@ function BranchingXBlock(runtime, element) {
 
         const media = (node && node.media) || {};
         const mediaUrl = media.url || '';
+        const contentHtml = (node && node.content) || '';
+        const overlayEnabled = Boolean(node?.overlay_text && media.type === 'image');
+        const backgroundImageUrl = state?.background_image_url || '';
+        const backgroundImageAltText = state?.background_image_alt_text || '';
+        const backgroundImageIsDecorative = Boolean(state?.background_image_is_decorative);
+        const leftImageUrl = (node?.left_image_url !== undefined && node?.left_image_url !== null)
+            ? node.left_image_url
+            : (mediaUrl || '');
+        const rightImageUrl = node?.right_image_url || '';
+
         const $media = $el.find('[data-role="media"]');
         const $transcript = $el.find('[data-role="transcript"]');
         const setTranscript = (href) => {
@@ -99,7 +168,52 @@ function BranchingXBlock(runtime, element) {
             }
         };
         if (media.type === 'image') {
-            $media.html(`<img src="${mediaUrl}" alt=""/>`);
+            const $composite = $('<div>').addClass('bx-image-composite');
+            if (backgroundImageUrl) {
+                const $backgroundImage = $('<img>')
+                    .addClass('bx-image-composite__bg')
+                    .attr('src', backgroundImageUrl);
+                if (backgroundImageIsDecorative) {
+                    $backgroundImage.attr('alt', '').attr('aria-hidden', 'true');
+                } else {
+                    $backgroundImage.attr('alt', backgroundImageAltText);
+                }
+                $composite.append($backgroundImage);
+            }
+
+            const hasForeground = Boolean(leftImageUrl || rightImageUrl);
+            if (!hasForeground && backgroundImageUrl) {
+                $composite.addClass('bx-image-composite--bg-only');
+            } else if (hasForeground) {
+                const $fg = $('<div>').addClass('bx-image-composite__fg');
+                if (leftImageUrl) {
+                    $fg.append(
+                        $('<img>')
+                            .addClass('bx-image-composite__img bx-image-composite__img--left')
+                            .attr('src', leftImageUrl)
+                            .attr('alt', '')
+                    );
+                }
+                if (rightImageUrl) {
+                    $fg.append(
+                        $('<img>')
+                            .addClass('bx-image-composite__img bx-image-composite__img--right')
+                            .attr('src', rightImageUrl)
+                            .attr('alt', '')
+                    );
+                }
+                $composite.append($fg);
+            }
+
+            if (overlayEnabled) {
+                $composite.append(
+                    $('<div>')
+                        .addClass('media-overlay__text bx-image-composite__overlay')
+                        .html(contentHtml)
+                );
+            }
+
+            $media.empty().append($composite);
             setTranscript(null);
         } else if (media.type === 'audio') {
             $media.html(`<audio src="${mediaUrl}" controls />`);
@@ -121,14 +235,19 @@ function BranchingXBlock(runtime, element) {
             setTranscript(null);
         }
         // Content
-        const nodeContent = (node && node.content) || '';
-        $el.find('[data-role="content"]').html(nodeContent);
+        const $content = $el.find('[data-role="content"]');
+        if (overlayEnabled && media.type === 'image') {
+            $content.empty();
+        } else {
+            $content.html(contentHtml);
+        }
 
         // Hint
         const nodeId = node?.id || null;
         if (nodeId !== currentHintNodeId) {
             currentHintNodeId = nodeId;
             isHintVisible = false;
+            isReportVisible = false;
         }
         const $hintContainer = $el.find('[data-role="hint-container"]');
         const $hintDetails = $hintContainer.find('[data-role="hint-collapsible"]');
@@ -145,30 +264,71 @@ function BranchingXBlock(runtime, element) {
         }
 
         // Choices
-        const $choices = $el.find('[data-role="choices"]').empty();
+        const $choiceForm = $el.find('[data-role="choice-form"]');
+        const $choiceList = $el.find('[data-role="choice-list"]').empty();
+        const $submitButton = $el.find('[data-role="submit-choice"]').prop('disabled', true);
         const choices = node.choices || [];
+        const canUndo = state.enable_undo && state.history.length > 0;
+        selectedChoiceIndex = null;
         choices.forEach((choice, idx) => {
-            $('<button>')
-            .addClass('choice-button bg-primary')
-            .text(choice.text)
-            .attr('data-choice-index', idx)
-            .appendTo($choices);
+            const choiceId = `choice-${node.id || 'node'}-${idx}`;
+            const $label = $('<label>')
+                .addClass('choice-option')
+                .attr('for', choiceId);
+            const $input = $('<input>')
+                .attr({
+                    type: 'radio',
+                    name: 'branching-choice',
+                    id: choiceId,
+                    value: idx,
+                })
+                .addClass('choice-option__input');
+            const $text = $('<span>')
+                .addClass('choice-option__text')
+                .text(choice.text || `Choice ${idx + 1}`);
+            $label.append($input).append($text);
+            $choiceList.append($label);
         });
-
-        $choices.addClass('choices-inline');
-
-        const canUndo = state.enable_undo && state.history.length > 0;
-        $el.find('.undo-button').toggle(canUndo);
-
-        const isAtStartNode = Boolean(
-            state.current_node && state.current_node.id === state.start_node_id
-        );
+        const hasChoices = choices.length > 0;
+        const isLeaf = !hasChoices;
+        const isAtStartNode = Boolean(node && node.id === state.start_node_id);
         const showReset = Boolean(state.enable_reset_activity && !isAtStartNode);
+        const showReport = Boolean(isLeaf && state.enable_scoring);
+        if (!showReport) {
+            isReportVisible = false;
+        }
+        $el.find('[data-role="choice-heading"]').toggle(hasChoices);
+        $submitButton.toggle(hasChoices);
+        $submitButton.prop('disabled', !hasChoices || selectedChoiceIndex === null);
+        $el.find('[data-role="show-report"]').toggle(showReport);
+        $el.find('.choice-actions').toggle(hasChoices || canUndo || showReset || showReport);
+
+        $el.find('.undo-button')
+            .prop('disabled', !canUndo)
+            .toggleClass('is-disabled', !canUndo);
         $el.find('[data-role="reset-activity"]').toggle(showReset);
 
+        const $report = $el.find('[data-role="grade-report"]');
+        const reportMode = Boolean(showReport && isReportVisible);
+        $report.prop('hidden', !reportMode);
+        if (reportMode) {
+            renderGradeReport(state.grade_report || {}, showReset);
+            $el.find('[data-role="content"]').hide();
+            $el.find('[data-role="media"]').hide();
+            $el.find('[data-role="transcript"]').hide();
+            $el.find('[data-role="hint-container"]').hide();
+            $el.find('[data-role="choices"]').hide();
+            $el.find('[data-role="score"]').hide();
+        } else {
+            $el.find('[data-role="content"]').show();
+            $el.find('[data-role="media"]').show();
+            $el.find('[data-role="transcript"]').show();
+            $el.find('[data-role="hint-container"]').show();
+            $el.find('[data-role="choices"]').show();
+        }
+
         const $score = $el.find('[data-role="score"]');
-        const isLeaf = choices.length === 0;
-        if (isLeaf && state.enable_scoring) {
+        if (!reportMode && isLeaf && state.enable_scoring) {
             $score.text(`Score: ${state.score}/${state.max_score}`).show();
         } else {
             $score.hide();
@@ -189,35 +349,61 @@ function BranchingXBlock(runtime, element) {
         setHintVisibility(this.open);
     });
 
-    // Handle a choice click
-    $el.on('click', '.choice-button', function() {
-      const idx = +$(this).attr('data-choice-index');
-      $.ajax({
-        url: runtime.handlerUrl(element, 'select_choice'),
-        type: 'POST',
-        data: JSON.stringify({ choice_index: idx }),
-        contentType: 'application/json'
-      }).done(refreshView);
+    $el.on('change', 'input[name="branching-choice"]', function() {
+        selectedChoiceIndex = Number(this.value);
+        isReportVisible = false;
+        $el.find('[data-role="submit-choice"]').prop('disabled', false);
+        $el.find('.choice-option').removeClass('is-selected');
+        $(this).closest('.choice-option').addClass('is-selected');
+    });
+
+    $el.on('submit', '[data-role="choice-form"]', function(event) {
+        event.preventDefault();
+        if (selectedChoiceIndex === null) {
+            return;
+        }
+        $.ajax({
+            url: runtime.handlerUrl(element, 'select_choice'),
+            type: 'POST',
+            data: JSON.stringify({ choice_index: selectedChoiceIndex }),
+            contentType: 'application/json',
+            dataType: 'json'
+        }).done((state) => {
+            selectedChoiceIndex = null;
+            isReportVisible = false;
+            updateView(state);
+        });
     });
 
     $el.on('click', '.undo-button', function() {
+        isReportVisible = false;
         $.ajax({
           url: runtime.handlerUrl(element, 'undo_choice'),
           type: 'POST',
           data: JSON.stringify({}),
           contentType: 'application/json',
           dataType: 'json'
-        }).done(refreshView);
+        }).done(updateView);
+    });
+
+    $el.on('click', '[data-role="show-report"]', function() {
+        isReportVisible = true;
+        if (currentState) {
+            updateView(currentState);
+        } else {
+            refreshView();
+        }
     });
 
-    $el.on('click', '[data-role="reset-activity"]', function() {
+    $el.on('click', '[data-role="reset-activity"], [data-role="reset-activity-report"]', function() {
+        isReportVisible = false;
         $.ajax({
           url: runtime.handlerUrl(element, 'reset_activity'),
           type: 'POST',
           data: JSON.stringify({}),
           contentType: 'application/json',
           dataType: 'json'
-        }).done(refreshView);
+        }).done(updateView);
     });
 
     // Initial load
diff --git a/branching_xblock/static/js/src/studio_editor.js b/branching_xblock/static/js/src/studio_editor.js
index f5dc71a..1e2e056 100644
--- a/branching_xblock/static/js/src/studio_editor.js
+++ b/branching_xblock/static/js/src/studio_editor.js
@@ -1,16 +1,21 @@
 function BranchingStudioEditor(runtime, element, data) {
   const Templates = {};
-  ['settings-panel','node-block','choice-row'].forEach(name => {
+  ['settings-step', 'nodes-step', 'node-list-item', 'node-editor', 'choice-row'].forEach(name => {
     const src = document.getElementById(name+'-tpl').innerHTML;
     Templates[name] = Handlebars.compile(src);
   });
   Handlebars.registerHelper('inc', value => parseInt(value,10) + 1);
   Handlebars.registerHelper('eq', (a,b) => a === b);
   const $root       = $(element);
-  const $editor     = $root.find('.branching-scenario-editor');
+  const $stepSettings = $root.find('[data-role="step-settings"]');
+  const $stepNodes = $root.find('[data-role="step-nodes"]');
   const $errors     = $root.find('.errors');
-  const $saveBtn    = $root.find('.save-button');
-  const $cancelBtn  = $root.find('.cancel-button');
+  const $continueBtn = $root.find('[data-role="continue"]');
+  const $saveBtn = $root.find('[data-role="save"]');
+  const $backBtn = $root.find('[data-role="back"]');
+  const $cancelBtn  = $root.find('[data-role="cancel"]');
+  const $pendingDeleteSummary = $root.find('[data-role="pending-delete-summary"]');
+  const $saveValidationSummary = $root.find('[data-role="save-validation-summary"]');
 
   this.uniqueIdCount = 0;
 
@@ -19,205 +24,549 @@ function BranchingStudioEditor(runtime, element, data) {
     return `temp-${i}`;
   };
 
-  function render(state) {
-    $editor.empty();
-    $errors.empty();
+  // Keep editor state in a draft model, then sync to/from DOM on transitions.
+  // This prevents partial DOM edits from immediately mutating persisted data.
+  const editorState = {
+    currentStep: 'settings',
+    selectedNodeId: null,
+    draftSettings: {},
+    draftNodes: [],
+    settingsFieldErrors: {},
+    validationErrors: [],
+    validationNodeErrorIds: new Set(),
+    validationNodeErrorDetailsById: new Map(),
+    validationNodeErrorTitlesById: new Map(),
+    validationFieldErrorsByNodeId: new Map(),
+  };
 
-    const nodes = Object.values(state.nodes || {});
-    if (!nodes.length) {
-      nodes.push({
-        id: uniqueId(),
-        content: '',
-        media: {type: '', url: ''},
-        choices: [],
-        hint: '',
-        transcript_url: ''
-      });
+  // ---------------------------
+  // Grade range slider helpers
+  // ---------------------------
+  function boundaryBounds(boundaryIndex, gradeRanges) {
+    const lower = boundaryIndex === 0 ? 0 : gradeRanges[boundaryIndex - 1].end + 1;
+    const upper = boundaryIndex === (gradeRanges.length - 2)
+      ? 99
+      : gradeRanges[boundaryIndex + 1].end - 1;
+    return { lower, upper };
+  }
+
+  function setBoundaryValue(boundaryIndex, requestedValue) {
+    const gradeRanges = editorState.draftSettings.grade_ranges;
+    if (!Array.isArray(gradeRanges) || gradeRanges.length < 2) {
+      return;
+    }
+    const current = gradeRanges[boundaryIndex];
+    const next = gradeRanges[boundaryIndex + 1];
+    if (!current || !next) {
+      return;
     }
+    const { lower, upper } = boundaryBounds(boundaryIndex, gradeRanges);
+    const clamped = Math.max(lower, Math.min(upper, requestedValue));
+    current.end = clamped;
+    next.start = clamped + 1;
+    editorState.draftSettings.grade_ranges = gradeRanges;
+  }
 
-    $editor.append(Templates['settings-panel'](state));
+  function renderGradeRangeSlider() {
+    const $section = $stepSettings.find('[data-role="grade-range-section"]');
+    if (!$section.length) {
+      return;
+    }
+    const show = Boolean(editorState.draftSettings.enable_scoring);
+    $section.toggleClass('is-hidden', !show);
+    if (!show) {
+      return;
+    }
 
-    nodes.forEach((node, idx) => {
-      const options = nodes.map((n, j) => ({
-        id: n.id,
-        label: `Node ${j+1}`
-      })).filter(opt => opt.id !== node.id);
+    const gradeRanges = editorState.draftSettings.grade_ranges;
+    if (!Array.isArray(gradeRanges) || gradeRanges.length < 2) {
+      return;
+    }
+    const percentPerPoint = 100 / 101;
+    const $slider = $section.find('[data-role="grade-range-slider"]').empty();
+    const $trackWrap = $('<div class="bx-grade-range__track-wrap"></div>');
+    const $ticks = $('<div class="bx-grade-range__ticks"></div>');
+    for (let value = 0; value <= 100; value += 10) {
+      $ticks.append($('<span class="bx-grade-range__tick"></span>').text(String(value)));
+    }
 
-      const html = Templates['node-block']({ node, idx });
+    const $track = $('<div class="bx-grade-range__track" data-role="grade-track"></div>');
+    gradeRanges.forEach((gradeRange, index) => {
+      const width = gradeRange.end - gradeRange.start + 1;
+      const isFail = index === 0;
+      const $segment = $('<div class="bx-grade-range__segment"></div>')
+        .toggleClass('bx-grade-range__segment--fail', isFail)
+        .toggleClass('bx-grade-range__segment--pass', !isFail)
+        .css({
+          left: `${gradeRange.start * percentPerPoint}%`,
+          width: `${width * percentPerPoint}%`,
+        });
+      $segment.append($('<div class="bx-grade-range__segment-label"></div>').text(gradeRange.label));
+      $segment.append(
+        $('<div class="bx-grade-range__segment-range"></div>').text(`${gradeRange.start}-${gradeRange.end}`)
+      );
+      $track.append($segment);
+    });
+
+    for (let boundaryIndex = 0; boundaryIndex < gradeRanges.length - 1; boundaryIndex += 1) {
+      const boundaryValue = gradeRanges[boundaryIndex].end;
+      const $handle = $('<button type="button" class="bx-grade-range__handle" data-role="grade-boundary-handle"></button>')
+        .attr('data-boundary-index', boundaryIndex)
+        .attr('role', 'slider')
+        .attr('aria-label', `Grade boundary ${boundaryIndex + 1}`)
+        .attr('aria-valuemin', boundaryBounds(boundaryIndex, gradeRanges).lower)
+        .attr('aria-valuemax', boundaryBounds(boundaryIndex, gradeRanges).upper)
+        .attr('aria-valuenow', boundaryValue)
+        .css('left', `${(boundaryValue + 1) * percentPerPoint}%`);
+      $track.append($handle);
+    }
+
+    $trackWrap.append($track).append($ticks);
+    $slider.append($trackWrap);
+  }
 
-      const $nodeEl = $(html);
-      (node.choices||[]).forEach((choice,i) => {
-        const ch = Templates['choice-row']({ choice, i, options });
-        $nodeEl.find('.choices-container').append(ch);
+  // ---------------------------
+  // Initial state hydration
+  // ---------------------------
+  function loadState() {
+      return $.ajax({
+        type: 'POST',
+        url: runtime.handlerUrl(element, 'get_current_state'),
+        data: '{}',
+        contentType: 'application/json; charset=utf-8',
+        dataType: 'json'
       });
-      $editor.append($nodeEl);
+  }
+
+  function buildDraftNode(raw) {
+    const buildDraftChoice = (choice) => ({
+      text: choice?.text || '',
+      target_node_id: choice?.target_node_id || '',
+      score: choice?.score,
     });
 
-    $editor.append(
-      '<button type="button" class="btn-add-node">Add Node</button>'
-    );
+    return {
+      id: raw?.id || uniqueId(),
+      content: raw?.content || '',
+      media: {
+        type: raw?.media?.type || '',
+        url: raw?.media?.url || '',
+      },
+      choices: Array.isArray(raw?.choices) ? raw.choices.map(buildDraftChoice) : [],
+      no_branches: Boolean(raw?.no_branches),
+      pending_delete: false,
+      hint: raw?.hint || '',
+      overlay_text: Boolean(raw?.overlay_text),
+      transcript_url: raw?.transcript_url || '',
+      left_image_url: raw?.left_image_url ?? null,
+      right_image_url: raw?.right_image_url ?? null,
+    };
+  }
 
-    bindInteractions();
-    bindActions();
-    updateTranscriptVisibility();
+  function hydrateInitialState(state) {
+    const nodes = Object.values(state?.nodes || {}).map(buildDraftNode);
+    if (!nodes.length) {
+      nodes.push(buildDraftNode({}));
+    }
+    editorState.draftNodes = nodes;
+    editorState.selectedNodeId = nodes[0].id;
+    editorState.draftSettings = {
+      display_name: state?.display_name || '',
+      enable_undo: Boolean(state?.enable_undo),
+      enable_scoring: Boolean(state?.enable_scoring),
+      enable_reset_activity: Boolean(state?.enable_reset_activity),
+      background_image_url: state?.background_image_url || '',
+      background_image_alt_text: state?.background_image_alt_text || '',
+      background_image_is_decorative: Boolean(state?.background_image_is_decorative),
+      grade_ranges: state?.grade_ranges,
+    };
   }
 
-  function updateChoiceUI() {
-    const options = {};
-      $editor.find('.node-block').map((j, nb) => {
-        options[$(nb).data('node-id')] = `Node ${j+1}`;
-      });
+  // ---------------------------
+  // Step navigation + selectors
+  // ---------------------------
+  function showStep(step) {
+    editorState.currentStep = step;
+    const showSettings = step === 'settings';
+    $stepSettings.attr('hidden', !showSettings);
+    $stepNodes.attr('hidden', showSettings);
+    $continueBtn.attr('hidden', !showSettings);
+    $saveBtn.attr('hidden', showSettings);
+    $backBtn.attr('hidden', showSettings);
+    updateFooterUi();
+    updateClientValidationUi();
+  }
 
-    $editor.find('.choice-target').each((_, choice) => {
-      const currentNodeId = $(choice).closest('.node-block').data('node-id');
-      const availableIds = Object.keys(options).filter(opt => opt !== currentNodeId);
+  function nodeIndexById(nodeId) {
+    return editorState.draftNodes.findIndex(n => n.id === nodeId);
+  }
 
-      let seenIds = [];
+  function currentNode() {
+    const idx = nodeIndexById(editorState.selectedNodeId);
+    return idx >= 0 ? editorState.draftNodes[idx] : null;
+  }
 
-      const selected = choice.selectedIndex;
-      $(choice).find('option').each((index, option) => {
-        const $option = $(option);
-        const val = $option.val();
-        if (availableIds.includes(val)) {
-          // Update display text, as the node label may have changed
-          $option.text(options[val]);
-        } else {
-          // the node was deleted, so remove the option
-          $option.remove();
-          // if the selected option was removed, unselect (otherwise another will be selected, which is confusing)
-          if (selected == index) {
-            choice.selectedIndex = -1;
-          }
-        }
-        seenIds.push(val);
-      });
+  function nodeOptions(excludeNodeId) {
+    return editorState.draftNodes
+      .map((n, idx) => ({ id: n.id, label: `Node ${idx + 1}` }))
+      .filter(opt => opt.id !== excludeNodeId);
+  }
 
-      // add any new nodes
-      for (const nodeId of availableIds) {
-        if (!seenIds.includes(nodeId)) {
-          const $option = $('<option>');
-          $option.val(nodeId);
-          $option.text(options[nodeId]);
-          $(choice).append($option);
-        }
-      }
+  function activeNodes() {
+    return editorState.draftNodes.filter(node => !node.pending_delete);
+  }
 
-    });
+  function pendingDeleteNodes() {
+    return editorState.draftNodes.filter(node => node.pending_delete);
   }
 
-  function updateTranscriptVisibility($scope) {
-    const $target = $scope ? $scope.find('.media-type') : $editor.find('.media-type');
-    $target.each(function() {
-      const type = $(this).val();
-      const $field = $(this).closest('label').find('.transcript-field');
-      if (type === 'audio' || type === 'video') {
-        $field.show();
-      } else {
-        $field.hide();
+  // Reset all rendered validation state before a fresh server response is applied.
+  function clearValidationState() {
+    editorState.settingsFieldErrors = {};
+    editorState.validationErrors = [];
+    editorState.validationNodeErrorIds = new Set();
+    editorState.validationNodeErrorDetailsById = new Map();
+    editorState.validationNodeErrorTitlesById = new Map();
+    editorState.validationFieldErrorsByNodeId = new Map();
+  }
+
+  function updateFooterUi() {
+    const pendingCount = pendingDeleteNodes().length;
+    if (editorState.currentStep !== 'nodes' || pendingCount === 0 || editorState.validationErrors.length > 0) {
+      $pendingDeleteSummary.attr('hidden', true).text('');
+      return;
+    }
+    const nodeWord = pendingCount === 1 ? 'node' : 'nodes';
+    $pendingDeleteSummary
+      .attr('hidden', false)
+      .text(`${pendingCount} ${nodeWord} will be deleted when you save.`);
+  }
+
+  function firstErroredNodeId() {
+    return editorState.draftNodes.find(
+      (node) => editorState.validationNodeErrorIds?.has(node.id)
+    )?.id || null;
+  }
+
+  // Map backend structured errors into the editor's view model. This is the
+  // canonical validation bridge from API contract -> per-field/per-node UI state.
+  function applyServerValidation(res) {
+    clearValidationState();
+
+    const fieldErrors = (res && res.field_errors) || {};
+    const nodeFieldErrors = fieldErrors.node_input_errors || fieldErrors.node_field_errors || {};
+    const nodeErrors = fieldErrors.node_action_errors || fieldErrors.node_errors || {};
+    const settingsFieldErrors = fieldErrors.settings_field_errors || {};
+    const globalErrors = Array.isArray(fieldErrors.global_errors) ? fieldErrors.global_errors : [];
+
+    Object.entries(nodeFieldErrors).forEach(([nodeId, nodeFieldError]) => {
+      if (!nodeFieldError || typeof nodeFieldError !== 'object') {
+        return;
       }
+      editorState.validationFieldErrorsByNodeId.set(nodeId, nodeFieldError);
+      editorState.validationNodeErrorIds.add(nodeId);
     });
+
+    Object.entries(nodeErrors).forEach(([nodeId, nodeError]) => {
+      if (!nodeError || typeof nodeError !== 'object') {
+        return;
+      }
+      if (nodeError.title) {
+        editorState.validationNodeErrorTitlesById.set(nodeId, nodeError.title);
+      }
+      if (nodeError.detail) {
+        editorState.validationNodeErrorDetailsById.set(nodeId, nodeError.detail);
+      }
+      editorState.validationNodeErrorIds.add(nodeId);
+    });
+
+    editorState.settingsFieldErrors = settingsFieldErrors;
+    editorState.validationErrors = globalErrors.slice();
   }
 
-  function bindInteractions() {
-    $editor.find('.btn-delete-node').off('click').on('click', function() {
-      $(this).closest('.node-block').remove();
-      $editor.find('.node-block').each((i, el) => {
-          $(el).attr('data-node-idx', i)
-               .find('.node-title').text(`Node ${i+1}`);
+  // Render top-level summary area when any backend validation errors exist.
+  function updateClientValidationUi() {
+    const hasInlineFieldErrors =
+      Object.keys(editorState.settingsFieldErrors || {}).length > 0
+      || (editorState.validationFieldErrorsByNodeId && editorState.validationFieldErrorsByNodeId.size > 0)
+      || (editorState.validationNodeErrorIds && editorState.validationNodeErrorIds.size > 0);
+
+    if (editorState.validationErrors.length > 0 || hasInlineFieldErrors) {
+      $errors.empty();
+      editorState.validationErrors.forEach(msg => $errors.append($('<div>').text(msg)));
+      $saveValidationSummary
+        .attr('hidden', false)
+        .text("We weren't able to save your selections. Please fix the errors shown and try again.");
+    } else {
+      $saveValidationSummary.attr('hidden', true).text('');
+      $errors.empty();
+    }
+    $saveBtn.prop('disabled', false);
+    updateFooterUi();
+  }
+
+  // ---------------------------
+  // Render functions
+  // ---------------------------
+  function renderSettings() {
+    $stepSettings.html(Templates['settings-step']({
+      ...editorState.draftSettings,
+      background_image_url_error: editorState.settingsFieldErrors.background_image_url || '',
+      background_image_alt_text_error: editorState.settingsFieldErrors.background_image_alt_text || '',
+      grade_ranges_error: editorState.settingsFieldErrors.grade_ranges || '',
+    }));
+    renderGradeRangeSlider();
+  }
+
+  function renderNodeList() {
+    const incomingReferenceCounts = new Map();
+    editorState.draftNodes.forEach(node => incomingReferenceCounts.set(node.id, 0));
+
+    activeNodes().forEach((sourceNode) => {
+      (sourceNode.choices || []).forEach((choice) => {
+        const targetNodeId = (choice?.target_node_id || '').trim();
+        if (!targetNodeId || !incomingReferenceCounts.has(targetNodeId)) {
+          return;
+        }
+        incomingReferenceCounts.set(
+          targetNodeId,
+          (incomingReferenceCounts.get(targetNodeId) || 0) + 1
+        );
       });
-      updateChoiceUI();
     });
 
-    $editor.find('.media-type').off('change').on('change', function() {
-      updateTranscriptVisibility($(this).closest('.node-block'));
+    const $list = $stepNodes.find('[data-role="node-list"]').empty();
+    editorState.draftNodes.forEach((n, idx) => {
+      const isUnlinked = !n.pending_delete && idx > 0 && (incomingReferenceCounts.get(n.id) || 0) === 0;
+      $list.append(Templates['node-list-item']({
+        id: n.id,
+        number: idx + 1,
+        is_selected: n.id === editorState.selectedNodeId,
+        is_pending_delete: Boolean(n.pending_delete),
+        has_errors: editorState.validationNodeErrorIds?.has(n.id),
+        is_unlinked: isUnlinked,
+      }));
     });
 
-    $editor.off('click', '.btn-add-choice').on('click', '.btn-add-choice', function() {
-      const $container = $(this).closest('.choices-container');
-      const currentNodeId = $(this).closest('.node-block').data('node-id');
-      const options = $editor.find('.node-block').map((j, nb) => ({
-        id:  $(nb).data('node-id'),
-        label: `Node ${j+1}`
-      })).get().filter(opt => opt.id !== currentNodeId);
-      const newIndex = $container.find('.choice-row').length;
-      const html = Templates['choice-row']({
-        choice: { text: '', target_node_id: '' },
-        i: newIndex,
-        options
-      });
-      $container.append(html);
+    const atLimit = activeNodes().length >= 30;
+    $stepNodes.find('[data-role="add-node"]').prop('disabled', atLimit);
+  }
+
+  function renderNodeEditor() {
+    const node = currentNode();
+    const idx = nodeIndexById(editorState.selectedNodeId);
+    if (!node || idx < 0) {
+      $stepNodes.find('[data-role="node-editor"]').empty();
+      return;
+    }
+
+    const mediaType = node.media?.type || '';
+    const isImage = mediaType === 'image';
+    const showMediaUrl = Boolean(mediaType) && !isImage;
+    const showTranscript = mediaType === 'audio' || mediaType === 'video';
+    const showOverlay = mediaType === 'image';
+    const hasChoices = Array.isArray(node.choices) && node.choices.length > 0;
+    const noBranches = Boolean(node.no_branches) && !hasChoices;
+
+    const leftImageUrl = isImage
+      ? (node.left_image_url ?? node.media?.url ?? '')
+      : '';
+    const rightImageUrl = isImage
+      ? (node.right_image_url ?? '')
+      : '';
+    const currentNodeFieldErrors = editorState.validationFieldErrorsByNodeId?.get(node.id) || {};
+
+    const html = Templates['node-editor']({
+      ...node,
+      number: idx + 1,
+      is_image: isImage,
+      show_media_url: showMediaUrl,
+      show_transcript: showTranscript,
+      show_overlay: showOverlay,
+      has_choices: hasChoices,
+      no_branches: noBranches,
+      is_pending_delete: Boolean(node.pending_delete),
+      node_error_title: editorState.validationNodeErrorTitlesById?.get(node.id) || '',
+      node_error_detail: editorState.validationNodeErrorDetailsById?.get(node.id) || '',
+      left_image_url_error: currentNodeFieldErrors.left_image_url || '',
+      left_image_url: leftImageUrl,
+      right_image_url: rightImageUrl,
     });
+    const $editor = $stepNodes.find('[data-role="node-editor"]').html(html);
+    const $choices = $editor.find('[data-role="choices-container"]').empty();
+    const options = nodeOptions(node.id);
+    const choiceDestinationErrors = currentNodeFieldErrors.choiceDestinationByIndex || {};
+    const choiceScoreErrors = currentNodeFieldErrors.choiceScoreByIndex || {};
+    (node.choices || []).forEach((choice, i) => {
+      $choices.append(Templates['choice-row']({
+        choice,
+        i,
+        options,
+        destination_error: choiceDestinationErrors[i] || '',
+        score_error: choiceScoreErrors[i] || '',
+      }));
+    });
+  }
 
-  $editor.off('click', '.btn-delete-choice').on('click', '.btn-delete-choice', function() {
-    $(this).closest('.choice-row').remove();
-  });
+  function renderNodesStep() {
+    $stepNodes.html(Templates['nodes-step']({}));
+    renderNodeList();
+    renderNodeEditor();
+  }
 
-    $editor.find('.btn-add-node').off('click').on('click', function() {
-      const idx = $editor.find('.node-block').length;
-      const nodeContext = {
-        node: {
-          id:      uniqueId(),
-          content: '',
-          media:   { type: '', url: '' },
-          choices: [],
-          hint:    '',
-          transcript_url: ''
-        },
-        idx
-      };
-      const html = Templates['node-block'](nodeContext);
-      const $newNode = $(html);
-      $(this).before($newNode);
-      bindInteractions();
-      updateChoiceUI();
-      updateTranscriptVisibility($newNode);
+  // Full rerender used on initial load and after major state transitions.
+  function renderAll() {
+    $errors.empty();
+    renderSettings();
+    renderNodesStep();
+    showStep(editorState.currentStep);
+    updateFooterUi();
+    updateClientValidationUi();
+  }
+
+  // ---------------------------
+  // DOM -> draft synchronization
+  // ---------------------------
+  function syncSettingsFromDom() {
+    // Pull settings fields into draft state before navigation/save.
+    const $s = $stepSettings;
+    editorState.draftSettings.display_name = $s.find('[name="display_name"]').val()?.trim() || '';
+    editorState.draftSettings.enable_undo = $s.find('[name="enable_undo"]').is(':checked');
+    editorState.draftSettings.enable_reset_activity = $s.find('[name="enable_reset_activity"]').is(':checked');
+    editorState.draftSettings.enable_scoring = $s.find('[name="enable_scoring"]').is(':checked');
+    editorState.draftSettings.background_image_url = $s.find('[name="background_image_url"]').val()?.trim() || '';
+    editorState.draftSettings.background_image_is_decorative = $s.find('[name="background_image_is_decorative"]').is(':checked');
+    editorState.draftSettings.background_image_alt_text = $s.find('[name="background_image_alt_text"]').val()?.trim() || '';
+  }
+
+  function syncCurrentNodeFromDom() {
+    // Pull the currently open node editor inputs into draft state.
+    const node = currentNode();
+    if (!node) {
+      return;
+    }
+    const $e = $stepNodes.find('.bx-node-editor-inner');
+    node.content = $e.find('[data-role="node-content"]').val() || '';
+    node.hint = $e.find('[data-role="node-hint"]').val() || '';
+
+    const mediaType = $e.find('[data-role="media-type"]').val() || '';
+    const mediaUrl = $e.find('[data-role="media-url"]').val()?.trim() || '';
+    const transcriptUrl = $e.find('[data-role="transcript-url"]').val()?.trim() || '';
+    node.media.type = mediaType;
+    node.media.url = (mediaType && mediaType !== 'image') ? mediaUrl : '';
+    node.transcript_url = (mediaType === 'audio' || mediaType === 'video') ? transcriptUrl : '';
+    node.overlay_text = mediaType === 'image' ? $e.find('[data-role="overlay-text"]').is(':checked') : false;
+
+    if (mediaType === 'image') {
+      node.left_image_url = $e.find('[data-role="left-image-url"]').val()?.trim() || '';
+      node.right_image_url = $e.find('[data-role="right-image-url"]').val()?.trim() || '';
+    } else {
+      node.left_image_url = '';
+      node.right_image_url = '';
+    }
+
+    const noBranches = $e.find('[data-role="no-branches"]').is(':checked');
+    node.no_branches = noBranches;
+    if (noBranches) {
+      node.choices = [];
+      return;
+    }
+
+    const choices = [];
+    $e.find('.choice-row').each(function() {
+      const $row = $(this);
+      const text = $row.find('.choice-text').val()?.trim() || '';
+      const target = $row.find('.choice-target').val()?.trim() || '';
+      const rawScore = $row.find('.choice-score').val();
+      const score = rawScore;
+      if (text || target) {
+        choices.push({ text, target_node_id: target, score });
+      }
     });
+    node.choices = choices;
   }
 
+  // Apply backend validation and move user to the most relevant step.
+  function showErrors(res) {
+    applyServerValidation(res);
+    const erroredNodeId = firstErroredNodeId();
+    if (erroredNodeId && !editorState.validationNodeErrorIds?.has(editorState.selectedNodeId)) {
+      editorState.selectedNodeId = erroredNodeId;
+    }
+    renderSettings();
+    renderNodeList();
+    renderNodeEditor();
+    if (Object.keys(editorState.settingsFieldErrors).length > 0) {
+      showStep('settings');
+    } else {
+      showStep('nodes');
+    }
+  }
+
+  // ---------------------------
+  // Button actions
+  // ---------------------------
   function bindActions() {
+    $continueBtn.off('click').on('click', function() {
+      syncSettingsFromDom();
+      showStep('nodes');
+    });
 
-    const $settings = $editor.find('.settings');
+    $backBtn.off('click').on('click', function() {
+      syncCurrentNodeFromDom();
+      showStep('settings');
+    });
 
     $saveBtn.off('click').on('click', function() {
+      // Save pipeline: sync draft state and submit full payload for backend-
+      // only validation. Frontend renders structured field errors from server.
+      syncSettingsFromDom();
+      syncCurrentNodeFromDom();
+      clearValidationState();
+      updateClientValidationUi();
+
       const payload = {
-          nodes: [],
-          enable_undo:    $settings.find('[name="enable_undo"]').is(':checked'),
-          enable_scoring: $settings.find('[name="enable_scoring"]').is(':checked'),
-          enable_reset_activity: $settings.find('[name="enable_reset_activity"]').is(':checked'),
-          max_score:      parseFloat($settings.find('[name="max_score"]').val()) || 0,
-          display_name:   $settings.find('[name="display_name"]').val()?.trim() || ''
+        nodes: editorState.draftNodes.map(n => ({
+          id: n.id,
+          content: (n.content || '').trim(),
+          media: {
+            type: n.media?.type || '',
+            url: (n.media?.type === 'image') ? '' : (n.media?.url || '').trim(),
+          },
+          choices: Array.isArray(n.choices)
+                ? n.choices
+                  // Keep partially filled choices so backend can return field-level validation.
+                  .filter(c => (c?.text || '').trim() || (c?.target_node_id || '').trim())
+                  .map(c => ({
+                    text: c.text,
+                    target_node_id: c.target_node_id,
+                    score: c.score,
+                  }))
+                : [],
+          hint: (n.hint || '').trim(),
+          overlay_text: Boolean(n.overlay_text),
+          left_image_url: (n.left_image_url || '').trim(),
+          right_image_url: (n.right_image_url || '').trim(),
+          transcript_url: (n.transcript_url || '').trim(),
+        })),
+        deleted_node_ids: editorState.draftNodes
+          .filter(node => node.pending_delete)
+          .map(node => node.id),
+        enable_undo: Boolean(editorState.draftSettings.enable_undo),
+        enable_scoring: Boolean(editorState.draftSettings.enable_scoring),
+        enable_reset_activity: Boolean(editorState.draftSettings.enable_reset_activity),
+        display_name: editorState.draftSettings.display_name || '',
+        background_image_url: editorState.draftSettings.background_image_url || '',
+        background_image_alt_text: editorState.draftSettings.background_image_alt_text || '',
+        background_image_is_decorative: Boolean(editorState.draftSettings.background_image_is_decorative),
+        grade_ranges: (editorState.draftSettings.grade_ranges || []).map((gradeRange) => ({
+          label: gradeRange.label,
+          start: gradeRange.start,
+          end: gradeRange.end,
+        })),
       };
 
-      $editor.find('.node-block').each(function() {
-        const $n = $(this);
-        const content = $n.find('.node-content').val()?.trim() || '';
-        const mediaUrl = $n.find('.media-url').val()?.trim() || '';
-        const mediaType = $n.find('.media-type').val();
-        const choices = [];
-        const nodeHint = $n.find('.node-hint').val()?.trim() || '';
-        const transcriptUrl = $n.find('.transcript-url').val()?.trim() || '';
-
-        $n.find('.choice-row').each(function() {
-          const $c = $(this);
-          const text   = $c.find('.choice-text').val()?.trim() || '';
-          const target = $c.find('.choice-target').val()?.trim() || '';
-          if (text && target) {
-              choices.push({ text: text, target_node_id: target });
-          }
-        });
-        if (content || mediaUrl || choices.length || transcriptUrl) {
-          payload.nodes.push({
-              id:     $n.data('node-id'),
-              content,
-              media:  { type: mediaType, url: mediaUrl },
-              choices,
-              hint: nodeHint,
-              transcript_url: transcriptUrl
-          });
-        }
-      });
-      runtime.notify('save', { state: 'start' });
-
+      $saveBtn.prop('disabled', true);
       $.ajax({
         type: 'POST',
         url: runtime.handlerUrl(element, 'studio_submit'),
@@ -225,15 +574,24 @@ function BranchingStudioEditor(runtime, element, data) {
         contentType: 'application/json; charset=utf-8'
       }).done(function(res) {
         if (res.result === 'success') {
-            runtime.notify('save',  { state: 'end' });
-            runtime.notify('cancel', {});
+          // Trigger Studio's global saving animation only for successful saves.
+          runtime.notify('save', { state: 'start' });
+          runtime.notify('save', { state: 'end' });
+          runtime.notify('cancel', {});
         } else {
-            const errs = (res.field_errors || {}).nodes_json || [res.message];
-            $errors.empty();
-            errs.forEach(msg => $errors.append($('<div>').text(msg)));
+          // Keep Studio editor open for backend validation errors so
+          // structured field errors can be shown inline.
+          showErrors(res);
+          $saveBtn.prop('disabled', false);
         }
       }).fail(function() {
-          $errors.text('Error saving scenario');
+        // Keep editor open on transport/server failures and surface a
+        // top-level message for retry.
+        $errors.text('Error saving scenario');
+        $saveValidationSummary
+          .attr('hidden', false)
+          .text("We weren't able to save your selections. Please try again.");
+        $saveBtn.prop('disabled', false);
       });
     });
 
@@ -243,5 +601,207 @@ function BranchingStudioEditor(runtime, element, data) {
     });
   }
 
-  render(data || {});
+  // ---------------------------
+  // Fine-grained interactions
+  // ---------------------------
+  function bindInteractions() {
+    // Settings inputs update draft settings live and clear stale server errors.
+    $root.off('change.bx-settings input.bx-settings', '[data-role="step-settings"] input, [data-role="step-settings"] textarea');
+    $root.on('change.bx-settings input.bx-settings', '[data-role="step-settings"] input, [data-role="step-settings"] textarea', function() {
+      syncSettingsFromDom();
+      clearValidationState();
+      updateClientValidationUi();
+      const decorative = editorState.draftSettings.background_image_is_decorative;
+      const $alt = $stepSettings.find('[name="background_image_alt_text"]');
+      $alt.prop('disabled', decorative);
+      if (decorative) {
+        $alt.val('');
+        editorState.draftSettings.background_image_alt_text = '';
+      }
+      renderGradeRangeSlider();
+    });
+
+    $root.off('mousedown.bx-grade-range', '[data-role="grade-boundary-handle"]');
+    $root.on('mousedown.bx-grade-range', '[data-role="grade-boundary-handle"]', function(event) {
+      event.preventDefault();
+      const boundaryIndex = Number($(this).attr('data-boundary-index'));
+      if (Number.isNaN(boundaryIndex)) {
+        return;
+      }
+
+      function applyDrag(clientX) {
+        const $track = $stepSettings.find('[data-role="grade-track"]');
+        if (!$track.length) {
+          return;
+        }
+        const bounds = $track[0].getBoundingClientRect();
+        if (bounds.width <= 0) {
+          return;
+        }
+        const ratio = Math.max(0, Math.min(1, (clientX - bounds.left) / bounds.width));
+        const requestedValue = Math.round(ratio * 100);
+        setBoundaryValue(boundaryIndex, requestedValue);
+        renderGradeRangeSlider();
+      }
+
+      function stopDrag() {
+        $(document).off('mousemove.bx-grade-range-drag');
+        $(document).off('mouseup.bx-grade-range-drag');
+      }
+
+      applyDrag(event.clientX);
+      $(document).on('mousemove.bx-grade-range-drag', function(moveEvent) {
+        applyDrag(moveEvent.clientX);
+      });
+      $(document).on('mouseup.bx-grade-range-drag', function() {
+        stopDrag();
+      });
+    });
+
+    $root.off('keydown.bx-grade-range', '[data-role="grade-boundary-handle"]');
+    $root.on('keydown.bx-grade-range', '[data-role="grade-boundary-handle"]', function(event) {
+      const boundaryIndex = Number($(this).attr('data-boundary-index'));
+      if (Number.isNaN(boundaryIndex)) {
+        return;
+      }
+      const gradeRanges = editorState.draftSettings.grade_ranges;
+      if (!Array.isArray(gradeRanges) || gradeRanges.length < 2) {
+        return;
+      }
+      const currentBoundary = gradeRanges[boundaryIndex]?.end;
+      if (typeof currentBoundary !== 'number') {
+        return;
+      }
+      const bounds = boundaryBounds(boundaryIndex, gradeRanges);
+      let nextValue = currentBoundary;
+      if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+        nextValue = currentBoundary - 1;
+      } else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+        nextValue = currentBoundary + 1;
+      } else if (event.key === 'Home') {
+        nextValue = bounds.lower;
+      } else if (event.key === 'End') {
+        nextValue = bounds.upper;
+      } else {
+        return;
+      }
+      event.preventDefault();
+      setBoundaryValue(boundaryIndex, nextValue);
+      renderGradeRangeSlider();
+    });
+
+    // Node list actions.
+    $root.off('click.bx-nodes', '[data-role="add-node"]');
+    $root.on('click.bx-nodes', '[data-role="add-node"]', function() {
+      if (activeNodes().length >= 30) {
+        return;
+      }
+      syncCurrentNodeFromDom();
+      const node = buildDraftNode({});
+      editorState.draftNodes.push(node);
+      editorState.selectedNodeId = node.id;
+      clearValidationState();
+      renderNodeList();
+      renderNodeEditor();
+      updateFooterUi();
+      updateClientValidationUi();
+    });
+
+    $root.off('click.bx-nodes', '[data-role="select-node"]');
+    $root.on('click.bx-nodes', '[data-role="select-node"]', function() {
+      const nodeId = $(this).data('node-id');
+      if (!nodeId || nodeId === editorState.selectedNodeId) {
+        return;
+      }
+      const node = editorState.draftNodes.find(n => n.id === nodeId);
+      if (!node) {
+        return;
+      }
+      syncCurrentNodeFromDom();
+      editorState.selectedNodeId = nodeId;
+      renderNodeList();
+      renderNodeEditor();
+      updateFooterUi();
+      updateClientValidationUi();
+    });
+
+    $root.off('click.bx-nodes', '[data-role="toggle-delete-node"]');
+    $root.on('click.bx-nodes', '[data-role="toggle-delete-node"]', function() {
+      const nodeId = $(this).data('node-id');
+      if (!nodeId) {
+        return;
+      }
+      syncCurrentNodeFromDom();
+      const node = editorState.draftNodes.find(n => n.id === nodeId);
+      if (!node) {
+        return;
+      }
+      node.pending_delete = !node.pending_delete;
+      clearValidationState();
+      updateClientValidationUi();
+      renderNodeList();
+      renderNodeEditor();
+      updateFooterUi();
+    });
+
+    // Node editor actions.
+    $root.off('change.bx-node', '[data-role="media-type"]');
+    $root.on('change.bx-node', '[data-role="media-type"]', function() {
+      syncCurrentNodeFromDom();
+      clearValidationState();
+      renderNodeEditor();
+      updateClientValidationUi();
+    });
+
+    $root.off('change.bx-node', '[data-role="no-branches"]');
+    $root.on('change.bx-node', '[data-role="no-branches"]', function() {
+      syncCurrentNodeFromDom();
+      clearValidationState();
+      renderNodeEditor();
+      updateClientValidationUi();
+    });
+
+    $root.off('click.bx-node', '[data-role="add-choice"]');
+    $root.on('click.bx-node', '[data-role="add-choice"]', function() {
+      const node = currentNode();
+      if (!node) {
+        return;
+      }
+      syncCurrentNodeFromDom();
+      node.no_branches = false;
+      node.choices = Array.isArray(node.choices) ? node.choices : [];
+      node.choices.push({ text: '', target_node_id: '', score: 0 });
+      clearValidationState();
+      renderNodeEditor();
+      updateClientValidationUi();
+    });
+
+    $root.off('click.bx-node', '.btn-delete-choice');
+    $root.on('click.bx-node', '.btn-delete-choice', function() {
+      const node = currentNode();
+      if (!node) {
+        return;
+      }
+      const idx = Number($(this).closest('.choice-row').data('choice-idx'));
+      syncCurrentNodeFromDom();
+      if (!Number.isNaN(idx)) {
+        node.choices.splice(idx, 1);
+      }
+      clearValidationState();
+      renderNodeEditor();
+      updateClientValidationUi();
+    });
+  }
+
+  // Bootstrap flow: wire handlers first, then hydrate + render.
+  function init() {
+    bindActions();
+    bindInteractions();
+    loadState().then(function(state) {
+      hydrateInitialState(state || {});
+      renderAll();
+    });
+  }
+
+  init();
 }
diff --git a/tests/test_branching_xblock.py b/tests/test_branching_xblock.py
index 25b0123..08a363d 100644
--- a/tests/test_branching_xblock.py
+++ b/tests/test_branching_xblock.py
@@ -69,7 +69,7 @@ def test_get_current_state_empty(rf, block):
     assert state["nodes"] == {}
     assert state["current_node"] is None
     assert state["has_completed"] is False
-    assert state["score"] == 0.0
+    assert state["score"] == 0
 
 
 def test_studio_submit_creates_scenario(rf, block):
@@ -82,8 +82,10 @@ def test_studio_submit_creates_scenario(rf, block):
             {
                 "id": "temp-1",
                 "content": "First node",
-                "media": {"type": "image", "url": "http://img"},
-                "choices": [{"text": "Go to 2", "target_node_id": "temp-2"}],
+                "media": {"type": "image", "url": ""},
+                "left_image_url": "http://img",
+                "right_image_url": "",
+                "choices": [{"text": "Go to 2", "target_node_id": "temp-2", "score": 77}],
                 "transcript_url": ""
             },
             {
@@ -96,7 +98,7 @@ def test_studio_submit_creates_scenario(rf, block):
         ],
         "enable_undo": True,
         "enable_scoring": True,
-        "max_score": 77
+        "max_score": 0
     }
     req = rf.post(
         "/", data=json.dumps(payload), content_type="application/json"
@@ -118,6 +120,173 @@ def test_studio_submit_creates_scenario(rf, block):
     assert block.max_score == 77
 
 
+def test_studio_submit_computes_max_score_from_best_path(rf, block):
+    payload = {
+        "nodes": [
+            {
+                "id": "temp-1",
+                "content": "Start",
+                "media": {"type": "", "url": ""},
+                "choices": [
+                    {"text": "to A", "target_node_id": "temp-2", "score": 10},
+                    {"text": "to B", "target_node_id": "temp-3", "score": 20},
+                ],
+                "transcript_url": "",
+            },
+            {
+                "id": "temp-2",
+                "content": "A",
+                "media": {"type": "", "url": ""},
+                "choices": [{"text": "to End1", "target_node_id": "temp-4", "score": 30}],
+                "transcript_url": "",
+            },
+            {
+                "id": "temp-3",
+                "content": "B",
+                "media": {"type": "", "url": ""},
+                "choices": [{"text": "to End2", "target_node_id": "temp-5", "score": 15}],
+                "transcript_url": "",
+            },
+            {
+                "id": "temp-4",
+                "content": "End 1",
+                "media": {"type": "", "url": ""},
+                "choices": [],
+                "transcript_url": "",
+            },
+            {
+                "id": "temp-5",
+                "content": "End 2",
+                "media": {"type": "", "url": ""},
+                "choices": [],
+                "transcript_url": "",
+            },
+        ],
+        "enable_undo": False,
+        "enable_scoring": True,
+        "max_score": 0,
+    }
+    req = rf.post("/", data=json.dumps(payload), content_type="application/json")
+    resp = block.studio_submit(req)
+    result = json.loads(resp.body.decode("utf-8"))
+
+    assert result["result"] == "success"
+    assert block.max_score == 40
+
+
+def test_studio_submit_rejects_invalid_choice_score(rf, block):
+    payload = {
+        "nodes": [
+            {
+                "id": "temp-1",
+                "content": "Start",
+                "media": {"type": "", "url": ""},
+                "choices": [{"text": "to B", "target_node_id": "temp-2", "score": "1.5"}],
+                "transcript_url": "",
+            },
+            {
+                "id": "temp-2",
+                "content": "End",
+                "media": {"type": "", "url": ""},
+                "choices": [],
+                "transcript_url": "",
+            },
+        ],
+        "enable_undo": False,
+        "enable_scoring": True,
+    }
+    req = rf.post("/", data=json.dumps(payload), content_type="application/json")
+    resp = block.studio_submit(req)
+    result = json.loads(resp.body.decode("utf-8"))
+
+    assert result["result"] == "error"
+    assert (
+        result["field_errors"]["node_input_errors"]["temp-1"]["choiceScoreByIndex"]["0"]
+        == "Score must be an integer between 0 and 100."
+    )
+    assert "nodes_json" not in result["field_errors"]
+
+
+def test_studio_submit_normalizes_choice_score_from_string(rf, block):
+    payload = {
+        "nodes": [
+            {
+                "id": "temp-1",
+                "content": "Start",
+                "media": {"type": "", "url": ""},
+                "choices": [{"text": "to B", "target_node_id": "temp-2", "score": "7"}],
+                "transcript_url": "",
+            },
+            {
+                "id": "temp-2",
+                "content": "End",
+                "media": {"type": "", "url": ""},
+                "choices": [],
+                "transcript_url": "",
+            },
+        ],
+        "enable_undo": False,
+        "enable_scoring": True,
+    }
+    req = rf.post("/", data=json.dumps(payload), content_type="application/json")
+    resp = block.studio_submit(req)
+    result = json.loads(resp.body.decode("utf-8"))
+
+    assert result["result"] == "success"
+    saved_nodes = block.scenario_data["nodes"]
+    first_node = next(node for node in saved_nodes.values() if node["choices"])
+    assert first_node["choices"][0]["score"] == 7
+    assert block.max_score == 7
+
+
+def test_normalize_scenario_nodes_preserves_non_empty_invalid_scores(block):
+    block.scenario_data = {
+        "nodes": {
+            "A": {
+                "id": "A",
+                "type": "start",
+                "choices": [
+                    {"text": "to B", "target_node_id": "B", "score": "1.5"},
+                    {"text": "to B", "target_node_id": "B", "score": "101"},
+                ],
+            },
+            "B": {"id": "B", "type": "end", "choices": []},
+        },
+        "start_node_id": "A",
+    }
+
+    block._normalize_scenario_nodes()
+    node_a = block.scenario_data["nodes"]["A"]
+    assert node_a["choices"][0]["score"] == "1.5"
+    assert node_a["choices"][1]["score"] == "101"
+
+
+def test_normalize_scenario_nodes_defaults_empty_scores_to_zero(block):
+    block.scenario_data = {
+        "nodes": {
+            "A": {
+                "id": "A",
+                "type": "start",
+                "choices": [
+                    {"text": "to B", "target_node_id": "B"},
+                    {"text": "to B", "target_node_id": "B", "score": ""},
+                    {"text": "to B", "target_node_id": "B", "score": "   "},
+                    {"text": "to B", "target_node_id": "B", "score": None},
+                ],
+            },
+            "B": {"id": "B", "type": "end", "choices": []},
+        },
+        "start_node_id": "A",
+    }
+
+    block._normalize_scenario_nodes()
+    node_a = block.scenario_data["nodes"]["A"]
+    assert node_a["choices"][0]["score"] == 0
+    assert node_a["choices"][1]["score"] == 0
+    assert node_a["choices"][2]["score"] == 0
+    assert node_a["choices"][3]["score"] == 0
+
+
 def test_studio_submit_persists_enable_reset_activity(rf, block):
     payload = {
         "nodes": [
@@ -141,6 +310,59 @@ def test_studio_submit_persists_enable_reset_activity(rf, block):
     assert block.enable_reset_activity is True
 
 
+def test_studio_submit_persists_grade_ranges(rf, block):
+    payload = {
+        "nodes": [
+            {
+                "id": "temp-1",
+                "content": "Start node",
+                "media": {"type": "", "url": ""},
+                "choices": [],
+                "transcript_url": "",
+            },
+        ],
+        "enable_undo": False,
+        "enable_scoring": True,
+        "grade_ranges": [
+            {"label": "Fail", "start": 0, "end": 59},
+            {"label": "Pass", "start": 60, "end": 100},
+        ],
+    }
+    req = rf.post("/", data=json.dumps(payload), content_type="application/json")
+    resp = block.studio_submit(req)
+    result = json.loads(resp.body.decode("utf-8"))
+    assert result["result"] == "success"
+    assert block.grade_ranges == [
+        {"label": "Fail", "start": 0, "end": 59},
+        {"label": "Pass", "start": 60, "end": 100},
+    ]
+
+
+def test_studio_submit_rejects_invalid_grade_ranges(rf, block):
+    payload = {
+        "nodes": [
+            {
+                "id": "temp-1",
+                "content": "Start node",
+                "media": {"type": "", "url": ""},
+                "choices": [],
+                "transcript_url": "",
+            },
+        ],
+        "enable_undo": False,
+        "enable_scoring": True,
+        "grade_ranges": [
+            {"label": "Fail", "start": 0, "end": 49},
+            {"label": "Pass", "start": 70, "end": 100},
+        ],
+    }
+    req = rf.post("/", data=json.dumps(payload), content_type="application/json")
+    resp = block.studio_submit(req)
+    result = json.loads(resp.body.decode("utf-8"))
+    assert result["result"] == "error"
+    assert "Grade range" in result["field_errors"]["settings_field_errors"]["grade_ranges"]
+
+
 def test_studio_submit_persists_display_name(rf, block):
     payload = {
         "nodes": [
@@ -164,6 +386,34 @@ def test_studio_submit_persists_display_name(rf, block):
     assert block.display_name == "My Branching Scenario"
 
 
+def test_studio_submit_preserves_image_only_node(rf, block):
+    payload = {
+        "nodes": [
+            {
+                "id": "temp-1",
+                "content": "",
+                "media": {"type": "image", "url": ""},
+                "left_image_url": "https://example.com/left.png",
+                "right_image_url": "",
+                "choices": [],
+                "transcript_url": "",
+            },
+        ],
+        "enable_undo": False,
+        "enable_scoring": False,
+        "max_score": 0,
+    }
+    req = rf.post("/", data=json.dumps(payload), content_type="application/json")
+    resp = block.studio_submit(req)
+    result = json.loads(resp.body.decode("utf-8"))
+
+    assert result["result"] == "success"
+    nodes = block.scenario_data["nodes"]
+    assert len(nodes) == 1
+    saved_node = next(iter(nodes.values()))
+    assert saved_node["left_image_url"] == "https://example.com/left.png"
+
+
 def test_get_current_state_includes_display_name(rf, block):
     block.scenario_data = {
         "nodes": {"X": {"id": "X", "type": "start", "choices": []}},
@@ -200,8 +450,224 @@ def test_studio_submit_fails_on_invalid_target(rf, block):
     resp = block.studio_submit(req)
     result = json.loads(resp.body.decode('utf-8'))
     assert result["result"] == "error"
-    errs = result["field_errors"]["nodes_json"]
-    assert any("Invalid target does-not-exist" in e for e in errs)
+    assert (
+        result["field_errors"]["node_input_errors"]["temp-1"]["choiceDestinationByIndex"]["0"]
+        == "Selected destination is invalid."
+    )
+
+
+def test_studio_submit_rejects_cycle(rf, block):
+    payload = {
+        "nodes": [
+            {
+                "id": "temp-1",
+                "content": "Node A",
+                "media": {"type": "", "url": ""},
+                "choices": [{"text": "to B", "target_node_id": "temp-2"}],
+            },
+            {
+                "id": "temp-2",
+                "content": "Node B",
+                "media": {"type": "", "url": ""},
+                "choices": [{"text": "to A", "target_node_id": "temp-1"}],
+            },
+        ],
+        "enable_undo": False,
+        "enable_scoring": False,
+    }
+    req = rf.post("/", data=json.dumps(payload), content_type="application/json")
+    resp = block.studio_submit(req)
+    result = json.loads(resp.body.decode("utf-8"))
+
+    assert result["result"] == "error"
+    node_errors = result["field_errors"]["node_action_errors"]
+    assert node_errors["temp-1"]["title"] == "Circular path detected"
+    assert "links back through branching choices" in node_errors["temp-1"]["detail"]
+    assert node_errors["temp-2"]["title"] == "Circular path detected"
+    assert "links back through branching choices" in node_errors["temp-2"]["detail"]
+
+
+def test_studio_submit_rejects_self_loop(rf, block):
+    payload = {
+        "nodes": [
+            {
+                "id": "temp-1",
+                "content": "Node A",
+                "media": {"type": "", "url": ""},
+                "choices": [{"text": "loop", "target_node_id": "temp-1"}],
+            },
+        ],
+        "enable_undo": False,
+        "enable_scoring": False,
+    }
+    req = rf.post("/", data=json.dumps(payload), content_type="application/json")
+    resp = block.studio_submit(req)
+    result = json.loads(resp.body.decode("utf-8"))
+
+    assert result["result"] == "error"
+    node_errors = result["field_errors"]["node_action_errors"]
+    assert node_errors["temp-1"]["title"] == "Circular path detected"
+    assert "links back through branching choices" in node_errors["temp-1"]["detail"]
+
+
+def test_studio_submit_rejects_missing_choice_destination(rf, block):
+    payload = {
+        "nodes": [
+            {
+                "id": "temp-1",
+                "content": "Node A",
+                "media": {"type": "", "url": ""},
+                "choices": [{"text": "Go somewhere", "target_node_id": "", "score": 10}],
+            },
+            {
+                "id": "temp-2",
+                "content": "Node B",
+                "media": {"type": "", "url": ""},
+                "choices": [],
+            },
+        ],
+    }
+    req = rf.post("/", data=json.dumps(payload), content_type="application/json")
+    resp = block.studio_submit(req)
+    result = json.loads(resp.body.decode("utf-8"))
+
+    assert result["result"] == "error"
+    assert (
+        result["field_errors"]["node_input_errors"]["temp-1"]["choiceDestinationByIndex"]["0"]
+        == "Required field"
+    )
+
+
+def test_studio_submit_rejects_deleting_referenced_node_with_node_action_errors(rf, block):
+    payload = {
+        "nodes": [
+            {
+                "id": "temp-1",
+                "content": "Node A",
+                "media": {"type": "", "url": ""},
+                "choices": [{"text": "to B", "target_node_id": "temp-2", "score": 5}],
+            },
+            {
+                "id": "temp-2",
+                "content": "Node B",
+                "media": {"type": "", "url": ""},
+                "choices": [],
+            },
+        ],
+        "deleted_node_ids": ["temp-2"],
+    }
+    req = rf.post("/", data=json.dumps(payload), content_type="application/json")
+    resp = block.studio_submit(req)
+    result = json.loads(resp.body.decode("utf-8"))
+
+    assert result["result"] == "error"
+    assert (
+        result["field_errors"]["node_input_errors"]["temp-1"]["choiceDestinationByIndex"]["0"]
+        == "Selected destination is pending deletion."
+    )
+    node_errors = result["field_errors"]["node_action_errors"]
+    assert node_errors["temp-2"]["title"] == "You can't delete this node"
+    assert "referenced by Node" in node_errors["temp-2"]["detail"]
+
+
+def test_studio_submit_rejects_image_node_without_any_image_urls(rf, block):
+    payload = {
+        "nodes": [
+            {
+                "id": "temp-1",
+                "content": "Node A",
+                "media": {"type": "image", "url": ""},
+                "left_image_url": "",
+                "right_image_url": "",
+                "choices": [],
+            },
+        ],
+    }
+    req = rf.post("/", data=json.dumps(payload), content_type="application/json")
+    resp = block.studio_submit(req)
+    result = json.loads(resp.body.decode("utf-8"))
+
+    assert result["result"] == "error"
+    assert result["field_errors"]["node_input_errors"]["temp-1"]["left_image_url"] == "Please enter a valid URL"
+
+
+def test_studio_submit_rejects_missing_background_alt_text_with_structured_field_error(rf, block):
+    payload = {
+        "nodes": [
+            {
+                "id": "temp-1",
+                "content": "Start",
+                "media": {"type": "", "url": ""},
+                "choices": [],
+            },
+        ],
+        "background_image_url": "https://example.com/bg.png",
+        "background_image_alt_text": "",
+        "background_image_is_decorative": False,
+    }
+    req = rf.post("/", data=json.dumps(payload), content_type="application/json")
+    resp = block.studio_submit(req)
+    result = json.loads(resp.body.decode("utf-8"))
+
+    assert result["result"] == "error"
+    assert "background_image_alt_text" in result["field_errors"]["settings_field_errors"]
+
+
+def test_studio_submit_accepts_acyclic_graph(rf, block):
+    payload = {
+        "nodes": [
+            {
+                "id": "temp-1",
+                "content": "Node A",
+                "media": {"type": "", "url": ""},
+                "choices": [{"text": "to B", "target_node_id": "temp-2"}],
+            },
+            {
+                "id": "temp-2",
+                "content": "Node B",
+                "media": {"type": "", "url": ""},
+                "choices": [{"text": "to C", "target_node_id": "temp-3"}],
+            },
+            {
+                "id": "temp-3",
+                "content": "Node C",
+                "media": {"type": "", "url": ""},
+                "choices": [],
+            },
+        ],
+        "enable_undo": False,
+        "enable_scoring": False,
+    }
+    req = rf.post("/", data=json.dumps(payload), content_type="application/json")
+    resp = block.studio_submit(req)
+    result = json.loads(resp.body.decode("utf-8"))
+
+    assert result["result"] == "success"
+
+
+def test_studio_submit_handles_non_string_node_id(rf, block):
+    payload = {
+        "nodes": [
+            {
+                "id": 123,
+                "content": "Start",
+                "media": {"type": "", "url": ""},
+                "choices": [],
+            },
+        ],
+        "enable_undo": False,
+        "enable_scoring": False,
+    }
+    req = rf.post("/", data=json.dumps(payload), content_type="application/json")
+    resp = block.studio_submit(req)
+    result = json.loads(resp.body.decode("utf-8"))
+
+    assert result["result"] == "success"
+    saved_nodes = block.scenario_data["nodes"]
+    assert len(saved_nodes) == 1
+    node_id = next(iter(saved_nodes.keys()))
+    assert isinstance(node_id, str)
+    assert node_id.startswith("node-")
 
 
 def test_lazy_initialize_and_select_choice(rf, block):
@@ -227,12 +693,12 @@ def test_lazy_initialize_and_select_choice(rf, block):
 
 def test_select_choice_scores_and_completes(rf, block):
     """
-    If enable_scoring is True, selecting the last branch
-    should set has_completed and award max_score.
+    If enable_scoring is True, selecting a branch should
+    add that branch's score and complete when ending node is reached.
     """
     block.scenario_data = {
         "nodes": {
-            "A": {"id": "A", "type": "start", "choices": [{"text": "→ B", "target_node_id": "B"}]},
+            "A": {"id": "A", "type": "start", "choices": [{"text": "→ B", "target_node_id": "B", "score": 12}]},
             "B": {"id": "B", "type": "end",   "choices": []}
         },
         "start_node_id": "A"
@@ -246,7 +712,39 @@ def test_select_choice_scores_and_completes(rf, block):
     assert result["success"] is True
     assert block.current_node_id == "B"
     assert block.has_completed is True
-    assert block.score == pytest.approx(block.max_score)
+    assert block.score_history == [12]
+    assert result["score"] == 12
+    assert block.choice_history == [
+        {
+            "source_node_id": "A",
+            "choice_text": "→ B",
+            "awarded_points": 12,
+        }
+    ]
+
+
+def test_select_choice_rejects_boolean_score_values(rf, block):
+    block.scenario_data = {
+        "nodes": {
+            "A": {"id": "A", "type": "start", "choices": [{"text": "→ B", "target_node_id": "B", "score": True}]},
+            "B": {"id": "B", "type": "end", "choices": []},
+        },
+        "start_node_id": "A",
+    }
+    block.enable_scoring = True
+    req = rf.post(
+        "/", data=json.dumps({"choice_index": 0}), content_type="application/json"
+    )
+    resp = block.select_choice(req)
+    result = json.loads(resp.body.decode('utf-8'))
+
+    assert result["success"] is False
+    assert result["error"] == "Invalid choice score"
+    assert block.current_node_id == "A"
+    assert block.has_completed is False
+    assert block.score_history == []
+    assert result.get("score", 0) == 0
+    assert block.choice_history == []
 
 
 def test_undo_choice_honors_enable_undo(rf, block):
@@ -279,6 +777,30 @@ def test_undo_choice_honors_enable_undo(rf, block):
     assert resp_fail["success"] is False
 
 
+def test_undo_choice_reverts_choice_history(rf, block):
+    block.scenario_data = {
+        "nodes": {
+            "start": {
+                "id": "start",
+                "type": "start",
+                "choices": [{"text": "to end", "target_node_id": "end", "score": 10}],
+            },
+            "end": {"id": "end", "type": "end", "choices": []},
+        },
+        "start_node_id": "start",
+    }
+    block.enable_undo = True
+    block.enable_scoring = True
+
+    choose_req = rf.post("/", data=json.dumps({"choice_index": 0}), content_type="application/json")
+    block.select_choice(choose_req)
+    assert len(block.choice_history) == 1
+
+    undo_req = rf.post("/", data=json.dumps({}), content_type="application/json")
+    block.undo_choice(undo_req)
+    assert block.choice_history == []
+
+
 def test_reset_activity_requires_enable_reset_activity(rf, block):
     block.scenario_data = {
         "nodes": {"start": {"id": "start", "type": "start", "choices": []}},
@@ -309,7 +831,8 @@ def test_reset_activity_clears_progress_and_score(rf, block):
     block.current_node_id = "end"
     block.history = ["start"]
     block.has_completed = True
-    block.score = 42.0
+    block.score_history = [42]
+    block.choice_history = [{"source_node_id": "start", "choice_text": "Next", "awarded_points": 42}]
     req = rf.post("/", data=json.dumps({}), content_type="application/json")
 
     resp = block.reset_activity(req)
@@ -319,10 +842,57 @@ def test_reset_activity_clears_progress_and_score(rf, block):
     assert block.current_node_id == "start"
     assert block.history == []
     assert block.has_completed is False
-    assert block.score == 0.0
+    assert block.score_history == []
+    assert block.choice_history == []
     assert result["current_node"]["id"] == "start"
     assert result["has_completed"] is False
-    assert result["score"] == 0.0
+    assert result["score"] == 0
+
+
+def test_reset_activity_clears_scoring_state_when_scoring_disabled(rf, block):
+    block.scenario_data = {
+        "nodes": {
+            "start": {"id": "start", "type": "start", "choices": []},
+        },
+        "start_node_id": "start",
+    }
+    block.enable_reset_activity = True
+    block.enable_scoring = False
+    block.current_node_id = "start"
+    block.history = ["start"]
+    block.has_completed = True
+    block.score_history = [12]
+    block.choice_history = [{"source_node_id": "start", "choice_text": "A", "awarded_points": 12}]
+
+    req = rf.post("/", data=json.dumps({}), content_type="application/json")
+    resp = block.reset_activity(req)
+    result = json.loads(resp.body.decode("utf-8"))
+
+    assert result["success"] is True
+    assert block.score_history == []
+    assert block.choice_history == []
+
+
+def test_get_current_state_includes_grade_report_data(rf, block):
+    block.grade_ranges = [
+        {"label": "Fail", "start": 0, "end": 49},
+        {"label": "Pass", "start": 50, "end": 100},
+    ]
+    block.max_score = 200
+    block.score_history = [80, 80]
+    block.choice_history = [
+        {"source_node_id": "n1", "choice_text": "Choice 1", "awarded_points": 80},
+        {"source_node_id": "n2", "choice_text": "Choice 2", "awarded_points": 80},
+    ]
+    req = rf.post("/", data=json.dumps({}), content_type="application/json")
+    resp = block.get_current_state(req)
+    state = json.loads(resp.body.decode("utf-8"))
+
+    assert "grade_report" in state
+    assert state["grade_report"]["percentage"] == 80
+    assert state["grade_report"]["grade_label"] == "Pass"
+    assert state["grade_report"]["is_pass_style"] is True
+    assert state["grade_report"]["detailed_scores"][0]["choice_text"] == "Choice 1"
 
 
 def test_get_current_state_includes_expected_fields(rf, block):
@@ -349,6 +919,7 @@ def test_get_current_state_includes_expected_fields(rf, block):
         "score",
         "start_node_id",
         "enable_reset_activity",
+        "grade_ranges",
     ):
         assert key in state
 
@@ -403,3 +974,30 @@ def fake_initialize_js(_self, name, init_data):
 
     assert calls["name"] == "BranchingStudioEditor"
     assert calls["init_data"]["enable_reset_activity"] is True
+
+
+def test_studio_view_includes_grade_ranges_in_init_data(block):
+    calls = {}
+
+    def fake_initialize_js(_self, name, init_data):
+        calls["name"] = name
+        calls["init_data"] = init_data
+
+    block.grade_ranges = [
+        {"label": "Fail", "start": 0, "end": 59},
+        {"label": "Pass", "start": 60, "end": 100},
+    ]
+
+    with mock.patch(
+        "branching_xblock.branching_xblock.Fragment.initialize_js",
+        autospec=True,
+        side_effect=fake_initialize_js,
+    ), mock.patch.object(
+        block.runtime,
+        "local_resource_url",
+        return_value="http://example.com/handlebars.js",
+    ):
+        block.studio_view({})
+
+    assert calls["name"] == "BranchingStudioEditor"
+    assert calls["init_data"]["grade_ranges"] == block.grade_ranges