diff --git a/Cargo.lock b/Cargo.lock
index 0cccc94..f9bb4e1 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -665,6 +665,7 @@ dependencies = [
  "async-std",
  "infer 0.13.0",
  "mpdrs",
+ "percent-encoding",
  "serde",
  "serde_qs 0.12.0",
  "tide",
diff --git a/Cargo.toml b/Cargo.toml
index 16f9743..a61d26a 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -12,6 +12,7 @@ askama_tide = "0.15.0"
 async-std = { version = "1.12.0", features = ["attributes"] }
 infer = { version = "0.13.0", default-features = false }
 mpdrs = "0.1.0"
+percent-encoding = "2.2.0"
 serde = { version = "1.0.160", features = ["derive"] }
 serde_qs = "0.12.0"
 tide = "0.16.0"
diff --git a/src/main.rs b/src/main.rs
index a4b9c72..566c79a 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -1,6 +1,7 @@
 use std::path::Path;
 
 use askama::Template;
+use percent_encoding::percent_decode_str;
 use serde::Deserialize;
 
 mod mpd;
@@ -74,10 +75,11 @@ struct BrowserTemplate {
 
 async fn get_browser(req: tide::Request<()>) -> tide::Result {
     let query: IndexQuery = req.query()?;
-    let entries = mpd::ls(&query.path)?;
+    let path = percent_decode_str(&query.path).decode_utf8_lossy();
+    let entries = mpd::ls(&path)?;
 
     let template = BrowserTemplate {
-        path: Path::new(&query.path)
+        path: Path::new(&*path)
             .iter()
             .map(|s| s.to_string_lossy().to_string())
             .collect(),
@@ -94,7 +96,8 @@ struct PostQueueQuery {
 
 async fn post_queue(req: tide::Request<()>) -> tide::Result {
     let query: PostQueueQuery = req.query()?;
-    mpd::connect()?.add(&query.path)?;
+    let path = percent_decode_str(&query.path).decode_utf8_lossy();
+    mpd::connect()?.add(&path)?;
     Ok("".into())
 }
 
@@ -141,7 +144,8 @@ async fn post_queue_move(mut req: tide::Request<()>) -> tide::Result {
 
 async fn get_art(req: tide::Request<()>) -> tide::Result {
     let query: IndexQuery = req.query()?;
-    let resp = if let Ok(art) = mpd::connect()?.albumart(&query.path) {
+    let path = percent_decode_str(&query.path).decode_utf8_lossy();
+    let resp = if let Ok(art) = mpd::connect()?.albumart(&path) {
         let mime = infer::get(&art)
             .map(|k| k.mime_type())
             .unwrap_or("application/octet-stream");
diff --git a/templates/browser.html b/templates/browser.html
index 37bee03..499b3f1 100644
--- a/templates/browser.html
+++ b/templates/browser.html
@@ -15,10 +15,11 @@
     {{ component }}
     {% else %}
     <a
-      href="/?path={{ path[..i + 1].join("/") }}" 
-      hx-replace-url="/?path={{ path[..i + 1].join("/") }}" 
+      {% let encoded = path[..i + 1].join("/")|urlencode %}
+      href="/?path={{ encoded }}" 
+      hx-replace-url="/?path={{ encoded }}" 
       hx-get="/browser"
-      hx-vals='{"path": "{{ path[..i + 1].join("/") }}"}'
+      hx-vals='{"path": "{{ encoded }}"}'
       hx-target=".browser"
     >{{ component }}</a>
     {% endif %}
@@ -49,20 +50,20 @@
   {% when mpd::Entry::Directory with { name, path } %}
   <li
     hx-get="/browser"
-    hx-vals='{"path": "{{ path }}"}'
-    hx-replace-url="/?path={{ path }}"
+    hx-vals='{"path": "{{ path|urlencode }}"}'
+    hx-replace-url="/?path={{ path|urlencode }}"
     hx-target=".browser"
     role="link"
   >
     <span class="material-symbols-outlined" title="Directory">folder</span>
     <div class="song__name">
-      <a href="/?path={{ path }}" hx-get="/browser" hx-sync="closest li:abort">
+      <a href="/?path={{ path|urlencode }}" hx-get="/browser" hx-sync="closest li:abort">
         {{ name }}
       </a>
     </div>
   </li>
   {% when mpd::Entry::Playlist with { name, path } %}
-  <li hx-post="/queue?path={{ path }}" hx-swap="none" role="button" >
+  <li hx-post="/queue?path={{ path|urlencode }}" hx-swap="none" role="button" >
     <span class="material-symbols-outlined" title="Playlist">playlist_play</span>
     <div class="song">
       <div class="song__name">{{ name }}</div>
diff --git a/templates/player.html b/templates/player.html
index 66a8aab..1eeb8b9 100644
--- a/templates/player.html
+++ b/templates/player.html
@@ -5,9 +5,9 @@
   <div class="current">
     {% if let Some(song) = song %}
     <div class="albumart">
-      <a href="/art?path={{ song.file }}" target="_blank">
+      <a href="/art?path={{ song.file|urlencode }}" target="_blank">
         <img 
-          src="/art?path={{ song.file }}"
+          src="/art?path={{ song.file|urlencode }}"
           onerror="this.style.opacity = 0"
           alt="Album art"
           title="Album art"
diff --git a/templates/queue.html b/templates/queue.html
index bb38c5f..82cef0b 100644
--- a/templates/queue.html
+++ b/templates/queue.html
@@ -14,7 +14,7 @@
   <li {% if item.playing %}class="playing"{% endif %}>
     <div class="albumart">
       <img
-        src="/art?path={{ item.file }}"
+        src="/art?path={{ item.file|urlencode }}"
         onerror="this.style.opacity = 0"
         alt="Album art"
         title="Album art"