diff --git a/examples/spa/index.html b/examples/spa/index.html
index 4d19034..3d4dcd9 100644
--- a/examples/spa/index.html
+++ b/examples/spa/index.html
@@ -3,15 +3,12 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/main.css"/>
   <title>Forge SPA Examples</title>
   <style>
     html, body {
-      height: 100%;
       margin: 0;
     }
-    #root {
-      min-height: 100%;
-    }
   </style>
 </head>
 <body>
diff --git a/examples/spa/index.tsx b/examples/spa/index.tsx
index 283c6dd..ffa4855 100644
--- a/examples/spa/index.tsx
+++ b/examples/spa/index.tsx
@@ -1,5 +1,5 @@
 import { render } from 'hono/jsx/dom'
-import { App, route } from './app'
+import { App } from './app'
 
 const root = document.getElementById('root')
 
diff --git a/examples/ssr/helpers.tsx b/examples/ssr/helpers.tsx
index b7d8cf6..e69088c 100644
--- a/examples/ssr/helpers.tsx
+++ b/examples/ssr/helpers.tsx
@@ -87,7 +87,7 @@ export const Layout = define({
           <meta charset="UTF-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />
           <title>{props.title}</title>
-          <Styles />
+          <link rel="stylesheet" href="/main.css" />
         </head>
         <Body>
           <Container>
diff --git a/server.tsx b/server.tsx
index d6b29fc..90f9d17 100644
--- a/server.tsx
+++ b/server.tsx
@@ -1,12 +1,16 @@
 import { Hono } from 'hono'
 import { IndexPage, ProfileExamplesPage, ButtonExamplesPage, NavigationExamplesPage, FormExamplesPage } from './examples/ssr/pages'
 import { LandingPage } from './examples/ssr/landing'
-import { styles, stylesToCSS } from './src'
+import { stylesToCSS } from './src'
 
 const app = new Hono()
 
 app.get('/', c => c.html(<LandingPage />))
 
+app.get('/main.css', c => c.text(stylesToCSS(), 200, {
+  'Content-Type': 'text/css; charset=utf-8',
+}))
+
 app.get('/ssr', c => c.html(<IndexPage path="/ssr" />))
 
 app.get('/ssr/profile', c => c.html(<ProfileExamplesPage path="/ssr/profile" />))
@@ -17,7 +21,7 @@ app.get('/ssr/navigation', c => c.html(<NavigationExamplesPage path="/ssr/naviga
 
 app.get('/ssr/form', c => c.html(<FormExamplesPage path="/ssr/form" />))
 
-app.get('/styles', c => c.text(stylesToCSS(styles)))
+app.get('/styles', c => c.text(stylesToCSS()))
 
 app.get('/spa/*', async c => c.html(await Bun.file('./examples/spa/index.html').text()))
 
diff --git a/src/index.tsx b/src/index.tsx
index db0ca30..e7f7e45 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,8 +3,9 @@ import { type TagDef, UnitlessProps, NonStyleKeys } from './types'
 
 export const styles: Record<string, Record<string, string>> = {}
 
+// All CSS styles inside <style></style.
 // Use w/ SSR: <Styles/>
-export const Styles = () => <style dangerouslySetInnerHTML={{ __html: stylesToCSS(styles) }} />
+export const Styles = () => <style dangerouslySetInnerHTML={{ __html: stylesToCSS() }} />
 
 const isBrowser = typeof document !== 'undefined'
 let styleElement: HTMLStyleElement | null = null
@@ -21,10 +22,11 @@ function injectStylesInBrowser() {
     document.head.appendChild(styleElement)
   }
 
-  styleElement.textContent = stylesToCSS(styles)
+  styleElement.textContent = stylesToCSS()
 }
+
 // turns style object into string CSS definition
-export function stylesToCSS(styles: Record<string, Record<string, string>>): string {
+export function stylesToCSS(): string {
   let out: string[] = []
 
   for (const [selector, style] of Object.entries(styles)) {
