diff --git a/client/src/components/editor/PreviewCodeBlock.tsx b/client/src/components/editor/PreviewCodeBlock.tsx
index 5397aec..aba9d60 100644
--- a/client/src/components/editor/PreviewCodeBlock.tsx
+++ b/client/src/components/editor/PreviewCodeBlock.tsx
@@ -135,8 +135,11 @@ export const PreviewCodeBlock: React.FC<PreviewCodeBlockProps> = ({
         )}
 
         <div 
-          className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-light-surface dark:from-dark-surface to-transparent pointer-events-none rounded-b-lg"
-          style={{ height: `${LINE_HEIGHT * 2}px` }}
+          className="absolute inset-x-0 bottom-0 bg-gradient-to-t to-transparent pointer-events-none rounded-b-lg"
+          style={{ 
+            height: `${LINE_HEIGHT * 2}px`,
+            background: `linear-gradient(to top, ${backgroundColor}, transparent)`
+          }}
         />
 
         <CopyButton text={code} />
diff --git a/client/src/index.css b/client/src/index.css
index 6ec2954..41673e5 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -42,20 +42,17 @@ code {
 
 /* Markdown styles */
 .markdown pre {
-  @apply bg-slate-200 dark:bg-slate-600;
-  padding: 0.75rem;
-  border-radius: 0.5rem;
-  overflow-x: auto;
+  @apply bg-slate-200 dark:bg-slate-800;
+  padding: 0.2rem 0.4rem;
+  border-radius: 0.25rem;
   @apply text-light-text dark:text-dark-text;
-  @apply border border-light-border dark:border-dark-border;
 }
 
 .markdown code {
-  @apply bg-slate-200 dark:bg-slate-600;
+  @apply bg-slate-200 dark:bg-slate-800;
   padding: 0.2rem 0.4rem;
   border-radius: 0.25rem;
   @apply text-light-text dark:text-dark-text;
-  @apply border border-light-border dark:border-dark-border;
 }
 
 .markdown pre code {