diff --git a/web/gui/src/main/webapp/app/view/settings/settings.css b/web/gui/src/main/webapp/app/view/settings/settings.css
index 4ddf491..b6baca7 100644
--- a/web/gui/src/main/webapp/app/view/settings/settings.css
+++ b/web/gui/src/main/webapp/app/view/settings/settings.css
@@ -43,10 +43,10 @@
     cursor: pointer;
 }
 
-#settings-details-panel .top .settings-title {
+#settings-details-panel .top .settings-title-1 {
     width: 90%;
-    height: 62px;
-    font-size: 20pt;
+    height: 28px;
+    font-size: 14pt;
     font-weight: lighter;
     overflow: hidden;
     white-space: nowrap;
@@ -55,6 +55,18 @@
     margin-bottom: 5px;
 }
 
+#settings-details-panel .top .settings-title-2 {
+    width: 90%;
+    height: 52px;
+    font-size: 20pt;
+    font-weight: lighter;
+    overflow: hidden;
+    white-space: nowrap;
+    padding: 0 6px 0 2px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
 #settings-details-panel td.label {
     font-weight: bold;
     text-align: right;
diff --git a/web/gui/src/main/webapp/app/view/settings/settings.html b/web/gui/src/main/webapp/app/view/settings/settings.html
index 7903977..8e23617 100644
--- a/web/gui/src/main/webapp/app/view/settings/settings.html
+++ b/web/gui/src/main/webapp/app/view/settings/settings.html
@@ -15,7 +15,7 @@
             <table>
                 <tr>
                     <td colId="component" sortable col-width="260px">Component </td>
-                    <td colId="id" sortable col-width="260px">Property </td>
+                    <td colId="prop" sortable col-width="260px">Property </td>
                     <td colId="type" sortable col-width="100px">Type </td>
                     <td colId="value" sortable col-width="100px">Value </td>
                     <td colId="desc">Description </td>
@@ -36,7 +36,7 @@
                     ng-class="{selected: prop.id === selId}"
                     ng-repeat-complete row-id="{{prop.id}}">
                     <td>{{prop.component}}</td>
-                    <td>{{prop.id}}</td>
+                    <td>{{prop.prop}}</td>
                     <td>{{prop.type}}</td>
                     <td ng-class="{notdef: prop.value !== prop.defValue}">
                         {{prop.value}}
diff --git a/web/gui/src/main/webapp/app/view/settings/settings.js b/web/gui/src/main/webapp/app/view/settings/settings.js
index 3197ff0..e5a3eba 100644
--- a/web/gui/src/main/webapp/app/view/settings/settings.js
+++ b/web/gui/src/main/webapp/app/view/settings/settings.js
@@ -36,7 +36,7 @@
     var pName = 'settings-details-panel',
         panelWidth = 540,
         topPdg = 60,
-        propOrder = ['fqComponent', 'id', 'type', 'value', 'defValue', 'desc'],
+        propOrder = ['fqComponent', 'prop', 'type', 'value', 'defValue', 'desc'],
         friendlyProps = [
             'Component', 'Property', 'Type', 'Value', 'Default Value',
             'Description'
@@ -93,7 +93,8 @@
             }
         }
 
-        ndiv('settings-title');
+        ndiv('settings-title-1');
+        ndiv('settings-title-2');
         ndiv('settings-props', true);
     }
 
@@ -111,7 +112,8 @@
     function populateTop(details) {
         var propsBody = top.select('.settings-props').append('tbody');
 
-        top.select('.settings-title').text(details.id);
+        top.select('.settings-title-1').text(details.component);
+        top.select('.settings-title-2').text(details.prop);
 
         propOrder.forEach(function (prop, i) {
             addProp(propsBody, i, details[prop]);