diff --git a/locust/configuration.py b/locust/configuration.py
index 0eef6d1396..f7f974771f 100644
--- a/locust/configuration.py
+++ b/locust/configuration.py
@@ -5,7 +5,7 @@
 from flask import make_response
 
 logger = logging.getLogger(__name__)
-CONFIG_PATH = '/tests/settings/config.json'
+CONFIG_PATH = '/squads/config.json'
 
 class ClientConfiguration:
     """
@@ -68,6 +68,20 @@ def update_json_config(self, json_added, json_path, options, list_column, config
         
         return make_response(json.dumps({'success':True, 'data':json.dumps(data, indent=4)}))
         
+    def collect_config_path(self, os_path, working_dir):
+        """
+        Collect configuration files path (files with .json extension) under specified path and return it.
+        """
+        collected = dict()
+        for root, dirs, files in os.walk(os_path+working_dir):
+            if files:
+                for file_ in files:
+                    if file_.endswith('.json'):
+                        full_path = os.path.abspath(os.path.join(root, file_))
+                        truncated_path = full_path.replace(os_path+working_dir, "")
+                        collected.update({full_path.replace(os_path, ""):full_path.replace(os_path+working_dir, "")})
+        return collected
+    
     @classmethod    
     def get_path(self, match):
         """
diff --git a/locust/static/locust.js b/locust/static/locust.js
index c9ec284c67..cbaea37dd1 100644
--- a/locust/static/locust.js
+++ b/locust/static/locust.js
@@ -148,32 +148,25 @@ var old_config;
 
 $(".edit_config_link").click(function(event) {
     event.preventDefault();
-    try{
-        $.ajax({
-            type: "GET",
-            url: "/config/get_config_content",
-            success: function(response){
-                old_config = JSON.parse(response.data)
-                json_editor.set(old_config);
-                $("#hidden_config_json").val(response.data);
-                $("#start").hide();
-                $("#ramp").hide();
-                $("#edit_config").show();
-                $(".status").addClass("none");
-                $("#config_tab").trigger("click");
-            }
-        }); 
-    }
-    catch(err){
-        alert("Failed to load configuration data.\n\nOriginal error message:\n" + err);
-    }
-    
+    loadConfig();
 });
 
 $("#directories .select2").select2({
     placeholder: "Select a state"
 });
 
