diff --git a/htdocs/index.html b/htdocs/index.html
index 255d3259..44b414d3 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -168,23 +168,32 @@
                         </div>
                     </div>
                 </div>
-                <div class="openwebrx-panel" id="openwebrx-panel-metadata" data-panel-name="metadata" data-panel-pos="left" data-panel-order="1" data-panel-size="615,36">
-                </div>
-                <div class="openwebrx-panel" id="openwebrx-panel-metadata-dmr" data-panel-name="metadata-dmr" data-panel-pos="left" data-panel-order="2" data-panel-size="300,220">
-                    <div class="openwebrx-dmr-panel">
-                        <div class="openwebrx-dmr-timeslot-panel">
-                            <div>Timeslot 1</div>
-                            <div class="openwebrx-dmr-user-image"></div>
-                            <div class="openwebrx-dmr-id"></div>
-                            <div class="openwebrx-dmr-name"></div>
-                            <div class="openwebrx-dmr-talkgroup"></div>
+                <div class="openwebrx-panel openwebrx-meta-panel" id="openwebrx-panel-metadata-ysf" data-panel-name="metadata-ysf" data-panel-pos="left" data-panel-order="2" data-panel-size="155,220">
+                    <div class="openwebrx-meta-frame">
+                        <div class="openwebrx-meta-slot">
+                            <div class="openwebrx-ysf-mode openwebrx-meta-autoclear"></div>
+                            <div class="openwebrx-meta-user-image"></div>
+                            <div class="openwebrx-ysf-source openwebrx-meta-autoclear"></div>
+                            <div class="openwebrx-ysf-up openwebrx-meta-autoclear"></div>
+                            <div class="openwebrx-ysf-down openwebrx-meta-autoclear"></div>
                         </div>
-                        <div class="openwebrx-dmr-timeslot-panel">
+                    </div>
+                </div>
+                <div class="openwebrx-panel openwebrx-meta-panel" id="openwebrx-panel-metadata-dmr" data-panel-name="metadata-dmr" data-panel-pos="left" data-panel-order="2" data-panel-size="300,220">
+                    <div class="openwebrx-meta-frame">
+                        <div class="openwebrx-meta-slot openwebrx-dmr-timeslot-panel">
+                            <div>Timeslot 1</div>
+                            <div class="openwebrx-meta-user-image"></div>
+                            <div class="openwebrx-dmr-id openwebrx-meta-autoclear"></div>
+                            <div class="openwebrx-dmr-name openwebrx-meta-autoclear"></div>
+                            <div class="openwebrx-dmr-target openwebrx-meta-autoclear"></div>
+                        </div>
+                        <div class="openwebrx-meta-slot openwebrx-dmr-timeslot-panel">
                             <div>Timeslot 2</div>
-                            <div class="openwebrx-dmr-user-image"></div>
-                            <div class="openwebrx-dmr-id"></div>
-                            <div class="openwebrx-dmr-name"></div>
-                            <div class="openwebrx-dmr-talkgroup"></div>
+                            <div class="openwebrx-meta-user-image"></div>
+                            <div class="openwebrx-dmr-id openwebrx-meta-autoclear"></div>
+                            <div class="openwebrx-dmr-name openwebrx-meta-autoclear"></div>
+                            <div class="openwebrx-dmr-target openwebrx-meta-autoclear"></div>
                         </div>
                     </div>
                 </div>
diff --git a/htdocs/openwebrx.css b/htdocs/openwebrx.css
index 9c4e0d86..0654e523 100644
--- a/htdocs/openwebrx.css
+++ b/htdocs/openwebrx.css
@@ -928,12 +928,12 @@ img.openwebrx-mirror-img
     border-color: Red;
 }
 
-#openwebrx-panel-metadata-dmr {
+.openwebrx-meta-panel {
     background: none;
     padding: 0;
 }
 
