diff --git a/db_manager/db_app/static/css/visualization_functions.css b/db_manager/db_app/static/css/visualization_functions.css
index 9a366268..6d0565c4 100644
--- a/db_manager/db_app/static/css/visualization_functions.css
+++ b/db_manager/db_app/static/css/visualization_functions.css
@@ -131,7 +131,7 @@
 /* customizes taxa filters buttons*/
 
 #modal-body-file{
-  height: 100px;
+  height: 150px;
   overflow: auto;
 }
 
@@ -140,6 +140,16 @@
   margin-right: 1%;
 }
 
+#cutoffFileCheck{
+    float: left;
+}
+
+/*resize search box for gi*/
+#cutoffValue{
+    width: 50px;
+    float: right;
+}
+
 #modal-body-scheme{
   height: 100px;
 }
@@ -492,4 +502,4 @@
   border-color: grey; 
   border-width: 1px 0px 1px 0px;
   outline: none;
-}
\ No newline at end of file
+}
diff --git a/db_manager/db_app/static/js/input_file_handling/input_file_handler.js b/db_manager/db_app/static/js/input_file_handling/input_file_handler.js
index d1846ca4..7bc5d049 100644
--- a/db_manager/db_app/static/js/input_file_handling/input_file_handler.js
+++ b/db_manager/db_app/static/js/input_file_handling/input_file_handler.js
@@ -1,21 +1,21 @@
 // will cancel reader when defined... so during handleFileSelect
 const abortRead = (reader) => {
-  console.log('canceled reading of file')
+  console.log("canceled reading of file")
   // cancels the loading it self
-  document.getElementById('file_text').value = ''
-  read_json = ''
+  document.getElementById("file_text").value = ""
+  read_json = ""
 }
 
 // function to handle ONE file at a time (per button)
 // infile_id refers to the button id and text_id referes to the text form that reads the file
 const handleFileSelect = (infileId, textId, callback) => {
-  document.getElementById(infileId).addEventListener('change', function (e) {
+  document.getElementById(infileId).addEventListener("change", function (e) {
     first_file = true // bollean to check the existance of a first file
     var files = e.target.files // FileList object
     // append fle name to text fomr displaying current selection
 
     // checks if it is a json file extension
-    if (!files[0].name.includes('.json')) {
+    if (!files[0].name.includes(".json")) {
       alert("File extension not supported. Only '.json' files are supported.")
     } else {
       // append the filename to the form
diff --git a/db_manager/db_app/static/js/node_handling/reads_coloring.js b/db_manager/db_app/static/js/node_handling/reads_coloring.js
index e891d4b0..1088f264 100644
--- a/db_manager/db_app/static/js/node_handling/reads_coloring.js
+++ b/db_manager/db_app/static/js/node_handling/reads_coloring.js
@@ -30,7 +30,8 @@ const read_coloring = (g, list_gi, graphics, renderer) => {
       scale = chroma.scale(['blue', '#eacc00', 'maroon'])
       palette(scale, 20, readMode)
     } else {
-      read_color = chroma.mix('lightsalmon', 'maroon', perc).hex().replace('#', '0x')
+      newPerc = rangeConverter(perc, cutoffParser(), 1, 0, 1)
+      read_color = chroma.mix('lightsalmon', 'maroon', newPerc).hex().replace('#', '0x')
       scale = chroma.scale(['lightsalmon', 'maroon'])
       palette(scale, 20, readMode)
     }
@@ -145,9 +146,26 @@ const palette = (scale, x, readMode) => { // x is the number of colors to the
       color_element = scale(i / x).hex()
       $('#readLegend').append('<span class="grad-step" style="background-color:' + color_element + '; width:' + style_width + '%"></span>')
     }
-    $('#readLegend').append('<div class="header_taxa" id="min">0</div>')
-    $('#readLegend').append('<div class="header_taxa" id="med">0.5</div>')
+    $('#readLegend').append('<div class="header_taxa" id="min">0.6</div>')
+    $('#readLegend').append('<div class="header_taxa" id="med">0.8</div>')
     $('#readLegend').append('<div class="header_taxa" id="max">1</div>')
     document.getElementById('read_label').style.display = 'block' // show label
   }
 }
+
+// convertes a given range to valies between c and 1
+// TODO default behavior should be between 0.6 and 1 in accordance with
+// plasmidUNCover.py
+const rangeConverter = (x, oldMin, oldMax, newMin, newMax) => {
+  // initial range is between 0 and 1
+  // newMax should be 1
+  // newMin should be the one that may change on user input and default
+  // behavior should be 0.6--> this is done by cutoffParser()
+  const y = (x - oldMin) * (newMax - newMin) / (oldMax - oldMin) + newMin
+  return y
+}
+
+// function to get value from cutoffValue
+const cutoffParser = () => {
+  return ($("#cutoffValue").val() !== "") ? parseFloat($("#cutoffValue").val()) : 0.6
+}
diff --git a/db_manager/db_app/templates/index.html b/db_manager/db_app/templates/index.html
index 1fae0eee..c61dc769 100644
--- a/db_manager/db_app/templates/index.html
+++ b/db_manager/db_app/templates/index.html
@@ -88,9 +88,16 @@ <h4 class="modal-title">Select input file</h4>
                 <div class="checkbox col-md-12">Check for pairwise comparison mode
                   <label>
                     <!--autocomplete prevents checkbox from being checkd after refresh-->
-                    <input type="checkbox" id="check_file" autocomplete="off"> 
+                    <input type="checkbox" id="check_file" autocomplete="off">
                   </label>
                 </div>
+                <div>
+                  <div class="form-group" id="cutoffFileCheck">Provide a
+                    value between 0 and 1. Tip: default is 0.6.
+                    <input id="cutoffValue" type="text" class="form-control"
+                           placeholder="0.6"/>
+                  </div>
+                </div>
               </div>
             </div>