+$('#load_config_btn').click(function(){
+    event.preventDefault();
+    if(checkConfigChanges()) {
+        $("#not_save_json_btn").attr("data-origin-link", "load config");
+        $("#save_json_btn").attr("data-origin-link", "load config");
+        $("#modal_confirm_save_json").modal();
+    }
+    else{
+        loadConfig();
+    }
+})
+
 let whichform = $('.upload_file_form_test_file')[0];
 
 $('#upload_py_submit').click(function(event){
@@ -182,11 +175,11 @@ $('#upload_py_submit').click(function(event){
     $('.upload_file_form_test_file').submit();
 });
 
-$('#upload_json_submit').click(function(event){
-    event.preventDefault();
-    whichform = $('.upload_file_form_json')[0];
-    $('.upload_file_form_json').submit();
-});
+// $('#upload_json_submit').click(function(event){
+//     event.preventDefault();
+//     whichform = $('.upload_file_form_json')[0];
+//     $('.upload_file_form_json').submit();
+// });
 
 $('.upload_file_form_test_file, .upload_file_form_json').submit(function(event) {
     event.preventDefault();
@@ -209,7 +202,7 @@ $('.upload_file_form_test_file, .upload_file_form_json').submit(function(event)
     })
 });
 
-$('#submit_json_btn').click(function(){
+$('#save_config_btn').click(function(){
     event.preventDefault();
     $('#hidden_config_json').val(JSON.stringify(json_editor.get(), null , 4));
     $('#json_config_form').submit();
@@ -325,8 +318,9 @@ $('#convert_csv_btn').click(function(){
 
 $(".config_new_test").click(function(event) {
     event.preventDefault();
-    if(JSON.stringify(old_config,null,4) != JSON.stringify(json_editor.get(),null,4)) {
+    if(checkConfigChanges()) {
         $("#not_save_json_btn").attr("data-origin-link", "new test");
+        $("#save_json_btn").attr("data-origin-link", "new test");
         $("#modal_confirm_save_json").modal();
     }
     else {
@@ -340,8 +334,9 @@ $(".config_new_test").click(function(event) {
 
 $(".config_ramp_test").click(function(event) {
     event.preventDefault();
-    if(JSON.stringify(old_config,null,4) != JSON.stringify(json_editor.get(),null,4)) {
+    if(checkConfigChanges()) {
         $("#not_save_json_btn").attr("data-origin-link", "new ramp");
+        $("#save_json_btn").attr("data-origin-link", "new ramp");
         $("#modal_confirm_save_json").modal();
     }
     else {
@@ -353,26 +348,103 @@ $(".config_ramp_test").click(function(event) {
     }
 });
 
-
+// if user click save button on unsaved configuration warning modal
 $("#save_json_btn").click(function(event) {
-    $("#submit_json_btn").trigger("click");
+    if($("#save_json_btn").attr("data-origin-link") == "load config"){
+        saveConfigWithoutRefresh();
+        loadConfig();
+    }
+    else {
+        $("#save_config_btn").trigger("click");
+    }
 });
 
+// if user click don't save button on unsaved configuration warning modal
 $("#not_save_json_btn").click(function(event) {
     $("#modal_confirm_save_json").modal("hide");
-    if($("#not_save_json_btn").attr("data-origin-link") == "new test") {
-        $("#start").show();
-        $("#ramp").hide();
+
+    if($("#not_save_json_btn").attr("data-origin-link") == "load config"){
+        loadConfig();
     }
-    else if($("#not_save_json_btn").attr("data-origin-link") == "new ramp") {
-        $("#ramp").show();
-        $("#start").hide();
+    else{
+        // if before warning modal appear, user click new test link
+        if($("#not_save_json_btn").attr("data-origin-link") == "new test") {
+            $("#start").show();
+            $("#ramp").hide();
+        }
+        // if before warning modal appear, user click new ramp link
+        else if($("#not_save_json_btn").attr("data-origin-link") == "new ramp") {
+            $("#ramp").show();
+            $("#start").hide();
+        }
+        $("#edit_config").hide();
+        $("#locust_count").focus().select();
+        $(".status").removeClass("none");
     }
-    $("#edit_config").hide();
-    $("#locust_count").focus().select();
-    $(".status").removeClass("none");
 });
 
+// to display selected config's content into editor
+function loadConfig(){
+    try{
+        $("#modal_loading").modal();
+        $.ajax({
+            type: "GET",
+            url: "/config/get_config_content",
+            data: {
+                "path": $("#select_config_options option:selected").val()
+            },
+            success: function(response){
+                old_config = JSON.parse(response.data)
+                json_editor.set(old_config);
+                $("#hidden_config_json").val(response.data);
+                $("#hidden_config_path").val($("#select_config_options option:selected").val());
+                $("#active_config_path").text($("#select_config_options option:selected").text())
+                $("#start").hide();
+                $("#ramp").hide();
+                $("#edit_config").show();
+                $(".status").addClass("none");
+            },
+            complete: function(){
+                setTimeout(function(){
+                    $("#modal_loading").modal("hide");
+                },1000);
+            }
+        }); 
+    }
+    catch(err){
+        alert("Failed to load configuration data.\n\nOriginal error message:\n" + err);
+    }
+}
+
+// to check if there are any changes from the configuration content
+function checkConfigChanges(){
+    return JSON.stringify(old_config,null,4) != JSON.stringify(json_editor.get(),null,4);
+}
+
+// save configuration without refreshing the page
+function saveConfigWithoutRefresh(){
+    $("#modal_confirm_save_json").modal("hide");
+    $('#hidden_config_json').val(JSON.stringify(json_editor.get(), null , 4));
+    var form = $('#json_config_form')[0];
+    var form_data = new FormData(form);
+    try{
+        $.ajax({
+            type: "POST",
+            url: "/config/save_json",
+            data: form_data,
+            enctype: "multipart/form-data",
+            contentType: false,
+            cache: false,
+            processData: false,
+            success: function(response){
+                alert("Changes has been saved");
+            }
+        });
+    }
+    catch(err){
+        alert("Failed to save configuration. \n\nOriginal error message:\n" + err);
+    }
+}
 
 /* END OF CONFIGURATION SECTION */
 
diff --git a/locust/static/style.css b/locust/static/style.css
index 92994f4096..46551c00b6 100644
--- a/locust/static/style.css
+++ b/locust/static/style.css
@@ -302,10 +302,50 @@ label[for="json_option"]+div{
     padding: 6px 15px 6px 0px !important;
 }
 
+.select2-results__option--highlighted[aria-selected]{
+    color: black !important;
+}
+
 #add-new-file-modal .select2-selection--single {
     width: 100%;
 }
 
+#load_config_form > .select2-container, #csv_file{
+    width: 328px !important;
+    float: left;
+    padding-top: 13px;
+}
+
+#load_config_form, #import_csv_form{ 
+    overflow: hidden !important;
+}
+
+#load_config_form > label{
+    float: left !important;
+    width: 190px;
+}
+
+#load_config_btn {
+    height: 36px;
+    width: 70px;
+    margin-left: 5px;
+    margin-top: 13px;
+}
+
+#import_csv_form > label {
+    float: left !important;
+    width: 100px;
+}
+
+#csv_file {
+    padding-top: 18px;
+}
+
+#import_csv_btn {
+    margin-top: 18px;
+}
+
+
 .start button,
 .edit button, .edit_config button[type=submit], .multiple_column button, 
 #new-test-confirmation .btn-newtest, #upload_json_submit, #upload_py_submit {
@@ -325,9 +365,9 @@ label[for="json_option"]+div{
     top: -53px;
 }
 
-#submit_json_btn{
+#save_config_btn{
     position: absolute;
-    top: 8px;
+    top: 100px;
     right: 10px;
 }
 
diff --git a/locust/templates/index.html b/locust/templates/index.html
index 96194d03d0..0773a348ab 100644
--- a/locust/templates/index.html
+++ b/locust/templates/index.html
@@ -81,13 +81,13 @@ <h2>Start new Locust swarm</h2>
                     <input type="hidden" name="type_swarm" value="start">
                     <label for="locustfile">Locust file to execute</label>
                     <div class="input-group">
-                    <select name="locustfile" id="locustfile" class="select2 select2-hidden-accessible select2-start-width" placeholder="Select type">
-                        <option value="" disabled selected>Select/Upload a test file</option>
-                        <option value="add_new_test_file">Upload test file</option>
-                        {% for name in available_locustfiles %}
-                            <option value="{{name}}">{{name}}</option>
-                        {% endfor %}
-                    </select>
+                        <select name="locustfile" id="locustfile" class="select2 select2-hidden-accessible select2-start-width" placeholder="Select type">
+                            <option value="" disabled selected>Select/Upload a test file</option>
+                            <option value="add_new_test_file">Upload test file</option>
+                            {% for name in available_locustfiles %}
+                                <option value="{{name}}">{{name}}</option>
+                            {% endfor %}
+                        </select>
                     </div>
                     <br>
                     <a href="#" class="edit_config_link">Edit Config</a>
@@ -230,7 +230,7 @@ <h2>Ramping</h2>
         <div class="edit_config" id="edit_config" style="display:none;">
             <div class="head_section">
                 <div class="container">
-                    <div class="title_header">Main Configuration</div>
+                    <div class="title_header">Configuration</div>
                     <ul id="link_navigation">
                         <li><a href="#" class="config_new_test">New Test</a></li>
                         {% if ramp %}
@@ -239,52 +239,46 @@ <h2>Ramping</h2>
                     </ul>
                 </div>
             </div>
-
             <div class="custom_padder container body_section">
-                <label>Import CSV</label>
+                <form id="load_config_form">
+                    <label for="">Select configuration file</label>
+                    <select name="select_config_options" id="select_config_options" class="select2 select2-hidden-accessible select2-start-width" placeholder="Select type">
+                        {% for key in available_config_files %}
+                            {% if key == "squads/config.json" %}
+                                <option value="{{key}}" selected="selected">{{available_config_files[key]}}</option>  
+                            {%  else %}
+                                <option value="{{key}}">{{available_config_files[key]}}</option>
+                            {%  endif %}
+                        {% endfor %}
+                    </select>
+                    <button id="load_config_btn">Load</button>
+                </form>
+                <br/>
                 <form method="POST" enctype="multipart/form-data" id="import_csv_form">
+                    <label>Import CSV</label>
                     <input type="file" accept=".csv" name="csv_file" id="csv_file" />
                     <input type="submit" value="Import" id="import_csv_btn" />
                 </form>
-                <br>
+                <label>Currently reading from: <a id="active_config_path"></a></label>
                 <form action="/config/save_json" method="POST" id="json_config_form">
                     <div id="json_editor" name="json_editor"></div>
-                    <input type="hidden" id="hidden_config_json" name="final_json" value="{{json_config}}">
-                    <button type="submit" id="submit_json_btn">Save</button>
+                    <input type="hidden" id="hidden_config_json" name="final_config" value="{{json_config}}">
+                    <input type="hidden" id="hidden_config_path" name="config_path">
+                    <button type="submit" id="save_config_btn">Save</button>
                 </form>
             </div>
-            <div class="modal fade" id="modal_confirm_save_json" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-                <div class="modal-dialog" role="document">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                <span aria-hidden="true">&times;</span>
-                            </button>
-                            <h5 class="modal-title" id="myModalLabel">Unsaved Configuration</h5>
-                        </div>
-                        <div class="modal-body">
-                            You have unsaved configuration. Do you want to save it?
-                        </div>
-                        <div class="modal-footer">
-                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                            <button type="button" class="btn btn-default" id="not_save_json_btn" data-origin-link="">Don't Save</button>
-                            <button type="button" class="btn btn-primary" id="save_json_btn">Save</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="custom_padder container body_section">
+            <!-- <div class="custom_padder container body_section">
                 <div class="title_header">Team Configuration</div>
                 <br/>
                 <button type="button" data-toggle="modal" data-target="#upload-json-modal" >Upload JSON</button>
-            </div>
+            </div> -->
         </div>
 
-        <div id="upload-json-modal" class="modal fade" role="dialog">
-            <div class="modal-dialog">
+        <!-- <div id="upload-json-modal" class="modal fade" role="dialog">
+            <div class="modal-dialog"> -->
           
               <!-- Modal content-->
-              <div class="modal-content">
+              <!-- <div class="modal-content">
                 <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal">&times;</button>
                   <h4 class="modal-title">Upload JSON</h4>
@@ -308,6 +302,37 @@ <h4 class="modal-title">Upload JSON</h4>
                 </div>
               </div>
             </div>
+        </div> -->  
+        
+        <div class="modal fade" id="modal_loading" aria-hidden="true">
+            <div class="modal-dialog" >
+                <div class="modal-content">
+                    <div class="modal-body">
+                        Loading...
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="modal fade" id="modal_confirm_save_json" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                        <h5 class="modal-title" id="myModalLabel">Unsaved Configuration</h5>
+                    </div>
+                    <div class="modal-body">
+                        You have unsaved configuration. Do you want to save it?
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-default" id="not_save_json_btn" data-origin-link="">Don't Save</button>
+                        <button type="button" class="btn btn-primary" id="save_json_btn" data-origin-link="">Save</button>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <div class="multiple_column" id="multiple_column" style="display:none;">
diff --git a/locust/web.py b/locust/web.py
index 314030043b..4f1a4af9dd 100644
--- a/locust/web.py
+++ b/locust/web.py
@@ -4,7 +4,7 @@
 from time import time
 from datetime import datetime, timedelta
 from itertools import chain
-from collections import defaultdict
+from collections import defaultdict, OrderedDict
 from itertools import chain
 from time import time
 
@@ -61,11 +61,11 @@ def index():
     else:
         edit_label = ""
 
-    pages = tests_loader.populate_directories(fileio.os_path(),'tests/pages/')
-    modules = tests_loader.populate_directories(fileio.os_path(),'tests/modules/')
-    modules.update(pages)
-    directories = modules
-    all_directories = tests_loader.populate_directories(fileio.os_path(),'tests/')
+    directories = tests_loader.populate_directories(fileio.os_path(),'squads/')
+    # all_directories = tests_loader.populate_directories(fileio.os_path(),'tests/')
+    
+    cc = configuration.ClientConfiguration()
+    available_config_files = cc.collect_config_path(fileio.os_path(),'squads/')
 
     return render_template("index.html",
         state=runners.locust_runner.state,
@@ -74,7 +74,8 @@ def index():
         user_count=runners.locust_runner.user_count,
         available_locustfiles = sorted(runners.locust_runner.available_locustfiles.keys()),
         test_file_directories = sorted(directories),
-        all_test_file_directories = sorted(all_directories),
+        # all_test_file_directories = sorted(all_directories),
+        available_config_files = OrderedDict(sorted(available_config_files.items())),
         version=version,
         ramp = _ramp,
         host=host
@@ -255,10 +256,9 @@ def ramp():
     response.headers["Content-type"] = "application/json"
     return response
 
-
 @app.route("/config/get_config_content", methods=["GET"])
 def get_config_content():
-    load_config = fileio.read(configuration.CONFIG_PATH)
+    load_config = fileio.read(request.args.get("path"))
     response = make_response(json.dumps({'data':load_config}))
     response.headers["Content-type"] = "application/json"
     return response
@@ -350,11 +350,12 @@ def expected_response(json_dumps):
 @app.route("/config/save_json", methods=["POST"])
 def save_json():
     assert request.method == "POST"
-    config_json = str(request.form["final_json"])
+    config_content = str(request.form["final_config"])
+    config_path = request.form["config_path"]
 
     try:
-        success, message =  fileio.write(configuration.CONFIG_PATH, config_json)
-        events.master_new_configuration.fire(new_config=config_json)
+        success, message =  fileio.write(config_path, config_content)
+        events.master_new_configuration.fire(new_config=config_content)
         response = make_response(json.dumps({'success':success, 'message': message}))
     except Exception as err:
         response = make_response(json.dumps({'success':success, 'message': message}))