-.openwebrx-dmr-panel {
+.openwebrx-meta-frame {
     height: 200px;
 
     outline: 1px solid #111;
@@ -942,7 +942,7 @@ img.openwebrx-mirror-img
     background: #333;
 }
 
-.openwebrx-dmr-timeslot-panel {
+.openwebrx-meta-slot {
     width: 133px;
     height: 194px;
     float: left;
@@ -959,20 +959,20 @@ img.openwebrx-mirror-img
     border-radius: 2px;
 }
 
-.openwebrx-dmr-timeslot-panel.active {
+.openwebrx-meta-slot.active {
     background-color: #95bbdf;
 }
 
-.openwebrx-dmr-timeslot-panel:last-child {
+.openwebrx-meta-slot:last-child {
     margin-right: 0;
 }
 
-.openwebrx-dmr-timeslot-panel.active .openwebrx-dmr-user-image {
+.openwebrx-meta-slot.active .openwebrx-meta-user-image {
     background-image: url("gfx/openwebrx-user.png");
     width:133px;
     height:133px;
 }
 
-.openwebrx-dmr-timeslot-panel {
+.openwebrx-meta-slot {
     text-align: center;
 }
diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js
index b1e47be2..83b2bc13 100644
--- a/htdocs/openwebrx.js
+++ b/htdocs/openwebrx.js
@@ -620,9 +620,7 @@ function demodulator_analog_replace(subtype, for_digital)
 	demodulator_add(new demodulator_default_analog(temp_offset,subtype));
 	demodulator_buttons_update();
 	clear_metadata();
-	if (subtype == "dmr") {
-	    toggle_panel("openwebrx-panel-metadata-dmr", true);
-	}
+    toggle_panel("openwebrx-panel-metadata-" + subtype, true);
 }
 
 function demodulator_set_offset_frequency(which,to_what)
@@ -1313,51 +1311,62 @@ function on_ws_recv(evt)
 }
 
 function update_metadata(meta) {
-    var update = function(_, el) {
-        el.innerHTML = "";
-    };
     if (meta.protocol) switch (meta.protocol) {
         case 'DMR':
             if (meta.slot) {
-                el = $(".openwebrx-dmr-panel .openwebrx-dmr-timeslot-panel").get(meta.slot);
+                var el = $("#openwebrx-panel-metadata-dmr .openwebrx-dmr-timeslot-panel").get(meta.slot);
                 var id = "";
                 var name = "";
-                var talkgroup = "";
+                var target = "";
                 if (meta.type && meta.type != "data") {
                     id = (meta.additional && meta.additional.callsign) || meta.source || "";
                     name = (meta.additional && meta.additional.fname) || "";
-                    talkgroup = meta.target || "";
+                    if (meta.type == "group") target = "Talkgroup: ";
+                    if (meta.type == "direct") tareget = "Direct: ";
+                    target += meta.target || "";
                     $(el).addClass("active");
                 } else {
                     $(el).removeClass("active");
                 }
                 $(el).find(".openwebrx-dmr-id").text(id);
                 $(el).find(".openwebrx-dmr-name").text(name);
-                $(el).find(".openwebrx-dmr-talkgroup").text(talkgroup);
+                $(el).find(".openwebrx-dmr-target").text(target);
 
             }
             break;
         case 'YSF':
-            var strings = [];
-            if (meta.mode) strings.push("Mode: " + meta.mode);
-            if (meta.source) strings.push("Source: " + meta.source);
-            if (meta.target) strings.push("Destination: " + meta.target);
-            if (meta.up) strings.push("Up: " + meta.up);
-            if (meta.down) strings.push("Down: " + meta.down);
-            var html = strings.join(' ');
-            update = function(_, el) {
-                el.innerHTML = html;
+            var el = $("#openwebrx-panel-metadata-ysf");
+
+            var mode = " "
+            var source = "";
+            var up = "";
+            var down = "";
+            if (meta.mode && meta.mode != "") {
+                mode = "Mode: " + meta.mode;
+                source = meta.source || "";
+                up = meta.up ? "Up: " + meta.up : "";
+                down = meta.down ? "Down: " + meta.down : "";
+                $(el).find(".openwebrx-meta-slot").addClass("active");
+            } else {
+                $(el).find(".openwebrx-meta-slot").removeClass("active");
             }
-            $('.openwebrx-panel[data-panel-name="metadata"]').each(update);
-            toggle_panel("openwebrx-panel-metadata", true);
+            $(el).find(".openwebrx-ysf-mode").text(mode);
+            $(el).find(".openwebrx-ysf-source").text(source);
+            $(el).find(".openwebrx-ysf-up").text(up);
+            $(el).find(".openwebrx-ysf-down").text(down);
+
             break;
+
     }
 
 }
 
 function clear_metadata() {
-    toggle_panel("openwebrx-panel-metadata", false);
-    toggle_panel("openwebrx-panel-metadata-dmr", false);
+    $(".openwebrx-meta-panel").each(function(_, p){
+        toggle_panel(p.id, false);
+    });
+    $(".openwebrx-meta-panel .openwebrx-meta-autoclear").text("");
+    $(".openwebrx-meta-panel .active").removeClass("active");
 }
 
 function add_problem(what)
@@ -2407,6 +2416,7 @@ function pop_bottommost_panel(from)
 function toggle_panel(what, on)
 {
     var item=e(what);
+    if (!item) return;
     if(typeof on !== "undefined") 
     {
         if(item.openwebrxHidden && !on) return;
@@ -2470,7 +2480,7 @@ function place_panels(function_apply)
 	for(i=0;i<plist.length;i++)
 	{
 		c=plist[i];
-		if(c.className=="openwebrx-panel")
+		if(c.className.indexOf("openwebrx-panel") >= 0)
 		{
 			if(c.openwebrxHidden)
 			{