diff --git a/public/index.html b/public/index.html
index f401da27..304a67dd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,6 +17,8 @@
     href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap"
     rel="stylesheet">
 
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap" rel="stylesheet">
+
   <!-- font ends -->
 
   <title>CapRover | Server Dashboard</title>
diff --git a/src/styles/style.css b/src/styles/style.css
index 19d940b9..e78bdfbe 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -12,9 +12,8 @@ body {
 }
 
 code {
-    font-family: Menlo, Monaco, 'SFMono-Regular', Consolas, 'Liberation Mono',
-        Courier, monospace;
-    background-color: #f9f2f4;
+    font-family: 'Noto Sans Mono', Menlo, Monaco, 'SFMono-Regular', Consolas,
+        'Liberation Mono', Courier, monospace;
     padding-left: 4px;
     padding-right: 4px;
     padding-top: 2px;
@@ -48,8 +47,8 @@ hr {
 }
 
 .code-input {
-    font-family: Menlo, Monaco, 'SFMono-Regular', Consolas, 'Liberation Mono',
-        Courier, monospace !important;
+    font-family: 'Noto Sans Mono', Menlo, Monaco, 'SFMono-Regular', Consolas,
+        'Liberation Mono', Courier, monospace !important;
 }
 
 .netdata-field {
@@ -57,8 +56,8 @@ hr {
 }
 
 .logs-output {
-    font-family: Menlo, Monaco, 'SFMono-Regular', Consolas, 'Liberation Mono',
-        Courier, monospace !important;
+    font-family: 'Noto Sans Mono', Menlo, Monaco, 'SFMono-Regular', Consolas,
+        'Liberation Mono', Courier, monospace !important;
     overflow: scroll;
     min-height: 250px !important;
     border-width: 2px;