diff --git a/site/src/content/docs/concepts/_architecture.mdx b/site/src/content/docs/concepts/_architecture.mdx
index 28b4b890..4d34fbd9 100644
--- a/site/src/content/docs/concepts/_architecture.mdx
+++ b/site/src/content/docs/concepts/_architecture.mdx
@@ -74,9 +74,10 @@ Here's a complete example showing all three tiers:
 
 <FrameworkCase frameworks={["react"]}>
 ```tsx
-import { VideoProvider, FrostedSkin, Video } from '@videojs/react-preview';
 import '@videojs/react-preview/skins/frosted.css';
 
+import { VideoProvider, FrostedSkin, Video } from '@videojs/react-preview';
+
 function Player() {
   return (
     // Tier 1: State Management
diff --git a/site/src/content/docs/concepts/_skins.mdx b/site/src/content/docs/concepts/_skins.mdx
index c697bcd8..cd7e8b79 100644
--- a/site/src/content/docs/concepts/_skins.mdx
+++ b/site/src/content/docs/concepts/_skins.mdx
@@ -32,9 +32,10 @@ A modern, glassy design with backdrop blur effects and polished interactions.
 
 <FrameworkCase frameworks={["react"]}>
 ```tsx
+import '@videojs/react/video/skin.css';
+
 import { createPlayer, Poster } from '@videojs/react';
 import { VideoSkin, Video, videoFeatures } from '@videojs/react/video';
-import '@videojs/react/video/skin.css';
 
 const Player = createPlayer({ features: videoFeatures });
 
@@ -70,9 +71,10 @@ A clean, straightforward design that focuses on simplicity and clarity.
 
 <FrameworkCase frameworks={["react"]}>
 ```tsx
+import '@videojs/react/video/minimal-skin.css';
+
 import { createPlayer, Poster } from '@videojs/react';
 import { MinimalVideoSkin, Video, videoFeatures } from '@videojs/react/video';
-import '@videojs/react/video/minimal-skin.css';
 
 const Player = createPlayer({ features: videoFeatures });