diff --git a/Adaptation/FileHandlers/json/StaticSite/html/122508.html b/Adaptation/FileHandlers/json/StaticSite/html/122508.html
index 04074e3..12e1ca9 100644
--- a/Adaptation/FileHandlers/json/StaticSite/html/122508.html
+++ b/Adaptation/FileHandlers/json/StaticSite/html/122508.html
@@ -40,7 +40,7 @@
             </div>
         </div>
     </div>
-    <div class="container-fluid body-content" style="margin-top: 30px;">
+    <div class="container-fluid body-content" style="margin-top: 80px; margin-left: 15px;">
 
         <div style="height: 550px;" id="HeaderGridDiv">
             <table id="HeaderGrid"></table>
diff --git a/Adaptation/FileHandlers/json/StaticSite/html/122514.html b/Adaptation/FileHandlers/json/StaticSite/html/122514.html
index b45e128..ee42a75 100644
--- a/Adaptation/FileHandlers/json/StaticSite/html/122514.html
+++ b/Adaptation/FileHandlers/json/StaticSite/html/122514.html
@@ -40,7 +40,7 @@
             </div>
         </div>
     </div>
-    <div class="container-fluid body-content" style="margin-top: 30px;">
+    <div class="container-fluid body-content" style="margin-top: 80px; margin-left: 15px;">
 
         <div style="height: 550px;" id="HeaderGridDiv">
             <table id="HeaderGrid"></table>
diff --git a/Adaptation/FileHandlers/json/StaticSite/html/122517.html b/Adaptation/FileHandlers/json/StaticSite/html/122517.html
index dbfbc18..6b07ab5 100644
--- a/Adaptation/FileHandlers/json/StaticSite/html/122517.html
+++ b/Adaptation/FileHandlers/json/StaticSite/html/122517.html
@@ -40,7 +40,7 @@
             </div>
         </div>
     </div>
-    <div class="container-fluid body-content" style="margin-top: 30px;">
+    <div class="container-fluid body-content" style="margin-top: 80px; margin-left: 15px;">
 
         <div style="height: 550px;" id="HeaderGridDiv">
             <table id="HeaderGrid"></table>
diff --git a/Adaptation/FileHandlers/json/StaticSite/html/123066.html b/Adaptation/FileHandlers/json/StaticSite/html/123066.html
index 06ea2e8..c456e5a 100644
--- a/Adaptation/FileHandlers/json/StaticSite/html/123066.html
+++ b/Adaptation/FileHandlers/json/StaticSite/html/123066.html
@@ -40,7 +40,7 @@
             </div>
         </div>
     </div>
-    <div class="container-fluid body-content" style="margin-top: 30px;">
+    <div class="container-fluid body-content" style="margin-top: 80px; margin-left: 15px;">
 
         <div style="height: 550px;" id="HeaderGridDiv">
             <table id="HeaderGrid"></table>
diff --git a/Adaptation/FileHandlers/json/StaticSite/html/123067.html b/Adaptation/FileHandlers/json/StaticSite/html/123067.html
index 9b55567..a32e0ce 100644
--- a/Adaptation/FileHandlers/json/StaticSite/html/123067.html
+++ b/Adaptation/FileHandlers/json/StaticSite/html/123067.html
@@ -40,7 +40,7 @@
             </div>
         </div>
     </div>
-    <div class="container-fluid body-content" style="margin-top: 30px;">
+    <div class="container-fluid body-content" style="margin-top: 80px; margin-left: 15px;">
 
         <div style="height: 550px;" id="HeaderGridDiv">
             <table id="HeaderGrid"></table>
diff --git a/Adaptation/FileHandlers/json/StaticSite/html/126169.html b/Adaptation/FileHandlers/json/StaticSite/html/126169.html
index eacc9c8..df0ed84 100644
--- a/Adaptation/FileHandlers/json/StaticSite/html/126169.html
+++ b/Adaptation/FileHandlers/json/StaticSite/html/126169.html
@@ -40,7 +40,7 @@
             </div>
         </div>
     </div>
-    <div class="container-fluid body-content" style="margin-top: 30px;">
+    <div class="container-fluid body-content" style="margin-top: 80px; margin-left: 15px;">
 
         <div style="height: 550px;" id="HeaderGridDiv">
             <table id="HeaderGrid"></table>
diff --git a/Adaptation/FileHandlers/json/StaticSite/html/leo.html b/Adaptation/FileHandlers/json/StaticSite/html/leo.html
index 9f22209..98df05d 100644
--- a/Adaptation/FileHandlers/json/StaticSite/html/leo.html
+++ b/Adaptation/FileHandlers/json/StaticSite/html/leo.html
@@ -37,7 +37,7 @@
             </div>
         </div>
     </div>
