diff --git a/app/resources/js/components/file-info-modal.vue b/app/resources/js/components/file-info-modal.vue
index a363367..c7efa31 100644
--- a/app/resources/js/components/file-info-modal.vue
+++ b/app/resources/js/components/file-info-modal.vue
@@ -27,7 +27,7 @@
                         <tbody>
                             <tr v-for="(hash, title) in this.hashes" v-bind:key="hash">
                                 <td class="border font-bold px-4 py-2">{{ title }}</td>
-                                <td class="border px-4 py-2">{{ hash }}</td>
+                                <td class="border font-mono px-4 py-2">{{ hash }}</td>
                             </tr>
                         </tbody>
                     </table>
diff --git a/app/resources/sass/app.scss b/app/resources/sass/app.scss
index 51ba35d..9cb6946 100644
--- a/app/resources/sass/app.scss
+++ b/app/resources/sass/app.scss
@@ -10,7 +10,7 @@ $fa-font-path: "./webfonts";
 @import "~@fortawesome/fontawesome-free/scss/solid.scss";
 
 // Fonts
-@import url("https://fonts.googleapis.com/css?family=Work+Sans:200,400&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro|Work+Sans:200,400&display=swap");
 
 @import "markdown.scss";
 @import "dark-mode.scss";
diff --git a/app/resources/views/components/file.twig b/app/resources/views/components/file.twig
index 1ed4d26..4b61f43 100644
--- a/app/resources/views/components/file.twig
+++ b/app/resources/views/components/file.twig
@@ -1,6 +1,6 @@
 <a
     href="{{ parentDir ? '..' : file.getRelativePathname }}"
-    class="flex flex-col items-center rounded-lg group hover:bg-gray-200 hover:shadow"
+    class="flex flex-col items-center rounded-lg font-mono group hover:bg-gray-200 hover:shadow"
 >
     <div class="flex justify-between items-center p-4 w-full">
         <div class="pr-2">
diff --git a/app/resources/views/components/header.twig b/app/resources/views/components/header.twig
index 5884e83..9cd9032 100644
--- a/app/resources/views/components/header.twig
+++ b/app/resources/views/components/header.twig
@@ -1,6 +1,6 @@
 <header id="header" class="bg-blue-600 shadow sticky top-0">
     <div class="container flex flex-col justify-between items-center mx-auto p-4 md:flex-row">
-        <div class="text-white text-sm tracking-tight mb-2 md:my-2">
+        <div class="font-mono text-white text-sm tracking-tight mb-2 md:my-1">
             <a href="/" class="hover:underline">Home</a>
 
             {% if path %}
diff --git a/app/resources/views/index.twig b/app/resources/views/index.twig
index 47bff32..1161b61 100644
--- a/app/resources/views/index.twig
+++ b/app/resources/views/index.twig
@@ -6,15 +6,15 @@
     <div id="content" class="flex-grow container mx-auto px-4">
         <ul id="file-list" class="my-4">
             <div class="flex justify-between font-bold p-4">
-                <div class="flex-grow mr-2">
+                <div class="flex-grow font-mono mr-2">
                     File Name
                 </div>
 
-                <div class="hidden text-right w-1/6 mx-2 sm:block">
+                <div class="font-mono text-right w-1/6 mx-2 hidden sm:block">
                     Size
                 </div>
 
-                <div class="hidden text-right w-1/4 ml-2  sm:block">
+                <div class="font-mono text-right w-1/4 ml-2 hidden sm:block">
                     Date
                 </div>
             </div>
diff --git a/app/resources/views/layouts/app.twig b/app/resources/views/layouts/app.twig
index c9c5747..89721aa 100644
--- a/app/resources/views/layouts/app.twig
+++ b/app/resources/views/layouts/app.twig
@@ -9,6 +9,6 @@
 
 <title>{{ path | default('Home') }} &bull; Directory Lister</title>
 
-<div id="app" class="flex flex-col min-h-screen font-mono {{ config('dark_mode') ? 'dark-mode' : 'light-mode' }}">
+<div id="app" class="flex flex-col min-h-screen {{ config('dark_mode') ? 'dark-mode' : 'light-mode' }}">
     {% block content %}{% endblock %}
 </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index efa9484..1e64cfb 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,6 +2,15 @@ module.exports = {
     theme: {
         extend: {
             fontFamily: {
+                mono: [
+                    'Source Code Pro',
+                    'Menlo',
+                    'Monaco',
+                    'Consolas',
+                    '"Liberation Mono"',
+                    '"Courier New"',
+                    'monospace',
+                ],
                 sans: [
                     'Work Sans',
                     '-apple-system',