diff --git a/packages/webawesome/docs/_utils/code-examples.js b/packages/webawesome/docs/_utils/code-examples.js
index 5b7a9a8b6..84b2d28d4 100644
--- a/packages/webawesome/docs/_utils/code-examples.js
+++ b/packages/webawesome/docs/_utils/code-examples.js
@@ -37,7 +37,9 @@ export function codeExamplesPlugin(options = {}) {
         const codeExample = parse(`
           <div class="code-example ${isOpen ? 'open' : ''}">
             <div class="code-example-preview">
-              ${preview}
+              <div>
+                ${preview}
+              </div>
               <div class="code-example-resizer" aria-hidden="true">
                 <wa-icon name="grip-lines-vertical"></wa-icon>
               </div>
diff --git a/packages/webawesome/docs/assets/styles/code-examples.css b/packages/webawesome/docs/assets/styles/code-examples.css
index 5fd30af62..11a64f692 100644
--- a/packages/webawesome/docs/assets/styles/code-examples.css
+++ b/packages/webawesome/docs/assets/styles/code-examples.css
@@ -100,8 +100,8 @@
 .code-example-buttons {
   display: flex;
   align-items: stretch;
-  background: var(--wa-color-surface-default) !important; /* TODO - remove after native styles refactor */
-  color: var(--wa-color-text-quiet) !important; /* TODO - remove after native styles refactor */
+  background: var(--wa-color-surface-default);
+  color: var(--wa-color-text-quiet);
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
 
@@ -116,14 +116,6 @@
     padding: 0.5rem;
     cursor: pointer;
 
-    @media (hover: hover) {
-      &:hover {
-        border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet) !important; /* TODO - remove after native styles refactor */
-        background: var(--wa-color-surface-default) !important; /* TODO - remove after native styles refactor */
-        color: var(--wa-color-text-quiet) !important; /* TODO - remove after native styles refactor */
-      }
-    }
-
     &:first-of-type {
       border-left: none;
       border-bottom-left-radius: var(--wa-border-radius-l);
diff --git a/packages/webawesome/docs/assets/styles/code-highlighter.css b/packages/webawesome/docs/assets/styles/code-highlighter.css
index f66eedd26..e99fb2fb5 100644
--- a/packages/webawesome/docs/assets/styles/code-highlighter.css
+++ b/packages/webawesome/docs/assets/styles/code-highlighter.css
@@ -1,7 +1,8 @@
 /* Only code blocks generated by our docs get these styles */
 pre[id*='code-block-'] {
-  background-color: var(--wa-color-gray-20);
+  color-scheme: dark;
   color: white;
+  background-color: var(--wa-color-neutral-20);
 
   /* Ensures a discernible background color in dark mode
    * Useful for themes that use gray-20 as --wa-color-surface-default  */