diff --git a/docs/presentation.md b/docs/presentation.md
index 85180c75..b85f44ad 100644
--- a/docs/presentation.md
+++ b/docs/presentation.md
@@ -32,7 +32,12 @@ The presentation layer uses an event-driven architecture for bidirectional react
 
 ## Visual design best-practices
 
-Add visual clues for clickable items. It should be as clear as possible that they're interactable at first look without hovering. They should also have different visual state when hovering/touching on them that indicates that they are being clicked, which helps with accessibility.
+- **Clickables**:
+  Add visual clues for clickable items.
+  It should be as clear as possible that they're interactable at first look without hovering.
+  They should also have different visual state when hovering/touching on them that indicates that they are being clicked, which helps with accessibility.
+- **Borders**:
+  privacy.sexy prefers sharper edges in its design language.
 
 ## Application data
 
diff --git a/src/presentation/assets/styles/_fonts.scss b/src/presentation/assets/styles/_fonts.scss
index 27a4f2bf..0667056e 100644
--- a/src/presentation/assets/styles/_fonts.scss
+++ b/src/presentation/assets/styles/_fonts.scss
@@ -40,3 +40,5 @@ $font-size-normal   : 18px;
 $font-size-large    : 22px;
 $font-size-larger   : 26px;
 $font-size-largest  : 40px;
+
+$font-size-relative-smaller: 85%;
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/_code-styling.scss b/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/_code-styling.scss
new file mode 100644
index 00000000..8de02a69
--- /dev/null
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/_code-styling.scss
@@ -0,0 +1,45 @@
+@use "@/presentation/assets/styles/main" as *;
+
+@mixin code-block() {
+  pre {
+    @content; // :has(> code) { @content; } would be better, but Firefox doesn't support it https://caniuse.com/css-has
+  }
+}
+
+@mixin inline-code() {
+  :not(pre)>code {
+    @content;
+  }
+}
+
+@mixin base-code() {
+  code {
+    @content;
+  }
+}
+
+@mixin style-code-elements(
+  $color-background,
+  $code-block-padding,
+) {
+  $border-radius: 2px; // Subtle rounding still maintaining sharp design.
+
+  @include base-code {
+    font-family: $font-normal;
+    border-radius: $border-radius;
+    font-size: $font-size-relative-smaller; // Keep relative size to scale right with different text sizes around.
+  }
+
+  @include inline-code {
+    background: $color-background;
+    word-break: break-all; // Enables inline code to wrap with the text, even for long single words (like registry paths), thus preventing overflow.
+    padding: 0.2em 0.4em; // Balanced padding for readability, with `em` units scaling with font size.
+  }
+
+  @include code-block {
+    background: $color-background;
+    border-radius: $border-radius;
+    overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
+    padding: $code-block-padding;
+  }
+}
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/markdown-styles.scss b/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/markdown-styles.scss
index 48aed9af..e3bb7e0a 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/markdown-styles.scss
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/markdown-styles.scss
@@ -1,24 +1,7 @@
 @use "@/presentation/assets/styles/main" as *;
+@use "_code-styling" as *;
 @use 'sass:math';
 
-@mixin code-block() {
-  pre {
-    @content; // :has(> code) { @content; } would be better, but Firefox doesn't support it https://caniuse.com/css-has
-  }
-}
-
-@mixin inline-code() {
-  :not(pre) > code {
-    @content;
-  }
-}
-
-@mixin code() {
-  code {
-    @content;
-  }
-}
-
 @mixin no-margin($selectors) {
   #{$selectors} {
     margin: 0;
@@ -110,21 +93,6 @@
     }
   }
 
-  @include code {
-    font-family: $font-normal;
-    font-weight: 600;
-  }
-  
-  @include inline-code {
-    word-break: break-all; // Enables inline code to wrap with the text, even for long single words (like registry paths), thus preventing overflow.
-  }
-  
-  @include code-block {
-    padding: $base-spacing;
-    background: $color-primary-darker;
-    overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
-  }
-
   @include apply-uniform-vertical-spacing($base-spacing);
   @include apply-uniform-horizontal-spacing($base-spacing);
 
@@ -140,4 +108,9 @@
     padding: 0 $base-spacing;
     border-left: .25em solid $color-primary;
   }
+
+  @include style-code-elements(
+    $code-block-padding: $base-spacing,
+    $color-background: $color-primary-darker,
+  );
 }