diff --git a/src/styles/markdown.css b/src/styles/markdown.css
index d01c176..df98ebf 100644
--- a/src/styles/markdown.css
+++ b/src/styles/markdown.css
@@ -1,3 +1,19 @@
+.btn-regular-dark {
+    @apply bg-gray-800 text-white;
+}
+
+.btn-regular-bg {
+    @apply bg-gray-100 dark:bg-gray-800;
+}
+
+.btn-plain-bg-hover {
+    @apply bg-gray-50 dark:bg-gray-700;
+}
+
+.btn-plain-bg-active {
+    @apply bg-gray-200 dark:bg-gray-600;
+}
+
 .custom-md {
     h1 {
         @apply text-3xl;
@@ -24,7 +40,6 @@
         }
     }
 
-    /* https://github.com/afoim/fuwari/blob/main/src/styles/markdown.css */
     a:not(.no-styling) {
         @apply relative bg-none transition rounded-md p-1 -m-1 font-medium text-[var(--primary)] before:ease-out before:transition active:bg-none hover:before:bg-[var(--btn-plain-bg-hover)] active:before:bg-[var(--btn-plain-bg-active)] z-0 before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10 underline decoration-[var(--link-underline)] decoration-1 decoration-dashed underline-offset-4;
         box-decoration-break: clone;
@@ -42,7 +57,7 @@
     code {
         @apply bg-[var(--inline-code-bg)] text-[var(--inline-code-color)] px-1 py-0.5 rounded-md overflow-hidden;
 
-        font-family: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+        font-family: 'Cascadia Mono', 'JetBrainsMono-VF', SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 
         &:before {
             content: none;
@@ -69,10 +84,35 @@
         }
     }
 
+    .copy-btn {
+        all: initial;
+        @apply btn-regular-dark opacity-0 shadow-lg shadow-black/50 absolute active:scale-90 h-8 w-8 top-3 right-3 text-sm rounded-lg transition-all ease-in-out z-20 cursor-pointer;
+    }
+
     .frame:hover .copy-btn {
         opacity: 1;
     }
 
+    .copy-btn-icon {
+        @apply absolute top-1/2 left-1/2 transition -translate-x-1/2 -translate-y-1/2 w-4 h-4 fill-white pointer-events-none;
+    }
+
+    .copy-btn .copy-icon {
+        @apply opacity-100 fill-white dark:fill-white/75;
+    }
+
+    .copy-btn.success .copy-icon {
+        @apply opacity-0 fill-[var(--deep-text)]
+    }
+
+    .copy-btn .success-icon {
+        @apply opacity-0 fill-white;
+    }
+
+    .copy-btn.success .success-icon {
+        @apply opacity-100
+    }
+
     .expressive-code {
         @apply my-4;
 
@@ -81,7 +121,6 @@
         }
     }
 
-
     ul,
     ol {
         li::marker {
@@ -104,11 +143,4 @@
         }
 
     }
-
-    .katex-display-container {
-        max-width: 100%;
-        overflow-x: auto;
-        margin: 1em 0;
-    }
-
 }
\ No newline at end of file