diff --git a/apps/site/src/App.tsx b/apps/site/src/App.tsx
index e034279..20f1a5d 100644
--- a/apps/site/src/App.tsx
+++ b/apps/site/src/App.tsx
@@ -212,6 +212,7 @@ function CodeCard({ title, children }: { title: string; children: ReactNode }) {
       </div>
       <pre
         ref={preRef}
+        className="code-card-scroll"
         style={{
           margin: 0,
           padding: '18px 16px',
@@ -954,9 +955,17 @@ export default function App() {
               {'\n\n'}&lt;<span style={ident}>MermaidWysiwyg</span> <span style={str}>code</span>={'{diagram}'}{' '}
               <span style={str}>onCodeChange</span>={'{setDiagram}'} <span style={str}>mermaid</span>={'{mermaid}'} /&gt;
             </CodeCard>
-            <CodeCard title="Vanilla · -core + -dom">
-              <span style={cmt}># framework-free canvas, any app</span>
+            <CodeCard title="Vanilla · @visimer/core + @visimer/dom">
+              <span style={cmt}># npm i @visimer/core @visimer/dom mermaid</span>
               {'\n'}
+              <span style={kw}>import</span> mermaid <span style={kw}>from</span> <span style={str}>'mermaid'</span>
+              {'\n'}
+              <span style={kw}>import</span> {'{ MermaidWysiwygEditor }'} <span style={kw}>from</span>{' '}
+              <span style={str}>'@visimer/core'</span>
+              {'\n'}
+              <span style={kw}>import</span> {'{ MermaidCanvasView }'} <span style={kw}>from</span>{' '}
+              <span style={str}>'@visimer/dom'</span>
+              {'\n\n'}
               <span style={kw}>const</span> editor = <span style={kw}>new</span> <span style={ident}>MermaidWysiwygEditor</span>({'{ '}
               <span style={str}>code</span>
               {' }'})
@@ -964,12 +973,9 @@ export default function App() {
               <span style={kw}>new</span> <span style={ident}>MermaidCanvasView</span>({'{ '}
               <span style={str}>editor</span>, <span style={str}>container</span>, <span style={str}>mermaid</span>
               {' }'})
-              {'\n'}editor.<span style={ident}>on</span>(<span style={str}>'change'</span>, ({'{ '}
-              <span style={str}>code</span>
-              {' }'}) =&gt; <span style={ident}>save</span>(code))
             </CodeCard>
-            <CodeCard title="CodeMirror pane · -codemirror">
-              <span style={cmt}># the source pane in the playground above</span>
+            <CodeCard title="CodeMirror pane · @visimer/codemirror">
+              <span style={cmt}># npm i @visimer/codemirror</span>
               {'\n'}
               <span style={kw}>import</span> {'{ MermaidCodeMirror }'} <span style={kw}>from</span>{' '}
               <span style={str}>'@visimer/codemirror'</span>
@@ -978,8 +984,8 @@ export default function App() {
               {'\n'}
               <span style={cmt}># typing, highlights, undo, all shared with the canvas</span>
             </CodeCard>
-            <CodeCard title="Monaco · -monaco">
-              <span style={cmt}># bring your own monaco instance; zero monaco dependency</span>
+            <CodeCard title="Monaco · @visimer/monaco">
+              <span style={cmt}># npm i @visimer/monaco  (bring your own monaco instance)</span>
               {'\n'}
               <span style={kw}>import</span> {'{ bindMonaco }'} <span style={kw}>from</span>{' '}
               <span style={str}>'@visimer/monaco'</span>
diff --git a/apps/site/src/site.css b/apps/site/src/site.css
index cea9251..a942b08 100644
--- a/apps/site/src/site.css
+++ b/apps/site/src/site.css
@@ -178,3 +178,26 @@ textarea {
     gap: 10px !important;
   }
 }
+
+/* CodeCard scrollbars: subtle, tinted to the card chrome (bg #1E1B16, border #2E2A22). */
+.code-card-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: #2E2A22 transparent;
+}
+.code-card-scroll::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.code-card-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.code-card-scroll::-webkit-scrollbar-thumb {
+  background: #2E2A22;
+  border-radius: 99px;
+}
+.code-card-scroll::-webkit-scrollbar-thumb:hover {
+  background: #3A362D;
+}
+.code-card-scroll::-webkit-scrollbar-corner {
+  background: transparent;
+}