diff --git a/module/Apps/DelveDiceHUD.mjs b/module/Apps/DelveDiceHUD.mjs
index 0122aea..a487480 100644
--- a/module/Apps/DelveDiceHUD.mjs
+++ b/module/Apps/DelveDiceHUD.mjs
@@ -83,6 +83,10 @@ export class DelveDiceHUD extends HandlebarsApplicationMixin(ApplicationV2) {
 				await this._prepareDifficultyContext(ctx);
 				break;
 			};
+			case `fateCompass`: {
+				await this._prepareFateCompassContext(ctx);
+				break;
+			};
 		};
 
 		Logger.log(`${partId} Context`, ctx);
@@ -95,12 +99,20 @@ export class DelveDiceHUD extends HandlebarsApplicationMixin(ApplicationV2) {
 
 	async _prepareDifficultyContext(ctx) {
 		ctx.dc = game.settings.get(`ripcrypt`, `dc`);
+	};
+
+	async _prepareFateCompassContext(ctx) {
+		ctx.direction = game.settings.get(`ripcrypt`, `currentFate`);
 	}
 	// #endregion
 
 	// #region Actions
 	static async #tourDelta() {
-		ui.notifications.info(`Button Clicked!`, { console: false });
+		ui.notifications.info(`Delve Tour Changed`, { console: false });
+	};
+
+	static async #setFate() {
+		ui.notifications.info(`Fate Set!`, { console: false });
 	};
 	// #endregion
 };
diff --git a/templates/Apps/DelveDiceHUD/fateCompass.hbs b/templates/Apps/DelveDiceHUD/fateCompass.hbs
index 19ea83c..75c0ed5 100644
--- a/templates/Apps/DelveDiceHUD/fateCompass.hbs
+++ b/templates/Apps/DelveDiceHUD/fateCompass.hbs
@@ -1,16 +1,16 @@
 <div id="fate-compass">
 	<div class="compass-container">
 		<div class="compass">
-			<span style="grid-area: N;">N</span>
-			<span style="grid-area: W;">W</span>
+			<button type="button" class="transparent" style="grid-area: N;">N</button>
+			<button type="button" class="transparent" style="grid-area: W;">W</button>
 			<rc-icon
 				class="compass-pointer"
 				name="icons/arrow-compass"
 				var:fill="var(--accent-3)"
 				var:size="1rem"
 			></rc-icon>
-			<span style="grid-area: E;">E</span>
-			<span style="grid-area: S;">S</span>
+			<button type="button" class="transparent" style="grid-area: E;">E</button>
+			<button type="button" class="transparent" style="grid-area: S;">S</button>
 		</div>
 	</div>
 </div>
diff --git a/templates/Apps/DelveDiceHUD/tour/next.hbs b/templates/Apps/DelveDiceHUD/tour/next.hbs
index 1e85007..28573c3 100644
--- a/templates/Apps/DelveDiceHUD/tour/next.hbs
+++ b/templates/Apps/DelveDiceHUD/tour/next.hbs
@@ -1,7 +1,20 @@
-<button
-	type="button"
-	class="icon"
-	data-action="tourDelta"
->
-	&gt;
-</button>
+<div>
+	{{!-- This is here to prevent height collapsing --}}
+	&ZeroWidthSpace;
+
+	{{#if meta.editable}}
+		<button
+			type="button"
+			class="icon"
+			data-action="tourDelta"
+			data-tooltip="Next Delve Tour"
+		>
+			<rc-icon
+				name="icons/arrow-right"
+				var:size="0.75rem"
+				var:fill="currentColor"
+			></rc-icon>
+		</button>
+	{{/if}}
+</div>
+
diff --git a/templates/Apps/DelveDiceHUD/tour/previous.hbs b/templates/Apps/DelveDiceHUD/tour/previous.hbs
index d498a99..ac420ef 100644
--- a/templates/Apps/DelveDiceHUD/tour/previous.hbs
+++ b/templates/Apps/DelveDiceHUD/tour/previous.hbs
@@ -1,7 +1,20 @@
-<button
-	type="button"
-	class="icon"
-	data-action="tourDelta"
->
-	&lt;
-</button>
+<div>
+	{{!-- This is here to prevent height collapsing --}}
+	&ZeroWidthSpace;
+
+	{{#if meta.editable}}
+		<button
+			type="button"
+			class="icon"
+			data-action="tourDelta"
+			data-tooltip="Previous Delve Tour"
+		>
+			<rc-icon
+				name="icons/arrow-left"
+				var:size="0.75rem"
+				var:fill="currentColor"
+			></rc-icon>
+		</button>
+	{{/if}}
+</div>
+
diff --git a/templates/css/elements/button.css b/templates/css/elements/button.css
index c9e0bab..0493fe8 100644
--- a/templates/css/elements/button.css
+++ b/templates/css/elements/button.css
@@ -3,6 +3,8 @@
 	outline: none;
 	border: none;
 	padding: 2px 4px;
+	font-family: inherit;
+	font-size: inherit;
 	background: var(--button-background);
 	color: var(--button-text);
 
@@ -23,4 +25,10 @@
 		width: 20px;
 		height: 20px;
 	}
+
+	&.transparent {
+		background: inherit;
+		color: inherit;
+		padding: 0;
+	}
 }