diff --git a/src/components/editMeasure/testCases/api/useFhirDefinitionsService.ts b/src/components/editMeasure/testCases/api/useFhirDefinitionsService.ts
index b4486281..5e97e155 100644
--- a/src/components/editMeasure/testCases/api/useFhirDefinitionsService.ts
+++ b/src/components/editMeasure/testCases/api/useFhirDefinitionsService.ts
@@ -25,6 +25,7 @@ export class FhirDefinitionsServiceApi {
       case "uri":
       case "url":
       case "uuid":
+      case "canonical":
       case "string":
       case "http://hl7.org/fhirpath/System.String":
       case "code":
diff --git a/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/TypeEditor.test.tsx b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/TypeEditor.test.tsx
index 27e3e26c..adc38c49 100644
--- a/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/TypeEditor.test.tsx
+++ b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/TypeEditor.test.tsx
@@ -172,6 +172,25 @@ describe("TypeEditor Component", () => {
     expect(screen.getByTestId("url-input-field-URL")).toBeInTheDocument();
   });
 
+  test("Should render canonical url type attribute", () => {
+    const handleChange = jest.fn();
+    const canonicalUri = "https://example.com/blog";
+    render(
+      <TypeEditor
+        type="canonical"
+        required={true}
+        value={canonicalUri}
+        onChange={handleChange}
+        structureDefinition={null}
+        canEdit={true}
+        label="instantiatesCanonical"
+      />
+    );
+    expect(
+      screen.getByTestId("url-input-field-instantiatesCanonical")
+    ).toHaveValue(canonicalUri);
+  });
+
   test("Should render Instant component by instant", () => {
     const handleChange = jest.fn();
     render(
diff --git a/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/TypeEditor.tsx b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/TypeEditor.tsx
index 20e76e0c..6934c2a4 100644
--- a/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/TypeEditor.tsx
+++ b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/TypeEditor.tsx
@@ -106,6 +106,7 @@ const TypeEditor = ({
           />
         );
       case "url":
+      case "canonical":
         return (
           <UrlComponent
             canEdit={canEdit}
diff --git a/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.test.tsx b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.test.tsx
new file mode 100644
index 00000000..d21addd0
--- /dev/null
+++ b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.test.tsx
@@ -0,0 +1,60 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import Base64BinaryComponent from "./Base64BinaryComponent";
+import userEvent from "@testing-library/user-event";
+
+describe("Base64BinaryComponent", () => {
+  it("Should render Base64BinaryComponent", async () => {
+    const handleChange = jest.fn();
+
+    render(
+      <Base64BinaryComponent
+        value={null}
+        label="Base64BinaryComponent"
+        canEdit={true}
+        fieldRequired={false}
+        onChange={handleChange}
+        structureDefinition={null}
+      />
+    );
+
+    expect(screen.getByText("Base64BinaryComponent")).toBeInTheDocument();
+    expect(
+      screen.getByTestId("field-input-Base64BinaryComponent")
+    ).toBeInTheDocument();
+  });
+
+  it("Should validate input", async () => {
+    const handleChange = jest.fn();
+
+    render(
+      <Base64BinaryComponent
+        value={null}
+        label="Base64BinaryComponent"
+        canEdit={true}
+        fieldRequired={false}
+        onChange={handleChange}
+        structureDefinition={null}
+      />
+    );
+
+    const base64BinaryInput = screen.getByTestId(
+      "field-input-Base64BinaryComponent"
+    ) as HTMLInputElement;
+
+    // valid base64BinaryInput
+    userEvent.type(base64BinaryInput, "abcd");
+    expect(base64BinaryInput.value).toBe("abcd");
+    expect(
+      screen.getByTestId("field-input-helper-text-Base64BinaryComponent")
+    ).toBeEmptyDOMElement();
+
+    // invalid base64BinaryInput
+    userEvent.clear(base64BinaryInput);
+    userEvent.type(base64BinaryInput, "invalid base64BinaryInput.");
+    expect(base64BinaryInput).toHaveValue("invalid base64BinaryInput.");
+    expect(
+      screen.getByTestId("field-input-helper-text-Base64BinaryComponent")
+    ).toHaveTextContent("Please enter a valid Base64Binary");
+  });
+});
diff --git a/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.tsx b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.tsx
new file mode 100644
index 00000000..e862f2db
--- /dev/null
+++ b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.tsx
@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import { FormHelperText } from "@mui/material";
+import { TypeComponentProps } from "./TypeComponentProps";
+import { TextField } from "@madie/madie-design-system/dist/react";
+import _ from "lodash";
+
+const isBase64 = (str) => {
+  try {
+    const decoded = atob(str);
+    return decoded && new RegExp(/(\s*([0-9a-zA-Z\+\=]){4}\s*)+/).test(str);
+  } catch (err) {
+    return false;
+  }
+};
+
+const Base64BinaryComponent = ({
+  canEdit,
+  fieldRequired,
+  label = "Base64Binary",
+  value,
+  onChange,
+  structureDefinition,
+}: TypeComponentProps) => {
+  const [isValid, setValid] = useState<boolean>(value ? isBase64(value) : true);
+
+  const handleChange = (base64BinaryString) => {
+    setValid(true);
+    if (isBase64(base64BinaryString)) {
+      onChange(base64BinaryString);
+    } else if (!_.isEmpty(base64BinaryString)) {
+      setValid(false);
+    }
+  };
+  return (
+    <TextField
+      label={`${label}`}
+      required={fieldRequired}
+      disabled={!canEdit}
+      inputProps={{
+        "data-testid": `field-input-${label}`,
+        "aria-describedby": `field-input-helper-text-${label}`,
+        required: fieldRequired,
+        "aria-required": fieldRequired,
+      }}
+      size="small"
+      fullWidth
+      value={value}
+      onChange={(e) => handleChange(e.target.value)}
+      helperText={
+        <FormHelperText
+          data-testid={`field-input-helper-text-${label}`}
+          error={!isValid}
+        >
+          {isValid ? "" : "Please enter a valid Base64Binary"}
+        </FormHelperText>
+      }
+    />
+  );
+};
+
+export default Base64BinaryComponent;