diff --git a/ui/src/app/components/logs/logs.page.html b/ui/src/app/components/logs/logs.page.html
index 845488486..de07608b2 100644
--- a/ui/src/app/components/logs/logs.page.html
+++ b/ui/src/app/components/logs/logs.page.html
@@ -11,7 +11,7 @@
   <text-spinner *ngIf="loading" text="Loading Logs"></text-spinner>
 
   <div id="container">
-    <div id="template" style="white-space: pre-line;"></div>
+    <div id="template" style="white-space: pre-line; font-family: monospace;"></div>
   </div>
   <div id="button-div" *ngIf="!loading" style="width: 100%; text-align: center;">
     <ion-button *ngIf="!loadingMore" (click)="loadMore()" strong color="dark">
diff --git a/ui/src/app/components/logs/logs.page.ts b/ui/src/app/components/logs/logs.page.ts
index c11a5dffd..cbc50d58c 100644
--- a/ui/src/app/components/logs/logs.page.ts
+++ b/ui/src/app/components/logs/logs.page.ts
@@ -66,7 +66,7 @@ export class LogsPage {
       const container = document.getElementById('container')
       const beforeContainerHeight = container.scrollHeight
       const newLogs = document.getElementById('template').cloneNode(true) as HTMLElement
-      newLogs.innerHTML = logs.map(l => `${l.timestamp} ${convert.toHtml(l.message)}`).join('\n\n') + (logs.length ? '\n\n' : '')
+      newLogs.innerHTML = logs.map(l => `${l.timestamp} ${convert.toHtml(l.message)}`).join('\n') + (logs.length ? '\n' : '')
       container.prepend(newLogs)
       const afterContainerHeight = container.scrollHeight
 
@@ -89,7 +89,7 @@ export class LogsPage {
 
       const container = document.getElementById('container')
       const newLogs = document.getElementById('template').cloneNode(true) as HTMLElement
-      newLogs.innerHTML = logs.map(l => `${l.timestamp} ${convert.toHtml(l.message)}`).join('\n\n') + (logs.length ? '\n\n' : '')
+      newLogs.innerHTML = logs.map(l => `${l.timestamp} ${convert.toHtml(l.message)}`).join('\n') + (logs.length ? '\n' : '')
       container.append(newLogs)
       this.loadingMore = false
       this.scrollEvent()