diff --git a/Cargo.lock b/Cargo.lock
index 2ea1bdb..7fc5374 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -62,7 +62,7 @@ checksum = "a564d521dd56509c4c47480d00b80ee55f7e385ae48db5744c67ad50c92d2ebf"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.23",
+ "syn 2.0.26",
 ]
 
 [[package]]
@@ -73,9 +73,9 @@ checksum = "d468802bab17cbc0cc575e9b053f41e72aa36bfa6b7f55e3529ffa43161b97fa"
 
 [[package]]
 name = "axum"
-version = "0.6.18"
+version = "0.6.19"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f8175979259124331c1d7bf6586ee7e0da434155e4b2d48ec2c8386281d8df39"
+checksum = "a6a1de45611fdb535bfde7b7de4fd54f4fd2b17b1737c0a59b69bf9b92074b8c"
 dependencies = [
  "async-trait",
  "axum-core",
@@ -328,9 +328,9 @@ dependencies = [
 
 [[package]]
 name = "equivalent"
-version = "1.0.0"
+version = "1.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "88bffebc5d80432c9b140ee17875ff173a8ab62faad5b257da912bd2f6c1c0a1"
+checksum = "5443807d6dff69373d433ab9ef5378ad8df50ca6298caf15de6e52e24aaf54d5"
 
 [[package]]
 name = "fnv"
@@ -479,9 +479,9 @@ dependencies = [
 
 [[package]]
 name = "itoa"
-version = "1.0.8"
+version = "1.0.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "62b02a5381cc465bd3041d84623d0fa3b66738b52b8e2fc3bab8ad63ab032f4a"
+checksum = "af150ab688ff2122fcef229be89cb50dd66af9e01a4ff320cc137eecc9bacc38"
 
 [[package]]
 name = "jni"
@@ -634,9 +634,9 @@ checksum = "6877bb514081ee2a7ff5ef9de3281f14a4dd4bceac4c09388074a6b5df8a139a"
 
 [[package]]
 name = "minijinja"
-version = "1.0.3"
+version = "1.0.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f40870a194358132836de5c67e5038c279de3bff7a05f5da201ed13f6064b979"
+checksum = "1f75e6f2b03d9292f6e18aaeeda21d58c91f6943a58ea19a2e8672dcf9d91d5b"
 dependencies = [
  "memo-map",
  "self_cell",
@@ -889,7 +889,7 @@ checksum = "ec2e072ecce94ec471b13398d5402c188e76ac03cf74dd1a975161b23a3f6d9c"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.23",
+ "syn 2.0.26",
 ]
 
 [[package]]
@@ -922,18 +922,18 @@ dependencies = [
 
 [[package]]
 name = "proc-macro2"
-version = "1.0.63"
+version = "1.0.66"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7b368fba921b0dce7e60f5e04ec15e565b3303972b42bcfde1d0713b881959eb"
+checksum = "18fb31db3f9bddb2ea821cde30a9f70117e3f119938b5ee630b7403aa6e2ead9"
 dependencies = [
  "unicode-ident",
 ]
 
 [[package]]
 name = "quote"
-version = "1.0.29"
+version = "1.0.31"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "573015e8ab27661678357f27dc26460738fd2b6c86e46f386fde94cb5d913105"
+checksum = "5fe8a65d69dd0808184ebb5f836ab526bb259db23c657efa38711b1072ee47f0"
 dependencies = [
  "proc-macro2",
 ]
@@ -955,9 +955,9 @@ dependencies = [
 
 [[package]]
 name = "regex"
-version = "1.9.0"
+version = "1.9.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "89089e897c013b3deb627116ae56a6955a72b8bed395c9526af31c9fe528b484"
+checksum = "b2eae68fc220f7cf2532e4494aded17545fce192d59cd996e0fe7887f4ceb575"
 dependencies = [
  "aho-corasick",
  "memchr",
@@ -967,9 +967,9 @@ dependencies = [
 
 [[package]]
 name = "regex-automata"
-version = "0.3.0"
+version = "0.3.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fa250384981ea14565685dea16a9ccc4d1c541a13f82b9c168572264d1df8c56"
+checksum = "39354c10dd07468c2e73926b23bb9c2caca74c5501e38a35da70406f1d923310"
 dependencies = [
  "aho-corasick",
  "memchr",
@@ -978,9 +978,9 @@ dependencies = [
 
 [[package]]
 name = "regex-syntax"
-version = "0.7.3"
+version = "0.7.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2ab07dc67230e4a4718e70fd5c20055a4334b121f1f9db8fe63ef39ce9b8c846"
+checksum = "e5ea92a5b6195c6ef2a0295ea818b312502c6fc94dde986c5553242e18fd4ce2"
 
 [[package]]
 name = "rodio"
@@ -1009,15 +1009,15 @@ checksum = "08d43f7aa6b08d49f382cde6a7982047c3426db949b1424bc4b7ec9ae12c6ce2"
 
 [[package]]
 name = "rustversion"
-version = "1.0.13"
+version = "1.0.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dc31bd9b61a32c31f9650d18add92aa83a49ba979c143eefd27fe7177b05bd5f"
+checksum = "7ffc183a10b4478d04cbbbfc96d0873219d962dd5accaff2ffbd4ceb7df837f4"
 
 [[package]]
 name = "ryu"
-version = "1.0.14"
+version = "1.0.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fe232bdf6be8c8de797b22184ee71118d63780ea42ac85b61d1baa6d3b782ae9"
+checksum = "1ad4cc8da4ef723ed60bced201181d83791ad433213d8c24efffda1eec85d741"
 
 [[package]]
 name = "same-file"
@@ -1030,9 +1030,9 @@ dependencies = [
 
 [[package]]
 name = "scopeguard"
-version = "1.1.0"
+version = "1.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d29ab0c6d3fc0ee92fe66e2d99f700eab17a8d57d1c1d3b748380fb20baa78cd"
+checksum = "94143f37725109f92c262ed2cf5e59bce7498c01bcc1502d7b9afe439a4e9f49"
 
 [[package]]
 name = "self_cell"
@@ -1042,15 +1042,29 @@ checksum = "4c309e515543e67811222dbc9e3dd7e1056279b782e1dacffe4242b718734fb6"
 
 [[package]]
 name = "serde"
-version = "1.0.167"
+version = "1.0.171"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7daf513456463b42aa1d94cff7e0c24d682b429f020b9afa4f5ba5c40a22b237"
+checksum = "30e27d1e4fd7659406c492fd6cfaf2066ba8773de45ca75e855590f856dc34a9"
+dependencies = [
+ "serde_derive",
+]
+
+[[package]]
+name = "serde_derive"
+version = "1.0.171"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "389894603bd18c46fa56231694f8d827779c0951a667087194cf9de94ed24682"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.26",
+]
 
 [[package]]
 name = "serde_json"
-version = "1.0.100"
+version = "1.0.103"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0f1e14e89be7aa4c4b78bdbdc9eb5bf8517829a600ae8eaa39a6e1d960b5185c"
+checksum = "d03b412469450d4404fe8499a268edd7f8b79fecb074b0d812ad64ca21f4031b"
 dependencies = [
  "itoa",
  "ryu",
@@ -1059,9 +1073,9 @@ dependencies = [
 
 [[package]]
 name = "serde_path_to_error"
-version = "0.1.13"
+version = "0.1.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8acc4422959dd87a76cb117c191dcbffc20467f06c9100b76721dab370f24d3a"
+checksum = "4beec8bce849d58d06238cb50db2e1c417cfeafa4c63f692b15c82b7c80f8335"
 dependencies = [
  "itoa",
  "serde",
@@ -1132,6 +1146,7 @@ dependencies = [
  "minimp3",
  "regex",
  "rodio",
+ "serde",
  "tokio",
  "xxhash-rust",
 ]
@@ -1199,9 +1214,9 @@ dependencies = [
 
 [[package]]
 name = "syn"
-version = "2.0.23"
+version = "2.0.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "59fb7d6d8281a51045d62b8eb3a7d1ce347b76f312af50cd3dc0af39c87c1737"
+checksum = "45c3457aacde3c65315de5031ec191ce46604304d2446e803d71ade03308d970"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -1231,7 +1246,7 @@ checksum = "463fe12d7993d3b327787537ce8dd4dfa058de32fc2b195ef3cde03dc4771e8f"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.23",
+ "syn 2.0.26",
 ]
 
 [[package]]
@@ -1277,7 +1292,7 @@ checksum = "630bdcf245f78637c13ec01ffae6187cca34625e8c63150d424b59e55af2675e"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.23",
+ "syn 2.0.26",
 ]
 
 [[package]]
@@ -1288,9 +1303,9 @@ checksum = "7cda73e2f1397b1262d6dfdcef8aafae14d1de7748d66822d3bfeeb6d03e5e4b"
 
 [[package]]
 name = "toml_edit"
-version = "0.19.12"
+version = "0.19.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c500344a19072298cd05a7224b3c0c629348b78692bf48466c5238656e315a78"
+checksum = "f8123f27e969974a3dfba720fdb560be359f57b44302d280ba72e76a74480e8a"
 dependencies = [
  "indexmap",
  "toml_datetime",
@@ -1354,9 +1369,9 @@ checksum = "3528ecfd12c466c6f163363caf2d02a71161dd5e1cc6ae7b34207ea2d42d81ed"
 
 [[package]]
 name = "unicode-ident"
-version = "1.0.10"
+version = "1.0.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "22049a19f4a68748a168c0fc439f9516686aa045927ff767eca0a85101fb6e73"
+checksum = "301abaae475aa91687eb82514b328ab47a211a533026cb25fc3e519b86adfc3c"
 
 [[package]]
 name = "walkdir"
@@ -1404,7 +1419,7 @@ dependencies = [
  "once_cell",
  "proc-macro2",
  "quote",
- "syn 2.0.23",
+ "syn 2.0.26",
  "wasm-bindgen-shared",
 ]
 
@@ -1438,7 +1453,7 @@ checksum = "54681b18a46765f095758388f2d0cf16eb8d4169b639ab575a8f5693af210c7b"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.23",
+ "syn 2.0.26",
  "wasm-bindgen-backend",
  "wasm-bindgen-shared",
 ]
@@ -1624,9 +1639,9 @@ checksum = "1a515f5799fe4961cb532f983ce2b23082366b898e52ffbce459c86f67c8378a"
 
 [[package]]
 name = "winnow"
-version = "0.4.8"
+version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a9482fe6ceabdf32f3966bfdd350ba69256a97c30253dc616fe0005af24f164e"
+checksum = "81fac9742fd1ad1bd9643b991319f72dd031016d44b77039a26977eb667141e7"
 dependencies = [
  "memchr",
 ]
diff --git a/Cargo.toml b/Cargo.toml
index a0affa6..c0d135b 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -14,5 +14,6 @@ minijinja = { version = "1.0.3", features = ["loader"] }
 minimp3 = "0.5.1"
 regex = "1.9.0"
 rodio = "0.17.1"
+serde = { version = "1.0.171", features = ["derive"] }
 tokio = { version = "1.29.1", features = ["full"] }
 xxhash-rust = { version = "0.8.6", features = ["xxh3", "const_xxh3"] }
diff --git a/src/main.rs b/src/main.rs
index 16f4fad..7e48717 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -4,9 +4,10 @@ use axum_template::{engine::Engine, Key, RenderHtml};
 use minijinja::{path_loader, Environment};
 use std::net::SocketAddr;
 
-use std::sync::Arc;
-use std::thread;
-use std::time::Duration;
+use serde::Serialize;
+use std::sync::{Arc, Mutex};
+
+use vbplay::AudioThread;
 
 mod soundclips;
 mod vbplay;
@@ -17,6 +18,7 @@ type AppEngine = Engine<Environment<'static>>;
 pub struct AppState {
     pub engine: AppEngine,
     pub clips: Vec<soundclips::SoundClip>,
+    pub player: Arc<Mutex<AudioThread>>,
 }
 
 impl FromRef<AppState> for AppEngine {
@@ -25,32 +27,20 @@ impl FromRef<AppState> for AppEngine {
     }
 }
 
-fn play_liv() {
-    let file_name = "sounds/example/liv_aaaaaaaa.mp3";
-    let tx = vbplay::audio_thread();
-
-    tx.send(vbplay::Command::Play(file_name.into())).unwrap();
-
-    thread::sleep(Duration::from_secs(5));
-
-    tx.send(vbplay::Command::Stop).unwrap();
-}
-
-fn play_clip(file_name: &str) {
-    let tx = vbplay::audio_thread();
-    tx.send(vbplay::Command::Play(file_name.into())).unwrap();
-}
-
 #[tokio::main]
 async fn main() {
     let mut jinja = Environment::new();
     jinja.set_loader(path_loader("templates"));
     let template_engine = Engine::from(jinja);
 
+    let audio = vbplay::audio_thread();
+    let audio: Arc<Mutex<AudioThread>> = Arc::new(Mutex::new(audio));
+
     let state = AppState {
         engine: template_engine,
         clips: soundclips::scan_directory_for_clips("E:/sounds/soundboard", &["mp3"])
             .expect("No Soundclips found."),
+        player: audio,
     };
 
     // Set the address to run our application on
@@ -71,8 +61,15 @@ async fn main() {
         .unwrap();
 }
 
+#[derive(Serialize)]
+struct TemplateContext {
+    clips: Vec<soundclips::SoundClip>,
+}
+
 async fn home(engine: AppEngine, state: State<AppState>) -> impl axum::response::IntoResponse {
-    RenderHtml(Key("index.html".to_owned()), engine, ())
+    let clips = state.0.clone().clips; // this is not ideal.
+    let context = TemplateContext { clips: clips };
+    RenderHtml(Key("index.html".to_owned()), engine, context)
 }
 
 async fn play_handler(
@@ -85,7 +82,14 @@ async fn play_handler(
         .into_iter()
         .find(|s| hash == s.hash().to_string())
     {
-        play_clip(clip.hash());
+        let player = state.player.clone();
+        let full_file_name = &clip.full_file_name();
+        player
+            .lock()
+            .unwrap()
+            .send(vbplay::Command::Play(full_file_name.into()))
+            .unwrap();
+        //play_clip(&clip.full_file_name());
     }
     "".to_owned()
 }
diff --git a/src/soundclips.rs b/src/soundclips.rs
index 185db51..5555641 100644
--- a/src/soundclips.rs
+++ b/src/soundclips.rs
@@ -1,11 +1,13 @@
+use serde::Serialize;
 use std::ffi::OsStr;
 use std::fmt;
 use std::fs;
 
-#[derive(Debug, Clone)]
+#[derive(Debug, Clone, Serialize)]
 pub struct SoundClip {
     hash: String,
     file_name: String,
+    directory: String,
 }
 
 impl fmt::Display for SoundClip {
@@ -19,10 +21,11 @@ impl fmt::Display for SoundClip {
 }
 
 impl SoundClip {
-    pub fn new(file_name: String) -> Self {
+    pub fn new(file_name: String, directory: String) -> Self {
         Self {
             hash: encode_filename(&file_name),
             file_name: file_name,
+            directory: directory,
         }
     }
 
@@ -33,6 +36,10 @@ impl SoundClip {
     pub fn file_name(&self) -> &String {
         &self.file_name
     }
+
+    pub fn full_file_name(&self) -> String {
+        format!("{}/{}", self.directory, self.file_name)
+    }
 }
 
 fn encode_filename(file_name: &str) -> String {
@@ -58,7 +65,7 @@ pub fn scan_directory_for_clips(directory: &str, extensions: &[&str]) -> Option<
                             file_name() only returns None if the path ends in "..", which won't be the case for paths returned by read_dir.
                             to_str() only returns None if the file name isn't valid Unicode, which is quite rare on most modern file systems.
                              */
-                            let sound_clip = SoundClip::new(file_name);
+                            let sound_clip = SoundClip::new(file_name, directory.to_owned());
                             sound_clips.push(sound_clip);
                         }
                     }
diff --git a/templates/index.html b/templates/index.html
index e679415..423085b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,12 +3,14 @@
   <head>
     <title>Play</title>
     <script>
-      function play() {
-        fetch("/play/1");
+      function play(hash) {
+        fetch("/play/" + hash);
       }
     </script>
   </head>
   <body>
-    <button onclick="play()">Play</button>
+    {% for clip in clips %}
+    <button onclick="play('{{clip.hash}}')">{{clip.file_name}}</button><br />
+    {% endfor %}
   </body>
 </html>