diff --git a/.changeset/rotten-rivers-sort.md b/.changeset/rotten-rivers-sort.md
index 95664a1f2fb..d7606fe32bb 100644
--- a/.changeset/rotten-rivers-sort.md
+++ b/.changeset/rotten-rivers-sort.md
@@ -2,4 +2,4 @@
 '@finos/legend-extension-dsl-serializer': minor
 ---
 
-Add form support for `binding` and `ExternalFormatConnection`
+Add form support for `Binding` store and `ExternalFormat` connection.
diff --git a/packages/legend-extension-dsl-serializer/src/components/studio/BindingElementEditor.tsx b/packages/legend-extension-dsl-serializer/src/components/studio/BindingElementEditor.tsx
index 1c6a5cd144a..b0c14d082b7 100644
--- a/packages/legend-extension-dsl-serializer/src/components/studio/BindingElementEditor.tsx
+++ b/packages/legend-extension-dsl-serializer/src/components/studio/BindingElementEditor.tsx
@@ -16,6 +16,7 @@
 
 import { observer } from 'mobx-react-lite';
 import type { SelectComponent } from '@finos/legend-art';
+import { TimesIcon } from '@finos/legend-art';
 import {
   clsx,
   CustomSelectorInput,
@@ -24,7 +25,7 @@ import {
   ResizablePanelSplitter,
   ResizablePanelSplitterLine,
 } from '@finos/legend-art';
-import { prettyCONSTName } from '@finos/legend-shared';
+import { guaranteeNonNullable, prettyCONSTName } from '@finos/legend-shared';
 import type {
   ElementDragSource,
   UMLEditorElementDropTarget,
@@ -38,60 +39,60 @@ import {
   BINDING_TAB_TYPE,
   BindingEditorState,
 } from '../../stores/studio/BindingEditorState';
-import { FaLock, FaTimes } from 'react-icons/fa';
+import { FaLock } from 'react-icons/fa';
 import { SchemaSet } from '../../models/metamodels/pure/model/packageableElements/schemaSet/SchemaSet';
 import type {
+  OptionalPackageableElementReference,
   PackageableElement,
   PackageableElementReference,
 } from '@finos/legend-graph';
 import { PackageableElementExplicitReference } from '@finos/legend-graph';
 import { useCallback, useRef } from 'react';
-import { CONTENT_TYPE } from '../../models/metamodels/pure/model/packageableElements/store/Binding';
+import { BINDING_CONTENT_TYPE } from '../../models/metamodels/pure/model/packageableElements/store/Binding';
 import { useDrop } from 'react-dnd';
 import type { ModelUnit } from '../../models/metamodels/pure/model/packageableElements/store/ModelUnit';
 
-const ElementEditor = observer(
+enum BINDING_MODEL_UNIT {
+  ELEMENT_INCLUDE = 'ELEMENT_INCLUDE',
+  ELEMENT_EXCLUDE = 'ELEMENT_EXCLUDE',
+}
+
+const BindingScopeEntryEditor = observer(
   (props: {
-    modelUnitState: ModelUnit;
     elementRef: PackageableElementReference<PackageableElement>;
-    modelInclude: boolean;
+    removeElement: (
+      val: PackageableElementReference<PackageableElement>,
+      label: BINDING_MODEL_UNIT,
+    ) => void;
+    label: BINDING_MODEL_UNIT;
     isReadOnly: boolean;
   }) => {
-    const { modelUnitState, elementRef, modelInclude, isReadOnly } = props;
+    const { elementRef, removeElement, label, isReadOnly } = props;
     const editorStore = useEditorStore();
-    const deleteElement = (): void => {
-      if (modelInclude) {
-        return modelUnitState.deletePackageableElementIncludes(elementRef);
-      }
-      return modelUnitState.deletePackageableElementExcludes(elementRef);
-    };
-    const elementPath = (
-      element: PackageableElementReference<PackageableElement>,
-    ): string => element.value.path;
     return (
       <div
-        key={elementPath(elementRef)}
+        key={elementRef.value.path}
         className="panel__content__form__section__list__item"
       >
         <>
-          <div className="panel__content__form__section__list__item__value element-editor__element">
+          <div className="panel__content__form__section__list__item__value binding-scope-entry-editor__element">
             {
-              <div className="element-editor__element__icon">
+              <div className="binding-scope-entry-editor__element__icon">
                 {getElementIcon(editorStore, elementRef.value)}
               </div>
             }
-            <div className="element-editor__element__path">
-              {elementPath(elementRef)}
+            <div className="binding-scope-entry-editor__element__path">
+              {elementRef.value.path}
             </div>
           </div>
           <div className="panel__content__form__section__list__item__actions">
             <button
               className="panel__content__form__section__list__item__remove-btn"
               disabled={isReadOnly}
-              onClick={deleteElement}
+              onClick={(): void => removeElement(elementRef, label)}
               tabIndex={-1}
             >
-              <FaTimes />
+              <TimesIcon />
             </button>
           </div>
         </>
@@ -100,53 +101,32 @@ const ElementEditor = observer(
   },
 );
 
-const BindingModelEditor = observer(
+const BindingScopeEditor = observer(
   (props: {
     modelUnitState: ModelUnit;
-    modelInclude: boolean;
+    addElement: (label: BINDING_MODEL_UNIT) => void;
+    removeElement: (
+      val: PackageableElementReference<PackageableElement>,
+      label: BINDING_MODEL_UNIT,
+    ) => void;
+    label: BINDING_MODEL_UNIT;
+    allowAddingElement: boolean;
     isReadOnly: boolean;
   }) => {
-    const { modelUnitState, modelInclude, isReadOnly } = props;
-    const editorStore = useEditorStore();
-    const graph = editorStore.graphManagerState.graph;
-    const allowedElements = [
-      ...graph.ownProfiles,
-      ...graph.ownEnumerations,
-      ...graph.ownClasses,
-      ...graph.ownAssociations,
-      ...graph.ownFunctions,
-    ];
-    const elements = allowedElements.filter((element) => {
-      if (modelInclude) {
-        return !modelUnitState.packageableElementIncludes
-          .map((element) => element.value)
-          .includes(element);
-      } else {
-        return !modelUnitState.packageableElementExcludes
-          .map((element) => element.value)
-          .includes(element);
-      }
-    });
-    const allowAddingElement = !isReadOnly && Boolean(elements.length);
-    const addElement = (): void => {
-      if (allowAddingElement) {
-        if (modelInclude) {
-          modelUnitState.addPackageableElementIncludes(
-            PackageableElementExplicitReference.create(elements[0]),
-          );
-        } else {
-          modelUnitState.addPackageableElementExcludes(
-            PackageableElementExplicitReference.create(elements[0]),
-          );
-        }
-      }
-    };
+    const {
+      modelUnitState,
+      addElement,
+      removeElement,
+      label,
+      allowAddingElement,
+      isReadOnly,
+    } = props;
     const handleDropElement = useCallback(
       (item: UMLEditorElementDropTarget): void => {
         const element = item.data.packageableElement;
         if (
           !isReadOnly &&
-          modelInclude &&
+          label === BINDING_MODEL_UNIT.ELEMENT_INCLUDE &&
           !modelUnitState.packageableElementIncludes
             .map((element) => element.value)
             .includes(element)
@@ -156,7 +136,7 @@ const BindingModelEditor = observer(
           );
         } else if (
           !isReadOnly &&
-          !modelInclude &&
+          label === BINDING_MODEL_UNIT.ELEMENT_EXCLUDE &&
           !modelUnitState.packageableElementExcludes
             .map((element) => element.value)
             .includes(element)
@@ -166,7 +146,7 @@ const BindingModelEditor = observer(
           );
         }
       },
-      [isReadOnly, modelUnitState, modelInclude],
+      [isReadOnly, modelUnitState, label],
     );
     const [{ isElementDragOver }, dropElementRef] = useDrop(
       () => ({
@@ -187,60 +167,62 @@ const BindingModelEditor = observer(
     );
 
     return (
-      <div className="binding-model-editor">
-        <div className="binding-model-editor__panel__header">
-          <div className="binding-model-editor__panel__header__title">
-            <div className="binding-model-editor__panel__header__title__label">
-              {modelInclude ? `Model Includes` : `Model Excludes`}
+      <div className="binding-scope-editor">
+        <div className="binding-scope-editor__panel__header">
+          <div className="binding-scope-editor__panel__header__title">
+            <div className="binding-scope-editor__panel__header__title__label">
+              {label === BINDING_MODEL_UNIT.ELEMENT_INCLUDE
+                ? `Model Includes`
+                : `Model Excludes`}
             </div>
           </div>
         </div>
         <div
           ref={dropElementRef}
-          className="binding-model-editor__panel__content dnd__overlay__container"
+          className="binding-scope-editor__panel__content dnd__overlay__container"
         >
           <div
             className={clsx({ dnd__overlay: isElementDragOver && !isReadOnly })}
           />
-          <div className="binding-model-editor__panel__content__form">
-            <div className="binding-model-editor__panel__content__form__section">
-              <div className="binding-model-editor__panel__content__form__section__header__prompt">
-                {modelInclude
+          <div className="binding-scope-editor__panel__content__form">
+            <div className="binding-scope-editor__panel__content__form__section">
+              <div className="binding-scope-editor__panel__content__form__section__header__prompt">
+                {label === BINDING_MODEL_UNIT.ELEMENT_INCLUDE
                   ? `Specifies the list of models included`
                   : `Specifies the list of models excluded`}
               </div>
-              <div className="binding-model-editor__panel__content__form__section__list">
-                {modelInclude &&
+              <div className="binding-scope-editor__panel__content__form__section__list">
+                {label === BINDING_MODEL_UNIT.ELEMENT_INCLUDE &&
                   modelUnitState.packageableElementIncludes.map(
                     (elementRef) => (
-                      <ElementEditor
+                      <BindingScopeEntryEditor
                         key={elementRef.value.uuid}
-                        modelUnitState={modelUnitState}
                         elementRef={elementRef}
-                        modelInclude={modelInclude}
+                        removeElement={removeElement}
+                        label={label}
                         isReadOnly={isReadOnly}
                       />
                     ),
                   )}
-                {!modelInclude &&
+                {label === BINDING_MODEL_UNIT.ELEMENT_EXCLUDE &&
                   modelUnitState.packageableElementExcludes.map(
                     (elementRef) => (
-                      <ElementEditor
+                      <BindingScopeEntryEditor
                         key={elementRef.value.uuid}
-                        modelUnitState={modelUnitState}
                         elementRef={elementRef}
-                        modelInclude={modelInclude}
+                        removeElement={removeElement}
+                        label={label}
                         isReadOnly={isReadOnly}
                       />
                     ),
                   )}
 
-                <div className="binding-model-editor__panel__content__form__section__list__new-item__add">
+                <div className="binding-scope-editor__panel__content__form__section__list__new-item__add">
                   <button
-                    className="binding-model-editor__panel__content__form__section__list__new-item__add-btn btn btn--dark"
+                    className="binding-scope-editor__panel__content__form__section__list__new-item__add-btn btn btn--dark"
                     disabled={!allowAddingElement}
                     tabIndex={-1}
-                    onClick={addElement}
+                    onClick={(): void => addElement(label)}
                     title="Add Element"
                   >
                     Add Value
@@ -263,27 +245,30 @@ const BindingGeneralEditor = observer(
     const schemaSets = Array.from(
       editorStore.graphManagerState.graph.allOwnElements,
     ).filter(
-      (type: PackageableElement): type is SchemaSet =>
-        type instanceof SchemaSet,
+      (element: PackageableElement): element is SchemaSet =>
+        element instanceof SchemaSet,
     );
     const schemaSetOptions = schemaSets.map((e) => ({
-      value: e,
+      value: PackageableElementExplicitReference.create(e),
       label: e.path,
     }));
-    const onSchemaSetChange = (
-      val: { label: string; value: SchemaSet } | null,
-    ): void => {
+    const onSchemaSetChange = (val: {
+      label: string;
+      value: OptionalPackageableElementReference<SchemaSet>;
+    }): void => {
       binding.setSchemaId(undefined);
       return binding.setSchemaSet(val?.value);
     };
     const selectedSchemaSet = {
       value: binding.schemaSet,
-      label: binding.schemaSet?.path,
+      label: binding.schemaSet?.valueForSerialization,
     };
-    const schemaIdOptions = selectedSchemaSet.value?.schemas.map((e) => ({
-      value: e.id,
-      label: e.id,
-    }));
+    const schemaIdOptions = selectedSchemaSet.value?.value?.schemas.map(
+      (e) => ({
+        value: e.id,
+        label: e.id,
+      }),
+    );
     const onSchemaIdChange = (
       val: { label: string; value: string } | null,
     ): void => binding.setSchemaId(val?.value);
@@ -292,13 +277,13 @@ const BindingGeneralEditor = observer(
       label: binding.schemaId,
     };
     const projectSelectorRef = useRef<SelectComponent>(null);
-    const contentTypeOptions = Object.values(CONTENT_TYPE).map((e) => ({
+    const contentTypeOptions = Object.values(BINDING_CONTENT_TYPE).map((e) => ({
       value: e,
       label: e,
     }));
     const onContentTypeChange = (val: {
-      label: CONTENT_TYPE;
-      value: CONTENT_TYPE;
+      label: BINDING_CONTENT_TYPE;
+      value: BINDING_CONTENT_TYPE;
     }): void => binding.setContentType(val.value);
     const selectedContentType = {
       value: binding.contentType,
@@ -306,8 +291,8 @@ const BindingGeneralEditor = observer(
     };
     return (
       <div className="binding-general-editor">
-        <div className="binding-general-editor__section__header__prompt">
-          Select Content Type
+        <div className="binding-general-editor__section__header__label">
+          Content Type
         </div>
         <div>
           <CustomSelectorInput
@@ -320,8 +305,8 @@ const BindingGeneralEditor = observer(
             darkMode={true}
           />
         </div>
-        <div className="binding-general-editor__section__header__prompt">
-          Select Schema Set
+        <div className="binding-general-editor__section__header__label">
+          Schema Set
         </div>
         <div className="binding-general-editor__content">
           <CustomSelectorInput
@@ -336,8 +321,8 @@ const BindingGeneralEditor = observer(
             darkMode={true}
           />
         </div>
-        <div className="binding-general-editor__section__header__prompt">
-          Select Schema Id
+        <div className="binding-general-editor__section__header__label">
+          Schema ID
         </div>
         <div className="binding-general-editor__content">
           <CustomSelectorInput
@@ -348,7 +333,7 @@ const BindingGeneralEditor = observer(
             onChange={onSchemaIdChange}
             value={selectedSchemaId}
             isClearable={true}
-            placeholder="Choose a schema id"
+            placeholder="Choose a schema ID"
             darkMode={true}
           />
         </div>
@@ -368,6 +353,46 @@ export const BindingEditor = observer(() => {
     (tab: BINDING_TAB_TYPE): (() => void) =>
     (): void =>
       editorState.setSelectedTab(tab);
+  const graph = editorStore.graphManagerState.graph;
+  const allowedElements = [
+    ...graph.ownProfiles,
+    ...graph.ownEnumerations,
+    ...graph.ownClasses,
+    ...graph.ownAssociations,
+    ...graph.ownFunctions,
+  ];
+  const elements = allowedElements.filter(
+    (element) =>
+      !modelUnit.packageableElementIncludes
+        .map((element) => element.value)
+        .includes(element) &&
+      !modelUnit.packageableElementExcludes
+        .map((element) => element.value)
+        .includes(element),
+  );
+  const allowAddingElement = !isReadOnly && Boolean(elements.length);
+  const addElement = (label: BINDING_MODEL_UNIT): void => {
+    if (allowAddingElement) {
+      if (label === BINDING_MODEL_UNIT.ELEMENT_INCLUDE) {
+        modelUnit.addPackageableElementIncludes(
+          PackageableElementExplicitReference.create(guaranteeNonNullable(elements[0])),
+        );
+      } else {
+        modelUnit.addPackageableElementExcludes(
+          PackageableElementExplicitReference.create(guaranteeNonNullable(elements[0])),
+        );
+      }
+    }
+  };
+  const removeElement = (
+    val: PackageableElementReference<PackageableElement>,
+    label: BINDING_MODEL_UNIT,
+  ): void => {
+    if (label === BINDING_MODEL_UNIT.ELEMENT_INCLUDE) {
+      return modelUnit.deletePackageableElementIncludes(val);
+    }
+    return modelUnit.deletePackageableElementExcludes(val);
+  };
   return (
     <div className="binding-editor">
       <div className="binding-editor__header">
@@ -424,10 +449,13 @@ export const BindingEditor = observer(() => {
         {selectedTab === BINDING_TAB_TYPE.MODELS && (
           <ResizablePanelGroup orientation="vertical">
             <ResizablePanel minSize={280} maxSize={550}>
-              <BindingModelEditor
+              <BindingScopeEditor
                 key={editorState.uuid}
                 modelUnitState={modelUnit}
-                modelInclude={true}
+                addElement={addElement}
+                removeElement={removeElement}
+                label={BINDING_MODEL_UNIT.ELEMENT_INCLUDE}
+                allowAddingElement={allowAddingElement}
                 isReadOnly={isReadOnly}
               />
             </ResizablePanel>
@@ -435,10 +463,13 @@ export const BindingEditor = observer(() => {
               <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
             </ResizablePanelSplitter>
             <ResizablePanel>
-              <BindingModelEditor
+              <BindingScopeEditor
                 key={editorState.uuid}
                 modelUnitState={modelUnit}
-                modelInclude={false}
+                addElement={addElement}
+                removeElement={removeElement}
+                label={BINDING_MODEL_UNIT.ELEMENT_EXCLUDE}
+                allowAddingElement={allowAddingElement}
                 isReadOnly={isReadOnly}
               />
             </ResizablePanel>
diff --git a/packages/legend-extension-dsl-serializer/src/components/studio/DSLSerializer_StudioPlugin.tsx b/packages/legend-extension-dsl-serializer/src/components/studio/DSLSerializer_StudioPlugin.tsx
index 293f43e6261..8d0309dce2c 100644
--- a/packages/legend-extension-dsl-serializer/src/components/studio/DSLSerializer_StudioPlugin.tsx
+++ b/packages/legend-extension-dsl-serializer/src/components/studio/DSLSerializer_StudioPlugin.tsx
@@ -51,7 +51,7 @@ import {
 } from '../../models/metamodels/pure/model/packageableElements/schemaSet/SchemaSet';
 import {
   Binding,
-  CONTENT_TYPE,
+  BINDING_CONTENT_TYPE,
 } from '../../models/metamodels/pure/model/packageableElements/store/Binding';
 import { ExternalFormatConnection } from '../../models/metamodels/pure/model/packageableElements/connection/ExternalFormatConnection';
 import { UrlStream } from '../../models/metamodels/pure/model/packageableElements/connection/UrlStream';
@@ -146,7 +146,7 @@ export class DSLSerializer_StudioPlugin
           return schemaSet;
         } else if (type === BINDING_ELEMENT_TYPE) {
           const binding = new Binding(name);
-          binding.setContentType(CONTENT_TYPE.FLAT_DATA);
+          binding.setContentType(BINDING_CONTENT_TYPE.FLAT_DATA);
           const modelUnit = new ModelUnit();
           binding.modelUnit = modelUnit;
           return binding;
diff --git a/packages/legend-extension-dsl-serializer/src/index.ts b/packages/legend-extension-dsl-serializer/src/index.ts
index 3d0c803bb3d..6f738dd9d14 100644
--- a/packages/legend-extension-dsl-serializer/src/index.ts
+++ b/packages/legend-extension-dsl-serializer/src/index.ts
@@ -16,4 +16,4 @@
 
 export * from './DSLSerializer_Extension';
 export * from './models/metamodels/pure/model/packageableElements/store/Binding';
-export { getBinding } from './graphManager/DSLSerializer_GraphManagerHelper';
+export { V1_resolveBinding } from './models/protocols/pure/v1/transformation/pureGraph/V1_DSLSerializer_GraphBuilderHelper';
diff --git a/packages/legend-extension-dsl-serializer/src/models/metamodels/pure/model/packageableElements/schemaSet/SchemaSet.ts b/packages/legend-extension-dsl-serializer/src/models/metamodels/pure/model/packageableElements/schemaSet/SchemaSet.ts
index aa3dd8810c3..61b73c657c8 100644
--- a/packages/legend-extension-dsl-serializer/src/models/metamodels/pure/model/packageableElements/schemaSet/SchemaSet.ts
+++ b/packages/legend-extension-dsl-serializer/src/models/metamodels/pure/model/packageableElements/schemaSet/SchemaSet.ts
@@ -25,7 +25,7 @@ import type { Schema } from './Schema';
 export enum FORMAT_TYPE {
   FLAT_DATA = 'FlatData',
   XSD = 'XSD',
-  JSON = 'Json',
+  JSON = 'JSON',
 }
 
 export class SchemaSet extends PackageableElement implements Hashable {
diff --git a/packages/legend-extension-dsl-serializer/src/models/metamodels/pure/model/packageableElements/store/Binding.ts b/packages/legend-extension-dsl-serializer/src/models/metamodels/pure/model/packageableElements/store/Binding.ts
index ecbccca408e..9d427b7ae81 100644
--- a/packages/legend-extension-dsl-serializer/src/models/metamodels/pure/model/packageableElements/store/Binding.ts
+++ b/packages/legend-extension-dsl-serializer/src/models/metamodels/pure/model/packageableElements/store/Binding.ts
@@ -17,22 +17,25 @@
 import { observable, action, makeObservable, override } from 'mobx';
 import { hashArray } from '@finos/legend-shared';
 import type { Hashable } from '@finos/legend-shared';
-import type { PackageableElementVisitor } from '@finos/legend-graph';
+import type {
+  OptionalPackageableElementReference,
+  PackageableElementVisitor,
+} from '@finos/legend-graph';
 import { Store } from '@finos/legend-graph';
 import type { ModelUnit } from './ModelUnit';
 import { DSL_SERIALIZER_HASH_STRUCTURE } from '../../../../../DSLSerializer_ModelUtils';
 import type { SchemaSet } from '../schemaSet/SchemaSet';
 
-export enum CONTENT_TYPE {
+export enum BINDING_CONTENT_TYPE {
   FLAT_DATA = 'application/x.flatdata',
   XSD = 'application/xml',
   JSON = 'application/json',
 }
 
 export class Binding extends Store implements Hashable {
-  schemaSet?: SchemaSet | undefined;
+  schemaSet?: OptionalPackageableElementReference<SchemaSet>;
   schemaId?: string | undefined;
-  contentType!: CONTENT_TYPE;
+  contentType!: BINDING_CONTENT_TYPE;
   modelUnit!: ModelUnit;
 
   constructor(name: string) {
@@ -51,7 +54,7 @@ export class Binding extends Store implements Hashable {
     });
   }
 
-  setSchemaSet(value: SchemaSet | undefined): void {
+  setSchemaSet(value: OptionalPackageableElementReference<SchemaSet>): void {
     this.schemaSet = value;
   }
 
@@ -59,7 +62,7 @@ export class Binding extends Store implements Hashable {
     this.schemaId = value;
   }
 
-  setContentType(value: CONTENT_TYPE): void {
+  setContentType(value: BINDING_CONTENT_TYPE): void {
     this.contentType = value;
   }
 
@@ -71,7 +74,7 @@ export class Binding extends Store implements Hashable {
     return hashArray([
       DSL_SERIALIZER_HASH_STRUCTURE.BINDING,
       this.path,
-      this.schemaSet?.path ?? '',
+      this.schemaSet?.valueForSerialization ?? '',
       this.schemaId ?? '',
       this.contentType,
       this.modelUnit,
diff --git a/packages/legend-extension-dsl-serializer/src/models/metamodels/pure/model/packageableElements/store/ModelUnit.ts b/packages/legend-extension-dsl-serializer/src/models/metamodels/pure/model/packageableElements/store/ModelUnit.ts
index 4d47516d3c5..ea163266ca6 100644
--- a/packages/legend-extension-dsl-serializer/src/models/metamodels/pure/model/packageableElements/store/ModelUnit.ts
+++ b/packages/legend-extension-dsl-serializer/src/models/metamodels/pure/model/packageableElements/store/ModelUnit.ts
@@ -24,7 +24,7 @@ import {
 import type { Hashable } from '@finos/legend-shared';
 import { DSL_SERIALIZER_HASH_STRUCTURE } from '../../../../../DSLSerializer_ModelUtils';
 import type { PackageableElement } from '@finos/legend-graph';
-import { PackageableElementReference } from '@finos/legend-graph';
+import type { PackageableElementReference } from '@finos/legend-graph';
 
 export class ModelUnit implements Hashable {
   packageableElementIncludes: PackageableElementReference<PackageableElement>[] =
@@ -88,18 +88,10 @@ export class ModelUnit implements Hashable {
     return hashArray([
       DSL_SERIALIZER_HASH_STRUCTURE.MODEL_UNIT,
       hashArray(
-        this.packageableElementIncludes.map((element) =>
-          element instanceof PackageableElementReference
-            ? element.hashValue
-            : element,
-        ),
+        this.packageableElementIncludes.map((element) => element.hashValue),
       ),
       hashArray(
-        this.packageableElementExcludes.map((element) =>
-          element instanceof PackageableElementReference
-            ? element.hashValue
-            : element,
-        ),
+        this.packageableElementExcludes.map((element) => element.hashValue),
       ),
     ]);
   }
diff --git a/packages/legend-extension-dsl-serializer/src/models/protocols/pure/DSLSerializer_PureProtocolProcessorPlugin.ts b/packages/legend-extension-dsl-serializer/src/models/protocols/pure/DSLSerializer_PureProtocolProcessorPlugin.ts
index d31e3bd93aa..4943dd5eb30 100644
--- a/packages/legend-extension-dsl-serializer/src/models/protocols/pure/DSLSerializer_PureProtocolProcessorPlugin.ts
+++ b/packages/legend-extension-dsl-serializer/src/models/protocols/pure/DSLSerializer_PureProtocolProcessorPlugin.ts
@@ -39,12 +39,13 @@ import {
   getSchemaSet,
 } from '../../../graphManager/DSLSerializer_GraphManagerHelper';
 import {
-  V1_buildPackageableElement,
   V1_resolveBinding,
+  V1_resolveSchemaSet,
+  V1_buildPackageableElement,
 } from '../pure/v1/transformation/pureGraph/V1_DSLSerializer_GraphBuilderHelper';
 import {
   Binding,
-  CONTENT_TYPE,
+  BINDING_CONTENT_TYPE,
 } from '../../metamodels/pure/model/packageableElements/store/Binding';
 import {
   FORMAT_TYPE,
@@ -142,13 +143,13 @@ export class DSLSerializer_PureProtocolProcessorPlugin
           const element = getBinding(path, context.graph);
           element.schemaId = elementProtocol.schemaId;
           if (elementProtocol.schemaSet !== undefined) {
-            element.schemaSet = getSchemaSet(
+            element.schemaSet = V1_resolveSchemaSet(
               elementProtocol.schemaSet,
-              context.graph,
+              context,
             );
           }
           element.contentType = guaranteeNonNullable(
-            Object.values(CONTENT_TYPE).find(
+            Object.values(BINDING_CONTENT_TYPE).find(
               (type) => type === elementProtocol.contentType,
             ),
             `Binding 'contentType' '${elementProtocol.contentType}' is not supported`,
@@ -279,7 +280,7 @@ export class DSLSerializer_PureProtocolProcessorPlugin
           protocol.name = metamodel.name;
           protocol.package = metamodel.package?.fullPath ?? '';
           protocol.schemaId = metamodel.schemaId;
-          protocol.schemaSet = metamodel.schemaSet?.path;
+          protocol.schemaSet = metamodel.schemaSet?.valueForSerialization;
           protocol.contentType = metamodel.contentType;
           const modelUnit = new V1_ModelUnit();
           modelUnit.packageableElementExcludes =
diff --git a/packages/legend-extension-dsl-serializer/style/_mixins.scss b/packages/legend-extension-dsl-serializer/style/_mixins.scss
index c2a813906bd..e5e9d17314c 100644
--- a/packages/legend-extension-dsl-serializer/style/_mixins.scss
+++ b/packages/legend-extension-dsl-serializer/style/_mixins.scss
@@ -42,3 +42,11 @@
   flex-grow: 0;
   flex-shrink: 0;
 }
+
+@mixin ellipsisTextOverflow {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-word;
+  text-align: left;
+}
diff --git a/packages/legend-extension-dsl-serializer/style/_serializer.scss b/packages/legend-extension-dsl-serializer/style/_serializer.scss
index 61e3e889a59..412f1e28bf9 100644
--- a/packages/legend-extension-dsl-serializer/style/_serializer.scss
+++ b/packages/legend-extension-dsl-serializer/style/_serializer.scss
@@ -307,13 +307,13 @@
 .binding-general-editor {
   padding: 2rem;
 
-  &__section__header__prompt {
-    word-break: break-word;
-    font-size: 1.4rem;
-    color: var(--color-light-grey-400);
+  &__section__header__label {
+    @include flexVCenter;
+
+    font-weight: 500;
+    color: var(--color-light-grey-50);
+    margin: 0.5rem 0;
     line-height: 2rem;
-    margin-bottom: 0.8rem;
-    margin-top: 0.8rem;
     cursor: default;
   }
 
@@ -333,7 +333,7 @@
   }
 }
 
-.binding-model-editor {
+.binding-scope-editor {
   height: 56rem;
   background: var(--color-dark-grey-50);
 
@@ -414,7 +414,7 @@
   }
 }
 
-.element-editor {
+.binding-scope-entry-editor {
   display: flex;
 
   &__element {
@@ -428,11 +428,8 @@
     }
 
     &__value {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      word-break: break-word;
-      text-align: left;
+      @include ellipsisTextOverflow;
+
       padding-left: 0.5rem;
     }
   }
diff --git a/packages/legend-extension-external-store-service/src/models/metamodels/pure/model/packageableElements/store/serviceStore/model/TypeReference.ts b/packages/legend-extension-external-store-service/src/models/metamodels/pure/model/packageableElements/store/serviceStore/model/TypeReference.ts
index a0eb7420b05..be6025a7b4e 100644
--- a/packages/legend-extension-external-store-service/src/models/metamodels/pure/model/packageableElements/store/serviceStore/model/TypeReference.ts
+++ b/packages/legend-extension-external-store-service/src/models/metamodels/pure/model/packageableElements/store/serviceStore/model/TypeReference.ts
@@ -18,7 +18,7 @@ import { observable, action, makeObservable, computed } from 'mobx';
 import type { Hashable } from '@finos/legend-shared';
 import { hashArray } from '@finos/legend-shared';
 import { SERVICE_STORE_HASH_STRUCTURE } from '../../../../../../../ESService_ModelUtils';
-import type { Class } from '@finos/legend-graph';
+import type { Class, PackageableElementReference } from '@finos/legend-graph';
 import type { Binding } from '@finos/legend-extension-dsl-serializer';
 
 export abstract class TypeReference implements Hashable {
@@ -58,7 +58,7 @@ export class BooleanTypeReference extends TypeReference implements Hashable {
 
 export class ComplexTypeReference extends TypeReference implements Hashable {
   type!: Class;
-  binding!: Binding;
+  binding!: PackageableElementReference<Binding>;
 
   constructor() {
     super();
@@ -75,7 +75,7 @@ export class ComplexTypeReference extends TypeReference implements Hashable {
       SERVICE_STORE_HASH_STRUCTURE.COMPLEX_TYPE_REFERENCE,
       this.list.toString(),
       this.type.path,
-      this.binding.path,
+      this.binding.valueForSerialization ?? '',
     ]);
   }
 }
diff --git a/packages/legend-extension-external-store-service/src/models/protocols/pure/v1/transformation/pureGraph/V1_ESService_GraphBuilderHelper.ts b/packages/legend-extension-external-store-service/src/models/protocols/pure/v1/transformation/pureGraph/V1_ESService_GraphBuilderHelper.ts
index 932467ec2b2..cd05f8f5697 100644
--- a/packages/legend-extension-external-store-service/src/models/protocols/pure/v1/transformation/pureGraph/V1_ESService_GraphBuilderHelper.ts
+++ b/packages/legend-extension-external-store-service/src/models/protocols/pure/v1/transformation/pureGraph/V1_ESService_GraphBuilderHelper.ts
@@ -43,7 +43,7 @@ import {
   IntegerTypeReference,
   StringTypeReference,
 } from '../../../../../metamodels/pure/model/packageableElements/store/serviceStore/model/TypeReference';
-import { getBinding } from '@finos/legend-extension-dsl-serializer';
+import { V1_resolveBinding } from '@finos/legend-extension-dsl-serializer';
 import {
   assertNonNullable,
   guaranteeNonEmptyString,
@@ -137,7 +137,7 @@ export const V1_buildTypeReference = (
     const complexTypeReference = new ComplexTypeReference();
     complexTypeReference.list = protocol.list;
     complexTypeReference.type = context.graph.getClass(protocol.type);
-    complexTypeReference.binding = getBinding(protocol.binding, context.graph);
+    complexTypeReference.binding = V1_resolveBinding(protocol.binding, context);
     return complexTypeReference;
   } else if (protocol instanceof V1_FloatTypeReference) {
     const floatTypeReference = new FloatTypeReference();
@@ -281,12 +281,12 @@ export const V1_buildServiceStoreElement = (
         `Service response 'type' field is missing or empty`,
       ),
     );
-    service.response.binding = getBinding(
+    service.response.binding = V1_resolveBinding(
       guaranteeNonEmptyString(
         protocol.response.binding,
         `Service response 'binding' field is missing or empty`,
       ),
-      context.graph,
+      context,
     );
     service.security = protocol.security.map((securityScheme) =>
       V1_buildSecurityScheme(securityScheme, context),
diff --git a/packages/legend-extension-external-store-service/src/models/protocols/pure/v1/transformation/pureGraph/V1_ESService_TransformerHelper.ts b/packages/legend-extension-external-store-service/src/models/protocols/pure/v1/transformation/pureGraph/V1_ESService_TransformerHelper.ts
index 072e3bc7a06..fa902caf718 100644
--- a/packages/legend-extension-external-store-service/src/models/protocols/pure/v1/transformation/pureGraph/V1_ESService_TransformerHelper.ts
+++ b/packages/legend-extension-external-store-service/src/models/protocols/pure/v1/transformation/pureGraph/V1_ESService_TransformerHelper.ts
@@ -91,7 +91,7 @@ export const V1_transformComplexTypeReference = (
   const complexTypeReference = new V1_ComplexTypeReference();
   complexTypeReference.list = metamodel.list;
   complexTypeReference.type = metamodel.type.path;
-  complexTypeReference.binding = metamodel.binding.path;
+  complexTypeReference.binding = metamodel.binding.valueForSerialization ?? '';
   return complexTypeReference;
 };