diff --git a/apps/docs/app/ui/components/previewComponent/ComponentWrapper.tsx b/apps/docs/app/ui/components/previewComponent/ComponentWrapper.tsx
index f517083c8..23e5afea7 100644
--- a/apps/docs/app/ui/components/previewComponent/ComponentWrapper.tsx
+++ b/apps/docs/app/ui/components/previewComponent/ComponentWrapper.tsx
@@ -20,7 +20,7 @@ const ComponentWrapper = ({ className, src }: ComponentWrapperProps) => {
         loading: () => <PreviewSkeleton overlay />
     }), [src]);
 
-    const [colorScheme, setColorScheme] = useState<"light" | "dark">("light");
+    const [colorScheme, setColorScheme] = useState<"light" | "dark">("dark");
 
     const toggleTheme = () => {
         const theme: ColorScheme = colorScheme === "dark"
diff --git a/apps/docs/app/ui/components/previewComponent/previewComponent.css b/apps/docs/app/ui/components/previewComponent/previewComponent.css
index 73b5c28b8..cf503e21c 100644
--- a/apps/docs/app/ui/components/previewComponent/previewComponent.css
+++ b/apps/docs/app/ui/components/previewComponent/previewComponent.css
@@ -35,6 +35,7 @@
     --hd-color-neutral-icon: var(--hd-neutral-900);
 }
 
+
 [data-theme="dark"] .hd-component-wrapper--light .hd-component-wrapper__action:hover {
     --hd-color-neutral-icon: var(--hd-neutral-0);
 }
@@ -47,6 +48,7 @@
     --hd-color-neutral-icon: var(--hd-neutral-0);
 }
 
+[data-theme="dark"] .hd-component-wrapper--light .hd-preview-component__content,
 .hd-component-wrapper--light .hd-preview-component__content {
     --background: var(--hd-white);
     --color: var(--hd-neutral-50);
diff --git a/apps/docs/app/ui/components/propTable/PropTable.tsx b/apps/docs/app/ui/components/propTable/PropTable.tsx
index 432b5ac7a..467fcc270 100644
--- a/apps/docs/app/ui/components/propTable/PropTable.tsx
+++ b/apps/docs/app/ui/components/propTable/PropTable.tsx
@@ -39,6 +39,7 @@ const formatGroup = (groups: Groups[]) => {
                     ...item,
                     name: <Code value={item.name}>{item.name}</Code>,
                     type: <HighlightCode code={item.type} variant="tiny" />,
+                    defaultValue: item.defaultValue.replace(/'/g, "\""),
                     description: <MDXRemote source={description} />
                 };
             })
diff --git a/apps/docs/content/components/button.mdx b/apps/docs/content/components/button.mdx
index 7d747b250..afc5f1a01 100644
--- a/apps/docs/content/components/button.mdx
+++ b/apps/docs/content/components/button.mdx
@@ -11,10 +11,9 @@ links:
 <PreviewComponent src="buttons/docs/preview"/>
 
 ## Usage
-```tsx
-import { Button } from "@hopper-ui/components";
-```
 ```tsx showLineNumbers
+import { Button } from "@hopper-ui/components";
+
 <Button>save</Button>
 ```
 ## Props