diff --git a/.gitignore b/.gitignore
index 5eca3fa..e869ad8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@ buildapp
 quicklisp-manifest.txt
 notes/
 run-asteroid.sh
+build-sbcl.sh
diff --git a/asteroid.lisp b/asteroid.lisp
index 24685e1..7a32ad1 100644
--- a/asteroid.lisp
+++ b/asteroid.lisp
@@ -9,19 +9,25 @@
 
 ;; Define as RADIANCE module
 (define-module asteroid
-  (:use #:cl #:radiance #:lass)
+  (:use #:cl #:radiance #:lass #:r-clip)
   (:domain "asteroid"))
 
 ;; Configuration
 (defparameter *server-port* 8080)
 
-;; Read and compile LASS from file
+;; Define CLIP attribute processor for data-text
+(clip:define-attribute-processor data-text (node value)
+  (plump:clear node)
+  (plump:make-text-node node (clip:clipboard value)))
+
+;; LASS CSS generation
 (defun generate-css ()
-  "Generate CSS by reading LASS from static/asteroid.lass file"
-  (let ((lass-file (merge-pathnames "static/asteroid.lass")))
-    (lass:compile-and-write
-     (with-open-file (in lass-file)
-       (read in)))))
+  "Generate CSS from LASS file"
+  (lass:compile-and-write 
+   (read-from-string 
+    (alexandria:read-file-into-string 
+     (merge-pathnames "static/asteroid.lass" 
+                      (asdf:system-source-directory :asteroid))))))
 
 ;; Generate CSS file using LASS
 (defun compile-styles ()
@@ -40,93 +46,45 @@
 
 ;; RADIANCE route handlers
 (define-page index #@"/" ()
-  (spinneret:with-html-string
-    (:doctype)
-    (:html
-     (:head
-      (:title "🎵 ASTEROID RADIO 🎵")
-      (:meta :charset "utf-8")
-      (:meta :name "viewport" :content "width=device-width, initial-scale=1")
-      (:link :rel "stylesheet" :type "text/css" :href "/static/asteroid.css"))
-     (:body
-      (:div.container
-       (:h1 "🎵 ASTEROID RADIO 🎵")
-       (:div.status
-        (:h2 "Station Status")
-        (:p "🟢 LIVE - Broadcasting asteroid music for hackers")
-        (:p "Current listeners: 0")
-        (:p "Stream quality: 128kbps MP3"))
-       (:div.nav
-        (:a :href "/admin" "Admin Dashboard")
-        (:a :href "/player" "Web Player")
-        (:a :href "/api/status" "API Status"))
-       (:div
-        (:h2 "Now Playing")
-        (:p "Artist: The Void")
-        (:p "Track: Silence")
-        (:p "Album: Startup Sounds")
-        (:p "Duration: ∞")))))))
+  (let ((template-path (merge-pathnames "template/front-page.chtml" 
+                                       (asdf:system-source-directory :asteroid))))
+    (clip:process-to-string 
+     (plump:parse (alexandria:read-file-into-string template-path))
+     :title "🎵 ASTEROID RADIO 🎵"
+     :station-name "🎵 ASTEROID RADIO 🎵"
+     :status-message "🟢 LIVE - Broadcasting asteroid music for hackers"
+     :listeners "0"
+     :stream-quality "128kbps MP3"
+     :now-playing-artist "The Void"
+     :now-playing-track "Silence"
+     :now-playing-album "Startup Sounds"
+     :now-playing-duration "∞")))
 
 (define-page admin #@"/admin" ()
-  (spinneret:with-html-string
-    (:doctype)
-    (:html
-     (:head
-      (:title "Asteroid Radio - Admin Dashboard")
-      (:meta :charset "utf-8")
-      (:link :rel "stylesheet" :type "text/css" :href "/static/asteroid.css"))
-     (:body
-      (:div.container
-       (:a.back :href "/" "← Back to Main")
-       (:h1 "Admin Dashboard")
-       (:div.panel
-        (:h2 "Playback Control")
-        (:button "Play")
-        (:button "Pause")
-        (:button "Skip")
-        (:button "Stop"))
-       (:div.panel
-        (:h2 "Library Management")
-        (:button "Upload Music")
-        (:button "Manage Playlists")
-        (:button "Scan Library"))
-       (:div.panel
-        (:h2 "Live DJ")
-        (:button "Go Live")
-        (:button "End Session")
-        (:button "Mic Check"))
-       (:div.panel
-        (:h2 "System Status")
-        (:p "Server: Running")
-        (:p "Database: Not Connected")
-        (:p "Liquidsoap: Not Running")
-        (:p "Icecast: Not Running")))))))
+  (let ((template-path (merge-pathnames "template/admin.chtml" 
+                                       (asdf:system-source-directory :asteroid))))
+    (clip:process-to-string 
+     (plump:parse (alexandria:read-file-into-string template-path))
+     :title "Asteroid Radio - Admin Dashboard"
+     :server-status "🟢 Running"
+     :database-status "🟡 Not Connected"
+     :liquidsoap-status "🔴 Not Running"
+     :icecast-status "🔴 Not Running")))
 
 (define-page player #@"/player" ()
-  (spinneret:with-html-string
-    (:doctype)
-    (:html
-     (:head
-      (:title "Asteroid Radio - Web Player")
-      (:meta :charset "utf-8")
-      (:link :rel "stylesheet" :type "text/css" :href "/static/asteroid.css"))
-     (:body
-      (:a.back :href "/" "← Back to Main")
-      (:div.player
-       (:h1 "🎵 ASTEROID RADIO PLAYER 🎵")
-       (:div.now-playing
-        (:div "Now Playing:")
-        (:div "Silence - The Sound of Startup"))
-       (:div.controls
-        (:button "▶ Play Stream")
-        (:button "⏸ Pause")
-        (:button "🔊 Volume"))
-       (:div
-        (:p "Stream URL: http://localhost:8000/asteroid")
-        (:p "Bitrate: 128kbps MP3")
-        (:p "Status: Offline")))))))
+  (let ((template-path (merge-pathnames "template/player.chtml" 
+                                       (asdf:system-source-directory :asteroid))))
+    (clip:process-to-string 
+     (plump:parse (alexandria:read-file-into-string template-path))
+     :title "Asteroid Radio - Web Player"
+     :stream-url "http://localhost:8000/asteroid"
+     :bitrate "128kbps MP3"
+     :now-playing-artist "The Void"
+     :now-playing-track "Silence"
+     :now-playing-album "Startup Sounds"
+     :player-status "Stopped")))
 
