diff --git a/src/main.rs b/src/main.rs
index 9448c41..55ea9d7 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -191,6 +191,8 @@ async fn main() -> tide::Result<()> {
     app.at("/previous").post(post_previous);
     app.at("/next").post(post_next);
 
+    app.at("/static").serve_dir("static/")?;
+
     app.listen("0.0.0.0:8080").await?;
     Ok(())
 }
diff --git a/static/favicon.png b/static/favicon.png
new file mode 100644
index 0000000..56442de
Binary files /dev/null and b/static/favicon.png differ
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..00491af
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,170 @@
+html {
+  height: 100%;
+}
+
+body {
+  font-family: sans;
+  background-color: #112;
+  color: #fff;
+  display: flex;
+  margin: 0;
+  height: 100%;
+}
+
+body > div {
+  padding: 1rem;
+}
+
+.browser {
+  flex: 1;
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+}
+
+a {
+  color: #fff;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+ul.queue {
+  margin-top: 1.0rem;
+}
+
+ul.queue li {
+  padding: 0 0.5rem;
+  border-radius: .25rem;
+  display: flex;
+  align-items: center;
+}
+
+ul.queue li.playing {
+  background-color: #334;
+}
+
+ul.breadcrumb {
+  display: flex;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+  list-style: none;
+  background-color: #334;
+  border-radius: .25rem;
+  padding: .75rem 1rem;
+}
+
+ul.breadcrumb li:not(:first-child)::before {
+  display: inline-block;
+  padding-left: .5rem;
+  padding-right: .1rem;
+  color: #6c757d;
+  content: "/";
+}
+
+ul.dir {
+  overflow: auto;
+  flex: 1;
+}
+
+ul.dir li {
+  cursor: pointer;
+  padding: .75rem .75rem;
+  border-radius: 3px;
+
+  display: flex;
+  align-items: center;
+}
+
+ul.dir li img {
+  width: 48px;
+  height: 48px;
+  object-fit: cover;
+}
+
+ul.dir li:hover {
+  background-color: #334;
+}
+
+ul.dir li .material-symbols-outlined {
+  margin-right: 0.75rem;
+  width: 24px;
+}
+
+.song__name {
+  font-weight: bold;
+}
+
+.albumart {
+  border-radius: 0.25rem;
+}
+
+.queue .albumart {
+  margin: 0.75rem;
+  margin-left: 0;
+  width: 48px;
+  height: 48px;
+}
+
+.albumart img {
+  border-radius: 0.25rem;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.player {
+  width: 25rem;
+}
+
+.player .nowplaying {
+  display: flex;
+  flex-flow: column;
+  background-color: #334;
+  border-radius: 0.25rem;
+  height: 9.5rem;
+}
+
+.player .controls {
+  display: flex;
+  justify-content: space-around;
+  padding: 0.5rem;
+}
+
+.player .control {
+  font-size: 40px;
+  cursor: pointer;
+}
+
+.player .current {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  padding: 0.5rem;
+  flex: 1;
+}
+
+.nowplaying .albumart {
+  margin-right: 1.0rem;
+  background-color: #445;
+  width: 80px;
+  height: 80px;
+  transition: transform 200ms ease-in-out;
+}
+.nowplaying .albumart:hover {
+  transform: scale(1.05);
+}
+
+.nowplaying .metadata {
+  flex: 1;
+}
+
+.nowplaying .idle {
+  font-weight: bold;
+  text-align: center;
+}
diff --git a/templates/index.html b/templates/index.html
index 9bc3a5a..d047704 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,181 +6,8 @@
     <script src="https://unpkg.com/htmx.org@1.9.0" integrity="sha384-aOxz9UdWG0yBiyrTwPeMibmaoq07/d3a96GCbb9x60f3mOt5zwkjdbcHFnKH8qls" crossorigin="anonymous"></script>
     <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0" />
-
-    <link href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABqklEQVRoQ+2XOy8FURSF720oJRK3U3lfohYahULjF6CU3Erjf0hoJH6BUqeWeIRGId5RoVMpaH1bLpkIkz17ztw5wz7JSiaZvfesddY+j6nXKj7qFedfcwFlO+gO/AcHbhE5pBR6R9ywMvYjrBMt5ALSHHEHFP3qLVR2C90kdpZTnt9SCD3wblnh6ldIp9fACF+Wlgo2XIBiKpOL2B34PmHeQt5Cihko+xzwRewO5GxTbyFvob/cQnKSL4J50ATjoAucgE2wA64S12n5YZcf92Ajz1WiBxa7YDaFzTXvGqC3HRONgG4Iyc/JZMapjEbANsRXMpKX8Ciu0xMQOTeQl5QoHNiAyKpRQBQOHEN+qsoCLiAvW6ZlDJJ0b0n8LceyjR5QbMZIQrbeF2Puj2kWAVtUahlIPJLTb8hLTbEIkFN3z0BknZw1Q15wAVLwEExnICNtMwCeM+SoQi0OSOE+sA/GFF95JWYOyO4VfFgFCBHNXeiJuAVwFpx5u2AeAZ+clniQdSE30VEgpC/BEZAbqThQ2AghoDBymsIuQDNLRca4A0XOrqZ25R14B64XVDFuhNlbAAAAAElFTkSuQmCC" rel="icon" type="image/png">
-
-    <style>
-      html {
-        height: 100%;
-      }
-
-      body {
-        font-family: sans;
-        background-color: #112;
-        color: #fff;
-        display: flex;
-        margin: 0;
-        height: 100%;
-      }
-
-      body > div {
-        padding: 1rem;
-      }
-
-      .browser {
-        flex: 1;
-        display: flex;
-        flex-flow: column;
-        height: 100%;
-      }
-
-      a {
-        color: #fff;
-        font-weight: bold;
-        text-decoration: none;
-      }
-
-      ul {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-      }
-
-      ul.queue {
-        margin-top: 1.0rem;
-      }
-
-      ul.queue li {
-        padding: 0 0.5rem;
-        border-radius: .25rem;
-        display: flex;
-        align-items: center;
-      }
-
-      ul.queue li.playing {
-        background-color: #334;
-      }
-
-      ul.breadcrumb {
-        display: flex;
-        margin-bottom: 1rem;
-        flex-wrap: wrap;
-        list-style: none;
-        background-color: #334;
-        border-radius: .25rem;
-        padding: .75rem 1rem;
-      }
-
-      ul.breadcrumb li:not(:first-child)::before {
-        display: inline-block;
-        padding-left: .5rem;
-        padding-right: .1rem;
-        color: #6c757d;
-        content: "/";
-      }
-
-      ul.dir {
-        overflow: auto;
-        flex: 1;
-      }
-
-      ul.dir li {
-        cursor: pointer;
-        padding: .75rem .75rem;
-        border-radius: 3px;
-
-        display: flex;
-        align-items: center;
-      }
-
-      ul.dir li img {
-        width: 48px;
-        height: 48px;
-        object-fit: cover;
-      }
-
-      ul.dir li:hover {
-        background-color: #334;
-      }
-
-      ul.dir li .material-symbols-outlined {
-        margin-right: 0.75rem;
-        width: 24px;
-      }
-
-      .song__name {
-        font-weight: bold;
-      }
-
-      .albumart {
-        border-radius: 0.25rem;
-      }
-
-      .queue .albumart {
-        margin: 0.75rem;
-        margin-left: 0;
-        width: 48px;
-        height: 48px;
-      }
-
-      .albumart img {
-        border-radius: 0.25rem;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
-      .player {
-        width: 25rem;
-      }
-
-      .player .nowplaying {
-        display: flex;
-        flex-flow: column;
-        background-color: #334;
-        border-radius: 0.25rem;
-        height: 9.5rem;
-      }
-
-      .player .controls {
-        display: flex;
-        justify-content: space-around;
-        padding: 0.5rem;
-      }
-
-      .player .control {
-        font-size: 40px;
-        cursor: pointer;
-      }
-
-      .player .current {
-        display: flex;
-        flex-flow: row;
-        align-items: center;
-        padding: 0.5rem;
-        flex: 1;
-      }
-
-      .nowplaying .albumart {
-        margin-right: 1.0rem;
-        background-color: #445;
-        width: 80px;
-        height: 80px;
-        transition: transform 200ms ease-in-out;
-      }
-      .nowplaying .albumart:hover {
-        transform: scale(1.05);
-      }
-
-      .nowplaying .metadata {
-        flex: 1;
-      }
-
-      .nowplaying .idle {
-        font-weight: bold;
-        text-align: center;
-      }
-    </style>
+    <link rel="stylesheet" href="/static/style.css">
+    <link href="/static/favicon.png" rel="icon" type="image/png">
   </head>
 
   <body hx-ext="sse" sse-connect="/sse">