diff --git a/bun.lock b/bun.lock
index b901d9f..540ab54 100644
--- a/bun.lock
+++ b/bun.lock
@@ -14,6 +14,7 @@
       "devDependencies": {
         "@eslint/js": "^10.0.1",
         "@fontsource-variable/inter": "^5.3.0",
+        "@fontsource-variable/jetbrains-mono": "^5.3.0",
         "@mdx-js/react": "^3.1.1",
         "@mdx-js/rollup": "^3.1.1",
         "@tailwindcss/typography": "^0.5.20",
@@ -188,6 +189,8 @@
 
     "@fontsource-variable/inter": ["@fontsource-variable/inter@5.3.0", "", {}, "sha512-OupL48va4JNofb97w6NYeF9S7W/kHNKM0Er8Dem5nqi4jeOLrVJDoE8tZEpnMJmtkvNbB1EIPPwHcdkF6b1oUA=="],
 
+    "@fontsource-variable/jetbrains-mono": ["@fontsource-variable/jetbrains-mono@5.3.0", "", {}, "sha512-F32xpS2NsGYoQi2ADSkKTgpJj7ozajsGgDJ8woTnqjmIB+dxDIqImjl4pXZVEExu8UFZ2ndhmX18EBS/hdz3Lw=="],
+
     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
 
     "@humanfs/node": ["@humanfs/node@0.16.7", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ=="],
diff --git a/package.json b/package.json
index f32fe6d..4f95c4b 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@mdx-js/react": "^3.1.1",
     "@mdx-js/rollup": "^3.1.1",
     "@tailwindcss/typography": "^0.5.20",
diff --git a/src/index.css b/src/index.css
index d03fdf0..fa034c8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,10 +1,12 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 @import "@fontsource-variable/inter";
+@import "@fontsource-variable/jetbrains-mono";
 @import "./dashkit/dashkit.css";
 
 @theme {
   --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 @layer base {
diff --git a/src/partials/PropertyDoc.tsx b/src/partials/PropertyDoc.tsx
index 6305698..5f0f8ed 100644
--- a/src/partials/PropertyDoc.tsx
+++ b/src/partials/PropertyDoc.tsx
@@ -42,19 +42,19 @@ export function PropertyDoc({ title, properties, className }: PropertyDocProps)
                 className="group hover:bg-muted/20 transition-colors duration-150"
               >
                 <td className="px-4 py-3.5 align-top whitespace-nowrap border-r border-border">
-                  <code className="inline-flex items-center font-mono text-xs font-semibold text-foreground bg-muted px-2 py-0.5 rounded border border-border/60">
+                  <span className="inline-flex items-center font-sans text-xs font-semibold text-foreground bg-muted px-2 py-0.5 rounded border border-border/60">
                     {property.prop}
-                  </code>
+                  </span>
                 </td>
                 {hasType && (
                   <td className="px-4 py-3.5 align-top border-r border-border">
-                    <code className="font-mono text-xs text-primary break-words">
+                    <span className="font-sans text-xs font-medium text-primary break-words">
                       {property.type}
-                    </code>
+                    </span>
                   </td>
                 )}
                 {hasDefault && (
-                  <td className="px-4 py-3.5 align-top whitespace-nowrap font-mono text-xs border-r border-border">
+                  <td className="px-4 py-3.5 align-top whitespace-nowrap font-sans text-xs border-r border-border">
                     <span className="text-muted-foreground">
                       {property.defaultValue || '—'}
                     </span>
diff --git a/src/partials/Sidebar.tsx b/src/partials/Sidebar.tsx
index bc80f19..0c82670 100644
--- a/src/partials/Sidebar.tsx
+++ b/src/partials/Sidebar.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { motion } from 'framer-motion';
 import { FiSearch, FiX } from 'react-icons/fi';
 import clsx from 'clsx';
 
@@ -29,7 +28,6 @@ export function Sidebar({
   sections,
   currentPath,
   onItemClick,
-  layoutId = "sidebar-active-item",
   isActive: customIsActive,
   searchable = false,
 }: SidebarProps) {
@@ -110,27 +108,20 @@ export function Sidebar({
                     className={clsx(
                       "relative px-3 py-1.5 rounded-full text-sm transition-colors duration-150 flex items-center gap-2.5 group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                       active
-                        ? "text-ds-50 dark:text-ds-950"
+                        ? "bg-ds-900 text-ds-50 dark:bg-ds-100 dark:text-ds-950"
                         : "text-muted-foreground font-medium hover:text-foreground hover:bg-card dark:hover:bg-ds-800/50",
                       link.disabled && "opacity-50 cursor-not-allowed hover:bg-transparent"
                     )}
                   >
-                    {active && (
-                      <motion.div
-                        layoutId={layoutId}
-                        className="absolute inset-0 bg-ds-900 dark:bg-ds-100 rounded-full"
-                        transition={{ type: "spring", bounce: 0, duration: 0.35 }}
-                      />
-                    )}
                     <div className={clsx(
-                      "shrink-0 transition-colors duration-150 relative z-10",
+                      "shrink-0 transition-colors duration-150",
                       active
                         ? "text-ds-50 dark:text-ds-950"
                         : "text-muted-foreground group-hover:text-foreground"
                     )}>
                       {link.icon}
                     </div>
-                    <span className="relative z-10 font-medium">{link.label}</span>
+                    <span className="font-medium">{link.label}</span>
                   </Link>
                 );
               })}