diff --git a/web/static/css/style.css b/web/static/css/style.css
index 869a7aa..1c276bd 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -44,6 +44,19 @@ h1, h2, h3, h4 {
   color: #ddd;
 }
 
+select {
+  border: none;
+  color: inherit;
+  appearance: none;
+
+  /* Custom caret */
+  background-color: transparent;
+  background-image: url("data:image/svg+xml;utf8,<svg fill='rgb(187, 187, 187)' height='24' viewBox='0 1 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
+  background-repeat: no-repeat;
+  background-position-x: 100%;
+  padding-right: 1.2rem;
+}
+
 .container {
   height: 100%;
   width: 100%;
diff --git a/web/static/js/videoQuality.js b/web/static/js/videoQuality.js
index af4060f..1959b88 100644
--- a/web/static/js/videoQuality.js
+++ b/web/static/js/videoQuality.js
@@ -1,8 +1,9 @@
-document.getElementsByName("quality").forEach(function (elem) {
-    elem.onclick = function () {
-        // Restart the connection with a new quality
-        peerConnection.createOffer({"iceRestart": true}).then(offer => {
-            return peerConnection.setLocalDescription(offer)
-        }).catch(console.log)
-    }
+document.getElementById("quality").addEventListener("change", (event) => {
+    console.log(`Stream quality changed to ${event.target.value}`)
+
+    // Restart the connection with a new quality
+    // FIXME: set quality
+    peerConnection.createOffer({ "iceRestart": true }).then(offer => {
+        return peerConnection.setLocalDescription(offer)
+    }).catch(console.log)
 })
diff --git a/web/template/viewer.html b/web/template/viewer.html
index d2f9bb1..683d41f 100644
--- a/web/template/viewer.html
+++ b/web/template/viewer.html
@@ -6,22 +6,19 @@
       <video id="viewer" poster="/static/img/no_stream.svg" muted controls autoplay></video>
     </div>
 
-    <div class="quality-selector">
-      <form name="quality_form">
-        <input type="radio" id="quality_source" name="quality" value="" checked>
-        <label for="quality_source">Source</label>
-        <input type="radio" id="quality_720p" name="quality" value="@720p">
-        <label for="quality_720p">720p</label>
-        <input type="radio" id="quality_480p" name="quality" value="@480p">
-        <label for="quality_480p">480p</label>
-        <input type="radio" id="quality_240p" name="quality" value="@240p">
-        <label for="quality_240p">240p</label>
-      </form>
-    </div>
-
-    <!-- Links under video -->
+    <!-- Links and settings under video -->
     <p>
-      <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-box-arrow-up-right" fill="#d7d7d7" xmlns="http://www.w3.org/2000/svg">
+      <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-aspect-ratio-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13zm1 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 1 0V5h2.5a.5.5 0 0 0 0-1h-3zm11 8a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-1 0V11h-2.5a.5.5 0 0 0 0 1h3z"/>
+      </svg>
+      <select id="quality">
+        <option value="">Source</option>
+        <option value="@720p">720p</option>
+        <option value="@480p">480p</option>
+        <option value="@240p">240p</option>
+      </select>
+
+      <svg class="ml-1" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-box-arrow-up-right" fill="#d7d7d7" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd"
           d="M1.5 13A1.5 1.5 0 0 0 3 14.5h8a1.5 1.5 0 0 0 1.5-1.5V9a.5.5 0 0 0-1 0v4a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 0 0-1H3A1.5 1.5 0 0 0 1.5 5v8zm7-11a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V2.5H9a.5.5 0 0 1-.5-.5z" />
         <path fill-rule="evenodd"