diff --git a/documentation/src/theme/DocItem/Layout/CopyPageButton.module.css b/documentation/src/theme/DocItem/Layout/CopyPageButton.module.css
deleted file mode 100644
index b3f0e2c0b8..0000000000
--- a/documentation/src/theme/DocItem/Layout/CopyPageButton.module.css
+++ /dev/null
@@ -1,108 +0,0 @@
-/* Copy Page Button Styles */
-.copyButton {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  background-color: var(--button-primary-background);
-  border: none;
-  border-radius: 6px;
-  color: var(--text-inverse);
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-family: var(--ifm-font-family-base);
-  line-height: 1;
-}
-
-.copyButton:hover {
-  opacity: 0.9;
-  transform: translateY(-1px);
-}
-
-.copyButton:focus {
-  outline: 2px solid var(--ifm-color-primary);
-  outline-offset: 2px;
-}
-
-.copyButton:active {
-  transform: translateY(1px);
-}
-
-.copyButton:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.copyButton:disabled:hover {
-  background-color: var(--button-primary-background);
-  opacity: 0.6;
-  transform: none;
-}
-
-.copyButtonError {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  background-color: var(--ifm-color-danger-contrast-background);
-  border: none;
-  border-radius: 6px;
-  color: var(--ifm-color-danger-contrast-foreground);
-  font-size: 14px;
-  font-family: var(--ifm-font-family-base);
-  line-height: 1;
-}
-
-.copyIcon {
-  flex-shrink: 0;
-}
-
-/* Header layout styles */
-.headerWithButton {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 1rem;
-}
-
-.headerTitle {
-  margin: 0;
-  flex: 1;
-}
-
-.buttonContainer {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 1rem;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .copyButton {
-    font-size: 12px;
-    padding: 4px 8px;
-    gap: 4px;
-  }
-  
-  .headerWithButton {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.5rem;
-  }
-  
-  .buttonContainer {
-    margin-bottom: 0.5rem;
-  }
-}
-
-/* Dark mode adjustments - use the same primary button styling */
-[data-theme='dark'] .copyButton {
-  background-color: var(--button-primary-background);
-  color: var(--text-inverse);
-}
-
-[data-theme='dark'] .copyButton:hover {
-  opacity: 0.9;
-  transform: translateY(-1px);
-}
diff --git a/documentation/src/theme/DocItem/Layout/index.tsx b/documentation/src/theme/DocItem/Layout/index.tsx
index d55766ea39..25001d5c20 100644
--- a/documentation/src/theme/DocItem/Layout/index.tsx
+++ b/documentation/src/theme/DocItem/Layout/index.tsx
@@ -15,7 +15,6 @@ import ContentVisibility from '@theme/ContentVisibility';
 import Heading from '@theme/Heading';
 import MDXContent from '@theme/MDXContent';
 import {Copy, Check} from 'lucide-react';
-import styles from './CopyPageButton.module.css';
 import layoutStyles from './styles.module.css';
 import TurndownService from 'turndown';
 
@@ -323,7 +322,7 @@ function CopyPageButton(): ReactNode {
   // Display error message if there's an error
   if (error) {
     return (
-      <div className={styles.copyButtonError}>
+      <div className="flex items-center gap-1.5 px-3 py-1.5 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md text-red-700 dark:text-red-300 text-sm">
         <span>{error}</span>
       </div>
     );
@@ -334,7 +333,7 @@ function CopyPageButton(): ReactNode {
   return (
     <button
       onClick={handleCopy}
-      className={styles.copyButton}
+      className="flex items-center gap-1.5 px-3 py-1.5 bg-black dark:bg-white text-white dark:text-black rounded-md text-sm font-medium transition-all duration-200 ease-in-out hover:opacity-90 hover:-translate-y-px focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:ring-offset-2 active:translate-y-px disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:opacity-60 disabled:hover:translate-y-0"
       aria-label={copied ? 'Page copied to clipboard' : 'Copy page to clipboard'}
       type="button"
       disabled={!isClient || isLoading}
@@ -342,13 +341,13 @@ function CopyPageButton(): ReactNode {
       {/* Copy/Check icon using Lucide React */}
       {copied ? (
         <Check 
-          className={styles.copyIcon}
+          className="flex-shrink-0"
           size={16}
           aria-hidden="true"
         />
       ) : (
         <Copy 
-          className={styles.copyIcon}
+          className="flex-shrink-0"
           size={16}
           aria-hidden="true"
         />
@@ -408,13 +407,13 @@ function CustomDocItemContent({children}: {children: ReactNode}): ReactNode {
   return (
     <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
       {syntheticTitle && (
-        <header className={styles.headerWithButton}>
-          <Heading as="h1" className={styles.headerTitle}>{syntheticTitle}</Heading>
+        <header className="flex justify-between items-start mb-4 flex-col md:flex-row gap-2 md:gap-0">
+          <Heading as="h1" className="m-0 flex-1">{syntheticTitle}</Heading>
           {shouldShowCopyButton && <CopyPageButton />}
         </header>
       )}
       {!syntheticTitle && shouldShowCopyButton && (
-        <div className={styles.buttonContainer}>
+        <div className="flex justify-end mb-4">
           <CopyPageButton />
         </div>
       )}