diff --git a/views/components/body.html b/views/components/body.html
index 1bed836..c65261b 100644
--- a/views/components/body.html
+++ b/views/components/body.html
@@ -96,7 +96,11 @@ <h2>Automations</h2>
                 >
                     <div class="md:col-span-1">
                         <div :class="$api.labelClass">ID</div>
-                        <div :class="$api.valueClass" x-text="c.id"></div>
+                        <div
+                            :class="$api.valueClass"
+                            class="font-mono"
+                            x-text="c.id"
+                        ></div>
                     </div>
                     <div class="md:col-span-4 xl:col-span-2">
                         <div :class="$api.labelClass">Name</div>
@@ -105,26 +109,32 @@ <h2>Automations</h2>
                     <div class="md:col-span-1">
                         <div :class="$api.labelClass">Enabled</div>
                         <hkp-dropdown
-                            :options="[
-                'true',
-                'false'
-            ]"
+                            :options="[ 'true', 'false' ]"
                             x-model="c.enabled"
                             @change="$api.$of().updateA(c.id, c.enabled)"
                         ></hkp-dropdown>
                     </div>
                     <div class="md:col-span-4 xl:col-span-2">
                         <div :class="$api.labelClass">Command</div>
-                        <div :class="$api.valueClass" x-text="c.cmd"></div>
+                        <div
+                            :class="$api.valueClass"
+                            class="font-mono"
+                            x-text="c.cmd"
+                        ></div>
                     </div>
                     <div class="md:col-span-1">
                         <div :class="$api.labelClass">Cron</div>
-                        <div :class="$api.valueClass" x-text="c.cron"></div>
+                        <div
+                            :class="$api.valueClass"
+                            class="font-mono"
+                            x-text="c.cron"
+                        ></div>
                     </div>
                     <div class="md:col-span-1">
                         <div :class="$api.labelClass">Tolerance</div>
                         <div
                             :class="$api.valueClass"
+                            class="font-mono"
                             x-text="c.tolerance"
                         ></div>
                     </div>
@@ -132,6 +142,7 @@ <h2>Automations</h2>
                         <div :class="$api.labelClass">Next Run</div>
                         <div
                             :class="$api.valueClass"
+                            class="font-mono"
                             x-text="$formatDate(c.next_run)"
                         ></div>
                     </div>
@@ -139,6 +150,7 @@ <h2>Automations</h2>
                         <div :class="$api.labelClass">Last Run</div>
                         <div
                             :class="$api.valueClass"
+                            class="font-mono"
                             x-text="$formatDate(c.last_run)"
                         ></div>
                     </div>
@@ -156,7 +168,7 @@ <h2>Automations</h2>
     <script>
         return {
             labelClass: "text-xs font-semibold text-gray-600 mb-2",
-            valueClass: "",
+            valueClass: "text-sm",
             errorMessage: "",
             data: {
                 now: "",
diff --git a/views/layouts/main.html b/views/layouts/main.html
index 60b4338..f887f58 100644
--- a/views/layouts/main.html
+++ b/views/layouts/main.html
@@ -26,6 +26,7 @@
             });
             $vs.config.fonts = {
                 system: "system-ui",
+                mono: "ui-monospace",
             };
             $vui.config.importMap = {
                 hkp: "/views/components/${component}.html",