diff --git a/src/components/Demo.vue b/src/components/Demo.vue
index b128a6f7..e1d5f929 100644
--- a/src/components/Demo.vue
+++ b/src/components/Demo.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="demo__source">
       <div v-for="(file, index) in files" :key="index">
-        <p>
+        <p v-if="showFileNames">
           {{ file.name }}
         </p>
         <pre :class="`language-${file.highlight}`"><code :class="`language-${file.highlight}`" v-html="$options.filters.highlight(file.content, file.highlight)"></code></pre>
@@ -45,6 +45,10 @@ export default {
 
       return require(`~/demos/${file.path}`).default
     },
+
+    showFileNames() {
+      return this.files.length > 1
+    },
   },
 
   mounted() {
diff --git a/src/components/style.scss b/src/components/style.scss
index 10fdea7b..9c226ef3 100644
--- a/src/components/style.scss
+++ b/src/components/style.scss
@@ -11,5 +11,9 @@
     padding: 1rem;
     background-color: $colorBlack;
     color: $colorWhite;
+
+    code, pre {
+      padding: 0;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index 4a26256e..f4a00934 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -47,4 +47,8 @@ body {
 *:focus {
   outline: none;
 }
+
+:not(pre) > code[class*="language-"], pre[class*="language-"] {
+  background-color: $colorBlack;
+}
 </style>