diff --git a/package-lock.json b/package-lock.json
index 1c98a16..eeedd96 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "classnames": "^2.3.2",
         "date-fns": "^2.29.3",
         "elliptic": "^6.5.4",
+        "feather-icons-react": "^0.6.2",
         "gray-matter": "^4.0.3",
         "immer": "^9.0.16",
         "jwk-thumbprint": "^0.1.4",
@@ -4536,6 +4537,14 @@
         "bser": "2.1.1"
       }
     },
+    "node_modules/feather-icons-react": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/feather-icons-react/-/feather-icons-react-0.6.2.tgz",
+      "integrity": "sha512-G677Y5nc3HzP1f5NNb5LJuZwKrI58BK4+/9O8Bl4naF9JixC+YL4trVom1F2ajnilq/EbU8JETPTNqvCzwH1qA==",
+      "peerDependencies": {
+        "react": ">= 16.8.4"
+      }
+    },
     "node_modules/fflate": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.7.4.tgz",
@@ -14013,6 +14022,12 @@
         "bser": "2.1.1"
       }
     },
+    "feather-icons-react": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/feather-icons-react/-/feather-icons-react-0.6.2.tgz",
+      "integrity": "sha512-G677Y5nc3HzP1f5NNb5LJuZwKrI58BK4+/9O8Bl4naF9JixC+YL4trVom1F2ajnilq/EbU8JETPTNqvCzwH1qA==",
+      "requires": {}
+    },
     "fflate": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.7.4.tgz",
diff --git a/package.json b/package.json
index b302085..39ffd25 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "classnames": "^2.3.2",
     "date-fns": "^2.29.3",
     "elliptic": "^6.5.4",
+    "feather-icons-react": "^0.6.2",
     "gray-matter": "^4.0.3",
     "immer": "^9.0.16",
     "jwk-thumbprint": "^0.1.4",
diff --git a/src/components/dids/Builder.tsx b/src/components/dids/Builder.tsx
index 53d49c6..b105443 100644
--- a/src/components/dids/Builder.tsx
+++ b/src/components/dids/Builder.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useCallback, useEffect } from "react";
+import FeatherIcon from 'feather-icons-react';
 import { documentSchema } from "../../lib/didParser";
 // import { updateDidDocument as updateDidDocumentDAO } from "../../lib/dao";
 import { didDocumentDeserializer } from "../../lib/verificationMaterialBuilder";
@@ -12,7 +13,6 @@ import EditEmbeddedMethod from "./Embedded/EditMethod";
 import NewReferenceMethod from "./Referenced/NewMethod";
 import SummarizeReferenceMethod from "./Referenced/Summarize";
 import EditReferenceMethod from "./Referenced/EditMethod";
-import { produceTestVector } from "@/lib/testvector";
 import { DidDocument } from "@/lib/DidDocument";
 import { EmbeddedMaterial, isEmbeddedMaterial, ReferencedMaterial } from "@/lib/DidMaterial";
 
