diff --git a/.gitignore b/.gitignore
index aca1950..9e9a72e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+sanic
 result
 
 # Created by https://www.toptal.com/developers/gitignore/api/linux,windows,macos,vim,goland+all,go,direnv
diff --git a/mpd.go b/mpd.go
deleted file mode 100644
index cc76926..0000000
--- a/mpd.go
+++ /dev/null
@@ -1,60 +0,0 @@
-package main
-
-import (
-	"fmt"
-	"github.com/fhs/gompd/v2/mpd"
-	"log"
-	"time"
-)
-
-func main() {
-	w, err := mpd.NewWatcher("tcp", ":6600", "")
-	if err != nil {
-		log.Fatalln(err)
-	}
-	defer w.Close()
-
-	// Log errors.
-	go func() {
-		for err := range w.Error {
-			log.Println("Error:", err)
-		}
-	}()
-
-	// Log events.
-	go func() {
-		for subsystem := range w.Event {
-			log.Println("Changed subsystem:", subsystem)
-		}
-	}()
-
-	// Do other stuff...
-	time.Sleep(3 * time.Minute)
-}
-
-func main2() {
-	// Connect to MPD server
-	conn, err := mpd.Dial("tcp", "localhost:6600")
-	if err != nil {
-		log.Fatalln(err)
-	}
-	defer conn.Close()
-
-	// Loop printing the current status of MPD
-	for {
-		status, err := conn.Status()
-		if err != nil {
-			log.Fatalln(err)
-		}
-		song, err := conn.CurrentSong()
-		if err != nil {
-			log.Fatalln(err)
-		}
-		if status["state"] == "play" {
-			fmt.Println(fmt.Sprintf("%s - %s", song["Artist"], song["Title"]))
-		} else {
-			fmt.Println(fmt.Sprintf("State: %s", status["state"]))
-		}
-		time.Sleep(1 * time.Second)
-	}
-}
diff --git a/static/index.html b/static/index.html
index d55d047..33702d8 100644
--- a/static/index.html
+++ b/static/index.html
@@ -4,62 +4,16 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>sanic :: paused</title>
-    <link rel="stylesheet" type="text/css" href="style.css" />
-    <style>
-/* generic styles */
-* {
-  margin: 0;
-}
-
-header, footer, main, section {
-  border: 1px solid red;
-  margin: 1px;
-  padding: 1px;
-}
-
-/* tab controls */
-.tabs {
-  overflow: hidden; /* what does this do? */
-}
-.tabs button {
-  float: left;
-}
-.tabs button:hover {
-  background-color: #ddd;
-}
-.tabs button.active {
-  background-color: #ccc;
-}
-.tab {
-  display: none;
-}
-
-/* table */
-thead {
-  background-color: #ccc;
-}
-
-/* player controls */
-#player-controls {
-  border: 1px solid blue;
-}
-    </style>
-    <script>
-      function switchTab(event, tabname) {
-        document.getElementsByClassName("tab").forEach((tab) => tab.style.display = "none");
-        document.getElementsByClassName("tablink").forEach((but) => but.className = but.className.replace(" active", ""));
-        document.getElementById(tabname).style.display = "block";
-        event.currentTarget.className += " active";
-      }
-    </script>
+    <link rel="stylesheet" type="text/css" href="/style.css" />
   </head>
   <body>
     <!-- top navigation and playback control -->
     <header id="top-nav">
-      <div id="player-controls">
-        <div>
-          <input type="text" value="artist - track" />
-        </div>
+      <div class="navbox box">
+        <button>sanic</button>
+        <button>Config</button>
+      </div>
+      <div class="navbox box">
         <div>
           <button>⏮️</button>
           <button>⏯️</button>
