diff --git a/login.html b/login.html
index 841425c..2a71a42 100644
--- a/login.html
+++ b/login.html
@@ -10,7 +10,7 @@
 	</head>
 	<body>
 		<div class="center-div">
-			<form>
+			<form style="margin-top: 20px;">
 				<fieldset>
 					<legend>Proxmox VE Login</legend>
 					<div class="input-grid" style="grid-template-columns: repeat(2, auto);">
diff --git a/scripts/elements.js b/scripts/elements.js
index ac195da..9234109 100644
--- a/scripts/elements.js
+++ b/scripts/elements.js
@@ -131,4 +131,43 @@ class Instance extends HTMLElement {
 	}
 }
 
-customElements.define("instance-article", Instance);
\ No newline at end of file
+class Dialog extends HTMLElement {
+	constructor () {
+		super();
+		let shadowRoot = this.attachShadow({mode: "open"});
+
+		shadowRoot.innerHTML = `
+		<link rel="stylesheet" href="css/style.css" type="text/css">
+		<link rel="stylesheet" href="css/dialog.css" type="text/css">
+		<dialog>
+			<form method="dialog"></form>
+		</dialog>
+		`;
+
+		this.shadowElement = shadowRoot;
+		this.dialog = shadowRoot.querySelector("dialog");
+		this.form = shadowRoot.querySelector("form");
+	}
+
+	set body (body) {
+		this.form.innerHTML = body + `
+		<div class="btn-group">
+			<button value="cancel">Cancel</button>
+			<button value="confirm">Confirm</button>
+		</div>
+		`;
+	}
+
+	set callback (callback) {
+		this.dialog.addEventListener("close", () => {
+			callback(this.dialog.returnValue, new FormData(this.form));
+		});
+	}
+
+	show () {
+		this.dialog.showModal();
+	}
+}
+
+customElements.define("instance-article", Instance);
+customElements.define("dialog-form", Dialog);
\ No newline at end of file
