diff --git a/index.html b/index.html
index 1fd0e50..2adbaf0 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
 			:root {
 				--color-background: #ffffff;
 				--color-foreground: #000000;
-				--color-accent: #ff7f00;
+				--color-accent: initial;
 
 				--color-gray: #7E7E7E;
 				--color-red: #FB464C;
@@ -37,7 +37,6 @@
 				color: var(--color-foreground);
 			}
 		</style>
-		<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 		<script type="module" src="src/index.mjs"></script>
 		<template id="template-display">
 			<slot name="display-container"></slot>
@@ -97,9 +96,15 @@
 					overflow-x: clip;
 					overflow-y: scroll;
 				}
+
+				.node-file-title {
+					font-size: 2em;
+					margin-block-start: .67em;
+					margin-block-end: .67em;
+				}
 			</style>
 			<article class="node-file">
-				<h1>
+				<h1 class="node-file-title">
 					<slot name="node-title">{Node title}</slot>
 				</h1>
 				<slot name="node-contents">{Node contents}</slot>
@@ -131,6 +136,14 @@
 		<template id="template-markdown">
 			<slot name="markdown-contents">{Markdown text}</slot>
 		</template>
+		<template id="template-frontmatter">
+			<style>
+				.frontmatter {
+					opacity: 50%;
+				}
+			</style>
+			<pre class="frontmatter"><slot name="frontmatter-contents">{Markdown text}</slot></pre>
+		</template>
 		<template id="template-canvas">
 			<style>
 				.canvas {
@@ -141,10 +154,23 @@
 					width: max-content;
 					height: max-content;
 				}
+
+				.canvas * {
+					left: 0;
+					top: 0;
+				}
+
+				.canvas *:first-child {
+					position: relative;
+				}
+
+				.canvas *:not(:first-child) {
+					position: absolute;
+				}
 			</style>
 			<div class="canvas">
-				<slot name="canvas-nodes">{Canvas nodes}</slot>
 				<slot name="canvas-edges">{Canvas edges}</slot>
+				<slot name="canvas-nodes">{Canvas nodes}</slot>
 			</div>
 		</template>
 		<template id="template-wikilink">
@@ -168,6 +194,5 @@
 		</template>
 	</head>
 	<body>
-		<x-display root vref="https://raw.githubusercontent.com/Steffo99/appunti-magistrali/main/" wref="8 - Crittografia applicata/1 - Concetti/3 - Casualità ed entropia/★ mappa concettuale.canvas"/>
 	</body>
 </html>
\ No newline at end of file
diff --git a/src/config.mjs b/src/config.mjs
index 03d2ee2..eb9316b 100644
--- a/src/config.mjs
+++ b/src/config.mjs
@@ -1,22 +1,11 @@
-/**
- * Get configuration from the given location.
- *
- * @param location {Location} The location to use to determine the configuration.
- * @returns {{file: string, vault: string}}
- */
 export function configFromURL(location) {
     const queryString = new URLSearchParams(location.search)
-    const vault = queryString.get("vault")
-    const file = queryString.get("file")
+    const vref = queryString.get("vref")
+    const wref = queryString.get("wref")
 
-    return {vault, file}
+    return {vref, wref}
 }
 
-/**
- * Get configuration from the current {@link window.location}.
- *
- * @returns {{file: string, vault: string}}
- */
 export function configFromWindow() {
     return configFromURL(window.location)
 }
