diff --git a/src/app/()/page.tsx b/src/app/()/page.tsx
index 8257c2f..cdd060e 100644
--- a/src/app/()/page.tsx
+++ b/src/app/()/page.tsx
@@ -148,7 +148,7 @@ export default function HomePage() {
         <Section className="border-t bg-gray-50 py-24 dark:bg-gray-800">
           <Container>
             <div className="mx-auto max-w-4xl">
-              <Card className="overflow-hidden border-2 p-6">
+              <Card className="overflow-hidden border-2 p-2 sm:p-6">
                 <CardHeader className="bg-white dark:bg-gray-900">
                   <CardTitle className="text-2xl">
                     接入应用 (授权码模式)
@@ -159,7 +159,7 @@ export default function HomePage() {
                     适用于有后端服务器的应用。
                   </CardDescription>
                 </CardHeader>
-                <CardContent className="bg-white p-0 dark:bg-gray-900">
+                <CardContent className="overflow-x-auto bg-white p-0 dark:bg-gray-900">
                   <Tabs defaultValue="auth" className="w-full">
                     <TabsList className="grid w-full grid-cols-3">
                       <TabsTrigger value="auth">
@@ -202,7 +202,7 @@ export default function HomePage() {
                             <Alert className="border-l-4 border-l-primary">
                               <Code2 className="h-4 w-4" />
                               <AlertTitle>请求地址</AlertTitle>
-                              <AlertDescription className="font-mono">
+                              <AlertDescription className="whitespace-pre-wrap break-words font-mono text-xs sm:text-sm">
                                 GET https://connect.q58.club/oauth/authorize
                               </AlertDescription>
                             </Alert>
@@ -229,7 +229,7 @@ window.location.href = authUrl;`}
                                 <p className="mb-2">
                                   用户授权后，将重定向到您的回调地址：
                                 </p>
-                                <pre className="mt-2 overflow-x-auto rounded bg-gray-100 p-4 dark:bg-gray-800">
+                                <pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded bg-gray-100 p-2 text-xs dark:bg-gray-800 sm:p-4 sm:text-sm">
                                   <code className="text-sm">
                                     https://your-app.com/callback?code=ac_xxxxxx...
                                   </code>
@@ -267,7 +267,7 @@ window.location.href = authUrl;`}
                             <Alert className="border-l-4 border-l-primary">
                               <Code2 className="h-4 w-4" />
                               <AlertTitle>请求地址</AlertTitle>
-                              <AlertDescription className="font-mono">
+                              <AlertDescription className="whitespace-pre-wrap break-words font-mono text-xs sm:text-sm">
                                 POST
                                 https://connect.q58.club/api/oauth/access_token
                               </AlertDescription>
@@ -294,7 +294,7 @@ window.location.href = authUrl;`}
                               <ArrowDownToLine className="h-4 w-4" />
                               <AlertTitle>响应数据</AlertTitle>
                               <AlertDescription>
-                                <pre className="mt-2 overflow-x-auto rounded bg-gray-100 p-4 dark:bg-gray-800">
+                                <pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded bg-gray-100 p-2 text-xs dark:bg-gray-800 sm:p-4 sm:text-sm">
                                   <code className="text-sm">
                                     {`{
   "access_token": "at_xxxxxxxx",  // 访问令牌
@@ -328,7 +328,7 @@ window.location.href = authUrl;`}
                             <Alert className="border-l-4 border-l-primary">
                               <Code2 className="h-4 w-4" />
                               <AlertTitle>请求地址</AlertTitle>
-                              <AlertDescription className="font-mono">
+                              <AlertDescription className="whitespace-pre-wrap break-words font-mono text-xs sm:text-sm">
                                 GET https://connect.q58.club/api/oauth/user
                               </AlertDescription>
                             </Alert>
@@ -348,7 +348,7 @@ window.location.href = authUrl;`}
                               <ArrowDownToLine className="h-4 w-4" />
                               <AlertTitle>响应数据</AlertTitle>
                               <AlertDescription>
-                                <pre className="mt-2 overflow-x-auto rounded bg-gray-100 p-4 dark:bg-gray-800">
+                                <pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded bg-gray-100 p-2 text-xs dark:bg-gray-800 sm:p-4 sm:text-sm">
                                   <code className="text-sm">
                                     {`{
   "id": "user_xxx",           // 用户唯一标识
diff --git a/src/components/ui/code-block.tsx b/src/components/ui/code-block.tsx
index e1f7724..a4459f0 100644
--- a/src/components/ui/code-block.tsx
+++ b/src/components/ui/code-block.tsx
@@ -3,6 +3,8 @@
 import { useState } from "react";
 import { Check, Copy } from "lucide-react";
 
+import { cn } from "@/lib/utils";
+
 function CopyButton({ text }: { text: string }) {
   const [copied, setCopied] = useState(false);
 
@@ -26,10 +28,16 @@ function CopyButton({ text }: { text: string }) {
   );
 }
 
-export function CodeBlock({ children }: { children: string }) {
+export function CodeBlock({
+  children,
+  className,
+}: {
+  children: string;
+  className?: string;
+}) {
   return (
-    <div className="relative">
-      <pre className="overflow-x-auto rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
+    <div className={cn("relative", className)}>
+      <pre className="overflow-x-auto rounded-lg bg-gray-100 p-4 dark:bg-gray-800 sm:text-sm">
         <code className="text-sm">{children}</code>
       </pre>
       <CopyButton text={children} />