diff --git a/app/lib/markdown/syntaxHighlight.tsx b/app/lib/markdown/syntaxHighlight.tsx
index 9a04c22..3cdc860 100644
--- a/app/lib/markdown/syntaxHighlight.tsx
+++ b/app/lib/markdown/syntaxHighlight.tsx
@@ -1,5 +1,6 @@
 import { Highlight, themes } from "prism-react-renderer"
-
+import { Prism } from 'prism-react-renderer'
+import bashLang from 'refractor/lang/bash';
 
 type FenceProps = {
   children: string;
@@ -7,8 +8,14 @@ type FenceProps = {
 };
 
 export function Fence({ children, language }: FenceProps) {
+  bashLang(Prism)
   return (
-    <Highlight code={children.trim()} language={language || ""} theme={themes.vsDark}>
+    <Highlight 
+      prism={Prism}
+      code={children.trim()} 
+      language={language || ""} 
+      theme={themes.vsDark}
+    >
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <pre style={style}>
           {tokens.map((line, i) => (
diff --git a/package-lock.json b/package-lock.json
index 0396213..3ef111d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@remix-run/cloudflare": "2.13.1",
         "@remix-run/cloudflare-pages": "2.13.1",
         "@remix-run/react": "2.13.1",
+        "@types/refractor": "3.4.1",
         "clsx": "2.1.1",
         "headlessui": "0.0.0",
         "isbot": "4.1.0",
@@ -19,6 +20,7 @@
         "prism-react-renderer": "2.4.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "refractor": "4.8.1",
         "zod": "3.23.8"
       },
       "devDependencies": {
@@ -3354,7 +3356,6 @@
       "version": "2.3.10",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
       "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "^2"
       }
@@ -3476,6 +3477,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/refractor": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@types/refractor/-/refractor-3.4.1.tgz",
+      "integrity": "sha512-wYuorIiCTSuvRT9srwt+taF6mH/ww+SyN2psM0sjef2qW+sS8GmshgDGTEDgWB1sTVGgYVE6EK7dBA2MxQxibg==",
+      "dependencies": {
+        "@types/prismjs": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.23.0.tgz",
@@ -12410,6 +12419,49 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/refractor": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-4.8.1.tgz",
+      "integrity": "sha512-/fk5sI0iTgFYlmVGYVew90AoYnNMP6pooClx/XKqyeeCQXrL0Kvgn8V0VEht5ccdljbzzF1i3Q213gcntkRExg==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "@types/prismjs": "^1.0.0",
+        "hastscript": "^7.0.0",
+        "parse-entities": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/hast-util-parse-selector": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-3.1.1.tgz",
+      "integrity": "sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==",
+      "dependencies": {
+        "@types/hast": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/refractor/node_modules/hastscript": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-7.2.0.tgz",
+      "integrity": "sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^3.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
diff --git a/package.json b/package.json
index 333ab3b..bcaa4e8 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@remix-run/cloudflare": "2.13.1",
     "@remix-run/cloudflare-pages": "2.13.1",
     "@remix-run/react": "2.13.1",
+    "@types/refractor": "3.4.1",
     "clsx": "2.1.1",
     "headlessui": "0.0.0",
     "isbot": "4.1.0",
@@ -28,6 +29,7 @@
     "prism-react-renderer": "2.4.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "refractor": "4.8.1",
     "zod": "3.23.8"
   },
   "devDependencies": {