diff --git a/apps/docs/docusaurus.config.js b/apps/docs/docusaurus.config.js
index 9362be653..0c8f89c98 100644
--- a/apps/docs/docusaurus.config.js
+++ b/apps/docs/docusaurus.config.js
@@ -118,7 +118,172 @@ const config = {
         plain: {
           ...prismThemes.vsDark.plain,
           backgroundColor: "#111827",
+          color: "#e6e6e6",
         },
+        styles: [
+          ...prismThemes.vsDark.styles,
+          {
+            types: ["comment", "prolog", "doctype", "cdata"],
+            style: {
+              color: "#6a9955",
+              fontStyle: "italic",
+            },
+          },
+          {
+            types: ["namespace"],
+            style: {
+              opacity: 0.7,
+            },
+          },
+          {
+            types: ["string", "attr-value"],
+            style: {
+              color: "#ce9178",
+            },
+          },
+          {
+            types: ["punctuation", "operator"],
+            style: {
+              color: "#d4d4d4",
+            },
+          },
+          {
+            types: ["entity", "url", "symbol", "number", "boolean", "variable", "constant", "property", "regex", "inserted"],
+            style: {
+              color: "#b5cea8",
+            },
+          },
+          {
+            types: ["atrule", "keyword", "attr-name", "selector"],
+            style: {
+              color: "#569cd6",
+            },
+          },
+          {
+            types: ["function", "deleted", "tag"],
+            style: {
+              color: "#f44747",
+            },
+          },
+          {
+            types: ["function-variable"],
+            style: {
+              color: "#dcdcaa",
+            },
+          },
+          {
+            types: ["tag", "selector", "keyword"],
+            style: {
+              color: "#569cd6",
+            },
+          },
+          {
+            types: ["important", "bold"],
+            style: {
+              // fontWeight: "bold",
+            },
+          },
+          {
+            types: ["italic"],
+            style: {
+              fontStyle: "italic",
+            },
+          },
+          {
+            types: ["key", "property"],
+            languages: ["yaml", "yml"],
+            style: {
+              color: "#9cdcfe",
+            },
+          },
+          {
+            types: ["string"],
+            languages: ["yaml", "yml"],
+            style: {
+              color: "#ce9178",
+            },
+          },
+          {
+            types: ["number"],
+            languages: ["yaml", "yml"],
+            style: {
+              color: "#C5DDB8",
+            },
+          },
+          {
+            types: ["function", "builtin"],
+            languages: ["bash", "shell", "sh"],
+            style: {
+              color: "#569CD6", // Light blue for commands
+            },
+          },
+          {
+            types: ["command", "builtin"],
+            languages: ["bash", "shell", "sh"],
+            style: {
+              color: "#569CD6", // Light blue for commands
+              fontWeight: "bold",
+            },
+          },
+          {
+            types: ["option", "parameter"],
+            languages: ["bash", "shell", "sh"],
+            style: {
+              color: "#eac787", // Yellowish for parameters
+            },
+          },
+          {
+            types: ["keyword", "selector"],
+            languages: ["bash", "shell", "sh"],
+            style: {
+              color: "#81a1c1", // Blue for keywords like if, then, else
+            },
+          },
+          {
+            types: ["string", "char", "attr-value"],
+            languages: ["bash", "shell", "sh"],
+            style: {
+              color: "#a3be8c", // Green for strings
+            },
+          },
+          {
+            types: ["variable"],
+            languages: ["bash", "shell", "sh"],
+            style: {
+              color: "#d8dee9", // Light gray for variables
+            },
+          },
+          {
+            types: ["comment"],
+            languages: ["bash", "shell", "sh"],
+            style: {
+              color: "#616e88", // Gray for comments
+              fontStyle: "italic",
+            },
+          },
+          {
+            types: ["shebang"],
+            languages: ["bash", "shell", "sh"],
+            style: {
+              color: "#8fbcbb", // Cyan for shebang
+              fontWeight: "bold",
+            },
+          },
+          {
+            types: ["operator"],
+            languages: ["bash", "shell", "sh"], 
+            style: {
+              color: "#81a1c1", // Blue for operators
+            },
+          },
+          {
+            types: ["punctuation"],
+            languages: ["bash", "shell", "sh"],
+            style: {
+              color: "#eceff4", // White for punctuation
+            },
+          },
+        ],
       },
     },
     zoom: {
diff --git a/apps/docs/src/css/custom.css b/apps/docs/src/css/custom.css
index 27b5ef4e4..6ec56d1a7 100644
--- a/apps/docs/src/css/custom.css
+++ b/apps/docs/src/css/custom.css
@@ -134,6 +134,27 @@
   .btn-clear {
     @apply bg-transparent shadow-none border-0 outline-none cursor-pointer;
   }
+
+  .code-wrapper {
+    @apply rounded;
+  }
+
+  /* Add text selection styling */
+  .code-wrapper pre code::selection,
+  .code-wrapper pre span::selection,
+  .code-wrapper pre::selection {
+    background-color: rgba(66, 153, 225, 0.5) !important; /* sky-blue with transparency */
+    color: white !important;
+  }
+
+  .code-wrapper .selection\:bg-sky-700.selection\:text-green-400 pre code {
+    @apply select-auto;
+  }
+
+  /* Add better styling for code blocks */
+  .theme-code-block {
+    @apply rounded overflow-hidden;
+  }
 }
 
 :root {
diff --git a/apps/docs/src/theme/CodeBlock/index.tsx b/apps/docs/src/theme/CodeBlock/index.tsx
index a44fcc51e..092d72aec 100644
--- a/apps/docs/src/theme/CodeBlock/index.tsx
+++ b/apps/docs/src/theme/CodeBlock/index.tsx
@@ -68,7 +68,7 @@ export default function CodeBlock({
   };
 
   return (
-    <div className="code-wrapper selection:bg-sky-700 selection:text-green-400">
+    <div className="code-wrapper">
       {(title || badge.label) && (
         <div className="code-header">
           {title}