-    <div class="container-fluid body-content" style="margin-top: 30px;">
+    <div class="container-fluid body-content" style="margin-top: 80px; margin-left: 15px;">
 
         <div style="height: 550px;" id="HeaderGridDiv">
             <table id="HeaderGrid"></table>
diff --git a/Adaptation/FileHandlers/json/StaticSite/html/mes.html b/Adaptation/FileHandlers/json/StaticSite/html/mes.html
index ee8cbc1..a69a160 100644
--- a/Adaptation/FileHandlers/json/StaticSite/html/mes.html
+++ b/Adaptation/FileHandlers/json/StaticSite/html/mes.html
@@ -37,7 +37,7 @@
             </div>
         </div>
     </div>
-    <div class="container-fluid body-content" style="margin-top: 30px;">
+    <div class="container-fluid body-content" style="margin-top: 80px; margin-left: 15px;">
 
         <div style="height: 550px;" id="HeaderGridDiv">
             <table id="HeaderGrid"></table>
diff --git a/Adaptation/FileHandlers/json/StaticSite/html/with-parents.html b/Adaptation/FileHandlers/json/StaticSite/html/with-parents.html
index 4cbccbf..4a78036 100644
--- a/Adaptation/FileHandlers/json/StaticSite/html/with-parents.html
+++ b/Adaptation/FileHandlers/json/StaticSite/html/with-parents.html
@@ -39,7 +39,7 @@
             </div>
         </div>
     </div>
-    <div class="container-fluid body-content" style="margin-top: 30px;">
+    <div class="container-fluid body-content" style="margin-top: 80px; margin-left: 15px;">
 
         <div style="height: 550px;" id="HeaderGridDiv">
             <table id="HeaderGrid"></table>
diff --git a/Adaptation/FileHandlers/json/StaticSite/js/wsjf.js b/Adaptation/FileHandlers/json/StaticSite/js/wsjf.js
index 2a7a256..a102b45 100644
--- a/Adaptation/FileHandlers/json/StaticSite/js/wsjf.js
+++ b/Adaptation/FileHandlers/json/StaticSite/js/wsjf.js
@@ -20,6 +20,10 @@ function compareRiskReductionMinusOpportunityEnablementFunction(a, b) {
     return b.RiskReductionMinusOpportunityEnablement - b.RiskReductionMinusOpportunityEnablement || b.ParentId - a.ParentId || a.Id - b.Id;
 }
 
