diff --git a/mdx-components.tsx b/mdx-components.tsx
index 79e75a0..984294a 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -44,16 +44,25 @@ export function getMDXComponents(components: MDXComponents): MDXComponents {
         </a>
       )
     },
-    code: ({ children, ...props }) => (
-      <code
-        {...props}
-        className="rounded bg-surface px-[0.3rem] py-[0.2rem] font-mono text-sm text-ink"
-      >
-        {children}
-      </code>
-    ),
-    pre: ({ children, ...props }) => (
-      <pre {...props} className="overflow-x-auto rounded-xl bg-surface text-sm my-6 p-4">
+    code: ({ children, className, ...props }: { children: React.ReactNode; className?: string }) => {
+      const match = /language-(\w+)/.exec(className || '');
+      const language = match ? match[1] : '';
+      const isInline = !className?.includes('language-');
+
+      if (isInline) {
+        return (
+          <code
+            className="rounded-md bg-ink/[0.06] px-1.5 py-[0.15rem] font-mono text-[0.8125rem] leading-[1.4] dark:bg-white/[0.08]"
+            {...props}
+          >
+            {children}
+          </code>
+        );
+      }
+      return <code className={className} {...props} />;
+    },
+    pre: ({ children, ...props }: { children: React.ReactNode; [key: string]: any }) => (
+      <pre className="my-6 p-0" {...props}>
         {children}
       </pre>
     ),