@@ -67,13 +21,26 @@ thead {
           <button>⏭️</button>
         </div>
         <div>
-          <input type="range" id="track-progress" name="track-progress" min="0" max="100" />
+          <label for="progress"></label>
+          <input type="range" id="progress" name="progress" min="0" max="100" />
+        </div>
+      </div>
+      <div class="navbox box">
+        <p>[ ] repeat</p>
+        <p>[ ] shuffle</p>
+        <label for="volume"></label>
+        <input id="volume" name="volume" type="range" min="1" max="100" />
+      </div>
+      <div class="navbox box">
+        <div>
+          <label for="track"></label>
+          <input id="track" name="track" type="text" value="artist - track" />
         </div>
       </div>
     </header>
 
     <main>
-      <section id="playlist">
+      <section id="playlist" class="box">
         <table>
           <thead>
             <tr>
@@ -95,7 +62,7 @@ thead {
           </tbody>
         </table>
       </section>
-      <section id="db">
+      <section id="db" class="box">
         <!-- tabs -->
         <div id="tabs">
           <button class="tablink active" onclick="switchTab(event, 'folders')">Folders</button>
@@ -150,10 +117,10 @@ thead {
     </main>
 
     <!-- informational footer -->
-    <footer id="bottom">
+    <footer id="bottom" class="box">
       <p>sanic mpd web ui - by XenGi and coon &copy; 2023</p>
     </footer>
-    <script src="index.js"></script>
+    <script src="/index.js"></script>
   </body>
 </html>
 
diff --git a/static/index.js b/static/index.js
index e69de29..2872fd8 100644
--- a/static/index.js
+++ b/static/index.js
@@ -0,0 +1,12 @@
+function switchTab(event, tabname) {
+  for (let tab in document.getElementsByClassName("tab")) {
+    tab.style.display = "none";
+  }
+  for (let button in document.getElementsByClassName("tablink")) {
+    button.className = button.className.replace(" active", "");
+  }
+
+
+  document.getElementById(tabname).style.display = "block";
+  event.currentTarget.className += " active";
+}
diff --git a/static/index2.html b/static/index2.html
new file mode 100644
index 0000000..0896302
--- /dev/null
+++ b/static/index2.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+  body {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 128px 1fr 1fr 32px;
+    gap: 0 0;
+    grid-auto-flow: row;
+    grid-template-areas: "header" "playlist" "db" "footer";
+  }
+
+  header {
+    display: grid;
+    grid-template-columns: 128px 1fr 1fr 1fr;
+    grid-template-rows: 1fr;
+    gap: 0 0;
+    grid-auto-flow: row;
+    grid-template-areas: "config playback-controls playlist-controls track-info";
+    grid-area: header;
+  }
+
+  section.playlist {
+    grid-area: playlist;
+  }
+
+  header .config {
+    grid-area: config;
+  }
+
+  header .playback-controls {
+    grid-area: playback-controls;
+  }
+
+  header .playlist-controls {
+    grid-area: playlist-controls;
+  }
+
+  header .track-info {
+    grid-area: track-info;
+  }
+
+  footer {
+    grid-area: footer;
+  }
+
+  section.db {
+    display: grid;
+    grid-template-columns: 0.7fr 1.3fr;
+    grid-template-rows: 1fr;
+    gap: 0 0;
+    grid-auto-flow: row;
+    grid-template-areas: "tabs result";
+    grid-area: db;
+  }
+
+  .db .tabs {
+    grid-area: tabs;
+  }
+
+  .db .result {
+    grid-area: result;
+  }
+</style>
+</head>
+<body>
+  <header class="header">
+    <div class="config">
+      <button disabled>sanic</button>
+      <button>Config</button>
+    </div>
+    <div class="playback-controls">
+      <div>
+        <button>⏮️</button>
+        <button>⏯️</button>
+        <button>⏹️</button>
+        <button>⏭️</button>
+      </div>
+      <label for="progress"></label>
+      <input type="range" id="progress" name="progress" min="0" max="100" />
+    </div>
+    <div class="playlist-controls">
+      <div>
+        <label for="repeat">repeat</label>
+        <input type="checkbox" id="repeat" name="repeat" />
+        <label for="shuffle">shuffle</label>
+        <input type="checkbox" id="shuffle" name="shuffle" />
+      </div>
+      <div>
+        <label for="fade">fade</label>
+        <button>-</button>
+        <input type="number" id="fade" name="fade" min="0" />
+        <button>+</button>
+      </div>
+      <label for="volume"></label>
+      <input id="volume" name="volume" type="range" min="1" max="100" />
+    </div>
+    <div class="track-info">
+      <p>Now playing: 00:00:00/100:00:00</p>
+
+      <label for="track">track</label>
+      <input type="text" id="track" name="track" disabled />
+    </div>
+  </header>
+  <section class="playlist">
+    <table>
+      <thead>
+        <tr>
+          <td>Artist</td>
+          <td>Album</td>
+          <td>Track</td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>The Beatles</td>
+          <td>Some Album</td>
+          <td>Yellow Submarine</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+  <section class="db">
+    <div class="tabs"></div>
+    <div class="result"></div>
+  </section>
+  <footer class="footer"></footer>
+</body>
+</html>
diff --git a/static/style.css b/static/style.css
index e69de29..587a203 100644
--- a/static/style.css
+++ b/static/style.css
@@ -0,0 +1,70 @@
+:root {
+  --main-bg-color: #ddd;
+  --main-color: #333;
+}
+
+body {
+  background-color: #000;
+  color: #fff;
+  min-height: 100vh;
+  margin: 0;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+
+header {
+  min-height:64px;
+  background-color: var(--main-color);
+  border: 1px solid var(--main-bg-color);
+}
+
+footer {
+  min-height:24px;
+}
+
+.box {
+  background-color: var(--main-color);
+  border: 1px solid var(--main-bg-color);
+}
+
+header .box {
+  float: left;
+  padding: 1em;
+  height: 60px;
+}
+
+main {
+  clear: left;
+}
+
+/* tab controls */
+.tabs {
+  overflow: hidden; /* what does this do? */
+}
+.tabs button {
+  float: left;
+}
+.tabs button:hover {
+  background-color: #ddd;
+}
+.tabs button.active {
+  background-color: #ccc;
+}
+.tab {
+  display: none;
+}
+
+/* table */
+thead {
+  background-color: #ccc;
+}
+
+/* navigation */
+
+
+
+
+/* player controls */
+#player-controls {
+  border: 1px solid blue;
+}