@@ -30,16 +30,20 @@ const attemptSerialization = (didDocument: DidDocument): JSX.Element => {
 
   return (
     <div>
-      <div className="bg-primary text-primary-content p-4 flex">
-        <h3 className="flex-1">
-          DID Document
-        </h3>
-        <div
-          onClick={() => {
-            navigator.clipboard.writeText(result);
-          }}
-        >
-          <button className="btn btn-square btn-sm">
+      <div className="bg-base-300 text-base-content p-4 flex justify-between">
+        <div>
+          <h2 className="font-bold text-lg">
+            DID Document
+          </h2>
+          <h3 className="text-sm">
+            JSON Format
+          </h3>
+        </div>
+        <div>
+          <button className="btn btn-square btn-sm"
+            onClick={() => {
+              navigator.clipboard.writeText(result);
+            }}>
             <svg
               className="w-5 h-5 fill-current"
               xmlns="http://www.w3.org/2000/svg"
@@ -92,253 +96,253 @@ export default function DidBuilder({
 
   return (
     <>
-      <h1 className="text-2xl font-extrabold ml-4 mb-4">{name}</h1>
-      <div className="flex">
-        <div className="w-1/2 p-4">
-          <div className="dropdown">
-            <label tabIndex={0} className="btn btn-primary">
-              Add DID Controller
-            </label>
-            <ul
-              tabIndex={0}
-              className="dropdown-content menu p-2 shadow bg-primary text-primary-content rounded-box w-96"
+      <h1 className="text-2xl font-extrabold mb-4">{name}</h1>
+      <div className="flex gap-x-4 gap-4 p-4 bg-base-200">
+        <div className="dropdown">
+          <label tabIndex={0} className="btn btn-ghost btn-sm">
+            Edit Controller
+          </label>
+          <ul
+            tabIndex={0}
+            className="dropdown-content menu p-2 shadow bg-primary text-primary-content rounded-box w-96"
+          >
+            <li
+              onClick={() => {
+                setDidDocument(
+                  produce(didDocument, (draft) => {
+                    draft.controller = getCompleteDid(id);
+                  })
+                );
+              }}
             >
-              <li
-                onClick={() => {
+              <div>DID Subject</div>
+            </li>
+            <li>
+              <div>
+                Another entity <span className="italic">(opens modal)</span>
+              </div>
+            </li>
+          </ul>
+        </div>
+        {/* START Embedded */}
+        <div>
+          <label htmlFor="newVerificationMaterial" className="btn btn-ghost btn-sm" >
+            Add Embedded Material
+          </label>
+        </div>
+        <input
+          type="checkbox"
+          id="newVerificationMaterial"
+          className="modal-toggle"
+          checked={showNewEmbeddedMethodModal}
+          onChange={() => {
+            setShowNewEmbeddedMethodModal(!showNewEmbeddedMethodModal);
+          }}
+        />
+        <div className="modal">
+          {showNewEmbeddedMethodModal && (
+            <div className="modal-box relative">
+              <label
+                htmlFor="newVerificationMaterial"
+                className="btn btn-sm btn-circle absolute right-2 top-2"
+              >
+                ✕
+              </label>
+              <NewEmbeddedMethod
+                htmlId="newVerificationMaterial"
+                didDocument={didDocument}
+                save={(vm: EmbeddedMaterial) =>
                   setDidDocument(
                     produce(didDocument, (draft) => {
-                      draft.controller = getCompleteDid(id);
+                      draft.addVerificationMethod(vm);
                     })
-                  );
-                }}
-              >
-                <div>DID Subject</div>
-              </li>
-              <li>
-                <div>
-                  Another entity <span className="italic">(opens modal)</span>
-                </div>
-              </li>
-            </ul>
-          </div>
-
-          {/* START Embedded */}
-          <label htmlFor="newVerificationMaterial" className="btn btn-primary" >
-            Add Embedded Verification Method
-          </label>
-          <input
-            type="checkbox"
-            id="newVerificationMaterial"
-            className="modal-toggle"
-            checked={showNewEmbeddedMethodModal}
-            onChange={() => {
-              setShowNewEmbeddedMethodModal(!showNewEmbeddedMethodModal);
-            }}
-          />
-          <div className="modal">
-            {showNewEmbeddedMethodModal && (
-              <div className="modal-box relative">
-                <label
-                  htmlFor="newVerificationMaterial"
-                  className="btn btn-sm btn-circle absolute right-2 top-2"
-                >
-                  ✕
-                </label>
-                <NewEmbeddedMethod
-                  htmlId="newVerificationMaterial"
-                  didDocument={didDocument}
-                  save={(vm: EmbeddedMaterial) =>
-                    setDidDocument(
-                      produce(didDocument, (draft) => {
-                        draft.addVerificationMethod(vm);
-                      })
-                    )
-                  }
-                />
-              </div>
-            )}
-          </div>
-          {/* END Embedded */}
+                  )
+                }
+              />
+            </div>
+          )}
+        </div>
+        {/* END Embedded */}
 
-          {/* START Reference */}
-          <label htmlFor="newReferenceVerificationMaterial" className="btn btn-primary" >
-            Add Reference Verification Method
+        {/* START Reference */}
+        <div>
+          <label htmlFor="newReferenceVerificationMaterial" className="btn btn-ghost btn-sm" >
+            Add Referenced Material
           </label>
-          <input
-            type="checkbox"
-            id="newReferenceVerificationMaterial"
-            className="modal-toggle"
-            checked={showNewReferenceMethodModal}
-            onChange={() => {
-              setShowNewReferenceMethodModal(!showNewReferenceMethodModal);
-            }}
-          />
-          <div className="modal">
-            {showNewReferenceMethodModal && (
-              <div className="modal-box relative">
-                <label
-                  htmlFor="newReferenceVerificationMaterial"
-                  className="btn btn-sm btn-circle absolute right-2 top-2"
-                >
-                  ✕
-                </label>
-                <NewReferenceMethod
-                  htmlId="newReferenceVerificationMaterial"
-                  didDocument={didDocument}
-                  save={(vm: ReferencedMaterial) =>
-                    setDidDocument(
-                      produce(didDocument, (draft) => {
-                        draft.addVerificationMethod(vm);
-                      })
-                    )
-                  }
-                />
-              </div>
-            )}
-          </div>
-          {/* END Reference */}
-
-          <div className="flex flex-col gap-y-4 mt-4">
+        </div>
+        <input
+          type="checkbox"
+          id="newReferenceVerificationMaterial"
+          className="modal-toggle"
+          checked={showNewReferenceMethodModal}
+          onChange={() => {
+            setShowNewReferenceMethodModal(!showNewReferenceMethodModal);
+          }}
+        />
+        <div className="modal">
+          {showNewReferenceMethodModal && (
+            <div className="modal-box relative">
+              <label
+                htmlFor="newReferenceVerificationMaterial"
+                className="btn btn-sm btn-circle absolute right-2 top-2"
+              >
+                ✕
+              </label>
+              <NewReferenceMethod
+                htmlId="newReferenceVerificationMaterial"
+                didDocument={didDocument}
+                save={(vm: ReferencedMaterial) =>
+                  setDidDocument(
+                    produce(didDocument, (draft) => {
+                      draft.addVerificationMethod(vm);
+                    })
+                  )
+                }
+              />
+            </div>
+          )}
+        </div>
+      </div>
+      {/* END Reference */}
+      <div className="flex justify-between mb-8">
+        <div className="w-1/3 bg-neutral text-neutral-content shadow-[inset_-147px_0px_180px_-180px_rgba(0,0,0,1)]">
+          <div className="flex flex-col">
             {didDocument.verificationMaterials.map((vm, index) =>
               isEmbeddedMaterial(vm) ? (
                 <div key={index}>
-                  <SummarizeEmbeddedMethod
-                    method={vm}
-                    didDocument={didDocument}
-                    index={index}
-                  />
-                  <div className="bg-base-200 px-8 pb-8 flex w-full justify-between">
-                    <label
-                      htmlFor={`embeddedVm${index}`}
-                      className="btn btn-wide"
-                    >
-                      Edit
-                    </label>
-                    <input
-                      type="checkbox"
-                      id={`embeddedVm${index}`}
-                      className="modal-toggle"
-                      checked={showEditModal === `embeddedVm${index}`}
-                      onChange={() => {
-                        setShowEditModal(
-                          showEditModal ? null : `embeddedVm${index}`
-                        );
-                      }}
-                    />
-                    <div className="modal">
-                      {showEditModal && (
-                        <div className="modal-box relative">
-                          <label
-                            htmlFor={`embeddedVm${index}`}
-                            className="btn btn-sm btn-circle absolute right-2 top-2"
-                          >
-                            ✕
-                          </label>
-                          <EditEmbeddedMethod
-                            htmlId={`embeddedVm${index}`}
-                            method={vm}
-                            didDocument={didDocument}
-                            save={(vm: EmbeddedMaterial) => {
-                              setDidDocument(
-                                produce(didDocument, (draft) => {
-                                  draft.verificationMaterials[index] = vm;
-                                })
-                              );
-                            }}
-                          />
-                        </div>
-                      )}
+                  <div className="py-4 flex w-full">
+                    <div className="flex flex-col justify-between mx-2">
+                      <label
+                        htmlFor={`embeddedVm${index}`}
+                        className="btn btn-ghost btn-xs opacity-50 text-success"
+                      >
+                        <FeatherIcon icon="edit" size="18" />
+                      </label>
+                      <input
+                        type="checkbox"
+                        id={`embeddedVm${index}`}
+                        className="modal-toggle"
+                        checked={showEditModal === `embeddedVm${index}`}
+                        onChange={() => {
+                          setShowEditModal(
+                            showEditModal ? null : `embeddedVm${index}`
+                          );
+                        }}
+                      />
+                      <div className="modal">
+                        {showEditModal && (
+                          <div className="modal-box relative">
+                            <label
+                              htmlFor={`embeddedVm${index}`}
+                              className="btn btn-sm btn-circle absolute right-2 top-2"
+                            >
+                              ✕
+                            </label>
+                            <EditEmbeddedMethod
+                              htmlId={`embeddedVm${index}`}
+                              method={vm}
+                              didDocument={didDocument}
+                              save={(vm: EmbeddedMaterial) => {
+                                setDidDocument(
+                                  produce(didDocument, (draft) => {
+                                    draft.verificationMaterials[index] = vm;
+                                  })
+                                );
+                              }}
+                            />
+                          </div>
+                        )}
+                      </div>
+                      <button
+                        className="btn btn-ghost btn-xs opacity-50 text-error"
+                        onClick={() => {
+                          setDidDocument(
+                            produce(didDocument, (draft) => {
+                              draft.verificationMaterials.splice(index, 1);
+                            })
+                          );
+                        }}
+                      >
+                        <FeatherIcon icon="trash" size="18" />
+                      </button>
                     </div>
-                    <button
-                      className="btn btn-error btn-outline"
-                      onClick={() => {
-                        setDidDocument(
-                          produce(didDocument, (draft) => {
-                            draft.verificationMaterials.splice(index, 1);
-                          })
-                        );
-                      }}
-                    >
-                      Delete
-                    </button>
+                    <SummarizeEmbeddedMethod
+                      method={vm}
+                      didDocument={didDocument}
+                      index={index}
+                    />
                   </div>
                 </div>
               ) : (
                 <div key={index}>
-                  <SummarizeReferenceMethod
-                    key={index}
-                    method={vm}
-                    didDocument={didDocument}
-                    index={index}
-                  />
-                  <div className="bg-base-200 px-8 pb-8 flex w-full justify-between">
-                    <label
-                      htmlFor={`referenceVm${index}`}
-                      className="btn btn-wide"
-                    >
-                      Edit
-                    </label>
-                    <input
-                      type="checkbox"
-                      id={`referenceVm${index}`}
-                      className="modal-toggle"
-                      checked={showEditModal === `referenceVm${index}`}
-                      onChange={() => {
-                        setShowEditModal(
-                          showEditModal ? null : `referenceVm${index}`
-                        );
-                      }}
-                    />
-                    <div className="modal">
-                      {showEditModal && (
-                        <div className="modal-box relative">
-                          <label
-                            htmlFor={`referenceVm${index}`}
-                            className="btn btn-sm btn-circle absolute right-2 top-2"
-                          >
-                            ✕
-                          </label>
-                          <EditReferenceMethod
-                            htmlId={`referenceVm${index}`}
-                            method={vm}
-                            didDocument={didDocument}
-                            save={(vm: ReferencedMaterial) => {
-                              setDidDocument(
-                                produce(didDocument, (draft) => {
-                                  draft.verificationMaterials[index] = vm;
-                                })
-                              );
-                            }}
-                          />
-                        </div>
-                      )}
+                  <div className="py-4 flex w-full">
+                    <div className="flex flex-col justify-between mx-2">
+                      <label
+                        htmlFor={`referenceVm${index}`}
+                        className="btn btn-ghost btn-xs opacity-50 text-success"
+                      >
+                        <FeatherIcon icon="edit" size="18" />
+                      </label>
+                      <input
+                        type="checkbox"
+                        id={`referenceVm${index}`}
+                        className="modal-toggle"
+                        checked={showEditModal === `referenceVm${index}`}
+                        onChange={() => {
+                          setShowEditModal(
+                            showEditModal ? null : `referenceVm${index}`
+                          );
+                        }}
+                      />
+                      <div className="modal">
+                        {showEditModal && (
+                          <div className="modal-box relative">
+                            <label
+                              htmlFor={`referenceVm${index}`}
+                              className="btn btn-sm btn-circle absolute right-2 top-2"
+                            >
+                              ✕
+                            </label>
+                            <EditReferenceMethod
+                              htmlId={`referenceVm${index}`}
+                              method={vm}
+                              didDocument={didDocument}
+                              save={(vm: ReferencedMaterial) => {
+                                setDidDocument(
+                                  produce(didDocument, (draft) => {
+                                    draft.verificationMaterials[index] = vm;
+                                  })
+                                );
+                              }}
+                            />
+                          </div>
+                        )}
+                      </div>
+                      <button
+                        className="btn btn-ghost btn-xs opacity-50 text-error"
+                        onClick={() => {
+                          setDidDocument(
+                            produce(didDocument, (draft) => {
+                              draft.verificationMaterials.splice(index, 1);
+                            })
+                          );
+                        }}
+                      >
+                        <FeatherIcon icon="trash" size="18" />
+                      </button>
                     </div>
-                    <button
-                      className="btn btn-error btn-outline"
-                      onClick={() => {
-                        setDidDocument(
-                          produce(didDocument, (draft) => {
-                            draft.verificationMaterials.splice(index, 1);
-                          })
-                        );
-                      }}
-                    >
-                      Delete
-                    </button>
+                    <SummarizeReferenceMethod
+                      method={vm}
+                      didDocument={didDocument}
+                      index={index}
+                    />
                   </div>
                 </div>
               )
             )}
           </div>
         </div>
-        <div className="w-1/2 p-4">
-          <button
-            className="btn btn-block btn-secondary mb-4"
-            onClick={async () => produceTestVector(didDocument)}
-          // disabled
-          >
-            Publish (coming soon)
-          </button>
+        <div className="w-2/3">
           {attemptSerialization(didDocument)}
         </div>
       </div>
diff --git a/src/components/dids/Embedded/MethodSettings.tsx b/src/components/dids/Embedded/MethodSettings.tsx
index c13ff97..fd27acb 100644
--- a/src/components/dids/Embedded/MethodSettings.tsx
+++ b/src/components/dids/Embedded/MethodSettings.tsx
@@ -1,5 +1,6 @@
 import { DidDocument } from "@/lib/DidDocument";
 import { EmbeddedMaterial } from "@/lib/DidMaterial";
+import { deriveIdentificationFragment } from "@/lib/keys";
 import { KeyFormat, Representation, UsageFormat, verificationRelationships } from "@/types/dids";
 import { useState } from "react";
 
@@ -22,7 +23,7 @@ export default function EmbeddedMethodSettings({
 
   return (
     <div>
-      <div className="flex flex-col gap-y-8">
+      <div className="flex flex-col gap-y-8 text-base-content">
         <div>
           <div>
             <div className="form-control w-full">
@@ -92,7 +93,7 @@ export default function EmbeddedMethodSettings({
                   </div>
                   <div className="btn-group">
                     <button
-                      className={`btn btn-xs ${methods[method] === "Embedded" ? "btn-accent" : ""
+                      className={`btn btn-xs ${methods[method] === "Embedded" ? "btn-primary" : ""
                         }`}
                       onClick={() => {
                         setMethods({
@@ -114,7 +115,7 @@ export default function EmbeddedMethodSettings({
                         });
                       }}
                     >
-                      Reference
+                      Referenced
                     </button>
 
                     <button
@@ -139,7 +140,7 @@ export default function EmbeddedMethodSettings({
         className="btn btn-info btn-outline btn-block mt-4"
         onClick={() => {
           const newVerificationMethod: EmbeddedMaterial =
-            new EmbeddedMaterial(id,
+            new EmbeddedMaterial(id || `#${deriveIdentificationFragment(format, material)}`,
               {
                 format,
                 curve: "P-256",
diff --git a/src/components/dids/Embedded/Summarize.tsx b/src/components/dids/Embedded/Summarize.tsx
index 76a79e3..7d794c8 100644
--- a/src/components/dids/Embedded/Summarize.tsx
+++ b/src/components/dids/Embedded/Summarize.tsx
@@ -1,6 +1,18 @@
 import { DidDocument } from "@/lib/DidDocument";
 import { EmbeddedMaterial } from "@/lib/DidMaterial";
 import { VerificationRelationship } from "@/types/dids";
+import FeatherIcon from 'feather-icons-react';
+
+function getRelationShipIcon(relationship: VerificationRelationship): JSX.Element {
+  switch (relationship) {
+    case "authentication": return <span className="font-mono">Auth</span>;
+    case "assertionMethod": return <span className="font-mono">AM</span>;
+    case "keyAgreement": return <span className="font-mono">KA</span>;
+    case "capabilityDelegation": return <span className="font-mono">CD</span>;
+    case "capabilityInvocation": return <span className="font-mono">CI</span>;
+    default: return <span>unknown</span>;
+  }
+}
 
 export default function SummarizeEmbeddedMethod({
   method,
@@ -13,43 +25,31 @@ export default function SummarizeEmbeddedMethod({
 }): JSX.Element {
   return (
     <>
-      <div className="bg-base-200 p-8 gap-y-4 flex flex-col" key={index}>
-        <div className="text-2xl opacity-50">{method.material.curve}</div>
-        <div className="text-sm">
-          <span className="opacity-75">Id:</span>{" "}
-          <span className="font-mono">{method.id}</span>
-        </div>
+      <div className="flex flex-col min-w-0 pr-1" key={index}>
         <div className="text-sm">
-          <span className="opacity-75">Controller:</span>{" "}
-          <span className="font-mono">{method.material.controller}</span>
-          {" ("}
-          {method.material.controller === didDocument.id ? (
-            <span className="text-success">DID Subject</span>
-          ) : (
-            <span className="text-error">External</span>
-          )}
-          {")"}
-        </div>
-        <div className="flex flex-wrap gap-2 bg-base-300 p-4">
-          {Object.keys(method.material.usage).map((relationship, index) => (
-            <div
-              className={`badge badge-outline ${method.material.usage[relationship as VerificationRelationship] ===
-                "Reference"
-                ? "badge-secondary"
-                : "badge-accent"
-                }`}
-              key={index}
-            >
-              <div
-                className="tooltip"
-                data-tip={
-                  method.material.usage[relationship as VerificationRelationship]
-                }
-              >
-                {relationship}
+          <div className="truncate">
+            <span className="opacity-50">Id:</span>{" "}
+            {method.id}
+          </div>
+
+          <div><span className="opacity-50">Curve:</span> {method.material.curve}</div>
+          <div className="flex flex-wrap gap-2">
+            <span className="opacity-50">Usage:</span>{" "}
+            {Object.keys(method.material.usage).map((relationship, index, arr) => (
+              <div key={index}>
+                <div
+                  className="tooltip"
+                  data-tip={
+                    `${relationship} as ${method.material.usage[relationship as VerificationRelationship]}`
+                  }
+                >
+                  {getRelationShipIcon(relationship as VerificationRelationship)} {
+                    index === arr.length - 1 ? "" : "·"
+                  }
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
       </div>
     </>
diff --git a/src/components/dids/Referenced/MethodSettings.tsx b/src/components/dids/Referenced/MethodSettings.tsx
index 49a44d0..5efc45c 100644
--- a/src/components/dids/Referenced/MethodSettings.tsx
+++ b/src/components/dids/Referenced/MethodSettings.tsx
@@ -18,7 +18,7 @@ export default function ReferenceMethodSettings({
 
   return (
     <div>
-      <div className="flex flex-col gap-y-8">
+      <div className="flex flex-col gap-y-8 text-base-content">
         <div>
           <div>
             <div className="form-control w-full">
@@ -81,7 +81,7 @@ export default function ReferenceMethodSettings({
       </div>
       <label
         htmlFor={htmlId}
-        className="btn btn-info btn-outline btn-block mt-4"
+        className={`btn btn-info btn-outline btn-block mt-4 ${id === "" ? "btn-disabled" : ""}`}
         onClick={() => {
           const newVerificationMethod: ReferencedMaterial =
             new ReferencedMaterial(
diff --git a/src/components/dids/Referenced/Summarize.tsx b/src/components/dids/Referenced/Summarize.tsx
index 4bcf4b6..6b694b5 100644
--- a/src/components/dids/Referenced/Summarize.tsx
+++ b/src/components/dids/Referenced/Summarize.tsx
@@ -2,6 +2,17 @@ import { DidDocument } from "@/lib/DidDocument";
 import { ReferencedMaterial } from "@/lib/DidMaterial";
 import { VerificationRelationship } from "@/types/dids";
 
+function getRelationShipIcon(relationship: VerificationRelationship): JSX.Element {
+  switch (relationship) {
+    case "authentication": return <span className="font-mono">Auth</span>;
+    case "assertionMethod": return <span className="font-mono">AM</span>;
+    case "keyAgreement": return <span className="font-mono">KA</span>;
+    case "capabilityDelegation": return <span className="font-mono">CD</span>;
+    case "capabilityInvocation": return <span className="font-mono">CI</span>;
+    default: return <span>unknown</span>;
+  }
+}
+
 export default function SummarizeReferenceMethod({
   method,
   index,
@@ -12,32 +23,31 @@ export default function SummarizeReferenceMethod({
 }): JSX.Element {
   return (
     <>
-      <div className="bg-base-200 p-8 gap-y-4 flex flex-col" key={index}>
-        <div className="text-2xl opacity-50">Reference</div>
+      <div className="flex flex-col min-w-0 pr-1" key={index}>
         <div className="text-sm">
-          <span className="opacity-75">Id:</span>{" "}
-          <span className="font-mono">{method.id}</span>
-        </div>
-        <div className="flex flex-wrap gap-2 bg-base-300 p-4">
-          {Object.keys(method.getUsage()).map((relationship, index) => (
-            <div
-              className={`badge badge-outline ${method.getUsage()[relationship as VerificationRelationship] ===
-                "Reference"
-                ? "badge-secondary"
-                : "badge-accent"
-                }`}
-              key={index}
-            >
-              <div
-                className="tooltip"
-                data-tip={
-                  method.getUsage()[relationship as VerificationRelationship]
-                }
-              >
-                {relationship}
+          <div className="truncate">
+            <span className="opacity-50">Id:</span>{" "}
+            {method.id}
+          </div>
+
+          <div><span className="opacity-50">References external material</span></div>
+          <div className="flex flex-wrap gap-2">
+            <span className="opacity-50">Usage:</span>{" "}
+            {Object.keys(method.material.usage).map((relationship, index, arr) => (
+              <div key={index}>
+                <div
+                  className="tooltip"
+                  data-tip={
+                    `${relationship} as ${method.material.usage[relationship as VerificationRelationship]}`
+                  }
+                >
+                  {getRelationShipIcon(relationship as VerificationRelationship)} {
+                    index === arr.length - 1 ? "" : "·"
+                  }
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
       </div>
     </>
diff --git a/src/lib/DidMaterial.ts b/src/lib/DidMaterial.ts
index 117c2d1..c30945e 100644
--- a/src/lib/DidMaterial.ts
+++ b/src/lib/DidMaterial.ts
@@ -63,20 +63,20 @@ export class EmbeddedMaterial implements DidMaterial {
 
   public serialize(representation: Representation): z.infer<typeof verificationRelationshipSchema> {
     if (!this.material.controller) throw Error('Malformed verification method: Embedded material must contain controller')
-    const id = !this.id ? `#${deriveIdentificationFragment(this.material.format, this.material.keyMaterial)}` : this.id
+    if (!this.id || this.id === "") throw Error('Malformed verification method: Embedded material must contain id')
     if (representation === 'Reference') {
-      return id
+      return this.id
     }
     if (this.material.format === 'JsonWebKey2020') {
       return {
-        id,
+        id: this.id,
         type: this.material.format,
         controller: this.material.controller,
         publicKeyJwk: encodeJsonWebKey(this.material.keyMaterial),
       }
     } else if (this.material.format === 'Multibase') {
       return {
-        id,
+        id: this.id,
         type: 'P256Key2021',
         controller: this.material.controller,
         publicKeyMultibase: encodeMultibaseKey(this.material.keyMaterial)
@@ -117,6 +117,7 @@ export class ReferencedMaterial implements DidMaterial {
   }
 
   public serialize(): z.infer<typeof verificationRelationshipSchema> {
+    if (!this.id || this.id === "") throw Error('Malformed verification method: Referenced material must contain id')
     return this.id
   }
 }
diff --git a/yarn.lock b/yarn.lock
index f6a2a61..ae3ff8f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2550,6 +2550,11 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
+feather-icons-react@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.npmjs.org/feather-icons-react/-/feather-icons-react-0.6.2.tgz"
+  integrity sha512-G677Y5nc3HzP1f5NNb5LJuZwKrI58BK4+/9O8Bl4naF9JixC+YL4trVom1F2ajnilq/EbU8JETPTNqvCzwH1qA==
+
 fflate@^0.7.3:
   version "0.7.4"
   resolved "https://registry.npmjs.org/fflate/-/fflate-0.7.4.tgz"
@@ -4927,7 +4932,7 @@ react-use@^17.4.0:
     ts-easing "^0.2.0"
     tslib "^2.1.0"
 
-react@*, "react@^16.8.0  || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 16", "react@>= 16.8.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16, "react@>=16.x <=18.x":
+react@*, "react@^16.8.0  || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 16", "react@>= 16.8.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@>= 16.8.4", react@>=16, "react@>=16.x <=18.x":
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==