diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index de23611d..a5cc4b36 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -66,6 +66,8 @@ $alert-color-level:  5;
 $list-group-item-bg-level:     -11;
 $list-group-item-color-level:  6;
 
+$code-color: var(--code-color);
+
 // Replace font-weight 300 with 200
 $font-weight-light: 200;
 $display1-weight: 200;
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index a6f58f7d..53e28fd3 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -85,6 +85,8 @@
   @include hsl-color('gray-800', 210, 10%, 23%);
   @include hsl-color('gray-900', 210, 11%, 15%);
 
+  --code-color: var(--pink);
+
   // Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
   @each $color, $value in $theme-colors {
     @include list-group-item-variant($color, theme-color-level($color, $list-group-item-bg-level), theme-color-level($color, $list-group-item-color-level));
@@ -114,6 +116,8 @@
   @include hsl-color('gray-200', 210, 10%, 23%);
   @include hsl-color('gray-100', 210, 11%, 15%);
 
+  --code-color: var(--gray-800);
+
   // Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
   @each $color, $value in $theme-colors {
     @include list-group-item-variant($color, theme-color-level($color, -6), theme-color-level($color, 2));
@@ -287,6 +291,12 @@ h3.card-title {
 
 code {
   background: $light;
+  padding: .15rem .25rem;
+  border-radius: $border-radius;
+}
+
+pre code {
+  padding: 0;
 }
 
 .log {