diff --git a/src/app/(article)/posts/[id]/shiki.css b/src/app/(article)/posts/[id]/shiki.css
index ed1e5a8..e4698f5 100644
--- a/src/app/(article)/posts/[id]/shiki.css
+++ b/src/app/(article)/posts/[id]/shiki.css
@@ -140,3 +140,8 @@
 .mdx-components pre {
   @apply my-0;
 }
+
+/* mdx component */
+.mdx-components .copy-button {
+  @apply right-3;
+}
diff --git a/src/markdown/components/copy-button.tsx b/src/markdown/components/copy-button.tsx
index ac8f8d1..d73ee7e 100644
--- a/src/markdown/components/copy-button.tsx
+++ b/src/markdown/components/copy-button.tsx
@@ -24,8 +24,10 @@ export const CopyButton = (props: CopyButtonProps) => {
   return (
     <button
       className={clsx(
-        'absolute right-3 top-3 hidden rounded p-2 hover:bg-color-1/10 group-hover:block',
-        copied ? '!block bg-color-1/10 text-green-500' : 'text-gray-500',
+        'copy-button absolute right-1 top-6 hidden -translate-y-1/2 rounded p-2 hover:bg-gray-100 group-hover:block dark:hover:bg-gray-700 md:-right-4',
+        copied
+          ? '!block bg-gray-100 text-green-500 dark:bg-gray-700'
+          : 'text-gray-500',
       )}
       onClick={handleClick}
     >
diff --git a/src/markdown/components/pre.tsx b/src/markdown/components/pre.tsx
index 57a2dc5..8cc2c37 100644
--- a/src/markdown/components/pre.tsx
+++ b/src/markdown/components/pre.tsx
@@ -14,7 +14,7 @@ export const Pre = (props: PreProps) => {
   const { className, content, children, ...rest } = props
   return (
     <div className='relative'>
-      <pre {...rest} className={clsx('group relative', className)}>
+      <pre {...rest} className={clsx('group', className)}>
         {children}
         {content && <CopyButton content={content} />}
       </pre>