diff --git a/src/index.css b/src/index.css
index fa034c8..3f060d4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -23,7 +23,7 @@
 
 @layer components {
   [data-rehype-pretty-code-figure] div {
-    @apply bg-ds-900! border-none! rounded-none!;
+    @apply bg-ds-900! border-none! ds-rounded!;
   }
 
   [data-rehype-pretty-code-figure] code {
diff --git a/src/layouts/MdxWrapper.tsx b/src/layouts/MdxWrapper.tsx
index ecdad5f..c1bb1d1 100644
--- a/src/layouts/MdxWrapper.tsx
+++ b/src/layouts/MdxWrapper.tsx
@@ -127,7 +127,7 @@ const CustomPre = ({ children, ...props }: CustomPreProps) => {
   return (
     <div
       {...divProps}
-      className="relative group mt-6 first:mt-0 overflow-hidden rounded-lg border border-ds-200 dark:border-ds-800"
+      className="relative group mt-6 first:mt-0 overflow-hidden ds-rounded border border-ds-200 dark:border-ds-800"
     >
       <pre ref={preRef} className="m-0! bg-transparent!">
         {children}