-(define-page api/status #@"/api/status" ()
+(define-page status-api #@"/status" ()
   (setf (radiance:header "Content-Type") "application/json")
   (cl-json:encode-json-to-string
    `(("status" . "running")
diff --git a/template/admin.chtml b/template/admin.chtml
new file mode 100644
index 0000000..afb3d19
--- /dev/null
+++ b/template/admin.chtml
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title data-text="title">Asteroid Radio - Admin Dashboard</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" href="/static/asteroid.css">
+</head>
+<body>
+  <div class="container">
+    <h1>🎛️ ADMIN DASHBOARD</h1>
+    <div class="nav">
+      <a href="/">← Back to Main</a>
+      <a href="/player">Web Player</a>
+    </div>
+    <div class="admin-grid">
+      <div class="status-card">
+        <h3>Server Status</h3>
+        <p class="status-good" data-text="server-status">🟢 Running</p>
+      </div>
+      <div class="status-card">
+        <h3>Database Status</h3>
+        <p class="status-warning" data-text="database-status">🟡 Not Connected</p>
+      </div>
+      <div class="status-card">
+        <h3>Liquidsoap Status</h3>
+        <p class="status-error" data-text="liquidsoap-status">🔴 Not Running</p>
+      </div>
+      <div class="status-card">
+        <h3>Icecast Status</h3>
+        <p class="status-error" data-text="icecast-status">🔴 Not Running</p>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/template/front-page.chtml b/template/front-page.chtml
index 421e221..14ffa8c 100644
--- a/template/front-page.chtml
+++ b/template/front-page.chtml
@@ -1,48 +1,32 @@
 <!DOCTYPE html>
-<html lang=en>
- <head>
-  <title>🎵 ASTEROID RADIO 🎵</title>
-  <meta charset=utf-8>
-  <meta name=viewport
-        content=\"width=device-width, initial-scale=1\">
-  <style>
-        body { font-family: &#39;Courier New&#39;, monospace; background: #0a0a0a; color: #00ff00; margin: 0; padding: 20px; }
-        .container { max-width: 1200px; margin: 0 auto; }
-        h1 { color: #ff6600; text-align: center; font-size: 2.5em; margin-bottom: 30px; }
-        h2 { color: #ff6600; }
-        .status { background: #1a1a1a; padding: 20px; border: 1px solid #333; margin: 20px 0; }
-        .panel { background: #1a1a1a; padding: 20px; border: 1px solid #333; margin: 20px 0; }
-        .nav { margin: 20px 0; }
-        .nav a { color: #00ff00; text-decoration: none; margin: 0 15px; padding: 10px 20px; border: 1px solid #333; background: #1a1a1a; display: inline-block; }
-        .nav a:hover { background: #333; }
-        .controls { margin: 20px 0; }
-        .controls button { background: #1a1a1a; color: #00ff00; border: 1px solid #333; padding: 10px 20px; margin: 5px; cursor: pointer; }
-        .controls button:hover { background: #333; }
-        .now-playing { background: #1a1a1a; padding: 20px; border: 1px solid #333; margin: 20px 0; }
-        .back { color: #00ff00; text-decoration: none; margin-bottom: 20px; display: inline-block; }
-        .back:hover { text-decoration: underline; }
-      </style>
- </head>
- <body>
-  <div class=container>
-   <h1>🎵 ASTEROID RADIO 🎵</h1>
-   <div class=status>
-    <h2>Station Status</h2>
-    <p>🟢 LIVE - Broadcasting asteroid music for hackers
-    <p>Current listeners: 0
-    <p>Stream quality: 128kbps MP3
-   </div>
-   <div class=nav>
-    <a href=\"/admin\">Admin Dashboard</a><a href=\"/player\">Web Player</a><a
-    href=\"/api/status\">API Status</a>
-   </div>
-   <div>
-    <h2>Now Playing</h2>
-    <p>Artist: The Void
-    <p>Track: Silence
-    <p>Album: Startup Sounds
-    <p>Duration: ∞
-   </div>
+<html lang="en">
+<head>
+  <title data-text="title">🎵 ASTEROID RADIO 🎵</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" href="/static/asteroid.css">
+</head>
+<body>
+  <div class="container">
+    <h1 data-text="station-name">🎵 ASTEROID RADIO 🎵</h1>
+    <div class="status">
+      <h2>Station Status</h2>
+      <p data-text="status-message">🟢 LIVE - Broadcasting asteroid music for hackers</p>
+      <p>Current listeners: <span data-text="listeners">0</span></p>
+      <p>Stream quality: <span data-text="stream-quality">128kbps MP3</span></p>
+    </div>
+    <div class="nav">
+      <a href="/admin">Admin Dashboard</a>
+      <a href="/player">Web Player</a>
+      <a href="/status">API Status</a>
+    </div>
+    <div>
+      <h2>Now Playing</h2>
+      <p>Artist: <span data-text="now-playing-artist">The Void</span></p>
+      <p>Track: <span data-text="now-playing-track">Silence</span></p>
+      <p>Album: <span data-text="now-playing-album">Startup Sounds</span></p>
+      <p>Duration: <span data-text="now-playing-duration">∞</span></p>
+    </div>
   </div>
- </body>
+</body>
 </html>
diff --git a/template/player.chtml b/template/player.chtml
new file mode 100644
index 0000000..ebbea80
--- /dev/null
+++ b/template/player.chtml
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title data-text="title">Asteroid Radio - Web Player</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" href="/static/asteroid.css">
+</head>
+<body>
+  <div class="container">
+    <h1>🎵 WEB PLAYER</h1>
+    <div class="nav">
+      <a href="/">← Back to Main</a>
+      <a href="/admin">Admin Dashboard</a>
+    </div>
+    <div class="player">
+      <div class="now-playing">
+        <h3>Now Playing</h3>
+        <p>Artist: <span data-text="now-playing-artist">The Void</span></p>
+        <p>Track: <span data-text="now-playing-track">Silence</span></p>
+        <p>Album: <span data-text="now-playing-album">Startup Sounds</span></p>
+      </div>
+      <div class="player-controls">
+        <button class="play-btn">▶️ Play</button>
+        <button class="stop-btn">⏹️ Stop</button>
+        <p>Stream: <span data-text="stream-url">http://localhost:8000/asteroid</span></p>
+        <p>Quality: <span data-text="bitrate">128kbps MP3</span></p>
+        <p>Status: <span data-text="player-status">Stopped</span></p>
+      </div>
+    </div>
+  </div>
+</body>
+</html>