diff --git a/src/elements/canvas.mjs b/src/elements/canvas.mjs
index e1c7148..fa21423 100644
--- a/src/elements/canvas.mjs
+++ b/src/elements/canvas.mjs
@@ -60,7 +60,7 @@ export class CanvasElement extends HTMLElement {
         for(const node of this.parsedJSON["nodes"]) {
             const element = document.createElement(`x-node-${node["type"]}`)
 
-            element.setAttribute("id", node["id"])
+            element.setAttribute("id", `node-${node["id"]}`)
             element.setAttribute("x", node["x"] - minX["x"])
             element.setAttribute("y", node["y"] - minY["y"])
             element.setAttribute("width", node["width"])
@@ -74,7 +74,7 @@ export class CanvasElement extends HTMLElement {
 
                 case "file":
                     element.setAttribute("file", node["file"])
-                    element.setAttribute("fileName", fileDetails(node["file"])[0])
+                    element.setAttribute("file-name", fileDetails(node["file"]).name)
                     break
 
                 case "group":
@@ -92,7 +92,7 @@ export class CanvasElement extends HTMLElement {
 
         for(const edge of this.parsedJSON["edges"]) {
             const element = document.createElement("x-edge")
-            element.setAttribute("id", edge["id"])
+            element.setAttribute("id", `edge-${edge["id"]}`)
             element.setAttribute("node-from", edge["fromNode"])
             element.setAttribute("node-from-side", edge["fromSide"])
             element.setAttribute("node-to", edge["toNode"])
@@ -104,15 +104,9 @@ export class CanvasElement extends HTMLElement {
             this.edgesSlotted.appendChild(element)
         }
 
-        this.nodesSlotted.style["position"] = "relative"
-        this.nodesSlotted.style["left"] = "0"
-        this.nodesSlotted.style["top"] = "0"
         this.nodesSlotted.style["width"] = `${maxX["x"] + maxX["width"] - minX["x"]}px`
         this.nodesSlotted.style["height"] = `${maxY["y"] + maxY["height"] - minY["y"]}px`
 
-        this.edgesSlotted.style["position"] = "absolute"
-        this.edgesSlotted.style["left"] = "0"
-        this.edgesSlotted.style["top"] = "0"
         this.edgesSlotted.style["width"] = `${maxX["x"] + maxX["width"] - minX["x"]}px`
         this.edgesSlotted.style["height"] = `${maxY["y"] + maxY["height"] - minY["y"]}px`
 
diff --git a/src/elements/display.mjs b/src/elements/display.mjs
index c763af9..95ba56f 100644
--- a/src/elements/display.mjs
+++ b/src/elements/display.mjs
@@ -69,12 +69,12 @@ export class DisplayElement extends HTMLElement {
         this.containerSlotted.remove()
         this.containerSlotted = null
 
-        const [, fileExtension] = fileDetails(this.getAttribute("wref"))
+        const fileExtension = fileDetails(this.getAttribute("wref")).extension
 
         this.containerSlotted = document.createElement({
             "md": customElements.getName(MarkdownElement),
-            "canvas": this.getAttribute("root") !== undefined ? customElements.getName(CanvasElement) : "div",
-        }[fileExtension] ?? "div")
+            "canvas": customElements.getName(CanvasElement),
+        }[fileExtension])
         this.containerSlotted.slot = "display-container"
         this.containerSlotted.setAttribute("contents", this.data)
         this.appendChild(this.containerSlotted)
diff --git a/src/elements/index.mjs b/src/elements/index.mjs
index 158a121..6dec44b 100644
--- a/src/elements/index.mjs
+++ b/src/elements/index.mjs
@@ -1,5 +1,5 @@
 export {NodeFileElement, NodeGroupElement, NodeTextElement} from "./node.mjs"
-export {MarkdownElement, HashtagElement, WikilinkElement} from "./markdown.mjs"
+export {MarkdownElement, HashtagElement, WikilinkElement, FrontMatterElement} from "./markdown.mjs"
 export {CanvasElement} from "./canvas.mjs"
 export {DisplayElement} from "./display.mjs"
 export {EdgeElement} from "./edge.mjs"
\ No newline at end of file
diff --git a/src/elements/markdown.mjs b/src/elements/markdown.mjs
index eaf5b3a..f6c5557 100644
--- a/src/elements/markdown.mjs
+++ b/src/elements/markdown.mjs
@@ -1,4 +1,6 @@
 import { Marked } from "https://unpkg.com/marked@9.1.2/lib/marked.esm.js";
+import { fileDetails } from "../utils/file.mjs";
+import { DisplayElement } from "./display.mjs";
 
 
 /**
@@ -11,21 +13,21 @@ export class MarkdownElement extends HTMLElement {
                 name: "frontmatter",
                 level: "block",
                 start(src) {
-                    return src.match(/^---/)?.index
+                    return src.match(/^(-{3,})/)?.index
                 },
                 tokenizer(src, tokens) {
-                    const match = src.match(/^---(.+)?\n(.+)\n---\n/)
+                    const match = src.match(/^(-{3,})(.+)?\n((?:.+\n)*)\1\n/)
                     if(match) {
                         return {
                             type: "frontmatter",
                             raw: match[0],
-                            lang: match[1],
-                            data: match[2],
+                            lang: match[2],
+                            data: match[3],
                         }
                     }
                 },
                 renderer(token) {
-                    return `<pre><code lang="${token.lang}">${token.data}</code></pre>`;
+                    return `<x-frontmatter><code slot="frontmatter-contents" lang="${token.lang}">${token.data}</code></x-frontmatter>`;
                 }
             },
             {
@@ -95,6 +97,23 @@ export class MarkdownElement extends HTMLElement {
     }
 }
 
+/**
+ * Element rendering Obsidian front matter.
+ */
+export class FrontMatterElement extends HTMLElement {
+    static getTemplate() {
+        return document.getElementById("template-frontmatter")
+    }
+
+    // noinspection JSUnusedGlobalSymbols
+    connectedCallback() {
+        const instanceDocument = FrontMatterElement.getTemplate().content.cloneNode(true)
+        const shadow = this.attachShadow({ mode: "open" })
+
+        shadow.appendChild(instanceDocument)
+    }
+}
+
 /**
  * Element rendering an Obsidian Hashtag.
  */
@@ -120,25 +139,17 @@ export class WikilinkElement extends HTMLElement {
         return document.getElementById("template-wikilink")
     }
 
-    /**
-     * Get the card this Wikilink points to via the `wref` attribute.
-     *
-     * @returns {String} The card target.
-     */
-    getWikilinkWref() {
-        return this.getAttribute("wref")
-    }
-
     // noinspection JSUnusedGlobalSymbols
     connectedCallback() {
         const instanceDocument = WikilinkElement.getTemplate().content.cloneNode(true)
         const shadow = this.attachShadow({ mode: "open" })
 
-        const wref = this.getWikilinkWref()
+        const instanceElement = instanceDocument.querySelector(".wikilink")
 
-        this.addEventListener("click", function() {
-            console.warn("Would move to", wref, ", but navigation is not yet implemented.")
-        })
+        const destinationURL = new URL(window.location)
+        destinationURL.hash = this.getAttribute("wref")
+
+        instanceElement.href = destinationURL
 
         shadow.appendChild(instanceDocument)
     }
diff --git a/src/elements/node.mjs b/src/elements/node.mjs
index ee2c7bc..669a07b 100644
--- a/src/elements/node.mjs
+++ b/src/elements/node.mjs
@@ -99,9 +99,13 @@ export class NodeFileElement extends NodeElement {
         this.instanceElement.style.setProperty("height", `${this.getAttribute("height")}px`)
         this.instanceElement.style.setProperty("--color-node", this.colorToHex())
 
-        this.nameSlotted = document.createElement("span")
+        this.nameSlotted = document.createElement("x-wikilink")
         this.nameSlotted.slot = "node-title"
-        this.nameSlotted.innerText = this.getAttribute("fileName")
+        this.nameSlotted.setAttribute("wref", this.getAttribute("file"))
+        const nameSlottedText = document.createElement("span")
+        nameSlottedText.slot = "wikilink-text"
+        nameSlottedText.innerText = this.getAttribute("file-name")
+        this.nameSlotted.appendChild(nameSlottedText)
         this.appendChild(this.nameSlotted)
 
         this.contentsSlotted = document.createElement(customElements.getName(DisplayElement))
@@ -140,6 +144,7 @@ export class NodeTextElement extends NodeElement {
         this.contentsSlotted = document.createElement("x-markdown")
         this.contentsSlotted.slot = "node-contents"
         this.contentsSlotted.setAttribute("contents", this.getAttribute("text"))
+        this.appendChild(this.contentsSlotted)
 
         shadow.appendChild(instanceDocument)
     }
diff --git a/src/index.mjs b/src/index.mjs
index da86874..cafc43b 100644
--- a/src/index.mjs
+++ b/src/index.mjs
@@ -1,11 +1,20 @@
-import { CanvasElement, HashtagElement, MarkdownElement, NodeFileElement, WikilinkElement, DisplayElement, EdgeElement, NodeGroupElement, NodeTextElement } from "./elements/index.mjs";
+import { CanvasElement, HashtagElement, MarkdownElement, NodeFileElement, WikilinkElement, DisplayElement, EdgeElement, NodeGroupElement, NodeTextElement, FrontMatterElement } from "./elements/index.mjs";
+import { configFromWindow } from "./config.mjs";
 
 customElements.define("x-node-file", NodeFileElement)
 customElements.define("x-node-text", NodeTextElement)
 customElements.define("x-node-group", NodeGroupElement)
 customElements.define("x-markdown", MarkdownElement)
+customElements.define("x-frontmatter", FrontMatterElement)
 customElements.define("x-wikilink", WikilinkElement)
 customElements.define("x-hashtag", HashtagElement)
 customElements.define("x-canvas", CanvasElement)
 customElements.define("x-display", DisplayElement)
 customElements.define("x-edge", EdgeElement)
+
+const config = configFromWindow()
+const displayElement = document.createElement("x-display")
+displayElement.setAttribute("vref", config.vref)
+displayElement.setAttribute("wref", config.wref)
+displayElement.setAttribute("root", "")
+document.body.appendChild(displayElement)
diff --git a/src/utils/file.mjs b/src/utils/file.mjs
index 3c7de28..11ab9f7 100644
--- a/src/utils/file.mjs
+++ b/src/utils/file.mjs
@@ -1,12 +1,30 @@
-/**
- * Parse a file path to get the file name and extension.
- *
- * @param file The file path to parse.
- * @returns {[String, String]} The file's name and extension without the dot respectively.
- */
-export function fileDetails(file) {
-    const split = file.split("/").at(-1).split(".")
-    const name = split.slice(0, -1)
-    const extension = split.at(-1)
-    return [name, extension]
+export function filePath(file) {
+    const stack = []
+
+    for(const part of file.split("/")) {
+        if(part === ".") {
+            // noinspection UnnecessaryContinueJS
+            continue
+        }
+        else if(part === "..") {
+            stack.pop()
+        }
+        else {
+            stack.push(part)
+        }
+    }
+
+    return stack
+}
+
+export function fileDetails(file) {
+    const path = filePath(file)
+    const directory = path.slice(0, -1).join("/")
+    const nameExtension = path.at(-1)
+
+    const split2 = nameExtension.split(".")
+    const name = split2.slice(0, -1)
+    const extension = split2.at(-1)
+
+    return {path, directory, name, extension}
 }
diff --git a/style/dark.css b/style/dark.css
index 0ecc98d..0126369 100644
--- a/style/dark.css
+++ b/style/dark.css
@@ -2,7 +2,7 @@
     :root:root {
         --color-background: #1e1e1e;
         --color-foreground: #ffffff;
-        --color-accent: #ff7f00;
+        --color-accent: initial;
 
         --color-gray: #7E7E7E;
         --color-red: #FB464C;
diff --git a/style/light.css b/style/light.css
index fac3b05..3da427e 100644
--- a/style/light.css
+++ b/style/light.css
@@ -2,7 +2,7 @@
     :root:root {
         --color-background: #ffffff;
         --color-foreground: #1e1e1e;
-        --color-accent: #ff7f00;
+        --color-accent: initial;
 
         --color-gray: #7E7E7E;
         --color-red: #FB464C;
