diff --git a/src/views/diagnose.tsx b/src/views/diagnose.tsx
index a7661dd..cc8708c 100644
--- a/src/views/diagnose.tsx
+++ b/src/views/diagnose.tsx
@@ -2,8 +2,7 @@ import { utils } from "@govtechsg/open-attestation";
 import React, { useEffect, useState } from "react";
 import { FailedAlert, SucceedAlert } from "../components/alert";
 
-// sad not exported :(
-type Version = "2.0" | "3.0";
+type Version = utils.Version;
 type Kind = "wrapped" | "signed";
 export const Diagnose: React.FunctionComponent = () => {
   const [rawDocument, setRawDocument] = useState("");
@@ -51,6 +50,14 @@ export const Diagnose: React.FunctionComponent = () => {
         >
           v3.0
         </button>
+        <button
+          className={`btn-blue-small font-bold mb-2 mr-1 ${version === "4.0" ? "selected" : "unselected"}`}
+          onClick={async () => {
+            setVersion("4.0");
+          }}
+        >
+          v4.0
+        </button>
       </div>
       <div>
         <button
diff --git a/src/views/wrap.tsx b/src/views/wrap.tsx
index eb4367a..6daaaf0 100644
--- a/src/views/wrap.tsx
+++ b/src/views/wrap.tsx
@@ -4,11 +4,12 @@ import {
   utils,
   __unsafe__use__it__at__your__own__risks__wrapDocument as wrapDocumentV3,
 } from "@govtechsg/open-attestation";
+import { wrapDocument as wrapDocumentV4 } from "@govtechsg/open-attestation/4.0/wrap";
 import React, { useEffect, useState } from "react";
 import { FailedAlert, SucceedAlert } from "../components/alert";
 import { Status } from "../shared";
 
-type Version = "2.0" | "3.0";
+type Version = utils.Version;
 
 export const Wrap: React.FunctionComponent = () => {
   const [rawDocument, setRawDocument] = useState("");
@@ -30,7 +31,9 @@ export const Wrap: React.FunctionComponent = () => {
 
     if (rawDocument) {
       const isRawDocument =
-        utils.isRawV2Document(JSON.parse(rawDocument)) || utils.isRawV3Document(JSON.parse(rawDocument));
+        utils.isRawV2Document(JSON.parse(rawDocument)) ||
+        utils.isRawV3Document(JSON.parse(rawDocument)) ||
+        utils.isRawV4Document(JSON.parse(rawDocument));
       setIsToWrap(isRawDocument);
       setErrors(
         utils.diagnose({
@@ -63,6 +66,14 @@ export const Wrap: React.FunctionComponent = () => {
       >
         {"3.0"}
       </button>
+      <button
+        className={`btn-blue-small font-bold mb-2 mr-1 ${version === "4.0" ? "selected" : "unselected"}`}
+        onClick={async () => {
+          setVersion("4.0");
+        }}
+      >
+        {"4.0"}
+      </button>
       <textarea
         className="w-full px-3 py-2 text-gray-800 border-2 rounded-lg focus:shadow-outline"
         onChange={(e) => setRawDocument(e.target.value)}
@@ -81,7 +92,9 @@ export const Wrap: React.FunctionComponent = () => {
                   JSON.stringify(
                     version === "2.0"
                       ? wrapDocument(JSON.parse(rawDocument))
-                      : await wrapDocumentV3(JSON.parse(rawDocument)),
+                      : version === "3.0"
+                      ? await wrapDocumentV3(JSON.parse(rawDocument))
+                      : await wrapDocumentV4(JSON.parse(rawDocument)),
                     null,
                     2
                   )
@@ -100,7 +113,7 @@ export const Wrap: React.FunctionComponent = () => {
       >
         Wrap
       </button>
-      {version !== "3.0" && ( // seems like no v3 unsalt yet
+      {version === "2.0" && ( // v3 and v4 has no need for unwrapping (i.e. unsalt)
         <button
           disabled={errors.length > 0 || isToWrap}
           className="btn-primary"