diff --git a/assets/css/main.css b/assets/css/main.css
index d7b6768e..876af0f9 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -64,6 +64,10 @@ body {
   stroke: gray;
 }
 
+.package rect {
+  fill:green;
+  stroke:green;
+}
 .clue-license rect {
   fill: #3984b6;
   stroke: #3984b6;
diff --git a/assets/js/scancode.js b/assets/js/scancode.js
index 31d7b2fd..86f281f1 100644
--- a/assets/js/scancode.js
+++ b/assets/js/scancode.js
@@ -179,7 +179,12 @@ $(document).ready(function () {
                 .append("g")
                 .attr("class", function (d) { return "clue-" + d; })
                 .style("opacity", 0);
-
+            var packageNodes = fileNodes.filter(function(d) {
+              return d.scanData.packages.length > 0
+            })
+            packageNodes
+                .selectAll(".clue-filename")
+                .attr("class","clue-filename package")
             // Append clue rect
             var newRectNode = newClueNodes.append("rect");
 
@@ -189,7 +194,7 @@ $(document).ready(function () {
                 .text(function (d,i,j) {
                     var data = newClueNodes[j].parentNode.__data__;
                     if (d === 'filename') {
-                        return data.name
+                      return data.name
                     } else if (d === 'license') {
                         return $.map(data.scanData.licenses, function(license, i) {
                             return license.short_name;
@@ -544,4 +549,4 @@ $(document).ready(function () {
     // Make node view modal box draggable
     $("#nodeModal").draggable({ handle: ".modal-header" });
 
-});
\ No newline at end of file
+});