+function compareCostOfDelay(a, b) {
+    return b.CoD - b.CoD || b.ParentId - a.ParentId || a.Id - b.Id;
+}
+
 function showOne(rowData) {
     if (rowData == null)
         return;
@@ -123,12 +127,12 @@ function updateCoD(records) {
     iHigh = 0;
     for (var i = 0; i < records.length; i++) {
         workItem = records[i];
-        if (workItem.Priority[0] !== '1') {
+        if (workItem.Priority[0] !== '1' && workItem.Priority[0] !== '4') {
             workItem.EffortRank = 0;
             workItem.EffortFibonacci = 1;
         }
         else {
-            workItem.EffortRank = i + 1;
+            workItem.EffortRank = (((i + 1) / records.length) * 100).toFixed();
             workItem.EffortFibonacci = fibonacci[iHigh];
             iHigh += 1;
         }
@@ -137,12 +141,12 @@ function updateCoD(records) {
     iHigh = 0;
     for (var i = 0; i < records.length; i++) {
         workItem = records[i];
-        if (workItem.Priority[0] !== '1') {
+        if (workItem.Priority[0] !== '1' && workItem.Priority[0] !== '4') {
             workItem.BusinessValueRank = 0;
             workItem.BusinessValueFibonacci = 1;
         }
         else {
-            workItem.BusinessValueRank = i + 1;
+            workItem.BusinessValueRank = (((i + 1) / records.length) * 100).toFixed();
             workItem.BusinessValueFibonacci = fibonacci[iHigh];
             iHigh += 1;
         }
@@ -151,12 +155,12 @@ function updateCoD(records) {
     iHigh = 0;
     for (var i = 0; i < records.length; i++) {
         workItem = records[i];
-        if (workItem.Priority[0] !== '1') {
+        if (workItem.Priority[0] !== '1' && workItem.Priority[0] !== '4') {
             workItem.TimeCriticalityRank = 0;
             workItem.TimeCriticalityFibonacci = 1;
         }
         else {
-            workItem.TimeCriticalityRank = i + 1;
+            workItem.TimeCriticalityRank = (((i + 1) / records.length) * 100).toFixed();
             workItem.TimeCriticalityFibonacci = fibonacci[iHigh];
             iHigh += 1;
         }
@@ -165,23 +169,43 @@ function updateCoD(records) {
     iHigh = 0;
     for (var i = 0; i < records.length; i++) {
         workItem = records[i];
-        if (workItem.Priority[0] !== '1') {
+        if (workItem.Priority[0] !== '1' && workItem.Priority[0] !== '4') {
             workItem.RiskReductionMinusOpportunityEnablementRank = 0;
             workItem.RiskReductionMinusOpportunityEnablementFibonacci = 1;
         }
         else {
-            workItem.RiskReductionMinusOpportunityEnablementRank = i + 1;
+            workItem.RiskReductionMinusOpportunityEnablementRank = (((i + 1) / records.length) * 100).toFixed();
             workItem.RiskReductionMinusOpportunityEnablementFibonacci = fibonacci[iHigh];
             iHigh += 1;
         }
     }
+    records.sort(compareCostOfDelay);
     for (var i = 0; i < records.length; i++) {
         workItem = records[i];
         workItem.CoD = workItem.RiskReductionMinusOpportunityEnablementFibonacci + workItem.TimeCriticalityFibonacci + workItem.BusinessValueFibonacci;
-        if (workItem.Priority[0] !== '1')
+    }
+    records.sort(compareCostOfDelay);
+    for (var i = 0; i < records.length; i++) {
+        workItem = records[i];
+        if (workItem.Priority[0] !== '1' && workItem.Priority[0] !== '4') {
+            workItem.CoD = 0.000001;
+            workItem.CoDRank = 0;
+        }
+        else {
+            workItem.CoDRank = (((i + 1) / records.length) * 100).toFixed();
+            // workItem.CoD = (workItem.CoD / workItem.CoDFibonacci).toFixed(6);
+        }
+    }
+    for (var i = 0; i < records.length; i++) {
+        workItem = records[i];
+        if (workItem.Priority[0] !== '1' && workItem.Priority[0] !== '4') {
             workItem.WeightedShortestJobFirst = 0.000001;
-        else
+            workItem.WeightedShortestJobFirstRank = 0;
+        }
+        else {
+            workItem.WeightedShortestJobFirstRank = (((i + 1) / records.length) * 100).toFixed();
             workItem.WeightedShortestJobFirst = (workItem.CoD / workItem.EffortFibonacci).toFixed(6);
+        }
     }
 }
 
@@ -246,11 +270,11 @@ function setRecords(workItems) {
             "</td><td>" + record.Tags +
             "</td><td>" + record.State +
             "</td><td>" + record.Priority +
-            "</td><td>" + record.RiskReductionMinusOpportunityEnablement + '-' + record.RiskReductionMinusOpportunityEnablementRank + '-' + record.RiskReductionMinusOpportunityEnablementFibonacci +
-            "</td><td>" + record.TimeCriticality + '-' + record.TimeCriticalityRank + '-' + record.TimeCriticalityFibonacci +
-            "</td><td>" + record.BusinessValue + '-' + record.BusinessValueRank + '-' + record.BusinessValueFibonacci +
-            "</td><td>" + record.CoD +
-            "</td><td>" + record.Effort + '-' + record.EffortRank + '-' + record.EffortFibonacci +
+            "</td><td>" + record.RiskReductionMinusOpportunityEnablement + '-' + record.RiskReductionMinusOpportunityEnablementRank + '% -' + record.RiskReductionMinusOpportunityEnablementFibonacci +
+            "</td><td>" + record.TimeCriticality + '-' + record.TimeCriticalityRank + '% -' + record.TimeCriticalityFibonacci +
+            "</td><td>" + record.BusinessValue + '-' + record.BusinessValueRank + '% -' + record.BusinessValueFibonacci +
+            "</td><td>" + record.CoD + '-' + record.CoDRank + '% -' +
+            "</td><td>" + record.Effort + '-' + record.EffortRank + '% -' + record.EffortFibonacci +
             "</td><td>" + record.WeightedShortestJobFirst +
             "</td><td><a href='#' class='up'>Up</a></td><td><a href='#' class='down'>Down</a></td></tr>";
     }
diff --git a/Adaptation/FileHandlers/json/StaticSite/styles/122508.css b/Adaptation/FileHandlers/json/StaticSite/styles/122508.css
index 915c0ab..976e233 100644
--- a/Adaptation/FileHandlers/json/StaticSite/styles/122508.css
+++ b/Adaptation/FileHandlers/json/StaticSite/styles/122508.css
@@ -3,7 +3,6 @@
     font-size: 12px;
     height: 550px;
     min-width: 1200px;
-    max-width: 1200px;
 }
 
 #HeaderGrid {
diff --git a/Adaptation/FileHandlers/json/StaticSite/styles/122514.css b/Adaptation/FileHandlers/json/StaticSite/styles/122514.css
index 915c0ab..976e233 100644
--- a/Adaptation/FileHandlers/json/StaticSite/styles/122514.css
+++ b/Adaptation/FileHandlers/json/StaticSite/styles/122514.css
@@ -3,7 +3,6 @@
     font-size: 12px;
     height: 550px;
     min-width: 1200px;
-    max-width: 1200px;
 }
 
 #HeaderGrid {
diff --git a/Adaptation/FileHandlers/json/StaticSite/styles/122517.css b/Adaptation/FileHandlers/json/StaticSite/styles/122517.css
index 915c0ab..976e233 100644
--- a/Adaptation/FileHandlers/json/StaticSite/styles/122517.css
+++ b/Adaptation/FileHandlers/json/StaticSite/styles/122517.css
@@ -3,7 +3,6 @@
     font-size: 12px;
     height: 550px;
     min-width: 1200px;
-    max-width: 1200px;
 }
 
 #HeaderGrid {
diff --git a/Adaptation/FileHandlers/json/StaticSite/styles/123066.css b/Adaptation/FileHandlers/json/StaticSite/styles/123066.css
index 915c0ab..976e233 100644
--- a/Adaptation/FileHandlers/json/StaticSite/styles/123066.css
+++ b/Adaptation/FileHandlers/json/StaticSite/styles/123066.css
@@ -3,7 +3,6 @@
     font-size: 12px;
     height: 550px;
     min-width: 1200px;
-    max-width: 1200px;
 }
 
 #HeaderGrid {
diff --git a/Adaptation/FileHandlers/json/StaticSite/styles/123067.css b/Adaptation/FileHandlers/json/StaticSite/styles/123067.css
index 915c0ab..976e233 100644
--- a/Adaptation/FileHandlers/json/StaticSite/styles/123067.css
+++ b/Adaptation/FileHandlers/json/StaticSite/styles/123067.css
@@ -3,7 +3,6 @@
     font-size: 12px;
     height: 550px;
     min-width: 1200px;
-    max-width: 1200px;
 }
 
 #HeaderGrid {
diff --git a/Adaptation/FileHandlers/json/StaticSite/styles/126169.css b/Adaptation/FileHandlers/json/StaticSite/styles/126169.css
index 915c0ab..976e233 100644
--- a/Adaptation/FileHandlers/json/StaticSite/styles/126169.css
+++ b/Adaptation/FileHandlers/json/StaticSite/styles/126169.css
@@ -3,7 +3,6 @@
     font-size: 12px;
     height: 550px;
     min-width: 1200px;
-    max-width: 1200px;
 }
 
 #HeaderGrid {
diff --git a/Adaptation/FileHandlers/json/StaticSite/styles/leo.css b/Adaptation/FileHandlers/json/StaticSite/styles/leo.css
index 915c0ab..976e233 100644
--- a/Adaptation/FileHandlers/json/StaticSite/styles/leo.css
+++ b/Adaptation/FileHandlers/json/StaticSite/styles/leo.css
@@ -3,7 +3,6 @@
     font-size: 12px;
     height: 550px;
     min-width: 1200px;
-    max-width: 1200px;
 }
 
 #HeaderGrid {
diff --git a/Adaptation/FileHandlers/json/StaticSite/styles/mes.css b/Adaptation/FileHandlers/json/StaticSite/styles/mes.css
index 915c0ab..976e233 100644
--- a/Adaptation/FileHandlers/json/StaticSite/styles/mes.css
+++ b/Adaptation/FileHandlers/json/StaticSite/styles/mes.css
@@ -3,7 +3,6 @@
     font-size: 12px;
     height: 550px;
     min-width: 1200px;
-    max-width: 1200px;
 }
 
 #HeaderGrid {
diff --git a/Adaptation/FileHandlers/json/StaticSite/styles/with-parents.css b/Adaptation/FileHandlers/json/StaticSite/styles/with-parents.css
index 915c0ab..976e233 100644
--- a/Adaptation/FileHandlers/json/StaticSite/styles/with-parents.css
+++ b/Adaptation/FileHandlers/json/StaticSite/styles/with-parents.css
@@ -3,7 +3,6 @@
     font-size: 12px;
     height: 550px;
     min-width: 1200px;
-    max-width: 1200px;
 }
 
 #HeaderGrid {